diff --git a/packages/components/menu/docs/Index.zh.md b/packages/components/menu/docs/Index.zh.md
index 3b31749b4..b843b18c9 100644
--- a/packages/components/menu/docs/Index.zh.md
+++ b/packages/components/menu/docs/Index.zh.md
@@ -122,7 +122,7 @@ export interface MenuClickOptions {
 | `@menu-text-color` | `@text-color` | - | - |
 | `@menu-background-color` | `@background-color-component` | - | - |
 | `@menu-highlight-color` | `@color-primary` | - | - |
-| `@menu-highlight-background-color` | `~colorPalette('@{color-primary}', -50)` | - | - |
+| `@menu-highlight-background-color` | `~colorPalette('@{color-primary}', -50) ` | - | - |
 | `@menu-disabled-color` | `@disabled-color` | - | - |
 | `@menu-disabled-background-color` | `transparent` | - | - |
 | `@menu-border-width` | `@border-width-sm` | - | - |
diff --git a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
index cfaefde35..3f7dc966b 100644
--- a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
+++ b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
@@ -1,434 +1,924 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Timeline pending slot work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right 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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\">pendingSlotText</div>
+"<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>
+  <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>
+  </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>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending slot work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right 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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"loading\\">
-          <path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path>
-        </svg></i></div>
-    <div class=\\"ix-timeline-item-content\\">pendingSlotText</div>
+"<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>
+  <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>
+  </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>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending slot work 3`] = `
-"<ul class=\\"ix-timeline ix-timeline-right ix-timeline-reverse\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right ix-timeline-item-pending\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\">pendingSlotText</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
+"<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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <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\\">
+    <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\\">
+    <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>
+  <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>
 </ul>"
 `;
 
 exports[`Timeline pending work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
+"<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>
+  <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\\">
+    <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>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right 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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\"></div>
+"<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>
+  <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>
+  </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>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending work 3`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right 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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"loading\\">
-          <path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path>
+"<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>
+  <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>
+  </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\\">pendingText</div>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\">pendingText</div>
+    </div>
   </li>
 </ul>"
 `;
 
 exports[`Timeline pending work 4`] = `
-"<ul class=\\"ix-timeline ix-timeline-right ix-timeline-reverse\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right ix-timeline-item-pending\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\"></div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
+"<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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\"></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\\">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>
+    <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\\">
+    <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>
+  <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>
 </ul>"
 `;
 
-exports[`Timeline pendingDot slot work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <div class=\\"ix-timeline-item-line\\"></div>
-    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">pendingDotSlotText</div>
-    <div class=\\"ix-timeline-item-content\\"></div>
+exports[`Timeline pendingDot 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>
+  <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>
+  </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>
   </li>
 </ul>"
 `;
 
-exports[`Timeline pendingDot slot work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
+exports[`Timeline pendingDot 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>
+  <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>
+  </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\\">pendingDotSlotText</div>
-    <div class=\\"ix-timeline-item-content\\"></div>
+    <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">pendingDotText</div>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\"></div>
+    </div>
   </li>
 </ul>"
 `;
 
-exports[`Timeline pendingDot work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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 ix-icon-spin\\" role=\\"img\\" aria-label=\\"loading\\"></i></div>
-    <div class=\\"ix-timeline-item-content\\"></div>
+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>
+    <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>
+  <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\\">
+    <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>
   </li>
 </ul>"
 `;
 
-exports[`Timeline pendingDot work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-pending-dot ix-timeline-item-right\\">
-    <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>
-    <div class=\\"ix-timeline-item-content\\"></div>
+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>
+    <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>
+  <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\\">
+    <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>
   </li>
 </ul>"
 `;
 
-exports[`Timeline position work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">3</div>
+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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\">3</div>
+    </div>
   </li>
 </ul>"
 `;
 
-exports[`Timeline position work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-left\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">0</div>
+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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\">3</div>
+    </div>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">1</div>
+</ul>"
+`;
+
+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>
+    <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>
+  <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\\">
+    <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>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">2</div>
+</ul>"
+`;
+
+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>
+    <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>
+  <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\\">
+    <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>
   </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
+</ul>"
+`;
+
+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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-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>
+    <div class=\\"ix-timeline-item-content\\">
+      <!---->
+      <div class=\\"ix-timeline-item-desc\\">3</div>
+    </div>
   </li>
 </ul>"
 `;
 
-exports[`Timeline position work 3`] = `
+exports[`Timeline placement work 4`] = `
 "<ul class=\\"ix-timeline ix-timeline-alternate\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
+  <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-start\\">
+    <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>
+  <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-start\\">
+    <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>
   </li>
 </ul>"
 `;
 
-exports[`Timeline render work 1`] = `"<ul class=\\"ix-timeline ix-timeline-right\\"></ul>"`;
+exports[`Timeline render work 1`] = `"<ul class=\\"ix-timeline ix-timeline-end\\"></ul>"`;
 
 exports[`Timeline reverse work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item\\">
-    <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\\">3</div>
+"<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>
+  <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\\">
+    <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>
   </li>
 </ul>"
 `;
 
-exports[`Timeline reverse work 2`] = `"<ul class=\\"ix-timeline ix-timeline-right ix-timeline-reverse\\"></ul>"`;
+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>
+    <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\\">
+    <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\\">
+    <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>
+  <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>
+</ul>"
+`;
diff --git a/packages/components/timeline/__tests__/__snapshots__/timelineItem.spec.ts.snap b/packages/components/timeline/__tests__/__snapshots__/timelineItem.spec.ts.snap
deleted file mode 100644
index 2f08bb80f..000000000
--- a/packages/components/timeline/__tests__/__snapshots__/timelineItem.spec.ts.snap
+++ /dev/null
@@ -1,207 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TimelineItem color work 1`] = `
-"<li class=\\"ix-timeline-item\\">
-  <div class=\\"ix-timeline-item-line\\"></div>
-  <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-red\\"></div>
-  <div class=\\"ix-timeline-item-content\\"></div>
-</li>"
-`;
-
-exports[`TimelineItem color work 2`] = `
-"<li class=\\"ix-timeline-item\\">
-  <div class=\\"ix-timeline-item-line\\"></div>
-  <div class=\\"ix-timeline-item-dot\\" style=\\"color: black; border-color: black;\\"></div>
-  <div class=\\"ix-timeline-item-content\\"></div>
-</li>"
-`;
-
-exports[`TimelineItem dot slot work 1`] = `
-"<li class=\\"ix-timeline-item\\">
-  <div class=\\"ix-timeline-item-line\\"></div>
-  <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">dotSlotText</div>
-  <div class=\\"ix-timeline-item-content\\"></div>
-</li>"
-`;
-
-exports[`TimelineItem dot slot work 2`] = `
-"<li class=\\"ix-timeline-item\\">
-  <div class=\\"ix-timeline-item-line\\"></div>
-  <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">dotSlotText</div>
-  <div class=\\"ix-timeline-item-content\\"></div>
-</li>"
-`;
-
-exports[`TimelineItem dot work 1`] = `
-"<li class=\\"ix-timeline-item\\">
-  <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>
-</li>"
-`;
-
-exports[`TimelineItem dot work 2`] = `
-"<li class=\\"ix-timeline-item\\">
-  <div class=\\"ix-timeline-item-line\\"></div>
-  <div class=\\"ix-timeline-item-dot ix-timeline-item-dot-custom ix-timeline-item-dot-primary\\">dotText</div>
-  <div class=\\"ix-timeline-item-content\\"></div>
-</li>"
-`;
-
-exports[`TimelineItem position work 1`] = `
-"<ul class=\\"ix-timeline ix-timeline-right\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem position work 2`] = `
-"<ul class=\\"ix-timeline ix-timeline-alternate\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem position work 3`] = `
-"<ul class=\\"ix-timeline ix-timeline-left\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem position work 4`] = `
-"<ul class=\\"ix-timeline ix-timeline-alternate\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem position work 5`] = `
-"<ul class=\\"ix-timeline ix-timeline-alternate\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem position work 6`] = `
-"<ul class=\\"ix-timeline ix-timeline-alternate\\">
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">0</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">1</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-right\\">
-    <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\\">2</div>
-  </li>
-  <li class=\\"ix-timeline-item ix-timeline-item-left\\">
-    <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\\">3</div>
-  </li>
-</ul>"
-`;
-
-exports[`TimelineItem render work 1`] = `
-"<li class=\\"ix-timeline-item\\">
-  <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>
-</li>"
-`;
diff --git a/packages/components/timeline/__tests__/timeline.spec.ts b/packages/components/timeline/__tests__/timeline.spec.ts
index ac18f4194..ee361534f 100644
--- a/packages/components/timeline/__tests__/timeline.spec.ts
+++ b/packages/components/timeline/__tests__/timeline.spec.ts
@@ -1,60 +1,87 @@
 import { MountingOptions, mount } from '@vue/test-utils'
-import { defineComponent, h } from 'vue'
+import { h } from 'vue'
 
 import { renderWork } from '@tests'
 
-import IxTimeline from '../src/Timeline.vue'
-import IxTimelineItem from '../src/TimelineItem.vue'
+import IxTimeline from '../src/Timeline'
+import IxTimelineItem from '../src/TimelineItem'
 import { TimelineProps } from '../src/types'
 
-const TimelineDefaultSlots = defineComponent({
-  components: { IxTimelineItem },
-  render() {
-    return [
-      h(IxTimelineItem, {}, { default: () => 0 }),
-      h(IxTimelineItem, {}, { default: () => 1 }),
-      h(IxTimelineItem, {}, { default: () => 2 }),
-      h(IxTimelineItem, {}, { default: () => 3 }),
-    ]
-  },
-})
+const TimelineMount = (options?: MountingOptions<Partial<TimelineProps>>) => {
+  const { slots = {}, ...rest } = options || {}
+
+  const wrapper = mount(IxTimeline, {
+    ...rest,
+    slots: {
+      default: [
+        h(IxTimelineItem, {}, { default: () => 0 }),
+        h(IxTimelineItem, {}, { default: () => 1 }),
+        h(IxTimelineItem, {}, { default: () => 2 }),
+        h(IxTimelineItem, {}, { default: () => 3 }),
+      ],
+      ...slots,
+    },
+  })
 
-describe.skip('Timeline', () => {
-  const TimelineMount = (options?: MountingOptions<Partial<TimelineProps>>) => mount(IxTimeline, { ...options })
+  return wrapper
+}
 
+describe('Timeline', () => {
   renderWork(IxTimeline)
 
-  test('position work', async () => {
-    const wrapper = TimelineMount({
-      slots: {
-        default: TimelineDefaultSlots,
-      },
-    })
+  test('placement work', async () => {
+    const wrapper = TimelineMount()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    expect(wrapper.findAll('.ix-timeline-item-right').length).toBe(4)
+    expect(wrapper.findAll('.ix-timeline-item-end').length).toBe(4)
     expect(wrapper.html()).toMatchSnapshot()
 
-    await wrapper.setProps({ position: 'left' })
-    expect(wrapper.findAll('.ix-timeline-item-left').length).toBe(4)
+    await wrapper.setProps({ placement: 'start' })
+    expect(wrapper.findAll('.ix-timeline-item-start').length).toBe(4)
     expect(wrapper.html()).toMatchSnapshot()
 
-    await wrapper.setProps({ position: 'alternate' })
-    expect(wrapper.findAll('.ix-timeline-item-left').length).toBe(2)
-    expect(wrapper.findAll('.ix-timeline-item-right').length).toBe(2)
+    await wrapper.setProps({ placement: 'alternate' })
+    expect(wrapper.findAll('.ix-timeline-item-start').length).toBe(2)
+    expect(wrapper.findAll('.ix-timeline-item-end').length).toBe(2)
     wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
-      const position = index % 2 ? 'left' : 'right'
+      const placement = index % 2 ? 'start' : 'end'
 
-      expect(item.classes()).toContain(`ix-timeline-item-${position}`)
+      expect(item.classes()).toContain(`ix-timeline-item-${placement}`)
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  test('reverse work', async () => {
+  test('placement with item placement work', async () => {
     const wrapper = TimelineMount({
       slots: {
-        default: TimelineDefaultSlots,
+        default: [
+          h(IxTimelineItem, { placement: 'start' }, { default: () => 0 }),
+          h(IxTimelineItem, { placement: 'start' }, { default: () => 1 }),
+          h(IxTimelineItem, { placement: 'start' }, { default: () => 2 }),
+          h(IxTimelineItem, { placement: 'start' }, { default: () => 3 }),
+        ],
       },
     })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
+    expect(wrapper.findAll('.ix-timeline-item-end').length).toBe(4)
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ placement: 'start' })
+    expect(wrapper.findAll('.ix-timeline-item-start').length).toBe(4)
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ placement: 'alternate' })
+    expect(wrapper.findAll('.ix-timeline-item-start').length).toBe(4)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('reverse work', async () => {
+    const wrapper = TimelineMount()
     wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
       expect(item.text()).toBe(index.toString())
     })
@@ -72,11 +99,7 @@ describe.skip('Timeline', () => {
   })
 
   test('pending work', async () => {
-    const wrapper = TimelineMount({
-      slots: {
-        default: TimelineDefaultSlots,
-      },
-    })
+    const wrapper = TimelineMount()
     const pendingText = 'pendingText'
 
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
@@ -96,9 +119,6 @@ describe.skip('Timeline', () => {
     expect(wrapper.html()).toMatchSnapshot()
 
     const reverseWrapper = TimelineMount({
-      slots: {
-        default: TimelineDefaultSlots,
-      },
       props: {
         pending: true,
         reverse: true,
@@ -121,7 +141,6 @@ describe.skip('Timeline', () => {
     const pendingText = 'pendingText'
     const wrapper = TimelineMount({
       slots: {
-        default: TimelineDefaultSlots,
         pending: pendingSlotText,
       },
     })
@@ -138,7 +157,6 @@ describe.skip('Timeline', () => {
 
     const reverseWrapper = TimelineMount({
       slots: {
-        default: TimelineDefaultSlots,
         pending: pendingSlotText,
       },
       props: {
@@ -159,9 +177,6 @@ describe.skip('Timeline', () => {
 
   test('pendingDot work', async () => {
     const wrapper = TimelineMount({
-      slots: {
-        default: TimelineDefaultSlots,
-      },
       props: {
         pending: true,
       },
@@ -178,25 +193,91 @@ describe.skip('Timeline', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  test('pendingDot slot work', async () => {
-    const pendingDotSlotText = 'pendingDotSlotText'
-    const pendingDotText = 'pendingDotText'
+  test('both work', async () => {
+    const wrapper = TimelineMount({
+      props: {
+        both: false,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('ix-timeline-not-both')
+  })
+})
+
+describe('TimelineItem', () => {
+  test('color work', async () => {
     const wrapper = TimelineMount({
       slots: {
-        default: TimelineDefaultSlots,
-        pendingDot: pendingDotSlotText,
+        default: [
+          h(IxTimelineItem, { color: 'red' }, { default: () => 0 }),
+          h(IxTimelineItem, { color: 'black' }, { default: () => 1 }),
+        ],
       },
-      props: {
-        pending: true,
+    })
+
+    const items = wrapper.findAll('.ix-timeline-item')
+    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-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;"')
+  })
+
+  test('dot work', async () => {
+    const dotText = 'dotText'
+    const wrapper = TimelineMount({
+      slots: {
+        default: [h(IxTimelineItem, { dot: 'dotText' }, { default: () => 0 })],
       },
     })
 
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').findAll('.ix-icon').length).toBe(0)
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').text()).toBe(pendingDotSlotText)
-    expect(wrapper.html()).toMatchSnapshot()
+    const items = wrapper.findAll('.ix-timeline-item')
 
-    await wrapper.setProps({ pendingDot: pendingDotText })
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').text()).toBe(pendingDotSlotText)
-    expect(wrapper.html()).toMatchSnapshot()
+    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)
+  })
+
+  test('dot slot work', async () => {
+    const dotSlotText = 'dotSlotText'
+    const wrapper = TimelineMount({
+      slots: {
+        default: [h(IxTimelineItem, { dot: 'dotText' }, { dot: () => dotSlotText })],
+      },
+    })
+
+    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)
+  })
+
+  test('label work', async () => {
+    const labelText = 'labelText'
+    const wrapper = TimelineMount({
+      slots: {
+        default: [h(IxTimelineItem, { label: labelText }, { dot: () => 0 })],
+      },
+    })
+
+    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)
+  })
+
+  test('label slot work', async () => {
+    const labelText = 'labelText'
+    const labelSlotText = 'dotSlotText'
+    const wrapper = TimelineMount({
+      slots: {
+        default: [h(IxTimelineItem, { label: labelText }, { label: () => labelSlotText })],
+      },
+    })
+
+    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)
   })
 })
diff --git a/packages/components/timeline/__tests__/timelineItem.spec.ts b/packages/components/timeline/__tests__/timelineItem.spec.ts
deleted file mode 100644
index e03342795..000000000
--- a/packages/components/timeline/__tests__/timelineItem.spec.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { MountingOptions, mount } from '@vue/test-utils'
-import { PropType } from 'vue'
-
-import { renderWork } from '@tests'
-
-import IxTimeline from '../src/Timeline.vue'
-import IxTimelineItem from '../src/TimelineItem.vue'
-import { TimelineItemPosition, TimelineItemProps, TimelinePosition } from '../src/types'
-
-const TestComponent = {
-  components: { IxTimeline, IxTimelineItem },
-  template: `
-    <IxTimeline :position="position">
-        <IxTimelineItem>0</IxTimelineItem>
-        <IxTimelineItem :position="itemPosition">1</IxTimelineItem>
-        <IxTimelineItem>2</IxTimelineItem>
-        <IxTimelineItem>3</IxTimelineItem>
-    </IxTimeline>
-    `,
-  props: {
-    position: { type: String as PropType<TimelinePosition>, default: undefined },
-    itemPosition: { type: String as PropType<TimelineItemPosition>, default: undefined },
-  },
-}
-
-describe.skip('TimelineItem', () => {
-  const timelineItemMount = (options?: MountingOptions<Partial<TimelineItemProps>>) =>
-    mount(IxTimelineItem, { ...options })
-  renderWork(IxTimelineItem)
-
-  test('color work', async () => {
-    const wrapper = timelineItemMount({
-      props: {
-        color: 'red',
-      },
-    })
-    expect(wrapper.find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-red')
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      color: 'black',
-    })
-
-    expect(wrapper.find('.ix-timeline-item-dot-black').exists()).toBe(false)
-    expect(wrapper.find('.ix-timeline-item-dot').html()).toContain('style="color: black; border-color: black;"')
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  test('dot work', async () => {
-    const dotText = 'dotText'
-    const wrapper = timelineItemMount()
-    expect(wrapper.find('.ix-timeline-item-dot-custom').exists()).toBe(false)
-    expect(wrapper.find('.ix-timeline-item-dot').text()).toBe('')
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      dot: dotText,
-    })
-    expect(wrapper.find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(wrapper.find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(wrapper.find('.ix-timeline-item-dot').text()).toBe(dotText)
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  test('dot slot work', async () => {
-    const dotSlotText = 'dotSlotText'
-    const dotText = 'dotText'
-    const wrapper = timelineItemMount({
-      slots: {
-        dot: dotSlotText,
-      },
-    })
-    expect(wrapper.find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(wrapper.find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(wrapper.find('.ix-timeline-item-dot').text()).toBe(dotSlotText)
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      dot: dotText,
-    })
-    expect(wrapper.find('.ix-timeline-item-dot').text()).toBe(dotSlotText)
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  test('position work', async () => {
-    const wrapper = mount(TestComponent)
-    expect(wrapper.classes()).toContain('ix-timeline-right')
-    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    expect(wrapper.findAll('.ix-timeline-item-right').length).toBe(4)
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      itemPosition: 'left',
-    })
-    expect(wrapper.classes()).toContain('ix-timeline-alternate')
-    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    expect(wrapper.findAll('.ix-timeline-item-right').length).toBe(3)
-    expect(wrapper.findAll('.ix-timeline-item')[1].classes()).toContain('ix-timeline-item-left')
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      position: 'left',
-      itemPosition: undefined,
-    })
-    expect(wrapper.classes()).toContain('ix-timeline-left')
-    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    expect(wrapper.findAll('.ix-timeline-item-left').length).toBe(4)
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      itemPosition: 'right',
-    })
-    expect(wrapper.classes()).toContain('ix-timeline-alternate')
-    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    expect(wrapper.findAll('.ix-timeline-item-left').length).toBe(3)
-    expect(wrapper.findAll('.ix-timeline-item')[1].classes()).toContain('ix-timeline-item-right')
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      position: 'alternate',
-      itemPosition: undefined,
-    })
-    expect(wrapper.classes()).toContain('ix-timeline-alternate')
-    expect(wrapper.findAll('.ix-timeline-item').length).toBe(4)
-    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
-      const position = index % 2 ? 'left' : 'right'
-
-      expect(item.classes()).toContain(`ix-timeline-item-${position}`)
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    await wrapper.setProps({
-      itemPosition: 'right',
-    })
-    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
-      const position = index % 2 ? 'left' : 'right'
-
-      if (index === 1) {
-        expect(item.classes()).toContain(`ix-timeline-item-right`)
-      } else {
-        expect(item.classes()).toContain(`ix-timeline-item-${position}`)
-      }
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/packages/components/timeline/demo/Dot.md b/packages/components/timeline/demo/Dot.md
index 56ae76947..77691b965 100644
--- a/packages/components/timeline/demo/Dot.md
+++ b/packages/components/timeline/demo/Dot.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 1
 title:
   zh: 自定义时间轴点
 ---
diff --git a/packages/components/timeline/demo/Dot.vue b/packages/components/timeline/demo/Dot.vue
index 767949c2a..9c7722ad5 100644
--- a/packages/components/timeline/demo/Dot.vue
+++ b/packages/components/timeline/demo/Dot.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxTimeline :pending="true">
+  <IxTimeline>
     <IxTimelineItem>
       New issue in 2021-02-08
       <template #dot>
diff --git a/packages/components/timeline/demo/ItemPosition.md b/packages/components/timeline/demo/ItemPosition.md
deleted file mode 100644
index 17f689981..000000000
--- a/packages/components/timeline/demo/ItemPosition.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-order: 0
-title:
-  zh: 时间轴和内容的相对位置
----
-
-## zh
-
-position的优先级比timeline的position高
diff --git a/packages/components/timeline/demo/ItemPosition.vue b/packages/components/timeline/demo/ItemPosition.vue
deleted file mode 100644
index 4d53ca261..000000000
--- a/packages/components/timeline/demo/ItemPosition.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <IxTimeline>
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem position="left">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>
-</template>
diff --git a/packages/components/timeline/demo/Label.md b/packages/components/timeline/demo/Label.md
new file mode 100644
index 000000000..6babf291c
--- /dev/null
+++ b/packages/components/timeline/demo/Label.md
@@ -0,0 +1,9 @@
+---
+order: 6
+title:
+  zh: 使用 label 标签单独展示时间。
+---
+
+## zh
+
+使用 label 标签单独展示时间。
diff --git a/packages/components/timeline/demo/Label.vue b/packages/components/timeline/demo/Label.vue
new file mode 100644
index 000000000..f1f1e7085
--- /dev/null
+++ b/packages/components/timeline/demo/Label.vue
@@ -0,0 +1,49 @@
+<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>
+
+  <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>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>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>
+</template>
diff --git a/packages/components/timeline/demo/Pending.md b/packages/components/timeline/demo/Pending.md
index 791edf636..d44ca9ebe 100644
--- a/packages/components/timeline/demo/Pending.md
+++ b/packages/components/timeline/demo/Pending.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 2
 title:
   zh: 幽灵节点
 ---
diff --git a/packages/components/timeline/demo/PendingDot.md b/packages/components/timeline/demo/PendingDot.md
index 4e233f23e..004264d49 100644
--- a/packages/components/timeline/demo/PendingDot.md
+++ b/packages/components/timeline/demo/PendingDot.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 3
 title:
   zh: 幽灵节点的时间轴点
 ---
diff --git a/packages/components/timeline/demo/Placement.md b/packages/components/timeline/demo/Placement.md
new file mode 100644
index 000000000..519a2dcac
--- /dev/null
+++ b/packages/components/timeline/demo/Placement.md
@@ -0,0 +1,9 @@
+---
+order: 4
+title:
+  zh: 内容相对于时间轴的方向
+---
+
+## zh
+
+`placement` 可以设置为`end`、`alternate`和`start`
diff --git a/packages/components/timeline/demo/Position.vue b/packages/components/timeline/demo/Placement.vue
similarity index 76%
rename from packages/components/timeline/demo/Position.vue
rename to packages/components/timeline/demo/Placement.vue
index fd4aa1649..049fa7ccd 100644
--- a/packages/components/timeline/demo/Position.vue
+++ b/packages/components/timeline/demo/Placement.vue
@@ -1,22 +1,22 @@
 <template>
-  <p>内容在时间轴右边 position: right</p>
-  <IxTimeline :pending="true">
+  <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>内容在时间轴两侧轮流出现 position: alternate</p>
-  <IxTimeline :pending="true" position="alternate">
+  <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>内容在时间轴左边 position: left</p>
-  <IxTimeline :pending="true" position="left">
+  <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>
diff --git a/packages/components/timeline/demo/Position.md b/packages/components/timeline/demo/Position.md
deleted file mode 100644
index 6fb508f86..000000000
--- a/packages/components/timeline/demo/Position.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-order: 0
-title:
-  zh: 内容相对于时间轴的方向
----
-
-## zh
-
-position可以设置为right、alternate和left
diff --git a/packages/components/timeline/demo/Reverse.md b/packages/components/timeline/demo/Reverse.md
index 2bba4f6d7..605859428 100644
--- a/packages/components/timeline/demo/Reverse.md
+++ b/packages/components/timeline/demo/Reverse.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 5
 title:
   zh: 时间节点是否倒叙
 ---
diff --git a/packages/components/timeline/docs/Index.zh.md b/packages/components/timeline/docs/Index.zh.md
index 0ebdb3fc2..36a9b8880 100644
--- a/packages/components/timeline/docs/Index.zh.md
+++ b/packages/components/timeline/docs/Index.zh.md
@@ -14,10 +14,11 @@ order: 0
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `pending` | 设置幽灵节点 | `boolean\|string\|#pending` | `false` | - |- |
+| `pending` | 设置幽灵节点 | `boolean\|string\|#pending` | `false` | - | - |
 | `pendingDot` | 幽灵节点存在时的时间轴点 | `string\|#pendingDot` | `undefined` | - |- |
 | `reverse` | 时间节点是否倒叙 | `boolean` | `false` | - |- |
-| `position` | 时间轴和内容的相对位置 | `left\|alternate\|right` | `right` | - |- |
+| `placement` | 时间节点内容相对于时间轴的位置 | `'start'\| 'end' \| 'alternate'` | `'end'` | - |- |
+| `both` | 设置标签和内容是否分开 | `boolean` | `false` | - |- |
 
 ### IxTimelineItem
 
@@ -27,7 +28,30 @@ order: 0
 | --- | --- | --- | --- | --- | --- |
 | `color` | 时间节点颜色 | `PresetColor \| StatusColor \| string` | `primary` | - |- |
 | `dot` | 时间轴点 | `string\|#dot` | `undefined` | - |- |
-| `position` | 时间节点内容的位置 | `left\|right` | `undefined` | - |- |
+| `label` | 设置标签 | `string\|#label` | `undefined` | - |- |
+| `placement` | 时间节点内容相对于时间轴的位置 | `'start' \| 'end'` | - | - | 仅当`Timeline`组件的`placement`为 `alternate` 时生效|
+
+``` ts
+export const presetColors = [
+  'red',
+  'orange',
+  'brown',
+  'yellow',
+  'canary',
+  'bud',
+  'green',
+  'turquoise',
+  'cyan',
+  'glacier',
+  'blue',
+  'indigo',
+  'purple',
+  'magenta',
+] as const
+
+export const statusColors = ['primary', 'info', 'pending', 'success', 'warning', 'error'] as const
+
+```
 
 <!--- insert less variable begin  --->
 ## 主题变量
@@ -44,6 +68,8 @@ order: 0
 | `@timeline-content-gap` | `18px` | - | - |
 | `@timeline-content-line-height` | `20px` | - | - |
 | `@timeline-content-top` | `-5px` | - | - |
+| `@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` | - | - |
diff --git a/packages/components/timeline/index.ts b/packages/components/timeline/index.ts
index ac1efc276..dce452486 100644
--- a/packages/components/timeline/index.ts
+++ b/packages/components/timeline/index.ts
@@ -7,8 +7,8 @@
 
 import type { TimelineComponent, TimelineItemComponent } from './src/types'
 
-import Timeline from './src/Timeline.vue'
-import TimelineItem from './src/TimelineItem.vue'
+import Timeline from './src/Timeline'
+import TimelineItem from './src/TimelineItem'
 
 const IxTimeline = Timeline as unknown as TimelineComponent
 const IxTimelineItem = TimelineItem as unknown as TimelineItemComponent
@@ -18,9 +18,10 @@ export { IxTimeline, IxTimelineItem }
 export type {
   TimelineInstance,
   TimelineComponent,
+  TimelinePlacement,
   TimelinePublicProps as TimelineProps,
   TimelineItemInstance,
   TimelineItemComponent,
+  TimelineItemPlacement,
   TimelineItemPublicProps as TimelineItemProps,
-  TimelineItemPosition,
 } from './src/types'
diff --git a/packages/components/timeline/src/Timeline.tsx b/packages/components/timeline/src/Timeline.tsx
new file mode 100644
index 000000000..1f1a196e4
--- /dev/null
+++ b/packages/components/timeline/src/Timeline.tsx
@@ -0,0 +1,89 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TimelineProps } from './types'
+import type { Slots, VNode } from 'vue'
+
+import { ComputedRef, computed } from '@vue/reactivity'
+import { defineComponent, normalizeClass, provide } from 'vue'
+
+import { isBoolean } from 'lodash-es'
+
+import { flattenNode, hasSlot } from '@idux/cdk/utils'
+import { useGlobalConfig } from '@idux/components/config'
+import { IxIcon } from '@idux/components/icon'
+import { convertStringVNode } from '@idux/components/utils'
+
+import IxTimelineItem from './TimelineItem'
+import { timelineItemKey, timelineToken } from './token'
+import { timelineProps } from './types'
+
+export default defineComponent({
+  name: 'IxTimeline',
+  props: timelineProps,
+  setup(props, { slots }) {
+    const common = useGlobalConfig('common')
+    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
+      const prefixCls = mergedPrefixCls.value
+      return normalizeClass({
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${placement}`]: true,
+        [`${prefixCls}-reverse`]: reverse,
+        [`${prefixCls}-not-both`]: !both,
+      })
+    })
+
+    provide(timelineToken, { props, itemIndexArray, hasPendingNode, mergedPrefixCls })
+
+    return () => {
+      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
+    return node
+  })
+}
+
+function useItems(
+  slots: Slots,
+  props: TimelineProps,
+  hasPendingNode: ComputedRef<boolean>,
+  mergedPrefixCls: ComputedRef<string>,
+) {
+  return computed(() => {
+    const { pending, pendingDot, reverse } = props
+
+    const defaultSlots = slots?.default?.() || []
+    const pendingDotNode = slots?.pendingDot?.() || pendingDot || <IxIcon name="loading" />
+    let penddingItem: null | VNode = null
+
+    if (hasPendingNode.value) {
+      penddingItem = (
+        <IxTimelineItem class={`${mergedPrefixCls.value}-item-pending-dot`} v-slots={{ dot: () => pendingDotNode }}>
+          {convertStringVNode(slots.pending, isBoolean(pending) ? '' : pending)}
+        </IxTimelineItem>
+      )
+    }
+
+    const timelineItemNodes = reverse ? [penddingItem, ...defaultSlots.reverse()] : [...defaultSlots, penddingItem]
+
+    return convertItemNodes(timelineItemNodes.filter(Boolean) as VNode[])
+  })
+}
diff --git a/packages/components/timeline/src/Timeline.vue b/packages/components/timeline/src/Timeline.vue
deleted file mode 100644
index 8607576c8..000000000
--- a/packages/components/timeline/src/Timeline.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-import type { TimelineItemPosition, TimelinePosition, TimelineProps } from './types'
-import type { VNode } from 'vue'
-
-import { cloneVNode, defineComponent, h } from 'vue'
-
-import { IxIcon } from '@idux/components/icon'
-
-import IxTimelineItem from './TimelineItem.vue'
-import { timelineProps } from './types'
-
-const timelinePrefixCls = 'ix-timeline'
-const itemPrefixCls = 'ix-timeline-item'
-
-export default defineComponent({
-  name: 'IxTimeline',
-  props: timelineProps,
-  render() {
-    const pendingSlots = this.$slots?.pending?.()
-    const pendingDotSlots = this.$slots?.pendingDot?.()
-    const defaultSlots = this.$slots?.default?.() || []
-
-    const pendingNode = pendingSlots || this.$props.pending
-    const pendingDotNode = pendingDotSlots || this.$props.pendingDot || h(IxIcon, { name: 'loading' })
-
-    let penddingItem: null | VNode = null
-
-    if (pendingNode) {
-      penddingItem = h(
-        IxTimelineItem,
-        { class: `${itemPrefixCls}-pending-dot` },
-        { default: () => pendingNode, dot: () => pendingDotNode },
-      )
-    }
-
-    const timelineItems = this.$props.reverse
-      ? [penddingItem, ...defaultSlots.reverse()]
-      : [...defaultSlots, penddingItem]
-    const nonNullItems = timelineItems.filter(item => !!item) as VNode[]
-    const itemsLength = nonNullItems.length
-    const items: VNode[] = []
-    const itemPositionArr: TimelineItemPosition[] = []
-
-    nonNullItems.forEach((item, index) => {
-      const position = getItemPosition(item, index, this.$props.position)
-
-      itemPositionArr.push(position)
-      items.push(
-        cloneVNode(item, {
-          class: useItemClasses({
-            hasPendingNode: !!pendingNode,
-            position,
-            index,
-            itemsLength,
-            props: this.$props,
-          }),
-        }),
-      )
-    })
-
-    return h(
-      'ul',
-      {
-        class: useClasses(itemPositionArr, this.$props),
-      },
-      items,
-    )
-  },
-})
-
-const getItemPosition = (node: VNode, index: number, position: TimelinePosition): TimelineItemPosition => {
-  const itemPosition = node.props?.position
-  if (itemPosition) {
-    return itemPosition
-  }
-
-  if (position === 'alternate') {
-    return index % 2 ? 'left' : 'right'
-  }
-
-  return position
-}
-
-const getRealPosition = (itemPositionArr: TimelineItemPosition[]): TimelinePosition => {
-  return itemPositionArr.reduce((result: TimelinePosition, nextPosition, index) => {
-    if (!index) {
-      result = nextPosition
-    } else if (result !== nextPosition) {
-      result = 'alternate'
-    }
-
-    return result
-  }, 'right')
-}
-
-const useClasses = (itemPositionArr: TimelineItemPosition[], props: TimelineProps): string => {
-  const realPosition = getRealPosition(itemPositionArr)
-  const positionCls = `${timelinePrefixCls}-${realPosition}`
-
-  let cls = `${timelinePrefixCls} ${positionCls}`
-
-  if (props.reverse) {
-    cls += ` ${timelinePrefixCls}-reverse`
-  }
-
-  return cls
-}
-
-const useItemClasses = ({
-  hasPendingNode,
-  position,
-  index,
-  itemsLength,
-  props,
-}: {
-  hasPendingNode: boolean
-  position: TimelineItemPosition
-  index: number
-  itemsLength: number
-  props: TimelineProps
-}): string => {
-  let cls = `${itemPrefixCls}-${position}`
-
-  if (hasPendingNode) {
-    const isReversePending = props.reverse && index === 0
-    const isPending = !props.reverse && index === itemsLength - 2
-
-    if (isReversePending || isPending) {
-      cls += ` ${itemPrefixCls}-pending`
-    }
-  }
-
-  return cls
-}
-</script>
diff --git a/packages/components/timeline/src/TimelineItem.tsx b/packages/components/timeline/src/TimelineItem.tsx
new file mode 100644
index 000000000..6c62c7d1b
--- /dev/null
+++ b/packages/components/timeline/src/TimelineItem.tsx
@@ -0,0 +1,104 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { CSSProperties } from 'vue'
+
+import { computed, defineComponent, getCurrentInstance, inject, normalizeClass } from 'vue'
+
+import { hasSlot } from '@idux/cdk/utils'
+import { convertStringVNode, isPresetColor, isStatusColor } from '@idux/components/utils'
+
+import { timelineItemKey, timelineToken } from './token'
+import { timelineItemProps } from './types'
+
+export default defineComponent({
+  name: 'IxTimelineItem',
+  props: timelineItemProps,
+  [timelineItemKey]: true,
+  setup(props, { slots }) {
+    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 } = props
+
+      let _placement
+      if (parentpPlacement === 'alternate') {
+        _placement = placement ? placement : itemIndex.value % 2 ? 'start' : 'end'
+      } else {
+        _placement = parentpPlacement
+      }
+
+      return _placement
+    })
+
+    const isPresetOrStatusColor = computed(() => isPresetColor(props.color) || isStatusColor(props.color))
+
+    const dotStyle = computed(() => {
+      const { color } = props
+      if (isPresetOrStatusColor.value) {
+        return {}
+      }
+      return {
+        color,
+        'border-color': color,
+      }
+    })
+
+    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 { dot, color } = props
+      return normalizeClass({
+        [`${prefixCls}-dot`]: true,
+        [`${prefixCls}-dot-custom`]: hasSlot(slots, 'dot') || !!dot,
+        [`${prefixCls}-dot-${color}`]: isPresetOrStatusColor.value,
+      })
+    })
+
+    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>
+          <div class={`${prefixCls}-content`}>
+            {labelNode && <div class={`${prefixCls}-label`}>{labelNode}</div>}
+            {slots.default && <div class={`${prefixCls}-desc`}>{slots.default()}</div>}
+          </div>
+        </li>
+      )
+    }
+  },
+})
diff --git a/packages/components/timeline/src/TimelineItem.vue b/packages/components/timeline/src/TimelineItem.vue
deleted file mode 100644
index b054d93e9..000000000
--- a/packages/components/timeline/src/TimelineItem.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <li class="ix-timeline-item">
-    <div class="ix-timeline-item-line"></div>
-    <div :class="dotClass" :style="dotStyle">
-      <slot name="dot">{{ dot }}</slot>
-    </div>
-    <div class="ix-timeline-item-content"><slot></slot></div>
-  </li>
-</template>
-
-<script lang="ts">
-import type { TimelineItemProps } from './types'
-import type { Slots } from 'vue'
-
-import { ComputedRef, computed, defineComponent } from 'vue'
-
-import { hasSlot } from '@idux/cdk/utils'
-import { isPresetColor, isStatusColor } from '@idux/components/utils'
-
-import { timelineItemProps } from './types'
-
-export default defineComponent({
-  name: 'IxTimelineItem',
-  props: timelineItemProps,
-  setup(props, { slots }) {
-    const isPresetOrStatus = computed(() => isPresetColor(props.color) || isStatusColor(props.color))
-
-    const dotStyle = useStyle(props, isPresetOrStatus)
-    const dotClass = useClasses(props, slots, isPresetOrStatus)
-
-    return {
-      dotStyle,
-      dotClass,
-    }
-  },
-})
-
-const useClasses = (props: TimelineItemProps, slots: Slots, isPresetOrStatus: ComputedRef<boolean>) => {
-  return computed(() => {
-    const hasCustomDot = hasSlot(slots, 'dot') || !!props.dot
-    return {
-      'ix-timeline-item-dot': true,
-      'ix-timeline-item-dot-custom': hasCustomDot,
-      [`ix-timeline-item-dot-${props.color}`]: isPresetOrStatus.value,
-    }
-  })
-}
-
-const useStyle = (props: TimelineItemProps, isPresetOrStatus: ComputedRef<boolean>) => {
-  return computed(() => {
-    if (isPresetOrStatus.value) {
-      return {}
-    }
-    return {
-      color: props.color,
-      'border-color': props.color,
-    }
-  })
-}
-</script>
diff --git a/packages/components/timeline/src/token.ts b/packages/components/timeline/src/token.ts
new file mode 100644
index 000000000..95d99cc74
--- /dev/null
+++ b/packages/components/timeline/src/token.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { type ComputedRef, type InjectionKey } from 'vue'
+
+import { type TimelineProps } from './types'
+
+export interface TimelineContext {
+  props: TimelineProps
+  itemIndexArray: ComputedRef<number[]>
+  hasPendingNode: ComputedRef<boolean>
+  mergedPrefixCls: ComputedRef<string>
+}
+
+export const timelineToken: InjectionKey<TimelineContext> = Symbol('timelineToken')
+
+export const timelineItemKey = Symbol('IDUX_TIMELINE_ITEM_KEY')
diff --git a/packages/components/timeline/src/types.ts b/packages/components/timeline/src/types.ts
index b609b1838..29201b048 100644
--- a/packages/components/timeline/src/types.ts
+++ b/packages/components/timeline/src/types.ts
@@ -10,13 +10,15 @@ import type { DefineComponent, HTMLAttributes } from 'vue'
 
 import { IxPropTypes } from '@idux/cdk/utils'
 
-export type TimelinePosition = 'left' | 'alternate' | 'right'
+export type TimelinePlacement = 'start' | 'alternate' | 'end'
+export type TimelineItemPlacement = 'start' | 'end'
 
 export const timelineProps = {
   pending: IxPropTypes.oneOfType([String, Boolean]).def(false),
   pendingDot: IxPropTypes.string,
   reverse: IxPropTypes.bool.def(false),
-  position: IxPropTypes.oneOf<TimelinePosition>(['left', 'alternate', 'right']).def('right'),
+  placement: IxPropTypes.oneOf<TimelinePlacement>(['start', 'alternate', 'end']).def('end'),
+  both: IxPropTypes.bool.def(true),
 }
 
 export type TimelineProps = ExtractInnerPropTypes<typeof timelineProps>
@@ -24,12 +26,11 @@ export type TimelinePublicProps = ExtractPublicPropTypes<typeof timelineProps>
 export type TimelineComponent = DefineComponent<Omit<HTMLAttributes, keyof TimelinePublicProps> & TimelinePublicProps>
 export type TimelineInstance = InstanceType<DefineComponent<TimelineProps>>
 
-export type TimelineItemPosition = 'left' | 'right'
-
 export const timelineItemProps = {
   color: IxPropTypes.string.def('primary'),
   dot: IxPropTypes.string,
-  position: IxPropTypes.oneOf<TimelineItemPosition>(['left', 'right']),
+  label: IxPropTypes.string,
+  placement: IxPropTypes.oneOf<TimelineItemPlacement>(['start', 'end']),
 }
 
 export type TimelineItemProps = ExtractInnerPropTypes<typeof timelineItemProps>
diff --git a/packages/components/timeline/style/index.less b/packages/components/timeline/style/index.less
index 61fbd9bee..8ca84b6c7 100644
--- a/packages/components/timeline/style/index.less
+++ b/packages/components/timeline/style/index.less
@@ -5,7 +5,7 @@
   .reset-component();
 
   line-height: @timeline-content-line-height;
-  color: @color-grey;
+  color: @timeline-content-color;
 
   .@{timeline-item-prefix} {
     position: relative;
@@ -35,6 +35,7 @@
     &-line {
       position: absolute;
       top: @timeline-dot-dia;
+      width: 0;
       height: calc(100% - @timeline-dot-dia);
       border-left: @timeline-line-border;
     }
@@ -44,6 +45,10 @@
       top: @timeline-content-top;
     }
 
+    &-label {
+      color: @timeline-content-label-color;
+    }
+
     &:last-child {
       .@{timeline-item-prefix} {
 
@@ -67,7 +72,7 @@
     }
   }
 
-  &-right {
+  &-end {
     .@{timeline-item-prefix} {
 
       &-dot {
@@ -88,7 +93,7 @@
     }
   }
 
-  &-left {
+  &-start {
     .@{timeline-item-prefix} {
 
       &-dot {
@@ -114,7 +119,7 @@
   &-alternate {
     .@{timeline-item-prefix} {
 
-      &-left {
+      &-start {
         .@{timeline-item-prefix} {
 
           &-content {
@@ -124,7 +129,7 @@
         }
       }
 
-      &-right {
+      &-end {
         .@{timeline-item-prefix} {
 
           &-content {
@@ -164,4 +169,52 @@
       }
     }
   }
+
+  &-not-both {
+
+    .@{timeline-item-prefix} {
+      &-label {
+        position: absolute;
+        transform: translateX(-100%);
+      }
+
+      &-line {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &-dot {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &-start {
+        .@{timeline-item-prefix} {
+          &-content {
+            width: calc(50% - 18px);
+            margin-left: 0;
+          }
+          &-label {
+            right: calc(-50%);
+          }
+        }
+  
+      }
+
+      &-end {
+        .@{timeline-item-prefix} {
+          &-content {
+            width: 50%;
+            margin-left: calc(50% + 18px);
+          }
+          &-label {
+            left: -36px;
+          }
+          &-desc {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/packages/components/timeline/style/themes/default.variable.less b/packages/components/timeline/style/themes/default.variable.less
index 394d3c591..f9887f57a 100644
--- a/packages/components/timeline/style/themes/default.variable.less
+++ b/packages/components/timeline/style/themes/default.variable.less
@@ -10,6 +10,8 @@
 @timeline-content-gap: 18px;
 @timeline-content-line-height: 20px;
 @timeline-content-top: -5px;
+@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);
diff --git a/packages/site/src/docs/GettingStarted.zh.md b/packages/site/src/docs/GettingStarted.zh.md
index 6c7dd3b58..cc45163f4 100755
--- a/packages/site/src/docs/GettingStarted.zh.md
+++ b/packages/site/src/docs/GettingStarted.zh.md
@@ -195,7 +195,7 @@ module.exports = {
 ```ts
 // App.vue or other components
 import { IxButton } from "@idux/components/button"
-import "@idux/components/button/style/default_css"
+import "@idux/components/button/style/themes/default_css"
 ```
 
 ## 其他