[stdf]Update Cell compoent, demo and documents.

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

@@ -2,126 +2,123 @@
 <script>
 	import { Cell, CellGroup, Toast } from '../../../../../packages/stdf/components';
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="flex flex-col space-y-8 py-8">
 	<div>
-		<Cell title="Basic usage" />
-		<Cell title="There are details on the right are details on the right" detail="Zero" />
-		<Cell title="Use for details Slot" detail="slot">
-			<span slot="detail" class="text-primary dark:text-dark text-xs">I am a slot content</span>
+		<Cell title="Basic Usage" />
+		<Cell title="With Detail" detail="Zeroing" />
+		<Cell title="Detail with Snippet">
+			{#snippet detailChild()}
+				<span class="text-primary dark:text-dark text-xs">I'm Snippet</span>
+			{/snippet}
 		</Cell>
-		<Cell title="There is no arrow on the right" right="none" />
-		<Cell title="Pure display, no click effect" right="none" clickAll={false} />
-		<Cell title="Click event" detail="Please click me" on:click={() => (visible = true)} />
-		<Toast bind:visible message="You poke to me!" />
-		<Cell title="There are details on the right without arrows" detail="Zero" right="none" />
-		<Cell title="The right switch (click the whole line to trigger the switch)" right={{ type: 'switch' }} />
-		<Cell title="Switch with details" detail="explain" right={{ type: 'switch' }} />
-		<Cell title="Switch with text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
-		<Cell title="Switch full round corner" right={{ type: 'switch', switch: { radius: 'full' } }} />
-		<Cell title="Just click on the switch to trigger" clickAll={false} right={{ type: 'switch' }} />
-		<Cell title="Use on the left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
-		<Cell title="Use on the right side Icon" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
-		<Cell title="Left custom picture" left="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_颁奖.png" alt="" />
-			</div>
+		<Cell title="No Arrow" right={null} />
+		<Cell title="Display Only" right={null} clickAll={false} />
+		<Cell title="Click Event" detail="Click Me" onclick={() => (visible = true)} />
+		<Toast bind:visible message="You clicked me!" />
+		<Cell title="Detail without Arrow" detail="Zeroing" right={null} />
+		<Cell title="Switch (Click Row)" right={{ type: 'switch' }} />
+		<Cell title="Switch with Detail" detail="Description" right={{ type: 'switch' }} />
+		<Cell title="Switch with Text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
+		<Cell title="Rounded Switch" right={{ type: 'switch', switch: { radius: 'full' } }} />
+		<Cell title="Switch Only" clickAll={false} right={{ type: 'switch' }} />
+		<Cell title="Left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
+		<Cell title="Right Icon" right={{ type: 'icon', icon: { name: 'ri-battery-charge-line', size: 20, theme: true } }} />
+		<Cell title="Left Image">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_颁奖.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
-		<Cell title="Custom pictures are all left and right" left="slot" right="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_评价.png" alt="" />
-			</div>
-			<div slot="right" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_美食.png" alt="" />
-			</div>
+		<Cell title="Both Side Images">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_评价.png" alt="" />
+				</div>
+			{/snippet}
+			{#snippet rightChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_美食.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
-		<Cell title="Come to a big picture" left="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-10 h-10" src="/assets/images/icon_会员.png" alt="" />
-			</div>
+		<Cell title="Larger Image">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-10 h-10" src="/assets/images/icon_会员.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
-		<Cell title="There is a secondary title on the left" subTitle="I am, but I am not second" />
-		<Cell title="There are secondary title and right details" subTitle="I am, but I am not second" detail="Zero" />
-		<Cell title="There is secondary information on the right" detail="Zero" info="Restart" />
+		<Cell title="With Subtitle" subTitle="I'm subtitle" />
+		<Cell title="Subtitle and Detail" subTitle="I'm subtitle" detail="Zeroing" />
+		<Cell title="Secondary Info" detail="Zeroing" info="Reboot" />
+		<Cell title="Both Secondary" subTitle="I'm subtitle" detail="Zeroing" info="Reboot" />
+		<Cell title="Both Secondary" subTitle="I'm subtitle" detail="With Arrow" info="Reboot" />
 		<Cell
-			title="There are secondary content on the left and right sides"
-			subTitle="I am, but I am not second"
-			detail="Zero"
-			info="Restart"
-		/>
-		<Cell
-			title="There are secondary content on the left and right sides"
-			subTitle="I am, but I am not second"
-			detail="Come again"
-			info="Restart"
-		/>
-		<Cell
-			title="There are secondary content on the right and right"
-			subTitle="Come again on the left Icon"
-			detail="Come again"
-			info="Restart"
+			title="Both Secondary"
+			subTitle="With Left Icon"
+			detail="With Arrow"
+			info="Reboot"
 			left={{ name: 'ri-shopping-basket-line', theme: true }}
 		/>
-		<Cell
-			title="Come on the picture too"
-			left="slot"
-			subTitle="Left custom picture"
-			detail="Right arrow"
-			info="There is no segmentation line at the bottom"
-		>
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-10 h-10" src="/assets/images/icon_火车票.png" alt="" />
-			</div>
+		<Cell title="All Features" subTitle="Left Custom Image" detail="Right Arrow" info="No Border">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-10 h-10" src="/assets/images/icon_火车票.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
 		<Cell
-			title="The title is long, long, long, long, long, long, long, long, long, long, long, long, long, long, and long, and automatically changed."
-			subTitle="My secondary title is also very long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long."
+			title="Long title that wraps automatically when it exceeds the width of the container."
+			subTitle="Long subtitle that also wraps automatically when it exceeds the width."
 		/>
 		<Cell
-			title="The big picture on the left is a big picture, the title is super long, and it is automatically changed. Try the rest of the match."
-			subTitle="My secondary title is also very good...Oh not long."
-			left="slot"
+			title="Large image with long title that wraps automatically. Try other combinations yourself."
+			subTitle="Short subtitle"
 			line={false}
 		>
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-20 h-20" src="/assets/images/icon_外卖.png" alt="" />
-			</div>
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-20 h-20" src="/assets/images/icon_外卖.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
 	</div>
 
 	<CellGroup>
-		<Cell title="Group" mx="0" my="0" shadow="none" line radius="none" />
-		<Cell title="Group" mx="0" my="0" shadow="none" radius="none" />
+		<Cell title="Group Usage" mx="0" my="0" shadow="none" line radius="none" />
+		<Cell title="Group Usage" mx="0" my="0" shadow="none" radius="none" />
 	</CellGroup>
 	<CellGroup mx="0" radius="none">
-		<Cell title="Group" detail="No horizontal spacing" mx="0" my="0" shadow="none" line radius="none" />
-		<Cell title="Group" detail="Non rounded" mx="0" my="0" shadow="none" radius="none" />
+		<Cell title="Group Usage" detail="No Margin" mx="0" my="0" shadow="none" line radius="none" />
+		<Cell title="Group Usage" detail="No Radius" mx="0" my="0" shadow="none" radius="none" />
 	</CellGroup>
 	<CellGroup shadow="xl" radius="2xl">
-		<Cell title="Group" detail="Increase projection" mx="0" my="0" shadow="none" line radius="none" />
-		<Cell title="Group" detail="Increase the corner" mx="0" my="0" shadow="none" radius="none" />
+		<Cell title="Group Usage" detail="Large Shadow" mx="0" my="0" shadow="none" line radius="none" />
+		<Cell title="Group Usage" detail="Large Radius" mx="0" my="0" shadow="none" radius="none" />
 	</CellGroup>
 
 	<div>
-		<Cell title="Left -right distance" mx="0" radius="none" />
-		<Cell title="Non -rounded" radius="none" />
-		<Cell title="Basic rounded corner" radius="base" />
-		<Cell title="Medium corner" radius="md" />
-		<Cell title="Large rounded corner" radius="lg" />
-		<Cell title="Increase the corner" radius="xl" />
-		<Cell title="Larger corner" radius="2xl" />
-		<Cell title="All -rounded corner" radius="full" />
-		<Cell title="Increase projection" shadow="lg" />
+		<Cell title="No Margin" mx="0" radius="none" />
+		<Cell title="No Radius" radius="none" />
+		<Cell title="Base Radius" radius="base" />
+		<Cell title="Medium Radius" radius="md" />
+		<Cell title="Large Radius" radius="lg" />
+		<Cell title="XL Radius" radius="xl" />
+		<Cell title="2XL Radius" radius="2xl" />
+		<Cell title="Full Radius" radius="full" />
+		<Cell title="Large Shadow" shadow="lg" />
 	</div>
 	<div>
-		<Cell title="Custom text color" injClass="text-primary dark:text-dark" />
-		<Cell title="Custom background color" injClass="!bg-extend0/20 active:!bg-extend0/10" line={false} />
+		<Cell title="Custom Text Color" injClass="text-primary dark:text-dark" />
+		<Cell title="Custom Background" injClass="!bg-extend0/20 active:!bg-extend0/10" line={false} />
 	</div>
 	<div>
-		<Cell love title="Love version" />
-		<Cell love title="Love version" detail="Love version" />
-		<Cell love title="Love version" left={{ name: 'ri-hand-heart-line', theme: true }} />
+		<Cell love title="Care Version" />
+		<Cell love title="Care Version" detail="Care" />
+		<Cell love title="Care Version" left={{ name: 'ri-hand-heart-line', theme: true }} />
 	</div>
 </div>

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

@@ -2,45 +2,55 @@
 <script>
 	import { Cell, CellGroup, Toast } from '../../../../../packages/stdf/components';
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="flex flex-col space-y-8 py-8">
 	<div>
 		<Cell title="基础用法" />
 		<Cell title="右侧有详情" detail="归零者" />
-		<Cell title="详情使用 Slot" detail="slot">
-			<span slot="detail" class="text-primary dark:text-dark text-xs">我是插槽内容</span>
+		<Cell title="详情使用 Snippet">
+			{#snippet detailChild()}
+				<span class="text-primary dark:text-dark text-xs">我是 Snippet</span>
+			{/snippet}
 		</Cell>
-		<Cell title="右侧无箭头" right="none" />
-		<Cell title="纯展示，无点击效果" right="none" clickAll={false} />
-		<Cell title="点击事件" detail="请点击我" on:click={() => (visible = true)} />
+		<Cell title="右侧无箭头" right={null} />
+		<Cell title="纯展示，无点击效果" right={null} clickAll={false} />
+		<Cell title="点击事件" detail="请点击我" onclick={() => (visible = true)} />
 		<Toast bind:visible message="你戳到我了！" />
-		<Cell title="右侧有详情无箭头" detail="归零者" right="none" />
+		<Cell title="右侧有详情无箭头" detail="归零者" right={null} />
 		<Cell title="右侧开关（点击整行皆可触发开关）" right={{ type: 'switch' }} />
 		<Cell title="开关带详情" detail="解释一下" right={{ type: 'switch' }} />
 		<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
 		<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
 		<Cell title="仅点击开关触发" clickAll={false} right={{ type: 'switch' }} />
 		<Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
-		<Cell title="右侧使用 Icon 组件" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
-		<Cell title="左侧自定义图片" left="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_颁奖.png" alt="" />
-			</div>
+		<Cell title="右侧使用 Icon 组件" right={{ type: 'icon', icon: { name: 'ri-battery-charge-line', size: 20, theme: true } }} />
+		<Cell title="左侧自定义图片">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_颁奖.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
-		<Cell title="左右都自定义图片" left="slot" right="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_评价.png" alt="" />
-			</div>
-			<div slot="right" class="mr-1 shrink-0">
-				<img class="w-6 h-6" src="/assets/images/icon_美食.png" alt="" />
-			</div>
+		<Cell title="左右都自定义图片">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_评价.png" alt="" />
+				</div>
+			{/snippet}
+			{#snippet rightChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-6 h-6" src="/assets/images/icon_美食.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
-		<Cell title="来张大点的图" left="slot">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-10 h-10" src="/assets/images/icon_会员.png" alt="" />
-			</div>
+		<Cell title="来张大点的图">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-10 h-10" src="/assets/images/icon_会员.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
 		<Cell title="左侧有次级标题" subTitle="我是次，但我不次" />
 		<Cell title="有次级标题和右侧详情" subTitle="我是次，但我不次" detail="归零者" />
@@ -54,24 +64,23 @@
 			info="重启者"
 			left={{ name: 'ri-shopping-basket-line', theme: true }}
 		/>
-		<Cell title="图片什么也来吧" left="slot" subTitle="左侧自定义图片" detail="右侧箭头" info="底部无分割线">
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-10 h-10" src="/assets/images/icon_火车票.png" alt="" />
-			</div>
+		<Cell title="图片什么也来吧" subTitle="左侧自定义图片" detail="右侧箭头" info="底部无分割线">
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-10 h-10" src="/assets/images/icon_火车票.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
 		<Cell
 			title="标题超长长长长长长长长长长长长长长长长长长长，自动换行。"
 			subTitle="我这个次级标题也很长长长长长长长长长长长长长长长长长长长长长长长长长长。"
 		/>
-		<Cell
-			title="左侧自定义大图片，标题超长，自动换行。其余的搭配自己去尝试吧。"
-			subTitle="我这个次级标题也很...哦不长了。"
-			left="slot"
-			line={false}
-		>
-			<div slot="left" class="mr-1 shrink-0">
-				<img class="w-20 h-20" src="/assets/images/icon_外卖.png" alt="" />
-			</div>
+		<Cell title="左侧自定义大图片，标题超长，自动换行。其余的搭配自己去尝试吧。" subTitle="我这个次级标题也很...哦不长了。" line={false}>
+			{#snippet leftChild()}
+				<div class="mr-1 shrink-0">
+					<img class="w-20 h-20" src="/assets/images/icon_外卖.png" alt="" />
+				</div>
+			{/snippet}
 		</Cell>
 	</div>
 

doc/components/cell/api.md

@@ -1,48 +1,58 @@
 ## Cell Props
 
-| 属性      | 类型                                | 默认值  | 可选值                                        | 必传 | 说明                   |
-| --------- | ----------------------------------- | ------- | --------------------------------------------- | ---- | ---------------------- |
-| title     | String                              | ''      | -                                             | Y    | 标题。                 |
-| detail    | String/slot                         | ''      | 任何字符/'slot'                               | N    | 右侧详情。             |
-| left      | String/Icon Props/slot              | ''      | ''/Icon Props/'slot'                          | N    | 最左侧内容。           |
-| right     | String/Icon Props/Switch Props/slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N    | 最右侧内容。           |
-| subTitle  | String                              | ''      | -                                             | N    | 左侧次级标题。         |
-| info      | String                              | ''      | -                                             | N    | 右侧次级信息。         |
-| line      | Boolean                             | false   | true/false                                    | N    | 是否显示底部分割线。   |
-| my        | String                              | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 上下间距。             |
-| mx        | String                              | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 左右间距。             |
-| radius    | String                              | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N    | 圆角风格。             |
-| shadow    | String                              | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N    | 阴影风格。             |
-| switcheck | Boolean                             | false   | true/false                                    | N    | 开关状态。             |
-| injClass  | String                              | ''      | Class                                         | N    | 注入 CSS 名称。        |
-| love      | Boolean                             | false   | true/false                                    | N    | 是否开启关爱版。       |
-| clickAll  | Boolean                             | true    | true/false                                    | N    | 是否点击整行触发事件。 |
+| 名称         | 类型                                                              | 默认值    | 必传 | 说明                   |
+| ------------ | ----------------------------------------------------------------- | --------- | ---- | ---------------------- |
+| title        | `string`                                                          | `''`      | N    | 标题。                 |
+| detail       | `string`                                                          | `''`      | N    | 右侧详情。             |
+| left         | `null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `null`    | N    | 最左侧内容。           |
+| right        | `null\|'arrow'\|CellRight`                                        | `'arrow'` | N    | 最右侧内容。           |
+| subTitle     | `string`                                                          | `''`      | N    | 左侧次级标题。         |
+| info         | `string`                                                          | `''`      | N    | 右侧次级信息。         |
+| line         | `boolean`                                                         | `false`   | N    | 是否显示底部分割线。   |
+| my           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'4'`     | N    | 上下间距。             |
+| mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N    | 左右间距。             |
+| radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N    | 圆角风格。             |
+| switchActive | `boolean`                                                         | `false`   | N    | 开关状态。             |
+| shadow       | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'sm'`    | N    | 阴影风格。             |
+| injClass     | `string`                                                          | `''`      | N    | 注入 CSS 名称。        |
+| love         | `boolean`                                                         | `false`   | N    | 是否开启关爱版。       |
+| clickAll     | `boolean`                                                         | `true`    | N    | 是否点击整行触发事件。 |
 
 ## Cell Events
 
-| 名称  | 参数 | 描述     |
-| ----- | ---- | -------- |
-| click | -    | 点击触发 |
+| 名称    | 类型         | 参数 | 描述     |
+| ------- | ------------ | ---- | -------- |
+| onclick | `() => void` | -    | 点击触发 |
 
-## Cell Slots
+## Cell Snippets
 
-| 名称   | 说明          |
-| ------ | ------------- |
-| left   | 最左侧内容。  |
-| right  | 最右侧内容。  |
-| detail | Detail 内容。 |
+| 名称        | 类型                                                                | 参数 | 说明          |
+| ----------- | ------------------------------------------------------------------- | ---- | ------------- |
+| leftChild   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 最左侧内容。  |
+| rightChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 最右侧内容。  |
+| detailChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | Detail 内容。 |
 
 ## CellGroup Props
 
-| 属性   | 类型   | 默认值 | 可选值                                    | 必传 | 说明       |
-| ------ | ------ | ------ | ----------------------------------------- | ---- | ---------- |
-| my     | String | '4'    | '0'/'1'/'2'/'3'/'4'/'6'/'8'               | N    | 上下间距。 |
-| mx     | String | '2'    | '0'/'1'/'2'/'3'/'4'/'6'/'8'               | N    | 左右间距。 |
-| radius | String | 'lg'   | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full' | N    | 圆角风格。 |
-| shadow | String | 'sm'   | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'   | N    | 阴影风格。 |
+| 名称   | 类型                                              | 默认值 | 必传 | 说明       |
+| ------ | ------------------------------------------------- | ------ | ---- | ---------- |
+| my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`  | N    | 上下间距。 |
+| mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`  | N    | 左右间距。 |
+| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'` | N    | 圆角风格。 |
+| shadow | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'sm'` | N    | 阴影风格。 |
 
-## CellGroup Slots
+## CellGroup Snippets
 
-| 名称 | 说明                               |
-| ---- | ---------------------------------- |
-| -    | Cell Group 内容，一般是多个 Cell。 |
+| 名称     | 类型                                                                | 参数 | 说明                               |
+| -------- | ------------------------------------------------------------------- | ---- | ---------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | Cell Group 内容，一般是多个 Cell。 |
+
+## CellRight
+
+```javascript
+type CellRight = {
+	type: 'switch' | 'icon';
+	switch?: Switch;
+	icon?: Icon;
+};
+```

doc/components/cell/api_en.md

@@ -1,48 +1,58 @@
 ## Cell Props
 
-| Property  | Type                                         | Default | Options                                       | Required | Description                                              |
-| --------- | -------------------------------------------- | ------- | --------------------------------------------- | -------- | -------------------------------------------------------- |
-| title     | String                                       | ''      | -                                             | Y        | Title.                                                   |
-| detail    | String or Slot                               | ''      | Any character/'slot'                          | N        | Detail on the right side.                                |
-| left      | String or Icon Props or Slot                 | ''      | ''/Icon Props/'slot'                          | N        | The leftmost content.                                    |
-| right     | String or Icon Props or Switch Props or Slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N        | The content on the far right.                            |
-| subTitle  | String                                       | ''      | -                                             | N        | Secondary title on the left.                             |
-| info      | String                                       | ''      | -                                             | N        | Secondary information on the right.                      |
-| line      | Boolean                                      | false   | true/false                                    | N        | Whether to display bottom dividing line.                 |
-| my        | String                                       | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Top and bottom margin.                                   |
-| mx        | String                                       | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Left and right margin.                                   |
-| radius    | String                                       | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N        | Rounded style.                                           |
-| shadow    | String                                       | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N        | Shadow style.                                            |
-| switcheck | Boolean                                      | false   | true/false                                    | N        | Switch status.                                           |
-| injClass  | String                                       | ''      | Class                                         | N        | Inject CSS name.                                         |
-| love      | Boolean                                      | false   | true/false                                    | N        | Whether to enable the Loving version.                    |
-| clickAll  | Boolean                                      | true    | true/false                                    | N        | Whether to trigger the event by clicking the entire row. |
+| Name         | Type                                                              | Default   | Required | Description                  |
+| ------------ | ----------------------------------------------------------------- | --------- | -------- | ---------------------------- |
+| title        | `string`                                                          | `''`      | N        | Title.                       |
+| detail       | `string`                                                          | `''`      | N        | Right detail.                |
+| left         | `null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `null`    | N        | Leftmost content.            |
+| right        | `null\|'arrow'\|CellRight`                                        | `'arrow'` | N        | Rightmost content.           |
+| subTitle     | `string`                                                          | `''`      | N        | Left subtitle.               |
+| info         | `string`                                                          | `''`      | N        | Right secondary info.        |
+| line         | `boolean`                                                         | `false`   | N        | Show bottom divider.         |
+| my           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'4'`     | N        | Vertical margin.             |
+| mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N        | Horizontal margin.           |
+| radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N        | Border radius style.         |
+| switchActive | `boolean`                                                         | `false`   | N        | Switch state.                |
+| shadow       | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'sm'`    | N        | Shadow style.                |
+| injClass     | `string`                                                          | `''`      | N        | Inject CSS class name.       |
+| love         | `boolean`                                                         | `false`   | N        | Enable care version.         |
+| clickAll     | `boolean`                                                         | `true`    | N        | Click entire row to trigger. |
 
 ## Cell Events
 
-| Name  | Parameters | Description         |
-| ----- | ---------- | ------------------- |
-| click | -          | Triggered on click. |
+| Name    | Type         | Params | Description    |
+| ------- | ------------ | ------ | -------------- |
+| onclick | `() => void` | -      | Click callback |
 
-## Cell Slots
+## Cell Snippets
 
-| Name   | Description                   |
-| ------ | ----------------------------- |
-| left   | The leftmost content.         |
-| right  | The content on the far right. |
-| detail | Detail content.               |
+| Name        | Type                                                                | Params | Description        |
+| ----------- | ------------------------------------------------------------------- | ------ | ------------------ |
+| leftChild   | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Leftmost content.  |
+| rightChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Rightmost content. |
+| detailChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Detail content.    |
 
 ## CellGroup Props
 
-| Property | Type   | Default | Options                                   | Required | Description            |
-| -------- | ------ | ------- | ----------------------------------------- | -------- | ---------------------- |
-| my       | String | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'               | N        | Top and bottom margin. |
-| mx       | String | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'               | N        | Left and right margin. |
-| radius   | String | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full' | N        | Rounded style.         |
-| shadow   | String | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'   | N        | Shadow style.          |
+| Name   | Type                                              | Default | Required | Description        |
+| ------ | ------------------------------------------------- | ------- | -------- | ------------------ |
+| my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`   | N        | Vertical margin.   |
+| mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`   | N        | Horizontal margin. |
+| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'`  | N        | Border radius.     |
+| shadow | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'sm'`  | N        | Shadow style.      |
 
-## CellGroup Slots
+## CellGroup Snippets
 
-| Name | Description                                  |
-| ---- | -------------------------------------------- |
-| -    | The content of Cell Group, typically plural. |
+| Name     | Type                                                                | Params | Description                                      |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------ |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Cell Group content, usually multiple Cell items. |
+
+## CellRight
+
+```javascript
+type CellRight = {
+	type: 'switch' | 'icon';
+	switch?: Switch;
+	icon?: Icon;
+};
+```

doc/components/cell/guide.md

@@ -6,17 +6,17 @@
 
 Cell 作为移动端使用频率较高的组件，承载的使用场景也比较多，因此可以很明显地看出来 Props 比较多，支持的自定义选项也比较多。
 
-## 插槽
+## Snippet
 
-Cell 组件支持 left 和 right 两种插槽，当 left 参数为‘slot’时 Cell 最左侧内容会被 left 插槽渲染，可参考示例自定义左侧图片；当 right 参数为‘slot’时 Cell 最右侧内容会被 right 插槽渲染，可参考示例自定义右侧图片。
+Cell 组件支持 leftChild、rightChild 和 detailChild 三种插槽，当传入 leftChild 时 Cell 最左侧内容会被 leftChild 插槽渲染，可参考示例自定义左侧图片；当传入 rightChild 时 Cell 最右侧内容会被 rightChild 渲染，可参考示例自定义右侧图片；当传入 detailChild 时 Cell 右侧详情内容会被 detailChild 渲染，可参考示例自定义右侧详情内容。
 
 ## left & right
 
-left 参数支持使用 Icon Props 格式的 Object，此时将使用 STDF 的 Icon 组件渲染。
+left 参数支持使用 Icon Props，此时将使用 STDF 的 Icon 组件渲染。
 
-考虑到 Cell 右侧区域使用箭头的场景非常多，组件默认 right 参数为‘arrow’，显示箭头。
+考虑到 Cell 右侧区域使用箭头的场景非常多，组件默认 right 参数为 `'arrow'`，显示箭头。
 
-right 也支持传入 Icon Props，考虑右侧使用开关的场景较多，为了区分是 Switch Props 还是其他 Icon Props，right 增加了一个 type 属性（可选‘icon’和‘switch’）用于区分 Icon 和 Switch 组件。
+right 也支持传入 Icon Props，考虑右侧使用开关的场景较多，为了区分是 Switch Props 还是其他 Icon Props，right 增加了一个 type 属性（可选 `'icon'` 和 `'switch'`）用于区分 Icon 和 Switch 组件。
 
 优化：当右侧为 switch 时，点击整个 Cell 区域都会切换 Switch 的开关状态。
 
@@ -26,9 +26,9 @@ right 也支持传入 Icon Props，考虑右侧使用开关的场景较多，为
 
 移动端考虑交互的友好性，Cell 默认点击整行都会触发事件，但是考虑场景的多样性，你可以通过将 clickAll 参数设置为 false 来禁用这个功能。只是在特定区域触发事件，比如示例中配合 Switch 组件使用，仅在点击 Switch 时触发事件。
 
-## switcheck
+## switchActive
 
-switcheck 值仅在 right 的 type 为 switch 时生效，表示开关状态值。注意，此时 Cell 内部 Switch 的 check 由 switcheck 决定，**请不要在 switch 内部再传入 check**。
+switchActive 值仅在 right 的 type 为 switch 时生效，表示开关状态值。注意，此时 Cell 内部 Switch 的 active 由 switchActive 决定，**请不要在 switch 内部再传入 active**。
 
 ## 底部分割线
 
@@ -36,7 +36,7 @@ switcheck 值仅在 right 的 type 为 switch 时生效，表示开关状态值
 
 ## 组合使用
 
-Cell 组件支持组合使用，可以向 Cell Group 传入 Cell 来实现。为了不影响布局，注意配置单条 Cell 的 my、mx、radius、shadow、line 参数，请参考示例。
+Cell 组件支持组合使用，可以向 CellGroup 传入 Cell 来实现。为了不影响布局，注意配置单条 Cell 的 my、mx、radius、shadow、line 参数，请参考示例。
 
 ## 自定义
 

doc/components/cell/guide_en.md

@@ -1,43 +1,43 @@
-> Cell uses the icon ri-arrow-right-s-line, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+> Cell uses the icon ri-arrow-right-s-line, please make sure this icon is included in your project's symbol.svg file. For detailed information, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
 
 ## Description
 
-It is always difficult to balance customization and ease of use in component library development.
+In component library development, satisfying both customization and ease of use is always a trade-off.
 
-As a component with high frequency of use in mobile scenes, Cell has a lot of props and customizable options due to the various use cases it can accommodate.
+As a frequently used component in mobile applications, Cell supports many use cases, which is why it has quite a few Props and customization options.
 
-## Slots
+## Snippet
 
-Cell component supports two slots: left and right. When the left parameter is set to 'slot', the leftmost content of the cell will be rendered in the left slot. You can refer to the example to customize the left image. When the right parameter is set to 'slot', the content on the right side of the cell will be rendered in the right slot. You can refer to the example to customize the right image.
+Cell component supports three slots: leftChild, rightChild and detailChild. When leftChild is provided, the leftmost content of Cell will be rendered by the leftChild slot, refer to examples for customizing left images; when rightChild is provided, the rightmost content will be rendered by rightChild, refer to examples for customizing right images; when detailChild is provided, the right detail content will be rendered by detailChild, refer to examples for customizing right detail content.
 
 ## left & right
 
-The left parameter also supports the Icon Props format Object. In this case, the STDF Icon component will be used to render it.
+The left parameter supports Icon Props, which will be rendered using STDF's Icon component.
 
-Considering that the arrow is widely used in the right area of the Cell component, the component defaults to the 'arrow' value for the right parameter, which displays the arrow.
+Considering that arrows are commonly used in the right area of Cell, the default right parameter is set to `'arrow'`, displaying an arrow.
 
-The right parameter also supports Icon Props. Considering that the switch is widely used in the right area of the Cell component, the right parameter adds a type property (optional 'icon' and 'switch') to distinguish between Icon and Switch components.
+right also supports Icon Props. Given that switches are frequently used on the right side, to distinguish between Switch Props and other Icon Props, right includes a type attribute (options are `'icon'` and `'switch'`) to differentiate between Icon and Switch components.
 
-Optimization: When the right side is a switch, clicking on the entire Cell area will toggle the switch.
+Optimization: When right is set to switch, clicking anywhere in the Cell area will toggle the Switch state.
 
-Please refer to the respective component API for specific Icon Props and Switch Props.
+For specific Icon Props and Switch Props, please refer to the corresponding component APIs.
 
 ## clickAll
 
-Considering the user-friendliness of mobile interaction, by default, clicking on any part of a cell on a mobile device will trigger an event. However, to accommodate different scenarios, you can disable this feature by setting the `clickAll` parameter to false. This means that events will only be triggered in specific areas, such as when using the Switch component in the example, where the event will only be triggered when clicking on the Switch.
+Considering mobile interaction friendliness, Cell triggers events by default when clicking anywhere in the row. However, for diverse scenarios, you can disable this feature by setting clickAll parameter to false. This restricts event triggering to specific areas, like in examples where it's used with Switch component to only trigger events when clicking the Switch.
 
-## switcheck
+## switchActive
 
-The switcheck value only takes effect when the type of right is switch, indicating the switch state value. Please note that the check inside the Cell Switch is determined by switcheck. **Please do not pass check inside the switch again**.
+switchActive value only takes effect when right's type is switch, indicating the switch state. Note that in this case, the Cell's internal Switch active state is determined by switchActive, **please do not pass active inside switch again**.
 
 ## Bottom Divider
 
-Mainly used for combination scenarios, when there is a gap between cells, you can use the line parameter to control whether the bottom divider is displayed.
+Mainly used in combinations, when there are gaps between Cells, you can use the line parameter to control whether to display the bottom divider.
 
 ## Combination Usage
 
-The Cell component supports combination usage, and Cell can be passed to Cell Group. In order not to affect the layout, please refer to the example to configure the line parameter, my, mx, radius, shadow for a single Cell.
+Cell component supports combination usage by passing Cells to CellGroup. To avoid affecting the layout, pay attention to configuring individual Cell's my, mx, radius, shadow, line parameters, please refer to examples.
 
 ## Customization
 
-By using the top, bottom, left, and right padding and top and bottom radius parameters, you can configure various Cell styles. If they still do not meet your needs, you can use injected CSS (injClass) to implement more customized styles. Please refer to the example.
+Using vertical and horizontal margin parameters and top/bottom border radius parameters, you can configure various Cell styles. If these still don't meet your needs, you can use injected CSS (injClass) to achieve more custom styles, please refer to examples.

packages/stdf/components/cell/Cell.svelte

@@ -1,13 +1,6 @@
 <script>
-	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import Switch from '../switch/Switch.svelte';
-	import zh_CN from '../../lang/zh_CN';
-
-	// 当前语言
-	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const commonLang = currentLang.common;
 
 	/** @typedef {import('../../index.d').Cell} CellProps */
 	/** @type {CellProps} */
@@ -15,14 +8,14 @@
 		title = '',
 		detail = '',
 		right = 'arrow',
-		left = '',
+		left = null,
 		subTitle = '',
 		info = '',
 		line = false,
 		my = '4',
 		mx = '2',
 		radius = 'lg',
-		switchActive = false,
+		switchActive = $bindable(false),
 		shadow = 'sm',
 		injClass = '',
 		love = false,
@@ -69,8 +62,8 @@
 	// Click event
 	const setClickFun = () => {
 		if (clickAll) {
-			if (typeof right === 'object' && right.type === 'switch' && !right.switch?.disabled) {
-				switchActive = right.switch?.async ? switchActive : !switchActive;
+			if (typeof right === 'object' && right?.type === 'switch' && !right?.switch?.disabled) {
+				switchActive = right?.switch?.async ? switchActive : !switchActive;
 			}
 			// 派发事件
 			// Dispatch event
@@ -79,62 +72,53 @@
 	};
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	onclick={setClickFun}
-	class={`px-4 cursor-pointer bg-white dark:bg-gray-800${clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} ${
-		myClass[my] || myClass['4']
-	}${mxClass[mx] || mxClass['2']}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${
-		love ? ' text-xl' : ''
-	} ${injClass}`}
+	class="px-4 bg-white dark:bg-gray-800{clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} {myClass[my] ||
+		myClass['4']}{mxClass[mx] || mxClass['2']}{radiusObj[radius] || radiusObj['lg']} {shadowClass[shadow] || shadowClass['sm']}{love
+		? ' text-xl'
+		: ''} {injClass}"
 >
-	<div class={`flex justify-between gap-4 py-4${line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}`}>
-		<!-- left -->
+	<button
+		onclick={setClickFun}
+		class="flex w-full justify-between gap-4 py-4{line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}"
+	>
 		<div class="flex justify-between items-center">
-			{#if left === ''}
-				<!-- none -->
-			{:else if left === 'child'}
+			{#if leftChild}
 				{@render leftChild?.()}
-			{:else}
-				<div class="mr-1 flex flex-col justify-center">
+			{:else if left}
+				<div class="flex flex-col justify-center mr-1">
 					<Icon {...left} />
 				</div>
-			{/if}
-			<div class={`flex flex-col ${subTitle === '' ? 'justify-center' : 'justify-between'}`}>
+			{:else}{/if}
+			<div class="flex flex-col text-left {subTitle === '' ? 'justify-center' : 'justify-between'}">
 				<div class="font-medium">{title}</div>
 				<div class="text-xs text-gray-500 dark:text-gray-400">{subTitle}</div>
 			</div>
 		</div>
-		<!-- right -->
 		<div class="flex justify-between items-center">
-			<div class={`flex flex-col ${info === '' ? 'justify-center' : 'justify-between'} text-right `}>
-				{#if detail === 'slot'}
+			<div class="flex flex-col {info === '' ? 'justify-center' : 'justify-between'} text-right">
+				{#if detailChild}
 					{@render detailChild?.()}
-				{:else}
+				{:else if detail}
 					<div class="text-gray-700 dark:text-gray-300">{detail}</div>
-				{/if}
-				<div class="text-xs text-gray-500 dark:text-gray-400 font-light">{info}</div>
+				{:else}{/if}
+				<div class="text-xs font-light text-gray-500 dark:text-gray-400">{info}</div>
 			</div>
-			{#if right === 'none'}
-				<!-- none -->
+			{#if rightChild}
+				{@render rightChild?.()}
 			{:else if right === 'arrow'}
-				<div class="text-gray-700 dark:text-gray-300 flex flex-col justify-center">
+				<div class="flex flex-col justify-center text-gray-700 dark:text-gray-300">
 					<Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
 				</div>
-			{:else if typeof right === 'object' && right.type === 'switch' && right.switch}
-				<div class="ml-1 flex flex-col justify-center">
-					<Switch active={switchActive} {...right.switch} />
+			{:else if typeof right === 'object' && right?.type === 'switch'}
+				<div class="flex flex-col justify-center ml-1">
+					<Switch active={switchActive} {...right?.switch} />
 				</div>
-			{:else if typeof right === 'object' && right.type === 'icon' && right.icon}
-				<div class="ml-1 flex flex-col justify-center">
-					<Icon {...right.icon} />
+			{:else if typeof right === 'object' && right?.type === 'icon' && right?.icon}
+				<div class="flex flex-col justify-center ml-1">
+					<Icon {...right?.icon} />
 				</div>
-			{:else if right === 'child'}
-				{@render rightChild?.()}
-			{:else}
-				<!-- none -->
-			{/if}
+			{:else}{/if}
 		</div>
-	</div>
+	</button>
 </div>

packages/stdf/components/cell/CellGroup.svelte

@@ -26,9 +26,9 @@
 </script>
 
 <div
-	class={`bg-white dark:bg-black overflow-hidden${shadowClass[shadow] || shadowClass['sm']}${radiusClass[radius] || radiusClass['lg']}${
-		myClass[my] || myClass['4']
-	}${mxClass[mx] || mxClass['2']}`}
+	class="bg-white dark:bg-black overflow-hidden{shadowClass[shadow] || shadowClass['sm']}{radiusClass[radius] || radiusClass['lg']}{myClass[
+		my
+	] || myClass['4']}{mxClass[mx] || mxClass['2']}"
 >
 	{@render children?.()}
 </div>