[stdf]Update BottomSheet compoent, demo and documents.

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

@@ -3,125 +3,125 @@
 	import { BottomSheet, Cell, Toast, Button } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	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 toastBackVisible = false;
-	let toastCloseVisible = false;
+	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 toastBackVisible = $state(false);
+	let toastCloseVisible = $state(false);
 
 	const stayHeightList = [40, 60, 80];
-	let currentHeight = 60;
-	const heightChangeFunc = e => (currentHeight = e.detail);
+	let currentHeight = $state(60);
+	const heightChangeFunc = height => (currentHeight = height);
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic Usage" onclick={() => (visible1 = true)} />
 	<BottomSheet bind:visible={visible1} title="This area supports sliding">
 		<div class="text-center h-full flex flex-col justify-center">
 			<div>This is the content area</div>
 		</div>
 	</BottomSheet>
 
-	<Cell title="Content area scrolling" on:click={() => (visible8 = true)} />
+	<Cell title="Content area scrolling" onclick={() => (visible8 = true)} />
 	<BottomSheet bind:visible={visible8}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="There is a return button" on:click={() => (visible2 = true)} />
+	<Cell title="With back button" onclick={() => (visible2 = true)} />
 	<BottomSheet
 		bind:visible={visible2}
 		showBackIcon
-		title="Click back and closed to trigger events"
-		on:back={() => (toastBackVisible = true)}
-		on:close={() => (toastCloseVisible = true)}
+		title="Click back and close to trigger events"
+		onback={() => (toastBackVisible = true)}
+		onclose={() => (toastCloseVisible = true)}
 	>
 		<Aphorism num={12} />
 	</BottomSheet>
-	<Toast bind:visible={toastBackVisible} message="Trigger BottomSheet Return to the incident!" />
-	<Toast bind:visible={toastCloseVisible} message="Trigger BottomSheet Close the event!" />
+	<Toast bind:visible={toastBackVisible} message="Triggered BottomSheet return event!" />
+	<Toast bind:visible={toastCloseVisible} message="Triggered BottomSheet close event!" />
 
-	<Cell title="The initial height is 90" on:click={() => (visible3 = true)} />
+	<Cell title="Initial height is 90" onclick={() => (visible3 = true)} />
 	<BottomSheet bind:visible={visible3} stayHeightIndex={2}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="Fixed height 40/60/80" on:click={() => (visible4 = true)} />
+	<Cell title="Fixed height is 40/60/80" onclick={() => (visible4 = true)} />
 	<BottomSheet
 		bind:visible={visible4}
 		{stayHeightList}
-		on:heightChange={heightChangeFunc}
-		title={`The current fixed height is ${currentHeight}`}
+		onheightChange={heightChangeFunc}
+		title={`Current fixed height is ${currentHeight}`}
 	>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
+	<Cell title="Click mask to close" onclick={() => (visible5 = true)} />
 	<BottomSheet bind:visible={visible5} maskClosable>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="The transition time is 1s" on:click={() => (visible6 = true)} />
+	<Cell title="Transition time is 1 second" onclick={() => (visible6 = true)} />
 	<BottomSheet bind:visible={visible6} duration={1000}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="The mask is completely transparent and blurred" on:click={() => (visible7 = true)} />
+	<Cell title="Mask completely transparent and blurry" onclick={() => (visible7 = true)} />
 	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="No content on the head" on:click={() => (visible9 = true)} />
+	<Cell title="Header does not display any content" onclick={() => (visible9 = true)} />
 	<BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
 		<div class="px-4 py-8 h-full flex flex-col justify-around text-center">
-			<div>Head area</div>
-			<div>title</div>
-			<div>Return and close icons</div>
-			<div>Dividing line</div>
-			<div>No display</div>
-			<div>The location still retains as a sliding touch area</div>
+			<div>Header area</div>
+			<div>Title</div>
+			<div>Back and close icon</div>
+			<div>Divider</div>
+			<div>None</div>
+			<div>Position still reserved as a sliding touch area</div>
 			<div class="mb-8">
-				<Button on:click={() => (visible9 = false)}>Close</Button>
+				<Button onclick={() => (visible9 = false)}>Close</Button>
 			</div>
 		</div>
 	</BottomSheet>
 
-	<Cell title="Hide off the icon and the title is centered" on:click={() => (visible10 = true)} />
-	<BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="Click the mask to close">
+	<Cell title="Hide close icon and center title" onclick={() => (visible10 = true)} />
+	<BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="Click mask to close">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="Another turning off icon" on:click={() => (visible13 = true)} />
+	<Cell title="Another close icon" onclick={() => (visible13 = true)} />
 	<BottomSheet bind:visible={visible13} closeContent="closeIcon">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="Close the area custom text" on:click={() => (visible14 = true)} />
-	<BottomSheet bind:visible={visible14} closeContent="Finish">
+	<Cell title="Custom close text" onclick={() => (visible14 = true)} />
+	<BottomSheet bind:visible={visible14} closeContent="Complete">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="The icon is different from the corner style" on:click={() => (visible12 = true)} />
+	<Cell title="Different rounded style" onclick={() => (visible12 = true)} />
 	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="Can decline to the end to close" on:click={() => (visible11 = true)} />
+	<Cell title="Slide to bottom to close" onclick={() => (visible11 = true)} />
 	<BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
 		<div class="p-4">
-			Set the Closeheight to 10. If the position from the bottom of the page is less than 10% at the bottom of the page at the end of the
-			sliding, it will automatically turn off.
+			Set closeHeight to 10. If the position distance is less than 10% of the page height when sliding ends, it will be automatically
+			closed.
 		</div>
 	</BottomSheet>
 </div>
@@ -129,21 +129,29 @@
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //Introduce data
-
-    export let num = 0; //Display number
-    export let compact = false; //Whether to compact mode
-
-    //Randomly remove NUM data from Aphorisms
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
 <div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

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

@@ -3,81 +3,81 @@
 	import { BottomSheet, Cell, Toast, Button } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	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 toastBackVisible = false;
-	let toastCloseVisible = false;
+	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 toastBackVisible = $state(false);
+	let toastCloseVisible = $state(false);
 
 	const stayHeightList = [40, 60, 80];
-	let currentHeight = 60;
-	const heightChangeFunc = e => (currentHeight = e.detail);
+	let currentHeight = $state(60);
+	const heightChangeFunc = height => (currentHeight = height);
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<BottomSheet bind:visible={visible1} title="此区域支持滑动">
 		<div class="text-center h-full flex flex-col justify-center">
 			<div>这里是内容区域</div>
 		</div>
 	</BottomSheet>
 
-	<Cell title="内容区域滚动" on:click={() => (visible8 = true)} />
+	<Cell title="内容区域滚动" onclick={() => (visible8 = true)} />
 	<BottomSheet bind:visible={visible8}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="有返回按钮" on:click={() => (visible2 = true)} />
+	<Cell title="有返回按钮" onclick={() => (visible2 = true)} />
 	<BottomSheet
 		bind:visible={visible2}
 		showBackIcon
 		title="点击返回与关闭可触发事件"
-		on:back={() => (toastBackVisible = true)}
-		on:close={() => (toastCloseVisible = true)}
+		onback={() => (toastBackVisible = true)}
+		onclose={() => (toastCloseVisible = true)}
 	>
 		<Aphorism num={12} />
 	</BottomSheet>
 	<Toast bind:visible={toastBackVisible} message="触发了 BottomSheet 返回事件！" />
 	<Toast bind:visible={toastCloseVisible} message="触发了 BottomSheet 关闭事件！" />
 
-	<Cell title="初始高度为 90" on:click={() => (visible3 = true)} />
+	<Cell title="初始高度为 90" onclick={() => (visible3 = true)} />
 	<BottomSheet bind:visible={visible3} stayHeightIndex={2}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="固定高度为 40/60/80" on:click={() => (visible4 = true)} />
-	<BottomSheet bind:visible={visible4} {stayHeightList} on:heightChange={heightChangeFunc} title={`当前固定高度为${currentHeight}`}>
+	<Cell title="固定高度为 40/60/80" onclick={() => (visible4 = true)} />
+	<BottomSheet bind:visible={visible4} {stayHeightList} onheightChange={heightChangeFunc} title={`当前固定高度为${currentHeight}`}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="点击遮罩可关闭" on:click={() => (visible5 = true)} />
+	<Cell title="点击遮罩可关闭" onclick={() => (visible5 = true)} />
 	<BottomSheet bind:visible={visible5} maskClosable>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="出现过渡时间为 1 秒" on:click={() => (visible6 = true)} />
+	<Cell title="出现过渡时间为 1 秒" onclick={() => (visible6 = true)} />
 	<BottomSheet bind:visible={visible6} duration={1000}>
 		<Aphorism num={12} />
 	</BottomSheet>
 
-	<Cell title="遮罩完全透明且模糊" on:click={() => (visible7 = true)} />
+	<Cell title="遮罩完全透明且模糊" onclick={() => (visible7 = true)} />
 	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="头部不显示任何内容" on:click={() => (visible9 = true)} />
+	<Cell title="头部不显示任何内容" onclick={() => (visible9 = true)} />
 	<BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
 		<div class="px-4 py-8 h-full flex flex-col justify-around text-center">
 			<div>头部区域</div>
@@ -87,32 +87,32 @@
 			<div>都不显示</div>
 			<div>位置依旧保留作为滑动触控区域</div>
 			<div class="mb-8">
-				<Button on:click={() => (visible9 = false)}>关闭</Button>
+				<Button onclick={() => (visible9 = false)}>关闭</Button>
 			</div>
 		</div>
 	</BottomSheet>
 
-	<Cell title="隐藏关闭图标且标题居中" on:click={() => (visible10 = true)} />
+	<Cell title="隐藏关闭图标且标题居中" onclick={() => (visible10 = true)} />
 	<BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="点击遮罩关闭">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="另一种关闭图标" on:click={() => (visible13 = true)} />
+	<Cell title="另一种关闭图标" onclick={() => (visible13 = true)} />
 	<BottomSheet bind:visible={visible13} closeContent="closeIcon">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="关闭区域自定义文字" on:click={() => (visible14 = true)} />
+	<Cell title="关闭区域自定义文字" onclick={() => (visible14 = true)} />
 	<BottomSheet bind:visible={visible14} closeContent="完成">
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="图标不同圆角风格" on:click={() => (visible12 = true)} />
+	<Cell title="图标不同圆角风格" onclick={() => (visible12 = true)} />
 	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
 		<Aphorism num={2} />
 	</BottomSheet>
 
-	<Cell title="可下滑到底部关闭" on:click={() => (visible11 = true)} />
+	<Cell title="可下滑到底部关闭" onclick={() => (visible11 = true)} />
 	<BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
 		<div class="p-4">将 closeHeight 设置为 10，如果滑动结束时位置距离页面底部小于页面高度的 10% 则自动关闭。</div>
 	</BottomSheet>
@@ -121,21 +121,29 @@
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //引入数据
-
-    export let num = 0; //显示条数
-    export let compact = false; //是否紧凑模式
-
-    //从 aphorisms 随机取出 num 条数据
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
 <div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

doc/components/bottomSheet/api.md

@@ -1,34 +1,34 @@
 ## BottomSheet Props
 
-| 属性            | 类型    | 默认值                       | 可选值                             | 必传 | 说明                               |
-| --------------- | ------- | ---------------------------- | ---------------------------------- | ---- | ---------------------------------- |
-| visible         | Boolean | false                        | true/false                         | N    | 是否显示。                         |
-| title           | String  | 当前语言的 bottomSheet.title | -                                  | N    | 标题。                             |
-| titleAlign      | String  | 'left'                       | 'left'/'center'/'right'            | N    | 标题对齐方式。                     |
-| showBackIcon    | Boolean | false                        | true/false                         | N    | 是否显示返回图标。                 |
-| closeContent    | String  | 'downIcon'                   | 'downIcon'/'closeIcon'/''/任意文本 | N    | 关闭区域内容。                     |
-| showDivider     | Boolean | true                         | true/false                         | N    | 是否显示分割线。                   |
-| duration        | Number  | 450                          | -                                  | N    | 过渡动画出现时间，单位：ms。       |
-| outDuration     | Number  | 240                          | -                                  | N    | 过渡动画退出时间，单位：ms。       |
-| mask            | Object  | {}                           | 参考 Mask Props                    | N    | 遮罩层参数。                       |
-| maskClosable    | Boolean | false                        | true/false                         | N    | 点击遮罩层是否关闭。               |
-| zIndex          | Number  | 600                          | -                                  | N    | z-index。                          |
-| stayHeightList  | Array   | [10, 50, 90]                 | -                                  | N    | 固定高度列表。                     |
-| stayHeightIndex | Number  | 1                            | stayHeightList 的索引值            | N    | 初始固定高度索引。                 |
-| closeHeight     | Number  | 0                            | 0-100                              | N    | 滑动结束时位置低于此高度自动关闭。 |
-| radius          | String  | 'full'                       | 'none'/'base'/'full'               | N    | 圆角风格。                         |
+| 名称            | 类型                                  | 默认值                       | 必传 | 说明                                                                       |
+| --------------- | ------------------------------------- | ---------------------------- | ---- | -------------------------------------------------------------------------- |
+| visible         | `boolean`                             | `false`                      | N    | 是否显示。                                                                 |
+| title           | `string`                              | 当前语言的 bottomSheet.title | N    | 标题。                                                                     |
+| titleAlign      | `'left'\|'center'\|'right'`           | `'left'`                     | N    | 标题对齐方式。                                                             |
+| showBackIcon    | `boolean`                             | `false`                      | N    | 是否显示返回图标。                                                         |
+| closeContent    | `'downIcon'\|'closeIcon'\|''\|string` | `'downIcon'`                 | N    | 关闭区域内容。                                                             |
+| showDivider     | `boolean`                             | `true`                       | N    | 是否显示分割线。                                                           |
+| duration        | `number`                              | `450`                        | N    | 过渡动画出现时间，单位：ms。                                               |
+| outDuration     | `number`                              | `240`                        | N    | 过渡动画退出时间，单位：ms。                                               |
+| mask            | `Mask`                                | `{}`                         | N    | 遮罩层参数 [Mask Props](https://stdf.design/#/components?nav=mask&tab=1)。 |
+| maskClosable    | `boolean`                             | `false`                      | N    | 点击遮罩层是否关闭。                                                       |
+| zIndex          | `number`                              | `600`                        | N    | z-index。                                                                  |
+| stayHeightList  | `number[]`                            | `[10, 50, 90]`               | N    | 固定高度列表。                                                             |
+| stayHeightIndex | `number`                              | `1`                          | N    | 初始固定高度索引。                                                         |
+| closeHeight     | `number`                              | `0`                          | N    | 滑动结束时位置低于此高度自动关闭。                                         |
+| radius          | `'none'\|'base'\|'full'`              | `'full'`                     | N    | 圆角风格。                                                                 |
 
 ## BottomSheet Events
 
-| 名称         | 参数                                      | 描述                                                      |
-| ------------ | ----------------------------------------- | --------------------------------------------------------- |
-| close        | -                                         | 浮窗关闭时触发。                                          |
-| clickMask    | -                                         | 点击浮窗遮罩时触发，即使 maskClosable 为 false 也会触发。 |
-| back         | -                                         | 点击左侧返回图标时触发。                                  |
-| heightChange | event：事件对象，其中 detail 为当前高度。 | 滑动结束时触发。                                          |
+| 名称           | 类型                       | 参数                | 描述                                                      |
+| -------------- | -------------------------- | ------------------- | --------------------------------------------------------- |
+| onclose        | `() => void`               | -                   | 浮窗关闭时触发。                                          |
+| onclickMask    | `() => void`               | -                   | 点击浮窗遮罩时触发，即使 maskClosable 为 false 也会触发。 |
+| onback         | `() => void`               | -                   | 点击左侧返回图标时触发。                                  |
+| onheightChange | `(height: number) => void` | height - 当前高度。 | 滑动结束时触发。                                          |
 
-## BottomSheet Slots
+## BottomSheet Snippets
 
-| 名称 | 说明               |
-| ---- | ------------------ |
-| -    | BottomSheet 内容。 |
+| 名称     | 说明               |
+| -------- | ------------------ |
+| children | BottomSheet 内容。 |

doc/components/bottomSheet/api_en.md

@@ -1,34 +1,34 @@
 ## BottomSheet Props
 
-| Properties      | Type    | Default value                      | Optional value                     | required | Description                                                        |
-| --------------- | ------- | ---------------------------------- | ---------------------------------- | -------- | ------------------------------------------------------------------ |
-| visible         | Boolean | false                              | true/false                         | N        | Whether to display.                                                |
-| title           | String  | Current language bottomSheet.title | -                                  | N        | title.                                                             |
-| titleAlign      | String  | 'left'                             | 'left'/'center'/'right'            | N        | Title alignment method.                                            |
-| showBackIcon    | Boolean | false                              | true/false                         | N        | Whether the icon is returned.                                      |
-| closeContent    | String  | 'downIcon'                         | 'downIcon'/'closeIcon'/''/Any text | N        | Close the area content.                                            |
-| showDivider     | Boolean | true                               | true/false                         | N        | Whether to display the segmentation line.                          |
-| duration        | Number  | 450                                | -                                  | N        | The time of transition animation, unit: ms.                        |
-| outDuration     | Number  | 240                                | -                                  | N        | The exit time of the transition animation, unit: ms.               |
-| mask            | Object  | {}                                 | refer to Mask Props                | N        | Cover layer parameters.                                            |
-| maskClosable    | Boolean | false                              | true/false                         | N        | Click whether the mask layer is closed.                            |
-| zIndex          | Number  | 600                                | -                                  | N        | z-index.                                                           |
-| stayHeightList  | Array   | [10, 50, 90]                       | -                                  | N        | List of fixed height.                                              |
-| stayHeightIndex | Number  | 1                                  | stayHeightList Index value         | N        | Initial fixed height index.                                        |
-| closeHeight     | Number  | 0                                  | 0-100                              | N        | At the end of the sliding, the position is lower than this height. |
-| radius          | String  | 'full'                             | 'none'/'base'/'full'               | N        | Round -corner style.                                               |
+| Name            | Type                                  | Default                        | Required | Description                                                                    |
+| --------------- | ------------------------------------- | ------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| visible         | `boolean`                             | `false`                        | N        | Whether to display.                                                            |
+| title           | `string`                              | Current lang bottomSheet.title | N        | Title.                                                                         |
+| titleAlign      | `'left'\|'center'\|'right'`           | `'left'`                       | N        | Title alignment.                                                               |
+| showBackIcon    | `boolean`                             | `false`                        | N        | Whether to show back icon.                                                     |
+| closeContent    | `'downIcon'\|'closeIcon'\|''\|string` | `'downIcon'`                   | N        | Close area content.                                                            |
+| showDivider     | `boolean`                             | `true`                         | N        | Whether to show divider.                                                       |
+| duration        | `number`                              | `450`                          | N        | Transition animation appear time, unit: ms.                                    |
+| outDuration     | `number`                              | `240`                          | N        | Transition animation exit time, unit: ms.                                      |
+| mask            | `Mask`                                | `{}`                           | N        | Mask parameters [Mask Props](https://stdf.design/#/components?nav=mask&tab=1). |
+| maskClosable    | `boolean`                             | `false`                        | N        | Whether to close when clicking mask.                                           |
+| zIndex          | `number`                              | `600`                          | N        | z-index.                                                                       |
+| stayHeightList  | `number[]`                            | `[10, 50, 90]`                 | N        | Fixed height list.                                                             |
+| stayHeightIndex | `number`                              | `1`                            | N        | Initial fixed height index.                                                    |
+| closeHeight     | `number`                              | `0`                            | N        | Auto close when position is lower than this height after sliding ends.         |
+| radius          | `'none'\|'base'\|'full'`              | `'full'`                       | N        | Border radius style.                                                           |
 
 ## BottomSheet Events
 
-| Name         | Parameter                                          | Description                                                                                            |
-| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| close        | -                                                  | Triggered when the floating window is turned off.                                                      |
-| clickMask    | -                                                  | Triggered when clicking the floating window mask, even if MaskClosable is false, it will be triggered. |
-| back         | -                                                  | Trigger when clicking the icon on the left.                                                            |
-| heightChange | EVENT: Event object, where it is a current height. | Triggered at the end of sliding.                                                                       |
+| Name           | Type                       | Parameters              | Description                                                  |
+| -------------- | -------------------------- | ----------------------- | ------------------------------------------------------------ |
+| onclose        | `() => void`               | -                       | Triggered when popup closes.                                 |
+| onclickMask    | `() => void`               | -                       | Triggered when clicking mask, even if maskClosable is false. |
+| onback         | `() => void`               | -                       | Triggered when clicking left back icon.                      |
+| onheightChange | `(height: number) => void` | height - Current height | Triggered when sliding ends.                                 |
 
-## BottomSheet Slots
+## BottomSheet Snippets
 
-| Name | Description          |
-| ---- | -------------------- |
-| -    | BottomSheet content. |
+| Name     | Description          |
+| -------- | -------------------- |
+| children | BottomSheet content. |

doc/components/bottomSheet/guide.md

@@ -16,4 +16,4 @@ BottomSheet 的高度由 stayHeightList 决定，stayHeightList 是由多个 0-1
 
 ## 事件
 
-BottomSheet 支持通过 close/back/heightChange 来监听关闭、返回、固定高度变化事件，而 clickMask 事件则是点击遮罩层时触发，即使 maskClosable 为 false 也会触发。
+BottomSheet 支持通过 onclose/onback/onheightChange 来监听关闭、返回、固定高度变化事件，而 onclickMask 事件则是点击遮罩层时触发，即使 maskClosable 为 false 也会触发。

doc/components/bottomSheet/guide_en.md

@@ -1,19 +1,19 @@
 ## BottomSheet and Popup
 
-In STDF's design philosophy, both `BottomSheet` and `Popup` are floating interactions within the interface, usually used for secondary operations within a page. There are some similarities in their use as components. However, **the `Popup` is a "layer" concept, while the `BottomSheet` is a "window" concept**.
+In STDF's design philosophy, both BottomSheet and Popup are floating interactions within the interface, generally used for secondary operation scenarios on the page, and share some similarities in component usage. **However, Popup is a concept of "layer", while BottomSheet is a concept of "window"**.
 
-As a pop-up layer, `Popup` should not involve complex interactions within it, and can be closed by default by clicking on the mask layer. The position, size, transition animation, direction and style of the pop-up can be customized through various parameters. **Heavy on style, light on logic**.
+As a popup layer, Popup generally should not involve complex interaction steps. By default, clicking the mask layer can close it, but you can customize parameters such as popup position, size, transition animation, direction, and style. **Emphasizes style over logic.**
 
-As a bottom sheet, `BottomSheet` can only pop up from the bottom. The "floating" nature of `BottomSheet` is reflected in its ability to control its fixed height by sliding within its header area. The difference between a "window" and a "layer" is that `BottomSheet` has its own header area, which can customize the header content, and dispatch events such as `close`, `back`, `slide`, etc., similar to the window interaction model. It can be used in relatively complex interaction scenarios and cannot be closed by clicking the mask layer by default. **Heavy on logic, light on style**.
+As a bottom window, BottomSheet can only pop up from the bottom. The "floating" aspect is reflected in the ability to control its fixed height by sliding its internal header area. The difference between a "window" and a "layer" is that BottomSheet has its own header area, which can be customized with content and dispatches events like close, back, and slide similar to window interactions. It can be used for relatively complex interaction scenarios, and by default, clicking the mask cannot close it. **Emphasizes logic over style.**
 
 ## Fixed Height
 
-The height of `BottomSheet` is determined by `stayHeightList`, which is an array composed of multiple 0-100 positive integers. The display height of `BottomSheet` on the page is divided into several levels according to the percentage of the page height, and when the sliding stops, `BottomSheet` will automatically stay at the closest level of height. `stayHeightIndex` indicates the initial fixed height index, combined with `stayHeightList` to determine the initial height of `BottomSheet`.
+The height of BottomSheet is determined by stayHeightList, which is an array of integers between 0-100. It divides the display height of BottomSheet on the page into several levels based on page height percentage. When sliding stops, BottomSheet will automatically stay at the closest level height. stayHeightIndex indicates the initial fixed height index, which, combined with stayHeightList, determines the initial height of BottomSheet.
 
-## Swipe to Close
+## Slide to Close
 
-When the percentage value of `BottomSheet`'s position relative to the page height is less than `closeHeight` when the sliding ends, `BottomSheet` will automatically close. `closeHeight` defaults to 0, which means that it cannot be closed by sliding.
+When sliding ends, if BottomSheet's position relative to the page height percentage is lower than closeHeight, BottomSheet will automatically close. closeHeight defaults to 0, meaning sliding to close is not allowed.
 
 ## Events
 
-`BottomSheet` supports listening for events such as `close`, `back`, and `heightChange` through events `on-close`, `on-back`, and `on-height-change`, and the `clickMask` event is triggered when the mask layer is clicked, even if `maskClosable` is set to false.
+BottomSheet supports monitoring close, back, and fixed height change events through onclose/onback/onheightChange, while the onclickMask event is triggered when clicking the mask layer, even if maskClosable is false.

packages/stdf/components/bottomSheet/BottomSheet.svelte

@@ -110,27 +110,15 @@
 
 	// 标题对齐方式
 	// title align
-	const titleAlignClass = {
-		left: ' text-left',
-		center: ' text-center',
-		right: ' text-right',
-	};
+	const titleAlignClass = { left: ' text-left', center: ' text-center', right: ' text-right' };
 
 	// 窗口圆角风格
 	// window radius style
-	const windowRadiusClass = {
-		none: ' rounded-none',
-		base: ' rounded-t-lg',
-		full: ' rounded-t-2xl',
-	};
+	const windowRadiusClass = { none: ' rounded-none', base: ' rounded-t-lg', full: ' rounded-t-2xl' };
 
 	// 图标圆角风格
 	// icon radius style
-	const iconRadiusClass = {
-		none: ' rounded-none',
-		base: ' rounded',
-		full: ' rounded-full',
-	};
+	const iconRadiusClass = { none: ' rounded-none', base: ' rounded', full: ' rounded-full' };
 
 	// 滑动开始
 	// start sliding
@@ -247,7 +235,7 @@
 </script>
 
 {#if visible}
-	<Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMaskFn} />
+	<Mask visible {duration} {outDuration} {...mask} onclickMask={clickMaskFn} />
 {/if}
 
 <div class={`fixed w-screen h-screen inset-0 flex flex-col justify-end px-0 pointer-events-none`} style={`z-index:${zIndex};`}>
@@ -270,14 +258,12 @@
 				<div class={`w-8 h-1 bg-black/20 dark:bg-white/30 mx-auto${radius === 'none' ? ' rounded-none' : ' rounded-full'}`}></div>
 				<div class="px-3 py-1 flex justify-between items-center gap-2">
 					{#if showBackIcon}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
+						<button
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
 							onclick={backFunc}
 						>
 							<Icon name="ri-arrow-left-s-line" alpha={0.4} size={16} top={-2} />
-						</div>
+						</button>
 					{/if}
 					<div class={`font-bold text-lg h-7 truncate grow${titleAlignClass[titleAlign] || titleAlignClass['left']}`}>
 						{title}
@@ -285,27 +271,21 @@
 					{#if closeContent === ''}
 						<!-- null -->
 					{:else if closeContent === 'closeIcon'}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
+						<button
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
 							onclick={closeFunc}
 						>
 							<Icon name="ri-close-line" alpha={0.4} size={14} top={-2} />
-						</div>
+						</button>
 					{:else if closeContent === 'downIcon'}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
+						<button
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
 							onclick={closeFunc}
 						>
 							<Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
-						</div>
+						</button>
 					{:else}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div class="text-primary dark:text-dark font-bold cursor-pointer" onclick={closeFunc}>{closeContent}</div>
+						<button class="text-primary dark:text-dark font-bold cursor-pointer" onclick={closeFunc}>{closeContent}</button>
 					{/if}
 				</div>
 			</div>