[stdf]Upgrade all component files to Svelte5

packages/stdf/components/actionSheet/ActionSheet.svelte

@@ -1,98 +1,30 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const actionSheetLang = currentLang.actionSheet;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 标题
-	 * Title
-	 * @type {String}
-	 * @default ''
-	 */
-	export let title = '';
-
-	/**
-	 * 标题对齐方式
-	 * Title alignment
-	 * @type {'left'|'center'|'right'}
-	 * @default 'center'
-	 */
-	export let titleAlign = 'center';
-
-	/**
-	 * @typedef {Object} action
-	 * @property {string} content 选项文本
-	 * @property {Boolean} [showImg] 是否显示图片
-	 * @property {'normal'|'theme'|'danger'|'disabled'} [style] 选项样式
-	 * @property {string} [desc] 选项描述
-	 * @property {'none'|'base'|'full'|'lg'} [imgRadius] 图片圆角
-	 * @property {string} [imgSrc] 图片地址
-	 */
-
-	/**
-	 * 选项
-	 * Options
-	 * @type {Array<action>}
-	 * @default []
-	 */
-	export let actions = [];
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {Object}
-	 * @default {}
-	 */
-	export let popup = {};
-
-	/**
-	 * 是否显示取消选项
-	 * Whether to show the cancel option
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let showCancel = false;
-
-	/**
-	 * 取消选项文本
-	 * Cancel option text
-	 * @type {String}
-	 * @default Current language actionSheet.cancelText
-	 */
-	export let cancelText = actionSheetLang.cancelText;
-
-	/**
-	 * 点击选项是否关闭
-	 * Click option to close
-	 * @type {Boolean}
-	 * @default true
-	 */
-	export let actionClosable = true;
-
-	/**
-	 * 对齐方式
-	 * Alignment
-	 * @type {'left'|'center'|'right'}
-	 * @default 'center'
-	 */
-	export let align = 'center';
+	/** @typedef {import('../../index.d').ActionSheet} ActionSheetProps */
+	/** @type {ActionSheetProps} */
+	let {
+		visible = $bindable(false),
+		title = '',
+		titleAlign = 'center',
+		actions = [],
+		popup = {},
+		showCancel = false,
+		cancelText = actionSheetLang.cancelText,
+		actionClosable = true,
+		align = 'center',
+		oncancel,
+		onclickAction,
+		onopen,
+		onclose,
+	} = $props();
 
 	// 标题对齐方式
 	// Title alignment
@@ -132,14 +64,14 @@
 	// Click event of cancel button
 	const cancelFunc = () => {
 		visible = false;
-		dispatch('cancel'); //派发取消事件
+		oncancel && oncancel(); // 如果 cancel 存在，执行 cancel 函数
 	};
 
 	// 选项点击事件，如果选项不可点击，不触发事件，如果可点击，触发事件，如果 actionClosable 为 true，关闭弹出层
 	// Click event of action, if the action is not clickable, the event will not be triggered, if it is clickable, the event will be triggered, and if actionClosable is true, the popup will be closed
 	const clickActionFunc = (index, item) => {
 		if (item.style !== 'disabled') {
-			dispatch('clickAction', { index, item }); //派发选项点击事件，返回选项索引和选项对象
+			onclickAction && onclickAction(index, item); // 如果 clickAction 存在，执行 clickAction 函数
 			if (actionClosable) {
 				visible = false;
 			}
@@ -148,13 +80,13 @@
 
 	// 监听 visible 变化，如果为 true，派发 open 事件，如果为 false，派发 close 事件
 	// Listen to the change of visible, if it is true, dispatch the open event, if it is false, dispatch the close event
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup bind:visible size={0} maskClosable transitionDistance={getTransitionDistanceunc(title, showCancel, actions)} {...popup}>
@@ -169,15 +101,15 @@
 	{/if}
 	<div>
 		{#each actions as item, index}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={`${item.style !== 'disabled' ? 'active:scale-90 ' : ''}transition-all flex items-center gap-2 ${
 					alignClass[align] || alignClass['center']
 				}`}
-				on:click={() => clickActionFunc(index, item)}
+				onclick={() => clickActionFunc(index, item)}
 			>
-				<!-- 图片 -->
+				<!-- image -->
 				{#if item.showImg}
 					<div class={`w-6 h-6 overflow-hidden ${imgRadiusClass[item.imgRadius] || 'rounded-full'}`}>
 						<img class="w-full h-full object-cover" src={item.imgSrc} alt="" />
@@ -197,14 +129,14 @@
 				</div>
 			</div>
 			{#if index !== actions.length - 1}
-				<div class="h-px w-full bg-black/5 dark:bg-white/5" />
+				<div class="h-px w-full bg-black/5 dark:bg-white/5"></div>
 			{/if}
 		{/each}
 	</div>
 	{#if showCancel}
-		<div class="bg-black/5 dark:bg-white/5 h-2" />
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="active:scale-90 transition-all text-center h-12 flex flex-col justify-center" on:click={cancelFunc}>{cancelText}</div>
+		<div class="bg-black/5 dark:bg-white/5 h-2"></div>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="active:scale-90 transition-all text-center h-12 flex flex-col justify-center" onclick={cancelFunc}>{cancelText}</div>
 	{/if}
 </Popup>

packages/stdf/components/asyncPicker/AsyncPicker.svelte

@@ -1,167 +1,64 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import Popup from '../popup/Popup.svelte';
 	import Loading from '../loading/Loading.svelte';
 	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const asyncPickerLang = currentLang.asyncPicker;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 列数据
-	 * Column data
-	 * @type {Array<Object>}
-	 * @default []
-	 */
-	export let data = [];
-
-	/**
-	 * 是否是最后一级
-	 * Whether it is the last level
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let lastLevel = false;
-
-	/**
-	 * 是否是第一级
-	 * Whether it is the first level
-	 * @type {Boolean}
-	 * @default true
-	 */
-	export let firstLevel = true;
-
-	/**
-	 * 可见行数
-	 * Visible rows
-	 * @type {3|5|7}
-	 * @default 5
-	 */
-	export let showRow = 5;
-
-	/**
-	 * data 中 label 对应的 key
-	 * The key corresponding to label in data
-	 * @type {String}
-	 * @default 'label'
-	 */
-	export let labelKey = 'label';
-
-	/**
-	 * 对齐方式
-	 * Alignment
-	 * @type {'left'|'center'|'right'}
-	 * @default 'center'
-	 */
-	export let align = 'center';
-
-	/**
-	 * 取消选项文本
-	 * Cancel option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultCancel
-	 */
-	export let cancelText = asyncPickerLang.defaultCancel;
-
-	/**
-	 * 确定选项文本
-	 * Confirm option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultConfirm
-	 */
-	export let confirmText = asyncPickerLang.defaultConfirm;
-
-	/**
-	 * 中间选项文本
-	 * Middle option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultTitle
-	 */
-	export let title = asyncPickerLang.defaultTitle;
-
-	/**
-	 * 下一步选项文本
-	 * Next option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultNext
-	 */
-	export let nextText = asyncPickerLang.defaultNext;
-
-	/**
-	 * 上一步选项文本
-	 * Previous option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultPrev
-	 */
-	export let prevText = asyncPickerLang.defaultPrev;
-
-	/**
-	 * 是否显示已选选项
-	 * Whether to show selected options
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let showSelected = false;
-
-	/**
-	 * 已选选项文本
-	 * Selected option text
-	 * @type {String}
-	 * @default Current language asyncPicker.defaultSelected
-	 */
-	export let selectedText = asyncPickerLang.defaultSelected;
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {Object}
-	 */
-	export let popup = {};
-
-	/**
-	 * 加载数据时的loading参数
-	 * Loading parameters when loading data
-	 * @type {Object}
-	 */
-	export let loading = {};
+	/** @typedef {import('../../index.d').AsyncPicker} AsyncPickerProps */
+	/** @type {AsyncPickerProps} */
+	let {
+		visible = $bindable(false),
+		data = $bindable([]),
+		lastLevel = false,
+		firstLevel = true,
+		showRow = 5,
+		labelKey = 'label',
+		align = 'center',
+		cancelText = asyncPickerLang.defaultCancel,
+		confirmText = asyncPickerLang.defaultConfirm,
+		title = asyncPickerLang.defaultTitle,
+		nextText = asyncPickerLang.defaultNext,
+		prevText = asyncPickerLang.defaultPrev,
+		showSelected = false,
+		selectedText = asyncPickerLang.defaultSelected,
+		popup = {},
+		loading = {},
+		oncancel,
+		onprev,
+		onconfirm,
+		onnext,
+		onopen,
+		onclose,
+	} = $props();
 
 	// 用于存储当前选定的所有项和索引
 	// Used to store all selected items and indexes
-	let items = [];
-	let indexs = [];
+	let items = $state([]);
+	let indexs = $state([]);
 
 	// 当前选中项索引
 	// Current selected item index
-	let currentIndex = 0;
+	let currentIndex = $state(0);
 
 	// 点击左侧按钮
 	// Click left button
 	const clickLeftFunc = () => {
 		if (firstLevel) {
 			visible = false;
-			dispatch('cancel');
+			oncancel && oncancel();
 		} else {
 			items = items.slice(0, items.length - 1);
 			indexs.pop();
 			data = [];
 			setTimeout(() => {
-				dispatch('prev');
+				onprev && onprev();
 				currentIndex = 0;
 			});
 		}
@@ -176,14 +73,14 @@
 			data = [];
 			visible = false;
 			currentIndex = 0;
-			dispatch('confirm', { items, indexs });
+			onconfirm && onconfirm(items, indexs);
 		} else {
 			items = [...items, data[currentIndex]];
 			indexs.push(currentIndex);
 			indexs = indexs;
 			data = [];
 			setTimeout(() => {
-				dispatch('next', { index: currentIndex });
+				onnext && onnext(currentIndex);
 				currentIndex = 0;
 			});
 		}
@@ -194,17 +91,17 @@
 	const scrollEndFunc = e => {
 		currentIndex = e.detail.index;
 	};
-	$: isLoading = data.length === 0;
-	$: {
+	let isLoading = $derived(data.length === 0);
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
 			currentIndex = 0;
 			items = [];
 			indexs = [];
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup
@@ -215,11 +112,11 @@
 	{...popup}
 >
 	<div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer"
-			on:click={() => {
+			onclick={() => {
 				!isLoading && clickLeftFunc();
 			}}
 		>
@@ -232,11 +129,11 @@
 			{/if}
 		</div>
 		<div>{title}</div>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer"
-			on:click={() => {
+			onclick={() => {
 				!isLoading && clickRightFunc();
 			}}
 		>
@@ -273,7 +170,7 @@
 				</div>
 			{:else}
 				<div>
-					<ScrollRadio {data} {showRow} {labelKey} {align} autoScrollToLast={false} on:scrollEnd={scrollEndFunc} />
+					<ScrollRadio {data} {showRow} {labelKey} {align} autoScrollToLast={false} onscrollEnd={scrollEndFunc} />
 				</div>
 			{/if}
 		</div>

packages/stdf/components/avatar/Avatar.svelte

@@ -1,82 +1,20 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * 图片地址
-	 * image url
-	 * @type {string}
-	 * @default ''
-	 */
-	export let image = '';
-
-	/**
-	 * 替换文本
-	 * replace text
-	 * @type {string}
-	 * @default ''
-	 */
-	export let alt = '';
-
-	/**
-	 * 替换Icon
-	 * replace Icon
-	 * @type {Object}
-	 * @default { name: 'ri-user-3-line', theme: true }
-	 */
-	export let icon = { name: 'ri-user-3-line', theme: true };
-
-	/**
-	 * 替换文本大小
-	 * replace text size
-	 * @type {'xs'|'sm'|'md'|'lg'|'xl'}
-	 * @default 'md'
-	 */
-	export let altSize = 'md';
-
-	/**
-	 * 圆角风格
-	 * radius style
-	 * @type {'none'|'base'|'xl'|'2xl'|'3xl'|'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'base';
-
-	/**
-	 * 头像框大小
-	 * avatar size
-	 * @type {'xs'|'sm'|'base'|'md'|'lg'|'xl'|'2xl'}
-	 * @default 'base'
-	 */
-	export let size = 'base';
-
-	/**
-	 * 头像图片大小
-	 * avatar image size
-	 * @type {'s'|'m'|'l'}
-	 * @default 'l'
-	 */
-	export let imgSize = 'l';
-
-	/**
-	 * 边框风格
-	 * border style
-	 * @type {'none'|'solid'|'dashed'|'dotted'}
-	 * @default 'none'
-	 */
-	export let line = 'none';
-
-	/**
-	 * 注入CSS
-	 * inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Avatar} AvatarProps */
+	/** @type {AvatarProps} */
+	let {
+		image = '',
+		alt = '',
+		icon = { name: 'ri-user-3-line', theme: true },
+		altSize = 'md',
+		radius = 'base',
+		size = 'base',
+		imgSize = 'l',
+		line = 'none',
+		injClass = '',
+		onclick,
+	} = $props();
 
 	// 圆角风格样式
 	// radius style
@@ -123,14 +61,14 @@
 	const iconSizeObj = { xs: 12, sm: 20, base: 24, md: 32, lg: 40, xl: 56, '2xl': 64 };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={`bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
 		sizeObj[size] || sizeObj.md
 	} ${radiusObj[radius] || radiusObj.base} ${injClass}`}
-	on:click={() => {
-		dispatch('click');
+	onclick={() => {
+		onclick && onclick();
 	}}
 >
 	{#if image === '' && alt === ''}

packages/stdf/components/avatar/Avatars.svelte

@@ -1,83 +1,21 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import Avatar from './Avatar.svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * 头像数据
-	 * avatar data
-	 * @type {Array}
-	 * @default []
-	 */
-	export let data = [];
-
-	/**
-	 * 圆角风格
-	 * radius style
-	 * @type {'none'|'base'|'xl'|'2xl'|'3xl'|'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'full';
-
-	/**
-	 * 头像框大小
-	 * avatar size
-	 * @type {'xs'|'sm'|'base'|'md'|'lg'|'xl'}
-	 * @default 'base'
-	 */
-	export let size = 'base';
-
-	/**
-	 * 紧凑度，1-10
-	 * compactness, 1-10
-	 * @type {Number}
-	 * @default 5
-	 */
-	export let compact = 5;
-
-	/**
-	 * 边框粗细
-	 * border width
-	 * @type {'0'|'1'|'2'|'3'|'4'|'8'}
-	 * @default '3'
-	 */
-	export let lineWidth = '3';
-
-	/**
-	 * 是否反向
-	 * is reverse
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let reverse = false;
-
-	/**
-	 * 最大显示数量
-	 * max display count
-	 * @type {Number}
-	 * @default 10
-	 */
-	export let max = 10;
-
-	/**
-	 * 顶层内容
-	 * top content
-	 * @type {'totle'|'add'|'none'|'slot'}
-	 * @default 'totle'
-	 */
-	export let top = 'totle';
-
-	/**
-	 * 注入CSS
-	 * inject CSS
-	 * @type {String}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Avatars} AvatarsProps */
+	/** @type {AvatarsProps} */
+	let {
+		data = [],
+		radius = 'full',
+		size = 'base',
+		compact = 5,
+		lineWidth = '3',
+		reverse = false,
+		max = 10,
+		top = 'totle',
+		injClass = '',
+		onclickGroup,
+	} = $props();
 
 	// 圆角风格样式
 	// radius style
@@ -126,12 +64,12 @@
 	const dataInner = data.slice(0, max);
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex"
-	on:click={() => {
-		dispatch('clickgroup');
+	onclick={() => {
+		onclickGroup && onclickGroup();
 	}}
 >
 	{#if reverse}
@@ -155,12 +93,10 @@
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>
-			{:else if top === 'slot'}
-				<slot />
 			{:else if top === 'none'}
 				<!-- none -->
 			{:else}
-				<span>Please pass in the correct top!</span>
+				{@render top?.()}
 			{/if}
 		</div>
 	{/if}
@@ -194,12 +130,10 @@
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>
-			{:else if top === 'slot'}
-				<slot />
 			{:else if top === 'none'}
 				<!-- none -->
 			{:else}
-				<span>Please pass in the correct top!</span>
+				{@render top?.()}
 			{/if}
 		</div>
 	{/if}

packages/stdf/components/badge/Badge.svelte

@@ -1,67 +1,17 @@
 <script>
-	/**
-	 * 徽标文案
-	 * badge text
-	 * @type {string}
-	 * @default ''
-	 */
-	export let text = '';
-
-	/**
-	 * 圆角风格
-	 * radius style
-	 * @type {'full'|'base'|'none'|'leaf'}
-	 * @default 'full'
-	 */
-	export let radius = 'full';
-
-	/**
-	 * 是否位于左侧
-	 * is on the left
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let isLeft = false;
-
-	/**
-	 * 是否显示
-	 * is show
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let isShow = true;
-
-	/**
-	 * 上下偏移量
-	 * offset top
-	 * @type {number}
-	 * @default 0
-	 */
-	export let offsetY = 0;
-
-	/**
-	 * 左右偏移量
-	 * offset left
-	 * @type {number}
-	 * @default 0
-	 */
-	export let offsetX = 0;
-
-	/**
-	 * 是否位于内部
-	 * is inner
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let isInner = false;
-
-	/**
-	 * 注入CSS
-	 * inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Badge} BadgeProps */
+	/** @type {BadgeProps} */
+	let {
+		text = '',
+		radius = 'full',
+		isLeft = false,
+		isShow = true,
+		offsetY = 0,
+		offsetX = 0,
+		isInner = false,
+		injClass = '',
+		children,
+	} = $props();
 
 	// 圆角风格样式
 	// radius style
@@ -89,7 +39,7 @@
 	</div>
 {:else}
 	<div class="relative">
-		<slot />
+		{@render children?.()}
 		<div
 			class={`absolute${text === '' ? ' -top-1.5' : ' -top-2'}${
 				isLeft ? ' left-0' : ' right-0'

packages/stdf/components/bottomSheet/BottomSheet.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, createEventDispatcher, getContext } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF } from '../utils';
 	import zh_CN from '../../lang/zh_CN';
@@ -12,128 +12,30 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const bottomSheetLang = currentLang.bottomSheet;
 
-	/**
-	 * 是否显示
-	 * show or not
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 标题
-	 * title
-	 * @type {string}
-	 * @default Current language bottomSheet.title
-	 */
-	export let title = bottomSheetLang.title;
-
-	/**
-	 * 标题对齐方式
-	 * title align
-	 * @type {'left'|'center'|'right'}
-	 * @default 'left'
-	 */
-	export let titleAlign = 'left';
-
-	/**
-	 * 是否显示返回图标
-	 * show back icon or not
-	 * @type {Boolean}
-	 * @default false
-	 */
-	export let showBackIcon = false;
-
-	/**
-	 * 关闭区域内容
-	 * close content
-	 * @type {'downIcon'|'closeIcon'|''|string}
-	 * @default 'downIcon'
-	 */
-	export let closeContent = 'downIcon';
-
-	/**
-	 * 是否在顶部显示分割线
-	 * show divider or not at the top
-	 * @type {Boolean}
-	 * @default true
-	 */
-	export let showDivider = true;
-
-	/**
-	 * 过渡动画出现时间
-	 * transition animation appear time
-	 * @type {number}
-	 * @default 450
-	 */
-	export let duration = 450;
-
-	/**
-	 * 过渡动画退出时间
-	 * transition animation exit time
-	 * @type {number}
-	 * @default 240
-	 */
-	export let outDuration = 240;
-
-	/**
-	 * 遮罩层参数
-	 * mask params
-	 * @type {object}
-	 * @default {}
-	 */
-	export let mask = {};
-
-	/**
-	 * 点击遮罩层是否关闭
-	 * click mask to close or not
-	 * @type {Boolean}
-	 * @default true
-	 */
-	export let maskClosable = false;
-
-	/**
-	 * z-index
-	 * @type {number}
-	 * @default 600
-	 */
-	export let zIndex = 600;
-
-	/**
-	 * 固定高度列表
-	 * stay height list
-	 * @type {Array<number>}
-	 * @default [10, 50, 90]
-	 */
-	export let stayHeightList = [10, 50, 90];
-
-	/**
-	 * 初始固定高度索引
-	 * initial stay height index
-	 * @type {number}
-	 * @default 1
-	 */
-	export let stayHeightIndex = 1;
-
-	/**
-	 * 滑动结束时位置低于此高度自动关闭
-	 * close when position lower than this height
-	 * @type {number}
-	 * @range 1 - 100
-	 */
-	export let closeHeight = 0;
-
-	/**
-	 * 圆角风格
-	 * radius style
-	 * @type {'none'|'base'|'full'}
-	 * @default 'full'
-	 */
-	export let radius = 'full';
-
-	// 创建事件派发器
-	// create event dispatcher
-	const dispatch = createEventDispatcher();
+	/** @typedef {import('../../index.d').BottomSheet} BottomSheetProps */
+	/** @type {BottomSheetProps} */
+	let {
+		visible = $bindable(false),
+		title = bottomSheetLang.title,
+		titleAlign = 'left',
+		showBackIcon = false,
+		closeContent = 'downIcon',
+		showDivider = true,
+		duration = 450,
+		outDuration = 240,
+		mask = {},
+		maskClosable = false,
+		zIndex = 600,
+		stayHeightList = [10, 50, 90],
+		stayHeightIndex = 1,
+		closeHeight = 0,
+		radius = 'full',
+		children,
+		onheightChange,
+		onclickMask,
+		onclose,
+		onback,
+	} = $props();
 
 	// 固定高度
 	// stay height
@@ -141,7 +43,7 @@
 
 	// 此时是否正在滑动
 	// is sliding or not now
-	let isTouch = false;
+	let isTouch = $state(false);
 
 	// 滑动开始Y坐标，px
 	// start Y coordinate, px
@@ -153,23 +55,26 @@
 
 	// 滑动开始距离顶部高度，%
 	// start distance from top, %
-	let startTop = 100 - stayHeight;
+	let startTop = $state(100 - stayHeight);
 
 	// 滑动距离，%
 	// move distance, %
-	let moveDistance = 0;
+	let moveDistance = $state(0);
 
 	// 顶部滚动区域高度，%
 	// top scroll area height, %
-	let scrollTopHeight = 5;
+	let scrollTopHeight = $state(5);
 
 	// 顶部滚动区域元素
 	// top scroll area element
-	let scrollTopDom = null;
+	let scrollTopDom = $state(null);
 
 	// 当前距离顶部高度，%
 	// current distance from top, %
-	$: currentTop = startTop + moveDistance;
+	let currentTop = $state(0);
+	$effect(() => {
+		currentTop = startTop + moveDistance;
+	});
 
 	// 如果 stayHeightList 不是数组，或者元素不是正数，或者元素不是 0-100 之间的数，或者元素不是整数，给出警告。
 	// If stayHeightList is not an array, or the element is not a positive number, or the element is not a number between 0 and 100, or the element is not an integer, give a warning.
@@ -229,6 +134,7 @@
 
 	// 滑动开始
 	// start sliding
+	/** @type {(e:PointerEvent) => void} */
 	const touchstartFun = e => {
 		moveDistance = 0;
 		startTop = currentTop;
@@ -238,6 +144,7 @@
 
 	// 滑动中
 	// sliding
+	/** @type {(e:PointerEvent) => void} */
 	const touchmoveFun = e => {
 		if (!isTouch) return;
 		scrollTopDom.setPointerCapture(e.pointerId);
@@ -270,21 +177,21 @@
 		currentTop = toTopList[currentIndex];
 		//派发事件，传递当前高度
 		//Dispatch events and pass the current
-		dispatch('heightChange', stayHeightList[currentIndex]);
+		onheightChange && onheightChange(stayHeightList[currentIndex]);
 		//判断滑动结束时如果位置低于 closeHeight 自动关闭，并派发事件
 		//If the position is lower than closeHeight at the end of the slide, it will be automatically closed and the event will be dispatched.
 		if (((window.innerHeight - currentY) / window.innerHeight) * 100 < closeHeight && closeHeight > 0) {
 			visible = false;
-			dispatch('close');
+			onclose && onclose();
 		}
 	};
 
 	//点击遮罩层
 	//click mask
-	const clickMask = () => {
+	const clickMaskFn = () => {
 		//点击遮罩时派发clickMask事件
 		//Dispatch clickMask event when clicking mask
-		dispatch('clickMask');
+		onclickMask && onclickMask();
 		if (maskClosable) {
 			visible = false;
 		}
@@ -296,7 +203,7 @@
 		visible = false;
 		//点击关闭时派发close事件
 		//Dispatch close event when clicking close
-		dispatch('close');
+		onclose && onclose();
 	};
 
 	//点击返回图标
@@ -304,12 +211,12 @@
 	const backFunc = () => {
 		//点击返回时派发back事件
 		//Dispatch back event when clicking back
-		dispatch('back');
+		onback && onback();
 	};
 
 	// 滚动时禁止 body 滚动
 	// Disable body scrolling when scrolling
-	$: {
+	$effect(() => {
 		if (visible) {
 			//当 visible 为 true 时，禁止 body 滚动
 			//When visible is true, body scrolling is disabled
@@ -329,7 +236,7 @@
         `;
 			window.scrollTo(0, Math.abs(parseFloat(top)));
 		}
-	}
+	});
 	onMount(() => {
 		if (visible) {
 			// 滚动内容高度
@@ -340,7 +247,7 @@
 </script>
 
 {#if visible}
-	<Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
+	<Mask visible {duration} {outDuration} {...mask} on:clickMask={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};`}>
@@ -354,20 +261,20 @@
 			out:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration: outDuration }}
 		>
 			<div
-				on:pointerdown={touchstartFun}
-				on:pointermove={throttleWithRAF(touchmoveFun)}
-				on:pointerup={touchendFun}
+				onpointerdown={e => touchstartFun(e)}
+				onpointermove={e => throttleWithRAF(touchmoveFun)(e)}
+				onpointerup={touchendFun}
 				bind:this={scrollTopDom}
 				class="py-1 touch-none cursor-move select-none"
 			>
-				<div class={`w-8 h-1 bg-black/20 dark:bg-white/30 mx-auto${radius === 'none' ? ' rounded-none' : ' rounded-full'}`} />
+				<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 -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
-							on:click={backFunc}
+							onclick={backFunc}
 						>
 							<Icon name="ri-arrow-left-s-line" alpha={0.4} size={16} top={-2} />
 						</div>
@@ -378,38 +285,38 @@
 					{#if closeContent === ''}
 						<!-- null -->
 					{:else if closeContent === 'closeIcon'}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
-							on:click={closeFunc}
+							onclick={closeFunc}
 						>
 							<Icon name="ri-close-line" alpha={0.4} size={14} top={-2} />
 						</div>
 					{:else if closeContent === 'downIcon'}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
-							on:click={closeFunc}
+							onclick={closeFunc}
 						>
 							<Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
 						</div>
 					{: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" on:click={closeFunc}>{closeContent}</div>
+						<!-- 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>
 					{/if}
 				</div>
 			</div>
 			{#if showDivider}
-				<div class="w-full h-px bg-black/5 dark:bg-white/10" />
+				<div class="w-full h-px bg-black/5 dark:bg-white/10"></div>
 			{/if}
 			<div
 				class="overflow-auto"
 				style="height:{window.innerHeight * ((100 - currentTop) / 100) - scrollTopHeight}px;overscroll-behavior-y: contain;"
 			>
-				<slot />
+				{@render children?.()}
 			</div>
 		</div>
 	{/if}

packages/stdf/components/button/Button.svelte

@@ -1,143 +1,32 @@
 <script>
 	import Icon from '../icon/Icon.svelte';
 	import Loading from '../loading/Loading.svelte';
-	/**
-	 * 填充模式
-	 * Fill mode
-	 * @type {'base' | 'line' | 'lineLight' | 'lineTheme' | 'text' | 'textTheme' | 'colorLight'}
-	 * @default 'base'
-	 */
-	export let fill = 'base';
 
-	/**
-	 * 状态
-	 * State
-	 * @type {'theme' | 'success' | 'warning' | 'error' | 'info'}
-	 * @default 'theme'
-	 */
-	export let state = 'theme';
-
-	/**
-	 * 圆角风格
-	 * Corner style
-	 * @type {'none' | 'base' | 'xl' | '2xl' | 'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'base';
-
-	/**
-	 * 尺寸
-	 * Size
-	 * @type {'full' | 'big' | 'md' | 'sm' | 'auto'}
-	 * @default 'big'
-	 */
-	export let size = 'big';
-
-	/**
-	 * 边框风格
-	 * Border style
-	 * @type {'solid' | 'dashed' | 'dotted'}
-	 * @default 'solid'
-	 */
-	export let line = 'solid';
-
-	/**
-	 * 注入类
-	 * Inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 是否开启关爱版
-	 * Whether to open the care version
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let love = false;
-
-	/**
-	 * 按钮外部高度
-	 * Button outer height
-	 * @type {'0' | '1' | '2' | '3' | '4'}
-	 * @default '2'
-	 */
-	export let heightOut = '2';
-
-	/**
-	 * 按钮内部高度
-	 * Button inner height
-	 * @type {'0' | '1' | '2' | '3' | '4'}
-	 * @default '3'
-	 */
-	export let heightIn = '3';
-
-	/**
-	 * 是否使用按钮组
-	 * Whether to use button group
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let group = false;
-
-	/**
-	 * 是否禁用
-	 * Whether to disable
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let disabled = false;
-
-	/**
-	 * 是否自定义大小
-	 * Whether to customize size
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let customSize = false;
-
-	/**
-	 * 自定义宽度
-	 * Custom width
-	 * @type {number}
-	 * @default 0
-	 */
-	export let customWidth = 0;
-
-	/**
-	 * 自定义高度
-	 * Custom height
-	 * @type {number}
-	 * @default 0
-	 */
-	export let customHeight = 0;
-
-	/**
-	 * Icon 参数
-	 * Icon params
-	 * @type {object|null}
-	 * @default null
-	 */
-	export let icon = null;
-
-	/**
-	 * Loading 参数
-	 * Loading params
-	 * @type {object|null}
-	 * @default null
-	 */
-	export let loading = null;
-
-	/**
-	 * 如果带加载，是否禁用
-	 * Whether to disable if loading
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let disabledLoading = true;
-
-	$: innerDisabled = disabled || (loading && disabledLoading);
+	/** @typedef {import('../../index.d').Button} ButtonProps */
+	/** @type {ButtonProps} */
+	let {
+		fill = 'base',
+		state = 'theme',
+		radius = 'base',
+		size = 'big',
+		line = 'solid',
+		injClass = '',
+		love = false,
+		heightOut = '2',
+		heightIn = '3',
+		group = false,
+		disabled = false,
+		customSize = false,
+		customWidth = 0,
+		customHeight = 0,
+		icon = null,
+		loading = null,
+		disabledLoading = true,
+		children,
+		onclick,
+	} = $props();
+
+	let innerDisabled = $derived(disabled || (loading && disabledLoading));
 
 	// 状态样式
 	// State style
@@ -190,7 +79,7 @@
 	} ${love ? 'text-xl' : ''}`}
 >
 	<button
-		on:click
+		{onclick}
 		class={`truncate inline-flex items-center justify-center gap-1 ${!group && !innerDisabled ? 'active:opacity-80' : ''} ${heightInObj[heightIn] || heightInObj['3']} ${
 			sizeObj[size] || sizeObj.big
 		} ${textColor} ${lineObj[line] || lineObj.solid} ${radiusObj[radius] || radiusObj.base} ${
@@ -205,6 +94,6 @@
 		{#if icon && icon.name}
 			<Icon {...icon} />
 		{/if}
-		<slot />
+		{@render children?.()}
 	</button>
 </div>

packages/stdf/components/calendar/Calendar.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
 	import {
@@ -14,215 +14,43 @@
 	} from '../utils';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const calendarLang = currentLang.calendar;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 开始月，格式如：'202101'
-	 * The start month, the format is: '202101'
-	 * @type {string}
-	 * @default 6 months before the current month
-	 */
-	export let startMonth = getNowBeforeOrAfterMonth(-6);
-
-	/**
-	 * 结束月，格式如：'202101'
-	 * End month, format: '202101'
-	 * @type {string}
-	 * @default 6 months after the current month
-	 */
-	export let endMonth = getNowBeforeOrAfterMonth(6);
-
-	/**
-	 * 初始化时显示月份，格式如：'202101'
-	 * The month displayed when initializing, format: '202101'
-	 * @type {string}
-	 * @default current month
-	 */
-	export let initMonth = getNowBeforeOrAfterMonth(0);
-
-	/**
-	 * 选择模式
-	 * Selection mode
-	 * @type {'single' | 'multiple' | 'range'}
-	 * @default 'single'
-	 */
-	export let mode = 'single';
-
-	/**
-	 * 是否从周日开始
-	 * Whether to start from Sunday
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let startSunday = false;
-
-	/**
-	 * 周末文字是否标红
-	 * Whether the weekend text is marked red
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let weekendRed = false;
-
-	/**
-	 * 月数据是否使用卡片样式
-	 * Whether to use the card style for the month data
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let monthCard = true;
-
-	/**
-	 * 是否显示月份水印
-	 * Whether to show the month watermark
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let monthMark = false;
-
-	/**
-	 * 月份水印文字大小
-	 * Month watermark text size
-	 * @type {'3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'}
-	 * @default '7xl'
-	 */
-	export let monthMarkSize = '7xl';
-
-	/**
-	 * 高度百分比
-	 * Height percentage
-	 * @type {number}
-	 * @range 0-100
-	 * @default 50
-	 */
-	export let height = 50;
-
-	/**
-	 * 显示信息的日期
-	 * Date to display information
-	 * @type {Array<{date: string, info: string}>}
-	 * @default []
-	 */
-	export let infoDates = [];
-
-	/**
-	 * 不允许选择日期集合
-	 * Collection of dates not allowed to be selected
-	 * @type {Array<string>}
-	 * @default []
-	 */
-	export let disabledDates = [];
-
-	/**
-	 * 圆角风格
-	 * Rounded style
-	 * @type {'base' | 'xl' | '2xl' | 'none'}
-	 * @default 'xl'
-	 */
-	export let radius = 'xl';
-
-	/**
-	 * 多选和范围选择时显示已选天数
-	 * Show the number of days selected when multiple and range selection
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let showSelectedDay = true;
-
-	/**
-	 * 确认文本
-	 * Confirm text
-	 * @type {string}
-	 * @default Current language calendar.confirmText
-	 */
-	export let confirmText = calendarLang.confirmText;
-
-	/**
-	 * 已选文本
-	 * Selected text
-	 * @type {string}
-	 * @default Current language calendar.selectedText
-	 */
-	export let selectedText = calendarLang.selectedText;
-
-	/**
-	 * 天数文本
-	 * Number of days text
-	 * @type {string}
-	 * @default Current language calendar.dayText
-	 */
-	export let dayText = calendarLang.dayText;
-
-	/**
-	 * 快速选择配置
-	 * Quick selection configuration
-	 * @type {Array<'week' | 'month' | 'quarter' | number>}
-	 * @default []
-	 */
-	export let quickSelects = [];
-
-	/**
-	 * 快速选择天数时是否包含今天
-	 * Whether to include today when selecting the number of days quickly
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let includeToday = false;
-
-	/**
-	 * 自动滚动到某个月时，是否使用动画
-	 * Whether to use animation when automatically scrolling to a month
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let useAnimation = true;
-
-	/**
-	 * 高亮显示今天
-	 * Highlight today
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let highlightToday = true;
-
-	/**
-	 * 返回日期数据格式，包含 Y、M、D 的字符串，如：'YMD'、'Y-M-D'、'Y年M月D日' 等
-	 * Return data format, including Y, M, D string, such as: 'YMD', 'M/D/Y', etc.
-	 * @type {string}
-	 * @default 'YMD'
-	 */
-	export let outFormat = 'YMD';
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let popup = {};
-
-	/**
-	 * 按钮参数
-	 * Button parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let button = {};
+	/** @typedef {import('../../index.d').Calendar} CalendarProps */
+	/** @type {CalendarProps} */
+	let {
+		visible = $bindable(false),
+		startMonth = getNowBeforeOrAfterMonth(-6),
+		endMonth = getNowBeforeOrAfterMonth(6),
+		initMonth = getNowBeforeOrAfterMonth(0),
+		mode = 'single',
+		startSunday = false,
+		weekendRed = false,
+		monthCard = true,
+		monthMark = false,
+		monthMarkSize = '7xl',
+		height = 50,
+		infoDates = [],
+		disabledDates = [],
+		radius = 'xl',
+		showSelectedDay = true,
+		confirmText = calendarLang.confirmText,
+		selectedText = calendarLang.selectedText,
+		dayText = calendarLang.dayText,
+		quickSelects = [],
+		includeToday = false,
+		useAnimation = true,
+		highlightToday = true,
+		outFormat = 'YMD',
+		popup = {},
+		button = {},
+		onconfirm,
+		onopen,
+		onclose,
+	} = $props();
 
 	// 圆角风格样式
 	// Rounded style style
@@ -250,11 +78,11 @@
 
 	// 滚动元素
 	// Scroll element
-	let scrollElement = null;
+	let scrollElement = $state(null);
 
 	// 是否点击了快速选择
 	// Whether to click the quick selection
-	let isQuickSelect = false;
+	let isQuickSelect = $state(false);
 
 	// 定义周数据文字
 	// Define the week data text
@@ -318,7 +146,7 @@
 
 	// 选中的日期
 	// Selected date
-	let selectedDate = [];
+	let selectedDate = $state([]);
 
 	// 范围选择时，点击的开始与结束
 	// When range selection is clicked, the beginning and end are clicked
@@ -326,7 +154,7 @@
 
 	// selectedDate 字符串
 	// selectedDate string
-	let selectedDateStr = '';
+	let selectedDateStr = $state('');
 
 	// 点击日期事件
 	// Click date event
@@ -371,7 +199,7 @@
 
 	// 快速选择项目
 	// Quick selection item
-	let quickSelectItem = '';
+	let quickSelectItem = $state('');
 
 	// 点击快速选择
 	// Click quick selection
@@ -436,28 +264,28 @@
 				return getDateStrFunc(outFormat, item);
 			});
 		}
-		dispatch('confirm', { dates: selectedDate });
+		onconfirm && onconfirm(selectedDate);
 	};
 
 	// 根据 initMonthIndex 在 monthList 中的索引，自动滚动到 scrollElement 高度的百分比
 	// Automatically scroll to the percentage of the height of scrollElement according to the index of initMonthIndex in monthList
-	$: {
+	$effect(() => {
 		if (scrollElement && visible && !isQuickSelect) {
 			scrollElement.scrollTop = scrollElement.scrollHeight * (initMonthIndex / monthList.length);
 		}
-	}
+	});
 
 	// 监听 visible 的变化，派发事件
 	// Listen to the change of visible, dispatch events
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
 			selectedDate = [];
 			selectedDateStr = '';
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup
@@ -472,15 +300,15 @@
 			{#if quickSelects.length > 0 && mode === 'range'}
 				<div class="flex flex-nowrap gap-4 px-4 pt-2 pb-1 overflow-x-auto calendar-container">
 					{#each quickSelects as item}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="text-xs px-2 py-1 cursor-pointer flex-none bg-white dark:bg-black dark:shadow-white/10 shadow rounded"
 							class:!bg-primary={isQuickSelect && quickSelectItem === item}
 							class:text-white={isQuickSelect && quickSelectItem === item}
 							class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}
 							class:dark:text-black={isQuickSelect && quickSelectItem === item}
-							on:click={() => quickSelectFunc(item)}
+							onclick={() => quickSelectFunc(item)}
 						>
 							{#if item === 'week'}
 								{calendarLang.currentWeekText}
@@ -524,11 +352,11 @@
 					</div>
 					<div class={`grid grid-cols-7 gap-y-1 text-center p-2`}>
 						{#each item.data as i}
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<div
 								class={`p-px cursor-pointer${i.day ? ' bg-primary/10 dark:bg-dark/20' : ''}`}
-								on:click={() => {
+								onclick={() => {
 									if (!i.disabled) clickDayFunc(item.year, item.month, i);
 								}}
 								class:!bg-transparent={!selectedDateStr.includes(`${item.year}${item.month}${i.day}`)}
@@ -635,7 +463,7 @@
 			{/each}
 		</div>
 		<div class="sticky z-10 bottom-0 left-0 w-full bg-gray-50 dark:bg-gray-800">
-			<Button {...button} on:click={confirmFunc}>
+			<Button {...button} onclick={confirmFunc}>
 				{confirmText}
 				{showSelectedDay && mode !== 'single' && selectedDateStr.split(',').length > 0
 					? `(${selectedText} ${selectedDate.length} ${dayText})`

packages/stdf/components/cell/Cell.svelte

@@ -1,137 +1,37 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import Switch from '../switch/Switch.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const commonLang = currentLang.common;
 
-	/**
-	 * 标题
-	 * Title
-	 * @type {string}
-	 * @default ''
-	 */
-	export let title = '';
-
-	/**
-	 * 右侧详情
-	 * Right side details
-	 * @type {string}
-	 * @default ''
-	 */
-	export let detail = '';
-
-	/**
-	 * 右侧内容
-	 * Right side content
-	 * @type {'none'|'arrow'|'slot'|Object}
-	 * @default 'arrow'
-	 */
-	export let right = 'arrow';
-
-	/**
-	 * 左侧内容
-	 * Left side content
-	 * @type {'slot'|''|Object}
-	 * @default ''
-	 */
-	export let left = '';
-
-	/**
-	 * 左侧下方描述
-	 * Left side description
-	 * @type {string}
-	 * @default ''
-	 */
-	export let subTitle = '';
-
-	/**
-	 * 右侧下方描述
-	 * Right side description
-	 * @type {string}
-	 * @default ''
-	 */
-	export let info = '';
-
-	/**
-	 * 是否显示底部分割线
-	 * Whether to show the bottom line
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let line = false;
-
-	/**
-	 * 上下边距
-	 * Top and bottom margin
-	 * @type {'0'|'1'|'2'|'3'|'4'|'6'|'8'}
-	 * @default '4'
-	 */
-	export let my = '4';
-
-	/**
-	 * 左右间距
-	 * Left and right margin
-	 * @type {'0'|'1'|'2'|'3'|'4'|'6'|'8'}
-	 * @default '2'
-	 */
-	export let mx = '2';
-
-	/**
-	 * 圆角风格
-	 * Rounded style
-	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'full'}
-	 * @default 'lg'
-	 */
-	export let radius = 'lg';
-
-	/**
-	 * 开关状态
-	 * Switch status
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let switcheck = false;
-
-	/**
-	 * 阴影
-	 * Shadow
-	 * @type {'none'|'sm'|'base'|'md'|'lg'|'xl'|'2xl'}
-	 * @default 'sm'
-	 */
-	export let shadow = 'sm';
-
-	/**
-	 * 注入 Class
-	 * Inject Class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 是否开启关爱版
-	 * Whether to open the care version
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let love = false;
-
-	/**
-	 * 是否点击整个 Cell 都触发事件
-	 * Whether to click the entire Cell to trigger the event
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let clickAll = true;
+	/** @typedef {import('../../index.d').Cell} CellProps */
+	/** @type {CellProps} */
+	let {
+		title = '',
+		detail = '',
+		right = 'arrow',
+		left = '',
+		subTitle = '',
+		info = '',
+		line = false,
+		my = '4',
+		mx = '2',
+		radius = 'lg',
+		switchActive = false,
+		shadow = 'sm',
+		injClass = '',
+		love = false,
+		clickAll = true,
+		leftChild,
+		rightChild,
+		detailChild,
+		onclick,
+	} = $props();
 
 	// 圆角风格样式
 	// Rounded style style
@@ -169,20 +69,20 @@
 	// Click event
 	const setClickFun = () => {
 		if (clickAll) {
-			if (right?.constructor === Object && right.type === 'switch' && !right.switch?.disabled) {
-				switcheck = right.switch?.async ? switcheck : !switcheck;
+			if (typeof right === 'object' && right.type === 'switch' && !right.switch?.disabled) {
+				switchActive = right.switch?.async ? switchActive : !switchActive;
 			}
 			// 派发事件
 			// Dispatch event
-			dispatch('click');
+			onclick && onclick();
 		}
 	};
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	on:click={setClickFun}
+	onclick={setClickFun}
 	class={`px-4 cursor-pointer bg-white dark:bg-gray-800${clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} ${
 		myClass[my] || myClass['4']
 	}${mxClass[mx] || mxClass['2']}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${
@@ -194,10 +94,8 @@
 		<div class="flex justify-between items-center">
 			{#if left === ''}
 				<!-- none -->
-			{:else if left === 'slot'}
-				<slot name="left">
-					{commonLang.slotEmpty}
-				</slot>
+			{:else if left === 'child'}
+				{@render leftChild?.()}
 			{:else}
 				<div class="mr-1 flex flex-col justify-center">
 					<Icon {...left} />
@@ -212,9 +110,7 @@
 		<div class="flex justify-between items-center">
 			<div class={`flex flex-col ${info === '' ? 'justify-center' : 'justify-between'} text-right `}>
 				{#if detail === 'slot'}
-					<slot name="detail">
-						{commonLang.slotEmpty}
-					</slot>
+					{@render detailChild?.()}
 				{:else}
 					<div class="text-gray-700 dark:text-gray-300">{detail}</div>
 				{/if}
@@ -226,18 +122,16 @@
 				<div class="text-gray-700 dark:text-gray-300 flex flex-col justify-center">
 					<Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
 				</div>
-			{:else if right?.constructor === Object && right.type === 'switch'}
+			{:else if typeof right === 'object' && right.type === 'switch' && right.switch}
 				<div class="ml-1 flex flex-col justify-center">
-					<Switch check={switcheck} {...right.switch} />
+					<Switch active={switchActive} {...right.switch} />
 				</div>
-			{:else if right?.constructor === Object && right.type === 'icon'}
+			{:else if typeof right === 'object' && right.type === 'icon' && right.icon}
 				<div class="ml-1 flex flex-col justify-center">
-					<Icon {...right} />
+					<Icon {...right.icon} />
 				</div>
-			{:else if right === 'slot'}
-				<slot name="right">
-					{commonLang.slotEmpty}
-				</slot>
+			{:else if right === 'child'}
+				{@render rightChild?.()}
 			{:else}
 				<!-- none -->
 			{/if}

packages/stdf/components/cell/CellGroup.svelte

@@ -1,35 +1,7 @@
 <script>
-	/**
-	 * 圆角风格
-	 * Radius style
-	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'full'}
-	 * @default 'lg'
-	 */
-	export let radius = 'lg';
-
-	/**
-	 * 阴影
-	 * Shadow
-	 * @type {'none'|'sm'|'base'|'md'|'lg'|'xl'|'2xl'}
-	 * @default 'sm'
-	 */
-	export let shadow = 'sm';
-
-	/**
-	 * 上下边距
-	 * Top and bottom margin
-	 * @type {'0'|'1'|'2'|'3'|'4'|'6'|'8'}
-	 * @default '4'
-	 */
-	export let my = '4';
-
-	/**
-	 * 左右间距
-	 * Left and right margin
-	 * @type {'0'|'1'|'2'|'3'|'4'|'6'|'8'}
-	 * @default '2'
-	 */
-	export let mx = '2';
+	/** @typedef {import('../../index.d').CellGroup} CellGroupProps */
+	/** @type {CellGroupProps} */
+	let { radius = 'lg', shadow = 'sm', my = '4', mx = '2', children } = $props();
 
 	const shadowClass = {
 		none: ' shadow-none',
@@ -58,5 +30,5 @@
 		myClass[my] || myClass['4']
 	}${mxClass[mx] || mxClass['2']}`}
 >
-	<slot />
+	{@render children?.()}
 </div>

packages/stdf/components/checkbox/Checkbox.svelte

@@ -2,53 +2,9 @@
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	/**
-	 * 标识符
-	 * Identifier
-	 * @type {string}
-	 * @default ''
-	 */
-	export let name = '';
-
-	/**
-	 * Checkbox 所在的 CheckboxGroup 内所有选定项标识符组成的数组
-	 * Array of all selected identifiers in the CheckboxGroup
-	 * @type {string[]}
-	 * @default []
-	 */
-	export let checkeds = [];
-
-	/**
-	 * 选中状态是否由外部控制
-	 * Whether the selected state is controlled by the outside
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let outControl = false;
-
-	/**
-	 * 选项内容区域位置
-	 * Option content area position
-	 * @type {'l' | 'r' | 't' | 'b'}
-	 * @default 'r'
-	 */
-	export let textPosition = 'r';
-
-	/**
-	 * 未选中选项图标区域内容
-	 * Unselected option icon area content
-	 * @type {'none' | 'default' | Object}
-	 * @default 'default'
-	 */
-	export let icon = 'default';
-
-	/**
-	 * 选中选项图标区域内容
-	 * Selected option icon area content
-	 * @type {'none' | 'default' | Object}
-	 * @default 'default'
-	 */
-	export let iconChecked = 'default';
+	/** @typedef {import('../../index.d').Checkbox} CheckboxProps */
+	/** @type {CheckboxProps} */
+	let { name = '', checkeds = [], outControl = false, textPosition = 'r', icon = 'default', iconChecked = 'default', children } = $props();
 
 	// 父组件传过来的选定值
 	// Selected value passed from parent component
@@ -60,12 +16,11 @@
 
 	// 当前选定值
 	// Current selected value
-	$: currentChecked = outControl ? checkeds.includes(name) : $STDF_checkboxCheckedsStore.includes(name);
+	let currentChecked = $derived(outControl ? checkeds.includes(name) : $STDF_checkboxCheckedsStore.includes(name));
+
+	// 父组件传过来的排列方式
+	// Layout type passed from parent component
 
-	/**
-	 * 父组件传过来的排列方式
-	 * Layout type passed from parent component
-	 */
 	const STDF_checkboxLayoutStore = getContext('STDF_checkboxLayoutContext');
 
 	// 点击选项事件
@@ -85,8 +40,8 @@
 	};
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={`${$STDF_checkboxLayoutStore === 'inline' ? 'inline-block' : 'flex'} grow active:opacity-80 ${
 		textPosition === 'l' && $STDF_checkboxLayoutStore != 'v' ? 'justify-between' : ''
@@ -97,11 +52,11 @@
 				? 'justify-center'
 				: 'items-center'
 	}`}
-	on:click={clickRadioFun}
+	onclick={clickRadioFun}
 >
 	{#if textPosition === 'l' || textPosition === 't'}
 		<div class={`${textPosition === 'l' && icon !== 'none' ? 'mr-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 	<div class:hidden={!currentChecked}>
@@ -119,12 +74,12 @@
 		{:else if icon === 'default'}
 			<Icon name="ri-checkbox-line" alpha={0.1} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
 		{:else}
-			<Icon {...icon} alpha={0.1} />
+			<Icon alpha={0.1} {...icon} />
 		{/if}
 	</div>
 	{#if textPosition === 'r' || textPosition === 'b'}
 		<div class={`${textPosition === 'r' && icon !== 'none' ? 'ml-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </div>

packages/stdf/components/checkbox/CheckboxGroup.svelte

@@ -1,18 +1,10 @@
 <script>
-	import { setContext, createEventDispatcher } from 'svelte';
+	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * 排列方式
-	 * layout type
-	 * @type {'h' | 'v' | 'inline'}
-	 * @default 'v'
-	 */
-	export let layout = 'v';
+	/** @typedef {import('../../index.d').CheckboxGroup} CheckboxGroupProps */
+	/** @type {CheckboxGroupProps} */
+	let { layout = 'v', children, onchange } = $props();
 
 	// 选中的值
 	// checked value
@@ -28,11 +20,12 @@
 	setContext('STDF_checkboxLayoutContext', STDF_checkboxLayoutStore);
 
 	// 监听排列方式变化
+	// Listen for layout type changes
 	STDF_checkboxCheckedsStore.subscribe(v => {
-		dispatch('change', v);
+		onchange && onchange(v);
 	});
 </script>
 
 <div class={`${layout === 'inline' ? '' : `flex ${layout === 'h' ? 'justify-between' : 'flex-col space-y-2'}`}`}>
-	<slot />
+	{@render children?.()}
 </div>

packages/stdf/components/dialog/Dialog.svelte

@@ -1,162 +1,43 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
 	import Icon from '../icon/Icon.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const dialogLang = currentLang.dialog;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 标题
-	 * Title
-	 * @type {string}
-	 * @default Current language dialog.title
-	 */
-	export let title = dialogLang.title;
-
-	/**
-	 * 标题对齐方式
-	 * Title alignment
-	 * @type {'left' | 'center' | 'right'}
-	 * @default 'center'
-	 */
-	export let titleAlign = 'center';
-
-	/**
-	 * 内容
-	 * Content
-	 * @type {string}
-	 * @default Current language dialog.content
-	 */
-	export let content = dialogLang.content;
-
-	/**
-	 * 内容是否使用slot
-	 * Whether to use slot for content
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let contentSlot = false;
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let popup = {};
-
-	/**
-	 * 是否显示图标
-	 * Whether to show icon
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let showIcon = false;
-
-	/**
-	 * 图标参数
-	 * Icon parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let icon = {};
-
-	/**
-	 * 按钮样式
-	 * Button style
-	 * @type {'button' | 'text' | 'textLine'}
-	 * @default 'button'
-	 */
-	export let btnStyle = 'button';
-
-	/**
-	 * 主按钮文字
-	 * Primary button text
-	 * @type {string}
-	 * @default Current language dialog.primaryText
-	 */
-	export let primaryText = dialogLang.primaryText;
-
-	/**
-	 * 主按钮内部是否使用slot
-	 * Whether to use slot for primary button
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let primarySlot = false;
-
-	/**
-	 * 主按钮参数
-	 * Primary button parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let primaryButton = {};
-
-	/**
-	 * 次按钮文字
-	 * Secondary button text
-	 * @type {string}
-	 * @default Current language dialog.secondaryText
-	 */
-	export let secondaryText = dialogLang.secondaryText;
-
-	/**
-	 * 次按钮参数
-	 * Secondary button parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let secondaryButton = {};
-
-	/**
-	 * 主次按钮大小比例
-	 * Primary and secondary button size ratio
-	 * @type {[number, number]}
-	 * @default [1, 1]
-	 */
-	export let btnRatio = [1, 1];
-
-	/**
-	 * 主次按钮位置是否反转
-	 * Whether to reverse the position of primary and secondary buttons
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let btnReverse = false;
-
-	/**
-	 * 主按钮是否关闭弹窗
-	 * Whether to close the popup when the primary button is clicked
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let secondaryClose = true;
-
-	/**
-	 * 按钮间距
-	 * Button spacing
-	 * @type {'0' | '1' | '2' | '4' | '8' | '12' | '16'}
-	 * @default '2'
-	 */
-	export let btnGap = '2';
+	/** @typedef {import('../../index.d').Dialog} DialogProps */
+	/** @type {DialogProps} */
+	let {
+		visible = false,
+		title = dialogLang.title,
+		titleAlign = 'center',
+		content = dialogLang.content,
+		isContentChild = false,
+		popup = {},
+		showIcon = false,
+		icon = {},
+		btnStyle = 'button',
+		primaryText = dialogLang.primaryText,
+		isPrimaryChild = false,
+		primaryButton = {},
+		secondaryText = dialogLang.secondaryText,
+		secondaryButton = {},
+		btnRatio = [1, 1],
+		btnReverse = false,
+		secondaryClose = true,
+		btnGap = '2',
+		onsecondary,
+		onprimary,
+		onclose,
+		onopen,
+		contentChild,
+		primaryChild,
+	} = $props();
 
 	// 标题对齐方式
 	// Title alignment
@@ -172,24 +53,24 @@
 		if (secondaryClose) {
 			visible = false;
 		}
-		dispatch('secondary');
+		onsecondary && onsecondary();
 	};
 
 	// 主按钮点击事件
 	// Primary button click event
 	const primaryFunc = () => {
-		dispatch('primary');
+		onprimary && onprimary();
 	};
 
 	// 监听visible变化，派发open/close事件
 	// Listen to the change of visible, dispatch open/close events
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup
@@ -212,8 +93,8 @@
 			</div>
 		{/if}
 		<div>
-			{#if contentSlot}
-				<slot name="content" />
+			{#if isContentChild}
+				{@render contentChild?.()}
 			{:else}
 				{content}
 			{/if}
@@ -233,7 +114,7 @@
 					heightIn={btnStyle === 'button' ? '3' : '2'}
 					injClass={btnStyle === 'button' ? '' : 'font-bold'}
 					{...secondaryButton}
-					on:click={secondaryFunc}
+					onclick={secondaryFunc}
 				>
 					{secondaryText}
 				</Button>
@@ -245,10 +126,10 @@
 					heightIn={btnStyle === 'button' ? '3' : '2'}
 					injClass={btnStyle === 'button' ? '' : 'font-bold'}
 					{...primaryButton}
-					on:click={primaryFunc}
+					onclick={primaryFunc}
 				>
-					{#if primarySlot}
-						<slot name="primary" />
+					{#if isPrimaryChild}
+						{@render primaryChild?.()}
 					{:else}
 						{primaryText}
 					{/if}</Button

packages/stdf/components/divider/Divider.svelte

@@ -1,75 +1,7 @@
 <script>
-	/**
-	 * 分隔线类型
-	 * Divider type
-	 * @type {'h' | 'v'}
-	 * @default 'h'
-	 */
-	export let layout = 'h';
-
-	/**
-	 * 水平间距
-	 * Horizontal spacing
-	 * @type {'0' | '4' | '8' | '16' | '36'}
-	 * @default '0'
-	 */
-	export let px = '0';
-
-	/**
-	 * 水平高度
-	 * Horizontal height
-	 * @type {'0' | '4' | '8'}
-	 * @default '4'
-	 */
-	export let py = '4';
-
-	/**
-	 * 文本内容
-	 * Text content
-	 * @type {string}
-	 * @default ''
-	 */
-	export let text = '';
-
-	/**
-	 * 文本位置（仅在水平分割线有效）
-	 * Text position (only valid for horizontal divider)
-	 * @type {'left' | 'center' | 'right'}
-	 * @default 'center'
-	 */
-	export let align = 'center';
-
-	/**
-	 * 线条风格
-	 * Line style
-	 * @type {'solid' | 'dashed' | 'dotted'}
-	 * @default 'solid'
-	 */
-	export let line = 'solid';
-
-	/**
-	 * 垂直间距
-	 * Vertical spacing
-	 * @type {'1' | '2' | '4'}
-	 * @default '1'
-	 */
-	export let mx = '1';
-
-	/**
-	 * 线条粗细
-	 * Line thickness
-	 * @type {'1' | '2' | '4'}
-	 * @default '1'
-	 */
-	export let weight = '1';
-
-	/**
-	 * 注入CSS
-	 * Inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Divider} DividerProps */
+	/** @type {DividerProps} */
+	let { layout = 'h', px = '0', py = '4', text = '', align = 'center', line = 'solid', mx = '1', weight = '1', injClass = '' } = $props();
 
 	// 水平间距样式
 	// Horizontal spacing style
@@ -101,7 +33,7 @@
 		class={`inline ${weightWObj[weight] || weightWObj['1']} border-black/10 dark:border-white/20 ${mxObj[mx] || mxObj['1']} ${
 			lineObj[line] || lineObj.solid
 		} ${injClass}`}
-	/>
+	></div>
 {:else}
 	<div class={`flex items-center ${pxObj[px] || pxObj['0']} ${pyObj[py] || pyObj['4']}`}>
 		{#if (text !== '' && align !== 'left') || text === ''}
@@ -109,7 +41,7 @@
 				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
 					lineObj[line] || lineObj.solid
 				}  ${injClass}`}
-			/>
+			></div>
 		{/if}
 		{#if text !== ''}
 			<div class={`flex-none mx-2 text-xs text-gray-400 ${injClass}`}>{text}</div>
@@ -119,7 +51,7 @@
 				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
 					lineObj[line] || lineObj.solid
 				}  ${injClass}`}
-			/>
+			></div>
 		{/if}
 	</div>
 {/if}

packages/stdf/components/grids/Grid.svelte

@@ -1,19 +1,7 @@
 <script>
-	/**
-	 * 单元格所占列数
-	 * Number of columns occupied by the cell
-	 * @type {'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'}
-	 * @default '1'
-	 */
-	export let col = '1';
-
-	/**
-	 * 单元格所占行数
-	 * Number of rows occupied by the cell
-	 * @type {'1' | '2' | '3' | '4' | '5' | '6'}
-	 * @default '1'
-	 */
-	export let row = '1';
+	/** @typedef {import('../../index.d').Grid} GridProps */
+	/** @type {GridProps} */
+	let { col = '1', row = '1', children } = $props();
 
 	// 根据行数生成样式
 	// Generate styles based on the number of rows
@@ -37,4 +25,4 @@
 	};
 </script>
 
-<div class={`${rowObj[row] || rowObj['1']}${colObj[col] || colObj['1']}`}><slot /></div>
+<div class={`${rowObj[row] || rowObj['1']}${colObj[col] || colObj['1']}`}>{@render children?.()}</div>

packages/stdf/components/grids/Grids.svelte

@@ -1,35 +1,7 @@
 <script>
-	/**
-	 * 列数
-	 * Number of columns
-	 * @type {'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'}
-	 * @default '6'
-	 */
-	export let cols = '6';
-
-	/**
-	 * 间距
-	 * Spacing
-	 * @type {'0' | '1' | '2' | '4' | '8'}
-	 * @default '2'
-	 */
-	export let gap = '2';
-
-	/**
-	 * 水平间距
-	 * Horizontal spacing
-	 * @type {'0' | '1' | '2' | '4' | '8'}
-	 * @default '2'
-	 */
-	export let mx = '2';
-
-	/**
-	 * 垂直间距
-	 * Vertical spacing
-	 * @type {'0' | '1' | '2' | '4' | '8'}
-	 * @default '2'
-	 */
-	export let my = '2';
+	/** @typedef {import('../../index.d').Grids} GridsProps */
+	/** @type {GridsProps} */
+	let { cols = '6', gap = '2', mx = '2', my = '2', children } = $props();
 
 	//根据列数生成样式
 	// Generate styles based on the number of columns
@@ -62,5 +34,5 @@
 </script>
 
 <div class={`grid${colsObj[cols] || colsObj['6']}${mxObj[mx] || mxObj['2']}${myObj[my] || myObj['2']}${gapObj[gap] || gapObj['2']}`}>
-	<slot />
+	{@render children?.()}
 </div>

packages/stdf/components/icon/Icon.svelte

@@ -1,67 +1,16 @@
 <script>
-	/**
-	 * 图标名称
-	 * Icon name
-	 * @type {string}
-	 * @default ''
-	 */
-	export let name = '';
-
-	/**
-	 * 图标大小
-	 * Icon size
-	 * @type {number|string}
-	 * @default 24
-	 */
-	export let size = 24;
-
-	/**
-	 * 是否跟随主题色
-	 * Whether to follow the theme color
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let theme = false;
-
-	/**
-	 * 透明度
-	 * Opacity
-	 * @type {number}
-	 * @range 0 - 1
-	 * @default 1
-	 */
-	export let alpha = 1;
-
-	/**
-	 * 项目存放 symbol.svg 文件的路径
-	 * The path where the symbol.svg file is stored in the project
-	 * @type {string}
-	 * @default 'fonts/symbol.svg'
-	 */
-	export let path = 'fonts/symbol.svg';
-
-	/**
-	 * 偏移量
-	 * Offset
-	 * @type {number}
-	 * @default 0
-	 */
-	export let top = 0;
-
-	/**
-	 * 注入 CSS
-	 * Inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Icon} IconProps */
+	/** @type {IconProps} */
+	let { name = '', size = 24, theme = false, alpha = 1, path = 'fonts/symbol.svg', top = 0, injClass = '', children } = $props();
 </script>
 
 <i class={`cursor-pointer relative ${theme ? 'text-primary dark:text-dark' : ''} ${injClass}`} style="top:{top}px;">
 	{#if name === 'slot'}
-		<slot><span>无插槽内容！</span></slot>
+		{#if children}
+			{@render children()}
+		{/if}
 	{:else}
-		<svg width={size} height={size} style="fill: currentColor;fill-opacity: {alpha};display: inline;">
+		<svg width={size} height={size === 'full' ? '100%' : size} style="fill: currentColor;fill-opacity: {alpha};display: inline;">
 			<use xlink:href="/{path}#{name}" />
 		</svg>
 	{/if}

packages/stdf/components/indexBar/IndexBar.svelte

@@ -1,92 +1,25 @@
 <script>
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF } from '../utils';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * @typedef {Object} child
-	 * @property {string} text 索引项文本
-	 */
-
-	/**
-	 * @typedef {Object} item
-	 * @property {string} index 索引
-	 * @property {string} title 索引组标题
-	 * @property {Array<child>} child 索引项
-	 * @property {number} [height] 索引组高度
-	 */
-
-	/**
-	 * 数据
-	 * Data
-	 * @type {Array<item>}
-	 * @default []
-	 */
-	export let data = [];
-
-	/**
-	 * 当前页码
-	 * Current page
-	 * @type {number}
-	 * @default 0
-	 */
-	export let current = 0;
-
-	/**
-	 * 索引内容区域距离文档顶部的距离
-	 * The distance from the top of the document to the index content area
-	 * @type {number}
-	 * @default 0
-	 */
-	export let top = 0;
-
-	/**
-	 * 索引内容区域高度
-	 * Index content area height
-	 * @type {number}
-	 * @default 100
-	 */
-	export let height = 100;
-
-	/**
-	 * 圆角风格
-	 * Rounded style
-	 * @type {'none' | 'base' | 'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'base';
-
-	/**
-	 * 是否滚动对齐
-	 * Whether to scroll align
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let scrollAlign = true;
-
-	/**
-	 * 索引组标题注入 CSS
-	 * Index group title injection CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let titleInjClass = '';
-
-	/**
-	 * 索引项文本注入 CSS
-	 * Index item text injection CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let textInjClass = '';
+	/** @typedef {import('../../index.d').IndexBar} IndexBarProps */
+	/** @type {IndexBarProps} */
+	let {
+		data = [],
+		current = $bindable(0),
+		top = 0,
+		height = 100,
+		radius = 'base',
+		scrollAlign = true,
+		titleInjClass = '',
+		textInjClass = '',
+		onclickChild,
+	} = $props();
 
 	// 用于绑定bar的高度
 	// Used to bind the height of the bar
-	let barHeight = 0;
+	let barHeight = $state(0);
 
 	// 主体内容高度累计，用于监听滑动
 	// The cumulative height of the main content is used to listen to the slide
@@ -94,11 +27,11 @@
 
 	// 当前滑动的索引
 	// Current sliding index
-	let currentTouch = -1;
+	let currentTouch = $state(-1);
 
 	// 主体内容元素
 	// Main body content element
-	let bodyDom = null;
+	let bodyDom = $state(null);
 
 	// Bar外层距离顶部的距离
 	// Bar outside the distance from the top
@@ -106,13 +39,13 @@
 
 	// bar元素
 	// bar element
-	let barDom = null;
+	let barDom = $state(null);
 
 	let isDown = false; //是否按下 is down
 
 	// 每一个的高度
 	// Height of each
-	$: itemHeight = barHeight / data.length;
+	let itemHeight = $derived(barHeight / data.length);
 
 	// 圆角风格样式
 	// Rounded style style
@@ -122,7 +55,6 @@
 		bodyDom.scrollTop = 0;
 		for (let t = 0; t < data.length + 1; t++) {
 			const long = data.slice(0, t).reduce((sum, current) => {
-				// @ts-ignore
 				return sum + current.height;
 			}, 0);
 			longSumList.push(long);
@@ -193,31 +125,31 @@
 	// 点击主体内容区域
 	// Click on the main body content area
 	const chickChildFun = (index, group, childIndex, child) => {
-		// 派发点击事件，向外传递出四个参数。 1. index：点击项的父级组索引值；2. group：点击项的父级组内容；3. childIndex：点击项索引值；4. child：点击项内容。
-		// Dispatch click events to pass four parameters out. 1. index: the parent group index value of the clicked item; 2. group: the parent group content of the clicked item; 3. childIndex: the index value of the clicked item; 4. child: the content of the clicked item.
-		dispatch('clickchild', { index, group, childIndex, child });
+		// 向外传递四个参数：1. index：点击项的父级组索引值；2. group：点击项的父级组内容；3. childIndex：点击项索引值；4. child：点击项内容。
+		// Pass out four parameters: 1. index: parent group index of clicked item; 2. group: parent group content of clicked item; 3. childIndex: index of clicked item; 4. child: content of clicked item
+		onclickChild && onclickChild(index, group, childIndex, child);
 	};
 </script>
 
-<div bind:this={bodyDom} class={`overflow-y-auto ${scrollAlign && 'snap-y'}`} on:scroll={scrollBody} style="height:{height}px;">
+<div bind:this={bodyDom} class={`overflow-y-auto ${scrollAlign && 'snap-y'}`} onscroll={scrollBody} style="height:{height}px;">
 	{#each data as group, index}
 		<div class="px-4 pt-8 snap-start" bind:clientHeight={group.height}>
 			<div class={`text-primary dark:text-dark text-sm ${titleInjClass}`}>{group.title}</div>
 			{#each group.child as child, childIndex}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={`py-2 ${textInjClass}`} on:click={() => chickChildFun(index, group, childIndex, child)}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={`py-2 ${textInjClass}`} onclick={() => chickChildFun(index, group, childIndex, child)}>
 					{child.text}
 				</div>
-				<div class="h-px bg-black/5 dark:bg-white/5" />
+				<div class="h-px bg-black/5 dark:bg-white/5"></div>
 			{/each}
 		</div>
 	{/each}
 </div>
 <div
-	on:pointerdown={touchBoxStart}
-	on:pointermove={throttleWithRAF(touchBoxMove)}
-	on:pointerup={touchBoxEnd}
+	onpointerdown={touchBoxStart}
+	onpointermove={e => throttleWithRAF(touchBoxMove)(e)}
+	onpointerup={touchBoxEnd}
 	bind:clientHeight={barHeight}
 	bind:this={barDom}
 	class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none ${

packages/stdf/components/input/Input.svelte

@@ -1,258 +1,73 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
-	const commonLang = currentLang.common;
 	const inputLang = currentLang.input;
 
-	/**
-	 * 标题
-	 * Title
-	 * @type {string}
-	 * @default ''
-	 */
-	export let title = '';
-
-	/**
-	 * 标题位置
-	 * Title position
-	 * @type {'in'|'out'|'none'}
-	 * @default 'out'
-	 */
-	export let titlePosition = 'out';
-
-	/**
-	 * 输入框文字位置
-	 * Input box text position
-	 * @type {'left'|'right'}
-	 * @default 'left'
-	 */
-	export let inputPosition = 'left';
-
-	/**
-	 * 输入框占位符
-	 * Input box placeholder
-	 * @type {string}
-	 * @default ''
-	 */
-	export let placeholder = '';
-
-	/**
-	 * 圆角风格
-	 * Corner style
-	 * @type {'none'|'base'|'xl'|'2xl'|'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'base';
-
-	/**
-	 * 标签 1 内容
-	 * Label 1 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label1 = '';
-
-	/**
-	 * 标签 2 内容
-	 * Label 2 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label2 = '';
-
-	/**
-	 * 标签 3 内容
-	 * Label 3 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label3 = '';
-
-	/**
-	 * 标签 4 内容
-	 * Label 4 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label4 = '';
-
-	/**
-	 * 标签 5 内容
-	 * Label 5 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label5 = '';
-
-	/**
-	 * 标签 6 内容
-	 * Label 6 content
-	 * @type {''|'slot'|Object}
-	 * @default ''
-	 */
-	export let label6 = '';
-
-	/**
-	 * 提示文字
-	 * Tip text
-	 * @type {string}
-	 * @default ''
-	 */
-	export let tip = '';
-
-	/**
-	 * 数据 1 内容
-	 * Data 1 content
-	 * @type {''|'slot'|String}
-	 */
-	export let data1 = '';
-
-	/**
-	 * 数据 2 内容
-	 * Data 2 content
-	 * @type {''|'slot'|String}
-	 */
-	export let data2 = '';
-
-	/**
-	 * 数据 3 内容
-	 * Data 3 content
-	 * @type {''|'slot'|String}
-	 */
-	export let data3 = '';
-
-	/**
-	 * 输入框值
-	 * Input box value
-	 * @type {string}
-	 * @default ''
-	 */
-	export let value = '';
-
-	/**
-	 * 是否显示清除按钮
-	 * Whether to show the clear button
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let clear = false;
-
-	/**
-	 * 输入框风格
-	 * Input box style
-	 * @type {'block'|'line'}
-	 * @default 'block'
-	 */
-	export let inputStyle = 'block';
-
-	/**
-	 * 线性动画
-	 * Linear animation
-	 * @type {'none'|'center'|'left'}
-	 * @default 'none'
-	 */
-	export let lineTransition = 'none';
-
-	/**
-	 * 过渡时间
-	 * Transition time
-	 * @type {'fast'|'base'|'slow'|'slower'}
-	 * @default 'base'
-	 */
-	export let duration = 'base';
-
-	/**
-	 * 是否开启自动填充功能
-	 * Whether to enable automatic filling function
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let autocomplete = true;
-
-	/**
-	 * 垂直间距
-	 * Vertical spacing
-	 * @type {'0'|'0.5'|'1'|'2'|'3'|'4'|'6'}
-	 * @default '2'
-	 */
-	export let py = '2';
-
-	/**
-	 * 是否禁用
-	 * Whether to disable
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let disabled = false;
-
-	/**
-	 * 状态
-	 * Status
-	 * @type {'theme'|'success'|'warning'|'error'|'info'}
-	 * @default 'theme'
-	 */
-	export let state = 'theme';
-
-	/**
-	 * 输入框类型
-	 * Input box type
-	 * @type {'text'|'decimal'|'email'|'none'|'numeric'|'search'|'tel'|'url'|'password'|'number'|'textarea'}
-	 * @default 'text'
-	 */
-	export let type = 'text';
-
-	/**
-	 * 输入模式
-	 * Input mode
-	 * @type {'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url'|''}
-	 * @default ''
-	 */
-	export let inputmode = '';
-
-	/**
-	 * 最大长度
-	 * Maximum length
-	 * @type {number}
-	 * @default 24
-	 */
-	export let maxlength = 24;
-
-	/**
-	 * textarea 最大长度
-	 * Textarea maximum length
-	 * @type {number}
-	 * @default 200
-	 */
-	export let textareaMaxlength = 200;
-
-	/**
-	 * 行数
-	 * Number of rows
-	 * @type {number}
-	 * @default 2
-	 */
-	export let rows = 2;
-
-	/**
-	 * 自动调整大小
-	 * Automatically adjust size
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let autosize = false;
+	/** @typedef {import('../../index.d').Input} InputProps */
+	/** @type {InputProps} */
+	let {
+		title = '',
+		titlePosition = 'out',
+		inputPosition = 'left',
+		placeholder = '',
+		radius = 'base',
+		label1 = '',
+		label2 = '',
+		label3 = '',
+		label4 = '',
+		label5 = '',
+		label6 = '',
+		tip = '',
+		data1 = '',
+		data2 = '',
+		data3 = '',
+		value = '',
+		clear = false,
+		inputStyle = 'block',
+		lineTransition = 'none',
+		duration = 'base',
+		autocomplete = true,
+		py = '2',
+		disabled = false,
+		state: inputState = 'theme',
+		type = 'text',
+		inputmode = '',
+		maxlength = 24,
+		textareaMaxlength = 200,
+		rows = 2,
+		autosize = false,
+		onfocus,
+		onblur,
+		onchange,
+		onclear,
+		onclicklabel1,
+		onclicklabel2,
+		onclicklabel3,
+		onclicklabel4,
+		onclicklabel5,
+		onclicklabel6,
+		onkeydown,
+		titleChild,
+		data1Child,
+		data2Child,
+		data3Child,
+		label1Child,
+		label2Child,
+		label3Child,
+		label4Child,
+		label5Child,
+		label6Child,
+		tipChild,
+	} = $props();
 
 	// 是否获取焦点
 	// Whether to get focus
-	let focus = false;
+	let focus = $state(false);
 
 	// 中文输入上屏标识
 	// Chinese input screening flag
@@ -260,7 +75,8 @@
 
 	//textarea 元素
 	//textarea element
-	let textareaDom = null;
+	/** @type {HTMLTextAreaElement} */
+	let textareaDom = $state(undefined);
 
 	// 输入模式判断
 	// Input mode judgment
@@ -279,7 +95,7 @@
 
 	// 输入框类型判断
 	// Input box type judgment
-	$: mode = inputmode === '' ? modeFun(type) : inputmode;
+	const mode = $derived(inputmode === '' ? modeFun(type) : inputmode);
 
 	// 输入框类型判断
 	const typeAction = node => {
@@ -311,10 +127,10 @@
 
 	// 根据是否获取焦点判断输入框样式
 	// Determine the input box style according to whether to get focus
-	$: inputStyleFocusObj = {
-		block: 'px-2 ring-2 bg-transparent ' + stateObj[state] || stateObj.theme + radiusObj[radius] || radiusObj.base,
+	const inputStyleFocusObj = $derived({
+		block: 'px-2 ring-2 bg-transparent ' + stateObj[inputState] || stateObj.theme + radiusObj[radius] || radiusObj.base,
 		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500',
-	};
+	});
 
 	// 线性动画样式
 	// Linear animation style
@@ -338,14 +154,14 @@
 	// Get focus to dispatch events
 	const onFocus = () => {
 		focus = true;
-		dispatch('focus', value);
+		onfocus && onfocus(value);
 	};
 
 	// 失去焦点时派发事件
 	// Dispatch events when focus is lost
 	const onBlur = () => {
 		focus = false;
-		dispatch('blur', value);
+		onblur && onblur(value);
 	};
 
 	// 输入内容变化时触发
@@ -380,7 +196,7 @@
 				} else {
 					value = e.target.value;
 				}
-				dispatch('change', value);
+				onchange && onchange(value);
 			}
 		}, 0);
 	};
@@ -401,36 +217,31 @@
 	//Triggered when cleared
 	const clearFun = () => {
 		value = '';
-		dispatch('clear');
+		onclear && onclear();
 	};
 
-	//点击标签 1 - 6 时派发事件
-	//Dispatch events when clicking labels 1 - 6
-	const clickLabel1Fun = () => {
-		dispatch('clicklabel1');
-	};
-	const clickLabel2Fun = () => {
-		dispatch('clicklabel2');
-	};
-	const clickLabel3Fun = () => {
-		dispatch('clicklabel3');
-	};
-	const clickLabel4Fun = () => {
-		dispatch('clicklabel4');
-	};
-	const clickLabel5Fun = () => {
-		dispatch('clicklabel5');
-	};
-	const clickLabel6Fun = () => {
-		dispatch('clicklabel6');
-	};
+	// const clickLabel2Fun = () => {
+	// 	onclicklabel2 && onclicklabel2();
+	// };
+	// const clickLabel3Fun = () => {
+	// 	onclicklabel3 && onclicklabel3();
+	// };
+	// const clickLabel4Fun = () => {
+	// 	onclicklabel4 && onclicklabel4();
+	// };
+	// const clickLabel5Fun = () => {
+	// 	onclicklabel5 && onclicklabel5();
+	// };
+	// const clickLabel6Fun = () => {
+	// 	onclicklabel6 && onclicklabel6();
+	// };
 
 	// 键盘事件
 	// Keyboard event
 	const keydownFunc = e => {
 		// 派发事件，并传出按键的 key
 		// Dispatch events and pass out the key of the key
-		dispatch('keydown', e.key);
+		onkeydown && onkeydown(e.key);
 	};
 </script>
 
@@ -438,26 +249,26 @@
 	<label>
 		<div class={`flex px-2 ${title === '' ? 'justify-end' : 'justify-between'}`}>
 			{#if titlePosition === 'out'}
-				{#if title === ''}
+				{#if titleChild}
+					{@render titleChild?.()}
+				{:else if title === ''}
 					<!-- none -->
-				{:else if title === 'slot'}
-					<slot name="title">title {commonLang.slotEmpty}</slot>
 				{:else}
 					<div class="text-sm font-semibold mb-1">{title}</div>
 				{/if}
 			{/if}
 			<div class="flex space-x-2 text-xs">
-				{#if data1 === ''}
+				{#if data1Child}
+					{@render data1Child?.()}
+				{:else if data1 === ''}
 					<!-- none -->
-				{:else if data1 === 'slot'}
-					<slot name="data1">data1 {commonLang.slotEmpty}</slot>
 				{:else}
 					{data1}
 				{/if}
-				{#if data2 === ''}
+				{#if data2Child}
+					{@render data2Child?.()}
+				{:else if data2 === ''}
 					<!-- none -->
-				{:else if data2 === 'slot'}
-					<slot name="data2">data2 {commonLang.slotEmpty}</slot>
 				{:else}
 					{data2}
 				{/if}
@@ -470,36 +281,51 @@
 				focus ? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block : inputStyleObj[inputStyle] || inputStyleObj.block
 			} ${inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}`}
 		>
-			{#if label1 === ''}
+			{#if label1Child}
+				{@render label1Child?.()}
+			{:else if label1 === ''}
 				<!-- none -->
-			{:else if label1 === 'slot'}
-				<slot name="label1">label1 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div on:click|preventDefault={clickLabel1Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel1 && onclicklabel1();
+					}}
+				>
 					<Icon {...label1} />
 				</div>
 			{/if}
-			{#if label2 === ''}
+			{#if label2Child}
+				{@render label2Child?.()}
+			{:else if label2 === ''}
 				<!-- none -->
-			{:else if label2 === 'slot'}
-				<slot name="label2">label2 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="text-sm" on:click|preventDefault={clickLabel2Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel2 && onclicklabel2();
+					}}
+				>
 					{label2}
 				</div>
 			{/if}
-			{#if label3 === ''}
+			{#if label3Child}
+				{@render label3Child?.()}
+			{:else if label3 === ''}
 				<!-- none -->
-			{:else if label3 === 'slot'}
-				<slot name="label3">label3 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div on:click|preventDefault={clickLabel3Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel3 && onclicklabel3();
+					}}
+				>
 					<Icon {...label3} />
 				</div>
 			{/if}
@@ -519,16 +345,16 @@
 								class={`w-full focus:outline-none bg-transparent font-semibold ${inputPosition === 'left' ? 'text-left' : 'text-right'} ${
 									disabled ? 'cursor-not-allowed opacity-50' : ''
 								}`}
-								on:focus={onFocus}
-								on:blur={onBlur}
-								on:input={valueChangeFun}
-								on:compositionend={compositionendFun}
-								on:compositionstart={compositionstartFun}
+								onfocus={onFocus}
+								onblur={onBlur}
+								oninput={valueChangeFun}
+								oncompositionend={compositionendFun}
+								oncompositionstart={compositionstartFun}
 								{autocomplete}
 								{disabled}
 								bind:this={textareaDom}
-								on:keydown={keydownFunc}
-							/>
+								onkeydown={keydownFunc}
+							></textarea>
 						{:else}
 							<input
 								bind:value
@@ -538,56 +364,76 @@
 								class={`w-full focus:outline-none bg-transparent font-semibold whitespace-normal ${
 									inputPosition === 'left' ? 'text-left' : 'text-right'
 								} ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
-								on:focus={onFocus}
-								on:blur={onBlur}
-								on:input={valueChangeFun}
-								on:compositionend={compositionendFun}
-								on:compositionstart={compositionstartFun}
+								onfocus={onFocus}
+								onblur={onBlur}
+								oninput={valueChangeFun}
+								oncompositionend={compositionendFun}
+								oncompositionstart={compositionstartFun}
 								{autocomplete}
 								{disabled}
-								on:keydown={keydownFunc}
+								onkeydown={keydownFunc}
 							/>
 						{/if}
 					</div>
 					{#if clear && value !== ''}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div on:click|preventDefault={clearFun}>
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							onclick={e => {
+								e.preventDefault();
+								clearFun();
+							}}
+						>
 							<Icon name="ri-close-circle-fill" size={16} alpha={0.3} />
 						</div>
 					{/if}
 				</div>
 			</div>
-			{#if label4 === ''}
+			{#if label4Child}
+				{@render label4Child?.()}
+			{:else if label4 === ''}
 				<!-- none -->
-			{:else if label4 === 'slot'}
-				<slot name="label4">label4 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div on:click|preventDefault={clickLabel4Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel4 && onclicklabel4();
+					}}
+				>
 					<Icon {...label4} />
 				</div>
 			{/if}
-			{#if label5 === ''}
+			{#if label5Child}
+				{@render label5Child?.()}
+			{:else if label5 === ''}
 				<!-- none -->
-			{:else if label5 === 'slot'}
-				<slot name="label5">label5 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="text-sm" on:click|preventDefault={clickLabel5Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel5 && onclicklabel5();
+					}}
+				>
 					{label5}
 				</div>
 			{/if}
-			{#if label6 === ''}
+			{#if label6Child}
+				{@render label6Child?.()}
+			{:else if label6 === ''}
 				<!-- none -->
-			{:else if label6 === 'slot'}
-				<slot name="label6">label6 {commonLang.slotEmpty}</slot>
 			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div on:click|preventDefault={clickLabel6Fun}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={e => {
+						e.preventDefault();
+						onclicklabel6 && onclicklabel6();
+					}}
+				>
 					<Icon {...label6} />
 				</div>
 			{/if}
@@ -596,30 +442,30 @@
 					class={`h-[2px] absolute -bottom-px ${lineTransition === 'none' ? 'transition-colors' : 'transition-all'} ${
 						durationObj[duration] || durationObj.base
 					} ${!focus && lineTransition === 'none' && 'bg-transparent w-full'} ${
-						focus && lineTransition === 'none' && `${lineTransitionStateObj[state] || lineTransitionStateObj.theme} w-full`
-					} ${!focus && lineTransition !== 'none' && `w-0 ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`} ${
-						focus && lineTransition !== 'none' && `w-full ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`
+						focus && lineTransition === 'none' && `${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme} w-full`
+					} ${!focus && lineTransition !== 'none' && `w-0 ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`} ${
+						focus && lineTransition !== 'none' && `w-full ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`
 					}`}
 					style={lineTransition === 'center'
 						? 'left:50%;transform:translateX(calc( -50% - 0.25rem ));-webkit-transform:translateX(calc( -50% - 0.25rem ));'
 						: 'left:0;transform:translateX( -0.25rem );-webkit-transform:translateX( -0.25rem );'}
-				/>
+				></div>
 			{/if}
 		</div>
 		<div class={`flex  px-2 text-gay6 ${tip === '' ? 'justify-end' : 'justify-between'}`}>
-			{#if tip === ''}
+			{#if tipChild}
+				{@render tipChild?.()}
+			{:else if tip === ''}
 				<!-- none -->
-			{:else if tip === 'slot'}
-				<slot name="tip">tip {commonLang.slotEmpty}</slot>
 			{:else}
 				<div class="text-sm text-gray-400">
 					{tip}
 				</div>
 			{/if}
-			{#if data3 === ''}
+			{#if data3Child}
+				{@render data3Child?.()}
+			{:else if data3 === ''}
 				<!-- none -->
-			{:else if data3 === 'slot'}
-				<slot name="data3">data3 {commonLang.slotEmpty}</slot>
 			{:else}
 				<div class="text-xs">
 					{data3}

packages/stdf/components/loading/Loading.svelte

@@ -59,73 +59,22 @@
 	import { Loading2_0, Loading2_1, Loading2_2, Loading2_3, Loading2_4, Loading2_5 } from './loadings/twoColor';
 	import { Loading4_0, Loading4_1, Loading4_2, Loading4_3 } from './loadings/fourColor';
 
-	/**
-	 * 编号
-	 * Number
-	 * @type {string}
-	 * @default '1_0'
-	 */
-	export let type = '1_0';
-
-	/**
-	 * 容器高度
-	 * container height
-	 * @type {'2'|'4'|'6'|'8'|'12'|'16'|'20'|'28'|'36'|'48'|'56'|'64'|'72'|'80'|'96'|'full'}
-	 * @default '8'
-	 */
-	export let height = '8';
-
-	/**
-	 * 容器宽度
-	 * container width
-	 * @type {'2'|'4'|'6'|'8'|'12'|'16'|'20'|'28'|'36'|'48'|'56'|'64'|'72'|'80'|'96'|'full'}
-	 * @default '8'
-	 */
-	export let width = '8';
-
-	/**
-	 * 是否使用主题色
-	 * use theme color
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let theme = false;
-
-	/**
-	 * 是否反色
-	 * inverse color
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let inverse = false;
-
-	/**
-	 * 自定义颜色
-	 * custom color
-	 * @type {string[]}
-	 * @default []
-	 */
-	export let customColor = [];
-
-	/**
-	 * 是否开启懒动画
-	 * lazy animation
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let lazyAnimation = true;
-
-	/**
-	 * 速度系数，基础为1，数值越大，速度越快
-	 * speed coefficient, the basic is 1, the larger the number, the faster the speed
-	 * @type {number}
-	 * @default 1
-	 */
-	export let speed = 1;
+	/** @typedef {import('../../index.d').Loading} LoadingProps */
+	/** @type {LoadingProps} */
+	let {
+		type = '1_0',
+		height = '8',
+		width = '8',
+		theme = false,
+		inverse = false,
+		customColor = [],
+		lazyAnimation = true,
+		speed = $bindable(1),
+	} = $props();
 
 	// loading 元素
 	// loading element
-	let loadingDom = null;
+	let loadingDom = $state(null);
 
 	// 容器高度样式
 	// container height class

packages/stdf/components/loading/loadings/fourColor/4_0.svelte

@@ -1,7 +1,13 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
 <div
@@ -9,7 +15,7 @@
 	style={`border-color: ${customColor[0] || '#DA1414'} ${customColor[1] || '#11BB8D'} ${customColor[2] || '#7356BF'} ${
 		customColor[3] || '#FFC043'
 	};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
-/>
+></div>
 
 <style>
 	.loading {

packages/stdf/components/loading/loadings/fourColor/4_1.svelte

@@ -1,26 +1,32 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
 <div class={`${size} m-auto relative rotate-45`}>
 	<div
 		class="w-1/3 h-1/3 absolute left-0 top-0 shape1"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 top-0 shape2"
 		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3"
 		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4"
 		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/fourColor/4_2.svelte

@@ -1,26 +1,32 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape1"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape2"
 		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape3"
 		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape4"
 		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/fourColor/4_3.svelte

@@ -1,26 +1,32 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
 	<div
 		class="w-1/2 h-1/2 rounded-tl-full absolute shape1"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-tr-full absolute shape2"
 		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-br-full absolute shape3"
 		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-bl-full absolute shape4"
 		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_0.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_1.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -19,4 +25,4 @@
 	style={`border-color: ${customColor[0]};border-top-color:transparent;animation-duration: ${1 / speed}s;-webkit-animation-duration: ${
 		1 / speed
 	}s;`}
-/>
+></div>

packages/stdf/components/loading/loadings/oneColor/1_10.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			class={`${colorClass()} rounded-full w-2 h-2 loading`}
 			style="animation-delay: {i === 1 ? -0.3 : 0}s;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
-		/>
+		></div>
 	{/each}
 </div>
 

packages/stdf/components/loading/loadings/oneColor/1_11.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			class={`absolute -left-1/2 top-1/4${colorClass()} rounded-full w-4 h-4 opacity-60 loading`}
 			style="animation-delay: {-0.5 * i}s, {-0.5 * (i + 1)}s;top:calc(5);background: {customColor[0]};animation-duration: {2.5 /
 				speed}s;-webkit-animation-duration: {2.5 / speed}s;"
-		/>
+		></div>
 	{/each}
 </div>
 

packages/stdf/components/loading/loadings/oneColor/1_12.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,25 +26,25 @@
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 0.6 / speed : 0.6}s;-webkit-animation-duration: {speed >= 1
 			? 0.6 / speed
 			: 0.6}s;"
-	/>
+	></div>
 	<div
 		class={`absolute top-0 right-0${colorClass()} steps step1`}
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"
-	/>
+	></div>
 	<div
 		class={`absolute top-0 right-0${colorClass()} steps step2`}
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"
-	/>
+	></div>
 	<div
 		class={`absolute top-0 right-0${colorClass()} steps step3`}
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_13.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,12 +24,12 @@
 	<div
 		class={`absolute top-1/2 left-1/2 ${size} m-auto border-2 !border-r-transparent !border-l-transparent rounded-full${colorClass()} loading`}
 		style="border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class={`absolute top-1/2 left-1/2 w-1/2 h-1/2 m-auto border-2 !border-t-transparent !border-b-transparent rounded-full${colorClass()} loading`}
 		style="animation-direction: reverse;border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
 			speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_14.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const borderClass = () => {
 		if (inverse) {
@@ -25,11 +31,11 @@
 	<div
 		class={`absolute w-full h-full border-2 !border-r-transparent !border-l-transparent rounded-full${borderClass()} loading1`}
 		style="border-color: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-	/>
+	></div>
 	<div
 		class={`absolute left-1/4 top-1/4 w-1/2 h-1/2 rounded-full${colorClass()} loading2`}
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_15.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,23 +24,23 @@
 	<div
 		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading1`}
 		style={`left:0;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-	/>
+	></div>
 	<div
 		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading2`}
 		style={`left:25%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-	/>
+	></div>
 	<div
 		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading3`}
 		style={`left:50%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-	/>
+	></div>
 	<div
 		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading4`}
 		style={`left:75%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-	/>
+	></div>
 	<div
 		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading5`}
 		style={`left:100%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_16.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			class={`${colorClass()} rounded-full w-2 h-2 loading`}
 			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
-		/>
+		></div>
 	{/each}
 </div>
 

packages/stdf/components/loading/loadings/oneColor/1_17.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			class={`${colorClass()} rounded-full w-2 h-2 loading`}
 			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
-		/>
+		></div>
 	{/each}
 </div>
 

packages/stdf/components/loading/loadings/oneColor/1_18.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let theme = false;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,19 +24,19 @@
 	<div
 		class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_19.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let theme = false;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,19 +24,19 @@
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape1 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape2 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape3 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape4 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_2.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -23,4 +29,4 @@
 	style={`border-color:${customColor[0] + '0D'};border-left-color:${customColor[0] + 'FF'};animation-duration: ${
 		1 / speed
 	}s;-webkit-animation-duration: ${1 / speed}s;`}
-/>
+></div>

packages/stdf/components/loading/loadings/oneColor/1_20.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let theme = false;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -23,7 +29,7 @@
 	style={`border-color: ${customColor[0] + '0D'} ${customColor[0] + 'FF'} ${customColor[0] + '0D'} ${
 		customColor[0] + 'FF'
 	};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
-/>
+></div>
 
 <style>
 	.loading {

packages/stdf/components/loading/loadings/oneColor/1_21.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let theme = false;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,19 +24,19 @@
 	<div
 		class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-br-full absolute shape3 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {colorClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_22.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_23.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -25,7 +31,7 @@
 				class="h-1/5 rounded-full line{colorClass()}"
 				style="background: {customColor[0]};animation-delay: calc( {1 / speed}s / -12 * {i}); animation-duration: {1 /
 					speed}s;-webkit-animation-duration: {1 / speed}s;"
-			/>
+			></div>
 		</div>
 	{/each}
 </div>

packages/stdf/components/loading/loadings/oneColor/1_24.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_25.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_26.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_27.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_28.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_29.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_3.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -19,4 +25,4 @@
 	style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;;animation-duration: ${
 		1 / speed
 	}s;-webkit-animation-duration: ${1 / speed}s;`}
-/>
+></div>

packages/stdf/components/loading/loadings/oneColor/1_30.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_31.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_32.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,12 +24,12 @@
 	<div
 		class="line1 absolute w-1 h-1{colorClass()}"
 		style="background-color: {customColor[0]}; top: calc(50% - 2px); left: calc(50% - 2px); animation-duration: {4 / speed}s;"
-	/>
-	<div class="line2 absolute w-1 h-1{colorClass()}" style="background-color: {customColor[0]}; animation-duration: {4 / speed}s;" />
+	></div>
+	<div class="line2 absolute w-1 h-1{colorClass()}" style="background-color: {customColor[0]}; animation-duration: {4 / speed}s;"></div>
 	<div
 		class="line2 absolute w-1 h-1{colorClass()}"
 		style="background-color: {customColor[0]}; animation-duration: {4 / speed}s; animation-delay: calc({4 / speed}s * -0.5);"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_33.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_34.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_35.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_36.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_37.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_38.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_39.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_4.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -24,10 +30,10 @@
 		<div
 			class={`absolute${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
 			style="transform: rotate(225deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
-		/>
+		></div>
 		<div
 			class={`absolute bottom-0 right-0${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
 			style="transform: rotate(45deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
-		/>
+		></div>
 	</div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_40.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_41.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_42.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_43.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_44.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_45.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_46.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_47.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			<div
 				class="dot w-2 h-2 rounded-full{colorClass()}"
 				style="background-color: {customColor[0]};animation-duration: {1.3 / speed}s;animation-delay: {(1.3 / speed) * item}s"
-			/>
+			></div>
 		{/each}
 	</div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_48.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_49.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_5.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -17,7 +23,7 @@
 <div
 	class={`${size} m-auto rounded-full${colorClass()}`}
 	style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-/>
+></div>
 
 <style>
 	div {

packages/stdf/components/loading/loadings/oneColor/1_50.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_51.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_52.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_53.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_6.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,11 +24,11 @@
 	<div
 		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading1`}
 		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading2`}
 		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_7.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,11 +24,11 @@
 	<div
 		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading1`}
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-	/>
+	></div>
 	<div
 		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading2`}
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_8.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -18,9 +24,9 @@
 	class={`${size} m-auto flex justify-between items-center loading`}
 	style="animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_9.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let theme = false;
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [theme]
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const colorClass = () => {
 		if (inverse) {
@@ -20,7 +26,7 @@
 			class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading`}
 			style="animation-delay: {i - 2}s;background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
 				speed}s;"
-		/>
+		></div>
 	{/each}
 </div>
 

packages/stdf/components/loading/loadings/twoColor/2_0.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const outerBorderClass = () => {
 		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
@@ -21,5 +27,5 @@
 	<div
 		class={`w-full h-full border-2 rounded-full${innerColorClass()}`}
 		style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]}"
-	/>
+	></div>
 </div>

packages/stdf/components/loading/loadings/twoColor/2_1.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let inverse = false;
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [inverse]
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 */
+
+	/** @type {Props} */
+	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 
 	const outerBorderClass = () => {
 		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
@@ -19,5 +25,5 @@
 	style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]};animation-duration: {1 /
 		speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-	<div class={`w-full h-full border-2 rounded-full${outerBorderClass()}`} style="border-color:{customColor[0]};" />
+	<div class={`w-full h-full border-2 rounded-full${outerBorderClass()}`} style="border-color:{customColor[0]};"></div>
 </div>

packages/stdf/components/loading/loadings/twoColor/2_2.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const borderClass = () => {
 		return inverse
@@ -16,7 +22,7 @@
 	style={`border-color: ${customColor[0] || (inverse ? '' : '')} ${customColor[1] || (inverse ? '' : '')} ${
 		customColor[0] || (inverse ? '' : '')
 	} ${customColor[1] || (inverse ? '' : '')};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
-/>
+></div>
 
 <style>
 	.loading {

packages/stdf/components/loading/loadings/twoColor/2_3.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const bgClass = () => {
 		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
@@ -16,19 +22,19 @@
 	<div
 		class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/twoColor/2_4.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const bgClass = () => {
 		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
@@ -16,19 +22,19 @@
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape1 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape2 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape3 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/3 h-1/3 rounded-full absolute shape4 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/twoColor/2_5.svelte

@@ -1,8 +1,14 @@
 <script>
-	export let size = 'w-8 h-8';
-	export let customColor = [];
-	export let speed = 1;
-	export let inverse = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [size]
+	 * @property {any} [customColor]
+	 * @property {number} [speed]
+	 * @property {boolean} [inverse]
+	 */
+
+	/** @type {Props} */
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const bgClass = () => {
 		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
@@ -16,19 +22,19 @@
 	<div
 		class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-br-full absolute shape3 {bgClass()}"
 		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 	<div
 		class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {bgClass2()}"
 		style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-	/>
+	></div>
 </div>
 
 <style>

packages/stdf/components/mask/Mask.svelte

@@ -2,73 +2,20 @@
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 遮罩透明度
-	 * Mask opacity
-	 * @type {number}
-	 * @range 0 - 1
-	 * @default 0.5
-	 */
-	export let opacity = 0.5;
-
-	/**
-	 * 遮罩是否可点击穿透
-	 * Whether the mask can be clicked through
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let clickable = false;
-
-	/**
-	 * 是否反色
-	 * Whether to reverse color
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let inverse = false;
-
-	/**
-	 * 模糊度
-	 * Blur degree
-	 * @type {'none'|'sm'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl'}
-	 * @default 'none'
-	 */
-	export let backdropBlur = 'none';
-
-	/**
-	 * 出现动画过渡时长，单位毫秒
-	 * Transition duration of appearance animation, in milliseconds
-	 * @type {number}
-	 * @default 150
-	 */
-	export let duration = 150;
-
-	/**
-	 * 消失动画过渡时长，单位毫秒
-	 * Transition duration of disappearance animation, in milliseconds
-	 * @type {number}
-	 * @default 0
-	 */
-	export let outDuration = 0;
-
-	/**
-	 * z-index
-	 * @type {number}
-	 * @default 500
-	 */
-	export let zIndex = 500;
+	/** @typedef {import('../../index.d').Mask} MaskProps */
+	/** @type {MaskProps} */
+	let {
+		visible = false,
+		opacity = 0.5,
+		clickable = false,
+		inverse = false,
+		backdropBlur = 'none',
+		duration = 150,
+		outDuration = 0,
+		zIndex = 500,
+		children,
+		onclickMask,
+	} = $props();
 
 	//遮罩模糊度样式
 	// Mask blur style
@@ -118,22 +65,22 @@
 	// 点击遮罩派发事件
 	// Click mask to dispatch event
 	const clickMaskFunc = () => {
-		dispatch('clickMask');
+		onclickMask && onclickMask?.();
 	};
 </script>
 
 {#if visible}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		in:fade|global={{ duration }}
 		out:fade|global={{ duration: outDuration }}
-		on:click={clickMaskFunc}
+		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};`}
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}

packages/stdf/components/modal/Modal.svelte

@@ -1,106 +1,32 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
 	import Icon from '../icon/Icon.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const modalLang = currentLang.modal;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 标题
-	 * Title
-	 * @type {string}
-	 * @default Current language modal.title
-	 */
-	export let title = modalLang.title;
-
-	/**
-	 * 标题对齐方式
-	 * Title alignment
-	 * @type {'left'|'center'|'right'}
-	 * @default 'center'
-	 */
-	export let titleAlign = 'center';
-
-	/**
-	 * 内容
-	 * Content
-	 * @type {string}
-	 * @default Current language modal.content
-	 */
-	export let content = modalLang.content;
-
-	/**
-	 * 内容是否使用slot
-	 * Whether to use slot for content
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let contentSlot = false;
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let popup = {};
-
-	/**
-	 * 是否显示图标
-	 * Whether to show icon
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let showIcon = false;
-
-	/**
-	 * 图标参数
-	 * Icon parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let icon = {};
-
-	/**
-	 * 是否显示按钮
-	 * Whether to show button
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let showBtn = true;
-
-	/**
-	 * 按钮文字
-	 * Button text
-	 * @type {string}
-	 * @default Current language modal.btnText
-	 */
-	export let btnText = modalLang.btnText;
-
-	/**
-	 * 按钮参数
-	 * Button parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let button = {};
+	/** @typedef {import('../../index.d').Modal} ModalProps */
+	/** @type {ModalProps} */
+	let {
+		visible = $bindable(false),
+		title = modalLang.title,
+		titleAlign = 'center',
+		content = modalLang.content,
+		popup = {},
+		showIcon = false,
+		icon = {},
+		showBtn = true,
+		btnText = modalLang.btnText,
+		button = {},
+		contentChild,
+		onopen,
+		onclose,
+	} = $props();
 
 	// 标题对齐方式样式
 	// Title alignment style
@@ -110,18 +36,18 @@
 	// Close and dispatch events
 	const closeModalFunc = () => {
 		visible = false;
-		dispatch('close');
+		onclose && onclose();
 	};
 
 	// 监听visible变化并派发事件
 	// Listen to the change of visible and dispatch events
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup
@@ -144,15 +70,15 @@
 			</div>
 		{/if}
 		<div>
-			{#if contentSlot}
-				<slot />
+			{#if contentChild}
+				{@render contentChild()}
 			{:else}
 				{content}
 			{/if}
 		</div>
 		{#if showBtn}
 			<div>
-				<Button size="full" {...button} on:click={closeModalFunc}>{btnText}</Button>
+				<Button size="full" {...button} onclick={closeModalFunc}>{btnText}</Button>
 			</div>
 		{/if}
 	</div>

packages/stdf/components/navBar/NavBar.svelte

@@ -1,113 +1,32 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const navBarLang = currentLang.navBar;
-	const commonLang = currentLang.common;
-
-	/**
-	 * 标题
-	 * Title
-	 * @type {string}
-	 * @default Current language navBar.title
-	 */
-	export let title = navBarLang.title;
-
-	/**
-	 * 标题是否使用slot
-	 * Whether to use slot for title
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let titleSlot = false;
-
-	/**
-	 * 左侧图标
-	 * Left icon
-	 * @type {'back'|'customIcon'|'none'}
-	 * @default 'back'
-	 */
-	export let left = 'back';
-
-	/**
-	 * 左侧图标参数
-	 * Left icon parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let leftIcon = {};
-
-	/**
-	 * 左侧是否使用slot
-	 * Whether to use slot for left
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let leftSlot = false;
-
-	/**
-	 * 右侧 Icon 数组
-	 * Right Icon array
-	 * @type {object[]}
-	 * @default []
-	 */
-	export let rights = [];
 
-	/**
-	 * 右侧是否使用slot
-	 * Whether to use slot for right
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let rightSlot = false;
-
-	/**
-	 * 是否显示底部分割线
-	 * Whether to show bottom line
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let line = true;
-
-	/**
-	 * 注入CSS
-	 * Inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 是否开启关爱版
-	 * Whether to open love version
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let love = false;
+	/** @typedef {import('../../index.d').NavBar} NavBarProps */
+	/** @type {NavBarProps} */
+	let {
+		title = navBarLang.title,
+		left = 'back',
+		rights = [],
+		line = true,
+		injClass = '',
+		love = false,
+		onclickLeft,
+		onclickRight,
+		titleChild,
+		leftChild,
+		rightChild,
+	} = $props();
 
 	//图标大小
 	//Icon size
 	const iconSize = love ? 30 : 24;
-
-	//左侧图标点击事件
-	//Left icon click event
-	const clickLeftFun = () => {
-		dispatch('clickleft');
-	};
-
-	//右侧图标点击事件
-	//Right icon click event
-	const clickRightFun = i => {
-		dispatch('clickright', i);
-	};
 </script>
 
 <div
@@ -115,42 +34,38 @@
 		line ? 'border-b ' : ' '
 	}bg-white dark:bg-black/50${love ? ' text-xl' : ''}${injClass === '' ? '' : ' ' + injClass}`}
 >
-	{#if leftSlot}
-		<slot name="left">
-			{commonLang.slotEmpty}
-		</slot>
+	{#if leftChild}
+		{@render leftChild()}
 	{:else if left === 'back'}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={() => onclickLeft && onclickLeft()}>
 			<Icon name="ri-arrow-left-s-line" size={iconSize} top={-2} />
 		</div>
-	{:else if left === 'customIcon'}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
-			<Icon {...leftIcon} />
-		</div>
+	{:else if left === 'none'}
+		<div class="w-4 h-full"></div>
 	{:else}
-		<div class="w-4 h-full" />
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={() => onclickLeft && onclickLeft()}>
+			<Icon {...left} />
+		</div>
 	{/if}
 	<div class="flex-1 truncate" class:pl-2={left === 'none'}>
-		{#if titleSlot}
-			<slot name="title">
-				{commonLang.slotEmpty}
-			</slot>
+		{#if titleChild}
+			{@render titleChild()}
 		{:else}
 			{title}
 		{/if}
 	</div>
 	<div class="flex">
-		{#if rightSlot}
-			<slot name="right">{commonLang.slotEmpty}</slot>
+		{#if rightChild}
+			{@render rightChild()}
 		{:else if rights.length > 0}
 			{#each rights as icon, i}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="w-12 text-center active:opacity-80" on:click={() => clickRightFun(i)}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="w-12 text-center active:opacity-80" on:click={() => onclickRight && onclickRight(i)}>
 					<Icon {...icon} size={iconSize} />
 				</div>
 			{/each}

packages/stdf/components/noticeBar/NoticeBar.svelte

@@ -1,104 +1,34 @@
 <script>
-	import { onMount, createEventDispatcher, getContext } from 'svelte';
+	import { onMount } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	// 当前语言
-	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const commonLang = currentLang.common;
-
-	/**
-	 * 通告内容组成的数组
-	 * Array of notice content
-	 * @type {string[]}
-	 */
-	export let textList = [];
-
-	/**
-	 * 左侧内容
-	 * Left content
-	 * @type {'slot'|'none'|object}
-	 * @default { name: 'ri-volume-down-line', size: 20, top: -1 }
-	 */
-	export let leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 };
-
-	/**
-	 * 右侧内容
-	 * Right content
-	 * @type {'close'|'arrow'|'none'}
-	 * @default 'close'
-	 */
-	export let rightIcon = 'close';
-
-	/**
-	 * 通告字体大小
-	 * Notice font size
-	 * @type {'xs'|'sm'|'base'|'lg'}
-	 * @default 'sm'
-	 */
-	export let fontSize = 'sm';
-
-	/**
-	 * 通告间距，单位是 px
-	 * Notice spacing, unit is px
-	 * @type {number}
-	 * @default 100
-	 */
-	export let space = 100;
-
-	/**
-	 * 横向滚动速度，单位是 px/s
-	 * Horizontal scroll speed, unit is px/s
-	 * @type {number}
-	 * @default 30
-	 */
-	export let speed = 30;
-
-	/**
-	 * 是否垂直滚动
-	 * Whether to scroll vertically
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let vertical = false;
-
-	/**
-	 * 垂直滚动过渡时间，单位是 ms
-	 * Vertical scroll transition time, unit is ms
-	 * @type {100|300|500|700|1000}
-	 * @default 500
-	 */
-	export let duration = 500;
-
-	/**
-	 * 垂直滚动间隔时间，单位是 s
-	 * Vertical scroll interval time，unit is s
-	 * @type {number}
-	 * @default 4
-	 */
-	export let interval = 4;
-
-	/**
-	 * 注入 CSS 名称
-	 * Inject CSS name
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	//如果 textList 不是数组给出中英文报错
+	/** @typedef {import('../../index.d').NoticeBar} NoticeBarProps */
+	/** @type {NoticeBarProps} */
+	let {
+		textList = [],
+		leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 },
+		rightIcon = 'close',
+		fontSize = 'sm',
+		space = 100,
+		speed = 30,
+		vertical = false,
+		duration = 500,
+		interval = 4,
+		injClass = '',
+		leftChild,
+		onclickRight,
+	} = $props();
+
+	// 如果 textList 不是数组给出中英文报错
+	// If textList is not an array, give Chinese and English error
 	if (!Array.isArray(textList)) {
 		console.error('[STDF NoticeBar error]textList 必须是数组。(textList must be an array.)');
 	}
 
-	//如果 textList 为空数组给出中英文报错
+	// 如果 textList 为空数组给出中英文报错
+	// If textList is an empty array, give Chinese and English error
 	if (textList.length === 0) {
-		console.error('[STDF NoticeBar error]textList 不能为空数组。(textList must not be empty.)');
+		console.error('[STDF NoticeBar error]textList must not be empty.');
 	}
 
 	// 字体大小样式
@@ -115,12 +45,12 @@
 		'1000': ' duration-1000',
 	};
 
-	let left = speed;
-	let boxDom = null;
-	let outBoxDom = null;
+	let left = $state(speed);
+	let boxDom = $state(null);
+	let outBoxDom = $state(null);
 	let boxWidth = 0;
-	let outBoxWidth = 0;
-	let outBoxHeight = 0;
+	let outBoxWidth = $state(0);
+	let outBoxHeight = $state(0);
 	let requestAnimationFrameFlag = null;
 	let startTime = 0;
 	let fps = 0;
@@ -128,9 +58,9 @@
 	//垂直滚动时的处理
 	//Processing when scrolling vertically
 	let times = null;
-	let currentIndex = 0;
+	let currentIndex = $state(0);
 	let textListVertical = [...textList, textList[0]];
-	let isTransition = true;
+	let isTransition = $state(true);
 	const stepFun = time => {
 		fps = time - startTime;
 		startTime = time;
@@ -140,7 +70,7 @@
 			left = 0;
 		}
 	};
-	let newTextList = [...textList, ...textList];
+	let newTextList = $state([...textList, ...textList]);
 	onMount(() => {
 		if (!vertical) {
 			boxWidth = boxDom.getBoundingClientRect().width;
@@ -176,8 +106,8 @@
 			}
 		};
 	});
-	let isShow = true;
-	let isShowClose = true;
+	let isShow = $state(true);
+	let isShowClose = $state(true);
 	const clickFun = () => {
 		if (rightIcon === 'close') {
 			isShow = false;
@@ -185,7 +115,7 @@
 				isShowClose = false;
 			}, 200);
 		}
-		dispatch('clickright');
+		onclickRight && onclickRight();
 	};
 </script>
 
@@ -193,14 +123,12 @@
 	<div
 		class={`flex justify-between bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark${
 			fontSizeClass[fontSize] || fontSizeClass['sm']
-		} p-2${rightIcon === 'none' ? ' pr-2' : ' pr-0'} transition-all duration-300${isShow ? '' : ' scale-0'}${
-			injClass === '' ? '' : ` ${injClass}`
-		}`}
+		} p-2${!rightIcon ? ' pr-2' : ' pr-0'} transition-all duration-300${isShow ? '' : ' scale-0'}${injClass === '' ? '' : ` ${injClass}`}`}
 	>
-		<div class={`${leftIcon === 'none' ? '' : 'mr-1'}`}>
-			{#if leftIcon === 'slot'}
-				<slot>{commonLang.slotEmpty}</slot>
-			{:else if leftIcon === 'none'}
+		<div class={`${!leftIcon ? '' : 'mr-1'}`}>
+			{#if leftChild}
+				{@render leftChild()}
+			{:else if !leftIcon}
 				<!--none-->
 			{:else}
 				<Icon {...leftIcon} />
@@ -230,9 +158,9 @@
 				</div>
 			</div>
 		{/if}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class={`${rightIcon === 'none' ? '' : 'pl-2 pr-4'}`} on:click={clickFun}>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class={`${!rightIcon ? '' : 'pl-2 pr-4'}`} onclick={clickFun}>
 			{#if rightIcon === 'close'}
 				<Icon name="ri-close-line" size={20} top={-1} />
 			{:else if rightIcon === 'arrow'}

packages/stdf/components/numKeyboard/NumKeyboard.svelte

@@ -1,145 +1,37 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Icon from '../icon/Icon.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const commonLang = currentLang.common;
 
-	/**
-	 * 键盘样式类型，按钮式或块式
-	 * Keyboard style type, button or block
-	 * @type {'button'|'block'}
-	 * @default 'button'
-	 */
-	export let type = 'button';
-
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let visible = true;
-
-	/**
-	 * 每一个按键的高度
-	 * Height of each key
-	 * @type {'8'|'10'|'12'|'14'|'16'|'20'}
-	 * @default '12'
-	 */
-	export let height = '12';
-
-	/**
-	 * 间距
-	 * the spacing
-	 * @type {'0'|'1'|'2'|'3'|'4'}
-	 * @default '2'
-	 */
-	export let gap = '2';
-
-	/**
-	 * 键盘内边距
-	 * Keyboard padding
-	 * @type {'0'|'1'|'2'|'3'|'4'}
-	 * @default '2'
-	 */
-	export let p = '2';
-
-	/**
-	 * 数字键盘上下反向
-	 * Number keyboard up and down reverse
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let reverse = false;
-
-	/**
-	 * 是否显示完成按钮
-	 * Whether to show the done button
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let done = true;
-
-	/**
-	 * 显示小数点
-	 * Show decimal point
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let dot = true;
-
-	/**
-	 * 显示关闭按钮
-	 * Show close button
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let close = false;
-
-	/**
-	 * 完成按钮文本
-	 * Done button text
-	 * @type {string}
-	 * @default Current language numKeyboard.done
-	 */
-	export let doneText = commonLang.done;
-
-	/**
-	 * 完成按钮是否禁用
-	 * Whether the done button is disabled
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let doneDisabled = false;
-
-	/**
-	 * 按钮圆角
-	 * Button rounded corners
-	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl'|'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'base';
-
-	/**
-	 * 键盘面板注入 class
-	 * Keyboard panel injection class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let panelClass = '';
-
-	/**
-	 * 按键注入 class
-	 * Key injection class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let keyClass = '';
-
-	/**
-	 * 完成按键注入 class
-	 * Done key injection class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let doneClass = '';
-
-	/**
-	 * popup 参数
-	 * popup parameter
-	 * @type {object}
-	 * @default {}
-	 */
-	export let popup = {};
+	/** @typedef {import('../../index.d').NumKeyboard} NumKeyboardProps */
+	/** @type {NumKeyboardProps} */
+	let {
+		type = 'button',
+		visible = $bindable(true),
+		height = '12',
+		space = '2',
+		p = '2',
+		reverse = false,
+		done = true,
+		dot = true,
+		close = false,
+		doneText = commonLang.done,
+		doneDisabled = false,
+		radius = 'base',
+		panelClass = '',
+		keyClass = '',
+		doneClass = '',
+		popup = {},
+		onclick,
+		onopen,
+		onclose,
+	} = $props();
 
 	// 高度 class
 	// Height class
@@ -174,7 +66,7 @@
 	// Calculate the keyboard height based on p, gap, height
 	const keyboardHeight = () => {
 		const pNum = parseInt(p);
-		const gapNum = type === 'button' ? parseInt(gap) : 0;
+		const gapNum = type === 'button' ? parseInt(space) : 0;
 		const heightNum = parseInt(height);
 		return (pNum * 2 + gapNum * 3 + heightNum * 4) * 4 + (type === 'block' ? 4 : 0);
 	};
@@ -239,18 +131,18 @@
 		}
 		// 派发事件，传递出两个参数，输入的数字字符串和本次点击的类型
 		// Dispatch events, pass out two parameters, the input number string and the type of this click
-		dispatch('click', { numStr, key: keyStr });
+		onclick && onclick(numStr, keyStr);
 	};
 
 	// 激活与关闭键盘事件
 	// Activate and close the keyboard event
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open', { keyboardHeight: keyboardHeight() });
+			onopen?.(keyboardHeight());
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 </script>
 
 <Popup bind:visible size={0} mask={{ opacity: 0 }} transitionDistance={keyboardHeight()} {...popup}>
@@ -258,66 +150,66 @@
 		class="bg-gray-100 dark:bg-gray-950 text-center {type === 'block' ? 'border-t border-gray-100 dark:border-gray-950' : ''} {pClass[p] ||
 			'p-2'}{panelClass ? ' ' + panelClass : ''}"
 	>
-		<div class="grid {type === 'button' ? gapClass[gap] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">
+		<div class="grid {type === 'button' ? gapClass[space] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">
 			{#each reverse ? [7, 8, 9] : [1, 2, 3] as item}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc(item)} on:click={() => clickFunc(item)}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
 					{item}
 				</div>
 			{/each}
 			{#if done}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc('delete')} on:click={() => clickFunc('delete')}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
 					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
 				</div>
 			{/if}
 			{#each [4, 5, 6] as item}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc(item)} on:click={() => clickFunc(item)}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
 					{item}
 				</div>
 			{/each}
 			{#if done}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
 					class="{baseClassFunc('done')} h-full row-span-3 bg-primary dark:bg-dark text-white dark:text-black {doneDisabled
 						? 'active:!scale-100 transition-none !opacity-50'
 						: ''}{doneClass ? '' + doneClass : ''}"
-					on:click={() => clickFunc('done')}
+					onclick={() => clickFunc('done')}
 				>
 					{doneText}
 				</div>
 			{/if}
 			{#each reverse ? [1, 2, 3] : [7, 8, 9] as item}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc(item)} on:click={() => clickFunc(item)}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
 					{item}
 				</div>
 			{/each}
 			{#if dot}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc('.')} on:click={() => clickFunc('.')}>.</div>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc('.')} onclick={() => clickFunc('.')}>.</div>
 			{/if}
 			{#if done ? close : !dot && close}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc('close')} on:click={() => clickFunc('close')}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc('close')} onclick={() => clickFunc('close')}>
 					<Icon name="ri-skip-down-line" size={Number(height) * 2} />
 				</div>
 			{/if}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class={baseClassFunc('0') + ' ' + zeroColFunc()} on:click={() => clickFunc('0')}>0</div>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class={baseClassFunc('0') + ' ' + zeroColFunc()} onclick={() => clickFunc('0')}>0</div>
 			{#if !done}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class={baseClassFunc('delete')} on:click={() => clickFunc('delete')}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
 					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
 				</div>
 			{/if}

packages/stdf/components/pagination/Page.svelte

@@ -1,9 +1,15 @@
 <script>
-	export let active = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [active]
+	 * @property {string} [radius]
+	 * @property {string} [type]
+	 * @property {import('svelte').Snippet} [children]
+	 * @property {() => void} [onclick]
+	 */
 
-	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-	export let type = 'border'; // 'border'/'block'/'bold'
+	/** @type {Props} */
+	let { active = false, radius = 'md', type = 'border', children, onclick } = $props();
 
 	const typeClass = {
 		border: 'border-primary dark:border-dark text-primary dark:text-dark',
@@ -14,13 +20,13 @@
 	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	on:click
+	{onclick}
 	class="flex-1 py-2 border cursor-pointer {active
 		? typeClass[type] || typeClass.border
 		: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
 >
-	<slot />
+	{@render children?.()}
 </div>

packages/stdf/components/pagination/Pagination.svelte

@@ -1,152 +1,65 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import Page from './Page.svelte';
 	import SecondPageNext from './SecondPageNext.svelte';
 	import SecondPagePre from './SecondPagePre.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const commonLang = currentLang.common;
 	const paginationLang = currentLang.pagination;
 
-	/**
-	 * 总条数
-	 * total
-	 * @type {number}
-	 * @default 0
-	 */
-	export let total = 0;
-
-	/**
-	 * 每页条数
-	 * pageSize
-	 * @type {number}
-	 * @default 10
-	 */
-	export let pageSize = 10;
-
-	/**
-	 * 当前页
-	 * current
-	 * @type {number}
-	 * @default 1
-	 */
-	export let current = 1;
-
-	/**
-	 * 最大显示页码数
-	 * max show page
-	 * @type {5|7|9|11}
-	 * @default 7
-	 */
-	export let maxShowPage = 7;
-
-	/**
-	 * 圆角
-	 * radius
-	 * @type {'base'|'md'|'lg'|'xl'|'full'|'none'}
-	 * @default 'md'
-	 */
-	export let radius = 'md';
-
-	/**
-	 * 高亮页码类型
-	 * highlight page type
-	 * @type {'border'|'block'|'bold'}
-	 * @default 'bold'
-	 */
-	export let type = 'bold';
-
-	/**
-	 * 省略页码列数
-	 * second level page column
-	 * @type {number}
-	 * @default 3
-	 */
-	export let pageCol = 3;
-
-	/**
-	 * 是否显示后省略号的省略页码
-	 * show second level page in next ellipsis
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let showNextOmitPage = false;
-
-	/**
-	 * 是否显示前省略号的省略页码
-	 * show second level page in pre ellipsis
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let showPreOmitPage = false;
-
-	/**
-	 * 注入CSS
-	 * Inject CSS
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 无数据文本
-	 * No data text
-	 * @type {string}
-	 * @default Current language common.noData
-	 */
-	export let noDataText = commonLang.noData;
-
-	/**
-	 * 仅一页文本
-	 * only one page text
-	 * @type {string}
-	 * @default Current language pagination.defaultOnlyOnePage
-	 */
-	export let onePageText = paginationLang.defaultOnlyOnePage;
-
-	/**
-	 * 连续模式
-	 * continuous mode
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let continuous = false;
+	/** @typedef {import('../../index.d').Pagination} PaginationProps */
+	/** @type {PaginationProps} */
+	let {
+		total = 0,
+		pageSize = 10,
+		current = $bindable(1),
+		maxShowPage = 7,
+		radius = 'md',
+		type = 'bold',
+		pageCol = 3,
+		showNextOmitPage = $bindable(false),
+		showPreOmitPage = $bindable(false),
+		injClass = '',
+		noDataText = commonLang.noData,
+		onePageText = paginationLang.defaultOnlyOnePage,
+		continuous = false,
+		onchange,
+		onnext,
+		onpre,
+	} = $props();
 
 	// 总页数
 	// totalPage
-	$: totalPage = Math.ceil(total / pageSize);
+	let totalPage = $derived(Math.ceil(total / pageSize));
 
 	// 当前页码大于等于 maxShowPage-3 时，不显示前面的省略号
 	// current >= maxShowPage-3, not show pre ellipsis
-	$: showPreEllipsis = current > maxShowPage - 2;
+	let showPreEllipsis = $derived(current > maxShowPage - 2);
 
 	// 当前页码小于等于 totalPage - (maxShowPage-3) 时，不显示后面的省略号
 	// current <= totalPage - (maxShowPage-3), not show next ellipsis
-	$: showNextEllipsis = current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3);
+	let showNextEllipsis = $derived(current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3));
 
 	// 当显示前面的省略号时，中间显示的页码数 middleShowPage 个数为 maxShowPage - 4，内容为当前页码（maxShowPage为5）或者当前页码和前后一项（maxShowPage为7）或者当前页码和前后两项（maxShowPage为9）
 	// when show pre ellipsis, middleShowPage length is maxShowPage - 4, content is current page (maxShowPage is 5) or current page and pre/next one (maxShowPage is 7) or current page and pre/next two (maxShowPage is 9)
-	let middleShowPage = [];
+	let middleShowPage = $state([]);
 
 	// 前省略号内页码数组
 	// pre ellipsis page array
-	let preEllipsisPages = [];
+	let preEllipsisPages = $state([]);
 
 	// 后省略号内页码数组
 	// next ellipsis page array
-	let nextEllipsisPages = [];
+	let nextEllipsisPages = $state([]);
 
 	// 当页码变化时对一系列数据动态计算
 	// Dynamic calculation of a series of data when the page number changes
-	$: {
+	$effect(() => {
 		if (showPreEllipsis && showNextEllipsis) {
 			if (maxShowPage === 5) {
 				middleShowPage = [current];
@@ -187,13 +100,15 @@
 			// preEllipsisPages is 2 to middleShowPage first item -1
 			preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, middleShowPage[0] - 1);
 		}
-	}
+	});
 
 	// 特殊情况处理
 	// Special case handling
-	if (totalPage <= maxShowPage) {
-		showNextOmitPage = false;
-	}
+	$effect(() => {
+		if (totalPage <= maxShowPage) {
+			showNextOmitPage = false;
+		}
+	});
 
 	// 点击后省略号事件
 	// click next ellipsis event
@@ -216,7 +131,7 @@
 	const onChange = () => {
 		showNextOmitPage = false;
 		showPreOmitPage = false;
-		dispatch('change', current);
+		onchange && onchange(current);
 	};
 
 	// 点击下一页
@@ -224,7 +139,7 @@
 	const nextFunc = () => {
 		if (current < totalPage) {
 			current++;
-			dispatch('next', current);
+			onnext && onnext(current);
 			onChange();
 		}
 	};
@@ -234,7 +149,7 @@
 	const preFunc = () => {
 		if (current > 1) {
 			current--;
-			dispatch('pre', current);
+			onpre && onpre(current);
 			onChange();
 		}
 	};
@@ -269,13 +184,13 @@
 </script>
 
 <div class="py-1 bg-white dark:bg-black flex justify-between text-center text-sm relative {injClass}">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="flex-1 py-2 border border-transparent transition-all {current > 1
 			? 'text-primary dark:text-dark'
 			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
-		on:click={preFunc}
+		onclick={preFunc}
 	>
 		<Icon name="ri-arrow-left-s-line" size={18} />
 	</div>
@@ -286,20 +201,20 @@
 	{:else if totalPage > 1 && totalPage <= maxShowPage}
 		<!-- eslint-disable-next-line no-unused-vars -->
 		{#each new Array(totalPage) as item, index}
-			<Page active={current === index + 1} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 1)}>
+			<Page active={current === index + 1} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 1)}>
 				{index + 1}
 			</Page>
 		{/each}
 	{:else}
-		<Page active={current === 1} {type} {radius} on:click={() => !continuous && clickItemFunc(1)}>1</Page>
+		<Page active={current === 1} {type} {radius} onclick={() => !continuous && clickItemFunc(1)}>1</Page>
 		{#if showPreEllipsis}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="flex-1 py-2 border {showPreOmitPage
 					? typeClass[type] || typeClass.border
 					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
-				on:click={!continuous && clickPreEllipsisFunc}
+				onclick={!continuous && clickPreEllipsisFunc}
 			>
 				{#if type === 'bold' && showPreOmitPage}
 					<Icon name="ri-more-fill" size={18} />
@@ -311,14 +226,14 @@
 		{#if !showPreEllipsis && current <= maxShowPage - 1}
 			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each new Array(maxShowPage - 3) as item, index}
-				<Page active={current === index + 2} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 2)}>
+				<Page active={current === index + 2} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 2)}>
 					{index + 2}
 				</Page>
 			{/each}
 		{/if}
 		{#if middleShowPage.length > 0}
 			{#each middleShowPage as item, index}
-				<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} on:click={() => !continuous && clickItemFunc(item)}>
+				<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} onclick={() => !continuous && clickItemFunc(item)}>
 					{item}
 				</Page>
 			{/each}
@@ -330,20 +245,20 @@
 					active={current === totalPage + index + 3 - maxShowPage}
 					{type}
 					{radius}
-					on:click={() => !continuous && clickItemFunc(totalPage + index + 3 - maxShowPage)}
+					onclick={() => !continuous && clickItemFunc(totalPage + index + 3 - maxShowPage)}
 				>
 					{totalPage + index + 3 - maxShowPage}
 				</Page>
 			{/each}
 		{/if}
 		{#if showNextEllipsis}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="flex-1 py-2 border {showNextOmitPage
 					? typeClass[type] || typeClass.border
 					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
-				on:click={!continuous && clickNextEllipsisFunc}
+				onclick={!continuous && clickNextEllipsisFunc}
 			>
 				{#if type === 'bold' && showNextOmitPage}
 					<Icon name="ri-more-fill" size={18} />
@@ -352,22 +267,22 @@
 				{/if}
 			</div>
 		{/if}
-		<Page active={current === totalPage} {type} {radius} on:click={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
+		<Page active={current === totalPage} {type} {radius} onclick={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
 	{/if}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="flex-1 py-2 border border-transparent transition-all {current < totalPage
 			? 'text-primary dark:text-dark'
 			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
-		on:click={nextFunc}
+		onclick={nextFunc}
 	>
 		<Icon name="ri-arrow-right-s-line" size={20} />
 	</div>
 	{#if showNextOmitPage}
-		<SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
+		<SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} onclickItem={clickSecondPageItemFunc} {maxShowPage} />
 	{/if}
 	{#if showPreOmitPage}
-		<SecondPagePre {pageCol} Pages={preEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
+		<SecondPagePre {pageCol} Pages={preEllipsisPages} {type} {radius} onclickItem={clickSecondPageItemFunc} {maxShowPage} />
 	{/if}
 </div>

packages/stdf/components/pagination/SecondPageNext.svelte

@@ -1,25 +1,23 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import Page from './Page.svelte';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [pageCol]
+	 * @property {any} [Pages]
+	 * @property {number} [maxShowPage]
+	 * @property {string} [radius]
+	 * @property {string} [type]
+	 * @property {(index: number) => void} [onclickItem]
+	 */
 
-	export let pageCol = 3;
-
-	export let Pages = [];
-
-	export let maxShowPage = 9;
-
-	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-	export let type = 'bold'; // 'border'/'block'/'bold'
+	/** @type {Props} */
+	let { pageCol = 3, Pages = [], maxShowPage = 9, radius = 'md', type = 'bold', onclickItem } = $props();
 
 	// 点击页码
 	// click page
 	const clickItemFunc = index => {
-		dispatch('clickItem', index);
+		onclickItem && onclickItem(index);
 	};
 </script>
 
@@ -30,13 +28,13 @@
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
 		{#each Pages as item}
-			<Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+			<Page onclick={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>
 	<div
 		class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent translate-x-1/2 border-t-white dark:border-t-black"
 		style="right:{(2.5 / (maxShowPage + 2)) * 100}%;"
-	/>
+	></div>
 {/if}
 
 <style>

packages/stdf/components/pagination/SecondPagePre.svelte

@@ -1,25 +1,23 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import Page from './Page.svelte';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [pageCol]
+	 * @property {any} [Pages]
+	 * @property {number} [maxShowPage]
+	 * @property {string} [radius]
+	 * @property {string} [type]
+	 * @property {(index: number) => void} [onclickItem]
+	 */
 
-	export let pageCol = 3;
-
-	export let Pages = [];
-
-	export let maxShowPage = 7;
-
-	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-	export let type = 'bold'; // 'border'/'block'/'bold'
+	/** @type {Props} */
+	let { pageCol = 3, Pages = [], maxShowPage = 7, radius = 'md', type = 'bold', onclickItem } = $props();
 
 	// 点击页码
 	// click page
 	const clickItemFunc = index => {
-		dispatch('clickItem', index);
+		onclickItem && onclickItem(index);
 	};
 </script>
 
@@ -30,13 +28,13 @@
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
 		{#each Pages as item}
-			<Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+			<Page onclick={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>
 	<div
 		class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent -translate-x-1/2 border-t-white dark:border-t-black"
 		style="left:{(2.5 / (maxShowPage + 2)) * 100}%;"
-	/>
+	></div>
 {/if}
 
 <style>

packages/stdf/components/picker/Picker.svelte

@@ -1,161 +1,55 @@
 <script>
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
 	import zh_CN from '../../lang/zh_CN';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
 	// 当前语言
 	// current language
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const pickerLang = currentLang.picker;
 
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let visible = false;
-
-	/**
-	 * @typedef {Object} datasObj - 每一列的数据
-	 * @property {Array} data - 每一列的数据
-	 * @property {'left'|'center'|'right'} [align] - 对齐方式
-	 * @property {3|5|7} [showRow] - 每列显示行数
-	 * @property {Number} [initIndex] - 初始选中项
-	 * @property {Boolean} [useAnimation] - 是否使用动画
-	 * @property {String} [labelKey] - 显示文本的 key
-	 * @property {Number} [flex] - 每列的宽度
-	 * @property {Number} [lastSelectedIndex] - 上次选中项
-	 */
-
-	/**
-	 * @typedef {Object} isLinkageObject - 对象类型的定义，必须包含两个属性，第一个属性的值为字符，第二个属性的值为数组
-	 * @property {String} [label] - 显示文本
-	 * @property {Array} [children] - 下级数据
-	 * @property {Number} [initIndex] - 初始选中项
-	 * @property {Array} [data] - 每一列的数据
-	 * @property {3|5|7} [showRow] - 每列显示行数
-	 * @property {String} [labelKey] - 显示文本的 key
-	 * @property {Boolean} [useAnimation] - 是否使用动画
-	 * @property {'left'|'center'|'right'} [align] - 对齐方式
-	 * @property {Number} [flex] - 每列的宽度
-	 */
-
-	/**
-	 * 所有列数据
-	 * All column data
-	 * @type {Array<datasObj>|Array<isLinkageObject>}
-	 * @default []
-	 */
-	export let datas = [];
-
-	/**
-	 * 是否自动滚动到上次的选中项
-	 * Whether to automatically scroll to the last selected item
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let autoScrollToLast = true;
-
-	/**
-	 * 取消选项文本
-	 * Cancel option text
-	 * @type {string}
-	 * @default Current language picker.cancelText
-	 */
-	export let cancelText = pickerLang.defaultCancel;
-
-	/**
-	 * 确定选项文本
-	 * Confirm option text
-	 * @type {string}
-	 * @default Current language picker.confirmText
-	 */
-	export let confirmText = pickerLang.defaultConfirm;
-
-	/**
-	 * 中间选项文本
-	 * Middle option text
-	 * @type {string}
-	 * @default Current language picker.defaultTitle
-	 */
-	export let title = pickerLang.defaultTitle;
-
-	/**
-	 * 是否多级联动
-	 * Whether multi-level linkage
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let isLinkage = false;
-
-	/**
-	 * 如果是多级联动，可以通过传入的 linkageInitIndexs 来设置初始选中项
-	 * If it is multi-level linkage, you can set the initial selected item by passing in linkageInitIndexs
-	 * @type {Array<Number>}
-	 * @default []
-	 */
-	export let linkageInitIndexs = [];
-
-	/**
-	 * 如果是多级联动，可以通过传入的 linkageShowRows 来设置每列显示行数
-	 * If it is multi-level linkage, you can set the number of rows displayed in each column by passing in linkageShowRows
-	 * @type {Array<3|5|7>}
-	 * @default []
-	 */
-	export let linkageShowRows = [];
-
-	/**
-	 * 如果是多级联动，可以通过传入的 linkageFlexs 来设置每列的宽度
-	 * If it is multi-level linkage, you can set the width of each column by passing in linkageFlexs
-	 * @type {Array<Number>}
-	 * @default []
-	 */
-	export let linkageFlexs = [];
-
-	/**
-	 * 如果是多级联动，可以通过传入的 linkageLabelKeys 来设置每列的 labelKey
-	 * If it is multi-level linkage, you can set the labelKey of each column by passing in linkageLabelKeys
-	 * @type {Array<String>}
-	 * @default []
-	 */
-	export let linkageLabelKeys = [];
-
-	/**
-	 * 如果是多级联动，可以通过传入的 linkageAligns 来设置每列的对齐方式
-	 * If it is multi-level linkage, you can set the alignment of each column by passing in linkageAligns
-	 * @type {Array<'left'|'center'|'right'>}
-	 * @default []
-	 */
-	export let linkageAligns = [];
-
-	/**
-	 * 如果是多级联动，可以通过传入上下级 children 的 key 来设置
-	 * If it is multi-level linkage, you can set the key of the children of the upper and lower levels by passing it in
-	 * @type {string}
-	 * @default 'children'
-	 */
-	export let linkageChildrenKey = 'children';
-
-	/**
-	 * 弹出层参数
-	 * Popup parameters
-	 * @type {Object}
-	 * @default {}
-	 */
-	export let popup = {};
-
-	/**
-	 * 内部使用的 datas
-	 * Datas used internally
-	 * @type {Array<datasObj>|Array<isLinkageObject>}
-	 */
-	let newDatas = datas;
+	/** @typedef {import('../../index.d').Picker} PickerProps */
+	/** @typedef {import('../../index.d').PickerDatas} PickerDatas */
+	/** @type {PickerProps} */
+	let {
+		visible = $bindable(false),
+		datas = [],
+		autoScrollToLast = true,
+		cancelText = pickerLang.defaultCancel,
+		confirmText = pickerLang.defaultConfirm,
+		title = pickerLang.defaultTitle,
+		isLinkage = false,
+		linkageInitIndexs = [],
+		linkageShowRows = [],
+		linkageFlexs = [],
+		linkageLabelKeys = [],
+		linkageAligns = [],
+		linkageChildrenKey = 'children',
+		popup = {},
+		onopen,
+		onclose,
+		onconfirm,
+		oncancel,
+	} = $props();
+
+	// 内部使用的 datas
+	// Datas used internally
+	/** @typedef {{
+		data: PickerDatas[];
+		initIndex?: number;
+		showRow?: number;
+		lastSelectedIndex?: number;
+		flex?: number;
+		align?: string;
+		labelKey?: string;
+		useAnimation?: boolean;
+	}} PickerColumn */
+	/** @type {PickerColumn[]} */
+	let newDatas = $state([]);
+	$effect(() => {
+		newDatas = datas;
+	});
 
 	// 如果是多级联动，对 newDatas 进行处理，使其结构符合 ScrollRadio 组件的结构
 	// If it is multi-level linkage, process newDatas to make its structure conform to the structure of the ScrollRadio component
@@ -172,7 +66,7 @@
 				}
 			}
 		};
-		newDatasFormatFunc(newDatas, 0);
+		newDatasFormatFunc(datas, 0);
 		newDatas = newLinkageData;
 	}
 	// 对 datas 处理，如果没有设置 initIndex 则默认为 0，如果没有设置 showRow 则默认为 5
@@ -220,7 +114,7 @@
 
 	// 上次所有选中项，由上次单列选中项组成的数组，初始值为 datas 中每项的 initIndex
 	// All last selected items, an array of last single column selected items, the initial value is the initIndex of each item in datas
-	let lastSelectedIndexs = newDatas.map(item => item.initIndex);
+	let lastSelectedIndexs = $state(newDatas.map(item => item.initIndex));
 
 	// 循环 newDatas，将 每项的 showRow 组成一个数组 showRowsArr
 	// Loop newDatas to form an array showRowsArr of each item's showRow
@@ -257,7 +151,7 @@
 	// Click cancel button
 	const clickCancelFunc = () => {
 		visible = false;
-		dispatch('cancel');
+		oncancel && oncancel();
 	};
 
 	// 点击确定按钮
@@ -278,18 +172,18 @@
 			// Loop datas and scrollEndIndexs to form a new array of values corresponding to data in datas according to scrollEndIndexs
 			items = datas.map((item, index) => item.data[scrollEndIndexs[index]]);
 		}
-		dispatch('confirm', { items, indexs: lastSelectedIndexs });
+		onconfirm && onconfirm(items, lastSelectedIndexs);
 	};
 
 	// 监听 visible 的变化，触发 show 或 close 事件
 	// Listen to the change of visible, trigger the show or close event
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 
 	// 滚动结束
 	// Scroll end
@@ -349,39 +243,6 @@
 					}
 				}
 			};
-
-			// 递归计算后面的所有列数据
-			// Recursively calculate the data of all columns behind
-			// const recursionFunc = (col, currentLevelData) => {
-			//     const nextCol = col + 1;
-			//     if (nextCol < newDatas.length) {
-			//         const nextLevelData =
-			//             currentLevelData.length === 1
-			//                 ? currentLevelData[0]
-			//                     ? currentLevelData[0][linkageChildrenKey]
-			//                     : []
-			//                 : currentLevelData[index]
-			//                 ? currentLevelData[index][linkageChildrenKey]
-			//                 : [];
-			//         if (nextLevelData.length > 0) {
-			//             const nextData = nextLevelData.map(item =>
-			//                 linkageLabelKeys[col + 1] ? { label: item[linkageLabelKeys[col + 1]] } : { label: item.label }
-			//             );
-			//             // 将数据置空，此列数据为空，此列将立即消失，然后通过 setTimeout 立即设置数据，此列数据不为空，此列将立即出现，由此保证下级数据从0开始
-			//             // Set the data to empty, the data of this column is empty, this column will disappear immediately, and then set the data immediately through setTimeout, the data of this column is not empty, this column will appear immediately, thus ensuring that the next level data starts from 0
-			//             newDatas[nextCol].data = [];
-			//             setTimeout(() => {
-			//                 newDatas[nextCol].data = nextData;
-			//                 newDatas[nextCol].initIndex = 0;
-			//             });
-			//         }
-			//         allLevelData[col] = currentLevelData;
-			//         allLevelData[nextCol] = nextLevelData;
-			//         recursionFunc(nextCol, nextLevelData);
-			//     }
-			//     // 使用尾递归优化 recursionFunc , 使其不会因为递归层级过深而导致栈溢出
-			//     // Use tail recursion optimization recursionFunc to prevent stack overflow due to too deep recursion level
-			// };
 			recursionFunc(col, currentLevelData);
 		}
 	};
@@ -395,13 +256,13 @@
 	{...popup}
 >
 	<div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" on:click={clickCancelFunc}>{cancelText}</div>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" onclick={clickCancelFunc}>{cancelText}</div>
 		<div>{title}</div>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" on:click={clickConfirmFunc}>{confirmText}</div>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" onclick={clickConfirmFunc}>{confirmText}</div>
 	</div>
 	<div class="flex justify-around items-center gap-1 bg-white dark:bg-black">
 		{#each newDatas as item, col}
@@ -416,7 +277,7 @@
 						useAnimation={item.useAnimation}
 						lastSelectedIndex={lastSelectedIndexs[col]}
 						{autoScrollToLast}
-						on:scrollEnd={e => scrollEndFunc(e, col)}
+						onscrollEnd={e => scrollEndFunc(e, col)}
 					/>
 				{/if}
 			</div>

packages/stdf/components/placeholder/Placeholder.svelte

@@ -1,43 +1,7 @@
 <script>
-	/**
-	 * 上下内边距
-	 * up down padding
-	 * @type {'0'|'1'|'2'|'3'|'4'}
-	 * @default '4'
-	 */
-	export let py = '4';
-
-	/**
-	 * 高度
-	 * height
-	 * @type {'full'|'1'|'2'|'4'|'8'|'16'|'24'|'32'|'48'|'64'|'96'}
-	 * @default 'full'
-	 */
-	export let height = 'full';
-
-	/**
-	 * 圆角风格
-	 * radius style
-	 * @type {'none'|'base'|'md'|'xl'|'2xl'|'3xl'|'full'}
-	 * @default 'base'
-	 */
-	export let radius = 'md';
-
-	/**
-	 * 阴影风格
-	 * shadow style
-	 * @type {'none'|'sm'|'md'|'lg'|'xl'|'2xl'}
-	 * @default 'none'
-	 */
-	export let shadow = 'none';
-
-	/**
-	 * 注入class
-	 * inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
+	/** @typedef {import('../../index.d').Placeholder} PlaceholderProps */
+	/** @type {PlaceholderProps} */
+	let { py = '4', height = 'full', radius = 'md', shadow = 'none', injClass = '', children } = $props();
 
 	// 上下内边距样式
 	// up down padding style
@@ -81,5 +45,5 @@
 		pyObj[py] || pyObj['4']
 	}${radiusObj[radius] || radiusObj.base}${shadowObj[shadow] || shadowObj.none}${injClass === '' ? '' : ` ${injClass}`}`}
 >
-	<slot />
+	{@render children?.()}
 </div>

packages/stdf/components/popup/Popup.svelte

@@ -1,164 +1,35 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import * as eases from 'svelte/easing';
 	import Mask from '../mask/Mask.svelte';
 	import Transition from './Transition.svelte';
 
-	// 定义事件派发器
-	// Define event dispatcher
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * 是否显示
-	 * Whether to show
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let visible = false;
-
-	/**
-	 * 弹出层大小，值为 0 时由内部元素决定
-	 * Popup size, value of 0 is determined by internal elements
-	 * @type {number}
-	 * @range 0 - 100
-	 * @default 40
-	 */
-	export let size = 40;
-
-	/**
-	 * 弹出层位置
-	 * Popup position
-	 * @type {'center'|'top'|'bottom'|'left'|'right'}
-	 * @default 'bottom'
-	 */
-	export let position = 'bottom';
-
-	/**
-	 * 过渡动画出现时间，单位毫秒
-	 * Transition animation appearance time (ms)
-	 * @type {number}
-	 * @default 450
-	 */
-	export let duration = 450;
-
-	/**
-	 * 过渡动画退出时间，单位毫秒
-	 * Transition animation exit time (ms)
-	 * @type {number}
-	 * @default 240
-	 */
-	export let outDuration = 240;
-
-	/**
-	 * 过渡动画进入类型
-	 * Transition animation entry type
-	 * @type {'linear'|'quadIn'|'quadOut'|'quadInOut'|'cubicIn'|'cubicOut'|'cubicInOut'|'quartIn'|'quartOut'|'quartInOut'|'quintIn'|'quintOut'|'quintInOut'|'sineIn'|'sineOut'|'sineInOut'|'expoIn'|'expoOut'|'expoInOut'|'circIn'|'circOut'|'circInOut'|'backIn'|'backOut'|'backInOut'|'elasticIn'|'elasticOut'|'elasticInOut'|'bounceIn'|'bounceOut'|'bounceInOut'}
-	 * @default 'cubicOut'
-	 */
-	export let easeType = 'cubicOut';
-
-	/**
-	 * 过渡动画退出类型
-	 * Transition animation exit type
-	 * @type {'linear'|'quadIn'|'quadOut'|'quadInOut'|'cubicIn'|'cubicOut'|'cubicInOut'|'quartIn'|'quartOut'|'quartInOut'|'quintIn'|'quintOut'|'quintInOut'|'sineIn'|'sineOut'|'sineInOut'|'expoIn'|'expoOut'|'expoInOut'|'circIn'|'circOut'|'circInOut'|'backIn'|'backOut'|'backInOut'|'elasticIn'|'elasticOut'|'elasticInOut'|'bounceIn'|'bounceOut'|'bounceInOut'}
-	 * @default 'cubicOut'
-	 */
-	export let easeOutType = 'cubicOut';
-
-	/**
-	 * 左右间距
-	 * Left and right spacing
-	 * @type {'0'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10'|'12'|'16'|'20'}
-	 * @default '0'
-	 */
-	export let px = '0';
-
-	/**
-	 * 上下间距
-	 * Top and bottom spacing
-	 * @type {'0'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10'|'12'|'16'|'24'|'32'|'48'|'64'}
-	 * @default '0'
-	 */
-	export let py = '0';
-
-	/**
-	 * 遮罩层参数
-	 * Mask layer parameters
-	 * @type {object}
-	 * @default {}
-	 */
-	export let mask = {};
-
-	/**
-	 * 点击遮罩层是否关闭
-	 * Click mask layer to close
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let maskClosable = true;
-
-	/**
-	 * 圆角位置
-	 * Corner position
-	 * @type {'all'|'top'|'bottom'|'left'|'right'}
-	 * @default 'top'
-	 */
-	export let radiusPosition = 'top';
-
-	/**
-	 * 圆角大小
-	 * Corner size
-	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl'|'full'}
-	 * @default 'md'
-	 */
-	export let radius = 'none';
-
-	/**
-	 * 动画距离，当弹出层大小由内部元素决定时生效，单位 px
-	 * Animation distance, effective when popup size is determined by internal elements (px)
-	 * @type {number}
-	 * @default 0
-	 */
-	export let transitionDistance = 0;
-
-	/**
-	 * 背景是否透明
-	 * Whether the background is transparent
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let transparent = false;
-
-	/**
-	 * 是否允许 body 滚动
-	 * Whether to allow body scrolling
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let allowBodyScroll = false;
-
-	/**
-	 * z-index
-	 * @type {number}
-	 * @default 600
-	 */
-	export let zIndex = 600;
-
-	/**
-	 * 是否动态固定
-	 * Whether to dynamically fix
-	 * @type {boolean}
-	 * @default true
-	 */
-	export let dynamicFixed = true;
-
-	/**
-	 * 是否隐藏滚动区域滚动条
-	 * Whether to hide the scroll bar of the scroll area
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let hideScrollbar = false;
+	/** @typedef {import('../../index.d').Popup} PopupProps */
+	/** @type {PopupProps} */
+	let {
+		visible = $bindable(false),
+		size = 40,
+		position = 'bottom',
+		duration = 450,
+		outDuration = 240,
+		easeType = 'cubicOut',
+		easeOutType = 'cubicOut',
+		px = '0',
+		py = '0',
+		mask = {},
+		maskClosable = true,
+		radiusPosition = 'top',
+		radius = 'none',
+		transitionDistance = 0,
+		transparent = false,
+		allowBodyScroll = false,
+		zIndex = 600,
+		dynamicFixed = true,
+		hideScrollbar = false,
+		children,
+		onopen,
+		onclose,
+		onclickMask,
+	} = $props();
 
 	// 通过不同位置结合圆角参数，生成不同的 class
 	// Generate different classes by combining different positions and corner parameters
@@ -268,18 +139,18 @@
 
 	// 监听 visible 变化派发事件
 	// Listen to the change of visible and dispatch events
-	$: {
+	$effect(() => {
 		if (visible) {
-			dispatch('open');
+			onopen && onopen();
 		} else {
-			dispatch('close');
+			onclose && onclose();
 		}
-	}
+	});
 
 	// 点击遮罩时派发事件
 	// Dispatch events when clicking the mask
 	const clickMask = () => {
-		dispatch('clickMask');
+		onclickMask && onclickMask();
 		if (maskClosable) {
 			visible = false;
 		}
@@ -354,7 +225,7 @@
 
 	// 监听 visible 与是否允许 body 滚动，动态控制 body 滚动
 	// Listen to the change of visible and allowBodyScroll, and dynamically control the body scroll
-	$: {
+	$effect(() => {
 		if (visible && !allowBodyScroll) {
 			const top = document.documentElement.scrollTop || document.body.scrollTop;
 			document.body.style.cssText += `
@@ -372,11 +243,14 @@
         `;
 			window.scrollTo(0, Math.abs(parseFloat(top)));
 		}
-	}
+	});
 
 	// 页面滚动时，动态计算窗口高度
 	// Dynamically calculate the window height when the page scrolls
-	$: innerHeight = window.innerHeight;
+	let innerHeight = $state(0);
+	$effect(() => {
+		innerHeight = window.innerHeight;
+	});
 	if (dynamicFixed) {
 		//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
 		//Solve the problem of window height change caused by Safari and Chrome or other browsers hiding and showing the toolbar when scrolling
@@ -387,7 +261,7 @@
 </script>
 
 {#if visible}
-	<Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
+	<Mask visible {duration} {outDuration} {...mask} onclickMask={clickMask} />
 {/if}
 
 {#if visible}
@@ -404,14 +278,16 @@
 			transitionParams={transitionParamsFun()}
 			transitionOutParams={transitionOutParamsFun()}
 		>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} ${radiusFun()} overflow-y-auto`}
 				class:popup-container={hideScrollbar}
-				on:click|stopPropagation
+				onclick={e => {
+					e.stopPropagation();
+				}}
 			>
-				<slot />
+				{@render children?.()}
 			</div>
 		</Transition>
 	</div>

packages/stdf/components/popup/Transition.svelte

@@ -1,13 +1,28 @@
 <script>
 	import { fly, scale } from 'svelte/transition';
 
-	export let visible = false; //是否显示
-	export let size = 40; //尺寸
-	export let transitionParams = {}; //过渡动画参数
-	export let transitionOutParams = {}; //过渡动画出去参数
-	export let position = 'bottom'; //显示位置,center,top,bottom,left,right
-	export let px = '0'; //左右间距
-	export let py = '0'; //上下间距
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [visible]
+	 * @property {number} [size]
+	 * @property {any} [transitionParams]
+	 * @property {any} [transitionOutParams]
+	 * @property {string} [position]
+	 * @property {string} [px]
+	 * @property {string} [py]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+	/** @type {Props} */
+	let {
+		visible = false,
+		size = 40,
+		transitionParams = {},
+		transitionOutParams = {},
+		position = 'bottom',
+		px = '0',
+		py = '0',
+		children,
+	} = $props();
 
 	const sizeClass = { bottom: 'w-full', top: 'w-full', left: 'h-full', right: 'h-full', center: 'w-full' };
 	const sizeStyle = {
@@ -60,7 +75,7 @@
 			} pointer-events-auto`}
 			style={sizeStyle[position] || sizeStyle['bottom']}
 		>
-			<slot />
+			{@render children?.()}
 		</div>
 	{:else}
 		<div
@@ -71,7 +86,7 @@
 			} pointer-events-auto`}
 			style={sizeStyle[position] || sizeStyle['bottom']}
 		>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 {/if}

packages/stdf/components/progress/Progress.svelte

@@ -1,85 +1,18 @@
 <script>
-	/**
-	 * 百分比
-	 * percent
-	 * @type {number}
-	 * @range 0 - 100
-	 * @default 66
-	 */
-	export let percent = 66;
-
-	/**
-	 * 百分比位置
-	 * percent position
-	 * @type {'inner'|'right'|'block'|'none'}
-	 * @default 'right'
-	 */
-	export let percentPosition = 'right';
-
-	/**
-	 * 高度
-	 * height
-	 * @type {'1'|'2'|'3'|'4'}
-	 * @default '2'
-	 */
-	export let height = '2';
-
-	/**
-	 * 圆角
-	 * radius
-	 * @type {'full'|'base'|'none'}
-	 * @default 'full'
-	 */
-	export let radius = 'full';
-
-	/**
-	 * 是否禁用
-	 * inactive
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let inactive = false;
-
-	/**
-	 * percentPosition 为 inner 时，内部文字溢出时百分比阀值
-	 * percentPosition is inner, overflowPercent is percent value when inner text overflow
-	 * @type {number}
-	 * @range 0 - 100
-	 * @default 10
-	 */
-	export let overflowPercent = 10;
-
-	/**
-	 * 是否使用slot
-	 * useSlot
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let useSlot = false;
-
-	/**
-	 * 注入class
-	 * inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 轨道注入class
-	 * tranck inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let trackInjClass = '';
-
-	/**
-	 * 动画时间
-	 * duration
-	 * @type {'150'|'300'|'500'|'700'|'1000'}
-	 * @default '300'
-	 */
-	export let duration = '300';
+	/** @typedef {import('../../index.d').Progress} Progress */
+	/** @type {Progress} */
+	let {
+		percent = 66,
+		percentPosition = 'right',
+		height = '2',
+		radius = 'full',
+		inactive = false,
+		overflowPercent = 10,
+		injClass = '',
+		trackInjClass = '',
+		duration = '300',
+		children,
+	} = $props();
 
 	// 高度样式
 	// height class
@@ -120,8 +53,8 @@
 						percent < overflowPercent ? ' translate-x-full text-black dark:text-white' : ' text-white dark:text-black'
 					}`}
 				>
-					{#if useSlot}
-						<slot />
+					{#if children}
+						{@render children?.()}
 					{:else}
 						{percent}%
 					{/if}
@@ -137,8 +70,8 @@
 				} -translate-y-1/2 -translate-x-1/2${injClass === '' ? '' : ` ${injClass}`}`}
 				style={`left:${percent}%;`}
 			>
-				{#if useSlot}
-					<slot />
+				{#if children}
+					{@render children?.()}
 				{:else}
 					{percent}%
 				{/if}
@@ -146,8 +79,8 @@
 		{/if}
 	</div>
 	{#if percentPosition === 'right'}
-		{#if useSlot}
-			<slot />
+		{#if children}
+			{@render children?.()}
 		{:else}
 			<div class="text-xs">{percent}%</div>
 		{/if}

packages/stdf/components/progressLoop/ProgressLoop.svelte

@@ -1,77 +1,17 @@
 <script>
-	/**
-	 * 百分比
-	 * percent
-	 * @type {number}
-	 * @range 0 - 100
-	 * @default 66
-	 */
-	export let percent = 66;
-
-	/**
-	 * 圆环宽度
-	 * circle width
-	 * @type {number}
-	 * @range 0 - 12
-	 * @default 2
-	 */
-	export let strokeWidth = 2;
-
-	/**
-	 * 是否直角
-	 * is butt
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let butt = false;
-
-	/**
-	 * 是否反向
-	 * is reverse
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let reverse = false;
-
-	/**
-	 * 动画时间
-	 * animation duration
-	 * @type {'150'|'300'|'500'|'700'|'1000'}
-	 * @default '300'
-	 */
-	export let duration = '300';
-
-	/**
-	 * 渐变色
-	 * gradient color
-	 * @type {string[]}
-	 * @default []
-	 */
-	export let gradient = [];
-
-	/**
-	 * 是否使用slot
-	 * is use slot
-	 * @type {boolean}
-	 * @default false
-	 */
-	export let useSlot = false;
-
-	/**
-	 * 注入class
-	 * inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let injClass = '';
-
-	/**
-	 * 轨道注入class
-	 * tranck inject class
-	 * @type {string}
-	 * @default ''
-	 */
-	export let trackInjClass = '';
+	/** @typedef {import('../../index.d').ProgressLoop} ProgressLoop */
+	/** @type {ProgressLoop} */
+	let {
+		percent = 66,
+		strokeWidth = 2,
+		butt = false,
+		reverse = false,
+		duration = '300',
+		gradient = null,
+		injClass = '',
+		trackInjClass = '',
+		children,
+	} = $props();
 
 	// 通过百分比计算半径
 	// calculate radius by percent
@@ -102,7 +42,7 @@
 			fill="none"
 			class={`stroke-black/5 dark:stroke-white/5${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
 		></circle>
-		{#if gradient.length === 2}
+		{#if gradient && gradient.length === 2}
 			<defs>
 				<linearGradient id="gradient_ProgressLoop">
 					<stop offset="0%" style="stop-color: {gradient[1]};" />
@@ -115,7 +55,7 @@
 			cy="12"
 			{r}
 			stroke-width={strokeWidth}
-			class={`${gradient.length < 2 ? 'stroke-primary dark:stroke-dark ' : ''}transition-all ${
+			class={`${!gradient || gradient.length < 2 ? 'stroke-primary dark:stroke-dark ' : ''}transition-all ${
 				durationClass[duration] || durationClass['300']
 			}${injClass === '' ? '' : ` ${injClass}`}`}
 			fill="none"
@@ -126,8 +66,8 @@
 		></circle>
 	</svg>
 	<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-		{#if useSlot}
-			<slot />
+		{#if children}
+			{@render children?.()}
 		{:else}
 			<div class="text-xs">{percent}%</div>
 		{/if}

packages/stdf/components/radio/Radio.svelte

@@ -2,37 +2,9 @@
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	/**
-	 * 名称
-	 * name
-	 * @type {string}
-	 * @default ''
-	 */
-	export let name = '';
-
-	/**
-	 * 文本位置
-	 * text position
-	 * @type {'l'|'r'|'t'|'b'}
-	 * @default 'r'
-	 */
-	export let textPosition = 'r';
-
-	/**
-	 * 图标
-	 * icon
-	 * @type {'defaulr'|'none'|Object}
-	 * @default 'default'
-	 */
-	export let icon = 'default';
-
-	/**
-	 * 选中图标
-	 * icon checked
-	 * @type {'defaulr'|'none'|Object}
-	 * @default 'default'
-	 */
-	export let iconChecked = 'default';
+	/** @typedef {import('../../index.d').Radio} Radio */
+	/** @type {Radio} */
+	let { name = '', textPosition = 'r', icon = 'default', iconChecked = 'default', children } = $props();
 
 	const STDF_radioValueStore = getContext('STDF_radioValueContext');
 	const STDF_radioHorizontalStore = getContext('STDF_radioHorizontalContext');
@@ -41,17 +13,17 @@
 	};
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={`flex grow active:opacity-80 ${textPosition === 'l' && !$STDF_radioHorizontalStore ? 'justify-between' : ''} ${
 		textPosition === 'b' || textPosition === 't' ? 'flex-col items-center' : $STDF_radioHorizontalStore ? 'justify-center' : 'items-center'
 	}`}
-	on:click={clickRadioFun}
+	onclick={clickRadioFun}
 >
 	{#if textPosition === 'l' || textPosition === 't'}
 		<div class={`${textPosition === 'l' && 'mr-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 	<div class:hidden={$STDF_radioValueStore !== name}>
@@ -74,7 +46,7 @@
 	</div>
 	{#if textPosition === 'r' || textPosition === 'b'}
 		<div class={`${textPosition === 'r' && 'ml-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </div>