@vuetify/nightly 3.7.3-master.2024-10-31 → 3.7.3-next.2024-11-01

package/lib/components/VChip/VChip.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, Fragment as _Fragment, withDirectives as _withDirectives, vShow as _vShow, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, Fragment as _Fragment, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 /* eslint-disable complexity */
 // Styles
 import "./VChip.css";

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

@@ -32,7 +32,7 @@ interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'v
 }
 
 declare const VChip: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         replace: boolean;
         filter: boolean;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -140,108 +140,7 @@ declare const VChip: {
             value: boolean;
         }) => true;
         click: (e: MouseEvent | KeyboardEvent) => true;
-    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        replace: boolean;
-        filter: boolean;
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        exact: boolean;
-        label: boolean;
-        style: vue.StyleValue;
-        draggable: boolean;
-        disabled: boolean;
-        size: string | number;
-        tag: string;
-        modelValue: boolean;
-        tile: boolean;
-        density: Density;
-        ripple: boolean | {
-            class: string;
-        } | undefined;
-        closable: boolean;
-        closeIcon: IconValue;
-        closeLabel: string;
-        filterIcon: string;
-        pill: boolean;
-    } & {
-        link?: boolean | undefined;
-        border?: string | number | boolean | undefined;
-        color?: string | undefined;
-        value?: any;
-        text?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        to?: vue_router.RouteLocationRaw | undefined;
-        onClick?: ((args_0: MouseEvent) => void) | undefined;
-        onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
-        href?: string | undefined;
-        elevation?: string | number | undefined;
-        rounded?: string | number | boolean | undefined;
-        selectedClass?: string | undefined;
-        prependIcon?: IconValue | undefined;
-        appendIcon?: IconValue | undefined;
-        activeClass?: string | undefined;
-        appendAvatar?: string | undefined;
-        prependAvatar?: string | undefined;
-    } & {
-        $children?: vue.VNodeChild | {
-            default?: ((arg: {
-                isSelected: boolean | undefined;
-                selectedClass: boolean | (string | undefined)[] | undefined;
-                select: ((value: boolean) => void) | undefined;
-                toggle: (() => void) | undefined;
-                value: unknown;
-                disabled: boolean;
-            }) => vue.VNodeChild) | undefined;
-            label?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            close?: (() => vue.VNodeChild) | undefined;
-            filter?: (() => vue.VNodeChild) | undefined;
-        } | ((arg: {
-            isSelected: boolean | undefined;
-            selectedClass: boolean | (string | undefined)[] | undefined;
-            select: ((value: boolean) => void) | undefined;
-            toggle: (() => void) | undefined;
-            value: unknown;
-            disabled: boolean;
-        }) => vue.VNodeChild);
-        'v-slots'?: {
-            default?: false | ((arg: {
-                isSelected: boolean | undefined;
-                selectedClass: boolean | (string | undefined)[] | undefined;
-                select: ((value: boolean) => void) | undefined;
-                toggle: (() => void) | undefined;
-                value: unknown;
-                disabled: boolean;
-            }) => vue.VNodeChild) | undefined;
-            label?: false | (() => vue.VNodeChild) | undefined;
-            prepend?: false | (() => vue.VNodeChild) | undefined;
-            append?: false | (() => vue.VNodeChild) | undefined;
-            close?: false | (() => vue.VNodeChild) | undefined;
-            filter?: false | (() => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | ((arg: {
-            isSelected: boolean | undefined;
-            selectedClass: boolean | (string | undefined)[] | undefined;
-            select: ((value: boolean) => void) | undefined;
-            toggle: (() => void) | undefined;
-            value: unknown;
-            disabled: boolean;
-        }) => vue.VNodeChild) | undefined;
-        "v-slot:label"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:close"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:filter"?: false | (() => vue.VNodeChild) | undefined;
-    } & {
-        onClick?: ((e: MouseEvent | KeyboardEvent) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        "onGroup:selected"?: ((val: {
-            value: boolean;
-        }) => any) | undefined;
-        "onClick:close"?: ((e: MouseEvent) => any) | undefined;
-    }, {
+    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         replace: boolean;
         link: boolean;
         filter: boolean;
@@ -279,7 +178,7 @@ declare const VChip: {
         append: () => vue.VNode[];
         close: () => vue.VNode[];
         filter: () => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -561,7 +460,7 @@ declare const VChip: {
     append: () => vue.VNode[];
     close: () => vue.VNode[];
     filter: () => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     color: StringConstructor;
     variant: Omit<{
         type: PropType<Variant>;

package/lib/components/VChipGroup/VChipGroup.css

@@ -1,19 +1,20 @@
-.v-chip-group {
-  display: flex;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  padding: 4px 0;
-}
-.v-chip-group .v-chip {
-  margin: 4px 8px 4px 0;
-}
-.v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
-  opacity: var(--v-activated-opacity);
-}
-
-.v-chip-group--column .v-slide-group__content {
-  white-space: normal;
-  flex-wrap: wrap;
-  max-width: 100%;
+@layer vuetify.components {
+  .v-chip-group {
+    display: flex;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    padding: 4px 0;
+  }
+  .v-chip-group .v-chip {
+    margin: 4px 8px 4px 0;
+  }
+  .v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
+    opacity: var(--v-activated-opacity);
+  }
+  .v-chip-group--column .v-slide-group__content {
+    white-space: normal;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
 }

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VChipGroup.css";
 

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

@@ -81,7 +81,7 @@ type VChipGroupSlots = {
     };
 };
 declare const VChipGroup: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         symbol: any;
         filter: boolean;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -107,31 +107,7 @@ declare const VChipGroup: {
         showArrows?: string | boolean | undefined;
     } & {}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => true;
-    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        symbol: any;
-        filter: boolean;
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        direction: "horizontal" | "vertical";
-        style: vue.StyleValue;
-        mobile: boolean | null;
-        disabled: boolean;
-        multiple: boolean;
-        tag: string;
-        column: boolean;
-        selectedClass: string;
-        valueComparator: typeof deepEqual;
-        centerActive: boolean;
-        nextIcon: IconValue;
-        prevIcon: IconValue;
-    } & {
-        max?: number | undefined;
-        color?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        mandatory?: boolean | "force" | undefined;
-        mobileBreakpoint?: number | DisplayBreakpoint | undefined;
-        showArrows?: string | boolean | undefined;
-    } & {}, {
+    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         symbol: any;
         filter: boolean;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -155,7 +131,7 @@ declare const VChipGroup: {
             prev: () => void;
             selected: readonly number[];
         }) => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -256,7 +232,7 @@ declare const VChipGroup: {
         prev: () => void;
         selected: readonly number[];
     }) => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T;
     "onUpdate:modelValue"?: (value: T) => void;
 }, slots: VChipGroupSlots) => GenericProps<typeof props, typeof slots>) & FilterPropsOptions<{

package/lib/components/VCode/VCode.css

@@ -1,9 +1,11 @@
-.v-code {
-  background-color: rgb(var(--v-theme-code));
-  color: rgb(var(--v-theme-on-code));
-  border-radius: 4px;
-  line-height: 1.8;
-  font-size: 0.9em;
-  font-weight: normal;
-  padding: 0.2em 0.4em;
+@layer vuetify.components {
+  .v-code {
+    background-color: rgb(var(--v-theme-code));
+    color: rgb(var(--v-theme-on-code));
+    border-radius: 4px;
+    line-height: 1.8;
+    font-size: 0.9em;
+    font-weight: normal;
+    padding: 0.2em 0.4em;
+  }
 }

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

@@ -8,7 +8,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 type ClassValue = any;
 
 declare const VCode: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         style: vue.StyleValue;
         tag: string;
     } & {
@@ -24,26 +24,12 @@ declare const VCode: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
-    }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        style: vue.StyleValue;
-        tag: string;
-    } & {
-        class?: any;
-    } & {
-        $children?: vue.VNodeChild | {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | (() => vue.VNodeChild);
-        'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {
+    }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         style: vue.StyleValue;
         tag: string;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -94,7 +80,7 @@ declare const VCode: {
     tag: string;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     class: vue.PropType<ClassValue>;
     style: {
         type: vue.PropType<vue.StyleValue>;

package/lib/components/VColorPicker/VColorPicker.css

@@ -1,23 +1,23 @@
-.v-color-picker {
-  align-self: flex-start;
-  contain: content;
-}
-.v-color-picker.v-sheet {
-  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-color-picker.v-sheet {
-  border-radius: 4px;
-}
-
-.v-color-picker__controls {
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-}
-
-.v-color-picker--flat {
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+@layer vuetify.components {
+  .v-color-picker {
+    align-self: flex-start;
+    contain: content;
+  }
+  .v-color-picker.v-sheet {
+    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-color-picker.v-sheet {
+    border-radius: 4px;
+  }
+  .v-color-picker__controls {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+  }
+  .v-color-picker--flat {
+    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
+    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
 }

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
 import "./VColorPicker.css";
 

package/lib/components/VColorPicker/VColorPickerCanvas.css

@@ -1,23 +1,25 @@
-.v-color-picker-canvas {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  contain: content;
-  touch-action: none;
-}
-.v-color-picker-canvas__dot {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 15px;
-  height: 15px;
-  background: transparent;
-  border-radius: 50%;
-  box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
-}
-.v-color-picker-canvas__dot--disabled {
-  box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
-}
-.v-color-picker-canvas:hover .v-color-picker-canvas__dot {
-  will-change: transform;
+@layer vuetify.components {
+  .v-color-picker-canvas {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    contain: content;
+    touch-action: none;
+  }
+  .v-color-picker-canvas__dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 15px;
+    height: 15px;
+    background: transparent;
+    border-radius: 50%;
+    box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+  }
+  .v-color-picker-canvas__dot--disabled {
+    box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+  }
+  .v-color-picker-canvas:hover .v-color-picker-canvas__dot {
+    will-change: transform;
+  }
 }

package/lib/components/VColorPicker/VColorPickerEdit.css

@@ -1,29 +1,30 @@
-.v-color-picker-edit {
-  display: flex;
-  margin-top: 24px;
-}
-
-.v-color-picker-edit__input {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  text-align: center;
-}
-.v-color-picker-edit__input:not(:last-child) {
-  margin-inline-end: 8px;
-}
-.v-color-picker-edit__input input {
-  border-radius: 4px;
-  margin-bottom: 8px;
-  min-width: 0;
-  outline: none;
-  text-align: center;
-  width: 100%;
-  height: 32px;
-  background: rgba(var(--v-theme-surface-variant), 0.2);
-  color: rgba(var(--v-theme-on-surface));
-}
-.v-color-picker-edit__input span {
-  font-size: 0.75rem;
+@layer vuetify.components {
+  .v-color-picker-edit {
+    display: flex;
+    margin-top: 24px;
+  }
+  .v-color-picker-edit__input {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+  .v-color-picker-edit__input:not(:last-child) {
+    margin-inline-end: 8px;
+  }
+  .v-color-picker-edit__input input {
+    border-radius: 4px;
+    margin-bottom: 8px;
+    min-width: 0;
+    outline: none;
+    text-align: center;
+    width: 100%;
+    height: 32px;
+    background: rgba(var(--v-theme-surface-variant), 0.2);
+    color: rgba(var(--v-theme-on-surface));
+  }
+  .v-color-picker-edit__input span {
+    font-size: 0.75rem;
+  }
 }

package/lib/components/VColorPicker/VColorPickerPreview.css

@@ -1,71 +1,73 @@
-.v-color-picker-preview__alpha .v-slider-track__background {
-  background-color: transparent !important;
+@layer vuetify.components {}
+@layer vuetify.overrides {
+  .v-color-picker-preview__alpha .v-slider-track__background {
+    background-color: transparent;
+  }
 }
-.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));
+@layer vuetify.components {
+  .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-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;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
+    border-radius: inherit;
+  }
+  .v-color-picker-preview__sliders {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    padding-inline-end: 16px;
+  }
+  .v-color-picker-preview__dot {
+    position: relative;
+    height: 30px;
+    width: 30px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-inline-end: 24px;
+  }
+  .v-color-picker-preview__dot > div {
+    width: 100%;
+    height: 100%;
+  }
+  .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-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%);
+  }
+  .v-color-picker-preview__track {
+    position: relative;
+    width: 100%;
+  }
 }
-
-.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));
+@layer vuetify.overrides {
+  .v-color-picker-preview__track {
+    margin: 0;
+  }
 }
-
-.v-color-picker-preview__alpha .v-slider-track__background::after {
-  content: "";
-  z-index: -1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
-  border-radius: inherit;
-}
-
-.v-color-picker-preview__sliders {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-  padding-inline-end: 16px;
-}
-
-.v-color-picker-preview__dot {
-  position: relative;
-  height: 30px;
-  width: 30px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
-  border-radius: 50%;
-  overflow: hidden;
-  margin-inline-end: 24px;
-}
-.v-color-picker-preview__dot > div {
-  width: 100%;
-  height: 100%;
-}
-
-.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-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%);
-}
-
-.v-color-picker-preview__track {
-  position: relative;
-  width: 100%;
-  margin: 0 !important;
-}
-.v-color-picker-preview__track .v-slider-track__fill {
-  display: none;
-}
-
-.v-color-picker-preview {
-  align-items: center;
-  display: flex;
-  margin-bottom: 0;
-}
-
-.v-color-picker-preview__eye-dropper {
-  position: relative;
-  margin-right: 12px;
+@layer vuetify.components {
+  .v-color-picker-preview__track .v-slider-track__fill {
+    display: none;
+  }
+  .v-color-picker-preview {
+    align-items: center;
+    display: flex;
+    margin-bottom: 0;
+  }
+  .v-color-picker-preview__eye-dropper {
+    position: relative;
+    margin-right: 12px;
+  }
 }

package/lib/components/VColorPicker/VColorPickerPreview.sass

@@ -4,7 +4,8 @@
 @include tools.layer('components')
   .v-color-picker-preview__alpha
     .v-slider-track__background
-      background-color: transparent !important
+      @include tools.layer('overrides')
+        background-color: transparent
 
       @include tools.ltr()
         background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
@@ -54,7 +55,8 @@
     position: relative
     width: 100%
 
-    margin: 0 !important
+    @include tools.layer('overrides')
+      margin: 0
 
     .v-slider-track__fill
       display: none