From 3b99839e1f2e3222c78e98813068b51cc45a09be Mon Sep 17 00:00:00 2001
From: Liuzj <530604689@qq.com>
Date: Thu, 24 Mar 2022 15:45:38 +0800
Subject: [PATCH] refactor(comp: timeline): optimize code and style (#819)

---
 .../__snapshots__/timeline.spec.ts.snap       | 925 ++++++++++--------
 .../timeline/__tests__/timeline.spec.ts       |  82 +-
 packages/components/timeline/demo/Label.vue   |  86 +-
 packages/components/timeline/demo/Pending.vue |  52 +-
 .../components/timeline/demo/PendingDot.vue   |  42 +-
 .../components/timeline/demo/Placement.vue    |  50 +-
 packages/components/timeline/demo/Reverse.vue |  16 +-
 packages/components/timeline/docs/Index.zh.md |  33 +-
 packages/components/timeline/src/Timeline.tsx |  32 +-
 .../components/timeline/src/TimelineItem.tsx  |  40 +-
 packages/components/timeline/src/token.ts     |   2 -
 packages/components/timeline/style/index.less | 208 ++--
 packages/components/timeline/style/mixin.less |  29 +
 .../style/themes/default.variable.less        |  37 +-
 packages/components/transfer/docs/Index.zh.md |  29 +
 15 files changed, 889 insertions(+), 774 deletions(-)

diff --git a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
index 3f7dc966b..90bcd8b20 100644
--- a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
+++ b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
@@ -1,159 +1,126 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Timeline pending slot work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
-    </div>
-  </li>
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">pendingSlotText</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
-</ul>"
-`;
-
-exports[`Timeline pending slot work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">pendingSlotText</div>
+      <div class=\\"ix-timeline-item-content-desc\\">pendingSlotText</div>
     </div>
   </li>
 </ul>"
 `;
 
-exports[`Timeline pending slot work 3`] = `
-"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-reverse\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
+exports[`Timeline pending slot work 2`] = `
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">pendingSlotText</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">pendingSlotText</div>
     </div>
   </li>
 </ul>"
@@ -162,310 +129,305 @@ exports[`Timeline pending slot work 3`] = `
 exports[`Timeline pending work 1`] = `
 "<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
-    </div>
-  </li>
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
-    </div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\"></div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
-</ul>"
-`;
-
-exports[`Timeline pending work 3`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
-    </div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"loading\\">
-          <path d=\\"m527.424 64.32 3.712.064a448 448 0 0 1 430.912 432.32v2.368a12.8 12.8 0 0 1-12.8 13.056h-38.336a12.8 12.8 0 0 1-12.8-13.632A384 384 0 0 0 528.64 128.384h-1.792a12.8 12.8 0 0 1-12.608-12.8V77.12a12.8 12.8 0 0 1 13.12-12.8z\\"></path>
-        </svg></i></div>
-    <div class=\\"ix-timeline-item-content\\">
-      <!---->
-      <div class=\\"ix-timeline-item-desc\\">pendingText</div>
+      <div class=\\"ix-timeline-item-content-desc\\"></div>
     </div>
   </li>
 </ul>"
 `;
 
-exports[`Timeline pending work 4`] = `
-"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-reverse\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
+exports[`Timeline pending work 3`] = `
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\"></div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"loading\\">
+            <path d=\\"m527.424 64.32 3.712.064a448 448 0 0 1 430.912 432.32v2.368a12.8 12.8 0 0 1-12.8 13.056h-38.336a12.8 12.8 0 0 1-12.8-13.632A384 384 0 0 0 528.64 128.384h-1.792a12.8 12.8 0 0 1-12.608-12.8V77.12a12.8 12.8 0 0 1 13.12-12.8z\\"></path>
+          </svg></i></div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">pendingText</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pendingDot work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
+  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
+    </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\"></div>
+      <div class=\\"ix-timeline-item-content-desc\\"></div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pendingDot work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-pending\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending-dot\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">pendingDotText</div>
+  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\">pendingDotText</div>
+    </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\"></div>
+      <div class=\\"ix-timeline-item-content-desc\\"></div>
     </div>
   </li>
 </ul>"
@@ -474,43 +436,51 @@ exports[`Timeline pendingDot work 2`] = `
 exports[`Timeline placement with item placement work 1`] = `
 "<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -519,43 +489,51 @@ exports[`Timeline placement with item placement work 1`] = `
 exports[`Timeline placement with item placement work 2`] = `
 "<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -564,43 +542,51 @@ exports[`Timeline placement with item placement work 2`] = `
 exports[`Timeline placement with item placement work 3`] = `
 "<ul class=\\"ix-timeline ix-timeline-start\\">
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -609,43 +595,51 @@ exports[`Timeline placement with item placement work 3`] = `
 exports[`Timeline placement with item placement work 4`] = `
 "<ul class=\\"ix-timeline ix-timeline-alternate\\">
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -654,43 +648,51 @@ exports[`Timeline placement with item placement work 4`] = `
 exports[`Timeline placement work 1`] = `
 "<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -699,43 +701,51 @@ exports[`Timeline placement work 1`] = `
 exports[`Timeline placement work 2`] = `
 "<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -744,43 +754,51 @@ exports[`Timeline placement work 2`] = `
 exports[`Timeline placement work 3`] = `
 "<ul class=\\"ix-timeline ix-timeline-start\\">
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -789,43 +807,51 @@ exports[`Timeline placement work 3`] = `
 exports[`Timeline placement work 4`] = `
 "<ul class=\\"ix-timeline ix-timeline-alternate\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-start\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -833,46 +859,117 @@ exports[`Timeline placement work 4`] = `
 
 exports[`Timeline render work 1`] = `"<ul class=\\"ix-timeline ix-timeline-end\\"></ul>"`;
 
-exports[`Timeline reverse work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-end\\">
+exports[`Timeline reverse with pending slot work 1`] = `
+"<ul class=\\"ix-timeline ix-timeline-end ix-timeline-reverse ix-timeline-pending\\">
+  <li class=\\"ix-timeline-item ix-timeline-item-end ix-timeline-item-pending\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-custom ix-timeline-item-head-dot-primary\\"><i class=\\"ix-icon ix-icon-loading\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
+    </div>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-content-desc\\">pendingSlotText</div>
+    </div>
+  </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-timeline-item-content\\">
       <!---->
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
+    </div>
+  </li>
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-timeline-item-content\\">
       <!---->
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
+    </div>
+  </li>
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
+</ul>"
+`;
+
+exports[`Timeline reverse work 1`] = `
+"<ul class=\\"ix-timeline ix-timeline-end\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-timeline-item-content\\">
       <!---->
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
+    </div>
+  </li>
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-timeline-item-content\\">
       <!---->
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
+    </div>
+  </li>
+  <li class=\\"ix-timeline-item ix-timeline-item-end\\">
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
 </ul>"
@@ -881,43 +978,51 @@ exports[`Timeline reverse work 1`] = `
 exports[`Timeline reverse work 2`] = `
 "<ul class=\\"ix-timeline ix-timeline-end ix-timeline-reverse\\">
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">3</div>
+      <div class=\\"ix-timeline-item-content-desc\\">3</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">2</div>
+      <div class=\\"ix-timeline-item-content-desc\\">2</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">1</div>
+      <div class=\\"ix-timeline-item-content-desc\\">1</div>
     </div>
   </li>
   <li class=\\"ix-timeline-item ix-timeline-item-end\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-primary\\">
-      <!---->
+    <div class=\\"ix-timeline-item-head\\">
+      <div class=\\"ix-timeline-item-head-line\\"></div>
+      <div class=\\"ix-timeline-item-head-dot ix-timeline-item-head-dot-primary\\">
+        <!---->
+      </div>
     </div>
     <div class=\\"ix-timeline-item-content\\">
       <!---->
-      <div class=\\"ix-timeline-item-desc\\">0</div>
+      <div class=\\"ix-timeline-item-content-desc\\">0</div>
     </div>
   </li>
 </ul>"
diff --git a/packages/components/timeline/__tests__/timeline.spec.ts b/packages/components/timeline/__tests__/timeline.spec.ts
index ee361534f..6e76cdb7e 100644
--- a/packages/components/timeline/__tests__/timeline.spec.ts
+++ b/packages/components/timeline/__tests__/timeline.spec.ts
@@ -87,15 +87,12 @@ describe('Timeline', () => {
     })
     expect(wrapper.html()).toMatchSnapshot()
 
-    const reverseWrapper = TimelineMount({
-      props: {
-        reverse: true,
-      },
-    })
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+    await wrapper.setProps({ reverse: true })
+
+    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
       expect(item.text()).toBe((3 - index).toString())
     })
-    expect(reverseWrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   test('pending work', async () => {
@@ -107,33 +104,14 @@ describe('Timeline', () => {
 
     await wrapper.setProps({ pending: true })
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pending: pendingText })
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingText)
     expect(wrapper.html()).toMatchSnapshot()
-
-    const reverseWrapper = TimelineMount({
-      props: {
-        pending: true,
-        reverse: true,
-      },
-    })
-
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
-      if (index === 0) {
-        expect(item.classes()).toContain('ix-timeline-item-pending')
-        expect(item.classes()).toContain('ix-timeline-item-pending-dot')
-      } else {
-        expect(item.text()).toBe((4 - index).toString())
-      }
-    })
-    expect(reverseWrapper.html()).toMatchSnapshot()
   })
 
   test('pending slot work', async () => {
@@ -146,16 +124,19 @@ describe('Timeline', () => {
     })
 
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pending: pendingText })
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
     expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('reverse with pending slot work', async () => {
+    const pendingSlotText = 'pendingSlotText'
 
-    const reverseWrapper = TimelineMount({
+    const wrapper = TimelineMount({
       slots: {
         pending: pendingSlotText,
       },
@@ -164,15 +145,14 @@ describe('Timeline', () => {
       },
     })
 
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
       if (index === 0) {
         expect(item.classes()).toContain('ix-timeline-item-pending')
-        expect(item.classes()).toContain('ix-timeline-item-pending-dot')
       } else {
         expect(item.text()).toBe((4 - index).toString())
       }
     })
-    expect(reverseWrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   test('pendingDot work', async () => {
@@ -183,13 +163,13 @@ describe('Timeline', () => {
     })
     const pendingDotText = 'pendingDotText'
 
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').find('.ix-icon').classes()).toContain(
-      'ix-icon-loading',
-    )
+    expect(
+      wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').find('.ix-icon').classes(),
+    ).toContain('ix-icon-loading')
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pendingDot: pendingDotText })
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').text()).toBe(pendingDotText)
+    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').text()).toBe(pendingDotText)
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -216,10 +196,10 @@ describe('TimelineItem', () => {
     })
 
     const items = wrapper.findAll('.ix-timeline-item')
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-red')
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-red')
 
-    expect(items[1].find('.ix-timeline-item-dot-black').exists()).toBe(false)
-    expect(items[1].find('.ix-timeline-item-dot').html()).toContain('style="color: black; border-color: black;"')
+    expect(items[1].find('.ix-timeline-item-head-dot-black').exists()).toBe(false)
+    expect(items[1].find('.ix-timeline-item-head-dot').html()).toContain('style="color: black; border-color: black;"')
   })
 
   test('dot work', async () => {
@@ -232,9 +212,9 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotText)
+    expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+    expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotText)
   })
 
   test('dot slot work', async () => {
@@ -247,9 +227,9 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotSlotText)
+    expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+    expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotSlotText)
   })
 
   test('label work', async () => {
@@ -262,8 +242,8 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelText)
+    expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelText)
   })
 
   test('label slot work', async () => {
@@ -277,7 +257,7 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelSlotText)
+    expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelSlotText)
   })
 })
diff --git a/packages/components/timeline/demo/Label.vue b/packages/components/timeline/demo/Label.vue
index f1f1e7085..e134f45c2 100644
--- a/packages/components/timeline/demo/Label.vue
+++ b/packages/components/timeline/demo/Label.vue
@@ -1,49 +1,51 @@
 <template>
-  <p>1.标签的一般用法</p>
-  <IxTimeline>
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>1.标签的一般用法</p>
+    <IxTimeline>
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>2.标签的一般用法</p>
-  <IxTimeline placement="start">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>2.标签的一般用法</p>
+    <IxTimeline placement="start">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>3.标签的一般用法</p>
-  <IxTimeline placement="alternate">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>3.标签的一般用法</p>
+    <IxTimeline placement="alternate">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>4.标签跟内容分开</p>
-  <IxTimeline :both="false">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>4.标签跟内容分开</p>
+    <IxTimeline :both="false">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>5.标签跟内容分开</p>
-  <IxTimeline :both="false" placement="start">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>5.标签跟内容分开</p>
+    <IxTimeline :both="false" placement="start">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>6.标签跟内容分开</p>
-  <IxTimeline :both="false" placement="alternate">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>6.标签跟内容分开</p>
+    <IxTimeline :both="false" placement="alternate">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
+  </IxSpace>
 </template>
diff --git a/packages/components/timeline/demo/Pending.vue b/packages/components/timeline/demo/Pending.vue
index 2c30d67e7..6614f7520 100644
--- a/packages/components/timeline/demo/Pending.vue
+++ b/packages/components/timeline/demo/Pending.vue
@@ -1,32 +1,28 @@
 <template>
-  <p>通过设置pending为true来展示幽灵节点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>通过设置pending为true来展示幽灵节点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>通过设置pending为字符串来展示幽灵节点</p>
-  <IxTimeline pending="Recoding...">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+    <p>通过设置pending为字符串来展示幽灵节点</p>
+    <IxTimeline pending="Recoding...">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>通过设置插槽pending来展示幽灵节点</p>
-  <IxTimeline>
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-    <template #pending>Recoding...</template>
-  </IxTimeline>
+    <p>通过设置插槽pending来展示幽灵节点</p>
+    <IxTimeline>
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+      <template #pending>Recoding...</template>
+    </IxTimeline>
+  </IxSpace>
 </template>
-
-<style lang="less" scoped>
-p {
-  margin: 20px 0;
-}
-</style>
diff --git a/packages/components/timeline/demo/PendingDot.vue b/packages/components/timeline/demo/PendingDot.vue
index d34a35119..a0da462aa 100644
--- a/packages/components/timeline/demo/PendingDot.vue
+++ b/packages/components/timeline/demo/PendingDot.vue
@@ -1,26 +1,22 @@
 <template>
-  <p>默认幽灵节点的时间轴点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>默认幽灵节点的时间轴点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>自定义幽灵节点的时间轴点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-    <template #pendingDot>
-      <IxIcon name="sync" rotate />
-    </template>
-  </IxTimeline>
+    <p>自定义幽灵节点的时间轴点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+      <template #pendingDot>
+        <IxIcon name="sync" rotate />
+      </template>
+    </IxTimeline>
+  </IxSpace>
 </template>
-
-<style lang="less" scoped>
-p {
-  margin: 20px 0;
-}
-</style>
diff --git a/packages/components/timeline/demo/Placement.vue b/packages/components/timeline/demo/Placement.vue
index 049fa7ccd..6cda12834 100644
--- a/packages/components/timeline/demo/Placement.vue
+++ b/packages/components/timeline/demo/Placement.vue
@@ -1,31 +1,27 @@
 <template>
-  <p>内容在时间轴右边</p>
-  <IxTimeline :pending="true" placement="end">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>内容在时间轴右边</p>
+    <IxTimeline :pending="true" placement="end">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>内容在时间轴两侧轮流出现</p>
-  <IxTimeline :pending="true" placement="alternate">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+    <p>内容在时间轴两侧轮流出现</p>
+    <IxTimeline :pending="true" placement="alternate">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>内容在时间轴左边</p>
-  <IxTimeline :pending="true" placement="start">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+    <p>内容在时间轴左边</p>
+    <IxTimeline :pending="true" placement="start">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
+  </IxSpace>
 </template>
-
-<style lang="less" scoped>
-p {
-  margin: 20px 0;
-}
-</style>
diff --git a/packages/components/timeline/demo/Reverse.vue b/packages/components/timeline/demo/Reverse.vue
index a6dc7c486..b844875b1 100644
--- a/packages/components/timeline/demo/Reverse.vue
+++ b/packages/components/timeline/demo/Reverse.vue
@@ -1,12 +1,14 @@
 <template>
-  <IxTimeline :pending="true" :reverse="reverse">
-    <IxTimelineItem key="0">New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem key="1">Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem key="2">Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem key="3">Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <IxTimeline :pending="true" :reverse="reverse">
+      <IxTimelineItem key="0">New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem key="1">Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem key="2">Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem key="3">Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <IxButton mode="primary" @click="changeReverse">Toggle reverse</IxButton>
+    <IxButton mode="primary" @click="changeReverse">Toggle reverse</IxButton>
+  </IxSpace>
 </template>
 
 <script lang="ts">
diff --git a/packages/components/timeline/docs/Index.zh.md b/packages/components/timeline/docs/Index.zh.md
index 36a9b8880..231d1d7df 100644
--- a/packages/components/timeline/docs/Index.zh.md
+++ b/packages/components/timeline/docs/Index.zh.md
@@ -58,20 +58,23 @@ export const statusColors = ['primary', 'info', 'pending', 'success', 'warning',
 
 | 名称 | `default` | `dark` | 备注 |
 | --- | --- | --- | --- |
-| `@timeline-size` | `@font-size-base` | - | - |
-| `@timeline-item-minheight` | `20px` | - | - |
-| `@timeline-dot-dia` | `10px` | - | - |
-| `@timeline-dot-border` | `@border-width-md solid transparent` | - | - |
-| `@timeline-custom-dot-top` | `5px` | - | - |
-| `@timeline-custom-dot-padding` | `1px 0` | - | - |
-| `@timeline-custom-dot-gap` | `(@timeline-dot-dia / 2)` | - | - |
-| `@timeline-content-gap` | `18px` | - | - |
-| `@timeline-content-line-height` | `20px` | - | - |
-| `@timeline-content-top` | `-5px` | - | - |
+| `@timeline-font-size` | `@font-size-sm` | - | - |
+| `@timeline-line-height` | `1.25` | - | - |
+| `@timeline-item-timeline-width` | `@timeline-dot-size + @timeline-dot-border-width + 8` | - | - |
+| `@timeline-item-timeline-top` | `(@timeline-font-size * @timeline-line-height / 2 - @timeline-dot-size / 2)` | - | - |
+| `@timeline-dot-size` | `12px` | - | - |
+| `@timeline-dot-border-width` | `2px` | - | - |
+| `@timeline-dot-border` | `@timeline-dot-border-width solid transparent` | - | - |
+| `@timeline-dot-font-size` | `@timeline-dot-size + @timeline-dot-border-width` | - | - |
+| `@timeline-custom-dot-gap` | `(@timeline-dot-size / 2)` | - | - |
+| `@timeline-content-gap` | `@timeline-item-timeline-width` | - | - |
 | `@timeline-content-color` | `@text-color` | - | - |
-| `@timeline-content-label-color` | `@color-grey` | - | - |
-| `@timeline-dotted-content-min-height` | `48px` | - | - |
-| `@timeline-line-gap` | `((@timeline-dot-dia - @border-width-md) / 2)` | - | - |
-| `@timeline-line-border` | `@border-width-md solid #e8e8e8` | - | - |
-| `@timeline-reverse-pending-dot-line-top` | `14px` | - | - |
+| `@timeline-content-label-color` | `@color-graphite` | - | - |
+| `@timeline-line-gap` | `((@timeline-dot-size - @timeline-dot-border-width) / 2)` | - | - |
+| `@timeline-line-width` | `2px` | - | - |
+| `@timeline-line-background-color` | `@color-graphite-l30` | - | - |
+| `@timeline-pending-item-content-min-height` | `40px` | - | - |
+| `@timeline-content-margin-bottom` | `20px` | - | - |
+| `@timeline-dotted-line-background` | `linear-gradient(to bottom, @timeline-line-background-color, @timeline-line-background-color 50%, transparent 50%, transparent)` | - | - |
+| `@timeline-dotted-line-background-size` | `100% 10px` | - | - |
 <!--- insert less variable end  --->
\ No newline at end of file
diff --git a/packages/components/timeline/src/Timeline.tsx b/packages/components/timeline/src/Timeline.tsx
index 1f1a196e4..28afac0a2 100644
--- a/packages/components/timeline/src/Timeline.tsx
+++ b/packages/components/timeline/src/Timeline.tsx
@@ -6,10 +6,9 @@
  */
 
 import type { TimelineProps } from './types'
-import type { Slots, VNode } from 'vue'
+import type { ComputedRef, Slots, VNode } from 'vue'
 
-import { ComputedRef, computed } from '@vue/reactivity'
-import { defineComponent, normalizeClass, provide } from 'vue'
+import { computed, defineComponent, normalizeClass, provide } from 'vue'
 
 import { isBoolean } from 'lodash-es'
 
@@ -30,9 +29,6 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-timeline`)
 
     const hasPendingNode = computed(() => props.pending !== false || hasSlot(slots, 'pending'))
-    const itemNodes = useItems(slots, props, hasPendingNode, mergedPrefixCls)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const itemIndexArray = computed(() => itemNodes.value.map(node => (node as any).index))
 
     const classes = computed(() => {
       const { placement, reverse, both } = props
@@ -42,21 +38,24 @@ export default defineComponent({
         [`${prefixCls}-${placement}`]: true,
         [`${prefixCls}-reverse`]: reverse,
         [`${prefixCls}-not-both`]: !both,
+        [`${prefixCls}-pending`]: hasPendingNode.value,
       })
     })
 
-    provide(timelineToken, { props, itemIndexArray, hasPendingNode, mergedPrefixCls })
+    provide(timelineToken, { props, mergedPrefixCls })
 
     return () => {
+      const itemNodes = useItems(slots, props, hasPendingNode, mergedPrefixCls)
+
       return <ul class={classes.value}>{itemNodes.value}</ul>
     }
   },
 })
 
-function convertItemNodes(itemsNodes: VNode[] | undefined): VNode[] {
-  return flattenNode(itemsNodes, { key: timelineItemKey }).map((node, index) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(node as any).index = index + 1
+function convertItemNodes(itemNodes: VNode[]): VNode[] {
+  return flattenNode(itemNodes, { key: timelineItemKey }).map((node, index) => {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    ;(node as any).index = index
     return node
   })
 }
@@ -71,18 +70,19 @@ function useItems(
     const { pending, pendingDot, reverse } = props
 
     const defaultSlots = slots?.default?.() || []
-    const pendingDotNode = slots?.pendingDot?.() || pendingDot || <IxIcon name="loading" />
-    let penddingItem: null | VNode = null
+    let pendingNode: null | VNode = null
 
     if (hasPendingNode.value) {
-      penddingItem = (
-        <IxTimelineItem class={`${mergedPrefixCls.value}-item-pending-dot`} v-slots={{ dot: () => pendingDotNode }}>
+      const pendingDotNode = slots?.pendingDot?.() || pendingDot || <IxIcon name="loading" />
+
+      pendingNode = (
+        <IxTimelineItem class={`${mergedPrefixCls.value}-item-pending`} v-slots={{ dot: () => pendingDotNode }}>
           {convertStringVNode(slots.pending, isBoolean(pending) ? '' : pending)}
         </IxTimelineItem>
       )
     }
 
-    const timelineItemNodes = reverse ? [penddingItem, ...defaultSlots.reverse()] : [...defaultSlots, penddingItem]
+    const timelineItemNodes = reverse ? [pendingNode, ...defaultSlots.reverse()] : [...defaultSlots, pendingNode]
 
     return convertItemNodes(timelineItemNodes.filter(Boolean) as VNode[])
   })
diff --git a/packages/components/timeline/src/TimelineItem.tsx b/packages/components/timeline/src/TimelineItem.tsx
index 6c62c7d1b..733bb6730 100644
--- a/packages/components/timeline/src/TimelineItem.tsx
+++ b/packages/components/timeline/src/TimelineItem.tsx
@@ -20,21 +20,20 @@ export default defineComponent({
   props: timelineItemProps,
   [timelineItemKey]: true,
   setup(props, { slots }) {
+    const { props: parentProps, mergedPrefixCls } = inject(timelineToken)!
     const { vnode } = getCurrentInstance()!
 
-    const { props: parentProps, itemIndexArray, hasPendingNode, mergedPrefixCls } = inject(timelineToken)!
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const itemIndex = computed(() => itemIndexArray.value.indexOf((vnode as any).index))
-
     const itemPlacement = computed(() => {
-      const { placement: parentpPlacement } = parentProps
+      const { placement: parentPlacement } = parentProps
       const { placement } = props
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const index = (vnode as any).index
 
       let _placement
-      if (parentpPlacement === 'alternate') {
-        _placement = placement ? placement : itemIndex.value % 2 ? 'start' : 'end'
+      if (parentPlacement === 'alternate') {
+        _placement = placement ? placement : index % 2 ? 'start' : 'end'
       } else {
-        _placement = parentpPlacement
+        _placement = parentPlacement
       }
 
       return _placement
@@ -54,26 +53,19 @@ export default defineComponent({
     })
 
     const classes = computed(() => {
-      const { reverse } = parentProps
-
       const prefixCls = `${mergedPrefixCls.value}-item`
       const placement = itemPlacement.value
-      const allItemLength = itemIndexArray.value.length
-      const index = itemIndex.value
-
-      const isReversePending = hasPendingNode.value && reverse && index === 0
-      const isPending = hasPendingNode.value && !reverse && index === allItemLength - 2
 
       return normalizeClass({
         [`${prefixCls}`]: true,
         [`${prefixCls}-${placement}`]: true,
-        [`${prefixCls}-pending`]: isReversePending || isPending,
       })
     })
 
     const dotClass = computed(() => {
-      const prefixCls = `${mergedPrefixCls.value}-item`
+      const prefixCls = `${mergedPrefixCls.value}-item-head`
       const { dot, color } = props
+
       return normalizeClass({
         [`${prefixCls}-dot`]: true,
         [`${prefixCls}-dot-custom`]: hasSlot(slots, 'dot') || !!dot,
@@ -84,18 +76,20 @@ export default defineComponent({
     return () => {
       const { label, dot } = props
       const prefixCls = `${mergedPrefixCls.value}-item`
-
       const dotNode = convertStringVNode(slots.dot, dot)
       const labelNode = convertStringVNode(slots.label, label)
+
       return (
         <li class={classes.value}>
-          <div class={`${prefixCls}-line`}></div>
-          <div class={dotClass.value} style={dotStyle.value as CSSProperties}>
-            {dotNode}
+          <div class={`${prefixCls}-head`}>
+            <div class={`${prefixCls}-head-line`}></div>
+            <div class={dotClass.value} style={dotStyle.value as CSSProperties}>
+              {dotNode}
+            </div>
           </div>
           <div class={`${prefixCls}-content`}>
-            {labelNode && <div class={`${prefixCls}-label`}>{labelNode}</div>}
-            {slots.default && <div class={`${prefixCls}-desc`}>{slots.default()}</div>}
+            {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
+            {slots.default && <div class={`${prefixCls}-content-desc`}>{slots.default()}</div>}
           </div>
         </li>
       )
diff --git a/packages/components/timeline/src/token.ts b/packages/components/timeline/src/token.ts
index 95d99cc74..8a760b4b3 100644
--- a/packages/components/timeline/src/token.ts
+++ b/packages/components/timeline/src/token.ts
@@ -11,8 +11,6 @@ import { type TimelineProps } from './types'
 
 export interface TimelineContext {
   props: TimelineProps
-  itemIndexArray: ComputedRef<number[]>
-  hasPendingNode: ComputedRef<boolean>
   mergedPrefixCls: ComputedRef<string>
 }
 
diff --git a/packages/components/timeline/style/index.less b/packages/components/timeline/style/index.less
index 8ca84b6c7..90bd79661 100644
--- a/packages/components/timeline/style/index.less
+++ b/packages/components/timeline/style/index.less
@@ -4,89 +4,86 @@
 .@{timeline-prefix} {
   .reset-component();
 
-  line-height: @timeline-content-line-height;
-  color: @timeline-content-color;
+  font-size: @timeline-font-size;
+  line-height: @timeline-line-height;
+  display: flex;
+  flex-direction: column;
+  
 
   .@{timeline-item-prefix} {
     position: relative;
-    padding-bottom: @timeline-item-minheight;
 
-    &-dot {
+    &-head {
       position: absolute;
-      width: @timeline-dot-dia;
-      height: @timeline-dot-dia;
-      border: @timeline-dot-border;
-      border-radius: 50%;
-
-      .timeline-color-classes(@preset-colors);
-      .timeline-color-classes(@status-colors);
-
-      &-custom {
-        width: auto;
-        height: auto;
-        border: none;
-        line-height: 1;
-        padding: @timeline-custom-dot-padding;
-        top: @timeline-custom-dot-top;
-        background-color: @color-white;
+      width: @timeline-item-timeline-width;
+      top: @timeline-item-timeline-top;
+      height: 100%;
+
+      &-line {
+        position: absolute;
+        left: @timeline-line-gap;
+        top: @timeline-dot-size;
+        bottom: 0;
+        width: @timeline-line-width;
+        background-color: @timeline-line-background-color;
       }
-    }
 
-    &-line {
-      position: absolute;
-      top: @timeline-dot-dia;
-      width: 0;
-      height: calc(100% - @timeline-dot-dia);
-      border-left: @timeline-line-border;
-    }
+      &-dot {
+        width: @timeline-dot-size;
+        height: @timeline-dot-size;
+        border: @timeline-dot-border;
+        border-radius: 50%;
+        font-size: @timeline-dot-font-size;
 
-    &-content {
-      position: relative;
-      top: @timeline-content-top;
-    }
+        .timeline-color-classes(@preset-colors);
+        .timeline-color-classes(@status-colors);
 
-    &-label {
-      color: @timeline-content-label-color;
+        &-custom {
+          position: absolute;
+          border: none;
+          background-color: @color-white;
+          display: flex;
+          align-items: center;
+          justify-content: center
+        }
+      }
     }
 
     &:last-child {
-      .@{timeline-item-prefix} {
+      .@{timeline-item-prefix}-head-line {
+        display: none;
+      }
+    }
 
-        &-line {
-          display: none;
-        }
+    &-content {
+      position: relative;
+      color: @timeline-content-color;
+      margin-bottom: @timeline-content-margin-bottom;
+      
+      &-label {
+        color: @timeline-content-label-color;
       }
     }
+  }
 
-    &-pending {
-      .@{timeline-item-prefix} {
+  &-pending:not(&-reverse) {
+    
+    .@{timeline-item-prefix}:nth-last-child(2) {
+      .timeline-dotted-line();
+    }
+  }
 
-        &-line {
-          border-left-style: dotted;
-        }
+  &-pending&-reverse {
 
-        &-content {
-          min-height: @timeline-dotted-content-min-height;
-        }
+    .@{timeline-item-prefix} {
+      &-pending {
+        .timeline-dotted-line();
       }
     }
   }
 
   &-end {
     .@{timeline-item-prefix} {
-
-      &-dot {
-
-        &-custom {
-          left: @timeline-custom-dot-gap;
-          transform: translate(-50%, -50%);
-        }
-      }
-
-      &-line {
-        left: @timeline-line-gap;
-      }
-
       &-content {
         margin-left: @timeline-content-gap;
       }
@@ -96,17 +93,22 @@
   &-start {
     .@{timeline-item-prefix} {
 
-      &-dot {
+      &-head {
         right: 0;
+        width: @timeline-dot-size;
 
-        &-custom {
-          right: @timeline-custom-dot-gap;
-          transform: translate(50%, -50%);
+        &-line {
+          left: unset;
+          right: @timeline-line-gap;
         }
-      }
 
-      &-line {
-        right: @timeline-line-gap;
+        &-dot {
+
+          &-custom {
+            right: @timeline-custom-dot-gap;
+            transform: translate(50%, -50%);
+          }
+        }
       }
 
       &-content {
@@ -117,6 +119,9 @@
   }
 
   &-alternate {
+
+    .timeline-line-align-center();
+
     .@{timeline-item-prefix} {
 
       &-start {
@@ -139,32 +144,14 @@
         }
       }
 
-      &-dot {
+      &-head {
         left: 50%;
+        width: @timeline-dot-size;
         transform: translateX(-50%);
 
-        &-custom {
-          transform: translate(-50%, -50%);
-        }
-      }
-
-      &-line {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-    }
-  }
-
-  &-reverse {
-    .@{timeline-item-prefix} {
-
-      &-pending {
-        .@{timeline-item-prefix} {
-
-          &-line {
-            top: @timeline-reverse-pending-dot-line-top;
-            height: calc(100% - @timeline-reverse-pending-dot-line-top);
-          }
+        &-line {
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
     }
@@ -172,46 +159,37 @@
 
   &-not-both {
 
-    .@{timeline-item-prefix} {
-      &-label {
-        position: absolute;
-        transform: translateX(-100%);
-      }
+    .timeline-line-align-center();
 
-      &-line {
-        left: 50%;
-        transform: translateX(-50%);
-      }
+    .@{timeline-item-prefix} {
 
-      &-dot {
-        left: 50%;
-        transform: translateX(-50%);
+      &-content {
+        &-label {
+          position: absolute;
+        }
       }
-
+      
       &-start {
         .@{timeline-item-prefix} {
           &-content {
-            width: calc(50% - 18px);
-            margin-left: 0;
-          }
-          &-label {
-            right: calc(-50%);
+            width: calc(50% - @timeline-content-gap);
+            &-label {
+              transform: translateX(100%);
+              right: -@timeline-content-gap * 2;
+            }
           }
         }
-  
       }
 
       &-end {
         .@{timeline-item-prefix} {
           &-content {
             width: 50%;
-            margin-left: calc(50% + 18px);
-          }
-          &-label {
-            left: -36px;
-          }
-          &-desc {
-            text-align: left;
+            margin-left: calc(50% + @timeline-content-gap);
+            &-label {
+              left: -@timeline-content-gap * 2;
+              transform: translateX(-100%);
+            }
           }
         }
       }
diff --git a/packages/components/timeline/style/mixin.less b/packages/components/timeline/style/mixin.less
index 10967a2a9..6e589c50e 100644
--- a/packages/components/timeline/style/mixin.less
+++ b/packages/components/timeline/style/mixin.less
@@ -7,3 +7,32 @@
     color: @@color-name;
   }
 }
+
+.timeline-line-align-center() {
+  .@{timeline-item-prefix} {
+    &-head {
+      left: 50%;
+      width: @timeline-dot-size;
+      transform: translateX(-50%);
+
+      &-line {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+
+.timeline-dotted-line() {
+  .@{timeline-item-prefix} {
+
+    &-head-line {
+      background: @timeline-dotted-line-background;
+      background-size: @timeline-dotted-line-background-size;
+    }
+
+    &-content {
+      margin-bottom: @timeline-pending-item-content-min-height;
+    }
+  }
+}
diff --git a/packages/components/timeline/style/themes/default.variable.less b/packages/components/timeline/style/themes/default.variable.less
index f9887f57a..217f5e76e 100644
--- a/packages/components/timeline/style/themes/default.variable.less
+++ b/packages/components/timeline/style/themes/default.variable.less
@@ -1,19 +1,26 @@
-@timeline-size: @font-size-base;
-@timeline-item-minheight: 20px;
+@timeline-font-size: @font-size-sm;
 
-@timeline-dot-dia: 10px;
-@timeline-dot-border: @border-width-md solid transparent;
-@timeline-custom-dot-top: 5px;
-@timeline-custom-dot-padding: 1px 0;
-@timeline-custom-dot-gap: (@timeline-dot-dia / 2);
+@timeline-line-height: 1.25;
 
-@timeline-content-gap: 18px;
-@timeline-content-line-height: 20px;
-@timeline-content-top: -5px;
+@timeline-item-timeline-width: @timeline-dot-size + @timeline-dot-border-width + 8;
+@timeline-item-timeline-top: (@timeline-font-size * @timeline-line-height / 2 - @timeline-dot-size / 2);
+
+@timeline-dot-size: 12px;
+@timeline-dot-border-width: 2px;
+@timeline-dot-border: @timeline-dot-border-width solid transparent;
+@timeline-dot-font-size: @timeline-dot-size + @timeline-dot-border-width;
+@timeline-custom-dot-gap: (@timeline-dot-size / 2);
+
+@timeline-content-gap: @timeline-item-timeline-width;
 @timeline-content-color: @text-color;
-@timeline-content-label-color: @color-grey;
-@timeline-dotted-content-min-height: 48px;
+@timeline-content-label-color: @color-graphite;
+
+@timeline-line-gap: ((@timeline-dot-size - @timeline-dot-border-width) / 2);
+@timeline-line-width: 2px;
+@timeline-line-background-color: @color-graphite-l30;
+
+@timeline-pending-item-content-min-height: 40px;
+@timeline-content-margin-bottom: 20px;
 
-@timeline-line-gap: ((@timeline-dot-dia - @border-width-md) / 2);
-@timeline-line-border: @border-width-md solid #e8e8e8;
-@timeline-reverse-pending-dot-line-top: 14px;
+@timeline-dotted-line-background: linear-gradient(to bottom, @timeline-line-background-color, @timeline-line-background-color 50%, transparent 50%, transparent);
+@timeline-dotted-line-background-size: 100% 10px;
diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md
index 4a571f85a..342f2b8d8 100644
--- a/packages/components/transfer/docs/Index.zh.md
+++ b/packages/components/transfer/docs/Index.zh.md
@@ -176,3 +176,32 @@ export interface TransferOperationsSlotParams {
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
 | `scrollTo` | 源数据滚动到指定位置 | `(option?: number \| VirtualScrollToOptions, isSource?: boolean) => void` | 仅使用默认列表并开启 `virtual` 下可用 |
+
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | `default` | `dark` | 备注 |
+| --- | --- | --- | --- |
+| `@transfer-list-width` | `260px` | - | - |
+| `@transfer-list-height` | `290px` | - | - |
+| `@transfer-list-border-color` | `@form-border-color` | - | - |
+| `@transfer-list-border-radius` | `2px` | - | - |
+| `@transfer-list-background-color` | `@form-background-color` | - | - |
+| `@transfer-color` | `@text-color` | - | - |
+| `@transfer-disabled-color` | `@text-color-disabled` | - | - |
+| `@transfer-list-header-height` | `@height-lg` | - | - |
+| `@transfer-list-header-suffix-margin-left` | `@spacing-md` | - | - |
+| `@transfer-list-footer-height` | `@height-lg` | - | - |
+| `@transfer-list-header-padding` | `0 @spacing-md` | - | - |
+| `@transfer-list-footer-padding` | `0 @spacing-sm` | - | - |
+| `@transfer-operations-min-width` | `@spacing-xs` | - | - |
+| `@transfer-operations-padding` | `@spacing-sm` | - | - |
+| `@transfer-operations-btn-width` | `24px` | - | - |
+| `@transfer-operations-btn-height` | `32px` | - | - |
+| `@transfer-operations-btn-gap` | `@spacing-sm` | - | - |
+| `@transer-search-width` | `110px` | - | - |
+| `@transfer-clear-icon-font-size` | `@font-size-md` | - | - |
+| `@transfer-icon-color` | `@color-graphite-d20` | - | - |
+| `@transfer-icon-hover-color` | `@color-primary` | - | - |
+| `@transfer-icon-active-color` | `@color-primary` | - | - |
+<!--- insert less variable end  --->
\ No newline at end of file