From b9f679da2828df167567888667fd3d9d3e999f70 Mon Sep 17 00:00:00 2001
From: Onion-L <lixiang020317@gmail.com>
Date: Wed, 13 Nov 2024 17:27:25 +0800
Subject: [PATCH 1/3] feat: add closeOnClickMask behavior to close drawer

---
 .../__snapshots__/drawer.spec.ts.snap         |  2 +-
 components/Drawer/src/index.svelte            | 11 ++++++++-
 components/Drawer/src/types.d.ts              |  1 +
 .../__test__/__snapshots__/image.spec.ts.snap |  2 +-
 .../__snapshots__/image-view.spec.ts.snap     | 24 +++++++++----------
 .../__test__/__snapshots__/mask.spec.ts.snap  |  6 ++---
 components/Mask/src/index.svelte              |  4 ++++
 .../__test__/__snapshots__/modal.spec.ts.snap | 10 ++++----
 .../__test__/__snapshots__/spin.spec.ts.snap  | 11 +++++----
 9 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap b/components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap
index e54169d98..3bb2896f1 100644
--- a/components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap
+++ b/components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KDrawer > slot: content 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-drawer--base k-drawer--base__dark right-0"><div class="k-drawer--op justify-start"><span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-chevron-right hover:text-main" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-drawer--content" style="height: calc(100% - 24px);"><div class="w-full fc" id="k_drawer_content"><h2 class="w-300px text-center !my-2">A person's loneliness, never had the lonely mood is wrapped by this dark night.</h2></div></div></div></div>"`;
+exports[`Test: KDrawer > slot: content 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-drawer--base k-drawer--base__dark right-0" role="dialog" aria-modal="true"><div class="k-drawer--op justify-start"><span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-chevron-right hover:text-main" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-drawer--content" style="height: calc(100% - 24px);"><div class="w-full fc" id="k_drawer_content"><h2 class="w-300px text-center !my-2">A person's loneliness, never had the lonely mood is wrapped by this dark night.</h2></div></div></div></div>"`;
diff --git a/components/Drawer/src/index.svelte b/components/Drawer/src/index.svelte
index cfa5334b1..6ef705fc6 100644
--- a/components/Drawer/src/index.svelte
+++ b/components/Drawer/src/index.svelte
@@ -12,6 +12,7 @@
 	export let cls: KDrawerProps['cls'] = undefined;
 	export let attrs: KDrawerProps['attrs'] = {};
 	export let header: KDrawerProps['header'] = true;
+	export let closeOnClickMask: KDrawerProps['closeOnClickMask'] = true;
 
 	$: cnames = clsx(cls);
 	$: maskCls = clsx('k-drawer--base k-drawer--base__dark', isRight ? 'right-0' : 'left-0', cnames);
@@ -23,14 +24,22 @@
 		dispatch('close');
 	};
 
+	const onClickMask = () => {
+		if (closeOnClickMask) toggleClose();
+	};
+
 	$: isRight = placement === 'right';
 </script>
 
 <KClientOnly>
-	<KMask target={document.body} {value}>
+	<KMask {onClickMask} target={document.body} {value}>
+		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 		<div
 			class={maskCls}
 			{...attrs}
+			on:click|stopPropagation
+			role="dialog"
+			aria-modal="true"
 			out:fly={{ duration: 250, x: isRight ? 200 : -200 }}
 			in:fly={{ duration: 250, x: isRight ? 200 : -200 }}
 		>
diff --git a/components/Drawer/src/types.d.ts b/components/Drawer/src/types.d.ts
index 701263056..0bf323cd9 100644
--- a/components/Drawer/src/types.d.ts
+++ b/components/Drawer/src/types.d.ts
@@ -7,4 +7,5 @@ export type KDrawerProps = {
 	header: boolean;
 	cls: ClassValue;
 	attrs: Record<string, string>;
+	closeOnClickMask: boolean;
 };
diff --git a/components/Image/__test__/__snapshots__/image.spec.ts.snap b/components/Image/__test__/__snapshots__/image.spec.ts.snap
index 82469ffcb..cee8fd6cf 100644
--- a/components/Image/__test__/__snapshots__/image.spec.ts.snap
+++ b/components/Image/__test__/__snapshots__/image.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`Test: KImage > props: cls 1`] = `"<div class="k-image k-image--test"><i
 exports[`Test: KImage > props: fit 1`] = `"<div class="demo-image svelte-1ep430a"><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">fill</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: fill;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">contain</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: contain;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">cover</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: cover;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">none</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: none;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">scale-down</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: scale-down;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div></div>"`;
 
 exports[`Test: KImage > props: previewSrcList 1`] = `
-"<div class="k-image"><img alt="" aria-hidden="true" src="" class="k-image__inner k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> <div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; animation: __svelte_665066525_0 300ms linear 0ms 1 both;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="previewSrcList" alt="previewSrcList" class="k-image-view--body__img" style="
+"<div class="k-image"><img alt="" aria-hidden="true" src="" class="k-image__inner k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> <div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; animation: __svelte_665066525_0 300ms linear 0ms 1 both;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="previewSrcList" alt="previewSrcList" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> </div></div></div></div></div>"
diff --git a/components/ImageView/__test__/__snapshots__/image-view.spec.ts.snap b/components/ImageView/__test__/__snapshots__/image-view.spec.ts.snap
index 1d3b055d3..540f03541 100644
--- a/components/ImageView/__test__/__snapshots__/image-view.spec.ts.snap
+++ b/components/ImageView/__test__/__snapshots__/image-view.spec.ts.snap
@@ -1,84 +1,84 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Test: KImageView > basic render 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > flip image horizontally 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(-1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > flip image vertically 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, -1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > page turning image 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > page turning image 2`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/v2-75e369bfa397c7915448eb70b016b497_b.jpg" alt="https://pic4.zhimg.com/v2-75e369bfa397c7915448eb70b016b497_b.jpg" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/v2-75e369bfa397c7915448eb70b016b497_b.jpg" alt="https://pic4.zhimg.com/v2-75e369bfa397c7915448eb70b016b497_b.jpg" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > page turning image 3`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > props: cls 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view k-image-view--test"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class="k-image-view k-image-view--test"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> </div></div></div></div>"
 `;
 
 exports[`Test: KImageView > rotate image left 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-90deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > rotate image right 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(90deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > zoom in image 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1.5, 1.5, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > zoom out image 1`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1.5, 1.5, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
 `;
 
 exports[`Test: KImageView > zoom out image 2`] = `
-"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
+"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" alt="https://pic4.zhimg.com/80/v2-e7776d7562f28493260b153e55fc6f57_1440w.webp" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-left k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-right k-image-view--footer__icon" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div></div></div></div>"
diff --git a/components/Mask/__test__/__snapshots__/mask.spec.ts.snap b/components/Mask/__test__/__snapshots__/mask.spec.ts.snap
index a3620cfd7..c3c4b724a 100644
--- a/components/Mask/__test__/__snapshots__/mask.spec.ts.snap
+++ b/components/Mask/__test__/__snapshots__/mask.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KMask > props: color 1`] = `"<div style="background-color: red; top: 0px; left: 0px; width: 100%; height: 100%;" class="k-mask--base"></div>"`;
+exports[`Test: KMask > props: color 1`] = `"<div role="presentation" style="background-color: red; top: 0px; left: 0px; width: 100%; height: 100%;" class="k-mask--base"></div>"`;
 
 exports[`Test: KMask > props: target > hidden 1`] = `"hidden"`;
 
-exports[`Test: KMask > props: target 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"></div>"`;
+exports[`Test: KMask > props: target 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"></div>"`;
 
-exports[`Test: KMask > props: value 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"></div>"`;
+exports[`Test: KMask > props: value 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"></div>"`;
diff --git a/components/Mask/src/index.svelte b/components/Mask/src/index.svelte
index 4f95c9d44..bce473c9c 100644
--- a/components/Mask/src/index.svelte
+++ b/components/Mask/src/index.svelte
@@ -10,6 +10,8 @@
 	export let value: KMaskProps['value'] = false;
 	export let target: KMaskProps['target'] = null;
 
+	export let onClickMask: (event: MouseEvent) => void;
+
 	let maskRef: null | HTMLElement = null;
 	let maskWidth = '100%';
 	let maskHeight = '100%';
@@ -79,6 +81,8 @@
 	<div
 		bind:this={maskRef}
 		{...attrs}
+		on:click={onClickMask}
+		role="presentation"
 		out:fade={{ duration: 300 }}
 		in:fade={{ duration: 300 }}
 		style:top="{maskTop}px"
diff --git a/components/Modal/__test__/__snapshots__/modal.spec.ts.snap b/components/Modal/__test__/__snapshots__/modal.spec.ts.snap
index 1b9a7a1ff..103fe25e3 100644
--- a/components/Modal/__test__/__snapshots__/modal.spec.ts.snap
+++ b/components/Modal/__test__/__snapshots__/modal.spec.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KModal > options: footer 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-center"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
+exports[`Test: KModal > options: footer 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-center"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
 
-exports[`Test: KModal > options: layout & center 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-center"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
+exports[`Test: KModal > options: layout & center 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-center"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
 
-exports[`Test: KModal > options: layout & right 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-end"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
+exports[`Test: KModal > options: layout & right 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> <div class="k-modal--footer justify-end"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__fill k-button--info__hover__fill k-button--info__active k-button--info__focus k-modal--footer--btn" aria-hidden="true">  Cancel </button> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus k-modal--footer--btn" aria-hidden="true">  Confirm </button></div></div></div>"`;
 
-exports[`Test: KModal > options: title 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> </div></div>"`;
+exports[`Test: KModal > options: title 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><div class="k-modal--header"><span class="k-modal--header--title k-modal--header--title__dark">🐔</span> <span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-close k-modal--header--icon__hover" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-modal--body"></div> </div></div>"`;
 
-exports[`Test: KModal > slot: custom render 1`] = `"<div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><span class="flex" slot="header">🐔</span> <div class="k-modal--body"><p class="text-center !my-2">💕</p></div> <div class="fc w-full" slot="footer">🏀</div></div></div>"`;
+exports[`Test: KModal > slot: custom render 1`] = `"<div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-modal--base k-modal--base__dark"><span class="flex" slot="header">🐔</span> <div class="k-modal--body"><p class="text-center !my-2">💕</p></div> <div class="fc w-full" slot="footer">🏀</div></div></div>"`;
diff --git a/components/Spin/__test__/__snapshots__/spin.spec.ts.snap b/components/Spin/__test__/__snapshots__/spin.spec.ts.snap
index c4b64983e..ddedebf1c 100644
--- a/components/Spin/__test__/__snapshots__/spin.spec.ts.snap
+++ b/components/Spin/__test__/__snapshots__/spin.spec.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KSpin > options: background 1`] = `"<div class="w-full h-200px flex justify-center items-center" style="overflow: hidden; position: relative;"><button id="spin_bg">Spin</button><div style="background-color: red; top: 0px; left: 0px; width: 100%; height: 100%;" class="k-mask--base"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
+exports[`Test: KSpin > options: background 1`] = `"<div class="w-full h-200px flex justify-center items-center" style="overflow: hidden; position: relative;"><button id="spin_bg">Spin</button><div role="presentation" style="background-color: red; top: 0px; left: 0px; width: 100%; height: 100%;" class="k-mask--base"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
 
 exports[`Test: KSpin > options: fullScreen 1`] = `
 <body
@@ -21,6 +21,7 @@ exports[`Test: KSpin > options: fullScreen 1`] = `
   </div>
   <div
     class="k-mask--base"
+    role="presentation"
     style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"
   >
     <div
@@ -53,10 +54,10 @@ exports[`Test: KSpin > options: fullScreen 1`] = `
 </body>
 `;
 
-exports[`Test: KSpin > options: rotating 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_rotate">Spin</button><div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
+exports[`Test: KSpin > options: rotating 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_rotate">Spin</button><div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
 
-exports[`Test: KSpin > options: show 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_show">Spin</button><div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
+exports[`Test: KSpin > options: show 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_show">Spin</button><div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
 
-exports[`Test: KSpin > options: spinner 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_spinner">Spin</button><div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition custom spinner text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
+exports[`Test: KSpin > options: spinner 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_spinner">Spin</button><div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition custom spinner text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">loading...</p></div></div></div></div>"`;
 
-exports[`Test: KSpin > options: text 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_text">Spin</button><div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">多看一眼就会爆炸！</p></div></div></div></div>"`;
+exports[`Test: KSpin > options: text 1`] = `"<div class="w-full h-200px flex justify-center items-center"><button id="spin_text">Spin</button><div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%;"><div class=""><div class="k-spin--spinner"><div class="k-spin--spinner__rotating"><span class="k-icon--base k-icon-transition i-carbon-circle-dash text-ikun-main" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <p class="k-spin--text">多看一眼就会爆炸！</p></div></div></div></div>"`;

From 97e82a33ad88aebf0ad859d1f1f8ec973b6f39c9 Mon Sep 17 00:00:00 2001
From: Onion-L <lixiang020317@gmail.com>
Date: Fri, 15 Nov 2024 17:48:40 +0800
Subject: [PATCH 2/3] feat: change default value of closeOnClickMask

---
 components/Drawer/src/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Drawer/src/index.svelte b/components/Drawer/src/index.svelte
index 6ef705fc6..5564a900f 100644
--- a/components/Drawer/src/index.svelte
+++ b/components/Drawer/src/index.svelte
@@ -12,7 +12,7 @@
 	export let cls: KDrawerProps['cls'] = undefined;
 	export let attrs: KDrawerProps['attrs'] = {};
 	export let header: KDrawerProps['header'] = true;
-	export let closeOnClickMask: KDrawerProps['closeOnClickMask'] = true;
+	export let closeOnClickMask: KDrawerProps['closeOnClickMask'] = false;
 
 	$: cnames = clsx(cls);
 	$: maskCls = clsx('k-drawer--base k-drawer--base__dark', isRight ? 'right-0' : 'left-0', cnames);

From c9747e0835528bd6ba00ce946690d688470655ed Mon Sep 17 00:00:00 2001
From: Onion-L <lixiang020317@gmail.com>
Date: Fri, 15 Nov 2024 17:52:47 +0800
Subject: [PATCH 3/3] docs: updated KDrawer document

---
 docs/components/KDrawer.md               | 19 +++++++++++++------
 docs/example/drawer/close-outside.svelte | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 docs/example/drawer/close-outside.svelte

diff --git a/docs/components/KDrawer.md b/docs/components/KDrawer.md
index dc1521c3d..5c016f10c 100644
--- a/docs/components/KDrawer.md
+++ b/docs/components/KDrawer.md
@@ -31,6 +31,12 @@ Open the `drawer` by setting the `value` attribute
 
 <demo src="drawer/basic.svelte" github="Drawer"></demo>
 
+## Click mask to close
+
+Set `closeOnClickMask` to `true` to close the `drawer` when clicking outside
+
+<demo src="drawer/close-outside.svelte" github="Drawer"></demo>
+
 ## Custom header
 
 Implement custom header through slots
@@ -45,12 +51,13 @@ You can choose to open from the `right` or `left`
 
 ## Drawer Props
 
-| Name      | Type                     | Default | Description                             |
-| --------- | ------------------------ | ------- | --------------------------------------- |
-| placement | `'right' / 'left'`       | `right` | The placement in which the drawer opens |
-| value     | `boolean`                | `false` | open the Drawer                         |
-| cls       | `string`                 | `-`     | Additional class                        |
-| attrs     | `Record<string, string>` | `{}`    | Additional attributes                   |
+| Name             | Type                     | Default | Description                                        |
+| ---------------- | ------------------------ | ------- | -------------------------------------------------- |
+| placement        | `'right' / 'left'`       | `right` | The placement in which the drawer opens            |
+| value            | `boolean`                | `false` | open the Drawer                                    |
+| cls              | `string`                 | `-`     | Additional class                                   |
+| closeOnClickMask | `boolean`                | `false` | Whether to close the Drawer when clicking the mask |
+| attrs            | `Record<string, string>` | `{}`    | Additional attributes                              |
 
 ## Drawer Events
 
diff --git a/docs/example/drawer/close-outside.svelte b/docs/example/drawer/close-outside.svelte
new file mode 100644
index 000000000..16242e844
--- /dev/null
+++ b/docs/example/drawer/close-outside.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { KDrawer } from '@ikun-ui/drawer';
+	import { KButton } from '@ikun-ui/button';
+	let show = false;
+	const open = () => (show = true);
+	const close = () => (show = false);
+</script>
+
+<KButton on:click={open}>open the drawer</KButton>
+<KDrawer closeOnClickMask={true} value={show} on:close={close}>
+	<div class="w-full fc">
+		<h2 class="w-300px text-center !my-2">
+			A person's loneliness, never had the lonely mood is wrapped by this dark night.
+		</h2>
+	</div>
+</KDrawer>