feat(FormField): add inline variant

CHANGELOG.md

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

cli/templates.mjs

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

docs/app/components/Banner.vue

@@ -1,7 +1,6 @@
 <template>
   <UBanner
     id="ui3-launch"
-    title="Nuxt UI v3 is officially released!"
     icon="i-lucide-rocket"
     :actions="[
       {
@@ -11,5 +10,9 @@
       }
     ]"
     close
-  />
+  >
+    <template #title>
+      <span class="font-semibold">Nuxt UI v3</span> is officially released.
+    </template>
+  </UBanner>
 </template>

docs/app/components/PageHeaderLinks.vue

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

docs/app/components/content/examples/form/FormExampleSuperstruct.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { object, string, nonempty, refine } from 'superstruct'
-import type { Infer } from 'superstruct'
+import { object, string, nonempty, refine, type Infer } from 'superstruct'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = object({

docs/app/components/content/examples/form/FormExampleYup.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { object, string } from 'yup'
-import type { InferType } from 'yup'
+import { object, string, type InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = object({

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

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

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-</script>
-
-<template>
-  <UPopover
-    :open="open"
-    :reference="reference"
-    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-  >
-    <div
-      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
-      @pointerenter="open = true"
-      @pointerleave="open = false"
-      @pointermove="(ev) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-    >
-      Hover me
-    </div>
-
-    <template #content>
-      <div class="p-4">
-        {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
-      </div>
-    </template>
-  </UPopover>
-</template>

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

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
-
-const UBadge = resolveComponent('UBadge')
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  footer: ({ column }) => {
-    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(total)
-
-    return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
-  },
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-</script>
-
-<template>
-  <UTable :data="data" :columns="columns" class="flex-1" />
-</template>

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

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

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
-import { getGroupedRowModel } from '@tanstack/vue-table'
-import type { GroupingOptions } from '@tanstack/vue-table'
+import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'
 
 const UBadge = resolveComponent('UBadge')
 

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

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

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

@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { ContextMenuItem, TableColumn, TableRow } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'
-
-const UBadge = resolveComponent('UBadge')
-const UCheckbox = resolveComponent('UCheckbox')
-
-const toast = useToast()
-const { copy } = useClipboard()
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  id: 'select',
-  header: ({ table }) => h(UCheckbox, {
-    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
-  }),
-  cell: ({ row }) => h(UCheckbox, {
-    'modelValue': row.getIsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
-  })
-}, {
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-
-const items = ref<ContextMenuItem[]>([])
-
-function getRowItems(row: TableRow<Payment>) {
-  return [{
-    type: 'label' as const,
-    label: 'Actions'
-  }, {
-    label: 'Copy payment ID',
-    onSelect() {
-      copy(row.original.id)
-
-      toast.add({
-        title: 'Payment ID copied to clipboard!',
-        color: 'success',
-        icon: 'i-lucide-circle-check'
-      })
-    }
-  }, {
-    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-    onSelect() {
-      row.toggleExpanded()
-    }
-  }, {
-    type: 'separator' as const
-  }, {
-    label: 'View customer'
-  }, {
-    label: 'View payment details'
-  }]
-}
-
-function onContextmenu(_e: Event, row: TableRow<Payment>) {
-  items.value = getRowItems(row)
-}
-</script>
-
-<template>
-  <UContextMenu :items="items">
-    <UTable
-      :data="data"
-      :columns="columns"
-      class="flex-1"
-      @contextmenu="onContextmenu"
-    >
-      <template #expanded="{ row }">
-        <pre>{{ row.original }}</pre>
-      </template>
-    </UTable>
-  </UContextMenu>
-</template>

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

@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
-
-const UBadge = resolveComponent('UBadge')
-const UCheckbox = resolveComponent('UCheckbox')
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  id: 'select',
-  header: ({ table }) => h(UCheckbox, {
-    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
-  }),
-  cell: ({ row }) => h(UCheckbox, {
-    'modelValue': row.getIsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
-  })
-}, {
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-
-const open = ref(false)
-const openDebounced = refDebounced(open, 10)
-const selectedRow = ref<TableRow<Payment> | null>(null)
-
-function onHover(_e: Event, row: TableRow<Payment> | null) {
-  selectedRow.value = row
-
-  open.value = !!row
-}
-</script>
-
-<template>
-  <div class="flex w-full flex-1 gap-1">
-    <UTable
-      :data="data"
-      :columns="columns"
-      class="flex-1"
-      @pointermove="(ev: PointerEvent) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-      @hover="onHover"
-    />
-
-    <UPopover
-      :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-      :open="openDebounced"
-      :reference="reference"
-    >
-      <template #content>
-        <div class="p-4">
-          {{ selectedRow?.original?.id }}
-        </div>
-      </template>
-    </UPopover>
-  </div>
-</template>

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

@@ -112,7 +112,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
 </script>
 
 <template>
-  <div class="flex w-full flex-1 gap-1">
+  <div class=" flex w-full flex-1 gap-1">
     <div class="flex-1">
       <UTable
         ref="table"

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

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

docs/app/components/content/examples/tooltip/TooltipCursorExample.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-</script>
-
-<template>
-  <UTooltip
-    :open="open"
-    :reference="reference"
-    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-  >
-    <div
-      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
-      @pointerenter="open = true"
-      @pointerleave="open = false"
-      @pointermove="(ev) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-    >
-      Hover me
-    </div>
-
-    <template #content>
-      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
-    </template>
-  </UTooltip>
-</template>

docs/app/pages/[...slug].vue

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

docs/app/workers/prettier.js

@@ -16,12 +16,12 @@ function handleMessage(message) {
 async function handleFormatMessage(message) {
   if (!globalThis.prettier) {
     await Promise.all([
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/standalone.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/babel.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/estree.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/html.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/markdown.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/typescript.js')
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/standalone.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/babel.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/estree.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/html.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/markdown.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/typescript.js')
     ])
   }
 

docs/content/1.getting-started/4.icons/2.vue.md

@@ -32,12 +32,6 @@ props:
 You can use any name from the <https://icones.js.org> collection.
 ::
 
-::warning
-When using collections with a dash (`-`), you need to separate the icon name from the collection name with a colon (`:`) as `@iconify/vue` does not handle this case like `@nuxt/icon`. For example, instead of `i-simple-icons-github` you need to write `i-simple-icons:github` or `simple-icons:github`.
-
-Learn more about the [Iconify naming convention](https://iconify.design/docs/icon-components/vue/#icon).
-::
-
 ### Component Props
 
 Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -125,7 +125,7 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
 
 ::
 
-### Extend locale :badge{label="New" class="align-text-top"}
+### Extend locale :badge{label="Soon" class="align-text-top"}
 
 You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
 

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -127,7 +127,7 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
 
 ::
 
-### Extend locale :badge{label="New" class="align-text-top"}
+### Extend locale :badge{label="Soon" class="align-text-top"}
 
 You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
 

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

@@ -9,6 +9,7 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
+navigation.badge: New
 ---
 
 

docs/content/3.components/checkbox.md

@@ -156,7 +156,7 @@ props:
 ---
 ::
 
-### Variant
+### Variant :badge{label="New" class="align-text-top"}
 
 Use the `variant` prop to change the variant of the Checkbox.
 
@@ -190,7 +190,7 @@ props:
 ---
 ::
 
-### Indicator
+### Indicator :badge{label="New" class="align-text-top"}
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 

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

@@ -52,8 +52,8 @@ Each group contains an `items` array of objects that define the commands. Each i
 - `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
-- `placeholder?: string`{lang="ts-type"}
-- `children?: CommandPaletteItem[]`{lang="ts-type"}
+- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
+- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
 - `onSelect?(e?: Event): void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
@@ -327,7 +327,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.ch
 :::
 ::
 
-### Trailing Icon :badge{label="New" class="align-text-top"}
+### Trailing Icon :badge{label="Soon" class="align-text-top"}
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.
 
@@ -565,7 +565,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::
 
-### Back :badge{label="New" class="align-text-top"}
+### Back :badge{label="Soon" class="align-text-top"}
 
 Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
 
@@ -604,7 +604,7 @@ props:
 ---
 ::
 
-### Back Icon :badge{label="New" class="align-text-top"}
+### Back Icon :badge{label="Soon" class="align-text-top"}
 
 Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
 
@@ -717,7 +717,7 @@ props:
 This example uses the `@update:model-value` event to reset the search term when an item is selected.
 ::
 
-### With children in items :badge{label="New" class="align-text-top"}
+### With children in items :badge{label="Soon" class="align-text-top"}
 
 You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
 

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

@@ -9,7 +9,7 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
-navigation.badge: New
+navigation.badge: Soon
 ---
 
 ## Usage
@@ -51,17 +51,6 @@ props:
 ---
 ::
 
-### Max Length :badge{label="Soon" class="align-text-top"}
-
-Use the `max-length` prop to set the maximum number of characters allowed in a tag.
-
-::component-code
----
-props:
-  maxLength: 4
----
-::
-
 ### Color
 
 Use the `color` prop to change the ring color when the InputTags is focused.

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

@@ -889,7 +889,7 @@ You can inspect the DOM to see each item's content being rendered.
 
 ## Examples
 
-### With tooltip in items
+### With tooltip in items :badge{label="New" class="align-text-top"}
 
 When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.
 
@@ -994,7 +994,7 @@ props:
 ---
 ::
 
-### With popover in items
+### With popover in items :badge{label="New" class="align-text-top"}
 
 When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.
 

docs/content/3.components/popover.md

@@ -202,17 +202,7 @@ name: 'popover-command-palette-example'
 ---
 ::
 
-### With following cursor :badge{label="Soon" class="align-text-top"}
-
-You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
-
-::component-example
----
-name: 'popover-cursor-example'
----
-::
-
-### With anchor slot
+### With anchor slot :badge{label="New" class="align-text-top"}
 
 You can use the `#anchor` slot to position the Popover against a custom element.
 

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

@@ -159,7 +159,7 @@ props:
 ---
 ::
 
-### Variant
+### Variant :badge{label="New" class="align-text-top"}
 
 Use the `variant` prop to change the variant of the RadioGroup.
 
@@ -240,7 +240,7 @@ props:
 ---
 ::
 
-### Indicator
+### Indicator :badge{label="New" class="align-text-top"}
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 

docs/content/3.components/slider.md

@@ -136,7 +136,7 @@ props:
 ---
 ::
 
-### Tooltip
+### Tooltip :badge{label="New" class="align-text-top"}
 
 Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
 

docs/content/3.components/table.md

@@ -77,7 +77,6 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat
 
 - `accessorKey`: [The key of the row object to use when extracting the value for the column.]{class="text-muted"}
 - `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-muted"}
-- `footer`: [The footer to display for the column. Works exactly like header, but is displayed under the table.]{class="text-muted"}
 - `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-muted"}
 - `meta`: [Extra properties for the column.]{class="text-muted"}
   - `class`:
@@ -162,7 +161,7 @@ props:
 
 ### Sticky
 
-Use the `sticky` prop to make the header or footer sticky.
+Use the `sticky` prop to make the header sticky.
 
 ::component-code
 ---
@@ -173,10 +172,6 @@ ignore:
   - class
 external:
   - data
-items:
-  sticky:
-    - true
-    - false
 props:
   sticky: true
   data:
@@ -271,8 +266,8 @@ You can group rows based on a given column value and show/hide sub rows via some
 
 #### Important parts:
 
-* Add `grouping` prop with an array of column ids you want to group by.
-* Add `grouping-options` prop. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
 * Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
 * Use `aggregateFn` on column definition to define how to aggregate the rows.
 * `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
@@ -309,86 +304,22 @@ class: '!p-0'
 You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
 ::
 
-### With row select event
+### With `@select` event
 
-You can add a `@select` listener to make rows clickable with or without a checkbox column.
+You can add a `@select` listener to make rows clickable. The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
 
 ::note
-The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
-::
-
-::component-example
----
-prettier: true
-collapse: true
-name: 'table-row-select-event-example'
-highlights:
-  - 123
-  - 130
-class: '!p-0'
----
-::
-
-::tip
 You can use this to navigate to a page, open a modal or even to select the row manually.
 ::
 
-### With row context menu event :badge{label="Soon" class="align-text-top"}
-
-You can add a `@contextmenu` listener to make rows right clickable and wrap the Table in a [ContextMenu](/components/context-menu) component to display row actions for example.
-
-::note
-The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
-::
-
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-row-context-menu-event-example'
+name: 'table-row-selection-event-example'
 highlights:
+  - 123
   - 130
-  - 170
-class: '!p-0'
----
-::
-
-### With row hover event :badge{label="Soon" class="align-text-top"}
-
-You can add a `@hover` listener to make rows hoverable and use a [Popover](/components/popover) or a [Tooltip](/components/tooltip) component to display row details for example.
-
-::note
-The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
-::
-
-::component-example
----
-prettier: true
-collapse: true
-name: 'table-row-hover-event-example'
-highlights:
-  - 126
-  - 149
-class: '!p-0'
----
-::
-
-::note
-This example is similar as the Popover [with following cursor example](/components/popover#with-following-cursor) and uses a [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.
-::
-
-### With column footer :badge{label="Soon" class="align-text-top"}
-
-You can add a `footer` property to the column definition to render a footer for the column.
-
-::component-example
----
-prettier: true
-collapse: true
-name: 'table-column-footer-example'
-highlights:
-  - 94
-  - 108
 class: '!p-0'
 ---
 ::

docs/content/3.components/textarea.md

@@ -124,7 +124,7 @@ props:
 ---
 ::
 
-### Icon
+### Icon :badge{label="New" class="align-text-top"}
 
 Use the `icon` prop to show an [Icon](/components/icon) inside the Textarea.
 
@@ -157,7 +157,7 @@ props:
 ---
 ::
 
-### Avatar
+### Avatar :badge{label="New" class="align-text-top"}
 
 Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Textarea.
 
@@ -176,7 +176,7 @@ props:
 ---
 ::
 
-### Loading
+### Loading :badge{label="New" class="align-text-top"}
 
 Use the `loading` prop to show a loading icon on the Textarea.
 
@@ -192,7 +192,7 @@ props:
 ---
 ::
 
-### Loading Icon
+### Loading Icon :badge{label="New" class="align-text-top"}
 
 Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 

docs/content/3.components/timeline.md

@@ -6,7 +6,7 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue
-navigation.badge: New
+navigation.badge: Soon
 ---
 
 ## Usage

docs/content/3.components/tooltip.md

@@ -186,16 +186,6 @@ name: 'tooltip-open-example'
 In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
 ::
 
-### With following cursor :badge{label="Soon" class="align-text-top"}
-
-You can make the Tooltip follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
-
-::component-example
----
-name: 'tooltip-cursor-example'
----
-::
-
 ## API
 
 ### Props

docs/package.json

@@ -11,40 +11,39 @@
   "dependencies": {
     "@ai-sdk/vue": "^1.2.12",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.56",
-    "@iconify-json/simple-icons": "^1.2.42",
-    "@iconify-json/vscode-icons": "^1.2.23",
-    "@nuxt/content": "^3.6.3",
+    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/simple-icons": "^1.2.38",
+    "@iconify-json/vscode-icons": "^1.2.22",
+    "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "workspace:*",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@22fdc5e",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
     "@nuxthub/core": "^0.9.0",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^22.0.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.5.0",
-    "@vueuse/nuxt": "^13.5.0",
+    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/nuxt": "^13.3.0",
     "ai": "^4.3.16",
-    "better-sqlite3": "^12.2.0",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "maska": "^3.2.0",
-    "motion-v": "^1.5.0",
-    "nuxt": "^3.17.6",
-    "nuxt-component-meta": "^0.12.1",
+    "maska": "^3.1.1",
+    "motion-v": "^1.2.1",
+    "nuxt": "^3.17.5",
+    "nuxt-component-meta": "^0.11.0",
     "nuxt-llms": "^0.1.3",
-    "nuxt-og-image": "^5.1.9",
-    "prettier": "^3.6.2",
+    "nuxt-og-image": "^5.1.6",
+    "prettier": "^3.5.3",
     "shiki-transformer-color-highlight": "^1.0.0",
     "sortablejs": "^1.15.6",
     "superstruct": "^2.0.2",
     "ufo": "^1.6.1",
     "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.7.1",
+    "workers-ai-provider": "^0.6.0",
     "yup": "^1.6.1",
-    "zod": "^3.25.75"
+    "zod": "^3.25.57"
   },
   "devDependencies": {
-    "wrangler": "^4.23.0"
+    "wrangler": "^4.19.1"
   }
 }

docs/server/plugins/llms.ts

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

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

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

docs/server/utils/transformMDC.ts

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

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.2.0",
-  "packageManager": "pnpm@10.12.4",
+  "version": "3.1.3",
+  "packageManager": "pnpm@10.12.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -98,9 +98,9 @@
     "prepack": "pnpm build",
     "dev": "nuxt dev playground --uiDev",
     "dev:build": "nuxt build playground",
-    "dev:vue": "pnpm --filter playground-vue dev -- --uiDev",
-    "dev:vue:build": "pnpm --filter playground-vue build",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && pnpm dev:vue:build",
+    "dev:vue": "vite playground-vue -- --uiDev",
+    "dev:vue:build": "vite build playground-vue",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && vite build playground-vue",
     "docs": "nuxt dev docs --uiDev",
     "docs:build": "nuxt build docs",
     "lint": "eslint .",
@@ -115,17 +115,17 @@
     "@internationalized/date": "^3.8.2",
     "@internationalized/number": "^3.6.3",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.15.0",
-    "@nuxt/kit": "^3.17.6",
-    "@nuxt/schema": "^3.17.6",
+    "@nuxt/icon": "^1.13.0",
+    "@nuxt/kit": "^3.17.5",
+    "@nuxt/schema": "^3.17.5",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tailwindcss/vite": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.10",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.12",
-    "@vueuse/core": "^13.5.0",
-    "@vueuse/integrations": "^13.5.0",
+    "@unhead/vue": "^2.0.10",
+    "@vueuse/core": "^13.3.0",
+    "@vueuse/integrations": "^13.3.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -143,31 +143,31 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.3.2",
+    "reka-ui": "2.3.1",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.10",
     "tinyglobby": "^0.2.14",
     "unplugin": "^2.3.5",
     "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.8.0",
+    "unplugin-vue-components": "^28.7.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.0.1"
+    "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.5.2",
+    "@nuxt/eslint-config": "^1.4.1",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.2",
+    "@nuxt/test-utils": "^3.19.1",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.30.1",
-    "happy-dom": "^18.0.1",
-    "nuxt": "^3.17.6",
+    "eslint": "^9.28.0",
+    "happy-dom": "^17.6.3",
+    "nuxt": "^3.17.5",
     "release-it": "^19.0.3",
-    "vitest": "^3.2.4",
+    "vitest": "^3.2.3",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^2.2.10"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",

playground-vue/package.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@nuxt/ui": "workspace:*",
-    "vue": "^3.5.17",
+    "vue": "^3.5.16",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.75"
+    "zod": "^3.25.57"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^2.2.10"
   }
 }

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

@@ -10,9 +10,8 @@ const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
 const selected = ref([])
-const commandPalette = useTemplateRef('commandPalette')
 
-const { data: _users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+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, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -23,6 +22,10 @@ const { data: _users, status } = await useFetch('https://jsonplaceholder.typicod
 const loading = ref(false)
 
 const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
   id: 'actions',
   items: [{
     label: 'Add new file',
@@ -71,12 +74,6 @@ const groups = computed(() => [{
       toast.add({ title: 'Label added!' })
     },
     kbds: ['meta', 'L']
-  }, {
-    label: 'Set Wallpaper',
-    suffix: 'Choose from beautiful wallpaper collection.',
-    icon: 'i-lucide-image',
-    view: 'wallpaper',
-    placeholder: 'Search wallpapers...'
   }, {
     label: 'More actions',
     placeholder: 'Search actions...',
@@ -143,116 +140,6 @@ const labels = [{
 }]
 const label = ref()
 
-const wallpapers = [
-  {
-    id: 1,
-    name: 'red_distortion_1',
-    gradient: 'from-red-500 via-orange-500 to-pink-500',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 2,
-    name: 'blue_distortion_1',
-    gradient: 'from-blue-600 via-purple-600 to-indigo-600',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 3,
-    name: 'mono_dark_distortion_1',
-    gradient: 'from-gray-900 via-gray-700 to-gray-800',
-    category: 'Monochrome',
-    featured: false
-  },
-  {
-    id: 4,
-    name: 'chromatic_dark_1',
-    gradient: 'from-emerald-600 via-teal-600 to-cyan-600',
-    category: 'Chromatic',
-    featured: true
-  },
-  {
-    id: 5,
-    name: 'red_distortion_2',
-    gradient: 'from-rose-600 via-red-600 to-orange-600',
-    category: 'Abstract',
-    featured: false
-  },
-  {
-    id: 6,
-    name: 'purple_cosmic_1',
-    gradient: 'from-violet-700 via-purple-700 to-fuchsia-700',
-    category: 'Cosmic',
-    featured: true
-  },
-  {
-    id: 7,
-    name: 'golden_sunset_1',
-    gradient: 'from-yellow-500 via-orange-500 to-red-500',
-    category: 'Nature',
-    featured: false
-  },
-  {
-    id: 8,
-    name: 'ocean_deep_1',
-    gradient: 'from-blue-800 via-blue-900 to-indigo-900',
-    category: 'Nature',
-    featured: true
-  },
-  {
-    id: 9,
-    name: 'mono_light_distortion_1',
-    gradient: 'from-gray-200 via-gray-300 to-gray-400',
-    category: 'Monochrome',
-    featured: false
-  },
-  {
-    id: 10,
-    name: 'green_matrix_1',
-    gradient: 'from-green-800 via-emerald-700 to-teal-700',
-    category: 'Chromatic',
-    featured: false
-  },
-  {
-    id: 11,
-    name: 'pink_dreams_1',
-    gradient: 'from-pink-500 via-rose-500 to-purple-500',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 12,
-    name: 'midnight_blue_1',
-    gradient: 'from-slate-900 via-blue-900 to-indigo-900',
-    category: 'Nature',
-    featured: false
-  }
-]
-
-const filteredWallpapers = computed(() => {
-  let filtered = wallpapers
-
-  // Filter by search term
-  if (searchTerm.value.trim()) {
-    const search = searchTerm.value.toLowerCase()
-    filtered = filtered.filter(w =>
-      w.name.toLowerCase().includes(search)
-      || w.category.toLowerCase().includes(search)
-    )
-  }
-
-  return filtered
-})
-
-function setWallpaper(wallpaper: any) {
-  toast.add({
-    title: `Wallpaper set to ${wallpaper.name}!`,
-    description: 'Your desktop wallpaper has been updated.',
-    icon: 'i-lucide-image'
-  })
-}
-
 // function onSelect(item: typeof groups.value[number]['items'][number]) {
 function onSelect(item: any) {
   console.log('Selected', item)
@@ -260,12 +147,6 @@ function onSelect(item: any) {
 
 defineShortcuts({
   meta_k: () => open.value = !open.value,
-  meta_shift_a: {
-    usingInput: true,
-    handler: () => {
-      commandPalette.value?.openView('askAI')
-    }
-  },
   ...extractShortcuts(groups.value)
 })
 </script>
@@ -273,7 +154,6 @@ defineShortcuts({
 <template>
   <DefineTemplate>
     <UCommandPalette
-      ref="commandPalette"
       v-model="selected"
       v-model:search-term="searchTerm"
       :loading="status === 'pending'"
@@ -286,51 +166,7 @@ defineShortcuts({
       multiple
       class="sm:max-h-80"
       @update:model-value="onSelect"
-    >
-      <template #wallpaper>
-        <div class="flex-1 overflow-y-auto p-6">
-          <div class="grid grid-cols-4 gap-4">
-            <div
-              v-for="wallpaper in filteredWallpapers"
-              :key="wallpaper.id"
-              class="group relative cursor-pointer"
-              @click="setWallpaper(wallpaper)"
-            >
-              <div
-                class="aspect-video rounded-lg bg-gradient-to-br shadow-lg ring-1 ring-black/5"
-                :class="wallpaper.gradient"
-              />
-              <div class="mt-2 px-1">
-                <div class="flex items-center gap-2">
-                  <h3 class="text-sm font-medium text-highlighted truncate">
-                    {{ wallpaper.name }}
-                  </h3>
-                  <UChip
-                    v-if="wallpaper.featured"
-                    label="★"
-                    size="xs"
-                    color="primary"
-                    class="shrink-0"
-                  />
-                </div>
-                <p class="text-xs text-dimmed">
-                  {{ wallpaper.category }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template #askAI>
-        <div class="flex flex-col items-center justify-center gap-4 p-6">
-          <UIcon name="i-lucide-sparkles" class="size-8 text-primary" />
-          <span class="text-lg font-semibold text-highlighted">
-            Ask me anything...
-          </span>
-        </div>
-      </template>
-    </UCommandPalette>
+    />
   </DefineTemplate>
 
   <div class="flex-1 flex flex-col gap-12 w-full max-w-lg">

playground/app/pages/components/form-field.vue

@@ -16,7 +16,7 @@ const feedbacks = [
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 ms-[-38px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
-        <UFormField v-bind="feedback" label="Email" name="email">
+        <UFormField v-bind="feedback" label="Email" name="email" variant="inline">
           <UInput placeholder="john@lennon.com" />
         </UFormField>
       </div>
@@ -41,6 +41,8 @@ const feedbacks = [
         :size="size"
         label="Email"
         description="This is a description"
+        hint="This is a hint"
+        help="This is a help"
         name="email"
       >
         <UInput placeholder="john@lennon.com" />

playground/app/pages/components/table.vue

@@ -3,7 +3,6 @@ import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn, TableRow } from '@nuxt/ui'
 import { getPaginationRowModel } from '@tanstack/vue-table'
-import { useClipboard, refDebounced } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -11,7 +10,6 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
-const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -147,35 +145,6 @@ const data = ref<Payment[]>([{
 
 const currentID = ref(4601)
 
-function getRowItems(row: TableRow<Payment>) {
-  return [{
-    type: 'label' as const,
-    label: 'Actions'
-  }, {
-    label: 'Copy payment ID',
-    onSelect() {
-      copy(row.original.id)
-
-      toast.add({
-        title: 'Payment ID copied to clipboard!',
-        color: 'success',
-        icon: 'i-lucide-circle-check'
-      })
-    }
-  }, {
-    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-    onSelect() {
-      row.toggleExpanded()
-    }
-  }, {
-    type: 'separator' as const
-  }, {
-    label: 'View customer'
-  }, {
-    label: 'View payment details'
-  }]
-}
-
 const columns: TableColumn<Payment>[] = [{
   id: 'select',
   header: ({ table }) => h(UCheckbox, {
@@ -242,16 +211,6 @@ const columns: TableColumn<Payment>[] = [{
 }, {
   accessorKey: 'amount',
   header: () => h('div', { class: 'text-right' }, 'Amount'),
-  footer: ({ column }) => {
-    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(total)
-
-    return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
-  },
   cell: ({ row }) => {
     const amount = Number.parseFloat(row.getValue('amount'))
 
@@ -266,11 +225,38 @@ const columns: TableColumn<Payment>[] = [{
   id: 'actions',
   enableHiding: false,
   cell: ({ row }) => {
+    const items = [{
+      type: 'label',
+      label: 'Actions'
+    }, {
+      label: 'Copy payment ID',
+      onSelect() {
+        navigator.clipboard.writeText(row.original.id)
+
+        toast.add({
+          title: 'Payment ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-lucide-circle-check'
+        })
+      }
+    }, {
+      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+      onSelect() {
+        row.toggleExpanded()
+      }
+    }, {
+      type: 'separator'
+    }, {
+      label: 'View customer'
+    }, {
+      label: 'View payment details'
+    }]
+
     return h('div', { class: 'text-right' }, h(UDropdownMenu, {
       'content': {
         align: 'end'
       },
-      'items': getRowItems(row),
+      items,
       'aria-label': 'Actions dropdown'
     }, () => h(UButton, {
       'icon': 'i-lucide-ellipsis-vertical',
@@ -308,41 +294,8 @@ function randomize() {
   data.value = data.value.sort(() => Math.random() - 0.5)
 }
 
-const rowSelection = ref<Record<string, boolean>>({})
-
 function onSelect(row: TableRow<Payment>) {
-  row.toggleSelected(!row.getIsSelected())
-}
-
-const contextmenuRow = ref<TableRow<Payment> | null>(null)
-const contextmenuItems = computed(() => contextmenuRow.value ? getRowItems(contextmenuRow.value) : [])
-
-function onContextmenu(e: Event, row: TableRow<Payment>) {
-  contextmenuRow.value = row
-}
-
-const popoverOpen = ref(false)
-const popoverOpenDebounced = refDebounced(popoverOpen, 1)
-const popoverAnchor = ref({ x: 0, y: 0 })
-const popoverRow = ref<TableRow<Payment> | null>(null)
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: popoverAnchor.value.x,
-      right: popoverAnchor.value.x,
-      top: popoverAnchor.value.y,
-      bottom: popoverAnchor.value.y,
-      ...popoverAnchor.value
-    } as DOMRect)
-}))
-
-function onHover(_e: Event, row: TableRow<Payment> | null) {
-  popoverRow.value = row
-
-  popoverOpen.value = !!row
+  console.log(row)
 }
 
 onMounted(() => {
@@ -389,44 +342,27 @@ onMounted(() => {
       </UDropdownMenu>
     </div>
 
-    <UContextMenu :items="contextmenuItems">
-      <UTable
-        ref="table"
-        :data="data"
-        :columns="columns"
-        :column-pinning="columnPinning"
-        :row-selection="rowSelection"
-        :loading="loading"
-        :pagination="pagination"
-        :pagination-options="{
-          getPaginationRowModel: getPaginationRowModel()
-        }"
-        :ui="{
-          tr: 'divide-x divide-default'
-        }"
-        sticky
-        class="border border-accented rounded-sm"
-        @select="onSelect"
-        @contextmenu="onContextmenu"
-        @pointermove="(ev: PointerEvent) => {
-          popoverAnchor.x = ev.clientX
-          popoverAnchor.y = ev.clientY
-        }"
-        @hover="onHover"
-      >
-        <template #expanded="{ row }">
-          <pre>{{ row.original }}</pre>
-        </template>
-      </UTable>
-    </UContextMenu>
-
-    <UPopover :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }" :open="popoverOpenDebounced" :reference="reference">
-      <template #content>
-        <div class="p-4">
-          {{ popoverRow?.original?.id }}
-        </div>
+    <UTable
+      ref="table"
+      :data="data"
+      :columns="columns"
+      :column-pinning="columnPinning"
+      :loading="loading"
+      :pagination="pagination"
+      :pagination-options="{
+        getPaginationRowModel: getPaginationRowModel()
+      }"
+      :ui="{
+        tr: 'divide-x divide-default'
+      }"
+      sticky
+      class="border border-accented rounded-sm"
+      @select="onSelect"
+    >
+      <template #expanded="{ row }">
+        <pre>{{ row.original }}</pre>
       </template>
-    </UPopover>
+    </UTable>
 
     <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-muted">

playground/package.json

@@ -9,17 +9,17 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.56",
-    "@iconify-json/simple-icons": "^1.2.42",
+    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/simple-icons": "^1.2.38",
     "@internationalized/date": "^3.8.2",
     "@nuxt/ui": "workspace:*",
     "@nuxthub/core": "^0.9.0",
-    "nuxt": "^3.17.6",
-    "zod": "^3.25.75"
+    "nuxt": "^3.17.5",
+    "zod": "^3.25.57"
   },
   "devDependencies": {
     "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^2.2.10"
   },
   "resolutions": {
     "unimport": "4.1.1"

renovate.json

@@ -22,12 +22,6 @@
       "reka-ui",
       "vaul-vue"
     ]
-  }, {
-    "groupName": "vue-tsc",
-    "matchPackageNames": [
-      "vue-tsc",
-      "vue-component-type-helpers"
-    ]
   }, {
     "matchDepTypes": ["peerDependencies"],
     "enabled": false

src/plugins/components.ts

@@ -11,7 +11,7 @@ import { defu } from 'defu'
 /**
  * This plugin adds all the Nuxt UI components as auto-imports.
  */
-export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix: NonNullable<NuxtUIOptions['prefix']>, extraRuntimeDir?: string }, meta: UnpluginContextMeta) {
+export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix: NonNullable<NuxtUIOptions['prefix']> }, meta: UnpluginContextMeta) {
   const components = globSync('**/*.vue', { cwd: join(runtimeDir, 'components') })
   const componentNames = new Set(components.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
 
@@ -50,15 +50,13 @@ export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix:
       name: 'nuxt:ui:components',
       enforce: 'pre',
       resolveId(id, importer) {
-        if (!importer) {
-          return
-        }
-        if (!normalize(importer).includes(runtimeDir) && (!options.extraRuntimeDir || !normalize(importer).includes(options.extraRuntimeDir))) {
+        // only apply to runtime nuxt ui components
+        if (!importer || !normalize(importer).includes(runtimeDir)) {
           return
         }
 
-        // only apply to relative imports or nuxt ui runtime components
-        if (!RELATIVE_IMPORT_RE.test(id) && !id.startsWith('@nuxt/ui/components/')) {
+        // only apply to relative imports
+        if (!RELATIVE_IMPORT_RE.test(id)) {
           return
         }
 

src/plugins/nuxt-environment.ts

@@ -3,8 +3,7 @@ import { normalize } from 'pathe'
 import { resolvePathSync } from 'mlly'
 import MagicString from 'magic-string'
 
-import { runtimeDir } from '../unplugin'
-import type { NuxtUIOptions } from '../unplugin'
+import { runtimeDir, type NuxtUIOptions } from '../unplugin'
 
 /**
  * This plugin normalises Nuxt environment (#imports) and `import.meta.client` within the Nuxt UI components.

src/plugins/plugins.ts

@@ -4,8 +4,7 @@ import { genSafeVariableName } from 'knitwork'
 import MagicString from 'magic-string'
 import { resolvePathSync } from 'mlly'
 
-import { runtimeDir } from '../unplugin'
-import type { NuxtUIOptions } from '../unplugin'
+import { runtimeDir, type NuxtUIOptions } from '../unplugin'
 
 import type { UnpluginOptions } from 'unplugin'
 

src/runtime/components/Alert.vue

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

src/runtime/components/Button.vue

@@ -42,15 +42,14 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject } from 'vue'
-import type { Ref } from 'vue'
+import { type Ref, computed, ref, inject } from 'vue'
 import { defu } from 'defu'
 import { useForwardProps } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
-import { omit, mergeClasses } from '../utils'
+import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
@@ -58,7 +57,11 @@ import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 
-const props = defineProps<ButtonProps>()
+const props = withDefaults(defineProps<ButtonProps>(), {
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
+})
 const slots = defineSlots<ButtonSlots>()
 
 const appConfig = useAppConfig() as Button['AppConfig']
@@ -93,10 +96,10 @@ const ui = computed(() => tv({
     variants: {
       active: {
         true: {
-          base: mergeClasses(appConfig.ui?.button?.variants?.active?.true?.base, props.activeClass)
+          base: props.activeClass
         },
         false: {
-          base: mergeClasses(appConfig.ui?.button?.variants?.active?.false?.base, props.inactiveClass)
+          base: props.inactiveClass
         }
       }
     }

src/runtime/components/Carousel.vue

@@ -118,7 +118,7 @@ export interface CarouselEmits {
 import { computed, ref, watch, onMounted } from 'vue'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, computedAsync } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
@@ -175,45 +175,41 @@ const options = computed<EmblaOptionsType>(() => ({
   direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
 }))
 
-const plugins = ref<EmblaPluginType[]>([])
-
-async function loadPlugins() {
-  const emblaPlugins: EmblaPluginType[] = []
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins = []
 
   if (props.autoplay) {
     const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
-    emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
   }
 
   if (props.autoScroll) {
     const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
-    emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
   }
 
   if (props.autoHeight) {
     const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
-    emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
   }
 
   if (props.classNames) {
     const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
-    emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
   }
 
   if (props.fade) {
     const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
-    emblaPlugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
   }
 
   if (props.wheelGestures) {
     const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
-    emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
   }
 
-  plugins.value = emblaPlugins
-}
-
-watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true })
+  return plugins
+})
 
 const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
 
@@ -314,6 +310,7 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
+          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -324,6 +321,7 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
+          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"

src/runtime/components/CommandPalette.vue

@@ -31,11 +31,6 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   placeholder?: string
   children?: CommandPaletteItem[]
-  /**
-   * Custom view to display instead of children items.
-   * When defined, clicking this item will show the custom view.
-   */
-  view?: string
   onSelect?(e?: Event): void
   class?: any
   ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
@@ -158,7 +153,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
-} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>> & Record<string, (props: { current: any, searchTerm: string, navigateBack: () => void, close: () => void }) => any>
+} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
 
 </script>
 
@@ -213,17 +208,12 @@ const fuse = computed(() => defu({}, props.fuse, {
   matchAllWhenSearchEmpty: true
 }))
 
-const history = ref<(CommandPaletteGroup & { placeholder?: string, view?: string })[]>([])
+const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
 
 const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
 
 const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
 
-const currentView = computed(() => {
-  const current = history.value[history.value.length - 1]
-  return current?.view ? current : null
-})
-
 const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
@@ -289,33 +279,8 @@ const filteredGroups = computed(() => {
 
 const listboxRootRef = useTemplateRef('listboxRootRef')
 
-// Exposed methods for programmatic control
-function openView(viewName: string) {
-  history.value.push({
-    id: `view-${viewName}`,
-    label: viewName,
-    view: viewName,
-    items: []
-  } as any)
-
-  searchTerm.value = ''
-  listboxRootRef.value?.highlightFirstItem()
-}
-
-function closeView() {
-  if (history.value.length > 0) {
-    navigateBack()
-  }
-}
-
-defineExpose({
-  openView,
-  closeView,
-  navigateBack
-})
-
 function navigate(item: T) {
-  if (!item.children?.length && !item.view) {
+  if (!item.children?.length) {
     return
   }
 
@@ -324,8 +289,7 @@ function navigate(item: T) {
     label: item.label,
     slot: item.slot,
     placeholder: item.placeholder,
-    view: item.view,
-    items: item.children || []
+    items: item.children
   } as any)
 
   searchTerm.value = ''
@@ -352,7 +316,7 @@ function onBackspace() {
 }
 
 function onSelect(e: Event, item: T) {
-  if (item.children?.length || item.view) {
+  if (item.children?.length) {
     e.preventDefault()
 
     navigate(item)
@@ -379,6 +343,7 @@ function onSelect(e: Event, item: T) {
           <slot name="back" :ui="ui">
             <UButton
               :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              size="md"
               color="neutral"
               variant="link"
               :aria-label="t('commandPalette.back')"
@@ -394,6 +359,7 @@ function onSelect(e: Event, item: T) {
             <UButton
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
+              size="md"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
@@ -407,17 +373,7 @@ function onSelect(e: Event, item: T) {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="currentView" :class="ui.viewport({ class: props.ui?.viewport })">
-        <slot
-          :name="currentView.view"
-          :current="currentView"
-          :search-term="searchTerm"
-          :navigate-back="navigateBack"
-          :close="closeView"
-        />
-      </div>
-
-      <div v-else-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey as string) }}
@@ -461,7 +417,7 @@ function onSelect(e: Event, item: T) {
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
                       <UIcon
-                        v-if="(item.children && item.children.length > 0) || item.view"
+                        v-if="item.children && item.children.length > 0"
                         :name="trailingIcon || appConfig.ui.icons.chevronRight"
                         :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                       />

src/runtime/components/ContextMenuContent.vue

@@ -47,6 +47,7 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UKbd from './Kbd.vue'
+// eslint-disable-next-line import/no-self-import
 import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = defineProps<ContextMenuContentProps<T>>()

src/runtime/components/DropdownMenuContent.vue

@@ -53,6 +53,7 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UKbd from './Kbd.vue'
+// eslint-disable-next-line import/no-self-import
 import UDropdownMenuContent from './DropdownMenuContent.vue'
 
 const props = defineProps<DropdownMenuContentProps<T>>()

src/runtime/components/Form.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { DeepReadonly } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
@@ -63,7 +64,7 @@ export interface FormSlots {
 </script>
 
 <script lang="ts" setup generic="S extends FormSchema, T extends boolean = true">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
@@ -154,9 +155,9 @@ provide('form-errors', errors)
 const inputs = ref<{ [P in keyof I]?: { id?: string, pattern?: RegExp } }>({})
 provide(formInputsInjectionKey, inputs as any)
 
-const dirtyFields: Set<keyof I> = reactive(new Set<keyof I>())
-const touchedFields: Set<keyof I> = reactive(new Set<keyof I>())
-const blurredFields: Set<keyof I> = reactive(new Set<keyof I>())
+const dirtyFields = new Set<keyof I>()
+const touchedFields = new Set<keyof I>()
+const blurredFields = new Set<keyof I>()
 
 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   return errs.map(err => ({
@@ -301,9 +302,9 @@ defineExpose<Form<S>>({
   loading,
   dirty: computed(() => !!dirtyFields.size),
 
-  dirtyFields: readonly(dirtyFields),
-  blurredFields: readonly(blurredFields),
-  touchedFields: readonly(touchedFields)
+  dirtyFields: readonly(dirtyFields) as DeepReadonly<Set<keyof I>>,
+  blurredFields: readonly(blurredFields) as DeepReadonly<Set<keyof I>>,
+  touchedFields: readonly(touchedFields) as DeepReadonly<Set<keyof I>>
 })
 </script>
 

src/runtime/components/FormField.vue

@@ -2,6 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form-field'
 import type { ComponentConfig } from '../types/utils'
+import { createReusableTemplate } from '@vueuse/core'
 
 type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>
 
@@ -20,6 +21,8 @@ export interface FormFieldProps {
   help?: string
   error?: string | boolean
   hint?: string
+
+  variant?: 'default' | 'inline'
   /**
    * @defaultValue 'md'
    */
@@ -47,8 +50,7 @@ export interface FormFieldSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, provide, useId } from 'vue'
-import type { Ref } from 'vue'
+import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Primitive, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
@@ -62,6 +64,7 @@ const appConfig = useAppConfig() as FormField['AppConfig']
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
   size: props.size,
+  variant: props.variant,
   required: props.required
 }))
 
@@ -88,9 +91,28 @@ provide(formFieldInjectionKey, computed(() => ({
   help: props.help,
   ariaId
 }) as FormFieldInjectedOptions<FormFieldProps>))
+
+const [DefineHintTemplate, ReuseHintTemplate] = createReusableTemplate()
+const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemplate()
 </script>
 
 <template>
+  <DefineHintTemplate>
+    <span v-if="(hint || !!slots.hint)" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+      <slot name="hint" :hint="hint">
+        {{ hint }}
+      </slot>
+    </span>
+  </DefineHintTemplate>
+
+  <DefineDescriptionTemplate>
+    <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+      <slot name="description" :description="description">
+        {{ description }}
+      </slot>
+    </p>
+  </DefineDescriptionTemplate>
+
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
@@ -99,20 +121,12 @@ provide(formFieldInjectionKey, computed(() => ({
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
-          <slot name="hint" :hint="hint">
-            {{ hint }}
-          </slot>
-        </span>
+        <ReuseHintTemplate v-if="variant !== 'inline'" />
       </div>
-
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
     </div>
 
+    <ReuseDescriptionTemplate v-if="variant !== 'inline'" />
+
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 

src/runtime/components/Input.vue

@@ -8,7 +8,7 @@ import type { AcceptableValue, ComponentConfig } from '../types/utils'
 
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>
 
-export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
+export interface InputProps extends UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -38,8 +38,6 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
   disabled?: boolean
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  modelValue?: T
-  defaultValue?: T
   modelModifiers?: {
     string?: boolean
     number?: boolean
@@ -67,7 +65,6 @@ export interface InputSlots {
 <script setup lang="ts" generic="T extends AcceptableValue">
 import { ref, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -79,7 +76,7 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputProps<T>>(), {
+const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
   autocomplete: 'off',
   autofocusDelay: 0
@@ -87,12 +84,13 @@ const props = withDefaults(defineProps<InputProps<T>>(), {
 const emits = defineEmits<InputEmits<T>>()
 const slots = defineSlots<InputSlots>()
 
-const modelValue = useVModel<InputProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
+// eslint-disable-next-line vue/no-dupe-keys
+const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Input['AppConfig']
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
-const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps<T>>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
@@ -113,15 +111,15 @@ const inputRef = ref<HTMLInputElement | null>(null)
 
 // Custom function to handle the v-model properties
 function updateInput(value: string | null) {
-  if (props.modelModifiers?.trim) {
+  if (modelModifiers.trim) {
     value = value?.trim() ?? null
   }
 
-  if (props.modelModifiers?.number || props.type === 'number') {
+  if (modelModifiers.number || props.type === 'number') {
     value = looseToNumber(value)
   }
 
-  if (props.modelModifiers?.nullify) {
+  if (modelModifiers.nullify) {
     value ||= null
   }
 
@@ -130,7 +128,7 @@ function updateInput(value: string | null) {
 }
 
 function onInput(event: Event) {
-  if (!props.modelModifiers?.lazy) {
+  if (!modelModifiers.lazy) {
     updateInput((event.target as HTMLInputElement).value)
   }
 }
@@ -138,12 +136,12 @@ function onInput(event: Event) {
 function onChange(event: Event) {
   const value = (event.target as HTMLInputElement).value
 
-  if (props.modelModifiers?.lazy) {
+  if (modelModifiers.lazy) {
     updateInput(value)
   }
 
   // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
-  if (props.modelModifiers?.trim) {
+  if (modelModifiers.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 

src/runtime/components/InputTags.vue

@@ -18,8 +18,6 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
   as?: any
   /** The placeholder text when the input is empty. */
   placeholder?: string
-  /** The maximum number of character allowed. */
-  maxLength?: number
   /**
    * @defaultValue 'primary'
    */
@@ -184,7 +182,6 @@ defineExpose({
       ref="inputRef"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
-      :max-length="maxLength"
       :class="ui.input({ class: props.ui?.input })"
     />
 

src/runtime/components/Link.vue

@@ -88,12 +88,11 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
-import { defu } from 'defu'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute, useAppConfig } from '#imports'
-import { mergeClasses } from '../utils'
 import { tv } from '../utils/tv'
 import { isPartiallyEqual } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
@@ -104,7 +103,9 @@ const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
   ariaCurrentValue: 'page',
-  active: undefined
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
 })
 defineSlots<LinkSlots>()
 
@@ -118,8 +119,8 @@ const ui = computed(() => tv({
   ...defu({
     variants: {
       active: {
-        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
-        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
+        true: props.activeClass,
+        false: props.inactiveClass
       }
     }
   }, appConfig.ui?.link || {})

src/runtime/components/Modal.vue

@@ -65,7 +65,6 @@ export interface ModalSlots {
   header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
-  actions(props?: {}): any
   close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
   body(props: { close: () => void }): any
   footer(props: { close: () => void }): any
@@ -167,13 +166,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                 </DialogDescription>
               </div>
 
-              <slot name="actions" />
-
               <DialogClose v-if="props.close || !!slots.close" as-child>
                 <slot name="close" :close="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
+                    size="md"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"

src/runtime/components/NavigationMenu.vue

@@ -236,13 +236,20 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     : []
 )
 
-function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
-  const indexes = list.reduce((acc: string[], item, index) => {
-    if (item.defaultOpen || item.open) {
-      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
-    }
-    return acc
-  }, [])
+function getAccordionDefaultValue(list: NavigationMenuItem[]) {
+  function findItemsWithDefaultOpen(items: NavigationMenuItem[], level = 0): string[] {
+    return items.reduce((acc: string[], item, index) => {
+      if (item.defaultOpen || item.open) {
+        acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
+      }
+      if (item.children?.length) {
+        acc.push(...findItemsWithDefaultOpen(item.children, level + 1))
+      }
+      return acc
+    }, [])
+  }
+
+  const indexes = findItemsWithDefaultOpen(list)
 
   return props.type === 'single' ? indexes[0] : indexes
 }
@@ -371,14 +378,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
       </ULink>
 
       <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <AccordionRoot
-          v-bind="({
-            ...accordionProps,
-            defaultValue: getAccordionDefaultValue(item.children, level + 1)
-          } as AccordionRootProps)"
-          as="ul"
-          :class="ui.childList({ class: props.ui?.childList })"
-        >
+        <ul :class="ui.childList({ class: props.ui?.childList })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
             :key="childIndex"
@@ -387,7 +387,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
             :level="level + 1"
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
-        </AccordionRoot>
+        </ul>
       </AccordionContent>
     </component>
   </DefineItemTemplate>

src/runtime/components/OverlayProvider.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useOverlay } from '../composables/useOverlay'
-import type { Overlay } from '../composables/useOverlay'
+import { useOverlay, type Overlay } from '../composables/useOverlay'
 
 const { overlays, unmount, close } = useOverlay()
 

src/runtime/components/Pagination.vue

@@ -111,6 +111,7 @@ import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<PaginationProps>(), {
+  size: 'md',
   color: 'neutral',
   variant: 'outline',
   activeColor: 'primary',

src/runtime/components/Popover.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps, HoverCardTriggerProps } from 'reka-ui'
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/popover'
 import type { EmitsToProps, ComponentConfig } from '../types/utils'
@@ -27,12 +27,6 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
-  /**
-   * The reference (or anchor) element that is being referred to for positioning.
-   *
-   * If not provided will use the current component as anchor.
-   */
-  reference?: HoverCardTriggerProps['reference']
   /**
    * When `false`, the popover will not close when clicking outside or pressing escape.
    * @defaultValue true
@@ -106,7 +100,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 
 <template>
   <Component.Root v-slot="{ open }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 

src/runtime/components/SelectMenu.vue

@@ -432,7 +432,7 @@ defineExpose({
           <slot name="content-top" />
 
           <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <UInput autofocus autocomplete="off" :size="size" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
+            <UInput autofocus autocomplete="off" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
           </ComboboxInput>
 
           <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">

src/runtime/components/Slideover.vue

@@ -65,7 +65,6 @@ export interface SlideoverSlots {
   header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
-  actions(props?: {}): any
   close(props: { close: () => void, ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
   body(props: { close: () => void }): any
   footer(props: { close: () => void }): any
@@ -175,13 +174,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
                 </DialogDescription>
               </div>
 
-              <slot name="actions" />
-
               <DialogClose v-if="props.close || !!slots.close" as-child>
                 <slot name="close" :close="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
+                    size="md"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('slideover.close')"

src/runtime/components/Table.vue

@@ -83,10 +83,10 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
    */
   empty?: string
   /**
-   * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
+   * Whether the table should have a sticky header.
    * @defaultValue false
    */
-  sticky?: boolean | 'header' | 'footer'
+  sticky?: boolean
   /** Whether the table should be in loading state. */
   loading?: boolean
   /**
@@ -165,24 +165,19 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
    */
   facetedOptions?: FacetedOptions<T>
   onSelect?: (row: TableRow<T>, e?: Event) => void
-  onHover?: (e: Event, row: TableRow<T> | null) => void
-  onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>
   class?: any
   ui?: Table['slots']
 }
 
 type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
-type DynamicFooterSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-footer`, (props: HeaderContext<T, unknown>) => any>
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T extends TableData = TableData> = {
-  'expanded': (props: { row: Row<T> }) => any
-  'empty': (props?: {}) => any
-  'loading': (props?: {}) => any
-  'caption': (props?: {}) => any
-  'body-top': (props?: {}) => any
-  'body-bottom': (props?: {}) => any
-} & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>
+  expanded: (props: { row: Row<T> }) => any
+  empty: (props?: {}) => any
+  loading: (props?: {}) => any
+  caption: (props?: {}) => any
+} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
 
@@ -217,22 +212,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.table || {})
   loadingAnimation: props.loadingAnimation
 }))
 
-const hasFooter = computed(() => {
-  function hasFooterRecursive(columns: TableColumn<T>[]): boolean {
-    for (const column of columns) {
-      if ('footer' in column) {
-        return true
-      }
-      if ('columns' in column && hasFooterRecursive(column.columns as TableColumn<T>[])) {
-        return true
-      }
-    }
-    return false
-  }
-
-  return hasFooterRecursive(columns.value)
-})
-
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
@@ -252,9 +231,7 @@ const tableRef = ref<HTMLTableElement | null>(null)
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
   data,
-  get columns() {
-    return columns.value
-  },
+  columns: columns.value,
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...(props.globalFilterOptions || {}),
@@ -332,7 +309,7 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-function onRowSelect(e: Event, row: TableRow<T>) {
+function handleRowSelect(row: TableRow<T>, e: Event) {
   if (!props.onSelect) {
     return
   }
@@ -345,30 +322,9 @@ function onRowSelect(e: Event, row: TableRow<T>) {
   e.preventDefault()
   e.stopPropagation()
 
-  // FIXME: `e` should be the first argument for consistency
   props.onSelect(row, e)
 }
 
-function onRowHover(e: Event, row: TableRow<T> | null) {
-  if (!props.onHover) {
-    return
-  }
-
-  props.onHover(e, row)
-}
-
-function onRowContextmenu(e: Event, row: TableRow<T>) {
-  if (!props.onContextmenu) {
-    return
-  }
-
-  if (Array.isArray(props.onContextmenu)) {
-    props.onContextmenu.forEach(fn => fn(e, row))
-  } else {
-    props.onContextmenu(e, row)
-  }
-}
-
 watch(
   () => props.data, () => {
     data.value = props.data ? [...props.data] : []
@@ -396,7 +352,6 @@ defineExpose({
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
             :class="ui.th({
               class: [
@@ -411,18 +366,14 @@ defineExpose({
             </slot>
           </th>
         </tr>
-
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
-        <slot name="body-top" />
-
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
             <tr
               :data-selected="row.getIsSelected()"
-              :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+              :data-selectable="!!props.onSelect"
               :data-expanded="row.getIsExpanded()"
               :role="props.onSelect ? 'button' : undefined"
               :tabindex="props.onSelect ? 0 : undefined"
@@ -432,10 +383,7 @@ defineExpose({
                   typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
                 ]
               })"
-              @click="onRowSelect($event, row)"
-              @pointerenter="onRowHover($event, row)"
-              @pointerleave="onRowHover($event, null)"
-              @contextmenu="onRowContextmenu($event, row)"
+              @click="handleRowSelect(row, $event)"
             >
               <td
                 v-for="cell in row.getVisibleCells()"
@@ -475,33 +423,7 @@ defineExpose({
             </slot>
           </td>
         </tr>
-
-        <slot name="body-bottom" />
       </tbody>
-
-      <tfoot v-if="hasFooter" :class="ui.tfoot({ class: [props.ui?.tfoot] })">
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
-
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
-          <th
-            v-for="header in footerGroup.headers"
-            :key="header.id"
-            :data-pinned="header.column.getIsPinned()"
-            :colspan="header.colSpan > 1 ? header.colSpan : undefined"
-            :class="ui.th({
-              class: [
-                props.ui?.th,
-                typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
-              ],
-              pinned: !!header.column.getIsPinned()
-            })"
-          >
-            <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
-              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />
-            </slot>
-          </th>
-        </tr>
-      </tfoot>
     </table>
   </Primitive>
 </template>

src/runtime/components/Textarea.vue

@@ -9,7 +9,7 @@ type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>
 
 type TextareaValue = string | number | null
 
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
+export interface TextareaProps extends UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -41,11 +41,8 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
   maxrows?: number
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  modelValue?: T
-  defaultValue?: T
   modelModifiers?: {
     string?: boolean
-    number?: boolean
     trim?: boolean
     lazy?: boolean
     nullify?: boolean
@@ -70,7 +67,6 @@ export interface TextareaSlots {
 <script setup lang="ts" generic="T extends TextareaValue">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -81,7 +77,7 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<TextareaProps<T>>(), {
+const props = withDefaults(defineProps<TextareaProps>(), {
   rows: 3,
   maxrows: 0,
   autofocusDelay: 0,
@@ -90,11 +86,12 @@ const props = withDefaults(defineProps<TextareaProps<T>>(), {
 const emits = defineEmits<TextareaEmits<T>>()
 const slots = defineSlots<TextareaSlots>()
 
-const modelValue = useVModel<TextareaProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
+// eslint-disable-next-line vue/no-dupe-keys
+const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Textarea['AppConfig']
 
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps<T>>(props, { deferInputValidation: true })
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })({
@@ -112,15 +109,15 @@ const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
 // Custom function to handle the v-model properties
 function updateInput(value: string | null) {
-  if (props.modelModifiers?.trim) {
+  if (modelModifiers.trim) {
     value = value?.trim() ?? null
   }
 
-  if (props.modelModifiers?.number) {
+  if (modelModifiers.number) {
     value = looseToNumber(value)
   }
 
-  if (props.modelModifiers?.nullify) {
+  if (modelModifiers.nullify) {
     value ||= null
   }
 
@@ -131,7 +128,7 @@ function updateInput(value: string | null) {
 function onInput(event: Event) {
   autoResize()
 
-  if (!props.modelModifiers?.lazy) {
+  if (!modelModifiers.lazy) {
     updateInput((event.target as HTMLInputElement).value)
   }
 }
@@ -139,12 +136,12 @@ function onInput(event: Event) {
 function onChange(event: Event) {
   const value = (event.target as HTMLInputElement).value
 
-  if (props.modelModifiers?.lazy) {
+  if (modelModifiers.lazy) {
     updateInput(value)
   }
 
   // Update trimmed textarea so that it has same behavior as native textarea https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
-  if (props.modelModifiers?.trim) {
+  if (modelModifiers.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 

src/runtime/components/Toast.vue

@@ -173,6 +173,7 @@ defineExpose({
           <UButton
             v-if="close"
             :icon="closeIcon || appConfig.ui.icons.close"
+            size="md"
             color="neutral"
             variant="link"
             :aria-label="t('toast.close')"

src/runtime/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps, TooltipTriggerProps } from 'reka-ui'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tooltip'
 import type { KbdProps } from '../types'
@@ -27,12 +27,6 @@ export interface TooltipProps extends TooltipRootProps {
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
-  /**
-   * The reference (or anchor) element that is being referred to for positioning.
-   *
-   * If not provided will use the current component as anchor.
-   */
-  reference?: TooltipTriggerProps['reference']
   class?: any
   ui?: Tooltip['slots']
 }
@@ -76,7 +70,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {
 
 <template>
   <TooltipRoot v-slot="{ open }" v-bind="rootProps">
-    <TooltipTrigger v-if="!!slots.default || !!reference" v-bind="$attrs" as-child :reference="reference" :class="props.class">
+    <TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 

src/runtime/composables/defineShortcuts.ts

@@ -36,8 +36,6 @@ interface Shortcut {
 
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
-// keyboard keys which can be combined with Shift modifier (in addition to alphabet keys)
-const shiftableKeys = ['arrowleft', 'arrowright', 'arrowup', 'arrowright', 'tab', 'escape', 'enter', 'backspace']
 
 export function extractShortcuts(items: any[] | any[][]) {
   const shortcuts: Record<string, Handler> = {}
@@ -78,8 +76,7 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
       return
     }
 
-    const alphabetKey = /^[a-z]{1}$/i.test(e.key)
-    const shiftableKey = shiftableKeys.includes(e.key.toLowerCase())
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
 
     let chainedKey
     chainedInputs.value.push(e.key)
@@ -112,9 +109,9 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
       if (e.ctrlKey !== shortcut.ctrlKey) {
         continue
       }
-      // shift modifier is only checked in combination with alphabet keys and some extra keys
-      // (shift with special characters would change the key)
-      if ((alphabetKey || shiftableKey) && e.shiftKey !== shortcut.shiftKey) {
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
         continue
       }
       // alt modifier changes the combined key anyways

src/runtime/composables/useAvatarGroup.ts

@@ -1,5 +1,4 @@
-import { inject, provide, computed } from 'vue'
-import type { ComputedRef, InjectionKey } from 'vue'
+import { inject, provide, computed, type ComputedRef, type InjectionKey } from 'vue'
 import type { AvatarGroupProps } from '../types'
 
 export const avatarGroupInjectionKey: InjectionKey<ComputedRef<{ size: AvatarGroupProps['size'] }>> = Symbol('nuxt-ui.avatar-group')

src/runtime/composables/useComponentIcons.ts

@@ -1,5 +1,4 @@
-import { computed, toValue } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useAppConfig } from '#imports'
 import type { AvatarProps } from '../types'
 

src/runtime/composables/useFormField.ts

@@ -1,7 +1,5 @@
-import { inject, computed, provide } from 'vue'
-import type { InjectionKey, Ref, ComputedRef } from 'vue'
-import { useDebounceFn } from '@vueuse/core'
-import type { UseEventBusReturn } from '@vueuse/core'
+import { inject, computed, type InjectionKey, type Ref, type ComputedRef, provide } from 'vue'
+import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormFieldProps } from '../types'
 import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
 import type { GetObjectField } from '../types/utils'

src/runtime/composables/useOverlay.ts

@@ -3,34 +3,9 @@ import { reactive, markRaw, shallowReactive } from 'vue'
 import { createSharedComposable } from '@vueuse/core'
 import type { ComponentProps, ComponentEmit } from 'vue-component-type-helpers'
 
-/**
- * This is a workaround for a design limitation in TypeScript.
- *
- * Conditional types only match the last function overload, not a union of all possible
- * parameter types. This workaround forces TypeScript to properly extract the 'close'
- * event argument type from component emits with multiple event signatures.
- *
- * @see https://github.com/microsoft/TypeScript/issues/32164
- */
-type CloseEventArgType<T> = T extends {
-  (event: 'close', arg_0: infer Arg, ...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-  (...args: any[]): void
-} ? Arg : never
+// Extracts the first argument of the close event
+type CloseEventArgType<T> = T extends (event: 'close', args_0: infer R) => void ? R : never
+
 export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
   defaultOpen?: boolean
   props?: OverlayAttrs

src/runtime/composables/usePortal.ts

@@ -1,5 +1,4 @@
-import { inject, provide, computed } from 'vue'
-import type { Ref, InjectionKey } from 'vue'
+import { inject, provide, computed, type Ref, type InjectionKey } from 'vue'
 
 export const portalTargetInjectionKey: InjectionKey<Ref<string | HTMLElement>> = Symbol('nuxt-ui.portal-target')
 

src/runtime/types/form.ts

@@ -16,16 +16,16 @@ export interface Form<S extends FormSchema> {
   dirty: ComputedRef<boolean>
   loading: Ref<boolean>
 
-  dirtyFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>
-  touchedFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>
-  blurredFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>
+  dirtyFields: DeepReadonly<Set<keyof FormData<S, false>>>
+  touchedFields: DeepReadonly<Set<keyof FormData<S, false>>>
+  blurredFields: DeepReadonly<Set<keyof FormData<S, false>>>
 }
 
-export type FormSchema<I extends object = object, O extends object = I>
-  = | YupObjectSchema<I>
-    | JoiSchema<I>
-    | SuperstructSchema<any, any>
-    | StandardSchemaV1<I, O>
+export type FormSchema<I extends object = object, O extends object = I> =
+  | YupObjectSchema<I>
+  | JoiSchema<I>
+  | SuperstructSchema<any, any>
+  | StandardSchemaV1<I, O>
 
 // Define a utility type to infer the input type based on the schema type
 export type InferInput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema>
@@ -83,10 +83,10 @@ export type FormInputEvent<T extends object> = {
   eager?: boolean
 }
 
-export type FormEvent<T extends object>
-  = | FormInputEvent<T>
-    | FormChildAttachEvent
-    | FormChildDetachEvent
+export type FormEvent<T extends object> =
+  | FormInputEvent<T>
+  | FormChildAttachEvent
+  | FormChildDetachEvent
 
 export interface FormInjectedOptions {
   disabled?: boolean

src/runtime/types/tv.ts

@@ -30,8 +30,8 @@ type ComponentSlots<T extends { slots?: Record<string, any> }> = Id<{
   [K in keyof T['slots']]?: ClassValue
 }>
 
-type GetComponentAppConfig<A, U extends string, K extends string>
-  = A extends Record<U, Record<K, any>> ? A[U][K] : {}
+type GetComponentAppConfig<A, U extends string, K extends string> =
+  A extends Record<U, Record<K, any>> ? A[U][K] : {}
 
 type ComponentAppConfig<
   T,

src/runtime/types/utils.ts

@@ -44,8 +44,8 @@ export type MergeTypes<T extends object> = {
 
 export type GetItemKeys<I> = keyof Extract<NestedItem<I>, object>
 
-export type GetItemValue<I, VK extends GetItemKeys<I> | undefined, T extends NestedItem<I> = NestedItem<I>>
-  = T extends object
+export type GetItemValue<I, VK extends GetItemKeys<I> | undefined, T extends NestedItem<I> = NestedItem<I>> =
+  T extends object
     ? VK extends undefined
       ? T
       : VK extends keyof T
@@ -70,10 +70,10 @@ export type GetModelValueEmits<
   'update:modelValue': [payload: GetModelValue<T, VK, M>]
 }
 
-export type StringOrVNode
-  = | string
-    | VNode
-    | (() => VNode)
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
 
 export type EmitsToProps<T> = {
   [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args]

src/runtime/utils/index.ts

@@ -85,14 +85,3 @@ export function compare<T>(value?: T, currentValue?: T, comparator?: string | ((
 export function isArrayOfArray<A>(item: A[] | A[][]): item is A[][] {
   return Array.isArray(item[0])
 }
-
-export function mergeClasses(appConfigClass?: string | string[], propClass?: string) {
-  if (!appConfigClass && !propClass) {
-    return ''
-  }
-
-  return [
-    ...(Array.isArray(appConfigClass) ? appConfigClass : [appConfigClass]),
-    propClass
-  ].filter(Boolean)
-}

src/runtime/utils/tv.ts

@@ -1,5 +1,4 @@
-import { createTV } from 'tailwind-variants'
-import type { defaultConfig } from 'tailwind-variants'
+import { createTV, type defaultConfig } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import appConfig from '#build/app.config'
 

src/templates.ts

@@ -158,13 +158,13 @@ import colors from 'tailwindcss/colors'
 
 const icons = ${JSON.stringify(uiConfig.icons)};
 
-type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
+type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | (string & {})
 type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
 
 type AppConfigUI = {
   colors?: {
     ${options.theme?.colors?.map(color => `'${color}'?: Color`).join('\n\t\t')}
-    neutral?: NeutralColor | (string & {})
+    neutral?: NeutralColor
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig

src/theme/button.ts

@@ -86,51 +86,51 @@ export default (options: Required<ModuleOptions>) => ({
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'solid',
-    class: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+    class: `text-inverted bg-${color} hover:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
   })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'outline',
-    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'soft',
-    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
+    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
   })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'subtle',
-    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'ghost',
-    class: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-${color} hover:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'link',
-    class: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    class: `text-${color} hover:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
   })), {
     color: 'neutral',
     variant: 'solid',
-    class: 'text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
+    class: 'text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
   }, {
     color: 'neutral',
     variant: 'outline',
-    class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
+    class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
   }, {
     color: 'neutral',
     variant: 'soft',
-    class: 'text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated'
+    class: 'text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated'
   }, {
     color: 'neutral',
     variant: 'subtle',
-    class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
+    class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
   }, {
     color: 'neutral',
     variant: 'ghost',
-    class: 'text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'
+    class: 'text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'
   }, {
     color: 'neutral',
     variant: 'link',
-    class: 'text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted'
+    class: 'text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted'
   }, {
     size: 'xs',
     square: true,

src/theme/card.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
-    root: 'rounded-lg overflow-hidden',
+    root: 'rounded-lg',
     header: 'p-4 sm:px-6',
     body: 'p-4 sm:p-6',
     footer: 'p-4 sm:px-6'

src/theme/drawer.ts

@@ -33,7 +33,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     inset: {
       true: {
-        content: 'rounded-lg after:hidden overflow-hidden'
+        content: 'rounded-lg after:hidden'
       }
     }
   },

src/theme/form-field.ts

@@ -18,6 +18,14 @@ export default {
       lg: { root: 'text-sm' },
       xl: { root: 'text-base' }
     },
+
+    variant: {
+      inline: {
+        root: 'inline-flex',
+        label: 'mt-1.5 mx-2',
+        container: 'mt-0'
+      }
+    },
     required: {
       true: {
         label: `after:content-['*'] after:ms-0.5 after:text-error`

src/theme/input-menu.ts

@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => {
       content: 'max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',
-      empty: 'text-center text-muted',
+      empty: 'py-2 text-center text-sm text-muted',
       label: 'font-semibold text-highlighted',
       separator: '-mx-1 my-1 h-px bg-border',
       item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
@@ -48,8 +48,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'sm',
           itemTrailingIcon: 'size-4',
           tagsItem: 'text-[10px]/3',
-          tagsItemDeleteIcon: 'size-3',
-          empty: 'p-1 text-xs'
+          tagsItemDeleteIcon: 'size-3'
         },
         sm: {
           label: 'p-1.5 text-[10px]/3 gap-1.5',
@@ -60,8 +59,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'sm',
           itemTrailingIcon: 'size-4',
           tagsItem: 'text-[10px]/3',
-          tagsItemDeleteIcon: 'size-3',
-          empty: 'p-1.5 text-xs'
+          tagsItemDeleteIcon: 'size-3'
         },
         md: {
           label: 'p-1.5 text-xs gap-1.5',
@@ -72,8 +70,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'md',
           itemTrailingIcon: 'size-5',
           tagsItem: 'text-xs',
-          tagsItemDeleteIcon: 'size-3.5',
-          empty: 'p-1.5 text-sm'
+          tagsItemDeleteIcon: 'size-3.5'
         },
         lg: {
           label: 'p-2 text-xs gap-2',
@@ -84,8 +81,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'md',
           itemTrailingIcon: 'size-5',
           tagsItem: 'text-xs',
-          tagsItemDeleteIcon: 'size-3.5',
-          empty: 'p-2 text-sm'
+          tagsItemDeleteIcon: 'size-3.5'
         },
         xl: {
           label: 'p-2 text-sm gap-2',
@@ -96,8 +92,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'lg',
           itemTrailingIcon: 'size-6',
           tagsItem: 'text-sm',
-          tagsItemDeleteIcon: 'size-4',
-          empty: 'p-2 text-base'
+          tagsItemDeleteIcon: 'size-4'
         }
       }
     },

src/theme/modal.ts

@@ -22,7 +22,7 @@ export default {
         content: 'inset-0'
       },
       false: {
-        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden'
+        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default'
       }
     }
   }

src/theme/select.ts

@@ -14,7 +14,7 @@ export default (options: Required<ModuleOptions>) => {
       content: 'max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',
-      empty: 'text-center text-muted',
+      empty: 'py-2 text-center text-sm text-muted',
       label: 'font-semibold text-highlighted',
       separator: '-mx-1 my-1 h-px bg-border',
       item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
@@ -37,8 +37,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '3xs',
           itemLeadingChip: 'size-4',
           itemLeadingChipSize: 'sm',
-          itemTrailingIcon: 'size-4',
-          empty: 'p-1 text-xs'
+          itemTrailingIcon: 'size-4'
         },
         sm: {
           label: 'p-1.5 text-[10px]/3 gap-1.5',
@@ -47,8 +46,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '3xs',
           itemLeadingChip: 'size-4',
           itemLeadingChipSize: 'sm',
-          itemTrailingIcon: 'size-4',
-          empty: 'p-1.5 text-xs'
+          itemTrailingIcon: 'size-4'
         },
         md: {
           label: 'p-1.5 text-xs gap-1.5',
@@ -57,8 +55,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '2xs',
           itemLeadingChip: 'size-5',
           itemLeadingChipSize: 'md',
-          itemTrailingIcon: 'size-5',
-          empty: 'p-1.5 text-sm'
+          itemTrailingIcon: 'size-5'
         },
         lg: {
           label: 'p-2 text-xs gap-2',
@@ -67,8 +64,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '2xs',
           itemLeadingChip: 'size-5',
           itemLeadingChipSize: 'md',
-          itemTrailingIcon: 'size-5',
-          empty: 'p-2 text-sm'
+          itemTrailingIcon: 'size-5'
         },
         xl: {
           label: 'p-2 text-sm gap-2',
@@ -77,8 +73,7 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: 'xs',
           itemLeadingChip: 'size-6',
           itemLeadingChipSize: 'lg',
-          itemTrailingIcon: 'size-6',
-          empty: 'p-2 text-base'
+          itemTrailingIcon: 'size-6'
         }
       }
     }

src/theme/table.ts

@@ -5,13 +5,11 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative overflow-auto',
     base: 'min-w-full overflow-clip',
     caption: 'sr-only',
-    thead: 'relative',
+    thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)',
     tbody: 'divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary',
-    tfoot: 'relative',
     tr: 'data-[selected=true]:bg-elevated/50',
     th: 'px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    separator: 'absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)',
     empty: 'py-6 text-center text-sm text-muted',
     loading: 'py-6 text-center'
   },
@@ -24,19 +22,12 @@ export default (options: Required<ModuleOptions>) => ({
     },
     sticky: {
       true: {
-        thead: 'sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur',
-        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur'
-      },
-      header: {
         thead: 'sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur'
-      },
-      footer: {
-        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur'
       }
     },
     loading: {
       true: {
-        thead: 'after:absolute after:z-[1] after:h-px'
+        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'
       }
     },
     loadingAnimation: {

src/theme/toaster.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
     viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none',
-    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
+    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
   },
   variants: {
     position: {

test/components/Accordion.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import Accordion from '../../src/runtime/components/Accordion.vue'
-import type { AccordionProps, AccordionSlots } from '../../src/runtime/components/Accordion.vue'
+import Accordion, { type AccordionProps, type AccordionSlots } from '../../src/runtime/components/Accordion.vue'
 import ComponentRender from '../component-render'
 
 describe('Accordion', () => {

test/components/Alert.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import Alert from '../../src/runtime/components/Alert.vue'
-import type { AlertProps, AlertSlots } from '../../src/runtime/components/Alert.vue'
+import Alert, { type AlertProps, type AlertSlots } from '../../src/runtime/components/Alert.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/alert'
 

test/components/Avatar.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import Avatar from '../../src/runtime/components/Avatar.vue'
-import type { AvatarProps, AvatarSlots } from '../../src/runtime/components/Avatar.vue'
+import Avatar, { type AvatarProps, type AvatarSlots } from '../../src/runtime/components/Avatar.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/avatar'
 

test/components/AvatarGroup.spec.ts

@@ -1,8 +1,7 @@
 import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import Avatar from '../../src/runtime/components/Avatar.vue'
-import AvatarGroup from '../../src/runtime/components/AvatarGroup.vue'
-import type { AvatarGroupProps, AvatarGroupSlots } from '../../src/runtime/components/AvatarGroup.vue'
+import AvatarGroup, { type AvatarGroupProps, type AvatarGroupSlots } from '../../src/runtime/components/AvatarGroup.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/avatar-group'