diff --git a/components/Segmented/__test__/__snapshots__/segmented.spec.ts.snap b/components/Segmented/__test__/__snapshots__/segmented.spec.ts.snap
index 577d25d8b..8b8853b2d 100644
--- a/components/Segmented/__test__/__snapshots__/segmented.spec.ts.snap
+++ b/components/Segmented/__test__/__snapshots__/segmented.spec.ts.snap
@@ -1,21 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KSegmented > props: block 1`] = `"<div class="k-segmented k-segmented-block"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div>"`;
+exports[`Test: KSegmented > props: block 1`] = `"<div class="k-segmented k-segmented__dark k-segmented-block"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item k-segmented-item--block" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div>"`;
 
-exports[`Test: KSegmented > props: cls 1`] = `"<div class="k-segmented k-segmented--test"><div class="k-segmented-group"></div></div>"`;
+exports[`Test: KSegmented > props: cls 1`] = `"<div class="k-segmented k-segmented__dark k-segmented--test"><div class="k-segmented-group"></div></div>"`;
 
-exports[`Test: KSegmented > props: size 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+exports[`Test: KSegmented > props: size 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--lg k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--lg k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--lg k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
 
-exports[`Test: KSegmented > props: size 2`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+exports[`Test: KSegmented > props: size 2`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
 
-exports[`Test: KSegmented > props: size 3`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
+exports[`Test: KSegmented > props: size 3`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--sm k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--sm k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--sm k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <button id="test_lg">Daily-value</button> <button id="test_md">Daily-value</button> <button id="test_sm">Daily-value</button>"`;
 
-exports[`Test: KSegmentedItem > props: block 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+exports[`Test: KSegmentedItem > props: block 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
 
-exports[`Test: KSegmentedItem > props: disabled 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item--disabled" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+exports[`Test: KSegmentedItem > props: disabled 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item--disabled" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
 
-exports[`Test: KSegmentedItem > props: icon 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> Daily</span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+exports[`Test: KSegmentedItem > props: icon 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> Daily</span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
 
-exports[`Test: KSegmentedItem > props: onlyIcon 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> </span></div> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
+exports[`Test: KSegmentedItem > props: onlyIcon 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Daily" class="k-segmented-item--label"><span><span class="k-icon--base k-icon--base__dark k-icon-transition i-icon-logo-vue k-segmented-item--icon" role="" aria-hidden="true" style="width: 18px; height: 18px;"></span> </span></div> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Weekly" class="k-segmented-item--label"><span> Weekly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Monthly" class="k-segmented-item--label"><span> Monthly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Quarterly" class="k-segmented-item--label"><span> Quarterly</span></div> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><div title="Yearly" class="k-segmented-item--label"><span> Yearly</span></div> </div></div></div> <div id="test_value">Daily-value</div>"`;
 
-exports[`Test: KSegmentedItem > slots: default 1`] = `"<div class="k-segmented"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Daily 🐔</span> <div class="k-segmented-item--active"></div></div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Weekly 🎤</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Monthly 💃</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Quarterly ✌️</span> </div> <div class="k-segmented-item--md k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Yearly 🏀</span> </div></div></div>"`;
+exports[`Test: KSegmentedItem > slots: default 1`] = `"<div class="k-segmented k-segmented__dark"><div class="k-segmented-group"><div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Daily 🐔</span> <div class="k-segmented-item--active k-segmented-item--active__dark"></div></div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Weekly 🎤</span> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Monthly 💃</span> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Quarterly ✌️</span> </div> <div class="k-segmented-item--md k-segmented-item__dark k-segmented-item" aria-hidden="true"><span class="custom-segmented-item svelte-1lybzi">Yearly 🏀</span> </div></div></div>"`;
diff --git a/components/Segmented/src/index.svelte b/components/Segmented/src/index.svelte
index bc0a33dc3..90bf528a1 100644
--- a/components/Segmented/src/index.svelte
+++ b/components/Segmented/src/index.svelte
@@ -47,6 +47,7 @@
 	const prefixCls = getPrefixCls('segmented');
 	$: cnames = clsx(
 		prefixCls,
+		`${prefixCls}__dark`,
 		{
 			[`${prefixCls}-block`]: block
 		},
diff --git a/components/Segmented/src/item.svelte b/components/Segmented/src/item.svelte
index aa6dded41..8f666b78e 100644
--- a/components/Segmented/src/item.svelte
+++ b/components/Segmented/src/item.svelte
@@ -39,6 +39,7 @@
 	const prefixCls = getPrefixCls('segmented-item');
 	$: cnames = clsx(
 		`${prefixCls}--${size}`,
+		`${prefixCls}__dark`,
 		{
 			[prefixCls]: !disabled,
 			[`${prefixCls}--disabled`]: disabled,
@@ -47,7 +48,8 @@
 		cls
 	);
 	$: activeCls = clsx({
-		[`${prefixCls}--active`]: isActive
+		[`${prefixCls}--active`]: isActive,
+		[`${prefixCls}--active__dark`]: isActive
 	});
 	const labelCls = `${prefixCls}--label`;
 	const iconCls = `${prefixCls}--icon`;
diff --git a/preset/src/shortcuts/src/segmented.ts b/preset/src/shortcuts/src/segmented.ts
index 92d7ad8cb..168968ec5 100644
--- a/preset/src/shortcuts/src/segmented.ts
+++ b/preset/src/shortcuts/src/segmented.ts
@@ -1,13 +1,17 @@
 export const segmentedShortcuts: Record<string, string> = {
 	'k-segmented':
 		'cursor-pointer p-2px box-border m-0 inline-block rounded text-14px text-ikun-tx-base bg-ikun-bg-grs3', // hover:bg-ikun-bg-grs2
+	'k-segmented__dark': 'dark:text-white dark:bg-ikun-dark',
 	'k-segmented-group': 'pr fssc w-full',
 	'k-segmented-block': 'flex',
 
 	'k-segmented-item': 'fcc text-center pr rounded hover:bg-ikun-bg-grs2 active:bg-ikun-bg-grs1',
+	'k-segmented-item__dark': 'dark:hover:bg-ikun-dark-200 dark:active:bg-ikun-dark-300',
 	'k-segmented-item--disabled': 'fcc text-center pr rounded k-cur-disabled opacity-50',
 	'k-segmented-item--active':
 		'rounded bg-white shadow hover:bg-white active:bg-white h-full w-full pa',
+	'k-segmented-item--active__dark':
+		'dark:bg-ikun-dark-400 dark:hover:bg-ikun-dark-400 dark:active:bg-ikun-dark-400',
 	'k-segmented-item--label': 'px-11px pr z-1 truncate w-full',
 	'k-segmented-item--icon': 'align-middle !inline-flex',
 	'k-segmented-item--block': 'flex-1 min-w-0',