chore: up

2026-01-16 04:58:12 +01:00 · 2025-03-28 16:22:31 +01:00 · 2025-03-28 08:58:21 +01:00 · 2025-03-26 13:45:17 +01:00 · 2025-03-26 11:40:23 +01:00 · 2025-03-24 15:08:07 +01:00
289 changed files with 5101 additions and 7840 deletions
--- a/.github/workflows/module.yml
+++ b/.github/workflows/module.yml
@@ -160,9 +160,6 @@ jobs:
  nuxt-ui-pro:
    needs: build

-    # Only run this job if not a fork PR (when push event or PR from same repo)
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
-
    runs-on: ${{ matrix.os }}

    permissions:
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -10,16 +10,14 @@ jobs:

    permissions:
      issues: write
+      pull-requests: write

    steps:
      - uses: actions/stale@v9
        with:
-          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
-          only-labels: 'needs reproduction' # Only process these issues
-          days-before-issue-close: 7
-          ignore-updates: true
-          remove-stale-when-updated: false
-          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
-          close-issue-label: closed-by-bot
-          operations-per-run: 300 #default 30
+          exempt-issue-labels: triage,v3
+          stale-issue-message: 'This issue is stale because it has been open for 30 days with no activity.'
+          stale-issue-label: stale
+          stale-pr-label: stale
+          days-before-stale: 30
+          days-before-close: -1
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,38 +1,5 @@
 # Changelog

-## [3.0.2](https://github.com/nuxt/ui/compare/v3.0.1...v3.0.2) (2025-03-28)
-
-### Features
-
-* **Calendar:** allow year and month buttons styling ([#3672](https://github.com/nuxt/ui/issues/3672)) ([4a2b77d](https://github.com/nuxt/ui/commit/4a2b77d86c28806234002340eda39de4dc78cce0))
-* **locale:** add Armenian language ([#3664](https://github.com/nuxt/ui/issues/3664)) ([c76f590](https://github.com/nuxt/ui/commit/c76f5900970e3f5c451192b1207ccea04771e8b3))
-* **Table:** add `empty` prop ([afff54f](https://github.com/nuxt/ui/commit/afff54fecd31497238461e0a44abd8668ed734c3))
-
-### Bug Fixes
-
-* **Avatar:** proxy `$attrs` to default slot ([#3712](https://github.com/nuxt/ui/issues/3712)) ([88f349d](https://github.com/nuxt/ui/commit/88f349d0d74eb1c2ce5066818731759c25a9e83e))
-* **Button:** use `focus:outline-none` instead of `focus:outline-hidden` ([c231fe5](https://github.com/nuxt/ui/commit/c231fe5f26ca7614df46a7ec8a5ce7f4ec8884e7)), closes [#3658](https://github.com/nuxt/ui/issues/3658)
-* **CommandPalette:** use `group.id` as key ([bc61d29](https://github.com/nuxt/ui/commit/bc61d29cce531715a6279444845f02a002a22af7))
-* **components:** improve generic types ([#3331](https://github.com/nuxt/ui/issues/3331)) ([b998354](https://github.com/nuxt/ui/commit/b9983549a4b743724ea3ef99cc4a243f5ca41e53))
-* **Container:** add `w-full` class ([df00149](https://github.com/nuxt/ui/commit/df001495980647cab1e67fd16154f1bc778de5e2))
-* **defineLocale/defineShortcuts:** remove `@__NO_SIDE_EFFECTS__` ([82e2665](https://github.com/nuxt/ui/commit/82e26655a40782555299516f32a76046fa0dbd3a))
-* **Drawer:** remove `fadeFromIndex` prop proxy ([f7604e5](https://github.com/nuxt/ui/commit/f7604e565f717001a4d4c2974cf23559a3f01c21))
-* **Form:** clear dirty state after submit ([#3692](https://github.com/nuxt/ui/issues/3692)) ([3dd88ba](https://github.com/nuxt/ui/commit/3dd88bacecb2945efba8cc3cb4fe59fcbc056e9a))
-* **FormField:** add `help` to `aria-describedby` attribute ([#3691](https://github.com/nuxt/ui/issues/3691)) ([20c3392](https://github.com/nuxt/ui/commit/20c33920d005332db3c83f33a8c54c7c227ce0a0))
-* **InputMenu/SelectMenu:** empty search results ([94b6e52](https://github.com/nuxt/ui/commit/94b6e520f5ccf011204e953421fcc5b44b637e51))
-* **InputMenu:** reset `searchTerm` on `update:open` ([3074632](https://github.com/nuxt/ui/commit/3074632523e67fa6a0ad3d9a71e5692c285bdc3a)), closes [#3620](https://github.com/nuxt/ui/issues/3620)
-* **Link:** handle `aria-current` like `NuxtLink` / `RouterLink` ([c531d02](https://github.com/nuxt/ui/commit/c531d0248be7863980a1f676643c2dea8301c009))
-* **Link:** prevent `active="true"` binding on html ([d73768b](https://github.com/nuxt/ui/commit/d73768b70453d60dd4186a996c1cf808b0294bf6))
-* **Link:** properly pick all `aria-*` & `data-*` attrs ([ade16b7](https://github.com/nuxt/ui/commit/ade16b76cf535924a8d0f402b4d5d65cb67a55eb))
-* **Link:** proxy `onClick` ([370054b](https://github.com/nuxt/ui/commit/370054b20c0201c9dba84ddfcd1e916594619b93)), closes [#3631](https://github.com/nuxt/ui/issues/3631)
-* **NavigationMenu:** add `z-index` on viewport ([0095d89](https://github.com/nuxt/ui/commit/0095d8916bf361c0c89972e2f86b79850510c6a9)), closes [#3654](https://github.com/nuxt/ui/issues/3654)
-* **Switch:** prevent transition on focus outline ([68787b2](https://github.com/nuxt/ui/commit/68787b26fdf2bd5f9d9e812e5bfddb19abe45d1d))
-* **Table:** wrong condition on `caption` slot ([4ebb94c](https://github.com/nuxt/ui/commit/4ebb94cd7ef909b3547bce0922f75fe3ff74de4c))
-* **Tabs:** remove `focus:outline-hidden` class ([1769d5e](https://github.com/nuxt/ui/commit/1769d5ed6ea46b1f7eafdc48cb6456512229f98b))
-* **types:** add missing export for ButtonGroup ([#3709](https://github.com/nuxt/ui/issues/3709)) ([e7e6745](https://github.com/nuxt/ui/commit/e7e674559981177ad08be42418746060d7737df9))
-* **useOverlay:** refine `open` method type to infer close emit return type ([#3716](https://github.com/nuxt/ui/issues/3716)) ([bd99c2d](https://github.com/nuxt/ui/commit/bd99c2d850d57baccc51e049c0b578a6fc6ab431))
-* **vue:** mock `nuxtApp.hooks` & `useRuntimeHook` ([23bfeb9](https://github.com/nuxt/ui/commit/23bfeb937004d619187a67fb43e4c76b13d00069))
-
 ## [3.0.1](https://github.com/nuxt/ui/compare/v3.0.0...v3.0.1) (2025-03-21)

 ### ⚠ BREAKING CHANGES
--- a/README.md
+++ b/README.md
@@ -104,17 +104,6 @@ app.mount('#app')

 Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).

-## Contribution
-
-Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
-
- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
-
-## Local Development
-
-Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
-
 ## Credits

 - [nuxt/nuxt](https://github.com/nuxt/nuxt)
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -33,7 +33,7 @@ const component = ({ name, primitive, pro, prose, content }) => {
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '../utils/tv'
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'

 const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}

@@ -76,7 +76,7 @@ import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '../utils/tv'
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'

 const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}

--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -12,7 +12,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
-const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -65,7 +64,6 @@ provide('navigation', mappedNavigation)

      <ClientOnly>
        <LazyUContentSearch
-          :links="searchLinks"
          :files="files"
          :groups="[{
            id: 'framework',
--- a/docs/app/components/AdsCarbon.vue
+++ b/docs/app/components/AdsCarbon.vue
@@ -38,7 +38,7 @@ onMounted(() => {
  }

  .carbon-poweredby {
-    @apply block text-xs text-center text-(--ui-text-muted) pt-2;
+    @apply block text-[10px] text-center text-(--ui-text-dimmed) pt-2;
  }

  &:hover {
--- a/docs/app/components/Footer.vue
+++ b/docs/app/components/Footer.vue
@@ -2,8 +2,8 @@
 const route = useRoute()

 const links = [{
-  label: 'Team',
-  to: '/team'
+  label: 'Figma',
+  to: '/figma'
 }, {
  label: 'Roadmap',
  to: '/roadmap'
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -22,20 +22,8 @@ onMounted(() => {

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

-const githubLink = computed(() => {
-  return `https://github.com/nuxt/${value.value}`
-})
-
 const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
-const mobileLinks = computed(() => [
-  ...props.links.map(link => ({ ...link, defaultOpen: link.children && route.path.startsWith(link.to as string) })),
-  {
-    label: 'Open on GitHub',
-    to: githubLink.value,
-    icon: 'i-simple-icons-github',
-    target: '_blank'
-  }
-])
+const mobileLinks = computed(() => props.links.map(link => ({ ...link, defaultOpen: link.children && route.path.startsWith(link.to as string) })))
 </script>

 <template>
@@ -85,7 +73,7 @@ const mobileLinks = computed(() => [
          :key="value"
          color="neutral"
          variant="ghost"
-          :to="githubLink"
+          :to="`https://github.com/nuxt/${value}`"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
--- a/docs/app/components/SkyBg.vue
+++ b/docs/app/components/SkyBg.vue
@@ -14,7 +14,6 @@ const props = withDefaults(defineProps<{
  color?: string
  size?: { min: number, max: number }
  speed?: 'slow' | 'normal' | 'fast'
-  isIndex?: boolean
 }>(), {
  starCount: 50,
  color: 'var(--ui-primary)',
@@ -22,8 +21,7 @@ const props = withDefaults(defineProps<{
    min: 1,
    max: 3
  }),
-  speed: 'normal',
-  isIndex: false
+  speed: 'normal'
 })

 const route = useRoute()
@@ -55,7 +53,7 @@ const twinkleDuration = computed(() => {
 </script>

 <template>
-  <div class="absolute pointer-events-none z-[-1] overflow-hidden" :class="isIndex ? 'inset-y-0 left-4 right-4 lg:right-[50%]' : 'inset-0'">
+  <div class="absolute pointer-events-none z-[-1] inset-y-0 left-4 right-4 lg:right-[50%] overflow-hidden">
    <div
      v-for="star in stars"
      :key="star.id"
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -1,6 +1,5 @@
 <!-- eslint-disable no-useless-escape -->
 <script setup lang="ts">
-import type { ChipProps } from '@nuxt/ui'
 import json5 from 'json5'
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { hash } from 'ohash'
@@ -54,8 +53,6 @@ const props = defineProps<{
  hide?: string[]
  /** List of props to externalize in script setup */
  external?: string[]
-  /** The types of the externalized props */
-  externalTypes?: string[]
  /** List of props to use with `v-model` */
  model?: string[]
  /** List of props to cast from code and selection */
@@ -212,21 +209,11 @@ ${props.slots?.default}
    code += `
 <script setup lang="ts">
 `
-    if (props.externalTypes?.length) {
-      const removeArrayBrackets = (type: string): string => type.endsWith('[]') ? removeArrayBrackets(type.slice(0, -2)) : type
-
-      const types = props.externalTypes.map(type => removeArrayBrackets(type))
-      code += `import type { ${types.join(', ')} } from '@nuxt/ui${props.pro ? '-pro' : ''}'
-
-`
-    }
-
-    for (const [i, key] of props.external.entries()) {
+    for (const key of props.external) {
      const cast = props.cast?.[key]
      const value = cast ? castMap[cast]!.template(componentProps[key]) : json5.stringify(componentProps[key], null, 2)?.replace(/,([ |\t\n]+[}|\]])/g, '$1')
-      const type = props.externalTypes?.[i] ? `<${props.externalTypes[i]}>` : ''

-      code += `const ${key === 'modelValue' ? 'value' : key} = ref${type}(${value})
+      code += `const ${key === 'modelValue' ? 'value' : key} = ref(${value})
 `
    }
    code += `<\/script>
@@ -359,7 +346,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
                  inset
                  standalone
                  :color="(modelValue as any)"
-                  :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+                  :size="ui.itemLeadingChipSize()"
                  class="size-2"
                />
              </template>
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ChipProps } from '@nuxt/ui'
 import { camelCase } from 'scule'
 import { useElementSize } from '@vueuse/core'
 import { get, set } from '#ui/utils'
@@ -186,7 +185,7 @@ const urlSearchParams = computed(() => {
                  inset
                  standalone
                  :color="(modelValue as any)"
-                  :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+                  :size="ui.itemLeadingChipSize()"
                  class="size-2"
                />
              </template>
--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/docs/app/components/content/SupportedLanguages.vue
@@ -12,15 +12,14 @@ function getEmojiFlag(locale: string): string {
    ar: 'sa', // Arabic -> Saudi Arabia
    bn: 'bd', // Bengali -> Bangladesh
    ca: 'es', // Catalan -> Spain
-    ckb: 'iq', // Central Kurdish -> Iraq
    cs: 'cz', // Czech -> Czech Republic (note: modern country code is actually 'cz')
+    ckb: 'iq', // Central Kurdish -> Iraq
    da: 'dk', // Danish -> Denmark
    el: 'gr', // Greek -> Greece
-    en: 'gb', // English -> Great Britain
    et: 'ee', // Estonian -> Estonia
+    en: 'gb', // English -> Great Britain
    he: 'il', // Hebrew -> Israel
    hi: 'in', // Hindi -> India
-    hy: 'am', // Armenian -> Armenia
    ja: 'jp', // Japanese -> Japan
    km: 'kh', // Khmer -> Cambodia
    ko: 'kr', // Korean -> South Korea
@@ -28,7 +27,8 @@ function getEmojiFlag(locale: string): string {
    sv: 'se', // Swedish -> Sweden
    uk: 'ua', // Ukrainian -> Ukraine
    ur: 'pk', // Urdu -> Pakistan
-    vi: 'vn' // Vietnamese -> Vietnam
+    vi: 'vn', // Vietnamese -> Vietnam
+    hy: 'am' // Armenian -> Armenia
  }

  const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
--- a/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
-
-const items: AccordionItem[] = [
+const items = [
  {
    label: 'Icons',
    icon: 'i-lucide-smile'
--- a/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
-
-const items: AccordionItem[] = [
+const items = [
  {
    label: 'Icons',
    icon: 'i-lucide-smile'
--- a/docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
-
 const items = [
  {
    label: 'Icons',
@@ -10,7 +8,7 @@ const items = [
  {
    label: 'Colors',
    icon: 'i-lucide-swatch-book',
-    slot: 'colors' as const,
+    slot: 'colors',
    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
  },
  {
@@ -18,7 +16,7 @@ const items = [
    icon: 'i-lucide-box',
    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
  }
-] satisfies AccordionItem[]
+]
 </script>

 <template>
--- a/docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
-import { useSortable } from '@vueuse/integrations/useSortable'
-
-const items = shallowRef<AccordionItem[]>([
-  {
-    label: 'Icons',
-    icon: 'i-lucide-smile',
-    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-  },
-  {
-    label: 'Colors',
-    icon: 'i-lucide-swatch-book',
-    slot: 'colors' as const,
-    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
-  },
-  {
-    label: 'Components',
-    icon: 'i-lucide-box',
-    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
-  }
-])
-
-const accordion = useTemplateRef<HTMLElement>('accordion')
-
-useSortable(accordion, items, {
-  animation: 150
-})
-</script>
-
-<template>
-  <UAccordion ref="accordion" :items="items" />
-</template>
--- a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
-
-const items: AccordionItem[] = [
+const items = [
  {
    label: 'Icons',
    icon: 'i-lucide-smile',
--- a/docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
+++ b/docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { BreadcrumbItem } from '@nuxt/ui'
-
 const items = [{
  label: 'Home',
  to: '/'
 }, {
-  slot: 'dropdown' as const,
+  slot: 'dropdown',
  icon: 'i-lucide-ellipsis',
  children: [{
    label: 'Documentation'
@@ -20,7 +18,7 @@ const items = [{
 }, {
  label: 'Breadcrumb',
  to: '/components/breadcrumb'
-}] satisfies BreadcrumbItem[]
+}]
 </script>

 <template>
--- a/docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
+++ b/docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { BreadcrumbItem } from '@nuxt/ui'
-
-const items: BreadcrumbItem[] = [{
+const items = [{
  label: 'Home',
  to: '/'
 }, {
--- a/docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
+++ b/docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
-const items: DropdownMenuItem[] = [{
+const items = [{
  label: 'Team',
  icon: 'i-lucide-users'
 }, {
--- a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
@@ -11,7 +11,7 @@ const groups = [{
      label: 'Billing',
      icon: 'i-lucide-credit-card',
      kbds: ['meta', 'B'],
-      slot: 'billing' as const
+      slot: 'billing'
    },
    {
      label: 'Notifications',
@@ -25,7 +25,7 @@ const groups = [{
 }, {
  id: 'users',
  label: 'Users',
-  slot: 'users' as const,
+  slot: 'users',
  items: [
    {
      label: 'Benjamin Canac',
--- a/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { ContextMenuItem } from '@nuxt/ui'
-
 const showSidebar = ref(true)
 const showToolbar = ref(false)

-const items = computed<ContextMenuItem[]>(() => [{
+const items = computed(() => [{
  label: 'View',
  type: 'label' as const
 }, {
--- a/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { ContextMenuItem } from '@nuxt/ui'
-
-const items: ContextMenuItem[][] = [
+const items = [
  [
    {
      label: 'View',
--- a/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuItem } from '@nuxt/ui'
-
 const loading = ref(true)

-const items: ContextMenuItem[] = [{
+const items = [{
  label: 'Refresh the Page',
  slot: 'refresh'
 }, {
--- a/docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue
@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
-
-const [DefineFormTemplate, ReuseFormTemplate] = createReusableTemplate()
-const isDesktop = useMediaQuery('(min-width: 768px)')
-
-const open = ref(false)
-
-const state = reactive({
-  email: undefined
-})
-
-const title = 'Edit profile'
-const description = 'Make changes to your profile here. Click save when you\'re done.'
-</script>
-
-<template>
-  <DefineFormTemplate>
-    <UForm :state="state" class="space-y-4">
-      <UFormField label="Email" name="email" required>
-        <UInput v-model="state.email" placeholder="shadcn@example.com" required />
-      </UFormField>
-
-      <UButton label="Save changes" type="submit" />
-    </UForm>
-  </DefineFormTemplate>
-
-  <UModal v-if="isDesktop" v-model:open="open" :title="title" :description="description">
-    <UButton label="Edit profile" color="neutral" variant="outline" />
-
-    <template #body>
-      <ReuseFormTemplate />
-    </template>
-  </UModal>
-
-  <UDrawer v-else v-model:open="open" :title="title" :description="description">
-    <UButton label="Edit profile" color="neutral" variant="outline" />
-
-    <template #body>
-      <ReuseFormTemplate />
-    </template>
-  </UDrawer>
-</template>
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
 const showBookmarks = ref(true)
 const showHistory = ref(false)
 const showDownloads = ref(false)
@@ -38,7 +36,7 @@ const items = computed(() => [{
  onUpdateChecked(checked: boolean) {
    showDownloads.value = checked
  }
-}] satisfies DropdownMenuItem[])
+}])
 </script>

 <template>
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
-const items: DropdownMenuItem[][] = [
+const items = [
  [
    {
      label: 'View',
@@ -19,7 +17,7 @@ const items: DropdownMenuItem[][] = [
  [
    {
      label: 'Delete',
-      color: 'error',
+      color: 'error' as const,
      icon: 'i-lucide-trash'
    }
  ]
@@ -29,5 +27,9 @@ const items: DropdownMenuItem[][] = [
 <template>
  <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
    <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
+
+    <template #profile-trailing>
+      <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
+    </template>
  </UDropdownMenu>
 </template>
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
-const items = [
-  {
-    label: 'Profile',
-    icon: 'i-lucide-user',
-    slot: 'profile' as const
-  }, {
-    label: 'Billing',
-    icon: 'i-lucide-credit-card'
-  }, {
-    label: 'Settings',
-    icon: 'i-lucide-cog'
-  }
-] satisfies DropdownMenuItem[]
+const items = [{
+  label: 'Profile',
+  icon: 'i-lucide-user',
+  slot: 'profile'
+}, {
+  label: 'Billing',
+  icon: 'i-lucide-credit-card'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-cog'
+}]
 </script>

 <template>
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
 const open = ref(false)

 defineShortcuts({
  o: () => open.value = !open.value
 })

-const items: DropdownMenuItem[] = [
-  {
-    label: 'Profile',
-    icon: 'i-lucide-user'
-  }, {
-    label: 'Billing',
-    icon: 'i-lucide-credit-card'
-  }, {
-    label: 'Settings',
-    icon: 'i-lucide-cog'
-  }
-]
+const items = [{
+  label: 'Profile',
+  icon: 'i-lucide-user'
+}, {
+  label: 'Billing',
+  icon: 'i-lucide-credit-card'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-cog'
+}]
 </script>

 <template>
--- a/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
@@ -16,7 +16,7 @@ function onOpen() {

 <template>
  <UInputMenu
-    :items="countries"
+    :items="countries || []"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: 'i-lucide-search' }"
--- a/docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
@@ -8,7 +6,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -16,7 +14,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode

 <template>
  <UInputMenu
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    icon="i-lucide-user"
    placeholder="Select user"
@@ -25,7 +23,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
@@ -9,7 +7,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -17,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode

 <template>
  <UInputMenu
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    icon="i-lucide-user"
@@ -28,7 +26,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

@@ -12,7 +10,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -21,7 +19,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 <template>
  <UInputMenu
    v-model:search-term="searchTerm"
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    ignore-filter
    icon="i-lucide-user"
@@ -31,7 +29,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { InputMenuItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'benjamincanac',
@@ -25,16 +23,8 @@ const items = ref([
      src: 'https://github.com/noook.png',
      alt: 'noook'
    }
-  },
-  {
-    label: 'sandros94',
-    value: 'sandros94',
-    avatar: {
-      src: 'https://github.com/sandros94.png',
-      alt: 'sandros94'
-    }
  }
-] satisfies InputMenuItem[])
+])
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
-import type { InputMenuItem, ChipProps } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
-      color: 'error'
+      color: 'error' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
-      color: 'success'
+      color: 'success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
-      color: 'info'
+      color: 'info' as const
    }
  }
-] satisfies InputMenuItem[])
-
+])
 const value = ref(items.value[0])
 </script>

@@ -36,7 +33,7 @@ const value = ref(items.value[0])
        v-bind="modelValue.chip"
        inset
        standalone
-        :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+        :size="ui.itemLeadingChipSize()"
        :class="ui.itemLeadingChip()"
      />
    </template>
--- a/docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { InputMenuItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'Backlog',
@@ -22,8 +20,7 @@ const items = ref([
    value: 'done',
    icon: 'i-lucide-circle-check'
  }
-] satisfies InputMenuItem[])
-
+])
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
-
 const items = [
  {
    label: 'Docs',
    icon: 'i-lucide-book-open',
-    slot: 'docs' as const,
+    slot: 'docs',
    children: [
      {
        label: 'Icons',
@@ -24,7 +22,7 @@ const items = [
  {
    label: 'Components',
    icon: 'i-lucide-box',
-    slot: 'components' as const,
+    slot: 'components',
    children: [
      {
        label: 'Link',
@@ -56,7 +54,7 @@ const items = [
    label: 'GitHub',
    icon: 'i-simple-icons-github'
  }
-] satisfies NavigationMenuItem[]
+]
 </script>

 <template>
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
-
-const items: NavigationMenuItem[] = [
+const items = [
  {
    label: 'Guide',
    icon: 'i-lucide-book-open'
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
-
-const items: NavigationMenuItem[] = [
+const items = [
  {
    label: 'Guide',
    icon: 'i-lucide-book-open',
--- a/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
@@ -4,7 +4,8 @@ const { data: countries, status, execute } = await useLazyFetch<{
  code: string
  emoji: string
 }[]>('/api/countries.json', {
-  immediate: false
+  immediate: false,
+  default: () => []
 })

 function onOpen() {
--- a/docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
@@ -8,7 +6,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -16,7 +14,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode

 <template>
  <USelectMenu
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    icon="i-lucide-user"
    placeholder="Select user"
@@ -26,7 +24,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
@@ -9,7 +7,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -17,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode

 <template>
  <USelectMenu
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    icon="i-lucide-user"
@@ -28,7 +26,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

@@ -12,7 +10,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -21,7 +19,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 <template>
  <USelectMenu
    v-model:search-term="searchTerm"
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    ignore-filter
    icon="i-lucide-user"
@@ -32,7 +30,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { SelectMenuItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'benjamincanac',
@@ -25,16 +23,8 @@ const items = ref([
      src: 'https://github.com/noook.png',
      alt: 'noook'
    }
-  },
-  {
-    label: 'sandros94',
-    value: 'sandros94',
-    avatar: {
-      src: 'https://github.com/sandros94.png',
-      alt: 'sandros94'
-    }
  }
-] satisfies SelectMenuItem[])
+])
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
@@ -1,29 +1,27 @@
 <script setup lang="ts">
-import type { SelectMenuItem, ChipProps } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
-      color: 'error'
+      color: 'error' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
-      color: 'success'
+      color: 'success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
-      color: 'info'
+      color: 'info' as const
    }
  }
-] satisfies SelectMenuItem[])
+])
 const value = ref(items.value[0])
 </script>

@@ -35,7 +33,7 @@ const value = ref(items.value[0])
        v-bind="modelValue.chip"
        inset
        standalone
-        :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+        :size="ui.itemLeadingChipSize()"
        :class="ui.itemLeadingChip()"
      />
    </template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { SelectMenuItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'Backlog',
@@ -22,7 +20,7 @@ const items = ref([
    value: 'done',
    icon: 'i-lucide-circle-check'
  }
-] satisfies SelectMenuItem[])
+])
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/select/SelectFetchExample.vue
+++ b/docs/app/components/content/examples/select/SelectFetchExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { AvatarProps } from '@nuxt/ui'
-
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
@@ -8,7 +6,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
+    })) || []
  },
  lazy: true
 })
@@ -20,18 +18,17 @@ function getUserAvatar(value: string) {

 <template>
  <USelect
-    :items="users"
+    :items="users || []"
    :loading="status === 'pending'"
    icon="i-lucide-user"
    placeholder="Select user"
    class="w-48"
-    value-key="value"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
-        v-bind="getUserAvatar(modelValue)"
-        :size="(ui.leadingAvatarSize() as AvatarProps['size'])"
+        v-bind="getUserAvatar(modelValue as string)"
+        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
--- a/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { SelectItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'benjamincanac',
@@ -25,21 +23,13 @@ const items = ref([
      src: 'https://github.com/noook.png',
      alt: 'noook'
    }
-  },
-  {
-    label: 'sandros94',
-    value: 'sandros94',
-    avatar: {
-      src: 'https://github.com/sandros94.png',
-      alt: 'sandros94'
-    }
  }
-] satisfies SelectItem[])
+])
 const value = ref(items.value[0]?.value)

 const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
 </script>

 <template>
-  <USelect v-model="value" :items="items" value-key="value" :avatar="avatar" class="w-48" />
+  <USelect v-model="value" :avatar="avatar" :items="items" class="w-48" />
 </template>
--- a/docs/app/components/content/examples/select/SelectItemsChipExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsChipExample.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
-import type { SelectItem, ChipProps } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
-      color: 'error'
+      color: 'error' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
-      color: 'success'
+      color: 'success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
-      color: 'info'
+      color: 'info' as const
    }
  }
-] satisfies SelectItem[])
-
+])
 const value = ref(items.value[0]?.value)

 function getChip(value: string) {
@@ -33,14 +30,14 @@ function getChip(value: string) {
 </script>

 <template>
-  <USelect v-model="value" :items="items" value-key="value" class="w-48">
+  <USelect v-model="value" :items="items" class="w-48">
    <template #leading="{ modelValue, ui }">
      <UChip
        v-if="modelValue"
-        v-bind="getChip(modelValue)"
+        v-bind="getChip(modelValue as string)"
        inset
        standalone
-        :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+        :size="ui.itemLeadingChipSize()"
        :class="ui.itemLeadingChip()"
      />
    </template>
--- a/docs/app/components/content/examples/select/SelectItemsIconExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsIconExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { SelectItem } from '@nuxt/ui'
-
 const items = ref([
  {
    label: 'Backlog',
@@ -22,12 +20,12 @@ const items = ref([
    value: 'done',
    icon: 'i-lucide-circle-check'
  }
-] satisfies SelectItem[])
+])
 const value = ref(items.value[0]?.value)

 const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
 </script>

 <template>
-  <USelect v-model="value" :items="items" value-key="value" :icon="icon" class="w-48" />
+  <USelect v-model="value" :icon="icon" :items="items" class="w-48" />
 </template>
--- a/docs/app/components/content/examples/stepper/StepperContentSlotExample.vue
+++ b/docs/app/components/content/examples/stepper/StepperContentSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { StepperItem } from '@nuxt/ui'
-
-const items: StepperItem[] = [
+const items = [
  {
    title: 'Address',
    description: 'Add your address here',
--- a/docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue
+++ b/docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { StepperItem } from '@nuxt/ui'
-
-const items: StepperItem[] = [
+const items = [
  {
    slot: 'address',
    title: 'Address',
--- a/docs/app/components/content/examples/stepper/StepperModelValueExample.vue
+++ b/docs/app/components/content/examples/stepper/StepperModelValueExample.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { StepperItem } from '@nuxt/ui'
 import { onMounted, ref } from 'vue'

-const items: StepperItem[] = [
+const items = [
  {
    title: 'Address',
    description: 'Add your address here',
--- a/docs/app/components/content/examples/stepper/StepperWithControlsExample.vue
+++ b/docs/app/components/content/examples/stepper/StepperWithControlsExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { StepperItem } from '@nuxt/ui'
-
-const items: StepperItem[] = [
+const items = [
  {
    slot: 'address',
    title: 'Address',
--- a/docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
@@ -97,11 +97,10 @@ function getHeader(column: Column<Payment>, label: string) {
  const isSorted = column.getIsSorted()

  return h(UDropdownMenu, {
-    'content': {
+    content: {
      align: 'start'
    },
-    'aria-label': 'Actions dropdown',
-    'items': [{
+    items: [{
      label: 'Asc',
      type: 'checkbox',
      icon: 'i-lucide-arrow-up-narrow-wide',
@@ -127,12 +126,11 @@ function getHeader(column: Column<Payment>, label: string) {
      }
    }]
  }, () => h(UButton, {
-    'color': 'neutral',
-    'variant': 'ghost',
+    color: 'neutral',
+    variant: 'ghost',
    label,
-    'icon': isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
-    'class': '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)',
-    'aria-label': `Sort by ${isSorted === 'asc' ? 'descending' : 'ascending'}`
+    icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
+    class: '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)'
  }))
 }

--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -145,12 +145,12 @@ const columns: TableColumn<Payment>[] = [{
  header: ({ table }) => h(UCheckbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
+    'ariaLabel': 'Select all'
  }),
  cell: ({ row }) => h(UCheckbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
+    'ariaLabel': 'Select row'
  }),
  enableSorting: false,
  enableHiding: false
@@ -242,17 +242,15 @@ const columns: TableColumn<Payment>[] = [{
    }]

    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
-      'content': {
+      content: {
        align: 'end'
      },
-      items,
-      'aria-label': 'Actions dropdown'
+      items
    }, () => h(UButton, {
-      'icon': 'i-lucide-ellipsis-vertical',
-      'color': 'neutral',
-      'variant': 'ghost',
-      'class': 'ml-auto',
-      'aria-label': 'Actions dropdown'
+      icon: 'i-lucide-ellipsis-vertical',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
    })))
  }
 }]
@@ -296,7 +294,6 @@ function randomize() {
          variant="outline"
          trailing-icon="i-lucide-chevron-down"
          class="ml-auto"
-          aria-label="Columns select dropdown"
        />
      </UDropdownMenu>
    </div>
--- a/docs/app/components/content/examples/table/TableFetchExample.vue
+++ b/docs/app/components/content/examples/table/TableFetchExample.vue
@@ -17,7 +17,7 @@ const { data, status } = await useFetch<User[]>('https://jsonplaceholder.typicod
  transform: (data) => {
    return data?.map(user => ({
      ...user,
-      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, alt: `${user.name} avatar` }
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
--- a/docs/app/components/content/examples/table/TableRowActionsExample.vue
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -97,17 +97,15 @@ const columns: TableColumn<Payment>[] = [{
  id: 'actions',
  cell: ({ row }) => {
    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
-      'content': {
+      content: {
        align: 'end'
      },
-      'items': getRowItems(row),
-      'aria-label': 'Actions dropdown'
+      items: getRowItems(row)
    }, () => h(UButton, {
-      'icon': 'i-lucide-ellipsis-vertical',
-      'color': 'neutral',
-      'variant': 'ghost',
-      'class': 'ml-auto',
-      'aria-label': 'Actions dropdown'
+      icon: 'i-lucide-ellipsis-vertical',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
    })))
  }
 }]
--- a/docs/app/components/content/examples/table/TableRowExpandableExample.vue
+++ b/docs/app/components/content/examples/table/TableRowExpandableExample.vue
@@ -48,15 +48,14 @@ const data = ref<Payment[]>([{
 const columns: TableColumn<Payment>[] = [{
  id: 'expand',
  cell: ({ row }) => h(UButton, {
-    'color': 'neutral',
-    'variant': 'ghost',
-    'icon': 'i-lucide-chevron-down',
-    'square': true,
-    'aria-label': 'Expand',
-    'ui': {
+    color: 'neutral',
+    variant: 'ghost',
+    icon: 'i-lucide-chevron-down',
+    square: true,
+    ui: {
      leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']
    },
-    'onClick': () => row.toggleExpanded()
+    onClick: () => row.toggleExpanded()
  })
 }, {
  accessorKey: 'id',
--- a/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
@@ -50,12 +50,12 @@ const columns: TableColumn<Payment>[] = [{
  header: ({ table }) => h(UCheckbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
+    'ariaLabel': 'Select all'
  }),
  cell: ({ row }) => h(UCheckbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
+    'ariaLabel': 'Select row'
  })
 }, {
  accessorKey: 'date',
--- a/docs/app/components/content/examples/table/TableRowSelectionExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -50,12 +50,12 @@ const columns: TableColumn<Payment>[] = [{
  header: ({ table }) => h(UCheckbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
+    'ariaLabel': 'Select all'
  }),
  cell: ({ row }) => h(UCheckbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
+    'ariaLabel': 'Select row'
  })
 }, {
  accessorKey: 'date',
--- a/docs/app/components/content/examples/table/TableSlotsExample.vue
+++ b/docs/app/components/content/examples/table/TableSlotsExample.vue
@@ -95,7 +95,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
  <UTable :data="data" :columns="columns" class="flex-1">
    <template #name-cell="{ row }">
      <div class="flex items-center gap-3">
-        <UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" :alt="`${row.original.name} avatar`" />
+        <UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" />
        <div>
          <p class="font-medium text-(--ui-text-highlighted)">
            {{ row.original.name }}
@@ -108,7 +108,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
    </template>
    <template #action-cell="{ row }">
      <UDropdownMenu :items="getDropdownActions(row.original)">
-        <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" aria-label="Actions" />
+        <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
      </UDropdownMenu>
    </template>
  </UTable>
--- a/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui'
-
-const items: TabsItem[] = [
+const items = [
  {
    label: 'Account',
    icon: 'i-lucide-user'
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui'
-
 const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: 'i-lucide-user',
-    slot: 'account' as const
+    slot: 'account'
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: 'i-lucide-lock',
-    slot: 'password' as const
+    slot: 'password'
  }
-] satisfies TabsItem[]
+]

 const state = reactive({
  name: 'Benjamin Canac',
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui'
-
-const items: TabsItem[] = [
+const items = [
  {
    label: 'Account'
  },
--- a/docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { TreeItem } from '@nuxt/ui'

-const items = [
+const items: TreeItem[] = [
  {
    label: 'app/',
-    slot: 'app' as const,
+    slot: 'app',
    defaultExpanded: true,
    children: [{
      label: 'composables/',
@@ -24,7 +24,7 @@ const items = [
  },
  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
-] satisfies TreeItem[]
+]
 </script>

 <template>
--- a/docs/app/components/content/examples/tree/TreeModelValueExample.vue
+++ b/docs/app/components/content/examples/tree/TreeModelValueExample.vue
@@ -25,7 +25,7 @@ const items: TreeItem[] = [
  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
 ]

-const value = ref()
+const value = ref(items[items.length - 1])
 </script>

 <template>
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -111,7 +111,7 @@ function setBlackAsPrimary(value: boolean) {
            v-for="color in neutralColors"
            :key="color"
            :label="color"
-            :chip="color === 'neutral' ? 'old-neutral' : color"
+            :chip="color"
            :selected="neutral === color"
            @click="neutral = color"
          />
--- a/docs/app/composables/useLinks.ts
+++ b/docs/app/composables/useLinks.ts
@@ -84,10 +84,10 @@ export function useLinks() {
    label: 'Community',
    icon: 'i-lucide-users',
    children: [{
-      icon: 'i-lucide-presentation',
-      label: 'Showcase',
-      description: 'Check out some amazing projects built with Nuxt UI.',
-      to: '/showcase'
+      label: 'Roadmap',
+      description: 'Track our development progress in real-time.',
+      icon: 'i-lucide-map',
+      to: '/roadmap'
    }, {
      label: 'Devtools Integration',
      description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
@@ -112,5 +112,5 @@ export function useLinks() {
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
-  }])
+  }].filter(Boolean))
 }
--- a/docs/app/composables/useSearchLinks.ts
+++ b/docs/app/composables/useSearchLinks.ts
@@ -1,66 +0,0 @@
-export function useSearchLinks() {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-square-play',
-    to: '/getting-started'
-  }, {
-    label: 'Components',
-    icon: 'i-lucide-square-code',
-    to: '/components'
-  }, {
-    icon: 'i-lucide-sparkles',
-    label: 'Pro > Features',
-    description: 'A collection of premium Vue components.',
-    to: '/pro'
-  }, {
-    icon: 'i-lucide-credit-card',
-    label: 'Pro > Pricing',
-    description: 'Free in development, buy when ready to launch.',
-    to: '/pro/pricing'
-  }, {
-    icon: 'i-lucide-panels-top-left',
-    label: 'Pro > Templates',
-    description: 'Official templates made with Nuxt UI Pro.',
-    to: '/pro/templates'
-  }, {
-    icon: 'i-lucide-circle-check',
-    label: 'Pro > Activate',
-    description: 'Enable Nuxt UI Pro in your production projects.',
-    to: '/pro/activate'
-  }, {
-    label: 'Figma',
-    icon: 'i-simple-icons-figma',
-    to: '/figma'
-  }, {
-    icon: 'i-lucide-presentation',
-    label: 'Community > Showcase',
-    description: 'Check out some of the amazing projects built with Nuxt UI.',
-    to: '/showcase'
-  }, {
-    label: 'Community > Contribution',
-    description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',
-    icon: 'i-lucide-git-pull-request-arrow',
-    to: '/getting-started/contribution'
-  }, {
-    label: 'Community > Roadmap',
-    description: 'Track our development progress in real-time.',
-    icon: 'i-lucide-map',
-    to: '/roadmap'
-  }, {
-    label: 'Community > Devtools',
-    description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
-    icon: 'i-lucide-code',
-    to: 'https://github.com/romhml/compodium',
-    target: '_blank'
-  }, {
-    label: 'Community > Team',
-    description: 'Meet the team behind Nuxt UI.',
-    icon: 'i-lucide-users',
-    to: '/team'
-  }, {
-    label: 'Releases',
-    icon: 'i-lucide-rocket',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
-}
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -15,7 +15,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
-const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -67,7 +66,6 @@ provide('navigation', mappedNavigation)

    <ClientOnly>
      <LazyUContentSearch
-        :links="searchLinks"
        :files="files"
        :groups="[{
          id: 'framework',
--- a/docs/app/pages/.index.yml
+++ b/docs/app/pages/.index.yml
@@ -176,11 +176,7 @@ community:
  links:
    - label: Star on GitHub
      color: neutral
+      variant: outline
      to: https://github.com/nuxt/ui
      target: _blank
      icon: i-lucide-star
-    - label: Meet the team
-      color: neutral
-      variant: outline
-      to: /team
-      trailingIcon: i-lucide-arrow-right
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
-import type { PageLink } from '@nuxt/ui-pro'
-import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'

 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -101,25 +100,15 @@ const communityLinks = computed(() => [{
  label: 'Star on GitHub',
  to: `https://github.com/nuxt/${page.value?.module === 'ui-pro' ? 'ui-pro' : 'ui'}`,
  target: '_blank'
-}, module.value === 'ui-pro' && {
-  icon: 'i-lucide-credit-card',
-  label: 'Purchase a license',
-  to: 'https://nuxt.lemonsqueezy.com/checkout/buy/057dacb2-87ba-4dc1-9256-59ee5b3bd394',
-  target: '_blank'
-}, module.value === 'ui-pro' && {
-  icon: 'i-lucide-ticket-percent',
-  label: 'Become an affiliate',
-  to: 'https://nuxt.lemonsqueezy.com/affiliates',
-  target: '_blank'
 }, {
-  icon: 'i-lucide-git-pull-request-arrow',
+  icon: 'i-lucide-life-buoy',
  label: 'Contribution',
  to: '/getting-started/contribution'
 }, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
-}].filter(Boolean) as PageLink[])
+}])
 </script>

 <template>
@@ -147,7 +136,7 @@ const communityLinks = computed(() => [{
          v-bind="link"
        >
          <template v-if="link.avatar" #leading>
-            <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
+            <UAvatar v-bind="link.avatar" size="2xs" />
          </template>
        </UButton>
      </template>
--- a/docs/app/pages/components.vue
+++ b/docs/app/pages/components.vue
@@ -169,7 +169,6 @@ onMounted(() => {
                :loading="index >= 4 ? 'lazy' : 'eager'"
                width="640"
                height="360"
-                :alt="`${component.name} preview`"
              />
            </div>
          </UPageCard>
--- a/docs/app/pages/figma/index.vue
+++ b/docs/app/pages/figma/index.vue
@@ -155,7 +155,7 @@ onMounted(async () => {
            :src="item.src"
            :alt="item.alt"
            class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-            loading="lazy"
+            lazy
          />
        </template>
      </UTabs>
@@ -165,7 +165,7 @@ onMounted(async () => {
        v-if="page.section2.image"
        v-bind="page.section2.image"
        class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-        loading="lazy"
+        lazy
      />
    </UPageSection>
    <UPageSection v-bind="page.section3" orientation="horizontal" :ui="{ container: 'py-16 sm:pt-16 lg:pt-16' }">
@@ -173,7 +173,7 @@ onMounted(async () => {
        v-if="page.section3.image"
        v-bind="page.section3.image"
        class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-        loading="lazy"
+        lazy
      />
    </UPageSection>
    <USeparator />
@@ -198,7 +198,7 @@ onMounted(async () => {
            v-if="step.image"
            v-bind="step.image"
            class="rounded-(--ui-radius)"
-            loading="lazy"
+            lazy
          />
          <div>
            <h2 class="font-semibold inline-flex items-center gap-x-1">
@@ -272,7 +272,6 @@ onMounted(async () => {
          :key="index"
          v-bind="logo"
          class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
-          loading="lazy"
        >
      </UPageMarquee>
    </UPageCTA>
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -23,7 +23,18 @@ const { data: components } = await useAsyncData('ui-components', () => {
    .all()
 })

-const { data: module } = await useFetch('/api/module.json')
+const { data: module } = await useFetch<{
+  stats: {
+    downloads: number
+    stars: number
+  }
+  contributors: {
+    username: string
+  }[]
+}>('https://api.nuxt.com/modules/ui', {
+  key: 'stats',
+  transform: ({ stats, contributors }) => ({ stats, contributors })
+})

 const { format } = Intl.NumberFormat('en', { notation: 'compact' })

@@ -74,7 +85,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
        </div>
      </template>

-      <LazySkyBg is-index />
+      <LazySkyBg />

      <div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
        <UPageMarquee
@@ -92,14 +103,10 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
            :to="component.path"
          >
            <UColorModeImage
+
              :light="`${component.path.replace('/components/', '/components/light/')}.png`"
              :dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
-              :alt="`${component.title} preview`"
-              width="290"
-              height="163"
-              format="webp"
              class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
-              loading="lazy"
            />
            <UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
          </ULink>
@@ -123,12 +130,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
            <UColorModeImage
              :light="`${component.path.replace('/components/', '/components/light/')}.png`"
              :dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
-              :alt="`${component.title} preview`"
-              width="290"
-              height="163"
-              format="webp"
              class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
-              loading="lazy"
            />
            <UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
          </ULink>
@@ -150,9 +152,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
          :in-view-options="{ once: true }"
          class="flex items-start gap-x-3 relative group"
        >
-          <NuxtLink v-if="feature.to" :to="feature.to" class="absolute inset-0 z-10">
-            <span class="sr-only">Go to {{ feature.title }}</span>
-          </NuxtLink>
+          <NuxtLink v-if="feature.to" :to="feature.to" class="absolute inset-0 z-10" />

          <div class="relative p-3">
            <svg class="absolute inset-0" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -165,12 +165,12 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
              <circle cx="6.53711" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
              <circle cx="38.5957" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
            </svg>
-            <UIcon :name="feature.icon" class="size-5 shrink-0" />
+            <UIcon :name="feature.icon" class="size-5 flex-shrink-0" />
          </div>
          <div class="flex flex-col">
            <h2 class="font-medium text-(--ui-text-highlighted) inline-flex items-center gap-x-1">
              {{ feature.title }}
-              <UIcon v-if="feature.to" name="i-lucide-arrow-right" class="size-4 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0" />
+              <UIcon v-if="feature.to" name="i-lucide-arrow-right" class="size-4 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0" />
            </h2>
            <p class="text-sm text-(--ui-text-muted)">
              {{ feature.description }}
@@ -218,32 +218,26 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
      class="border-b border-(--ui-border)"
    >
      <template #features>
-        <li>
-          <NuxtLink to="https://npm.chart.dev/@nuxt/ui" target="_blank" class="min-w-0">
-            <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
-              {{ format(module?.stats?.downloads ?? 0) }}+
-            </p>
-            <p class="text-(--ui-text-muted) text-sm truncate">monthly downloads</p>
-          </NuxtLink>
-        </li>
+        <NuxtLink to="https://npm.chart.dev/@nuxt/ui" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            {{ format(module?.stats?.downloads ?? 0) }}+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">monthly downloads</p>
+        </NuxtLink>

-        <li>
-          <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="min-w-0">
-            <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
-              {{ format(module?.stats?.stars ?? 0) }}+
-            </p>
-            <p class="text-(--ui-text-muted) text-sm truncate">GitHub stars</p>
-          </NuxtLink>
-        </li>
+        <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            {{ format(module?.stats?.stars ?? 0) }}+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">GitHub stars</p>
+        </NuxtLink>

-        <li>
-          <NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0">
-            <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
-              175+
-            </p>
-            <p class="text-(--ui-text-muted) text-sm truncate">Contributors</p>
-          </NuxtLink>
-        </li>
+        <NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            175+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">Contributors</p>
+        </NuxtLink>
      </template>

      <div ref="contributorsRef" class="p-4 sm:px-6 md:px-8 lg:px-12 xl:px-14 overflow-hidden flex relative">
@@ -302,8 +296,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
            :src="`/pro/blocks/image${i}.png`"
            width="460"
            height="258"
-            loading="lazy"
            :alt="`Nuxt UI Pro Screenshot ${i}`"
+            loading="lazy"
            class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
          >
        </UPageMarquee>
--- a/docs/app/pages/pro/pricing.vue
+++ b/docs/app/pages/pro/pricing.vue
@@ -81,7 +81,6 @@ useSeoMeta({
          :key="index"
          v-bind="logo"
          class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
-          loading="lazy"
        >
      </UPageMarquee>
      <UContainer>
--- a/docs/app/pages/pro/templates.vue
+++ b/docs/app/pages/pro/templates.vue
@@ -56,7 +56,6 @@ useSeoMeta({
            v-if="template.thumbnail"
            v-bind="template.thumbnail"
            class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
-            :alt="`Template ${index} thumbnail`"
            width="656"
            height="369"
            loading="lazy"
@@ -67,7 +66,7 @@ useSeoMeta({
            :items="(template.images as any[])"
            dots
          >
-            <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" loading="lazy" />
+            <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
          </UCarousel>
          <Placeholder v-else class="w-full h-full aspect-video" />
        </Motion>
--- a/docs/app/pages/showcase.vue
+++ b/docs/app/pages/showcase.vue
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { joinURL } from 'ufo'
-
-const { data: page } = await useAsyncData('showcase', () => queryCollection('showcase').first())
-if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-}
-
-const { url } = useSiteConfig()
-
-useSeoMeta({
-  titleTemplate: `%s - Nuxt UI`,
-  title: page.value.title,
-  description: page.value.description,
-  ogTitle: `${page.value.title} - Nuxt UI`,
-  ogDescription: page.value.description,
-  ogImage: joinURL(url, '/og-image.png')
-})
-</script>
-
-<template>
-  <UMain v-if="page">
-    <UPageHero
-      :title="page.hero.title"
-      :description="page.hero.description"
-      :links="page.hero.links"
-      :ui="{
-        wrapper: 'lg:px-12',
-        container: 'relative'
-      }"
-    >
-      <template #top>
-        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
-      </template>
-
-      <LazyStarsBg />
-
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
-
-      <div class="border-l border-t border-(--ui-border)">
-        <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center divide-y divide-x divide-(--ui-border)">
-          <li
-            v-for="item in page.items"
-            :key="item.name"
-            class="group relative flex items-center justify-center flex-1 size-full p-2 last:border-r last:border-b border-(--ui-border) overflow-hidden"
-          >
-            <NuxtLink class="inset-0 absolute" :to="item.url" target="_blank">
-              <span class="sr-only">Go to {{ item.name }}</span>
-            </NuxtLink>
-
-            <NuxtImg
-              :src="`/assets/showcase/${item.name.toLowerCase().replace(/\s/g, '-')}.png`"
-              :alt="`Screenshot of ${item.name}`"
-              width="327"
-              height="184"
-              :modifiers="{
-                position: 'top'
-              }"
-              class="aspect-[16/9] size-full opacity-100 group-hover:opacity-70 group-hover:scale-110 duration-200 transition-[scale,opacity] pointer-events-none"
-            />
-
-            <div class="absolute flex items-center px-2.5 py-0.75 gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none bg-white rounded-full">
-              <span class="text-sm font-medium text-black">
-                {{ item.name }}
-              </span>
-              <UIcon name="i-lucide-arrow-up-right" class="size-4 shrink-0 text-black" />
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <div class="flex justify-center -mb-[36px]">
-        <UButton
-          label="Submit your project"
-          trailing-icon="i-lucide-plus"
-          color="neutral"
-          size="lg"
-          to="https://github.com/nuxt/ui/edit/v3/docs/content/showcase.yml"
-          target="_blank"
-        />
-      </div>
-    </UPageHero>
-  </UMain>
-</template>
--- a/docs/app/pages/team.vue
+++ b/docs/app/pages/team.vue
@@ -1,155 +0,0 @@
-<script setup lang="ts">
-const title = 'Meet the Team'
-const description = 'The development of Nuxt UI is led by a community of developers from all over the world.'
-
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  ogTitle: 'Nuxt UI Team',
-  description
-})
-
-defineOgImageComponent('Docs', {
-  headline: 'Community'
-})
-
-const { data: module } = await useFetch('/api/module.json')
-
-const contributors = computed(() => module.value?.contributors?.filter(contributor => !module.value?.team?.find(user => user.login === contributor.username)))
-
-const icons = {
-  website: 'i-lucide-link',
-  twitter: 'i-simple-icons-x',
-  twitch: 'i-simple-icons-twitch',
-  youtube: 'i-simple-icons-youtube',
-  instagram: 'i-simple-icons-instagram',
-  linkedin: 'i-simple-icons-linkedin',
-  mastodon: 'i-simple-icons-mastodon',
-  bluesky: 'i-simple-icons-bluesky',
-  github: 'i-simple-icons-github'
-}
-</script>
-
-<template>
-  <UMain>
-    <UPageHero
-      :title="title"
-      :description="description"
-      class="relative"
-      orientation="vertical"
-      :ui="{ title: 'text-balance', container: 'relative' }"
-    >
-      <template #top>
-        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
-      </template>
-
-      <LazyStarsBg />
-    </UPageHero>
-
-    <UPageSection :ui="{ container: '!pt-0' }">
-      <UPageGrid class="xl:grid-cols-4">
-        <UPageCard
-          v-for="(user, index) in module?.team"
-          :key="index"
-          :title="user.name"
-          :description="[user.pronouns, user.location].filter(Boolean).join(' ・ ')"
-          :ui="{
-            container: 'gap-y-4 lg:p-8',
-            leading: 'flex justify-center',
-            title: 'text-center',
-            description: 'text-center text-(--ui-text-muted)'
-          }"
-          variant="subtle"
-        >
-          <template #leading>
-            <UAvatar
-              :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`"
-              :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`"
-              size="3xl"
-              class="mx-auto"
-            />
-          </template>
-
-          <div class="flex items-center justify-center gap-1">
-            <UButton
-              v-for="(link, key) in user.socialAccounts"
-              :key="key"
-              color="neutral"
-              variant="link"
-              :to="link.url"
-              :icon="icons[key as keyof typeof icons] || icons.website"
-              :alt="`Link to ${user.name}'s ${key} profile`"
-              target="_blank"
-              size="sm"
-            />
-            <UButton
-              :to="`https://github.com/${user.login}`"
-              color="neutral"
-              variant="link"
-              :alt="`Link to ${user.name}'s GitHub profile`"
-              :icon="icons.github"
-              target="_blank"
-            />
-            <UButton
-              v-if="user.websiteUrl"
-              :to="user.websiteUrl"
-              color="neutral"
-              variant="link"
-              :alt="`Link to ${user.name}'s personal website`"
-              :icon="icons.website"
-              target="_blank"
-            />
-          </div>
-          <div v-if="user.sponsorsListing" class="flex items-center justify-center">
-            <UButton
-              :to="user.sponsorsListing"
-              target="_blank"
-              color="neutral"
-              variant="subtle"
-              icon="i-lucide-heart"
-              label="Sponsor"
-              :ui="{ leadingIcon: 'text-pink-500 dark:text-pink-400' }"
-            />
-          </div>
-        </UPageCard>
-      </UPageGrid>
-
-      <ProseHr />
-
-      <UPageGrid class="xl:grid-cols-6">
-        <UPageCard
-          v-for="contributor in contributors"
-          :key="contributor.username"
-          :title="contributor.username"
-          :ui="{
-            container: 'gap-y-2',
-            leading: 'flex justify-center',
-            title: 'text-center',
-            description: 'text-center text-(--ui-text-muted)'
-          }"
-        >
-          <template #leading>
-            <UAvatar
-              :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${contributor.username}`"
-              :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${contributor.username} 2x`"
-              size="3xl"
-              class="mx-auto"
-              loading="lazy"
-            />
-          </template>
-
-          <div class="flex items-center justify-center gap-1">
-            <UButton
-              :to="`https://github.com/${contributor.username}`"
-              color="neutral"
-              variant="link"
-              :alt="`Link to ${contributor.username}'s GitHub profile`"
-              :icon="icons.github"
-              target="_blank"
-            />
-          </div>
-        </UPageCard>
-      </UPageGrid>
-    </UPageSection>
-  </UMain>
-</template>
--- a/docs/content.config.ts
+++ b/docs/content.config.ts
@@ -1,18 +1,6 @@
 import { defineCollection, z } from '@nuxt/content'
 import { resolve } from 'node:path'

-const Button = z.object({
-  label: z.string(),
-  icon: z.string().optional(),
-  trailingIcon: z.string().optional(),
-  to: z.string().optional(),
-  color: z.enum(['primary', 'neutral', 'success', 'warning', 'error', 'info']).optional(),
-  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl']).optional(),
-  variant: z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']).optional(),
-  id: z.string().optional(),
-  target: z.enum(['_blank', '_self']).optional()
-})
-
 const schema = z.object({
  category: z.enum(['layout', 'form', 'element', 'navigation', 'data', 'overlay']).optional(),
  framework: z.string().optional(),
@@ -54,27 +42,5 @@ export const collections = {
      include: '**/*'
    }, pro!].filter(Boolean),
    schema
-  }),
-  showcase: defineCollection({
-    type: 'page',
-    source: 'showcase.yml',
-    schema: z.object({
-      title: z.string(),
-      description: z.string(),
-      hero: z.object({
-        title: z.string(),
-        description: z.string(),
-        links: z.array(Button)
-      }),
-      items: z.array(z.object({
-        name: z.string(),
-        url: z.string(),
-        github: z.string().optional(),
-        screenshotUrl: z.string().optional(),
-        screenshotOptions: z.object({
-          delay: z.number()
-        })
-      }))
-    })
  })
 }
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -6,7 +6,7 @@ navigation.icon: i-lucide-house

 <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>

-## Reka UI
+### Reka UI

 We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](https://reka-ui.com/) as our core component foundation. This shift brings several key advantages:

@@ -17,7 +17,7 @@ We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](http

 This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options.

-## Tailwind CSS v4
+### Tailwind CSS v4

 Nuxt UI integrates the latest Tailwind CSS v4, bringing significant improvements:

@@ -30,7 +30,7 @@ Nuxt UI integrates the latest Tailwind CSS v4, bringing significant improvements
 Learn about all the breaking changes in Tailwind CSS v4.
 ::

-## Tailwind Variants
+### Tailwind Variants

 We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to manage our design system, offering:

@@ -40,7 +40,7 @@ We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to manage

 This integration unifies the styling of components, ensuring consistency and code maintainability.

-## TypeScript Integration
+### TypeScript Integration

 Nuxt UI offers significantly improved TypeScript integration, providing a superior developer experience:

@@ -60,7 +60,7 @@ Nuxt UI offers significantly improved TypeScript integration, providing a superi
 Check out an example of the Accordion component with auto-completion for props and slots.
 ::

-## Vue compatibility
+### Vue compatibility

 You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration. This provides:

@@ -72,7 +72,7 @@ You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and V
 Learn how to install and configure Nuxt UI in a Vue project in the **Vue installation guide**.
 ::

-## Nuxt DevTools Integration
+### Nuxt DevTools Integration

 You can play with Nuxt UI components as well as your app components directly from Nuxt Devtools with the [compodium](https://github.com/romhml/compodium) module, providing a powerful development experience:

--- a/docs/content/1.getting-started/7.i18n/1.nuxt.md
+++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md
@@ -136,19 +136,19 @@ To dynamically switch between languages, you can use the [Nuxt I18n](https://i18
 ::code-group{sync="pm"}

 ```bash [pnpm]
-pnpm add @nuxtjs/i18n
+pnpm add @nuxtjs/i18n@next
 ```

 ```bash [yarn]
-yarn add @nuxtjs/i18n
+yarn add @nuxtjs/i18n@next
 ```

 ```bash [npm]
-npm install @nuxtjs/i18n
+npm install @nuxtjs/i18n@next
 ```

 ```bash [bun]
-bun add @nuxtjs/i18n
+bun add @nuxtjs/i18n@next
 ```

 ::
--- a/docs/content/3.components/accordion.md
+++ b/docs/content/3.components/accordion.md
@@ -30,8 +30,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -60,8 +58,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -91,8 +87,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -121,8 +115,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -157,8 +149,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -192,8 +182,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - AccordionItem[]
 hide:
  - class
 props:
@@ -292,18 +280,6 @@ props:
 ---
 ::

-### With drag and drop
-
-Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
-
-The `useSortable` composable accepts various options, see the [Usage](https://vueuse.org/integrations/useSortable/#usage) for more examples.
-
-::component-example
---
-name: 'accordion-drag-and-drop-example'
---
-::
-
 ## API

 ### Props
--- a/docs/content/3.components/breadcrumb.md
+++ b/docs/content/3.components/breadcrumb.md
@@ -27,8 +27,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - BreadcrumbItem[]
 props:
  items:
    - label: 'Home'
@@ -56,8 +54,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - BreadcrumbItem[]
 props:
  separatorIcon: 'i-lucide-arrow-right'
  items:
--- a/docs/content/3.components/context-menu.md
+++ b/docs/content/3.components/context-menu.md
@@ -44,8 +44,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - ContextMenuItem[][]
 props:
  items:
    - - label: Appearance
@@ -126,8 +124,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - ContextMenuItem[]
 props:
  size: xl
  items:
@@ -162,8 +158,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - ContextMenuItem[]
 props:
  disabled: true
  items:
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -306,17 +306,6 @@ name: 'drawer-dismissible-example'
 In this example, the `header` slot is used to add a close button which is not done by default.
 ::

-### Responsive drawer
-
-You can render a [Modal](/components/modal) component on desktop and a Drawer on mobile for example.
-
-::component-example
---
-prettier: true
-name: 'drawer-responsive-example'
---
-::
-
 ### With footer slot

 Use the `#footer` slot to add content after the Drawer's body.
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -44,8 +44,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - DropdownMenuItem[][]
 props:
  items:
    - - label: Benjamin
@@ -125,8 +123,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - DropdownMenuItem[]
 items:
  content.align:
    - start
@@ -173,8 +169,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - DropdownMenuItem[]
 props:
  arrow: true
  items:
@@ -208,8 +202,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - DropdownMenuItem[]
 props:
  size: xl
  items:
@@ -252,8 +244,6 @@ ignore:
  - ui.content
 external:
  - items
-externalTypes:
-  - DropdownMenuItem[]
 props:
  disabled: true
  items:
@@ -344,9 +334,7 @@ Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility

 ```vue
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-
-const items: DropdownMenuItem[] = [{
+const items = [{
  label: 'Invite users',
  icon: 'i-lucide-user-plus',
  children: [{
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -39,8 +39,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[]
 props:
  items:
    - label: Guide
@@ -150,8 +148,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[][]
 props:
  orientation: 'vertical'
  items:
@@ -251,8 +247,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[][]
 props:
  highlight: true
  highlightColor: 'primary'
@@ -352,8 +346,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[][]
 props:
  color: neutral
  items:
@@ -387,8 +379,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[][]
 props:
  color: neutral
  variant: link
@@ -433,8 +423,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[]
 props:
  trailingIcon: 'i-lucide-arrow-down'
  items:
@@ -531,8 +519,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[]
 props:
  arrow: true
  items:
@@ -625,8 +611,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[]
 props:
  arrow: true
  contentOrientation: 'vertical'
@@ -698,8 +682,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - NavigationMenuItem[]
 props:
  unmountOnHide: false
  items:
--- a/docs/content/3.components/pin-input.md
+++ b/docs/content/3.components/pin-input.md
@@ -177,12 +177,6 @@ props:

 :component-emits

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

 :component-theme
--- a/docs/content/3.components/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -17,7 +17,7 @@ Use the `v-model` directive to control the value of the RadioGroup or the `defau

 ### Items

-Use the `items` prop as an array of strings or numbers:
+Use the `items` prop as an array of strings, numbers or booleans:

 ::component-code
 ---
@@ -28,9 +28,6 @@ ignore:
 external:
  - items
  - modelValue
-externalTypes:
-  - RadioGroupItem[]
-  - RadioGroupValue
 props:
  modelValue: 'System'
  items:
@@ -55,9 +52,6 @@ ignore:
 external:
  - items
  - modelValue
-externalTypes:
-  - RadioGroupItem[]
-  - RadioGroupValue
 props:
  modelValue: 'system'
  items:
@@ -90,9 +84,6 @@ ignore:
 external:
  - items
  - modelValue
-externalTypes:
-  - RadioGroupItem[]
-  - RadioGroupValue
 props:
  modelValue: 'light'
  valueKey: 'id'
@@ -121,8 +112,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  legend: 'Theme'
  defaultValue: 'System'
@@ -133,84 +122,6 @@ props:
 ---
 ::

-### Color
-
-Use the `color` prop to change the color of the RadioGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - RadioGroupItem[]
-props:
-  color: neutral
-  defaultValue: 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Variant :badge{label="Not released" class="align-text-top"}
-
-Use the `variant` prop to change the variant of the RadioGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-props:
-  color: 'primary'
-  variant: 'table'
-  defaultValue: 'pro'
-  items:
-    - label: 'Pro'
-      value: 'pro'
-      description: 'Tailored for indie hackers, freelancers and solo founders.'
-    - label: 'Startup'
-      value: 'startup'
-      description: 'Best suited for small teams, startups and agencies.'
-    - label: 'Enterprise'
-      value: 'enterprise'
-      description: 'Ideal for larger teams and organizations.'
---
-::
-
-### Size
-
-Use the `size` prop to change the size of the RadioGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - RadioGroupItem[]
-props:
-  size: 'xl'
-  variant: 'list'
-  defaultValue: 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
 ### Orientation

 Use the `orientation` prop to change the orientation of the RadioGroup. Defaults to `vertical`.
@@ -223,11 +134,8 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  orientation: 'horizontal'
-  variant: 'list'
  defaultValue: 'System'
  items:
    - 'System'
@@ -236,9 +144,9 @@ props:
 ---
 ::

-### Indicator :badge{label="Not released" class="align-text-top"}
+### Color

-Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
+Use the `color` prop to change the color of the RadioGroup.

 ::component-code
 ---
@@ -248,11 +156,30 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
-  indicator: 'end'
-  variant: 'card'
+  color: neutral
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the RadioGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+props:
+  size: 'xl'
  defaultValue: 'System'
  items:
    - 'System'
@@ -273,8 +200,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  disabled: true
  defaultValue: 'System'
--- a/docs/content/3.components/stepper.md
+++ b/docs/content/3.components/stepper.md
@@ -31,8 +31,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - StepperItem[]
 props:
  items:
    - title: 'Address'
@@ -63,8 +61,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - StepperItem[]
 props:
  color: neutral
  items:
@@ -92,8 +88,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - StepperItem[]
 props:
  size: xl
  items:
@@ -121,8 +115,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - StepperItem[]
 props:
  orientation: vertical
  items:
@@ -150,8 +142,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - StepperItem[]
 props:
  disabled: true
  items:
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -23,7 +23,7 @@ class: '!p-0'
 ---
 ::

-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/tree/v3/docs/app/components/content/examples/table/TableExample.vue" aria-label="View source code"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/tree/v3/docs/app/components/content/examples/table/TableExample.vue"}
 This example demonstrates the most common use case of the `Table` component. Check out the source code on GitHub.
 ::

@@ -85,7 +85,7 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat

 In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.

-::tip{to="#with-slots" aria-label="Table columns with slots"}
+::tip{to="#with-slots"}
 You can also use slots to customize the header and data cells of the table.
 ::

--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -31,8 +31,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  items:
    - label: Account
@@ -57,8 +55,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  content: false
  items:
@@ -84,8 +80,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  unmountOnHide: false
  items:
@@ -115,8 +109,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  color: neutral
  content: false
@@ -139,8 +131,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  color: neutral
  variant: link
@@ -164,8 +154,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  size: md
  variant: pill
@@ -189,8 +177,6 @@ ignore:
  - class
 external:
  - items
-externalTypes:
-  - TabsItem[]
 props:
  orientation: vertical
  variant: pill
--- a/docs/content/3.components/textarea.md
+++ b/docs/content/3.components/textarea.md
@@ -22,17 +22,6 @@ props:
 ---
 ::

-### Rows
-
-Use the `rows` prop to set the number of rows. Defaults to `3`.
-
-::component-code
---
-props:
-  rows: 12
---
-::
-
 ### Placeholder

 Use the `placeholder` prop to set a placeholder text.
@@ -44,37 +33,6 @@ props:
 ---
 ::

-### Autoresize
-
-Use the `autoresize` prop to enable autoresizing the height of the Textarea.
-
-::component-code
---
-ignore:
-  - modelValue
-external:
-  - modelValue
-props:
-  modelValue: 'This is a long text that will autoresize the height of the Textarea.'
-  autoresize: true
---
-::
-
-Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.
-
-::component-code
---
-ignore:
-  - modelValue
-external:
-  - modelValue
-props:
-  modelValue: 'This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.'
-  maxrows: 4
-  autoresize: true
---
-::
-
 ### Color

 Use the `color` prop to change the ring color when the Textarea is focused.
@@ -124,102 +82,6 @@ props:
 ---
 ::

-### Icon :badge{label="Not released" class="align-text-top"}
-
-Use the `icon` prop to show an [Icon](/components/icon) inside the Textarea.
-
-::component-code
---
-prettier: true
-ignore:
-  - placeholder
-props:
-  icon: 'i-lucide-search'
-  size: md
-  variant: outline
-  placeholder: 'Search...'
-  rows: 1
---
-::
-
-Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
-
-::component-code
---
-prettier: true
-ignore:
-  - placeholder
-props:
-  trailingIcon: i-lucide-at-sign
-  placeholder: 'Enter your email'
-  size: md
-  rows: 1
---
-::
-
-### Avatar :badge{label="Not released" class="align-text-top"}
-
-Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Textarea.
-
-::component-code
---
-prettier: true
-ignore:
-  - placeholder
-props:
-  avatar:
-    src: 'https://github.com/nuxt.png'
-  size: md
-  variant: outline
-  placeholder: 'Search...'
-  rows: 1
---
-::
-
-### Loading :badge{label="Not released" class="align-text-top"}
-
-Use the `loading` prop to show a loading icon on the Textarea.
-
-::component-code
---
-ignore:
-  - placeholder
-props:
-  loading: true
-  trailing: false
-  placeholder: 'Search...'
-  rows: 1
---
-::
-
-### Loading Icon :badge{label="Not released" class="align-text-top"}
-
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.
-
-::component-code
---
-ignore:
-  - placeholder
-props:
-  loading: true
-  loadingIcon: 'i-lucide-repeat-2'
-  placeholder: 'Search...'
-  rows: 1
---
-::
-
-::framework-only
-#nuxt
-:::tip{to="/getting-started/icons/nuxt#theme"}
-You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
-:::
-
-#vue
-:::tip{to="/getting-started/icons/vue#theme"}
-You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
-:::
-::
-
 ### Disabled

 Use the `disabled` prop to disable the Textarea.
@@ -234,6 +96,48 @@ props:
 ---
 ::

+### Rows
+
+Use the `rows` prop to set the number of rows. Defaults to `3`.
+
+::component-code
+---
+props:
+  rows: 12
+---
+::
+
+### Autoresize
+
+Use the `autoresize` prop to enable autoresizing the height of the Textarea.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 'This is a long text that will autoresize the height of the Textarea.'
+  autoresize: true
+---
+::
+
+Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 'This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.'
+  maxrows: 4
+  autoresize: true
+---
+::
+
 ## API

 ### Props
--- a/docs/content/showcase.yml
+++ b/docs/content/showcase.yml
@@ -1,36 +0,0 @@
-title: Showcase
-description: Check out some of the amazing projects built with Nuxt UI.
-navigation: false
-hero:
-  title: Showcase
-  description: Discover our selection of projects built with Nuxt UI.
-items:
-  - name: Ovatu
-    url: https://ovatu.com/
-  - name: Shelve
-    url: https://shelve.cloud
-    github: https://github.com/hugorcd/shelve
-  - name: Uneed
-    url: https://uneed.best/
-  - name: Details
-    url: https://details.team/
-  - name: Espace Asso by Benevolt
-    url: https://asso.benevolt.fr/
-  - name: Directus Docs
-    url: https://docs.directus.io/
-  - name: Super SaaS
-    url: https://supersaas.dev/
-  - name: Passionate People
-    url: https://passionatepeople.io/
-  - name: The Companies API
-    url: https://www.thecompaniesapi.com/
-  - name: Thuprai
-    url: https://thuprai.com/
-  - name: Juno.one
-    url: https://www.juno.one/
-  - name: Pallyy
-    url: https://pallyy.com/
-  - name: Readyy
-    url: https://readyy.app/
-  - name: CareerDeck
-    url: https://careerdeck.ai
--- a/docs/modules/showcase.ts
+++ b/docs/modules/showcase.ts
@@ -1,56 +0,0 @@
-import { defineNuxtModule } from '@nuxt/kit'
-import { existsSync } from 'node:fs'
-import { join } from 'pathe'
-import captureWebsite from 'capture-website'
-
-interface ContentFile {
-  id?: string
-  body?: {
-    items: TemplateItem[]
-  }
-}
-
-interface TemplateItem {
-  name: string
-  url?: string
-  screenshotUrl?: string
-  screenshotOptions?: Record<string, any>
-}
-
-export default defineNuxtModule((_, nuxt) => {
-  nuxt.hook('content:file:afterParse', async ({ content: file }: { content: ContentFile }) => {
-    if (!file.id?.includes('showcase')) {
-      return
-    }
-    if (!file.body?.items?.length) {
-      return
-    }
-    for (const template of file.body.items) {
-      const url = template.screenshotUrl || template.url
-      if (!url) {
-        console.error(`Template ${template.name} has no "url" or "screenshotUrl" to take a screenshot from`)
-        continue
-      }
-
-      const name = template.name.toLowerCase().replace(/\s/g, '-')
-      const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
-
-      if (existsSync(filename)) {
-        continue
-      }
-
-      console.log(`Generating screenshot for Template ${template.name} hitting ${url}...`)
-
-      try {
-        await captureWebsite.file(url, filename, {
-          ...(template.screenshotOptions || {}),
-          launchOptions: { headless: true }
-        })
-
-        console.log(`Screenshot for ${template.name} generated successfully`)
-      } catch (error) {
-        console.error(`Error generating screenshot for ${template.name}:`, error)
-      }
-    }
-  })
-})
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -139,7 +139,6 @@ export default defineNuxtConfig({
    '/pro/components/pricing-grid': { redirect: { to: '/components/pricing-plans', statusCode: 301 }, prerender: false },
    '/pro/components/pricing-switch': { redirect: { to: '/components/switch', statusCode: 301 }, prerender: false },
    '/pro/components/**': { redirect: { to: '/components/**', statusCode: 301 }, prerender: false },
-    '/getting-started/shortcuts': { redirect: { to: '/composables/define-shortcuts', statusCode: 301 }, prerender: false },
    '/releases': { redirect: 'https://github.com/nuxt/ui/releases', prerender: false }
  },

@@ -186,7 +185,7 @@ export default defineNuxtConfig({
    },
    optimizeDeps: {
      // prevents reloading page when navigating between components
-      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue', 'scule', 'motion-v', 'json5', 'ohash', 'shiki-transformer-color-highlight']
+      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue', 'scule', 'motion-v', 'json5', 'ohash']
    }
  },

@@ -225,7 +224,6 @@ export default defineNuxtConfig({
  },

  image: {
-    format: ['webp', 'jpeg', 'jpg', 'png', 'svg'],
    provider: 'ipx'
  },

--- a/docs/package.json
+++ b/docs/package.json
@@ -4,27 +4,24 @@
  "type": "module",
  "dependencies": {
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.34",
-    "@iconify-json/simple-icons": "^1.2.30",
-    "@iconify-json/vscode-icons": "^1.2.18",
+    "@iconify-json/lucide": "^1.2.32",
+    "@iconify-json/simple-icons": "^1.2.29",
+    "@iconify-json/vscode-icons": "^1.2.17",
    "@nuxt/content": "^3.4.0",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@63da8be",
-    "@nuxthub/core": "^0.8.23",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@d96a086",
+    "@nuxthub/core": "^0.8.18",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
    "@vueuse/nuxt": "^13.0.0",
-    "capture-website": "^4.2.0",
-    "@vueuse/integrations": "^13.0.0",
-    "sortablejs": "^1.15.6",
    "joi": "^17.13.3",
    "motion-v": "0.13.1",
-    "nuxt": "^3.16.2",
-    "nuxt-component-meta": "^0.10.1",
-    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.1",
+    "nuxt": "^3.16.1",
+    "nuxt-component-meta": "^0.10.0",
+    "nuxt-llms": "^0.1.1",
+    "nuxt-og-image": "^5.0.5",
    "prettier": "^3.5.3",
    "shiki-transformer-color-highlight": "^1.0.0",
    "superstruct": "^2.0.2",
@@ -34,6 +31,6 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "wrangler": "^4.7.1"
+    "wrangler": "^3.114.2"
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Romain Hamel	3d62371af0	chore: up	2025-03-28 16:22:31 +01:00
Romain Hamel	f941df1541	chore: up	2025-03-28 08:58:21 +01:00
Romain Hamel	664e940098	chore: up	2025-03-26 13:45:17 +01:00
Romain Hamel	15fe0039f0	chore(playground): compodium setup	2025-03-26 11:40:23 +01:00
Romain Hamel	f68061975c	chore: setup compodium in playground	2025-03-24 15:08:07 +01:00