[stdf]Update Tailwind v4 for shadow

docs/mds/components/cell/api.md

@@ -13,7 +13,7 @@
 | mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N    | 左右间距。             |
 | radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N    | 圆角风格。             |
 | switchActive | `boolean`                                                         | `false`   | N    | 开关状态。             |
-| shadow       | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'sm'`    | N    | 阴影风格。             |
+| shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'xs'`    | N    | 阴影风格。             |
 | injClass     | `string`                                                          | `''`      | N    | 注入 CSS 名称。        |
 | love         | `boolean`                                                         | `false`   | N    | 是否开启关爱版。       |
 | clickAll     | `boolean`                                                         | `true`    | N    | 是否点击整行触发事件。 |
@@ -39,7 +39,7 @@
 | my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`  | N    | 上下间距。 |
 | mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`  | N    | 左右间距。 |
 | radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'` | N    | 圆角风格。 |
-| shadow | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'sm'` | N    | 阴影风格。 |
+| shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`     | `'xs'` | N    | 阴影风格。 |
 
 ## CellGroup Snippets
 

docs/mds/components/cell/api_en.md

@@ -13,7 +13,7 @@
 | mx           | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`                               | `'2'`     | N        | Horizontal margin.           |
 | radius       | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'`                 | `'lg'`    | N        | Border radius style.         |
 | switchActive | `boolean`                                                         | `false`   | N        | Switch state.                |
-| shadow       | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'sm'`    | N        | Shadow style.                |
+| shadow       | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'xs'`    | N        | Shadow style.                |
 | injClass     | `string`                                                          | `''`      | N        | Inject CSS class name.       |
 | love         | `boolean`                                                         | `false`   | N        | Enable care version.         |
 | clickAll     | `boolean`                                                         | `true`    | N        | Click entire row to trigger. |
@@ -39,7 +39,7 @@
 | my     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'4'`   | N        | Vertical margin.   |
 | mx     | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'`               | `'2'`   | N        | Horizontal margin. |
 | radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'` | `'lg'`  | N        | Border radius.     |
-| shadow | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'`   | `'sm'`  | N        | Shadow style.      |
+| shadow | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`     | `'xs'`  | N        | Shadow style.      |
 
 ## CellGroup Snippets
 

docs/mds/components/placeholder/api.md

@@ -5,7 +5,7 @@
 | py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N    | 上下内边距。    |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N    | 高度。          |
 | radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N    | 圆角风格。      |
-| shadow   | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                          | `'none'` | N    | 阴影风格。      |
+| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'none'` | N    | 阴影风格。      |
 | injClass | `string`                                                         | `''`     | N    | 注入 CSS 名称。 |
 
 ## Placeholder Snippets

docs/mds/components/placeholder/api_en.md

@@ -5,7 +5,7 @@
 | py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N        | Vertical padding.        |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N        | Height.                  |
 | radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N        | Border radius style.     |
-| shadow   | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                          | `'none'` | N        | Shadow style.            |
+| shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                   | `'none'` | N        | Shadow style.            |
 | injClass | `string`                                                         | `''`     | N        | Injected CSS class name. |
 
 ## Placeholder Snippets

packages/stdf/src/lib/components/calendar/Calendar.svelte

@@ -306,7 +306,7 @@
 				<div class="calendar-container flex flex-nowrap gap-4 overflow-x-auto px-4 pb-1 pt-2">
 					{#each quickSelects as item}
 						<button
-							class="flex-none rounded bg-white px-2 py-1 text-xs shadow dark:bg-black dark:shadow-white/10"
+							class="flex-none rounded bg-white px-2 py-1 text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 							class:!bg-primary={isQuickSelect && quickSelectItem === item}
 							class:text-white={isQuickSelect && quickSelectItem === item}
 							class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}

packages/stdf/src/lib/components/cell/Cell.svelte

@@ -15,7 +15,7 @@
 		mx = '2',
 		radius = 'lg',
 		switchActive = $bindable(false),
-		shadow = 'sm',
+		shadow = 'xs',
 		injClass = '',
 		love = false,
 		clickAll = true,
@@ -41,8 +41,8 @@
 	// Shadow style style
 	const shadowClass = {
 		none: ' shadow-none',
+		xs: ' shadow-xs dark:shadow-white/5',
 		sm: ' shadow-sm dark:shadow-white/5',
-		base: ' shadow dark:shadow-white/10',
 		md: ' shadow-md dark:shadow-white/10',
 		lg: ' shadow-lg dark:shadow-white/10',
 		xl: ' shadow-xl dark:shadow-white/10',
@@ -89,7 +89,7 @@
 
 <div
 	class="bg-white px-3 dark:bg-gray-800{clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} {myClass[my] ||
-		myClass['4']}{mxClass[mx] || mxClass['2']}{radiusObj[radius] || radiusObj['lg']} {shadowClass[shadow] || shadowClass['sm']}{love
+		myClass['4']}{mxClass[mx] || mxClass['2']}{radiusObj[radius] || radiusObj['lg']} {shadowClass[shadow] || shadowClass['xs']}{love
 		? ' text-xl'
 		: ''} {injClass}"
 >

packages/stdf/src/lib/components/cell/CellGroup.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { CellGroupProps } from '../../types/index.js';
 
-	let { radius = 'lg', shadow = 'sm', my = '4', mx = '2', children }: CellGroupProps = $props();
+	let { radius = 'lg', shadow = 'xs', my = '4', mx = '2', children }: CellGroupProps = $props();
 
 	const shadowClass = {
 		none: ' shadow-none',
+		xs: ' shadow-xs dark:shadow-white/5',
 		sm: ' shadow-sm dark:shadow-white/5',
-		base: ' shadow dark:shadow-white/10',
 		md: ' shadow-md dark:shadow-white/10',
 		lg: ' shadow-lg dark:shadow-white/10',
 		xl: ' shadow-xl dark:shadow-white/10',
@@ -26,7 +26,7 @@
 </script>
 
 <div
-	class="bg-white dark:bg-black overflow-hidden{shadowClass[shadow] || shadowClass['sm']}{radiusClass[radius] || radiusClass['lg']}{myClass[
+	class="bg-white dark:bg-black overflow-hidden{shadowClass[shadow] || shadowClass['xs']}{radiusClass[radius] || radiusClass['lg']}{myClass[
 		my
 	] || myClass['4']}{mxClass[mx] || mxClass['2']}"
 >

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

@@ -6,12 +6,12 @@
 	const colorClass = () => {
 		if (inverse) {
 			return theme
-				? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1]'
-				: ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1]';
+				? ' border-dark/5 border-l-dark/[1] dark:border-primary/5 dark:border-l-primary/[1]'
+				: ' border-white/5 border-l-white/[1] dark:border-black/5 dark:border-l-black/[1]';
 		} else {
 			return theme
-				? ' border-opacity-5 dark:border-opacity-5 border-primary border-l-primary/[1] dark:border-dark dark:border-l-dark/[1]'
-				: ' border-opacity-5 dark:border-opacity-5 border-black border-l-black/[1] dark:border-white dark:border-l-white/[1]';
+				? ' border-primary/5 border-l-primary/[1] dark:border-dark/5 dark:border-l-dark/[1]'
+				: ' border-black/5 border-l-black/[1] dark:border-white/5 dark:border-l-white/[1]';
 		}
 	};
 </script>

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

@@ -5,12 +5,12 @@
 	const colorClass = () => {
 		if (inverse) {
 			return theme
-				? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1] border-r-dark/[1] dark:border-r-primary/[1]'
-				: ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1] border-r-white/[1] dark:border-r-black/[1]';
+				? ' border-dark/5 border-l-dark/[1] dark:border-primary/5 dark:border-l-primary/[1] border-r-dark/[1] dark:border-r-primary/[1]'
+				: ' border-white/5 border-l-white/[1] dark:border-black/5 dark:border-l-black/[1] border-r-white/[1] dark:border-r-black/[1]';
 		} else {
 			return theme
-				? ' border-opacity-5 dark:border-opacity-5 border-primary dark:border-dark border-l-primary/[1] dark:border-l-dark/[1] border-r-primary/[1] dark:border-r-dark/[1]'
-				: ' border-opacity-5 dark:border-opacity-5 border-black dark:border-white border-l-black/[1] dark:border-l-white/[1] border-r-black/[1] dark:border-r-white/[1]';
+				? ' border-primary/5 dark:border-dark/5 border-l-primary/[1] dark:border-l-dark/[1] border-r-primary/[1] dark:border-r-dark/[1]'
+				: ' border-black/5 dark:border-white/5 border-l-black/[1] dark:border-l-white/[1] border-r-black/[1] dark:border-r-white/[1]';
 		}
 	};
 </script>

packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte

@@ -74,7 +74,7 @@
 
 	// 按钮式 class
 	// Button type class
-	const buttonClass = `flex flex-col justify-center items-center shadow-sm font-bold active:scale-95 transition-all duration-100 ${
+	const buttonClass = `flex flex-col justify-center items-center shadow-xs font-bold active:scale-95 transition-all duration-100 ${
 		heightClass[height] || 'h-12'
 	} ${fontSizeClass[height] || 'text-base'} ${radiusClass[radius] || 'rounded'}${keyClass ? ' ' + keyClass : ''}`;
 

packages/stdf/src/lib/components/pagination/SecondPageNext.svelte

@@ -14,7 +14,7 @@
 
 {#if Pages.length > 0}
 	<div
-		class="second-page-contents absolute -top-3 grid max-h-[7.25rem] -translate-y-full translate-x-1/2 gap-y-2 divide-x overflow-y-auto rounded-lg bg-white p-1 shadow dark:bg-black dark:shadow-white/10"
+		class="second-page-contents absolute -top-3 grid max-h-[7.25rem] -translate-y-full translate-x-1/2 gap-y-2 divide-x overflow-y-auto rounded-lg bg-white p-1 shadow-sm dark:bg-black dark:shadow-white/10"
 		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);right:{(2.5 / (maxShowPage + 2)) *
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>

packages/stdf/src/lib/components/pagination/SecondPagePre.svelte

@@ -14,7 +14,7 @@
 
 {#if Pages.length > 0}
 	<div
-		class="second-page-contents absolute -top-3 grid max-h-[7.25rem] -translate-x-1/2 -translate-y-full gap-y-2 overflow-y-auto rounded-lg bg-white p-1 shadow dark:bg-black dark:shadow-white/10"
+		class="second-page-contents absolute -top-3 grid max-h-[7.25rem] -translate-x-1/2 -translate-y-full gap-y-2 overflow-y-auto rounded-lg bg-white p-1 shadow-sm dark:bg-black dark:shadow-white/10"
 		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);left:{(2.5 / (maxShowPage + 2)) *
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>

packages/stdf/src/lib/components/placeholder/Placeholder.svelte

@@ -9,7 +9,15 @@
 
 	// 阴影样式
 	// shadow style
-	const shadowObj = { none: ' shadow-none', sm: ' shadow-sm', md: ' shadow-md', lg: ' shadow-lg', xl: ' shadow-xl', '2xl': ' shadow-2xl' };
+	const shadowObj = {
+		none: ' shadow-none',
+		xs: ' shadow-xs',
+		sm: 'shadow-sm',
+		md: ' shadow-md',
+		lg: ' shadow-lg',
+		xl: ' shadow-xl',
+		'2xl': ' shadow-2xl'
+	};
 
 	// 圆角样式
 	// radius style

packages/stdf/src/lib/components/tabs/Tab.svelte

@@ -84,7 +84,7 @@
 			<div class="absolute bottom-0 h-0.5 w-full bg-black/5 dark:bg-white/5" style="width: {itemW * labels.length}px"></div>
 		{/if}
 		<div
-			class="{lineType ? '' : 'shadow dark:shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[duration] ||
+			class="{lineType ? '' : 'dark:shadow-xs shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[duration] ||
 				durationObj.base} {radiusObj[radius] || radiusObj.base} {lineType
 				? 'bg-primary dark:bg-dark bottom-0'
 				: 'bg-white dark:bg-gray-950'} {activeInjClass}"
@@ -123,7 +123,7 @@
 			<div class="absolute bottom-0 h-0.5 w-full bg-black/5 dark:bg-white/5" style="width: {tabW - 4}px"></div>
 		{/if}
 		<div
-			class="{lineType && layout !== 'v' ? '' : 'shadow dark:shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[
+			class="{lineType && layout !== 'v' ? '' : 'dark:shadow-xs shadow-sm dark:shadow-white/10'} absolute transition-all {durationObj[
 				duration
 			] || durationObj.base} {radiusObj[radius] || radiusObj.base} {lineType && layout !== 'v'
 				? 'bg-primary dark:bg-dark bottom-0'

packages/stdf/src/lib/types/index.ts

@@ -174,7 +174,7 @@ export type CellProps = {
 	mx?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
 	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 	switchActive?: boolean;
-	shadow?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	injClass?: string;
 	love?: boolean;
 	clickAll?: boolean;
@@ -185,7 +185,7 @@ export type CellProps = {
 };
 export type CellGroupProps = {
 	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-	shadow?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	my?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
 	mx?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
 	children?: Snippet;
@@ -499,7 +499,7 @@ export type PlaceholderProps = {
 	py?: '0' | '1' | '2' | '3' | '4';
 	height?: 'full' | '1' | '2' | '4' | '8' | '16' | '24' | '32' | '48' | '64' | '96';
 	radius?: 'none' | 'base' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
-	shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 	injClass?: string;
 	children?: Snippet;
 };

packages/stdf/src/routes/+layout.svelte

@@ -176,7 +176,7 @@
 <div
 	class="fixed z-[1000] {showTheme
 		? 'right-0'
-		: '-right-80'} top-12 rounded-xl bg-white px-4 shadow transition-all duration-500 dark:bg-black"
+		: '-right-80'} top-12 rounded-xl bg-white px-4 shadow-sm transition-all duration-500 dark:bg-black"
 >
 	<ThemeSwitch />
 </div>

packages/stdf/src/routes/grids/en_US/+page.svelte

@@ -112,11 +112,11 @@
 
 <div class="mt-8 px-4 font-bold">Scene Example 6﹡5</div>
 <div class="pb-8 pt-2">
-	<div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
+	<div class={`mx-2 rounded-xl p-2 shadow-sm transition duration-300${colorCss}`}>
 		<Grids cols="5" mx="0" my="0">
 			<Grid row="3">
 				<div
-					class="flex h-full flex-col justify-between rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-between rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div>{weekDay}</div>
 					<div class="text-4xl">{day}</div>
@@ -125,14 +125,14 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-center rounded-lg bg-white p-1 text-center text-xl font-bold shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-center rounded-lg bg-white p-1 text-center text-xl font-bold shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					{time}
 				</div>
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full" onchange={changeColorFun}>
@@ -149,12 +149,16 @@
 			</Grid>
 
 			<Grid row="2" col="2">
-				<div class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<Button fill="lineTheme" radius="full" onclick={changeDeviceFun}>Device</Button>
 				</div>
 			</Grid>
 			<Grid row="2" col="2">
-				<div class="flex h-full justify-around rounded-lg bg-white p-1 py-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full justify-around rounded-lg bg-white p-1 py-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<div class="flex flex-col justify-center">
 						{#if currentDevice === 'iOS'}
 							<Icon name="ri-apple-fill" size={30} />
@@ -200,7 +204,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full">
@@ -217,7 +221,7 @@
 			</Grid>
 			<Grid row="4">
 				<div
-					class="flex h-full flex-col items-center justify-around rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col items-center justify-around rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="w-1/2 overflow-hidden">
 						<img class="block dark:hidden" src="/assets/stdf_512px.png" alt="" />
@@ -227,7 +231,9 @@
 				</div>
 			</Grid>
 			<Grid row="3">
-				<div class="flex h-full flex-col justify-around rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-around rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<div>92%</div>
 					<div class="animate-pulse">
 						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-extend1" />
@@ -236,7 +242,9 @@
 				</div>
 			</Grid>
 			<Grid row="2">
-				<div class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					{#if currentDevice === 'iOS'}
 						<Icon name="ri-smartphone-line" size={30} />
 					{:else if currentDevice === 'Android'}
@@ -252,7 +260,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col items-center justify-around rounded-lg bg-white py-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col items-center justify-around rounded-lg bg-white py-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div>
 						<Icon name="ri-sun-line" size={20} />
@@ -264,7 +272,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full">

packages/stdf/src/routes/grids/zh_CN/+page.svelte

@@ -112,11 +112,11 @@
 
 <div class="mt-8 px-4 font-bold">场景示例 6﹡5</div>
 <div class="pb-8 pt-2">
-	<div class="mx-2 rounded-xl p-2 shadow transition duration-300{colorCss}">
+	<div class="mx-2 rounded-xl p-2 shadow-sm transition duration-300{colorCss}">
 		<Grids cols="5" mx="0" my="0">
 			<Grid row="3">
 				<div
-					class="flex h-full flex-col justify-between rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-between rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div>{weekDay}</div>
 					<div class="text-4xl">{day}</div>
@@ -125,14 +125,14 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-center rounded-lg bg-white p-1 text-center text-xl font-bold shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-center rounded-lg bg-white p-1 text-center text-xl font-bold shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					{time}
 				</div>
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full" onchange={changeColorFun}>
@@ -149,12 +149,16 @@
 			</Grid>
 
 			<Grid row="2" col="2">
-				<div class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<Button fill="lineTheme" radius="full" onclick={changeDeviceFun}>切换设备</Button>
 				</div>
 			</Grid>
 			<Grid row="2" col="2">
-				<div class="flex h-full justify-around rounded-lg bg-white p-1 py-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full justify-around rounded-lg bg-white p-1 py-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<div class="flex flex-col justify-center">
 						{#if currentDevice === 'iOS'}
 							<Icon name="ri-apple-fill" size={30} />
@@ -200,7 +204,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full">
@@ -217,7 +221,7 @@
 			</Grid>
 			<Grid row="4">
 				<div
-					class="flex h-full flex-col items-center justify-around rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col items-center justify-around rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="w-1/2 overflow-hidden">
 						<img class="block dark:hidden" src="/assets/stdf_512px.png" alt="" />
@@ -227,7 +231,9 @@
 				</div>
 			</Grid>
 			<Grid row="3">
-				<div class="flex h-full flex-col justify-around rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-around rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					<div>92%</div>
 					<div class="animate-pulse">
 						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-extend1" />
@@ -236,7 +242,9 @@
 				</div>
 			</Grid>
 			<Grid row="2">
-				<div class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow dark:bg-black dark:shadow-white/10">
+				<div
+					class="flex h-full flex-col justify-center rounded-lg bg-white text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
+				>
 					{#if currentDevice === 'iOS'}
 						<Icon name="ri-smartphone-line" size={30} />
 					{:else if currentDevice === 'Android'}
@@ -252,7 +260,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col items-center justify-around rounded-lg bg-white py-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col items-center justify-around rounded-lg bg-white py-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div>
 						<Icon name="ri-sun-line" size={20} />
@@ -264,7 +272,7 @@
 			</Grid>
 			<Grid row="2">
 				<div
-					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow dark:bg-black dark:shadow-white/10"
+					class="flex h-full flex-col justify-around rounded-lg bg-white p-1 text-center text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
 						<Switch radius="full">

packages/stdf/src/routes/progressLoop/en_US/+page.svelte

@@ -18,7 +18,7 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">Different width</div>
-<div class="mx-4 flex flex-grow gap-4">
+<div class="mx-4 flex grow gap-4">
 	<div class="flex-1">
 		<ProgressLoop strokeWidth={0.5} />
 	</div>
@@ -41,7 +41,7 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">Custom color</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop injClass="stroke-success dark:stroke-error" />
 	</div>
@@ -57,12 +57,12 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">Custom text</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop>
 			<div class="text-center text-xs">
 				<div>Completed</div>
-				<div class="text-lg text-primary dark:text-dark">6666</div>
+				<div class="text-primary dark:text-dark text-lg">6666</div>
 				<div>step</div>
 			</div>
 		</ProgressLoop>
@@ -71,7 +71,7 @@
 		<ProgressLoop>
 			<div class="text-center text-xs">
 				<div>Residual flow</div>
-				<div class="text-lg text-primary dark:text-dark">66</div>
+				<div class="text-primary dark:text-dark text-lg">66</div>
 				<div>GB</div>
 			</div>
 		</ProgressLoop>
@@ -83,8 +83,9 @@
 	</div>
 </div>
 
-<div class="m-4 mt-8 text-lg font-bold">Transition effect</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 mb-1 mt-8 text-lg font-bold">Transition effect</div>
+<div class="mx-4 text-xs">Different end points, ring width, direction, transition time, color</div>
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop {percent} />
 	</div>
@@ -98,7 +99,7 @@
 		<ProgressLoop {percent} reverse />
 	</div>
 </div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop {percent} duration="150" />
 	</div>

packages/stdf/src/routes/progressLoop/zh_CN/+page.svelte

@@ -18,7 +18,7 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">不同宽度</div>
-<div class="mx-4 flex flex-grow gap-4">
+<div class="mx-4 flex grow gap-4">
 	<div class="flex-1">
 		<ProgressLoop strokeWidth={0.5} />
 	</div>
@@ -41,7 +41,7 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">自定义颜色</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop injClass="stroke-success dark:stroke-error" />
 	</div>
@@ -57,12 +57,12 @@
 </div>
 
 <div class="m-4 mt-8 text-lg font-bold">自定义文字</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop>
 			<div class="text-center text-xs">
 				<div>已完成</div>
-				<div class="text-lg text-primary dark:text-dark">6666</div>
+				<div class="text-primary dark:text-dark text-lg">6666</div>
 				<div>步</div>
 			</div>
 		</ProgressLoop>
@@ -71,7 +71,7 @@
 		<ProgressLoop>
 			<div class="text-center text-xs">
 				<div>剩余流量</div>
-				<div class="text-lg text-primary dark:text-dark">66</div>
+				<div class="text-primary dark:text-dark text-lg">66</div>
 				<div>GB</div>
 			</div>
 		</ProgressLoop>
@@ -83,8 +83,9 @@
 	</div>
 </div>
 
-<div class="m-4 mt-8 text-lg font-bold">过渡效果</div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 mb-1 mt-8 text-lg font-bold">过渡效果</div>
+<div class="mx-4 text-xs">不同端点、圆环宽度、方向、过渡时间、颜色</div>
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop {percent} />
 	</div>
@@ -98,7 +99,7 @@
 		<ProgressLoop {percent} reverse />
 	</div>
 </div>
-<div class="m-4 flex flex-grow gap-2">
+<div class="m-4 flex grow gap-2">
 	<div class="flex-1">
 		<ProgressLoop {percent} duration="150" />
 	</div>