vuetify 3.1.3 → 3.1.5

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

@@ -1,169 +1,186 @@
 import * as vue from 'vue';
-import { PropType, JSXComponent, ExtractPropTypes } from 'vue';
+import { JSXComponent, PropType, WritableComputedRef, Ref, CSSProperties, ComputedRef } from 'vue';
+
+type Density = null | 'default' | 'comfortable' | 'compact';
+
+type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
 
 declare function deepEqual(a: any, b: any): boolean;
-declare type EventProp<T = (...args: any[]) => any> = T | T[];
+type EventProp<T = (...args: any[]) => any> = T | T[];
 declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
 
-declare type ValidationResult = string | boolean;
-declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+type SelectionControlSlot = {
+    model: WritableComputedRef<any>;
+    textColorClasses: Ref<string[]>;
+    textColorStyles: Ref<CSSProperties>;
+    props: {
+        onBlur: (e: Event) => void;
+        onFocus: (e: FocusEvent) => void;
+        id: string;
+    };
+};
 
-declare type IconValue = string | JSXComponent;
-declare const IconValue: PropType<IconValue>;
+type ValidationResult = string | boolean;
+type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
-declare type Density = null | 'default' | 'comfortable' | 'compact';
+interface VInputSlot {
+    id: ComputedRef<string>;
+    messagesId: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
 
 declare const VCheckbox: vue.DefineComponent<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    trueIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    indeterminate: BooleanConstructor;
-    indeterminateIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    validationValue: null;
-    appendIcon: vue.PropType<IconValue>;
-    prependIcon: vue.PropType<IconValue>;
-    hideDetails: vue.PropType<boolean | "auto">;
-    messages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    direction: {
-        type: vue.PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
-    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
+    valueComparator: typeof deepEqual;
+    indeterminateIcon: IconValue;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:focused': (focused: boolean) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    trueIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    indeterminate: BooleanConstructor;
-    indeterminateIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    validationValue: null;
-    appendIcon: vue.PropType<IconValue>;
-    prependIcon: vue.PropType<IconValue>;
-    hideDetails: vue.PropType<boolean | "auto">;
-    messages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    direction: {
-        type: vue.PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
-    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
-}>> & {
+    'update:focused': (focused: boolean) => boolean;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
+    valueComparator: typeof deepEqual;
+    indeterminateIcon: IconValue;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
 }, {
     inline: boolean;
@@ -180,107 +197,113 @@ declare const VCheckbox: vue.DefineComponent<{
     errorMessages: string | string[];
     maxErrors: string | number;
     rules: ValidationRule[];
-    falseIcon: (string & {}) | IconValue;
-    trueIcon: (string & {}) | IconValue;
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
     indeterminateIcon: IconValue;
 }>;
-declare type VCheckbox = InstanceType<typeof VCheckbox>;
+type VCheckbox = InstanceType<typeof VCheckbox>;
 
 declare const VCheckboxBtn: vue.DefineComponent<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    trueIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    indeterminate: BooleanConstructor;
-    indeterminateIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
+    inline: boolean;
+    error: boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    density: Density;
+    ripple: boolean;
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
+    valueComparator: typeof deepEqual;
+    indeterminateIcon: IconValue;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (() => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (() => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (value: any) => true;
-    'update:indeterminate': (val: boolean) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<ExtractPropTypes<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    trueIcon: {
-        type: vue.PropType<(string & {}) | IconValue>;
-        default: (string & {}) | IconValue;
-    };
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    indeterminate: BooleanConstructor;
-    indeterminateIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-}>> & {
+    'update:modelValue': (value: any) => boolean;
+    'update:indeterminate': (val: boolean) => boolean;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    inline: boolean;
+    error: boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    density: Density;
+    ripple: boolean;
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
+    valueComparator: typeof deepEqual;
+    indeterminateIcon: IconValue;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (() => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (() => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
 }, {
@@ -292,11 +315,11 @@ declare const VCheckboxBtn: vue.DefineComponent<{
     indeterminate: boolean;
     density: Density;
     ripple: boolean;
-    falseIcon: (string & {}) | IconValue;
-    trueIcon: (string & {}) | IconValue;
+    falseIcon: NonNullable<IconValue>;
+    trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
     indeterminateIcon: IconValue;
 }>;
-declare type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>;
+type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>;
 
 export { VCheckbox, VCheckboxBtn };

package/lib/components/VChip/VChip.css

@@ -252,28 +252,28 @@
 }
 
 .v-chip:hover > .v-chip__overlay {
-  opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
+  opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
 }
 .v-chip:focus-visible > .v-chip__overlay {
-  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+  opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
 }
 @supports not selector(:focus-visible) {
   .v-chip:focus > .v-chip__overlay {
-    opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+    opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
   }
 }
 .v-chip--active > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true] > .v-chip__overlay {
-  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
 }
 .v-chip--active:hover > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:hover > .v-chip__overlay {
-  opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
+  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
 }
 .v-chip--active:focus-visible > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-chip__overlay {
-  opacity: calc(0.24 * var(--v-theme-overlay-multiplier));
+  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
 }
 @supports not selector(:focus-visible) {
   .v-chip--active:focus > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:focus > .v-chip__overlay {
-    opacity: calc(0.24 * var(--v-theme-overlay-multiplier));
+    opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
 }
 .v-chip--variant-plain, .v-chip--variant-outlined, .v-chip--variant-text, .v-chip--variant-tonal {