[stdf]Update Input compoent, demo and documents.

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

@@ -3,275 +3,278 @@
 	import { getContext } from 'svelte';
 	import { Input, Button, Icon, Toast } from '../../../../../packages/stdf/components';
 
-	let value = 'Init text';
-	let visible = false;
+	let value = $state('Initial text');
+	let visible = $state(false);
 
-	let IdCard = '';
+	let IdCard = $state('');
 
-	const isIframe = getContext('iframe') === '1'; // Determine whether it is iframe
+	const isIframe = getContext('iframe') === '1'; //Check if it's iframe
 
-	$: placeholderIdCard = IdCard === '' ? 'Please enter identification number' : '';
+	let placeholderIdCard = $state('');
+	$effect(() => {
+		placeholderIdCard = IdCard === '' ? 'Please enter ID card number' : '';
+	});
 	const clickLabel4Fun = () => {
-		placeholderIdCard = 'After two seconds, the recognition is complete......';
+		placeholderIdCard = 'Recognition completed in 2 seconds......';
 		setTimeout(() => {
 			IdCard = '1234567890XXX-XX';
 		}, 2000);
 	};
-	let mobileLength = 0;
-	const changeStateFun = e => {
-		mobileLength = e.detail.length;
+	let mobileLength = $state(0);
+	const changeStateFun = v => {
+		mobileLength = v.length;
 	};
 	/**
 	 * @type {'success' | 'warning' | 'error' | 'info'| 'theme'}
 	 */
-	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
+	let mobileState = $derived(mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error');
 
-	// Press key
-	let key = '';
-	const keydownFun = e => {
-		key = e.detail;
-	};
+	// Key pressed
+	let key = $state('');
 </script>
 
-<div class="px-4 pt-8 font-bold text-xl">Basic usage</div>
-<Input title="text" />
+<div class="px-4 pt-8 font-bold text-xl">Basic Usage</div>
+<Input title="Text" />
 
-<div class="px-4 pt-8 font-bold text-xl">Without the title</div>
-<Input placeholder="Please enter the text" />
+<div class="px-4 pt-8 font-bold text-xl">Without Title</div>
+<Input placeholder="Please enter text" />
 
-<div class="px-4 pt-8 font-bold text-xl">customize placeholder</div>
-<Input title="text" placeholder="customize placeholder" />
+<div class="px-4 pt-8 font-bold text-xl">Custom Placeholder</div>
+<Input title="Text" placeholder="I am a custom placeholder" />
 
 <div class="px-4 pt-8 font-bold text-xl">
-	Different input types
+	Different Input Types
 	{#if isIframe}
-		<span class="text-xs opacity-50 ml-2">Please check the keyboard type on your mobile device.</span>
+		<span class="text-xs opacity-50 ml-2">Please check keyboard types on mobile devices</span>
 	{/if}
 </div>
-<Input title="Any text (conventional keyboard)" />
-<Input title="password" type="password" />
-<Input title="Number (arbitrarily)" type="number" />
-<Input title="Number (integer)" type="numeric" />
-<Input title="Number (allowing decimal points)" type="decimal" />
-<Input title="Mail" type="email" />
-<Input title="telephone number" type="tel" />
-<Input title="Url" type="url" />
-<Input title="Search" type="search" />
-<Input title="Text (not using virtual keyboard)" type="none" />
-
-<div class="px-4 pt-8 font-bold text-xl">Linear style</div>
-<Input title="text" inputStyle="line" />
-<Input title="Text (the line of the line is in the middle of the line)" inputStyle="line" lineTransition="center" />
-<Input title="Text (transition from the left side of the line)" inputStyle="line" lineTransition="left" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different transition time</div>
-<Input title="quick" duration="fast" />
-<Input title="normal" />
-<Input title="Slower" duration="slower" />
-<Input title="line normally" inputStyle="line" lineTransition="center" />
-<Input title="line slower" inputStyle="line" lineTransition="center" duration="slower" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different title positions</div>
-<Input title="Title (outside)" />
-<Input title="Title (inside)" titlePosition="in" />
-<Input title="Title (none)" titlePosition="none" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different input text position</div>
-<Input title="text" />
-<Input title="text" inputPosition="right" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different rounded style</div>
-<Input title="text" />
-<Input title="text" radius="xl" />
-<Input title="text" radius="full" />
-<Input title="text" radius="none" />
-<Input title="Linear style rounded corners are invalid" radius="full" inputStyle="line" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different vertical spacing</div>
-<Input placeholder="Spacing 0" py="0" inputStyle="line" />
-<Input placeholder="Spacing 0" py="0" inputStyle="line" />
-<Input placeholder="Spacing 0" py="0" inputStyle="line" />
-<Input placeholder="Spacing 4" py="4" inputStyle="line" />
-<Input placeholder="Spacing 4" py="4" inputStyle="line" />
-<Input placeholder="Spacing 4" py="4" inputStyle="line" />
-
-<div class="px-4 pt-8 font-bold text-xl">Removal</div>
-<Input title="text" clear />
-
-<div class="px-4 pt-8 font-bold text-xl">Disable</div>
-<Input title="text" disabled value="Disabled" />
-
-<div class="px-4 pt-8 font-bold text-xl">Different states</div>
-<Input title="success" state="success" />
-<Input title="warning" state="warning" />
-<Input title="error" state="error" />
-<Input title="info" state="info" />
-<Input title="warning & line" inputStyle="line" state="error" />
-<Input title="warning & line & Animation" inputStyle="line" state="error" lineTransition="center" />
+<Input title="Any Text (Regular Keyboard)" />
+<Input title="Password" type="password" />
+<Input title="Number (Any)" type="number" />
+<Input title="Number (Integer)" type="numeric" />
+<Input title="Number (Decimal Allowed)" type="decimal" />
+<Input title="Email" type="email" />
+<Input title="Phone Number" type="tel" />
+<Input title="URL" type="url" />
+<Input title="Search Content" type="search" />
+<Input title="Text (No Virtual Keyboard)" type="none" />
+
+<div class="px-4 pt-8 font-bold text-xl">Line Style</div>
+<Input title="Text" inputStyle="line" />
+<Input title="Text (Center Line Transition)" inputStyle="line" lineTransition="center" />
+<Input title="Text (Left Line Transition)" inputStyle="line" lineTransition="left" />
+
+<div class="px-4 pt-8 font-bold text-xl">Different Transition Times</div>
+<Input title="Fast Transition" duration="fast" />
+<Input title="Normal Transition" />
+<Input title="Slower Transition" duration="slower" />
+<Input title="Normal Line Transition" inputStyle="line" lineTransition="center" />
+<Input title="Slower Line Transition" inputStyle="line" lineTransition="center" duration="slower" />
+
+<div class="px-4 pt-8 font-bold text-xl">Different Title Positions</div>
+<Input title="Title (External)" />
+<Input title="Title (Internal)" titlePosition="in" />
+<Input title="Title (None)" titlePosition={null} />
+
+<div class="px-4 pt-8 font-bold text-xl">Different Input Text Positions</div>
+<Input title="Text" />
+<Input title="Text" inputPosition="right" />
+
+<div class="px-4 pt-8 font-bold text-xl">Different Border Radius Styles</div>
+<Input title="Text" />
+<Input title="Text" radius="xl" />
+<Input title="Text" radius="full" />
+<Input title="Text" radius="none" />
+<Input title="Line Style (Radius Invalid)" radius="full" inputStyle="line" />
+
+<div class="px-4 pt-8 font-bold text-xl">Different Vertical Spacing</div>
+<Input placeholder="Please enter text (Spacing 0)" py="0" inputStyle="line" />
+<Input placeholder="Please enter text (Spacing 0)" py="0" inputStyle="line" />
+<Input placeholder="Please enter text (Spacing 0)" py="0" inputStyle="line" />
+<Input placeholder="Please enter text (Spacing 4)" py="4" inputStyle="line" />
+<Input placeholder="Please enter text (Spacing 4)" py="4" inputStyle="line" />
+<Input placeholder="Please enter text (Spacing 4)" py="4" inputStyle="line" />
+
+<div class="px-4 pt-8 font-bold text-xl">With Clear Button</div>
+<Input title="Text" clear />
+
+<div class="px-4 pt-8 font-bold text-xl">Disabled</div>
+<Input title="Text" disabled value="Disabled" />
+
+<div class="px-4 pt-8 font-bold text-xl">Different States</div>
+<Input title="Success" state="success" />
+<Input title="Warning" state="warning" />
+<Input title="Error" state="error" />
+<Input title="Info" state="info" />
+<Input title="Warning & Line" inputStyle="line" state="error" />
+<Input title="Warning & Line & Animation" inputStyle="line" state="error" lineTransition="center" />
 <Input
-	title="Dynamic change status color"
+	title="Dynamic State Change"
 	type="tel"
-	placeholder="Please enter the 11 -digit mobile phone number"
+	placeholder="Please enter 11-digit phone number"
 	maxlength={11}
 	state={mobileState}
-	on:change={changeStateFun}
+	onchange={changeStateFun}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">Left with icon</div>
-<Input title="password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<div class="px-4 pt-8 font-bold text-xl">Left Icon</div>
+<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
 <Input
-	title="username"
+	title="Username"
 	label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
 	label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">Left with text</div>
-<Input title="account" label2="account" />
+<div class="px-4 pt-8 font-bold text-xl">Left Text</div>
+<Input title="Account" label2="Account" />
 
-<div class="px-4 pt-8 font-bold text-xl">The left with icon and text</div>
-<Input title="password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label2="password" />
+<div class="px-4 pt-8 font-bold text-xl">Left Icon and Text</div>
+<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label2="Password" />
 
-<div class="px-4 pt-8 font-bold text-xl">The left with text and icon</div>
-<Input title="password" type="password" label2="password" label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<div class="px-4 pt-8 font-bold text-xl">Left Text and Icon</div>
+<Input title="Password" type="password" label2="Password" label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
 
-<div class="px-4 pt-8 font-bold text-xl">left with icon & text & icon</div>
+<div class="px-4 pt-8 font-bold text-xl">Left Icon, Text, Icon</div>
 <Input
-	title="password"
+	title="Password"
 	type="password"
 	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label2="password"
+	label2="Password"
 	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">left with icon</div>
-<Input title="ID number" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
+<div class="px-4 pt-8 font-bold text-xl">Right Icon</div>
+<Input title="ID Card" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
 <Input
-	title="User"
+	title="Username"
 	label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
 	label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">right with text</div>
-<Input title="Amount" type="number" label5="$" />
+<div class="px-4 pt-8 font-bold text-xl">Right Text</div>
+<Input title="Amount" type="number" label5="Yuan" />
 
-<div class="px-4 pt-8 font-bold text-xl">right with iocn and text</div>
-<Input title="password" type="password" label4={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label5="password" />
+<div class="px-4 pt-8 font-bold text-xl">Right Icon and Text</div>
+<Input title="Password" type="password" label4={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label5="Password" />
 
-<div class="px-4 pt-8 font-bold text-xl">right with text and icon</div>
-<Input title="password" type="password" label5="password" label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<div class="px-4 pt-8 font-bold text-xl">Right Text and Icon</div>
+<Input title="Password" type="password" label5="Password" label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
 
-<div class="px-4 pt-8 font-bold text-xl">right with icon & text & icon</div>
+<div class="px-4 pt-8 font-bold text-xl">Right Icon, Text, Icon</div>
 <Input
-	title="password"
+	title="Password"
 	type="password"
 	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label5="password"
+	label5="Password"
 	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">left with text, right with icon</div>
-<Input label2="身份证号" label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} placeholder="请输入身份证号" />
+<div class="px-4 pt-8 font-bold text-xl">Left Text and Right Icon</div>
+<Input label2="ID Card" label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} placeholder="Please enter ID card number" />
 
-<div class="px-4 pt-8 font-bold text-xl">Six left and right all band</div>
+<div class="px-4 pt-8 font-bold text-xl">All Six Items</div>
 <Input
-	title="password"
+	title="Password"
 	type="password"
 	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label2="password"
+	label2="Password"
 	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
 	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label5="password"
+	label5="Password"
 	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
 />
 
-<div class="px-4 pt-8 font-bold text-xl">Prompt information and data item combination</div>
-<Input title="text" tip="Prompt information" />
-<Input title="text" data1="data1" />
-<Input title="text" data1="data1" data2="data2" />
-<Input title="text" data3="data3" />
-<Input title="text" data1="data1" tip="information" />
-<Input title="text" data3="data3" tip="information" />
+<div class="px-4 pt-8 font-bold text-xl">Tips and Data Items</div>
+<Input title="Text" tip="Tip message" />
+<Input title="Text" data1="Data item 1" />
+<Input title="Text" data1="Data item 1" data2="Data item 2" />
+<Input title="Text" data3="Data item 3" />
+<Input title="Text" data1="Data item 1" tip="Tip message" />
+<Input title="Text" data3="Data item 3" tip="Tip message" />
 
-<div class="px-4 pt-8 font-bold text-xl">Show all configuration items</div>
+<div class="px-4 pt-8 font-bold text-xl">All Configurable Items</div>
 <Input
-	title="title"
-	placeholder="Please enter the text"
+	title="Title"
+	placeholder="Please enter text"
 	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label2="label2"
+	label2="Label 2"
 	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
 	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
-	label5="label5"
+	label5="Label 5"
 	label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
-	data1="data1"
-	data2="data2"
-	data3="data3"
-	tip="tip"
+	data1="Data item 1"
+	data2="Data item 2"
+	data3="Data item 3"
+	tip="Tip message"
 	clear
 />
 
-<div class="px-4 pt-8 font-bold text-xl">label1 and label4 use slot</div>
-<Input title="Verification code" label1="slot" label4="slot">
-	<div slot="label1">
-		<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-			<path
-				d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
-				fill="#515151"
-			/>
-			<path
-				d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
-				fill="#515151"
-			/>
-		</svg>
-	</div>
-	<div slot="label4">
-		<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
-			<div class="px-2">Get code</div>
-		</Button>
-	</div>
+<div class="px-4 pt-8 font-bold text-xl">label1 and label4 Using Slots</div>
+<Input title="Verification Code">
+	{#snippet label1Child()}
+		<div>
+			<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+				<path
+					d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
+					fill="#515151"
+				/>
+				<path
+					d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
+					fill="#515151"
+				/>
+			</svg>
+		</div>
+	{/snippet}
+	{#snippet label4Child()}
+		<div>
+			<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
+				<div class="px-2">Get Code</div>
+			</Button>
+		</div>
+	{/snippet}
 </Input>
 
-<div class="px-4 pt-8 font-bold text-xl">Dynamic display</div>
+<div class="px-4 pt-8 font-bold text-xl">Dynamic Display</div>
 <Input
-	title="Dynamic display label5"
+	title="Dynamic label5"
 	type="tel"
-	placeholder="Please enter the 11 -digit mobile phone number"
+	placeholder="Please enter 11-digit phone number"
 	maxlength={11}
 	state={mobileState}
-	on:change={changeStateFun}
-	label5="slot"
+	onchange={changeStateFun}
 >
-	<div slot="label5">
-		{#if mobileLength === 11}
-			<Icon name="ri-check-fill" injClass="text-extend1" size={14} />
-		{:else if mobileLength === 0}
-			<!-- none -->
-		{:else}
-			<Icon name="ri-close-fill" injClass="text-[red]" size={14} />
-		{/if}
-	</div>
+	{#snippet label5Child()}
+		<div>
+			{#if mobileLength === 11}
+				<Icon name="ri-check-fill" injClass="text-success" size={14} />
+			{:else if mobileLength === 0}{:else}
+				<Icon name="ri-close-fill" injClass="text-error" size={14} />
+			{/if}
+		</div>
+	{/snippet}
 </Input>
 
-<div class="px-4 pt-8 font-bold text-xl">bind value</div>
-<Input title="text" bind:value />
-<Button on:click={() => (visible = true)}>Display the current value</Button>
-<Toast bind:visible message={`Currently entering text:${value}`} />
+<div class="px-4 pt-8 font-bold text-xl">Bind Value</div>
+<Input title="Text" bind:value />
+<Button onclick={() => (visible = true)}>Show Current Value</Button>
+<Toast bind:visible message={`Current input text: ${value}`} />
 
-<div class="px-4 pt-8 font-bold text-xl">click label4 trigger event</div>
+<div class="px-4 pt-8 font-bold text-xl">Click label4 Trigger Event</div>
 <Input
-	title="ID number"
+	title="ID Card"
 	placeholder={placeholderIdCard}
 	bind:value={IdCard}
 	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
-	on:clicklabel4={clickLabel4Fun}
+	onclickLabel4={clickLabel4Fun}
 	clear
 />
 
-<div class="px-4 pt-8 font-bold text-xl">textarea</div>
-<Input placeholder="Please enter the content" type="textarea" />
+<div class="px-4 pt-8 font-bold text-xl">Textarea</div>
+<Input placeholder="Please enter content" type="textarea" />
 
-<div class="px-4 pt-8 font-bold text-xl">textarea automatic height</div>
-<Input placeholder="Please enter the content" type="textarea" autosize />
+<div class="px-4 pt-8 font-bold text-xl">Textarea Auto Height</div>
+<Input placeholder="Please enter content" type="textarea" autosize />
 
-<div class="px-4 pt-4 font-bold text-xl">Listen for keydown event</div>
+<div class="px-4 pt-4 font-bold text-xl">Listen to Keydown Event</div>
 <div class="px-4 pt-4">You pressed {key}</div>
-<Input placeholder="Please enter content" on:keydown={keydownFun} />
+<Input placeholder="Please enter content" onkeydown={v => (key = v)} />

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

@@ -3,34 +3,34 @@
 	import { getContext } from 'svelte';
 	import { Input, Button, Icon, Toast } from '../../../../../packages/stdf/components';
 
-	let value = '初始文本';
-	let visible = false;
+	let value = $state('初始文本');
+	let visible = $state(false);
 
-	let IdCard = '';
+	let IdCard = $state('');
 
 	const isIframe = getContext('iframe') === '1'; //判断是否是iframe
 
-	$: placeholderIdCard = IdCard === '' ? '请输入身份证号' : '';
+	let placeholderIdCard = $state('');
+	$effect(() => {
+		placeholderIdCard = IdCard === '' ? '请输入身份证号' : '';
+	});
 	const clickLabel4Fun = () => {
 		placeholderIdCard = '两秒后识别完毕......';
 		setTimeout(() => {
 			IdCard = '1234567890XXX-XX';
 		}, 2000);
 	};
-	let mobileLength = 0;
-	const changeStateFun = e => {
-		mobileLength = e.detail.length;
+	let mobileLength = $state(0);
+	const changeStateFun = v => {
+		mobileLength = v.length;
 	};
 	/**
 	 * @type {'success' | 'warning' | 'error' | 'info'| 'theme'}
 	 */
-	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
+	let mobileState = $derived(mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error');
 
 	// 按键 key
-	let key = '';
-	const keydownFun = e => {
-		key = e.detail;
-	};
+	let key = $state('');
 </script>
 
 <div class="px-4 pt-8 font-bold text-xl">基础用法</div>
@@ -45,7 +45,7 @@
 <div class="px-4 pt-8 font-bold text-xl">
 	不同输入类型
 	{#if isIframe}
-		<span class="text-xs opacity-50 ml-2">请在移动设备查看键盘类型。</span>
+		<span class="text-xs opacity-50 ml-2">请在移动设备查看键盘类型</span>
 	{/if}
 </div>
 <Input title="任意文本（常规键盘）" />
@@ -74,7 +74,7 @@
 <div class="px-4 pt-8 font-bold text-xl">不同标题位置</div>
 <Input title="标题（外部）" />
 <Input title="标题（内部）" titlePosition="in" />
-<Input title="标题（无）" titlePosition="none" />
+<Input title="标题（无）" titlePosition={null} />
 
 <div class="px-4 pt-8 font-bold text-xl">不同输入文字位置</div>
 <Input title="文本" />
@@ -108,7 +108,7 @@
 <Input title="信息" state="info" />
 <Input title="警告&线性" inputStyle="line" state="error" />
 <Input title="警告&线性&动画" inputStyle="line" state="error" lineTransition="center" />
-<Input title="动态改变状态色" type="tel" placeholder="请输入11位手机号" maxlength={11} state={mobileState} on:change={changeStateFun} />
+<Input title="动态改变状态色" type="tel" placeholder="请输入11位手机号" maxlength={11} state={mobileState} onchange={changeStateFun} />
 
 <div class="px-4 pt-8 font-bold text-xl">左侧带图标</div>
 <Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
@@ -203,50 +203,46 @@
 />
 
 <div class="px-4 pt-8 font-bold text-xl">label1 和 label4 使用插槽</div>
-<Input title="验证码" label1="slot" label4="slot">
-	<div slot="label1">
-		<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-			<path
-				d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
-				fill="#515151"
-			/>
-			<path
-				d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
-				fill="#515151"
-			/>
-		</svg>
-	</div>
-	<div slot="label4">
-		<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
-			<div class="px-2">获取验证码</div>
-		</Button>
-	</div>
+<Input title="验证码">
+	{#snippet label1Child()}
+		<div>
+			<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+				<path
+					d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
+					fill="#515151"
+				/>
+				<path
+					d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
+					fill="#515151"
+				/>
+			</svg>
+		</div>
+	{/snippet}
+	{#snippet label4Child()}
+		<div>
+			<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
+				<div class="px-2">获取验证码</div>
+			</Button>
+		</div>
+	{/snippet}
 </Input>
 
 <div class="px-4 pt-8 font-bold text-xl">动态显示</div>
-<Input
-	title="动态显示 label5"
-	type="tel"
-	placeholder="请输入11位手机号"
-	maxlength={11}
-	state={mobileState}
-	on:change={changeStateFun}
-	label5="slot"
->
-	<div slot="label5">
-		{#if mobileLength === 11}
-			<Icon name="ri-check-fill" injClass="text-extend1" size={14} />
-		{:else if mobileLength === 0}
-			<!-- none -->
-		{:else}
-			<Icon name="ri-close-fill" injClass="text-[red]" size={14} />
-		{/if}
-	</div>
+<Input title="动态显示 label5" type="tel" placeholder="请输入11位手机号" maxlength={11} state={mobileState} onchange={changeStateFun}>
+	{#snippet label5Child()}
+		<div>
+			{#if mobileLength === 11}
+				<Icon name="ri-check-fill" injClass="text-success" size={14} />
+			{:else if mobileLength === 0}{:else}
+				<Icon name="ri-close-fill" injClass="text-error" size={14} />
+			{/if}
+		</div>
+	{/snippet}
 </Input>
 
 <div class="px-4 pt-8 font-bold text-xl">绑定 value</div>
 <Input title="文本" bind:value />
-<Button on:click={() => (visible = true)}>显示当前值</Button>
+<Button onclick={() => (visible = true)}>显示当前值</Button>
 <Toast bind:visible message={`当前输入文本：${value}`} />
 
 <div class="px-4 pt-8 font-bold text-xl">点击 label4 触发事件</div>
@@ -255,7 +251,7 @@
 	placeholder={placeholderIdCard}
 	bind:value={IdCard}
 	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
-	on:clicklabel4={clickLabel4Fun}
+	onclickLabel4={clickLabel4Fun}
 	clear
 />
 
@@ -267,4 +263,4 @@
 
 <div class="px-4 pt-4 font-bold text-xl">监听 keydown 事件</div>
 <div class="px-4 pt-4">你按下了 {key}</div>
-<Input placeholder="请输入内容" on:keydown={keydownFun} />
+<Input placeholder="请输入内容" onkeydown={v => (key = v)} />

doc/components/input/api.md

@@ -1,66 +1,66 @@
 ## Input Props
 
-| 属性              | 类型               | 默认值  | 可选值                                                                                        | 必传 | 说明                            |
-| ----------------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- | ---- | ------------------------------- |
-| title             | String/slot        | ''      | -                                                                                             | N    | 标题内容。                      |
-| placeholder       | String             | ''      | -                                                                                             | N    | 输入框提示文本。                |
-| titlePosition     | String             | 'out'   | 'out'/'in'/'none'                                                                             | N    | 标题位置。                      |
-| inputPosition     | String             | 'left'  | 'left'/'right'                                                                                | N    | 输入框文字位置。                |
-| radius            | String             | 'base'  | 'none'/'base'/'xl'/'full'                                                                     | N    | 圆角风格。                      |
-| inputStyle        | String             | 'block' | 'block'/'line'                                                                                | N    | 输入框风格。                    |
-| py                | String             | '2'     | '0'/'0.5'/'1'/'2'/'3'/'4'/'6'                                                                 | N    | 垂直间距。                      |
-| lineTransition    | String             | 'none'  | 'none'/'center'/'left'                                                                        | N    | 线性过渡位置。                  |
-| duration          | String             | 'base'  | 'fast'/'base'/'slow'/'slower'                                                                 | N    | 过渡时间。                      |
-| value             | String             | ''      | -                                                                                             | N    | 输入框值。                      |
-| type              | String             | 'text'  | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea' | N    | 输入框类型。                    |
-| inputmode         | String             | ''      | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'                                | N    | 指定输入的数据类型。            |
-| state             | String             | 'theme' | 'theme'/'success'/'warning'/'error'/'info'                                                    | N    | 状态。                          |
-| maxlength         | Number             | 24      | -                                                                                             | N    | 最多可输入文本长度。            |
-| rows              | Number             | 2       | -                                                                                             | N    | textarea 时行数。               |
-| autosize          | Boolean            | false   | true/false                                                                                    | N    | textarea 时是否自动调整高度。   |
-| textareaMaxlength | Number             | 200     | -                                                                                             | N    | textarea 时最多可输入文本长度。 |
-| clear             | Boolean            | false   | true/false                                                                                    | N    | 是否可清空。                    |
-| autocomplete      | Boolean            | true    | true/false                                                                                    | N    | 是否开启自动填充功能。          |
-| disabled          | Boolean            | false   | true/false                                                                                    | N    | 是否禁用。                      |
-| label1            | String/Object/slot | ''      | ''/Icon Props/slot                                                                            | N    | 标签 1 内容。                   |
-| label2            | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 标签 2 内容。                   |
-| label3            | String/Object/slot | ''      | ''/Icon Props/slot                                                                            | N    | 标签 3 内容。                   |
-| label4            | String/Object/slot | ''      | ''/Icon Props/slot                                                                            | N    | 标签 4 内容。                   |
-| label5            | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 标签 5 内容。                   |
-| label6            | String/Object/slot | ''      | ''/Icon Props/slot                                                                            | N    | 标签 6 内容。                   |
-| tip               | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 提示信息内容。                  |
-| data1             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 1 内容。                 |
-| data2             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 2 内容。                 |
-| data3             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 3 内容。                 |
+| 名称              | 类型                                                                                                      | 默认值    | 必传 | 说明                            |
+| ----------------- | --------------------------------------------------------------------------------------------------------- | --------- | ---- | ------------------------------- |
+| title             | `string`                                                                                                  | `''`      | N    | 标题内容。                      |
+| titlePosition     | `'in'\|'out'\|null`                                                                                       | `'out'`   | N    | 标题位置。                      |
+| inputPosition     | `'left'\|'right'`                                                                                         | `'left'`  | N    | 输入框文字位置。                |
+| placeholder       | `string`                                                                                                  | `''`      | N    | 输入框提示文本。                |
+| radius            | `'none'\|'base'\|'xl'\|'full'`                                                                            | `'base'`  | N    | 圆角风格。                      |
+| inputStyle        | `'block'\|'line'`                                                                                         | `'block'` | N    | 输入框风格。                    |
+| lineTransition    | `string`                                                                                                  | `'none'`  | N    | 线性过渡位置。                  |
+| duration          | `'fast'\|'base'\|'slow'\|'slower'`                                                                        | `'base'`  | N    | 过渡时间。                      |
+| autocomplete      | `boolean`                                                                                                 | `true`    | N    | 是否开启自动填充功能。          |
+| py                | `'0'\|'0.5'\|'1'\|'2'\|'3'\|'4'\|'6'`                                                                     | `'2'`     | N    | 垂直间距。                      |
+| disabled          | `boolean`                                                                                                 | `false`   | N    | 是否禁用。                      |
+| state             | `'theme'\|'success'\|'warning'\|'error'\|'info'`                                                          | `'theme'` | N    | 状态。                          |
+| type              | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|'password'\|'number'\|'textarea'` | `'text'`  | N    | 输入框类型。                    |
+| inputmode         | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|''`                               | `''`      | N    | 指定输入的数据类型。            |
+| maxlength         | `number`                                                                                                  | `24`      | N    | 最多可输入文本长度。            |
+| textareaMaxlength | `number`                                                                                                  | `200`     | N    | textarea 时最多可输入文本长度。 |
+| rows              | `number`                                                                                                  | `2`       | N    | textarea 时行数。               |
+| autosize          | `boolean`                                                                                                 | `false`   | N    | textarea 时是否自动调整高度。   |
+| label1            | `Icon\|null`                                                                                              | `null`    | N    | 标签 1 内容。                   |
+| label2            | `string\|null`                                                                                            | `null`    | N    | 标签 2 内容。                   |
+| label3            | `Icon\|null`                                                                                              | `null`    | N    | 标签 3 内容。                   |
+| label4            | `Icon\|null`                                                                                              | `null`    | N    | 标签 4 内容。                   |
+| label5            | `string\|null`                                                                                            | `null`    | N    | 标签 5 内容。                   |
+| label6            | `Icon\|null`                                                                                              | `null`    | N    | 标签 6 内容。                   |
+| tip               | `string\|null`                                                                                            | `null`    | N    | 提示信息内容。                  |
+| data1             | `string\|null`                                                                                            | `null`    | N    | 数据项 1 内容。                 |
+| data2             | `string\|null`                                                                                            | `null`    | N    | 数据项 2 内容。                 |
+| data3             | `string\|null`                                                                                            | `null`    | N    | 数据项 3 内容。                 |
+| value             | `string`                                                                                                  | `''`      | N    | 输入框值。                      |
+| clear             | `boolean`                                                                                                 | `false`   | N    | 是否可清空。                    |
 
 ## Input Events
 
-| 事件        | 参数                                              | 说明                     |
-| ----------- | ------------------------------------------------- | ------------------------ |
-| focus       | event：事件对象，其中 detail 表示当前 value。     | 获得焦点时触发。         |
-| blur        | event：事件对象，其中 detail 表示当前 value。     | 失去焦点时触发。         |
-| change      | event：事件对象，其中 detail 表示当前 value。     | 输入框值发生变化时触发。 |
-| clear       | -                                                 | 清空按钮点击时触发。     |
-| clicklabel1 | -                                                 | 点击标签 1 时触发。      |
-| clicklabel2 | -                                                 | 点击标签 2 时触发。      |
-| clicklabel3 | -                                                 | 点击标签 3 时触发。      |
-| clicklabel4 | -                                                 | 点击标签 4 时触发。      |
-| clicklabel5 | -                                                 | 点击标签 5 时触发。      |
-| clicklabel6 | -                                                 | 点击标签 6 时触发。      |
-| keydown     | event：事件对象，其中 detail 表示按下的按键 key。 | 按下键盘时触发。         |
+| 名称          | 类型                      | 参数                 | 说明                     |
+| ------------- | ------------------------- | -------------------- | ------------------------ |
+| onfocus       | `(value: string) => void` | value - 当前 value   | 获得焦点时触发。         |
+| onblur        | `(value: string) => void` | value - 当前 value   | 失去焦点时触发。         |
+| onchange      | `(value: string) => void` | value - 当前 value   | 输入框值发生变化时触发。 |
+| onclear       | `() => void`              | -                    | 清空按钮点击时触发。     |
+| onclickLabel1 | `() => void`              | -                    | 点击标签 1 时触发。      |
+| onclickLabel2 | `() => void`              | -                    | 点击标签 2 时触发。      |
+| onclickLabel3 | `() => void`              | -                    | 点击标签 3 时触发。      |
+| onclickLabel4 | `() => void`              | -                    | 点击标签 4 时触发。      |
+| onclickLabel5 | `() => void`              | -                    | 点击标签 5 时触发。      |
+| onclickLabel6 | `() => void`              | -                    | 点击标签 6 时触发。      |
+| onkeydown     | `(key: string) => void`   | key - 按下的按键 key | 按下键盘时触发。         |
 
-## Input Slots
+## Input Snippets
 
-| 名称   | 说明                |
-| ------ | ------------------- |
-| title  | 标题插槽内容。      |
-| data1  | 数据项 1 插槽内容。 |
-| data2  | 数据项 2 插槽内容。 |
-| data3  | 数据项 3 插槽内容。 |
-| label1 | 标签 1 插槽内容。   |
-| label2 | 标签 2 插槽内容。   |
-| label3 | 标签 3 插槽内容。   |
-| label4 | 标签 4 插槽内容。   |
-| label5 | 标签 5 插槽内容。   |
-| label6 | 标签 6 插槽内容。   |
-| tip    | 提示信息插槽内容。  |
+| 名称        | 类型      | 参数 | 说明                |
+| ----------- | --------- | ---- | ------------------- |
+| titleChild  | `Snippet` | -    | 标题插槽内容。      |
+| data1Child  | `Snippet` | -    | 数据项 1 插槽内容。 |
+| data2Child  | `Snippet` | -    | 数据项 2 插槽内容。 |
+| data3Child  | `Snippet` | -    | 数据项 3 插槽内容。 |
+| label1Child | `Snippet` | -    | 标签 1 插槽内容。   |
+| label2Child | `Snippet` | -    | 标签 2 插槽内容。   |
+| label3Child | `Snippet` | -    | 标签 3 插槽内容。   |
+| label4Child | `Snippet` | -    | 标签 4 插槽内容。   |
+| label5Child | `Snippet` | -    | 标签 5 插槽内容。   |
+| label6Child | `Snippet` | -    | 标签 6 插槽内容。   |
+| tipChild    | `Snippet` | -    | 提示信息插槽内容。  |

doc/components/input/api_en.md

@@ -1,66 +1,66 @@
 ## Input Props
 
-| Property Name     | Type               | Default Value | Optional Values                                                                               | Required | Description                                                   |
-| ----------------- | ------------------ | ------------- | --------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------- |
-| title             | String/slot        | ''            | -                                                                                             | No       | The title content.                                            |
-| placeholder       | String             | ''            | -                                                                                             | No       | The placeholder text for the input field.                     |
-| titlePosition     | String             | 'out'         | 'out'/'in'/'none'                                                                             | No       | The position of the title.                                    |
-| inputPosition     | String             | 'left'        | 'left'/'right'                                                                                | No       | The position of the input text.                               |
-| radius            | String             | 'base'        | 'none'/'base'/'xl'/'full'                                                                     | No       | The style of the corner radius.                               |
-| inputStyle        | String             | 'block'       | 'block'/'line'                                                                                | No       | The style of the input field.                                 |
-| py                | String             | '2'           | '0'/'0.5'/'1'/'2'/'3'/'4'/'6'                                                                 | No       | The vertical spacing.                                         |
-| lineTransition    | String             | 'none'        | 'none'/'center'/'left'                                                                        | No       | The position of linear transition.                            |
-| duration          | String             | 'base'        | 'fast'/'base'/'slow'/'slower'                                                                 | No       | The transition duration.                                      |
-| value             | String             | ''            | -                                                                                             | No       | The value of the input field.                                 |
-| type              | String             | 'text'        | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea' | No       | The type of the input field.                                  |
-| inputmode         | String             | ''            | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'                                | No       | The data type to be entered.                                  |
-| state             | String             | 'theme'       | 'theme'/'success'/'warning'/'error'/'info'                                                    | No       | The state of the input field.                                 |
-| maxlength         | Number             | 24            | -                                                                                             | No       | The maximum number of characters allowed.                     |
-| rows              | Number             | 2             | -                                                                                             | No       | The number of rows when the input is a text area.             |
-| autosize          | Boolean            | false         | true/false                                                                                    | No       | Whether or not the text area automatically adjust its height. |
-| textareaMaxlength | Number             | 200           | -                                                                                             | No       | The maximum number of characters allowed in the text area.    |
-| clear             | Boolean            | false         | true/false                                                                                    | No       | Whether or not it is possible to clear the input field.       |
-| autocomplete      | Boolean            | true          | true/false                                                                                    | No       | Whether or not to enable auto-fill functionality.             |
-| disabled          | Boolean            | false         | true/false                                                                                    | No       | Whether or not the input field is disabled.                   |
-| label1            | String/Object/slot | ''            | ''/Icon Props/slot                                                                            | No       | The contents of label 1.                                      |
-| label2            | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of label 2.                                      |
-| label3            | String/Object/slot | ''            | ''/Icon Props/slot                                                                            | No       | The contents of label 3.                                      |
-| label4            | String/Object/slot | ''            | ''/Icon Props/slot                                                                            | No       | The contents of label 4.                                      |
-| label5            | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of label 5.                                      |
-| label6            | String/Object/slot | ''            | ''/Icon Props/slot                                                                            | No       | The contents of label 6.                                      |
-| tip               | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of the hint message.                             |
-| data1             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 1.                                  |
-| data2             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 2.                                  |
-| data3             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 3.                                  |
+| Name              | Type                                                                                                      | Default   | Required | Description                       |
+| ----------------- | --------------------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------- |
+| title             | `string`                                                                                                  | `''`      | N        | Title content.                    |
+| titlePosition     | `'in'\|'out'\|null`                                                                                       | `'out'`   | N        | Title position.                   |
+| inputPosition     | `'left'\|'right'`                                                                                         | `'left'`  | N        | Input text position.              |
+| placeholder       | `string`                                                                                                  | `''`      | N        | Input placeholder text.           |
+| radius            | `'none'\|'base'\|'xl'\|'full'`                                                                            | `'base'`  | N        | Border radius style.              |
+| inputStyle        | `'block'\|'line'`                                                                                         | `'block'` | N        | Input box style.                  |
+| lineTransition    | `string`                                                                                                  | `'none'`  | N        | Linear transition position.       |
+| duration          | `'fast'\|'base'\|'slow'\|'slower'`                                                                        | `'base'`  | N        | Transition duration.              |
+| autocomplete      | `boolean`                                                                                                 | `true`    | N        | Whether to enable autocomplete.   |
+| py                | `'0'\|'0.5'\|'1'\|'2'\|'3'\|'4'\|'6'`                                                                     | `'2'`     | N        | Vertical padding.                 |
+| disabled          | `boolean`                                                                                                 | `false`   | N        | Whether disabled.                 |
+| state             | `'theme'\|'success'\|'warning'\|'error'\|'info'`                                                          | `'theme'` | N        | State.                            |
+| type              | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|'password'\|'number'\|'textarea'` | `'text'`  | N        | Input type.                       |
+| inputmode         | `'text'\|'decimal'\|'email'\|'none'\|'numeric'\|'search'\|'tel'\|'url'\|''`                               | `''`      | N        | Specify input data type.          |
+| maxlength         | `number`                                                                                                  | `24`      | N        | Maximum input text length.        |
+| textareaMaxlength | `number`                                                                                                  | `200`     | N        | Maximum text length for textarea. |
+| rows              | `number`                                                                                                  | `2`       | N        | Number of rows for textarea.      |
+| autosize          | `boolean`                                                                                                 | `false`   | N        | Auto adjust height for textarea.  |
+| label1            | `Icon\|null`                                                                                              | `null`    | N        | Label 1 content.                  |
+| label2            | `string\|null`                                                                                            | `null`    | N        | Label 2 content.                  |
+| label3            | `Icon\|null`                                                                                              | `null`    | N        | Label 3 content.                  |
+| label4            | `Icon\|null`                                                                                              | `null`    | N        | Label 4 content.                  |
+| label5            | `string\|null`                                                                                            | `null`    | N        | Label 5 content.                  |
+| label6            | `Icon\|null`                                                                                              | `null`    | N        | Label 6 content.                  |
+| tip               | `string\|null`                                                                                            | `null`    | N        | Tip message content.              |
+| data1             | `string\|null`                                                                                            | `null`    | N        | Data item 1 content.              |
+| data2             | `string\|null`                                                                                            | `null`    | N        | Data item 2 content.              |
+| data3             | `string\|null`                                                                                            | `null`    | N        | Data item 3 content.              |
+| value             | `string`                                                                                                  | `''`      | N        | Input value.                      |
+| clear             | `boolean`                                                                                                 | `false`   | N        | Whether clearable.                |
 
 ## Input Events
 
-| Event Name  | Parameters                                                            | Description                                             |
-| ----------- | --------------------------------------------------------------------- | ------------------------------------------------------- |
-| focus       | event: event object, with 'detail' indicating the current value       | Triggered when the input field receives focus.          |
-| blur        | event: event object, with 'detail' indicating the current value       | Triggered when the input field loses focus.             |
-| change      | event: event object, with 'detail' indicating the current value       | Triggered when the value of the input field is changed. |
-| clear       | -                                                                     | Triggered when the clear button is clicked.             |
-| clicklabel1 | -                                                                     | Triggered when label 1 is clicked.                      |
-| clicklabel2 | -                                                                     | Triggered when label 2 is clicked.                      |
-| clicklabel3 | -                                                                     | Triggered when label 3 is clicked.                      |
-| clicklabel4 | -                                                                     | Triggered when label 4 is clicked.                      |
-| clicklabel5 | -                                                                     | Triggered when label 5 is clicked.                      |
-| clicklabel6 | -                                                                     | Triggered when label 6 is clicked.                      |
-| keydown     | event: Event object, where detail represents the key that is pressed. | Triggered when the keyboard is pressed.                 |
+| Name          | Type                      | Parameters            | Description                             |
+| ------------- | ------------------------- | --------------------- | --------------------------------------- |
+| onfocus       | `(value: string) => void` | value - current value | Triggered when input gets focus.        |
+| onblur        | `(value: string) => void` | value - current value | Triggered when input loses focus.       |
+| onchange      | `(value: string) => void` | value - current value | Triggered when input value changes.     |
+| onclear       | `() => void`              | -                     | Triggered when clear button is clicked. |
+| onclickLabel1 | `() => void`              | -                     | Triggered when Label 1 is clicked.      |
+| onclickLabel2 | `() => void`              | -                     | Triggered when Label 2 is clicked.      |
+| onclickLabel3 | `() => void`              | -                     | Triggered when Label 3 is clicked.      |
+| onclickLabel4 | `() => void`              | -                     | Triggered when Label 4 is clicked.      |
+| onclickLabel5 | `() => void`              | -                     | Triggered when Label 5 is clicked.      |
+| onclickLabel6 | `() => void`              | -                     | Triggered when Label 6 is clicked.      |
+| onkeydown     | `(key: string) => void`   | key - pressed key     | Triggered when keyboard key is pressed. |
 
-## Input Slots
+## Input Snippets
 
-| Slot Name | Description                                      |
-| --------- | ------------------------------------------------ |
-| title     | Content of the title slot.                       |
-| data1     | Content of data item 1 slot.                     |
-| data2     | Content of data item 2 slot.                     |
-| data3     | Content of data item 3 slot.                     |
-| label1    | Content of label 1 slot.                         |
-| label2    | Content of label 2 slot.                         |
-| label3    | Content of label 3 slot.                         |
-| label4    | Content of label 4 slot.                         |
-| label5    | Content of label 5 slot.                         |
-| label6    | Content of label 6 slot.                         |
-| tip       | Content of the tip slot (informational message). |
+| Name        | Type      | Parameters | Description               |
+| ----------- | --------- | ---------- | ------------------------- |
+| titleChild  | `Snippet` | -          | Title slot content.       |
+| data1Child  | `Snippet` | -          | Data item 1 slot content. |
+| data2Child  | `Snippet` | -          | Data item 2 slot content. |
+| data3Child  | `Snippet` | -          | Data item 3 slot content. |
+| label1Child | `Snippet` | -          | Label 1 slot content.     |
+| label2Child | `Snippet` | -          | Label 2 slot content.     |
+| label3Child | `Snippet` | -          | Label 3 slot content.     |
+| label4Child | `Snippet` | -          | Label 4 slot content.     |
+| label5Child | `Snippet` | -          | Label 5 slot content.     |
+| label6Child | `Snippet` | -          | Label 6 slot content.     |
+| tipChild    | `Snippet` | -          | Tip message slot content. |

doc/components/input/guide.md

@@ -10,26 +10,26 @@
 
 针对移动端交互特性，Input 组件主要用于输入文本，原生 input 标签的 type 值 file、radio、date 等有其他组件支持或交互方式，同时 type 与 inputmode 有高度重合性，type 的可选值在 inputmode 的基础上增加了 password 与 number。**使用时一般只需要传入 type 即可，当然你也可以单独设置 inputmode。**
 
-因为在组件内部对输入内容做了一些处理，渲染为页面的最终 input 时 type 除了 password 外都会被转成 text，如需要请自行转换类型。
+因为在组件内部对输入内容做了一些处理，渲染为页面的最终 input 时 type 除了 password 外输入框内都会被转成 text，获取返回值时请自行转换类型。
 
 ## 监听按键事件
 
-Input 组件内部监听了键盘按键事件，当按下任意按键时会触发 keydown 事件，事件对象中 detail 属性表示按下的按键 key（备注：keyCode 已弃用，参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode) ），可根据此值做一些特殊处理。参考示例。
+Input 组件内部监听了键盘按键事件，当按下任意按键时会触发 onkeydown 事件，返回的 `value` 表示按下的按键 key（备注：keyCode 已弃用，参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode) ），可根据此值做一些特殊处理。参考示例。
 
 ## 可配置项
 
 Input 组件的所有可配置项位置如下图所示。
 
-<img src="input.jpg" alt="input config" title="输入框配置项">
+<img src="input.png" alt="input config" title="输入框配置项">
 
 一般 label1、label3、label4、label6 用 Icon Props，label2 与 label5 用文字。
 
-当然，如果这些配置项不能满足需求，它们也都支持使用插槽渲染，请参考示例。
+当然，如果这些配置项不能满足需求，它们也都支持使用 Snippet渲染，请参考示例。
 
 ## textarea
 
-textareaMaxlength、rows、autosize 三个参数只在 type 为“textarea”时生效，而且当 autosize 为 true 时 rows 将失效。
+textareaMaxlength、rows、autosize 三个参数只在 type 为 'textarea' 时生效，而且当 autosize 为 true 时 rows 将失效。
 
-## 输入优化
+## CJK 输入
 
-输入中日韩文等各种包含“选字”环节的文字过程中，组件内部在对输入长度、内容等信息处理时，是在**内容上屏后**才做校验。
+输入中日韩文等各种包含【选字】环节的文字过程中，组件内部在对输入长度、内容等信息处理时，是在**内容上屏后**才做校验。

doc/components/input/guide_en.md

@@ -1,35 +1,35 @@
-> Input uses the icon ri-close-circle-fill, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+> Input uses the icon ri-close-circle-fill. Please ensure this icon is included in your project's symbol.svg file. For detailed information, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
 
 ## title and placeholder
 
-If the title is passed in but the placeholder is not, the Input component will use "Please enter + title" as the default placeholder. Both title and placeholder should be passed in at least one.
+If title is provided but placeholder is not, the Input component internally uses "Please enter + title" as the default placeholder. **At least one of title or placeholder must be provided**.
 
 ## type and inputmode
 
-Please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) for inputmode.
+For inputmode, please refer to [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode).
 
-Considering mobile interaction characteristics, the Input component is mainly used for text input. Other components support or interact with input tags with type values ​​such as file, radio, and date. At the same time, type and inputmode have high overlappingness. The optional values ​​of type add password and number on the basis of inputmode. Generally, only type needs to be entered. Of course, you can also set inputmode separately.
+Considering mobile interaction characteristics, the Input component is mainly used for text input. Native input tag type values like file, radio, date, etc. have other component support or interaction methods. Additionally, type and inputmode have high overlap, with type adding password and number options on top of inputmode's base values. **Generally, you only need to pass type, though you can set inputmode separately if needed.**
 
-Because some processing is done on the input content inside the component, except for password, type will be converted to text when rendering the final input on the page. If needed, please convert the type yourself.
+Because the component internally processes input content, when rendering the final input to the page, all type values except password will be converted to text. Please convert the return value type as needed.
 
-## Listening for Key Events
+## Listening to Key Events
 
-The Input component internally listens for keyboard key events. When any key is pressed, the keydown event is triggered. The detail property in the event object represents the key that was pressed (Note: keyCode is deprecated, refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)). You can use this value to perform special actions. Please refer to the example.
+The Input component internally listens to keyboard events. When any key is pressed, it triggers the onkeydown event, returning a `value` representing the pressed key (Note: keyCode is deprecated, refer to [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode)). You can handle this value for special processing. See examples.
 
-## Configurable Items
+## Configuration Options
 
-The location of all configurable items of the Input component is shown in the following figure.
+All configurable items of the Input component are shown in the image below.
 
-<img src="input.jpg" alt="input config" title="输入框配置项">
+<img src="input_en.png" alt="input config" title="Input Configuration Items">
 
-Normally, Icon Props is used for label1, label3, label4, and label6, and text is used for label2 and label5.
+Typically, label1, label3, label4, and label6 use Icon Props, while label2 and label5 use text.
 
-Of course, if these configuration items cannot meet the requirements, they also support rendering with slots. Please refer to the example.
+Of course, if these configuration options don't meet your needs, they all support Snippet rendering. Please refer to the examples.
 
-## Textarea
+## textarea
 
-The three parameters textareaMaxlength, rows, and autosize only take effect when the type is "textarea", and rows will be invalid when autosize is true.
+The parameters textareaMaxlength, rows, and autosize only take effect when type is 'textarea', and when autosize is true, rows will be ineffective.
 
-## Input Optimization
+## CJK Input
 
-During the input process of various texts containing "select word" links such as Chinese, Japanese, and Korean, the component verifies the input length and content information only after it is displayed on the screen.
+When inputting Chinese, Japanese, Korean, or other text that involves a character selection process, the component internally validates input length, content, and other information **only after the content is committed to the screen**.

packages/stdf/components/input/Input.svelte

@@ -16,20 +16,20 @@
 		inputPosition = 'left',
 		placeholder = '',
 		radius = 'base',
-		label1 = '',
-		label2 = '',
-		label3 = '',
-		label4 = '',
-		label5 = '',
-		label6 = '',
-		tip = '',
-		data1 = '',
-		data2 = '',
-		data3 = '',
-		value = '',
+		label1 = null,
+		label2 = null,
+		label3 = null,
+		label4 = null,
+		label5 = null,
+		label6 = null,
+		tip = null,
+		data1 = null,
+		data2 = null,
+		data3 = null,
+		value = $bindable(''),
 		clear = false,
 		inputStyle = 'block',
-		lineTransition = 'none',
+		lineTransition = null,
 		duration = 'base',
 		autocomplete = true,
 		py = '2',
@@ -45,12 +45,12 @@
 		onblur,
 		onchange,
 		onclear,
-		onclicklabel1,
-		onclicklabel2,
-		onclicklabel3,
-		onclicklabel4,
-		onclicklabel5,
-		onclicklabel6,
+		onclickLabel1,
+		onclickLabel2,
+		onclickLabel3,
+		onclickLabel4,
+		onclickLabel5,
+		onclickLabel6,
 		onkeydown,
 		titleChild,
 		data1Child,
@@ -220,22 +220,6 @@
 		onclear && onclear();
 	};
 
-	// 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 => {
@@ -245,89 +229,55 @@
 	};
 </script>
 
-<div class={`px-2 ${pyObj[py] || pyObj['2']}`}>
+<div class="px-2 {pyObj[py] || pyObj['2']}">
 	<label>
-		<div class={`flex px-2 ${title === '' ? 'justify-end' : 'justify-between'}`}>
+		<div class="flex px-2 {title === '' ? 'justify-end' : 'justify-between'}">
 			{#if titlePosition === 'out'}
 				{#if titleChild}
 					{@render titleChild?.()}
-				{:else if title === ''}
-					<!-- none -->
-				{:else}
+				{:else if title === ''}{:else}
 					<div class="text-sm font-semibold mb-1">{title}</div>
 				{/if}
 			{/if}
 			<div class="flex space-x-2 text-xs">
 				{#if data1Child}
 					{@render data1Child?.()}
-				{:else if data1 === ''}
-					<!-- none -->
-				{:else}
+				{:else if data1 === ''}{:else}
 					{data1}
 				{/if}
 				{#if data2Child}
 					{@render data2Child?.()}
-				{:else if data2 === ''}
-					<!-- none -->
-				{:else}
+				{:else if data2 === ''}{:else}
 					{data2}
 				{/if}
 			</div>
 		</div>
 		<div
-			class={`flex items-center my-0.5 space-x-1 text-sm relative transition-all whitespace-nowrap ${
-				durationObj[duration] || durationObj.base
-			} ${titlePosition === 'in' ? 'py-1' : 'py-3'} ${
-				focus ? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block : inputStyleObj[inputStyle] || inputStyleObj.block
-			} ${inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}`}
+			class="flex items-center my-0.5 space-x-1 text-sm relative transition-all whitespace-nowrap {durationObj[duration] ||
+				durationObj.base} {titlePosition === 'in' ? 'py-1' : 'py-3'} {focus
+				? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block
+				: inputStyleObj[inputStyle] || inputStyleObj.block} {inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}"
 		>
 			{#if label1Child}
 				{@render label1Child?.()}
-			{:else if label1 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel1 && onclicklabel1();
-					}}
-				>
+			{:else if label1 === null}{:else}
+				<button onclick={() => onclickLabel1 && onclickLabel1()}>
 					<Icon {...label1} />
-				</div>
+				</button>
 			{/if}
 			{#if label2Child}
 				{@render label2Child?.()}
-			{:else if label2 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel2 && onclicklabel2();
-					}}
-				>
+			{:else if label2 === null}{:else}
+				<button onclick={() => onclickLabel2 && onclickLabel2()}>
 					{label2}
-				</div>
+				</button>
 			{/if}
 			{#if label3Child}
 				{@render label3Child?.()}
-			{:else if label3 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel3 && onclicklabel3();
-					}}
-				>
+			{:else if label3 === null}{:else}
+				<button onclick={() => onclickLabel3 && onclickLabel3()}>
 					<Icon {...label3} />
-				</div>
+				</button>
 			{/if}
 			<div class="flex flex-col grow">
 				{#if titlePosition === 'in'}
@@ -342,9 +292,9 @@
 								{rows}
 								inputmode={mode}
 								placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
-								class={`w-full focus:outline-none bg-transparent font-semibold ${inputPosition === 'left' ? 'text-left' : 'text-right'} ${
-									disabled ? 'cursor-not-allowed opacity-50' : ''
-								}`}
+								class="w-full focus:outline-none bg-transparent font-semibold {inputPosition === 'left'
+									? 'text-left'
+									: 'text-right'} {disabled ? 'cursor-not-allowed opacity-50' : ''}"
 								onfocus={onFocus}
 								onblur={onBlur}
 								oninput={valueChangeFun}
@@ -361,9 +311,9 @@
 								use:typeAction
 								inputmode={mode}
 								placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
-								class={`w-full focus:outline-none bg-transparent font-semibold whitespace-normal ${
-									inputPosition === 'left' ? 'text-left' : 'text-right'
-								} ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
+								class="w-full focus:outline-none bg-transparent font-semibold whitespace-normal {inputPosition === 'left'
+									? 'text-left'
+									: 'text-right'} {disabled ? 'cursor-not-allowed opacity-50' : ''}"
 								onfocus={onFocus}
 								onblur={onBlur}
 								oninput={valueChangeFun}
@@ -376,97 +326,60 @@
 						{/if}
 					</div>
 					{#if clear && value !== ''}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							onclick={e => {
-								e.preventDefault();
-								clearFun();
-							}}
-						>
+						<button onclick={() => clearFun()}>
 							<Icon name="ri-close-circle-fill" size={16} alpha={0.3} />
-						</div>
+						</button>
 					{/if}
 				</div>
 			</div>
 			{#if label4Child}
 				{@render label4Child?.()}
-			{:else if label4 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel4 && onclicklabel4();
-					}}
-				>
+			{:else if label4 === null}{:else}
+				<button onclick={() => onclickLabel4 && onclickLabel4()}>
 					<Icon {...label4} />
-				</div>
+				</button>
 			{/if}
 			{#if label5Child}
 				{@render label5Child?.()}
-			{:else if label5 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel5 && onclicklabel5();
-					}}
-				>
+			{:else if label5 === null}{:else}
+				<button onclick={() => onclickLabel5 && onclickLabel5()}>
 					{label5}
-				</div>
+				</button>
 			{/if}
 			{#if label6Child}
 				{@render label6Child?.()}
-			{:else if label6 === ''}
-				<!-- none -->
-			{:else}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={e => {
-						e.preventDefault();
-						onclicklabel6 && onclicklabel6();
-					}}
-				>
+			{:else if label6 === null}{:else}
+				<button onclick={() => onclickLabel6 && onclickLabel6()}>
 					<Icon {...label6} />
-				</div>
+				</button>
 			{/if}
 			{#if inputStyle === 'line'}
 				<div
-					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[inputState] || lineTransitionStateObj.theme} w-full`
-					} ${!focus && lineTransition !== 'none' && `w-0 ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`} ${
-						focus && lineTransition !== 'none' && `w-full ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`
-					}`}
+					class="h-0.5 absolute -bottom-px {lineTransition === null ? 'transition-colors' : 'transition-all'} {durationObj[duration] ||
+						durationObj.base} {!focus && lineTransition === null && 'bg-transparent w-full'} {focus &&
+						lineTransition === null &&
+						`${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme} w-full`} {!focus &&
+						lineTransition !== null &&
+						`w-0 ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`} {focus &&
+						lineTransition !== null &&
+						`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'}`}>
+		<div class="flex px-2 text-gay6 {tip === null ? 'justify-end' : 'justify-between'}">
 			{#if tipChild}
 				{@render tipChild?.()}
-			{:else if tip === ''}
-				<!-- none -->
-			{:else}
+			{:else if tip === null}{:else}
 				<div class="text-sm text-gray-400">
 					{tip}
 				</div>
 			{/if}
 			{#if data3Child}
 				{@render data3Child?.()}
-			{:else if data3 === ''}
-				<!-- none -->
-			{:else}
+			{:else if data3 === null}{:else}
 				<div class="text-xs">
 					{data3}
 				</div>