[stdf]Update Toast compoent, demo and documents.

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

@@ -2,42 +2,42 @@
 <script>
 	import { Toast, Cell, Button, Loading } from '../../../../../packages/stdf/components';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
-	let visible22 = false;
-	let visible23 = false;
-	let visible24 = false;
-	let visible25 = false;
-	let visible26 = false;
-	let visible27 = false;
-	let visible28 = false;
-	let visible29 = false;
-	let visible30 = false;
-	let visible31 = false;
-	let visible32 = false;
-
-	let time = 4;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
+	let visible22 = $state(false);
+	let visible23 = $state(false);
+	let visible24 = $state(false);
+	let visible25 = $state(false);
+	let visible26 = $state(false);
+	let visible27 = $state(false);
+	let visible28 = $state(false);
+	let visible29 = $state(false);
+	let visible30 = $state(false);
+	let visible31 = $state(false);
+	let visible32 = $state(false);
+
+	let time = $state(4);
 	let timer = null;
-	const useSlotFun = () => {
+	const useSnippetFun = () => {
 		visible25 = true;
 		timer = setInterval(() => {
 			time--;
@@ -51,22 +51,22 @@
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
 	<Toast bind:visible={visible1} message="Light hint" />
 
-	<Cell title="Long text prompt" on:click={() => (visible2 = true)} />
+	<Cell title="Long text prompt" onclick={() => (visible2 = true)} />
 	<Toast
 		bind:visible={visible2}
 		message="When the character count is too long, it is generally not recommended to display too much content here!"
 	/>
 
-	<Cell title="Do not block clicks" on:click={() => (visible3 = true)} />
+	<Cell title="Do not block clicks" onclick={() => (visible3 = true)} />
 	<Toast bind:visible={visible3} clickable message="The content below the mask can also be clicked" />
 
-	<Cell title="Fixed display time" on:click={() => (visible4 = true)} />
+	<Cell title="Fixed display time" onclick={() => (visible4 = true)} />
 	<Toast bind:visible={visible4} duration={6000} message="It turns off automatically after 6 seconds" />
 
-	<Cell title="Non-automatic closing" on:click={() => (visible5 = true)} />
+	<Cell title="Non-automatic closing" onclick={() => (visible5 = true)} />
 	<Toast
 		bind:visible={visible5}
 		duration={0}
@@ -74,67 +74,67 @@
 		message="This prompt will not automatically close, please click the button to close"
 	/>
 
-	<Cell title="Success message" on:click={() => (visible6 = true)} />
+	<Cell title="Success message" onclick={() => (visible6 = true)} />
 	<Toast bind:visible={visible6} type="success" message="Success message" />
 
-	<Cell title="Failure prompt" on:click={() => (visible7 = true)} />
+	<Cell title="Failure prompt" onclick={() => (visible7 = true)} />
 	<Toast bind:visible={visible7} type="error" message="Failure prompt" />
 
-	<Cell title="Warning prompt" on:click={() => (visible8 = true)} />
+	<Cell title="Warning prompt" onclick={() => (visible8 = true)} />
 	<Toast bind:visible={visible8} type="warning" message="Warning prompt" />
 
-	<Cell title="Information prompt" on:click={() => (visible9 = true)} />
+	<Cell title="Information prompt" onclick={() => (visible9 = true)} />
 	<Toast bind:visible={visible9} type="info" message="Information prompt" />
 
-	<Cell title="Load prompt" on:click={() => (visible30 = true)} />
+	<Cell title="Load prompt" onclick={() => (visible30 = true)} />
 	<Toast bind:visible={visible30} type="loading" message="Under load..." />
 
-	<Cell title="Theme color loading prompt" on:click={() => (visible31 = true)} />
+	<Cell title="Theme color loading prompt" onclick={() => (visible31 = true)} />
 	<Toast bind:visible={visible31} type="loading" loading={{ theme: true }} message="Under load..." />
 
-	<Cell title="Loading prompt for # 1_3" on:click={() => (visible32 = true)} />
+	<Cell title="Loading prompt for # 1_3" onclick={() => (visible32 = true)} />
 	<Toast bind:visible={visible32} type="loading" loading={{ type: '1_3' }} message="Under load..." />
 
-	<Cell title="Custom type" on:click={() => (visible27 = true)} />
-	<Toast bind:visible={visible27} type="ri-thumb-up-fill" message="You are so good!" />
+	<Cell title="Custom type" onclick={() => (visible27 = true)} />
+	<Toast bind:visible={visible27} type="icon" icon={{ name: 'ri-thumb-up-fill' }} message="You are so good!" />
 
-	<Cell title="The mask is opaque" on:click={() => (visible10 = true)} />
-	<Toast bind:visible={visible10} mask={{ opacity: 0.3 }} message="Mask transparency is 0.3" />
+	<Cell title="The mask is opaque" onclick={() => (visible10 = true)} />
+	<Toast bind:visible={visible10} mask={{ opacity: '0.3' }} message="Mask transparency is 0.3" />
 
-	<Cell title="Reverse color mask" on:click={() => (visible11 = true)} />
-	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: 0.5 }} message="Reverse color mask" />
+	<Cell title="Reverse color mask" onclick={() => (visible11 = true)} />
+	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: '0.5' }} message="Reverse color mask" />
 
-	<Cell title="Mask blur" on:click={() => (visible12 = true)} />
-	<Toast bind:visible={visible12} mask={{ opacity: 0, backdropBlur: 'base' }} message="The content below the mask is blurry" />
+	<Cell title="Mask blur" onclick={() => (visible12 = true)} />
+	<Toast bind:visible={visible12} mask={{ opacity: '0', backdropBlur: 'base' }} message="The content below the mask is blurry" />
 
-	<Cell title="Faster transition" on:click={() => (visible13 = true)} />
+	<Cell title="Faster transition" onclick={() => (visible13 = true)} />
 	<Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="The transition time is 150ms" />
 
-	<Cell title="Slow transition" on:click={() => (visible14 = true)} />
+	<Cell title="Slow transition" onclick={() => (visible14 = true)} />
 	<Toast bind:visible={visible14} transitionParams={{ duration: 1000 }} message="The transition time is 1s" />
 
-	<Cell title="Fade in" on:click={() => (visible15 = true)} />
+	<Cell title="Fade in" onclick={() => (visible15 = true)} />
 	<Toast bind:visible={visible15} transitionType="fade" message="Fade in presentation" />
 
-	<Cell title="Move down" on:click={() => (visible16 = true)} />
+	<Cell title="Move down" onclick={() => (visible16 = true)} />
 	<Toast bind:visible={visible16} transitionType="fly" transitionParams={{ y: -150 }} message="Move down into presentation" />
 
-	<Cell title="Move in to the right" on:click={() => (visible17 = true)} />
+	<Cell title="Move in to the right" onclick={() => (visible17 = true)} />
 	<Toast bind:visible={visible17} transitionType="fly" transitionParams={{ x: -150 }} message="Move right into presentation" />
 
-	<Cell title="expansion" on:click={() => (visible18 = true)} />
+	<Cell title="expansion" onclick={() => (visible18 = true)} />
 	<Toast bind:visible={visible18} transitionType="slide" message="Unfold and present" />
 
-	<Cell title="blur" on:click={() => (visible19 = true)} />
+	<Cell title="blur" onclick={() => (visible19 = true)} />
 	<Toast bind:visible={visible19} transitionType="blur" transitionParams={{ duration: 1000 }} message="Fuzzy rendering" />
 
-	<Cell title="No transition" on:click={() => (visible20 = true)} />
-	<Toast bind:visible={visible20} transitionType="none" message="Direct presentation without transition" />
+	<Cell title="No transition" onclick={() => (visible20 = true)} />
+	<Toast bind:visible={visible20} transitionType={null} message="Direct presentation without transition" />
 
-	<Cell title="Exit zoom animation" on:click={() => (visible28 = true)} />
+	<Cell title="Exit zoom animation" onclick={() => (visible28 = true)} />
 	<Toast bind:visible={visible28} outDuration={300} message="The zoom animation time on exit is 300ms" />
 
-	<Cell title="Exit Move out animation" on:click={() => (visible29 = true)} />
+	<Cell title="Exit Move out animation" onclick={() => (visible29 = true)} />
 	<Toast
 		bind:visible={visible29}
 		outDuration={300}
@@ -143,20 +143,20 @@
 		message="When exiting, move out animation time is 300ms"
 	/>
 
-	<Cell title="Delayed occurrence" on:click={() => (visible21 = true)} />
+	<Cell title="Delayed occurrence" onclick={() => (visible21 = true)} />
 	<Toast bind:visible={visible21} transitionParams={{ delay: 1000 }} message="Click for 1 second and then display" />
 
-	<Cell title="top" on:click={() => (visible22 = true)} />
+	<Cell title="top" onclick={() => (visible22 = true)} />
 	<Toast bind:visible={visible22} position="top" message="Tips at the top" />
 
-	<Cell title="bottom" on:click={() => (visible23 = true)} />
+	<Cell title="bottom" onclick={() => (visible23 = true)} />
 	<Toast bind:visible={visible23} position="bottom" message="Tips at the bottom" />
 
-	<Cell title="Top increase distance" on:click={() => (visible24 = true)} />
+	<Cell title="Top increase distance" onclick={() => (visible24 = true)} />
 	<Toast bind:visible={visible24} position="top" py="40" message="The tip is at the top and the distance is increased" />
 
-	<Cell title="use Slot" on:click={useSlotFun} />
-	<Toast bind:visible={visible25} useSlot duration={0}>
+	<Cell title="use Snippet" onclick={useSnippetFun} />
+	<Toast bind:visible={visible25} duration={0}>
 		<div class="flex flex-col space-y-4">
 			<div>Customize the prompt content</div>
 			<Loading inverse />
@@ -164,12 +164,12 @@
 		</div>
 	</Toast>
 
-	<Cell title="Different styles of rounded corners" on:click={() => (visible26 = true)} />
+	<Cell title="Different styles of rounded corners" onclick={() => (visible26 = true)} />
 	<Toast bind:visible={visible26} radius="xl" message="Rounded corners were added" />
 </div>
 
 <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={() => (visible5 = false)}>Manual shutdown</Button>
+		<Button fill="lineTheme" onclick={() => (visible5 = false)}>Manual shutdown</Button>
 	</div>
 </div>

doc/components/toast/api.md

@@ -1,34 +1,32 @@
 ## Toast Props
 
-| 属性             | 类型    | 默认值   | 可选值                                                                       | 必传 | 说明                                                                  |     |
-| ---------------- | ------- | -------- | ---------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------- | :-- |
-| message          | String  | ''       | -                                                                            | N    | 提示内容。                                                            |     |
-| visible          | Boolean | false    | true/false                                                                   | N    | 是否显示。                                                            |     |
-| duration         | Number  | 2000     | -                                                                            | N    | 显示时长，为 0 时提示不会自动关闭，单位：ms。                         |     |
-| position         | String  | 'center' | 'center'/'top'/'bottom'                                                      | N    | 显示位置。                                                            |     |
-| py               | String  | '20      | '0'/'10'/'20'/'40'/'60'/'80'                                                 | N    | 顶部和底部显示时距离顶部或底部的距离，position 为 'center' 时不生效。 |     |
-| radius           | String  | 'base    | 'base'/'full'/'none'/'sm'/'md'/'lg'/'xl'/'2xl'                               | N    | 圆角风格。                                                            |     |
-| useSlot          | Boolean | false    | true/false                                                                   | N    | 是否使用 slot。                                                       |     |
-| transitionType   | String  | 'scale'  | 'fade'/'fly'/'scale'/'slide'/'blur'/'none'                                   | N    | 动画类型。                                                            |     |
-| transitionParams | Object  | {}       | 参考 [svelte/transition](https://svelte.dev/docs#run-time-svelte-transition) | N    | 动画参数，其中 duration 默认 300。                                    |     |
-| outDuration      | Number  | 0        | -                                                                            | N    | 退出动画时间，单位：ms。                                              |     |
-| mask             | Object  | {}       | 参考 Mask Props                                                              | N    | 遮罩层参数。                                                          |     |
-| type             | String  | ''       | ''/'success'/'error'/'warning'/'info'/'loading'/SVG Sprites name             | N    | 提示类型。                                                            |     |
-| loading          | Object  | {}       | 参考 Loading Props                                                           | N    | 加载组件参数，仅 type 为 'loading' 时生效。                           |     |
-| icon             | Object  | {}       | 参考 Icon Props                                                              | N    | 图标组件参数，type 非 '' 且非 'loading' 时生效。                      |     |
-| zIndex           | Number  | 1000     | -                                                                            | N    | z-index。                                                             |
-| clickable        | Boolean | false    | true/false                                                                   | N    | 是否允许点击穿透。                                                    |
-| dynamicFixed     | Boolean | true     | true/false                                                                   | N    | 是否动态固定。                                                        |
+| 名称             | 类型                                                             | 默认值     | 必传 | 说明                                                                  |     |
+| ---------------- | ---------------------------------------------------------------- | ---------- | ---- | --------------------------------------------------------------------- | :-- |
+| message          | `string`                                                         | `''`       | N    | 提示内容。                                                            |
+| visible          | `boolean`                                                        | `false`    | N    | 是否显示。                                                            |
+| duration         | `number`                                                         | `2000`     | N    | 显示时长，为 0 时提示不会自动关闭，单位：ms。                         |
+| position         | `'center'\|'top'\|'bottom'`                                      | `'center'` | N    | 显示位置。                                                            |
+| py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                              | `'20'`     | N    | 顶部和底部显示时距离顶部或底部的距离，position 为 'center' 时不生效。 |
+| radius           | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`          | `'base'`   | N    | 圆角风格。                                                            |
+| transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'scale'`  | N    | 动画类型。                                                            |
+| transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`       | N    | 动画参数，其中 duration 默认 300。                                    |
+| outDuration      | `number`                                                         | `0`        | N    | 退出动画时间，单位：ms。                                              |
+| type             | `'success'\|'error'\|'warning'\|'info'\|'loading'\|'icon'\|null` | `null`     | N    | 提示图标类型。                                                        |
+| mask             | [`Mask`](https://stdf.design/#/components?nav=mask&tab=1)        | `{}`       | N    | 遮罩层参数。                                                          |
+| loading          | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1)  | `{}`       | N    | 加载组件参数，仅 type 为 `'loading'` 时生效。                         |
+| icon             | [`Icon`](https://stdf.design/#/components?nav=icon&tab=1)        | `{}`       | N    | 图标组件参数，仅 type 为非 `'loading'` 且非 `null` 时生效。           |
+| zIndex           | `number`                                                         | `1000`     | N    | z-index。                                                             |
+| clickable        | `boolean`                                                        | `false`    | N    | 是否允许点击穿透。                                                    |
+| dynamicFixed     | `boolean`                                                        | `true`     | N    | 是否动态固定。                                                        |
 
 ## Toast Events
 
-| 名称  | 参数 | 描述             |
-| ----- | ---- | ---------------- |
-| close | -    | 提示关闭时触发。 |
-| open  | -    | 提示打开时触发。 |
+| 名称    | 类型         | 参数 | 描述             |
+| ------- | ------------ | ---- | ---------------- |
+| onclose | `() => void` | -    | 提示关闭时触发。 |
 
-## Toast Slots
+## Toast Snippets
 
-| 名称 | 说明                              |
-| ---- | --------------------------------- |
-| -    | 当 useSlot 为 true 时的提示内容。 |
+| 名称     | 类型                                                                | 参数 | 说明                 |
+| -------- | ------------------------------------------------------------------- | ---- | -------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染提示内容。 |

doc/components/toast/api_en.md

@@ -1,34 +1,32 @@
 ## Toast Props
 
-| Property         | Type    | Default  | Options                                                                     | Required | Description                                                                                                                                             |     |
-| ---------------- | ------- | -------- | --------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
-| message          | String  | ''       | -                                                                           | N        | The message to display in the notification.                                                                                                             |     |
-| visible          | Boolean | false    | true/false                                                                  | N        | Whether the notification should be visible or hidden.                                                                                                   |     |
-| duration         | Number  | 2000     | -                                                                           | N        | The duration in milliseconds for which the notification should remain visible. A value of 0 means it won't automatically close.                         |     |
-| position         | String  | 'center' | 'center'/'top'/'bottom'                                                     | N        | The position where the notification should be displayed.                                                                                                |     |
-| py               | String  | '20      | '0'/'10'/'20'/'40'/'60'/'80'                                                | N        | The position offset from the top or bottom of the screen when the notification is displayed. This property is ignored when position is set to 'center'. |     |
-| radius           | String  | 'base'   | 'base'/'full'/'none'/'sm'/'md'/'lg'/'xl'/'2xl'                              | N        | The style of the notification's corners.                                                                                                                |     |
-| useSlot          | Boolean | false    | true/false                                                                  | N        | Whether to use a slot.                                                                                                                                  |     |
-| transitionType   | String  | 'scale'  | 'fade'/'fly'/'scale'/'slide'/'blur'/'none'                                  | N        | The type of animation to use.                                                                                                                           |     |
-| transitionParams | Object  | {}       | See [svelte/transition](https://svelte.dev/docs#run-time-svelte-transition) | N        | Animation parameters, with the default duration set to 300ms.                                                                                           |
-| outDuration      | Number  | 0        | -                                                                           | N        | Duration of the exit animation in milliseconds.                                                                                                         |
-| mask             | Object  | {}       | See Mask Props                                                              | N        | Parameters for the mask layer.                                                                                                                          |
-| type             | String  | ''       | ''/'success'/'error'/'warning'/'info'/'loading'/SVG Sprites name            | N        | Type of notification.                                                                                                                                   |
-| loading          | Object  | {}       | See Loading Props                                                           | N        | Parameters for the loading component, only effective when the type is 'loading'.                                                                        |
-| icon             | Object  | {}       | See Icon Props                                                              | N        | Parameters for the icon component, only effective when the type is non-empty and non-'loading'.                                                         |
-| zIndex           | Number  | 1000     | -                                                                           | N        | z-index.                                                                                                                                                |
-| clickable        | Boolean | false    | true/false                                                                  | N        | Whether the notification area is clickable through.                                                                                                     |
-| dynamicFixed     | Boolean | true     | true/false                                                                  | N        | Whether to dynamically fix the position.                                                                                                                |
+| Name             | Type                                                             | Default    | Required | Description                                                                        |     |
+| ---------------- | ---------------------------------------------------------------- | ---------- | -------- | ---------------------------------------------------------------------------------- | :-- |
+| message          | `string`                                                         | `''`       | N        | Toast content.                                                                     |
+| visible          | `boolean`                                                        | `false`    | N        | Whether to show the toast.                                                         |
+| duration         | `number`                                                         | `2000`     | N        | Display duration in ms. Toast won't auto-close if set to 0.                        |
+| position         | `'center'\|'top'\|'bottom'`                                      | `'center'` | N        | Display position.                                                                  |
+| py               | `'0'\|'10'\|'20'\|'40'\|'60'\|'80'`                              | `'20'`     | N        | Distance from top/bottom when position is 'top'/'bottom'. Ignored for 'center'.    |
+| radius           | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`          | `'base'`   | N        | Border radius style.                                                               |
+| transitionType   | `'scale'\|'fly'\|'fade'\|'slide'\|'blur'\|null`                  | `'scale'`  | N        | Animation type.                                                                    |
+| transitionParams | [`Transition`](https://svelte.dev/docs/svelte/svelte-transition) | `{}`       | N        | Animation parameters, default duration is 300.                                     |
+| outDuration      | `number`                                                         | `0`        | N        | Exit animation duration in ms.                                                     |
+| type             | `'success'\|'error'\|'warning'\|'info'\|'loading'\|'icon'\|null` | `null`     | N        | Toast icon type.                                                                   |
+| mask             | [`Mask`](https://stdf.design/#/components?nav=mask&tab=1)        | `{}`       | N        | Mask layer parameters.                                                             |
+| loading          | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1)  | `{}`       | N        | Loading component parameters, only works when type is `'loading'`.                 |
+| icon             | [`Icon`](https://stdf.design/#/components?nav=icon&tab=1)        | `{}`       | N        | Icon component parameters, only works when type is not `'loading'` and not `null`. |
+| zIndex           | `number`                                                         | `1000`     | N        | z-index value.                                                                     |
+| clickable        | `boolean`                                                        | `false`    | N        | Whether to allow click through.                                                    |
+| dynamicFixed     | `boolean`                                                        | `true`     | N        | Whether to use dynamic fixed positioning.                                          |
 
 ## Toast Events
 
-| Name  | Parameters | Description                         |
-| ----- | ---------- | ----------------------------------- |
-| close | -          | Triggered when the toast is closed. |
-| open  | -          | Triggered when the toast is opened. |
+| Name    | Type         | Parameters | Description                         |
+| ------- | ------------ | ---------- | ----------------------------------- |
+| onclose | `() => void` | -          | Triggered when the toast is closed. |
 
-## Toast Slots
+## Toast Snippets
 
-| Name | Description                                      |
-| ---- | ------------------------------------------------ |
-| -    | The content of the toast when `useSlot` is true. |
+| Name     | Type                                                                | Parameters | Description                        |
+| -------- | ------------------------------------------------------------------- | ---------- | ---------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Renders toast content when passed. |

doc/components/toast/guide.md

@@ -22,11 +22,11 @@ transitionParams 具体支持的参数请参考 [svelte/transition](https://svel
 
 ## type
 
-Toast 内部默认为 'success'/'error'/'warning'/'info'/'loading' 五种情况设置了对应的内容，也可以通过 `type` 属性自定义，传 '' 不显示，传入其他 SVG Sprites 名称显示对应的 Icon，请参考示例。
+Toast 内部通过 `type` 属性为 'success'/'error'/'warning'/'info' 四种情况设置了对应的图标，也可以传入 `'loading'` 和 `'icon'` 配合 loading 与 icon 自定义对应的显示内容，传 `null` 不显示。请参考示例。
 
-## useSlot
+## Snippet
 
-默认情况下，Toast 内部使用 message 结合 icon 属性作为提示信息，也可以通过 `useSlot` 属性设置为 true，使用插槽配置任意内容作为提示信息。
+默认情况下，Toast 内部可以通过 `children` 属性传入任意内容作为提示信息。
 
 ## 优化
 

doc/components/toast/guide_en.md

@@ -1,33 +1,35 @@
-> Toast uses the icon ri-checkbox-circle-line、ri-close-circle-line、ri-error-warning-line、ri-information-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+> Toast uses icons ri-checkbox-circle-line, ri-close-circle-line, ri-error-warning-line, ri-information-line. Please ensure these icons are included in your project's symbol.svg file. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
 
-## Display position
+## Display Position
 
-The toast is displayed in the center of the screen by default, but you can set its position by using the `position` property. When `position` is set to `top` or `bottom`, you can use the `py` property to set the distance from the top or bottom.
+By default, the toast appears in the center of the screen. You can also set its position using the `position` prop. When position is set to `top` or `bottom`, you can use the `py` prop to set the distance from the top or bottom.
 
 ## Animation
 
-The toast uses the `scale` animation by default, but you can set a different animation by using the `transitionType` property. You can also set animation parameters using the `transitionParams` property, where `duration` represents the animation duration.
+Toast uses `scale` animation by default. You can set other animation types through the `transitionType` prop and configure animation parameters via `transitionParams`, where `duration` represents the entry animation time.
 
-For a better user experience, the toast has a short animation (default 300ms) when it appears to draw the user's attention. After the content is displayed, the toast usually needs to be closed quickly, so the exit animation is set to 0ms by default. You can set the exit animation duration using the `outDuration` property.
+For detailed supported parameters of transitionParams, please refer to [svelte/transition](https://svelte.dev/docs#run-time-svelte-transition).
 
-Only the duration of the exit animation can be set, other parameters will be the same as those of the entry animation to ensure a consistent animation effect.
+For better user experience, the toast appears with a short animation (default 300ms) to catch user attention. Since toast messages generally need to close quickly after display, the exit animation is 0ms by default. However, you can set the exit animation duration using the `outDuration` prop.
 
-## Duration
+The exit animation only allows setting the duration, while other parameters inherit from the entry animation to ensure the animation effect "returns where it came from".
 
-The toast is displayed for 2000ms by default, but you can set a custom duration using the `duration` property. If `duration` is set to 0, the toast will not close automatically.
+## Display Duration
 
-Note: Because the toast has an animation duration (default 300ms or another custom value), `duration` cannot be less than the duration of the animation that displays the toast. Otherwise, the toast may be closed before it is fully displayed 😭.
+The default display duration is 2000ms, which can be customized using the `duration` prop. When `duration` is 0, the toast won't close automatically.
 
-## Type
+Note: Since there is an entry animation duration (default 300ms or custom value), `duration` cannot be less than the entry animation duration, otherwise the toast would close before fully appearing 😭.
 
-By default, the toast has predefined content for five types: 'success', 'error', 'warning', 'info' and 'loading'. You can also customize the content by setting the `type` property. If `type` is set to an empty string, no icon will be displayed. Otherwise, the icon corresponding to the name of the SVG Sprites Icon passed to the `type` property will be displayed.
+## type
 
-## Use Slot
+Toast internally sets corresponding icons for four types: 'success'/'error'/'warning'/'info' through the `type` prop. You can also pass `'loading'` and `'icon'` to customize display content with loading and icon components, or pass `null` to display no icon. Please refer to examples.
 
-By default, the toast uses the `message` and `icon` properties to display the content. You can also use a custom slot by setting the `useSlot` property to true and passing in any content you like.
+## Snippet
+
+By default, Toast can accept any content as the prompt message through the `children` prop.
 
 ## Optimization
 
-To deal with the dynamic display of toolbars or address bars in Safari, Chrome or other mobile browsers, Toast has also been optimized. When `dynamicFixed` is set to true, the toast will dynamically update the height of the page as the user scrolls, and the position of the toast relative to the page will also be updated accordingly.
+Since mobile Safari, Chrome, and some other browsers dynamically show/hide toolbars or address bars when scrolling (unnecessarily), causing page height to change dynamically, Toast has been optimized for this situation. When dynamicFixed is true, the page height updates dynamically while scrolling, and correspondingly, Toast's internal elements' positions relative to the page update dynamically.
 
-Of course, this scroll listener will have a slight performance cost. If you don't need this feature in your project (such as when using a controllable webview), you can set `dynamicFixed` to false to disable it.
+Of course, this scroll monitoring causes slight performance overhead. If your project doesn't need this feature (e.g., when used in a controlled webview), you can disable it by setting dynamicFixed to false.

packages/stdf/components/toast/Toast.svelte

@@ -17,14 +17,13 @@
 		transitionParams = {},
 		outDuration = 0,
 		zIndex = 1000,
-		type = '',
+		type = null,
 		mask = {},
 		loading = {},
-		icon = { name: '' },
+		icon = {},
 		clickable = false,
 		dynamicFixed = true,
 		children,
-		onopen,
 		onclose,
 	} = $props();
 
@@ -38,8 +37,6 @@
 					onclose && onclose();
 				}, duration);
 			}
-		} else {
-			onopen && onopen();
 		}
 	});
 
@@ -83,38 +80,33 @@
 </script>
 
 {#if visible}
-	<Mask {visible} {clickable} opacity={0} {...mask} {outDuration} />
+	<Mask {visible} {clickable} opacity="0" {outDuration} {...mask} />
 {/if}
 {#if visible}
 	<div
-		class={`fixed w-screen h-screen inset-0 flex flex-col${positionClass[position] || positionClass['center']}${
-			position === 'center' ? '' : pyClass[py] || pyClass['20']
-		} w-full h-full${clickable ? ' pointer-events-none' : ''}`}
-		style={`z-index:${zIndex};height:${innerHeight}px`}
+		class="fixed w-screen h-screen inset-0 flex flex-col{positionClass[position] || positionClass['center']}{position === 'center'
+			? ''
+			: pyClass[py] || pyClass['20']} w-full h-full${clickable ? ' pointer-events-none' : ''}"
+		style="z-index:{zIndex};height:{innerHeight}px;"
 	>
 		<Transition {visible} {transitionType} {transitionParams} {outDuration}>
 			<div class="flex justify-center px-10">
 				<div
-					class={`inline-block bg-black/90 dark:bg-white/90 text-center p-4${
-						radiusClass[radius] || radiusClass['base']
-					} text-white dark:text-black`}
+					class="inline-block bg-black/90 dark:bg-white/90 text-center p-4{radiusClass[radius] ||
+						radiusClass['base']} text-white dark:text-black"
 				>
 					{#if children}
 						{@render children()}
 					{:else}
-						{#if type !== ''}
+						{#if type !== null}
 							<div class="mb-2">
 								{#if type === 'loading'}
 									<Loading inverse {...loading} />
-								{:else}
-									<Icon
-										name={type === 'success' || type === 'error' || type === 'warning' || type === 'info'
-											? `ri-${typeObj[type]}-line`
-											: type}
-										size={30}
-										{...icon}
-									/>
-								{/if}
+								{:else if type === 'icon'}
+									<Icon size={30} {...icon} />
+								{:else if type === 'success' || type === 'error' || type === 'warning' || type === 'info'}
+									<Icon name={`ri-${typeObj[type]}-line`} size={30} {...icon} />
+								{:else}{/if}
 							</div>
 						{/if}
 						<div>

packages/stdf/components/toast/Transition.svelte

@@ -15,23 +15,23 @@
 
 {#if visible}
 	{#if transitionType === 'scale'}
-		<div in:scale|global={{ duration: 300, ...transitionParams }} out:scale={{ ...transitionParams, duration: outDuration }}>
+		<div in:scale|global={{ duration: 300, ...transitionParams }} out:scale|global={{ ...transitionParams, duration: outDuration }}>
 			{@render children?.()}
 		</div>
 	{:else if transitionType === 'fly'}
-		<div in:fly|global={{ duration: 300, ...transitionParams }} out:fly={{ ...transitionParams, duration: outDuration }}>
+		<div in:fly|global={{ duration: 300, ...transitionParams }} out:fly|global={{ ...transitionParams, duration: outDuration }}>
 			{@render children?.()}
 		</div>
 	{:else if transitionType === 'fade'}
-		<div in:fade|global={{ duration: 300, ...transitionParams }} out:fade={{ ...transitionParams, duration: outDuration }}>
+		<div in:fade|global={{ duration: 300, ...transitionParams }} out:fade|global={{ ...transitionParams, duration: outDuration }}>
 			{@render children?.()}
 		</div>
 	{:else if transitionType === 'slide'}
-		<div in:slide|global={{ duration: 300, ...transitionParams }} out:slide={{ ...transitionParams, duration: outDuration }}>
+		<div in:slide|global={{ duration: 300, ...transitionParams }} out:slide|global={{ ...transitionParams, duration: outDuration }}>
 			{@render children?.()}
 		</div>
 	{:else if transitionType === 'blur'}
-		<div in:blur|global={{ duration: 300, ...transitionParams }} out:blur={{ ...transitionParams, duration: outDuration }}>
+		<div in:blur|global={{ duration: 300, ...transitionParams }} out:blur|global={{ ...transitionParams, duration: outDuration }}>
 			{@render children?.()}
 		</div>
 	{:else}