vuetify 3.4.11 → 3.5.1

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

@@ -90,9 +90,9 @@ declare const VSlideGroup: {
         multiple: boolean;
         tag: string;
         selectedClass: string;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
     } & {
         max?: number | undefined;
         class?: any;
@@ -114,9 +114,9 @@ declare const VSlideGroup: {
         multiple: boolean;
         tag: string;
         selectedClass: string;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
     } & {
         max?: number | undefined;
         class?: any;
@@ -131,9 +131,9 @@ declare const VSlideGroup: {
         multiple: boolean;
         tag: string;
         selectedClass: string;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -159,9 +159,9 @@ declare const VSlideGroup: {
         multiple: boolean;
         tag: string;
         selectedClass: string;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
     } & {
         max?: number | undefined;
         class?: any;
@@ -181,9 +181,9 @@ declare const VSlideGroup: {
         multiple: boolean;
         tag: string;
         selectedClass: string;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -196,9 +196,9 @@ declare const VSlideGroup: {
     multiple: boolean;
     tag: string;
     selectedClass: string;
+    centerActive: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
-    centerActive: boolean;
 } & {
     max?: number | undefined;
     class?: any;
@@ -220,9 +220,9 @@ declare const VSlideGroup: {
     multiple: boolean;
     tag: string;
     selectedClass: string;
+    centerActive: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
-    centerActive: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;

package/lib/components/VSlider/VSliderTrack.css

@@ -10,7 +10,7 @@
   background-color: rgb(var(--v-theme-surface-variant));
 }
 .v-slider-track__tick--filled {
-  background-color: rgb(var(--v-theme-on-surface-variant));
+  background-color: rgb(var(--v-theme-surface-light));
 }
 
 .v-slider-track {

package/lib/components/VSlider/VSliderTrack.sass

@@ -15,7 +15,7 @@
   background-color: rgb(var(--v-theme-surface-variant))
 
   &--filled
-    background-color: rgb(var(--v-theme-on-surface-variant))
+    background-color: $slider-tick-background
 
 // Elements
 .v-slider-track

package/lib/components/VSlider/_variables.scss

@@ -21,6 +21,7 @@ $slider-thumb-label-offset: calc(var(--v-slider-thumb-size) / 2) !default;
 $slider-thumb-label-transition: .2s settings.$accelerated-easing !default;
 $slider-thumb-label-padding: 6px !default;
 $slider-thumb-touch-size: 42px !default;
+$slider-tick-background: rgb(var(--v-theme-surface-light)) !default;
 $slider-tick-border-radius: 2px !default;
 $slider-tick-label-margin-top: 8px !default;
 $slider-tick-label-margin-start: 12px !default;

package/lib/components/VSwitch/VSwitch.css

@@ -23,25 +23,45 @@
   color: rgb(var(--v-theme-on-error));
 }
 
+.v-switch__track-true {
+  margin-inline-end: auto;
+}
+.v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
+  opacity: 0;
+}
+
+.v-switch__track-false {
+  margin-inline-start: auto;
+}
+.v-selection-control--dirty .v-switch__track-false {
+  opacity: 0;
+}
+
 .v-switch__track {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.5rem;
+  padding: 0 5px;
   background-color: rgb(var(--v-theme-surface-variant));
   border-radius: 9999px;
   height: 14px;
   opacity: 0.6;
-  width: 36px;
+  min-width: 36px;
   cursor: pointer;
   transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-switch--inset .v-switch__track {
   border-radius: 9999px;
+  font-size: 0.75rem;
   height: 32px;
-  width: 52px;
+  min-width: 52px;
 }
 
 .v-switch__thumb {
   align-items: center;
   border-radius: 50%;
   display: flex;
+  font-size: 0.75rem;
   height: 20px;
   justify-content: center;
   width: 20px;

package/lib/components/VSwitch/VSwitch.mjs

@@ -4,6 +4,7 @@ import "./VSwitch.css";
 
 // Components
 import { VScaleTransition } from "../transitions/index.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/VDefaultsProvider.mjs";
 import { VIcon } from "../VIcon/index.mjs";
 import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
 import { VProgressCircular } from "../VProgressCircular/index.mjs";
@@ -90,6 +91,10 @@ export const VSwitch = genericComponent()({
             isReadonly,
             isValid
           } = _ref2;
+          const slotProps = {
+            model,
+            isValid
+          };
           return _createVNode(VSelectionControl, _mergeProps({
             "ref": control
           }, controlProps, {
@@ -114,7 +119,13 @@ export const VSwitch = genericComponent()({
                 "class": ['v-switch__track', ...backgroundColorClasses.value],
                 "style": backgroundColorStyles.value,
                 "onClick": onTrackClick
-              }, null);
+              }, [slots['track-true'] && _createVNode("div", {
+                "key": "prepend",
+                "class": "v-switch__track-true"
+              }, [slots['track-true'](slotProps)]), slots['track-false'] && _createVNode("div", {
+                "key": "append",
+                "class": "v-switch__track-false"
+              }, [slots['track-false'](slotProps)])]);
             },
             input: _ref4 => {
               let {
@@ -128,9 +139,21 @@ export const VSwitch = genericComponent()({
                   'v-switch__thumb--filled': icon || props.loading
                 }, props.inset ? undefined : backgroundColorClasses.value],
                 "style": props.inset ? undefined : backgroundColorStyles.value
-              }, [_createVNode(VScaleTransition, null, {
+              }, [slots.thumb ? _createVNode(VDefaultsProvider, {
+                "defaults": {
+                  VIcon: {
+                    icon,
+                    size: 'x-small'
+                  }
+                }
+              }, {
+                default: () => [slots.thumb({
+                  ...slotProps,
+                  icon
+                })]
+              }) : _createVNode(VScaleTransition, null, {
                 default: () => [!props.loading ? icon && _createVNode(VIcon, {
-                  "key": icon,
+                  "key": String(icon),
                   "icon": icon,
                   "size": "x-small"
                 }, null) : _createVNode(LoaderSlot, {

package/lib/components/VSwitch/VSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: LoaderSlotProps }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const control = ref<VSelectionControl>()\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__track',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                      onClick={ onTrackClick }\n                    ></div>\n                  ),\n                  input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                    <>\n                      { inputNode }\n                      <div\n                        class={[\n                          'v-switch__thumb',\n                          { 'v-switch__thumb--filled': icon || props.loading },\n                          props.inset ? undefined : backgroundColorClasses.value,\n                        ]}\n                        style={ props.inset ? undefined : backgroundColorStyles.value }\n                      >\n                        <VScaleTransition>\n                          { !props.loading ? (\n                            icon && <VIcon key={ icon as any } icon={ icon } size=\"x-small\" />\n                          ) : (\n                            <LoaderSlot\n                              name=\"v-switch\"\n                              active\n                              color={ isValid.value === false ? undefined : loaderColor.value }\n                            >\n                              { slotProps => (\n                                slots.loader\n                                  ? slots.loader(slotProps)\n                                  : (\n                                    <VProgressCircular\n                                      active={ slotProps.isActive }\n                                      color={ slotProps.color }\n                                      indeterminate\n                                      size=\"16\"\n                                      width=\"2\"\n                                    />\n                                  )\n                              )}\n                            </LoaderSlot>\n                          )}\n                        </VScaleTransition>\n                      </div>\n                    </>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VDefaultsProvider","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const control = ref<VSelectionControl>()\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\n                <VSelectionControl\n                  ref={ control }\n                  { ...controlProps }\n                  v-model={ model.value }\n                  id={ id.value }\n                  aria-describedby={ messagesId.value }\n                  type=\"checkbox\"\n                  onUpdate:modelValue={ onChange }\n                  aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                  disabled={ isDisabled.value }\n                  readonly={ isReadonly.value }\n                  onFocus={ focus }\n                  onBlur={ blur }\n                  { ...controlAttrs }\n                >\n                  {{\n                    ...slots,\n                    default: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          ...backgroundColorClasses.value,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\n                                ))) : (\n                                <LoaderSlot\n                                  name=\"v-switch\"\n                                  active\n                                  color={ isValid.value === false ? undefined : loaderColor.value }\n                                >\n                                  { slotProps => (\n                                    slots.loader\n                                      ? slots.loader(slotProps)\n                                      : (\n                                        <VProgressCircular\n                                          active={ slotProps.isActive }\n                                          color={ slotProps.color }\n                                          indeterminate\n                                          size=\"16\"\n                                          width=\"2\"\n                                        />\n                                      )\n                                  )}\n                                </LoaderSlot>\n                              )}\n                            </VScaleTransition>\n                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\n            },\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}

package/lib/components/VSwitch/VSwitch.sass

@@ -25,24 +25,42 @@
     background-color: $switch-error-background-color
     color: $switch-error-color
 
+.v-switch__track-true
+  margin-inline-end: auto
+
+  .v-selection-control:not(.v-selection-control--dirty) &
+    opacity: 0
+
+.v-switch__track-false
+  margin-inline-start: auto
+
+  .v-selection-control--dirty &
+    opacity: 0
+
 .v-switch__track
+  display: inline-flex
+  align-items: center
+  font-size: .5rem
+  padding: 0 5px
   background-color: $switch-track-background
   border-radius: $switch-track-radius
   height: $switch-track-height
   opacity: $switch-track-opacity
-  width: $switch-track-width
+  min-width: $switch-track-width
   cursor: pointer
   transition: $switch-track-transition
 
   .v-switch--inset &
     border-radius: $switch-inset-track-border-radius
+    font-size: .75rem
     height: $switch-inset-track-height
-    width: $switch-inset-track-width
+    min-width: $switch-inset-track-width
 
 .v-switch__thumb
   align-items: center
   border-radius: $switch-thumb-radius
   display: flex
+  font-size: .75rem
   height: $switch-thumb-height
   justify-content: center
   width: $switch-thumb-width

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

@@ -96,8 +96,17 @@ interface LoaderSlotProps {
     isActive: boolean;
 }
 
+type VSwitchSlot = {
+    model: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+};
 type VSwitchSlots = VInputSlots & VSelectionControlSlots & {
     loader: LoaderSlotProps;
+    thumb: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot;
+    'track-false': VSwitchSlot;
+    'track-true': VSwitchSlot;
 };
 declare const VSwitch: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
@@ -154,7 +163,7 @@ declare const VSwitch: {
         'update:focused': (focused: boolean) => boolean;
         'update:modelValue': (value: any) => boolean;
         'update:indeterminate': (value: boolean) => boolean;
-    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -229,8 +238,8 @@ declare const VSwitch: {
         persistentHint: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: VInputSlot & {
-            backgroundColorClasses: vue.Ref<string[]>;
-            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            backgroundColorClasses: Ref<string[]>;
+            backgroundColorStyles: Ref<vue.CSSProperties>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -258,6 +267,17 @@ declare const VSwitch: {
         loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
+        thumb: (arg: {
+            icon: IconValue | undefined;
+        } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
     }>>, {
         P: {};
         B: {};
@@ -396,7 +416,7 @@ declare const VSwitch: {
     'update:focused': (focused: boolean) => boolean;
     'update:modelValue': (value: any) => boolean;
     'update:indeterminate': (value: boolean) => boolean;
-}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, string, {
+}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, string, {
     flat: boolean;
     inline: boolean;
     error: boolean;
@@ -421,8 +441,8 @@ declare const VSwitch: {
     persistentHint: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: VInputSlot & {
-        backgroundColorClasses: vue.Ref<string[]>;
-        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        backgroundColorClasses: Ref<string[]>;
+        backgroundColorStyles: Ref<vue.CSSProperties>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -450,6 +470,17 @@ declare const VSwitch: {
     loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    thumb: (arg: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T | null | undefined;
     'onUpdate:modelValue'?: ((value: T | null) => void) | undefined;

package/lib/components/VSystemBar/VSystemBar.css

@@ -10,8 +10,8 @@
   text-align: end;
   width: 100%;
   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));
-  background: rgba(var(--v-theme-on-surface-variant));
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  background: rgba(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
   font-size: 0.75rem;
   font-weight: 400;
   letter-spacing: 0.0333333333em;

package/lib/components/VSystemBar/_variables.scss

@@ -3,9 +3,9 @@
 @use '../../styles/tools';
 
 // VSystemBar
-$system-bar-background: rgba(var(--v-theme-on-surface-variant)) !default;
+$system-bar-background: rgba(var(--v-theme-surface-light)) !default;
 $system-bar-border-radius: map.get(settings.$rounded, 0) !default;
-$system-bar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$system-bar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
 $system-bar-elevation: 0 !default;
 $system-bar-flex: 1 1 auto !default;
 $system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;

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

@@ -69,10 +69,10 @@ declare const VTabs: {
         density: Density;
         selectedClass: string;
         stacked: boolean;
-        grow: boolean;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
+        grow: boolean;
         hideSlider: boolean;
         alignTabs: "center" | "end" | "start" | "title";
         fixedTabs: boolean;
@@ -111,10 +111,10 @@ declare const VTabs: {
         density: Density;
         selectedClass: string;
         stacked: boolean;
-        grow: boolean;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
+        grow: boolean;
         hideSlider: boolean;
         alignTabs: "center" | "end" | "start" | "title";
         fixedTabs: boolean;
@@ -153,10 +153,10 @@ declare const VTabs: {
         modelValue: any;
         selectedClass: string;
         stacked: boolean;
-        grow: boolean;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
+        grow: boolean;
         hideSlider: boolean;
         alignTabs: "center" | "end" | "start" | "title";
         fixedTabs: boolean;
@@ -183,10 +183,10 @@ declare const VTabs: {
         density: Density;
         selectedClass: string;
         stacked: boolean;
-        grow: boolean;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
+        grow: boolean;
         hideSlider: boolean;
         alignTabs: "center" | "end" | "start" | "title";
         fixedTabs: boolean;
@@ -225,10 +225,10 @@ declare const VTabs: {
         modelValue: any;
         selectedClass: string;
         stacked: boolean;
-        grow: boolean;
+        centerActive: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
-        centerActive: boolean;
+        grow: boolean;
         hideSlider: boolean;
         alignTabs: "center" | "end" | "start" | "title";
         fixedTabs: boolean;
@@ -248,10 +248,10 @@ declare const VTabs: {
     density: Density;
     selectedClass: string;
     stacked: boolean;
-    grow: boolean;
+    centerActive: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
-    centerActive: boolean;
+    grow: boolean;
     hideSlider: boolean;
     alignTabs: "center" | "end" | "start" | "title";
     fixedTabs: boolean;
@@ -292,10 +292,10 @@ declare const VTabs: {
     modelValue: any;
     selectedClass: string;
     stacked: boolean;
-    grow: boolean;
+    centerActive: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
-    centerActive: boolean;
+    grow: boolean;
     hideSlider: boolean;
     alignTabs: "center" | "end" | "start" | "title";
     fixedTabs: boolean;

package/lib/components/VTimeline/VTimeline.css

@@ -1,5 +1,5 @@
 .v-timeline .v-timeline-divider__dot {
-  background: rgb(var(--v-theme-on-surface-variant));
+  background: rgb(var(--v-theme-surface-light));
 }
 .v-timeline .v-timeline-divider__inner-dot {
   background: rgb(var(--v-theme-on-surface));

package/lib/components/VTimeline/_variables.scss

@@ -6,7 +6,7 @@ $timeline-density-comfortable-grid-template-start: auto min-content min-content
 $timeline-density-compact-grid-template-end: 0 min-content auto !default;
 $timeline-density-compact-grid-template-start: auto min-content 0 !default;
 $timeline-dot-border-radius: 50% !default;
-$timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$timeline-dot-divider-background: rgb(var(--v-theme-surface-light)) !default;
 $timeline-dot-size: 38px !default;
 $timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
 $timeline-inset-divider-line: var(--v-timeline-line-inset) !default;

package/lib/components/VToolbar/VToolbar.css

@@ -15,8 +15,8 @@
   border-width: 0;
   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));
   border-radius: 0;
-  background: rgb(var(--v-theme-on-surface-variant));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  background: rgb(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
 }
 .v-toolbar--border {
   border-width: thin;

package/lib/components/VToolbar/_variables.scss

@@ -4,8 +4,8 @@
 @use "../../styles/tools/functions";
 
 // VToolbar
-$toolbar-background: rgb(var(--v-theme-on-surface-variant)) !default;
-$toolbar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$toolbar-background: rgb(var(--v-theme-surface-light)) !default;
+$toolbar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
 $toolbar-border-color: settings.$border-color-root !default;
 $toolbar-border-radius: map.get(settings.$rounded, 0) !default;
 $toolbar-border-style: settings.$border-style-root !default;

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

@@ -121,9 +121,9 @@ declare const VWindow: {
         tag: string;
         mandatory: boolean | "force";
         selectedClass: string;
-        continuous: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
+        continuous: boolean;
     } & {
         class?: any;
         touch?: boolean | TouchHandlers | undefined;
@@ -141,9 +141,9 @@ declare const VWindow: {
         tag: string;
         mandatory: boolean | "force";
         selectedClass: string;
-        continuous: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
+        continuous: boolean;
     } & {
         class?: any;
         touch?: boolean | TouchHandlers | undefined;
@@ -158,9 +158,9 @@ declare const VWindow: {
         mandatory: boolean | "force";
         touch: boolean | TouchHandlers;
         selectedClass: string;
-        continuous: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
+        continuous: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: {
             group: GroupProvide;
@@ -197,9 +197,9 @@ declare const VWindow: {
         tag: string;
         mandatory: boolean | "force";
         selectedClass: string;
-        continuous: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
+        continuous: boolean;
     } & {
         class?: any;
         touch?: boolean | TouchHandlers | undefined;
@@ -216,9 +216,9 @@ declare const VWindow: {
         mandatory: boolean | "force";
         touch: boolean | TouchHandlers;
         selectedClass: string;
-        continuous: boolean;
         nextIcon: IconValue;
         prevIcon: IconValue;
+        continuous: boolean;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -231,9 +231,9 @@ declare const VWindow: {
     tag: string;
     mandatory: boolean | "force";
     selectedClass: string;
-    continuous: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
+    continuous: boolean;
 } & {
     class?: any;
     touch?: boolean | TouchHandlers | undefined;
@@ -252,9 +252,9 @@ declare const VWindow: {
     mandatory: boolean | "force";
     touch: boolean | TouchHandlers;
     selectedClass: string;
-    continuous: boolean;
     nextIcon: IconValue;
     prevIcon: IconValue;
+    continuous: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: {
         group: GroupProvide;