chore(release): v3.0.0-alpha.1

Solved in https://github.com/unjs/mkdist/pull/244

.github/workflows/ci-dev.yml

@@ -1,72 +0,0 @@
-name: ci-dev
-
-on:
-  push:
-    branches:
-      - dev
-  pull_request:
-    branches:
-      - dev
-
-jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    permissions:
-      contents: read
-      pull-requests: read
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [20]
-
-    env:
-      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Filter changes
-        uses: dorny/paths-filter@v3
-        id: changes
-        with:
-          filters: |
-            src:
-              - 'src/**'
-              - 'package.json'
-              - 'pnpm-lock.yaml'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Test
-        run: pnpm run test run
-
-      - name: Build
-        run: pnpm run build
-
-      - name: Release Edge
-        if: github.event_name == 'push' && steps.changes.outputs.src == 'true'
-        run: ./scripts/release-edge.sh
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/ci-v3.yml

@@ -37,16 +37,6 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: pnpm
 
-      - name: Filter changes
-        uses: dorny/paths-filter@v3
-        id: changes
-        with:
-          filters: |
-            src:
-              - 'src/**'
-              - 'package.json'
-              - 'pnpm-lock.yaml'
-
       - name: Install dependencies
         run: pnpm install
 

.github/workflows/ci.yml

@@ -1,61 +0,0 @@
-name: ci-main
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [20]
-
-    env:
-      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Test
-        run: pnpm run test run
-
-      - name: Build
-        run: pnpm run build
-
-      - name: Version Check
-        id: check
-        uses: EndBug/version-check@v2
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Release
-        if: github.event_name == 'push' && steps.check.outputs.changed == 'true'
-        run: ./scripts/release.sh
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [3.0.0-alpha.1](https://github.com/nuxt/ui/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2024-09-11)
+
+
+### Features
+
+* **module:** hard-code css file to be imported anywhere ([62a2643](https://github.com/nuxt/ui/commit/62a2643a80e7ab6c6e154ba59801d393d9a53c40))
+
+
+### Bug Fixes
+
+* **ContextMenu/DropdownMenu:** lint unused var ([a03a55c](https://github.com/nuxt/ui/commit/a03a55cf8d89c45fba6607f83b67367cfd419c3e))
+* import from `../types/index` ([3e28c8f](https://github.com/nuxt/ui/commit/3e28c8f35a64a7c19ce18f36dbe580503f2050bc))
+* **Link:** only bind necessary slot props ([7fe7ff6](https://github.com/nuxt/ui/commit/7fe7ff6fe2055d29b7fd54793ca52850842294e3))
+* **NavigationMenu:** handle open state hover effect ([84186e5](https://github.com/nuxt/ui/commit/84186e52e997a4dd55f98bf7bc0199656943b9c9))
+* **plugins:** infer type from `[#app](https://github.com/nuxt/ui/issues/app)` to remove build warning ([debf9cc](https://github.com/nuxt/ui/commit/debf9cc85339b7b162ac34392757214a16dad977))
+* **README:** license link ([71428da](https://github.com/nuxt/ui/commit/71428da3dc9c6f17a6e21b2bd889f6090be127d6))
+* **templates:** augment `@nuxt/schema` rather than `nuxt/schema` ([40b3570](https://github.com/nuxt/ui/commit/40b3570343dc68684d3ecf03e1a439e815f57ba3))
+* **types:** no longer need to import types with `/index` suffix ([8277167](https://github.com/nuxt/ui/commit/82771673f20b6ece7e126a4f8914311473d687e3))
+* **useButtonGroup:** lint ([97d0593](https://github.com/nuxt/ui/commit/97d05936cd198026e6c4d66920266e0b4b85242c))
+
 ## [3.0.0-alpha.0](https://github.com/nuxt/ui/compare/v2.15.0...v3.0.0-alpha.0) (2024-09-05)
 
 

README.md

@@ -94,7 +94,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md)
 [npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE
+[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

docs/app/app.vue

@@ -91,3 +91,14 @@ provide('files', files)
     <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../content/**/*.md";
+
+@theme {
+  --font-family-sans: 'Inter', sans-serif;
+}
+</style>

docs/app/components/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <UBanner icon="i-heroicons-light-bulb" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
+  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
     <template #title>
       You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
     </template>

docs/app/components/content/ComponentExample.vue

@@ -76,7 +76,7 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
 <template>
   <div class="my-5">
     <div v-if="preview">
-      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md" :class="[props.class]">
+      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md z-[1]" :class="[props.class]">
         <component :is="camelName" v-bind="componentProps" />
       </div>
     </div>

docs/app/components/content/ComponentTheme.vue

@@ -54,7 +54,7 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla
 
 ${strippedCompoundVariants.value
     ? `
-::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/theme/${name}.ts"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/theme/${name}.ts"}
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
     : ''}

docs/app/components/content/HighlightInlineType.vue

@@ -4,17 +4,24 @@ const props = defineProps<{
 }>()
 
 const type = computed(() => {
-  if (props.type.includes(', "as" | "asChild" | "forceMount">')) {
+  let type = props.type
-    return props.type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
+  if (type.includes(', "as" | "asChild" | "forceMount">')) {
+    type = type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
   }
-  if (props.type.includes(', "as" | "asChild">')) {
+  if (type.includes(', "as" | "asChild">')) {
-    return props.type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+    type = type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+  }
+  if (type.startsWith('undefined |')) {
+    type = type.replace('undefined |', '')
+  }
+  if (type.endsWith('| undefined')) {
+    type = type.replace('| undefined', '')
   }
 
-  return props.type
+  return type
 })
 
-const { data: ast } = await useAsyncData(`hightlight-inline-code-${props.type}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
+const { data: ast } = await useAsyncData(`hightlight-inline-code-${type.value}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
 </script>
 
 <template>

docs/app/components/content/IconsTheme.vue

@@ -2,31 +2,23 @@
 import json5 from 'json5'
 
 const appConfig = useAppConfig()
-const { $prettier } = useNuxtApp()
+
+const icons = computed(() => {
+  return {
+    ui: {
+      icons: appConfig.ui.icons
+    }
+  }
+})
 
 const { data: ast } = await useAsyncData(`icons-theme`, async () => {
   const md = `
 \`\`\`ts [app.config.ts]
-export default defineAppConfig({
+export default defineAppConfig(${json5.stringify(icons.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
-  ui: {
-    icons: ${json5.stringify(appConfig.ui.icons, null, 2)}
-  }
-})
 \`\`\`\
 `
 
-  let formatted = ''
+  return parseMarkdown(md)
-  try {
-    formatted = await $prettier.format(md, {
-      trailingComma: 'none',
-      semi: false,
-      singleQuote: true
-    })
-  } catch {
-    formatted = md
-  }
-
-  return parseMarkdown(formatted)
 })
 </script>
 

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open'
+
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack'
+
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    slot: 'components'
+  }
+]
+</script>
+
+<template>
+  <UNavigationMenu :items="items" class="justify-center">
+    <template #components-trailing>
+      <UBadge label="44" variant="subtle" size="sm" />
+    </template>
+  </UNavigationMenu>
+</template>

docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open',
+    children: [
+      {
+        label: 'Introduction',
+        description: 'Fully styled and customizable components for Nuxt.',
+        icon: 'i-heroicons-home'
+      },
+      {
+        label: 'Installation',
+        description: 'Learn how to install and configure Nuxt UI in your application.',
+        icon: 'i-heroicons-cloud-arrow-down'
+      },
+      {
+        label: 'Icons',
+        icon: 'i-heroicons-face-smile',
+        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      },
+      {
+        label: 'Colors',
+        icon: 'i-heroicons-swatch',
+        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+      },
+      {
+        label: 'Theme',
+        icon: 'i-heroicons-cog',
+        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      }
+    ]
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack',
+    children: [
+      {
+        label: 'defineShortcuts',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Define shortcuts for your application.'
+      },
+      {
+        label: 'useModal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'useSlideover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a slideover within your application.'
+      },
+      {
+        label: 'useToast',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a toast within your application.'
+      }
+    ]
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    children: [
+      {
+        label: 'Link',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Use NuxtLink with superpowers.'
+      },
+      {
+        label: 'Modal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'NavigationMenu',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of links.'
+      },
+      {
+        label: 'Pagination',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of pages.'
+      },
+      {
+        label: 'Popover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a non-modal dialog that floats around a trigger element.'
+      },
+      {
+        label: 'Progress',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Show a horizontal bar to indicate task progression.'
+      }
+    ]
+  }
+]
+
+const active = ref('0')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
+})
+</script>
+
+<template>
+  <UNavigationMenu v-model="active" :items="items" class="justify-center" />
+</template>

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

@@ -1,22 +1,33 @@
 ---
 title: Installation
-description: 'Learn how to install and configure Nuxt UI in your application.'
+description: 'Learn how to install and configure Nuxt UI v3 in your application.'
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Setup
 
-### Add to a Nuxt project
+1. Install the Nuxt UI v3 alpha package:
 
-1. Add `@nuxt/ui` module to your project:
+::code-group
 
-```bash
+```bash [pnpm]
-npx nuxi@latest module add ui
+pnpm add @nuxt/ui@next
 ```
 
-2. Add it to the `modules` section in your `nuxt.config.ts`:
+```bash [yarn]
+yarn add @nuxt/ui@next
+```
+
+```bash [npm]
+npm install @nuxt/ui@next
+```
+
+```bash [bun]
+bun add @nuxt/ui@next
+```
+
+::
+
+2. Register the Nuxt UI module in your `nuxt.config.ts`:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,25 +35,29 @@ export default defineNuxtConfig({
 })
 ```
 
-That's it! You can now use all the components and composables in your Nuxt app ✨
+3. Import Tailwind and Nuxt UI in your CSS:
 
-### Use Nuxt starter
+```vue [app.vue]
-
+<style>
-[Nuxt Starter](https://nuxt.new/) template makes it easy to get started with Nuxt UI.
+@import "tailwindcss";
-The Nuxt Starter template is available from the `nuxi init` command.
+@import "@nuxt/ui";
-
+</style>
-```bash
-npx nuxi@latest init -t ui
 ```
 
-Please check [nuxt/starter](https://github.com/nuxt/starter/tree/ui) for details.
+::tip
+This is done here in the `<style>` block of your `app.vue` file, but you can also do it in a [`CSS`](https://nuxt.com/docs/getting-started/styling#the-css-property) file.
+::
 
 ## Options
 
-You can customize Nuxt UI by providing options in your `nuxt.config`:
+You can customize Nuxt UI by providing options in your `nuxt.config.ts`:
 
 ### `prefix`
 
+Use the `prefix` option to change the prefix of the components.
+
+- Default: `U`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -54,6 +69,10 @@ export default defineNuxtConfig({
 
 ### `colors`
 
+Use the `colors` option to choose which Tailwind CSS colors are used to generate classes for components.
+
+- Default: `['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -63,8 +82,16 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
+This can be useful to reduce the number of CSS classes generated in your bundle.
+::
+
 ### `transitions`
 
+Use the `transitions` option to disable all transitions on components.
+
+- Default: `true`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -74,19 +101,6 @@ export default defineNuxtConfig({
 })
 ```
 
-## Edge
+::note
-
+This option adds the `transition-colors` class on components with hover or active states.
-To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
+::
-
-Update your `package.json` to the following:
-
-```diff [package.json]
-{
-  "devDependencies": {
--   "@nuxt/ui": "^2.11.0"
-+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
-  }
-}
-```
-
-Then run `pnpm install`, `yarn install` or `npm install`.

docs/content/3.components/0.app.md

@@ -4,7 +4,7 @@ description: Wraps your app to provide global configurations and more.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/App.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/App.vue
 ---
 
 ## Usage

docs/content/3.components/accordion.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/accordion.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Accordion.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Accordion.vue
 ---
 
 ## Usage
@@ -139,7 +139,9 @@ props:
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
 
+::note
 You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
 
 ::component-code
 ---

docs/content/3.components/alert.md

@@ -3,7 +3,7 @@ description: A callout to draw user's attention.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Alert.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Alert.vue
 ---
 
 ## Usage
@@ -238,6 +238,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/avatar-group.md

@@ -4,7 +4,7 @@ description: Stack multiple avatars in a group.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/AvatarGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/AvatarGroup.vue
 ---
 
 ## Usage

docs/content/3.components/avatar.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/avatar.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Avatar.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue
 ---
 
 ## Usage

docs/content/3.components/badge.md

@@ -3,7 +3,7 @@ description: A short text to represent a status or a category.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Badge.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Badge.vue
 ---
 
 ## Usage

docs/content/3.components/breadcrumb.md

@@ -3,7 +3,7 @@ description: A hierarchy of links to navigate through a website.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Breadcrumb.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Breadcrumb.vue
 ---
 
 ## Usage
@@ -115,6 +115,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/button-group.md

@@ -4,7 +4,7 @@ description: Group multiple button-like elements together.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ButtonGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ButtonGroup.vue
 ---
 
 ## Usage

docs/content/3.components/button.md

@@ -3,7 +3,7 @@ description: A button element that can act as a link or trigger an action.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Button.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Button.vue
 ---
 
 ## Usage
@@ -220,6 +220,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace
@@ -231,7 +232,7 @@ ignore:
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Link.vue#L13"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/runtime/components/Link.vue#L13"}
 The `Button` component extends the `Link` component. Check out the source code on GitHub.
 ::
 

docs/content/3.components/card.md

@@ -3,7 +3,7 @@ description: Display content in a card with a header, body and footer.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Card.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Card.vue
 ---
 
 ## Usage

docs/content/3.components/carousel.md

@@ -3,7 +3,7 @@ description: A carousel with motion and swipe support.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Carousel.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Carousel.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/checkbox.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/checkbox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Checkbox.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Checkbox.vue
 ---
 
 ## Usage

docs/content/3.components/chip.md

@@ -3,7 +3,7 @@ description: An indicator of a numeric value or a state.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Chip.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Chip.vue
 ---
 
 ## Usage

docs/content/3.components/collapsible.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/collapsible.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Collapsible.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Collapsible.vue
 ---
 
 ## Usage

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

@@ -7,16 +7,37 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/CommandPalette.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
 ## Examples
 
+### Control search term
+
+### Control selected value
+
+### With fetched items
+
+### With filtered items
+
+### Within a modal
+
+### Within a drawer
+
+### Within a popover
+
+### Listen open state
+
+### With custom search
+
+### With highlighted search
+
+### With custom slot
+
+### With empty slot
+
 ## API
 
 ### Props
@@ -36,6 +57,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/container.md

@@ -3,7 +3,7 @@ description: A container lets you center and constrain the width of your content
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Container.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Container.vue
 ---
 
 ## Usage

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

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/context-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ContextMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ContextMenu.vue
 ---
 
 ## Usage
@@ -288,6 +288,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/drawer.md

@@ -6,7 +6,7 @@ links:
     to: https://github.com/radix-vue/vaul-vue
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Drawer.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Drawer.vue
 ---
 
 ## Usage

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

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/dropdown-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/DropdownMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/DropdownMenu.vue
 ---
 
 ## Usage
@@ -360,6 +360,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/form-field.md

@@ -4,7 +4,7 @@ description: A wrapper for form elements that provides validation and error hand
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/FormField.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/FormField.vue
 ---
 
 ## Usage

docs/content/3.components/form.md

@@ -3,7 +3,7 @@ description: A form element that provides validation and submission handling.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Form.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Form.vue
 navigation:
   badge:
     label: Todo

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

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/InputMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputMenu.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/input.md

@@ -3,7 +3,7 @@ description: An input element to enter text.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Input.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Input.vue
 ---
 
 ## Usage

docs/content/3.components/kbd.md

@@ -4,7 +4,7 @@ description: A kbd element to display a keyboard key.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Kbd.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Kbd.vue
 navigation:
   title: Kbd
 ---
@@ -31,7 +31,7 @@ props:
 ---
 ::
 
-You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.
+You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.
 
 ::component-code
 ---

docs/content/3.components/link.md

@@ -3,7 +3,7 @@ description: A wrapper around <NuxtLink> with extra props.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Link.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Link.vue
 ---
 
 ## Usage

docs/content/3.components/meter.md

@@ -3,7 +3,7 @@ description: A gauge meter that fills or depletes.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Meter.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Meter.vue
 navigation: false
 ---
 

docs/content/3.components/modal.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/dialog.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Modal.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Modal.vue
 ---
 
 ## Usage
@@ -281,7 +281,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
 You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/ModalProvider.vue) component.
+Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
 ::
 
 First, create a modal component that will be opened programatically:
@@ -359,6 +359,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

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

@@ -7,10 +7,7 @@ links:
     to: https://www.radix-vue.com/components/navigation-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/NavigationMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/NavigationMenu.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -24,6 +21,8 @@ Use the `items` prop as an array of objects with the following properties:
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `select?(e: Event): void`{lang="ts-type"}
@@ -42,6 +41,7 @@ props:
   items:
     - label: Guide
       icon: i-heroicons-book-open
+      to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
@@ -139,10 +139,8 @@ Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -150,6 +148,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -166,7 +165,7 @@ props:
 ::
 
 ::note
-Groups will be spaced between each other when orientation is `horizontal` and separated by a line when orientation is `vertical`.
+Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
 ::
 
 ### Highlight
@@ -178,7 +177,6 @@ Use the `highlight-color` prop to change the color of the border. It defaults to
 ::component-code
 ---
 prettier: true
-collapse: true
 ignore:
   - items
   - highlight
@@ -192,6 +190,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -218,10 +217,8 @@ Use the `color` prop to change the color of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -229,6 +226,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -250,10 +248,8 @@ Use the `variant` prop to change the variant of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -263,6 +259,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -282,8 +279,232 @@ props:
 The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
 ::
 
+### Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
+
+::note
+You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  trailingIcon: 'i-heroicons-plus'
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
+### Arrow
+
+Use the `arrow` prop to display an arrow on the NavigationMenu content when items have children.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - arrow
+  - class
+external:
+  - items
+props:
+  arrow: true
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::note
+The arrow is animated to follow the active item.
+::
+
 ## 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
+---
+collapse: true
+name: 'navigation-menu-model-value-example'
+---
+::
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### 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"}
+
+::component-example
+---
+name: 'navigation-menu-custom-slot-example'
+class: 'justify-center'
+---
+::
+
+::tip{to="#slots"}
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
+::
+
 ## API
 
 ### Props

docs/content/3.components/pagination.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/pagination.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Pagination.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Pagination.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/popover.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/popover.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Popover.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Popover.vue
 ---
 
 ## Usage

docs/content/3.components/progress.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/progress.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Progress.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Progress.vue
 ---
 
 ## Usage

docs/content/3.components/radio-group.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/radio-group.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/RadioGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/RadioGroup.vue
 ---
 
 ## Usage
@@ -40,7 +40,7 @@ You can also pass an array of objects with the following properties:
 
 - `label?: string`{lang="ts-type"}
 - `description?: string`{lang="ts-type"}
-- `value?: string`{lang="ts-type"}
+- [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
 
 ::component-code
@@ -70,6 +70,8 @@ props:
 When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
 ::
 
+#### Value Key
+
 You can change the property that is used to set the value by using the `value-key` prop.
 
 ::component-code

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

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/SelectMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/SelectMenu.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/select.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/select.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Select.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Select.vue
 ---
 
 ## Usage

docs/content/3.components/separator.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/separator.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Separator.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Separator.vue
 ---
 
 ## Usage

docs/content/3.components/skeleton.md

@@ -3,7 +3,7 @@ description: A placeholder to show while content is loading.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Skeleton.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Skeleton.vue
 ---
 
 ## Usage

docs/content/3.components/slideover.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/dialog.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Slideover.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slideover.vue
 ---
 
 ## Usage
@@ -280,7 +280,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
 You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/SlideoverProvider.vue) component.
+Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
 ::
 
 First, create a slideover component that will be opened programatically:
@@ -346,6 +346,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/slider.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/slider.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Slider.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slider.vue
 ---
 
 ## Usage

docs/content/3.components/switch.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/switch.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Switch.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Switch.vue
 ---
 
 ## Usage

docs/content/3.components/table.md

@@ -3,7 +3,7 @@ description: A responsive table element to display data in rows and columns.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Table.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Table.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/tabs.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/tabs.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tabs.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tabs.vue
 ---
 
 ## Usage

docs/content/3.components/textarea.md

@@ -3,7 +3,7 @@ description: A textarea element to input multi-line text.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Textarea.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Textarea.vue
 ---
 
 ## Usage

docs/content/3.components/toast.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/toast.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Toast.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue
 navigation:
   badge:
     label: Todo
@@ -17,7 +17,7 @@ navigation:
 Use the [useToast](/composables/use-toast) composable to display a toast in your application.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}
@@ -63,6 +63,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/tooltip.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/tooltip.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tooltip.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tooltip.vue
 ---
 
 ## Usage

docs/nuxt.config.ts

@@ -45,6 +45,13 @@ export default defineNuxtConfig({
     }]
   },
 
+  fonts: {
+    experimental: {
+      // Required for TailwindCSS v4. You can enable support for processing CSS variables for font family names. This may have a performance impact.
+      processCSSVariables: true
+    }
+  },
+
   content: {
     // sources: {
     //   pro: process.env.NUXT_UI_PRO_PATH
@@ -159,9 +166,5 @@ export default defineNuxtConfig({
     url: 'https://ui3.nuxt.com'
   },
 
-  typescript: {
-    strict: false
-  },
-
   compatibilityDate: '2024-07-09'
 })

docs/package.json

@@ -4,20 +4,20 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.1",
+    "@iconify-json/simple-icons": "^1.2.2",
-    "@iconify-json/vscode-icons": "^1.2.0",
+    "@iconify-json/vscode-icons": "^1.2.1",
     "@nuxt/content": "^2.13.2",
     "@nuxt/fonts": "^0.7.2",
     "@nuxt/image": "^1.8.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "file:../../ui-pro2",
+    "@nuxt/ui-pro": "2.0.0-alpha.1",
     "@nuxtjs/plausible": "^1.0.2",
     "@octokit/rest": "^21.0.2",
     "@vueuse/nuxt": "^11.0.3",
     "joi": "^17.13.3",
     "nuxt": "^3.13.1",
-    "nuxt-component-meta": "^0.7.0",
+    "nuxt-component-meta": "^0.8.0",
-    "nuxt-og-image": "^3.0.0-rc.66",
+    "nuxt-og-image": "^3.0.0-rc.67",
     "prettier": "^3.3.3",
     "ufo": "^1.5.4",
     "valibot": "^0.41.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -13,22 +13,21 @@
     ".": {
       "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.cjs",
+      "style": "./dist/runtime/index.css"
     },
     "./runtime/*": "./dist/runtime/*"
   },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
+  "style": "./dist/runtime/index.css",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist",
     "cli"
   ],
-  "engines": {
-    "node": ">=v16.20.2"
-  },
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
@@ -42,15 +41,15 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs",
     "test": "vitest",
-    "release": "release-it"
+    "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
     "@nuxt/icon": "^1.5.1",
     "@nuxt/kit": "^3.13.1",
     "@nuxt/schema": "^3.13.1",
     "@nuxtjs/color-mode": "^3.4.4",
-    "@tailwindcss/postcss": "4.0.0-alpha.22",
+    "@tailwindcss/postcss": "4.0.0-alpha.23",
-    "@tailwindcss/vite": "4.0.0-alpha.22",
+    "@tailwindcss/vite": "4.0.0-alpha.23",
     "@vueuse/core": "^11.0.3",
     "@vueuse/integrations": "^11.0.3",
     "defu": "^6.1.4",
@@ -59,16 +58,16 @@
     "radix-vue": "^1.9.5",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.22",
+    "tailwindcss": "4.0.0-alpha.23",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.5",
+    "@nuxt/eslint-config": "^0.5.7",
-    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/test-utils": "^3.14.2",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "happy-dom": "^15.7.3",
     "joi": "^17.13.3",
     "nuxt": "^3.13.1",

playground/app/app.vue

@@ -80,3 +80,8 @@ defineShortcuts({
     </UModal>
   </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+</style>

playground/app/components/FormElementsExample.vue

@@ -95,11 +95,11 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
     </UFormField>
 
     <div class="flex gap-2">
-      <UButton color="gray" type="submit" :disabled="form?.disabled">
+      <UButton color="gray" type="submit">
         Submit
       </UButton>
 
-      <UButton color="gray" variant="outline" :disabled="form?.disabled" @click="form?.clear()">
+      <UButton color="gray" variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>

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

@@ -92,17 +92,14 @@ const items = [
     </div>
 
     <UNavigationMenu
+      arrow
       :items="items"
       :color="color"
       :variant="variant"
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      arrow
+      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'"
-      :class="highlight ? [
-        'border-gray-200 dark:border-gray-800',
-        orientation === 'vertical' as any ? 'border-l' : 'border-b'
-      ] : undefined"
     />
   </div>
 </template>

src/module.ts

@@ -28,7 +28,7 @@ export default defineNuxtModule<ModuleOptions>({
     name: 'ui',
     configKey: 'ui',
     compatibility: {
-      nuxt: '>=3.10.0'
+      nuxt: '>=3.13.1'
     }
   },
   defaults: {
@@ -58,9 +58,6 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, 'isolate'].filter(Boolean).join(' ')
 
-    // Add keyframes for animations
-    nuxt.options.css.push(resolve('./runtime/assets/css/animations.css'))
-
     if (nuxt.options.builder === '@nuxt/vite-builder') {
       const plugin = await import('@tailwindcss/vite').then(r => r.default)
       addVitePlugin(plugin())

src/runtime/assets/css/animations.css

@@ -1,235 +0,0 @@
-@keyframes accordion-up {
-  from { height: var(--radix-accordion-content-height); }
-  to { height: 0; }
-}
-@keyframes accordion-down {
-  from { height: 0; }
-  to { height: var(--radix-accordion-content-height); }
-}
-
-@keyframes collapsible-up {
-  from { height: var(--radix-collapsible-content-height); }
-  to { height: 0; }
-}
-@keyframes collapsible-down {
-  from { height: 0; }
-  to { height: var(--radix-collapsible-content-height); }
-}
-
-@keyframes toast-collapsed-closed {
-  from { transform: var(--transform); }
-  to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
-}
-@keyframes toast-closed {
-  from { transform: var(--transform); }
-  to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
-}
-@keyframes toast-slide-left {
-  from { transform: translateX(0) translateY(var(--translate)); }
-  to { transform: translateX(-100%) translateY(var(--translate)); }
-}
-@keyframes toast-slide-right {
-  from { transform: translateX(0) translateY(var(--translate)); }
-  to { transform: translateX(100%) translateY(var(--translate)); }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-@keyframes scale-out {
-  from { opacity: 1; transform: scale(1); }
-  to { opacity: 0; transform: scale(0.95); }
-}
-
-@keyframes slide-in-from-top {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
-}
-@keyframes slide-out-to-top {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
-}
-@keyframes slide-in-from-right {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-@keyframes slide-out-to-right {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-@keyframes slide-in-from-bottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-@keyframes slide-out-to-bottom {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}
-@keyframes slide-in-from-left {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-@keyframes slide-out-to-left {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slide-in-from-top-and-fade {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes slide-out-to-top-and-fade {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(-4px); }
-}
-@keyframes slide-in-from-right-and-fade {
-  from { opacity: 0; transform: translateX(4px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes slide-out-to-right-and-fade {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(4px); }
-}
-@keyframes slide-in-from-bottom-and-fade {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes slide-out-to-bottom-and-fade {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(4px); }
-}
-@keyframes slide-in-from-left-and-fade {
-  from { opacity: 0; transform: translateX(-4px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes slide-out-to-left-and-fade {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(-4px); }
-}
-
-@keyframes enter-from-right {
-  from { opacity: 0; transform: translateX(200px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes enter-from-left {
-  from { opacity: 0; transform: translateX(-200px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes exit-to-right {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(200px); }
-}
-@keyframes exit-to-left {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(-200px); }
-}
-@keyframes carousel {
-  0%,
-  100% {
-    width: 50%
-  }
-  0% {
-    transform: translateX(-100%)
-  }
-  100% {
-    transform: translateX(200%)
-  }
-}
-@keyframes carousel-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0% {
-    transform: translateY(-100%)
-  }
-  100% {
-    transform: translateY(200%)
-  }
-}
-
-@keyframes carousel-inverse {
-  0%,
-  100% {
-    width: 50%
-  }
-  0% {
-    transform: translateX(200%)
-  }
-  100% {
-    transform: translateX(-100%)
-  }
-}
-@keyframes carousel-inverse-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0% {
-    transform: translateY(200%)
-  }
-  100% {
-    transform: translateY(-100%)
-  }
-}
-
-@keyframes swing {
-  0%,
-  100% {
-    width: 50%
-  }
-  0%,
-  100% {
-    transform: translateX(-25%)
-  }
-  50% {
-    transform: translateX(125%)
-  }
-}
-@keyframes swing-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0%,
-  100% {
-    transform: translateY(-25%)
-  }
-  50% {
-    transform: translateY(125%)
-  }
-}
-
-@keyframes elastic {
-  /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
-  0%,
-  100% {
-    width: 50%;
-    margin-left: 25%;
-  }
-  50% {
-    width: 90%;
-    margin-left: 5%;
-  }
-}
-@keyframes elastic-vertical {
-  0%,
-  100% {
-    height: 50%;
-    margin-top: 25%;
-  }
-  50% {
-    height: 90%;
-    margin-top: 5%;
-  }
-}

src/runtime/components/App.vue

@@ -29,7 +29,7 @@ const toasterProps = toRef(() => props.toaster)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />

src/runtime/components/ContextMenuContent.vue

@@ -4,14 +4,14 @@ import type { ContextMenuContentProps as RadixContextMenuContentProps, ContextMe
 import theme from '#build/ui/context-menu'
 import type { KbdProps, AvatarProps, ContextMenuItem, ContextMenuSlots } from '../types'
 
-const contextMenu = tv(theme)()
+const _contextMenu = tv(theme)()
 
 interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
   class?: any
-  ui: typeof contextMenu
+  ui: typeof _contextMenu
   uiOverride?: any
 }
 

src/runtime/components/DropdownMenuContent.vue

@@ -4,14 +4,14 @@ import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, Dropdow
 import theme from '#build/ui/dropdown-menu'
 import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
 
-const dropdownMenu = tv(theme)()
+const _dropdownMenu = tv(theme)()
 
 interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
   class?: any
-  ui: typeof dropdownMenu
+  ui: typeof _dropdownMenu
   uiOverride?: any
 }
 

src/runtime/components/Form.vue

@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
 
-const formId = props.id ?? useId()
+const formId = props.id ?? useId() as string
 
 const bus = useEventBus<FormEvent>(`form-${formId}`)
 const parentBus = inject(
@@ -157,15 +157,12 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
 }
 
 async function onSubmit(payload: Event) {
-  const event = payload as SubmitEvent
+  const event = payload as FormSubmitEvent<any>
 
   try {
     await _validate({ nested: true })
-    const submitEvent: FormSubmitEvent<any> = {
+    event.data = props.state
-      ...event,
+    emits('submit', event)
-      data: props.state
-    }
-    emits('submit', submitEvent)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error

src/runtime/components/FormField.vue

@@ -38,8 +38,8 @@ export interface FormFieldSlots {
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
-import { formFieldInjectionKey } from '../composables/useFormField'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
-import type { FormError } from '../types/form'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
@@ -51,23 +51,19 @@ const ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => {
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name)?.message)
-  return (props.error && typeof props.error === 'string')
-    || typeof props.error === 'boolean'
-    ? props.error
-    : formErrors?.value?.find(error => error.name === props.name)?.message
-})
 
 const id = ref(useId())
 
+provide(inputIdInjectionKey, id)
+
 provide(formFieldInjectionKey, computed(() => ({
-  id: id.value,
   error: error.value,
   name: props.name,
   size: props.size,
   eagerValidation: props.eagerValidation,
   validateOnInputDelay: props.validateOnInputDelay
-})))
+}) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>

src/runtime/components/Link.vue

@@ -74,31 +74,31 @@ const ui = computed(() => tv({
   }
 }))
 
-function isLinkActive(slotProps: any) {
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active
   }
 
-  if (props.exactQuery && !isEqual(slotProps.route.query, route.query)) {
+  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
     return false
   }
-  if (props.exactHash && slotProps.route.hash !== route.hash) {
+  if (props.exactHash && linkRoute.hash !== route.hash) {
     return false
   }
 
-  if (props.exact && slotProps.isExactActive) {
+  if (props.exact && isExactActive) {
     return true
   }
 
-  if (!props.exact && slotProps.isActive) {
+  if (!props.exact && isActive) {
     return true
   }
 
   return false
 }
 
-function resolveLinkClass(slotProps: any) {
+function resolveLinkClass({ route, isActive, isExactActive }: any) {
-  const active = isLinkActive(slotProps)
+  const active = isLinkActive({ route, isActive, isExactActive })
 
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass]
@@ -109,12 +109,39 @@ function resolveLinkClass(slotProps: any) {
 </script>
 
 <template>
-  <NuxtLink v-slot="slotProps" v-bind="nuxtLinkProps" custom>
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
     <template v-if="custom">
-      <slot v-bind="{ ...$attrs, ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" />
+      <slot
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href,
+          navigate,
+          rel,
+          target,
+          isExternal,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+        }"
+      />
     </template>
-    <ULinkBase v-else v-bind="{ ...$attrs, ...slotProps, as, type, disabled }" :class="resolveLinkClass(slotProps)">
+    <ULinkBase
-      <slot v-bind="{ ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" />
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href,
+        navigate,
+        rel,
+        target,
+        isExternal
+      }"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
   </NuxtLink>
 </template>

src/runtime/components/LinkBase.vue

@@ -6,12 +6,9 @@ export interface LinkBaseProps {
   click?: (e: MouseEvent) => void
   href?: string
   navigate?: (e: MouseEvent) => void
-  route?: object
   rel?: string
   target?: string
   isExternal?: boolean
-  isActive?: boolean
-  isExactActive?: boolean
 }
 </script>
 

src/runtime/components/RadioGroup.vue

@@ -69,7 +69,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
 
 const ui = computed(() => radioGroup({

src/runtime/components/Textarea.vue

@@ -132,6 +132,8 @@ function autoResize() {
     }
 
     textareaRef.value.rows = props.rows
+    const overflow = textareaRef.value.style.overflow
+    textareaRef.value.style.overflow = 'hidden'
 
     const styles = window.getComputedStyle(textareaRef.value)
     const paddingTop = Number.parseInt(styles.paddingTop)
@@ -144,6 +146,8 @@ function autoResize() {
     if (newRows > props.rows) {
       textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
+
+    textareaRef.value.style.overflow = overflow
   }
 }
 

src/runtime/composables/useButtonGroup.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type ComputedRef } from 'vue'
+import type { InjectionKey, ComputedRef } from 'vue'
 import { inject, computed } from 'vue'
 import type { ButtonGroupProps } from '../components/ButtonGroup.vue'
 import type { GetObjectField } from '../types/utils'

src/runtime/composables/useFormField.ts

@@ -18,22 +18,26 @@ type Props<T> = {
 export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
 export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>> = Symbol('nuxt-ui.form-events')
 export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = Symbol('nuxt-ui.form-field')
+export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol('nuxt-ui.input-id')
 export const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>> = Symbol('nuxt-ui.form-inputs')
 
-export function useFormField<T>(props?: Props<T>) {
+export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean }) {
   const formOptions = inject(formOptionsInjectionKey, undefined)
   const formBus = inject(formBusInjectionKey, undefined)
   const formField = inject(formFieldInjectionKey, undefined)
   const formInputs = inject(formInputsInjectionKey, undefined)
+  const inputId = inject(inputIdInjectionKey, undefined)
 
-  if (formField) {
+  if (formField && inputId) {
-    if (props?.id) {
+    if (opts?.bind === false || props?.legend) {
-      // Updates for="..." attribute on label if props.id is provided
+      // Removes for="..." attribute on label for RadioGroup and alike.
-      formField.value.id = props?.id
+      inputId.value = undefined
+    } else if (props?.id) {
+      // Updates for="..." attribute on label if props.id is provided.
+      inputId.value = props?.id
     }
-
+    if (formInputs && formField.value.name && inputId.value) {
-    if (formInputs && formField.value.name) {
+      formInputs.value[formField.value.name] = inputId.value
-      formInputs.value[formField.value.name] = formField.value.id
     }
   }
 
@@ -62,7 +66,7 @@ export function useFormField<T>(props?: Props<T>) {
   )
 
   return {
-    id: computed(() => props?.id ?? formField?.value.id),
+    id: computed(() => props?.id ?? inputId?.value),
     name: computed(() => props?.name ?? formField?.value.name),
     size: computed(() => props?.size ?? formField?.value.size),
     color: computed(() => formField?.value.error ? 'error' : props?.color),

src/runtime/index.css

@@ -0,0 +1,531 @@
+@theme {
+  --color-gray-*: initial;
+  --color-cool-50: #f9fafb;
+  --color-cool-100: #f3f4f6;
+  --color-cool-200: #e5e7eb;
+  --color-cool-300: #d1d5db;
+  --color-cool-400: #9ca3af;
+  --color-cool-500: #6b7280;
+  --color-cool-600: #4b5563;
+  --color-cool-700: #374151;
+  --color-cool-800: #1f2937;
+  --color-cool-900: #111827;
+  --color-cool-950: #030712;
+
+  --spacing-4_5: 1.125rem;
+
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+  --color-error-50: var(--color-error-50);
+  --color-error-100: var(--color-error-100);
+  --color-error-200: var(--color-error-200);
+  --color-error-300: var(--color-error-300);
+  --color-error-400: var(--color-error-400);
+  --color-error-500: var(--color-error-500);
+  --color-error-600: var(--color-error-600);
+  --color-error-700: var(--color-error-700);
+  --color-error-800: var(--color-error-800);
+  --color-error-900: var(--color-error-900);
+  --color-error-950: var(--color-error-950);
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
+}
+
+@layer base {
+  :root {
+    color-scheme: light dark;
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes toast-collapsed-closed {
+    from {
+      transform: var(--transform);
+    }
+
+    to {
+      transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale));
+    }
+  }
+
+  @keyframes toast-closed {
+    from {
+      transform: var(--transform);
+    }
+
+    to {
+      transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)));
+    }
+  }
+
+  @keyframes toast-slide-left {
+    from {
+      transform: translateX(0) translateY(var(--translate));
+    }
+
+    to {
+      transform: translateX(-100%) translateY(var(--translate));
+    }
+  }
+
+  @keyframes toast-slide-right {
+    from {
+      transform: translateX(0) translateY(var(--translate));
+    }
+
+    to {
+      transform: translateX(100%) translateY(var(--translate));
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes slide-in-from-top {
+    from {
+      transform: translateY(-100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-top {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slide-in-from-right {
+    from {
+      transform: translateX(100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-right {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from {
+      transform: translateY(100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-bottom {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-left {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slide-in-from-top-and-fade {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-top-and-fade {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  @keyframes slide-in-from-right-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-right-and-fade {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(4px);
+    }
+  }
+
+  @keyframes slide-in-from-bottom-and-fade {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-bottom-and-fade {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  @keyframes slide-in-from-left-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-left-and-fade {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+  }
+
+  @keyframes enter-from-right {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enter-from-left {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exit-to-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exit-to-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes carousel {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0% {
+      transform: translateX(-100%)
+    }
+
+    100% {
+      transform: translateX(200%)
+    }
+  }
+
+  @keyframes carousel-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0% {
+      transform: translateY(-100%)
+    }
+
+    100% {
+      transform: translateY(200%)
+    }
+  }
+
+  @keyframes carousel-inverse {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0% {
+      transform: translateX(200%)
+    }
+
+    100% {
+      transform: translateX(-100%)
+    }
+  }
+
+  @keyframes carousel-inverse-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0% {
+      transform: translateY(200%)
+    }
+
+    100% {
+      transform: translateY(-100%)
+    }
+  }
+
+  @keyframes swing {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0%,
+    100% {
+      transform: translateX(-25%)
+    }
+
+    50% {
+      transform: translateX(125%)
+    }
+  }
+
+  @keyframes swing-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0%,
+    100% {
+      transform: translateY(-25%)
+    }
+
+    50% {
+      transform: translateY(125%)
+    }
+  }
+
+  @keyframes elastic {
+
+    /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
+    0%,
+    100% {
+      width: 50%;
+      margin-left: 25%;
+    }
+
+    50% {
+      width: 90%;
+      margin-left: 5%;
+    }
+  }
+
+  @keyframes elastic-vertical {
+
+    0%,
+    100% {
+      height: 50%;
+      margin-top: 25%;
+    }
+
+    50% {
+      height: 90%;
+      margin-top: 5%;
+    }
+  }
+}

src/runtime/plugins/colors.ts

@@ -1,5 +1,7 @@
 import { computed } from 'vue'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
+// FIXME: https://github.com/nuxt/module-builder/issues/141#issuecomment-2078248248
+import type {} from '#app'
 
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()

src/runtime/plugins/modal.ts

@@ -1,5 +1,7 @@
 import { shallowRef } from 'vue'
 import { defineNuxtPlugin } from '#imports'
+// FIXME: https://github.com/nuxt/module-builder/issues/141#issuecomment-2078248248
+import type {} from '#app'
 import { modalInjectionKey, type ModalState } from '../composables/useModal'
 
 export default defineNuxtPlugin((nuxtApp) => {

src/runtime/plugins/slideover.ts

@@ -1,5 +1,7 @@
 import { shallowRef } from 'vue'
 import { defineNuxtPlugin } from '#imports'
+// FIXME: https://github.com/nuxt/module-builder/issues/141#issuecomment-2078248248
+import type {} from '#app'
 import { slideoverInjectionKey, type SlideoverState } from '../composables/useSlideover'
 
 export default defineNuxtPlugin((nuxtApp) => {

src/runtime/types/form.ts

@@ -30,7 +30,7 @@ export interface FormError<P extends string = string> {
 }
 
 export interface FormErrorWithId extends FormError {
-  id: string
+  id?: string
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }
@@ -71,7 +71,6 @@ export interface FormInjectedOptions {
 }
 
 export interface FormFieldInjectedOptions<T> {
-  id: string
   name?: string
   size?: GetObjectField<T, 'size'>
   error?: string | boolean

src/templates.ts

@@ -1,58 +1,11 @@
 import { fileURLToPath } from 'node:url'
 import { kebabCase } from 'scule'
-import { addTemplate, addTypeTemplate, hasNuxtModule } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import type { ModuleOptions } from './module'
 import * as theme from './theme'
 
 export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
-  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-  if (!nuxt.options.css.find(path => path.endsWith('tailwind.css'))) {
-    const template = addTemplate({
-      filename: 'tailwind.css',
-      write: true,
-      getContents: () => `@import "tailwindcss";
-@import "./ui.css";
-${hasNuxtModule('@nuxt/content') ? '@source "../content/**/*.md";' : ''}
-`
-    })
-
-    nuxt.options.css.unshift(template.dst)
-  }
-
-  addTemplate({
-    filename: 'ui.css',
-    write: true,
-    getContents: () => `@layer base {
-  :root {
-    color-scheme: light dark;
-  }
-}
-
-@theme {
-  --color-gray-*: initial;
-  --color-cool-50: #f9fafb;
-  --color-cool-100: #f3f4f6;
-  --color-cool-200: #e5e7eb;
-  --color-cool-300: #d1d5db;
-  --color-cool-400: #9ca3af;
-  --color-cool-500: #6b7280;
-  --color-cool-600: #4b5563;
-  --color-cool-700: #374151;
-  --color-cool-800: #1f2937;
-  --color-cool-900: #111827;
-  --color-cool-950: #030712;
-
-  --spacing-4_5: 1.125rem;
-
-  ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n\t')}
-  ${shades.map(shade => `--color-error-${shade}: var(--color-error-${shade});`).join('\n\t')}
-  ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n\t')}
-}
-`
-  })
-
   for (const component in theme) {
     addTemplate({
       filename: `ui/${kebabCase(component)}.ts`,
@@ -112,16 +65,12 @@ type AppConfigUI = {
   icons?: Partial<typeof icons>
 } & DeepPartial<typeof ui, string>
 
-declare module 'nuxt/schema' {
-  interface AppConfigInput {
-    ui?: AppConfigUI
-  }
-}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     ui?: AppConfigUI
   }
 }
+
 export {}
 `
   })

src/theme/navigation-menu.ts

@@ -102,8 +102,8 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     variant: 'pill',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
+      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
     }
   }, ...options.colors.map((color: string) => ({
     color,
@@ -140,8 +140,8 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     variant: 'link',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white', options.transitions && 'transition-colors'],
+      link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.transitions && 'transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
     }
   }, ...options.colors.map((color: string) => ({
     color,

test/components/Form.spec.ts

@@ -228,7 +228,7 @@ describe('Form', () => {
       expect(passwordField.text()).toBe('Required')
     })
 
-    test('valid submit works', async () => {
+    test('validate on submit works', async () => {
       state.email = 'bob@dylan.com'
       state.password = 'strongpassword'
 
@@ -236,6 +236,7 @@ describe('Form', () => {
 
       expect(wrapper.setupState.onSubmit).toHaveBeenCalledTimes(1)
       expect(wrapper.setupState.onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'submit',
         data: {
           email: 'bob@dylan.com',
           password: 'strongpassword'

test/components/RadioGroup.spec.ts

@@ -72,7 +72,7 @@ describe('RadioGroup', () => {
           items: ['Option 1', 'Option 2']
         },
         slotTemplate: `
-        <UFormField name="value">
+        <UFormField name="value" label="Radio group">
           <URadioGroup id="input" v-model="state.value" :items="items" />
         </UFormField>
         `
@@ -107,5 +107,11 @@ describe('RadioGroup', () => {
       await flushPromises()
       expect(wrapper.text()).not.toContain('Error message')
     })
+
+    test('no label for=... on FormField', async () => {
+      const { wrapper } = await createForm()
+      const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes('Option'))[0]
+      expect(formFieldLabel.for).toBeUndefined()
+    })
   })
 })

test/components/__snapshots__/NavigationMenu.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-2-trigger-0" aria-controls="radix-navigation-menu-2-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-2-trigger-0" aria-controls="radix-navigation-menu-2-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -21,7 +21,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -47,7 +47,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-15-trigger-0" aria-controls="radix-navigation-menu-15-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-15-trigger-0" aria-controls="radix-navigation-menu-15-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -64,7 +64,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -88,7 +88,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-21-trigger-0" aria-controls="radix-navigation-menu-21-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-21-trigger-0" aria-controls="radix-navigation-menu-21-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -105,7 +105,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -129,7 +129,7 @@ exports[`NavigationMenu > renders with gray variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-7-trigger-0" aria-controls="radix-navigation-menu-7-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-7-trigger-0" aria-controls="radix-navigation-menu-7-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -146,7 +146,7 @@ exports[`NavigationMenu > renders with gray variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -170,7 +170,7 @@ exports[`NavigationMenu > renders with gray variant link highlight correctly 1`]
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-11-trigger-0" aria-controls="radix-navigation-menu-11-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-11-trigger-0" aria-controls="radix-navigation-menu-11-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -187,7 +187,7 @@ exports[`NavigationMenu > renders with gray variant link highlight correctly 1`]
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -211,7 +211,7 @@ exports[`NavigationMenu > renders with gray variant link highlight gray correctl
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-13-trigger-0" aria-controls="radix-navigation-menu-13-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-13-trigger-0" aria-controls="radix-navigation-menu-13-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -228,7 +228,7 @@ exports[`NavigationMenu > renders with gray variant link highlight gray correctl
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -252,7 +252,7 @@ exports[`NavigationMenu > renders with gray variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-6-trigger-0" aria-controls="radix-navigation-menu-6-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-6-trigger-0" aria-controls="radix-navigation-menu-6-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -269,7 +269,7 @@ exports[`NavigationMenu > renders with gray variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -293,7 +293,7 @@ exports[`NavigationMenu > renders with gray variant pill highlight correctly 1`]
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-10-trigger-0" aria-controls="radix-navigation-menu-10-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-10-trigger-0" aria-controls="radix-navigation-menu-10-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -310,7 +310,7 @@ exports[`NavigationMenu > renders with gray variant pill highlight correctly 1`]
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -334,7 +334,7 @@ exports[`NavigationMenu > renders with gray variant pill highlight gray correctl
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-12-trigger-0" aria-controls="radix-navigation-menu-12-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-12-trigger-0" aria-controls="radix-navigation-menu-12-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -351,7 +351,7 @@ exports[`NavigationMenu > renders with gray variant pill highlight gray correctl
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -375,7 +375,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-17-trigger-0" aria-controls="radix-navigation-menu-17-content-0">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-17-trigger-0" aria-controls="radix-navigation-menu-17-content-0">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -392,7 +392,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item="">Item slot</a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item="">Item slot</a>
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75" data-radix-vue-collection-item="">Item slot</button>
@@ -412,7 +412,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-19-trigger-0" aria-controls="radix-navigation-menu-19-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-19-trigger-0" aria-controls="radix-navigation-menu-19-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -429,7 +429,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -453,7 +453,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-18-trigger-0" aria-controls="radix-navigation-menu-18-content-0">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-18-trigger-0" aria-controls="radix-navigation-menu-18-content-0">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -470,7 +470,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -494,7 +494,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-20-trigger-0" aria-controls="radix-navigation-menu-20-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-20-trigger-0" aria-controls="radix-navigation-menu-20-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -511,7 +511,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span><span class="ms-auto inline-flex">Item trailing slot</span></a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span><span class="ms-auto inline-flex">Item trailing slot</span></a>
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75" data-radix-vue-collection-item=""><span class="iconify i-heroicons:question-mark-circle shrink-0 size-5 text-gray-400 dark:text-gray-500" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex">Item trailing slot</span></button>
@@ -531,7 +531,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-1-trigger-0" aria-controls="radix-navigation-menu-1-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-1-trigger-0" aria-controls="radix-navigation-menu-1-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -548,7 +548,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -572,7 +572,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-3-trigger-0" aria-controls="radix-navigation-menu-3-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-3-trigger-0" aria-controls="radix-navigation-menu-3-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span>
           <!--v-if-->
         </button>
         <!---->
@@ -589,7 +589,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
   <div class="px-2 h-px bg-gray-200 dark:bg-gray-800"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -610,7 +610,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-5-trigger-0" aria-controls="radix-navigation-menu-5-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-5-trigger-0" aria-controls="radix-navigation-menu-5-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -627,7 +627,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -651,7 +651,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-9-trigger-0" aria-controls="radix-navigation-menu-9-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-9-trigger-0" aria-controls="radix-navigation-menu-9-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -668,7 +668,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -692,7 +692,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-4-trigger-0" aria-controls="radix-navigation-menu-4-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-4-trigger-0" aria-controls="radix-navigation-menu-4-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -709,7 +709,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -733,7 +733,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-8-trigger-0" aria-controls="radix-navigation-menu-8-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-8-trigger-0" aria-controls="radix-navigation-menu-8-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -750,7 +750,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -774,7 +774,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-14-trigger-0" aria-controls="radix-navigation-menu-14-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-14-trigger-0" aria-controls="radix-navigation-menu-14-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -791,7 +791,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
@@ -815,7 +815,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-16-trigger-0" aria-controls="radix-navigation-menu-16-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-16-trigger-0" aria-controls="radix-navigation-menu-16-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -832,7 +832,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200 transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-gray-400 dark:text-gray-500" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->

vercel.json

@@ -1,8 +1,6 @@
 {
   "git": {
-    "deploymentEnabled": {
+    "deploymentEnabled": false
-      "v3": false
-    }
   },
   "github": {
     "silent": true