chore: upgrade Nuxt Content

2026-01-16 13:08:06 +01:00 · 2025-06-12 15:30:56 +02:00
87 changed files with 310 additions and 1219 deletions
--- a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
@@ -83,7 +83,7 @@ const groups = [
    </template>

    <template #billing-label="{ item }">
-      <span class="font-medium text-primary">{{ item.label }}</span>
+      {{ item.label }}

      <UBadge variant="subtle" size="sm">
        50% off
--- a/docs/app/components/content/examples/command-palette/CommandPaletteItemsChildrenExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteItemsChildrenExample.vue
@@ -1,119 +0,0 @@
-<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>
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -52,11 +52,9 @@ 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.

@@ -112,10 +110,6 @@ 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.
@@ -252,128 +246,6 @@ 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.
@@ -449,6 +321,37 @@ 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.
@@ -565,124 +468,6 @@ 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)
@@ -717,28 +502,6 @@ 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.
@@ -895,7 +658,6 @@ You will have access to the following slots:

 ::component-example
 ---
-collapse: true
 name: 'command-palette-custom-slot-example'
 class: '!p-0'
 props:
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -782,14 +782,6 @@ 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
--- a/docs/content/3.components/input-number.md
+++ b/docs/content/3.components/input-number.md
@@ -1,6 +1,6 @@
 ---
 title: InputNumber
-description: An input for numerical values with a customizable range.
+description: Input 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<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
+|----------------------------|-------------------------------------------------|
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |

 ## Theme

--- a/docs/content/3.components/input-tags.md
+++ b/docs/content/3.components/input-tags.md
@@ -1,7 +1,6 @@
 ---
 title: InputTags
 description: An input element that displays interactive tags.
-category: form
 links:
  - label: InputTags
    icon: i-custom-reka-ui
@@ -277,8 +276,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<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
+|----------------------------|-------------------------------------------------|
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |

 ## Theme

--- a/docs/content/3.components/input.md
+++ b/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 libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
+There's no built-in support for masks, but you can use librairies like [maska](https://github.com/beholdr/maska) to mask the Input.

 ::component-example
 ---
--- a/docs/content/3.components/pin-input.md
+++ b/docs/content/3.components/pin-input.md
@@ -180,8 +180,6 @@ props:

 :component-emits

-### Expose
-
 When accessing the component via a template ref, you can use the following:

 | Name | Type |
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -815,14 +815,6 @@ 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
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -709,14 +709,6 @@ 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
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -242,14 +242,6 @@ 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
--- a/docs/content/3.components/timeline.md
+++ b/docs/content/3.components/timeline.md
@@ -173,46 +173,6 @@ class: 'overflow-x-auto'
 ---
 ::

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

 ### Control active item
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,7 @@
    "@iconify-json/lucide": "^1.2.47",
    "@iconify-json/simple-icons": "^1.2.38",
    "@iconify-json/vscode-icons": "^1.2.22",
-    "@nuxt/content": "^3.5.1",
+    "@nuxt/content": "^3.6.0",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "workspace:*",
    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
--- a/docs/public/components/dark/input-tags.png
+++ b/docs/public/components/dark/input-tags.png
--- a/docs/public/components/light/input-tags.png
+++ b/docs/public/components/light/input-tags.png
--- a/playground/app/pages/components/command-palette.vue
+++ b/playground/app/pages/components/command-palette.vue
@@ -74,51 +74,6 @@ 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!' })
-        }
-      }]
-    }]
  }]
 }])

--- a/playground/app/pages/components/form-field.vue
+++ b/playground/app/pages/components/form-field.vue
@@ -16,7 +16,7 @@ const feedbacks = [
  <div class="flex flex-col items-center gap-4">
    <div class="flex flex-col gap-4 ms-[-38px]">
      <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
-        <UFormField v-bind="feedback" label="Email" name="email" variant="inline">
+        <UFormField v-bind="feedback" label="Email" name="email">
          <UInput placeholder="john@lennon.com" />
        </UFormField>
      </div>
@@ -41,8 +41,6 @@ const feedbacks = [
        :size="size"
        label="Email"
        description="This is a description"
-        hint="This is a hint"
-        help="This is a help"
        name="email"
      >
        <UInput placeholder="john@lennon.com" />
--- a/playground/app/pages/components/timeline.vue
+++ b/playground/app/pages/components/timeline.vue
@@ -9,7 +9,6 @@ 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',
@@ -47,7 +46,6 @@ 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
@@ -56,7 +54,6 @@ const value = ref('kickoff')
      :orientation="orientation"
      :size="size"
      :items="items"
-      :reverse="reverse"
      class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
    />
  </div>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -240,8 +240,8 @@ importers:
        specifier: ^1.2.22
        version: 1.2.22
      '@nuxt/content':
-        specifier: ^3.5.1
-        version: 3.5.1(magicast@0.3.5)(typescript@5.8.3)
+        specifier: ^3.6.0
+        version: 3.6.0(better-sqlite3@11.10.0)(magicast@0.3.5)
      '@nuxt/image':
        specifier: ^1.10.0
        version: 1.10.0(db0@0.3.2(better-sqlite3@11.10.0))(ioredis@5.6.1)(magicast@0.3.5)
@@ -438,6 +438,10 @@ packages:
  '@antfu/utils@8.1.1':
    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}

+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    resolution: {integrity: sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==}
+    engines: {node: '>= 16'}
+
  '@babel/code-frame@7.27.1':
    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
    engines: {node: '>=6.9.0'}
@@ -1375,6 +1379,9 @@ packages:
  '@jridgewell/trace-mapping@0.3.9':
    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}

+  '@jsdevtools/ono@7.1.3':
+    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
+
  '@kwsites/file-exists@1.1.1':
    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}

@@ -1441,17 +1448,20 @@ packages:
    engines: {node: ^16.10.0 || >=18.0.0}
    hasBin: true

-  '@nuxt/content@3.5.1':
-    resolution: {integrity: sha512-WmWgxt5gWPSHBzLBSBZHiU9jaOmTWINMAppWxZ43ZHZCfa0GvdR5+0uTto2EGITPrPsf6iYhKKzSfmJa+Xmp2Q==}
+  '@nuxt/content@3.6.0':
+    resolution: {integrity: sha512-iqkcWf8M00fq7ZqF2qaHgcoKzRVOTMUp7dLkPCBrARmAKvV4kHdYyKjcf94kiNeKzIeqa73l3c1P8YMno/GgRQ==}
    peerDependencies:
      '@electric-sql/pglite': '*'
      '@libsql/client': '*'
+      better-sqlite3: 11.10.0
      sqlite3: '*'
    peerDependenciesMeta:
      '@electric-sql/pglite':
        optional: true
      '@libsql/client':
        optional: true
+      better-sqlite3:
+        optional: true
      sqlite3:
        optional: true

@@ -2200,24 +2210,33 @@ packages:
  '@shikijs/core@3.4.2':
    resolution: {integrity: sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ==}

-  '@shikijs/engine-javascript@3.4.2':
-    resolution: {integrity: sha512-1/adJbSMBOkpScCE/SB6XkjJU17ANln3Wky7lOmrnpl+zBdQ1qXUJg2GXTYVHRq+2j3hd1DesmElTXYDgtfSOQ==}
+  '@shikijs/core@3.6.0':
+    resolution: {integrity: sha512-9By7Xb3olEX0o6UeJyPLI1PE1scC4d3wcVepvtv2xbuN9/IThYN4Wcwh24rcFeASzPam11MCq8yQpwwzCgSBRw==}

-  '@shikijs/engine-oniguruma@3.4.2':
-    resolution: {integrity: sha512-zcZKMnNndgRa3ORja6Iemsr3DrLtkX3cAF7lTJkdMB6v9alhlBsX9uNiCpqofNrXOvpA3h6lHcLJxgCIhVOU5Q==}
+  '@shikijs/engine-javascript@3.6.0':
+    resolution: {integrity: sha512-7YnLhZG/TU05IHMG14QaLvTW/9WiK8SEYafceccHUSXs2Qr5vJibUwsDfXDLmRi0zHdzsxrGKpSX6hnqe0k8nA==}

-  '@shikijs/langs@3.4.2':
-    resolution: {integrity: sha512-H6azIAM+OXD98yztIfs/KH5H4PU39t+SREhmM8LaNXyUrqj2mx+zVkr8MWYqjceSjDw9I1jawm1WdFqU806rMA==}
+  '@shikijs/engine-oniguruma@3.6.0':
+    resolution: {integrity: sha512-nmOhIZ9yT3Grd+2plmW/d8+vZ2pcQmo/UnVwXMUXAKTXdi+LK0S08Ancrz5tQQPkxvjBalpMW2aKvwXfelauvA==}
+
+  '@shikijs/langs@3.6.0':
+    resolution: {integrity: sha512-IdZkQJaLBu1LCYCwkr30hNuSDfllOT8RWYVZK1tD2J03DkiagYKRxj/pDSl8Didml3xxuyzUjgtioInwEQM/TA==}

  '@shikijs/themes@3.4.2':
    resolution: {integrity: sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg==}

+  '@shikijs/themes@3.6.0':
+    resolution: {integrity: sha512-Fq2j4nWr1DF4drvmhqKq8x5vVQ27VncF8XZMBuHuQMZvUSS3NBgpqfwz/FoGe36+W6PvniZ1yDlg2d4kmYDU6w==}
+
  '@shikijs/transformers@3.4.2':
    resolution: {integrity: sha512-I5baLVi/ynLEOZoWSAMlACHNnG+yw5HDmse0oe+GW6U1u+ULdEB3UHiVWaHoJSSONV7tlcVxuaMy74sREDkSvg==}

  '@shikijs/types@3.4.2':
    resolution: {integrity: sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg==}

+  '@shikijs/types@3.6.0':
+    resolution: {integrity: sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==}
+
  '@shikijs/vscode-textmate@10.0.2':
    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}

@@ -2257,8 +2276,8 @@ packages:
  '@speed-highlight/core@1.2.7':
    resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}

-  '@sqlite.org/sqlite-wasm@3.49.1-build4':
-    resolution: {integrity: sha512-TBbTTWhiI6v2CT7J1hij5shx+RGL4iICprVGYhO+LKv5Nbn3NeJPWCY8kMKL5vA6b33NeWkBk4dy6RFbNh3jBw==}
+  '@sqlite.org/sqlite-wasm@3.50.1-build1':
+    resolution: {integrity: sha512-yH4M/SHN98NibniIwTVk6rwTJjy7n39l7zwWY3u+qsfZBGTi4lC1uEl2NDvIlkzsFtfCBvHBJJFJ1iuU3UzzEQ==}
    hasBin: true

  '@standard-schema/spec@1.0.0':
@@ -2418,6 +2437,9 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

+  '@types/lodash@4.17.17':
+    resolution: {integrity: sha512-RRVJ+J3J+WmyOTqnz3PiBLA501eKwXl2noseKOrNo/6+XEHjTAxO4xHvxQB6QuNm+s4WRbn6rSiap8+EA+ykFQ==}
+
  '@types/mdast@4.0.4':
    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}

@@ -4888,6 +4910,11 @@ packages:
  json-parse-even-better-errors@2.3.1:
    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}

+  json-schema-to-typescript@15.0.4:
+    resolution: {integrity: sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
  json-schema-traverse@0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}

@@ -5350,6 +5377,9 @@ packages:
    engines: {node: '>=18.0.0'}
    hasBin: true

+  minimark@0.2.0:
+    resolution: {integrity: sha512-AmtWU9pO0C2/3AM2pikaVhJ//8E5rOpJ7+ioFQfjIq+wCsBeuZoxPd97hBFZ9qrI7DMHZudwGH3r8A7BMnsIew==}
+
  minimatch@10.0.1:
    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
    engines: {node: 20 || >=22}
@@ -6462,8 +6492,8 @@ packages:
  shiki-transformer-color-highlight@1.0.0:
    resolution: {integrity: sha512-WwoXcbSQF4Hcfu/F4V7jvZxqmix4f8KNYNlYiNwz0w9RcABqhdNQOLeRRw3VNV2LBYdNcNR0qd9HVnlV+D+uzg==}

-  shiki@3.4.2:
-    resolution: {integrity: sha512-wuxzZzQG8kvZndD7nustrNFIKYJ1jJoWIPaBpVe2+KHSvtzMi4SBjOxrigs8qeqce/l3U0cwiC+VAkLKSunHQQ==}
+  shiki@3.6.0:
+    resolution: {integrity: sha512-tKn/Y0MGBTffQoklaATXmTqDU02zx8NYBGQ+F6gy87/YjKbizcLd+Cybh/0ZtOBX9r1NEnAy/GTRDKtOsc1L9w==}

  side-channel-list@1.0.0:
    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -7625,12 +7655,6 @@ packages:
    peerDependencies:
      zod: ^3.24.1

-  zod-to-ts@1.2.0:
-    resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==}
-    peerDependencies:
-      typescript: ^4.9.4 || ^5.0.2
-      zod: ^3
-
  zod@3.22.3:
    resolution: {integrity: sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==}

@@ -7640,6 +7664,9 @@ packages:
  zod@3.25.57:
    resolution: {integrity: sha512-6tgzLuwVST5oLUxXTmBqoinKMd3JeesgbgseXeFasKKj8Q1FCZrHnbqJOyiEvr4cVAlbug+CgIsmJ8cl/pU5FA==}

+  zod@3.25.63:
+    resolution: {integrity: sha512-3ttCkqhtpncYXfP0f6dsyabbYV/nEUW+Xlu89jiXbTBifUfjaSqXOG6JnQPLtqt87n7KAmnMqcjay6c0Wq0Vbw==}
+
  zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}

@@ -7697,6 +7724,12 @@ snapshots:

  '@antfu/utils@8.1.1': {}

+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.0
+
  '@babel/code-frame@7.27.1':
    dependencies:
      '@babel/helper-validator-identifier': 7.27.1
@@ -8535,6 +8568,8 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@jsdevtools/ono@7.1.3': {}
+
  '@kwsites/file-exists@1.1.1':
    dependencies:
      debug: 4.3.7
@@ -8695,23 +8730,22 @@ snapshots:
    transitivePeerDependencies:
      - magicast

-  '@nuxt/content@3.5.1(magicast@0.3.5)(typescript@5.8.3)':
+  '@nuxt/content@3.6.0(better-sqlite3@11.10.0)(magicast@0.3.5)':
    dependencies:
      '@nuxt/kit': 3.17.5(magicast@0.3.5)
      '@nuxtjs/mdc': 0.17.0(magicast@0.3.5)
-      '@shikijs/langs': 3.4.2
-      '@sqlite.org/sqlite-wasm': 3.49.1-build4
+      '@shikijs/langs': 3.6.0
+      '@sqlite.org/sqlite-wasm': 3.50.1-build1
      '@webcontainer/env': 1.1.1
-      better-sqlite3: 11.10.0
      c12: 3.0.4(magicast@0.3.5)
      chokidar: 3.6.0
      consola: 3.4.2
      db0: 0.3.2(better-sqlite3@11.10.0)
      defu: 6.1.4
      destr: 2.0.5
-      fast-glob: 3.3.3
      git-url-parse: 16.1.0
      jiti: 2.4.2
+      json-schema-to-typescript: 15.0.4
      knitwork: 1.2.0
      listhen: 1.9.0
      mdast-util-to-hast: 13.2.0
@@ -8722,32 +8756,35 @@ snapshots:
      micromark-util-resolve-all: 2.0.1
      micromark-util-sanitize-uri: 2.0.1
      micromatch: 4.0.8
+      minimark: 0.2.0
      minimatch: 10.0.1
      nuxt-component-meta: 0.11.0(magicast@0.3.5)
+      nypm: 0.6.0
      ohash: 2.0.11
      pathe: 2.0.3
      pkg-types: 2.1.0
      remark-mdc: 3.6.0
      scule: 1.3.0
-      shiki: 3.4.2
+      shiki: 3.6.0
      slugify: 1.6.6
      socket.io-client: 4.8.1
      tar: 7.4.3
+      tinyglobby: 0.2.14
      ufo: 1.6.1
      unified: 11.0.5
      unist-util-stringify-position: 4.0.0
      unist-util-visit: 5.0.0
      ws: 8.18.2
-      zod: 3.25.57
-      zod-to-json-schema: 3.24.5(zod@3.25.57)
-      zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.57)
+      zod: 3.25.63
+      zod-to-json-schema: 3.24.5(zod@3.25.63)
+    optionalDependencies:
+      better-sqlite3: 11.10.0
    transitivePeerDependencies:
      - bufferutil
      - drizzle-orm
      - magicast
      - mysql2
      - supports-color
-      - typescript
      - utf-8-validate

  '@nuxt/devalue@2.0.2': {}
@@ -9240,7 +9277,7 @@ snapshots:
  '@nuxtjs/mdc@0.17.0(magicast@0.3.5)':
    dependencies:
      '@nuxt/kit': 3.17.5(magicast@0.3.5)
-      '@shikijs/langs': 3.4.2
+      '@shikijs/langs': 3.6.0
      '@shikijs/themes': 3.4.2
      '@shikijs/transformers': 3.4.2
      '@types/hast': 3.0.4
@@ -9274,7 +9311,7 @@ snapshots:
      remark-rehype: 11.1.2
      remark-stringify: 11.0.0
      scule: 1.3.0
-      shiki: 3.4.2
+      shiki: 3.6.0
      ufo: 1.6.1
      unified: 11.0.5
      unist-builder: 4.0.0
@@ -9787,25 +9824,36 @@ snapshots:
      '@types/hast': 3.0.4
      hast-util-to-html: 9.0.5

-  '@shikijs/engine-javascript@3.4.2':
+  '@shikijs/core@3.6.0':
    dependencies:
-      '@shikijs/types': 3.4.2
+      '@shikijs/types': 3.6.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.6.0':
+    dependencies:
+      '@shikijs/types': 3.6.0
      '@shikijs/vscode-textmate': 10.0.2
      oniguruma-to-es: 4.3.3

-  '@shikijs/engine-oniguruma@3.4.2':
+  '@shikijs/engine-oniguruma@3.6.0':
    dependencies:
-      '@shikijs/types': 3.4.2
+      '@shikijs/types': 3.6.0
      '@shikijs/vscode-textmate': 10.0.2

-  '@shikijs/langs@3.4.2':
+  '@shikijs/langs@3.6.0':
    dependencies:
-      '@shikijs/types': 3.4.2
+      '@shikijs/types': 3.6.0

  '@shikijs/themes@3.4.2':
    dependencies:
      '@shikijs/types': 3.4.2

+  '@shikijs/themes@3.6.0':
+    dependencies:
+      '@shikijs/types': 3.6.0
+
  '@shikijs/transformers@3.4.2':
    dependencies:
      '@shikijs/core': 3.4.2
@@ -9816,6 +9864,11 @@ snapshots:
      '@shikijs/vscode-textmate': 10.0.2
      '@types/hast': 3.0.4

+  '@shikijs/types@3.6.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
  '@shikijs/vscode-textmate@10.0.2': {}

  '@shuding/opentype.js@1.4.0-beta.0':
@@ -9843,7 +9896,7 @@ snapshots:

  '@speed-highlight/core@1.2.7': {}

-  '@sqlite.org/sqlite-wasm@3.49.1-build4': {}
+  '@sqlite.org/sqlite-wasm@3.50.1-build1': {}

  '@standard-schema/spec@1.0.0': {}

@@ -9987,6 +10040,8 @@ snapshots:

  '@types/json-schema@7.0.15': {}

+  '@types/lodash@4.17.17': {}
+
  '@types/mdast@4.0.4':
    dependencies:
      '@types/unist': 3.0.3
@@ -10713,6 +10768,7 @@ snapshots:
    dependencies:
      bindings: 1.5.0
      prebuild-install: 7.1.3
+    optional: true

  binary-extensions@2.3.0: {}

@@ -10727,6 +10783,7 @@ snapshots:
      buffer: 5.7.1
      inherits: 2.0.4
      readable-stream: 3.6.2
+    optional: true

  blake3-wasm@2.1.5: {}

@@ -10882,7 +10939,8 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.3

-  chownr@1.1.4: {}
+  chownr@1.1.4:
+    optional: true

  chownr@3.0.0: {}

@@ -11294,10 +11352,12 @@ snapshots:
  decompress-response@6.0.0:
    dependencies:
      mimic-response: 3.1.0
+    optional: true

  deep-eql@5.0.2: {}

-  deep-extend@0.6.0: {}
+  deep-extend@0.6.0:
+    optional: true

  deep-is@0.1.4: {}

@@ -11866,7 +11926,8 @@ snapshots:

  exit-hook@2.2.1: {}

-  expand-template@2.0.3: {}
+  expand-template@2.0.3:
+    optional: true

  expect-type@1.2.1: {}

@@ -12045,7 +12106,8 @@ snapshots:

  fresh@2.0.0: {}

-  fs-constants@1.0.0: {}
+  fs-constants@1.0.0:
+    optional: true

  fs.realpath@1.0.0: {}

@@ -12149,7 +12211,8 @@ snapshots:
    dependencies:
      git-up: 8.1.1

-  github-from-package@0.0.0: {}
+  github-from-package@0.0.0:
+    optional: true

  github-slugger@2.0.0: {}

@@ -12724,6 +12787,18 @@ snapshots:

  json-parse-even-better-errors@2.3.1: {}

+  json-schema-to-typescript@15.0.4:
+    dependencies:
+      '@apidevtools/json-schema-ref-parser': 11.9.3
+      '@types/json-schema': 7.0.15
+      '@types/lodash': 4.17.17
+      is-glob: 4.0.3
+      js-yaml: 4.1.0
+      lodash: 4.17.21
+      minimist: 1.2.8
+      prettier: 3.5.3
+      tinyglobby: 0.2.14
+
  json-schema-traverse@0.4.1: {}

  json-schema@0.4.0: {}
@@ -13322,7 +13397,8 @@ snapshots:

  mimic-function@5.0.1: {}

-  mimic-response@3.1.0: {}
+  mimic-response@3.1.0:
+    optional: true

  min-indent@1.0.1: {}

@@ -13344,6 +13420,8 @@ snapshots:
      - bufferutil
      - utf-8-validate

+  minimark@0.2.0: {}
+
  minimatch@10.0.1:
    dependencies:
      brace-expansion: 2.0.1
@@ -13374,7 +13452,8 @@ snapshots:

  mitt@3.0.1: {}

-  mkdirp-classic@0.5.3: {}
+  mkdirp-classic@0.5.3:
+    optional: true

  mkdirp@3.0.1: {}

@@ -13447,7 +13526,8 @@ snapshots:

  nanotar@0.2.0: {}

-  napi-build-utils@2.0.0: {}
+  napi-build-utils@2.0.0:
+    optional: true

  napi-postinstall@0.2.4: {}

@@ -13579,6 +13659,7 @@ snapshots:
  node-abi@3.75.0:
    dependencies:
      semver: 7.7.2
+    optional: true

  node-addon-api@6.1.0:
    optional: true
@@ -14318,6 +14399,7 @@ snapshots:
      simple-get: 4.0.1
      tar-fs: 2.1.3
      tunnel-agent: 0.6.0
+    optional: true

  precinct@12.2.0:
    dependencies:
@@ -14452,6 +14534,7 @@ snapshots:
      ini: 1.3.8
      minimist: 1.2.8
      strip-json-comments: 2.0.1
+    optional: true

  react@19.1.0: {}

@@ -14921,14 +15004,14 @@ snapshots:
      '@shikijs/types': 3.4.2
      colorjs.io: 0.5.2

-  shiki@3.4.2:
+  shiki@3.6.0:
    dependencies:
-      '@shikijs/core': 3.4.2
-      '@shikijs/engine-javascript': 3.4.2
-      '@shikijs/engine-oniguruma': 3.4.2
-      '@shikijs/langs': 3.4.2
-      '@shikijs/themes': 3.4.2
-      '@shikijs/types': 3.4.2
+      '@shikijs/core': 3.6.0
+      '@shikijs/engine-javascript': 3.6.0
+      '@shikijs/engine-oniguruma': 3.6.0
+      '@shikijs/langs': 3.6.0
+      '@shikijs/themes': 3.6.0
+      '@shikijs/types': 3.6.0
      '@shikijs/vscode-textmate': 10.0.2
      '@types/hast': 3.0.4

@@ -14964,13 +15047,15 @@ snapshots:

  signal-exit@4.1.0: {}

-  simple-concat@1.0.1: {}
+  simple-concat@1.0.1:
+    optional: true

  simple-get@4.0.1:
    dependencies:
      decompress-response: 6.0.0
      once: 1.4.0
      simple-concat: 1.0.1
+    optional: true

  simple-git@3.27.0:
    dependencies:
@@ -15155,7 +15240,8 @@ snapshots:
    dependencies:
      min-indent: 1.0.1

-  strip-json-comments@2.0.1: {}
+  strip-json-comments@2.0.1:
+    optional: true

  strip-json-comments@3.1.1: {}

@@ -15224,6 +15310,7 @@ snapshots:
      mkdirp-classic: 0.5.3
      pump: 3.0.2
      tar-stream: 2.2.0
+    optional: true

  tar-fs@3.0.9:
    dependencies:
@@ -15242,6 +15329,7 @@ snapshots:
      fs-constants: 1.0.0
      inherits: 2.0.4
      readable-stream: 3.6.2
+    optional: true

  tar-stream@3.1.7:
    dependencies:
@@ -15361,6 +15449,7 @@ snapshots:
  tunnel-agent@0.6.0:
    dependencies:
      safe-buffer: 5.2.1
+    optional: true

  type-check@0.4.0:
    dependencies:
@@ -16150,10 +16239,9 @@ snapshots:
    dependencies:
      zod: 3.25.57

-  zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.25.57):
+  zod-to-json-schema@3.24.5(zod@3.25.63):
    dependencies:
-      typescript: 5.8.3
-      zod: 3.25.57
+      zod: 3.25.63

  zod@3.22.3: {}

@@ -16161,4 +16249,6 @@ snapshots:

  zod@3.25.57: {}

+  zod@3.25.63: {}
+
  zwitch@2.0.4: {}
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -26,18 +26,13 @@ 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 extends CommandPaletteItem = CommandPaletteItem> {
+export interface CommandPaletteGroup<T> {
  id: string
  label?: string
  slot?: string
@@ -57,7 +52,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
  highlightedIcon?: string
 }

-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'> {
+export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
  /**
   * The element or component this component should render as.
   * @defaultValue 'div'
@@ -75,12 +70,6 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
   * @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')
@@ -104,18 +93,6 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
   * @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).
@@ -139,15 +116,14 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
  ui?: CommandPalette['slots']
 }

-export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
  'update:open': [value: boolean]
 }

 type SlotProps<T> = (props: { item: T, index: number }) => any

-export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
  '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>
@@ -158,7 +134,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
 </script>

 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -181,8 +157,7 @@ import UKbd from './Kbd.vue'
 const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
  modelValue: '',
  labelKey: 'label',
-  autofocus: true,
-  back: true
+  autofocus: true
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<G, T>>()
@@ -192,7 +167,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', 'selectionBehavior'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
 const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))

 // eslint-disable-next-line vue/no-dupe-keys
@@ -208,22 +183,18 @@ const fuse = computed(() => defu({}, props.fuse, {
  matchAllWhenSearchEmpty: true
 }))

-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) => {
+const items = computed(() => props.groups?.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)

@@ -244,7 +215,7 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
  }
 }

-const filteredGroups = computed(() => {
+const groups = computed(() => {
  const groupsById = fuseResults.value.reduce((acc, result) => {
    const { item, matches } = result
    if (!item.group) {
@@ -258,7 +229,7 @@ const filteredGroups = computed(() => {
  }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)

  const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
-    const group = groups.value?.find(group => group.id === id)
+    const group = props.groups?.find(group => group.id === id)
    if (!group) {
      return
    }
@@ -266,7 +237,7 @@ const filteredGroups = computed(() => {
    return getGroupWithItems(group, items)
  }).filter(group => !!group)

-  const nonFuseGroups = groups.value
+  const nonFuseGroups = props.groups
    ?.map((group, index) => ({ ...group, index }))
    ?.filter(group => group.ignoreFilter && group.items?.length)
    ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
@@ -276,84 +247,20 @@ const filteredGroups = 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" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <ListboxFilter v-model="searchTerm" as-child>
      <UInput
-        :placeholder="placeholder"
+        :placeholder="placeholder || t('commandPalette.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
@@ -373,8 +280,8 @@ function onSelect(e: Event, item: T) {
    </ListboxFilter>

    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <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 })">
+      <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 })">
          <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
            {{ get(group, props.labelKey as string) }}
          </ListboxGroupLabel>
@@ -382,10 +289,10 @@ function onSelect(e: Event, item: T) {
          <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', 'children'])"
+            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
            :disabled="item.disabled"
            as-child
-            @select="onSelect($event, item)"
+            @select="item.onSelect"
          >
            <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 })">
@@ -416,20 +323,13 @@ function onSelect(e: Event, item: T) {

                  <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">
-                      <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] })">
+                      <span v-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 v-if="!item.children?.length" as-child>
+                    <ListboxItemIndicator as-child>
                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                    </ListboxItemIndicator>
                  </span>
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form-field'
 import type { ComponentConfig } from '../types/utils'
-import { createReusableTemplate } from '@vueuse/core'

 type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>

@@ -21,8 +20,6 @@ export interface FormFieldProps {
  help?: string
  error?: string | boolean
  hint?: string
-
-  variant?: 'default' | 'inline'
  /**
   * @defaultValue 'md'
   */
@@ -64,7 +61,6 @@ const appConfig = useAppConfig() as FormField['AppConfig']

 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
  size: props.size,
-  variant: props.variant,
  required: props.required
 }))

@@ -91,28 +87,9 @@ provide(formFieldInjectionKey, computed(() => ({
  help: props.help,
  ariaId
 }) as FormFieldInjectedOptions<FormFieldProps>))
-
-const [DefineHintTemplate, ReuseHintTemplate] = createReusableTemplate()
-const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemplate()
 </script>

 <template>
-  <DefineHintTemplate>
-    <span v-if="(hint || !!slots.hint)" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
-      <slot name="hint" :hint="hint">
-        {{ hint }}
-      </slot>
-    </span>
-  </DefineHintTemplate>
-
-  <DefineDescriptionTemplate>
-    <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
-      <slot name="description" :description="description">
-        {{ description }}
-      </slot>
-    </p>
-  </DefineDescriptionTemplate>
-
  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
@@ -121,11 +98,19 @@ const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemp
            {{ label }}
          </slot>
        </Label>
-        <ReuseHintTemplate v-if="variant !== 'inline'" />
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
      </div>
-    </div>

-    <ReuseDescriptionTemplate v-if="variant !== 'inline'" />
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>

    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
      <slot :error="error" />
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
+import type { TagsInputRootProps, AcceptableInputValue } from 'reka-ui'
 import theme from '#build/ui/input-tags'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
@@ -44,10 +44,11 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
  ui?: InputTags['slots']
 }

-export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmits<T> {
-  change: [event: Event]
-  blur: [event: FocusEvent]
-  focus: [event: FocusEvent]
+export type InputTagsEmits<T extends InputTagItem> = {
+  'update:modelValue': [payload: T[]]
+  'change': [payload: Event]
+  'blur': [payload: FocusEvent]
+  'focus': [payload: FocusEvent]
 }

 type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
@@ -71,7 +72,6 @@ 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 })

--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -245,10 +245,6 @@ 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 -->
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -363,10 +363,6 @@ 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 -->
--- a/src/runtime/components/Table.vue
+++ b/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 = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+export interface TableOptions<T extends 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 = TableData> extends TableOptions<T> {
+export interface TableProps<T extends 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 = TableData> extends TableOption
 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 extends TableData = TableData> = {
+export type TableSlots<T> = {
  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 | null>(null)
+const tableRef = ref<HTMLTableElement>()

 const tableApi = useVueTable({
  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -79,8 +79,7 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 </script>

 <script setup lang="ts" generic="T extends TabsItem">
-import type { ComponentPublicInstance } from 'vue'
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -109,12 +108,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
  size: props.size,
  orientation: props.orientation
 }))
-
-const triggersRef = ref<ComponentPublicInstance[]>([])
-
-defineExpose({
-  triggersRef
-})
 </script>

 <template>
@@ -124,14 +117,7 @@ defineExpose({

      <slot name="list-leading" />

-      <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] })"
-      >
+      <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] })">
        <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] })" />
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -41,7 +41,6 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
   */
  orientation?: Timeline['variants']['orientation']
  defaultValue?: string | number
-  reverse?: boolean
  class?: any
  ui?: Timeline['slots']
 }
@@ -76,34 +75,16 @@ 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,
-  reverse: props.reverse
+  color: props.color
 }))

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

-  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
-  }
+  return ((typeof value === 'string')
+    ? props.items.findIndex(item => item.value === value)
+    : 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>
@@ -112,7 +93,7 @@ function getItemState(index: number): 'active' | 'completed' | undefined {
      v-for="(item, index) in items"
      :key="item.value ?? index"
      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      :data-state="getItemState(index)"
+      :data-state="index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'active' : undefined"
    >
      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'اكتب أمرًا أو ابحث...',
      noMatch: 'لا توجد نتائج مطابقة',
      noData: 'لا توجد بيانات',
-      close: 'إغلاق',
-      back: 'رجوع'
+      close: 'إغلاق'
    },
    selectMenu: {
      noMatch: 'لا توجد نتائج مطابقة',
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -24,8 +24,7 @@ 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',
-      back: 'Geri'
+      close: 'Bağla'
    },
    selectMenu: {
      noMatch: 'Uyğun məlumat tapılmadı',
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Въведете команда или потърсете...',
      noMatch: 'Няма съвпадение на данни',
      noData: 'Няма данни',
-      close: 'Затворете',
-      back: 'Назад'
+      close: 'Затворете'
    },
    selectMenu: {
      noMatch: 'Няма съвпадение на данни',
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'কমান্ড টাইপ করুন বা অনুসন্ধান করুন...',
      noMatch: 'কোন মিল পাওয়া যায়নি',
      noData: 'কোন তথ্য নেই',
-      close: 'বন্ধ করুন',
-      back: 'পেছনে'
+      close: 'বন্ধ করুন'
    },
    selectMenu: {
      noMatch: 'কোন মিল পাওয়া যায়নি',
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Escriu una ordre o cerca...',
      noMatch: 'No hi ha dades coincidents',
      noData: 'Sense dades',
-      close: 'Tancar',
-      back: 'Enrere'
+      close: 'Tancar'
    },
    selectMenu: {
      noMatch: 'No hi ha dades coincidents',
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'فەرمانێک بنووسە یان بگەڕێ...',
      noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
      noData: 'هیچ داتایەک نییە',
-      close: 'داخستن',
-      back: 'گەڕانەوە'
+      close: 'داخستن'
    },
    selectMenu: {
      noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Zadejte příkaz nebo hledejte...',
      noMatch: 'Žádná shoda',
      noData: 'Žádná data',
-      close: 'Zavřít',
-      back: 'Zpět'
+      close: 'Zavřít'
    },
    selectMenu: {
      noMatch: 'Žádná shoda',
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv en kommando eller søg...',
      noMatch: 'Ingen matchende data',
      noData: 'Ingen data',
-      close: 'Luk',
-      back: 'Tilbage'
+      close: 'Luk'
    },
    selectMenu: {
      noMatch: 'Ingen matchende data',
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Geben Sie einen Befehl ein oder suchen Sie...',
      noMatch: 'Nichts gefunden',
      noData: 'Keine Daten',
-      close: 'Schließen',
-      back: 'Zurück'
+      close: 'Schließen'
    },
    selectMenu: {
      noMatch: 'Nichts gefunden',
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Πληκτρολογήστε μια εντολή ή αναζητήστε...',
      noMatch: 'Δεν βρέθηκαν δεδομένα',
      noData: 'Δεν υπάρχουν δεδομένα',
-      close: 'Κλείσιμο',
-      back: 'Πίσω'
+      close: 'Κλείσιμο'
    },
    selectMenu: {
      noMatch: 'Δεν βρέθηκαν δεδομένα',
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Type a command or search...',
      noMatch: 'No matching data',
      noData: 'No data',
-      close: 'Close',
-      back: 'Back'
+      close: 'Close'
    },
    selectMenu: {
      noMatch: 'No matching data',
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Escribe un comando o busca...',
      noMatch: 'No hay datos coincidentes',
      noData: 'Sin datos',
-      close: 'Cerrar',
-      back: 'Atrás'
+      close: 'Cerrar'
    },
    selectMenu: {
      noMatch: 'No hay datos coincidentes',
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Sisesta käsk või otsi...',
      noMatch: 'Pole vastavaid andmeid',
      noData: 'Pole andmeid',
-      close: 'Sulge',
-      back: 'Tagasi'
+      close: 'Sulge'
    },
    selectMenu: {
      noMatch: 'Pole vastavaid andmeid',
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'یک دستور وارد کنید یا جستجو کنید...',
      noMatch: 'داده‌ای یافت نشد',
      noData: 'داده‌ای موجود نیست',
-      close: 'بستن',
-      back: 'بازگشت'
+      close: 'بستن'
    },
    selectMenu: {
      noMatch: 'داده‌ای یافت نشد',
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Kirjoita komento tai hae...',
      noMatch: 'Ei vastaavia tietoja',
      noData: 'Ei tietoja',
-      close: 'Sulje',
-      back: 'Takaisin'
+      close: 'Sulje'
    },
    selectMenu: {
      noMatch: 'Ei vastaavia tietoja',
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Tapez une commande ou recherchez...',
      noMatch: 'Aucune donnée correspondante',
      noData: 'Aucune donnée',
-      close: 'Fermer',
-      back: 'Retour'
+      close: 'Fermer'
    },
    selectMenu: {
      noMatch: 'Aucune donnée correspondante',
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'הקלד פקודה...',
      noMatch: 'לא נמצאה התאמה',
      noData: 'אין נתונים זמינים',
-      close: 'סגור',
-      back: 'חזור'
+      close: 'סגור'
    },
    selectMenu: {
      noMatch: 'לא נמצאה התאמה',
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'एक आदेश या खोज टाइप करें...',
      noMatch: 'कोई मेल खाता डेटा नहीं',
      noData: 'कोई डेटा नहीं',
-      close: 'बंद करें',
-      back: 'वापस'
+      close: 'बंद करें'
    },
    selectMenu: {
      noMatch: 'कोई मेल खाता डेटा नहीं',
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Írjon be egy parancsot vagy keressen...',
      noMatch: 'Nincs találat',
      noData: 'Nincs adat',
-      close: 'Bezárás',
-      back: 'Vissza'
+      close: 'Bezárás'
    },
    selectMenu: {
      noMatch: 'Nincs találat',
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Մուտքագրեք հրաման կամ որոնեք...',
      noMatch: 'Համընկնումներ չեն գտնվել',
      noData: 'Տվյալներ չկան',
-      close: 'Փակել',
-      back: 'Հետ'
+      close: 'Փակել'
    },
    selectMenu: {
      noMatch: 'Համընկնումներ չեն գտնվել',
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Ketik perintah atau cari...',
      noMatch: 'Tidak ada data yang cocok',
      noData: 'Tidak ada data',
-      close: 'Tutup',
-      back: 'Kembali'
+      close: 'Tutup'
    },
    selectMenu: {
      noMatch: 'Tidak ada data yang cocok',
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Digita un comando o cerca...',
      noMatch: 'Nessun dato corrispondente',
      noData: 'Nessun dato',
-      close: 'Chiudi',
-      back: 'Indietro'
+      close: 'Chiudi'
    },
    selectMenu: {
      noMatch: 'Nessun dato corrispondente',
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'コマンドを入力するか検索...',
      noMatch: '一致するデータがありません',
      noData: 'データがありません',
-      close: '閉じる',
-      back: '戻る'
+      close: '閉じる'
    },
    selectMenu: {
      noMatch: '一致するデータがありません',
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Команда енгізіңіз немесе іздеңіз...',
      noMatch: 'Сәйкес келетін деректер жоқ',
      noData: 'Деректер жоқ',
-      close: 'Жабу',
-      back: 'Артқа'
+      close: 'Жабу'
    },
    selectMenu: {
      noMatch: 'Сәйкес келетін деректер жоқ',
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'វាយពាក្យបញ្ជា ឬស្វែងរក...',
      noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
      noData: 'មិនមានទិន្នន័យ',
-      close: 'បិទ',
-      back: 'ត្រឡប់'
+      close: 'បិទ'
    },
    selectMenu: {
      noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: '명령을 입력하거나 검색...',
      noMatch: '일치하는 데이터가 없습니다.',
      noData: '데이터가 없습니다.',
-      close: '닫기',
-      back: '뒤로'
+      close: '닫기'
    },
    selectMenu: {
      noMatch: '일치하는 데이터가 없습니다.',
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Буйрук киргизиңиз же издөө…',
      noMatch: 'Эч нерсе табылган жок',
      noData: 'Маалымат жок',
-      close: 'Жабуу',
-      back: 'Артка'
+      close: 'Жабуу'
    },
    selectMenu: {
      noMatch: 'Сүйлөшкөн маалыматтар жок',
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Tippt e Befeel oder sicht...',
      noMatch: 'Keng entspriechend Donnéeën',
      noData: 'Keng Donnéeën',
-      close: 'Zoumaachen',
-      back: 'Zréck'
+      close: 'Zoumaachen'
    },
    selectMenu: {
      noMatch: 'Keng entspriechend Donnéeën',
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Įveskite komandą arba ieškokite...',
      noMatch: 'Nėra atitinkančių duomenų',
      noData: 'Nėra duomenų',
-      close: 'Uždaryti',
-      back: 'Atgal'
+      close: 'Uždaryti'
    },
    selectMenu: {
      noMatch: 'Nėra atitinkančių duomenų',
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Комманд бичих эсвэл хайлт хийх...',
      noMatch: 'Тохирох мэдээлэл олдсонгүй',
      noData: 'Мэдээлэл байхгүй',
-      close: 'Хаах',
-      back: 'Буцах'
+      close: 'Хаах'
    },
    selectMenu: {
      noMatch: 'Тохирох мэдээлэл олдсонгүй',
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Taip arahan atau carian...',
      noMatch: 'Tiada data yang sepadan',
      noData: 'Tiada data',
-      close: 'Tutup',
-      back: 'Kembali'
+      close: 'Tutup'
    },
    selectMenu: {
      noMatch: 'Tiada data yang sepadan',
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv inn en kommando eller søk...',
      noMatch: 'Ingen samsvarende data',
      noData: 'Ingen data',
-      close: 'Lukk',
-      back: 'Tilbake'
+      close: 'Lukk'
    },
    selectMenu: {
      noMatch: 'Ingen samsvarende data',
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Typ een commando of zoek...',
      noMatch: 'Geen overeenkomende gegevens',
      noData: 'Geen gegevens',
-      close: 'Sluiten',
-      back: 'Terug'
+      close: 'Sluiten'
    },
    selectMenu: {
      noMatch: 'Geen overeenkomende gegevens',
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Wpisz polecenie lub wyszukaj...',
      noMatch: 'Brak pasujących danych',
      noData: 'Brak danych',
-      close: 'Zamknij',
-      back: 'Wstecz'
+      close: 'Zamknij'
    },
    selectMenu: {
      noMatch: 'Brak pasujących danych',
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Digite um comando ou pesquise...',
      noMatch: 'Nenhum dado correspondente',
      noData: 'Sem dados',
-      close: 'Fechar',
-      back: 'Voltar'
+      close: 'Fechar'
    },
    selectMenu: {
      noMatch: 'Nenhum dado correspondente',
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Digite um comando ou pesquise...',
      noMatch: 'Nenhum dado correspondente',
      noData: 'Nenhum dado',
-      close: 'Fechar',
-      back: 'Voltar'
+      close: 'Fechar'
    },
    selectMenu: {
      noMatch: 'Nenhum dado correspondente',
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Tastează o comandă sau caută...',
      noMatch: 'Nu există date corespunzătoare',
      noData: 'Nu există date',
-      close: 'Închide',
-      back: 'Înapoi'
+      close: 'Închide'
    },
    selectMenu: {
      noMatch: 'Nu există date corespunzătoare',
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Введите команду или выполните поиск...',
      noMatch: 'Совпадений не найдено',
      noData: 'Нет данных',
-      close: 'Закрыть',
-      back: 'Назад'
+      close: 'Закрыть'
    },
    selectMenu: {
      noMatch: 'Совпадений не найдено',
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Zadajte príkaz alebo vyhľadajte...',
      noMatch: 'Žiadna zhoda',
      noData: 'Žiadne dáta',
-      close: 'Zavrieť',
-      back: 'Späť'
+      close: 'Zatvoriť'
    },
    selectMenu: {
      noMatch: 'Žiadna zhoda',
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Vpiši ukaz ali išči...',
      noMatch: 'Ni ujemanj',
      noData: 'Ni podatkov',
-      close: 'Zapri',
-      back: 'Nazaj'
+      close: 'Zapri'
    },
    selectMenu: {
      noMatch: 'Ni ujemanj',
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv ett kommando eller sök...',
      noMatch: 'Inga matchande data',
      noData: 'Inga data',
-      close: 'Stäng',
-      back: 'Tillbaka'
+      close: 'Stäng'
    },
    selectMenu: {
      noMatch: 'Inga matchande data',
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'พิมพ์คำสั่งหรือค้นหา...',
      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
      noData: 'ไม่มีข้อมูล',
-      close: 'ปิด',
-      back: 'ย้อนกลับ'
+      close: 'ปิด'
    },
    selectMenu: {
      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Фармонро нависед ё ҷустуҷӯ кунед...',
      noMatch: 'Маълумоти мувофиқ ёфт нашуд',
      noData: 'Маълумот нест',
-      close: 'Бастан',
-      back: 'Бозгашт'
+      close: 'Бастан'
    },
    selectMenu: {
      noMatch: 'Маълумоти мувофиқ ёфт нашуд',
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Bir komut yazın veya arama yapın...',
      noMatch: 'Eşleşen veri yok',
      noData: 'Veri yok',
-      close: 'Kapat',
-      back: 'Geri'
+      close: 'Kapat'
    },
    selectMenu: {
      noMatch: 'Eşleşen veri yok',
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'بۇيرۇق كىرگۈزۈڭ ياكى ئىزدەڭ...',
      noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
      noData: 'سانلىق مەلۇمات يوق',
-      close: 'تاقاش',
-      back: 'قايتىش'
+      close: 'تاقاش'
    },
    selectMenu: {
      noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Введіть команду або шукайте...',
      noMatch: 'Збігів не знайдено',
      noData: 'Немає даних',
-      close: 'Закрити',
-      back: 'Назад'
+      close: 'Закрити'
    },
    selectMenu: {
      noMatch: 'Збігів не знайдено',
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -25,8 +25,7 @@ export default defineLocale<Messages>({
      placeholder: 'کمانڈ ٹائپ کریں یا تلاش کریں...',
      noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
      noData: 'کوئی ڈیٹا نہیں',
-      close: 'بند کریں',
-      back: 'واپس'
+      close: 'بند کریں'
    },
    selectMenu: {
      noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: 'Buyruq kiriting yoki qidiring...',
      noMatch: 'Mos keluvchi natija topilmadi',
      noData: 'Maʼlumot yoʻq',
-      close: 'Yopish',
-      back: 'Orqaga'
+      close: 'Yopish'
    },
    selectMenu: {
      noMatch: 'Mos keluvchi natija topilmadi',
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -24,8 +24,7 @@ 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',
-      back: 'Quay lại'
+      close: 'Đóng'
    },
    selectMenu: {
      noMatch: 'Không có kết quả phù hợp',
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: '输入命令或搜索...',
      noMatch: '没有匹配的数据',
      noData: '没有数据',
-      close: '关闭',
-      back: '返回'
+      close: '关闭'
    },
    selectMenu: {
      noMatch: '没有匹配的数据',
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -24,8 +24,7 @@ export default defineLocale<Messages>({
      placeholder: '輸入命令或搜尋...',
      noMatch: '沒有相符的資料',
      noData: '沒有資料',
-      close: '關閉',
-      back: '返回'
+      close: '關閉'
    },
    selectMenu: {
      noMatch: '沒有相符的資料',
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -19,7 +19,6 @@ export type Messages = {
    noMatch: string
    noData: string
    close: string
-    back: string
  }
  selectMenu: {
    noMatch: string
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -5,7 +5,6 @@ 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',
--- a/src/theme/form-field.ts
+++ b/src/theme/form-field.ts
@@ -18,14 +18,6 @@ export default {
      lg: { root: 'text-sm' },
      xl: { root: 'text-base' }
    },
-
-    variant: {
-      inline: {
-        root: 'inline-flex',
-        label: 'mt-1.5 mx-2',
-        container: 'mt-0'
-      }
-    },
    required: {
      true: {
        label: `after:content-['*'] after:ms-0.5 after:text-error`
--- a/src/theme/timeline.ts
+++ b/src/theme/timeline.ts
@@ -29,11 +29,12 @@ 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}`
-
+        indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`,
+        separator: `group-data-[state=completed]:bg-${color}`
      }])),
      neutral: {
-        indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted'
+        indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted',
+        separator: 'group-data-[state=completed]:bg-inverted'
      }
    },

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

-  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'
-    }
-  }, {
+  compoundVariants: [{
    orientation: 'horizontal',
    size: '3xs',
    class: {
--- a/test/components/CommandPalette.spec.ts
+++ b/test/components/CommandPalette.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import CommandPalette, { type CommandPaletteProps, type CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
+import CommandPalette, { type CommandPaletteProps } 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, slots?: Partial<CommandPaletteSlots> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps<typeof groups[number], typeof groups[number]['items'][number]>, slots?: Partial<any> }) => {
    const html = await ComponentRender(nameOrHtml, options, CommandPalette)
    expect(html).toMatchSnapshot()
  })
--- a/test/components/Table.spec.ts
+++ b/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, slots?: Partial<TableSlots> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
    const html = await ComponentRender(nameOrHtml, options, Table)
    expect(html).toMatchSnapshot()
  })
--- a/test/components/Timeline.spec.ts
+++ b/test/components/Timeline.spec.ts
@@ -29,7 +29,7 @@ describe('Timeline', () => {
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.',
    icon: 'i-lucide-check-circle',
-    value: 'testing-and-deployment'
+    value: 'deployment'
  }]

  const props = { items }
@@ -37,17 +37,14 @@ describe('Timeline', () => {
  it.each([
    // Props
    ['with items', { props }],
-    ['with modelValue', { props: { ...props, modelValue: 'design' } }],
-    ['with defaultValue', { props: { ...props, defaultValue: 'design' } }],
+    ['with modelValue', { props: { ...props, modelValue: 'assigned' } }],
+    ['with defaultValue', { props: { ...props, defaultValue: 'assigned' } }],
    ['with neutral color', { props: { ...props, color: 'neutral' } }],
    ...sizes.map((size: string) => [`with size ${size} horizontal`, { props: { ...props, size } }]),
    ...sizes.map((size: string) => [`with size ${size} vertical`, { props: { ...props, size, orientation: 'vertical' } }]),
    ['with as', { props: { ...props, as: 'section' } }],
    ['with class', { props: { ...props, class: 'gap-8' } }],
    ['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
-    ['with reverse', { props: { ...props, reverse: true } }],
-    ['with reverse and modelValue', { props: { ...props, reverse: true, modelValue: 'design' } }],
-    ['with reverse and defaultValue', { props: { ...props, reverse: true, defaultValue: 'design' } }],
    // Slots
    ['with indicator slot', { props, slots: { indicator: () => 'Indicator slot' } }],
    ['with date slot', { props, slots: { date: () => 'Date slot' } }],
--- a/test/components/snapshots/Timeline-vue.spec.ts.snap
+++ b/test/components/snapshots/Timeline-vue.spec.ts.snap
@@ -137,7 +137,7 @@ exports[`Timeline > renders with date slot correctly 1`] = `

 exports[`Timeline > renders with defaultValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
+  <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=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" data-state="active">
+  <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=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" data-state="completed">
+  <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=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" data-state="active">
+  <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=completed]:bg-primary"></div>
    </div>
@@ -405,141 +405,6 @@ exports[`Timeline > renders with neutral color correctly 1`] = `
 </div>"
 `;

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

 exports[`Timeline > renders with defaultValue correctly 1`] = `
 "<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
+  <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=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" data-state="active">
+  <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=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" data-state="completed">
+  <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=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" data-state="active">
+  <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=completed]:bg-primary"></div>
    </div>
@@ -405,141 +405,6 @@ 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">