chore(release): v2.18.6

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,6 +1,6 @@
 name: "🐛 Bug report"
 description: Report a bug to help us improve the module.
-labels: ["triage"]
+labels: ["triage", "bug"]
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,6 +1,6 @@
 name: "🚀 Feature request"
 description: Suggest an idea or enhancement for the module.
-labels: ["triage"]
+labels: ["triage", "enhancement"]
 body:
   - type: markdown
     attributes:

CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [2.18.6](https://github.com/nuxt/ui/compare/v2.18.5...v2.18.6) (2024-09-23)
+
+
+### Bug Fixes
+
+* **components:** accept partial config in `ui` prop ([#2235](https://github.com/nuxt/ui/issues/2235)) ([eecf4f7](https://github.com/nuxt/ui/commit/eecf4f7ed8a32a874f00afd7bff2964a1366e0b5))
+* **Modal/Slideover:** bind transition class to `TransitionChild` for Vue 3.5 ([#2227](https://github.com/nuxt/ui/issues/2227)) ([803c20a](https://github.com/nuxt/ui/commit/803c20ad92e8a31fefd6d300856735b0e9adbdf9))
+* **SelectMenu:** wrong placeholder color with multiple ([#2218](https://github.com/nuxt/ui/issues/2218)) ([28ad5cf](https://github.com/nuxt/ui/commit/28ad5cf98251c6a8acec8d0bf4f0fd07ff6b7066))
+* **Table:** colspan with expand ([#2217](https://github.com/nuxt/ui/issues/2217)) ([56118c4](https://github.com/nuxt/ui/commit/56118c4a794f3d763dad7b65e044814cf7ef11cf))
+* **Tabs:** handle icon `margin` in RTL mode ([#2233](https://github.com/nuxt/ui/issues/2233)) ([ea05414](https://github.com/nuxt/ui/commit/ea05414930fe3f5e6805c8aa25bbe8f746bcc86e))
+* **useFormField:** optional property access ([#2226](https://github.com/nuxt/ui/issues/2226)) ([0a054a5](https://github.com/nuxt/ui/commit/0a054a52b64b4f774041c40223e18e7e056cfd80))
+
+## [2.18.5](https://github.com/nuxt/ui/compare/v2.18.4...v2.18.5) (2024-09-18)
+
+
+### Features
+
+* **Form:** add errors slot prop ([#2188](https://github.com/nuxt/ui/issues/2188)) ([67c6a74](https://github.com/nuxt/ui/commit/67c6a74ed15db1ee8a40e9c74ecfef0d3c3e374a))
+
+
+### Bug Fixes
+
+* **Button:** button link not showing disabled classes ([#2185](https://github.com/nuxt/ui/issues/2185)) ([e8ea84a](https://github.com/nuxt/ui/commit/e8ea84a5736759d953664f8f397a2339c212b294))
+* **Carousel:** remove trailing space in next button icon ([#2088](https://github.com/nuxt/ui/issues/2088)) ([1282a5f](https://github.com/nuxt/ui/commit/1282a5f6c001aa05597d458800bafcf6b6419634))
+* **FormGroup:** remove id when used with `RadioGroup` ([#2152](https://github.com/nuxt/ui/issues/2152)) ([7aec42c](https://github.com/nuxt/ui/commit/7aec42ca15aaa0ccc63c520b484cba203fd3232b))
+* **Input:** avoid binding value when type is `file` ([#2047](https://github.com/nuxt/ui/issues/2047)) ([82313e8](https://github.com/nuxt/ui/commit/82313e862cbf21ae631156af4cd057f1383db634))
+* **module:** allow CSS variables in tailwind colors ([#2014](https://github.com/nuxt/ui/issues/2014)) ([7f50c70](https://github.com/nuxt/ui/commit/7f50c7031fecb5ab26a6d0f58b576b2fd0860487))
+* **module:** augment `@nuxt/schema` rather than `nuxt/schema` ([#2171](https://github.com/nuxt/ui/issues/2171)) ([ead904f](https://github.com/nuxt/ui/commit/ead904fd2f2bbb29fd60ccde063bf02daa2cbdbb))
+* **module:** consider user tailwind `configPath` for module as string ([#2074](https://github.com/nuxt/ui/issues/2074)) ([e4ba4f7](https://github.com/nuxt/ui/commit/e4ba4f7c729f99dde51891636605793864812d30))
+* **Pagination:** use links on prev and next button ([#2179](https://github.com/nuxt/ui/issues/2179)) ([c850f85](https://github.com/nuxt/ui/commit/c850f85aaa40c7abbe8cc4dc1bd4705bf7677390))
+* **README:** update license link ([#2154](https://github.com/nuxt/ui/issues/2154)) ([8d79eea](https://github.com/nuxt/ui/commit/8d79eea19b3276b1f1e069d33b98b311e9b91cfd))
+* **Slideover:** bind `rounded` class to panel ([#2187](https://github.com/nuxt/ui/issues/2187)) ([bf32baa](https://github.com/nuxt/ui/commit/bf32baaab01dc4150622f67b3b4a8d02d21b922c))
+* **Slideover:** bind `shadow` class to panel ([#2201](https://github.com/nuxt/ui/issues/2201)) ([d22526c](https://github.com/nuxt/ui/commit/d22526c0c10735a92e63b7d086e7b8534a08d768))
+* **Table:** checkbox can emit the `[@select](https://github.com/select)` event ([#2072](https://github.com/nuxt/ui/issues/2072)) ([b1f691f](https://github.com/nuxt/ui/commit/b1f691f28ca8c94f6b658dcb61eeff06951bd1d0))
+* **Table:** select all rows reactivity issue ([#2200](https://github.com/nuxt/ui/issues/2200)) ([68124de](https://github.com/nuxt/ui/commit/68124de5106e55cb2987a6ba4ec1120d79b51788))
+* **Tabs:** recalculate marker if items change ([#2101](https://github.com/nuxt/ui/issues/2101)) ([82c4926](https://github.com/nuxt/ui/commit/82c4926c090ce7fac48022a93b1b05b877bb48dd))
+* **Textarea:** resolve row count calculation errors caused by scrollbar ([#2040](https://github.com/nuxt/ui/issues/2040)) ([8210936](https://github.com/nuxt/ui/commit/8210936f22fcf6b7eb5b9711e2c29be38956b8d6))
+
 ## [2.18.4](https://github.com/nuxt/ui/compare/v2.18.3...v2.18.4) (2024-08-05)
 
 

README.md

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

docs/components/Footer.vue

@@ -45,5 +45,8 @@ const links = [{
   label: 'Releases',
   icon: 'i-heroicons-rocket-launch',
   to: '/releases'
+}, {
+  label: 'Terms',
+  to: '/pro/terms'
 }]
 </script>

docs/components/content/ComponentCard.vue

@@ -156,9 +156,11 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
     options = [...appConfig.ui.colors]
   }
 
-  if (key.toLowerCase() === 'size' && schema?.schema?.length > 0) {
+  const schemaOptions = Object.values(schema?.schema || {})
+
+  if (key.toLowerCase() === 'size' && schemaOptions?.length > 0) {
     const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
-    schema.schema.sort((a: string, b: string) => {
+    schemaOptions.sort((a: string, b: string) => {
       const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
       const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
 
@@ -173,8 +175,8 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
     })
   }
 
-  if (schema?.schema?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
-    options = schema.schema.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
+  if (schemaOptions?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
+    options = schemaOptions.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
   }
 
   if (optionItem?.restriction === 'only') {

docs/components/content/ComponentPropsField.vue

@@ -5,15 +5,15 @@
       {{ prop.description }}
     </p>
 
-    <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
+    <Collapsible v-if="prop.schema?.kind === 'array' && Object.values(prop.schema?.schema)?.filter((schema: any) => schema.kind === 'object').length">
+      <FieldGroup v-for="schema in (Object.values(prop.schema.schema) as any[])" :key="schema.name">
         <ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
-    <Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
+    <Collapsible v-else-if="(prop.schema?.kind === 'enum' || prop.schema?.kind === 'array') && Object.values(prop.schema?.schema)?.filter((schema: any) => schema.kind === 'array' && typeof schema.schema === 'object')?.length > 1">
+      <FieldGroup v-for="schema in (Object.values(prop.schema.schema) as any[])" :key="schema.name">
         <template v-for="subSchema in schema.schema" :key="subSchema.name">
-          <ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
+          <ComponentPropsField v-for="subProp in subSchema.schema" :key="(subProp as any).name" :prop="subProp" />
         </template>
       </FieldGroup>
     </Collapsible>
@@ -23,7 +23,7 @@
       </FieldGroup>
     </Collapsible>
     <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="flex items-center flex-wrap gap-1 -my-1">
-      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words leading-6">{{ value }}</code>
+      <code v-for="value in Object.values(prop.schema.schema).filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words leading-6">{{ value }}</code>
     </div>
   </Field>
 </template>

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -45,7 +45,7 @@ const ui = {
         inactive: 'text-gray-400 dark:text-gray-500'
       },
       avatar: {
-        size: '2xs'
+        size: '2xs' as const
       }
     }
   }

docs/components/content/examples/TableExampleAdvanced.vue

@@ -85,7 +85,7 @@ const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
 const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))
 
 // Data
-const { data: todos, pending } = await useLazyAsyncData<{
+const { data: todos, status } = await useLazyAsyncData<{
   id: number
   title: string
   completed: string
@@ -181,12 +181,12 @@ const { data: todos, pending } = await useLazyAsyncData<{
       v-model:sort="sort"
       :rows="todos"
       :columns="columnsTable"
-      :loading="pending"
+      :loading="status === 'pending'"
       sort-asc-icon="i-heroicons-arrow-up"
       sort-desc-icon="i-heroicons-arrow-down"
       sort-mode="manual"
       class="w-full"
-      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' } } }"
+      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' as any } } }"
       @select="select"
     >
       <template #completed-data="{ row }">

docs/components/content/examples/TabsExampleIconSlot.vue

@@ -17,7 +17,7 @@ const items = [{
 <template>
   <UTabs :items="items" class="w-full">
     <template #icon="{ item, selected }">
-      <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 mr-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
+      <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 me-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
     </template>
   </UTabs>
 </template>

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

@@ -246,7 +246,7 @@ When accessing the component via a template ref, you can use the following:
   ::field{name="updateQuery (query)"}
     Updates the current query.
   ::
-  ::field{name="results" type="ComputedRef<Fuse.FuseResult<Command>[]>"}
+  ::field{name="results" type="ComputedRef<FuseResult<Command>[]>"}
     The results exposed by [useFuse](https://vueuse.org/integrations/useFuse/#usefuse).
   ::
   ::field{name="comboboxApi"}

docs/content/2.components/modal.md

@@ -61,7 +61,7 @@ Set the `fullscreen` prop to `true` to enable it.
 
 ### Control programmatically
 
-First of all, add the `Modals` component to your app, preferably inside `app.vue`.
+First of all, add the `Modals` component to your app, preferably inside `app.vue`. This component provides your application a place to render programmatically created modals.
 
 ```vue [app.vue]
 <template>
@@ -81,8 +81,8 @@ Then, you can use the `useModal` composable to control your modals within your a
 :component-example{component="modal-example-component" hiddenCode hiddenPreview }
 
 ::code-group{class="[&>div:last-child>div:first-child]:!rounded-t-none"}
-  :component-example{component="modal-example-composable" label="app.vue" }
-  :component-example{component="modal-example-component" hiddenPreview label="modal.vue" }
+  :component-example{component="modal-example-composable" label="index.vue" }
+  :component-example{component="modal-example-component" hiddenPreview label="components/ModalExampleComponent.vue" }
 ::
 
 Additionally, you can close the modal within the modal component by calling `modal.close()`.

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

@@ -156,7 +156,11 @@ slots:
 
 ## Config
 
-::tabs
-  :component-preset{label="Radio" slug="Radio"}
-  :component-preset{label="RadioGroup"}
+::callout{icon="i-heroicons-light-bulb"}
+Use the `ui` prop to override the radio group config and the `uiRadio` prop to override the radio config.
+::
+
+::tabs
+  :component-preset{label="Radio (uiRadio)" slug="Radio"}
+  :component-preset{label="RadioGroup (ui)"}
 ::

docs/content/2.components/table.md

@@ -30,7 +30,19 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 - `class` - The class to apply to the column cells.
 - `rowClass` - The class to apply to the data column cells. :u-badge{label="New" class="!rounded-full" variant="subtle"}
-- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
+- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. 
+
+Arguments for the `sort` function are: Value A, Value B, Direction - 'asc' or 'desc'
+
+Example `sort` function:
+```
+(a, b, direction) => {
+  if (!a || !b) return 0
+  const aPrice = parseInt(a.replace(/[,$]/g, ""))
+  const bPrice = parseInt(b.replace(/[,$]/g, ""))
+  return direction === "asc" ? aPrice - bPrice : bPrice - aPrice
+}
+```
 
 ::component-example{class="grid"}
 ---
@@ -148,11 +160,11 @@ const columns = [{
   sortable: true
 }]
 
-const { data, pending } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
+const { data, status } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
 </script>
 
 <template>
-  <UTable v-model:sort="sort" :loading="pending" :columns="columns" :rows="data" sort-mode="manual" />
+  <UTable v-model:sort="sort" :loading="status === 'pending'" :columns="columns" :rows="data" sort-mode="manual" />
 </template>
 ```
 
@@ -359,11 +371,11 @@ This can be easily used with Nuxt `useAsyncData` composable.
 <script setup lang="ts">
 const columns = [...]
 
-const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
+const { status, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
 </script>
 
 <template>
-  <UTable :rows="people" :columns="columns" :loading="pending" />
+  <UTable :rows="people" :columns="columns" :loading="status === 'pending'" />
 </template>
 ```
 

docs/package.json

@@ -3,29 +3,29 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@iconify-json/heroicons": "^1.1.23",
-    "@iconify-json/simple-icons": "^1.1.111",
-    "@iconify-json/vscode-icons": "^1.1.36",
+    "@iconify-json/heroicons": "^1.2.0",
+    "@iconify-json/simple-icons": "^1.2.4",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "^2.13.2",
     "@nuxt/eslint-config": "^0.4.0",
-    "@nuxt/fonts": "^0.7.1",
-    "@nuxt/image": "^1.7.0",
+    "@nuxt/fonts": "^0.8.0",
+    "@nuxt/image": "^1.8.0",
     "@nuxt/ui": "latest",
     "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.3.1-28698404.4d54eb2",
-    "@nuxtjs/plausible": "^1.0.0",
-    "@octokit/rest": "^21.0.1",
-    "@vueuse/nuxt": "^10.11.0",
-    "date-fns": "^3.6.0",
+    "@nuxtjs/plausible": "^1.0.2",
+    "@octokit/rest": "^21.0.2",
+    "@vueuse/nuxt": "^11.1.0",
+    "date-fns": "^4.1.0",
     "eslint": "^8.57.0",
     "joi": "^17.13.3",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.2",
     "nuxt-cloudflare-analytics": "^1.0.8",
-    "nuxt-component-meta": "^0.6.4",
-    "nuxt-og-image": "^3.0.0-rc.64",
+    "nuxt-component-meta": "^0.8.2",
+    "nuxt-og-image": "^3.0.2",
     "prettier": "^3.3.3",
     "ufo": "^1.5.4",
     "v-calendar": "^3.1.2",
-    "valibot": "^0.36.0",
+    "valibot": "^0.42.1",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   }

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.4",
-  "packageManager": "pnpm@9.6.0",
+  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
+  "version": "2.18.6",
+  "packageManager": "pnpm@9.11.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -17,9 +18,6 @@
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": ">=v16.20.2"
-  },
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
@@ -28,58 +26,58 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
+    "typecheck": "vue-tsc --noEmit",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it",
     "test": "vitest"
   },
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
-    "@headlessui/vue": "^1.7.22",
-    "@iconify-json/heroicons": "^1.1.23",
-    "@nuxt/icon": "^1.4.0",
-    "@nuxt/kit": "^3.12.4",
-    "@nuxtjs/color-mode": "^3.4.2",
+    "@headlessui/vue": "^1.7.23",
+    "@iconify-json/heroicons": "^1.2.0",
+    "@nuxt/icon": "^1.5.1",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.11.0",
-    "@vueuse/math": "^10.11.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/integrations": "^11.1.0",
+    "@vueuse/math": "^11.1.0",
     "defu": "^6.1.4",
-    "fuse.js": "^6.6.2",
-    "ohash": "^1.1.3",
+    "fuse.js": "^7.0.0",
+    "ohash": "^1.1.4",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.7"
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.12"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.4.0",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/test-utils": "^3.14.0",
-    "@release-it/conventional-changelog": "^8.0.1",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/test-utils": "^3.14.2",
+    "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "happy-dom": "^14.12.3",
     "joi": "^17.13.3",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
     "unbuild": "^2.0.0",
-    "valibot": "^0.36.0",
+    "valibot": "^0.42.1",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.0.4",
-    "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.29",
+    "vitest": "^2.1.1",
+    "vitest-environment-nuxt": "^1.0.1",
+    "vue-tsc": "^2.1.6",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
-    "nuxt-component-meta": "0.6.4"
+    "@nuxtjs/mdc": "0.9.0"
   }
 }

playground/package.json

@@ -9,6 +9,6 @@
   },
   "dependencies": {
     "@nuxt/ui": "latest",
-    "nuxt": "^3.12.4"
+    "nuxt": "^3.13.2"
   }
 }

renovate.json

@@ -2,9 +2,19 @@
   "extends": [
     "github>nuxt/renovate-config-nuxt"
   ],
+  "lockFileMaintenance": {
+    "enabled": true
+  },
   "ignoreDeps": [
-    "nuxt-component-meta",
+    "@nuxt/eslint-config",
+    "eslint",
+    "happy-dom",
     "valibot30",
     "valibot31"
-  ]
+  ],
+  "baseBranches": ["dev", "v3"],
+  "packageRules": [{
+    "matchBaseBranches": ["v3"],
+    "labels": ["v3"]
+  }]
 }

src/module.ts

@@ -23,12 +23,6 @@ type UI = {
   [key: string]: any
 } & DeepPartial<typeof config, string>
 
-declare module 'nuxt/schema' {
-  interface AppConfigInput {
-    // @ts-ignore
-    ui?: UI
-  }
-}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     // @ts-ignore

src/runtime/components/data/Table.vue

@@ -44,7 +44,7 @@
       </thead>
       <tbody :class="ui.tbody">
         <tr v-if="loadingState && loading && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
             <slot name="loading-state">
               <div :class="ui.loadingState.wrapper">
                 <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
@@ -57,7 +57,7 @@
         </tr>
 
         <tr v-else-if="emptyState && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
             <slot name="empty-state">
               <div :class="ui.emptyState.wrapper">
                 <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
@@ -73,7 +73,7 @@
           <template v-for="(row, index) in rows" :key="index">
             <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
               <td v-if="modelValue" :class="ui.checkbox.padding">
-                <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
+                <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.capture.stop="() => onSelect(row)" />
               </td>
 
               <td
@@ -82,7 +82,7 @@
               >
                 <UButton
                   v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
-                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
+                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'].join(' ') } }"
                   @click="toggleOpened(index)"
                 />
               </td>
@@ -121,7 +121,7 @@ import UProgress from '../elements/Progress.vue'
 import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index'
+import type { Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { table } from '#ui/ui.config'
@@ -232,7 +232,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -326,15 +326,18 @@ export default defineComponent({
     }
 
     function selectAllRows () {
-      props.rows.forEach((row) => {
-        // If the row is already selected, don't select it again
-        if (isSelected(row)) {
-          return
-        }
+      // Create a new array to ensure reactivity
+      const newSelected = [...selected.value]
 
-        // @ts-ignore
-        selected.value.push(row)
+      // If the row is not already selected, add it to the newSelected array
+      props.rows.forEach((row) => {
+        if (!isSelected(row)) {
+          newSelected.push(row)
+        }
       })
+
+      // Reassign the array to trigger Vue's reactivity
+      selected.value = newSelected
     }
 
     function onChange (checked: boolean) {

src/runtime/components/elements/Accordion.vue

@@ -73,7 +73,7 @@ import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
-import type { AccordionItem, Strategy } from '../../types/index'
+import type { AccordionItem, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { accordion, button } from '#ui/ui.config'
@@ -122,7 +122,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Alert.vue

@@ -47,7 +47,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
-import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index'
+import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
 import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -109,7 +109,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Avatar.vue

@@ -27,7 +27,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types/index'
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar } from '#ui/ui.config'
@@ -94,7 +94,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Badge.vue

@@ -11,7 +11,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types/index'
+import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { badge } from '#ui/ui.config'
@@ -54,7 +54,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Button.vue

@@ -25,7 +25,7 @@ import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index'
+import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button } from '#ui/ui.config'
@@ -125,7 +125,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Carousel.vue

@@ -61,7 +61,7 @@ import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
-import type { Strategy, Button } from '../../types/index'
+import type { Strategy, Button, DeepPartial } from '../../types/index'
 import { useUI } from '../../composables/useUI'
 import { useCarouselScroll } from '../../composables/useCarouselScroll'
 import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
@@ -102,7 +102,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<DeepPartial<typeof config & { strategy?: Strategy }>>,
       default: undefined
     }
   },

src/runtime/components/elements/Chip.vue

@@ -16,7 +16,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types/index'
+import type { ChipSize, ChipColor, ChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { chip } from '#ui/ui.config'
@@ -64,7 +64,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Dropdown.vue

@@ -67,7 +67,7 @@ import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'
-import type { DropdownItem, PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { dropdown } from '#ui/ui.config'
@@ -121,7 +121,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Kbd.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { KbdSize, Strategy } from '../../types/index'
+import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { kbd } from '#ui/ui.config'
@@ -36,7 +36,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Link.vue

@@ -23,6 +23,7 @@
       :rel="rel"
       :target="target"
       :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :tabindex="disabled ? -1 : undefined"
       @click="(e) => (!isExternal && !disabled) && navigate(e)"
     >
       <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />

src/runtime/components/elements/Meter.vue

@@ -34,7 +34,7 @@ import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, MeterColor, MeterSize } from '../../types/index'
+import type { Strategy, MeterColor, MeterSize, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter } from '#ui/ui.config'
@@ -94,7 +94,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Progress.vue

@@ -33,7 +33,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index'
+import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { progress } from '#ui/ui.config'
@@ -81,7 +81,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Checkbox.vue

@@ -36,7 +36,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'
@@ -100,7 +100,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Form.vue

@@ -1,11 +1,11 @@
 <template>
   <form @submit.prevent="onSubmit">
-    <slot />
+    <slot v-bind="{ errors }" />
   </form>
 </template>
 
 <script lang="ts">
-import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted } from 'vue'
+import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
@@ -181,7 +181,8 @@ export default defineComponent({
     } as Form<any>)
 
     return {
-      onSubmit
+      onSubmit,
+      errors: readonly(errors)
     }
   }
 })

src/runtime/components/forms/FormGroup.vue

@@ -44,7 +44,7 @@ import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
 import type { Ref, PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types/index'
+import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'
@@ -95,7 +95,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     eagerValidation: {

src/runtime/components/forms/Input.vue

@@ -4,13 +4,12 @@
       :id="inputId"
       ref="input"
       :name="name"
-      :value="modelValue"
       :type="type"
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="inputClass"
-      v-bind="attrs"
+      v-bind="type === 'file' ? attrs : { ...attrs, value: modelValue }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
@@ -41,7 +40,7 @@ import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, Strategy } from '../../types/index'
+import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input } from '#ui/ui.config'
@@ -155,7 +154,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     modelModifiers: {

src/runtime/components/forms/InputMenu.vue

@@ -111,7 +111,7 @@ import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types/index'
+import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input, inputMenu } from '#ui/ui.config'
@@ -270,11 +270,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Radio.vue

@@ -35,7 +35,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
@@ -95,7 +95,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/RadioGroup.vue

@@ -36,7 +36,7 @@ import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'
@@ -91,11 +91,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiRadio: {
-      type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configRadio> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -104,7 +104,7 @@ export default defineComponent({
     const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
     const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
 
-    const { emitFormChange, color, name } = useFormGroup(props, config)
+    const { emitFormChange, color, name } = useFormGroup(props, config, false)
     provide('radio-group', { color, name })
 
     const onUpdate = (value: any) => {

src/runtime/components/forms/Range.vue

@@ -26,7 +26,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { RangeSize, RangeColor, Strategy } from '../../types/index'
+import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { range } from '#ui/ui.config'
@@ -87,7 +87,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Select.vue

@@ -61,7 +61,7 @@ import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types/index'
+import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select } from '#ui/ui.config'
@@ -175,7 +175,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/SelectMenu.vue

@@ -147,7 +147,7 @@ import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types/index'
+import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'
@@ -326,11 +326,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -412,7 +412,7 @@ export default defineComponent({
         variant?.replaceAll('{color}', color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass)
+      ), props.placeholder && (!props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length)) && ui.value.placeholder, props.selectClass)
     })
 
     const isLeading = computed(() => {

src/runtime/components/forms/Textarea.vue

@@ -28,7 +28,7 @@ import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
-import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types/index'
+import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { textarea } from '#ui/ui.config'
@@ -123,7 +123,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     modelModifiers: {
@@ -154,6 +154,8 @@ export default defineComponent({
         }
 
         textarea.value.rows = props.rows
+        const overflow = textarea.value.style.overflow
+        textarea.value.style.overflow = 'hidden'
 
         const styles = window.getComputedStyle(textarea.value)
         const paddingTop = parseInt(styles.paddingTop)
@@ -166,6 +168,8 @@ export default defineComponent({
         if (newRows > props.rows) {
           textarea.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
         }
+
+        textarea.value.style.overflow = overflow
       }
     }
 

src/runtime/components/forms/Toggle.vue

@@ -38,7 +38,7 @@ import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { ToggleSize, ToggleColor, Strategy } from '../../types/index'
+import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { toggle } from '#ui/ui.config'
@@ -104,7 +104,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Card.vue

@@ -22,7 +22,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { card } from '#ui/ui.config'
@@ -41,7 +41,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Container.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { container } from '#ui/ui.config'
@@ -29,7 +29,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Divider.vue

@@ -26,7 +26,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Avatar, DividerSize, Strategy } from '../../types/index'
+import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { divider } from '#ui/ui.config'
@@ -74,7 +74,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Skeleton.vue

@@ -8,7 +8,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { skeleton } from '#ui/ui.config'
@@ -27,7 +27,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Breadcrumb.vue

@@ -41,7 +41,7 @@ import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { BreadcrumbLink, Strategy } from '../../types/index'
+import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'
@@ -68,7 +68,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/CommandPalette.vue

@@ -75,7 +75,7 @@ import UButton from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Group, Command, Button, Strategy } from '../../types/index'
+import type { Group, Command, Button, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
@@ -175,7 +175,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -61,7 +61,7 @@ import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { HorizontalNavigationLink, Strategy } from '../../types/index'
+import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { horizontalNavigation } from '#ui/ui.config'
@@ -86,7 +86,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Pagination.vue

@@ -4,6 +4,7 @@
       <UButton
         v-if="firstButton && showFirst"
         :size="size"
+        :to="to?.(1)"
         :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
@@ -17,6 +18,7 @@
       <UButton
         v-if="prevButton"
         :size="size"
+        :to="to?.(currentPage - 1)"
         :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
@@ -43,6 +45,7 @@
       <UButton
         v-if="nextButton"
         :size="size"
+        :to="to?.(currentPage + 1)"
         :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
@@ -56,6 +59,7 @@
       <UButton
         v-if="lastButton && showLast"
         :size="size"
+        :to="to?.(pages.length)"
         :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
@@ -74,7 +78,7 @@ import type { RouteLocationRaw } from '#vue-router'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Button, ButtonSize, Strategy } from '../../types/index'
+import type { Button, ButtonSize, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'
@@ -164,7 +168,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Tabs.vue

@@ -60,7 +60,7 @@ import { useResizeObserver } from '@vueuse/core'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { TabItem, Strategy } from '../../types/index'
+import type { TabItem, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
@@ -109,7 +109,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -164,6 +164,11 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value)
     })
 
+    watch(() => props.items, async () => {
+      await nextTick()
+      calcMarkerSize(selectedIndex.value)
+    }, { deep: true })
+
     onMounted(async () => {
       await nextTick()
       calcMarkerSize(selectedIndex.value)

src/runtime/components/navigation/VerticalNavigation.vue

@@ -63,7 +63,7 @@ import ULink from '../elements/Link.vue'
 import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { VerticalNavigationLink, Strategy } from '../../types/index'
+import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { verticalNavigation } from '#ui/ui.config'
@@ -89,7 +89,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/ContextMenu.vue

@@ -22,7 +22,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { contextMenu } from '#ui/ui.config'
@@ -49,7 +49,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Modal.vue

@@ -1,13 +1,13 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
       <div :class="ui.inner">
         <div :class="[ui.container, !fullscreen && ui.padding]">
-          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
             <HDialogPanel
               :class="[
                 ui.base,
@@ -32,7 +32,7 @@ import type { PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'
@@ -78,7 +78,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -97,7 +97,7 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition
       }
 
       return {

src/runtime/components/overlays/Notification.vue

@@ -52,7 +52,7 @@ import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index'
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { notification } from '#ui/ui.config'
@@ -115,7 +115,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Notifications.vue

@@ -27,7 +27,7 @@ import UNotification from './Notification.vue'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
 import { mergeConfig } from '../../utils'
-import type { Notification, Strategy } from '../../types/index'
+import type { DeepPartial, Notification, Strategy } from '../../types/index'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -46,7 +46,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Popover.vue

@@ -43,7 +43,7 @@ import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as H
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { popover } from '#ui/ui.config'
@@ -93,7 +93,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Slideover.vue

@@ -1,12 +1,12 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.padding]">
+      <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
+        <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]">
           <slot />
         </HDialogPanel>
       </TransitionChild>
@@ -20,7 +20,7 @@ import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { slideover } from '#ui/ui.config'
@@ -67,7 +67,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -86,7 +86,12 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition & {
+          enterFrom: string
+          enterTo: string
+          leaveFrom: string
+          leaveTo: string
+        }
       }
 
       let enterFrom, leaveTo
@@ -120,6 +125,7 @@ export default defineComponent({
         leaveTo
       }
     })
+
     const sideType = computed(() => {
       switch (props.side) {
       case 'left':

src/runtime/components/overlays/Tooltip.vue

@@ -36,7 +36,7 @@ import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'
@@ -78,7 +78,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/composables/useFormGroup.ts

@@ -12,13 +12,15 @@ type InputProps = {
 }
 
 
-export const useFormGroup = (inputProps?: InputProps, config?: any) => {
+export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolean = true) => {
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
   const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
   const formInputs = inject<any>('form-inputs', undefined)
 
   if (formGroup) {
-    if (inputProps?.id) {
+    if (!bind || inputProps?.legend) {
+      formGroup.inputId.value = undefined
+    } else if (inputProps?.id) {
       // Updates for="..." attribute on label if inputProps.id is provided
       formGroup.inputId.value = inputProps?.id
     }

src/runtime/composables/useUI.ts

@@ -2,9 +2,9 @@ import { computed, toValue, useAttrs } from 'vue'
 import type { Ref } from 'vue'
 import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
-import type { Strategy } from '../types/index'
+import type { DeepPartial, Strategy } from '../types/index'
 
-export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
+export const useUI = <T>(key, $ui?: Ref<DeepPartial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
   const $attrs = useAttrs()
   const appConfig = useAppConfig()
 
@@ -17,7 +17,7 @@ export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | u
       _ui?.strategy || (appConfig.ui?.strategy as Strategy),
       _wrapperClass ? { wrapper: _wrapperClass } : {},
       _ui || {},
-      (process.dev || withAppConfig) ? get(appConfig.ui, key, {}) : {},
+      (import.meta.dev || withAppConfig) ? get(appConfig.ui, key, {}) : {},
       _config || {}
     )
   })

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { get, hexToRgb } from '../utils'
+import { get, parseConfigValue } from '../utils'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
@@ -19,10 +19,10 @@ export default defineNuxtPlugin(() => {
     }
 
     return `:root {
-${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${parseConfigValue(value)};`).join('\n')}
 --color-primary-DEFAULT: var(--color-primary-500);
 
-${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${parseConfigValue(value)};`).join('\n')}
 }
 
 .dark {

src/runtime/types/command-palette.d.ts

@@ -1,4 +1,4 @@
-import Fuse from 'fuse.js'
+import { FuseResultMatch } from 'fuse.js'
 import type { Avatar } from './avatar'
 
 export interface Command {
@@ -13,7 +13,7 @@ export interface Command {
   shortcuts?: string[]
   group?: string
   score?: number
-  matches?: Fuse.FuseResultMatch[]
+  matches?: FuseResultMatch[]
   [key: string]: any
 }
 

src/runtime/ui.config/elements/button.ts

@@ -1,5 +1,5 @@
 export default {
-  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
+  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0',
   font: 'font-medium',
   rounded: 'rounded-md',
   truncate: 'text-left break-all line-clamp-1',
@@ -39,25 +39,25 @@ export default {
   },
   color: {
     white: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
       ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     },
     gray: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 aria-disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
       ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
       link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     },
     black: {
-      solid: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      solid: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
       link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     }
   },
   variant: {
-    solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
-    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
+    solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 dark:aria-disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
+    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
   },
   icon: {
     base: 'flex-shrink-0',

src/runtime/ui.config/elements/carousel.ts

@@ -20,7 +20,7 @@ export default {
     nextButton: {
       color: 'black' as const,
       class: 'rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full',
-      icon: 'i-heroicons-chevron-right-20-solid '
+      icon: 'i-heroicons-chevron-right-20-solid'
     }
   }
 }

src/runtime/ui.config/navigation/tabs.ts

@@ -28,7 +28,7 @@ export default {
       font: 'font-medium',
       rounded: 'rounded-md',
       shadow: '',
-      icon: 'w-4 h-4 flex-shrink-0 mr-2'
+      icon: 'w-4 h-4 flex-shrink-0 me-2'
     }
   }
 }

src/runtime/utils/index.ts

@@ -41,6 +41,14 @@ export function mergeConfig<T> (strategy: Strategy, ...configs): T {
   return defuTwMerge({}, ...configs) as T
 }
 
+const rxHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+
+export function parseConfigValue (value: string) {
+  return rxHex.test(value)
+    ? hexToRgb(value)
+    : value
+}
+
 export function hexToRgb (hex: string) {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
@@ -48,7 +56,7 @@ export function hexToRgb (hex: string) {
     return r + r + g + g + b + b
   })
 
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  const result = rxHex.exec(hex)
   return result
     ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
     : null

src/tailwind.ts

@@ -1,7 +1,6 @@
 import { join } from 'pathe'
 import { defu } from 'defu'
 import { addTemplate, createResolver, installModule, useNuxt } from '@nuxt/kit'
-
 import { setGlobalColors } from './runtime/utils/colors'
 import type { ModuleOptions } from './module'
 
@@ -13,12 +12,10 @@ export default async function installTailwind (
   const runtimeDir = resolve('./runtime')
 
   // 1. register hook
-  // @ts-ignore
   nuxt.hook('tailwindcss:config', function (tailwindConfig) {
     tailwindConfig.theme = tailwindConfig.theme || {}
     tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
-    tailwindConfig.theme.extend.colors =
-      tailwindConfig.theme.extend.colors || {}
+    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
 
     const colors = setGlobalColors(tailwindConfig.theme)
 
@@ -73,14 +70,25 @@ export default async function installTailwind (
     `
   })
 
+  const { configPath: userTwConfigPath = [], ...twModuleConfig } = nuxt.options.tailwindcss ?? {}
+
+  const twConfigPaths = [
+    configTemplate.dst,
+    join(nuxt.options.rootDir, 'tailwind.config')
+  ]
+
+  if (typeof userTwConfigPath === 'string') {
+    twConfigPaths.push(userTwConfigPath)
+  } else {
+    twConfigPaths.push(...userTwConfigPath)
+  }
+
   // 3. install module
   await installModule('@nuxtjs/tailwindcss', defu({
     exposeConfig: true,
-    config: { darkMode: 'class' },
-    configPath: [
-      configTemplate.dst,
-      join(nuxt.options.rootDir, 'tailwind.config')
-    ]
-  // @ts-expect-error - `@nuxtjs/tailwindcss` not installed yet
-  }, nuxt.options.tailwindcss))
+    config: {
+      darkMode: 'class' as const
+    },
+    configPath: twConfigPaths
+  }, twModuleConfig))
 }

test/components/elements/__snapshots__/Button.spec.ts.snap

@@ -1,34 +1,34 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders <UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" /> correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="iconify i-heroicons:pencil-square flex-shrink-0 h-5 w-5" aria-hidden="true"></span>
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="iconify i-heroicons:pencil-square flex-shrink-0 h-5 w-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders basic case correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders black solid correctly 1`] = `
-"<button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
+"<button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders leading icon correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="iconify i-heroicons:check flex-shrink-0 h-5 w-5" aria-hidden="true"></span>label
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="iconify i-heroicons:check flex-shrink-0 h-5 w-5" aria-hidden="true"></span>label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders rounded full correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"