vuetify 3.3.13 → 3.3.15

package/lib/components/VCheckbox/index.d.mts

@@ -18,6 +18,8 @@ type SelectionControlSlot = {
     model: WritableComputedRef<any>;
     textColorClasses: Ref<string[]>;
     textColorStyles: Ref<CSSProperties>;
+    backgroundColorClasses: Ref<string[]>;
+    backgroundColorStyles: Ref<CSSProperties>;
     inputNode: VNode;
     icon: IconValue | undefined;
     props: {
@@ -27,13 +29,13 @@ type SelectionControlSlot = {
     };
 };
 
+type ValidationResult = string | boolean;
+type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
 type VMessageSlot = {
     message: string;
 };
 
-type ValidationResult = string | boolean;
-type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
-
 interface VInputSlot {
     id: ComputedRef<string>;
     messagesId: ComputedRef<string>;
@@ -81,12 +83,18 @@ declare const VCheckbox: {
             value?: any;
             label?: string | undefined;
             class?: any;
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            $children?: vue.VNodeChild | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | {
                 message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+                details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                default?: ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -97,13 +105,19 @@ declare const VCheckbox: {
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
             theme?: string | undefined;
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:default"?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
-                prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
                 message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+                details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                default?: false | ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: false | ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -179,19 +193,22 @@ declare const VCheckbox: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            message?: ((arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
-            prepend?: ((arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            details?: ((arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
             append?: ((arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
-            details?: ((arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            prepend?: ((arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
-            message?: ((arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default?: ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
             label?: ((arg: {
@@ -252,12 +269,18 @@ declare const VCheckbox: {
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
         } & {
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            $children?: vue.VNodeChild | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | {
                 message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+                details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                default?: ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -265,11 +288,14 @@ declare const VCheckbox: {
                 input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
             };
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
-                prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
                 message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+                details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+                default?: false | ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: false | ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -277,11 +303,14 @@ declare const VCheckbox: {
                 input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-            "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            "v-slot:default"?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             "v-slot:label"?: false | ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -315,19 +344,22 @@ declare const VCheckbox: {
             centerAffix: boolean;
             persistentHint: boolean;
         }, {}, string, vue.SlotsType<Partial<{
-            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            message: (arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
-            prepend: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            details: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
             append: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
-            details: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            prepend: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
-            message: (arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default: (arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
             label: (arg: {
@@ -403,12 +435,18 @@ declare const VCheckbox: {
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        $children?: vue.VNodeChild | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | {
             message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            default?: ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             label?: ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -416,11 +454,14 @@ declare const VCheckbox: {
             input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
-            prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-            details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
             message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            default?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             label?: false | ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -428,11 +469,14 @@ declare const VCheckbox: {
             input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:default"?: false | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         "v-slot:label"?: false | ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -489,12 +533,18 @@ declare const VCheckbox: {
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
-        prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    $children?: vue.VNodeChild | ((arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNodeChild) | {
         message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        default?: ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         label?: ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -502,11 +552,14 @@ declare const VCheckbox: {
         input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
     };
     'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-        prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-        details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
         message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        default?: false | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         label?: false | ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -514,11 +567,14 @@ declare const VCheckbox: {
         input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-    "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
-    "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:default"?: false | ((arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNodeChild) | undefined;
     "v-slot:label"?: false | ((arg: {
         label: string | undefined;
         props: Record<string, unknown>;
@@ -552,19 +608,22 @@ declare const VCheckbox: {
     centerAffix: boolean;
     persistentHint: boolean;
 }, {}, string, vue.SlotsType<Partial<{
-    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    message: (arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-    prepend: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    details: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
     append: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-    details: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    prepend: (arg: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-    message: (arg: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    default: (arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
     label: (arg: {
@@ -783,21 +842,33 @@ declare const VCheckboxBtn: {
             value?: any;
             label?: string | undefined;
             class?: any;
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
+            $children?: vue.VNodeChild | {
+                default?: ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
                 }) => vue.VNodeChild) | undefined;
                 input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            };
+            } | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild);
             ref?: vue.VNodeRef | undefined;
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
             theme?: string | undefined;
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:default"?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
+                default?: false | ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: false | ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -861,7 +932,10 @@ declare const VCheckboxBtn: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default?: ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
             label?: ((arg: {
@@ -906,16 +980,25 @@ declare const VCheckboxBtn: {
             trueValue?: any;
             falseValue?: any;
         } & {
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
+            $children?: vue.VNodeChild | {
+                default?: ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
                 }) => vue.VNodeChild) | undefined;
                 input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            };
+            } | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild);
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
+                default?: false | ((arg: {
+                    backgroundColorClasses: vue.Ref<string[]>;
+                    backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+                }) => vue.VNodeChild) | undefined;
                 label?: false | ((arg: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -923,7 +1006,10 @@ declare const VCheckboxBtn: {
                 input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:default"?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             "v-slot:label"?: false | ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -950,7 +1036,10 @@ declare const VCheckboxBtn: {
             valueComparator: typeof deepEqual;
             indeterminateIcon: IconValue;
         }, {}, string, vue.SlotsType<Partial<{
-            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default: (arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
             label: (arg: {
@@ -1010,16 +1099,25 @@ declare const VCheckboxBtn: {
         trueValue?: any;
         falseValue?: any;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
+        $children?: vue.VNodeChild | {
+            default?: ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             label?: ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
             input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
-        };
+        } | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild);
         'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
+            default?: false | ((arg: {
+                backgroundColorClasses: vue.Ref<string[]>;
+                backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            }) => vue.VNodeChild) | undefined;
             label?: false | ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -1027,7 +1125,10 @@ declare const VCheckboxBtn: {
             input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:default"?: false | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         "v-slot:label"?: false | ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -1068,16 +1169,25 @@ declare const VCheckboxBtn: {
     trueValue?: any;
     falseValue?: any;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
+    $children?: vue.VNodeChild | {
+        default?: ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         label?: ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
         }) => vue.VNodeChild) | undefined;
         input?: ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
-    };
+    } | ((arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNodeChild);
     'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
+        default?: false | ((arg: {
+            backgroundColorClasses: vue.Ref<string[]>;
+            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        }) => vue.VNodeChild) | undefined;
         label?: false | ((arg: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -1085,7 +1195,10 @@ declare const VCheckboxBtn: {
         input?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:default"?: false | ((arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNodeChild) | undefined;
     "v-slot:label"?: false | ((arg: {
         label: string | undefined;
         props: Record<string, unknown>;
@@ -1112,7 +1225,10 @@ declare const VCheckboxBtn: {
     valueComparator: typeof deepEqual;
     indeterminateIcon: IconValue;
 }, {}, string, vue.SlotsType<Partial<{
-    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    default: (arg: {
+        backgroundColorClasses: vue.Ref<string[]>;
+        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
     label: (arg: {

package/lib/components/VColorPicker/VColorPickerEdit.css

@@ -10,12 +10,14 @@
   justify-content: center;
   text-align: center;
 }
-.v-color-picker-edit__input:not(:last-child).v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
+.v-locale--is-ltr.v-color-picker-edit__input:not(:last-child), .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
   margin-right: 8px;
 }
-.v-color-picker-edit__input:not(:last-child).v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
+
+.v-locale--is-rtl.v-color-picker-edit__input:not(:last-child), .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
   margin-left: 8px;
 }
+
 .v-color-picker-edit__input input {
   border-radius: 4px;
   margin-bottom: 8px;

package/lib/components/VColorPicker/VColorPickerPreview.css

@@ -1,12 +1,14 @@
 .v-color-picker-preview__alpha .v-slider-track__background {
   background-color: transparent !important;
 }
-.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
+.v-locale--is-ltr.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
   background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
 }
-.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
+
+.v-locale--is-rtl.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
   background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
 }
+
 .v-color-picker-preview__alpha .v-slider-track__background::after {
   content: "";
   z-index: -1;
@@ -33,21 +35,24 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.v-color-picker-preview__dot.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__dot {
+.v-locale--is-ltr.v-color-picker-preview__dot, .v-locale--is-ltr .v-color-picker-preview__dot {
   margin-right: 24px;
 }
-.v-color-picker-preview__dot.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__dot {
+
+.v-locale--is-rtl.v-color-picker-preview__dot, .v-locale--is-rtl .v-color-picker-preview__dot {
   margin-left: 24px;
 }
+
 .v-color-picker-preview__dot > div {
   width: 100%;
   height: 100%;
 }
 
-.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+.v-locale--is-ltr.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
   background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
 }
-.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+
+.v-locale--is-rtl.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
   background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
 }
 

package/lib/components/VCombobox/VCombobox.mjs

@@ -23,7 +23,7 @@ import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs"; // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue';
-import { genericComponent, getPropertyFromItem, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+import { genericComponent, getPropertyFromItem, IN_BROWSER, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 function highlightResult(text, matches, length) {
   if (matches == null) return text;
   if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
@@ -77,6 +77,7 @@ export const VCombobox = genericComponent()({
     const isPristine = shallowRef(true);
     const listHasFocus = shallowRef(false);
     const vMenuRef = ref();
+    const vVirtualScrollRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
       get: () => _menu.value,
@@ -310,6 +311,14 @@ export const VCombobox = genericComponent()({
         search.value = '';
       }
     });
+    watch(menu, () => {
+      if (!props.hideSelected && menu.value && selections.value.length) {
+        const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
+      }
+    });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -368,6 +377,7 @@ export const VCombobox = genericComponent()({
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), _createVNode(VVirtualScroll, {
+              "ref": vVirtualScrollRef,
               "renderless": true,
               "items": displayItems.value
             }, {