Merge remote-tracking branch 'origin/v3' into fix/3394

.github/CODEOWNERS

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

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

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

.github/workflows/docs.yml

@@ -6,6 +6,10 @@ 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
@@ -36,10 +40,14 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Deploy to NuxtHub
+      - name: Build application
-        uses: nuxt-hub/action@v2
+        run: pnpm run docs:build
         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
+          directory: docs/dist

.github/workflows/module.yml

@@ -93,7 +93,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.workflow_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 nuxt prepare
+        run: pnpm nuxi prepare
 
       - name: Typecheck
         run: pnpm run typecheck
@@ -138,7 +138,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.workflow_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.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.workflow_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.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/playground.yml

@@ -9,6 +9,10 @@ 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
@@ -36,10 +40,14 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Deploy to NuxtHub
+      - name: Build application
-        uses: nuxt-hub/action@v2
+        run: pnpm run dev:build
         env:
-          NODE_OPTIONS: '--max-old-space-size=8192'
+          NITRO_PRESET: cloudflare-pages
+
+      - name: Deploy to NuxtHub
+        uses: nuxt-hub/action@v1
+        id: deploy
         with:
           project-key: ui3-playground-pb9b
-          directory: playground
+          directory: playground/dist

.github/workflows/reproduction.yml

@@ -1,27 +0,0 @@
-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,7 +1,6 @@
 name: stale
 
 on:
-  workflow_dispatch:
   schedule:
     - cron: '30 1 * * *'
 
@@ -10,28 +9,17 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
-      actions: write
       issues: write
 
     steps:
-      - uses: actions/stale@4c023f01d613e60293d8004f251a18bfb9bbd71d
+      - uses: actions/stale@v9
         with:
-          days-before-pr-stale: -1
+          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          days-before-stale: 60
+          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
-          days-before-close: 7
+          only-labels: 'needs reproduction' # Only process these issues
-          stale-issue-label: 'stale'
+          days-before-issue-close: 7
-          close-issue-label: 'closed-by-bot'
+          ignore-updates: true
-          close-issue-message: |
+          remove-stale-when-updated: false
-            Hi! 👋
+          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
-
+          close-issue-label: closed-by-bot
-            This issue has been automatically **closed** due to prolonged inactivity.
+          operations-per-run: 300 #default 30
-
-            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,40 +1,5 @@
 # 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,7 +22,9 @@ onMounted(() => {
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const githubLink = computed(() => `https://github.com/nuxt/${value.value}`)
+const githubLink = computed(() => {
+  return `https://github.com/nuxt/${value.value}`
+})
 
 const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
 const mobileLinks = computed(() => [
@@ -34,16 +36,6 @@ 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>
@@ -61,7 +53,7 @@ const items = computed(() => {
       <UDropdownMenu
         v-slot="{ open }"
         :modal="false"
-        :items="items"
+        :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' }]"
         :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
         size="xs"
       >

docs/app/components/content/SupportedLanguages.vue

@@ -25,8 +25,6 @@ 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

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-loader-circle" class="shrink-0 size-5 text-primary animate-spin" />
+      <UIcon v-if="loading" name="i-lucide-refresh-cw" 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" :handle="false" :ui="{ header: 'flex items-center justify-between' }">
+  <UDrawer v-model:open="open" :dismissible="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

@@ -1,28 +0,0 @@
-<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,9 +15,6 @@ 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'
   }),
@@ -84,10 +81,6 @@ 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

@@ -1,9 +0,0 @@
-<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-14.5',
+        base: 'pl-[57px]',
         leading: 'pointer-events-none'
       }"
     >

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

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

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

@@ -1,14 +0,0 @@
-<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="{ close }">
+    <template #footer>
-      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
+      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
       <UButton label="Submit" color="neutral" />
     </template>
   </UModal>

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

@@ -1,19 +0,0 @@
-<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="{ close }">
+    <template #footer>
-      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
+      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
       <UButton label="Submit" color="neutral" />
     </template>
   </USlideover>

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

@@ -1,34 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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 nuxt module add compodium
+npx nuxi 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]
-npm create nuxt@latest -- -t ui
+npx nuxi init -t ui <my-app>
 ```
 
 ::note

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

@@ -78,22 +78,6 @@ 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}
@@ -195,7 +179,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]
-npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter
+npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>
 ```
 
 ::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 can create your own locale using the `defineLocale` composable:
+You also have the option to add your own locale using `defineLocale`:
 
 ::module-only
 
@@ -125,65 +125,6 @@ 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 can create your own locale using the `defineLocale` composable:
+You also have the option to add your locale using `defineLocale`:
 
 ::module-only
 
@@ -127,67 +127,6 @@ 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` after the tests have finished running.
+If you have to update the snapshots, press `u` when running the tests.
 ::
 
 ### 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,11 +9,9 @@ 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(LazyModalExample)
+const modal = overlay.create(MyModal)
 
 async function openModal() {
   modal.open()
@@ -31,73 +29,71 @@ In order to return a value from the overlay, the `overlay.open().instance.result
 
 ### `create(component: T, options: OverlayOptions): OverlayInstance`
 
-Create an overlay, and return a factory instance.
+Creates an overlay, and returns a factory instance
 
 - Parameters:
-  - `component`: The overlay component.
+  - `component`: The overlay component
-  - `options`:
+  - `options` The overlay options
-    - `defaultOpen?: boolean` Open the overlay immediately after being created. Defaults to `false`.
+    - `defaultOpen?: boolean` Opens the overlay immediately after being created `default: false`
     - `props?: ComponentProps`: An optional object of props to pass to the rendered component.
-    - `destroyOnClose?: boolean` Removes the overlay from memory when closed. Defaults to `false`.
+    - `destroyOnClose?: boolean` Removes the overlay from memory when closed `default: false`
 
 ### `open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`
 
-Open an overlay by its `id`.
+Opens the overlay using 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 by its `id`.
+Close an overlay using its `id`
 
 - Parameters:
-  - `id`: The identifier of the overlay.
+  - `id`: The identifier of the overlay
-  - `value`: A value to resolve the overlay promise with.
+  - `value`: A value to resolve the overlay promise with
 
 ### `patch(id: symbol, props: ComponentProps<T>): void`
 
-Update an overlay by its `id`.
+Update an overlay using 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`
 
-Remove an overlay from the DOM by its `id`.
+Removes the overlay from the DOM using its `id`
 
 - Parameters:
-  - `id`: The identifier of the overlay.
+  - `id`: The identifier of the overlay
 
 ### `isOpen(id: symbol): boolean`
 
-Check if an overlay is open using its `id`.
+Checks if an overlay its open using its `id`
 
 - Parameters:
-  - `id`: The identifier of the overlay.
+  - `id`: The identifier of the overlay
 
 ### `overlays: Overlay[]`
 
-In-memory list of all overlays that were created.
+In-memory list of overlays that were created
 
-## Instance API
+## Overlay Instance API
 
 ### `open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`
 
-Open the overlay.
+Opens 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(LazyModalExample)
+const modal = overlay.create(MyModalContent)
 
 function openModal() {
   modal.open({
@@ -109,25 +105,23 @@ 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>)`
 
-Update the props of the overlay.
+Updates 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(LazyModalExample, {
+const modal = overlay.create(MyModal, {
   title: 'Welcome'
 })
 
@@ -147,8 +141,6 @@ 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
@@ -158,7 +150,7 @@ const modalB = overlay.create(ModalB)
 const slideoverA = overlay.create(SlideoverA)
 
 const openModalA = () => {
-  // Open modalA, but override the title prop
+  // Open  Modal A, but override the title prop
   modalA.open({ title: 'Hello' })
 }
 
@@ -168,37 +160,16 @@ 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>
-  <button @click="openModalA">Open Modal</button>
+  <div>
+    <button @click="openModal">Open Modal</button>
+  </div>
 </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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
 props:
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
 slots:
   default: Button
 ---

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

@@ -279,7 +279,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -295,7 +295,7 @@ class: '!p-0'
 props:
   autofocus: false
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   groups:
     - id: 'apps'
       items:

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.
 ::
 
-### Disable dismissal
+### Prevent closing
 
 Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape.
 
@@ -306,17 +306,6 @@ 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 tags.
+Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
 
 ::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 tags. Defaults to `i-lucide-x`.
+With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. 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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -532,7 +532,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo
@@ -612,7 +612,7 @@ props:
 ---
 ::
 
-### With icon in items
+### With icons in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 

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

@@ -1,284 +0,0 @@
----
-title: InputTags
-description: An input element that displays interactive tags.
-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<HTMLInputElement \| 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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -180,7 +180,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   placeholder: 'Search...'
 ---
 ::
@@ -278,16 +278,6 @@ 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 librairies 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.
 ::
 
-### Disable dismissal
+### Prevent closing
 
 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 programmatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programatically.
 
 ::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 programmatically:
+First, create a modal component that will be opened programatically:
 
 ::component-example
 ---

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

@@ -23,7 +23,8 @@ 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' | 'trigger' | 'link'`{lang="ts-type"}
+- `type?: 'label' | 'link'`{lang="ts-type"}
+- `collapsible?: boolean`{lang="ts-type"}
 - `defaultOpen?: boolean`{lang="ts-type"}
 - `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
@@ -32,7 +33,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, childLabel?: 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, 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.
 
@@ -144,7 +145,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`, 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.
+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.
 ::
 
 ::component-code
@@ -243,11 +244,7 @@ Groups will be spaced when orientation is `horizontal` and separated when orient
 
 ### Collapsed
 
-In `vertical` orientation, use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
+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
 ---
@@ -260,17 +257,8 @@ external:
   - items
 externalTypes:
   - NavigationMenuItem[][]
-items:
-  tooltip:
-    - true
-    - false
-  popover:
-    - true
-    - false
 props:
   collapsed: true
-  tooltip: false
-  popover: false
   orientation: 'vertical'
   items:
     - - label: Links
@@ -295,6 +283,8 @@ 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
@@ -310,6 +300,8 @@ props:
             to: /composables/use-toast
       - label: Components
         icon: i-lucide-box
+        collapsible: false
+        open: false
         to: /components
         active: true
         children:
@@ -348,6 +340,10 @@ 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.
@@ -889,11 +885,9 @@ You can inspect the DOM to see each item's content being rendered.
 
 ## Examples
 
-### With tooltip in items :badge{label="New" class="align-text-top"}
+### With tooltips in items :badge{label="New" class="align-text-top"}
 
-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 use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
-
-You can pass any property from the [Tooltip](/components/tooltip) component globally or on each item.
 
 ::component-code
 ---
@@ -906,12 +900,7 @@ external:
   - items
 externalTypes:
   - NavigationMenuItem[][]
-items:
-  tooltip:
-    - true
-    - false
 props:
-  tooltip: true
   collapsed: true
   orientation: 'vertical'
   items:
@@ -919,24 +908,40 @@ 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
@@ -952,8 +957,12 @@ 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
@@ -985,126 +994,17 @@ props:
         to: https://github.com/nuxt/ui
         target: _blank
         tooltip:
-          text: 'Open on GitHub'
+          text: 'GitHub'
           kbds:
             - 3.8k
       - label: Help
         icon: i-lucide-circle-help
         disabled: true
----
-::
-
-### 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'
+          text: 'Help'
-          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.
@@ -1152,7 +1052,6 @@ 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/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"}.
 ::
 
-### Disable dismissal
+### Prevent closing
 
 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,21 +202,6 @@ 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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -570,7 +570,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo
@@ -655,7 +655,7 @@ props:
 ---
 ::
 
-### With icon in items
+### With icons in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 

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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -522,7 +522,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo
@@ -607,7 +607,7 @@ props:
 ---
 ::
 
-### With icon in items
+### With icons in items
 
 You can use the `icon` property to display an [Icon](/components/icon) inside the items.
 

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.
 ::
 
-### Disable dismissal
+### Prevent closing
 
 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 programmatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programatically.
 
 ::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 programmatically:
+First, create a slideover component that will be opened programatically:
 
 ::component-example
 ---

docs/content/3.components/stepper.md

@@ -200,10 +200,6 @@ 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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -118,7 +118,7 @@ ignore:
   - defaultValue
 props:
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   defaultValue: true
   label: Check me
 ---

docs/content/3.components/tabs.md

@@ -222,10 +222,6 @@ 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

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-loader-circle`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
 
 ::component-code
 ---
@@ -202,7 +202,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: 'i-lucide-loader'
+  loadingIcon: 'i-lucide-repeat-2'
   placeholder: 'Search...'
   rows: 1
 ---

docs/content/3.components/timeline.md

@@ -1,229 +0,0 @@
----
-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'
----
-::
-
-## 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,14 +407,7 @@ This lets you select a parent item without expanding or collapsing its children.
 
 ### With custom slot
 
-Use the `slot` property to customize a specific item.
+Use the `item.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(nuxt.options.rootDir, 'public/assets/showcase', `${name}.png`)
+      const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
 
       if (existsSync(filename)) {
         continue

docs/package.json

@@ -2,48 +2,41 @@
   "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.47",
+    "@iconify-json/lucide": "^1.2.44",
-    "@iconify-json/simple-icons": "^1.2.38",
+    "@iconify-json/simple-icons": "^1.2.34",
-    "@iconify-json/vscode-icons": "^1.2.22",
+    "@iconify-json/vscode-icons": "^1.2.21",
-    "@nuxt/content": "^3.6.0",
+    "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
-    "@nuxt/ui": "workspace:*",
+    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@9038c43",
-    "@nuxthub/core": "^0.9.0",
+    "@nuxthub/core": "^0.8.27",
     "@nuxtjs/plausible": "^1.2.0",
-    "@octokit/rest": "^22.0.0",
+    "@octokit/rest": "^21.1.1",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/integrations": "^13.2.0",
-    "@vueuse/nuxt": "^13.3.0",
+    "@vueuse/nuxt": "^13.2.0",
     "ai": "^4.3.16",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "maska": "^3.1.1",
+    "motion-v": "^1.0.2",
-    "motion-v": "^1.2.1",
+    "nuxt": "^3.17.3",
-    "nuxt": "^3.17.5",
     "nuxt-component-meta": "^0.11.0",
-    "nuxt-llms": "^0.1.3",
+    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.6",
+    "nuxt-og-image": "^5.1.3",
     "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.6.0",
+    "workers-ai-provider": "^0.4.1",
     "yup": "^1.6.1",
-    "zod": "^3.25.57"
+    "zod": "^3.24.4"
   },
   "devDependencies": {
-    "wrangler": "^4.19.1"
+    "wrangler": "^4.15.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.3",
+  "version": "3.1.2",
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.11.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -96,37 +96,38 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "nuxt dev playground --uiDev",
+    "dev": "nuxi dev playground --uiDev",
-    "dev:build": "nuxt build playground",
+    "dev:build": "nuxi 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 && nuxt prepare playground && nuxt prepare docs && 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": "nuxt dev docs --uiDev",
+    "docs": "nuxi dev docs --uiDev",
-    "docs:build": "nuxt build docs",
+    "docs:build": "nuxi build docs",
+    "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
     "release": "release-it"
   },
   "dependencies": {
-    "@iconify/vue": "^5.0.0",
+    "@iconify/vue": "^4.3.0",
-    "@internationalized/date": "^3.8.2",
+    "@internationalized/date": "^3.8.0",
-    "@internationalized/number": "^3.6.3",
+    "@internationalized/number": "^3.6.1",
     "@nuxt/fonts": "^0.11.4",
     "@nuxt/icon": "^1.13.0",
-    "@nuxt/kit": "^3.17.5",
+    "@nuxt/kit": "^3.17.3",
-    "@nuxt/schema": "^3.17.5",
+    "@nuxt/schema": "^3.17.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.7",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.7",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.10",
+    "@unhead/vue": "^2.0.9",
-    "@vueuse/core": "^13.3.0",
+    "@vueuse/core": "^13.2.0",
-    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/integrations": "^13.2.0",
-    "colortranslator": "^5.0.0",
+    "colortranslator": "^4.1.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "embla-carousel-auto-height": "^8.6.0",
@@ -143,29 +144,29 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.3.1",
+    "reka-ui": "^2.2.1",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.7",
-    "tinyglobby": "^0.2.14",
+    "tinyglobby": "^0.2.13",
-    "unplugin": "^2.3.5",
+    "unplugin": "^2.3.4",
-    "unplugin-auto-import": "^19.3.0",
+    "unplugin-auto-import": "^19.2.0",
-    "unplugin-vue-components": "^28.7.0",
+    "unplugin-vue-components": "^28.5.0",
-    "vaul-vue": "0.4.1",
+    "vaul-vue": "^0.4.1",
     "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.4.1",
+    "@nuxt/eslint-config": "^1.4.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.1",
+    "@nuxt/test-utils": "^3.19.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.27.0",
-    "happy-dom": "^17.6.3",
+    "happy-dom": "^17.4.7",
-    "nuxt": "^3.17.5",
+    "nuxt": "^3.17.3",
-    "release-it": "^19.0.3",
+    "release-it": "^19.0.2",
-    "vitest": "^3.2.3",
+    "vitest": "^3.1.3",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.10"
   },
@@ -208,7 +209,7 @@
     "debug": "4.3.7",
     "rollup": "4.34.9",
     "unimport": "4.1.1",
-    "unplugin": "^2.3.5"
+    "unplugin": "^2.3.4"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

playground-vue/package.json

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

playground-vue/src/app.vue

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

playground/app/app.vue

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

playground/app/pages/components/calendar.vue

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

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..." default-value="Apple" />
+      <UInputMenu :items="items" autofocus placeholder="Search..." />
     </div>
     <div class="flex items-center gap-2">
       <UInputMenu
@@ -145,18 +145,5 @@ 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

@@ -1,87 +0,0 @@
-<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,13 +69,5 @@ 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,5 +1,4 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
 import theme from '#build/ui/navigation-menu'
 
 const colors = Object.keys(theme.variants.color)
@@ -14,9 +13,6 @@ 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 = [
   [{
@@ -46,8 +42,7 @@ const items = [
   }, {
     label: 'Components',
     icon: 'i-lucide-box',
-    to: '/components/navigation-menu',
+    to: '/components',
-    type: 'trigger',
     active: true,
     defaultOpen: true,
     children: [{
@@ -92,7 +87,7 @@ const items = [
     icon: 'i-lucide-circle-help',
     disabled: true
   }]
-] satisfies NavigationMenuItem[][]
+]
 </script>
 
 <template>
@@ -105,15 +100,10 @@ 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[]) => {
-  console.log(e)
+  alert(e.join(''))
 }
 </script>
 

playground/app/pages/components/popover.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const open = ref(false)
-const openCustomAnchor = ref(false)
 const loading = ref(false)
 
 function send() {
@@ -52,21 +51,6 @@ 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..." default-value="Apple" />
+      <USelectMenu :items="items" placeholder="Search..." />
     </div>
     <div class="flex items-center gap-2">
       <USelectMenu

playground/app/pages/components/slideover.vue

@@ -125,21 +125,5 @@ 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

@@ -1,60 +0,0 @@
-<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 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" />
-    </div>
-
-    <UTimeline
-      v-model="value"
-      :color="color"
-      :orientation="orientation"
-      :size="size"
-      :items="items"
-      class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
-    />
-  </div>
-</template>

playground/package.json

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

renovate.json

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

src/defaults.ts

@@ -2,7 +2,7 @@ import icons from './theme/icons'
 
 import { pick } from './runtime/utils'
 
-export const getDefaultUiConfig = (colors?: string[]) => ({
+export const getDefaultUiConfig = (colors?: string[], csp?: { nonce?: string }) => ({
   colors: pick({
     primary: 'green',
     secondary: 'blue',
@@ -12,7 +12,10 @@ export const getDefaultUiConfig = (colors?: string[]) => ({
     error: 'red',
     neutral: 'slate'
   }, [...(colors || []), 'neutral' as any]),
-  icons
+  icons,
+  csp: csp || {
+    nonce: ''
+  }
 })
 
 export const defaultOptions = {
@@ -22,6 +25,9 @@ export const defaultOptions = {
   theme: {
     colors: undefined,
     transitions: true
+  },
+  csp: {
+    nonce: ''
   }
 }
 

src/module.ts

@@ -28,6 +28,19 @@ export interface ModuleOptions {
    */
   colorMode?: boolean
 
+  /**
+   * Configure Content Security Policy for Nuxt UI
+   * @defaultValue `{ nonce: '' }`
+   * @link https://ui.nuxt.com/getting-started/installation/nuxt#csp
+   */
+  csp?: {
+    /**
+     * Enable nonce for inline styles.
+     * @defaultValue ``
+     */
+    nonce?: string
+  }
+
   /**
    * Customize how the theme is generated
    * @link https://ui.nuxt.com/getting-started/theme
@@ -70,7 +83,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.alias['#ui'] = resolve('./runtime')
 
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors))
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors, options.csp))
 
     // Isolate root node from portaled components
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}

src/runtime/components/Avatar.vue

@@ -1,7 +1,6 @@
 <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'>
@@ -23,7 +22,6 @@ export interface AvatarProps {
    * @defaultValue 'md'
    */
   size?: Avatar['variants']['size']
-  chip?: boolean | ChipProps
   class?: any
   style?: any
   ui?: Avatar['slots']
@@ -42,7 +40,6 @@ 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 })
 
@@ -84,13 +81,7 @@ function onError() {
 </script>
 
 <template>
-  <component
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
-    :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"
@@ -110,5 +101,5 @@ function onError() {
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
       </slot>
     </Slot>
-  </component>
+  </Primitive>
 </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 as DateValue | DateValue[])"
+    :model-value="modelValue"
-    :default-value="(defaultValue as DateValue)"
+    :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
     :class="ui.root({ class: [props.ui?.root, props.class] })"

src/runtime/components/Carousel.vue

@@ -336,7 +336,6 @@ 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

@@ -280,7 +280,7 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <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 })">
           <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey as string) }}

src/runtime/components/ContextMenuContent.vue

@@ -109,70 +109,68 @@ const groups = computed<ContextMenuItem[][]>(() =>
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <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 })">
-        <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}`">
-          <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] })">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <ReuseItemTemplate :item="item" :index="index" />
-              <ReuseItemTemplate :item="item" :index="index" />
+          </ContextMenu.Label>
-            </ContextMenu.Label>
+          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <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.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <ContextMenu.SubTrigger
-              <ContextMenu.SubTrigger
+              as="button"
-                as="button"
+              type="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.CheckboxItem>
+            </ContextMenu.SubTrigger>
-            <ContextMenu.Item
+
-              v-else
+            <UContextMenuContent
-              as-child
+              sub
-              :disabled="item.disabled"
+              :class="props.class"
-              :text-value="get(item, props.labelKey as string)"
+              :ui="ui"
-              @select="item.onSelect"
+              :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"
             >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
+              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </template>
-                </ULinkBase>
+            </UContextMenuContent>
-              </ULink>
+          </ContextMenu.Sub>
-            </ContextMenu.Item>
+          <ContextMenu.CheckboxItem
-          </template>
+            v-else-if="item.type === 'checkbox'"
-        </ContextMenu.Group>
+            :model-value="item.checked"
-      </div>
+            :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>
 
       <slot />
 

src/runtime/components/Drawer.vue

@@ -56,7 +56,7 @@ export interface DrawerSlots {
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { 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,20 +101,6 @@ 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,72 +115,70 @@ const groups = computed<DropdownMenuItem[][]>(() =>
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <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 })">
-        <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}`">
-          <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] })">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <ReuseItemTemplate :item="item" :index="index" />
-              <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.Label>
-            </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <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.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <DropdownMenu.SubTrigger
-              <DropdownMenu.SubTrigger
+              as="button"
-                as="button"
+              type="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.CheckboxItem>
+            </DropdownMenu.SubTrigger>
-            <DropdownMenu.Item
+
-              v-else
+            <UDropdownMenuContent
-              as-child
+              sub
-              :disabled="item.disabled"
+              :class="props.class"
-              :text-value="get(item, props.labelKey as string)"
+              :ui="ui"
-              @select="item.onSelect"
+              :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"
             >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
+              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </template>
-                </ULinkBase>
+            </UDropdownMenuContent>
-              </ULink>
+          </DropdownMenu.Sub>
-            </DropdownMenu.Item>
+          <DropdownMenu.CheckboxItem
-          </template>
+            v-else-if="item.type === 'checkbox'"
-        </DropdownMenu.Group>
+            :model-value="item.checked"
-      </div>
+            :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>
 
       <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, FormData } from '../types/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput } from '../types/form'
 import type { ComponentConfig } from '../types/utils'
 
 type FormConfig = ComponentConfig<typeof theme, AppConfig, 'form'>
 
-export interface FormProps<S extends FormSchema, T extends boolean = true> {
+export interface FormProps<S extends FormSchema> {
   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, T extends boolean = true> {
    * If true, schema transformations will be applied to the state on submit.
    * @defaultValue `true`
    */
-  transform?: T
+  transform?: boolean
 
   /**
    * 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, T extends boolean = true> {
    */
   loadingAuto?: boolean
   class?: any
-  onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>)
+  onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 
-export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+export interface FormEmits<S extends FormSchema> {
-  (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void
+  (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void
   (e: 'error', payload: FormErrorEvent): void
 }
 
 export interface FormSlots {
-  default(props?: { errors: FormError[], loading: boolean }): any
+  default(props?: { errors: FormError[] }): any
 }
 </script>
 
-<script lang="ts" setup generic="S extends FormSchema, T extends boolean = true">
+<script lang="ts" setup generic="S extends FormSchema">
 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, T>>(), {
+const props = withDefaults(defineProps<FormProps<S>>(), {
   validateOn() {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
   validateOnInputDelay: 300,
   attach: true,
-  transform: () => true as T,
+  transform: true,
   loadingAuto: true
 })
 
-const emits = defineEmits<FormEmits<S, T>>()
+const emits = defineEmits<FormEmits<S>>()
 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, Transform extends boolean> = { name?: keyof I | (keyof I)[], silent?: Silent, nested?: boolean, transform?: Transform }
+type ValidateOpts<Silent extends boolean> = { name?: keyof I | (keyof I)[], silent?: Silent, nested?: boolean, transform?: boolean }
-async function _validate<T extends boolean>(opts: ValidateOpts<false, T>): Promise<FormData<S, T>>
+async function _validate(opts: ValidateOpts<false>): Promise<O>
-async function _validate<T extends boolean>(opts: ValidateOpts<true, T>): Promise<FormData<S, T> | false>
+async function _validate(opts: ValidateOpts<true>): Promise<O | false>
-async function _validate<T extends boolean>(opts: ValidateOpts<boolean, boolean> = { silent: false, nested: true, transform: false }): Promise<FormData<S, T> | false> {
+async function _validate(opts: ValidateOpts<boolean> = { silent: false, nested: true, transform: false }): Promise<O | 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<T extends boolean>(opts: ValidateOpts<boolean, boolean>
     Object.assign(props.state, transformedState.value)
   }
 
-  return props.state as FormData<S, T>
+  return props.state as O
 }
 
 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<FormData<S, T>>
+  const event = payload as FormSubmitEvent<O>
 
   try {
     event.data = await _validate({ nested: true, transform: props.transform })
@@ -265,7 +265,7 @@ provide(formOptionsInjectionKey, computed(() => ({
   validateOnInputDelay: props.validateOnInputDelay
 })))
 
-defineExpose<Form<S>>({
+defineExpose<Form<I>>({
   validate: _validate,
   errors,
 
@@ -315,6 +315,6 @@ defineExpose<Form<S>>({
     :class="ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" :loading="loading" />
+    <slot :errors="errors" />
   </component>
 </template>

src/runtime/components/Input.vue

@@ -38,13 +38,6 @@ 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']
 }
@@ -84,7 +77,6 @@ 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, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
+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 { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
@@ -379,7 +379,6 @@ function onSelect(e: Event, item: InputMenuItem) {
 function isInputItem(item: InputMenuItem): item is _InputMenuItem {
   return typeof item === 'object' && item !== null
 }
-
 defineExpose({
   inputRef
 })
@@ -491,7 +490,7 @@ defineExpose({
           </slot>
         </ComboboxEmpty>
 
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ComboboxViewport :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 })">
@@ -542,7 +541,7 @@ defineExpose({
           </ComboboxGroup>
 
           <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-        </div>
+        </ComboboxViewport>
 
         <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' | 'invertWheelChange'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
   /**
    * 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', 'invertWheelChange'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), 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

@@ -1,203 +0,0 @@
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import type { TagsInputRootProps, AcceptableInputValue } from 'reka-ui'
-import theme from '#build/ui/input-tags'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps } from '../types'
-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 type InputTagsEmits<T extends InputTagItem> = {
-  'update:modelValue': [payload: T[]]
-  'change': [payload: Event]
-  'blur': [payload: FocusEvent]
-  'focus': [payload: FocusEvent]
-}
-
-type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
-
-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'
-
-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,19 +55,18 @@ 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: { close: () => void }): any
+  content(props?: {}): any
-  header(props: { close: () => void }): any
+  header(props?: {}): any
   title(props?: {}): any
   description(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props: { close: () => void }): any
+  body(props?: {}): any
-  footer(props: { close: () => void }): any
+  footer(props?: {}): any
 }
 </script>
 
@@ -104,15 +103,15 @@ const contentEvents = computed(() => {
   }
 
   if (!props.dismissible) {
-    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown']
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown', 'closeAutoFocus'] as const
-
+    type EventType = typeof events[number]
     return events.reduce((acc, curr) => {
       acc[curr] = (e: Event) => {
         e.preventDefault()
         emits('close:prevent')
       }
       return acc
-    }, defaultEvents as Record<typeof events[number] | keyof typeof defaultEvents, (e: Event) => void>)
+    }, {} as Record<EventType, (e: Event) => void>)
   }
 
   return defaultEvents
@@ -124,9 +123,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 }))
 </script>
 
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
@@ -134,7 +132,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-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @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">
@@ -149,9 +147,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close">
+        <slot name="content">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header" :close="close">
+            <slot name="header">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
@@ -166,16 +164,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                 </DialogDescription>
               </div>
 
-              <DialogClose v-if="props.close || !!slots.close" as-child>
+              <DialogClose v-if="close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :ui="ui">
                   <UButton
-                    v-if="props.close"
+                    v-if="close"
                     :icon="closeIcon || appConfig.ui.icons.close"
                     size="md"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"
-                    v-bind="(typeof props.close === 'object' ? props.close as Partial<ButtonProps> : {})"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -184,11 +182,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" :close="close" />
+            <slot name="body" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" :close="close" />
+            <slot name="footer" />
           </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, AccordionRootProps } from 'reka-ui'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types'
+import type { AvatarProps, BadgeProps, LinkProps, 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'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
   label?: string
   /**
    * @IconifyIcon
@@ -27,42 +27,41 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   badge?: string | number | BadgeProps
   /**
-   * Display a tooltip on the item when the menu is collapsed with the label of the item.
+   * Display a tooltip on the item.
-   * This has priority over the global `tooltip` prop.
+   * Only works when `type` is `link`.
+   * `{ content: { side: 'right' } }`{lang="ts-type"}
    */
-  tooltip?: boolean | TooltipProps
+  tooltip?: 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 is only displayed in `vertical` orientation.
+   * The `label` type only works on `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' | 'trigger' | 'link'
+  type?: 'label' | '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' | 'childLabel' | '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' | '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'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -101,18 +100,6 @@ 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
   /**
@@ -162,9 +149,8 @@ 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, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
-import { defu } from 'defu'
+import { createReusableTemplate } from '@vueuse/core'
-import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get, isArrayOfArray } from '../utils'
 import { tv } from '../utils/tv'
@@ -174,7 +160,7 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UBadge from './Badge.vue'
-import UPopover from './Popover.vue'
+import UCollapsible from './Collapsible.vue'
 import UTooltip from './Tooltip.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
@@ -182,8 +168,6 @@ const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   contentOrientation: 'horizontal',
   externalIcon: true,
   delayDuration: 0,
-  type: 'multiple',
-  collapsible: true,
   unmountOnHide: true,
   labelKey: 'label'
 })
@@ -204,10 +188,7 @@ 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 }>({
@@ -220,7 +201,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })({
   orientation: props.orientation,
-  contentOrientation: props.orientation === 'vertical' ? undefined : props.contentOrientation,
+  contentOrientation: props.contentOrientation,
   collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
@@ -235,24 +216,6 @@ 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>
@@ -274,7 +237,7 @@ function getAccordionDefaultValue(list: 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>
 
-      <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>
+      <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] })">
         <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
@@ -285,62 +248,36 @@ function getAccordionDefaultValue(list: 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)" :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 && item.collapsible !== false)" :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>
-      </component>
+      </span>
     </slot>
   </DefineLinkTemplate>
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="(orientation === 'vertical' && !collapsed) ? AccordionItem : NavigationMenuItem"
+      :is="(orientation === 'vertical' && item.children?.length) ? UCollapsible : NavigationMenuItem"
       as="li"
-      :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
+      :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"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :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 && !collapsed && item.type === 'trigger') ? {} : 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 && item.collapsible !== false) ? {} : 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 : ((orientation === 'vertical' && item.children?.length && !collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <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] }) }">
+          <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: level > 0 })">
+            <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 })">
-              <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>
@@ -350,7 +287,7 @@ function getAccordionDefaultValue(list: 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 || item.active" :index="index">
+          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="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>
@@ -377,7 +314,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
         </NavigationMenuContent>
       </ULink>
 
-      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <template v-if="orientation === 'vertical' && item.children?.length " #content>
         <ul :class="ui.childList({ class: props.ui?.childList })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -388,7 +325,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </ul>
-      </AccordionContent>
+      </template>
     </component>
   </DefineItemTemplate>
 
@@ -396,17 +333,9 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <component
+      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
-        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] })" />
-      </component>
+      </NavigationMenuList>
 
       <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,9 +7,7 @@ import type { ComponentConfig } from '../types/utils'
 
 type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>
 
-type PinInputType = 'text' | 'number'
+export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
-
-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'
@@ -39,14 +37,14 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
   ui?: PinInput['slots']
 }
 
-export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
+export type PinInputEmits = PinInputRootEmits & {
   change: [payload: Event]
   blur: [payload: Event]
 }
 
 </script>
 
-<script setup lang="ts" generic="T extends PinInputType = 'text'">
+<script setup lang="ts">
 import type { ComponentPublicInstance } from 'vue'
 import { ref, computed, onMounted } from 'vue'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
@@ -56,16 +54,16 @@ import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PinInputProps<T>>(), {
+const props = withDefaults(defineProps<PinInputProps>(), {
-  type: 'text' as never,
+  type: 'text',
   length: 5,
   autofocusDelay: 0
 })
-const emits = defineEmits<PinInputEmits<T>>()
+const emits = defineEmits<PinInputEmits>()
 
 const appConfig = useAppConfig() as PinInput['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'required', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
 
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
 
@@ -79,7 +77,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pinInput ||
 const inputsRef = ref<ComponentPublicInstance[]>([])
 
 const completed = ref(false)
-function onComplete(value: string[] | number[]) {
+function onComplete(value: string[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emits('change', event)
@@ -115,7 +113,6 @@ 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,7 +43,6 @@ export interface PopoverEmits extends PopoverRootEmits {
 export interface PopoverSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
-  anchor(props?: {}): any
 }
 </script>
 
@@ -75,15 +74,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']
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown'] as const
-
+    type EventType = typeof events[number]
     return events.reduce((acc, curr) => {
       acc[curr] = (e: Event) => {
         e.preventDefault()
         emits('close:prevent')
       }
       return acc
-    }, {} as Record<typeof events[number], (e: Event) => void>)
+    }, {} as Record<EventType, (e: Event) => void>)
   }
 
   return {}
@@ -104,10 +103,6 @@ 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' | 'getValueText' | 'modelValue'> {
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | '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', 'getValueText', 'modelValue'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
 const hasSteps = computed(() => Array.isArray(props.max))

src/runtime/components/Select.vue

@@ -92,8 +92,6 @@ 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']
 }
@@ -136,8 +134,8 @@ export interface SelectSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-import { ref, computed, onMounted, toRef } from 'vue'
+import { computed, toRef } from 'vue'
-import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
+import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -156,8 +154,7 @@ 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>>()
@@ -196,32 +193,15 @@ 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 | undefined {
+function displayValue(value?: GetItemValue<T, VK> | GetItemValue<T, VK>[]): string {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map(v => displayValue(v)).filter(Boolean)
+    return value.map(v => displayValue(v)).filter(Boolean).join(', ')
-    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 } })
@@ -260,7 +240,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger :id="id" :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 })" />
@@ -270,7 +250,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 !== undefined && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+          <span v-if="displayedModelValue" :class="ui.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
           </span>
           <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
@@ -290,7 +270,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
       <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <slot name="content-top" />
 
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <SelectViewport :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] })">
@@ -337,7 +317,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
               </SelectItem>
             </template>
           </SelectGroup>
-        </div>
+        </SelectViewport>
 
         <slot name="content-bottom" />
 

src/runtime/components/SelectMenu.vue

@@ -115,8 +115,6 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
    * @defaultValue false
    */
   ignoreFilter?: boolean
-  autofocus?: boolean
-  autofocusDelay?: number
   class?: any
   ui?: SelectMenu['slots']
 }
@@ -167,8 +165,8 @@ export interface SelectMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { ref, computed, onMounted, toRef, toRaw } from 'vue'
+import { computed, toRef, toRaw } from 'vue'
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -191,8 +189,7 @@ const props = withDefaults(defineProps<SelectMenuProps<T, VK, M>>(), {
   searchInput: true,
   labelKey: 'label' as never,
   resetSearchTermOnBlur: true,
-  resetSearchTermOnSelect: true,
+  resetSearchTermOnSelect: true
-  autofocusDelay: 0
 })
 const emits = defineEmits<SelectMenuEmits<T, VK, M>>()
 const slots = defineSlots<SelectMenuSlots<T, VK, M>>()
@@ -228,10 +225,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.selectMenu |
   buttonGroup: orientation.value
 }))
 
-function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): string | undefined {
+function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): string {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map(v => displayValue(v)).filter(Boolean)
+    return value.map(v => displayValue(v)).filter(Boolean).join(', ')
-    return values?.length ? values.join(', ') : undefined
   }
 
   if (!props.valueKey) {
@@ -290,22 +286,6 @@ const createItem = computed(() => {
 })
 const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
 
-const triggerRef = ref<InstanceType<typeof ComboboxTrigger> | null>(null)
-
-function autoFocus() {
-  if (props.autofocus) {
-    triggerRef.value?.$el?.focus({
-      focusVisible: true
-    })
-  }
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
-
 function onUpdate(value: any) {
   if (toRaw(props.modelValue) === value) {
     return
@@ -395,7 +375,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+      <ComboboxTrigger :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
         <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 })" />
@@ -405,7 +385,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
 
         <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 !== undefined && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+            <span v-if="displayedModelValue" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
             </span>
             <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
@@ -437,7 +417,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
             </slot>
           </ComboboxEmpty>
 
-          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+          <ComboboxViewport :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 })">
@@ -488,7 +468,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
             </ComboboxGroup>
 
             <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-          </div>
+          </ComboboxViewport>
 
           <slot name="content-bottom" />
         </FocusScope>

src/runtime/components/Slideover.vue

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

src/runtime/components/Textarea.vue

@@ -3,12 +3,10 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/textarea'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
+import type { AcceptableValue, ComponentConfig } from '../types/utils'
 
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>
 
-type TextareaValue = string | number | null
-
 export interface TextareaProps extends UseComponentIconsProps {
   /**
    * The element or component this component should render as.
@@ -37,21 +35,15 @@ export interface TextareaProps extends UseComponentIconsProps {
   autoresize?: boolean
   autoresizeDelay?: number
   disabled?: boolean
+  class?: any
   rows?: number
   maxrows?: number
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  modelModifiers?: {
-    string?: boolean
-    trim?: boolean
-    lazy?: boolean
-    nullify?: boolean
-  }
-  class?: any
   ui?: Textarea['slots']
 }
 
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
+export interface TextareaEmits<T extends AcceptableValue = AcceptableValue> {
   (e: 'update:modelValue', payload: T): void
   (e: 'blur', event: FocusEvent): void
   (e: 'change', event: Event): void
@@ -64,7 +56,7 @@ export interface TextareaSlots {
 }
 </script>
 
-<script setup lang="ts" generic="T extends TextareaValue">
+<script setup lang="ts" generic="T extends AcceptableValue">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
@@ -72,8 +64,6 @@ import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 import { tv } from '../utils/tv'
-import UIcon from './Icon.vue'
-import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -86,7 +76,6 @@ const props = withDefaults(defineProps<TextareaProps>(), {
 const emits = defineEmits<TextareaEmits<T>>()
 const slots = defineSlots<TextareaSlots>()
 
-// eslint-disable-next-line vue/no-dupe-keys
 const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Textarea['AppConfig']

src/runtime/components/Timeline.vue

@@ -1,129 +0,0 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/timeline'
-import type { AvatarProps } from '../types'
-import type { DynamicSlots, ComponentConfig } from '../types/utils'
-
-type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>
-
-export interface TimelineItem {
-  date?: string
-  title?: string
-  description?: string
-  icon?: string
-  avatar?: AvatarProps
-  value?: string | number
-  slot?: string
-  class?: any
-  ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>
-  [key: string]: any
-}
-
-export interface TimelineProps<T extends TimelineItem = TimelineItem> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  items: T[]
-  /**
-   * @defaultValue 'md'
-   */
-  size?: Timeline['variants']['size']
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: Timeline['variants']['color']
-  /**
-   * The orientation of the Timeline.
-   * @defaultValue 'vertical'
-   */
-  orientation?: Timeline['variants']['orientation']
-  defaultValue?: string | number
-  class?: any
-  ui?: Timeline['slots']
-}
-
-type SlotProps<T extends TimelineItem> = (props: { item: T }) => any
-
-export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
-  indicator: SlotProps<T>
-  date: SlotProps<T>
-  title: SlotProps<T>
-  description: SlotProps<T>
-} & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', { item: T }>
-
-</script>
-
-<script setup lang="ts" generic="T extends TimelineItem">
-import { computed } from 'vue'
-import { Primitive, Separator } from 'reka-ui'
-import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
-import UAvatar from './Avatar.vue'
-
-const props = withDefaults(defineProps<TimelineProps<T>>(), {
-  orientation: 'vertical'
-})
-const slots = defineSlots<TimelineSlots<T>>()
-
-const modelValue = defineModel<string | number>()
-
-const appConfig = useAppConfig() as Timeline['AppConfig']
-
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeline || {}) })({
-  orientation: props.orientation,
-  size: props.size,
-  color: props.color
-}))
-
-const currentStepIndex = computed(() => {
-  const value = modelValue.value ?? props.defaultValue
-
-  return ((typeof value === 'string')
-    ? props.items.findIndex(item => item.value === value)
-    : value) ?? -1
-})
-</script>
-
-<template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div
-      v-for="(item, index) in items"
-      :key="item.value ?? index"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      :data-state="index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'active' : undefined"
-    >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
-          <slot :name="((item.slot ? `${item.slot}-indicator` : 'indicator') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" />
-        </UAvatar>
-
-        <Separator
-          v-if="index < items.length - 1"
-          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
-          :orientation="props.orientation"
-        />
-      </div>
-
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
-          <slot :name="((item.slot ? `${item.slot}-date` : 'date') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
-            {{ item.date }}
-          </slot>
-        </div>
-        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
-          <slot :name="((item.slot ? `${item.slot}-title` : 'title') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
-            {{ item.title }}
-          </slot>
-        </div>
-        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
-          <slot :name="((item.slot ? `${item.slot}-description` : 'description') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
-            {{ item.description }}
-          </slot>
-        </div>
-      </div>
-    </div>
-  </Primitive>
-</template>

src/runtime/components/Toast.vue

@@ -69,7 +69,7 @@ export interface ToastSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -106,9 +106,9 @@ onMounted(() => {
     return
   }
 
-  nextTick(() => {
+  setTimeout(() => {
-    height.value = el.value?.$el?.getBoundingClientRect()?.height
+    height.value = el.value.$el.getBoundingClientRect()?.height
-  })
+  }, 0)
 })
 
 defineExpose({

src/runtime/components/Tree.vue

@@ -29,7 +29,7 @@ export type TreeItem = {
   [key: string]: any
 }
 
-export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'ul'
@@ -116,7 +116,7 @@ const slots = defineSlots<TreeSlots<T>>()
 
 const appConfig = useAppConfig() as Tree['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect', 'bubbleSelect'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
 
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: TreeItem[], level: number }, TreeSlots<T>>()
 

src/runtime/composables/defineLocale.ts

@@ -1,6 +1,5 @@
 import { defu } from 'defu'
 import type { Locale, Direction } from '../types/locale'
-import type { DeepPartial } from '../types/utils'
 
 interface DefineLocaleOptions<M> {
   name: string
@@ -13,8 +12,3 @@ interface DefineLocaleOptions<M> {
 export function defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M> {
   return defu<DefineLocaleOptions<M>, [{ dir: Direction }]>(options, { dir: 'ltr' })
 }
-
-/* @__NO_SIDE_EFFECTS__ */
-export function extendLocale<M>(locale: Locale<M>, options: Partial<DefineLocaleOptions<DeepPartial<M>>>): Locale<M> {
-  return defu<Locale<M>, [DefineLocaleOptions<M>]>(options, locale)
-}