chore(release): v3.2.0

fix(SelectMenu): dynamic input size
fix(InputMenu/SelectMenu): dynamic empty size
2026-01-15 12:39:35 +01:00 · 2025-06-25 17:00:05 +02:00 · 2025-06-25 16:04:04 +02:00 · 2025-06-25 16:01:04 +02:00 · 2025-06-25 11:46:58 +02:00 · 2025-06-25 11:17:02 +02:00
134 changed files with 4074 additions and 2383 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,51 @@
 # Changelog

+## [3.2.0](https://github.com/nuxt/ui/compare/v3.1.3...v3.2.0) (2025-06-25)
+
+### ⚠ BREAKING CHANGES
+
+* **useOverlay:** correct spelling of `unmount` function (#4051)
+
+### Features
+
+* **Avatar:** add `chip` prop ([#4224](https://github.com/nuxt/ui/issues/4224)) ([03ac395](https://github.com/nuxt/ui/commit/03ac395164c02c964361c68743268b1bc90aae59))
+* **Carousel:** allow customization of active dot color ([#4229](https://github.com/nuxt/ui/issues/4229)) ([2ee1c5a](https://github.com/nuxt/ui/commit/2ee1c5ac2e20ab9ce2f4037a8e8c64e561b0428b))
+* **CommandPalette:** handle `children` in items ([#4226](https://github.com/nuxt/ui/issues/4226)) ([59c26ec](https://github.com/nuxt/ui/commit/59c26ec1230375a24fbaf8a630a696ae854700c7))
+* **extendLocale:** new composable ([0f558fc](https://github.com/nuxt/ui/commit/0f558fc0d014d51549222accfc50286d1770d1aa)), closes [#3729](https://github.com/nuxt/ui/issues/3729)
+* **Form:** expose loading state to default slot ([#4247](https://github.com/nuxt/ui/issues/4247)) ([ea0c459](https://github.com/nuxt/ui/commit/ea0c459306be585bacaaf5b433114d072550c824))
+* **InputTags:** new component ([#4261](https://github.com/nuxt/ui/issues/4261)) ([54bb228](https://github.com/nuxt/ui/commit/54bb2282c58d3bf5a7dde4cdee687c68efd934a0))
+* **locale:** add Luxembourgish language ([#4264](https://github.com/nuxt/ui/issues/4264)) ([43cbb94](https://github.com/nuxt/ui/commit/43cbb94ee25106b414fc8fe979fa65ebaa9ccc76))
+* **Modal/Slideover:** add `actions` slot ([#4358](https://github.com/nuxt/ui/issues/4358)) ([8156971](https://github.com/nuxt/ui/commit/81569713e9da9d5531ecdf4614660b84c686fa81))
+* **Modal/Slideover:** add `close` method in slots ([#4219](https://github.com/nuxt/ui/issues/4219)) ([5835eb5](https://github.com/nuxt/ui/commit/5835eb5f0f835b5f03646dec78f85b2f556a109b))
+* **Select/SelectMenu/Tabs:** expose trigger refs ([7a2bd4e](https://github.com/nuxt/ui/commit/7a2bd4e6179373902ba6f285903ea896fd1d378f)), closes [#4292](https://github.com/nuxt/ui/issues/4292)
+* **Select/SelectMenu:** handle dynamic `autofocus` ([1a4de49](https://github.com/nuxt/ui/commit/1a4de49c1665c9ef65279315be0393d6272447b9)), closes [#4324](https://github.com/nuxt/ui/issues/4324)
+* **Table:** add `body-top` / `body-bottom` slots ([#4354](https://github.com/nuxt/ui/issues/4354)) ([595fc64](https://github.com/nuxt/ui/commit/595fc64515613fe82c3a56fc5518f2e3fcce6e19))
+* **Timeline:** add `reverse` prop ([#4316](https://github.com/nuxt/ui/issues/4316)) ([5170cfd](https://github.com/nuxt/ui/commit/5170cfd7eb44a25c64673cf12979f9ca1049695f))
+* **Timeline:** new component ([#4215](https://github.com/nuxt/ui/issues/4215)) ([8017767](https://github.com/nuxt/ui/commit/80177679f2aa0d7f0e39e639a02d527a06e6172c))
+
+### Bug Fixes
+
+* **Card/Drawer/Modal:** prevent scrollbars overflow ([#4368](https://github.com/nuxt/ui/issues/4368)) ([c3adc38](https://github.com/nuxt/ui/commit/c3adc381c90dad7152e27fc303ee678efc7c4c94))
+* **components:** remove default `md` size on buttons ([#4357](https://github.com/nuxt/ui/issues/4357)) ([be41aed](https://github.com/nuxt/ui/commit/be41aed1f3d3476801e1840dbb8766926bc93c05))
+* **defineShortcuts:** allow `meta_-` shortcut ([#4321](https://github.com/nuxt/ui/issues/4321)) ([4e7c1c9](https://github.com/nuxt/ui/commit/4e7c1c9c305b45dd76d4c238e70a6aeedae78c8b))
+* **Form:** conditionally type form data via `transform` prop ([#4188](https://github.com/nuxt/ui/issues/4188)) ([37abcc6](https://github.com/nuxt/ui/commit/37abcc6a5b0a678be626673af5067956657a50d6))
+* **Form:** expose reactive fields ([#4386](https://github.com/nuxt/ui/issues/4386)) ([1a8feb7](https://github.com/nuxt/ui/commit/1a8feb751e6827c414ef82fe9fb259ba7dcc7e08))
+* **InputMenu/SelectMenu:** dynamic `empty` size ([ba3c6e8](https://github.com/nuxt/ui/commit/ba3c6e8788ed75d86d4406749797da52d7816b84)), closes [#4377](https://github.com/nuxt/ui/issues/4377)
+* **InputTags:** extend emits interface ([8781a07](https://github.com/nuxt/ui/commit/8781a079096def0d3bae5b8d896db0df6ce37e23))
+* **Modal/Slideover:** don't emit `close:prevent` on `closeAutoFocus` ([150b334](https://github.com/nuxt/ui/commit/150b334b1d242c6dc132193e23359c03e6f35666))
+* **NavigationMenu:** nested accordion context at every level ([#4363](https://github.com/nuxt/ui/issues/4363)) ([2fa8db6](https://github.com/nuxt/ui/commit/2fa8db64ddf4c92a19e73774143518d87d001b72))
+* **NavigationMenu:** set content `max-height` in `horizontal` orientation ([62bc7b2](https://github.com/nuxt/ui/commit/62bc7b25a2d205d8dffb47a109196f91ff3e823a)), closes [#4208](https://github.com/nuxt/ui/issues/4208)
+* **Pagination:** match default button `size` ([#4350](https://github.com/nuxt/ui/issues/4350)) ([4dd56c8](https://github.com/nuxt/ui/commit/4dd56c8111e5a224105b82d541b7742b46abb34a))
+* **Select/SelectMenu:** display falsy values ([7df7ee3](https://github.com/nuxt/ui/commit/7df7ee336a925d7ee07f866551dad9350785c9fc))
+* **Select/SelectMenu:** prevent empty string display when multiple ([483e473](https://github.com/nuxt/ui/commit/483e473e3f5681cc97c3766ea47283dc95f76345))
+* **SelectMenu:** dynamic input size ([b0364b9](https://github.com/nuxt/ui/commit/b0364b96b73b9e543781a35962c03b5a983352c4))
+* **Table:** use `tr` as separator ([#4083](https://github.com/nuxt/ui/issues/4083)) ([edca3bc](https://github.com/nuxt/ui/commit/edca3bcb743c7eb63e6abbaa801d3858342a8777))
+* **Toast:** calc height on next tick ([3bf5acb](https://github.com/nuxt/ui/commit/3bf5acb683f0ad09735b2417d265d6fcfd901b11)), closes [#4265](https://github.com/nuxt/ui/issues/4265)
+* **Toaster:** smoother visibility transition for stacked toasts ([#4367](https://github.com/nuxt/ui/issues/4367)) ([abfd0ed](https://github.com/nuxt/ui/commit/abfd0ede036fa2953f9abc841d77ac71bbd3bba9))
+* **useOverlay:** correct spelling of `unmount` function ([#4051](https://github.com/nuxt/ui/issues/4051)) ([546df57](https://github.com/nuxt/ui/commit/546df572fca60325315bed17c9be3367052fb7a9))
+* **useOverlay:** set props to original props when `defaultOpen` is set ([#4308](https://github.com/nuxt/ui/issues/4308)) ([66355ba](https://github.com/nuxt/ui/commit/66355ba301d569b9f44527bafc5f8f09bcda63c0))
+* **useOverlay:** use original props when not provided to `open` ([#4269](https://github.com/nuxt/ui/issues/4269)) ([bf56e15](https://github.com/nuxt/ui/commit/bf56e15a2eed7d51199d5641649a822e91ca41ba))
+
 ## [3.1.3](https://github.com/nuxt/ui/compare/v3.1.2...v3.1.3) (2025-05-26)

 ### ⚠ BREAKING CHANGES
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -31,8 +31,9 @@ const component = ({ name, primitive, pro, prose, content }) => {
      ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}

 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>

@@ -62,7 +63,7 @@ defineSlots<${upperName}Slots>()

 const appConfig = useAppConfig() as ${upperName}['AppConfig']

-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>

 <template>
@@ -75,8 +76,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}

 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>

@@ -105,7 +107,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']

 const rootProps = useForwardPropsEmits(reactivePick(props), emits)

-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>

 <template>
@@ -186,6 +188,7 @@ links:${primitive
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+navigation.badge: Soon
 ---

 ## Usage
--- a/docs/app/components/PageHeaderLinks.vue
+++ b/docs/app/components/PageHeaderLinks.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+const site = useSiteConfig()
+
+const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(mdPath.value)
+      toast.add({
+        title: 'Copied to clipboard',
+        icon: 'i-lucide-check-circle'
+      })
+    }
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: `/raw${route.path}.md`
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+  }
+]
+
+async function copyPage() {
+  copy(await $fetch<string>(`/raw${route.path}.md`))
+}
+</script>
+
+<template>
+  <UButtonGroup>
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :ui="{
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5']
+      }"
+      @click="copyPage"
+    />
+    <UDropdownMenu
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8
+      }"
+      :ui="{
+        content: 'w-48'
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        size="sm"
+        color="neutral"
+        variant="outline"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>
--- 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 }">
-      {{ item.label }}
+      <span class="font-medium text-primary">{{ item.label }}</span>

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

-function copy() {
-  navigator.clipboard.writeText(value.value)
-  copied.value = true
-
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
-}
+const { copy, copied } = useClipboard()
 </script>

 <template>
@@ -25,7 +19,7 @@ function copy() {
          size="sm"
          :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
          aria-label="Copy to clipboard"
-          @click="copy"
+          @click="copy(value)"
        />
      </UTooltip>
    </template>
--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -2,6 +2,7 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -9,6 +10,7 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
+const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -220,7 +222,7 @@ const columns: TableColumn<Payment>[] = [{
    }, {
      label: 'Copy payment ID',
      onSelect() {
-        navigator.clipboard.writeText(row.original.id)
+        copy(row.original.id)

        toast.add({
          title: 'Payment ID copied to clipboard!',
--- a/docs/app/components/content/examples/table/TableRowActionsExample.vue
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -2,12 +2,14 @@
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
+import { useClipboard } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
+const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -119,7 +121,7 @@ function getRowItems(row: Row<Payment>) {
  }, {
    label: 'Copy payment ID',
    onSelect() {
-      navigator.clipboard.writeText(row.original.id)
+      copy(row.original.id)

      toast.add({
        title: 'Payment ID copied to clipboard!',
--- a/docs/app/components/content/examples/table/TableSlotsExample.vue
+++ b/docs/app/components/content/examples/table/TableSlotsExample.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'

 interface User {
  id: number
@@ -10,6 +11,7 @@ interface User {
 }

 const toast = useToast()
+const { copy } = useClipboard()

 const data = ref<User[]>([{
  id: 1,
@@ -71,7 +73,8 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
      label: 'Copy user Id',
      icon: 'i-lucide-copy',
      onSelect: () => {
-        navigator.clipboard.writeText(user.id.toString())
+        copy(user.id.toString())
+
        toast.add({
          title: 'User ID copied to clipboard!',
          color: 'success',
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -2,7 +2,8 @@
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { PageLink } from '@nuxt/ui-pro'
-import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { findPageBreadcrumb } from '@nuxt/content/utils'

 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -37,7 +38,7 @@ const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround

 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

-const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))

 if (!import.meta.prerender) {
  // Redirect to the correct framework version if the page is not the current framework
@@ -141,7 +142,7 @@ const communityLinks = computed(() => [{
        <MDC v-if="page.description" :value="page.description" unwrap="p" :cache-key="`${kebabCase(route.path)}-description`" />
      </template>

-      <template v-if="page.links?.length" #links>
+      <template #links>
        <UButton
          v-for="link in page.links"
          :key="link.label"
@@ -154,6 +155,7 @@ const communityLinks = computed(() => [{
            <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
          </template>
        </UButton>
+        <PageHeaderLinks />
      </template>
    </UPageHeader>

--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -52,9 +52,11 @@ Each group contains an `items` array of objects that define the commands. Each i
 - `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
+- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
 - `onSelect?(e?: Event): void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue,}`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

@@ -110,6 +112,10 @@ props:
 ---
 ::

+::tip{to="#with-children-in-items"}
+Each item can take a `children` array of objects with the following properties to create submenus:
+::
+
 ### Multiple

 Use the `multiple` prop to allow multiple selections.
@@ -246,6 +252,128 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.se
 :::
 ::

+### Selected Icon
+
+Use the `selected-icon` prop to customize the selected item [Icon](/components/icon). Defaults to `i-lucide-check`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - modelValue
+  - multiple
+  - class
+external:
+  - groups
+  - modelValue
+class: '!p-0'
+props:
+  multiple: true
+  autofocus: false
+  modelValue:
+    - label: 'Benjamin Canac'
+      suffix: 'benjamincanac'
+      avatar:
+        src: 'https://github.com/benjamincanac.png'
+  selectedIcon: 'i-lucide-circle-check'
+  groups:
+    - id: 'users'
+      label: 'Users'
+      items:
+        - label: 'Benjamin Canac'
+          suffix: 'benjamincanac'
+          avatar:
+            src: 'https://github.com/benjamincanac.png'
+        - label: 'Sylvain Marroufin'
+          suffix: 'smarroufin'
+          avatar:
+            src: 'https://github.com/smarroufin.png'
+        - label: 'Sébastien Chopin'
+          suffix: 'atinux'
+          avatar:
+            src: 'https://github.com/atinux.png'
+        - label: 'Romain Hamel'
+          suffix: 'romhml'
+          avatar:
+            src: 'https://github.com/romhml.png'
+        - label: 'Haytham A. Salama'
+          suffix: 'Haythamasalama'
+          avatar:
+            src: 'https://github.com/Haythamasalama.png'
+        - label: 'Daniel Roe'
+          suffix: 'danielroe'
+          avatar:
+            src: 'https://github.com/danielroe.png'
+        - label: 'Neil Richter'
+          suffix: 'noook'
+          avatar:
+            src: 'https://github.com/noook.png'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
+:::
+::
+
+### Trailing Icon :badge{label="Soon" class="align-text-top"}
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  trailingIcon: 'i-lucide-arrow-right'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
+:::
+::
+
 ### Loading

 Use the `loading` prop to show a loading icon on the CommandPalette.
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
 :::
 ::

-### Disabled
-
-Use the `disabled` prop to disable the CommandPalette.
-
-::component-code
---
-collapse: true
-hide:
-  - autofocus
-ignore:
-  - groups
-  - class
-external:
-  - groups
-class: '!p-0'
-props:
-  autofocus: false
-  disabled: true
-  groups:
-    - id: 'apps'
-      items:
-        - label: 'Calendar'
-          icon: 'i-lucide-calendar'
-        - label: 'Music'
-          icon: 'i-lucide-music'
-        - label: 'Maps'
-          icon: 'i-lucide-map'
-  class: 'flex-1'
---
-::
-
 ### Close

 Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::

+### Back :badge{label="Soon" class="align-text-top"}
+
+Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
+
+You can pass any property from the [Button](/components/button) component to customize it.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - back.color
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back:
+    color: primary
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+### Back Icon :badge{label="Soon" class="align-text-top"}
+
+Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - class
+  - groups
+  - back
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back: true
+  backIcon: 'i-lucide-house'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  disabled: true
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-lucide-calendar'
+        - label: 'Music'
+          icon: 'i-lucide-music'
+        - label: 'Maps'
+          icon: 'i-lucide-map'
+  class: 'flex-1'
+---
+::
+
 ## Examples

 ### Control selected item(s)
@@ -502,6 +717,28 @@ props:
 This example uses the `@update:model-value` event to reset the search term when an item is selected.
 ::

+### With children in items :badge{label="Soon" class="align-text-top"}
+
+You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'command-palette-items-children-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
+::note
+When navigating into a submenu:
+- The search term is reset
+- A back button appears in the input
+- You can go back to the previous group by pressing the :kbd{value="backspace"} key
+::
+
 ### With fetched items

 You can fetch items from an API and use them in the CommandPalette.
@@ -658,6 +895,7 @@ You will have access to the following slots:

 ::component-example
 ---
+collapse: true
 name: 'command-palette-custom-slot-example'
 class: '!p-0'
 props:
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'

 :component-emits

+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme

 :component-theme
--- a/docs/content/3.components/input-number.md
+++ b/docs/content/3.components/input-number.md
@@ -1,6 +1,6 @@
 ---
 title: InputNumber
-description: Input numerical values with a customizable range.
+description: An input for numerical values with a customizable range.
 category: form
 links:
  - label: NumberField
@@ -287,8 +287,8 @@ name: 'input-number-slots-example'
 When accessing the component via a template ref, you can use the following:

 | Name                       | Type                                            |
-|----------------------------|-------------------------------------------------|
-| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |

 ## Theme

--- a/docs/content/3.components/input-tags.md
+++ b/docs/content/3.components/input-tags.md
@@ -1,6 +1,7 @@
 ---
 title: InputTags
 description: An input element that displays interactive tags.
+category: form
 links:
  - label: InputTags
    icon: i-custom-reka-ui
@@ -276,8 +277,8 @@ name: 'input-tags-form-field-example'
 When accessing the component via a template ref, you can use the following:

 | Name                       | Type                                            |
-|----------------------------|-------------------------------------------------|
-| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |

 ## Theme

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

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

 :component-emits

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

 | Name | Type |
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'

 :component-emits

+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme

 :component-theme
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -709,6 +709,14 @@ collapse: true

 :component-emits

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

 :component-theme
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -242,6 +242,14 @@ You will have access to the following slots:

 :component-emits

+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
+
 ## Theme

 :component-theme
--- a/docs/content/3.components/timeline.md
+++ b/docs/content/3.components/timeline.md
@@ -173,6 +173,46 @@ class: 'overflow-x-auto'
 ---
 ::

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

 ### Control active item
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,39 +11,40 @@
  "dependencies": {
    "@ai-sdk/vue": "^1.2.12",
    "@iconify-json/logos": "^1.2.4",
-    "@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",
+    "@iconify-json/lucide": "^1.2.51",
+    "@iconify-json/simple-icons": "^1.2.39",
+    "@iconify-json/vscode-icons": "^1.2.23",
+    "@nuxt/content": "^3.6.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "workspace:*",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@55e248c",
    "@nuxthub/core": "^0.9.0",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^22.0.0",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.3.0",
-    "@vueuse/nuxt": "^13.3.0",
+    "@vueuse/integrations": "^13.4.0",
+    "@vueuse/nuxt": "^13.4.0",
    "ai": "^4.3.16",
+    "better-sqlite3": "^12.0.0",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
    "maska": "^3.1.1",
-    "motion-v": "^1.2.1",
+    "motion-v": "^1.3.0",
    "nuxt": "^3.17.5",
    "nuxt-component-meta": "^0.11.0",
    "nuxt-llms": "^0.1.3",
-    "nuxt-og-image": "^5.1.6",
-    "prettier": "^3.5.3",
+    "nuxt-og-image": "^5.1.7",
+    "prettier": "^3.6.0",
    "shiki-transformer-color-highlight": "^1.0.0",
    "sortablejs": "^1.15.6",
    "superstruct": "^2.0.2",
    "ufo": "^1.6.1",
    "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.6.0",
+    "workers-ai-provider": "^0.7.0",
    "yup": "^1.6.1",
-    "zod": "^3.25.57"
+    "zod": "^3.25.67"
  },
  "devDependencies": {
-    "wrangler": "^4.19.1"
+    "wrangler": "^4.20.5"
  }
 }
--- a/docs/public/components/dark/changelog-version.png
+++ b/docs/public/components/dark/changelog-version.png
--- a/docs/public/components/dark/changelog-versions.png
+++ b/docs/public/components/dark/changelog-versions.png
--- a/docs/public/components/dark/input-tags.png
+++ b/docs/public/components/dark/input-tags.png
--- a/docs/public/components/light/changelog-version.png
+++ b/docs/public/components/light/changelog-version.png
--- a/docs/public/components/light/changelog-versions.png
+++ b/docs/public/components/light/changelog-versions.png
--- a/docs/public/components/light/input-tags.png
+++ b/docs/public/components/light/input-tags.png
--- a/docs/server/plugins/llms.ts
+++ b/docs/server/plugins/llms.ts
@@ -1,412 +1,8 @@
-import json5 from 'json5'
-import { camelCase, kebabCase } from 'scule'
-import { visit } from '@nuxt/content/runtime'
 import type { H3Event } from 'h3'
 import type { PageCollectionItemBase } from '@nuxt/content'
-import * as theme from '../../.nuxt/ui'
-import * as themePro from '../../.nuxt/ui-pro'
-import meta from '#nuxt-component-meta'
-// @ts-expect-error - no types available
-import components from '#component-example/nitro'
-
-type ComponentAttributes = {
-  ':pro'?: string
-  ':prose'?: string
-  ':props'?: string
-  ':external'?: string
-  ':externalTypes'?: string
-  ':ignore'?: string
-  ':hide'?: string
-  ':slots'?: string
-}
-
-type ThemeConfig = {
-  pro: boolean
-  prose: boolean
-  componentName: string
-}
-
-type CodeConfig = {
-  pro: boolean
-  props: Record<string, unknown>
-  external: string[]
-  externalTypes: string[]
-  ignore: string[]
-  hide: string[]
-  componentName: string
-  slots?: Record<string, string>
-}
-
-type Document = {
-  title: string
-  body: any
-}
-
-const parseBoolean = (value?: string): boolean => value === 'true'
-
-function getComponentMeta(componentName: string) {
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  const strategies = [
-    `U${pascalCaseName}`,
-    `Prose${pascalCaseName}`,
-    pascalCaseName
-  ]
-
-  let componentMeta: any
-  let finalMetaComponentName: string = pascalCaseName
-
-  for (const nameToTry of strategies) {
-    finalMetaComponentName = nameToTry
-    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
-    if (metaAttempt) {
-      componentMeta = metaAttempt
-      break
-    }
-  }
-
-  if (!componentMeta) {
-    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
-  }
-
-  return {
-    pascalCaseName,
-    metaComponentName: finalMetaComponentName,
-    componentMeta
-  }
-}
-
-function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
-  node[0] = 'pre'
-  node[1] = { language, code }
-  if (filename) node[1].filename = filename
-}
-
-function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
-  visit(doc.body, (node) => {
-    if (Array.isArray(node) && node[0] === type) {
-      handler(node)
-    }
-    return true
-  }, node => node)
-}
-
-function generateTSInterface(
-  name: string,
-  items: any[],
-  itemHandler: (item: any) => string,
-  description: string
-) {
-  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
-  for (const item of items) {
-    code += itemHandler(item)
-  }
-  code += `}`
-  return code
-}
-
-function propItemHandler(propValue: any): string {
-  if (!propValue?.name) return ''
-  const propName = propValue.name
-  const propType = propValue.type
-    ? Array.isArray(propValue.type)
-      ? propValue.type.map((t: any) => t.name || t).join(' | ')
-      : propValue.type.name || propValue.type
-    : 'any'
-  const isRequired = propValue.required || false
-  const hasDescription = propValue.description && propValue.description.trim().length > 0
-  const hasDefault = propValue.default !== undefined
-  let result = ''
-  if (hasDescription || hasDefault) {
-    result += `  /**\n`
-    if (hasDescription) {
-      const descLines = propValue.description.split(/\r?\n/)
-      descLines.forEach((line: string) => {
-        result += `   * ${line}\n`
-      })
-    }
-    if (hasDefault) {
-      let defaultValue = propValue.default
-      if (typeof defaultValue === 'string') {
-        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
-      } else {
-        defaultValue = JSON.stringify(defaultValue)
-      }
-      result += `   * @default ${defaultValue}\n`
-    }
-    result += `   */\n`
-  }
-  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
-  return result
-}
-
-function slotItemHandler(slotValue: any): string {
-  if (!slotValue?.name) return ''
-  const slotName = slotValue.name
-  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
-  let result = ''
-  if (hasDescription) {
-    result += `  /**\n`
-    const descLines = slotValue.description.split(/\r?\n/)
-    descLines.forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
-    let bindingsType = '{\n'
-    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
-      const bindingType = bindingValue.type || 'any'
-      bindingsType += `    ${bindingName}: ${bindingType};\n`
-    })
-    bindingsType += '  }'
-    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
-  } else {
-    result += `  ${slotName}(): any;\n`
-  }
-  return result
-}
-
-function emitItemHandler(event: any): string {
-  if (!event?.name) return ''
-  let payloadType = 'void'
-  if (event.type) {
-    payloadType = Array.isArray(event.type)
-      ? event.type.map((t: any) => t.name || t).join(' | ')
-      : event.type.name || event.type
-  }
-  let result = ''
-  if (event.description && event.description.trim().length > 0) {
-    result += `  /**\n`
-    event.description.split(/\r?\n/).forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
-  return result
-}
-
-const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
-  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
-  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
-
-  return {
-    [pro ? 'uiPro' : 'ui']: prose
-      ? { prose: { [componentName]: componentTheme } }
-      : { [componentName]: componentTheme }
-  }
-}
-
-const generateComponentCode = ({
-  pro,
-  props,
-  external,
-  externalTypes,
-  hide,
-  componentName,
-  slots
-}: CodeConfig) => {
-  const filteredProps = Object.fromEntries(
-    Object.entries(props).filter(([key]) => !hide.includes(key))
-  )
-
-  const imports = pro
-    ? ''
-    : external
-        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
-        .map((ext, index) => {
-          const type = externalTypes[index]?.replace(/[[\]]/g, '')
-          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
-        })
-        .join('\n')
-
-  let itemsCode = ''
-  if (props.items) {
-    itemsCode = pro
-      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
-      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
-    delete filteredProps.items
-  }
-
-  let calendarValueCode = ''
-  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
-    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
-  }
-
-  const propsString = Object.entries(filteredProps)
-    .map(([key, value]) => {
-      const formattedKey = kebabCase(key)
-      if (typeof value === 'string') {
-        return `${formattedKey}="${value}"`
-      } else if (typeof value === 'number') {
-        return `:${formattedKey}="${value}"`
-      } else if (typeof value === 'boolean') {
-        return value ? formattedKey : `:${formattedKey}="false"`
-      }
-      return ''
-    })
-    .filter(Boolean)
-    .join(' ')
-
-  const itemsProp = props.items ? ':items="items"' : ''
-  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
-  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
-  const formattedProps = allProps ? ` ${allProps}` : ''
-
-  let scriptSetup = ''
-  if (imports || itemsCode || calendarValueCode) {
-    scriptSetup = '<script setup lang="ts">'
-    if (imports) scriptSetup += `\n${imports}`
-    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
-    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
-    if (itemsCode) scriptSetup += `\n${itemsCode}`
-    scriptSetup += '\n</script>\n\n'
-  }
-
-  let componentContent = ''
-  let slotContent = ''
-
-  if (slots && Object.keys(slots).length > 0) {
-    const defaultSlot = slots.default?.trim()
-    if (defaultSlot) {
-      const indentedContent = defaultSlot
-        .split('\n')
-        .map(line => line.trim() ? `    ${line}` : line)
-        .join('\n')
-      componentContent = `\n${indentedContent}\n  `
-    }
-
-    Object.entries(slots).forEach(([slotName, content]) => {
-      if (slotName !== 'default' && content?.trim()) {
-        const indentedSlotContent = content.trim()
-          .split('\n')
-          .map(line => line.trim() ? `      ${line}` : line)
-          .join('\n')
-        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
-      }
-    })
-  }
-
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  let componentTemplate = ''
-  if (componentContent || slotContent) {
-    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
-  } else {
-    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
-  }
-
-  return `${scriptSetup}<template>
-  ${componentTemplate}
-</template>`
-}

 export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:llms:generate:document', async (_: H3Event, doc: PageCollectionItemBase) => {
-    const componentName = camelCase(doc.title)
-
-    visitAndReplace(doc, 'component-theme', (node) => {
-      const attributes = node[1] as Record<string, string>
-      const mdcSpecificName = attributes?.slug
-
-      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-      const pro = parseBoolean(attributes[':pro'])
-      const prose = parseBoolean(attributes[':prose'])
-      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
-
-      replaceNodeWithPre(
-        node,
-        'ts',
-        `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
-        'app.config.ts'
-      )
-    })
-
-    visitAndReplace(doc, 'component-code', (node) => {
-      const attributes = node[1] as ComponentAttributes
-      const pro = parseBoolean(attributes[':pro'])
-      const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
-      const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
-      const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
-      const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
-      const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
-      const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
-
-      const code = generateComponentCode({
-        pro,
-        props,
-        external,
-        externalTypes,
-        ignore,
-        hide,
-        componentName,
-        slots
-      })
-
-      replaceNodeWithPre(node, 'vue', code)
-    })
-
-    visitAndReplace(doc, 'component-props', (node) => {
-      const attributes = node[1] as Record<string, string>
-      const mdcSpecificName = attributes?.name
-      const isProse = parseBoolean(attributes[':prose'])
-
-      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-      const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
-
-      if (!componentMeta?.props) return
-
-      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
-
-      const interfaceCode = generateTSInterface(
-        interfaceName,
-        Object.values(componentMeta.props),
-        propItemHandler,
-        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
-      )
-      replaceNodeWithPre(node, 'ts', interfaceCode)
-    })
-
-    visitAndReplace(doc, 'component-slots', (node) => {
-      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-      if (!componentMeta?.slots) return
-
-      const interfaceCode = generateTSInterface(
-        `${pascalCaseName}Slots`,
-        Object.values(componentMeta.slots),
-        slotItemHandler,
-        `Slots for the ${pascalCaseName} component`
-      )
-      replaceNodeWithPre(node, 'ts', interfaceCode)
-    })
-
-    visitAndReplace(doc, 'component-emits', (node) => {
-      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-      const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
-
-      if (hasEvents) {
-        const interfaceCode = generateTSInterface(
-          `${pascalCaseName}Emits`,
-          Object.values(componentMeta.events),
-          emitItemHandler,
-          `Emitted events for the ${pascalCaseName} component`
-        )
-        replaceNodeWithPre(node, 'ts', interfaceCode)
-      } else {
-        node[0] = 'p'
-        node[1] = {}
-        node[2] = 'No events available for this component.'
-      }
-    })
-
-    visitAndReplace(doc, 'component-example', (node) => {
-      const camelName = camelCase(node[1]['name'])
-      const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
-      const code = components[name].code
-      replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
-    })
+    transformMDC(doc as any)
  })
 })
--- a/docs/server/routes/raw/[...slug].md.get.ts
+++ b/docs/server/routes/raw/[...slug].md.get.ts
@@ -0,0 +1,30 @@
+import { stringify } from 'minimark/stringify'
+import { withLeadingSlash } from 'ufo'
+
+export default eventHandler(async (event) => {
+  const slug = getRouterParams(event)['slug.md']
+  if (!slug?.endsWith('.md')) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  const path = withLeadingSlash(slug.replace('.md', ''))
+  // @ts-expect-error TODO: fix this
+  const page = await queryCollection(event, 'content').path(path).first()
+  if (!page) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  // Add title and description to the top of the page if missing
+  if (page.body.value[0]?.[0] !== 'h1') {
+    page.body.value.unshift(['blockquote', {}, page.description])
+    page.body.value.unshift(['h1', {}, page.title])
+  }
+
+  const transformedPage = transformMDC({
+    title: page.title,
+    body: page.body
+  })
+
+  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+  return stringify({ ...transformedPage.body, type: 'minimark' }, { format: 'markdown/html' })
+})
--- a/docs/server/utils/transformMDC.ts
+++ b/docs/server/utils/transformMDC.ts
@@ -0,0 +1,410 @@
+import json5 from 'json5'
+import { camelCase, kebabCase } from 'scule'
+import { visit } from '@nuxt/content/runtime'
+import * as theme from '../../.nuxt/ui'
+import * as themePro from '../../.nuxt/ui-pro'
+import meta from '#nuxt-component-meta'
+// @ts-expect-error - no types available
+import components from '#component-example/nitro'
+
+type ComponentAttributes = {
+  ':pro'?: string
+  ':prose'?: string
+  ':props'?: string
+  ':external'?: string
+  ':externalTypes'?: string
+  ':ignore'?: string
+  ':hide'?: string
+  ':slots'?: string
+}
+
+type ThemeConfig = {
+  pro: boolean
+  prose: boolean
+  componentName: string
+}
+
+type CodeConfig = {
+  pro: boolean
+  props: Record<string, unknown>
+  external: string[]
+  externalTypes: string[]
+  ignore: string[]
+  hide: string[]
+  componentName: string
+  slots?: Record<string, string>
+}
+
+type Document = {
+  title: string
+  body: any
+}
+
+const parseBoolean = (value?: string): boolean => value === 'true'
+
+function getComponentMeta(componentName: string) {
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  const strategies = [
+    `U${pascalCaseName}`,
+    `Prose${pascalCaseName}`,
+    pascalCaseName
+  ]
+
+  let componentMeta: any
+  let finalMetaComponentName: string = pascalCaseName
+
+  for (const nameToTry of strategies) {
+    finalMetaComponentName = nameToTry
+    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
+    if (metaAttempt) {
+      componentMeta = metaAttempt
+      break
+    }
+  }
+
+  if (!componentMeta) {
+    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
+  }
+
+  return {
+    pascalCaseName,
+    metaComponentName: finalMetaComponentName,
+    componentMeta
+  }
+}
+
+function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
+  node[0] = 'pre'
+  node[1] = { language, code }
+  if (filename) node[1].filename = filename
+}
+
+function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
+  visit(doc.body, (node) => {
+    if (Array.isArray(node) && node[0] === type) {
+      handler(node)
+    }
+    return true
+  }, node => node)
+}
+
+function generateTSInterface(
+  name: string,
+  items: any[],
+  itemHandler: (item: any) => string,
+  description: string
+) {
+  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
+  for (const item of items) {
+    code += itemHandler(item)
+  }
+  code += `}`
+  return code
+}
+
+function propItemHandler(propValue: any): string {
+  if (!propValue?.name) return ''
+  const propName = propValue.name
+  const propType = propValue.type
+    ? Array.isArray(propValue.type)
+      ? propValue.type.map((t: any) => t.name || t).join(' | ')
+      : propValue.type.name || propValue.type
+    : 'any'
+  const isRequired = propValue.required || false
+  const hasDescription = propValue.description && propValue.description.trim().length > 0
+  const hasDefault = propValue.default !== undefined
+  let result = ''
+  if (hasDescription || hasDefault) {
+    result += `  /**\n`
+    if (hasDescription) {
+      const descLines = propValue.description.split(/\r?\n/)
+      descLines.forEach((line: string) => {
+        result += `   * ${line}\n`
+      })
+    }
+    if (hasDefault) {
+      let defaultValue = propValue.default
+      if (typeof defaultValue === 'string') {
+        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
+      } else {
+        defaultValue = JSON.stringify(defaultValue)
+      }
+      result += `   * @default ${defaultValue}\n`
+    }
+    result += `   */\n`
+  }
+  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
+  return result
+}
+
+function slotItemHandler(slotValue: any): string {
+  if (!slotValue?.name) return ''
+  const slotName = slotValue.name
+  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
+  let result = ''
+  if (hasDescription) {
+    result += `  /**\n`
+    const descLines = slotValue.description.split(/\r?\n/)
+    descLines.forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
+    let bindingsType = '{\n'
+    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
+      const bindingType = bindingValue.type || 'any'
+      bindingsType += `    ${bindingName}: ${bindingType};\n`
+    })
+    bindingsType += '  }'
+    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
+  } else {
+    result += `  ${slotName}(): any;\n`
+  }
+  return result
+}
+
+function emitItemHandler(event: any): string {
+  if (!event?.name) return ''
+  let payloadType = 'void'
+  if (event.type) {
+    payloadType = Array.isArray(event.type)
+      ? event.type.map((t: any) => t.name || t).join(' | ')
+      : event.type.name || event.type
+  }
+  let result = ''
+  if (event.description && event.description.trim().length > 0) {
+    result += `  /**\n`
+    event.description.split(/\r?\n/).forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
+  return result
+}
+
+const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
+  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
+  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
+
+  return {
+    [pro ? 'uiPro' : 'ui']: prose
+      ? { prose: { [componentName]: componentTheme } }
+      : { [componentName]: componentTheme }
+  }
+}
+
+const generateComponentCode = ({
+  pro,
+  props,
+  external,
+  externalTypes,
+  hide,
+  componentName,
+  slots
+}: CodeConfig) => {
+  const filteredProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !hide.includes(key))
+  )
+
+  const imports = pro
+    ? ''
+    : external
+        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
+        .map((ext, index) => {
+          const type = externalTypes[index]?.replace(/[[\]]/g, '')
+          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
+        })
+        .join('\n')
+
+  let itemsCode = ''
+  if (props.items) {
+    itemsCode = pro
+      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
+      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
+    delete filteredProps.items
+  }
+
+  let calendarValueCode = ''
+  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
+    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
+  }
+
+  const propsString = Object.entries(filteredProps)
+    .map(([key, value]) => {
+      const formattedKey = kebabCase(key)
+      if (typeof value === 'string') {
+        return `${formattedKey}="${value}"`
+      } else if (typeof value === 'number') {
+        return `:${formattedKey}="${value}"`
+      } else if (typeof value === 'boolean') {
+        return value ? formattedKey : `:${formattedKey}="false"`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join(' ')
+
+  const itemsProp = props.items ? ':items="items"' : ''
+  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
+  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
+  const formattedProps = allProps ? ` ${allProps}` : ''
+
+  let scriptSetup = ''
+  if (imports || itemsCode || calendarValueCode) {
+    scriptSetup = '<script setup lang="ts">'
+    if (imports) scriptSetup += `\n${imports}`
+    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
+    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
+    if (itemsCode) scriptSetup += `\n${itemsCode}`
+    scriptSetup += '\n</script>\n\n'
+  }
+
+  let componentContent = ''
+  let slotContent = ''
+
+  if (slots && Object.keys(slots).length > 0) {
+    const defaultSlot = slots.default?.trim()
+    if (defaultSlot) {
+      const indentedContent = defaultSlot
+        .split('\n')
+        .map(line => line.trim() ? `    ${line}` : line)
+        .join('\n')
+      componentContent = `\n${indentedContent}\n  `
+    }
+
+    Object.entries(slots).forEach(([slotName, content]) => {
+      if (slotName !== 'default' && content?.trim()) {
+        const indentedSlotContent = content.trim()
+          .split('\n')
+          .map(line => line.trim() ? `      ${line}` : line)
+          .join('\n')
+        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
+      }
+    })
+  }
+
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  let componentTemplate = ''
+  if (componentContent || slotContent) {
+    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
+  } else {
+    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
+  }
+
+  return `${scriptSetup}<template>
+  ${componentTemplate}
+</template>`
+}
+
+export function transformMDC(doc: Document): Document {
+  const componentName = camelCase(doc.title)
+
+  visitAndReplace(doc, 'component-theme', (node) => {
+    const attributes = node[1] as Record<string, string>
+    const mdcSpecificName = attributes?.slug
+
+    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+    const pro = parseBoolean(attributes[':pro'])
+    const prose = parseBoolean(attributes[':prose'])
+    const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
+
+    replaceNodeWithPre(
+      node,
+      'ts',
+      `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
+      'app.config.ts'
+    )
+  })
+
+  visitAndReplace(doc, 'component-code', (node) => {
+    const attributes = node[1] as ComponentAttributes
+    const pro = parseBoolean(attributes[':pro'])
+    const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
+    const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
+    const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
+    const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
+    const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
+    const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
+
+    const code = generateComponentCode({
+      pro,
+      props,
+      external,
+      externalTypes,
+      ignore,
+      hide,
+      componentName,
+      slots
+    })
+
+    replaceNodeWithPre(node, 'vue', code)
+  })
+
+  visitAndReplace(doc, 'component-props', (node) => {
+    const attributes = node[1] as Record<string, string>
+    const mdcSpecificName = attributes?.name
+    const isProse = parseBoolean(attributes[':prose'])
+
+    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+    const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
+
+    if (!componentMeta?.props) return
+
+    const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
+
+    const interfaceCode = generateTSInterface(
+      interfaceName,
+      Object.values(componentMeta.props),
+      propItemHandler,
+      `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
+    )
+    replaceNodeWithPre(node, 'ts', interfaceCode)
+  })
+
+  visitAndReplace(doc, 'component-slots', (node) => {
+    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+    if (!componentMeta?.slots) return
+
+    const interfaceCode = generateTSInterface(
+      `${pascalCaseName}Slots`,
+      Object.values(componentMeta.slots),
+      slotItemHandler,
+      `Slots for the ${pascalCaseName} component`
+    )
+    replaceNodeWithPre(node, 'ts', interfaceCode)
+  })
+
+  visitAndReplace(doc, 'component-emits', (node) => {
+    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+    const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
+
+    if (hasEvents) {
+      const interfaceCode = generateTSInterface(
+        `${pascalCaseName}Emits`,
+        Object.values(componentMeta.events),
+        emitItemHandler,
+        `Emitted events for the ${pascalCaseName} component`
+      )
+      replaceNodeWithPre(node, 'ts', interfaceCode)
+    } else {
+      node[0] = 'p'
+      node[1] = {}
+      node[2] = 'No events available for this component.'
+    }
+  })
+
+  visitAndReplace(doc, 'component-example', (node) => {
+    const camelName = camelCase(node[1]['name'])
+    const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
+    const code = components[name].code
+    replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
+  })
+
+  return doc
+}
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.1.3",
-  "packageManager": "pnpm@10.12.1",
+  "version": "3.2.0",
+  "packageManager": "pnpm@10.12.2",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -115,7 +115,7 @@
    "@internationalized/date": "^3.8.2",
    "@internationalized/number": "^3.6.3",
    "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.13.0",
+    "@nuxt/icon": "^1.14.0",
    "@nuxt/kit": "^3.17.5",
    "@nuxt/schema": "^3.17.5",
    "@nuxtjs/color-mode": "^3.5.2",
@@ -124,8 +124,8 @@
    "@tailwindcss/vite": "^4.1.10",
    "@tanstack/vue-table": "^8.21.3",
    "@unhead/vue": "^2.0.10",
-    "@vueuse/core": "^13.3.0",
-    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/core": "^13.4.0",
+    "@vueuse/integrations": "^13.4.0",
    "colortranslator": "^5.0.0",
    "consola": "^3.4.2",
    "defu": "^6.1.4",
@@ -161,11 +161,11 @@
    "@release-it/conventional-changelog": "^10.0.1",
    "@vue/test-utils": "^2.4.6",
    "embla-carousel": "^8.6.0",
-    "eslint": "^9.28.0",
-    "happy-dom": "^17.6.3",
+    "eslint": "^9.29.0",
+    "happy-dom": "^18.0.1",
    "nuxt": "^3.17.5",
    "release-it": "^19.0.3",
-    "vitest": "^3.2.3",
+    "vitest": "^3.2.4",
    "vitest-environment-nuxt": "^1.0.1",
    "vue-tsc": "^2.2.10"
  },
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -11,9 +11,9 @@
  },
  "dependencies": {
    "@nuxt/ui": "workspace:*",
-    "vue": "^3.5.16",
+    "vue": "^3.5.17",
    "vue-router": "^4.5.1",
-    "zod": "^3.25.57"
+    "zod": "^3.25.67"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.4",
--- a/playground/app/pages/components/command-palette.vue
+++ b/playground/app/pages/components/command-palette.vue
@@ -74,6 +74,51 @@ const groups = computed(() => [{
      toast.add({ title: 'Label added!' })
    },
    kbds: ['meta', 'L']
+  }, {
+    label: 'More actions',
+    placeholder: 'Search actions...',
+    children: [{
+      label: 'Create new file',
+      suffix: 'Create a new file in the current directory or workspace.',
+      icon: 'i-lucide-file-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New file added!' })
+      }
+    }, {
+      label: 'Create new folder',
+      suffix: 'Create a new folder in the current directory or workspace.',
+      icon: 'i-lucide-folder-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New folder added!' })
+      }
+    }, {
+      label: 'Share',
+      placeholder: 'Search share options...',
+      icon: 'i-lucide-share',
+      children: [{
+        label: 'Share with everyone',
+        suffix: 'Share with everyone in the current directory or workspace.',
+        icon: 'i-lucide-share',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with everyone!' })
+        }
+      }, {
+        label: 'Share with team',
+        suffix: 'Share with the team in the current directory or workspace.',
+        icon: 'i-lucide-users',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with team!' })
+        }
+      }]
+    }]
  }]
 }])

--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -3,6 +3,7 @@ import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn, TableRow } from '@nuxt/ui'
 import { getPaginationRowModel } from '@tanstack/vue-table'
+import { useClipboard } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -10,6 +11,7 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
+const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -231,7 +233,7 @@ const columns: TableColumn<Payment>[] = [{
    }, {
      label: 'Copy payment ID',
      onSelect() {
-        navigator.clipboard.writeText(row.original.id)
+        copy(row.original.id)

        toast.add({
          title: 'Payment ID copied to clipboard!',
--- a/playground/app/pages/components/timeline.vue
+++ b/playground/app/pages/components/timeline.vue
@@ -9,6 +9,7 @@ const orientations = Object.keys(theme.variants.orientation)
 const orientation = ref('vertical' as const)
 const color = ref('primary' as const)
 const size = ref('md' as const)
+const reverse = ref(false)

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

    <UTimeline
@@ -54,6 +56,7 @@ const value = ref('kickoff')
      :orientation="orientation"
      :size="size"
      :items="items"
+      :reverse="reverse"
      class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
    />
  </div>
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,13 +9,13 @@
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
-    "@iconify-json/lucide": "^1.2.47",
-    "@iconify-json/simple-icons": "^1.2.38",
+    "@iconify-json/lucide": "^1.2.51",
+    "@iconify-json/simple-icons": "^1.2.39",
    "@internationalized/date": "^3.8.2",
    "@nuxt/ui": "workspace:*",
    "@nuxthub/core": "^0.9.0",
    "nuxt": "^3.17.5",
-    "zod": "^3.25.57"
+    "zod": "^3.25.67"
  },
  "devDependencies": {
    "typescript": "^5.8.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -133,7 +133,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
        <UButton
          v-if="close"
          :icon="closeIcon || appConfig.ui.icons.close"
-          size="md"
          color="neutral"
          variant="link"
          :aria-label="t('alert.close')"
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -310,7 +310,6 @@ defineExpose({
        <UButton
          :disabled="!canScrollPrev"
          :icon="prevIcon"
-          size="md"
          color="neutral"
          variant="outline"
          :aria-label="t('carousel.prev')"
@@ -321,7 +320,6 @@ defineExpose({
        <UButton
          :disabled="!canScrollNext"
          :icon="nextIcon"
-          size="md"
          color="neutral"
          variant="outline"
          :aria-label="t('carousel.next')"
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -26,13 +26,18 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  loading?: boolean
  disabled?: boolean
  slot?: string
+  /**
+   * The placeholder to display when the item has children.
+   */
+  placeholder?: string
+  children?: CommandPaletteItem[]
  onSelect?(e?: Event): void
  class?: any
  ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
  [key: string]: any
 }

-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
  id: string
  label?: string
  slot?: string
@@ -52,7 +57,7 @@ export interface CommandPaletteGroup<T> {
  highlightedIcon?: string
 }

-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
  /**
   * The element or component this component should render as.
   * @defaultValue 'div'
@@ -70,6 +75,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   * @IconifyIcon
   */
  selectedIcon?: string
+  /**
+   * The icon displayed when an item has children.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
+   */
+  trailingIcon?: string
  /**
   * The placeholder text for the input.
   * @defaultValue t('commandPalette.placeholder')
@@ -93,6 +104,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   * @IconifyIcon
   */
  closeIcon?: string
+  /**
+   * Display a button to navigate back in history.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  back?: boolean | ButtonProps
+  /**
+   * The icon displayed in the back button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
+   */
+  backIcon?: string
  groups?: G[]
  /**
   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -116,14 +139,15 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
  ui?: CommandPalette['slots']
 }

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

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

-export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
  'empty'(props: { searchTerm?: string }): any
+  'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
  'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
@@ -134,7 +158,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
 </script>

 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -157,7 +181,8 @@ import UKbd from './Kbd.vue'
 const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
  modelValue: '',
  labelKey: 'label',
-  autofocus: true
+  autofocus: true,
+  back: true
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<G, T>>()
@@ -167,7 +192,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const { t } = useLocale()
 const appConfig = useAppConfig() as CommandPalette['AppConfig']

-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'selectionBehavior'), emits)
 const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))

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

-const items = computed(() => props.groups?.filter((group) => {
+const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
+
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
+
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
+
+const items = computed(() => groups.value?.filter((group) => {
  if (!group.id) {
    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
    return false
  }
-
  if (group.ignoreFilter) {
    return false
  }
-
  return true
-}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
+})?.flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])

 const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)

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

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

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

-  const nonFuseGroups = props.groups
+  const nonFuseGroups = groups.value
    ?.map((group, index) => ({ ...group, index }))
    ?.filter(group => group.ignoreFilter && group.items?.length)
    ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
@@ -247,26 +276,88 @@ const groups = computed(() => {
    return acc
  }, [...fuseGroups])
 })
+
+const listboxRootRef = useTemplateRef('listboxRootRef')
+
+function navigate(item: T) {
+  if (!item.children?.length) {
+    return
+  }
+
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  } as any)
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function navigateBack() {
+  if (!history.value.length) {
+    return
+  }
+
+  history.value.pop()
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack()
+  }
+}
+
+function onSelect(e: Event, item: T) {
+  if (item.children?.length) {
+    e.preventDefault()
+
+    navigate(item)
+  } else {
+    item.onSelect?.(e)
+  }
+}
 </script>

 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <ListboxFilter v-model="searchTerm" as-child>
      <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
        variant="none"
        :autofocus="autofocus"
        v-bind="inputProps"
        :icon="icon || appConfig.ui.icons.search"
        :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
      >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              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
              v-if="close"
              :icon="closeIcon || appConfig.ui.icons.close"
-              size="md"
              color="neutral"
              variant="ghost"
              :aria-label="t('commandPalette.close')"
@@ -280,8 +371,8 @@ const groups = computed(() => {
    </ListboxFilter>

    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
          <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
            {{ get(group, props.labelKey as string) }}
          </ListboxGroupLabel>
@@ -289,10 +380,10 @@ const groups = computed(() => {
          <ListboxItem
            v-for="(item, index) in group.items"
            :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
            :disabled="item.disabled"
            as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
          >
            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -323,13 +414,20 @@ const groups = computed(() => {

                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                    <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                      </span>
+
                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                    </slot>

-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                    </ListboxItemIndicator>
                  </span>
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { DeepReadonly } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
@@ -64,7 +63,7 @@ export interface FormSlots {
 </script>

 <script lang="ts" setup generic="S extends FormSchema, T extends boolean = true">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
@@ -155,9 +154,9 @@ provide('form-errors', errors)
 const inputs = ref<{ [P in keyof I]?: { id?: string, pattern?: RegExp } }>({})
 provide(formInputsInjectionKey, inputs as any)

-const dirtyFields = new Set<keyof I>()
-const touchedFields = new Set<keyof I>()
-const blurredFields = new Set<keyof I>()
+const dirtyFields: Set<keyof I> = reactive(new Set<keyof I>())
+const touchedFields: Set<keyof I> = reactive(new Set<keyof I>())
+const blurredFields: Set<keyof I> = reactive(new Set<keyof I>())

 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
  return errs.map(err => ({
@@ -302,9 +301,9 @@ defineExpose<Form<S>>({
  loading,
  dirty: computed(() => !!dirtyFields.size),

-  dirtyFields: readonly(dirtyFields) as DeepReadonly<Set<keyof I>>,
-  blurredFields: readonly(blurredFields) as DeepReadonly<Set<keyof I>>,
-  touchedFields: readonly(touchedFields) as DeepReadonly<Set<keyof I>>
+  dirtyFields: readonly(dirtyFields),
+  blurredFields: readonly(blurredFields),
+  touchedFields: readonly(touchedFields)
 })
 </script>

--- 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, AcceptableInputValue } from 'reka-ui'
+import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
 import theme from '#build/ui/input-tags'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
@@ -44,11 +44,10 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
  ui?: InputTags['slots']
 }

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

 type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
@@ -72,6 +71,7 @@ import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'

 defineOptions({ inheritAttrs: false })

--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -65,6 +65,7 @@ export interface ModalSlots {
  header(props: { close: () => void }): any
  title(props?: {}): any
  description(props?: {}): any
+  actions(props?: {}): any
  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
  body(props: { close: () => void }): any
  footer(props: { close: () => void }): any
@@ -166,12 +167,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                </DialogDescription>
              </div>

+              <slot name="actions" />
+
              <DialogClose v-if="props.close || !!slots.close" as-child>
                <slot name="close" :close="close" :ui="ui">
                  <UButton
                    v-if="props.close"
                    :icon="closeIcon || appConfig.ui.icons.close"
-                    size="md"
                    color="neutral"
                    variant="ghost"
                    :aria-label="t('modal.close')"
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -236,20 +236,13 @@ const lists = computed<NavigationMenuItem[][]>(() =>
    : []
 )

-function getAccordionDefaultValue(list: NavigationMenuItem[]) {
-  function findItemsWithDefaultOpen(items: NavigationMenuItem[], level = 0): string[] {
-    return items.reduce((acc: string[], item, index) => {
-      if (item.defaultOpen || item.open) {
-        acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
-      }
-      if (item.children?.length) {
-        acc.push(...findItemsWithDefaultOpen(item.children, level + 1))
-      }
-      return acc
-    }, [])
-  }
-
-  const indexes = findItemsWithDefaultOpen(list)
+function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
+  const indexes = list.reduce((acc: string[], item, index) => {
+    if (item.defaultOpen || item.open) {
+      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
+    }
+    return acc
+  }, [])

  return props.type === 'single' ? indexes[0] : indexes
 }
@@ -378,7 +371,14 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
      </ULink>

      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <ul :class="ui.childList({ class: props.ui?.childList })">
+        <AccordionRoot
+          v-bind="({
+            ...accordionProps,
+            defaultValue: getAccordionDefaultValue(item.children, level + 1)
+          } as AccordionRootProps)"
+          as="ul"
+          :class="ui.childList({ class: props.ui?.childList })"
+        >
          <ReuseItemTemplate
            v-for="(childItem, childIndex) in item.children"
            :key="childIndex"
@@ -387,7 +387,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
            :level="level + 1"
            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
          />
-        </ul>
+        </AccordionRoot>
      </AccordionContent>
    </component>
  </DefineItemTemplate>
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -111,7 +111,6 @@ import { tv } from '../utils/tv'
 import UButton from './Button.vue'

 const props = withDefaults(defineProps<PaginationProps>(), {
-  size: 'md',
  color: 'neutral',
  variant: 'outline',
  activeColor: 'primary',
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -245,6 +245,10 @@ function onUpdateOpen(value: boolean) {
 function isSelectItem(item: SelectItem): item is SelectItemBase {
  return typeof item === 'object' && item !== null
 }
+
+defineExpose({
+  triggerRef
+})
 </script>

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

 <!-- eslint-disable vue/no-template-shadow -->
@@ -428,7 +432,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
          <slot name="content-top" />

          <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <UInput autofocus autocomplete="off" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
+            <UInput autofocus autocomplete="off" :size="size" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
          </ComboboxInput>

          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -65,6 +65,7 @@ export interface SlideoverSlots {
  header(props: { close: () => void }): any
  title(props?: {}): any
  description(props?: {}): any
+  actions(props?: {}): any
  close(props: { close: () => void, ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
  body(props: { close: () => void }): any
  footer(props: { close: () => void }): any
@@ -174,12 +175,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
                </DialogDescription>
              </div>

+              <slot name="actions" />
+
              <DialogClose v-if="props.close || !!slots.close" as-child>
                <slot name="close" :close="close" :ui="ui">
                  <UButton
                    v-if="props.close"
                    :icon="closeIcon || appConfig.ui.icons.close"
-                    size="md"
                    color="neutral"
                    variant="ghost"
                    :aria-label="t('slideover.close')"
--- 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> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
  state?: CoreOptions<T>['state']
  onStateChange?: CoreOptions<T>['onStateChange']
  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
 }

-export interface TableProps<T extends TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
  /**
   * The element or component this component should render as.
   * @defaultValue 'div'
@@ -172,11 +172,13 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
 type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>

-export type TableSlots<T> = {
-  expanded: (props: { row: Row<T> }) => any
-  empty: (props?: {}) => any
-  loading: (props?: {}) => any
-  caption: (props?: {}) => any
+export type TableSlots<T extends TableData = TableData> = {
+  'expanded': (props: { row: Row<T> }) => any
+  'empty': (props?: {}) => any
+  'loading': (props?: {}) => any
+  'caption': (props?: {}) => any
+  'body-top': (props?: {}) => any
+  'body-bottom': (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>

 </script>
@@ -226,7 +228,7 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const paginationState = defineModel<PaginationState>('pagination', { default: {} })

-const tableRef = ref<HTMLTableElement>()
+const tableRef = ref<HTMLTableElement | null>(null)

 const tableApi = useVueTable({
  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
@@ -366,9 +368,13 @@ defineExpose({
            </slot>
          </th>
        </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
      </thead>

      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <slot name="body-top" />
+
        <template v-if="tableApi.getRowModel().rows?.length">
          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
            <tr
@@ -423,6 +429,8 @@ defineExpose({
            </slot>
          </td>
        </tr>
+
+        <slot name="body-bottom" />
      </tbody>
    </table>
  </Primitive>
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -79,7 +79,8 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 </script>

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

 <template>
@@ -117,7 +124,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})

      <slot name="list-leading" />

-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :ref="el => (triggersRef[index] = el as ComponentPublicInstance)"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+      >
        <slot name="leading" :item="item" :index="index">
          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -41,6 +41,7 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
   */
  orientation?: Timeline['variants']['orientation']
  defaultValue?: string | number
+  reverse?: boolean
  class?: any
  ui?: Timeline['slots']
 }
@@ -75,16 +76,34 @@ const appConfig = useAppConfig() as Timeline['AppConfig']
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeline || {}) })({
  orientation: props.orientation,
  size: props.size,
-  color: props.color
+  color: props.color,
+  reverse: props.reverse
 }))

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

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

 <template>
@@ -93,7 +112,7 @@ const currentStepIndex = computed(() => {
      v-for="(item, index) in items"
      :key="item.value ?? index"
      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      :data-state="index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'active' : undefined"
+      :data-state="getItemState(index)"
    >
      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -173,7 +173,6 @@ defineExpose({
          <UButton
            v-if="close"
            :icon="closeIcon || appConfig.ui.icons.close"
-            size="md"
            color="neutral"
            variant="link"
            :aria-label="t('toast.close')"
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'اكتب أمرًا أو ابحث...',
      noMatch: 'لا توجد نتائج مطابقة',
      noData: 'لا توجد بيانات',
-      close: 'إغلاق'
+      close: 'إغلاق',
+      back: 'رجوع'
    },
    selectMenu: {
      noMatch: 'لا توجد نتائج مطابقة',
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Əmr daxil edin və ya axtarın...',
      noMatch: 'Uyğun məlumat tapılmadı',
      noData: 'Məlumat yoxdur',
-      close: 'Bağla'
+      close: 'Bağla',
+      back: 'Geri'
    },
    selectMenu: {
      noMatch: 'Uyğun məlumat tapılmadı',
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Въведете команда или потърсете...',
      noMatch: 'Няма съвпадение на данни',
      noData: 'Няма данни',
-      close: 'Затворете'
+      close: 'Затворете',
+      back: 'Назад'
    },
    selectMenu: {
      noMatch: 'Няма съвпадение на данни',
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'কমান্ড টাইপ করুন বা অনুসন্ধান করুন...',
      noMatch: 'কোন মিল পাওয়া যায়নি',
      noData: 'কোন তথ্য নেই',
-      close: 'বন্ধ করুন'
+      close: 'বন্ধ করুন',
+      back: 'পেছনে'
    },
    selectMenu: {
      noMatch: 'কোন মিল পাওয়া যায়নি',
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Escriu una ordre o cerca...',
      noMatch: 'No hi ha dades coincidents',
      noData: 'Sense dades',
-      close: 'Tancar'
+      close: 'Tancar',
+      back: 'Enrere'
    },
    selectMenu: {
      noMatch: 'No hi ha dades coincidents',
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'فەرمانێک بنووسە یان بگەڕێ...',
      noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
      noData: 'هیچ داتایەک نییە',
-      close: 'داخستن'
+      close: 'داخستن',
+      back: 'گەڕانەوە'
    },
    selectMenu: {
      noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Zadejte příkaz nebo hledejte...',
      noMatch: 'Žádná shoda',
      noData: 'Žádná data',
-      close: 'Zavřít'
+      close: 'Zavřít',
+      back: 'Zpět'
    },
    selectMenu: {
      noMatch: 'Žádná shoda',
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv en kommando eller søg...',
      noMatch: 'Ingen matchende data',
      noData: 'Ingen data',
-      close: 'Luk'
+      close: 'Luk',
+      back: 'Tilbage'
    },
    selectMenu: {
      noMatch: 'Ingen matchende data',
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Geben Sie einen Befehl ein oder suchen Sie...',
      noMatch: 'Nichts gefunden',
      noData: 'Keine Daten',
-      close: 'Schließen'
+      close: 'Schließen',
+      back: 'Zurück'
    },
    selectMenu: {
      noMatch: 'Nichts gefunden',
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Πληκτρολογήστε μια εντολή ή αναζητήστε...',
      noMatch: 'Δεν βρέθηκαν δεδομένα',
      noData: 'Δεν υπάρχουν δεδομένα',
-      close: 'Κλείσιμο'
+      close: 'Κλείσιμο',
+      back: 'Πίσω'
    },
    selectMenu: {
      noMatch: 'Δεν βρέθηκαν δεδομένα',
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Type a command or search...',
      noMatch: 'No matching data',
      noData: 'No data',
-      close: 'Close'
+      close: 'Close',
+      back: 'Back'
    },
    selectMenu: {
      noMatch: 'No matching data',
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Escribe un comando o busca...',
      noMatch: 'No hay datos coincidentes',
      noData: 'Sin datos',
-      close: 'Cerrar'
+      close: 'Cerrar',
+      back: 'Atrás'
    },
    selectMenu: {
      noMatch: 'No hay datos coincidentes',
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Sisesta käsk või otsi...',
      noMatch: 'Pole vastavaid andmeid',
      noData: 'Pole andmeid',
-      close: 'Sulge'
+      close: 'Sulge',
+      back: 'Tagasi'
    },
    selectMenu: {
      noMatch: 'Pole vastavaid andmeid',
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'یک دستور وارد کنید یا جستجو کنید...',
      noMatch: 'داده‌ای یافت نشد',
      noData: 'داده‌ای موجود نیست',
-      close: 'بستن'
+      close: 'بستن',
+      back: 'بازگشت'
    },
    selectMenu: {
      noMatch: 'داده‌ای یافت نشد',
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Kirjoita komento tai hae...',
      noMatch: 'Ei vastaavia tietoja',
      noData: 'Ei tietoja',
-      close: 'Sulje'
+      close: 'Sulje',
+      back: 'Takaisin'
    },
    selectMenu: {
      noMatch: 'Ei vastaavia tietoja',
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Tapez une commande ou recherchez...',
      noMatch: 'Aucune donnée correspondante',
      noData: 'Aucune donnée',
-      close: 'Fermer'
+      close: 'Fermer',
+      back: 'Retour'
    },
    selectMenu: {
      noMatch: 'Aucune donnée correspondante',
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'הקלד פקודה...',
      noMatch: 'לא נמצאה התאמה',
      noData: 'אין נתונים זמינים',
-      close: 'סגור'
+      close: 'סגור',
+      back: 'חזור'
    },
    selectMenu: {
      noMatch: 'לא נמצאה התאמה',
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'एक आदेश या खोज टाइप करें...',
      noMatch: 'कोई मेल खाता डेटा नहीं',
      noData: 'कोई डेटा नहीं',
-      close: 'बंद करें'
+      close: 'बंद करें',
+      back: 'वापस'
    },
    selectMenu: {
      noMatch: 'कोई मेल खाता डेटा नहीं',
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Írjon be egy parancsot vagy keressen...',
      noMatch: 'Nincs találat',
      noData: 'Nincs adat',
-      close: 'Bezárás'
+      close: 'Bezárás',
+      back: 'Vissza'
    },
    selectMenu: {
      noMatch: 'Nincs találat',
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Մուտքագրեք հրաման կամ որոնեք...',
      noMatch: 'Համընկնումներ չեն գտնվել',
      noData: 'Տվյալներ չկան',
-      close: 'Փակել'
+      close: 'Փակել',
+      back: 'Հետ'
    },
    selectMenu: {
      noMatch: 'Համընկնումներ չեն գտնվել',
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Ketik perintah atau cari...',
      noMatch: 'Tidak ada data yang cocok',
      noData: 'Tidak ada data',
-      close: 'Tutup'
+      close: 'Tutup',
+      back: 'Kembali'
    },
    selectMenu: {
      noMatch: 'Tidak ada data yang cocok',
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Digita un comando o cerca...',
      noMatch: 'Nessun dato corrispondente',
      noData: 'Nessun dato',
-      close: 'Chiudi'
+      close: 'Chiudi',
+      back: 'Indietro'
    },
    selectMenu: {
      noMatch: 'Nessun dato corrispondente',
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'コマンドを入力するか検索...',
      noMatch: '一致するデータがありません',
      noData: 'データがありません',
-      close: '閉じる'
+      close: '閉じる',
+      back: '戻る'
    },
    selectMenu: {
      noMatch: '一致するデータがありません',
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Команда енгізіңіз немесе іздеңіз...',
      noMatch: 'Сәйкес келетін деректер жоқ',
      noData: 'Деректер жоқ',
-      close: 'Жабу'
+      close: 'Жабу',
+      back: 'Артқа'
    },
    selectMenu: {
      noMatch: 'Сәйкес келетін деректер жоқ',
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'វាយពាក្យបញ្ជា ឬស្វែងរក...',
      noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
      noData: 'មិនមានទិន្នន័យ',
-      close: 'បិទ'
+      close: 'បិទ',
+      back: 'ត្រឡប់'
    },
    selectMenu: {
      noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: '명령을 입력하거나 검색...',
      noMatch: '일치하는 데이터가 없습니다.',
      noData: '데이터가 없습니다.',
-      close: '닫기'
+      close: '닫기',
+      back: '뒤로'
    },
    selectMenu: {
      noMatch: '일치하는 데이터가 없습니다.',
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Буйрук киргизиңиз же издөө…',
      noMatch: 'Эч нерсе табылган жок',
      noData: 'Маалымат жок',
-      close: 'Жабуу'
+      close: 'Жабуу',
+      back: 'Артка'
    },
    selectMenu: {
      noMatch: 'Сүйлөшкөн маалыматтар жок',
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Tippt e Befeel oder sicht...',
      noMatch: 'Keng entspriechend Donnéeën',
      noData: 'Keng Donnéeën',
-      close: 'Zoumaachen'
+      close: 'Zoumaachen',
+      back: 'Zréck'
    },
    selectMenu: {
      noMatch: 'Keng entspriechend Donnéeën',
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Įveskite komandą arba ieškokite...',
      noMatch: 'Nėra atitinkančių duomenų',
      noData: 'Nėra duomenų',
-      close: 'Uždaryti'
+      close: 'Uždaryti',
+      back: 'Atgal'
    },
    selectMenu: {
      noMatch: 'Nėra atitinkančių duomenų',
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Комманд бичих эсвэл хайлт хийх...',
      noMatch: 'Тохирох мэдээлэл олдсонгүй',
      noData: 'Мэдээлэл байхгүй',
-      close: 'Хаах'
+      close: 'Хаах',
+      back: 'Буцах'
    },
    selectMenu: {
      noMatch: 'Тохирох мэдээлэл олдсонгүй',
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Taip arahan atau carian...',
      noMatch: 'Tiada data yang sepadan',
      noData: 'Tiada data',
-      close: 'Tutup'
+      close: 'Tutup',
+      back: 'Kembali'
    },
    selectMenu: {
      noMatch: 'Tiada data yang sepadan',
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv inn en kommando eller søk...',
      noMatch: 'Ingen samsvarende data',
      noData: 'Ingen data',
-      close: 'Lukk'
+      close: 'Lukk',
+      back: 'Tilbake'
    },
    selectMenu: {
      noMatch: 'Ingen samsvarende data',
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Typ een commando of zoek...',
      noMatch: 'Geen overeenkomende gegevens',
      noData: 'Geen gegevens',
-      close: 'Sluiten'
+      close: 'Sluiten',
+      back: 'Terug'
    },
    selectMenu: {
      noMatch: 'Geen overeenkomende gegevens',
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Wpisz polecenie lub wyszukaj...',
      noMatch: 'Brak pasujących danych',
      noData: 'Brak danych',
-      close: 'Zamknij'
+      close: 'Zamknij',
+      back: 'Wstecz'
    },
    selectMenu: {
      noMatch: 'Brak pasujących danych',
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Digite um comando ou pesquise...',
      noMatch: 'Nenhum dado correspondente',
      noData: 'Sem dados',
-      close: 'Fechar'
+      close: 'Fechar',
+      back: 'Voltar'
    },
    selectMenu: {
      noMatch: 'Nenhum dado correspondente',
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Digite um comando ou pesquise...',
      noMatch: 'Nenhum dado correspondente',
      noData: 'Nenhum dado',
-      close: 'Fechar'
+      close: 'Fechar',
+      back: 'Voltar'
    },
    selectMenu: {
      noMatch: 'Nenhum dado correspondente',
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Tastează o comandă sau caută...',
      noMatch: 'Nu există date corespunzătoare',
      noData: 'Nu există date',
-      close: 'Închide'
+      close: 'Închide',
+      back: 'Înapoi'
    },
    selectMenu: {
      noMatch: 'Nu există date corespunzătoare',
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Введите команду или выполните поиск...',
      noMatch: 'Совпадений не найдено',
      noData: 'Нет данных',
-      close: 'Закрыть'
+      close: 'Закрыть',
+      back: 'Назад'
    },
    selectMenu: {
      noMatch: 'Совпадений не найдено',
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Zadajte príkaz alebo vyhľadajte...',
      noMatch: 'Žiadna zhoda',
      noData: 'Žiadne dáta',
-      close: 'Zatvoriť'
+      close: 'Zavrieť',
+      back: 'Späť'
    },
    selectMenu: {
      noMatch: 'Žiadna zhoda',
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Vpiši ukaz ali išči...',
      noMatch: 'Ni ujemanj',
      noData: 'Ni podatkov',
-      close: 'Zapri'
+      close: 'Zapri',
+      back: 'Nazaj'
    },
    selectMenu: {
      noMatch: 'Ni ujemanj',
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Skriv ett kommando eller sök...',
      noMatch: 'Inga matchande data',
      noData: 'Inga data',
-      close: 'Stäng'
+      close: 'Stäng',
+      back: 'Tillbaka'
    },
    selectMenu: {
      noMatch: 'Inga matchande data',
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'พิมพ์คำสั่งหรือค้นหา...',
      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
      noData: 'ไม่มีข้อมูล',
-      close: 'ปิด'
+      close: 'ปิด',
+      back: 'ย้อนกลับ'
    },
    selectMenu: {
      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Фармонро нависед ё ҷустуҷӯ кунед...',
      noMatch: 'Маълумоти мувофиқ ёфт нашуд',
      noData: 'Маълумот нест',
-      close: 'Бастан'
+      close: 'Бастан',
+      back: 'Бозгашт'
    },
    selectMenu: {
      noMatch: 'Маълумоти мувофиқ ёфт нашуд',
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Bir komut yazın veya arama yapın...',
      noMatch: 'Eşleşen veri yok',
      noData: 'Veri yok',
-      close: 'Kapat'
+      close: 'Kapat',
+      back: 'Geri'
    },
    selectMenu: {
      noMatch: 'Eşleşen veri yok',
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'بۇيرۇق كىرگۈزۈڭ ياكى ئىزدەڭ...',
      noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
      noData: 'سانلىق مەلۇمات يوق',
-      close: 'تاقاش'
+      close: 'تاقاش',
+      back: 'قايتىش'
    },
    selectMenu: {
      noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Введіть команду або шукайте...',
      noMatch: 'Збігів не знайдено',
      noData: 'Немає даних',
-      close: 'Закрити'
+      close: 'Закрити',
+      back: 'Назад'
    },
    selectMenu: {
      noMatch: 'Збігів не знайдено',
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
      placeholder: 'کمانڈ ٹائپ کریں یا تلاش کریں...',
      noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
      noData: 'کوئی ڈیٹا نہیں',
-      close: 'بند کریں'
+      close: 'بند کریں',
+      back: 'واپس'
    },
    selectMenu: {
      noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
      placeholder: 'Buyruq kiriting yoki qidiring...',
      noMatch: 'Mos keluvchi natija topilmadi',
      noData: 'Maʼlumot yoʻq',
-      close: 'Yopish'
+      close: 'Yopish',
+      back: 'Orqaga'
    },
    selectMenu: {
      noMatch: 'Mos keluvchi natija topilmadi',
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Benjamin Canac	268e29b041	chore(release): v3.2.0	2025-06-25 17:00:05 +02:00
Benjamin Canac	b0364b96b7	fix(SelectMenu): dynamic input size	2025-06-25 16:04:04 +02:00
Benjamin Canac	ba3c6e8788	fix(InputMenu/SelectMenu): dynamic `empty` size Resolves #4377	2025-06-25 16:01:04 +02:00
Benjamin Canac	01da3cbf31	docs(components): add illustrations	2025-06-25 11:46:58 +02:00
Estéban	595fc64515	feat(Table): add `body-top` / `body-bottom` slots (#4354 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-25 11:17:02 +02:00
Estéban	81569713e9	feat(Modal/Slideover): add `actions` slot (#4358 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-24 18:03:53 +02:00
Jack Bobakanoosh	1a8feb751e	fix(Form): expose reactive fields (#4386 )	2025-06-24 17:56:12 +02:00
Maxime Pauvert	1d281e915a	docs(app): use `findPageBreadcrumb` from `@nuxt/content` (#4359 )	2025-06-24 17:45:52 +02:00
Artea	c3adc381c9	fix(Card/Drawer/Modal): prevent scrollbars overflow (#4368 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-24 17:16:13 +02:00
Lars Eberhardt	edca3bcb74	fix(Table): use `tr` as separator (#4083 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-24 17:09:04 +02:00
Benjamin Canac	8f32ee3d24	chore(deps): update `@nuxt/ui-pro`	2025-06-24 16:42:56 +02:00
Hugo Richard	9172bb7dc2	docs(app): add copy markdown button (#4369 )	2025-06-24 12:11:23 +02:00
renovate[bot]	32dae2e002	chore(deps): update dependency better-sqlite3 to v12 (v3) (#4385 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-23 14:39:02 +02:00
Estéban	be41aed1f3	fix(components): remove default `md` size on buttons (#4357 )	2025-06-23 12:47:30 +02:00
renovate[bot]	bf678412ca	chore(deps): lock file maintenance (v3) (#4389 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-23 12:39:12 +02:00
renovate[bot]	a999600e9f	chore(deps): update all non-major dependencies (v3) (#4362 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-23 12:05:11 +02:00
Benjamin Canac	04f12adc5b	docs(examples): use `useClipboard` instead of `navigator.clipboard`	2025-06-18 14:16:54 +02:00
Sigve Hansen	abfd0ede03	fix(Toaster): smoother visibility transition for stacked toasts (#4367 )	2025-06-17 16:56:33 +02:00
Vachmara	2fa8db64dd	fix(NavigationMenu): nested accordion context at every level (#4363 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-17 10:49:07 +02:00
Benjamin Canac	52f1963833	chore(cli): improve templates	2025-06-17 10:10:08 +02:00
renovate[bot]	9a83c9c7f4	chore(deps): update devdependency happy-dom to v18 (v3) (#4353 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 23:03:17 +02:00
renovate[bot]	f2510cb342	chore(deps): lock file maintenance (v3) (#4352 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-16 12:52:42 +02:00
Estéban	4dd56c8111	fix(Pagination): match default button `size` (#4350 )	2025-06-16 11:46:59 +02:00
renovate[bot]	6e3ec6a077	chore(deps): update all non-major dependencies (v3) (#4349 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 11:24:09 +02:00
Hugo Richard	59c26ec123	feat(CommandPalette): handle `children` in items (#4226 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-13 14:49:43 +02:00
Julien Augugliaro	67ef866a40	docs(input): fix typo in mask example (#4334 )	2025-06-12 23:48:01 +02:00
J-Michalek	5170cfd7eb	feat(Timeline): add `reverse` prop (#4316 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-06-12 17:06:51 +02:00
Benjamin Canac	9bcf1ad92f	docs(input-tags): add illustration	2025-06-12 16:40:08 +02:00
Benjamin Canac	7a2bd4e617	feat(Select/SelectMenu/Tabs): expose trigger refs Resolves #4292	2025-06-12 15:38:43 +02:00
Benjamin Canac	8781a07909	fix(InputTags): extend emits interface	2025-06-12 15:35:20 +02:00