[stdf]Update Mask compoent, demo and documents.

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

@@ -78,7 +78,7 @@
 	</BottomSheet>
 
 	<Cell title="Mask completely transparent and blurry" onclick={() => (visible7 = true)} />
-	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
+	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'base' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 

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

@@ -2,60 +2,56 @@
 <script>
 	import { Mask, Toast, Cell, Button, Popup } from '../../../../../packages/stdf/components';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-
-	let isClick = 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 isClick = $state(false);
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
-	<Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
+	<Mask visible={visible1} onclickMask={() => (visible1 = false)} />
 
-	<Cell title="Transparency is 0.1" on:click={() => (visible2 = true)} />
-	<Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
+	<Cell title="Transparency is 0.1" onclick={() => (visible2 = true)} />
+	<Mask visible={visible2} opacity="0.1" onclickMask={() => (visible2 = false)} />
 
-	<Cell title="Transparency is 0.8" on:click={() => (visible3 = true)} />
-	<Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
+	<Cell title="Transparency is 0.8" onclick={() => (visible3 = true)} />
+	<Mask visible={visible3} opacity="0.8" onclickMask={() => (visible3 = false)} />
 
-	<Cell title="Click through" detail="Please close manually" on:click={() => (visible4 = true)} />
+	<Cell title="Click through" detail="Please close manually" onclick={() => (visible4 = true)} />
 	<Mask visible={visible4} clickable />
 	<div class="flex">
-		<div class="flex-1">
-			<Button on:click={() => (isClick = !isClick)}>{isClick ? 'Click on me' : 'Click through'}</Button>
-		</div>
-		<div class="flex-1">
-			<Button on:click={() => (visible4 = false)}>Manual shutdown</Button>
-		</div>
+		<div class="flex-1"><Button onclick={() => (isClick = !isClick)}>{isClick ? 'Click on me' : 'Click through'}</Button></div>
+		<div class="flex-1"><Button onclick={() => (visible4 = false)}>Manual shutdown</Button></div>
 	</div>
 
-	<Cell title="Reverse color mask" on:click={() => (visible5 = true)} />
-	<Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
+	<Cell title="Reverse color mask" onclick={() => (visible5 = true)} />
+	<Mask visible={visible5} inverse onclickMask={() => (visible5 = false)} />
 
-	<Cell title="Blur mask" on:click={() => (visible6 = true)} />
-	<Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
+	<Cell title="Blur mask" onclick={() => (visible6 = true)} />
+	<Mask visible={visible6} backdropBlur="sm" opacity="0" onclickMask={() => (visible6 = false)} />
 
-	<Cell title="Increase ambiguity" on:click={() => (visible7 = true)} />
-	<Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
+	<Cell title="Increase ambiguity" onclick={() => (visible7 = true)} />
+	<Mask visible={visible7} backdropBlur="xl" opacity="0" onclickMask={() => (visible7 = false)} />
 
-	<Cell title="Increased the animation time" on:click={() => (visible8 = true)} />
-	<Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
+	<Cell title="Increased the animation time" onclick={() => (visible8 = true)} />
+	<Mask visible={visible8} duration={1000} onclickMask={() => (visible8 = false)} />
 
-	<Cell title="Increased the duration of vanishing animation" on:click={() => (visible9 = true)} />
-	<Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
+	<Cell title="Increased the duration of vanishing animation" onclick={() => (visible9 = true)} />
+	<Mask visible={visible9} outDuration={1000} onclickMask={() => (visible9 = false)} />
 
-	<Cell title="Toast Use in" on:click={() => (visible10 = true)} />
+	<Cell title="Toast Use in" onclick={() => (visible10 = true)} />
 	<Toast bind:visible={visible10} message="Transparency is 0" />
 
-	<Cell title="Popup Use in" on:click={() => (visible11 = true)} />
+	<Cell title="Popup Use in" onclick={() => (visible11 = true)} />
 	<Popup bind:visible={visible11} />
 </div>

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

@@ -73,7 +73,7 @@
 	</BottomSheet>
 
 	<Cell title="遮罩完全透明且模糊" onclick={() => (visible7 = true)} />
-	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
+	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'base' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 

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

@@ -2,60 +2,56 @@
 <script>
 	import { Mask, Toast, Cell, Button, Popup } from '../../../../../packages/stdf/components';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-
-	let isClick = 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 isClick = $state(false);
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
-	<Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
+	<Mask visible={visible1} onclickMask={() => (visible1 = false)} />
 
-	<Cell title="透明度为 0.1" on:click={() => (visible2 = true)} />
-	<Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
+	<Cell title="透明度为 0.1" onclick={() => (visible2 = true)} />
+	<Mask visible={visible2} opacity="0.1" onclickMask={() => (visible2 = false)} />
 
-	<Cell title="透明度为 0.8" on:click={() => (visible3 = true)} />
-	<Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
+	<Cell title="透明度为 0.8" onclick={() => (visible3 = true)} />
+	<Mask visible={visible3} opacity="0.8" onclickMask={() => (visible3 = false)} />
 
-	<Cell title="点击穿透" detail="请手动关闭" on:click={() => (visible4 = true)} />
+	<Cell title="点击穿透" detail="请手动关闭" onclick={() => (visible4 = true)} />
 	<Mask visible={visible4} clickable />
 	<div class="flex">
-		<div class="flex-1">
-			<Button on:click={() => (isClick = !isClick)}>{isClick ? '已经点到我了' : '测试点击穿透'}</Button>
-		</div>
-		<div class="flex-1">
-			<Button on:click={() => (visible4 = false)}>手动关闭</Button>
-		</div>
+		<div class="flex-1"><Button onclick={() => (isClick = !isClick)}>{isClick ? '已经点到我了' : '测试点击穿透'}</Button></div>
+		<div class="flex-1"><Button onclick={() => (visible4 = false)}>手动关闭</Button></div>
 	</div>
 
-	<Cell title="反色遮罩" on:click={() => (visible5 = true)} />
-	<Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
+	<Cell title="反色遮罩" onclick={() => (visible5 = true)} />
+	<Mask visible={visible5} inverse onclickMask={() => (visible5 = false)} />
 
-	<Cell title="模糊遮罩" on:click={() => (visible6 = true)} />
-	<Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
+	<Cell title="模糊遮罩" onclick={() => (visible6 = true)} />
+	<Mask visible={visible6} backdropBlur="sm" opacity="0" onclickMask={() => (visible6 = false)} />
 
-	<Cell title="加大模糊度" on:click={() => (visible7 = true)} />
-	<Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
+	<Cell title="加大模糊度" onclick={() => (visible7 = true)} />
+	<Mask visible={visible7} backdropBlur="xl" opacity="0" onclickMask={() => (visible7 = false)} />
 
-	<Cell title="增加出现动画时长" on:click={() => (visible8 = true)} />
-	<Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
+	<Cell title="增加出现动画时长" onclick={() => (visible8 = true)} />
+	<Mask visible={visible8} duration={1000} onclickMask={() => (visible8 = false)} />
 
-	<Cell title="增加消失动画时长" on:click={() => (visible9 = true)} />
-	<Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
+	<Cell title="增加消失动画时长" onclick={() => (visible9 = true)} />
+	<Mask visible={visible9} outDuration={1000} onclickMask={() => (visible9 = false)} />
 
-	<Cell title="Toast 中使用" on:click={() => (visible10 = true)} />
+	<Cell title="Toast 中使用" onclick={() => (visible10 = true)} />
 	<Toast bind:visible={visible10} message="透明度为 0" />
 
-	<Cell title="Popup 中使用" on:click={() => (visible11 = true)} />
+	<Cell title="Popup 中使用" onclick={() => (visible11 = true)} />
 	<Popup bind:visible={visible11} />
 </div>

doc/components/mask/api.md

@@ -1,18 +1,24 @@
 ## Mask Props
 
-| 属性         | 类型    | 默认值 | 可选值                                        | 必传 | 说明                         |
-| ------------ | ------- | ------ | --------------------------------------------- | ---- | ---------------------------- |
-| visible      | Boolean | false  | true/false                                    | N    | 是否显示。                   |
-| opacity      | Number  | 0.5    | 0-1                                           | N    | 遮罩透明度。                 |
-| duration     | Number  | 150    | -                                             | N    | 出现动画过渡时长，单位：ms。 |
-| outDuration  | Number  | 0      | -                                             | N    | 消失动画过渡时长，单位：ms。 |
-| inverse      | Boolean | false  | true/false                                    | N    | 遮罩背景是否反色。           |
-| clickable    | Boolean | false  | true/false                                    | N    | 遮罩是否可点击穿透。         |
-| backdropBlur | String  | 'none' | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl' | N    | 背景模糊度。                 |
-| zIndex       | Number  | 500    | -                                             | N    | z-index。                    |
+| 名称         | 类型                                                                 | 默认值   | 必传 | 说明                         |
+| ------------ | -------------------------------------------------------------------- | -------- | ---- | ---------------------------- |
+| visible      | `boolean`                                                            | `false`  | N    | 是否显示。                   |
+| opacity      | `'0.1'\|'0.2'\|'0.3'\|'0.4'\|'0.5'\|'0.6'\|'0.7'\|'0.8'\|'0.9'\|'1'` | `'0.5'`  | N    | 遮罩透明度。                 |
+| duration     | `number`                                                             | `150`    | N    | 出现动画过渡时长，单位：ms。 |
+| outDuration  | `number`                                                             | `0`      | N    | 消失动画过渡时长，单位：ms。 |
+| inverse      | `boolean`                                                            | `false`  | N    | 遮罩背景是否反色。           |
+| clickable    | `boolean`                                                            | `false`  | N    | 遮罩是否可点击穿透。         |
+| backdropBlur | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N    | 背景模糊度。                 |
+| zIndex       | `number`                                                             | `500`    | N    | z-index。                    |
 
 ## Mask Events
 
-| 名称      | 参数 | 描述                                                |
-| --------- | ---- | --------------------------------------------------- |
-| clickMask | -    | 点击遮罩时触发，注意 clickable 为 true 时不会触发。 |
+| 名称        | 类型         | 参数 | 描述                                                |
+| ----------- | ------------ | ---- | --------------------------------------------------- |
+| onclickMask | `() => void` | -    | 点击遮罩时触发，注意 clickable 为 true 时不会触发。 |
+
+## Mask Snippets
+
+| 名称     | 说明       |
+| -------- | ---------- |
+| children | 遮罩内容。 |

doc/components/mask/api_en.md

@@ -1,18 +1,24 @@
 ## Mask Props
 
-| Property     | Type    | Default | Options                                       | Required | Description                                         |
-| ------------ | ------- | ------- | --------------------------------------------- | -------- | --------------------------------------------------- |
-| visible      | Boolean | false   | true/false                                    | N        | Whether to display the mask.                        |
-| opacity      | Number  | 0.5     | 0-1                                           | N        | The opacity value of the mask.                      |
-| duration     | Number  | 150     | -                                             | N        | The duration of the appearance animation, in ms.    |
-| outDuration  | Number  | 0       | -                                             | N        | The duration of the disappearance animation, in ms. |
-| inverse      | Boolean | false   | true/false                                    | N        | Whether to invert the background of the mask.       |
-| clickable    | Boolean | false   | true/false                                    | N        | Whether the mask is clickable and penetrable.       |
-| backdropBlur | String  | 'none'  | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl' | N        | The backdrop blur value of the mask.                |
-| zIndex       | Number  | 500     | -                                             | N        | The zIndex value.                                   |
+| Name         | Type                                                                 | Default  | Required | Description                                  |
+| ------------ | -------------------------------------------------------------------- | -------- | -------- | -------------------------------------------- |
+| visible      | `boolean`                                                            | `false`  | N        | Whether to show the mask.                    |
+| opacity      | `'0.1'\|'0.2'\|'0.3'\|'0.4'\|'0.5'\|'0.6'\|'0.7'\|'0.8'\|'0.9'\|'1'` | `'0.5'`  | N        | Opacity of the mask.                         |
+| duration     | `number`                                                             | `150`    | N        | Duration of the show animation in ms.        |
+| outDuration  | `number`                                                             | `0`      | N        | Duration of the hide animation in ms.        |
+| inverse      | `boolean`                                                            | `false`  | N        | Whether to invert the mask background color. |
+| clickable    | `boolean`                                                            | `false`  | N        | Whether the mask is click-through.           |
+| backdropBlur | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N        | Backdrop blur level.                         |
+| zIndex       | `number`                                                             | `500`    | N        | z-index value.                               |
 
 ## Mask Events
 
-| Name      | Parameters | Description                                                                                              |
-| --------- | ---------- | -------------------------------------------------------------------------------------------------------- |
-| clickMask | -          | Triggered when the mask is clicked on. Note that it will not be triggered if `clickable` is set to true. |
+| Name        | Type         | Parameters | Description                                                             |
+| ----------- | ------------ | ---------- | ----------------------------------------------------------------------- |
+| onclickMask | `() => void` | -          | Triggered when clicking the mask. Not triggered when clickable is true. |
+
+## Mask Snippets
+
+| Name     | Description   |
+| -------- | ------------- |
+| children | Mask content. |

doc/components/mask/guide.md

@@ -4,13 +4,13 @@ Mask 组件一般是用来结合 BottomSheet、Toast、Popup 等组件使用，
 
 ## 动画
 
-遮罩动画效果为 fade，可参考 [svelte/transition/fade](https://svelte.dev/docs#run-time-svelte-transition-fade) 。
+遮罩动画效果为 fade，可参考 [svelte/transition/fade](https://svelte.dev/docs/svelte/svelte-transition#fade) 。
 
 遮罩一般是放置于其他交互式组件下层，考虑到出现与消失不会太突兀，遮罩出现时有一个较短的动画（默认 150ms），一般与内容时长一样；而内容信息展示完后一般需要迅速关闭，所以退出动画默认为 0ms，当然也可以通过 `outDuration` 属性设置退出的动画时间。
 
 ## 点击穿透
 
-Mask 可以通过 `clickable` 属性设置是否可点击穿透，当设置为 `true` 时，点击遮罩不会触发 `clickMask` 事件。
+Mask 可以通过 `clickable` 属性设置是否可点击穿透，当设置为 `true` 时，点击遮罩不会触发 `onclickMask` 事件。
 
 ## inverse
 

doc/components/mask/guide_en.md

@@ -4,13 +4,13 @@ The Mask component is usually used in combination with other components such as
 
 ## Animation
 
-The animation effect of the mask is fade, which can be referred to [svelte/transition/fade](https://svelte.dev/docs#run-time-svelte-transition-fade).
+The animation effect of the mask is fade, which can be referred to [svelte/transition/fade](https://svelte.dev/docs/svelte/svelte-transition#fade).
 
 Normally, the mask is placed below other interactive components, so considering the smoothness of appearance and disappearance, there is a short animation (default 150ms) when the mask appears, generally the same length as the content. After the content is displayed, it is generally necessary to close quickly, so the exit animation is 0ms by default, but of course, the exit animation time can also be set through the `outDuration` attribute.
 
 ## Click-through
 
-The Mask can be set whether it can be clicked through by the `clickable` attribute. When it is set to `true`, clicking the mask will not trigger the `clickMask` event.
+The Mask can be set whether it can be clicked through by the `clickable` attribute. When it is set to `true`, clicking the mask will not trigger the `onclickMask` event.
 
 ## Inverse
 

packages/stdf/components/mask/Mask.svelte

@@ -1,12 +1,11 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	/** @typedef {import('../../index.d').Mask} MaskProps */
 	/** @type {MaskProps} */
 	let {
 		visible = false,
-		opacity = 0.5,
+		opacity = '0.5',
 		clickable = false,
 		inverse = false,
 		backdropBlur = 'none',
@@ -34,15 +33,15 @@
 	// Mask background color
 	const bgClass = {
 		'0': ' bg-transparent',
-		'0.1': ' bg-black/[.1] dark:bg-white/[.1]',
-		'0.2': ' bg-black/[.2] dark:bg-white/[.2]',
-		'0.3': ' bg-black/[.3] dark:bg-white/[.3]',
-		'0.4': ' bg-black/[.4] dark:bg-white/[.4]',
-		'0.5': ' bg-black/[.5] dark:bg-white/[.5]',
-		'0.6': ' bg-black/[.6] dark:bg-white/[.6]',
-		'0.7': ' bg-black/[.7] dark:bg-white/[.7]',
-		'0.8': ' bg-black/[.8] dark:bg-white/[.8]',
-		'0.9': ' bg-black/[.9] dark:bg-white/[.9]',
+		'0.1': ' bg-black/10 dark:bg-white/10',
+		'0.2': ' bg-black/20 dark:bg-white/20',
+		'0.3': ' bg-black/30 dark:bg-white/30',
+		'0.4': ' bg-black/40 dark:bg-white/40',
+		'0.5': ' bg-black/50 dark:bg-white/50',
+		'0.6': ' bg-black/60 dark:bg-white/60',
+		'0.7': ' bg-black/70 dark:bg-white/70',
+		'0.8': ' bg-black/80 dark:bg-white/80',
+		'0.9': ' bg-black/90 dark:bg-white/90',
 		'1': ' bg-black dark:bg-white',
 	};
 
@@ -50,37 +49,30 @@
 	// Mask background color reverse color
 	const bgClassInverse = {
 		'0': ' bg-transparent',
-		'0.1': ' bg-white/[.1] dark:bg-black/[.1]',
-		'0.2': ' bg-white/[.2] dark:bg-black/[.2]',
-		'0.3': ' bg-white/[.3] dark:bg-black/[.3]',
-		'0.4': ' bg-white/[.4] dark:bg-black/[.4]',
-		'0.5': ' bg-white/[.5] dark:bg-black/[.5]',
-		'0.6': ' bg-white/[.6] dark:bg-black/[.6]',
-		'0.7': ' bg-white/[.7] dark:bg-black/[.7]',
-		'0.8': ' bg-white/[.8] dark:bg-black/[.8]',
-		'0.9': ' bg-white/[.9] dark:bg-black/[.9]',
+		'0.1': ' bg-white/10 dark:bg-black/10',
+		'0.2': ' bg-white/20 dark:bg-black/20',
+		'0.3': ' bg-white/30 dark:bg-black/30',
+		'0.4': ' bg-white/40 dark:bg-black/40',
+		'0.5': ' bg-white/50 dark:bg-black/50',
+		'0.6': ' bg-white/60 dark:bg-black/60',
+		'0.7': ' bg-white/70 dark:bg-black/70',
+		'0.8': ' bg-white/80 dark:bg-black/80',
+		'0.9': ' bg-white/90 dark:bg-black/90',
 		'1': ' bg-white dark:bg-black',
 	};
-
-	// 点击遮罩派发事件
-	// Click mask to dispatch event
-	const clickMaskFunc = () => {
-		onclickMask && onclickMask?.();
-	};
 </script>
 
 {#if visible}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
+	<button
 		in:fade|global={{ duration }}
 		out:fade|global={{ duration: outDuration }}
-		onclick={clickMaskFunc}
-		class={`fixed w-screen h-screen inset-0${
-			inverse ? bgClassInverse[opacity] || bgClassInverse['0.5'] : bgClass[opacity] || bgClass['0.5']
-		}${clickable ? ' pointer-events-none' : ''}${backdropBlurClass[backdropBlur] || backdropBlurClass['none']}`}
-		style={`z-index:${zIndex};`}
+		onclick={() => onclickMask && onclickMask?.()}
+		class="fixed w-screen h-screen inset-0{inverse
+			? bgClassInverse[opacity] || bgClassInverse['0.5']
+			: bgClass[opacity] || bgClass['0.5']}{clickable ? ' pointer-events-none' : ''}{backdropBlurClass[backdropBlur] ||
+			backdropBlurClass['none']}"
+		style="z-index:{zIndex}"
 	>
 		{@render children?.()}
-	</div>
+	</button>
 {/if}