chore(release): v2.18.5

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,31 @@
 # Changelog
 
+## [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/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,7 +181,7 @@ 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"

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

@@ -148,11 +148,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 +359,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.3",
+    "@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.0",
     "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.5",
+  "packageManager": "pnpm@9.10.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",
@@ -35,51 +33,51 @@
   },
   "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.0",
     "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

@@ -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
@@ -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/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/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/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"

src/runtime/components/forms/RadioGroup.vue

@@ -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/Textarea.vue

@@ -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/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 }"

src/runtime/components/navigation/Tabs.vue

@@ -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/overlays/Slideover.vue

@@ -6,7 +6,7 @@
       </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]">
+        <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>

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/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/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>"