chore(release): v2.18.4

Resolves #2018

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.18.4](https://github.com/nuxt/ui/compare/v2.18.3...v2.18.4) (2024-08-05)
+
+
+### Bug Fixes
+
+* **Form:** submit event data ([#2012](https://github.com/nuxt/ui/issues/2012)) ([4d61936](https://github.com/nuxt/ui/commit/4d61936e7e90b664846a8f265825612c509511d7))
+* **module:** handle nested colors from ui config ([#2008](https://github.com/nuxt/ui/issues/2008)) ([1cc7e2a](https://github.com/nuxt/ui/commit/1cc7e2a306e0f3f666b9a588f6ed02e7eabc0272))
+* **module:** reduce css bundle size by fixing safelist regex ([#2005](https://github.com/nuxt/ui/issues/2005)) ([8ac9ca4](https://github.com/nuxt/ui/commit/8ac9ca49789a9a7281f7a40926e7e9a8068cc395))
+* **module:** suffix types imports with `/index` ([7e37668](https://github.com/nuxt/ui/commit/7e37668940d06c5aa20b60d9bfd600d50a171014)), closes [#2018](https://github.com/nuxt/ui/issues/2018)
+* **Tabs:** use `nextTick` before marker calc ([#2020](https://github.com/nuxt/ui/issues/2020)) ([9c04969](https://github.com/nuxt/ui/commit/9c049690227af8aba61a1f7c002b00c5dfeb63ff))
+* **useFormGroup:** app config default input size ([#2011](https://github.com/nuxt/ui/issues/2011)) ([3485092](https://github.com/nuxt/ui/commit/3485092edb55f9ef2ca038a8c137431866d6c28a))
+
 ## [2.18.3](https://github.com/nuxt/ui/compare/v2.18.2...v2.18.3) (2024-07-30)
 
 

docs/components/Footer.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+const { $ui } = useNuxtApp()
+
 const links = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',

docs/components/Header.vue

@@ -54,6 +54,7 @@ defineProps<{
 }>()
 
 const route = useRoute()
+const { $ui } = useNuxtApp()
 const { metaSymbol } = useShortcuts()
 
 const nav = inject<Ref<NavItem[]>>('navigation')

docs/content/1.getting-started/3.theming.md

@@ -23,7 +23,7 @@ export default defineAppConfig({
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
-As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
+As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors or groups, such as `brand.primary`. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
 When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
 

docs/pages/index.vue

@@ -443,6 +443,7 @@ const sectionRef = ref()
 const demoRef = ref(null)
 const start = ref(0)
 
+const { $ui } = useNuxtApp()
 const { height } = useElementSize(demoRef)
 const { top } = useElementBounding(sectionRef)
 const { y } = useWindowScroll()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.3",
+  "version": "2.18.4",
   "packageManager": "pnpm@9.6.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",

renovate.json

@@ -3,10 +3,8 @@
     "github>nuxt/renovate-config-nuxt"
   ],
   "ignoreDeps": [
-    "@nuxt/module-builder",
     "nuxt-component-meta",
     "valibot30",
-    "valibot31",
-    "vue-tsc"
+    "valibot31"
   ]
 }

src/runtime/components/data/Table.vue

@@ -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'
+import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { table } from '#ui/ui.config'

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'
+import type { AccordionItem, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { accordion, button } from '#ui/ui.config'
@@ -194,7 +194,7 @@ export default defineComponent({
       attrs,
       buttonRefs,
       closeOthers,
-      omit,
+      omit: (omit as any),
       onEnter,
       onBeforeLeave,
       onAfterEnter,

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'
+import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index'
 import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'

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'
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar } from '#ui/ui.config'

src/runtime/components/elements/AvatarGroup.ts

@@ -4,7 +4,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UAvatar from './Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
-import type { AvatarSize, Strategy } from '../../types'
+import type { AvatarSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar, avatarGroup } from '#ui/ui.config'

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'
+import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { badge } from '#ui/ui.config'

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'
+import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button } from '#ui/ui.config'

src/runtime/components/elements/ButtonGroup.ts

@@ -4,7 +4,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
 import { useProvideButtonGroup } from '../../composables/useButtonGroup'
-import type { ButtonSize, Strategy } from '../../types'
+import type { ButtonSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button, buttonGroup } from '#ui/ui.config'

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'
+import type { Strategy, Button } from '../../types/index'
 import { useUI } from '../../composables/useUI'
 import { useCarouselScroll } from '../../composables/useCarouselScroll'
 import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'

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'
+import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { chip } from '#ui/ui.config'

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'
+import type { DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { dropdown } from '#ui/ui.config'

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'
+import type { KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { kbd } from '#ui/ui.config'

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'
+import type { Strategy, MeterColor, MeterSize } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter } from '#ui/ui.config'

src/runtime/components/elements/MeterGroup.ts

@@ -5,7 +5,7 @@ import UIcon from '../elements/Icon.vue'
 import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
-import type { Strategy, MeterSize } from '../../types'
+import type { Strategy, MeterSize } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter, meterGroup } from '#ui/ui.config'

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'
+import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { progress } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'

src/runtime/components/forms/Form.vue

@@ -127,16 +127,13 @@ export default defineComponent({
     }
 
     async function onSubmit (payload: Event) {
-      const event = payload as SubmitEvent
+      const event = payload as FormSubmitEvent<any>
       try {
         if (props.validateOn?.includes('submit')) {
           await validate()
         }
-        const submitEvent: FormSubmitEvent<any> = {
-          ...event,
-          data: props.state
-        }
-        emit('submit', submitEvent)
+        event.data = props.state
+        emit('submit', event)
       } catch (error) {
         if (!(error instanceof FormException)) {
           throw error

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'
+import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'

src/runtime/components/forms/Input.vue

@@ -41,7 +41,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'
+import type { InputSize, InputColor, InputVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input } from '#ui/ui.config'

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'
+import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input, inputMenu } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'

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'
+import type { RangeSize, RangeColor, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { range } from '#ui/ui.config'

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'
+import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select } from '#ui/ui.config'

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'
+import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'

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'
+import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { textarea } from '#ui/ui.config'

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'
+import type { ToggleSize, ToggleColor, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { toggle } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { card } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { container } from '#ui/ui.config'

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'
+import type { Avatar, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { divider } from '#ui/ui.config'

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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { skeleton } from '#ui/ui.config'

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'
+import type { BreadcrumbLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'

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'
+import type { Group, Command, Button, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -76,7 +76,7 @@ import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
-import type { Command, Group } from '../../types'
+import type { Command, Group } from '../../types/index'
 import { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'
 

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'
+import type { HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { horizontalNavigation } from '#ui/ui.config'

src/runtime/components/navigation/Pagination.vue

@@ -74,7 +74,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'
+import type { Button, ButtonSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'

src/runtime/components/navigation/Tabs.vue

@@ -53,14 +53,14 @@
 </template>
 
 <script lang="ts">
-import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
+import { toRef, ref, watch, onMounted, defineComponent, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 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'
+import type { TabItem, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
@@ -164,7 +164,10 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value)
     })
 
-    onMounted(() => calcMarkerSize(selectedIndex.value))
+    onMounted(async () => {
+      await nextTick()
+      calcMarkerSize(selectedIndex.value)
+    })
 
     provideUseId(() => useId())
 

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'
+import type { VerticalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { verticalNavigation } from '#ui/ui.config'

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'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { contextMenu } from '#ui/ui.config'

src/runtime/components/overlays/Modal.vue

@@ -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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'

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'
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { notification } from '#ui/ui.config'

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'
+import type { Notification, Strategy } from '../../types/index'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'

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'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { popover } from '#ui/ui.config'

src/runtime/components/overlays/Slideover.vue

@@ -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'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { slideover } from '#ui/ui.config'
@@ -165,4 +165,4 @@ export default defineComponent({
     }
   }
 })
-</script>
+</script>

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'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'

src/runtime/composables/useFormGroup.ts

@@ -1,10 +1,6 @@
 import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
-import { mergeConfig } from '../utils'
-// @ts-expect-error
-import appConfig from '#build/app.config'
-import { formGroup } from '#ui/ui.config'
 
 type InputProps = {
   id?: string
@@ -16,8 +12,6 @@ type InputProps = {
 }
 
 
-const formGroupConfig = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
-
 export const useFormGroup = (inputProps?: InputProps, config?: any) => {
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
   const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
@@ -62,7 +56,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     name: computed(() => inputProps?.name ?? formGroup?.name.value),
     size: computed(() => {
       const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
-      return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size
+      return inputProps?.size ?? formGroupSize ?? config.default?.size
     }),
     color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),
     emitFormBlur,

src/runtime/composables/useUI.ts

@@ -2,7 +2,7 @@ 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'
+import type { 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) => {
   const $attrs = useAttrs()

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { hexToRgb } from '../utils'
+import { get, hexToRgb } from '../utils'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
@@ -8,8 +8,8 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
 
   const root = computed(() => {
-    const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
-    const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
+    const primary: Record<string, string> | undefined = get(colors, appConfig.ui.primary)
+    const gray: Record<string, string> | undefined = get(colors, appConfig.ui.gray)
 
     if (!primary) {
       console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)

src/runtime/utils/colors.ts

@@ -19,193 +19,193 @@ const colorsToExclude = [
 
 const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
   alert: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
   avatar: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }],
   badge: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
   button: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
     variants: ['hover', 'disabled']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-100$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:disabled']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`),
     variants: ['disabled', 'dark:hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-600`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-600$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-900$`),
     variants: ['dark:hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-950$`),
     variants: ['dark', 'dark:hover', 'dark:disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`),
     variants: ['dark:hover', 'disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-600`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-600$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^outline-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^outline-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   input: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:focus']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus']
   }],
   radio: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   checkbox: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   toggle: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   range: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   progress: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   meter: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   notification: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   chip: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }]
 }
 
@@ -324,7 +324,15 @@ export const customSafelistExtractor = (prefix: string, content: string, colors:
 
         return matches.map(match => {
           const colorOptions = match.substring(1, match.length - 1).split('|')
-          return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
+          return colorOptions.map(
+            color => {
+              const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
+              if (variant) {
+                return `${variant}:${classesExtracted}`
+              }
+              return classesExtracted
+            }
+          )
         }).flat()
       })
     })

src/runtime/utils/index.ts

@@ -1,6 +1,6 @@
 import { defu, createDefu } from 'defu'
 import { extendTailwindMerge } from 'tailwind-merge'
-import type { Strategy } from '../types'
+import type { Strategy } from '../types/index'
 
 const customTwMerge = extendTailwindMerge<string, string>({
   extend: {

test/colors.spec.ts

@@ -24,17 +24,17 @@ describe('generateSafelist', () => {
     [
       'default safelist',
       {}, [],
-      ['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
+      ['^bg-(primary)-50$', '^bg-(red)-500$'] // these both should be in the safelist
     ],
     [
       'safelisting single new color',
       {}, ['myColor'],
-      'bg-(myColor|primary)-50'
+      '^bg-(myColor|primary)-50$'
     ],
     [
       'reducing amount of theme colors',
       { theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
-      ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
+      ['^bg-(plainBlue|primary)-50$', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
     ]
   ])('%s', async (_description, tailwindConfig: Partial<TWConfig>, safelistColors, safelistPatterns) => {
     safelistColors.push('primary')