@nuxt/ui 2.18.3 → 2.18.5

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;
@@ -36,7 +36,7 @@ declare const config: {
         placement: string;
     };
 };
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: any;
@@ -71,7 +71,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
-}, {
+}>, {
     ui: import("vue").ComputedRef<{
         wrapper: string;
         container: string;
@@ -112,12 +112,12 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     popper: import("vue").ComputedRef<PopperOptions>;
-    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
-    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
-    open: import("vue").Ref<boolean>;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement, import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement, import("@vueuse/core").MaybeElement>;
+    open: import("vue").Ref<boolean, boolean>;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: any;
@@ -152,7 +152,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
-}>>, {
+}>> & Readonly<{}>, {
     class: any;
     popper: PopperOptions;
     text: string;
@@ -161,5 +161,103 @@ declare const _default: import("vue").DefineComponent<{
     closeDelay: number;
     shortcuts: string[];
     prevent: boolean;
-}, {}>;
+}, {}, {
+    UKbd: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        value: {
+            type: StringConstructor;
+            default: any;
+        };
+        size: {
+            type: PropType<import("../../types/kbd").KbdSize>;
+            default: () => string;
+            validator(value: string): boolean;
+        };
+        class: {
+            type: PropType<any>;
+            default: () => "";
+        };
+        ui: {
+            type: PropType<Partial<{
+                base: string;
+                padding: string;
+                size: {
+                    xs: string;
+                    sm: string;
+                    md: string;
+                };
+                rounded: string;
+                font: string;
+                background: string;
+                ring: string;
+                default: {
+                    size: string;
+                };
+            }> & {
+                strategy?: Strategy;
+            }>;
+            default: () => {};
+        };
+    }>, {
+        ui: import("vue").ComputedRef<{
+            base: string;
+            padding: string;
+            size: {
+                xs: string;
+                sm: string;
+                md: string;
+            };
+            rounded: string;
+            font: string;
+            background: string;
+            ring: string;
+            default: {
+                size: string;
+            };
+        }>;
+        attrs: import("vue").ComputedRef<Pick<{
+            [x: string]: unknown;
+        }, string>>;
+        kbdClass: import("vue").ComputedRef<string>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        value: {
+            type: StringConstructor;
+            default: any;
+        };
+        size: {
+            type: PropType<import("../../types/kbd").KbdSize>;
+            default: () => string;
+            validator(value: string): boolean;
+        };
+        class: {
+            type: PropType<any>;
+            default: () => "";
+        };
+        ui: {
+            type: PropType<Partial<{
+                base: string;
+                padding: string;
+                size: {
+                    xs: string;
+                    sm: string;
+                    md: string;
+                };
+                rounded: string;
+                font: string;
+                background: string;
+                ring: string;
+                default: {
+                    size: string;
+                };
+            }> & {
+                strategy?: Strategy;
+            }>;
+            default: () => {};
+        };
+    }>> & Readonly<{}>, {
+        size: import("../../types/kbd").KbdSize;
+        class: any;
+        ui: {};
+        value: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -6,10 +6,10 @@ type InputProps = {
     eagerValidation?: boolean;
     legend?: string | null;
 };
-export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
+export declare const useFormGroup: (inputProps?: InputProps, config?: any, bind?: boolean) => {
     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,17 @@
 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) => {
+export const useFormGroup = (inputProps, config, bind = true) => {
   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 (inputProps?.id) {
-      formGroup2.inputId.value = inputProps?.id;
+  if (formGroup) {
+    if (!bind || inputProps.legend) {
+      formGroup.inputId.value = void 0;
+    } else if (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 +21,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/useModal.d.ts

@@ -7,7 +7,7 @@ declare function _useModal(): {
     close: () => Promise<void>;
     reset: () => void;
     patch: <T extends Component = {}>(props: Partial<Modal & ComponentProps<T>>) => void;
-    isOpen: import("vue").Ref<boolean>;
+    isOpen: import("vue").Ref<boolean, boolean>;
 };
 export declare const useModal: typeof _useModal;
 export {};

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

@@ -4,7 +4,268 @@ import type { Instance } from '@popperjs/core';
 import type { MaybeElement } from '@vueuse/core';
 import type { PopperOptions } from '../types/popper.js';
 export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>>) => Instance;
-export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, arrow, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
+export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, arrow, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement, MaybeElement>, Ref<MaybeElement, MaybeElement>, Ref<{
+    state: {
+        elements: {
+            reference: Element | {
+                getBoundingClientRect: () => ClientRect | DOMRect;
+                contextElement?: Element;
+            };
+            popper: HTMLElement;
+            arrow?: HTMLElement;
+        };
+        options: {
+            placement: import("@popperjs/core").Placement;
+            modifiers: any[];
+            strategy: import("@popperjs/core").PositioningStrategy;
+            onFirstUpdate?: (arg0: Partial<import("@popperjs/core").State>) => void;
+        };
+        placement: import("@popperjs/core").Placement;
+        strategy: import("@popperjs/core").PositioningStrategy;
+        orderedModifiers: {
+            name: any;
+            enabled: boolean;
+            phase: import("@popperjs/core").ModifierPhases;
+            requires?: Array<string>;
+            requiresIfExists?: Array<string>;
+            fn: (arg0: import("@popperjs/core").ModifierArguments<any>) => import("@popperjs/core").State | void;
+            effect?: (arg0: import("@popperjs/core").ModifierArguments<any>) => (() => void) | void;
+            options?: Partial<any>;
+            data?: import("@popperjs/core").Obj;
+        }[];
+        rects: {
+            reference: {
+                width: number;
+                height: number;
+                x: number;
+                y: number;
+            };
+            popper: {
+                width: number;
+                height: number;
+                x: number;
+                y: number;
+            };
+        };
+        scrollParents: {
+            reference: (Element | {
+                innerHeight: number;
+                offsetHeight: number;
+                innerWidth: number;
+                offsetWidth: number;
+                pageXOffset: number;
+                pageYOffset: number;
+                getComputedStyle: typeof getComputedStyle;
+                addEventListener: (type: any, listener: any, optionsOrUseCapture?: any) => void;
+                removeEventListener: (type: any, listener: any, optionsOrUseCapture?: any) => void;
+                Element: Element;
+                HTMLElement: HTMLElement;
+                Node: Node;
+                toString: () => "[object Window]";
+                devicePixelRatio: number;
+                visualViewport?: {
+                    addEventListener: {
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                    };
+                    dispatchEvent: {
+                        (event: Event): boolean;
+                        (event: Event): boolean;
+                    };
+                    removeEventListener: {
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                    };
+                    width: number;
+                    height: number;
+                    offsetLeft: number;
+                    offsetTop: number;
+                    scale: number;
+                };
+                ShadowRoot: ShadowRoot;
+            } | {
+                addEventListener: {
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                };
+                dispatchEvent: {
+                    (event: Event): boolean;
+                    (event: Event): boolean;
+                };
+                removeEventListener: {
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                };
+                width: number;
+                height: number;
+                offsetLeft: number;
+                offsetTop: number;
+                scale: number;
+            })[];
+            popper: (Element | {
+                innerHeight: number;
+                offsetHeight: number;
+                innerWidth: number;
+                offsetWidth: number;
+                pageXOffset: number;
+                pageYOffset: number;
+                getComputedStyle: typeof getComputedStyle;
+                addEventListener: (type: any, listener: any, optionsOrUseCapture?: any) => void;
+                removeEventListener: (type: any, listener: any, optionsOrUseCapture?: any) => void;
+                Element: Element;
+                HTMLElement: HTMLElement;
+                Node: Node;
+                toString: () => "[object Window]";
+                devicePixelRatio: number;
+                visualViewport?: {
+                    addEventListener: {
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                    };
+                    dispatchEvent: {
+                        (event: Event): boolean;
+                        (event: Event): boolean;
+                    };
+                    removeEventListener: {
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                        (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                    };
+                    width: number;
+                    height: number;
+                    offsetLeft: number;
+                    offsetTop: number;
+                    scale: number;
+                };
+                ShadowRoot: ShadowRoot;
+            } | {
+                addEventListener: {
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+                };
+                dispatchEvent: {
+                    (event: Event): boolean;
+                    (event: Event): boolean;
+                };
+                removeEventListener: {
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                    (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+                };
+                width: number;
+                height: number;
+                offsetLeft: number;
+                offsetTop: number;
+                scale: number;
+            })[];
+        };
+        styles: {
+            [key: string]: Partial<CSSStyleDeclaration>;
+        };
+        attributes: {
+            [key: string]: {
+                [key: string]: string | boolean;
+            };
+        };
+        modifiersData: {
+            [x: string]: any;
+            arrow?: {
+                x?: number;
+                y?: number;
+                centerOffset: number;
+            };
+            hide?: {
+                isReferenceHidden: boolean;
+                hasPopperEscaped: boolean;
+                referenceClippingOffsets: {
+                    top: number;
+                    left: number;
+                    right: number;
+                    bottom: number;
+                };
+                popperEscapeOffsets: {
+                    top: number;
+                    left: number;
+                    right: number;
+                    bottom: number;
+                };
+            };
+            offset?: {
+                "bottom-end"?: {
+                    y: number;
+                    x: number;
+                };
+                "bottom-start"?: {
+                    y: number;
+                    x: number;
+                };
+                bottom?: {
+                    y: number;
+                    x: number;
+                };
+                left?: {
+                    y: number;
+                    x: number;
+                };
+                right?: {
+                    y: number;
+                    x: number;
+                };
+                top?: {
+                    y: number;
+                    x: number;
+                };
+                auto?: {
+                    y: number;
+                    x: number;
+                };
+                "auto-start"?: {
+                    y: number;
+                    x: number;
+                };
+                "auto-end"?: {
+                    y: number;
+                    x: number;
+                };
+                "top-start"?: {
+                    y: number;
+                    x: number;
+                };
+                "top-end"?: {
+                    y: number;
+                    x: number;
+                };
+                "right-start"?: {
+                    y: number;
+                    x: number;
+                };
+                "right-end"?: {
+                    y: number;
+                    x: number;
+                };
+                "left-start"?: {
+                    y: number;
+                    x: number;
+                };
+                "left-end"?: {
+                    y: number;
+                    x: number;
+                };
+            };
+            preventOverflow?: {
+                y: number;
+                x: number;
+            };
+            popperOffsets?: {
+                y: number;
+                x: number;
+            };
+        };
+        reset: boolean;
+    };
+    destroy: () => void;
+    forceUpdate: () => void;
+    update: () => Promise<Partial<import("@popperjs/core").State>>;
+    setOptions: (setOptionsAction: Partial<import("@popperjs/core").OptionsGeneric<any>> | ((prev: Partial<import("@popperjs/core").OptionsGeneric<any>>) => Partial<import("@popperjs/core").OptionsGeneric<any>>)) => Promise<Partial<import("@popperjs/core").State>>;
+}, Instance | {
     state: {
         elements: {
             reference: Element | {

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

@@ -1,12 +1,12 @@
 export declare const _useShortcuts: () => {
     macOS: import("vue").ComputedRef<RegExpMatchArray>;
-    metaSymbol: import("vue").Ref<string>;
-    activeElement: import("vue").Ref<HTMLElement>;
+    metaSymbol: import("vue").Ref<string, string>;
+    activeElement: import("vue").Ref<HTMLElement, HTMLElement>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };
 export declare const useShortcuts: () => {
     macOS: import("vue").ComputedRef<RegExpMatchArray>;
-    metaSymbol: import("vue").Ref<string>;
-    activeElement: import("vue").Ref<HTMLElement>;
+    metaSymbol: import("vue").Ref<string, string>;
+    activeElement: import("vue").Ref<HTMLElement, HTMLElement>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };

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

@@ -7,7 +7,7 @@ declare function _useSlideover(): {
     close: () => Promise<void>;
     reset: () => void;
     patch: <T extends Component = {}>(props: Partial<Slideover & ComponentProps<T>>) => void;
-    isOpen: import("vue").Ref<boolean>;
+    isOpen: import("vue").Ref<boolean, boolean>;
 };
 export declare const useSlideover: typeof _useSlideover;
 export {};

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, parseConfigValue } 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`);
     }
@@ -15,10 +15,10 @@ export default defineNuxtPlugin(() => {
       console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`);
     }
     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 {

package/dist/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
 }
 

package/dist/runtime/ui.config/elements/button.js

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

package/dist/runtime/ui.config/elements/carousel.js

@@ -20,7 +20,7 @@ export default {
     nextButton: {
       color: "black",
       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"
     }
   }
 };