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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-14 12:14:41 +01:00 · 2025-06-12 17:06:51 +02:00
parent 9bcf1ad92f
commit 5170cfd7eb
7 changed files with 383 additions and 21 deletions
--- a/docs/content/3.components/timeline.md
+++ b/docs/content/3.components/timeline.md
@@ -173,6 +173,46 @@ class: 'overflow-x-auto'
 ---
 ::

+### Reverse
+
+Use the reverse prop to reverse the direction of the Timeline.
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  reverse: true
+  modelValue: 2
+  orientation: 'vertical'
+  items:
+    - date: 'Mar 15, 2025'
+      title: 'Project Kickoff'
+      description: 'Kicked off the project with team alignment.'
+      icon: 'i-lucide-rocket'
+    - date: 'Mar 22 2025'
+      title: 'Design Phase'
+      description: 'User research and design workshops.'
+      icon: 'i-lucide-palette'
+    - date: 'Mar 29 2025'
+      title: 'Development Sprint'
+      description: 'Frontend and backend development.'
+      icon: 'i-lucide-code'
+    - date: 'Apr 5 2025'
+      title: 'Testing & Deployment'
+      description: 'QA testing and performance optimization.'
+      icon: 'i-lucide-check-circle'
+  class: 'w-full'
+class: 'overflow-x-auto'
+---
+::
+
 ## Examples

 ### Control active item
--- a/playground/app/pages/components/timeline.vue
+++ b/playground/app/pages/components/timeline.vue
@@ -9,6 +9,7 @@ const orientations = Object.keys(theme.variants.orientation)
 const orientation = ref('vertical' as const)
 const color = ref('primary' as const)
 const size = ref('md' as const)
+const reverse = ref(false)

 const items = [{
  date: 'Mar 15, 2025',
@@ -46,6 +47,7 @@ const value = ref('kickoff')
      <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
      <USelect v-model="size" :items="sizes" placeholder="Size" />
      <USelect v-model="value" :items="items.map(item => item.value)" placeholder="Value" />
+      <USelect v-model="reverse" :items="[true, false]" placeholder="Reverse" />
    </div>

    <UTimeline
@@ -54,6 +56,7 @@ const value = ref('kickoff')
      :orientation="orientation"
      :size="size"
      :items="items"
+      :reverse="reverse"
      class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
    />
  </div>
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -41,6 +41,7 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
   */
  orientation?: Timeline['variants']['orientation']
  defaultValue?: string | number
+  reverse?: boolean
  class?: any
  ui?: Timeline['slots']
 }
@@ -75,16 +76,34 @@ const appConfig = useAppConfig() as Timeline['AppConfig']
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeline || {}) })({
  orientation: props.orientation,
  size: props.size,
-  color: props.color
+  color: props.color,
+  reverse: props.reverse
 }))

 const currentStepIndex = computed(() => {
  const value = modelValue.value ?? props.defaultValue

-  return ((typeof value === 'string')
-    ? props.items.findIndex(item => item.value === value)
-    : value) ?? -1
+  if (typeof value === 'string') {
+    return props.items.findIndex(item => item.value === value) ?? -1
+  }
+
+  if (props.reverse) {
+    return value != null ? props.items.length - 1 - value : -1
+  } else {
+    return value ?? -1
+  }
 })
+
+function getItemState(index: number): 'active' | 'completed' | undefined {
+  if (currentStepIndex.value === -1) return undefined
+  if (index === currentStepIndex.value) return 'active'
+
+  if (props.reverse) {
+    return index > currentStepIndex.value ? 'completed' : undefined
+  } else {
+    return index < currentStepIndex.value ? 'completed' : undefined
+  }
+}
 </script>

 <template>
@@ -93,7 +112,7 @@ const currentStepIndex = computed(() => {
      v-for="(item, index) in items"
      :key="item.value ?? index"
      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      :data-state="index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'active' : undefined"
+      :data-state="getItemState(index)"
    >
      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
--- a/src/theme/timeline.ts
+++ b/src/theme/timeline.ts
@@ -29,12 +29,11 @@ export default (options: Required<ModuleOptions>) => ({

    color: {
      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-        indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`,
-        separator: `group-data-[state=completed]:bg-${color}`
+        indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`
+
      }])),
      neutral: {
-        indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted',
-        separator: 'group-data-[state=completed]:bg-inverted'
+        indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted'
      }
    },

@@ -48,10 +47,38 @@ export default (options: Required<ModuleOptions>) => ({
      'xl': '',
      '2xl': '',
      '3xl': ''
+    },
+
+    reverse: {
+      true: ''
    }
  },

-  compoundVariants: [{
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    reverse: false,
+    class: {
+      separator: `group-data-[state=completed]:bg-${color}`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    reverse: true,
+    class: {
+      separator: `group-data-[state=active]:bg-${color} group-data-[state=completed]:bg-${color}`
+    }
+  })), {
+    color: 'neutral',
+    reverse: false,
+    class: {
+      separator: 'group-data-[state=completed]:bg-inverted'
+    }
+  }, {
+    color: 'neutral',
+    reverse: true,
+    class: {
+      separator: 'group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted'
+    }
+  }, {
    orientation: 'horizontal',
    size: '3xs',
    class: {
--- a/test/components/Timeline.spec.ts
+++ b/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' } }],
--- a/test/components/snapshots/Timeline-vue.spec.ts.snap
+++ b/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">
--- a/test/components/snapshots/Timeline.spec.ts.snap
+++ b/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">