fix: add rtl classes to components

fixes #16586

packages/vuetify/src/components/VColorPicker/VColorPicker.tsx

@@ -11,6 +11,7 @@ import { VColorPickerSwatches } from './VColorPickerSwatches'
 // Composables
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { provideDefaults } from '@/composables/defaults'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { defineComponent, HSVtoCSS, omit, useRender } from '@/util'
@@ -97,6 +98,7 @@ export const VColorPicker = defineComponent({
         return extractColor(v, props.modelValue)
       }
     )
+    const { rtlClasses } = useRtl()
 
     const updateColor = (hsva: HSV) => {
       currentColor.value = hsva
@@ -125,6 +127,7 @@ export const VColorPicker = defineComponent({
           theme={ props.theme }
           class={[
             'v-color-picker',
+            rtlClasses.value,
             props.class,
           ]}
           style={[

packages/vuetify/src/components/VField/VField.tsx

@@ -14,6 +14,7 @@ import { makeFocusProps, useFocus } from '@/composables/focus'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { computed, ref, toRef, watch } from 'vue'
@@ -123,6 +124,7 @@ export const VField = genericComponent<new <T>(props: {
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
     const { InputIcon } = useInputIcon(props)
     const { roundedClasses } = useRounded(props)
+    const { rtlClasses } = useRtl()
 
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
@@ -234,6 +236,7 @@ export const VField = genericComponent<new <T>(props: {
             focusClasses.value,
             loaderClasses.value,
             roundedClasses.value,
+            rtlClasses.value,
             props.class,
           ]}
           style={[

packages/vuetify/src/components/VGrid/VContainer.tsx

@@ -4,6 +4,7 @@ import './VGrid.sass'
 // Composables
 import { makeComponentProps } from '@/composables/component'
 import { makeTagProps } from '@/composables/tag'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { genericComponent, useRender } from '@/util'
@@ -22,11 +23,14 @@ export const VContainer = genericComponent()({
   },
 
   setup (props, { slots }) {
+    const { rtlClasses } = useRtl()
+
     useRender(() => (
       <props.tag
         class={[
           'v-container',
           { 'v-container--fluid': props.fluid },
+          rtlClasses.value,
           props.class,
         ]}
         style={ props.style }

packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx

@@ -68,7 +68,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
 
   setup (props, { slots }) {
     const progress = useProxiedModel(props, 'modelValue')
-    const { isRtl } = useRtl()
+    const { isRtl, rtlClasses } = useRtl()
     const { themeClasses } = provideTheme(props)
     const { locationStyles } = useLocation(props)
     const { textColorClasses, textColorStyles } = useTextColor(props, 'color')
@@ -113,6 +113,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
           },
           roundedClasses.value,
           themeClasses.value,
+          rtlClasses.value,
           props.class,
         ]}
         style={[

packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx

@@ -11,6 +11,7 @@ import { VSliderTrack } from '@/components/VSlider/VSliderTrack'
 // Composables
 import { makeFocusProps, useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { computed, ref } from 'vue'
@@ -46,6 +47,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
     const startThumbRef = ref<VSliderThumb>()
     const stopThumbRef = ref<VSliderThumb>()
     const inputRef = ref<VInput>()
+    const { rtlClasses } = useRtl()
 
     function getActiveThumb (e: MouseEvent | TouchEvent) {
       if (!startThumbRef.value || !stopThumbRef.value) return
@@ -132,6 +134,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
               'v-slider--pressed': mousePressed.value,
               'v-slider--disabled': props.disabled,
             },
+            rtlClasses.value,
             props.class,
           ]}
           style={ props.style }

packages/vuetify/src/components/VSlider/VSlider.tsx

@@ -8,9 +8,10 @@ import { VSliderThumb } from './VSliderThumb'
 import { VSliderTrack } from './VSliderTrack'
 
 // Composables
-import { makeFocusProps, useFocus } from '@/composables/focus'
 import { makeSliderProps, useSlider, useSteps } from './slider'
+import { makeFocusProps, useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { computed, ref } from 'vue'
@@ -47,6 +48,7 @@ export const VSlider = genericComponent<VSliderSlots>()({
 
   setup (props, { slots, emit }) {
     const thumbContainerRef = ref()
+    const { rtlClasses } = useRtl()
 
     const steps = useSteps(props)
 
@@ -104,6 +106,7 @@ export const VSlider = genericComponent<VSliderSlots>()({
               'v-slider--pressed': mousePressed.value,
               'v-slider--disabled': props.disabled,
             },
+            rtlClasses.value,
             props.class,
           ]}
           style={ props.style }

packages/vuetify/src/components/VTimeline/VTimeline.tsx

@@ -7,6 +7,7 @@ import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { provideDefaults } from '@/composables/defaults'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { computed, toRef } from 'vue'
@@ -66,6 +67,7 @@ export const VTimeline = genericComponent()({
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
     const { densityClasses } = useDensity(props)
+    const { rtlClasses } = useRtl()
 
     provideDefaults({
       VTimelineDivider: {
@@ -111,6 +113,7 @@ export const VTimeline = genericComponent()({
           themeClasses.value,
           densityClasses.value,
           sideClasses.value,
+          rtlClasses.value,
           props.class,
         ]}
         style={[

packages/vuetify/src/components/VToolbar/VToolbar.tsx

@@ -16,6 +16,7 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { provideDefaults } from '@/composables/defaults'
 import { useBackgroundColor } from '@/composables/color'
+import { useRtl } from '@/composables/locale'
 
 // Utilities
 import { computed, ref, toRef } from 'vue'
@@ -79,6 +80,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
     const { themeClasses } = provideTheme(props)
+    const { rtlClasses } = useRtl()
 
     const isExtended = ref(!!(props.extended || slots.extension?.()))
     const contentHeight = computed(() => parseInt((
@@ -126,6 +128,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
             elevationClasses.value,
             roundedClasses.value,
             themeClasses.value,
+            rtlClasses.value,
             props.class,
           ]}
           style={[