chore: up

2026-01-16 13:08:06 +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
233 changed files with 3281 additions and 3655 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/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/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/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/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,16 +100,6 @@ 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-life-buoy',
  label: 'Contribution',
@@ -119,7 +108,7 @@ const communityLinks = computed(() => [{
  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/index.vue
+++ b/docs/app/pages/index.vue
@@ -103,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>
@@ -134,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>
@@ -161,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">
@@ -229,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">
--- 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"
--- 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/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/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -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'
@@ -145,8 +134,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  orientation: 'horizontal'
  defaultValue: 'System'
@@ -169,8 +156,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  color: neutral
  defaultValue: 'System'
@@ -193,8 +178,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  size: 'xl'
  defaultValue: 'System'
@@ -217,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/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,26 +4,24 @@
  "type": "module",
  "dependencies": {
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.33",
+    "@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.21",
+    "@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",
-    "@vueuse/integrations": "^13.0.0",
-    "sortablejs": "^1.15.6",
    "joi": "^17.13.3",
    "motion-v": "0.13.1",
    "nuxt": "^3.16.1",
-    "nuxt-component-meta": "^0.10.1",
-    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.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",
@@ -33,6 +31,6 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "wrangler": "^4.6.0"
+    "wrangler": "^3.114.2"
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.2",
-  "packageManager": "pnpm@10.7.0",
+  "version": "3.0.1",
+  "packageManager": "pnpm@10.6.5",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -64,7 +64,7 @@
    "prepack": "pnpm build",
    "dev": "DEV=true nuxi dev playground",
    "dev:build": "nuxi build playground",
-    "dev:vue": "DEV=true vite playground-vue",
+    "dev:vue": "DEV=true pnpm --filter playground-vue dev",
    "dev:vue:build": "vite build playground-vue",
    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
    "docs": "DEV=true nuxi dev docs",
@@ -87,10 +87,10 @@
    "@nuxt/schema": "^3.16.1",
    "@nuxtjs/color-mode": "^3.5.2",
    "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.0.17",
-    "@tailwindcss/vite": "^4.0.17",
+    "@tailwindcss/postcss": "^4.0.15",
+    "@tailwindcss/vite": "^4.0.15",
    "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^2.0.2",
+    "@unhead/vue": "^2.0.0",
    "@vueuse/core": "^13.0.0",
    "@vueuse/integrations": "^13.0.0",
    "colortranslator": "^4.1.0",
@@ -104,7 +104,6 @@
    "embla-carousel-vue": "^8.5.2",
    "embla-carousel-wheel-gestures": "^8.0.1",
    "fuse.js": "^7.1.0",
-    "hookable": "^5.5.3",
    "knitwork": "^1.2.0",
    "magic-string": "^0.30.17",
    "mlly": "^1.7.4",
@@ -113,10 +112,10 @@
    "reka-ui": "^2.1.1",
    "scule": "^1.3.0",
    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.0.15",
    "tinyglobby": "^0.2.12",
    "unplugin": "^2.2.2",
-    "unplugin-auto-import": "^19.1.2",
+    "unplugin-auto-import": "^19.1.1",
    "unplugin-vue-components": "^28.4.1",
    "vaul-vue": "^0.4.1",
    "vue": "^3.5.13",
@@ -167,6 +166,7 @@
    "chokidar": "3.6.0",
    "debug": "4.3.7",
    "rollup": "4.34.9",
+    "typescript": "5.6.3",
    "unplugin": "^2.2.2",
    "vue-tsc": "2.2.0"
  },
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -16,8 +16,9 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
+    "@compodium/vue": "https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d",
    "@vitejs/plugin-vue": "^5.2.3",
-    "typescript": "^5.8.2",
+    "typescript": "^5.6.3",
    "vite": "^6.2.3",
    "vue-tsc": "^2.2.0"
  }
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -88,7 +88,7 @@ defineShortcuts({
      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />

-      <div class="fixed top-15 lg:top-3 end-4 flex items-center gap-2">
+      <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
        <UButton
          :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
          color="neutral"
--- a/playground-vue/src/main.ts
+++ b/playground-vue/src/main.ts
@@ -10,7 +10,7 @@ const pages = import.meta.glob('../../playground/app/pages/**/*.vue')
 const components = import.meta.glob('../../playground/app/components/**/*.vue')

 const routes = Object.keys(pages).map((path) => {
-  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)![1].toLowerCase()
+  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)!.[1].toLowerCase()
  return {
    path: name === '/index' ? '/' : name,
    component: pages[path]
--- a/playground-vue/vite.config.ts
+++ b/playground-vue/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

+import { compodium } from '@compodium/vue'
 import ui from '../src/vite'

 // https://vitejs.dev/config/
@@ -25,7 +26,21 @@ export default defineConfig({
      components: {
        dirs: ['../playground/app/components']
      }
+    }),
+    compodium({
+      dir: '../playground/compodium',
+      includeLibraryCollections: false,
+
+      componentDirs: [
+        { path: '../src/runtime/components', prefix: 'U', pathPrefix: false }
+      ],
+      extras: {
+        colors: {
+          neutral: 'slate'
+        }
+      }
    })
+
  ],
  optimizeDeps: {
    // prevents reloading page when navigating between components
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -1,127 +1,5 @@
-<script setup lang="ts">
-import { splitByCase, upperFirst } from 'scule'
-import { useColorMode } from '#imports'
-
-const router = useRouter()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-const components = [
-  'accordion',
-  'alert',
-  'avatar',
-  'badge',
-  'breadcrumb',
-  'button',
-  'button-group',
-  'card',
-  'calendar',
-  'carousel',
-  'checkbox',
-  'chip',
-  'collapsible',
-  'color-picker',
-  'context-menu',
-  'command-palette',
-  'drawer',
-  'dropdown-menu',
-  'form',
-  'form-field',
-  'input',
-  'input-menu',
-  'input-number',
-  'kbd',
-  'link',
-  'modal',
-  'navigation-menu',
-  'pagination',
-  'pin-input',
-  'popover',
-  'progress',
-  'radio-group',
-  'select',
-  'select-menu',
-  'separator',
-  'shortcuts',
-  'skeleton',
-  'slideover',
-  'slider',
-  'stepper',
-  'switch',
-  'tabs',
-  'table',
-  'textarea',
-  'toast',
-  'tooltip',
-  'tree'
-]
-
-const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
-
-function upperName(name: string) {
-  return splitByCase(name).map(p => upperFirst(p)).join('')
-}
-
-const isCommandPaletteOpen = ref(false)
-
-function onSelect(item: any) {
-  router.push(item.to)
-}
-
-defineShortcuts({
-  meta_k: () => isCommandPaletteOpen.value = true
-})
-
-useHead({
-  title: 'Nuxt UI - Playground'
-})
-</script>
-
 <template>
-  <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster">
-      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
-        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
-        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
-
-        <div class="fixed top-15 lg:top-3 end-4 flex items-center gap-2">
-          <ClientOnly v-if="!colorMode?.forced">
-            <UButton
-              :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
-              color="neutral"
-              variant="ghost"
-              :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
-              @click="isDark = !isDark"
-            />
-
-            <template #fallback>
-              <div class="size-8" />
-            </template>
-          </ClientOnly>
-        </div>
-
-        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
-          <NuxtPage />
-        </div>
-
-        <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
-          <template #content>
-            <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
-          </template>
-        </UModal>
-      </div>
-    </UApp>
-  </template>
-  <template v-else>
+  <UApp>
    <NuxtPage />
-  </template>
+  </UApp>
 </template>
--- a/playground/app/pages/components.vue
+++ b/playground/app/pages/components.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+import { useColorMode } from '#imports'
+
+const router = useRouter()
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+const components = [
+  'accordion',
+  'alert',
+  'avatar',
+  'badge',
+  'breadcrumb',
+  'button',
+  'button-group',
+  'card',
+  'calendar',
+  'carousel',
+  'checkbox',
+  'chip',
+  'collapsible',
+  'color-picker',
+  'context-menu',
+  'command-palette',
+  'drawer',
+  'dropdown-menu',
+  'form',
+  'form-field',
+  'input',
+  'input-menu',
+  'input-number',
+  'kbd',
+  'link',
+  'modal',
+  'navigation-menu',
+  'pagination',
+  'pin-input',
+  'popover',
+  'progress',
+  'radio-group',
+  'select',
+  'select-menu',
+  'separator',
+  'shortcuts',
+  'skeleton',
+  'slideover',
+  'slider',
+  'stepper',
+  'switch',
+  'tabs',
+  'table',
+  'textarea',
+  'toast',
+  'tooltip',
+  'tree'
+]
+
+const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
+
+function upperName(name: string) {
+  return splitByCase(name).map(p => upperFirst(p)).join('')
+}
+
+const isCommandPaletteOpen = ref(false)
+
+function onSelect(item: any) {
+  router.push(item.to)
+}
+
+defineShortcuts({
+  meta_k: () => isCommandPaletteOpen.value = true
+})
+</script>
+
+<template>
+  <UApp :toaster="appConfig.toaster">
+    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
+
+      <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
+        <ClientOnly v-if="!colorMode?.forced">
+          <UButton
+            :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+            color="neutral"
+            variant="ghost"
+            :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+            @click="isDark = !isDark"
+          />
+
+          <template #fallback>
+            <div class="size-8" />
+          </template>
+        </ClientOnly>
+      </div>
+
+      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
+        <NuxtPage />
+      </div>
+
+      <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
+        <template #content>
+          <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
+        </template>
+      </UModal>
+    </div>
+  </UApp>
+</template>
--- a/playground/app/pages/components/accordion.vue
+++ b/playground/app/pages/components/accordion.vue
@@ -18,7 +18,6 @@ const items = [{
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
  label: 'Components',
-  slot: 'test' as const,
  icon: 'i-lucide-layers-3',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
@@ -38,11 +37,6 @@ const items = [{
        </p>
      </template>

-      <template #custom="{ item }">
-        <p class="text-(--ui-text-muted)">
-          Custom: {{ item.content }}
-        </p>
-      </template>
      <template #custom-body="{ item }">
        <p class="text-(--ui-text-muted)">
          Custom: {{ item.content }}
--- a/playground/app/pages/components/dropdown-menu.vue
+++ b/playground/app/pages/components/dropdown-menu.vue
@@ -150,6 +150,10 @@ defineShortcuts(extractShortcuts(items.value))

      <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" :ui="{ content: 'w-48' }">
        <UButton label="Color" color="neutral" variant="outline" icon="i-lucide-menu" />
+
+        <template #custom-trailing>
+          <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
+        </template>
      </UDropdownMenu>
    </div>
  </div>
--- a/playground/app/pages/components/input-menu.vue
+++ b/playground/app/pages/components/input-menu.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { InputMenuItem, AvatarProps } from '@nuxt/ui'
-
 import { upperFirst } from 'scule'
 import { refDebounced } from '@vueuse/core'
 import type { User } from '~/types'
@@ -12,7 +10,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']

-const items = [[{ label: 'Fruits', type: 'label' as const }, ...fruits], [{ label: 'Vegetables', type: 'label' as const }, ...vegetables]]
+const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
 const selectedItems = ref([fruits[0]!, vegetables[0]!])

 const statuses = [{
@@ -30,7 +28,7 @@ const statuses = [{
 }, {
  label: 'Canceled',
  icon: 'i-lucide-circle-x'
-}] satisfies InputMenuItem[]
+}]

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
@@ -128,7 +126,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
        class="w-48"
      >
        <template #leading="{ modelValue, ui }">
-          <UAvatar v-if="modelValue?.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="modelValue.avatar" />
+          <UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
        </template>
      </UInputMenu>
    </div>
--- a/playground/app/pages/components/select-menu.vue
+++ b/playground/app/pages/components/select-menu.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { SelectMenuItem, AvatarProps } from '@nuxt/ui'
-
 import { upperFirst } from 'scule'
 import { refDebounced } from '@vueuse/core'
 import theme from '#build/ui/select-menu'
@@ -12,7 +10,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']

-const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]] satisfies SelectMenuItem[][]
+const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
 const selectedItems = ref([fruits[0]!, vegetables[0]!])

 const statuses = [{
@@ -35,7 +33,7 @@ const statuses = [{
  label: 'Canceled',
  value: 'canceled',
  icon: 'i-lucide-circle-x'
-}] satisfies SelectMenuItem[]
+}]

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
@@ -43,7 +41,7 @@ const searchTermDebounced = refDebounced(searchTerm, 200)
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: User[]) => {
-    return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } }))
+    return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true
 })
@@ -124,7 +122,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
        v-for="size in sizes"
        :key="size"
        v-model:search-term="searchTerm"
-        :items="users"
+        :items="users || []"
        :loading="status === 'pending'"
        ignore-filter
        icon="i-lucide-user"
@@ -134,7 +132,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
        @update:open="searchTerm = ''"
      >
        <template #leading="{ modelValue, ui }">
-          <UAvatar v-if="modelValue?.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="modelValue.avatar" />
+          <UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
        </template>
      </USelectMenu>
    </div>
--- a/playground/app/pages/components/select.vue
+++ b/playground/app/pages/components/select.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SelectItem, AvatarProps } from '@nuxt/ui'
 import { upperFirst } from 'scule'
 import theme from '#build/ui/select'
 import type { User } from '~/types'
@@ -10,7 +9,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']

-const items = [[{ label: 'Fruits', type: 'label' as const }, ...fruits], [{ label: 'Vegetables', type: 'label' as const }, ...vegetables]]
+const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
 const selectedItems = ref([fruits[0]!, vegetables[0]!])

 const statuses = [{
@@ -33,7 +32,7 @@ const statuses = [{
  label: 'Canceled',
  value: 'canceled',
  icon: 'i-lucide-circle-x'
-}] satisfies SelectItem[]
+}]

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  transform: (data: User[]) => {
@@ -115,10 +114,9 @@ function getUserAvatar(value: string) {
        trailing-icon="i-lucide-chevrons-up-down"
        :size="size"
        class="w-48"
-        value-key="value"
      >
        <template #leading="{ modelValue, ui }">
-          <UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
+          <UIcon v-if="modelValue" :name="getStatusIcon(modelValue as string)" :class="ui.leadingIcon()" />
        </template>
      </USelect>
    </div>
@@ -132,10 +130,9 @@ function getUserAvatar(value: string) {
        placeholder="Search users..."
        :size="size"
        class="w-48"
-        value-key="value"
      >
        <template #leading="{ modelValue, ui }">
-          <UAvatar v-if="modelValue" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="getUserAvatar(modelValue)" />
+          <UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue as string)" />
        </template>
      </USelect>
    </div>
--- a/playground/app/pages/components/stepper.vue
+++ b/playground/app/pages/components/stepper.vue
@@ -11,22 +11,22 @@ const size = ref('md' as const)

 const items = [
  {
-    slot: 'address' as const,
+    slot: 'address',
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide-house'
  }, {
-    slot: 'shipping' as const,
+    slot: 'shipping',
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide-truck'
  }, {
-    slot: 'payment' as const,
+    slot: 'payment',
    title: 'Payment',
    description: 'Select your payment method',
    icon: 'i-lucide-credit-card'
  }, {
-    slot: 'checkout' as const,
+    slot: 'checkout',
    title: 'Checkout',
    description: 'Confirm your order'
  }
@@ -50,27 +50,27 @@ const stepper = useTemplateRef('stepper')
      :orientation="orientation"
      :size="size"
    >
-      <template #address="{ item }">
+      <template #address>
        <Placeholder class="size-full min-h-60 min-w-60">
-          {{ item.title }}
+          Address
        </Placeholder>
      </template>

-      <template #shipping="{ item }">
+      <template #shipping>
        <Placeholder class="size-full min-h-60 min-w-60">
-          {{ item.title }}
+          Shipping
        </Placeholder>
      </template>

-      <template #payment="{ item }">
+      <template #payment>
        <Placeholder class="size-full min-h-60 min-w-60">
-          {{ item.title }}
+          Payment
        </Placeholder>
      </template>

-      <template #checkout="{ item }">
+      <template #checkout>
        <Placeholder class="size-full min-h-60 min-w-60">
-          {{ item.title }}
+          Checkout
        </Placeholder>
      </template>
    </UStepper>
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -148,12 +148,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
@@ -251,17 +251,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': 'ms-auto',
-      'aria-label': 'Actions dropdown'
+      icon: 'i-lucide-ellipsis-vertical',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ms-auto'
    })))
  }
 }]
--- a/playground/app/pages/components/tree.vue
+++ b/playground/app/pages/components/tree.vue
@@ -41,8 +41,8 @@ const itemsWithMappedId = [
  { id: 'id3', title: 'obiwan kenobi' }
 ]

-const modelValue = ref<string>()
-const modelValues = ref<string[]>([])
+const modelValue = ref<TreeItem>()
+const modelValues = ref<TreeItem[]>([])
 </script>

 <template>
@@ -64,14 +64,22 @@ const modelValues = ref<string[]>([])

    <!-- Typescript tests -->
    <template v-if="false">
-      <UTree :model-value="modelValues" :items="items" multiple />
-      <UTree :default-value="modelValues" :items="items" multiple />
-      <UTree :items="items" multiple @update:model-value="(payload) => payload" />
-      <UTree :model-value="modelValue" :items="items" />
-      <UTree :default-value="modelValue" :items="items" />
-      <UTree :items="items" @update:model-value="(payload) => payload" />
+      <!-- @vue-expect-error - multiple props should type modelValue to array.  -->
+      <UTree :model-value="modelValue" :items="items" multiple />
+      <!-- @vue-expect-error - multiple props should type defaultValue to array.  -->
+      <UTree :default-value="modelValue" :items="items" multiple />
+      <!-- @vue-expect-error - multiple props should type @update:modelValue to array.  -->
+      <UTree :items="items" multiple @update:model-value="(payload: TreeItem) => payload" />
+      <!-- @vue-expect-error - default should type modelValue to single item.  -->
+      <UTree :model-value="modelValues" :items="items" />
+      <!-- @vue-expect-error - default should type defaultValue to single item.  -->
+      <UTree :default-value="modelValues" :items="items" />
+      <!-- @vue-expect-error - default should type @update:modelValue to single item.  -->
+      <UTree :items="items" @update:model-value="(payload: TreeItem[]) => payload" />

+      <!-- @vue-expect-error - value key should type v-model.  -->
      <UTree v-model="modelValue" :items="itemsWithMappedId" value-key="id" />
+      <!-- @vue-expect-error - label key should type v-model.  -->
      <UTree v-model="modelValue" :items="itemsWithMappedId" label-key="title" />
    </template>
  </div>
--- a/playground/app/pages/index.vue
+++ b/playground/app/pages/index.vue
@@ -1,11 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
-  <div class="text-center">
-    <h1 class="font-semibold mb-1">
-      Playground
+  <div class="w-screen h-screen flex flex-col justify-center items-center gap-2">
+    <h1 class="text-3xl font-bold mb-1">
+      Nuxt UI Playground
    </h1>

    <div class="flex items-center justify-center gap-1">
-      <UKbd value="meta" /> <UKbd value="K" />
+      <UButton size="lg" to="/__compodium__/devtools" external>
+        Browse components
+      </UButton>
+      <UButton variant="outline" color="neutral" size="lg">
+        Documentation
+      </UButton>
    </div>
  </div>
 </template>
--- a/playground/compodium/examples/UAccordion/UAccordionExample.vue
+++ b/playground/compodium/examples/UAccordion/UAccordionExample.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-lucide-info',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-lucide-download',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-lucide-pipette',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Layouts',
+      icon: 'i-lucide-layout-dashboard',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Components',
+      icon: 'i-lucide-layers-3',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Utilities',
+      slot: 'custom' as const,
+      icon: 'i-lucide-wrench',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <UAccordion v-bind="$attrs" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
+      <template #body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          {{ item.content }}
+        </p>
+      </template>
+
+      <template #custom-body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          Custom: {{ item.content }}
+        </p>
+      </template>
+    </UAccordion>
+  </UCard>
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExample.vue
+++ b/playground/compodium/examples/UAlert/UAlertExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAction.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAction.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.',
+    close: true,
+    actions: [
+
+      {
+        label: 'Action',
+        onClick() {
+          console.log('Action clicked')
+        }
+      },
+      {
+        label: 'Another action',
+        color: 'warning',
+        onClick() {
+          console.log('Another action clicked')
+        }
+      },
+      {
+        label: 'One more action',
+        color: 'error',
+        onClick() {
+          console.log('One more action clicked')
+        }
+      },
+      {
+        label: 'And one more',
+        color: 'info',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('And one more clicked')
+        }
+      },
+      {
+        label: 'Last one',
+        color: 'neutral',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('Last one clicked')
+        }
+      }
+    ]
+  }
+})
+
+const multipleActions = (color: string) => [
+]
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' },
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- 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