test: update vue snapshots

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

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

Resolves #2389

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @benjamincanac

.github/ISSUE_TEMPLATE/bug-report-v3.yml

@@ -10,7 +10,7 @@ body:
     id: env
     attributes:
       label: Environment
-      description: You can use `npx nuxi info` to fill this section
+      description: You can use `npx nuxt info` to fill this section
       placeholder: |
         - Operating System: `Darwin`
         - Node Version:     `v18.16.0`

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -10,7 +10,7 @@ body:
     id: env
     attributes:
       label: Environment
-      description: You can use `npx nuxi info` to fill this section
+      description: You can use `npx nuxt info` to fill this section
       placeholder: |
         - Operating System: `Darwin`
         - Node Version:     `v18.16.0`

.github/workflows/docs.yml

@@ -6,10 +6,6 @@ jobs:
   deploy:
     runs-on: ${{ matrix.os }}
 
-    environment:
-      name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
-      url: ${{ steps.deploy.outputs.deployment-url }}
-
     permissions:
       contents: read
       id-token: write
@@ -40,14 +36,10 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Build application
-        run: pnpm run docs:build
+      - name: Deploy to NuxtHub
+        uses: nuxt-hub/action@v2
         env:
           NODE_OPTIONS: '--max-old-space-size=8192'
-
-      - name: Deploy to NuxtHub
-        uses: nuxt-hub/action@v1
-        id: deploy
         with:
           project-key: ui-7eg3
-          directory: docs/dist
+          directory: docs

.github/workflows/module.yml

@@ -93,7 +93,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -111,7 +111,7 @@ jobs:
         run: pnpm install --ignore-workspace
 
       - name: Prepare
-        run: pnpm nuxi prepare
+        run: pnpm nuxt prepare
 
       - name: Typecheck
         run: pnpm run typecheck
@@ -138,7 +138,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -183,7 +183,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -235,7 +235,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/playground.yml

@@ -9,10 +9,6 @@ jobs:
   deploy:
     runs-on: ${{ matrix.os }}
 
-    environment:
-      name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
-      url: ${{ steps.deploy.outputs.deployment-url }}
-
     permissions:
       contents: read
       id-token: write
@@ -40,14 +36,10 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Build application
-        run: pnpm run dev:build
-        env:
-          NITRO_PRESET: cloudflare-pages
-
       - name: Deploy to NuxtHub
-        uses: nuxt-hub/action@v1
-        id: deploy
+        uses: nuxt-hub/action@v2
+        env:
+          NODE_OPTIONS: '--max-old-space-size=8192'
         with:
           project-key: ui3-playground-pb9b
-          directory: playground/dist
+          directory: playground

.github/workflows/reproduction.yml

@@ -0,0 +1,27 @@
+name: reproduction
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  reproduction:
+    runs-on: ubuntu-latest
+
+    permissions:
+      actions: write
+      issues: write
+
+    steps:
+      - uses: actions/stale@v9
+        with:
+          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
+          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
+          only-labels: 'needs reproduction' # Only process these issues
+          days-before-issue-close: 7
+          ignore-updates: true
+          remove-stale-when-updated: false
+          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
+          close-issue-label: closed-by-bot
+          operations-per-run: 300 #default 30

.github/workflows/stale.yml

@@ -1,6 +1,7 @@
 name: stale
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '30 1 * * *'
 
@@ -9,17 +10,28 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
+      actions: write
       issues: write
 
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@4c023f01d613e60293d8004f251a18bfb9bbd71d
         with:
-          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
-          only-labels: 'needs reproduction' # Only process these issues
-          days-before-issue-close: 7
-          ignore-updates: true
-          remove-stale-when-updated: false
-          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
-          close-issue-label: closed-by-bot
-          operations-per-run: 300 #default 30
+          days-before-pr-stale: -1
+          days-before-stale: 60
+          days-before-close: 7
+          stale-issue-label: 'stale'
+          close-issue-label: 'closed-by-bot'
+          close-issue-message: |
+            Hi! 👋
+
+            This issue has been automatically **closed** due to prolonged inactivity.
+
+            We're a small team and can't address every report, but we appreciate your feedback and contributions.
+
+            If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.
+
+            Thank you for your understanding and support!
+
+            — Nuxt UI Team
+          exempt-issue-labels: 'feature,announcement'
+          operations-per-run: 300

CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [3.1.3](https://github.com/nuxt/ui/compare/v3.1.2...v3.1.3) (2025-05-26)
+
+### ⚠ BREAKING CHANGES
+
+* **NavigationMenu:** revert new `collapsible` field
+
+### Features
+
+* **locale:** add Kyrgyz language ([#4189](https://github.com/nuxt/ui/issues/4189)) ([4053047](https://github.com/nuxt/ui/commit/405304775e4b2b4e8b37a2364f3e5ee34b46036e))
+* **locale:** add Lithuanian language ([#4171](https://github.com/nuxt/ui/issues/4171)) ([d86956e](https://github.com/nuxt/ui/commit/d86956e1d57482b3e98eef2d34bff13544284b0b))
+* **locale:** add Malay language ([#4160](https://github.com/nuxt/ui/issues/4160)) ([c00f6e8](https://github.com/nuxt/ui/commit/c00f6e8cdfd88eeba58812b78d94a2326c13f164))
+* **locale:** add Mongolian language ([#4214](https://github.com/nuxt/ui/issues/4214)) ([44ea02c](https://github.com/nuxt/ui/commit/44ea02c0d64322ef0cfda63b234369c00d3d0180))
+* **Modal/Slideover:** add `after:enter` event ([#4187](https://github.com/nuxt/ui/issues/4187)) ([d9e9fea](https://github.com/nuxt/ui/commit/d9e9fea35e4b22d68324c9e85b3aa221a7987d0f))
+* **NavigationMenu:** add `tooltip` and `popover` props ([f2682fd](https://github.com/nuxt/ui/commit/f2682fd2ae8abb7807977727fc22ef34cb5752e5)), closes [#4186](https://github.com/nuxt/ui/issues/4186)
+* **NavigationMenu:** add `trigger` type in items ([9cf9f25](https://github.com/nuxt/ui/commit/9cf9f25f4424447691e03e9034155d1541badd43))
+* **NavigationMenu:** handle `vertical` orientation with Accordion instead of Collapsible ([1e2a10b](https://github.com/nuxt/ui/commit/1e2a10b4bdebaef12316ac60f98a956dad21c1ec)), closes [#4072](https://github.com/nuxt/ui/issues/4072) [#3911](https://github.com/nuxt/ui/issues/3911)
+* **Popover:** add `anchor` slot ([#4119](https://github.com/nuxt/ui/issues/4119)) ([473513c](https://github.com/nuxt/ui/commit/473513c2460d4329d7d2e0a0ea69bf1310a072d1))
+
+### Bug Fixes
+
+* **CheckboxGroup/RadioGroup:** variant `table` borders in RTL mode ([#4192](https://github.com/nuxt/ui/issues/4192)) ([43d281f](https://github.com/nuxt/ui/commit/43d281f6d1d8b0017ed61d929c5e311fb5b03447))
+* **CommandPalette:** add `presentation` role to viewport ([2ba94db](https://github.com/nuxt/ui/commit/2ba94db09e1ba86020d5d289f1ca1e24ef706299))
+* **ContextMenu/DropdownMenu:** wrap groups in a viewport ([dcf34a7](https://github.com/nuxt/ui/commit/dcf34a7ac236b96b1302ec2eae155b8f2d3784ef)), closes [#3315](https://github.com/nuxt/ui/issues/3315)
+* **Drawer:** improve title & description accessibility ([41087d4](https://github.com/nuxt/ui/commit/41087d4c9569eb00c04bd748e055cd151c2f762c)), closes [#4199](https://github.com/nuxt/ui/issues/4199)
+* **icons:** update `loading` icon ([#4163](https://github.com/nuxt/ui/issues/4163)) ([fe4e1f8](https://github.com/nuxt/ui/commit/fe4e1f859d42aa3c32bb7b75302e84a280abe525))
+* **Input/Textarea:** define model modifiers types ([#4195](https://github.com/nuxt/ui/issues/4195)) ([3243fb8](https://github.com/nuxt/ui/commit/3243fb88f71c5475824bfdc4d7c4f303b2d6790b))
+* **InputMenu/Select/SelectMenu:** manual viewport to display scrollbars ([f95abf8](https://github.com/nuxt/ui/commit/f95abf8d1d7b9149e400d7dc6f96f93f5154da7a)), closes [#4069](https://github.com/nuxt/ui/issues/4069)
+* **NavigationMenu:** incorrect hover when disabled and active ([d0be599](https://github.com/nuxt/ui/commit/d0be59946bfe30c79a6f75476385ab8538aa51b8))
+* **NavigationMenu:** only display `tooltip` when collapsed ([44f536f](https://github.com/nuxt/ui/commit/44f536fd0034facb3550d910fae71d4f9442ed19))
+* **NavigationMenu:** remove `font-medium` in popover children ([0236399](https://github.com/nuxt/ui/commit/02363994d66d3c2d11b9913f31167fa25f5c5de2))
+* **NavigationMenu:** revert new `collapsible` field ([3c78e2f](https://github.com/nuxt/ui/commit/3c78e2fd983f19b5cec65b4a94a8a8b14e548e5e))
+* **Textarea:** missing imports ([#4207](https://github.com/nuxt/ui/issues/4207)) ([6aab62e](https://github.com/nuxt/ui/commit/6aab62ec30e266c5f0da0cd24aefbb7c53f447ac))
+* **theme:** define `old-neutral` color as static ([#4193](https://github.com/nuxt/ui/issues/4193)) ([dae9f0b](https://github.com/nuxt/ui/commit/dae9f0b8631b3b9fb60ef47753f7aded0c36c4a2))
+* **Tooltip:** increase padding for consistency ([0634a75](https://github.com/nuxt/ui/commit/0634a756a496f5131841abafd218ae7e4aaa61e5))
+
 ## [3.1.2](https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2) (2025-05-15)
 
 ### Features

docs/app/components/Header.vue

@@ -22,9 +22,7 @@ onMounted(() => {
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const githubLink = computed(() => {
-  return `https://github.com/nuxt/${value.value}`
-})
+const githubLink = computed(() => `https://github.com/nuxt/${value.value}`)
 
 const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
 const mobileLinks = computed(() => [
@@ -36,6 +34,16 @@ const mobileLinks = computed(() => [
     target: '_blank'
   }
 ])
+
+const items = computed(() => {
+  const ui2 = { label: 'v2.22.0', to: 'https://ui2.nuxt.com' }
+  const uiPro1 = { label: 'v1.8.0', to: 'https://ui2.nuxt.com/pro' }
+
+  return [
+    { label: `v${config.version}`, active: true, color: 'primary' as const, checked: true, type: 'checkbox' as const },
+    route.path === '/' ? ui2 : route.path.startsWith('/pro') ? uiPro1 : module.value === 'ui-pro' ? uiPro1 : ui2
+  ]
+})
 </script>
 
 <template>
@@ -53,7 +61,7 @@ const mobileLinks = computed(() => [
       <UDropdownMenu
         v-slot="{ open }"
         :modal="false"
-        :items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.7.1' : 'v2.21.1', to: module === 'ui-pro' ? 'https://ui2.nuxt.com/pro' : 'https://ui2.nuxt.com' }]"
+        :items="items"
         :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
         size="xs"
       >

docs/app/components/content/SupportedLanguages.vue

@@ -25,6 +25,9 @@ function getEmojiFlag(locale: string): string {
     kk: 'kz', // Kazakh -> Kazakhstan
     km: 'kh', // Khmer -> Cambodia
     ko: 'kr', // Korean -> South Korea
+    ky: 'kg', // Kyrgyz -> Kyrgyzstan
+    lb: 'lu', // Luxembourgish -> Luxembourg
+    ms: 'my', // Malay -> Malaysia
     nb: 'no', // Norwegian Bokmål -> Norway
     sl: 'si', // Slovenian -> Slovenia
     sv: 'se', // Swedish -> Sweden

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

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

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

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

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -28,7 +28,7 @@ const items = [
     </template>
 
     <template #refresh-trailing>
-      <UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-primary animate-spin" />
+      <UIcon v-if="loading" name="i-lucide-loader-circle" class="shrink-0 size-5 text-primary animate-spin" />
     </template>
   </UContextMenu>
 </template>

docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue

@@ -3,7 +3,7 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" :dismissible="false" :ui="{ header: 'flex items-center justify-between' }">
+  <UDrawer v-model:open="open" :dismissible="false" :handle="false" :ui="{ header: 'flex items-center justify-between' }">
     <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #header>

docs/app/components/content/examples/drawer/DrawerModalExample.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <UDrawer
+    v-model:open="open"
+    :dismissible="false"
+    :overlay="false"
+    :handle="false"
+    :modal="false"
+    :ui="{ header: 'flex items-center justify-between' }"
+  >
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+    <template #header>
+      <h2 class="text-highlighted font-semibold">
+        Drawer non-dismissible
+      </h2>
+
+      <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+    </template>
+
+    <template #body>
+      <Placeholder class="h-48" />
+    </template>
+  </UDrawer>
+</template>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -15,6 +15,9 @@ const schema = z.object({
   select: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
+  selectMultiple: z.array(z.string()).refine(values => values.includes('option-2'), {
+    message: 'Include Option 2'
+  }),
   selectMenu: z.any().refine(option => option?.value === 'option-2', {
     message: 'Select Option 2'
   }),
@@ -81,6 +84,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         <USelect v-model="state.select" :items="items" class="w-full" />
       </UFormField>
 
+      <UFormField name="selectMultiple" label="Select (Multiple)">
+        <USelect v-model="state.selectMultiple" multiple :items="items" class="w-full" />
+      </UFormField>
+
       <UFormField name="selectMenu" label="Select Menu">
         <USelectMenu v-model="state.selectMenu" :items="items" class="w-full" />
       </UFormField>

docs/app/components/content/examples/input-tags/InputTagsFormFieldExample.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const tags = ref(['Vue'])
+</script>
+
+<template>
+  <UFormField label="Tags" required>
+    <UInputTags v-model="tags" placeholder="Enter tags..." />
+  </UFormField>
+</template>

docs/app/components/content/examples/input/InputButtonGroupExample.vue

@@ -10,7 +10,7 @@ const domain = ref(domains[0])
       v-model="value"
       placeholder="nuxt"
       :ui="{
-        base: 'pl-[57px]',
+        base: 'pl-14.5',
         leading: 'pointer-events-none'
       }"
     >

docs/app/components/content/examples/input/InputCopyButtonExample.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const value = ref('npx nuxi module add ui')
+const value = ref('npx nuxt module add ui')
 const copied = ref(false)
 
 function copy() {

docs/app/components/content/examples/input/InputMaskExample.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <UInput v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" icon="i-lucide-credit-card" />
+
+    <div class="flex items-center gap-2">
+      <UInput v-maska="'##/##'" placeholder="MM/YY" icon="i-lucide-calendar" />
+      <UInput v-maska="'###'" placeholder="CVC" />
+    </div>
+  </div>
+</template>

docs/app/components/content/examples/modal/ModalFooterSlotExample.vue

@@ -10,8 +10,8 @@ const open = ref(false)
       <Placeholder class="h-48" />
     </template>
 
-    <template #footer>
-      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
+    <template #footer="{ close }">
+      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
       <UButton label="Submit" color="neutral" />
     </template>
   </UModal>

docs/app/components/content/examples/popover/PopoverAnchorSlotExample.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const open = ref(false)
+</script>
+
+<template>
+  <UPopover
+    v-model:open="open"
+    :dismissible="false"
+    :ui="{ content: 'w-(--reka-popper-anchor-width) p-4' }"
+  >
+    <template #anchor>
+      <UInput placeholder="Focus to open" @focus="open = true" @blur="open = false" />
+    </template>
+
+    <template #content>
+      <Placeholder class="w-full aspect-square" />
+    </template>
+  </UPopover>
+</template>

docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue

@@ -10,8 +10,8 @@ const open = ref(false)
       <Placeholder class="h-full" />
     </template>
 
-    <template #footer>
-      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
+    <template #footer="{ close }">
+      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
       <UButton label="Submit" color="neutral" />
     </template>
   </USlideover>

docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TimelineItem } from '@nuxt/ui'
+
+const items: TimelineItem[] = [{
+  date: 'Mar 15, 2025',
+  title: 'Project Kickoff',
+  icon: 'i-lucide-rocket',
+  value: 'kickoff'
+}, {
+  date: 'Mar 22, 2025',
+  title: 'Design Phase',
+  icon: 'i-lucide-palette',
+  value: 'design'
+}, {
+  date: 'Mar 29, 2025',
+  title: 'Development Sprint',
+  icon: 'i-lucide-code',
+  value: 'development'
+}, {
+  date: 'Apr 5, 2025',
+  title: 'Testing & Deployment',
+  icon: 'i-lucide-check-circle',
+  value: 'deployment'
+}]
+</script>
+
+<template>
+  <UTimeline
+    :items="items"
+    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
+    :default-value="2"
+    class="translate-x-[calc(50%-1rem)]"
+  />
+</template>

docs/app/components/content/examples/timeline/TimelineCustomSlotExample.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { TimelineItem } from '@nuxt/ui'
+
+const items = [{
+  date: 'Mar 15, 2025',
+  title: 'Project Kickoff',
+  subtitle: 'Project Initiation',
+  description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
+  icon: 'i-lucide-rocket',
+  value: 'kickoff'
+}, {
+  date: 'Mar 22, 2025',
+  title: 'Design Phase',
+  description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
+  icon: 'i-lucide-palette',
+  value: 'design'
+}, {
+  date: 'Mar 29, 2025',
+  title: 'Development Sprint',
+  description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
+  icon: 'i-lucide-code',
+  value: 'development',
+  slot: 'development' as const,
+  developers: [
+    {
+      src: 'https://github.com/J-Michalek.png'
+    }, {
+      src: 'https://github.com/benjamincanac.png'
+    }
+  ]
+}, {
+  date: 'Apr 5, 2025',
+  title: 'Testing & Deployment',
+  description: 'QA testing and performance optimization. Deployed the application to production.',
+  icon: 'i-lucide-check-circle',
+  value: 'deployment'
+}] satisfies TimelineItem[]
+</script>
+
+<template>
+  <UTimeline :items="items" :default-value="2" class="w-96">
+    <template #development-title="{ item }">
+      <div class="flex items-center gap-1">
+        <span>{{ item.title }}</span>
+
+        <UAvatarGroup size="2xs">
+          <UAvatar v-for="(developer, index) of item.developers" :key="index" v-bind="developer" />
+        </UAvatarGroup>
+      </div>
+    </template>
+  </UTimeline>
+</template>

docs/app/components/content/examples/timeline/TimelineModelValueExample.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { TimelineItem } from '@nuxt/ui'
+
+const items: TimelineItem[] = [{
+  date: 'Mar 15, 2025',
+  title: 'Project Kickoff',
+  description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
+  icon: 'i-lucide-rocket',
+  value: 'kickoff'
+}, {
+  date: 'Mar 22, 2025',
+  title: 'Design Phase',
+  description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
+  icon: 'i-lucide-palette',
+  value: 'design'
+}, {
+  date: 'Mar 29, 2025',
+  title: 'Development Sprint',
+  description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
+  icon: 'i-lucide-code',
+  value: 'development'
+}, {
+  date: 'Apr 5, 2025',
+  title: 'Testing & Deployment',
+  description: 'QA testing and performance optimization. Deployed the application to production.',
+  icon: 'i-lucide-check-circle',
+  value: 'deployment'
+}]
+
+const active = ref(0)
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    active.value = (active.value + 1) % items.length
+  }, 2000)
+})
+</script>
+
+<template>
+  <UTimeline v-model="active" :items="items" class="w-96" />
+</template>

docs/app/components/content/examples/timeline/TimelineSlotsExample.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { TimelineItem } from '@nuxt/ui'
+import { useTimeAgo } from '@vueuse/core'
+
+const items = [{
+  username: 'J-Michalek',
+  date: '2025-05-24T14:58:55Z',
+  action: 'opened this',
+  avatar: {
+    src: 'https://github.com/J-Michalek.png'
+  }
+}, {
+  username: 'J-Michalek',
+  date: '2025-05-26T19:30:14+02:00',
+  action: 'marked this pull request as ready for review',
+  icon: 'i-lucide-check-circle'
+}, {
+  username: 'benjamincanac',
+  date: '2025-05-27T11:01:20Z',
+  action: 'commented on this',
+  description: 'I\'ve made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.',
+  avatar: {
+    src: 'https://github.com/benjamincanac.png'
+  }
+}, {
+  username: 'J-Michalek',
+  date: '2025-05-27T11:01:20Z',
+  action: 'commented on this',
+  description: 'Looks great! Good job on cleaning it up.',
+  avatar: {
+    src: 'https://github.com/J-Michalek.png'
+  }
+}, {
+  username: 'benjamincanac',
+  date: '2025-05-27T11:01:20Z',
+  action: 'merged this',
+  icon: 'i-lucide-git-merge'
+}] satisfies TimelineItem[]
+</script>
+
+<template>
+  <UTimeline
+    :items="items"
+    size="xs"
+    class="w-96"
+    :ui="{
+      date: 'float-end ms-1',
+      description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
+    }"
+  >
+    <template #title="{ item }">
+      <span>{{ item.username }}</span>
+      <span class="font-normal text-muted">&nbsp;{{ item.action }}</span>
+    </template>
+
+    <template #date="{ item }">
+      {{ useTimeAgo(new Date(item.date)) }}
+    </template>
+  </UTimeline>
+</template>

docs/content/1.getting-started/1.index.md

@@ -84,7 +84,7 @@ You can play with Nuxt UI components as well as your app components directly fro
 Install the module to your Nuxt application with one command:
 
 ```bash [Terminal]
-npx nuxi module add compodium
+npx nuxt module add compodium
 ```
 ::
 

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -115,7 +115,7 @@ Start your project using the [nuxt/starter#ui](https://github.com/nuxt/starter/t
 Create a new project locally by running the following command:
 
 ```bash [Terminal]
-npx nuxi init -t ui <my-app>
+npm create nuxt@latest -- -t ui
 ```
 
 ::note

docs/content/1.getting-started/2.installation/2.vue.md

@@ -78,6 +78,22 @@ components.d.ts
 
 ::
 
+::tip
+Internally, Nuxt UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your `tsconfig` to enable auto-completion in your `vite.config.ts`.
+
+```json [tsconfig.node.json]
+{
+  "compilerOptions": {
+    "paths": {
+      "#build/ui": [
+        "./node_modules/@nuxt/ui/.nuxt/ui"
+      ]
+    }
+  }
+}
+```
+::
+
 #### Use the Nuxt UI Vue plugin in your `main.ts`
 
 ```ts [main.ts]{3,14}
@@ -179,7 +195,7 @@ Start your project using the [nuxtlabs/nuxt-ui-vue-starter](https://github.com/n
 Create a new project locally by running the following command:
 
 ```bash [Terminal]
-npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>
+npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter
 ```
 
 ::note

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
 
 ### Custom locale
 
-You also have the option to add your own locale using `defineLocale`:
+You can create your own locale using the `defineLocale` composable:
 
 ::module-only
 
@@ -125,6 +125,65 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
 
 ::
 
+### Extend locale :badge{label="Soon" class="align-text-top"}
+
+You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
+
+::module-only
+
+#ui
+:::div
+
+```vue [app.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui/locale'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+:::
+
+#ui-pro
+:::div
+
+```vue [app.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui-pro/locale'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+:::
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
 
 ### Custom locale
 
-You also have the option to add your locale using `defineLocale`:
+You can create your own locale using the `defineLocale` composable:
 
 ::module-only
 
@@ -127,6 +127,67 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
 
 ::
 
+### Extend locale :badge{label="Soon" class="align-text-top"}
+
+You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
+
+::module-only
+
+#ui
+:::div
+
+```vue [App.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui/locale'
+import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <RouterView />
+  </UApp>
+</template>
+```
+
+:::
+
+#ui-pro
+:::div
+
+```vue [App.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui-pro/locale'
+import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <RouterView />
+  </UApp>
+</template>
+```
+
+:::
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.

docs/content/1.getting-started/contribution.md

@@ -225,7 +225,7 @@ pnpm run test:vue # for Vue
 ```
 
 ::tip
-If you have to update the snapshots, press `u` when running the tests.
+If you have to update the snapshots, press `u` after the tests have finished running.
 ::
 
 ### Commit Conventions

docs/content/2.composables/use-overlay.md

@@ -1,6 +1,6 @@
 ---
 title: useOverlay
-description: "A composable to programmatically control overlays."
+description: 'A composable to programmatically control overlays.'
 ---
 
 ## Usage
@@ -9,9 +9,11 @@ Use the auto-imported `useOverlay` composable to programmatically control [Modal
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModal)
+const modal = overlay.create(LazyModalExample)
 
 async function openModal() {
   modal.open()
@@ -29,71 +31,73 @@ In order to return a value from the overlay, the `overlay.open().instance.result
 
 ### `create(component: T, options: OverlayOptions): OverlayInstance`
 
-Creates an overlay, and returns a factory instance
+Create an overlay, and return a factory instance.
 
 - Parameters:
-  - `component`: The overlay component
-  - `options` The overlay options
-    - `defaultOpen?: boolean` Opens the overlay immediately after being created `default: false`
+  - `component`: The overlay component.
+  - `options`:
+    - `defaultOpen?: boolean` Open the overlay immediately after being created. Defaults to `false`.
     - `props?: ComponentProps`: An optional object of props to pass to the rendered component.
-    - `destroyOnClose?: boolean` Removes the overlay from memory when closed `default: false`
+    - `destroyOnClose?: boolean` Removes the overlay from memory when closed. Defaults to `false`.
 
 ### `open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`
 
-Opens the overlay using its `id`
+Open an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
   - `props`: An optional object of props to pass to the rendered component.
 
 ### `close(id: symbol, value?: any): void`
 
-Close an overlay using its `id`
+Close an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
-  - `value`: A value to resolve the overlay promise with
+  - `id`: The identifier of the overlay.
+  - `value`: A value to resolve the overlay promise with.
 
 ### `patch(id: symbol, props: ComponentProps<T>): void`
 
-Update an overlay using its `id`
+Update an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
   - `props`: An object of props to update on the rendered component.
 
-### `unMount(id: symbol): void`
+### `unmount(id: symbol): void`
 
-Removes the overlay from the DOM using its `id`
+Remove an overlay from the DOM by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
 
 ### `isOpen(id: symbol): boolean`
 
-Checks if an overlay its open using its `id`
+Check if an overlay is open using its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
 
 ### `overlays: Overlay[]`
 
-In-memory list of overlays that were created
+In-memory list of all overlays that were created.
 
-## Overlay Instance API
+## Instance API
 
 ### `open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`
 
-Opens the overlay
+Open the overlay.
 
 - Parameters:
   - `props`: An optional object of props to pass to the rendered component.
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModalContent)
+const modal = overlay.create(LazyModalExample)
 
 function openModal() {
   modal.open({
@@ -105,23 +109,25 @@ function openModal() {
 
 ### `close(value?: any): void`
 
-Close the overlay
+Close the overlay.
 
 - Parameters:
-  - `value`: A value to resolve the overlay promise with
+  - `value`: A value to resolve the overlay promise with.
 
 ### `patch(props: ComponentProps<T>)`
 
-Updates the props of the overlay.
+Update the props of the overlay.
 
 - Parameters:
   - `props`: An object of props to update on the rendered component.
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModal, {
+const modal = overlay.create(LazyModalExample, {
   title: 'Welcome'
 })
 
@@ -141,6 +147,8 @@ Here's a complete example of how to use the `useOverlay` composable:
 
 ```vue
 <script setup lang="ts">
+import { ModalA, ModalB, SlideoverA } from '#components'
+
 const overlay = useOverlay()
 
 // Create with default props
@@ -150,7 +158,7 @@ const modalB = overlay.create(ModalB)
 const slideoverA = overlay.create(SlideoverA)
 
 const openModalA = () => {
-  // Open  Modal A, but override the title prop
+  // Open modalA, but override the title prop
   modalA.open({ title: 'Hello' })
 }
 
@@ -160,16 +168,37 @@ const openModalB = async () => {
 
   const input = await modalBInstance.result
 
-  // Pass the result from modalB to the slideover, and open it.
+  // Pass the result from modalB to the slideover, and open it
   slideoverA.open({ input })
 }
 </script>
 
 <template>
-  <div>
-    <button @click="openModal">Open Modal</button>
-  </div>
+  <button @click="openModalA">Open Modal</button>
 </template>
 ```
 
 In this example, we're using the `useOverlay` composable to control multiple modals and slideovers.
+
+## Caveats
+
+### Provide / Inject
+
+When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing `UApp` (typically `app.vue` or layout components). This is because overlays are mounted outside of the page context by the `UApp` component.
+
+As such, using `provide()` in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:
+
+```vue
+<script setup lang="ts">
+import { LazyModalExample } from '#components'
+
+const providedValue = inject('valueProvidedInPage')
+
+const modal = overlay.create(LazyModalExample, {
+  props: {
+    providedValue,
+    otherData: someValue
+  }
+})
+</script>
+```

docs/content/3.components/button.md

@@ -258,13 +258,13 @@ This also works with the [Form](/components/form) component.
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
 props:
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
 slots:
   default: Button
 ---

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.
@@ -279,7 +407,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -295,7 +423,7 @@ class: '!p-0'
 props:
   autofocus: false
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   groups:
     - id: 'apps'
       items:
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
 :::
 ::
 
-### Disabled
-
-Use the `disabled` prop to disable the CommandPalette.
-
-::component-code
----
-collapse: true
-hide:
-  - autofocus
-ignore:
-  - groups
-  - class
-external:
-  - groups
-class: '!p-0'
-props:
-  autofocus: false
-  disabled: true
-  groups:
-    - id: 'apps'
-      items:
-        - label: 'Calendar'
-          icon: 'i-lucide-calendar'
-        - label: 'Music'
-          icon: 'i-lucide-music'
-        - label: 'Maps'
-          icon: 'i-lucide-map'
-  class: 'flex-1'
----
-::
-
 ### Close
 
 Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::
 
+### Back :badge{label="Soon" class="align-text-top"}
+
+Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
+
+You can pass any property from the [Button](/components/button) component to customize it.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - back.color
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back:
+    color: primary
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+### Back Icon :badge{label="Soon" class="align-text-top"}
+
+Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - class
+  - groups
+  - back
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back: true
+  backIcon: 'i-lucide-house'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  disabled: true
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-lucide-calendar'
+        - label: 'Music'
+          icon: 'i-lucide-music'
+        - label: 'Maps'
+          icon: 'i-lucide-map'
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
 ### Control selected item(s)
@@ -502,6 +717,28 @@ props:
 This example uses the `@update:model-value` event to reset the search term when an item is selected.
 ::
 
+### With children in items :badge{label="Soon" class="align-text-top"}
+
+You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'command-palette-items-children-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
+::note
+When navigating into a submenu:
+- The search term is reset
+- A back button appears in the input
+- You can go back to the previous group by pressing the :kbd{value="backspace"} key
+::
+
 ### With fetched items
 
 You can fetch items from an API and use them in the CommandPalette.
@@ -658,6 +895,7 @@ You will have access to the following slots:
 
 ::component-example
 ---
+collapse: true
 name: 'command-palette-custom-slot-example'
 class: '!p-0'
 props:

docs/content/3.components/drawer.md

@@ -291,7 +291,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Drawer or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape.
 
@@ -306,6 +306,17 @@ name: 'drawer-dismissible-example'
 In this example, the `header` slot is used to add a close button which is not done by default.
 ::
 
+### With interactive background
+
+Set the `overlay` and `modal` props to `false` alongside the `dismissible` prop to make the Drawer's background interactive without closing the Drawer.
+
+::component-example
+---
+prettier: true
+name: 'drawer-modal-example'
+---
+::
+
 ### Responsive drawer
 
 You can render a [Modal](/components/modal) component on desktop and a Drawer on mobile for example.

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

@@ -135,7 +135,7 @@ props:
 
 ### Multiple
 
-Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
+Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.
 
 ::component-code
 ---
@@ -166,7 +166,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
 
 ### Delete Icon
 
-With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
+With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -518,7 +518,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -532,7 +532,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   items:
     - Backlog
     - Todo
@@ -612,7 +612,7 @@ props:
 ---
 ::
 
-### With icons in items
+### With icon in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 
@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

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

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

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

@@ -0,0 +1,285 @@
+---
+title: InputTags
+description: An input element that displays interactive tags.
+category: form
+links:
+  - label: InputTags
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/tags-input
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+props:
+  defaultValue: ['Vue']
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: 'Enter tags...'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the InputTags is focused.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  color: neutral
+  highlight: true
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variants
+
+Use the `variant` prop to change the appearance of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  variant: subtle
+  color: neutral
+  highlight: false
+---
+::
+
+### Sizes
+
+Use the `size` prop to adjust the size of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  size: xl
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/components/icon) inside the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  icon: 'i-lucide-search'
+  size: md
+  variant: outline
+---
+::
+
+::note
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+::
+
+### Avatar
+
+Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  avatar:
+    src: 'https://github.com/vuejs.png'
+  size: md
+  variant: outline
+---
+::
+
+### Delete Icon
+
+Use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  deleteIcon: 'i-lucide-trash'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
+:::
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon on the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  loading: true
+  trailing: false
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  loading: true
+  loadingIcon: 'i-lucide-loader'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  disabled: true
+---
+::
+
+## Examples
+
+### Within a FormField
+
+You can use the InputTags within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-tags-form-field-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+: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 TagsInputInput> \| null>`{lang="ts-type"} |
+
+## Theme
+
+:component-theme

docs/content/3.components/input.md

@@ -172,7 +172,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -180,7 +180,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   placeholder: 'Search...'
 ---
 ::
@@ -278,6 +278,16 @@ name: 'input-kbd-example'
 This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
 ::
 
+### With mask
+
+There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
+
+::component-example
+---
+name: 'input-mask-example'
+---
+::
+
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.

docs/content/3.components/modal.md

@@ -274,7 +274,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Modal or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
@@ -305,13 +305,13 @@ slots:
 
 ### Programmatic usage
 
-You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programmatically.
 
 ::warning
 Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
 ::
 
-First, create a modal component that will be opened programatically:
+First, create a modal component that will be opened programmatically:
 
 ::component-example
 ---

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

@@ -23,8 +23,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
-- `type?: 'label' | 'link'`{lang="ts-type"}
-- `collapsible?: boolean`{lang="ts-type"}
+- `type?: 'label' | 'trigger' | 'link'`{lang="ts-type"}
 - `defaultOpen?: boolean`{lang="ts-type"}
 - `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
@@ -33,7 +32,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - `children?: NavigationMenuChildItem[]`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
-- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 
@@ -145,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
+When orientation is `vertical`, an [Accordion](/components/accordion) component is used to display each group. You can control the open state of each item using the `open` and `defaultOpen` properties and change the behavior using the [`collapsible`](/components/accordion#collapsible) and [`type`](/components/accordion#multiple) props.
 ::
 
 ::component-code
@@ -244,7 +243,11 @@ Groups will be spaced when orientation is `horizontal` and separated when orient
 
 ### Collapsed
 
-Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
+In `vertical` orientation, use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
+
+::note
+You can use the [`tooltip`](#with-tooltip-in-items) and [`popover`](#with-popover-in-items) props to display more information on the collapsed items.
+::
 
 ::component-code
 ---
@@ -257,8 +260,17 @@ external:
   - items
 externalTypes:
   - NavigationMenuItem[][]
+items:
+  tooltip:
+    - true
+    - false
+  popover:
+    - true
+    - false
 props:
   collapsed: true
+  tooltip: false
+  popover: false
   orientation: 'vertical'
   items:
     - - label: Links
@@ -283,8 +295,6 @@ props:
             description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
       - label: Composables
         icon: i-lucide-database
-        collapsible: false
-        open: false
         children:
           - label: defineShortcuts
             icon: i-lucide-file-text
@@ -300,8 +310,6 @@ props:
             to: /composables/use-toast
       - label: Components
         icon: i-lucide-box
-        collapsible: false
-        open: false
         to: /components
         active: true
         children:
@@ -340,10 +348,6 @@ props:
 ---
 ::
 
-::tip
-You can set the `collapsible: false` property on items with children to prevent them from being collapsible. This allows the item to act as a regular link while still displaying its children in a submenu.
-::
-
 ### Highlight
 
 Use the `highlight` prop to display a highlighted border for the active item.
@@ -885,9 +889,11 @@ You can inspect the DOM to see each item's content being rendered.
 
 ## Examples
 
-### With tooltips in items :badge{label="New" class="align-text-top"}
+### With tooltip in items :badge{label="New" class="align-text-top"}
 
-You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
+When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.
+
+You can pass any property from the [Tooltip](/components/tooltip) component globally or on each item.
 
 ::component-code
 ---
@@ -900,7 +906,12 @@ external:
   - items
 externalTypes:
   - NavigationMenuItem[][]
+items:
+  tooltip:
+    - true
+    - false
 props:
+  tooltip: true
   collapsed: true
   orientation: 'vertical'
   items:
@@ -908,40 +919,24 @@ props:
         type: 'label'
       - label: Guide
         icon: i-lucide-book-open
-        tooltip:
-          text: 'Guide'
         children:
           - label: Introduction
             description: Fully styled and customizable components for Nuxt.
             icon: i-lucide-house
-            tooltip:
-              text: 'Introduction'
           - label: Installation
             description: Learn how to install and configure Nuxt UI in your application.
             icon: i-lucide-cloud-download
-            tooltip:
-              text: 'Installation'
           - label: 'Icons'
             icon: 'i-lucide-smile'
             description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-            tooltip:
-              text: 'Icons'
           - label: 'Colors'
             icon: 'i-lucide-swatch-book'
             description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
-            tooltip:
-              text: 'Colors'
           - label: 'Theme'
             icon: 'i-lucide-cog'
             description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
-            tooltip:
-              text: 'Theme'
       - label: Composables
         icon: i-lucide-database
-        tooltip:
-          text: 'Composables'
-        collapsible: false
-        open: false
         children:
           - label: defineShortcuts
             icon: i-lucide-file-text
@@ -957,12 +952,8 @@ props:
             to: /composables/use-toast
       - label: Components
         icon: i-lucide-box
-        tooltip:
-          text: 'Components'
         to: /components
         active: true
-        collapsible: false
-        open: false
         children:
           - label: Link
             icon: i-lucide-file-text
@@ -994,17 +985,126 @@ props:
         to: https://github.com/nuxt/ui
         target: _blank
         tooltip:
-          text: 'GitHub'
+          text: 'Open on GitHub'
           kbds:
             - 3.8k
       - label: Help
         icon: i-lucide-circle-help
         disabled: true
-        tooltip:
-          text: 'Help'
 ---
 ::
 
+### With popover in items :badge{label="New" class="align-text-top"}
+
+When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.
+
+You can pass any property from the [Popover](/components/popover) component globally or on each item.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - orientation
+  - class
+external:
+  - items
+externalTypes:
+  - NavigationMenuItem[][]
+items:
+  popover:
+    - true
+    - false
+props:
+  popover: true
+  collapsed: true
+  orientation: 'vertical'
+  items:
+    - - label: Links
+        type: 'label'
+      - label: Guide
+        icon: i-lucide-book-open
+        children:
+          - label: Introduction
+            description: Fully styled and customizable components for Nuxt.
+            icon: i-lucide-house
+          - label: Installation
+            description: Learn how to install and configure Nuxt UI in your application.
+            icon: i-lucide-cloud-download
+          - label: 'Icons'
+            icon: 'i-lucide-smile'
+            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+          - label: 'Colors'
+            icon: 'i-lucide-swatch-book'
+            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
+          - label: 'Theme'
+            icon: 'i-lucide-cog'
+            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      - label: Composables
+        icon: i-lucide-database
+        popover:
+          mode: 'click'
+        children:
+          - label: defineShortcuts
+            icon: i-lucide-file-text
+            description: Define shortcuts for your application.
+            to: /composables/define-shortcuts
+          - label: useOverlay
+            icon: i-lucide-file-text
+            description: Display a modal/slideover within your application.
+            to: /composables/use-overlay
+          - label: useToast
+            icon: i-lucide-file-text
+            description: Display a toast within your application.
+            to: /composables/use-toast
+      - label: Components
+        icon: i-lucide-box
+        to: /components
+        active: true
+        children:
+          - label: Link
+            icon: i-lucide-file-text
+            description: Use NuxtLink with superpowers.
+            to: /components/link
+          - label: Modal
+            icon: i-lucide-file-text
+            description: Display a modal within your application.
+            to: /components/modal
+          - label: NavigationMenu
+            icon: i-lucide-file-text
+            description: Display a list of links.
+            to: /components/navigation-menu
+          - label: Pagination
+            icon: i-lucide-file-text
+            description: Display a list of pages.
+            to: /components/pagination
+          - label: Popover
+            icon: i-lucide-file-text
+            description: Display a non-modal dialog that floats around a trigger element.
+            to: /components/popover
+          - label: Progress
+            icon: i-lucide-file-text
+            description: Show a horizontal bar to indicate task progression.
+            to: /components/progress
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+        tooltip:
+          text: 'Open on GitHub'
+          kbds:
+            - 3.8k
+      - label: Help
+        icon: i-lucide-circle-help
+        disabled: true
+---
+::
+
+::tip{to="#with-content-slot"}
+You can use the `#content` slot to customize the content of the popover in the `vertical` orientation.
+::
+
 ### Control active item
 
 You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
@@ -1052,6 +1152,7 @@ Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`)
 
 ::component-example
 ---
+collapse: true
 name: 'navigation-menu-content-slot-example'
 ---
 ::

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

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

docs/content/3.components/popover.md

@@ -181,7 +181,7 @@ name: 'popover-open-example'
 In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
@@ -202,6 +202,21 @@ name: 'popover-command-palette-example'
 ---
 ::
 
+### With anchor slot :badge{label="New" class="align-text-top"}
+
+You can use the `#anchor` slot to position the Popover against a custom element.
+
+::warning
+This slot only works when `mode` is `click`.
+::
+
+::component-example
+---
+collapse: true
+name: 'popover-anchor-slot-example'
+---
+::
+
 ## API
 
 ### Props

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

@@ -555,7 +555,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -570,7 +570,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   items:
     - Backlog
     - Todo
@@ -655,7 +655,7 @@ props:
 ---
 ::
 
-### With icons in items
+### With icon in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 
@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/select.md

@@ -507,7 +507,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -522,7 +522,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   items:
     - Backlog
     - Todo
@@ -607,7 +607,7 @@ props:
 ---
 ::
 
-### With icons in items
+### With icon in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 
@@ -709,6 +709,14 @@ collapse: true
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/slideover.md

@@ -273,7 +273,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Slideover or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
@@ -304,13 +304,13 @@ slots:
 
 ### Programmatic usage
 
-You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programmatically.
 
 ::warning
 Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
 ::
 
-First, create a slideover component that will be opened programatically:
+First, create a slideover component that will be opened programmatically:
 
 ::component-example
 ---

docs/content/3.components/stepper.md

@@ -200,6 +200,10 @@ Use the `#content` slot to customize the content of each item.
 
 Use the `slot` property to customize a specific item.
 
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+
 :component-example{name="stepper-custom-slot-example"}
 
 ## API

docs/content/3.components/switch.md

@@ -109,7 +109,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -118,7 +118,7 @@ ignore:
   - defaultValue
 props:
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   defaultValue: true
   label: Check me
 ---

docs/content/3.components/tabs.md

@@ -222,6 +222,10 @@ Use the `#content` slot to customize the content of each item.
 
 Use the `slot` property to customize a specific item.
 
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+
 :component-example{name="tabs-custom-slot-example"}
 
 ## API
@@ -238,6 +242,14 @@ Use the `slot` property to customize a specific item.
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/textarea.md

@@ -194,7 +194,7 @@ props:
 
 ### Loading Icon :badge{label="New" class="align-text-top"}
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 
 ::component-code
 ---
@@ -202,7 +202,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: 'i-lucide-repeat-2'
+  loadingIcon: 'i-lucide-loader'
   placeholder: 'Search...'
   rows: 1
 ---

docs/content/3.components/timeline.md

@@ -0,0 +1,269 @@
+---
+title: Timeline
+description: 'A component that displays a sequence of events with dates, titles, icons or avatars.'
+category: data
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `date?: string`{lang="ts-type"}
+- `title?: string`{lang="ts-type"}
+- `description?: AvatarProps`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `value?: string | number`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  defaultValue: 2
+  items:
+    - date: 'Mar 15, 2025'
+      title: 'Project Kickoff'
+      description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
+      icon: 'i-lucide-rocket'
+    - date: 'Mar 22 2025'
+      title: 'Design Phase'
+      description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
+      icon: 'i-lucide-palette'
+    - date: 'Mar 29 2025'
+      title: 'Development Sprint'
+      description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
+      icon: 'i-lucide-code'
+    - date: 'Apr 5 2025'
+      title: 'Testing & Deployment'
+      description: 'QA testing and performance optimization. Deployed the application to production.'
+      icon: 'i-lucide-check-circle'
+  class: 'w-96'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the active items in a Timeline.
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  color: neutral
+  defaultValue: 2
+  items:
+    - date: 'Mar 15, 2025'
+      title: 'Project Kickoff'
+      description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
+      icon: 'i-lucide-rocket'
+    - date: 'Mar 22 2025'
+      title: 'Design Phase'
+      description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
+      icon: 'i-lucide-palette'
+    - date: 'Mar 29 2025'
+      title: 'Development Sprint'
+      description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
+      icon: 'i-lucide-code'
+    - date: 'Apr 5 2025'
+      title: 'Testing & Deployment'
+      description: 'QA testing and performance optimization. Deployed the application to production.'
+      icon: 'i-lucide-check-circle'
+  class: 'w-96'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Timeline.
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  size: xs
+  defaultValue: 2
+  items:
+    - date: 'Mar 15, 2025'
+      title: 'Project Kickoff'
+      description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
+      icon: 'i-lucide-rocket'
+    - date: 'Mar 22 2025'
+      title: 'Design Phase'
+      description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
+      icon: 'i-lucide-palette'
+    - date: 'Mar 29 2025'
+      title: 'Development Sprint'
+      description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
+      icon: 'i-lucide-code'
+    - date: 'Apr 5 2025'
+      title: 'Testing & Deployment'
+      description: 'QA testing and performance optimization. Deployed the application to production.'
+      icon: 'i-lucide-check-circle'
+  class: 'w-96'
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`.
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  orientation: 'horizontal'
+  defaultValue: 2
+  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'
+---
+::
+
+### 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
+
+You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+:component-example{name="timeline-model-value-example" prettier}
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### With alternating layout
+
+Use the `ui` prop to create a Timeline with alternating layout.
+
+:component-example{name="timeline-alternating-layout-example" prettier}
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}-indicator`{lang="ts-type"}
+- `#{{ item.slot }}-date`{lang="ts-type"}
+- `#{{ item.slot }}-title`{lang="ts-type"}
+- `#{{ item.slot }}-description`{lang="ts-type"}
+
+:component-example{name="timeline-custom-slot-example" prettier}
+
+### With slots
+
+Use the available slots to create a more complex Timeline.
+
+:component-example{name="timeline-slots-example" prettier}
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

docs/content/3.components/tree.md

@@ -407,7 +407,14 @@ This lets you select a parent item without expanding or collapsing its children.
 
 ### With custom slot
 
-Use the `item.slot` property to customize a specific item.
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
 
 ::component-example
 ---

docs/modules/showcase.ts

@@ -33,7 +33,7 @@ export default defineNuxtModule((_, nuxt) => {
       }
 
       const name = template.name.toLowerCase().replace(/\s/g, '-')
-      const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
+      const filename = join(nuxt.options.rootDir, 'public/assets/showcase', `${name}.png`)
 
       if (existsSync(filename)) {
         continue

docs/package.json

@@ -2,41 +2,48 @@
   "private": true,
   "name": "@nuxt/ui-docs",
   "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "typecheck": "nuxt typecheck"
+  },
   "dependencies": {
     "@ai-sdk/vue": "^1.2.12",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.43",
-    "@iconify-json/simple-icons": "^1.2.34",
-    "@iconify-json/vscode-icons": "^1.2.21",
+    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/simple-icons": "^1.2.38",
+    "@iconify-json/vscode-icons": "^1.2.22",
     "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
-    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^3.1.2",
-    "@nuxthub/core": "^0.8.27",
+    "@nuxt/ui": "workspace:*",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
+    "@nuxthub/core": "^0.9.0",
     "@nuxtjs/plausible": "^1.2.0",
-    "@octokit/rest": "^21.1.1",
+    "@octokit/rest": "^22.0.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.2.0",
-    "@vueuse/nuxt": "^13.2.0",
-    "ai": "^4.3.15",
+    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/nuxt": "^13.3.0",
+    "ai": "^4.3.16",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "motion-v": "^1.0.2",
-    "nuxt": "^3.17.3",
+    "maska": "^3.1.1",
+    "motion-v": "^1.2.1",
+    "nuxt": "^3.17.5",
     "nuxt-component-meta": "^0.11.0",
-    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.3",
+    "nuxt-llms": "^0.1.3",
+    "nuxt-og-image": "^5.1.6",
     "prettier": "^3.5.3",
     "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.4.1",
+    "workers-ai-provider": "^0.6.0",
     "yup": "^1.6.1",
-    "zod": "^3.24.4"
+    "zod": "^3.25.57"
   },
   "devDependencies": {
-    "wrangler": "^4.15.1"
+    "wrangler": "^4.19.1"
   }
 }

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.2",
-  "packageManager": "pnpm@10.11.0",
+  "version": "3.1.3",
+  "packageManager": "pnpm@10.12.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -96,38 +96,37 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "nuxi dev playground --uiDev",
-    "dev:build": "nuxi build playground",
+    "dev": "nuxt dev playground --uiDev",
+    "dev:build": "nuxt build playground",
     "dev:vue": "vite playground-vue -- --uiDev",
     "dev:vue:build": "vite build playground-vue",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
-    "docs": "nuxi dev docs --uiDev",
-    "docs:build": "nuxi build docs",
-    "docs:prepare": "nuxt-component-meta docs",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && vite build playground-vue",
+    "docs": "nuxt dev docs --uiDev",
+    "docs:build": "nuxt build docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
     "release": "release-it"
   },
   "dependencies": {
-    "@iconify/vue": "^4.3.0",
-    "@internationalized/date": "^3.8.0",
-    "@internationalized/number": "^3.6.1",
+    "@iconify/vue": "^5.0.0",
+    "@internationalized/date": "^3.8.2",
+    "@internationalized/number": "^3.6.3",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.12.0",
-    "@nuxt/kit": "^3.17.3",
-    "@nuxt/schema": "^3.17.3",
+    "@nuxt/icon": "^1.13.0",
+    "@nuxt/kit": "^3.17.5",
+    "@nuxt/schema": "^3.17.5",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.6",
-    "@tailwindcss/vite": "^4.1.6",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.10",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.8",
-    "@vueuse/core": "^13.2.0",
-    "@vueuse/integrations": "^13.2.0",
-    "colortranslator": "^4.1.0",
+    "@unhead/vue": "^2.0.10",
+    "@vueuse/core": "^13.3.0",
+    "@vueuse/integrations": "^13.3.0",
+    "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "embla-carousel-auto-height": "^8.6.0",
@@ -144,29 +143,29 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "^2.2.1",
+    "reka-ui": "2.3.1",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.6",
-    "tinyglobby": "^0.2.13",
-    "unplugin": "^2.3.4",
-    "unplugin-auto-import": "^19.2.0",
-    "unplugin-vue-components": "^28.5.0",
-    "vaul-vue": "^0.4.1",
+    "tailwindcss": "^4.1.10",
+    "tinyglobby": "^0.2.14",
+    "unplugin": "^2.3.5",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.7.0",
+    "vaul-vue": "0.4.1",
     "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.1",
+    "@nuxt/eslint-config": "^1.4.1",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.18.0",
+    "@nuxt/test-utils": "^3.19.1",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.26.0",
-    "happy-dom": "^17.4.7",
-    "nuxt": "^3.17.3",
-    "release-it": "^19.0.2",
-    "vitest": "^3.1.3",
+    "eslint": "^9.28.0",
+    "happy-dom": "^17.6.3",
+    "nuxt": "^3.17.5",
+    "release-it": "^19.0.3",
+    "vitest": "^3.2.3",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.10"
   },
@@ -209,7 +208,7 @@
     "debug": "4.3.7",
     "rollup": "4.34.9",
     "unimport": "4.1.1",
-    "unplugin": "^2.3.4"
+    "unplugin": "^2.3.5"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

playground-vue/package.json

@@ -10,10 +10,10 @@
     "typecheck": "vue-tsc -p ./tsconfig.app.json"
   },
   "dependencies": {
-    "@nuxt/ui": "latest",
-    "vue": "^3.5.14",
+    "@nuxt/ui": "workspace:*",
+    "vue": "^3.5.16",
     "vue-router": "^4.5.1",
-    "zod": "^3.24.4"
+    "zod": "^3.25.57"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",

playground-vue/src/app.vue

@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-tags',
   'kbd',
   'link',
   'modal',
@@ -61,6 +62,7 @@ const components = [
   'tabs',
   'table',
   'textarea',
+  'timeline',
   'toast',
   'tooltip',
   'tree'

playground/app/app.vue

@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-tags',
   'kbd',
   'link',
   'modal',
@@ -61,6 +62,7 @@ const components = [
   'tabs',
   'table',
   'textarea',
+  'timeline',
   'toast',
   'tooltip',
   'tree'

playground/app/pages/components/calendar.vue

@@ -2,19 +2,23 @@
 import { CalendarDate } from '@internationalized/date'
 
 const singleValue = shallowRef(new CalendarDate(2022, 1, 10))
-const multipleValue = shallowRef({
+const multipleValue = shallowRef([new CalendarDate(2022, 1, 10), new CalendarDate(2022, 1, 20)])
+const rangeValue = shallowRef({
   start: new CalendarDate(2022, 1, 10),
   end: new CalendarDate(2022, 1, 20)
 })
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex gap-4">
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="multipleValue" range />
+      <UCalendar v-model="multipleValue" multiple />
+    </div>
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="rangeValue" range />
     </div>
   </div>
 </template>

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

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

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

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

playground/app/pages/components/input-menu.vue

@@ -47,7 +47,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-48">
-      <UInputMenu :items="items" autofocus placeholder="Search..." />
+      <UInputMenu :items="items" autofocus placeholder="Search..." default-value="Apple" />
     </div>
     <div class="flex items-center gap-2">
       <UInputMenu
@@ -145,5 +145,18 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
         class="w-48"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <UInputMenu
+        v-for="variant in variants"
+        :key="variant"
+        :items="items"
+        :model-value="[fruits[0]!]"
+        multiple
+        icon="i-lucide-search"
+        placeholder="Search..."
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
   </div>
 </template>

playground/app/pages/components/input-tags.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import theme from '#build/ui/input-tags'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+const tags = ref(['Vue', 'Nuxt'])
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTags
+        v-model="tags"
+        placeholder="Enter tags..."
+        autofocus
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="neutral"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="error"
+        highlight
+        class="w-48"
+      />
+    </div>
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTags placeholder="Disabled" disabled />
+      <UInputTags placeholder="Required" required />
+      <UInputTags loading placeholder="Loading..." />
+      <UInputTags loading trailing placeholder="Loading..." />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        :size="size"
+        :placeholder="upperFirst(size)"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-search"
+        placeholder="Search..."
+        :size="size"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-search"
+        trailing
+        placeholder="Search..."
+        :size="size"
+        class="w-48"
+      />
+    </div>
+  </div>
+</template>

playground/app/pages/components/modal.vue

@@ -69,5 +69,13 @@ function openModal() {
     </UModal>
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
+
+    <UModal title="First modal">
+      <UButton color="neutral" variant="outline" label="Close with scoped slot close" />
+
+      <template #footer="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+    </UModal>
   </div>
 </template>

playground/app/pages/components/navigation-menu.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
 import theme from '#build/ui/navigation-menu'
 
 const colors = Object.keys(theme.variants.color)
@@ -13,6 +14,9 @@ const orientation = ref('horizontal' as const)
 const contentOrientation = ref('horizontal' as const)
 const highlight = ref(true)
 const collapsed = ref(false)
+const tooltip = ref(false)
+const popover = ref(false)
+const arrow = ref(false)
 
 const items = [
   [{
@@ -42,7 +46,8 @@ const items = [
   }, {
     label: 'Components',
     icon: 'i-lucide-box',
-    to: '/components',
+    to: '/components/navigation-menu',
+    type: 'trigger',
     active: true,
     defaultOpen: true,
     children: [{
@@ -87,7 +92,7 @@ const items = [
     icon: 'i-lucide-circle-help',
     disabled: true
   }]
-]
+] satisfies NavigationMenuItem[][]
 </script>
 
 <template>
@@ -100,10 +105,15 @@ const items = [
       <USwitch v-model="collapsed" label="Collapsed" />
       <USwitch v-model="highlight" label="Highlight" />
       <USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" />
+      <USwitch v-model="tooltip" label="Tooltip" />
+      <USwitch v-model="popover" label="Popover" />
+      <USwitch v-model="arrow" label="Arrow" />
     </div>
 
     <UNavigationMenu
-      arrow
+      :arrow="arrow"
+      :tooltip="tooltip"
+      :popover="popover"
       :collapsed="collapsed"
       :items="items"
       :color="color"

playground/app/pages/components/pin-input.vue

@@ -5,7 +5,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
 
 const onComplete = (e: string[]) => {
-  alert(e.join(''))
+  console.log(e)
 }
 </script>
 

playground/app/pages/components/popover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const open = ref(false)
+const openCustomAnchor = ref(false)
 const loading = ref(false)
 
 function send() {
@@ -51,6 +52,21 @@ function send() {
           </div>
         </template>
       </UPopover>
+
+      <div class="mt-8 relative">
+        <UPopover
+          v-model:open="openCustomAnchor"
+          :dismissible="false"
+        >
+          <template #anchor>
+            <UInput placeholder="Search" class="w-56" @focus="openCustomAnchor = true" />
+          </template>
+
+          <template #content>
+            <Placeholder class="size-48 m-4 inline-flex" />
+          </template>
+        </UPopover>
+      </div>
     </div>
 
     <div class="mt-24">

playground/app/pages/components/select-menu.vue

@@ -52,7 +52,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-48">
-      <USelectMenu :items="items" placeholder="Search..." />
+      <USelectMenu :items="items" placeholder="Search..." default-value="Apple" />
     </div>
     <div class="flex items-center gap-2">
       <USelectMenu

playground/app/pages/components/slideover.vue

@@ -125,5 +125,21 @@ function openSlideover() {
     </USlideover>
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openSlideover" />
+
+    <USlideover title="Slideover with scoped slot close" description="This slideover has a scoped slot close that can be used to close the slideover from within the content.">
+      <UButton color="neutral" variant="subtle" label="Open with scoped slot close" />
+
+      <template #header="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+
+      <template #body="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+
+      <template #footer="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+    </USlideover>
   </div>
 </template>

playground/app/pages/components/timeline.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { TimelineItem } from '@nuxt/ui'
+import theme from '#build/ui/timeline'
+
+const sizes = Object.keys(theme.variants.size)
+const colors = Object.keys(theme.variants.color)
+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',
+  title: 'Project Kickoff',
+  description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
+  icon: 'i-lucide-rocket',
+  value: 'kickoff'
+}, {
+  date: 'Mar 22, 2025',
+  title: 'Design Phase',
+  description: 'User research and design workshops. Created wireframes and prototypes for user testing',
+  icon: 'i-lucide-palette',
+  value: 'design'
+}, {
+  date: 'Mar 29, 2025',
+  title: 'Development Sprint',
+  description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
+  icon: 'i-lucide-code',
+  value: 'development'
+}, {
+  date: 'Apr 5, 2025',
+  title: 'Testing & Deployment',
+  description: 'QA testing and performance optimization. Deployed the application to production.',
+  icon: 'i-lucide-check-circle',
+  value: 'deployment'
+}] satisfies TimelineItem[]
+
+const value = ref('kickoff')
+</script>
+
+<template>
+  <div class="flex flex-col gap-10">
+    <div class="flex items-center justify-center gap-2">
+      <USelect v-model="color" :items="colors" placeholder="Color" />
+      <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
+      v-model="value"
+      :color="color"
+      :orientation="orientation"
+      :size="size"
+      :items="items"
+      :reverse="reverse"
+      class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
+    />
+  </div>
+</template>

playground/package.json

@@ -3,18 +3,19 @@
   "name": "@nuxt/ui-playground",
   "type": "module",
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "generate": "nuxi generate",
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.43",
-    "@iconify-json/simple-icons": "^1.2.34",
-    "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.27",
-    "nuxt": "^3.17.3",
-    "zod": "^3.24.4"
+    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/simple-icons": "^1.2.38",
+    "@internationalized/date": "^3.8.2",
+    "@nuxt/ui": "workspace:*",
+    "@nuxthub/core": "^0.9.0",
+    "nuxt": "^3.17.5",
+    "zod": "^3.25.57"
   },
   "devDependencies": {
     "typescript": "^5.8.3",

renovate.json

@@ -19,7 +19,8 @@
   }, {
     "groupName": "reka-ui",
     "matchPackageNames": [
-      "reka-ui"
+      "reka-ui",
+      "vaul-vue"
     ]
   }, {
     "matchDepTypes": ["peerDependencies"],

src/runtime/components/Avatar.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/avatar'
+import type { ChipProps } from '../types'
 import type { ComponentConfig } from '../types/utils'
 
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>
@@ -22,6 +23,7 @@ export interface AvatarProps {
    * @defaultValue 'md'
    */
   size?: Avatar['variants']['size']
+  chip?: boolean | ChipProps
   class?: any
   style?: any
   ui?: Avatar['slots']
@@ -40,6 +42,7 @@ import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
+import UChip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -81,7 +84,13 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <component
+    :is="props.chip ? UChip : Primitive"
+    :as="as"
+    v-bind="props.chip ? (typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true }) : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="props.style"
+  >
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -101,5 +110,5 @@ function onError() {
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
       </slot>
     </Slot>
-  </Primitive>
+  </component>
 </template>

src/runtime/components/Calendar.vue

@@ -153,8 +153,8 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="rootProps"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="(modelValue as DateValue | DateValue[])"
+    :default-value="(defaultValue as DateValue)"
     :locale="locale"
     :dir="dir"
     :class="ui.root({ class: [props.ui?.root, props.class] })"

src/runtime/components/Carousel.vue

@@ -336,6 +336,7 @@ defineExpose({
           <button
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"
           />
         </template>

src/runtime/components/CommandPalette.vue

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

src/runtime/components/ContextMenuContent.vue

@@ -109,68 +109,70 @@ const groups = computed<ContextMenuItem[][]>(() =>
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.Label>
-          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-          <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <ContextMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.Label>
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <ContextMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey as string)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </ContextMenu.SubTrigger>
+
+              <UContextMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="(item.children as T)"
+                :align-offset="-4"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
+                </template>
+              </UContextMenuContent>
+            </ContextMenu.Sub>
+            <ContextMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey as string)"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </ContextMenu.SubTrigger>
-
-            <UContextMenuContent
-              sub
-              :class="props.class"
-              :ui="ui"
-              :ui-override="uiOverride"
-              :portal="portal"
-              :items="(item.children as T)"
-              :align-offset="-4"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :loading-icon="loadingIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </ContextMenu.CheckboxItem>
+            <ContextMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey as string)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
-              </template>
-            </UContextMenuContent>
-          </ContextMenu.Sub>
-          <ContextMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey as string)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.CheckboxItem>
-          <ContextMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey as string)"
-            @select="item.onSelect"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </ULinkBase>
-            </ULink>
-          </ContextMenu.Item>
-        </template>
-      </ContextMenu.Group>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </ContextMenu.Item>
+          </template>
+        </ContextMenu.Group>
+      </div>
 
       <slot />
 

src/runtime/components/Drawer.vue

@@ -56,7 +56,7 @@ export interface DrawerSlots {
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { useForwardPropsEmits } from 'reka-ui'
+import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -101,6 +101,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
       <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
         <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
         <slot name="content">
           <div :class="ui.container({ class: props.ui?.container })">
             <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">

src/runtime/components/DropdownMenuContent.vue

@@ -115,70 +115,72 @@ const groups = computed<DropdownMenuItem[][]>(() =>
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.Label>
-          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <DropdownMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey as string)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <UDropdownMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="(item.children as T)"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
+                </template>
+              </UDropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey as string)"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.SubTrigger>
-
-            <UDropdownMenuContent
-              sub
-              :class="props.class"
-              :ui="ui"
-              :ui-override="uiOverride"
-              :portal="portal"
-              :items="(item.children as T)"
-              align="start"
-              :align-offset="-4"
-              :side-offset="3"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :loading-icon="loadingIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey as string)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
-              </template>
-            </UDropdownMenuContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey as string)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey as string)"
-            @select="item.onSelect"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </ULinkBase>
-            </ULink>
-          </DropdownMenu.Item>
-        </template>
-      </DropdownMenu.Group>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
 
       <slot />
 

src/runtime/components/Form.vue

@@ -2,12 +2,12 @@
 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 } from '../types/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
 import type { ComponentConfig } from '../types/utils'
 
 type FormConfig = ComponentConfig<typeof theme, AppConfig, 'form'>
 
-export interface FormProps<S extends FormSchema> {
+export interface FormProps<S extends FormSchema, T extends boolean = true> {
   id?: string | number
   /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
   schema?: S
@@ -35,7 +35,7 @@ export interface FormProps<S extends FormSchema> {
    * If true, schema transformations will be applied to the state on submit.
    * @defaultValue `true`
    */
-  transform?: boolean
+  transform?: T
 
   /**
    * If true, this form will attach to its parent Form (if any) and validate at the same time.
@@ -50,20 +50,20 @@ export interface FormProps<S extends FormSchema> {
    */
   loadingAuto?: boolean
   class?: any
-  onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>)
+  onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 
-export interface FormEmits<S extends FormSchema> {
-  (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+  (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void
   (e: 'error', payload: FormErrorEvent): void
 }
 
 export interface FormSlots {
-  default(props?: { errors: FormError[] }): any
+  default(props?: { errors: FormError[], loading: boolean }): any
 }
 </script>
 
-<script lang="ts" setup generic="S extends FormSchema">
+<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 { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -75,17 +75,17 @@ import { FormValidationException } from '../types/form'
 type I = InferInput<S>
 type O = InferOutput<S>
 
-const props = withDefaults(defineProps<FormProps<S>>(), {
+const props = withDefaults(defineProps<FormProps<S, T>>(), {
   validateOn() {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
   validateOnInputDelay: 300,
   attach: true,
-  transform: true,
+  transform: () => true as T,
   loadingAuto: true
 })
 
-const emits = defineEmits<FormEmits<S>>()
+const emits = defineEmits<FormEmits<S, T>>()
 defineSlots<FormSlots>()
 
 const appConfig = useAppConfig() as FormConfig['AppConfig']
@@ -183,10 +183,10 @@ async function getErrors(): Promise<FormErrorWithId[]> {
   return resolveErrorIds(errs)
 }
 
-type ValidateOpts<Silent extends boolean> = { name?: keyof I | (keyof I)[], silent?: Silent, nested?: boolean, transform?: boolean }
-async function _validate(opts: ValidateOpts<false>): Promise<O>
-async function _validate(opts: ValidateOpts<true>): Promise<O | false>
-async function _validate(opts: ValidateOpts<boolean> = { silent: false, nested: true, transform: false }): Promise<O | false> {
+type ValidateOpts<Silent extends boolean, Transform extends boolean> = { name?: keyof I | (keyof I)[], silent?: Silent, nested?: boolean, transform?: Transform }
+async function _validate<T extends boolean>(opts: ValidateOpts<false, T>): Promise<FormData<S, T>>
+async function _validate<T extends boolean>(opts: ValidateOpts<true, T>): Promise<FormData<S, T> | false>
+async function _validate<T extends boolean>(opts: ValidateOpts<boolean, boolean> = { silent: false, nested: true, transform: false }): Promise<FormData<S, T> | false> {
   const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name as (keyof O)[]
 
   const nestedValidatePromises = !names && opts.nested
@@ -227,7 +227,7 @@ async function _validate(opts: ValidateOpts<boolean> = { silent: false, nested:
     Object.assign(props.state, transformedState.value)
   }
 
-  return props.state as O
+  return props.state as FormData<S, T>
 }
 
 const loading = ref(false)
@@ -236,7 +236,7 @@ provide(formLoadingInjectionKey, readonly(loading))
 async function onSubmitWrapper(payload: Event) {
   loading.value = props.loadingAuto && true
 
-  const event = payload as FormSubmitEvent<O>
+  const event = payload as FormSubmitEvent<FormData<S, T>>
 
   try {
     event.data = await _validate({ nested: true, transform: props.transform })
@@ -265,7 +265,7 @@ provide(formOptionsInjectionKey, computed(() => ({
   validateOnInputDelay: props.validateOnInputDelay
 })))
 
-defineExpose<Form<I>>({
+defineExpose<Form<S>>({
   validate: _validate,
   errors,
 
@@ -315,6 +315,6 @@ defineExpose<Form<I>>({
     :class="ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

src/runtime/components/FormField.vue

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

src/runtime/components/Input.vue

@@ -38,6 +38,13 @@ export interface InputProps extends UseComponentIconsProps {
   disabled?: boolean
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  modelModifiers?: {
+    string?: boolean
+    number?: boolean
+    trim?: boolean
+    lazy?: boolean
+    nullify?: boolean
+  }
   class?: any
   ui?: Input['slots']
 }
@@ -77,6 +84,7 @@ const props = withDefaults(defineProps<InputProps>(), {
 const emits = defineEmits<InputEmits<T>>()
 const slots = defineSlots<InputSlots>()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Input['AppConfig']

src/runtime/components/InputMenu.vue

@@ -172,7 +172,7 @@ export interface InputMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
 import { computed, ref, toRef, onMounted, toRaw } from 'vue'
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
@@ -379,6 +379,7 @@ function onSelect(e: Event, item: InputMenuItem) {
 function isInputItem(item: InputMenuItem): item is _InputMenuItem {
   return typeof item === 'object' && item !== null
 }
+
 defineExpose({
   inputRef
 })
@@ -490,7 +491,7 @@ defineExpose({
           </slot>
         </ComboboxEmpty>
 
-        <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
           <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
           <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
@@ -541,7 +542,7 @@ defineExpose({
           </ComboboxGroup>
 
           <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-        </ComboboxViewport>
+        </div>
 
         <slot name="content-bottom" />
 

src/runtime/components/InputNumber.vue

@@ -7,7 +7,7 @@ import type { ComponentConfig } from '../types/utils'
 
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>
 
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -98,7 +98,7 @@ defineSlots<InputNumberSlots>()
 const { t, code: codeLocale } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)

src/runtime/components/InputTags.vue

@@ -0,0 +1,203 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+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'
+import type { ComponentConfig } from '../types/utils'
+
+type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>
+
+export type InputTagItem = AcceptableInputValue
+
+export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: InputTags['variants']['color']
+  /**
+   * @defaultValue 'outline'
+   */
+  variant?: InputTags['variants']['variant']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: InputTags['variants']['size']
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The icon displayed to delete a tag.
+   * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
+   */
+  deleteIcon?: string
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: InputTags['slots']
+}
+
+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
+
+export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
+  'leading'(props?: {}): any
+  'default'(props?: {}): any
+  'trailing'(props?: {}): any
+  'item-text': SlotProps<T>
+  'item-delete': SlotProps<T>
+}
+</script>
+
+<script setup lang="ts" generic="T extends InputTagItem">
+import { computed, ref, onMounted, toRaw } from 'vue'
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+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 })
+
+const props = withDefaults(defineProps<InputTagsProps<T>>(), {
+  type: 'text',
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputTagsEmits<T>>()
+const slots = defineSlots<InputTagsSlots<T>>()
+
+const appConfig = useAppConfig() as InputTags['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'addOnPaste', 'addOnTab', 'addOnBlur', 'duplicate', 'delimiter', 'max', 'convertValue', 'displayValue', 'required'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputTagsProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputTagsProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTags || {}) })({
+  color: color.value,
+  variant: props.variant,
+  size: inputSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
+}))
+
+const inputRef = ref<InstanceType<typeof TagsInputInput> | null>(null)
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+function onUpdate(value: T[]) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emits('blur', event)
+  emitFormBlur()
+}
+
+function onFocus(event: FocusEvent) {
+  emits('focus', event)
+  emitFormFocus()
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <TagsInputRoot
+    :id="id"
+    v-slot="{ modelValue: tags }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: [props.ui?.item] })"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+        <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" />
+      </TagsInputItemText>
+
+      <TagsInputItemDelete
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
+        :disabled="disabled"
+      >
+        <slot name="item-delete" :item="(item as T)" :index="index">
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="placeholder"
+      :class="ui.input({ class: props.ui?.input })"
+    />
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </TagsInputRoot>
+</template>

src/runtime/components/Modal.vue

@@ -55,18 +55,19 @@ export interface ModalProps extends DialogRootProps {
 
 export interface ModalEmits extends DialogRootEmits {
   'after:leave': []
+  'after:enter': []
   'close:prevent': []
 }
 
 export interface ModalSlots {
   default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
+  content(props: { close: () => void }): any
+  header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
-  close(props: { ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props?: {}): any
-  footer(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
 }
 </script>
 
@@ -103,15 +104,15 @@ const contentEvents = computed(() => {
   }
 
   if (!props.dismissible) {
-    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown', 'closeAutoFocus'] as const
-    type EventType = typeof events[number]
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown']
+
     return events.reduce((acc, curr) => {
       acc[curr] = (e: Event) => {
         e.preventDefault()
         emits('close:prevent')
       }
       return acc
-    }, {} as Record<EventType, (e: Event) => void>)
+    }, defaultEvents as Record<typeof events[number] | keyof typeof defaultEvents, (e: Event) => void>)
   }
 
   return defaultEvents
@@ -123,8 +124,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 }))
 </script>
 
+<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
@@ -132,7 +134,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
     <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
@@ -147,9 +149,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header">
+        <slot name="content" :close="close">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header" :close="close">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
@@ -164,16 +166,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                 </DialogDescription>
               </div>
 
-              <DialogClose v-if="close || !!slots.close" as-child>
-                <slot name="close" :ui="ui">
+              <DialogClose v-if="props.close || !!slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
                   <UButton
-                    v-if="close"
+                    v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
                     size="md"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"
-                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    v-bind="(typeof props.close === 'object' ? props.close as Partial<ButtonProps> : {})"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -182,11 +184,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </div>
 
           <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" />
+            <slot name="body" :close="close" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" />
+            <slot name="footer" :close="close" />
           </div>
         </slot>
       </DialogContent>

src/runtime/components/NavigationMenu.vue

@@ -1,9 +1,9 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types'
+import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'
 
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>
@@ -14,7 +14,7 @@ export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'
   [key: string]: any
 }
 
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
   /**
    * @IconifyIcon
@@ -27,41 +27,42 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   badge?: string | number | BadgeProps
   /**
-   * Display a tooltip on the item.
-   * Only works when `type` is `link`.
-   * `{ content: { side: 'right' } }`{lang="ts-type"}
+   * Display a tooltip on the item when the menu is collapsed with the label of the item.
+   * This has priority over the global `tooltip` prop.
    */
-  tooltip?: TooltipProps
+  tooltip?: boolean | TooltipProps
+  /**
+   * Display a popover on the item when the menu is collapsed with the children list.
+   * This has priority over the global `popover` prop.
+   */
+  popover?: boolean | PopoverProps
   /**
    * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The type of the item.
-   * The `label` type only works on `vertical` orientation.
+   * The `label` type is only displayed in `vertical` orientation.
+   * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation.
    * @defaultValue 'link'
    */
-  type?: 'label' | 'link'
+  type?: 'label' | 'trigger' | 'link'
   slot?: string
   /**
    * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
    * @defaultValue `item-${index}`
    */
   value?: string
-  /**
-   * Make the item collapsible.
-   * Only works when `orientation` is `vertical`.
-   * @defaultValue true
-   */
-  collapsible?: boolean
   children?: NavigationMenuChildItem[]
+  defaultOpen?: boolean
+  open?: boolean
   onSelect?(e: Event): void
   class?: any
-  ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>
+  ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>
   [key: string]: any
 }
 
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -100,6 +101,18 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
    * @defaultValue false
    */
   collapsed?: boolean
+  /**
+   * Display a tooltip on the items when the menu is collapsed with the label of the item.
+   * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  tooltip?: boolean | TooltipProps
+  /**
+   * Display a popover on the items when the menu is collapsed with the children list.
+   * `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  popover?: boolean | PopoverProps
   /** Display a line next to the active item. */
   highlight?: boolean
   /**
@@ -149,8 +162,9 @@ export type NavigationMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
 import { computed, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
-import { createReusableTemplate } from '@vueuse/core'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
+import { defu } from 'defu'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get, isArrayOfArray } from '../utils'
 import { tv } from '../utils/tv'
@@ -160,7 +174,7 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UBadge from './Badge.vue'
-import UCollapsible from './Collapsible.vue'
+import UPopover from './Popover.vue'
 import UTooltip from './Tooltip.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
@@ -168,6 +182,8 @@ const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   contentOrientation: 'horizontal',
   externalIcon: true,
   delayDuration: 0,
+  type: 'multiple',
+  collapsible: true,
   unmountOnHide: true,
   labelKey: 'label'
 })
@@ -188,7 +204,10 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
 })), emits)
+const accordionProps = useForwardPropsEmits(reactivePick(props, 'collapsible', 'disabled', 'type', 'unmountOnHide'), emits)
 const contentProps = toRef(() => props.content)
+const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} : props.tooltip, { delayDuration: 0, content: { side: 'right' } }) as TooltipProps)
+const popoverProps = toRef(() => defu(typeof props.popover === 'boolean' ? {} : props.popover, { mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }) as PopoverProps)
 
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
@@ -201,7 +220,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })({
   orientation: props.orientation,
-  contentOrientation: props.contentOrientation,
+  contentOrientation: props.orientation === 'vertical' ? undefined : props.contentOrientation,
   collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
@@ -216,6 +235,24 @@ const lists = computed<NavigationMenuItem[][]>(() =>
       : [props.items]
     : []
 )
+
+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)
+
+  return props.type === 'single' ? indexes[0] : indexes
+}
 </script>
 
 <template>
@@ -237,7 +274,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
         <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
       </span>
 
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
+      <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
         <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
@@ -248,36 +285,62 @@ const lists = computed<NavigationMenuItem[][]>(() =>
             :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
           />
 
-          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length && item.collapsible !== false)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
           <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
         </slot>
-      </span>
+      </component>
     </slot>
   </DefineLinkTemplate>
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="(orientation === 'vertical' && item.children?.length) ? UCollapsible : NavigationMenuItem"
+      :is="(orientation === 'vertical' && !collapsed) ? AccordionItem : NavigationMenuItem"
       as="li"
-      :value="item.value || `item-${index}`"
-      :default-open="item.defaultOpen"
-      :disabled="(orientation === 'vertical' && item.children?.length) ? item.collapsible === false : undefined"
-      :unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
-      :open="item.open"
+      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && item.collapsible !== false) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && !collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </ULinkBase>
+
+            <template #content>
+              <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active || item.active" :index="index">
+                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
+                    {{ get(item, props.labelKey as string) }}
+                  </li>
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
+                    <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                      <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
+                        <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                          <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+
+                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                            {{ get(childItem, props.labelKey as string) }}
+
+                            <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                          </span>
+                        </ULinkBase>
+                      </NavigationMenuLink>
+                    </ULink>
+                  </li>
+                </ul>
+              </slot>
+            </template>
+          </UPopover>
+          <UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey as string)" v-bind="{ ...tooltipProps, ...(typeof item.tooltip === 'boolean' ? {} : item.tooltip || {}) }">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
           </UTooltip>
@@ -287,7 +350,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
         </component>
 
         <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active || item.active" :index="index">
             <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
@@ -314,7 +377,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
         </NavigationMenuContent>
       </ULink>
 
-      <template v-if="orientation === 'vertical' && item.children?.length " #content>
+      <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 })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -325,7 +388,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </ul>
-      </template>
+      </AccordionContent>
     </component>
   </DefineItemTemplate>
 
@@ -333,9 +396,17 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
+      <component
+        v-bind="orientation === 'vertical' && !collapsed ? {
+          ...accordionProps,
+          defaultValue: getAccordionDefaultValue(list)
+        } : {}"
+        :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
+        as="ul"
+        :class="ui.list({ class: props.ui?.list })"
+      >
         <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
-      </NavigationMenuList>
+      </component>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
     </template>

src/runtime/components/OverlayProvider.vue

@@ -2,13 +2,13 @@
 import { computed } from 'vue'
 import { useOverlay, type Overlay } from '../composables/useOverlay'
 
-const { overlays, unMount, close } = useOverlay()
+const { overlays, unmount, close } = useOverlay()
 
 const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
 
 const onAfterLeave = (id: symbol) => {
   close(id)
-  unMount(id)
+  unmount(id)
 }
 
 const onClose = (id: symbol, value: any) => {

src/runtime/components/PinInput.vue

@@ -7,7 +7,9 @@ import type { ComponentConfig } from '../types/utils'
 
 type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>
 
-export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+type PinInputType = 'text' | 'number'
+
+export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<PinInputRootProps<T>, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -37,14 +39,14 @@ export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' |
   ui?: PinInput['slots']
 }
 
-export type PinInputEmits = PinInputRootEmits & {
+export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
   change: [payload: Event]
   blur: [payload: Event]
 }
 
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends PinInputType = 'text'">
 import type { ComponentPublicInstance } from 'vue'
 import { ref, computed, onMounted } from 'vue'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
@@ -54,16 +56,16 @@ import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PinInputProps>(), {
-  type: 'text',
+const props = withDefaults(defineProps<PinInputProps<T>>(), {
+  type: 'text' as never,
   length: 5,
   autofocusDelay: 0
 })
-const emits = defineEmits<PinInputEmits>()
+const emits = defineEmits<PinInputEmits<T>>()
 
 const appConfig = useAppConfig() as PinInput['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'required', 'type'), emits)
 
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
 
@@ -77,7 +79,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pinInput ||
 const inputsRef = ref<ComponentPublicInstance[]>([])
 
 const completed = ref(false)
-function onComplete(value: string[]) {
+function onComplete(value: string[] | number[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emits('change', event)
@@ -113,6 +115,7 @@ defineExpose({
     v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     :name="name"
+    :placeholder="placeholder"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"

src/runtime/components/Popover.vue

@@ -43,6 +43,7 @@ export interface PopoverEmits extends PopoverRootEmits {
 export interface PopoverSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
+  anchor(props?: {}): any
 }
 </script>
 
@@ -74,15 +75,15 @@ const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
 const contentEvents = computed(() => {
   if (!props.dismissible) {
-    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown'] as const
-    type EventType = typeof events[number]
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown']
+
     return events.reduce((acc, curr) => {
       acc[curr] = (e: Event) => {
         e.preventDefault()
         emits('close:prevent')
       }
       return acc
-    }, {} as Record<EventType, (e: Event) => void>)
+    }, {} as Record<typeof events[number], (e: Event) => void>)
   }
 
   return {}
@@ -103,6 +104,10 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
       <slot :open="open" />
     </Component.Trigger>
 
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" />
+    </Component.Anchor>
+
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
         <slot name="content" />

src/runtime/components/Progress.vue

@@ -7,7 +7,7 @@ import type { ComponentConfig } from '../types/utils'
 
 type Progress = ComponentConfig<typeof theme, AppConfig, 'progress'>
 
-export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'getValueText' | 'modelValue'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -70,7 +70,7 @@ const slots = defineSlots<ProgressSlots>()
 const { dir } = useLocale()
 const appConfig = useAppConfig() as Progress['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'getValueText', 'modelValue'), emits)
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
 const hasSteps = computed(() => Array.isArray(props.max))

src/runtime/components/Select.vue

@@ -92,6 +92,8 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
   multiple?: M & boolean
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
   class?: any
   ui?: Select['slots']
 }
@@ -134,8 +136,8 @@ export interface SelectSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-import { computed, toRef } from 'vue'
-import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
+import { ref, computed, onMounted, toRef } from 'vue'
+import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -154,7 +156,8 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<SelectProps<T, VK, M>>(), {
   valueKey: 'value' as never,
   labelKey: 'label' as never,
-  portal: true
+  portal: true,
+  autofocusDelay: 0
 })
 const emits = defineEmits<SelectEmits<T, VK, M>>()
 const slots = defineSlots<SelectSlots<T, VK, M>>()
@@ -193,15 +196,32 @@ const groups = computed<SelectItem[][]>(() =>
 // eslint-disable-next-line vue/no-dupe-keys
 const items = computed(() => groups.value.flatMap(group => group) as T[])
 
-function displayValue(value?: GetItemValue<T, VK> | GetItemValue<T, VK>[]): string {
+function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): string | undefined {
   if (props.multiple && Array.isArray(value)) {
-    return value.map(v => displayValue(v)).filter(Boolean).join(', ')
+    const values = value.map(v => displayValue(v)).filter(Boolean)
+    return values?.length ? values.join(', ') : undefined
   }
 
   const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
+const triggerRef = ref<InstanceType<typeof SelectTrigger> | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    triggerRef.value?.$el?.focus({
+      focusVisible: true
+    })
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
@@ -225,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 -->
@@ -240,7 +264,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
@@ -250,7 +274,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
 
       <slot :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open">
         <template v-for="displayedModelValue in [displayValue(modelValue as GetModelValue<T, VK, M>)]" :key="displayedModelValue">
-          <span v-if="displayedModelValue" :class="ui.value({ class: props.ui?.value })">
+          <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
           </span>
           <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
@@ -270,7 +294,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
       <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <slot name="content-top" />
 
-        <SelectViewport :class="ui.viewport({ class: props.ui?.viewport })">
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
@@ -317,7 +341,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
               </SelectItem>
             </template>
           </SelectGroup>
-        </SelectViewport>
+        </div>
 
         <slot name="content-bottom" />