feat(Timeline): add reverse prop (#4316)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

test/components/Timeline.spec.ts

@@ -29,7 +29,7 @@ describe('Timeline', () => {
     title: 'Testing & Deployment',
     description: 'QA testing and performance optimization. Deployed the application to production.',
     icon: 'i-lucide-check-circle',
-    value: 'deployment'
+    value: 'testing-and-deployment'
   }]
 
   const props = { items }
@@ -37,14 +37,17 @@ describe('Timeline', () => {
   it.each([
     // Props
     ['with items', { props }],
-    ['with modelValue', { props: { ...props, modelValue: 'assigned' } }],
-    ['with defaultValue', { props: { ...props, defaultValue: 'assigned' } }],
+    ['with modelValue', { props: { ...props, modelValue: 'design' } }],
+    ['with defaultValue', { props: { ...props, defaultValue: 'design' } }],
     ['with neutral color', { props: { ...props, color: 'neutral' } }],
     ...sizes.map((size: string) => [`with size ${size} horizontal`, { props: { ...props, size } }]),
     ...sizes.map((size: string) => [`with size ${size} vertical`, { props: { ...props, size, orientation: 'vertical' } }]),
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'gap-8' } }],
     ['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
+    ['with reverse', { props: { ...props, reverse: true } }],
+    ['with reverse and modelValue', { props: { ...props, reverse: true, modelValue: 'design' } }],
+    ['with reverse and defaultValue', { props: { ...props, reverse: true, defaultValue: 'design' } }],
     // Slots
     ['with indicator slot', { props, slots: { indicator: () => 'Indicator slot' } }],
     ['with date slot', { props, slots: { date: () => 'Date slot' } }],

test/components/__snapshots__/Timeline-vue.spec.ts.snap

@@ -137,7 +137,7 @@ exports[`Timeline > renders with date slot correctly 1`] = `
 
 exports[`Timeline > renders with defaultValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -147,7 +147,7 @@ exports[`Timeline > renders with defaultValue correctly 1`] = `
       <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="active">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -317,7 +317,7 @@ exports[`Timeline > renders with items correctly 1`] = `
 
 exports[`Timeline > renders with modelValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -327,7 +327,7 @@ exports[`Timeline > renders with modelValue correctly 1`] = `
       <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="active">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -405,6 +405,141 @@ exports[`Timeline > renders with neutral color correctly 1`] = `
 </div>"
 `;
 
+exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="active">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="active">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Timeline > renders with reverse correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
   <div class="group relative flex flex-1 gap-3">

test/components/__snapshots__/Timeline.spec.ts.snap

@@ -137,7 +137,7 @@ exports[`Timeline > renders with date slot correctly 1`] = `
 
 exports[`Timeline > renders with defaultValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -147,7 +147,7 @@ exports[`Timeline > renders with defaultValue correctly 1`] = `
       <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="active">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -317,7 +317,7 @@ exports[`Timeline > renders with items correctly 1`] = `
 
 exports[`Timeline > renders with modelValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -327,7 +327,7 @@ exports[`Timeline > renders with modelValue correctly 1`] = `
       <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
+  <div class="group relative flex flex-1 gap-3" data-state="active">
     <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
@@ -405,6 +405,141 @@ exports[`Timeline > renders with neutral color correctly 1`] = `
 </div>"
 `;
 
+exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="active">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="active">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3" data-state="completed">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Timeline > renders with reverse correctly 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div class="group relative flex flex-1 gap-3">
+    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </div>
+    <div class="w-full mt-1.5 pb-6.5">
+      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
   <div class="group relative flex flex-1 gap-3">