diff --git a/components/Timeline/__test__/__snapshots__/timeline.spec.ts.snap b/components/Timeline/__test__/__snapshots__/timeline.spec.ts.snap
index 297ef022..a373456e 100644
--- a/components/Timeline/__test__/__snapshots__/timeline.spec.ts.snap
+++ b/components/Timeline/__test__/__snapshots__/timeline.spec.ts.snap
@@ -1,35 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KTimeline > KTimelineItem: children 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > KTimelineItem: children 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > KTimelineItem: color 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left" style="color: rgb(0, 255, 255); border-color: #00ffff;"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left" style="color: rgb(0, 255, 255); border-color: #00ffff;"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > KTimelineItem: color 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left" style="color: rgb(0, 255, 255); border-color: #00ffff;"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left" style="color: rgb(0, 255, 255); border-color: #00ffff;"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > KTimelineItem: label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 2</div> </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 2</div> </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 2</div> </li></ul>"`;
+exports[`Test: KTimeline > KTimelineItem: label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 2</div> </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 2</div> </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 2</div> </li></ul>"`;
 
-exports[`Test: KTimeline > KTimelineItem: position 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-c__right">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-c__left">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > KTimelineItem: position 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Network problems being solved</div>   </li></ul><ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-c__right k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-c__left k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > basic render 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > basic render 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
 exports[`Test: KTimeline > props: cls 1`] = `"<ul class="k-timeline k-timeline--test"></ul>"`;
 
-exports[`Test: KTimeline > props: mode & label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 2</div> </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr">ikun ui 2</div> </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cl">ikun ui 2</div> </li></ul>"`;
+exports[`Test: KTimeline > props: mode & label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 2</div> </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">ikun ui 2</div> </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Network problems being solved</div>  <div class="k-timeline-item-label k-timeline-item-label--cl k-timeline-item-label--dark">ikun ui 2</div> </li></ul>"`;
 
-exports[`Test: KTimeline > props: mode 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>   </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > props: mode 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cr k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>   </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--right" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--right"></div>  <div class="k-timeline-item-content k-timeline-item-content--right k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > props: pending is string 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content">ikun-ui</div>  </li></ul>"`;
+exports[`Test: KTimeline > props: pending is string 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">ikun-ui</div>  </li></ul>"`;
 
-exports[`Test: KTimeline > props: pending is true 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content">Network problems being solved</div>  </li></ul>"`;
+exports[`Test: KTimeline > props: pending is true 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>  </li></ul>"`;
 
-exports[`Test: KTimeline > props: reverse & pending 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content">Network problems being solved</div>  </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li></ul>"`;
+exports[`Test: KTimeline > props: reverse & pending 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>  </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > props: reverse 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li></ul>"`;
+exports[`Test: KTimeline > props: reverse 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > slots: children 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div slot="children" class="k-timeline-item-content">🍒 Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div slot="children" class="k-timeline-item-content">🍒 Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > slots: children 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div slot="children" class="k-timeline-item-content k-timeline-item-content--dark">🍒 Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div slot="children" class="k-timeline-item-content k-timeline-item-content--dark">🍒 Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > slots: dot 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div slot="dot" class="k-timeline-item-head--left">⭕</div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div slot="dot" class="k-timeline-item-head--left">⭕</div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > slots: dot 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div slot="dot" class="k-timeline-item-head--left">⭕</div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div slot="dot" class="k-timeline-item-head--left">⭕</div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
 
-exports[`Test: KTimeline > slots: label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Technical testing 2015-09-01</div>  <div slot="label" class="k-timeline-item-label k-timeline-item-label--cr">🔥 ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl">Network problems being solved</div>  <div slot="label" class="k-timeline-item-label k-timeline-item-label--cr">🔥 ikun ui 2</div> </li></ul>"`;
+exports[`Test: KTimeline > slots: label 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail k-timeline-item-tail--center" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Technical testing 2015-09-01</div>  <div slot="label" class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">🔥 ikun ui 1</div> </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--center"></div>  <div class="k-timeline-item-content k-timeline-item-content--cl k-timeline-item-content--dark">Network problems being solved</div>  <div slot="label" class="k-timeline-item-label k-timeline-item-label--cr k-timeline-item-label--dark">🔥 ikun ui 2</div> </li></ul>"`;
 
-exports[`Test: KTimeline > slots: pending 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div slot="pending" class="k-timeline-item-content">pending</div>  </li></ul>"`;
+exports[`Test: KTimeline > slots: pending 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div class="k-timeline-item-head k-timeline-item-head--left k-timeline-item-head--pending"></div>  <div slot="pending" class="k-timeline-item-content k-timeline-item-content--dark">pending</div>  </li></ul>"`;
 
-exports[`Test: KTimeline > slots: pendingDot 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div slot="pendingDot" class="k-timeline-item-head--left">❌</div>  <div class="k-timeline-item-content">Network problems being solved</div>  </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content">Network problems being solved</div>   </li></ul>"`;
+exports[`Test: KTimeline > slots: pendingDot 1`] = `"<ul class="k-timeline"><li class="k-timeline-item"> <div class="k-timeline-item-tail k-timeline-item-tail--pending" style="height: calc(100% - 10px);"></div> <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">   <div slot="pendingDot" class="k-timeline-item-head--left">❌</div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>  </li></ul> <ul class="k-timeline"><li class="k-timeline-item"><div class="k-timeline-item-tail" style="height: calc(100% - 10px);"></div>  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Technical testing 2015-09-01</div>   </li><li class="k-timeline-item">  <div class="k-timeline-item-head k-timeline-item-head--left"></div>  <div class="k-timeline-item-content k-timeline-item-content--dark">Network problems being solved</div>   </li></ul>"`;
diff --git a/components/Timeline/src/index.svelte b/components/Timeline/src/index.svelte
index 99e104e9..94adfbd8 100644
--- a/components/Timeline/src/index.svelte
+++ b/components/Timeline/src/index.svelte
@@ -66,12 +66,16 @@
 		if (hasLabel && mode !== 'alternate') {
 			placement = mode!;
 		}
-		return clsx(`${prefixCls}-item-content`, {
-			[`${prefixCls}-item-content--cl`]: isCenter && placement === 'left',
-			[`${prefixCls}-item-content--cr`]: isCenter && placement === 'right',
-			[`${prefixCls}-item-content--right`]: !hasLabel && mode === 'right',
-			[`${prefixCls}-item-c__${position}`]: mode === 'alternate' && position
-		});
+		return clsx(
+			`${prefixCls}-item-content`,
+			{
+				[`${prefixCls}-item-content--cl`]: isCenter && placement === 'left',
+				[`${prefixCls}-item-content--cr`]: isCenter && placement === 'right',
+				[`${prefixCls}-item-content--right`]: !hasLabel && mode === 'right',
+				[`${prefixCls}-item-c__${position}`]: mode === 'alternate' && position
+			},
+			`${prefixCls}-item-content--dark`
+		);
 	};
 	$: labelCls = (index: number) => {
 		const isCenter = hasLabel || (!hasLabel && mode === 'alternate');
@@ -79,10 +83,14 @@
 		if (hasLabel && mode !== 'alternate') {
 			placement = mode === 'left' ? 'right' : 'left';
 		}
-		return clsx(`${prefixCls}-item-label`, {
-			[`${prefixCls}-item-label--cl`]: isCenter && placement === 'left',
-			[`${prefixCls}-item-label--cr`]: isCenter && placement === 'right'
-		});
+		return clsx(
+			`${prefixCls}-item-label`,
+			{
+				[`${prefixCls}-item-label--cl`]: isCenter && placement === 'left',
+				[`${prefixCls}-item-label--cr`]: isCenter && placement === 'right'
+			},
+			`${prefixCls}-item-label--dark`
+		);
 	};
 
 	$: cnames = clsx(prefixCls, cls);
diff --git a/preset/src/shortcuts/src/timeline.ts b/preset/src/shortcuts/src/timeline.ts
index 88bf4313..9df6aeb1 100644
--- a/preset/src/shortcuts/src/timeline.ts
+++ b/preset/src/shortcuts/src/timeline.ts
@@ -24,5 +24,9 @@ export const timelineShortcuts: Record<string, string> = {
 
 	'k-timeline-item-label': 'k-timeline-item-content pa',
 	'k-timeline-item-label--cl': 'k-timeline-item-content--cl',
-	'k-timeline-item-label--cr': 'k-timeline-item-content--cr'
+	'k-timeline-item-label--cr': 'k-timeline-item-content--cr',
+
+	// dark
+	'k-timeline-item-content--dark': 'dark:text-ikun-white',
+	'k-timeline-item-label--dark': 'dark:text-ikun-white'
 };