@nuxt/ui 2.18.3 → 2.18.4

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.3",
+  "version": "2.18.4",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.18.3";
+const version = "2.18.4";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

package/dist/runtime/components/data/Table.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, AriaAttributes } from 'vue';
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types.js';
+import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -1,6 +1,5 @@
 import type { PropType } from 'vue';
-import { omit } from '../../utils.js';
-import type { AccordionItem, Strategy } from '../../types.js';
+import type { AccordionItem, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -169,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
         close: (e: EventTarget) => {};
     }[]>;
     closeOthers: (currentIndex: number, e: Event) => void;
-    omit: typeof omit;
+    omit: any;
     onEnter: (_el: Element, done: () => void) => void;
     onBeforeLeave: (_el: Element) => void;
     onAfterEnter: (_el: Element) => void;

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types.js';
+import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     inner: string;

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types.js';
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     background: string;

package/dist/runtime/components/elements/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { AvatarSize, Strategy } from '../../types.js';
+import type { AvatarSize, Strategy } from '../../types/index.js';
 declare const avatarGroupConfig: {
     wrapper: string;
     ring: string;

package/dist/runtime/components/elements/Badge.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types.js';
+import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     rounded: string;

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types.js';
+import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     font: string;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ButtonSize, Strategy } from '../../types.js';
+import type { ButtonSize, Strategy } from '../../types/index.js';
 declare const buttonGroupConfig: {
     wrapper: {
         horizontal: string;

package/dist/runtime/components/elements/Carousel.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy, Button } from '../../types.js';
+import type { Strategy, Button } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types.js';
+import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { DropdownItem, PopperOptions, Strategy } from '../../types.js';
+import type { DropdownItem, PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/elements/Kbd.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { KbdSize, Strategy } from '../../types.js';
+import type { KbdSize, Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     padding: string;

package/dist/runtime/components/elements/Meter.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SlotsType, PropType } from 'vue';
-import type { Strategy, MeterColor, MeterSize } from '../../types.js';
+import type { Strategy, MeterColor, MeterSize } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     indicator: {

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -1,6 +1,6 @@
 import type { VNode, SlotsType, PropType } from 'vue';
 import Meter from './Meter.vue.js';
-import type { Strategy, MeterSize } from '../../types.js';
+import type { Strategy, MeterSize } from '../../types/index.js';
 declare const meterGroupConfig: {
     wrapper: string;
     base: string;

package/dist/runtime/components/elements/Progress.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types.js';
+import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     indicator: {

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 import colors from '#ui-colors';
 declare const config: {
     wrapper: string;

package/dist/runtime/components/forms/Form.vue

@@ -100,11 +100,8 @@ export default defineComponent({
         if (props.validateOn?.includes("submit")) {
           await validate();
         }
-        const submitEvent = {
-          ...event,
-          data: props.state
-        };
-        emit("submit", submitEvent);
+        event.data = props.state;
+        emit("submit", event);
       } catch (error) {
         if (!(error instanceof FormException)) {
           throw error;

package/dist/runtime/components/forms/FormGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, PropType } from 'vue';
-import type { FormGroupSize, Strategy } from '../../types.js';
+import type { FormGroupSize, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     inner: string;

package/dist/runtime/components/forms/Input.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { InputSize, InputColor, InputVariant, Strategy } from '../../types.js';
+import type { InputSize, InputColor, InputVariant, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/forms/InputMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types.js';
+import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 import colors from '#ui-colors';
 declare const config: {
     wrapper: string;

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 import colors from '#ui-colors';
 declare const config: {
     wrapper: string;

package/dist/runtime/components/forms/Range.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { RangeSize, RangeColor, Strategy } from '../../types.js';
+import type { RangeSize, RangeColor, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, ComputedRef } from 'vue';
-import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types.js';
+import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types/index.js';
 declare const config: {
     form: string;
     placeholder: string;

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types.js';
+import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     form: string;
     placeholder: string;

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types.js';
+import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types/index.js';
 declare const config: {
     form: string;
     default: {

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ToggleSize, ToggleColor, Strategy } from '../../types.js';
+import type { ToggleSize, ToggleColor, Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     rounded: string;

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     background: string;

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     padding: string;

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, DividerSize, Strategy } from '../../types.js';
+import type { Avatar, DividerSize, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: {
         base: string;

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     background: string;

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { BreadcrumbLink, Strategy } from '../../types.js';
+import type { BreadcrumbLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     ol: string;

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command, Button, Strategy } from '../../types.js';
+import type { Group, Command, Button, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Command, Group } from '../../types.js';
+import type { Command, Group } from '../../types/index.js';
 import { commandPalette } from '#ui/ui.config';
 declare const _default: import("vue").DefineComponent<{
     group: {

package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { HorizontalNavigationLink, Strategy } from '../../types.js';
+import type { HorizontalNavigationLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { RouteLocationRaw } from '#vue-router';
-import type { Button, ButtonSize, Strategy } from '../../types.js';
+import type { Button, ButtonSize, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/navigation/Tabs.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { toRef, ref, watch, onMounted, defineComponent } from "vue";
+import { toRef, ref, watch, onMounted, defineComponent, nextTick } 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";
@@ -143,7 +143,10 @@ export default defineComponent({
       selectedIndex.value = value;
       calcMarkerSize(selectedIndex.value);
     });
-    onMounted(() => calcMarkerSize(selectedIndex.value));
+    onMounted(async () => {
+      await nextTick();
+      calcMarkerSize(selectedIndex.value);
+    });
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/components/navigation/Tabs.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { TabItem, Strategy } from '../../types.js';
+import type { TabItem, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { VerticalNavigationLink, Strategy } from '../../types.js';
+import type { VerticalNavigationLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     inner: string;

package/dist/runtime/components/overlays/Notification.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types.js';
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/overlays/Notifications.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Notification, Strategy } from '../../types.js';
+import type { Notification, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     position: string;
@@ -33,13 +33,13 @@ declare const _default: import("vue").DefineComponent<{
             title?: string;
             description?: string;
             icon?: string;
-            avatar?: import("../../types").Avatar;
-            closeButton?: import("../../types").Button;
+            avatar?: import("../../types/avatar").Avatar;
+            closeButton?: import("../../types/button").Button;
             timeout?: number;
-            actions?: import("../../types").NotificationAction[];
+            actions?: import("../../types/notification").NotificationAction[];
             click?: (...args: any[]) => void;
             callback?: (...args: any[]) => void;
-            color?: import("../../types").NotificationColor;
+            color?: import("../../types/notification").NotificationColor;
             ui?: any;
         };
         remove: (id: string) => void;

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/overlays/Slideover.vue

@@ -149,4 +149,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -1,5 +1,5 @@
 import type { WritableComputedRef, PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     overlay: {

package/dist/runtime/components/overlays/Tooltip.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/composables/useFormGroup.d.ts

@@ -9,7 +9,7 @@ type InputProps = {
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
     inputId: import("vue").ComputedRef<string>;
     name: import("vue").ComputedRef<string>;
-    size: import("vue").ComputedRef<string | number | symbol>;
+    size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string>;
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/shared").PromisifyFn<() => void>;

package/dist/runtime/composables/useFormGroup.js

@@ -1,19 +1,15 @@
 import { inject, ref, computed } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-import { mergeConfig } from "../utils/index.js";
-import appConfig from "#build/app.config";
-import { formGroup } from "#ui/ui.config";
-const formGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup);
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
-  const formGroup2 = inject("form-group", void 0);
+  const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
-  if (formGroup2) {
+  if (formGroup) {
     if (inputProps?.id) {
-      formGroup2.inputId.value = inputProps?.id;
+      formGroup.inputId.value = inputProps?.id;
     }
     if (formInputs) {
-      formInputs.value[formGroup2.name.value] = formGroup2.inputId.value;
+      formInputs.value[formGroup.name.value] = formGroup.inputId.value;
     }
   }
   const blurred = ref(false);
@@ -23,25 +19,25 @@ export const useFormGroup = (inputProps, config) => {
     }
   }
   function emitFormBlur() {
-    emitFormEvent("blur", formGroup2?.name.value);
+    emitFormEvent("blur", formGroup?.name.value);
     blurred.value = true;
   }
   function emitFormChange() {
-    emitFormEvent("change", formGroup2?.name.value);
+    emitFormEvent("change", formGroup?.name.value);
   }
   const emitFormInput = useDebounceFn(() => {
-    if (blurred.value || formGroup2?.eagerValidation.value) {
-      emitFormEvent("input", formGroup2?.name.value);
+    if (blurred.value || formGroup?.eagerValidation.value) {
+      emitFormEvent("input", formGroup?.name.value);
     }
   }, 300);
   return {
-    inputId: computed(() => inputProps?.id ?? formGroup2?.inputId.value),
-    name: computed(() => inputProps?.name ?? formGroup2?.name.value),
+    inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value),
+    name: computed(() => inputProps?.name ?? formGroup?.name.value),
     size: computed(() => {
-      const formGroupSize = config.size[formGroup2?.size.value] ? formGroup2?.size.value : null;
-      return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size;
+      const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;
+      return inputProps?.size ?? formGroupSize ?? config.default?.size;
     }),
-    color: computed(() => formGroup2?.error?.value ? "red" : inputProps?.color),
+    color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,
     emitFormChange

package/dist/runtime/composables/useUI.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { Strategy } from '../types.js';
+import type { Strategy } from '../types/index.js';
 export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
     strategy?: Strategy;
 }) | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {

package/dist/runtime/plugins/colors.js

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

package/dist/runtime/utils/colors.js

@@ -16,193 +16,193 @@ const colorsToExclude = [
 ];
 const safelistByComponent = {
   alert: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   avatar: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }],
   badge: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   button: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`),
     variants: ["hover", "disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-100$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`),
     variants: ["disabled", "dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-900$`),
     variants: ["dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-950$`),
     variants: ["dark", "dark:hover", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`),
     variants: ["dark:hover", "disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   input: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:focus"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus"]
   }],
   radio: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   checkbox: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   toggle: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   range: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   progress: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   meter: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   notification: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   chip: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }]
 };
 const safelistComponentAliasesMap = {
@@ -289,7 +289,15 @@ export const customSafelistExtractor = (prefix, content, colors, safelistColors)
         const matches2 = group.pattern.source.match(/\(([^)]+)\)/g);
         return matches2.map((match2) => {
           const colorOptions = match2.substring(1, match2.length - 1).split("|");
-          return colorOptions.map((color2) => `${variant ? variant + ":" : ""}` + group.pattern.source.replace(match2, color2));
+          return colorOptions.map(
+            (color2) => {
+              const classesExtracted = group.pattern.source.replace(match2, color2).replace("^", "").replace("$", "");
+              if (variant) {
+                return `${variant}:${classesExtracted}`;
+              }
+              return classesExtracted;
+            }
+          );
         }).flat();
       });
     });

package/dist/runtime/utils/index.d.ts

@@ -1,4 +1,4 @@
-import type { Strategy } from '../types.js';
+import type { Strategy } from '../types/index.js';
 export declare function mergeConfig<T>(strategy: Strategy, ...configs: any[]): T;
 export declare function hexToRgb(hex: string): string;
 export declare function getSlotsChildren(slots: any): any;

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