Merge branch 'v3' into pr/1945

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.github/workflows/stale.yml

@@ -33,5 +33,5 @@ jobs:
             Thank you for your understanding and support!
 
             — Nuxt UI Team
-          exempt-issue-labels: 'feature,announcement'
-          operations-per-run: 300
+          exempt-issue-labels: 'feature,announcement,release,reka-ui,upstream'
+          operations-per-run: 300

.nuxtrc

@@ -0,0 +1 @@
+experimental.normalizeComponentNames=false

cli/templates.mjs

@@ -35,7 +35,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 ${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props {
   /**
@@ -80,7 +80,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 ${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any

docs/app/app.vue

@@ -53,7 +53,7 @@ provide('navigation', mappedNavigation)
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
-      <!-- <Banner /> -->
+      <Banner />
 
       <Header :links="links" />
     </template>

docs/app/components/Banner.vue

@@ -1,15 +1,19 @@
 <template>
   <UBanner
-    id="ui3-launch"
-    title="Nuxt UI v3 is officially released!"
-    icon="i-lucide-rocket"
-    :actions="[
-      {
-        label: 'Discover Nuxt UI Pro',
-        to: '/pro/pricing',
-        trailingIcon: 'i-lucide-arrow-right'
-      }
-    ]"
+    id="nuxtlabs-join-vercel"
+    title="NuxtLabs is joining Vercel"
+    icon="i-simple-icons-vercel"
+    to="https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel"
+    target="_blank"
     close
+    :actions="[{
+      label: 'Read the announcement',
+      color: 'neutral',
+      variant: 'outline',
+      trailingIcon: 'i-lucide-arrow-right',
+      to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel',
+      target: '_blank',
+      class: 'ring-0'
+    }]"
   />
 </template>

docs/app/components/content/ComponentSlots.vue

@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
           </ProseCode>
         </ProseTd>
         <ProseTd>
-          <HighlightInlineType v-if="slot.type" :type="slot.type" />
+          <HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
 
           <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
         </ProseTd>

docs/app/components/content/examples/carousel/CarouselOrientationExample.vue

@@ -14,8 +14,8 @@ const items = [
     v-slot="{ item }"
     orientation="vertical"
     :items="items"
-    class="w-full max-w-xs mx-auto"
     :ui="{ container: 'h-[336px]' }"
+    class="w-full max-w-xs mx-auto"
   >
     <img :src="item" width="320" height="320" class="rounded-lg">
   </UCarousel>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const groups = [
+  {
+    id: 'actions',
+    items: [
+      {
+        label: 'Add new file',
+        suffix: 'Create a new file in the current directory',
+        icon: 'i-lucide-file-plus',
+        kbds: ['meta', 'N']
+      },
+      {
+        label: 'Add new folder',
+        suffix: 'Create a new folder in the current directory',
+        icon: 'i-lucide-folder-plus',
+        kbds: ['meta', 'F']
+      },
+      {
+        label: 'Search files',
+        suffix: 'Search across all files in the project',
+        icon: 'i-lucide-search',
+        kbds: ['meta', 'P']
+      },
+      {
+        label: 'Settings',
+        suffix: 'Open application settings',
+        icon: 'i-lucide-settings',
+        kbds: ['meta', ',']
+      }
+    ]
+  },
+  {
+    id: 'recent',
+    label: 'Recent',
+    items: [
+      {
+        label: 'project.vue',
+        suffix: 'components/',
+        icon: 'i-vscode-icons-file-type-vue'
+      },
+      {
+        label: 'readme.md',
+        suffix: 'docs/',
+        icon: 'i-vscode-icons-file-type-markdown'
+      },
+      {
+        label: 'package.json',
+        suffix: 'root/',
+        icon: 'i-vscode-icons-file-type-node'
+      }
+    ]
+  }
+]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" class="flex-1 h-80">
+    <template #footer>
+      <div class="flex items-center justify-between gap-2">
+        <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+        <div class="flex items-center gap-1">
+          <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
+            <template #trailing>
+              <UKbd value="enter" />
+            </template>
+          </UButton>
+          <USeparator orientation="vertical" class="h-4" />
+          <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
+            <template #trailing>
+              <UKbd value="meta" />
+              <UKbd value="k" />
+            </template>
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UCommandPalette>
+</template>

docs/app/components/content/examples/drawer/DrawerNestedExample.vue

@@ -0,0 +1,15 @@
+<template>
+  <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+    <template #footer>
+      <UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+        <UButton color="neutral" variant="outline" label="Open nested" />
+
+        <template #content>
+          <Placeholder class="flex-1 m-4" />
+        </template>
+      </UDrawer>
+    </template>
+  </UDrawer>
+</template>

docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      email: user.email,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UInputMenu
+    :items="users"
+    icon="i-lucide-user"
+    placeholder="Select user"
+    :ui="{ content: 'min-w-fit' }"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue

@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies InputMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 

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

@@ -40,9 +40,9 @@ const text = computed(() => {
         placeholder="Password"
         :color="color"
         :type="show ? 'text' : 'password'"
-        :ui="{ trailing: 'pe-1' }"
         :aria-invalid="score < 4"
         aria-describedby="password-strength"
+        :ui="{ trailing: 'pe-1' }"
         class="w-full"
       >
         <template #trailing>

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

@@ -24,3 +24,10 @@ const password = ref('')
     </template>
   </UInput>
 </template>
+
+<style>
+/* Hide the password reveal button in Edge */
+::-ms-reveal {
+    display: none;
+}
+</style>

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

@@ -62,13 +62,13 @@ const items = [
 <template>
   <UNavigationMenu
     :items="items"
-    class="w-full justify-center"
     :ui="{
       viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
       content: 'sm:w-auto',
       childList: 'sm:w-96',
       childLinkDescription: 'text-balance line-clamp-2'
     }"
+    class="w-full justify-center"
   >
     <template #docs-content="{ item }">
       <ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">

docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      email: user.email,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <USelectMenu
+    :items="users"
+    icon="i-lucide-user"
+    placeholder="Select user"
+    :ui="{ content: 'min-w-fit' }"
+    class="w-48"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </USelectMenu>
+</template>

docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue

@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 

docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue

@@ -24,6 +24,7 @@ const items = ref([
     }
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 

docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue

@@ -23,6 +23,7 @@ const items = ref([
     icon: 'i-lucide-circle-check'
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 

docs/app/components/content/examples/select/SelectContentWidthExample.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const value = ref<string>()
+
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      email: user.email,
+      value: String(user.id),
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <USelect
+    v-model="value"
+    :items="users"
+    placeholder="Select user"
+    value-key="value"
+    :ui="{ content: 'min-w-fit' }"
+    class="w-48"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </USelect>
+</template>

docs/app/components/content/examples/select/SelectFetchExample.vue

@@ -24,8 +24,8 @@ function getUserAvatar(value: string) {
     :loading="status === 'pending'"
     icon="i-lucide-user"
     placeholder="Select user"
-    class="w-48"
     value-key="value"
+    class="w-48"
   >
     <template #leading="{ modelValue, ui }">
       <UAvatar

docs/app/components/content/examples/select/SelectItemsAvatarExample.vue

@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies SelectItem[])
+
 const value = ref(items.value[0]?.value)
 
 const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)

docs/app/components/content/examples/select/SelectItemsIconExample.vue

@@ -23,6 +23,7 @@ const items = ref([
     icon: 'i-lucide-circle-check'
   }
 ] satisfies SelectItem[])
+
 const value = ref(items.value[0]?.value)
 
 const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)

docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

@@ -26,7 +26,7 @@ const state = reactive({
 </script>
 
 <template>
-  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
+  <UTabs :items="items" variant="link" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
     <template #account="{ item }">
       <p class="text-muted mb-4">
         {{ item.description }}

docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue

@@ -27,8 +27,8 @@ const items: TimelineItem[] = [{
 <template>
   <UTimeline
     :items="items"
-    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     :default-value="2"
+    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     class="translate-x-[calc(50%-1rem)]"
   />
 </template>

docs/app/components/content/examples/timeline/TimelineSlotsExample.vue

@@ -42,11 +42,11 @@ const items = [{
   <UTimeline
     :items="items"
     size="xs"
-    class="w-96"
     :ui="{
       date: 'float-end ms-1',
       description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
     }"
+    class="w-96"
   >
     <template #title="{ item }">
       <span>{{ item.username }}</span>

docs/app/components/content/examples/toast/ToastProgressExample.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: 'There was a problem with your request.',
+    icon: 'i-lucide-wifi',
+    progress: false
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
+</template>

docs/app/components/content/examples/toaster/ToasterDurationExample.vue

@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.duration"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <UInput
         v-model="appConfig.toaster.duration"

docs/app/components/content/examples/toaster/ToasterExpandExample.vue

@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.expand"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <USelectMenu
         v-model="appConfig.toaster.expand"

docs/app/components/content/examples/toaster/ToasterPositionExample.vue

@@ -10,12 +10,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.position"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <USelectMenu
         v-model="appConfig.toaster.position"

docs/app/composables/useFaviconFromTheme.ts

@@ -1,5 +1,5 @@
 import { onMounted, watch } from 'vue'
-import FaviconSvg from 'public/icon.svg?raw'
+import FaviconSvg from '../../public/icon.svg?raw'
 
 export function useFaviconFromTheme() {
   const colorMode = useColorMode()

docs/app/error.vue

@@ -59,7 +59,7 @@ provide('navigation', mappedNavigation)
   <UApp>
     <NuxtLoadingIndicator color="#FFF" />
 
-    <!-- <Banner /> -->
+    <Banner />
 
     <Header :links="links" />
 

docs/app/pages/pro/.content/pricing.yml

@@ -5,6 +5,17 @@ pricing:
   title: Upgrade to Nuxt UI [Pro]{class="text-primary"}.
   description: On top of 40+ open source components from Nuxt UI, Pro gives you access to 50+ premium Vue components to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
   freePlan:
+    description: "**NuxtLabs is joining Vercel** :tada: As part of this transition, Nuxt UI is becoming even more accessible.<br><br> **In September, we're launching Nuxt UI v4**: a free, open-source library that unifies Nuxt UI and Nuxt UI Pro, offering 100+ components and a complete free Figma Kit for everyone."
+    orientation: horizontal
+    button:
+      label: Read the announcement
+      to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel'
+      target: _blank
+      color: 'neutral'
+      trailingIcon: 'i-lucide-arrow-right'
+      ui:
+        trailingIcon: 'ms-0'
+  devPlan:
     title: Free in development
     description: Try Nuxt UI Pro for free in development, no credit card required. Upgrade when ready to deploy.
     orientation: horizontal
@@ -13,6 +24,9 @@ pricing:
       to: '/getting-started/installation/pro/nuxt'
       color: 'neutral'
       variant: 'subtle'
+      trailingIcon: 'i-lucide-arrow-right'
+      ui:
+        trailingIcon: 'ms-0'
   figma:
     title: Figma Kit Pro
     description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.

docs/app/pages/pro/pricing.vue

@@ -34,10 +34,19 @@ useSeoMeta({
       <div class="flex flex-col bg-default gap-8 lg:gap-0">
         <UPricingPlan
           v-bind="page.pricing.freePlan"
-          variant="naked"
-          class="lg:rounded-none border-x border-default border-t border-b lg:border-b-0"
+          class="lg:rounded-none ring-primary/15 ring-inset -mb-px bg-primary/5 z-[1]"
+          :ui="{ description: 'mt-0 text-primary' }"
+        >
+          <template #description>
+            <MDC :value="page.pricing.freePlan.description" unwrap="p" />
+          </template>
+        </UPricingPlan>
+
+        <UPricingPlan
+          v-bind="page.pricing.devPlan"
+          class="lg:rounded-none ring-inset -mb-px"
         />
-        <UPricingPlans compact>
+        <UPricingPlans compact class="-space-x-px">
           <UPricingPlan
             v-for="(plan, index) in page.pricing.plans"
             :key="index"
@@ -47,18 +56,17 @@ useSeoMeta({
             :discount="plan.discount"
             :billing-period="plan.billing_period"
             :billing-cycle="plan.billing_cycle"
-            :variant="plan.highlight ? 'soft' : 'outline'"
-            :class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-primary lg:border-default': plan.highlight }]"
+            :variant="plan.highlight ? 'subtle' : 'outline'"
+            class="lg:rounded-none ring-inset -mb-px"
             :features="plan.features"
             :button="plan.button"
           />
         </UPricingPlans>
         <UPricingPlan
           v-bind="page.pricing.figma"
-          variant="naked"
           :billing-period="page.pricing.figma.billing_period"
           :billing-cycle="page.pricing.figma.billing_cycle"
-          class="lg:rounded-none border lg:border-y-0 border-default"
+          class="lg:rounded-none ring-inset -mb-px"
         >
           <template #features>
             <li v-for="(feature, index) in page.pricing.figma.features" :key="index" class="flex items-center gap-2 min-w-0">

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

@@ -225,6 +225,27 @@ export default defineNuxtConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::
 
+### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
+
+Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
+
+- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
+  ui: {
+    theme: {
+      defaultVariants: {
+        color: 'neutral',
+        size: 'sm'
+      }
+    }
+  }
+})
+```
+
 ## Continuous Releases
 
 Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

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

@@ -333,6 +333,32 @@ export default defineConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::
 
+### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
+
+Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
+
+- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      theme: {
+        defaultVariants: {
+          color: 'neutral',
+          size: 'sm'
+        }
+      }
+    })
+  ]
+})
+```
+
 ### `inertia`
 
 Use the `inertia` option to enable compatibility with [Inertia.js](https://inertiajs.com/).

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

@@ -536,6 +536,33 @@ import { ModalExampleComponent } from '#components'
 </script>
 ```
 
+### Changed form validation
+
+- The error object property for targeting form fields has been renamed from `path` to `name`:
+
+```diff
+<script setup lang="ts">
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) {
+    errors.push({ 
+-     path: 'email', 
++     name: 'email',
+      message: 'Required' 
+    })
+  }
+  if (!state.password) {
+    errors.push({ 
+-     path: 'password', 
++     name: 'password',
+      message: 'Required' 
+    })
+  }
+  return errors
+}
+</script>
+```
+
 ---
 
 ::warning

docs/content/1.getting-started/4.icons/1.nuxt.md

@@ -87,7 +87,7 @@ Read more about this in the `@nuxt/icon` documentation.
 
 You can use local SVG files to create a custom Iconify collection.
 
-For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:
+For example, place your icons' SVG files under a folder of your choice, for example, `./app/assets/icons`:
 
 ```bash
 assets/icons
@@ -104,7 +104,7 @@ export default defineNuxtConfig({
   icon: {
     customCollections: [{
       prefix: 'custom',
-      dir: './assets/icons'
+      dir: './app/assets/icons'
     }]
   }
 })

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

@@ -877,6 +877,20 @@ props:
 This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
 ::
 
+### With footer slot :badge{label="Soon" class="align-text-top"}
+
+Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-footer-slot-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
 ### With custom slot
 
 Use the `slot` property to customize a specific item or group.

docs/content/3.components/drawer.md

@@ -328,6 +328,17 @@ name: 'drawer-responsive-example'
 ---
 ::
 
+### Nested drawers :badge{label="Soon" class="align-text-top"}
+
+You can nest drawers within each other by using the `nested` prop.
+
+::component-example
+---
+prettier: true
+name: 'drawer-nested-example'
+---
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Drawer's body.

docs/content/3.components/file-upload.md

@@ -0,0 +1,31 @@
+---
+title: FileUpload
+description: ''
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/FileUpload.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

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

@@ -757,6 +757,33 @@ name: 'input-menu-filter-fields-example'
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'input-menu-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    inputMenu: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ### As a CountryPicker
 
 This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

docs/content/3.components/kbd.md

@@ -62,6 +62,19 @@ items:
 ---
 ::
 
+### Color :badge{label="Soon" class="align-text-top"}
+
+Use the `color` prop to change the color of the Kbd.
+
+::component-code
+---
+props:
+  color: neutral
+slots:
+  default: K
+---
+::
+
 ### Variant
 
 Use the `variant` prop to change the variant of the Kbd.
@@ -69,6 +82,7 @@ Use the `variant` prop to change the variant of the Kbd.
 ::component-code
 ---
 props:
+  color: neutral
   variant: solid
 slots:
   default: K

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

@@ -790,6 +790,33 @@ name: 'select-menu-filter-fields-example'
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'select-menu-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    selectMenu: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ### As a CountryPicker
 
 This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
@@ -801,6 +828,8 @@ name: 'select-menu-countries-example'
 ---
 ::
 
+
+
 ## API
 
 ### Props

docs/content/3.components/select.md

@@ -695,6 +695,33 @@ collapse: true
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'select-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    select: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ## API
 
 ### Props

docs/content/3.components/table.md

@@ -83,6 +83,9 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat
   - `class`:
     - `td`: [The classes to apply to the `td` element.]{class="text-muted"}
     - `th`: [The classes to apply to the `th` element.]{class="text-muted"}
+  - `style`:
+    - `td`: [The style to apply to the `td` element.]{class="text-muted"}
+    - `th`: [The style to apply to the `th` element.]{class="text-muted"}
 
 In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.
 
@@ -112,6 +115,8 @@ Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/
 
 - `class`:
   - `tr`: [The classes to apply to the `tr` element.]{class="text-muted"}
+- `style`:
+  - `tr`: [The style to apply to the `tr` element.]{class="text-muted"}
 
 ### Loading
 

docs/content/3.components/tabs.md

@@ -19,12 +19,13 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
+- `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `content?: string`{lang="ts-type"}
 - `value?: string | number`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `class?: any`{lang="ts-type"}
-- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, label?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---

docs/content/3.components/toast.md

@@ -107,7 +107,7 @@ name: 'toast-color-example'
 
 ### Close
 
-Pass a `close` field to customize or hide the close button (with `false` value).
+Pass a `close` field to customize or hide the close [Button](/components/button) (with `false` value).
 
 ::component-example
 ---
@@ -143,7 +143,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 
 ### Actions
 
-Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
+Pass an `actions` field to add some [Button](/components/button) actions to the Toast.
 
 ::component-example
 ---
@@ -155,9 +155,23 @@ name: 'toast-actions-example'
 ---
 ::
 
+### Progress :badge{label="Soon" class="align-text-top"}
+
+Pass a `progress` field to customize or hide the [Progress](/components/progress) bar (with `false` value).
+
+::tip
+The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
+::
+
+::component-example
+---
+name: 'toast-progress-example'
+---
+::
+
 ### Orientation
 
-Use the `orientation` prop to change the orientation of the Toast.
+Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
 
 ::component-example
 ---

docs/nuxt.config.ts

@@ -143,10 +143,6 @@ export default defineNuxtConfig({
     '/releases': { redirect: 'https://github.com/nuxt/ui/releases', prerender: false }
   },
 
-  future: {
-    compatibilityVersion: 4
-  },
-
   compatibilityDate: '2024-07-09',
 
   nitro: {

docs/package.json

@@ -11,26 +11,26 @@
   "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/lucide": "^1.2.57",
+    "@iconify-json/simple-icons": "^1.2.44",
     "@iconify-json/vscode-icons": "^1.2.23",
     "@nuxt/content": "^3.6.3",
     "@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@17684e4",
     "@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",
-    "ai": "^4.3.16",
+    "ai": "^4.3.19",
     "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": "^4.0.1",
     "nuxt-component-meta": "^0.12.1",
     "nuxt-llms": "^0.1.3",
     "nuxt-og-image": "^5.1.9",
@@ -40,11 +40,11 @@
     "superstruct": "^2.0.2",
     "ufo": "^1.6.1",
     "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.7.1",
+    "workers-ai-provider": "^0.7.2",
     "yup": "^1.6.1",
-    "zod": "^3.25.75"
+    "zod": "^4.0.5"
   },
   "devDependencies": {
-    "wrangler": "^4.23.0"
+    "wrangler": "^4.25.0"
   }
 }

package.json

@@ -2,7 +2,7 @@
   "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",
+  "packageManager": "pnpm@10.13.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -116,8 +116,8 @@
     "@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/kit": "^4.0.1",
+    "@nuxt/schema": "^4.0.1",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
     "@tailwindcss/postcss": "^4.1.11",
@@ -155,16 +155,16 @@
     "vue-component-type-helpers": "^3.0.1"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.5.2",
+    "@nuxt/eslint-config": "^1.6.0",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "happy-dom": "^18.0.1",
-    "nuxt": "^3.17.6",
-    "release-it": "^19.0.3",
+    "nuxt": "^4.0.1",
+    "release-it": "^19.0.4",
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^3.0.1"
@@ -177,7 +177,7 @@
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0",
     "yup": "^1.6.0",
-    "zod": "^3.24.0"
+    "zod": "^3.24.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "@inertiajs/vue3": {

playground-vue/package.json

@@ -13,12 +13,12 @@
     "@nuxt/ui": "workspace:*",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.75"
+    "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.5",
     "vue-tsc": "^3.0.1"
   }
 }

playground-vue/src/app.vue

@@ -35,6 +35,7 @@ const components = [
   'command-palette',
   'drawer',
   'dropdown-menu',
+  'file-upload',
   'form',
   'form-field',
   'input',

playground/app/app.vue

@@ -35,6 +35,7 @@ const components = [
   'command-palette',
   'drawer',
   'dropdown-menu',
+  'file-upload',
   'form',
   'form-field',
   'input',

playground/app/pages/components/color-picker.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 const colorHex = ref('#9C27B0')
+
+function handleColorChange(event: Event) {
+  colorHex.value = (event.target as HTMLInputElement).value
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-5">
     <div class="flex items-center gap-2">
       <span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
-      <code class="font-mono">{{ colorHex }}</code>
+      <UInput :model-value="colorHex" @change="handleColorChange" />
     </div>
     <USeparator />
     <div class="flex justify-between gap-2">
@@ -21,6 +25,6 @@ const colorHex = ref('#9C27B0')
       </UButton>
     </div>
     <USeparator />
-    <UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
+    <UColorPicker v-model="colorHex" />
   </div>
 </template>

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

@@ -166,7 +166,27 @@ defineShortcuts({
       multiple
       class="sm:max-h-80"
       @update:model-value="onSelect"
-    />
+    >
+      <template #footer>
+        <div class="flex items-center justify-between gap-2">
+          <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+          <div class="flex items-center gap-1">
+            <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
+              <template #trailing>
+                <UKbd value="enter" />
+              </template>
+            </UButton>
+            <USeparator orientation="vertical" class="h-4" />
+            <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
+              <template #trailing>
+                <UKbd value="meta" />
+                <UKbd value="k" />
+              </template>
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UCommandPalette>
   </DefineTemplate>
 
   <div class="flex-1 flex flex-col gap-12 w-full max-w-lg">

playground/app/pages/components/drawer.vue

@@ -28,6 +28,20 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
+    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background>
+      <UButton color="neutral" variant="outline" label="Open nested" />
+
+      <template #footer>
+        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
+          <UButton color="neutral" variant="outline" label="Open nested" />
+
+          <template #content>
+            <Placeholder class="flex-1 m-4" />
+          </template>
+        </UDrawer>
+      </template>
+    </UDrawer>
+
     <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 

playground/app/pages/components/file-upload.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import theme from '#build/ui/file-upload'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+
+const size = ref<keyof typeof theme.variants.size>('md')
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MIN_DIMENSIONS = { width: 200, height: 200 }
+const MAX_DIMENSIONS = { width: 4096, height: 4096 }
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+const schema = z.object({
+  avatar: z
+    .instanceof(File, {
+      message: 'Please select an image file.'
+    })
+    .refine(file => file.size <= MAX_FILE_SIZE, {
+      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
+    })
+    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
+      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
+    })
+    .refine(
+      file =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e) => {
+            const img = new Image()
+            img.onload = () => {
+              const meetsDimensions
+                  = img.width >= MIN_DIMENSIONS.width
+                    && img.height >= MIN_DIMENSIONS.height
+                    && img.width <= MAX_DIMENSIONS.width
+                    && img.height <= MAX_DIMENSIONS.height
+              resolve(meetsDimensions)
+            }
+            img.src = e.target?.result as string
+          }
+          reader.readAsDataURL(file)
+        }),
+      {
+        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
+      }
+    )
+})
+
+type schema = z.output<typeof schema>
+
+const state = reactive<Partial<schema>>({
+  avatar: undefined
+})
+
+const value = ref<File[]>([new File(['foo'], 'file1.txt', { type: 'text/plain' })])
+
+const upload = useUpload('/api/blob', { method: 'PUT' })
+
+function createObjectUrl(file: File): string {
+  return URL.createObjectURL(file)
+}
+
+async function onSubmit(event: FormSubmitEvent<schema>) {
+  const res = await upload(event.data.avatar)
+
+  console.log(res)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-8">
+    <div class="flex flex-wrap items-center gap-3">
+      <USelect v-model="size" :items="sizes" />
+    </div>
+
+    <UForm :schema="schema" :state="state" class="space-y-4 w-80" @submit="onSubmit">
+      <UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max." :size="size">
+        <UFileUpload v-slot="{ open, remove }" v-model="state.avatar" accept="image/*">
+          <div class="flex flex-wrap items-center gap-3">
+            <UAvatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" icon="i-lucide-image" />
+
+            <UButton :label="state.avatar ? 'Change image' : 'Upload image'" color="neutral" @click="open()" />
+          </div>
+
+          <p v-if="state.avatar" class="text-xs text-muted mt-1.5">
+            {{ state.avatar.name }}
+
+            <UButton
+              label="Remove"
+              color="error"
+              variant="link"
+              size="xs"
+              class="p-0"
+              @click="remove()"
+            />
+          </p>
+        </UFileUpload>
+      </UFormField>
+
+      <UButton label="Submit" type="submit" />
+    </UForm>
+
+    <UFileUpload
+      v-model="value"
+      label="Drop your image here"
+      description="SVG, PNG, JPG or GIF (max. 2MB)"
+      class="w-full"
+      multiple
+      :size="size"
+    >
+      <template #files-bottom="{ remove }">
+        <UButton label="Remove all" @click="remove()" />
+      </template>
+    </UFileUpload>
+  </div>
+</template>

playground/app/pages/components/kbd.vue

@@ -3,20 +3,16 @@ import theme from '#build/ui/kbd'
 import { kbdKeysMap } from '@nuxt/ui/composables/useKbd.js'
 
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
 
 const kbdKeys = Object.keys(kbdKeysMap)
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
-    <div class="flex items-center gap-1">
-      <UKbd value="meta" />
-    </div>
-    <div class="flex items-center gap-1">
-      <UKbd value="meta" variant="subtle" />
-    </div>
-    <div class="flex items-center gap-1">
-      <UKbd value="meta" variant="solid" />
+    <div v-for="color in colors" :key="color" class="flex items-center gap-1 ms-[-22px]">
+      <UKbd v-for="variant in variants" :key="`${color}-${variant}`" value="meta" :variant="variant" :color="color" />
     </div>
     <div class="flex items-center gap-1 ms-[-220px]">
       <UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />

playground/app/pages/components/tabs.vue

@@ -25,7 +25,8 @@ const items = [{
   label: 'Tab3',
   icon: 'i-lucide-bell',
   content: 'Finally, this is the content for Tab3',
-  slot: 'custom' as const
+  slot: 'custom' as const,
+  badge: '300'
 }]
 </script>
 

playground/nuxt.config.ts

@@ -10,12 +10,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css'],
 
-  future: {
-    compatibilityVersion: 4
-  },
-
   compatibilityDate: '2024-07-09',
 
+  hub: {
+    blob: true
+  },
+
   vite: {
     optimizeDeps: {
       // prevents reloading page when navigating between components

playground/package.json

@@ -9,13 +9,13 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.56",
-    "@iconify-json/simple-icons": "^1.2.42",
+    "@iconify-json/lucide": "^1.2.57",
+    "@iconify-json/simple-icons": "^1.2.44",
     "@internationalized/date": "^3.8.2",
     "@nuxt/ui": "workspace:*",
     "@nuxthub/core": "^0.9.0",
-    "nuxt": "^3.17.6",
-    "zod": "^3.25.75"
+    "nuxt": "^4.0.1",
+    "zod": "^4.0.5"
   },
   "devDependencies": {
     "typescript": "^5.8.3",

playground/server/api/blob.put.ts

@@ -0,0 +1,12 @@
+export default eventHandler(async (event) => {
+  return hubBlob().handleUpload(event, {
+    formKey: 'files', // read file or files form the `formKey` field of request body (body should be a `FormData` object)
+    multiple: true, // when `true`, the `formKey` field will be an array of `Blob` objects
+    ensure: {
+      types: ['image/jpeg', 'image/png'] // allowed types of the file
+    },
+    put: {
+      addRandomSuffix: true
+    }
+  })
+})

src/module.ts

@@ -6,6 +6,9 @@ import { name, version } from '../package.json'
 
 export type * from './runtime/types'
 
+type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | (string & {})
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {})
+
 export interface ModuleOptions {
   /**
    * Prefix for components
@@ -38,7 +41,7 @@ export interface ModuleOptions {
      * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
      * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
      */
-    colors?: string[]
+    colors?: Color[]
 
     /**
      * Enable or disable transitions on components
@@ -46,6 +49,20 @@ export interface ModuleOptions {
      * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
      */
     transitions?: boolean
+
+    defaultVariants?: {
+      /**
+       * The default color variant to use for components
+       * @defaultValue `'primary'`
+       */
+      color?: Color
+
+      /**
+       * The default size variant to use for components
+       * @defaultValue `'md'`
+       */
+      size?: Size
+    }
   }
 }
 
@@ -85,7 +102,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     async function registerModule(name: string, key: string, options: Record<string, any>) {
       if (!hasNuxtModule(name)) {
-        await installModule(name, options)
+        await installModule(name, defu((nuxt.options as any)[key], options))
       } else {
         (nuxt.options as any)[key] = defu((nuxt.options as any)[key], options)
       }

src/runtime/components/Alert.vue

@@ -57,7 +57,7 @@ export interface AlertProps {
 }
 
 export interface AlertEmits {
-  (e: 'update:open', value: boolean): void
+  'update:open': [value: boolean]
 }
 
 export interface AlertSlots {

src/runtime/components/Carousel.vue

@@ -256,6 +256,7 @@ const scrollSnaps = ref<number[]>([])
 function onInit(api: EmblaCarouselType) {
   scrollSnaps.value = api?.scrollSnapList() || []
 }
+
 function onSelect(api: EmblaCarouselType) {
   canScrollNext.value = api?.canScrollNext() || false
   canScrollPrev.value = api?.canScrollPrev() || false
@@ -300,8 +301,7 @@ defineExpose({
         <div
           v-for="(item, index) in items"
           :key="index"
-          role="group"
-          aria-roledescription="slide"
+          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
@@ -333,10 +333,13 @@ defineExpose({
         />
       </div>
 
-      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
+            type="button"
+            role="tab"
             :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :aria-selected="selectedIndex === index"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"

src/runtime/components/Chip.vue

@@ -35,7 +35,7 @@ export interface ChipProps {
 }
 
 export interface ChipEmits {
-  (e: 'update:show', payload: boolean): void
+  'update:show': [payload: boolean]
 }
 
 export interface ChipSlots {

src/runtime/components/ColorPicker.vue

@@ -31,7 +31,7 @@ function HSVtoHSL(hsv: HSVColor): HSLObject {
   return {
     H: hsv.h,
     S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
-    L: Math.round(x / 2)
+    L: x / 2
   }
 }
 
@@ -102,7 +102,6 @@ const pickedColor = computed<HSVColor>({
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
-      decimals: 2,
       labUnit: 'percent',
       cmykUnit: 'percent',
       cmykFunction: 'cmyk'

src/runtime/components/CommandPalette.vue

@@ -147,6 +147,7 @@ type SlotProps<T> = (props: { item: T, index: number }) => any
 
 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
   'empty'(props: { searchTerm?: string }): any
+  'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'item': SlotProps<T>
@@ -444,5 +445,9 @@ function onSelect(e: Event, item: T) {
         </slot>
       </div>
     </ListboxContent>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :ui="ui" />
+    </div>
   </ListboxRoot>
 </template>

src/runtime/components/Drawer.vue

@@ -37,6 +37,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * Whether the drawer is nested in another drawer.
+   * @defaultValue false
+   */
+  nested?: boolean
   class?: any
   ui?: Drawer['slots']
 }
@@ -57,7 +62,7 @@ export interface DrawerSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { usePortal } from '../composables/usePortal'
@@ -90,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -144,5 +149,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>

src/runtime/components/FileUpload.vue

@@ -0,0 +1,289 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { UseFileDialogReturn } from '@vueuse/core'
+import theme from '#build/ui/file-upload'
+import type { ButtonProps } from '../types'
+import type { ComponentConfig } from '../types/utils'
+
+type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>
+
+export interface FileUploadProps<M extends boolean = false> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  name?: string
+  /**
+   * The icon to display.
+   * @defaultValue appConfig.ui.icons.upload
+   * @IconifyIcon
+   */
+  icon?: string
+  label?: string
+  description?: string
+  actions?: ButtonProps[]
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: FileUpload['variants']['color']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: FileUpload['variants']['size']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  required?: boolean
+  disabled?: boolean
+  multiple?: M & boolean
+  /**
+   * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+   * @defaultValue '*'
+   */
+  accept?: string
+  /**
+   * Reset the file input when the dialog is opened.
+   * @defaultValue false
+   */
+  reset?: boolean
+  /**
+   * Create a zone that allows the user to drop files onto it.
+   * @defaultValue true
+   */
+  dropzone?: boolean
+  /**
+   * The icon to display for the file.
+   * @defaultValue appConfig.ui.icons.file
+   * @IconifyIcon
+   */
+  fileIcon?: string
+  class?: any
+  ui?: FileUpload['slots']
+}
+
+export interface FileUploadEmits<M extends boolean = false> {
+  (e: 'update:modelValue', value: M extends true ? File[] : File | null): void
+  (e: 'change', event: Event): void
+}
+
+export interface FileUploadSlots<M extends boolean = false> {
+  'default'(props: {
+    open: UseFileDialogReturn['open']
+    remove: (index?: number) => void
+  }): any
+  'leading'(props?: {}): any
+  'label'(props?: {}): any
+  'description'(props?: {}): any
+  'actions'(props?: {}): any
+  'files'(props: { files: M extends true ? File[] : File | null }): any
+  'files-top'(props: { remove: (index?: number) => void }): any
+  'files-bottom'(props: { remove: (index?: number) => void }): any
+  'file'(props: { file: File, index: number }): any
+  'file-leading'(props: { file: File, index: number }): any
+  'file-name'(props: { file: File, index: number }): any
+  'file-size'(props: { file: File, index: number }): any
+  'file-trailing'(props: { file: File, index: number }): any
+}
+</script>
+
+<script setup lang="ts" generic="M extends boolean = false">
+import { ref, computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
+import { useFileUpload } from '../composables/useFileUpload'
+import { tv } from '../utils/tv'
+import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<FileUploadProps<M>>(), {
+  accept: '*',
+  multiple: false as never,
+  reset: false,
+  dropzone: true
+})
+const emits = defineEmits<FileUploadEmits<M>>()
+const slots = defineSlots<FileUploadSlots<M>>()
+
+const modelValue = defineModel<(M extends true ? File[] : File) | null>()
+
+const appConfig = useAppConfig() as FileUpload['AppConfig']
+
+const inputRef = ref<HTMLInputElement>()
+const dropzoneRef = ref<HTMLDivElement>()
+
+const { isDragging, open } = useFileUpload({
+  accept: props.accept,
+  reset: props.reset,
+  multiple: props.multiple,
+  dropzone: props.dropzone,
+  dropzoneRef,
+  inputRef,
+  onUpdate
+})
+const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField<FileUploadProps>(props, { deferInputValidation: true })
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.fileUpload || {}) })({
+  dropzone: props.dropzone,
+  color: props.color,
+  size: props.size,
+  highlight: props.highlight
+}))
+
+function createObjectUrl(file: File): string {
+  return URL.createObjectURL(file)
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) {
+    return '0B'
+  }
+
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  const size = bytes / Math.pow(k, i)
+  const formattedSize = i === 0 ? size.toString() : size.toFixed(2)
+
+  return `${formattedSize}${sizes[i]}`
+}
+
+function onUpdate(files: File[], reset = false) {
+  if (props.multiple) {
+    if (reset) {
+      modelValue.value = files as (M extends true ? File[] : File) | null
+    } else {
+      const existingFiles = (modelValue.value as File[]) || []
+      modelValue.value = [...existingFiles, ...(files || [])] as (M extends true ? File[] : File) | null
+    }
+  } else {
+    modelValue.value = files?.[0] as (M extends true ? File[] : File) | null
+  }
+
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value: modelValue.value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function remove(index?: number) {
+  if (!modelValue.value) {
+    return
+  }
+
+  if (!props.multiple || index === undefined) {
+    onUpdate([], true)
+    return
+  }
+
+  const files = [...modelValue.value as File[]]
+  files.splice(index, 1)
+
+  onUpdate(files, true)
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot :open="open" :remove="remove">
+      <div
+        ref="dropzoneRef"
+        role="button"
+        :data-dragging="isDragging"
+        :class="ui.base({ class: props.ui?.base })"
+        tabindex="0"
+        @click="open()"
+      >
+        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <div :class="ui.leading({ class: props.ui?.leading })">
+            <slot name="leading">
+              <UIcon :name="icon || appConfig.ui.icons.upload" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            </slot>
+          </div>
+
+          <div v-if="label || !!slots.label" :class="ui.label({ class: props.ui?.label })">
+            <slot name="label">
+              {{ label }}
+            </slot>
+          </div>
+          <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+
+          <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+            <slot name="actions">
+              <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="modelValue" :class="ui.files({ class: props.ui?.files })">
+        <slot name="files-top" :remove="remove" />
+
+        <slot name="files" :files="modelValue">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" :class="ui.file({ class: props.ui?.file })">
+            <slot name="file" :file="file" :index="index">
+              <slot name="file-leading" :file="file" :index="index">
+                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+              </slot>
+
+              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span :class="ui.fileName({ class: props.ui?.fileName })">
+                  <slot name="file-name" :file="file" :index="index">
+                    {{ (file as File).name }}
+                  </slot>
+                </span>
+
+                <span :class="ui.fileSize({ class: props.ui?.fileSize })">
+                  <slot name="file-size" :file="file" :index="index">
+                    {{ formatFileSize((file as File).size) }}
+                  </slot>
+                </span>
+              </div>
+
+              <slot name="file-trailing" :file="file" :index="index">
+                <UButton
+                  color="neutral"
+                  variant="link"
+                  :size="size"
+                  :trailing-icon="appConfig.ui.icons.close"
+                  :class="ui.fileTrailing({ class: props.ui?.fileTrailing })"
+                  @click="remove(index)"
+                />
+              </slot>
+            </slot>
+          </div>
+        </slot>
+
+        <slot name="files-bottom" :remove="remove" />
+      </div>
+    </slot>
+
+    <input
+      :id="id"
+      ref="inputRef"
+      type="file"
+      :name="name"
+      :accept="accept"
+      :multiple="(multiple as boolean)"
+      :required="required"
+      :disabled="disabled"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      hidden
+    >
+  </Primitive>
+</template>

src/runtime/components/Form.vue

@@ -53,8 +53,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
 }
 
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-  (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void
-  (e: 'error', payload: FormErrorEvent): void
+  submit: [payload: FormSubmitEvent<FormData<S, T>>]
+  error: [payload: FormErrorEvent]
 }
 
 export interface FormSlots {

src/runtime/components/FormField.vue

@@ -18,7 +18,7 @@ export interface FormFieldProps {
   label?: string
   description?: string
   help?: string
-  error?: string | boolean
+  error?: boolean | string
   hint?: string
   /**
    * @defaultValue 'md'
@@ -41,8 +41,8 @@ export interface FormFieldSlots {
   hint(props: { hint?: string }): any
   description(props: { description?: string }): any
   help(props: { help?: string }): any
-  error(props: { error?: string | boolean }): any
-  default(props: { error?: string | boolean }): any
+  error(props: { error?: boolean | string }): any
+  default(props: { error?: boolean | string }): any
 }
 </script>
 
@@ -121,7 +121,7 @@ provide(formFieldInjectionKey, computed(() => ({
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

src/runtime/components/Input.vue

@@ -52,9 +52,9 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
 }
 
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-  (e: 'update:modelValue', payload: T): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+  'update:modelValue': [payload: T]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface InputSlots {

src/runtime/components/InputMenu.vue

@@ -128,15 +128,16 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
 }
 
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-  change: [payload: Event]
-  blur: [payload: FocusEvent]
-  focus: [payload: FocusEvent]
-  create: [item: string]
+  'change': [payload: Event]
+  'blur': [payload: FocusEvent]
+  'focus': [payload: FocusEvent]
+  'create': [item: string]
   /** Event handler when highlighted element changes. */
-  highlight: [payload: {
+  'highlight': [payload: {
     ref: HTMLElement
     value: GetModelValue<A, VK, M>
   } | undefined]
+  'remove-tag': [item: GetModelValue<A, VK, M>]
 } & GetModelValueEmits<A, VK, M>
 
 type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
@@ -171,7 +172,7 @@ export interface InputMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { computed, ref, toRef, onMounted, toRaw } from 'vue'
+import { computed, ref, toRef, onMounted, toRaw, nextTick } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
@@ -233,11 +234,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputMenu ||
 }))
 
 function displayValue(value: T): string {
-  if (!props.valueKey) {
-    return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
-  }
-
-  const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
+  const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
@@ -258,8 +255,12 @@ const filteredGroups = computed(() => {
 
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
 
-  return groups.value.map(group => group.filter((item) => {
-    if (typeof item !== 'object' || item === null) {
+  return groups.value.map(items => items.filter((item) => {
+    if (item === undefined || item === null) {
+      return false
+    }
+
+    if (typeof item !== 'object') {
       return contains(String(item), searchTerm.value)
     }
 
@@ -267,7 +268,10 @@ const filteredGroups = computed(() => {
       return true
     }
 
-    return fields.some(field => contains(get(item, field), searchTerm.value))
+    return fields.some((field) => {
+      const value = get(item, field)
+      return value !== undefined && value !== null && contains(String(value), searchTerm.value)
+    })
   })).filter(group => group.filter(item =>
     !isInputItem(item) || (!item.type || !['label', 'separator'].includes(item.type))
   ).length > 0)
@@ -298,6 +302,10 @@ function autoFocus() {
 }
 
 onMounted(() => {
+  nextTick(() => {
+    searchTerm.value = ''
+  })
+
   setTimeout(() => {
     autoFocus()
   }, props.autofocusDelay)
@@ -359,6 +367,7 @@ function onRemoveTag(event: any) {
     const modelValue = props.modelValue as GetModelValue<T, VK, true>
     const filteredValue = modelValue.filter(value => !isEqual(value, event))
     emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
+    emits('remove-tag', event)
     onUpdate(filteredValue)
   }
 }
@@ -432,7 +441,7 @@ defineExpose({
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
           <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
-              {{ displayValue(item as T) }}
+              {{ displayValue(item as T) ?? item }}
             </slot>
           </TagsInputItemText>
 

src/runtime/components/InputNumber.vue

@@ -63,9 +63,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
 }
 
 export interface InputNumberEmits {
-  (e: 'update:modelValue', payload: number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', payload: Event): void
+  'update:modelValue': [payload: number]
+  'blur': [event: FocusEvent]
+  'change': [payload: Event]
 }
 
 export interface InputNumberSlots {

src/runtime/components/Kbd.vue

@@ -13,6 +13,10 @@ export interface KbdProps {
    */
   as?: any
   value?: KbdKey | string
+  /**
+   * @defaultValue 'neutral'
+   */
+  color?: Kbd['variants']['color']
   /**
    * @defaultValue 'outline'
    */
@@ -48,7 +52,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) }
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui({ class: props.class, color: props.color, variant: props.variant, size: props.size })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

src/runtime/components/NavigationMenu.vue

@@ -177,6 +177,8 @@ import UBadge from './Badge.vue'
 import UPopover from './Popover.vue'
 import UTooltip from './Tooltip.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   orientation: 'horizontal',
   contentOrientation: 'horizontal',
@@ -392,7 +394,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">

src/runtime/components/RadioGroup.vue

@@ -70,7 +70,9 @@ export type RadioGroupEmits = RadioGroupRootEmits & {
   change: [payload: Event]
 }
 
-type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any
+type NormalizeItem<T extends RadioGroupItem> = Exclude<T & { id: string }, RadioGroupValue>
+
+type SlotProps<T extends RadioGroupItem> = (props: { item: NormalizeItem<T>, modelValue?: RadioGroupValue }) => any
 
 export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
   legend(props?: {}): any
@@ -114,21 +116,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup |
   indicator: props.indicator
 }))
 
-function normalizeItem(item: any) {
+function normalizeItem(item: T): NormalizeItem<T> {
   if (item === null) {
     return {
       id: `${id}:null`,
       value: undefined,
       label: undefined
-    }
+    } as NormalizeItem<T>
   }
 
-  if (typeof item === 'string' || typeof item === 'number') {
+  if (typeof item === 'string' || typeof item === 'number' || typeof item === 'bigint') {
     return {
       id: `${id}:${item}`,
       value: String(item),
       label: String(item)
-    }
+    } as NormalizeItem<T>
   }
 
   const value = get(item, props.valueKey as string)
@@ -136,7 +138,7 @@ function normalizeItem(item: any) {
   const description = get(item, props.descriptionKey as string)
 
   return {
-    ...item,
+    ...(item as NormalizeItem<T>),
     value,
     label,
     description,

src/runtime/components/SelectMenu.vue

@@ -234,11 +234,7 @@ function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): strin
     return values?.length ? values.join(', ') : undefined
   }
 
-  if (!props.valueKey) {
-    return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
-  }
-
-  const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
+  const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
@@ -260,7 +256,11 @@ const filteredGroups = computed(() => {
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
 
   return groups.value.map(items => items.filter((item) => {
-    if (typeof item !== 'object' || item === null) {
+    if (item === undefined || item === null) {
+      return false
+    }
+
+    if (typeof item !== 'object') {
       return contains(String(item), searchTerm.value)
     }
 
@@ -268,7 +268,10 @@ const filteredGroups = computed(() => {
       return true
     }
 
-    return fields.some(field => contains(get(item, field), searchTerm.value))
+    return fields.some((field) => {
+      const value = get(item, field)
+      return value !== undefined && value !== null && contains(String(value), searchTerm.value)
+    })
   })).filter(group => group.filter(item =>
     !isSelectItem(item) || (!item.type || !['label', 'separator'].includes(item.type))
   ).length > 0)

src/runtime/components/Slider.vue

@@ -39,8 +39,8 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 }
 
 export interface SliderEmits<T extends number | number[] = number | number[]> {
-  (e: 'update:modelValue', payload: T): void
-  (e: 'change', payload: Event): void
+  'update:modelValue': [payload: T]
+  'change': [payload: Event]
 }
 </script>
 

src/runtime/components/Table.vue

@@ -45,12 +45,26 @@ declare module '@tanstack/table-core' {
       th?: string | ((cell: Header<TData, TValue>) => string)
       td?: string | ((cell: Cell<TData, TValue>) => string)
     }
+    style?: {
+      th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
+      td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
+    }
+    colspan?: {
+      td?: string | ((cell: Cell<TData, TValue>) => string)
+    }
+    rowspan?: {
+      td?: string | ((cell: Cell<TData, TValue>) => string)
+    }
+
   }
 
   interface TableMeta<TData> {
     class?: {
       tr?: string | ((row: Row<TData>) => string)
     }
+    style?: {
+      tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
+    }
   }
 
 }
@@ -369,6 +383,14 @@ function onRowContextmenu(e: Event, row: TableRow<T>) {
   }
 }
 
+function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined {
+  if (typeof prop === 'function') {
+    // @ts-expect-error: TS can't know if prop is a function here
+    return prop(arg)
+  }
+  return prop
+}
+
 watch(
   () => props.data, () => {
     data.value = props.data ? [...props.data] : []
@@ -398,10 +420,11 @@ defineExpose({
             :data-pinned="header.column.getIsPinned()"
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : 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
+                resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
             })"
@@ -429,9 +452,10 @@ defineExpose({
               :class="ui.tr({
                 class: [
                   props.ui?.tr,
-                  typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
+                  resolveValue(tableApi.options.meta?.class?.tr, row)
                 ]
               })"
+              :style="resolveValue(tableApi.options.meta?.style?.tr, row)"
               @click="onRowSelect($event, row)"
               @pointerenter="onRowHover($event, row)"
               @pointerleave="onRowHover($event, null)"
@@ -441,13 +465,16 @@ defineExpose({
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
                 :data-pinned="cell.column.getIsPinned()"
+                :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
+                :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
                 :class="ui.td({
                   class: [
                     props.ui?.td,
-                    typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
+                    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
                   ],
                   pinned: !!cell.column.getIsPinned()
                 })"
+                :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
               >
                 <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
                   <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
@@ -488,13 +515,15 @@ defineExpose({
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : 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
+                resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
             })"
+            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
           >
             <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />

src/runtime/components/Tabs.vue

@@ -3,7 +3,7 @@
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tabs'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, BadgeProps } from '../types'
 import type { DynamicSlots, ComponentConfig } from '../types/utils'
 
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>
@@ -15,13 +15,18 @@ export interface TabsItem {
    */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * Display a badge on the item.
+   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+   */
+  badge?: string | number | BadgeProps
   slot?: string
   content?: string
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
   disabled?: boolean
   class?: any
-  ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'label' | 'content'>
+  ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>
   [key: string]: any
 }
 
@@ -134,14 +139,23 @@ defineExpose({
       >
         <slot name="leading" :item="item" :index="index">
           <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
 
         <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index" />
+        <slot name="trailing" :item="item" :index="index">
+          <UBadge
+            v-if="item.badge"
+            color="neutral"
+            variant="outline"
+            :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
+            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+          />
+        </slot>
       </TabsTrigger>
 
       <slot name="list-trailing" />

src/runtime/components/Textarea.vue

@@ -55,9 +55,9 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
 }
 
 export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-  (e: 'update:modelValue', payload: T): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+  'update:modelValue': [payload: T]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface TextareaSlots {

src/runtime/components/Toast.vue

@@ -2,7 +2,7 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/toast'
-import type { AvatarProps, ButtonProps } from '../types'
+import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
 import type { StringOrVNode, ComponentConfig } from '../types/utils'
 
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>
@@ -29,18 +29,6 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'vertical'
    */
   orientation?: Toast['variants']['orientation']
-  /**
-   * Whether to show the progress bar.
-   * @defaultValue true
-   */
-  progress?: boolean
-  /**
-   * Display a list of actions:
-   * - under the title and description when orientation is `vertical`
-   * - next to the close button when orientation is `horizontal`
-   * `{ size: 'xs' }`{lang="ts-type"}
-   */
-  actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
@@ -53,6 +41,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @IconifyIcon
    */
   closeIcon?: string
+  /**
+   * Display a list of actions:
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   * `{ size: 'xs' }`{lang="ts-type"}
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a progress bar showing the toast's remaining duration.
+   * `{ size: 'sm' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  progress?: boolean | Pick<ProgressProps, 'color'>
   class?: any
   ui?: Toast['slots']
 }
@@ -78,10 +79,11 @@ import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
+import UProgress from './Progress.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
-  close: true,
   orientation: 'vertical',
+  close: true,
   progress: true
 })
 const emits = defineEmits<ToastEmits>()
@@ -119,7 +121,7 @@ defineExpose({
 <template>
   <ToastRoot
     ref="el"
-    v-slot="{ remaining, duration }"
+    v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
@@ -184,6 +186,13 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+    <UProgress
+      v-if="progress && open && remaining > 0 && duration"
+      :model-value="remaining / duration * 100"
+      :color="color"
+      v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
+      size="sm"
+      :class="ui.progress({ class: props.ui?.progress })"
+    />
   </ToastRoot>
 </template>

src/runtime/components/Tree.vue

@@ -107,6 +107,8 @@ import { get } from '../utils'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<TreeProps<T, VK, M>>(), {
   labelKey: 'label' as never,
   valueKey: 'value' as never
@@ -161,7 +163,7 @@ const defaultExpanded = computed(() =>
         @toggle="item.onToggle"
         @select="item.onSelect"
       >
-        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
+        <button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
           <slot :name="((item.slot || 'item') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
             <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
               <UIcon
@@ -199,7 +201,7 @@ const defaultExpanded = computed(() =>
   </DefineTreeTemplate>
 
   <TreeRoot
-    v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)"
+    v-bind="{ ...(rootProps as unknown as TreeRootProps<NestedItem<T>>), ...$attrs }"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemValue"
     :default-expanded="defaultExpanded"

src/runtime/composables/defineShortcuts.ts

@@ -122,7 +122,7 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
 
       if (shortcut.enabled) {
         e.preventDefault()
-        shortcut.handler()
+        shortcut.handler(e)
       }
       clearChainedInput()
       return

src/runtime/composables/useFileUpload.ts

@@ -0,0 +1,78 @@
+import type { Ref } from 'vue'
+import { computed, unref } from 'vue'
+import { useFileDialog, useDropZone } from '@vueuse/core'
+import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/core'
+
+export interface UseFileUploadOptions {
+  /**
+   * Specifies the allowed file types. Provide a comma-separated list of MIME types or file extensions.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+   * @defaultValue '*'
+   */
+  accept?: MaybeRef<string>
+  reset?: boolean
+  multiple?: boolean
+  dropzone?: boolean
+  dropzoneRef: MaybeRefOrGetter<HTMLElement | null | undefined>
+  inputRef: Ref<HTMLInputElement | undefined>
+  onUpdate: (files: File[]) => void
+}
+
+function parseAcceptToDataTypes(accept: string): string[] | undefined {
+  if (!accept || accept === '*') {
+    return undefined
+  }
+
+  const types = accept
+    .split(',')
+    .map(type => type.trim())
+    .filter((type) => {
+      return !type.startsWith('.')
+    })
+
+  return types.length > 0 ? types : undefined
+}
+
+export function useFileUpload(options: UseFileUploadOptions) {
+  const {
+    accept = '*',
+    reset = false,
+    multiple = false,
+    dropzone = true,
+    dropzoneRef,
+    inputRef,
+    onUpdate
+  } = options
+
+  const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)))
+
+  const onDrop = (files: FileList | File[] | null) => {
+    if (!files || files.length === 0) {
+      return
+    }
+    if (files instanceof FileList) {
+      files = Array.from(files)
+    }
+    if (files.length > 1 && !multiple) {
+      files = [files[0]!]
+    }
+    onUpdate(files)
+  }
+
+  const { isOverDropZone: isDragging } = dropzone
+    ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
+    : { isOverDropZone: false }
+  const { onChange, open } = useFileDialog({
+    accept: unref(accept),
+    multiple,
+    input: unref(inputRef),
+    reset
+  })
+
+  onChange(fileList => onDrop(fileList))
+
+  return {
+    isDragging,
+    open
+  }
+}

src/runtime/composables/useFormField.ts

@@ -89,10 +89,15 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
         .filter(type => formField?.value?.[type])
         .map(type => `${formField?.value.ariaId}-${type}`) || []
 
-      return {
-        'aria-describedby': descriptiveAttrs.join(' '),
+      const attrs: Record<string, any> = {
         'aria-invalid': !!formField?.value.error
       }
+
+      if (descriptiveAttrs.length > 0) {
+        attrs['aria-describedby'] = descriptiveAttrs.join(' ')
+      }
+
+      return attrs
     })
   }
 }

src/runtime/composables/useOverlay.ts

@@ -71,7 +71,7 @@ function _useOverlay() {
       isMounted: !!defaultOpen,
       destroyOnClose: !!destroyOnClose,
       originalProps: props || {},
-      props: { ...(props || {}) }
+      props: { ...props }
     })
 
     overlays.push(options)
@@ -87,11 +87,11 @@ function _useOverlay() {
   const open = <T extends Component>(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T> => {
     const overlay = getOverlay(id)
 
-    // If props are provided, update the overlay's props
+    // If props are provided, merge them with the original props, otherwise use the original props
     if (props) {
-      patch(overlay.id, props)
+      overlay.props = { ...overlay.originalProps, ...props }
     } else {
-      patch(overlay.id, overlay.originalProps)
+      overlay.props = { ...overlay.originalProps }
     }
 
     overlay.isOpen = true
@@ -135,7 +135,7 @@ function _useOverlay() {
   const patch = <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>): void => {
     const overlay = getOverlay(id)
 
-    overlay.props = { ...props }
+    overlay.props = { ...overlay.props, ...props }
   }
 
   const getOverlay = (id: symbol): Overlay => {

src/runtime/inertia/stubs.ts

@@ -1,11 +1,10 @@
 import { ref, onScopeDispose } from 'vue'
 import type { Ref, Plugin as VuePlugin } from 'vue'
 import { createHooks } from 'hookable'
-
+import { usePage } from '@inertiajs/vue3'
+import { useColorMode as useColorModeVueUse } from '@vueuse/core'
 import appConfig from '#build/app.config'
 import type { NuxtApp } from '#app'
-import { useColorMode as useColorModeVueUse } from '@vueuse/core'
-import { usePage } from '@inertiajs/vue3'
 
 export { useHead } from '@unhead/vue'
 
@@ -16,6 +15,7 @@ export { useLocale } from '../composables/useLocale'
 
 export const useRoute = () => {
   const page = usePage()
+
   return {
     fullPath: page.url
   }
@@ -25,6 +25,10 @@ export const useRouter = () => {
 
 }
 
+export const clearError = () => {
+
+}
+
 export const useColorMode = () => {
   if (!appConfig.colorMode) {
     return {

src/runtime/locale/ar.ts

@@ -40,7 +40,8 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'السابق',
       next: 'التالي',
-      goto: 'الذهاب إلي شريحة {slide}'
+      dots: 'اختر الشريحة المراد عرضها',
+      goto: 'الذهاب إلى شريحة {slide}'
     },
     modal: {
       close: 'إغلاق'

src/runtime/locale/az.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Əvvəlki',
       next: 'Növbəti',
+      dots: 'Göstərmək üçün slayd seçin',
       goto: 'Slayd {slide} keç'
     },
     modal: {

src/runtime/locale/bg.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Назад',
       next: 'Напред',
+      dots: 'Изберете слайд за показване',
       goto: 'Отидете на слайд {slide}'
     },
     modal: {

src/runtime/locale/bn.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'পূর্ববর্তী',
       next: 'পরবর্তী',
+      dots: 'প্রদর্শনের জন্য স্লাইড নির্বাচন করুন',
       goto: 'স্লাইড {slide} এ যান'
     },
     modal: {

src/runtime/locale/ca.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Anterior',
       next: 'Següent',
+      dots: 'Tria la diapositiva a mostrar',
       goto: 'Anar a la diapositiva {slide}'
     },
     modal: {

src/runtime/locale/ckb.ts

@@ -38,8 +38,9 @@ export default defineLocale<Messages>({
       close: 'داخستن'
     },
     carousel: {
-      prev: 'پێشوو',
+      prev: 'پێشووی',
       next: 'داهاتوو',
+      dots: 'سلایدێک هەڵبژێرە بۆ پیشاندان',
       goto: 'بڕۆ بۆ سلایدی {slide}'
     },
     modal: {

src/runtime/locale/cs.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Předchozí',
       next: 'Další',
+      dots: 'Vyberte snímek k zobrazení',
       goto: 'Přejít na {slide}'
     },
     modal: {

src/runtime/locale/da.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Forrige',
       next: 'Næste',
+      dots: 'Vælg dias til visning',
       goto: 'Gå til slide {slide}'
     },
     modal: {

src/runtime/locale/de.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Zurück',
       next: 'Weiter',
+      dots: 'Folie zur Anzeige auswählen',
       goto: 'Gehe zu {slide}'
     },
     modal: {