[stdf]Update TabBar compoent, demo and documents.

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

@@ -26,10 +26,7 @@
 		{ text: 'Message', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
 		{ text: 'Mine', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
-	let active = 0;
-	const tabBarChangeFun = e => {
-		active = e.detail;
-	};
+	let active = $state(0);
 </script>
 
 <div class="py-8 mb-20">
@@ -66,24 +63,24 @@
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">customize Tab</div>
-			<TabBar {labels} tabInjClass="text-extend0 dark:text-extend2" activeTabInjClass="!text-primary dark:!text-dark" />
+			<TabBar {labels} tabInjClass="text-[purple] dark:text-[yellow]" activeTabInjClass="!text-primary dark:!text-dark" />
 		</div>
 		<div>
-			<div class="font-bold px-4 mb-2">Custom selection Tab</div>
-			<TabBar {labels} activeTabInjClass="text-extend0 dark:text-extend1" />
+			<div class="font-bold px-4 mb-2">Only customize selected Tab</div>
+			<TabBar {labels} activeTabInjClass="text-[purple] dark:text-[yellow]" />
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">Custom line</div>
-			<TabBar {labels} line activeInjClass="bg-extend0 dark:bg-extend1" />
+			<TabBar {labels} line activeInjClass="bg-[purple] dark:bg-[yellow]" />
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">Care edition</div>
 			<TabBar {labels} love />
 		</div>
 		<div>
-			<div class="font-bold px-4 mb-2">monitor change event</div>
+			<div class="font-bold px-4 mb-2">monitor onchange event</div>
 			<div class="m-4">At present TabBar activated active：{active}</div>
-			<TabBar {labels} on:change={tabBarChangeFun} />
+			<TabBar {labels} onchange={a => (active = a)} />
 		</div>
 	</div>
 </div>

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

@@ -26,10 +26,7 @@
 		{ text: '消息', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
 		{ text: '我的', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
-	let active = 0;
-	const tabBarChangeFun = e => {
-		active = e.detail;
-	};
+	let active = $state(0);
 </script>
 
 <div class="py-8 mb-20">
@@ -66,24 +63,24 @@
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">自定义 Tab</div>
-			<TabBar {labels} tabInjClass="text-extend0 dark:text-extend2" activeTabInjClass="!text-primary dark:!text-dark" />
+			<TabBar {labels} tabInjClass="text-[purple] dark:text-[yellow]" activeTabInjClass="!text-primary dark:!text-dark" />
 		</div>
 		<div>
-			<div class="font-bold px-4 mb-2">自定义选定 Tab</div>
-			<TabBar {labels} activeTabInjClass="text-extend0 dark:text-extend1" />
+			<div class="font-bold px-4 mb-2">仅自定义选定 Tab</div>
+			<TabBar {labels} activeTabInjClass="text-[purple] dark:text-[yellow]" />
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">自定义线条</div>
-			<TabBar {labels} line activeInjClass="bg-extend0 dark:bg-extend1" />
+			<TabBar {labels} line activeInjClass="bg-[purple] dark:bg-[yellow]" />
 		</div>
 		<div>
 			<div class="font-bold px-4 mb-2">关爱版</div>
 			<TabBar {labels} love />
 		</div>
 		<div>
-			<div class="font-bold px-4 mb-2">监听 change 事件</div>
+			<div class="font-bold px-4 mb-2">监听 onchange 事件</div>
 			<div class="m-4">当前 TabBar 激活的 active：{active}</div>
-			<TabBar {labels} on:change={tabBarChangeFun} />
+			<TabBar {labels} onchange={a => (active = a)} />
 		</div>
 	</div>
 </div>

doc/components/tabBar/api.md

@@ -1,19 +1,27 @@
 ## TabBar Props
 
-| 属性              | 类型    | 默认值 | 可选值     | 必传 | 说明                                       |
-| ----------------- | ------- | ------ | ---------- | ---- | ------------------------------------------ |
-| labels            | Array   | []     | -          | Y    | 选项卡内容组，由 text 和 Icon Props 组成。 |
-| active            | Number  | 0      | -          | N    | 激活的选项卡索引值。                       |
-| line              | Boolean | false  | true/false | N    | 底部是否显示线条。                         |
-| lineW             | Number  | 4      | -          | N    | 线条占当前 Tab 宽度的比例。                |
-| love              | Boolean | false  | true/false | N    | 是否开启关爱版。                           |
-| injClass          | String  | ''     | -          | N    | TabBar 外层注入 CSS。                      |
-| tabInjClass       | String  | ''     | -          | N    | 单项 Tab 注入 CSS。                        |
-| activeTabInjClass | String  | ''     | -          | N    | 激活的 Tab 注入 CSS。                      |
-| activeInjClass    | String  | ''     | -          | N    | 底部线条注入 CSS。                         |
+| 名称              | 类型            | 默认值  | 必传 | 说明                        |
+| ----------------- | --------------- | ------- | ---- | --------------------------- |
+| labels            | `TabBarLabel[]` | `[]`    | Y    | 选项卡内容组。              |
+| active            | `number`        | `0`     | N    | 激活的选项卡索引值。        |
+| line              | `boolean`       | `false` | N    | 底部是否显示线条。          |
+| lineW             | `number`        | `4`     | N    | 线条占当前 Tab 宽度的比例。 |
+| love              | `boolean`       | `false` | N    | 是否开启关爱版。            |
+| injClass          | `string`        | `''`    | N    | TabBar 外层注入 CSS。       |
+| tabInjClass       | `string`        | `''`    | N    | 单项 Tab 注入 CSS。         |
+| activeTabInjClass | `string`        | `''`    | N    | 激活的 Tab 注入 CSS。       |
+| activeInjClass    | `string`        | `''`    | N    | 底部线条注入 CSS。          |
+
+## TabBarLabel Props
+
+| 名称       | 类型     | 默认值 | 必传 | 说明                                                                             |
+| ---------- | -------- | ------ | ---- | -------------------------------------------------------------------------------- |
+| text       | `string` | `''`   | N    | 选项卡文字。                                                                     |
+| icon       | `Icon`   | -      | N    | 选项卡图标 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。       |
+| activeIcon | `Icon`   | -      | N    | 激活的选项卡图标 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。 |
 
 ## TabBar Events
 
-| 名称   | 参数                                                    | 描述                 |
-| ------ | ------------------------------------------------------- | -------------------- |
-| change | event：事件对象，其中 detail 表示激活的 TabBar 索引值。 | 点击 TabBar 时触发。 |
+| 名称     | 类型                       | 参数                            | 描述                 |
+| -------- | -------------------------- | ------------------------------- | -------------------- |
+| onchange | `(active: number) => void` | `active` - 激活的 TabBar 索引值 | 点击 TabBar 时触发。 |

doc/components/tabBar/api_en.md

@@ -1,19 +1,27 @@
 ## TabBar Props
 
-| Prop Name         | Type    | Default | Options    | Required | Description                                                  |
-| ----------------- | ------- | ------- | ---------- | -------- | ------------------------------------------------------------ |
-| labels            | Array   | []      | -          | Yes      | TabBar content group, composed of text and Icon Props.       |
-| active            | Number  | 0       | -          | No       | Active Tab index value.                                      |
-| line              | Boolean | false   | true/false | No       | Whether to show a line at the bottom.                        |
-| lineW             | Number  | 4       | -          | No       | The proportion of the line width to the current Tab width.   |
-| love              | Boolean | false   | true/false | No       | Whether to enable the caring version.                        |
-| injClass          | String  | ''      | -          | No       | Inject CSS class names into the outermost element of TabBar. |
-| tabInjClass       | String  | ''      | -          | No       | Inject CSS class names into a single Tab.                    |
-| activeTabInjClass | String  | ''      | -          | No       | Inject CSS class names into the active Tab.                  |
-| activeInjClass    | String  | ''      | -          | No       | Inject CSS class names into the bottom line.                 |
+| Name              | Type            | Default | Required | Description                            |
+| ----------------- | --------------- | ------- | -------- | -------------------------------------- |
+| labels            | `TabBarLabel[]` | `[]`    | Y        | Tab content group.                     |
+| active            | `number`        | `0`     | N        | Index value of active tab.             |
+| line              | `boolean`       | `false` | N        | Whether to show bottom line.           |
+| lineW             | `number`        | `4`     | N        | Line width ratio of current tab width. |
+| love              | `boolean`       | `false` | N        | Whether to enable care version.        |
+| injClass          | `string`        | `''`    | N        | Inject CSS class for TabBar wrapper.   |
+| tabInjClass       | `string`        | `''`    | N        | Inject CSS class for single tab.       |
+| activeTabInjClass | `string`        | `''`    | N        | Inject CSS class for active tab.       |
+| activeInjClass    | `string`        | `''`    | N        | Inject CSS class for bottom line.      |
+
+## TabBarLabel Props
+
+| Name       | Type     | Default | Required | Description                                                                    |
+| ---------- | -------- | ------- | -------- | ------------------------------------------------------------------------------ |
+| text       | `string` | `''`    | N        | Tab text.                                                                      |
+| icon       | `Icon`   | -       | N        | Tab icon [Icon Props](https://stdf.design/#/components?nav=icon&tab=1).        |
+| activeIcon | `Icon`   | -       | N        | Active tab icon [Icon Props](https://stdf.design/#/components?nav=icon&tab=1). |
 
 ## TabBar Events
 
-| Name   | Parameters                                                                   | Description                       |
-| ------ | ---------------------------------------------------------------------------- | --------------------------------- |
-| change | event: Event object, with `detail` indicating the active TabBar index value. | Triggered when TabBar is clicked. |
+| Name     | Type                       | Parameters                     | Description                       |
+| -------- | -------------------------- | ------------------------------ | --------------------------------- |
+| onchange | `(active: number) => void` | `active` - Active TabBar index | Triggered when TabBar is clicked. |

doc/components/tabBar/guide.md

@@ -1,14 +1,14 @@
 ## 说明
 
-TabBar 通过绑定的 change 事件，传递出当前激活选项卡的索引值。
+TabBar 通过绑定的 onchange 事件，传递出当前激活选项卡的索引值。
 
 ## labels
 
-此参数决定了 TabBar 内部的选项卡内容，支持图标与文字自由搭配。数据类型为对象数组，内部对象由 text 和 icon、activeIcon 搭配组成。icon 和 activeIcon 使用 Icon 组件渲染，其中 activeIcon 表示 TabBar 激活时的 Icon。具体参数请参考 Icon API。
+此参数决定了 TabBar 内部的选项卡内容，支持图标与文字自由搭配。数据类型为对象数组，内部对象由 text 和 icon、activeIcon 搭配组成。icon 和 activeIcon 使用 Icon 组件渲染，其中 activeIcon 表示 TabBar 激活时的 Icon。具体参数请参考 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。
 
 ## 底部线条
 
-line 为 true 时激活的 TabBar 底部会显示线条，lineW 和 activeInjClass 只会在 line 为 true 时生效。
+line 为 true 时激活的 TabBar 底部会显示线条，lineW 和 activeInjClass 只会在 line 为 true 时生效。线条宽度可由 lineW 控制，lineW 的值为线条宽度占当前 Tab 宽度的比例，默认值为 4，**lineW 的值越大线条越窄**。
 
 ## CSS 注入
 

doc/components/tabBar/guide_en.md

@@ -1,21 +1,21 @@
 ## Description
 
-TabBar passes the index value of the currently active Tab through the bound `change` event.
+TabBar passes the index value of the currently active tab through the bound onchange event.
 
-## Labels
+## labels
 
-This parameter determines the content of the TabBar options, supporting free combinations of icons and text. The data type is an array of objects, and the internal objects are composed of `text`, `icon`, and `activeIcon`. `icon` and `activeIcon` are rendered using the Icon component, where `activeIcon` represents the Icon when the TabBar is active. For specific parameters, please refer to the Icon API.
+This parameter determines the content of tabs inside the TabBar, supporting free combination of icons and text. The data type is an array of objects, where each object consists of text, icon and activeIcon. The icon and activeIcon are rendered using the Icon component, where activeIcon represents the Icon when TabBar is active. For specific parameters, please refer to [Icon Props](https://stdf.design/#/components?nav=icon&tab=1).
 
 ## Bottom Line
 
-When `line` is set to `true`, a line is displayed at the bottom of the active TabBar. `lineW` and `activeInjClass` only take effect when `line` is set to `true`.
+When line is true, a line will be displayed at the bottom of the active TabBar. lineW and activeInjClass only take effect when line is true. The line width can be controlled by lineW, whose value represents the ratio of line width to current Tab width. The default value is 4, **the larger the lineW value, the narrower the line**.
 
 ## CSS Injection
 
-TabBar has a relatively complex structure. In order to support more flexible custom styles, it supports the injection of CSS in four places internally. `injClass` applies to the outermost element of TabBar; `tabInjClass` applies to the internal single Tab; `activeTabInjClass` applies to the currently active Tab; and `activeInjClass` applies to the line at the bottom of TabBar.
+TabBar has a relatively complex structure. To support more flexible custom styles, it supports CSS injection in four places: injClass applies to the outermost element of TabBar; tabInjClass applies to individual tabs inside; activeTabInjClass applies to the currently active tab; activeInjClass applies to the bottom line of TabBar.
 
-If the injected class is not effective, please add "!" before the injected class name, as shown in the [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+If the injected class doesn't take effect, please add "!" before the injected class name. You can refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
 
 ## Simplicity
 
-Compared to other components, the TabBar component is used less frequently in applications, usually only one per application, and generally has a proprietary UI/UX design for its own brand, with low reusability. Therefore, the TabBar component is relatively simple in API design.
+Compared to other components, the TabBar component is used less frequently in applications, usually just one per application, and generally has brand-specific UI/UX design with low reusability. Therefore, the TabBar component's API design is relatively simple.

packages/stdf/components/tabBar/TabBar.svelte

@@ -36,13 +36,11 @@
 	{/if}
 	<div class="flex justify-between">
 		{#each labels as label, i}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
+			<button
 				onclick={() => clickFun(i)}
-				class={`flex-1 flex flex-col justify-center text-center py-1 active:opacity-80 cursor-pointer ${
-					i === active ? 'text-primary dark:text-dark' : 'text-black/80 dark:text-white/90'
-				} ${love ? 'text-lg' : 'text-sm'} ${tabInjClass} ${i === active && activeTabInjClass}`}
+				class="flex-1 flex flex-col justify-center text-center items-center py-1 active:opacity-80 {i === active
+					? 'text-primary dark:text-dark'
+					: 'text-black/80 dark:text-white/90'} {love ? 'text-lg' : 'text-sm'} {tabInjClass} {i === active && activeTabInjClass}"
 			>
 				{#if label.icon}
 					<div class:py-2={!label.text}>
@@ -71,11 +69,11 @@
 					</div>
 				{/if}
 				{#if label.text}
-					<div class={`${label.icon ? 'mt-[2px]' : 'py-1 text-lg'} ${i === active && !label.icon ? ' font-bold' : ''}`}>
+					<div class="{label.icon ? 'mt-[2px]' : 'py-1 text-lg'} {i === active && !label.icon ? ' font-bold' : ''}">
 						{label.text}
 					</div>
 				{/if}
-			</div>
+			</button>
 		{/each}
 	</div>
 </div>