test: update vue snapshots

Adds the `errors` and `maxErrors` properties to the FormField component which
allows to display multiple errors. The `maxErrors` prop is used to limit
the number of errors displayed and defaults to 1 for backward
compatibility.

This change is compatible with the `Form` component error's too.

Resolves #2389

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -83,7 +83,7 @@ const groups = [
     </template>
 
     <template #billing-label="{ item }">
-      {{ item.label }}
+      <span class="font-medium text-primary">{{ item.label }}</span>
 
       <UBadge variant="subtle" size="sm">
         50% off

docs/app/components/content/examples/command-palette/CommandPaletteItemsChildrenExample.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const groups = [{
+  id: 'actions',
+  label: 'Actions',
+  items: [{
+    label: 'Create new',
+    icon: 'i-lucide-plus',
+    children: [{
+      label: 'New file',
+      icon: 'i-lucide-file-plus',
+      suffix: 'Create a new file in the current directory',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New file created!' })
+      },
+      kbds: ['meta', 'N']
+    }, {
+      label: 'New folder',
+      icon: 'i-lucide-folder-plus',
+      suffix: 'Create a new folder in the current directory',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New folder created!' })
+      },
+      kbds: ['meta', 'F']
+    }, {
+      label: 'New project',
+      icon: 'i-lucide-folder-git',
+      suffix: 'Create a new project from a template',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New project created!' })
+      },
+      kbds: ['meta', 'P']
+    }]
+  }, {
+    label: 'Share',
+    icon: 'i-lucide-share',
+    children: [{
+      label: 'Copy link',
+      icon: 'i-lucide-link',
+      suffix: 'Copy a link to the current item',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Link copied to clipboard!' })
+      },
+      kbds: ['meta', 'L']
+    }, {
+      label: 'Share via email',
+      icon: 'i-lucide-mail',
+      suffix: 'Share the current item via email',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Share via email dialog opened!' })
+      }
+    }, {
+      label: 'Share on social',
+      icon: 'i-lucide-share-2',
+      suffix: 'Share the current item on social media',
+      children: [{
+        label: 'Twitter',
+        icon: 'i-simple-icons-twitter',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on Twitter!' })
+        }
+      }, {
+        label: 'LinkedIn',
+        icon: 'i-simple-icons-linkedin',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on LinkedIn!' })
+        }
+      }, {
+        label: 'Facebook',
+        icon: 'i-simple-icons-facebook',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on Facebook!' })
+        }
+      }]
+    }]
+  }, {
+    label: 'Settings',
+    icon: 'i-lucide-settings',
+    children: [{
+      label: 'General',
+      icon: 'i-lucide-sliders',
+      suffix: 'Configure general settings',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'General settings opened!' })
+      }
+    }, {
+      label: 'Appearance',
+      icon: 'i-lucide-palette',
+      suffix: 'Customize the appearance',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Appearance settings opened!' })
+      }
+    }, {
+      label: 'Security',
+      icon: 'i-lucide-shield',
+      suffix: 'Manage security settings',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Security settings opened!' })
+      }
+    }]
+  }]
+}]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" class="flex-1" />
+</template>

docs/content/3.components/command-palette.md

@@ -52,9 +52,11 @@ Each group contains an `items` array of objects that define the commands. Each i
 - `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
+- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
 - `onSelect?(e?: Event): void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue,}`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 
@@ -110,6 +112,10 @@ props:
 ---
 ::
 
+::tip{to="#with-children-in-items"}
+Each item can take a `children` array of objects with the following properties to create submenus:
+::
+
 ### Multiple
 
 Use the `multiple` prop to allow multiple selections.
@@ -246,6 +252,128 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.se
 :::
 ::
 
+### Selected Icon
+
+Use the `selected-icon` prop to customize the selected item [Icon](/components/icon). Defaults to `i-lucide-check`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - modelValue
+  - multiple
+  - class
+external:
+  - groups
+  - modelValue
+class: '!p-0'
+props:
+  multiple: true
+  autofocus: false
+  modelValue:
+    - label: 'Benjamin Canac'
+      suffix: 'benjamincanac'
+      avatar:
+        src: 'https://github.com/benjamincanac.png'
+  selectedIcon: 'i-lucide-circle-check'
+  groups:
+    - id: 'users'
+      label: 'Users'
+      items:
+        - label: 'Benjamin Canac'
+          suffix: 'benjamincanac'
+          avatar:
+            src: 'https://github.com/benjamincanac.png'
+        - label: 'Sylvain Marroufin'
+          suffix: 'smarroufin'
+          avatar:
+            src: 'https://github.com/smarroufin.png'
+        - label: 'Sébastien Chopin'
+          suffix: 'atinux'
+          avatar:
+            src: 'https://github.com/atinux.png'
+        - label: 'Romain Hamel'
+          suffix: 'romhml'
+          avatar:
+            src: 'https://github.com/romhml.png'
+        - label: 'Haytham A. Salama'
+          suffix: 'Haythamasalama'
+          avatar:
+            src: 'https://github.com/Haythamasalama.png'
+        - label: 'Daniel Roe'
+          suffix: 'danielroe'
+          avatar:
+            src: 'https://github.com/danielroe.png'
+        - label: 'Neil Richter'
+          suffix: 'noook'
+          avatar:
+            src: 'https://github.com/noook.png'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
+:::
+::
+
+### Trailing Icon :badge{label="Soon" class="align-text-top"}
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  trailingIcon: 'i-lucide-arrow-right'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
+:::
+::
+
 ### Loading
 
 Use the `loading` prop to show a loading icon on the CommandPalette.
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
 :::
 ::
 
-### Disabled
-
-Use the `disabled` prop to disable the CommandPalette.
-
-::component-code
----
-collapse: true
-hide:
-  - autofocus
-ignore:
-  - groups
-  - class
-external:
-  - groups
-class: '!p-0'
-props:
-  autofocus: false
-  disabled: true
-  groups:
-    - id: 'apps'
-      items:
-        - label: 'Calendar'
-          icon: 'i-lucide-calendar'
-        - label: 'Music'
-          icon: 'i-lucide-music'
-        - label: 'Maps'
-          icon: 'i-lucide-map'
-  class: 'flex-1'
----
-::
-
 ### Close
 
 Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::
 
+### Back :badge{label="Soon" class="align-text-top"}
+
+Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
+
+You can pass any property from the [Button](/components/button) component to customize it.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - back.color
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back:
+    color: primary
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+### Back Icon :badge{label="Soon" class="align-text-top"}
+
+Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - class
+  - groups
+  - back
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back: true
+  backIcon: 'i-lucide-house'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  disabled: true
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-lucide-calendar'
+        - label: 'Music'
+          icon: 'i-lucide-music'
+        - label: 'Maps'
+          icon: 'i-lucide-map'
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
 ### Control selected item(s)
@@ -502,6 +717,28 @@ props:
 This example uses the `@update:model-value` event to reset the search term when an item is selected.
 ::
 
+### With children in items :badge{label="Soon" class="align-text-top"}
+
+You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'command-palette-items-children-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
+::note
+When navigating into a submenu:
+- The search term is reset
+- A back button appears in the input
+- You can go back to the previous group by pressing the :kbd{value="backspace"} key
+::
+
 ### With fetched items
 
 You can fetch items from an API and use them in the CommandPalette.
@@ -658,6 +895,7 @@ You will have access to the following slots:
 
 ::component-example
 ---
+collapse: true
 name: 'command-palette-custom-slot-example'
 class: '!p-0'
 props:

docs/content/3.components/input-menu.md

@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/input-number.md

@@ -1,6 +1,6 @@
 ---
 title: InputNumber
-description: Input numerical values with a customizable range.
+description: An input for numerical values with a customizable range.
 category: form
 links:
   - label: NumberField
@@ -287,8 +287,8 @@ name: 'input-number-slots-example'
 When accessing the component via a template ref, you can use the following:
 
 | Name                       | Type                                            |
-|----------------------------|-------------------------------------------------|
-| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
 
 ## Theme
 

docs/content/3.components/input-tags.md

@@ -1,6 +1,7 @@
 ---
 title: InputTags
 description: An input element that displays interactive tags.
+category: form
 links:
   - label: InputTags
     icon: i-custom-reka-ui
@@ -276,8 +277,8 @@ name: 'input-tags-form-field-example'
 When accessing the component via a template ref, you can use the following:
 
 | Name                       | Type                                            |
-|----------------------------|-------------------------------------------------|
-| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
 
 ## Theme
 

docs/content/3.components/input.md

@@ -280,7 +280,7 @@ This example uses the `defineShortcuts` composable to focus the Input when the :
 
 ### With mask
 
-There's no built-in support for masks, but you can use librairies like [maska](https://github.com/beholdr/maska) to mask the Input.
+There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
 
 ::component-example
 ---

docs/content/3.components/pin-input.md

@@ -180,6 +180,8 @@ props:
 
 :component-emits
 
+### Expose
+
 When accessing the component via a template ref, you can use the following:
 
 | Name | Type |

docs/content/3.components/select-menu.md

@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/select.md

@@ -709,6 +709,14 @@ collapse: true
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/tabs.md

@@ -242,6 +242,14 @@ You will have access to the following slots:
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

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

playground/app/pages/components/command-palette.vue

@@ -74,6 +74,51 @@ const groups = computed(() => [{
       toast.add({ title: 'Label added!' })
     },
     kbds: ['meta', 'L']
+  }, {
+    label: 'More actions',
+    placeholder: 'Search actions...',
+    children: [{
+      label: 'Create new file',
+      suffix: 'Create a new file in the current directory or workspace.',
+      icon: 'i-lucide-file-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New file added!' })
+      }
+    }, {
+      label: 'Create new folder',
+      suffix: 'Create a new folder in the current directory or workspace.',
+      icon: 'i-lucide-folder-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New folder added!' })
+      }
+    }, {
+      label: 'Share',
+      placeholder: 'Search share options...',
+      icon: 'i-lucide-share',
+      children: [{
+        label: 'Share with everyone',
+        suffix: 'Share with everyone in the current directory or workspace.',
+        icon: 'i-lucide-share',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with everyone!' })
+        }
+      }, {
+        label: 'Share with team',
+        suffix: 'Share with the team in the current directory or workspace.',
+        icon: 'i-lucide-users',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with team!' })
+        }
+      }]
+    }]
   }]
 }])
 

playground/app/pages/components/form-field.vue

@@ -5,7 +5,9 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 
 const feedbacks = [
   { description: 'This is a description' },
+  { error: true },
   { error: 'This is an error' },
+  { errors: ['This is an error', 'This is another error', 'This one is not visible'], maxErrors: 2 },
   { hint: 'This is a hint' },
   { help: 'Help! I need somebody!' },
   { required: true }
@@ -14,7 +16,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ms-[-38px]">
+    <div class="flex flex-col gap-4 ms-[-92px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />

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>

src/runtime/components/CommandPalette.vue

@@ -26,13 +26,18 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   loading?: boolean
   disabled?: boolean
   slot?: string
+  /**
+   * The placeholder to display when the item has children.
+   */
+  placeholder?: string
+  children?: CommandPaletteItem[]
   onSelect?(e?: Event): void
   class?: any
   ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
   [key: string]: any
 }
 
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
   id: string
   label?: string
   slot?: string
@@ -52,7 +57,7 @@ export interface CommandPaletteGroup<T> {
   highlightedIcon?: string
 }
 
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -70,6 +75,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
    * @IconifyIcon
    */
   selectedIcon?: string
+  /**
+   * The icon displayed when an item has children.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
+   */
+  trailingIcon?: string
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -93,6 +104,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
    * @IconifyIcon
    */
   closeIcon?: string
+  /**
+   * Display a button to navigate back in history.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  back?: boolean | ButtonProps
+  /**
+   * The icon displayed in the back button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
+   */
+  backIcon?: string
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -116,14 +139,15 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   ui?: CommandPalette['slots']
 }
 
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
   'update:open': [value: boolean]
 }
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
-export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
   'empty'(props: { searchTerm?: string }): any
+  'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
@@ -134,7 +158,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -157,7 +181,8 @@ import UKbd from './Kbd.vue'
 const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   modelValue: '',
   labelKey: 'label',
-  autofocus: true
+  autofocus: true,
+  back: true
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<G, T>>()
@@ -167,7 +192,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const { t } = useLocale()
 const appConfig = useAppConfig() as CommandPalette['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'selectionBehavior'), emits)
 const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -183,18 +208,22 @@ const fuse = computed(() => defu({}, props.fuse, {
   matchAllWhenSearchEmpty: true
 }))
 
-const items = computed(() => props.groups?.filter((group) => {
+const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
+
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
+
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
+
+const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
     return false
   }
-
   if (group.ignoreFilter) {
     return false
   }
-
   return true
-}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
+})?.flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
 
 const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
 
@@ -215,7 +244,7 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
   }
 }
 
-const groups = computed(() => {
+const filteredGroups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result
     if (!item.group) {
@@ -229,7 +258,7 @@ const groups = computed(() => {
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
 
   const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
-    const group = props.groups?.find(group => group.id === id)
+    const group = groups.value?.find(group => group.id === id)
     if (!group) {
       return
     }
@@ -237,7 +266,7 @@ const groups = computed(() => {
     return getGroupWithItems(group, items)
   }).filter(group => !!group)
 
-  const nonFuseGroups = props.groups
+  const nonFuseGroups = groups.value
     ?.map((group, index) => ({ ...group, index }))
     ?.filter(group => group.ignoreFilter && group.items?.length)
     ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
@@ -247,20 +276,84 @@ const groups = computed(() => {
     return acc
   }, [...fuseGroups])
 })
+
+const listboxRootRef = useTemplateRef('listboxRootRef')
+
+function navigate(item: T) {
+  if (!item.children?.length) {
+    return
+  }
+
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  } as any)
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function navigateBack() {
+  if (!history.value.length) {
+    return
+  }
+
+  history.value.pop()
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack()
+  }
+}
+
+function onSelect(e: Event, item: T) {
+  if (item.children?.length) {
+    e.preventDefault()
+
+    navigate(item)
+  } else {
+    item.onSelect?.(e)
+  }
+}
 </script>
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
         variant="none"
         :autofocus="autofocus"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
       >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              size="md"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="(typeof back === 'object' ? back as Partial<ButtonProps> : {})"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
         <template v-if="close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
@@ -280,8 +373,8 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey as string) }}
           </ListboxGroupLabel>
@@ -289,10 +382,10 @@ const groups = computed(() => {
           <ListboxItem
             v-for="(item, index) in group.items"
             :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
             :disabled="item.disabled"
             as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
           >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
               <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -323,13 +416,20 @@ const groups = computed(() => {
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                         <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                       </span>
+
                       <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                     </slot>
 
-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                     </ListboxItemIndicator>
                   </span>

src/runtime/components/FormField.vue

@@ -19,6 +19,20 @@ export interface FormFieldProps {
   description?: string
   help?: string
   error?: string | boolean
+
+  /**
+   * An array of errors for this field.
+   * Note that only one error is displayed by default. You can use `maxErrors` to control the number of displayed errors.
+   * @defaultValue `1`
+   */
+  errors?: string[]
+
+  /**
+   * The maximum number of errors to display. If `false` or negative, display all available errors.
+   * @defaultValue `1`
+   */
+  maxErrors?: number | false
+
   hint?: string
   /**
    * @defaultValue 'md'
@@ -42,7 +56,7 @@ export interface FormFieldSlots {
   description(props: { description?: string }): any
   help(props: { help?: string }): any
   error(props: { error?: string | boolean }): any
-  default(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean, errors?: string[] }): any
 }
 </script>
 
@@ -54,7 +68,7 @@ import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFo
 import { tv } from '../utils/tv'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
-const props = defineProps<FormFieldProps>()
+const props = withDefaults(defineProps<FormFieldProps>(), { maxErrors: 1 })
 const slots = defineSlots<FormFieldSlots>()
 
 const appConfig = useAppConfig() as FormField['AppConfig']
@@ -66,7 +80,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField ||
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
+const errors = computed(() =>
+  (props.error && typeof props.error === 'string' ? [props.error] : props.errors)
+  || formErrors?.value?.flatMap((error) => {
+    if (!error.name) return []
+    if (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))) {
+      return [error.message]
+    }
+    return []
+  }))
+
+const error = computed(() => errors.value?.[0] ?? props.error)
+
+const displayedErrors = computed(() =>
+  props.maxErrors === false
+  || (!!props.maxErrors && props.maxErrors < 0)
+    ? errors.value
+    : errors.value?.slice(0, props.maxErrors)
+)
 
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
@@ -113,9 +144,16 @@ provide(formFieldInjectionKey, computed(() => ({
     </div>
 
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
-      <slot :error="error" />
+      <slot :error="error" :errors="errors" />
 
-      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <template v-if="(typeof error === 'string' && error)">
+        <div v-for="err in displayedErrors" :id="`${ariaId}-error`" :key="err" :class="ui.error({ class: props.ui?.error })">
+          <slot name="error" :error="err">
+            {{ err }}
+          </slot>
+        </div>
+      </template>
+      <div v-else-if="!!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>

src/runtime/components/InputTags.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { TagsInputRootProps, AcceptableInputValue } from 'reka-ui'
+import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
 import theme from '#build/ui/input-tags'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
@@ -44,11 +44,10 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
   ui?: InputTags['slots']
 }
 
-export type InputTagsEmits<T extends InputTagItem> = {
-  'update:modelValue': [payload: T[]]
-  'change': [payload: Event]
-  'blur': [payload: FocusEvent]
-  'focus': [payload: FocusEvent]
+export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmits<T> {
+  change: [event: Event]
+  blur: [event: FocusEvent]
+  focus: [event: FocusEvent]
 }
 
 type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
@@ -72,6 +71,7 @@ import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 

src/runtime/components/Select.vue

@@ -245,6 +245,10 @@ function onUpdateOpen(value: boolean) {
 function isSelectItem(item: SelectItem): item is SelectItemBase {
   return typeof item === 'object' && item !== null
 }
+
+defineExpose({
+  triggerRef
+})
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->

src/runtime/components/SelectMenu.vue

@@ -363,6 +363,10 @@ function onSelect(e: Event, item: SelectMenuItem) {
 function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
   return typeof item === 'object' && item !== null
 }
+
+defineExpose({
+  triggerRef
+})
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->

src/runtime/components/Table.vue

@@ -61,13 +61,13 @@ export type TableRow<T> = Row<T>
 export type TableData = RowData
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
   state?: CoreOptions<T>['state']
   onStateChange?: CoreOptions<T>['onStateChange']
   renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
 }
 
-export interface TableProps<T extends TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -172,7 +172,7 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
 type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
-export type TableSlots<T> = {
+export type TableSlots<T extends TableData = TableData> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
   loading: (props?: {}) => any
@@ -226,7 +226,7 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const paginationState = defineModel<PaginationState>('pagination', { default: {} })
 
-const tableRef = ref<HTMLTableElement>()
+const tableRef = ref<HTMLTableElement | null>(null)
 
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),

src/runtime/components/Tabs.vue

@@ -79,7 +79,8 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
-import { computed } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { ref, computed } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -108,6 +109,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
   size: props.size,
   orientation: props.orientation
 }))
+
+const triggersRef = ref<ComponentPublicInstance[]>([])
+
+defineExpose({
+  triggersRef
+})
 </script>
 
 <template>
@@ -117,7 +124,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
 
       <slot name="list-leading" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :ref="el => (triggersRef[index] = el as ComponentPublicInstance)"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+      >
         <slot name="leading" :item="item" :index="index">
           <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
           <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />

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' }">

src/runtime/locale/ar.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'اكتب أمرًا أو ابحث...',
       noMatch: 'لا توجد نتائج مطابقة',
       noData: 'لا توجد بيانات',
-      close: 'إغلاق'
+      close: 'إغلاق',
+      back: 'رجوع'
     },
     selectMenu: {
       noMatch: 'لا توجد نتائج مطابقة',

src/runtime/locale/az.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Əmr daxil edin və ya axtarın...',
       noMatch: 'Uyğun məlumat tapılmadı',
       noData: 'Məlumat yoxdur',
-      close: 'Bağla'
+      close: 'Bağla',
+      back: 'Geri'
     },
     selectMenu: {
       noMatch: 'Uyğun məlumat tapılmadı',

src/runtime/locale/bg.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Въведете команда или потърсете...',
       noMatch: 'Няма съвпадение на данни',
       noData: 'Няма данни',
-      close: 'Затворете'
+      close: 'Затворете',
+      back: 'Назад'
     },
     selectMenu: {
       noMatch: 'Няма съвпадение на данни',

src/runtime/locale/bn.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'কমান্ড টাইপ করুন বা অনুসন্ধান করুন...',
       noMatch: 'কোন মিল পাওয়া যায়নি',
       noData: 'কোন তথ্য নেই',
-      close: 'বন্ধ করুন'
+      close: 'বন্ধ করুন',
+      back: 'পেছনে'
     },
     selectMenu: {
       noMatch: 'কোন মিল পাওয়া যায়নি',

src/runtime/locale/ca.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Escriu una ordre o cerca...',
       noMatch: 'No hi ha dades coincidents',
       noData: 'Sense dades',
-      close: 'Tancar'
+      close: 'Tancar',
+      back: 'Enrere'
     },
     selectMenu: {
       noMatch: 'No hi ha dades coincidents',

src/runtime/locale/ckb.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'فەرمانێک بنووسە یان بگەڕێ...',
       noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
       noData: 'هیچ داتایەک نییە',
-      close: 'داخستن'
+      close: 'داخستن',
+      back: 'گەڕانەوە'
     },
     selectMenu: {
       noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',

src/runtime/locale/cs.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Zadejte příkaz nebo hledejte...',
       noMatch: 'Žádná shoda',
       noData: 'Žádná data',
-      close: 'Zavřít'
+      close: 'Zavřít',
+      back: 'Zpět'
     },
     selectMenu: {
       noMatch: 'Žádná shoda',

src/runtime/locale/da.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Skriv en kommando eller søg...',
       noMatch: 'Ingen matchende data',
       noData: 'Ingen data',
-      close: 'Luk'
+      close: 'Luk',
+      back: 'Tilbage'
     },
     selectMenu: {
       noMatch: 'Ingen matchende data',

src/runtime/locale/de.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Geben Sie einen Befehl ein oder suchen Sie...',
       noMatch: 'Nichts gefunden',
       noData: 'Keine Daten',
-      close: 'Schließen'
+      close: 'Schließen',
+      back: 'Zurück'
     },
     selectMenu: {
       noMatch: 'Nichts gefunden',

src/runtime/locale/el.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Πληκτρολογήστε μια εντολή ή αναζητήστε...',
       noMatch: 'Δεν βρέθηκαν δεδομένα',
       noData: 'Δεν υπάρχουν δεδομένα',
-      close: 'Κλείσιμο'
+      close: 'Κλείσιμο',
+      back: 'Πίσω'
     },
     selectMenu: {
       noMatch: 'Δεν βρέθηκαν δεδομένα',

src/runtime/locale/en.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Type a command or search...',
       noMatch: 'No matching data',
       noData: 'No data',
-      close: 'Close'
+      close: 'Close',
+      back: 'Back'
     },
     selectMenu: {
       noMatch: 'No matching data',

src/runtime/locale/es.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Escribe un comando o busca...',
       noMatch: 'No hay datos coincidentes',
       noData: 'Sin datos',
-      close: 'Cerrar'
+      close: 'Cerrar',
+      back: 'Atrás'
     },
     selectMenu: {
       noMatch: 'No hay datos coincidentes',

src/runtime/locale/et.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Sisesta käsk või otsi...',
       noMatch: 'Pole vastavaid andmeid',
       noData: 'Pole andmeid',
-      close: 'Sulge'
+      close: 'Sulge',
+      back: 'Tagasi'
     },
     selectMenu: {
       noMatch: 'Pole vastavaid andmeid',

src/runtime/locale/fa_ir.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'یک دستور وارد کنید یا جستجو کنید...',
       noMatch: 'داده‌ای یافت نشد',
       noData: 'داده‌ای موجود نیست',
-      close: 'بستن'
+      close: 'بستن',
+      back: 'بازگشت'
     },
     selectMenu: {
       noMatch: 'داده‌ای یافت نشد',

src/runtime/locale/fi.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Kirjoita komento tai hae...',
       noMatch: 'Ei vastaavia tietoja',
       noData: 'Ei tietoja',
-      close: 'Sulje'
+      close: 'Sulje',
+      back: 'Takaisin'
     },
     selectMenu: {
       noMatch: 'Ei vastaavia tietoja',

src/runtime/locale/fr.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Tapez une commande ou recherchez...',
       noMatch: 'Aucune donnée correspondante',
       noData: 'Aucune donnée',
-      close: 'Fermer'
+      close: 'Fermer',
+      back: 'Retour'
     },
     selectMenu: {
       noMatch: 'Aucune donnée correspondante',

src/runtime/locale/he.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'הקלד פקודה...',
       noMatch: 'לא נמצאה התאמה',
       noData: 'אין נתונים זמינים',
-      close: 'סגור'
+      close: 'סגור',
+      back: 'חזור'
     },
     selectMenu: {
       noMatch: 'לא נמצאה התאמה',

src/runtime/locale/hi.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'एक आदेश या खोज टाइप करें...',
       noMatch: 'कोई मेल खाता डेटा नहीं',
       noData: 'कोई डेटा नहीं',
-      close: 'बंद करें'
+      close: 'बंद करें',
+      back: 'वापस'
     },
     selectMenu: {
       noMatch: 'कोई मेल खाता डेटा नहीं',

src/runtime/locale/hu.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Írjon be egy parancsot vagy keressen...',
       noMatch: 'Nincs találat',
       noData: 'Nincs adat',
-      close: 'Bezárás'
+      close: 'Bezárás',
+      back: 'Vissza'
     },
     selectMenu: {
       noMatch: 'Nincs találat',

src/runtime/locale/hy.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Մուտքագրեք հրաման կամ որոնեք...',
       noMatch: 'Համընկնումներ չեն գտնվել',
       noData: 'Տվյալներ չկան',
-      close: 'Փակել'
+      close: 'Փակել',
+      back: 'Հետ'
     },
     selectMenu: {
       noMatch: 'Համընկնումներ չեն գտնվել',

src/runtime/locale/id.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Ketik perintah atau cari...',
       noMatch: 'Tidak ada data yang cocok',
       noData: 'Tidak ada data',
-      close: 'Tutup'
+      close: 'Tutup',
+      back: 'Kembali'
     },
     selectMenu: {
       noMatch: 'Tidak ada data yang cocok',

src/runtime/locale/it.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Digita un comando o cerca...',
       noMatch: 'Nessun dato corrispondente',
       noData: 'Nessun dato',
-      close: 'Chiudi'
+      close: 'Chiudi',
+      back: 'Indietro'
     },
     selectMenu: {
       noMatch: 'Nessun dato corrispondente',

src/runtime/locale/ja.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'コマンドを入力するか検索...',
       noMatch: '一致するデータがありません',
       noData: 'データがありません',
-      close: '閉じる'
+      close: '閉じる',
+      back: '戻る'
     },
     selectMenu: {
       noMatch: '一致するデータがありません',

src/runtime/locale/kk.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Команда енгізіңіз немесе іздеңіз...',
       noMatch: 'Сәйкес келетін деректер жоқ',
       noData: 'Деректер жоқ',
-      close: 'Жабу'
+      close: 'Жабу',
+      back: 'Артқа'
     },
     selectMenu: {
       noMatch: 'Сәйкес келетін деректер жоқ',

src/runtime/locale/km.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'វាយពាក្យបញ្ជា ឬស្វែងរក...',
       noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
       noData: 'មិនមានទិន្នន័យ',
-      close: 'បិទ'
+      close: 'បិទ',
+      back: 'ត្រឡប់'
     },
     selectMenu: {
       noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',

src/runtime/locale/ko.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: '명령을 입력하거나 검색...',
       noMatch: '일치하는 데이터가 없습니다.',
       noData: '데이터가 없습니다.',
-      close: '닫기'
+      close: '닫기',
+      back: '뒤로'
     },
     selectMenu: {
       noMatch: '일치하는 데이터가 없습니다.',

src/runtime/locale/ky.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Буйрук киргизиңиз же издөө…',
       noMatch: 'Эч нерсе табылган жок',
       noData: 'Маалымат жок',
-      close: 'Жабуу'
+      close: 'Жабуу',
+      back: 'Артка'
     },
     selectMenu: {
       noMatch: 'Сүйлөшкөн маалыматтар жок',

src/runtime/locale/lb.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Tippt e Befeel oder sicht...',
       noMatch: 'Keng entspriechend Donnéeën',
       noData: 'Keng Donnéeën',
-      close: 'Zoumaachen'
+      close: 'Zoumaachen',
+      back: 'Zréck'
     },
     selectMenu: {
       noMatch: 'Keng entspriechend Donnéeën',

src/runtime/locale/lt.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Įveskite komandą arba ieškokite...',
       noMatch: 'Nėra atitinkančių duomenų',
       noData: 'Nėra duomenų',
-      close: 'Uždaryti'
+      close: 'Uždaryti',
+      back: 'Atgal'
     },
     selectMenu: {
       noMatch: 'Nėra atitinkančių duomenų',

src/runtime/locale/mn.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Комманд бичих эсвэл хайлт хийх...',
       noMatch: 'Тохирох мэдээлэл олдсонгүй',
       noData: 'Мэдээлэл байхгүй',
-      close: 'Хаах'
+      close: 'Хаах',
+      back: 'Буцах'
     },
     selectMenu: {
       noMatch: 'Тохирох мэдээлэл олдсонгүй',

src/runtime/locale/ms.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Taip arahan atau carian...',
       noMatch: 'Tiada data yang sepadan',
       noData: 'Tiada data',
-      close: 'Tutup'
+      close: 'Tutup',
+      back: 'Kembali'
     },
     selectMenu: {
       noMatch: 'Tiada data yang sepadan',

src/runtime/locale/nb_no.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Skriv inn en kommando eller søk...',
       noMatch: 'Ingen samsvarende data',
       noData: 'Ingen data',
-      close: 'Lukk'
+      close: 'Lukk',
+      back: 'Tilbake'
     },
     selectMenu: {
       noMatch: 'Ingen samsvarende data',

src/runtime/locale/nl.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Typ een commando of zoek...',
       noMatch: 'Geen overeenkomende gegevens',
       noData: 'Geen gegevens',
-      close: 'Sluiten'
+      close: 'Sluiten',
+      back: 'Terug'
     },
     selectMenu: {
       noMatch: 'Geen overeenkomende gegevens',

src/runtime/locale/pl.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Wpisz polecenie lub wyszukaj...',
       noMatch: 'Brak pasujących danych',
       noData: 'Brak danych',
-      close: 'Zamknij'
+      close: 'Zamknij',
+      back: 'Wstecz'
     },
     selectMenu: {
       noMatch: 'Brak pasujących danych',

src/runtime/locale/pt.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Digite um comando ou pesquise...',
       noMatch: 'Nenhum dado correspondente',
       noData: 'Sem dados',
-      close: 'Fechar'
+      close: 'Fechar',
+      back: 'Voltar'
     },
     selectMenu: {
       noMatch: 'Nenhum dado correspondente',

src/runtime/locale/pt_br.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Digite um comando ou pesquise...',
       noMatch: 'Nenhum dado correspondente',
       noData: 'Nenhum dado',
-      close: 'Fechar'
+      close: 'Fechar',
+      back: 'Voltar'
     },
     selectMenu: {
       noMatch: 'Nenhum dado correspondente',

src/runtime/locale/ro.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Tastează o comandă sau caută...',
       noMatch: 'Nu există date corespunzătoare',
       noData: 'Nu există date',
-      close: 'Închide'
+      close: 'Închide',
+      back: 'Înapoi'
     },
     selectMenu: {
       noMatch: 'Nu există date corespunzătoare',

src/runtime/locale/ru.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Введите команду или выполните поиск...',
       noMatch: 'Совпадений не найдено',
       noData: 'Нет данных',
-      close: 'Закрыть'
+      close: 'Закрыть',
+      back: 'Назад'
     },
     selectMenu: {
       noMatch: 'Совпадений не найдено',

src/runtime/locale/sk.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Zadajte príkaz alebo vyhľadajte...',
       noMatch: 'Žiadna zhoda',
       noData: 'Žiadne dáta',
-      close: 'Zatvoriť'
+      close: 'Zavrieť',
+      back: 'Späť'
     },
     selectMenu: {
       noMatch: 'Žiadna zhoda',

src/runtime/locale/sl.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Vpiši ukaz ali išči...',
       noMatch: 'Ni ujemanj',
       noData: 'Ni podatkov',
-      close: 'Zapri'
+      close: 'Zapri',
+      back: 'Nazaj'
     },
     selectMenu: {
       noMatch: 'Ni ujemanj',

src/runtime/locale/sv.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Skriv ett kommando eller sök...',
       noMatch: 'Inga matchande data',
       noData: 'Inga data',
-      close: 'Stäng'
+      close: 'Stäng',
+      back: 'Tillbaka'
     },
     selectMenu: {
       noMatch: 'Inga matchande data',

src/runtime/locale/th.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'พิมพ์คำสั่งหรือค้นหา...',
       noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
       noData: 'ไม่มีข้อมูล',
-      close: 'ปิด'
+      close: 'ปิด',
+      back: 'ย้อนกลับ'
     },
     selectMenu: {
       noMatch: 'ไม่พบข้อมูลที่ตรงกัน',

src/runtime/locale/tj.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Фармонро нависед ё ҷустуҷӯ кунед...',
       noMatch: 'Маълумоти мувофиқ ёфт нашуд',
       noData: 'Маълумот нест',
-      close: 'Бастан'
+      close: 'Бастан',
+      back: 'Бозгашт'
     },
     selectMenu: {
       noMatch: 'Маълумоти мувофиқ ёфт нашуд',

src/runtime/locale/tr.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Bir komut yazın veya arama yapın...',
       noMatch: 'Eşleşen veri yok',
       noData: 'Veri yok',
-      close: 'Kapat'
+      close: 'Kapat',
+      back: 'Geri'
     },
     selectMenu: {
       noMatch: 'Eşleşen veri yok',

src/runtime/locale/ug_cn.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'بۇيرۇق كىرگۈزۈڭ ياكى ئىزدەڭ...',
       noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
       noData: 'سانلىق مەلۇمات يوق',
-      close: 'تاقاش'
+      close: 'تاقاش',
+      back: 'قايتىش'
     },
     selectMenu: {
       noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',

src/runtime/locale/uk.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Введіть команду або шукайте...',
       noMatch: 'Збігів не знайдено',
       noData: 'Немає даних',
-      close: 'Закрити'
+      close: 'Закрити',
+      back: 'Назад'
     },
     selectMenu: {
       noMatch: 'Збігів не знайдено',

src/runtime/locale/ur.ts

@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
       placeholder: 'کمانڈ ٹائپ کریں یا تلاش کریں...',
       noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
       noData: 'کوئی ڈیٹا نہیں',
-      close: 'بند کریں'
+      close: 'بند کریں',
+      back: 'واپس'
     },
     selectMenu: {
       noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',

src/runtime/locale/uz.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Buyruq kiriting yoki qidiring...',
       noMatch: 'Mos keluvchi natija topilmadi',
       noData: 'Maʼlumot yoʻq',
-      close: 'Yopish'
+      close: 'Yopish',
+      back: 'Orqaga'
     },
     selectMenu: {
       noMatch: 'Mos keluvchi natija topilmadi',

src/runtime/locale/vi.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: 'Nhập lệnh hoặc tìm kiếm...',
       noMatch: 'Không có kết quả phù hợp',
       noData: 'Không có dữ liệu',
-      close: 'Đóng'
+      close: 'Đóng',
+      back: 'Quay lại'
     },
     selectMenu: {
       noMatch: 'Không có kết quả phù hợp',

src/runtime/locale/zh_cn.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: '输入命令或搜索...',
       noMatch: '没有匹配的数据',
       noData: '没有数据',
-      close: '关闭'
+      close: '关闭',
+      back: '返回'
     },
     selectMenu: {
       noMatch: '没有匹配的数据',

src/runtime/locale/zh_tw.ts

@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
       placeholder: '輸入命令或搜尋...',
       noMatch: '沒有相符的資料',
       noData: '沒有資料',
-      close: '關閉'
+      close: '關閉',
+      back: '返回'
     },
     selectMenu: {
       noMatch: '沒有相符的資料',

src/runtime/types/locale.ts

@@ -19,6 +19,7 @@ export type Messages = {
     noMatch: string
     noData: string
     close: string
+    back: string
   }
   selectMenu: {
     noMatch: string

src/theme/command-palette.ts

@@ -5,6 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
     input: '[&>input]:h-12',
     close: '',
+    back: 'p-0',
     content: 'relative overflow-hidden flex flex-col',
     viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
     group: 'p-1 isolate',

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: {

test/components/CommandPalette.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import CommandPalette, { type CommandPaletteProps } from '../../src/runtime/components/CommandPalette.vue'
+import CommandPalette, { type CommandPaletteProps, type CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
 import ComponentRender from '../component-render'
 
 describe('CommandPalette', () => {
@@ -89,7 +89,7 @@ describe('CommandPalette', () => {
     ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
     ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
     ['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps<typeof groups[number], typeof groups[number]['items'][number]>, slots?: Partial<any> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps, slots?: Partial<CommandPaletteSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, CommandPalette)
     expect(html).toMatchSnapshot()
   })

test/components/FormField.spec.ts

@@ -68,6 +68,10 @@ describe('FormField', () => {
     ['with required', { props: { label: 'Username', required: true } }],
     ['with help', { props: { help: 'Username must be unique' } }],
     ['with error', { props: { error: 'Username is already taken' } }],
+    ['with multiple errors', { props: { errors: ['Username is already taken', 'This should not be visible'] } }],
+    ['with maxErrors', { props: { maxErrors: 2, errors: ['Username is already taken', 'This should be visible'] } }],
+    ['with maxErrors negative', { props: { maxErrors: -1, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
+    ['with maxErrors false', { props: { maxErrors: false, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
     ['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
     ['with as', { props: { as: 'section' } }],

test/components/Table.spec.ts

@@ -162,7 +162,7 @@ describe('Table', () => {
     ['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
     ['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
     ['with caption slot', { props, slots: { caption: () => 'Caption slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps, slots?: Partial<TableSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Table)
     expect(html).toMatchSnapshot()
   })

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__/FormField-vue.spec.ts.snap

@@ -148,6 +148,59 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FormField > renders with maxErrors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors false correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors negative correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with multiple errors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+  </div>
+</div>"
+`;
+
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">

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

@@ -148,6 +148,59 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FormField > renders with maxErrors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors false correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors negative correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with multiple errors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+  </div>
+</div>"
+`;
+
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">

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">