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
-        uses: nuxt-hub/action@v2
+      - name: Build application
+        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
-        uses: nuxt-hub/action@v2
+      - name: Build application
+        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: 60
-          days-before-close: 7
-          stale-issue-label: 'stale'
-          close-issue-label: 'closed-by-bot'
-          close-issue-message: |
-            Hi! 👋
-
-            This issue has been automatically **closed** due to prolonged inactivity.
-
-            We're a small team and can't address every report, but we appreciate your feedback and contributions.
-
-            If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.
-
-            Thank you for your understanding and support!
-
-            — Nuxt UI Team
-          exempt-issue-labels: 'feature,announcement'
-          operations-per-run: 300
+          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

CHANGELOG.md

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

cli/templates.mjs

@@ -31,9 +31,8 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import type { ComponentConfig } from '../types/utils'
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -63,7 +62,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -76,9 +75,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro'
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import type { ComponentConfig } from '../types/utils'
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -107,7 +105,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -188,7 +186,6 @@ links:${primitive
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
-navigation.badge: Soon
 ---
 
 ## Usage

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/PageHeaderLinks.vue

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

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/command-palette/CommandPaletteCustomSlotExample.vue

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

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

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

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,9 +1,15 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
+const value = ref('npx nuxi module add ui')
+const copied = ref(false)
 
-const value = ref('npx nuxt module add ui')
+function copy() {
+  navigator.clipboard.writeText(value.value)
+  copied.value = true
 
-const { copy, copied } = useClipboard()
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
 </script>
 
 <template>
@@ -19,7 +25,7 @@ const { copy, copied } = useClipboard()
           size="sm"
           :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
           aria-label="Copy to clipboard"
-          @click="copy(value)"
+          @click="copy"
         />
       </UTooltip>
     </template>

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

docs/app/components/content/examples/table/TableExample.vue

@@ -2,7 +2,6 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -10,7 +9,6 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
-const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -222,7 +220,7 @@ const columns: TableColumn<Payment>[] = [{
     }, {
       label: 'Copy payment ID',
       onSelect() {
-        copy(row.original.id)
+        navigator.clipboard.writeText(row.original.id)
 
         toast.add({
           title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableRowActionsExample.vue

@@ -2,14 +2,12 @@
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
-import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
-const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -121,7 +119,7 @@ function getRowItems(row: Row<Payment>) {
   }, {
     label: 'Copy payment ID',
     onSelect() {
-      copy(row.original.id)
+      navigator.clipboard.writeText(row.original.id)
 
       toast.add({
         title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableSlotsExample.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'
 
 interface User {
   id: number
@@ -11,7 +10,6 @@ interface User {
 }
 
 const toast = useToast()
-const { copy } = useClipboard()
 
 const data = ref<User[]>([{
   id: 1,
@@ -73,8 +71,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
       label: 'Copy user Id',
       icon: 'i-lucide-copy',
       onSelect: () => {
-        copy(user.id.toString())
-
+        navigator.clipboard.writeText(user.id.toString())
         toast.add({
           title: 'User ID copied to clipboard!',
           color: 'success',

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/app/pages/[...slug].vue

@@ -2,8 +2,7 @@
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { PageLink } from '@nuxt/ui-pro'
-import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
-import { findPageBreadcrumb } from '@nuxt/content/utils'
+import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
 
 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -38,7 +37,7 @@ const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
 
 if (!import.meta.prerender) {
   // Redirect to the correct framework version if the page is not the current framework
@@ -142,7 +141,7 @@ const communityLinks = computed(() => [{
         <MDC v-if="page.description" :value="page.description" unwrap="p" :cache-key="`${kebabCase(route.path)}-description`" />
       </template>
 
-      <template #links>
+      <template v-if="page.links?.length" #links>
         <UButton
           v-for="link in page.links"
           :key="link.label"
@@ -155,7 +154,6 @@ const communityLinks = computed(() => [{
             <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
           </template>
         </UButton>
-        <PageHeaderLinks />
       </template>
     </UPageHeader>
 

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.
-  - `options`:
-    - `defaultOpen?: boolean` Open the overlay immediately after being created. Defaults to `false`.
+  - `component`: The overlay component
+  - `options` The overlay options
+    - `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.
-  - `value`: A value to resolve the overlay promise with.
+  - `id`: The identifier of the overlay
+  - `value`: A value to resolve the overlay promise with
 
 ### `patch(id: symbol, props: ComponentProps<T>): void`
 
-Update an overlay 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

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

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

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

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

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

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

docs/content/3.components/input.md

@@ -172,7 +172,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-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 libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
-
-::component-example
----
-name: 'input-mask-example'
----
-::
-
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.

docs/content/3.components/modal.md

@@ -274,7 +274,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Modal or remove it entirely.
 ::
 
-### 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.
-
-::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.
-::
+Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
 
 ::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 pass any property from the [Tooltip](/components/tooltip) component globally or on each item.
+You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
 
 ::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'
-          kbds:
-            - 3.8k
-      - label: Help
-        icon: i-lucide-circle-help
-        disabled: true
+          text: 'Help'
 ---
 ::
 
-::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/pin-input.md

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

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

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

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

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,269 +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'
----
-::
-
-### Reverse
-
-Use the reverse prop to reverse the direction of the Timeline.
-
-::component-code
----
-ignore:
-  - items
-  - class
-  - defaultValue
-external:
-  - items
-externalTypes:
-  - TimelineItem[]
-props:
-  reverse: true
-  modelValue: 2
-  orientation: 'vertical'
-  items:
-    - date: 'Mar 15, 2025'
-      title: 'Project Kickoff'
-      description: 'Kicked off the project with team alignment.'
-      icon: 'i-lucide-rocket'
-    - date: 'Mar 22 2025'
-      title: 'Design Phase'
-      description: 'User research and design workshops.'
-      icon: 'i-lucide-palette'
-    - date: 'Mar 29 2025'
-      title: 'Development Sprint'
-      description: 'Frontend and backend development.'
-      icon: 'i-lucide-code'
-    - date: 'Apr 5 2025'
-      title: 'Testing & Deployment'
-      description: 'QA testing and performance optimization.'
-      icon: 'i-lucide-check-circle'
-  class: 'w-full'
-class: 'overflow-x-auto'
----
-::
-
-## Examples
-
-### Control active item
-
-You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
-
-:component-example{name="timeline-model-value-example" prettier}
-
-::tip
-You can also pass the `value` of one of the items if provided.
-::
-
-### With alternating layout
-
-Use the `ui` prop to create a Timeline with alternating layout.
-
-:component-example{name="timeline-alternating-layout-example" prettier}
-
-### With custom slot
-
-Use the `slot` property to customize a specific item.
-
-You will have access to the following slots:
-
-- `#{{ item.slot }}-indicator`{lang="ts-type"}
-- `#{{ item.slot }}-date`{lang="ts-type"}
-- `#{{ item.slot }}-title`{lang="ts-type"}
-- `#{{ item.slot }}-description`{lang="ts-type"}
-
-:component-example{name="timeline-custom-slot-example" prettier}
-
-### With slots
-
-Use the available slots to create a more complex Timeline.
-
-:component-example{name="timeline-slots-example" prettier}
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme

docs/content/3.components/tree.md

@@ -407,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.
-
-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"}
+Use the `item.slot` property to customize a specific item.
 
 ::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,49 +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.51",
-    "@iconify-json/simple-icons": "^1.2.39",
-    "@iconify-json/vscode-icons": "^1.2.23",
-    "@nuxt/content": "^3.6.1",
+    "@iconify-json/lucide": "^1.2.44",
+    "@iconify-json/simple-icons": "^1.2.34",
+    "@iconify-json/vscode-icons": "^1.2.21",
+    "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
-    "@nuxt/ui": "workspace:*",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@55e248c",
-    "@nuxthub/core": "^0.9.0",
+    "@nuxt/ui": "latest",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@9038c43",
+    "@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.4.0",
-    "@vueuse/nuxt": "^13.4.0",
+    "@vueuse/integrations": "^13.2.0",
+    "@vueuse/nuxt": "^13.2.0",
     "ai": "^4.3.16",
-    "better-sqlite3": "^12.0.0",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "maska": "^3.1.1",
-    "motion-v": "^1.3.0",
-    "nuxt": "^3.17.5",
+    "motion-v": "^1.0.2",
+    "nuxt": "^3.17.3",
     "nuxt-component-meta": "^0.11.0",
-    "nuxt-llms": "^0.1.3",
-    "nuxt-og-image": "^5.1.7",
-    "prettier": "^3.6.0",
+    "nuxt-llms": "^0.1.2",
+    "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.7.0",
+    "workers-ai-provider": "^0.4.1",
     "yup": "^1.6.1",
-    "zod": "^3.25.67"
+    "zod": "^3.24.4"
   },
   "devDependencies": {
-    "wrangler": "^4.20.5"
+    "wrangler": "^4.15.1"
   }
 }

docs/server/plugins/llms.ts

@@ -1,8 +1,412 @@
+import json5 from 'json5'
+import { camelCase, kebabCase } from 'scule'
+import { visit } from '@nuxt/content/runtime'
 import type { H3Event } from 'h3'
 import type { PageCollectionItemBase } from '@nuxt/content'
+import * as theme from '../../.nuxt/ui'
+import * as themePro from '../../.nuxt/ui-pro'
+import meta from '#nuxt-component-meta'
+// @ts-expect-error - no types available
+import components from '#component-example/nitro'
+
+type ComponentAttributes = {
+  ':pro'?: string
+  ':prose'?: string
+  ':props'?: string
+  ':external'?: string
+  ':externalTypes'?: string
+  ':ignore'?: string
+  ':hide'?: string
+  ':slots'?: string
+}
+
+type ThemeConfig = {
+  pro: boolean
+  prose: boolean
+  componentName: string
+}
+
+type CodeConfig = {
+  pro: boolean
+  props: Record<string, unknown>
+  external: string[]
+  externalTypes: string[]
+  ignore: string[]
+  hide: string[]
+  componentName: string
+  slots?: Record<string, string>
+}
+
+type Document = {
+  title: string
+  body: any
+}
+
+const parseBoolean = (value?: string): boolean => value === 'true'
+
+function getComponentMeta(componentName: string) {
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  const strategies = [
+    `U${pascalCaseName}`,
+    `Prose${pascalCaseName}`,
+    pascalCaseName
+  ]
+
+  let componentMeta: any
+  let finalMetaComponentName: string = pascalCaseName
+
+  for (const nameToTry of strategies) {
+    finalMetaComponentName = nameToTry
+    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
+    if (metaAttempt) {
+      componentMeta = metaAttempt
+      break
+    }
+  }
+
+  if (!componentMeta) {
+    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
+  }
+
+  return {
+    pascalCaseName,
+    metaComponentName: finalMetaComponentName,
+    componentMeta
+  }
+}
+
+function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
+  node[0] = 'pre'
+  node[1] = { language, code }
+  if (filename) node[1].filename = filename
+}
+
+function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
+  visit(doc.body, (node) => {
+    if (Array.isArray(node) && node[0] === type) {
+      handler(node)
+    }
+    return true
+  }, node => node)
+}
+
+function generateTSInterface(
+  name: string,
+  items: any[],
+  itemHandler: (item: any) => string,
+  description: string
+) {
+  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
+  for (const item of items) {
+    code += itemHandler(item)
+  }
+  code += `}`
+  return code
+}
+
+function propItemHandler(propValue: any): string {
+  if (!propValue?.name) return ''
+  const propName = propValue.name
+  const propType = propValue.type
+    ? Array.isArray(propValue.type)
+      ? propValue.type.map((t: any) => t.name || t).join(' | ')
+      : propValue.type.name || propValue.type
+    : 'any'
+  const isRequired = propValue.required || false
+  const hasDescription = propValue.description && propValue.description.trim().length > 0
+  const hasDefault = propValue.default !== undefined
+  let result = ''
+  if (hasDescription || hasDefault) {
+    result += `  /**\n`
+    if (hasDescription) {
+      const descLines = propValue.description.split(/\r?\n/)
+      descLines.forEach((line: string) => {
+        result += `   * ${line}\n`
+      })
+    }
+    if (hasDefault) {
+      let defaultValue = propValue.default
+      if (typeof defaultValue === 'string') {
+        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
+      } else {
+        defaultValue = JSON.stringify(defaultValue)
+      }
+      result += `   * @default ${defaultValue}\n`
+    }
+    result += `   */\n`
+  }
+  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
+  return result
+}
+
+function slotItemHandler(slotValue: any): string {
+  if (!slotValue?.name) return ''
+  const slotName = slotValue.name
+  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
+  let result = ''
+  if (hasDescription) {
+    result += `  /**\n`
+    const descLines = slotValue.description.split(/\r?\n/)
+    descLines.forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
+    let bindingsType = '{\n'
+    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
+      const bindingType = bindingValue.type || 'any'
+      bindingsType += `    ${bindingName}: ${bindingType};\n`
+    })
+    bindingsType += '  }'
+    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
+  } else {
+    result += `  ${slotName}(): any;\n`
+  }
+  return result
+}
+
+function emitItemHandler(event: any): string {
+  if (!event?.name) return ''
+  let payloadType = 'void'
+  if (event.type) {
+    payloadType = Array.isArray(event.type)
+      ? event.type.map((t: any) => t.name || t).join(' | ')
+      : event.type.name || event.type
+  }
+  let result = ''
+  if (event.description && event.description.trim().length > 0) {
+    result += `  /**\n`
+    event.description.split(/\r?\n/).forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
+  return result
+}
+
+const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
+  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
+  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
+
+  return {
+    [pro ? 'uiPro' : 'ui']: prose
+      ? { prose: { [componentName]: componentTheme } }
+      : { [componentName]: componentTheme }
+  }
+}
+
+const generateComponentCode = ({
+  pro,
+  props,
+  external,
+  externalTypes,
+  hide,
+  componentName,
+  slots
+}: CodeConfig) => {
+  const filteredProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !hide.includes(key))
+  )
+
+  const imports = pro
+    ? ''
+    : external
+        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
+        .map((ext, index) => {
+          const type = externalTypes[index]?.replace(/[[\]]/g, '')
+          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
+        })
+        .join('\n')
+
+  let itemsCode = ''
+  if (props.items) {
+    itemsCode = pro
+      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
+      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
+    delete filteredProps.items
+  }
+
+  let calendarValueCode = ''
+  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
+    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
+  }
+
+  const propsString = Object.entries(filteredProps)
+    .map(([key, value]) => {
+      const formattedKey = kebabCase(key)
+      if (typeof value === 'string') {
+        return `${formattedKey}="${value}"`
+      } else if (typeof value === 'number') {
+        return `:${formattedKey}="${value}"`
+      } else if (typeof value === 'boolean') {
+        return value ? formattedKey : `:${formattedKey}="false"`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join(' ')
+
+  const itemsProp = props.items ? ':items="items"' : ''
+  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
+  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
+  const formattedProps = allProps ? ` ${allProps}` : ''
+
+  let scriptSetup = ''
+  if (imports || itemsCode || calendarValueCode) {
+    scriptSetup = '<script setup lang="ts">'
+    if (imports) scriptSetup += `\n${imports}`
+    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
+    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
+    if (itemsCode) scriptSetup += `\n${itemsCode}`
+    scriptSetup += '\n</script>\n\n'
+  }
+
+  let componentContent = ''
+  let slotContent = ''
+
+  if (slots && Object.keys(slots).length > 0) {
+    const defaultSlot = slots.default?.trim()
+    if (defaultSlot) {
+      const indentedContent = defaultSlot
+        .split('\n')
+        .map(line => line.trim() ? `    ${line}` : line)
+        .join('\n')
+      componentContent = `\n${indentedContent}\n  `
+    }
+
+    Object.entries(slots).forEach(([slotName, content]) => {
+      if (slotName !== 'default' && content?.trim()) {
+        const indentedSlotContent = content.trim()
+          .split('\n')
+          .map(line => line.trim() ? `      ${line}` : line)
+          .join('\n')
+        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
+      }
+    })
+  }
+
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  let componentTemplate = ''
+  if (componentContent || slotContent) {
+    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
+  } else {
+    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
+  }
+
+  return `${scriptSetup}<template>
+  ${componentTemplate}
+</template>`
+}
 
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('content:llms:generate:document', async (_: H3Event, doc: PageCollectionItemBase) => {
-    transformMDC(doc as any)
+    const componentName = camelCase(doc.title)
+
+    visitAndReplace(doc, 'component-theme', (node) => {
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.slug
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const pro = parseBoolean(attributes[':pro'])
+      const prose = parseBoolean(attributes[':prose'])
+      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
+
+      replaceNodeWithPre(
+        node,
+        'ts',
+        `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
+        'app.config.ts'
+      )
+    })
+
+    visitAndReplace(doc, 'component-code', (node) => {
+      const attributes = node[1] as ComponentAttributes
+      const pro = parseBoolean(attributes[':pro'])
+      const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
+      const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
+      const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
+      const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
+      const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
+      const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
+
+      const code = generateComponentCode({
+        pro,
+        props,
+        external,
+        externalTypes,
+        ignore,
+        hide,
+        componentName,
+        slots
+      })
+
+      replaceNodeWithPre(node, 'vue', code)
+    })
+
+    visitAndReplace(doc, 'component-props', (node) => {
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.name
+      const isProse = parseBoolean(attributes[':prose'])
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
+
+      if (!componentMeta?.props) return
+
+      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
+
+      const interfaceCode = generateTSInterface(
+        interfaceName,
+        Object.values(componentMeta.props),
+        propItemHandler,
+        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
+      )
+      replaceNodeWithPre(node, 'ts', interfaceCode)
+    })
+
+    visitAndReplace(doc, 'component-slots', (node) => {
+      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      if (!componentMeta?.slots) return
+
+      const interfaceCode = generateTSInterface(
+        `${pascalCaseName}Slots`,
+        Object.values(componentMeta.slots),
+        slotItemHandler,
+        `Slots for the ${pascalCaseName} component`
+      )
+      replaceNodeWithPre(node, 'ts', interfaceCode)
+    })
+
+    visitAndReplace(doc, 'component-emits', (node) => {
+      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
+
+      if (hasEvents) {
+        const interfaceCode = generateTSInterface(
+          `${pascalCaseName}Emits`,
+          Object.values(componentMeta.events),
+          emitItemHandler,
+          `Emitted events for the ${pascalCaseName} component`
+        )
+        replaceNodeWithPre(node, 'ts', interfaceCode)
+      } else {
+        node[0] = 'p'
+        node[1] = {}
+        node[2] = 'No events available for this component.'
+      }
+    })
+
+    visitAndReplace(doc, 'component-example', (node) => {
+      const camelName = camelCase(node[1]['name'])
+      const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
+      const code = components[name].code
+      replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
+    })
   })
 })

docs/server/routes/raw/[...slug].md.get.ts

@@ -1,30 +0,0 @@
-import { stringify } from 'minimark/stringify'
-import { withLeadingSlash } from 'ufo'
-
-export default eventHandler(async (event) => {
-  const slug = getRouterParams(event)['slug.md']
-  if (!slug?.endsWith('.md')) {
-    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-  }
-
-  const path = withLeadingSlash(slug.replace('.md', ''))
-  // @ts-expect-error TODO: fix this
-  const page = await queryCollection(event, 'content').path(path).first()
-  if (!page) {
-    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-  }
-
-  // Add title and description to the top of the page if missing
-  if (page.body.value[0]?.[0] !== 'h1') {
-    page.body.value.unshift(['blockquote', {}, page.description])
-    page.body.value.unshift(['h1', {}, page.title])
-  }
-
-  const transformedPage = transformMDC({
-    title: page.title,
-    body: page.body
-  })
-
-  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
-  return stringify({ ...transformedPage.body, type: 'minimark' }, { format: 'markdown/html' })
-})

docs/server/utils/transformMDC.ts

@@ -1,410 +0,0 @@
-import json5 from 'json5'
-import { camelCase, kebabCase } from 'scule'
-import { visit } from '@nuxt/content/runtime'
-import * as theme from '../../.nuxt/ui'
-import * as themePro from '../../.nuxt/ui-pro'
-import meta from '#nuxt-component-meta'
-// @ts-expect-error - no types available
-import components from '#component-example/nitro'
-
-type ComponentAttributes = {
-  ':pro'?: string
-  ':prose'?: string
-  ':props'?: string
-  ':external'?: string
-  ':externalTypes'?: string
-  ':ignore'?: string
-  ':hide'?: string
-  ':slots'?: string
-}
-
-type ThemeConfig = {
-  pro: boolean
-  prose: boolean
-  componentName: string
-}
-
-type CodeConfig = {
-  pro: boolean
-  props: Record<string, unknown>
-  external: string[]
-  externalTypes: string[]
-  ignore: string[]
-  hide: string[]
-  componentName: string
-  slots?: Record<string, string>
-}
-
-type Document = {
-  title: string
-  body: any
-}
-
-const parseBoolean = (value?: string): boolean => value === 'true'
-
-function getComponentMeta(componentName: string) {
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  const strategies = [
-    `U${pascalCaseName}`,
-    `Prose${pascalCaseName}`,
-    pascalCaseName
-  ]
-
-  let componentMeta: any
-  let finalMetaComponentName: string = pascalCaseName
-
-  for (const nameToTry of strategies) {
-    finalMetaComponentName = nameToTry
-    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
-    if (metaAttempt) {
-      componentMeta = metaAttempt
-      break
-    }
-  }
-
-  if (!componentMeta) {
-    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
-  }
-
-  return {
-    pascalCaseName,
-    metaComponentName: finalMetaComponentName,
-    componentMeta
-  }
-}
-
-function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
-  node[0] = 'pre'
-  node[1] = { language, code }
-  if (filename) node[1].filename = filename
-}
-
-function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
-  visit(doc.body, (node) => {
-    if (Array.isArray(node) && node[0] === type) {
-      handler(node)
-    }
-    return true
-  }, node => node)
-}
-
-function generateTSInterface(
-  name: string,
-  items: any[],
-  itemHandler: (item: any) => string,
-  description: string
-) {
-  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
-  for (const item of items) {
-    code += itemHandler(item)
-  }
-  code += `}`
-  return code
-}
-
-function propItemHandler(propValue: any): string {
-  if (!propValue?.name) return ''
-  const propName = propValue.name
-  const propType = propValue.type
-    ? Array.isArray(propValue.type)
-      ? propValue.type.map((t: any) => t.name || t).join(' | ')
-      : propValue.type.name || propValue.type
-    : 'any'
-  const isRequired = propValue.required || false
-  const hasDescription = propValue.description && propValue.description.trim().length > 0
-  const hasDefault = propValue.default !== undefined
-  let result = ''
-  if (hasDescription || hasDefault) {
-    result += `  /**\n`
-    if (hasDescription) {
-      const descLines = propValue.description.split(/\r?\n/)
-      descLines.forEach((line: string) => {
-        result += `   * ${line}\n`
-      })
-    }
-    if (hasDefault) {
-      let defaultValue = propValue.default
-      if (typeof defaultValue === 'string') {
-        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
-      } else {
-        defaultValue = JSON.stringify(defaultValue)
-      }
-      result += `   * @default ${defaultValue}\n`
-    }
-    result += `   */\n`
-  }
-  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
-  return result
-}
-
-function slotItemHandler(slotValue: any): string {
-  if (!slotValue?.name) return ''
-  const slotName = slotValue.name
-  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
-  let result = ''
-  if (hasDescription) {
-    result += `  /**\n`
-    const descLines = slotValue.description.split(/\r?\n/)
-    descLines.forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
-    let bindingsType = '{\n'
-    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
-      const bindingType = bindingValue.type || 'any'
-      bindingsType += `    ${bindingName}: ${bindingType};\n`
-    })
-    bindingsType += '  }'
-    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
-  } else {
-    result += `  ${slotName}(): any;\n`
-  }
-  return result
-}
-
-function emitItemHandler(event: any): string {
-  if (!event?.name) return ''
-  let payloadType = 'void'
-  if (event.type) {
-    payloadType = Array.isArray(event.type)
-      ? event.type.map((t: any) => t.name || t).join(' | ')
-      : event.type.name || event.type
-  }
-  let result = ''
-  if (event.description && event.description.trim().length > 0) {
-    result += `  /**\n`
-    event.description.split(/\r?\n/).forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
-  return result
-}
-
-const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
-  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
-  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
-
-  return {
-    [pro ? 'uiPro' : 'ui']: prose
-      ? { prose: { [componentName]: componentTheme } }
-      : { [componentName]: componentTheme }
-  }
-}
-
-const generateComponentCode = ({
-  pro,
-  props,
-  external,
-  externalTypes,
-  hide,
-  componentName,
-  slots
-}: CodeConfig) => {
-  const filteredProps = Object.fromEntries(
-    Object.entries(props).filter(([key]) => !hide.includes(key))
-  )
-
-  const imports = pro
-    ? ''
-    : external
-        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
-        .map((ext, index) => {
-          const type = externalTypes[index]?.replace(/[[\]]/g, '')
-          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
-        })
-        .join('\n')
-
-  let itemsCode = ''
-  if (props.items) {
-    itemsCode = pro
-      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
-      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
-    delete filteredProps.items
-  }
-
-  let calendarValueCode = ''
-  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
-    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
-  }
-
-  const propsString = Object.entries(filteredProps)
-    .map(([key, value]) => {
-      const formattedKey = kebabCase(key)
-      if (typeof value === 'string') {
-        return `${formattedKey}="${value}"`
-      } else if (typeof value === 'number') {
-        return `:${formattedKey}="${value}"`
-      } else if (typeof value === 'boolean') {
-        return value ? formattedKey : `:${formattedKey}="false"`
-      }
-      return ''
-    })
-    .filter(Boolean)
-    .join(' ')
-
-  const itemsProp = props.items ? ':items="items"' : ''
-  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
-  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
-  const formattedProps = allProps ? ` ${allProps}` : ''
-
-  let scriptSetup = ''
-  if (imports || itemsCode || calendarValueCode) {
-    scriptSetup = '<script setup lang="ts">'
-    if (imports) scriptSetup += `\n${imports}`
-    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
-    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
-    if (itemsCode) scriptSetup += `\n${itemsCode}`
-    scriptSetup += '\n</script>\n\n'
-  }
-
-  let componentContent = ''
-  let slotContent = ''
-
-  if (slots && Object.keys(slots).length > 0) {
-    const defaultSlot = slots.default?.trim()
-    if (defaultSlot) {
-      const indentedContent = defaultSlot
-        .split('\n')
-        .map(line => line.trim() ? `    ${line}` : line)
-        .join('\n')
-      componentContent = `\n${indentedContent}\n  `
-    }
-
-    Object.entries(slots).forEach(([slotName, content]) => {
-      if (slotName !== 'default' && content?.trim()) {
-        const indentedSlotContent = content.trim()
-          .split('\n')
-          .map(line => line.trim() ? `      ${line}` : line)
-          .join('\n')
-        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
-      }
-    })
-  }
-
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  let componentTemplate = ''
-  if (componentContent || slotContent) {
-    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
-  } else {
-    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
-  }
-
-  return `${scriptSetup}<template>
-  ${componentTemplate}
-</template>`
-}
-
-export function transformMDC(doc: Document): Document {
-  const componentName = camelCase(doc.title)
-
-  visitAndReplace(doc, 'component-theme', (node) => {
-    const attributes = node[1] as Record<string, string>
-    const mdcSpecificName = attributes?.slug
-
-    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-    const pro = parseBoolean(attributes[':pro'])
-    const prose = parseBoolean(attributes[':prose'])
-    const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
-
-    replaceNodeWithPre(
-      node,
-      'ts',
-      `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
-      'app.config.ts'
-    )
-  })
-
-  visitAndReplace(doc, 'component-code', (node) => {
-    const attributes = node[1] as ComponentAttributes
-    const pro = parseBoolean(attributes[':pro'])
-    const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
-    const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
-    const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
-    const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
-    const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
-    const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
-
-    const code = generateComponentCode({
-      pro,
-      props,
-      external,
-      externalTypes,
-      ignore,
-      hide,
-      componentName,
-      slots
-    })
-
-    replaceNodeWithPre(node, 'vue', code)
-  })
-
-  visitAndReplace(doc, 'component-props', (node) => {
-    const attributes = node[1] as Record<string, string>
-    const mdcSpecificName = attributes?.name
-    const isProse = parseBoolean(attributes[':prose'])
-
-    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-    const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
-
-    if (!componentMeta?.props) return
-
-    const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
-
-    const interfaceCode = generateTSInterface(
-      interfaceName,
-      Object.values(componentMeta.props),
-      propItemHandler,
-      `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
-    )
-    replaceNodeWithPre(node, 'ts', interfaceCode)
-  })
-
-  visitAndReplace(doc, 'component-slots', (node) => {
-    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-    if (!componentMeta?.slots) return
-
-    const interfaceCode = generateTSInterface(
-      `${pascalCaseName}Slots`,
-      Object.values(componentMeta.slots),
-      slotItemHandler,
-      `Slots for the ${pascalCaseName} component`
-    )
-    replaceNodeWithPre(node, 'ts', interfaceCode)
-  })
-
-  visitAndReplace(doc, 'component-emits', (node) => {
-    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-    const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
-
-    if (hasEvents) {
-      const interfaceCode = generateTSInterface(
-        `${pascalCaseName}Emits`,
-        Object.values(componentMeta.events),
-        emitItemHandler,
-        `Emitted events for the ${pascalCaseName} component`
-      )
-      replaceNodeWithPre(node, 'ts', interfaceCode)
-    } else {
-      node[0] = 'p'
-      node[1] = {}
-      node[2] = 'No events available for this component.'
-    }
-  })
-
-  visitAndReplace(doc, 'component-example', (node) => {
-    const camelName = camelCase(node[1]['name'])
-    const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
-    const code = components[name].code
-    replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
-  })
-
-  return doc
-}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.2.0",
-  "packageManager": "pnpm@10.12.2",
+  "version": "3.1.2",
+  "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:build": "nuxt build playground",
+    "dev": "nuxi dev playground --uiDev",
+    "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",
-    "docs": "nuxt dev docs --uiDev",
-    "docs:build": "nuxt build docs",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
+    "docs": "nuxi dev docs --uiDev",
+    "docs:build": "nuxi build docs",
+    "docs:prepare": "nuxt-component-meta docs",
     "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",
-    "@internationalized/date": "^3.8.2",
-    "@internationalized/number": "^3.6.3",
+    "@iconify/vue": "^4.3.0",
+    "@internationalized/date": "^3.8.0",
+    "@internationalized/number": "^3.6.1",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.14.0",
-    "@nuxt/kit": "^3.17.5",
-    "@nuxt/schema": "^3.17.5",
+    "@nuxt/icon": "^1.13.0",
+    "@nuxt/kit": "^3.17.3",
+    "@nuxt/schema": "^3.17.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.10",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.10",
-    "@vueuse/core": "^13.4.0",
-    "@vueuse/integrations": "^13.4.0",
-    "colortranslator": "^5.0.0",
+    "@unhead/vue": "^2.0.9",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.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",
-    "tinyglobby": "^0.2.14",
-    "unplugin": "^2.3.5",
-    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.7.0",
-    "vaul-vue": "0.4.1",
+    "tailwindcss": "^4.1.7",
+    "tinyglobby": "^0.2.13",
+    "unplugin": "^2.3.4",
+    "unplugin-auto-import": "^19.2.0",
+    "unplugin-vue-components": "^28.5.0",
+    "vaul-vue": "^0.4.1",
     "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.29.0",
-    "happy-dom": "^18.0.1",
-    "nuxt": "^3.17.5",
-    "release-it": "^19.0.3",
-    "vitest": "^3.2.4",
+    "eslint": "^9.27.0",
+    "happy-dom": "^17.4.7",
+    "nuxt": "^3.17.3",
+    "release-it": "^19.0.2",
+    "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:*",
-    "vue": "^3.5.17",
+    "@nuxt/ui": "latest",
+    "vue": "^3.5.14",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.67"
+    "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 rangeValue = shallowRef({
+const multipleValue = 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 />
-    </div>
-    <div class="flex justify-center gap-2">
-      <UCalendar v-model="rangeValue" range />
+      <UCalendar v-model="multipleValue" range />
     </div>
   </div>
 </template>

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

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

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',
-    type: 'trigger',
+    to: '/components',
     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"
-      :tooltip="tooltip"
-      :popover="popover"
+      arrow
       :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/table.vue

@@ -3,7 +3,6 @@ import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn, TableRow } from '@nuxt/ui'
 import { getPaginationRowModel } from '@tanstack/vue-table'
-import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -11,7 +10,6 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
-const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -233,7 +231,7 @@ const columns: TableColumn<Payment>[] = [{
     }, {
       label: 'Copy payment ID',
       onSelect() {
-        copy(row.original.id)
+        navigator.clipboard.writeText(row.original.id)
 
         toast.add({
           title: 'Payment ID copied to clipboard!',

playground/app/pages/components/timeline.vue

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

playground/package.json

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

renovate.json

@@ -19,8 +19,7 @@
   }, {
     "groupName": "reka-ui",
     "matchPackageNames": [
-      "reka-ui",
-      "vaul-vue"
+      "reka-ui"
     ]
   }, {
     "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/Alert.vue

@@ -133,6 +133,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
         <UButton
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
+          size="md"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"

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
-    :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"
-  >
+  <Primitive :as="as" :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[])"
-    :default-value="(defaultValue as DateValue)"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
     :class="ui.root({ class: [props.ui?.root, props.class] })"

src/runtime/components/Carousel.vue

@@ -310,6 +310,7 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
+          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -320,6 +321,7 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
+          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
@@ -334,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

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