[stdf]Update Switch compoent, demo and documents.

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

@@ -2,20 +2,20 @@
 <script>
 	import { Switch, Icon, Cell, Dialog } from '../../../../../packages/stdf/components';
 
-	let checkAsync = false;
+	let checkAsync = $state(false);
 	const switchClickFun = () => {
 		setTimeout(() => {
 			checkAsync = !checkAsync;
 		}, 2000);
 	};
-	let cellCheck = false;
+	let cellCheck = $state(false);
 	const cellAsyncFun = () => {
 		setTimeout(() => {
 			cellCheck = !cellCheck;
 		}, 2000);
 	};
-	let loading = false;
-	let loadingCheck = false;
+	let loading = $state(false);
+	let loadingCheck = $state(false);
 	const loadingFun = () => {
 		loading = true;
 		setTimeout(() => {
@@ -23,8 +23,8 @@
 			loading = false;
 		}, 3000);
 	};
-	let cellLoading = false;
-	let cellLoadingCheck = false;
+	let cellLoading = $state(false);
+	let cellLoadingCheck = $state(false);
 	const cellLoadingFun = () => {
 		cellLoading = true;
 		setTimeout(() => {
@@ -32,21 +32,14 @@
 			cellLoading = false;
 		}, 3000);
 	};
-	let visible = false;
-	let confirmSwitcheck = false;
-	const confirmFunc = () => {
-		visible = false;
-		confirmSwitcheck = !confirmSwitcheck;
-	};
-	const showDialogFunc = () => {
-		visible = true;
-	};
+	let visible = $state(false);
+	let confirmswitchActive = $state(false);
 </script>
 
 <div class="pb-8">
-	<div class="flex flex-col space-y-8 py-8 px-4">
+	<div class="flex flex-col px-4 py-8 space-y-8">
 		<div>
-			<div class="mb-4 font-bold">Different fillet</div>
+			<div class="mb-4 font-bold">Different Radius</div>
 			<div class="flex justify-between">
 				<Switch />
 				<Switch radius="none" />
@@ -54,78 +47,88 @@
 			</div>
 		</div>
 		<div>
-			<div class="mb-4 font-bold">Different colors</div>
+			<div class="mb-4 font-bold">Different Colors</div>
 			<div class="flex justify-between">
-				<Switch check injClass="bg-success dark:bg-success" />
-				<Switch check injClass="bg-error dark:bg-error" />
-				<Switch check injClass="bg-warning dark:bg-warning" />
-				<Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
+				<Switch active injClass="bg-success dark:bg-success" />
+				<Switch active injClass="bg-error dark:bg-error" />
+				<Switch active injClass="bg-warning dark:bg-warning" />
+				<Switch active injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
 			</div>
 		</div>
 		<div>
-			<div class="mb-4 font-bold">With text/status/icon</div>
+			<div class="mb-4 font-bold">With Text / State / Icon</div>
 			<div class="flex justify-between">
 				<Switch inside={['OF', 'ON']} />
 				<Switch inside={['😭', '😄']} />
 				<Switch inside="state" />
-				<!-- <Switch inside="state" radius="none" /> -->
-				<Switch inside="slot">
-					<div slot="false">
-						<Icon name="ri-moon-line" size={16} top={-1} />
-					</div>
-					<div slot="true">
-						<Icon name="ri-sun-line" size={16} top={-1} />
-					</div>
+				<Switch>
+					{#snippet falseChild()}
+						<div>
+							<Icon name="ri-moon-line" size={16} top={-1} />
+						</div>
+					{/snippet}
+					{#snippet trueChild()}
+						<div slot="true">
+							<Icon name="ri-sun-line" size={16} top={-1} />
+						</div>
+					{/snippet}
 				</Switch>
 			</div>
 		</div>
 		<div>
-			<div class="mb-4 font-bold">disable</div>
+			<div class="mb-4 font-bold">Disabled</div>
 			<div class="flex justify-between">
 				<Switch disabled />
-				<Switch disabled check />
+				<Switch disabled active />
 			</div>
 		</div>
 		<div>
-			<div class="mb-4 font-bold">Asynchronous control</div>
+			<div class="mb-4 font-bold">Async Control</div>
 			<div class="flex justify-between">
-				<div class="flex flex-col space-y-2 items-center">
-					<Switch async check={checkAsync} on:click={switchClickFun} />
-					<div class="text-sm">Trigger after 2 seconds of clicking</div>
+				<div class="flex flex-col items-center space-y-2">
+					<Switch async active={checkAsync} onclick={switchClickFun} />
+					<div class="text-sm">Wait 2 seconds</div>
 				</div>
-				<div class="flex flex-col space-y-2 items-center">
-					<Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
-					<div class="text-sm">Trigger after 3 seconds of clicking</div>
+				<div class="flex flex-col items-center space-y-2">
+					<Switch async active={loadingCheck} loading={{ theme: true }} onclick={loadingFun} inside={loading ? 'loading' : null} />
+					<div class="text-sm">Wait 3 seconds</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<!--    <div>-->
-	<div class="mb-4 font-bold px-4">Use in Cell</div>
-	<Cell title="switch" detail="Click on the whole row to trigger the switch" right={{ type: 'switch' }} />
-	<Cell title="Switch tape text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
-	<Cell title="Switch with full rounded corners" right={{ type: 'switch', switch: { radius: 'full' } }} />
+
+	<div class="px-4 mb-4 font-bold">Used in Cell</div>
+	<Cell title="Switch" detail="Click anywhere in the row to trigger the switch" right={{ type: 'switch' }} />
+	<Cell title="Switch with Text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switchActive />
+	<Cell title="Full Radius Switch" right={{ type: 'switch', switch: { radius: 'full' } }} />
 	<Cell
-		title="Asynchronous control"
-		detail="Click 2 seconds to trigger the switch"
+		title="Async Control"
+		detail="Switch triggered 2 seconds after click"
 		right={{ type: 'switch', switch: { async: true } }}
-		switcheck={cellCheck}
-		on:click={cellAsyncFun}
+		switchActive={cellCheck}
+		onclick={cellAsyncFun}
 	/>
 	<Cell
-		title="Asynchronous loading"
-		detail="Click 3 seconds to trigger the switch"
-		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
-		switcheck={cellLoadingCheck}
-		on:click={cellLoadingFun}
+		title="Async Loading"
+		detail="Switch triggered 3 seconds after click"
+		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : null } }}
+		switchActive={cellLoadingCheck}
+		onclick={cellLoadingFun}
 	/>
-	<Cell title="Disable switch" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
+	<Cell title="Disabled Switch" right={{ type: 'switch', switch: { disabled: true } }} switchActive />
 
 	<Cell
-		title="Secondary confirmation"
+		title="Double Confirmation"
 		right={{ type: 'switch', switch: { async: true } }}
-		bind:switcheck={confirmSwitcheck}
-		on:click={showDialogFunc}
+		bind:switchActive={confirmswitchActive}
+		onclick={() => (visible = true)}
+	/>
+	<Dialog
+		bind:visible
+		content={`Are you sure you want to ${confirmswitchActive ? 'turn off' : 'turn on'}?`}
+		onprimary={() => {
+			visible = false;
+			confirmswitchActive = !confirmswitchActive;
+		}}
 	/>
-	<Dialog bind:visible content={`determine ${confirmSwitcheck ? 'Shut down' : 'open'} this switch?`} on:primary={confirmFunc} />
 </div>

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

@@ -2,20 +2,20 @@
 <script>
 	import { Switch, Icon, Cell, Dialog } from '../../../../../packages/stdf/components';
 
-	let checkAsync = false;
+	let checkAsync = $state(false);
 	const switchClickFun = () => {
 		setTimeout(() => {
 			checkAsync = !checkAsync;
 		}, 2000);
 	};
-	let cellCheck = false;
+	let cellCheck = $state(false);
 	const cellAsyncFun = () => {
 		setTimeout(() => {
 			cellCheck = !cellCheck;
 		}, 2000);
 	};
-	let loading = false;
-	let loadingCheck = false;
+	let loading = $state(false);
+	let loadingCheck = $state(false);
 	const loadingFun = () => {
 		loading = true;
 		setTimeout(() => {
@@ -23,8 +23,8 @@
 			loading = false;
 		}, 3000);
 	};
-	let cellLoading = false;
-	let cellLoadingCheck = false;
+	let cellLoading = $state(false);
+	let cellLoadingCheck = $state(false);
 	const cellLoadingFun = () => {
 		cellLoading = true;
 		setTimeout(() => {
@@ -32,19 +32,12 @@
 			cellLoading = false;
 		}, 3000);
 	};
-	let visible = false;
-	let confirmSwitcheck = false;
-	const confirmFunc = () => {
-		visible = false;
-		confirmSwitcheck = !confirmSwitcheck;
-	};
-	const showDialogFunc = () => {
-		visible = true;
-	};
+	let visible = $state(false);
+	let confirmswitchActive = $state(false);
 </script>
 
 <div class="pb-8">
-	<div class="flex flex-col space-y-8 py-8 px-4">
+	<div class="flex flex-col px-4 py-8 space-y-8">
 		<div>
 			<div class="mb-4 font-bold">不同圆角</div>
 			<div class="flex justify-between">
@@ -56,10 +49,10 @@
 		<div>
 			<div class="mb-4 font-bold">不同颜色</div>
 			<div class="flex justify-between">
-				<Switch check injClass="bg-success dark:bg-success" />
-				<Switch check injClass="bg-error dark:bg-error" />
-				<Switch check injClass="bg-warning dark:bg-warning" />
-				<Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
+				<Switch active injClass="bg-success dark:bg-success" />
+				<Switch active injClass="bg-error dark:bg-error" />
+				<Switch active injClass="bg-warning dark:bg-warning" />
+				<Switch active injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
 			</div>
 		</div>
 		<div>
@@ -68,14 +61,17 @@
 				<Switch inside={['关', '开']} />
 				<Switch inside={['😭', '😄']} />
 				<Switch inside="state" />
-				<!-- <Switch inside="state" radius="none" /> -->
-				<Switch inside="slot">
-					<div slot="false">
-						<Icon name="ri-moon-line" size={16} top={-1} />
-					</div>
-					<div slot="true">
-						<Icon name="ri-sun-line" size={16} top={-1} />
-					</div>
+				<Switch>
+					{#snippet falseChild()}
+						<div>
+							<Icon name="ri-moon-line" size={16} top={-1} />
+						</div>
+					{/snippet}
+					{#snippet trueChild()}
+						<div slot="true">
+							<Icon name="ri-sun-line" size={16} top={-1} />
+						</div>
+					{/snippet}
 				</Switch>
 			</div>
 		</div>
@@ -83,44 +79,56 @@
 			<div class="mb-4 font-bold">禁用</div>
 			<div class="flex justify-between">
 				<Switch disabled />
-				<Switch disabled check />
+				<Switch disabled active />
 			</div>
 		</div>
 		<div>
 			<div class="mb-4 font-bold">异步控制</div>
 			<div class="flex justify-between">
-				<div class="flex flex-col space-y-2 items-center">
-					<Switch async check={checkAsync} on:click={switchClickFun} />
+				<div class="flex flex-col items-center space-y-2">
+					<Switch async active={checkAsync} onclick={switchClickFun} />
 					<div class="text-sm">点击 2 秒后触发</div>
 				</div>
-				<div class="flex flex-col space-y-2 items-center">
-					<Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
+				<div class="flex flex-col items-center space-y-2">
+					<Switch async active={loadingCheck} loading={{ theme: true }} onclick={loadingFun} inside={loading ? 'loading' : null} />
 					<div class="text-sm">点击 3 秒后触发</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<!--    <div>-->
-	<div class="mb-4 font-bold px-4">Cell 中使用</div>
+
+	<div class="px-4 mb-4 font-bold">Cell 中使用</div>
 	<Cell title="开关" detail="点击整行皆可触发开关" right={{ type: 'switch' }} />
-	<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
+	<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switchActive />
 	<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
 	<Cell
 		title="异步控制"
 		detail="点击 2 秒后触发开关"
 		right={{ type: 'switch', switch: { async: true } }}
-		switcheck={cellCheck}
-		on:click={cellAsyncFun}
+		switchActive={cellCheck}
+		onclick={cellAsyncFun}
 	/>
 	<Cell
 		title="异步加载"
 		detail="点击 3 秒后触发开关"
-		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
-		switcheck={cellLoadingCheck}
-		on:click={cellLoadingFun}
+		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : null } }}
+		switchActive={cellLoadingCheck}
+		onclick={cellLoadingFun}
 	/>
-	<Cell title="禁用开关" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
+	<Cell title="禁用开关" right={{ type: 'switch', switch: { disabled: true } }} switchActive />
 
-	<Cell title="二次确认" right={{ type: 'switch', switch: { async: true } }} bind:switcheck={confirmSwitcheck} on:click={showDialogFunc} />
-	<Dialog bind:visible content={`确定${confirmSwitcheck ? '关闭' : '开启'}此开关吗？`} on:primary={confirmFunc} />
+	<Cell
+		title="二次确认"
+		right={{ type: 'switch', switch: { async: true } }}
+		bind:switchActive={confirmswitchActive}
+		onclick={() => (visible = true)}
+	/>
+	<Dialog
+		bind:visible
+		content={`确定${confirmswitchActive ? '关闭' : '开启'}吗？`}
+		onprimary={() => {
+			visible = false;
+			confirmswitchActive = !confirmswitchActive;
+		}}
+	/>
 </div>

doc/components/switch/api.md

@@ -1,25 +1,25 @@
 ## Switch Props
 
-| 属性     | 类型         | 默认值 | 可选值                            | 必传 | 说明                                          |
-| -------- | ------------ | ------ | --------------------------------- | ---- | --------------------------------------------- |
-| check    | Boolean      | false  | true/false                        | N    | 开关状态。                                    |
-| radius   | String       | 'base' | 'full'/'base'/'none'              | N    | 圆角风格。                                    |
-| inside   | Array/String | ''     | Array/'state'/'loading'/'slot'/'' | N    | 开关内部内容。                                |
-| injClass | String       | ''     | Class                             | N    | 注入 CSS 名称。                               |
-| disabled | Boolean      | false  | true/false                        | N    | 是否禁用。                                    |
-| async    | Boolean      | false  | true/false                        | N    | 是否异步。                                    |
-| loading  | Object       | {}     | 参考 Loading Props                | N    | 加载组件参数，仅 inside 为 'loading' 时生效。 |
+| 名称     | 类型                                                            | 默认值   | 必传 | 说明                                            |
+| -------- | --------------------------------------------------------------- | -------- | ---- | ----------------------------------------------- |
+| active   | `boolean`                                                       | `false`  | N    | 开关状态。                                      |
+| radius   | `'none'\|'base'\|'full'`                                        | `'base'` | N    | 圆角风格。                                      |
+| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`   | N    | 开关内部内容。                                  |
+| injClass | `string`                                                        | `''`     | N    | 注入 CSS 名称。                                 |
+| disabled | `boolean`                                                       | `false`  | N    | 是否禁用。                                      |
+| async    | `boolean`                                                       | `false`  | N    | 是否异步。                                      |
+| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N    | 加载组件参数，仅 inside 为 `'loading'` 时生效。 |
 
 ## Switch Events
 
-| 名称   | 参数                                            | 描述                  |
-| ------ | ----------------------------------------------- | --------------------- |
-| click  | -                                               | 点击触发 。           |
-| change | event：事件对象，其中 detail 表示当前开关状态。 | 开关状态变化时触发 。 |
+| 名称     | 类型                        | 参数                    | 描述                  |
+| -------- | --------------------------- | ----------------------- | --------------------- |
+| onclick  | `() => void`                | -                       | 点击触发 。           |
+| onchange | `(active: boolean) => void` | active - 当前开关状态。 | 开关状态变化时触发 。 |
 
-## Switch Slots
+## Switch Snippets
 
-| 名称  | 说明                       |
-| ----- | -------------------------- |
-| true  | 状态为开启时开关内部内容。 |
-| false | 状态为关闭时开关内部内容。 |
+| 名称       | 类型                                                                | 参数 | 说明                       |
+| ---------- | ------------------------------------------------------------------- | ---- | -------------------------- |
+| trueChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 状态为开启时开关内部内容。 |
+| falseChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 状态为关闭时开关内部内容。 |

doc/components/switch/api_en.md

@@ -1,25 +1,25 @@
 ## Switch Props
 
-| Prop Name | Type         | Default | Options                           | Required | Description                                                        |
-| --------- | ------------ | ------- | --------------------------------- | -------- | ------------------------------------------------------------------ |
-| check     | Boolean      | false   | true/false                        | No       | Switch status.                                                     |
-| radius    | String       | 'base'  | 'full'/'base'/'none'              | No       | Corner style.                                                      |
-| inside    | Array/String | []      | Array/'state'/'loading'/'slot'/'' | No       | Switch internal content.                                           |
-| injClass  | String       | ''      | Class                             | No       | Inject CSS class names.                                            |
-| disabled  | Boolean      | false   | true/false                        | No       | Whether disabled.                                                  |
-| async     | Boolean      | false   | true/false                        | No       | Whether asynchronous.                                              |
-| loading   | Object       | {}      | Refer to Loading Props            | No       | Loading component parameters, only valid when inside is 'loading'. |
+| Name     | Type                                                            | Default  | Required | Description                                                              |
+| -------- | --------------------------------------------------------------- | -------- | -------- | ------------------------------------------------------------------------ |
+| active   | `boolean`                                                       | `false`  | N        | Switch state.                                                            |
+| radius   | `'none'\|'base'\|'full'`                                        | `'base'` | N        | Border radius style.                                                     |
+| inside   | `'state'\|'loading'\|[string,string]\|null`                     | `null`   | N        | Switch inner content.                                                    |
+| injClass | `string`                                                        | `''`     | N        | Injected CSS class name.                                                 |
+| disabled | `boolean`                                                       | `false`  | N        | Whether the switch is disabled.                                          |
+| async    | `boolean`                                                       | `false`  | N        | Whether the switch is asynchronous.                                      |
+| loading  | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N        | Loading component parameters, only effective when inside is `'loading'`. |
 
 ## Switch Events
 
-| Name   | Parameters                                                               | Description                           |
-| ------ | ------------------------------------------------------------------------ | ------------------------------------- |
-| click  | -                                                                        | Triggered when clicked.               |
-| change | event: Event object, with `detail` indicating the current switch status. | Triggered when switch status changes. |
+| Name     | Type                        | Parameters                     | Description                              |
+| -------- | --------------------------- | ------------------------------ | ---------------------------------------- |
+| onclick  | `() => void`                | -                              | Triggered when clicked.                  |
+| onchange | `(active: boolean) => void` | active - Current switch state. | Triggered when the switch state changes. |
 
-## Switch Slots
+## Switch Snippets
 
-| Name  | Description                                            |
-| ----- | ------------------------------------------------------ |
-| true  | Switch internal content when the switch status is on.  |
-| false | Switch internal content when the switch status is off. |
+| Name       | Type                                                                | Parameters | Description                                 |
+| ---------- | ------------------------------------------------------------------- | ---------- | ------------------------------------------- |
+| trueChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Switch inner content when the state is on.  |
+| falseChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Switch inner content when the state is off. |

doc/components/switch/guide.md

@@ -8,12 +8,10 @@
 
 通过 injClass 参数可以向组件内部最外层元素注入 CSS 名称（不仅限于 Tailwind CSS），这将使组件样式有更多自定义可能性。因为 CSS 注入于最后，此时最外层元素若已有同属性 CSS 将会以 injClass 为准，这也是通过 injClass 实现自定义开关颜色的原因。
 
-## inside & slot
+## inside & Snippet
 
-inside 参数决定了开关内部显示内容，默认值是空字符，不显示任何内容。若传入字符‘state’则会以竖线和圆形表示开关状态；若传入两项字符组成的数组，第一项和第二项将分别显示关闭与开启状态时的内部文字，建议传入单个文字；若传入字符‘loading’则会以 Loading 图标渲染；若传入字符‘slot’则会以插槽内容渲染，请传入开启与关闭时的插槽内容。
-
-请参考示例。
+inside 参数决定了开关内部显示内容，默认值是空字符，不显示任何内容。若传入字符 `'state’` 则会以竖线和圆形表示开关状态；若传入两项字符组成的数组，第一项和第二项将分别显示关闭与开启状态时的内部文字，建议传入单个文字；若传入字符 `'loading'` 则会以 Loading 图标渲染，且支持传入 Loading Props；若传入 falseChild 和 trueChild 则会以传入内容分别渲染开启与关闭时开关内部内容，请参考示例。
 
 ## 特别注意
 
-在 Cell 组件内使用时，Switch 的 check 由 Cell Props 的 switcheck 决定，**请不要在 switch 内部再传入 check**。
+在 Cell 组件内使用时，Switch 的 active 由 Cell Props 的 switchActive 决定，**请不要在 switch 内部再传入 active**。

doc/components/switch/guide_en.md

@@ -1,19 +1,17 @@
-## Use Cases
+## Usage Scenarios
 
-On mobile devices, the Switch component is generally used in conjunction with the Cell component, and the `right` parameter of the Cell component supports passing in Switch Props. Please refer to the Cell API.
+The Switch component for mobile devices is generally used in conjunction with the Cell component. The right parameter of the Cell component supports passing Switch Props. Please refer to the Cell API for more details.
 
-Of course, it can also be used alone.
+Of course, it can also be used independently.
 
 ## injClass
 
-The `injClass` parameter can be used to inject CSS class names (not limited to Tailwind CSS) into the outermost element inside the component, which will make the component style more customizable. Because CSS injection is at the end, if the outermost element already has the same property CSS, it will be based on `injClass`. This is also the reason why custom switch colors can be achieved through `injClass`.
+The injClass parameter allows you to inject CSS class names (not limited to Tailwind CSS) into the outermost element of the component, providing more customization possibilities for the component's style. Since CSS injection occurs at the end, if the outermost element already has CSS properties with the same attributes, the injClass will take precedence. This is also the reason why injClass can be used to customize the switch color.
 
-## inside & slot
+## inside & Snippet
 
-The `inside` parameter determines the content displayed inside the switch, with an empty string as the default value, displaying no content. If 'state' is passed in, the switch status will be represented by a vertical line and a circle. If an array of two characters is passed in, the first and second items will display the internal text when the switch is turned off and on, respectively. It is recommended to pass in a single character. If 'loading' is passed in, a Loading icon will be rendered. If 'slot' is passed in, the slot content when turned on and off will be rendered.
-
-Please refer to the example.
+The inside parameter determines the content displayed inside the switch. The default value is an empty string, which displays nothing. If the string 'state' is passed, it will represent the switch state with a vertical line and a circle. If an array of two strings is passed, the first and second items will display the internal text for the off and on states respectively; it's recommended to pass a single character. If the string 'loading' is passed, it will render with a Loading icon and supports passing Loading Props. If falseChild and trueChild are passed, they will render the internal content of the switch when it's off and on respectively. Please refer to the examples.
 
 ## Special Note
 
-When used in the Cell component, the `check` of the Switch is determined by the `switcheck` of the Cell Props,**please do not pass in `check` again inside the switch component.**
+When used within the Cell component, the active state of the Switch is determined by the switchActive prop of the Cell. **Please do not pass active again inside the switch.**

packages/stdf/components/switch/Switch.svelte

@@ -6,7 +6,7 @@
 	let {
 		active = false,
 		radius = 'base',
-		inside = '',
+		inside = null,
 		injClass = '',
 		disabled = false,
 		async = false,
@@ -17,7 +17,8 @@
 		onclick,
 	} = $props();
 
-	let isLong = $state(false); // 是否处于纵向拉长状态  is in the vertical elongation state
+	// 是否处于纵向拉长状态  is in the vertical elongation state
+	let isLong = $state(false);
 	const radiusObj = { none: 'rounded-none', base: 'rounded', full: 'rounded-full' };
 	const setChangeFun = () => {
 		if (!disabled) {
@@ -39,9 +40,7 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
+<button
 	onclick={setChangeFun}
 	class="flex justify-around w-12 h-6 relative transition-all duration-500 active:opacity-80 {radiusObj[radius] || radiusObj.base} {active
 		? `bg-primary dark:bg-dark ${injClass}`
@@ -54,20 +53,18 @@
 		style="left:{active ? '1.625rem' : '0.125rem'};transform:{isLong ? 'scaleX(1.3)' : 'scaleX(1)'}"
 	>
 		{#if inside === 'state'}
-			<span class:hidden={!active}><div class="bg-black/80 dark:bg-white/90 w-1 h-3 mt-1 ml-2 rounded-full"></div></span>
-			<span class:hidden={active}><div class="w-3 h-3 mt-1 ml-1 border-2 border-black/80 dark:border-white/90 rounded-full"></div></span>
+			<span class:hidden={!active}><div class="mt-1 ml-2 w-1 h-3 rounded-full bg-black/80 dark:bg-white/90"></div></span>
+			<span class:hidden={active}><div class="mt-1 ml-1 w-3 h-3 rounded-full border-2 border-black/80 dark:border-white/90"></div></span>
 		{:else if inside === 'loading'}
 			<div class="m-0.5">
 				<Loading width="full" height="full" {...loading} />
 			</div>
-		{:else if inside === 'child'}
+		{:else if trueChild && falseChild}
 			<span class={active ? '' : 'hidden'}>{@render trueChild?.()}</span>
 			<span class={!active ? '' : 'hidden'}>{@render falseChild?.()}</span>
 		{:else if Array.isArray(inside) && inside.length === 2}
 			<span class={active ? '' : 'hidden'}>{inside[1]} </span>
 			<span class={!active ? '' : 'hidden'}>{inside[0]} </span>
-		{:else}
-			<!-- none -->
-		{/if}
+		{:else}{/if}
 	</div>
-</div>
+</button>