@vuetify/nightly 3.8.6-master.2025-05-24 → 3.8.7-master.2025-05-27

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.8.6-master.2025-05-24
+* Vuetify v3.8.7-master.2025-05-27
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -2667,11 +2667,11 @@ const VApp = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": layoutRef,
-      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-      "style": [props.style]
-    }, [createVNode("div", {
+      "class": normalizeClass(['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([props.style])
+    }, [createElementVNode("div", {
       "class": "v-application__wrap"
     }, [slots.default?.()])]));
     return {
@@ -2711,10 +2711,10 @@ const VToolbarTitle = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || slots.text || props.text);
       return createVNode(props.tag, {
-        "class": ['v-toolbar-title', props.class],
-        "style": props.style
+        "class": normalizeClass(['v-toolbar-title', props.class]),
+        "style": normalizeStyle(props.style)
       }, {
-        default: () => [hasText && createVNode("div", {
+        default: () => [hasText && createElementVNode("div", {
           "class": "v-toolbar-title__placeholder"
         }, [slots.text ? slots.text() : props.text, slots.default?.()])]
       });
@@ -3174,16 +3174,16 @@ const VResponsive = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    useRender(() => createVNode("div", {
-      "class": ['v-responsive', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-responsive', {
         'v-responsive--inline': props.inline
-      }, props.class],
-      "style": [dimensionStyles.value, props.style]
-    }, [createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
+    }, [createElementVNode("div", {
       "class": "v-responsive__sizer",
-      "style": aspectStyles.value
-    }, null), slots.additional?.(), slots.default && createVNode("div", {
-      "class": ['v-responsive__content', props.contentClass]
+      "style": normalizeStyle(aspectStyles.value)
+    }, null), slots.additional?.(), slots.default && createElementVNode("div", {
+      "class": normalizeClass(['v-responsive__content', props.contentClass])
     }, [slots.default()])]));
     return {};
   }
@@ -3417,7 +3417,7 @@ const makeVImgProps = propsFactory({
 const VImg = genericComponent()({
   name: 'VImg',
   directives: {
-    intersect: Intersect
+    vIntersect: Intersect
   },
   props: makeVImgProps(),
   emits: {
@@ -3546,11 +3546,11 @@ const VImg = genericComponent()({
     }));
     const __image = () => {
       if (!normalisedSrc.value.src || state.value === 'idle') return null;
-      const img = createVNode("img", {
-        "class": ['v-img__img', containClasses.value],
-        "style": {
+      const img = createElementVNode("img", {
+        "class": normalizeClass(['v-img__img', containClasses.value]),
+        "style": normalizeStyle({
           objectPosition: props.position
-        },
+        }),
         "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.src,
         "srcset": normalisedSrc.value.srcset,
@@ -3567,7 +3567,7 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [withDirectives(sources ? createVNode("picture", {
+        default: () => [withDirectives(sources ? createElementVNode("picture", {
           "class": "v-img__picture"
         }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
       });
@@ -3575,11 +3575,11 @@ const VImg = genericComponent()({
     const __preloadImage = () => createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
-      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
-        "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
-        "style": {
+      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createElementVNode("img", {
+        "class": normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
+        "style": normalizeStyle({
           objectPosition: props.position
-        },
+        }),
         "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.lazySrc,
         "alt": props.alt,
@@ -3593,7 +3593,7 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && createVNode("div", {
+        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && createElementVNode("div", {
           "class": "v-img__placeholder"
         }, [slots.placeholder()])]
       });
@@ -3604,18 +3604,18 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [state.value === 'error' && createVNode("div", {
+        default: () => [state.value === 'error' && createElementVNode("div", {
           "class": "v-img__error"
         }, [slots.error()])]
       });
     };
     const __gradient = () => {
       if (!props.gradient) return null;
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-img__gradient",
-        "style": {
+        "style": normalizeStyle({
           backgroundImage: `linear-gradient(${props.gradient})`
-        }
+        })
       }, null);
     };
     const isBooted = shallowRef(false);
@@ -3647,9 +3647,9 @@ const VImg = genericComponent()({
         "aria-label": props.alt,
         "role": props.alt ? 'img' : undefined
       }), {
-        additional: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        additional: () => createElementVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
         default: slots.default
-      }), [[resolveDirective("intersect"), {
+      }), [[Intersect, {
         handler: init,
         options: props.options
       }, null, {
@@ -3792,16 +3792,16 @@ const VToolbar = genericComponent()({
       const extension = slots.extension?.();
       isExtended.value = !!(props.extended || extension);
       return createVNode(props.tag, {
-        "class": ['v-toolbar', {
+        "class": normalizeClass(['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
           'v-toolbar--collapse': props.collapse,
           'v-toolbar--flat': props.flat,
           'v-toolbar--floating': props.floating,
           [`v-toolbar--density-${props.density}`]: true
-        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-toolbar__image"
         }, [!slots.image ? createVNode(VImg, {
@@ -3824,19 +3824,19 @@ const VToolbar = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-toolbar__content",
-            "style": {
+            "style": normalizeStyle({
               height: convertToUnit(contentHeight.value)
-            }
-          }, [slots.prepend && createVNode("div", {
+            })
+          }, [slots.prepend && createElementVNode("div", {
             "class": "v-toolbar__prepend"
           }, [slots.prepend?.()]), hasTitle && createVNode(VToolbarTitle, {
             "key": "title",
             "text": props.title
           }, {
             text: slots.title
-          }), slots.default?.(), slots.append && createVNode("div", {
+          }), slots.default?.(), slots.append && createElementVNode("div", {
             "class": "v-toolbar__append"
           }, [slots.append?.()])])]
         }), createVNode(VDefaultsProvider, {
@@ -3847,11 +3847,11 @@ const VToolbar = genericComponent()({
           }
         }, {
           default: () => [createVNode(VExpandTransition, null, {
-            default: () => [isExtended.value && createVNode("div", {
+            default: () => [isExtended.value && createElementVNode("div", {
               "class": "v-toolbar__extension",
-              "style": {
+              "style": normalizeStyle({
                 height: convertToUnit(extensionHeight.value)
-              }
+              })
             }, [extension])]
           })]
         })]
@@ -4130,12 +4130,12 @@ function useDensity(props) {
 
 const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
 function genOverlays(isClickable, name) {
-  return createVNode(Fragment, null, [isClickable && createVNode("span", {
+  return createElementVNode(Fragment, null, [isClickable && createElementVNode("span", {
     "key": "overlay",
-    "class": `${name}__overlay`
-  }, null), createVNode("span", {
+    "class": normalizeClass(`${name}__overlay`)
+  }, null), createElementVNode("span", {
     "key": "underlay",
-    "class": `${name}__underlay`
+    "class": normalizeClass(`${name}__underlay`)
   }, null)]);
 }
 const makeVariantProps = propsFactory({
@@ -4219,10 +4219,10 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-btn-group', {
+        "class": normalizeClass(['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, slots);
     });
   }
@@ -4600,18 +4600,18 @@ const VSvgIcon = defineComponent({
       return createVNode(props.tag, mergeProps(attrs, {
         "style": null
       }), {
-        default: () => [createVNode("svg", {
+        default: () => [createElementVNode("svg", {
           "class": "v-icon__svg",
           "xmlns": "http://www.w3.org/2000/svg",
           "viewBox": "0 0 24 24",
           "role": "img",
           "aria-hidden": "true"
-        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createVNode("path", {
+        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createElementVNode("path", {
           "d": path[0],
           "fill-opacity": path[1]
-        }, null) : createVNode("path", {
+        }, null) : createElementVNode("path", {
           "d": path
-        }, null)) : createVNode("path", {
+        }, null)) : createElementVNode("path", {
           "d": props.icon
         }, null)])]
       });
@@ -4635,7 +4635,7 @@ const VClassIcon = defineComponent({
   setup(props) {
     return () => {
       return createVNode(props.tag, {
-        "class": props.icon
+        "class": normalizeClass(props.icon)
       }, null);
     };
   }
@@ -4788,19 +4788,19 @@ const VIcon = genericComponent()({
       return createVNode(iconData.value.component, {
         "tag": props.tag,
         "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+        "class": normalizeClass(['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
           'v-icon--clickable': hasClick,
           'v-icon--disabled': props.disabled,
           'v-icon--start': props.start,
           'v-icon--end': props.end
-        }, props.class],
-        "style": [{
+        }, props.class]),
+        "style": normalizeStyle([{
           '--v-icon-opacity': props.opacity
         }, !sizeClasses.value ? {
           fontSize: convertToUnit(props.size),
           height: convertToUnit(props.size),
           width: convertToUnit(props.size)
-        } : undefined, textColorStyles.value, props.style],
+        } : undefined, textColorStyles.value, props.style]),
         "role": hasClick ? 'button' : undefined,
         "aria-hidden": !hasClick,
         "tabindex": hasClick ? props.disabled ? -1 : 0 : undefined
@@ -4912,26 +4912,26 @@ const VProgressCircular = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": root,
-      "class": ['v-progress-circular', {
+      "class": normalizeClass(['v-progress-circular', {
         'v-progress-circular--indeterminate': !!props.indeterminate,
         'v-progress-circular--visible': isIntersecting.value,
         'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
-      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class],
-      "style": [sizeStyles.value, textColorStyles.value, props.style],
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class]),
+      "style": normalizeStyle([sizeStyles.value, textColorStyles.value, props.style]),
       "role": "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
       "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
     }, {
-      default: () => [createVNode("svg", {
-        "style": {
+      default: () => [createElementVNode("svg", {
+        "style": normalizeStyle({
           transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
-        },
+        }),
         "xmlns": "http://www.w3.org/2000/svg",
         "viewBox": `0 0 ${diameter.value} ${diameter.value}`
-      }, [createVNode("circle", {
-        "class": ['v-progress-circular__underlay', underlayColorClasses.value],
-        "style": underlayColorStyles.value,
+      }, [createElementVNode("circle", {
+        "class": normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
+        "style": normalizeStyle(underlayColorStyles.value),
         "fill": "transparent",
         "cx": "50%",
         "cy": "50%",
@@ -4939,7 +4939,7 @@ const VProgressCircular = genericComponent()({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": 0
-      }, null), createVNode("circle", {
+      }, null), createElementVNode("circle", {
         "class": "v-progress-circular__overlay",
         "fill": "transparent",
         "cx": "50%",
@@ -4948,7 +4948,7 @@ const VProgressCircular = genericComponent()({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": strokeDashOffset.value
-      }, null)]), slots.default && createVNode("div", {
+      }, null)]), slots.default && createElementVNode("div", {
         "class": "v-progress-circular__content"
       }, [slots.default({
         value: normalizedValue.value
@@ -5122,21 +5122,21 @@ const VProgressLinear = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": intersectionRef,
-      "class": ['v-progress-linear', {
+      "class": normalizeClass(['v-progress-linear', {
         'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
         'v-progress-linear--reverse': isReversed.value,
         'v-progress-linear--rounded': props.rounded,
         'v-progress-linear--rounded-bar': props.roundedBar,
         'v-progress-linear--striped': props.striped
-      }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-      "style": [{
+      }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([{
         bottom: props.location === 'bottom' ? 0 : undefined,
         top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...(props.absolute ? locationStyles.value : {})
-      }, props.style],
+      }, props.style]),
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -5144,10 +5144,10 @@ const VProgressLinear = genericComponent()({
       "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
       "onClick": props.clickable && handleClick
     }, {
-      default: () => [props.stream && createVNode("div", {
+      default: () => [props.stream && createElementVNode("div", {
         "key": "stream",
-        "class": ['v-progress-linear__stream', textColorClasses.value],
-        "style": {
+        "class": normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
+        "style": normalizeStyle({
           ...textColorStyles.value,
           [isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
           borderTop: `${convertToUnit(height.value / 2)} dotted`,
@@ -5155,35 +5155,35 @@ const VProgressLinear = genericComponent()({
           top: `calc(50% - ${convertToUnit(height.value / 4)})`,
           width: convertToUnit(100 - normalizedBuffer.value, '%'),
           '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
-        }
-      }, null), createVNode("div", {
-        "class": ['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-        "style": [backgroundColorStyles.value, {
+        })
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+        "style": normalizeStyle([backgroundColorStyles.value, {
           opacity: parseFloat(props.bgOpacity),
           width: props.stream ? 0 : undefined
-        }]
-      }, null), createVNode("div", {
-        "class": ['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined],
-        "style": [bufferColorStyles.value, {
+        }])
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+        "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
           width: convertToUnit(normalizedBuffer.value, '%')
-        }]
+        }])
       }, null), createVNode(Transition, {
         "name": transition.value
       }, {
-        default: () => [!props.indeterminate ? createVNode("div", {
-          "class": ['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined],
-          "style": [barColorStyles.value, {
+        default: () => [!props.indeterminate ? createElementVNode("div", {
+          "class": normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "style": normalizeStyle([barColorStyles.value, {
             width: convertToUnit(normalizedValue.value, '%')
-          }]
-        }, null) : createVNode("div", {
+          }])
+        }, null) : createElementVNode("div", {
           "class": "v-progress-linear__indeterminate"
-        }, [['long', 'short'].map(bar => createVNode("div", {
+        }, [['long', 'short'].map(bar => createElementVNode("div", {
           "key": bar,
-          "class": ['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined],
-          "style": barColorStyles.value
+          "class": normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "style": normalizeStyle(barColorStyles.value)
         }, null))])]
-      }), slots.default && createVNode("div", {
+      }), slots.default && createElementVNode("div", {
         "class": "v-progress-linear__content"
       }, [slots.default({
         value: normalizedValue.value,
@@ -5213,8 +5213,8 @@ function LoaderSlot(props, _ref) {
   let {
     slots
   } = _ref;
-  return createVNode("div", {
-    "class": `${props.name}__loader`
+  return createElementVNode("div", {
+    "class": normalizeClass(`${props.name}__loader`)
   }, [slots.default?.({
     color: props.color,
     isActive: props.active
@@ -5804,7 +5804,7 @@ const VBtn = genericComponent()({
         "onClick": onClick,
         "value": valueAttr.value
       }, link.linkProps), {
-        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode("span", {
+        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createElementVNode("span", {
           "key": "prepend",
           "class": "v-btn__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -5818,7 +5818,7 @@ const VBtn = genericComponent()({
               icon: props.prependIcon
             }
           }
-        }, slots.prepend)]), createVNode("span", {
+        }, slots.prepend)]), createElementVNode("span", {
           "class": "v-btn__content",
           "data-no-activator": ""
         }, [!slots.default && hasIcon ? createVNode(VIcon, {
@@ -5834,7 +5834,7 @@ const VBtn = genericComponent()({
           }
         }, {
           default: () => [slots.default?.() ?? toDisplayString(props.text)]
-        })]), !props.icon && hasAppend && createVNode("span", {
+        })]), !props.icon && hasAppend && createElementVNode("span", {
           "key": "append",
           "class": "v-btn__append"
         }, [!slots.append ? createVNode(VIcon, {
@@ -5848,7 +5848,7 @@ const VBtn = genericComponent()({
               icon: props.appendIcon
             }
           }
-        }, slots.append)]), !!props.loading && createVNode("span", {
+        }, slots.append)]), !!props.loading && createElementVNode("span", {
           "key": "loader",
           "class": "v-btn__loader"
         }, [slots.loader?.() ?? createVNode(VProgressCircular, {
@@ -6021,20 +6021,20 @@ const VAlert = genericComponent()({
       const hasTitle = !!(slots.title || props.title);
       const hasClose = !!(slots.close || props.closable);
       return isActive.value && createVNode(props.tag, {
-        "class": ['v-alert', props.border && {
+        "class": normalizeClass(['v-alert', props.border && {
           'v-alert--border': !!props.border,
           [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
         }, {
           'v-alert--prominent': props.prominent
-        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class]),
+        "style": normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
         "role": "alert"
       }, {
-        default: () => [genOverlays(false, 'v-alert'), props.border && createVNode("div", {
+        default: () => [genOverlays(false, 'v-alert'), props.border && createElementVNode("div", {
           "key": "border",
-          "class": ['v-alert__border', textColorClasses.value],
-          "style": textColorStyles.value
-        }, null), hasPrepend && createVNode("div", {
+          "class": normalizeClass(['v-alert__border', textColorClasses.value]),
+          "style": normalizeStyle(textColorStyles.value)
+        }, null), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-alert__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -6052,16 +6052,16 @@ const VAlert = genericComponent()({
               size: props.prominent ? 44 : 28
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-alert__content"
         }, [hasTitle && createVNode(VAlertTitle, {
           "key": "title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createVNode("div", {
+        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createElementVNode("div", {
           "key": "append",
           "class": "v-alert__append"
-        }, [slots.append()]), hasClose && createVNode("div", {
+        }, [slots.append()]), hasClose && createElementVNode("div", {
           "key": "close",
           "class": "v-alert__close"
         }, [!slots.close ? createVNode(VBtn, mergeProps({
@@ -6134,11 +6134,11 @@ const VAvatar = genericComponent()({
       sizeStyles
     } = useSize(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-avatar', {
+      "class": normalizeClass(['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
-      "style": [colorStyles.value, sizeStyles.value, props.style]
+      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class]),
+      "style": normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
     }, {
       default: () => [!slots.default ? props.image ? createVNode(VImg, {
         "key": "image",
@@ -6180,11 +6180,11 @@ const VLabel = genericComponent()({
     let {
       slots
     } = _ref;
-    useRender(() => createVNode("label", {
-      "class": ['v-label', {
+    useRender(() => createElementVNode("label", {
+      "class": normalizeClass(['v-label', {
         'v-label--clickable': !!props.onClick
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "onClick": props.onClick
     }, [props.text, slots.default?.()]));
     return {};
@@ -6279,11 +6279,11 @@ const VSelectionControlGroup = genericComponent()({
         valueComparator: toRef(() => props.valueComparator)
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-selection-control-group', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-selection-control-group', {
         'v-selection-control-group--inline': props.inline
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "role": props.type === 'radio' ? 'radiogroup' : undefined
     }, [slots.default?.()]));
     return {};
@@ -6359,7 +6359,7 @@ function useSelectionControl(props) {
 const VSelectionControl = genericComponent()({
   name: 'VSelectionControl',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   inheritAttrs: false,
   props: makeVSelectionControlProps(),
@@ -6430,7 +6430,7 @@ const VSelectionControl = genericComponent()({
         }
       }) : props.label;
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      const inputNode = createVNode("input", mergeProps({
+      const inputNode = createElementVNode("input", mergeProps({
         "ref": input,
         "checked": model.value,
         "disabled": !!props.disabled,
@@ -6445,7 +6445,7 @@ const VSelectionControl = genericComponent()({
         "name": props.name,
         "aria-checked": props.type === 'checkbox' ? model.value : undefined
       }, inputAttrs), null);
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-selection-control', {
           'v-selection-control--dirty': model.value,
           'v-selection-control--disabled': props.disabled,
@@ -6456,13 +6456,13 @@ const VSelectionControl = genericComponent()({
         }, densityClasses.value, props.class]
       }, rootAttrs, {
         "style": props.style
-      }), [createVNode("div", {
-        "class": ['v-selection-control__wrapper', textColorClasses.value],
-        "style": textColorStyles.value
+      }), [createElementVNode("div", {
+        "class": normalizeClass(['v-selection-control__wrapper', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
       }, [slots.default?.({
         backgroundColorClasses,
         backgroundColorStyles
-      }), withDirectives(createVNode("div", {
+      }), withDirectives(createElementVNode("div", {
         "class": ['v-selection-control__input']
       }, [slots.input?.({
         model,
@@ -6477,10 +6477,10 @@ const VSelectionControl = genericComponent()({
           onBlur,
           id: id.value
         }
-      }) ?? createVNode(Fragment, null, [icon.value && createVNode(VIcon, {
+      }) ?? createElementVNode(Fragment, null, [icon.value && createVNode(VIcon, {
         "key": "icon",
         "icon": icon.value
-      }, null), inputNode])]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
+      }, null), inputNode])]), [[Ripple, props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
         "for": id.value,
         "onClick": onClickLabel
       }, {
@@ -6621,10 +6621,10 @@ const VMessages = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
-      "class": ['v-messages', textColorClasses.value, props.class],
-      "style": [textColorStyles.value, props.style]
+      "class": normalizeClass(['v-messages', textColorClasses.value, props.class]),
+      "style": normalizeStyle([textColorStyles.value, props.style])
     }, {
-      default: () => [props.active && messages.value.map((message, i) => createVNode("div", {
+      default: () => [props.active && messages.value.map((message, i) => createElementVNode("div", {
         "class": "v-messages__message",
         "key": `${i}-${messages.value}`
       }, [slots.message ? slots.message({
@@ -7090,31 +7090,31 @@ const VInput = genericComponent()({
       const hasAppend = !!(slots.append || props.appendIcon);
       const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
-      return createVNode("div", {
-        "class": ['v-input', `v-input--${props.direction}`, {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--focused': props.focused,
           'v-input--glow': props.glow,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
-        "style": [dimensionStyles.value, props.style]
-      }, [hasPrepend && createVNode("div", {
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class]),
+        "style": normalizeStyle([dimensionStyles.value, props.style])
+      }, [hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
       }, [slots.prepend?.(slotProps.value), props.prependIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prepend",
         "color": iconColor.value
-      }, null)]), slots.default && createVNode("div", {
+      }, null)]), slots.default && createElementVNode("div", {
         "class": "v-input__control"
-      }, [slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
+      }, [slots.default?.(slotProps.value)]), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-input__append"
       }, [props.appendIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "append",
         "color": iconColor.value
-      }, null), slots.append?.(slotProps.value)]), hasDetails && createVNode("div", {
+      }, null), slots.append?.(slotProps.value)]), hasDetails && createElementVNode("div", {
         "id": messagesId.value,
         "class": "v-input__details",
         "role": "alert",
@@ -7863,42 +7863,42 @@ const VSlideGroup = genericComponent()({
       return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-slide-group', {
+      "class": normalizeClass(['v-slide-group', {
         'v-slide-group--vertical': !isHorizontal.value,
         'v-slide-group--has-affixes': hasAffixes.value,
         'v-slide-group--is-overflowing': isOverflowing.value
-      }, displayClasses.value, props.class],
-      "style": props.style,
+      }, displayClasses.value, props.class]),
+      "style": normalizeStyle(props.style),
       "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
       "onFocus": onFocus
     }, {
-      default: () => [hasAffixes.value && createVNode("div", {
+      default: () => [hasAffixes.value && createElementVNode("div", {
         "key": "prev",
-        "class": ['v-slide-group__prev', {
+        "class": normalizeClass(['v-slide-group__prev', {
           'v-slide-group__prev--disabled': !hasPrev.value
-        }],
+        }]),
         "onMousedown": onFocusAffixes,
         "onClick": () => hasPrev.value && scrollTo('prev')
       }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
           "icon": isRtl.value ? props.nextIcon : props.prevIcon
         }, null)]
-      })]), createVNode("div", {
+      })]), createElementVNode("div", {
         "key": "container",
         "ref": containerRef,
         "class": "v-slide-group__container",
         "onScroll": onScroll
-      }, [createVNode("div", {
+      }, [createElementVNode("div", {
         "ref": contentRef,
         "class": "v-slide-group__content",
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
         "onKeydown": onKeydown
-      }, [slots.default?.(slotProps.value)])]), hasAffixes.value && createVNode("div", {
+      }, [slots.default?.(slotProps.value)])]), hasAffixes.value && createElementVNode("div", {
         "key": "next",
-        "class": ['v-slide-group__next', {
+        "class": normalizeClass(['v-slide-group__next', {
           'v-slide-group__next--disabled': !hasNext.value
-        }],
+        }]),
         "onMousedown": onFocusAffixes,
         "onClick": () => hasNext.value && scrollTo('next')
       }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
@@ -8053,7 +8053,7 @@ const makeVChipProps = propsFactory({
 const VChip = genericComponent()({
   name: 'VChip',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVChipProps(),
   emits: {
@@ -8153,7 +8153,7 @@ const VChip = genericComponent()({
         default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VExpandXTransition, {
           "key": "filter"
         }, {
-          default: () => [withDirectives(createVNode("div", {
+          default: () => [withDirectives(createElementVNode("div", {
             "class": "v-chip__filter"
           }, [!slots.filter ? createVNode(VIcon, {
             "key": "filter-icon",
@@ -8167,10 +8167,10 @@ const VChip = genericComponent()({
               }
             }
           }, slots.filter)]), [[vShow, group.isSelected.value]])]
-        }), hasPrepend && createVNode("div", {
+        }), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-chip__prepend"
-        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
           "key": "prepend-icon",
           "icon": props.prependIcon,
           "start": true
@@ -8191,7 +8191,7 @@ const VChip = genericComponent()({
               start: true
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-chip__content",
           "data-no-activator": ""
         }, [slots.default?.({
@@ -8201,10 +8201,10 @@ const VChip = genericComponent()({
           toggle: group?.toggle,
           value: group?.value.value,
           disabled: props.disabled
-        }) ?? toDisplayString(props.text)]), hasAppend && createVNode("div", {
+        }) ?? toDisplayString(props.text)]), hasAppend && createElementVNode("div", {
           "key": "append",
           "class": "v-chip__append"
-        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
           "key": "append-icon",
           "end": true,
           "icon": props.appendIcon
@@ -8225,7 +8225,7 @@ const VChip = genericComponent()({
               icon: props.appendIcon
             }
           }
-        }, slots.append)]), hasClose && createVNode("button", mergeProps({
+        }, slots.append)]), hasClose && createElementVNode("button", mergeProps({
           "key": "close",
           "class": "v-chip__close",
           "type": "button",
@@ -8243,7 +8243,7 @@ const VChip = genericComponent()({
             }
           }
         }, slots.close)])]
-      }), [[resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
+      }), [[Ripple, isClickable.value && props.ripple, null]]);
     };
   }
 });
@@ -9016,13 +9016,13 @@ const VListGroup = genericComponent()({
       }
     }));
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-group', {
+      "class": normalizeClass(['v-list-group', {
         'v-list-group--prepend': list?.hasPrepend.value,
         'v-list-group--fluid': props.fluid,
         'v-list-group--subgroup': props.subgroup,
         'v-list-group--open': isOpen.value
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.activator && createVNode(VDefaultsProvider, {
         "defaults": activatorDefaults.value
@@ -9039,7 +9039,7 @@ const VListGroup = genericComponent()({
         },
         "disabled": !isBooted.value
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-list-group__items",
           "role": "group",
           "aria-labelledby": id.value
@@ -9065,10 +9065,10 @@ const VListItemSubtitle = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-item-subtitle', props.class],
-      "style": [{
+      "class": normalizeClass(['v-list-item-subtitle', props.class]),
+      "style": normalizeStyle([{
         '--v-list-item-subtitle-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -9131,7 +9131,7 @@ const makeVListItemProps = propsFactory({
 const VListItem = genericComponent()({
   name: 'VListItem',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVListItemProps(),
   emits: {
@@ -9266,10 +9266,10 @@ const VListItem = genericComponent()({
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
-        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode("div", {
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-list-item__prepend"
-        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
           "key": "prepend-avatar",
           "density": props.density,
           "image": props.prependAvatar
@@ -9295,9 +9295,9 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.prepend?.(slotProps.value)]
-        }), createVNode("div", {
+        }), createElementVNode("div", {
           "class": "v-list-item__spacer"
-        }, null)]), createVNode("div", {
+        }, null)]), createElementVNode("div", {
           "class": "v-list-item__content",
           "data-no-activator": ""
         }, [hasTitle && createVNode(VListItemTitle, {
@@ -9312,10 +9312,10 @@ const VListItem = genericComponent()({
           default: () => [slots.subtitle?.({
             subtitle: props.subtitle
           }) ?? toDisplayString(props.subtitle)]
-        }), slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
+        }), slots.default?.(slotProps.value)]), hasAppend && createElementVNode("div", {
           "key": "append",
           "class": "v-list-item__append"
-        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
           "key": "append-icon",
           "density": props.density,
           "icon": props.appendIcon
@@ -9341,10 +9341,10 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.append?.(slotProps.value)]
-        }), createVNode("div", {
+        }), createElementVNode("div", {
           "class": "v-list-item__spacer"
         }, null)])]
-      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
+      }), [[Ripple, isClickable.value && props.ripple]]);
     });
     return {
       activate,
@@ -9382,15 +9382,15 @@ const VListSubheader = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || props.title);
       return createVNode(props.tag, {
-        "class": ['v-list-subheader', {
+        "class": normalizeClass(['v-list-subheader', {
           'v-list-subheader--inset': props.inset,
           'v-list-subheader--sticky': props.sticky
-        }, textColorClasses.value, props.class],
-        "style": [{
+        }, textColorClasses.value, props.class]),
+        "style": normalizeStyle([{
           textColorStyles
-        }, props.style]
+        }, props.style])
       }, {
-        default: () => [hasText && createVNode("div", {
+        default: () => [hasText && createElementVNode("div", {
           "class": "v-list-subheader__text"
         }, [slots.default?.() ?? props.title])]
       });
@@ -9435,25 +9435,25 @@ const VDivider = genericComponent()({
       return styles;
     });
     useRender(() => {
-      const divider = createVNode("hr", {
-        "class": [{
+      const divider = createElementVNode("hr", {
+        "class": normalizeClass([{
           'v-divider': true,
           'v-divider--inset': props.inset,
           'v-divider--vertical': props.vertical
-        }, themeClasses.value, textColorClasses.value, props.class],
-        "style": [dividerStyles.value, textColorStyles.value, {
+        }, themeClasses.value, textColorClasses.value, props.class]),
+        "style": normalizeStyle([dividerStyles.value, textColorStyles.value, {
           '--v-border-opacity': props.opacity
-        }, props.style],
+        }, props.style]),
         "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
         "role": `${attrs.role || 'separator'}`
       }, null);
       if (!slots.default) return divider;
-      return createVNode("div", {
-        "class": ['v-divider__wrapper', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-divider__wrapper', {
           'v-divider__wrapper--vertical': props.vertical,
           'v-divider__wrapper--inset': props.inset
-        }]
-      }, [divider, createVNode("div", {
+        }])
+      }, [divider, createElementVNode("div", {
         "class": "v-divider__content"
       }, [slots.default()]), divider]);
     });
@@ -9872,12 +9872,12 @@ const VList = genericComponent()({
     useRender(() => {
       return createVNode(props.tag, {
         "ref": contentRef,
-        "class": ['v-list', {
+        "class": normalizeClass(['v-list', {
           'v-list--disabled': props.disabled,
           'v-list--nav': props.nav,
           'v-list--slim': props.slim
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
         "tabindex": props.disabled ? -1 : 0,
         "role": "listbox",
         "aria-activedescendant": undefined,
@@ -9921,11 +9921,11 @@ const VListItemAction = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-item-action', {
+      "class": normalizeClass(['v-list-item-action', {
         'v-list-item-action--start': props.start,
         'v-list-item-action--end': props.end
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, slots));
     return {};
   }
@@ -9946,11 +9946,11 @@ const VListItemMedia = genericComponent()({
     } = _ref;
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-list-item-media', {
+        "class": normalizeClass(['v-list-item-media', {
           'v-list-item-media--start': props.start,
           'v-list-item-media--end': props.end
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": normalizeStyle(props.style)
       }, slots);
     });
     return {};
@@ -11110,7 +11110,7 @@ function Scrim(props) {
     "name": "fade-transition",
     "appear": true
   }, {
-    default: () => [props.modelValue && createVNode("div", mergeProps({
+    default: () => [props.modelValue && createElementVNode("div", mergeProps({
       "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
       "style": props.color.backgroundColorStyles.value
     }, rest), null)]
@@ -11151,7 +11151,7 @@ const makeVOverlayProps = propsFactory({
 const VOverlay = genericComponent()({
   name: 'VOverlay',
   directives: {
-    ClickOutside
+    vClickOutside: ClickOutside
   },
   inheritAttrs: false,
   props: {
@@ -11331,7 +11331,7 @@ const VOverlay = genericComponent()({
       _onAfterLeave();
       emit('afterLeave');
     }
-    useRender(() => createVNode(Fragment, null, [slots.activator?.({
+    useRender(() => createElementVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
       targetRef,
       props: mergeProps({
@@ -11341,7 +11341,7 @@ const VOverlay = genericComponent()({
       "disabled": !teleportTarget.value,
       "to": teleportTarget.value
     }, {
-      default: () => [createVNode("div", mergeProps({
+      default: () => [createElementVNode("div", mergeProps({
         "class": ['v-overlay', {
           'v-overlay--absolute': props.absolute || props.contained,
           'v-overlay--active': isActive.value,
@@ -11365,13 +11365,13 @@ const VOverlay = genericComponent()({
         "onAfterEnter": onAfterEnter,
         "onAfterLeave": onAfterLeave
       }, {
-        default: () => [withDirectives(createVNode("div", mergeProps({
+        default: () => [withDirectives(createElementVNode("div", mergeProps({
           "ref": contentEl,
           "class": ['v-overlay__content', props.contentClass],
           "style": [dimensionStyles.value, contentStyles.value]
         }, contentEvents.value, props.contentProps), [slots.default?.({
           isActive
-        })]), [[vShow, isActive.value], [resolveDirective("click-outside"), {
+        })]), [[vShow, isActive.value], [ClickOutside, {
           handler: onClickOutside,
           closeConditional,
           include: () => [activatorEl.value]
@@ -11700,11 +11700,11 @@ const VCounter = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-counter', {
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-counter', {
           'text-error': props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": normalizeStyle(props.style)
       }, [slots.default ? slots.default({
         counter: counter.value,
         max: props.max,
@@ -11727,10 +11727,10 @@ const VFieldLabel = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(VLabel, {
-      "class": ['v-field-label', {
+      "class": normalizeClass(['v-field-label', {
         'v-field-label--floating': props.floating
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "aria-hidden": props.floating || undefined
     }, slots));
     return {};
@@ -11907,7 +11907,7 @@ const VField = genericComponent()({
           for: id.value
         }
       }) : props.label;
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-field', {
           'v-field--active': isActive.value,
           'v-field--appended': hasAppend,
@@ -11927,7 +11927,7 @@ const VField = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
         "style": [backgroundColorStyles.value, props.style],
         "onClick": onClick
-      }, attrs), [createVNode("div", {
+      }, attrs), [createElementVNode("div", {
         "class": "v-field__overlay"
       }, null), createVNode(LoaderSlot, {
         "name": "v-field",
@@ -11935,23 +11935,23 @@ const VField = genericComponent()({
         "color": props.error ? 'error' : typeof props.loading === 'string' ? props.loading : props.color
       }, {
         default: slots.loader
-      }), hasPrepend && createVNode("div", {
+      }), hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-field__prepend-inner"
       }, [props.prependInnerIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prependInner",
         "color": iconColor.value
-      }, null), slots['prepend-inner']?.(slotProps.value)]), createVNode("div", {
+      }, null), slots['prepend-inner']?.(slotProps.value)]), createElementVNode("div", {
         "class": "v-field__field",
         "data-no-activator": ""
       }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "key": "floating-label",
         "ref": floatingLabelRef,
-        "class": [textColorClasses.value],
+        "class": normalizeClass([textColorClasses.value]),
         "floating": true,
         "for": id.value,
-        "style": textColorStyles.value
+        "style": normalizeStyle(textColorStyles.value)
       }, {
         default: () => [label()]
       }), hasLabel.value && createVNode(VFieldLabel, {
@@ -11969,14 +11969,14 @@ const VField = genericComponent()({
         },
         focus,
         blur
-      }) ?? createVNode("div", {
+      }) ?? createElementVNode("div", {
         "id": id.value,
         "class": "v-field__input",
         "aria-describedby": messagesId.value
       }, null)]), hasClear && createVNode(VExpandXTransition, {
         "key": "clear"
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-field__clearable",
           "onMousedown": e => {
             e.preventDefault();
@@ -12004,19 +12004,19 @@ const VField = genericComponent()({
             "tabindex": -1
           }, null)]
         })]), [[vShow, props.dirty]])]
-      }), hasAppend && createVNode("div", {
+      }), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-field__append-inner"
       }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "appendInner",
         "color": iconColor.value
-      }, null)]), createVNode("div", {
-        "class": ['v-field__outline', textColorClasses.value],
-        "style": textColorStyles.value
-      }, [isOutlined && createVNode(Fragment, null, [createVNode("div", {
+      }, null)]), createElementVNode("div", {
+        "class": normalizeClass(['v-field__outline', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
+      }, [isOutlined && createElementVNode(Fragment, null, [createElementVNode("div", {
         "class": "v-field__outline__start"
-      }, null), hasFloatingLabel.value && createVNode("div", {
+      }, null), hasFloatingLabel.value && createElementVNode("div", {
         "class": "v-field__outline__notch"
       }, [createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
@@ -12024,7 +12024,7 @@ const VField = genericComponent()({
         "for": id.value
       }, {
         default: () => [label()]
-      })]), createVNode("div", {
+      })]), createElementVNode("div", {
         "class": "v-field__outline__end"
       }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
@@ -12065,7 +12065,7 @@ const makeVTextFieldProps = propsFactory({
 const VTextField = genericComponent()({
   name: 'VTextField',
   directives: {
-    Intersect
+    vIntersect: Intersect
   },
   inheritAttrs: false,
   props: makeVTextFieldProps(),
@@ -12197,7 +12197,7 @@ const VTextField = genericComponent()({
                   ...slotProps
                 }
               } = _ref3;
-              const inputNode = withDirectives(createVNode("input", mergeProps({
+              const inputNode = withDirectives(createElementVNode("input", mergeProps({
                 "ref": inputRef,
                 "value": model.value,
                 "onInput": onInput,
@@ -12210,29 +12210,29 @@ const VTextField = genericComponent()({
                 "type": props.type,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), [[resolveDirective("intersect"), {
+              }, slotProps, inputAttrs), null), [[Intersect, {
                 handler: onIntersect
               }, null, {
                 once: true
               }]]);
-              return createVNode(Fragment, null, [props.prefix && createVNode("span", {
+              return createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [createVNode("span", {
+              }, [createElementVNode("span", {
                 "class": "v-text-field__prefix__text"
-              }, [props.prefix])]), slots.default ? createVNode("div", {
-                "class": fieldClass,
+              }, [props.prefix])]), slots.default ? createElementVNode("div", {
+                "class": normalizeClass(fieldClass),
                 "data-no-activator": ""
               }, [slots.default(), inputNode]) : cloneVNode(inputNode, {
                 class: fieldClass
-              }), props.suffix && createVNode("span", {
+              }), props.suffix && createElementVNode("span", {
                 "class": "v-text-field__suffix"
-              }, [createVNode("span", {
+              }, [createElementVNode("span", {
                 "class": "v-text-field__suffix__text"
               }, [props.suffix])])]);
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": props.persistentCounter || isFocused.value,
           "value": counterValue.value,
           "max": max.value,
@@ -12270,9 +12270,9 @@ const VVirtualScrollItem = genericComponent()({
     watch(() => contentRect.value?.height, height => {
       if (height != null) emit('update:height', height);
     });
-    useRender(() => props.renderless ? createVNode(Fragment, null, [slots.default?.({
+    useRender(() => props.renderless ? createElementVNode(Fragment, null, [slots.default?.({
       itemRef: resizeRef
-    })]) : createVNode("div", mergeProps({
+    })]) : createElementVNode("div", mergeProps({
       "ref": resizeRef,
       "class": ['v-virtual-scroll__item', props.class],
       "style": props.style
@@ -12607,30 +12607,30 @@ const VVirtualScroll = genericComponent()({
           ...slotProps
         })
       }));
-      return props.renderless ? createVNode(Fragment, null, [createVNode("div", {
+      return props.renderless ? createElementVNode(Fragment, null, [createElementVNode("div", {
         "ref": markerRef,
         "class": "v-virtual-scroll__spacer",
-        "style": {
+        "style": normalizeStyle({
           paddingTop: convertToUnit(paddingTop.value)
-        }
-      }, null), children, createVNode("div", {
+        })
+      }, null), children, createElementVNode("div", {
         "class": "v-virtual-scroll__spacer",
-        "style": {
+        "style": normalizeStyle({
           paddingBottom: convertToUnit(paddingBottom.value)
-        }
-      }, null)]) : createVNode("div", {
+        })
+      }, null)]) : createElementVNode("div", {
         "ref": containerRef,
-        "class": ['v-virtual-scroll', props.class],
+        "class": normalizeClass(['v-virtual-scroll', props.class]),
         "onScrollPassive": handleScroll,
         "onScrollend": handleScrollend,
-        "style": [dimensionStyles.value, props.style]
-      }, [createVNode("div", {
+        "style": normalizeStyle([dimensionStyles.value, props.style])
+      }, [createElementVNode("div", {
         "ref": markerRef,
         "class": "v-virtual-scroll__container",
-        "style": {
+        "style": normalizeStyle({
           paddingTop: convertToUnit(paddingTop.value),
           paddingBottom: convertToUnit(paddingBottom.value)
-        }
+        })
       }, [children])]);
     });
     return {
@@ -13001,7 +13001,7 @@ const VSelect = genericComponent()({
         "title": t(label.value)
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -13059,7 +13059,7 @@ const VSelect = genericComponent()({
                     let {
                       isSelected
                     } = _ref3;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -13105,7 +13105,7 @@ const VSelect = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
             "class": "v-select__selection"
           }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
@@ -13125,9 +13125,9 @@ const VSelect = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-select__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-select__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -13135,7 +13135,7 @@ const VSelect = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
             "class": "v-select__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon
@@ -13286,17 +13286,17 @@ function highlightResult(name, text, matches) {
   if (matches == null || !matches.length) return text;
   return matches.map((match, i) => {
     const start = i === 0 ? 0 : matches[i - 1][1];
-    const result = [createVNode("span", {
-      "class": `${name}__unmask`
-    }, [text.slice(start, match[0])]), createVNode("span", {
-      "class": `${name}__mask`
+    const result = [createElementVNode("span", {
+      "class": normalizeClass(`${name}__unmask`)
+    }, [text.slice(start, match[0])]), createElementVNode("span", {
+      "class": normalizeClass(`${name}__mask`)
     }, [text.slice(match[0], match[1])])];
     if (i === matches.length - 1) {
-      result.push(createVNode("span", {
-        "class": `${name}__unmask`
+      result.push(createElementVNode("span", {
+        "class": normalizeClass(`${name}__unmask`)
       }, [text.slice(match[1])]));
     }
-    return createVNode(Fragment, null, [result]);
+    return createElementVNode(Fragment, null, [result]);
   });
 }
 
@@ -13598,7 +13598,7 @@ const VAutocomplete = genericComponent()({
         "onKeydown": onKeydown
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -13657,7 +13657,7 @@ const VAutocomplete = genericComponent()({
                     let {
                       isSelected
                     } = _ref4;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -13706,10 +13706,10 @@ const VAutocomplete = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
-            "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
-            "style": index === selectionIndex.value ? textColorStyles.value : {}
+            "class": normalizeClass(['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]]),
+            "style": normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
           }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -13727,9 +13727,9 @@ const VAutocomplete = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-autocomplete__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-autocomplete__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -13737,7 +13737,7 @@ const VAutocomplete = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
             "class": "v-autocomplete__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon,
@@ -13834,12 +13834,12 @@ const VBadge = genericComponent()({
       }, attrs, {
         "style": props.style
       }), {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-badge__wrapper"
         }, [ctx.slots.default?.(), createVNode(MaybeTransition, {
           "transition": props.transition
         }, {
-          default: () => [withDirectives(createVNode("span", mergeProps({
+          default: () => [withDirectives(createElementVNode("span", mergeProps({
             "class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
             "style": [backgroundColorStyles.value, textColorStyles.value, props.inline ? {} : locationStyles.value],
             "aria-atomic": "true",
@@ -13876,9 +13876,9 @@ const VBannerActions = genericComponent()({
         variant: 'text'
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-banner-actions', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-banner-actions', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -13964,15 +13964,15 @@ const VBanner = genericComponent()({
       const hasPrependMedia = !!(props.avatar || props.icon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       return createVNode(props.tag, {
-        "class": ['v-banner', {
+        "class": normalizeClass(['v-banner', {
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
         "role": "banner"
       }, {
-        default: () => [hasPrepend && createVNode("div", {
+        default: () => [hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-banner__prepend"
         }, [!slots.prepend ? createVNode(VAvatar, {
@@ -13992,7 +13992,7 @@ const VBanner = genericComponent()({
               image: props.avatar
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-banner__content"
         }, [hasText && createVNode(VBannerText, {
           "key": "text"
@@ -14101,16 +14101,16 @@ const VBottomNavigation = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-bottom-navigation', {
+        "class": normalizeClass(['v-bottom-navigation', {
           'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
           'v-bottom-navigation--shift': props.mode === 'shift'
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, {
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value)
-        }, ssrBootStyles.value, props.style]
+        }, ssrBootStyles.value, props.style])
       }, {
-        default: () => [slots.default && createVNode("div", {
+        default: () => [slots.default && createElementVNode("div", {
           "class": "v-bottom-navigation__content"
         }, [slots.default()])]
       });
@@ -14297,10 +14297,10 @@ const VBreadcrumbsDivider = genericComponent()({
     let {
       slots
     } = _ref;
-    useRender(() => createVNode("li", {
+    useRender(() => createElementVNode("li", {
       "aria-hidden": "true",
-      "class": ['v-breadcrumbs-divider', props.class],
-      "style": props.style
+      "class": normalizeClass(['v-breadcrumbs-divider', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots?.default?.() ?? props.divider]));
     return {};
   }
@@ -14335,15 +14335,15 @@ const VBreadcrumbsItem = genericComponent()({
     } = useTextColor(() => isActive.value ? props.activeColor : props.color);
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-breadcrumbs-item', {
+        "class": normalizeClass(['v-breadcrumbs-item', {
           'v-breadcrumbs-item--active': isActive.value,
           'v-breadcrumbs-item--disabled': props.disabled,
           [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, textColorClasses.value, props.class],
-        "style": [textColorStyles.value, props.style],
+        }, textColorClasses.value, props.class]),
+        "style": normalizeStyle([textColorStyles.value, props.style]),
         "aria-current": isActive.value ? 'page' : undefined
       }, {
-        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createVNode("a", mergeProps({
+        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createElementVNode("a", mergeProps({
           "class": "v-breadcrumbs-item--link",
           "onClick": link.navigate
         }, link.linkProps), [slots.default?.() ?? props.title])]
@@ -14419,10 +14419,10 @@ const VBreadcrumbs = genericComponent()({
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.icon);
       return createVNode(props.tag, {
-        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        "class": normalizeClass(['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [hasPrepend && createVNode("li", {
+        default: () => [hasPrepend && createElementVNode("li", {
           "key": "prepend",
           "class": "v-breadcrumbs__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -14443,7 +14443,7 @@ const VBreadcrumbs = genericComponent()({
             item,
             raw
           } = _ref2;
-          return createVNode(Fragment, null, [slots.item?.({
+          return createElementVNode(Fragment, null, [slots.item?.({
             item,
             index
           }) ?? createVNode(VBreadcrumbsItem, mergeProps({
@@ -14482,9 +14482,9 @@ const VCardActions = genericComponent()({
         variant: 'text'
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-card-actions', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-card-actions', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -14503,10 +14503,10 @@ const VCardSubtitle = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-card-subtitle', props.class],
-      "style": [{
+      "class": normalizeClass(['v-card-subtitle', props.class]),
+      "style": normalizeStyle([{
         '--v-card-subtitle-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -14545,13 +14545,13 @@ const VCardItem = genericComponent()({
       const hasAppend = !!(hasAppendMedia || slots.append);
       const hasTitle = !!(props.title != null || slots.title);
       const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-      return createVNode("div", {
-        "class": ['v-card-item', props.class],
-        "style": props.style
-      }, [hasPrepend && createVNode("div", {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-card-item', props.class]),
+        "style": normalizeStyle(props.style)
+      }, [hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-card-item__prepend"
-      }, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+      }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
         "key": "prepend-avatar",
         "density": props.density,
         "image": props.prependAvatar
@@ -14572,7 +14572,7 @@ const VCardItem = genericComponent()({
             icon: props.prependIcon
           }
         }
-      }, slots.prepend)]), createVNode("div", {
+      }, slots.prepend)]), createElementVNode("div", {
         "class": "v-card-item__content"
       }, [hasTitle && createVNode(VCardTitle, {
         "key": "title"
@@ -14582,10 +14582,10 @@ const VCardItem = genericComponent()({
         "key": "subtitle"
       }, {
         default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
-      }), slots.default?.()]), hasAppend && createVNode("div", {
+      }), slots.default?.()]), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-card-item__append"
-      }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+      }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
         "key": "append-icon",
         "density": props.density,
         "icon": props.appendIcon
@@ -14625,10 +14625,10 @@ const VCardText = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-card-text', props.class],
-      "style": [{
+      "class": normalizeClass(['v-card-text', props.class]),
+      "style": normalizeStyle([{
         '--v-card-text-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -14684,7 +14684,7 @@ const makeVCardProps = propsFactory({
 const VCard = genericComponent()({
   name: 'VCard',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVCardProps(),
   setup(props, _ref) {
@@ -14748,7 +14748,7 @@ const VCard = genericComponent()({
         "onClick": isClickable && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
       }, link.linkProps), {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-card__image"
         }, [!slots.image ? createVNode(VImg, {
@@ -14791,7 +14791,7 @@ const VCard = genericComponent()({
         }), slots.default?.(), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
         }), genOverlays(isClickable, 'v-card')]
-      }), [[resolveDirective("ripple"), isClickable && props.ripple]]);
+      }), [[Ripple, isClickable && props.ripple]]);
     });
     return {};
   }
@@ -14950,7 +14950,7 @@ const makeVWindowProps = propsFactory({
 const VWindow = genericComponent()({
   name: 'VWindow',
   directives: {
-    Touch
+    vTouch: Touch
   },
   props: makeVWindowProps(),
   emits: {
@@ -15022,7 +15022,7 @@ const VWindow = genericComponent()({
       };
       arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
         props: prevProps
-      }) : createVNode(VBtn, prevProps, null) : createVNode("div", null, null));
+      }) : createVNode(VBtn, prevProps, null) : createElementVNode("div", null, null));
       const nextProps = {
         icon: isRtl.value ? props.prevIcon : props.nextIcon,
         class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
@@ -15031,7 +15031,7 @@ const VWindow = genericComponent()({
       };
       arrows.push(canMoveForward.value ? slots.next ? slots.next({
         props: nextProps
-      }) : createVNode(VBtn, nextProps, null) : createVNode("div", null, null));
+      }) : createVNode(VBtn, nextProps, null) : createElementVNode("div", null, null));
       return arrows;
     });
     const touchOptions = computed(() => {
@@ -15057,24 +15057,24 @@ const VWindow = genericComponent()({
     });
     useRender(() => withDirectives(createVNode(props.tag, {
       "ref": rootRef,
-      "class": ['v-window', {
+      "class": normalizeClass(['v-window', {
         'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-      }, themeClasses.value, props.class],
-      "style": props.style
+      }, themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
-      default: () => [createVNode("div", {
+      default: () => [createElementVNode("div", {
         "class": "v-window__container",
-        "style": {
+        "style": normalizeStyle({
           height: transitionHeight.value
-        }
+        })
       }, [slots.default?.({
         group
-      }), props.showArrows !== false && createVNode("div", {
+      }), props.showArrows !== false && createElementVNode("div", {
         "class": "v-window__controls"
       }, [arrows.value])]), slots.additional?.({
         group
       })]
-    }), [[resolveDirective("touch"), touchOptions.value]]));
+    }), [[Touch, touchOptions.value]]));
     return {
       group
     };
@@ -15159,12 +15159,12 @@ const VCarousel = genericComponent()({
           let {
             group
           } = _ref2;
-          return createVNode(Fragment, null, [!props.hideDelimiters && createVNode("div", {
+          return createElementVNode(Fragment, null, [!props.hideDelimiters && createElementVNode("div", {
             "class": "v-carousel__controls",
-            "style": {
+            "style": normalizeStyle({
               left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
               right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-            }
+            })
           }, [group.items.value.length > 0 && createVNode(VDefaultsProvider, {
             "defaults": {
               VBtn: {
@@ -15218,7 +15218,7 @@ const makeVWindowItemProps = propsFactory({
 const VWindowItem = genericComponent()({
   name: 'VWindowItem',
   directives: {
-    Touch
+    vTouch: Touch
   },
   props: makeVWindowItemProps(),
   emits: {
@@ -15302,9 +15302,9 @@ const VWindowItem = genericComponent()({
       "transition": transition.value,
       "disabled": !isBooted.value
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
-        "style": props.style
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-window-item', groupItem.selectedClass.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
     return {
@@ -15504,21 +15504,21 @@ const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": resizeRef,
-      "class": ['v-color-picker-canvas', props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-color-picker-canvas', props.class]),
+      "style": normalizeStyle(props.style),
       "onMousedown": handleMouseDown,
       "onTouchstartPassive": handleMouseDown
-    }, [createVNode("canvas", {
+    }, [createElementVNode("canvas", {
       "ref": canvasRef,
       "width": canvasWidth.value,
       "height": canvasHeight.value
-    }, null), props.color && createVNode("div", {
-      "class": ['v-color-picker-canvas__dot', {
+    }, null), props.color && createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
-      }],
-      "style": dotStyles.value
+      }]),
+      "style": normalizeStyle(dotStyles.value)
     }, null)]));
     return {};
   }
@@ -15718,9 +15718,9 @@ const VColorPickerInput = _ref => {
     label,
     ...rest
   } = _ref;
-  return createVNode("div", {
+  return createElementVNode("div", {
     "class": "v-color-picker-edit__input"
-  }, [createVNode("input", rest, null), createVNode("span", null, [label])]);
+  }, [createElementVNode("input", normalizeProps(guardReactiveProps(rest)), null), createElementVNode("span", null, [label])]);
 };
 const makeVColorPickerEditProps = propsFactory({
   color: Object,
@@ -15777,9 +15777,9 @@ const VColorPickerEdit = defineComponent({
         };
       });
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-edit', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-edit', props.class]),
+      "style": normalizeStyle(props.style)
     }, [inputs.value?.map(props => createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",
@@ -16122,7 +16122,7 @@ const makeVSliderThumbProps = propsFactory({
 const VSliderThumb = genericComponent()({
   name: 'VSliderThumb',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVSliderThumbProps(),
   emits: {
@@ -16202,15 +16202,15 @@ const VSliderThumb = genericComponent()({
     }
     useRender(() => {
       const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%');
-      return createVNode("div", {
-        "class": ['v-slider-thumb', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }, props.class, rtlClasses.value],
-        "style": [{
+        }, props.class, rtlClasses.value]),
+        "style": normalizeStyle([{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-        }, props.style],
+        }, props.style]),
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
         "aria-label": props.name,
@@ -16220,25 +16220,25 @@ const VSliderThumb = genericComponent()({
         "aria-readonly": !!readonly.value,
         "aria-orientation": direction.value,
         "onKeydown": !readonly.value ? onKeydown : undefined
-      }, [createVNode("div", {
-        "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
-        "style": {
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
+        "style": normalizeStyle({
           ...textColorStyles.value
-        }
-      }, null), withDirectives(createVNode("div", {
-        "class": ['v-slider-thumb__ripple', textColorClasses.value],
-        "style": textColorStyles.value
-      }, null), [[resolveDirective("ripple"), props.ripple, null, {
+        })
+      }, null), withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
+      }, null), [[Ripple, props.ripple, null, {
         circle: true,
         center: true
       }]]), createVNode(VScaleTransition, {
         "origin": "bottom center"
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-slider-thumb__label-container"
-        }, [createVNode("div", {
+        }, [createElementVNode("div", {
           "class": ['v-slider-thumb__label']
-        }, [createVNode("div", null, [slots['thumb-label']?.({
+        }, [createElementVNode("div", null, [slots['thumb-label']?.({
           modelValue: props.modelValue
         }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
       })]);
@@ -16315,17 +16315,17 @@ const VSliderTrack = genericComponent()({
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
       return ticks.map((tick, index) => {
         const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
-        return createVNode("div", {
+        return createElementVNode("div", {
           "key": tick.value,
-          "class": ['v-slider-track__tick', {
+          "class": normalizeClass(['v-slider-track__tick', {
             'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
             'v-slider-track__tick--first': tick.value === min.value,
             'v-slider-track__tick--last': tick.value === max.value
-          }],
-          "style": {
+          }]),
+          "style": normalizeStyle({
             [startDir.value]: directionValue
-          }
-        }, [(tick.label || slots['tick-label']) && createVNode("div", {
+          })
+        }, [(tick.label || slots['tick-label']) && createElementVNode("div", {
           "class": "v-slider-track__tick-label"
         }, [slots['tick-label']?.({
           tick,
@@ -16334,30 +16334,30 @@ const VSliderTrack = genericComponent()({
       });
     });
     useRender(() => {
-      return createVNode("div", {
-        "class": ['v-slider-track', roundedClasses.value, props.class],
-        "style": [{
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track', roundedClasses.value, props.class]),
+        "style": normalizeStyle([{
           '--v-slider-track-size': convertToUnit(trackSize.value),
           '--v-slider-tick-size': convertToUnit(tickSize.value)
-        }, props.style]
-      }, [createVNode("div", {
-        "class": ['v-slider-track__background', trackColorClasses.value, {
+        }, props.style])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
-        }],
-        "style": {
+        }]),
+        "style": normalizeStyle({
           ...backgroundStyles.value,
           ...trackColorStyles.value
-        }
-      }, null), createVNode("div", {
-        "class": ['v-slider-track__fill', trackFillColorClasses.value],
-        "style": {
+        })
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__fill', trackFillColorClasses.value]),
+        "style": normalizeStyle({
           ...trackFillStyles.value,
           ...trackFillColorStyles.value
-        }
-      }, null), showTicks.value && createVNode("div", {
-        "class": ['v-slider-track__ticks', {
+        })
+      }, null), showTicks.value && createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__ticks', {
           'v-slider-track__ticks--always-show': showTicks.value === 'always'
-        }]
+        }])
       }, [computedTicks.value])]);
     });
     return {};
@@ -16451,7 +16451,7 @@ const VSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createElementVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "id": slotProps.id.value,
           "class": "v-slider__label",
           "text": props.label
@@ -16461,11 +16461,11 @@ const VSlider = genericComponent()({
             id,
             messagesId
           } = _ref4;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
             "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-          }, [createVNode("input", {
+          }, [createElementVNode("input", {
             "id": id.value,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
@@ -16538,12 +16538,12 @@ const VColorPickerPreview = defineComponent({
         });
       } catch (e) {}
     }
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-preview', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }, props.class],
-      "style": props.style
-    }, [SUPPORTS_EYE_DROPPER && createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle(props.style)
+    }, [SUPPORTS_EYE_DROPPER && createElementVNode("div", {
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [createVNode(VBtn, {
@@ -16552,13 +16552,13 @@ const VColorPickerPreview = defineComponent({
       "icon": "$eyeDropper",
       "variant": "plain",
       "onClick": openEyeDropper
-    }, null)]), createVNode("div", {
+    }, null)]), createElementVNode("div", {
       "class": "v-color-picker-preview__dot"
-    }, [createVNode("div", {
-      "style": {
+    }, [createElementVNode("div", {
+      "style": normalizeStyle({
         background: HSVtoCSS(props.color ?? nullColor)
-      }
-    }, null)]), createVNode("div", {
+      })
+    }, null)]), createElementVNode("div", {
       "class": "v-color-picker-preview__sliders"
     }, [createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",
@@ -16943,24 +16943,24 @@ const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-swatches', props.class],
-      "style": [{
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-swatches', props.class]),
+      "style": normalizeStyle([{
         maxHeight: convertToUnit(props.maxHeight)
-      }, props.style]
-    }, [createVNode("div", null, [props.swatches.map(swatch => createVNode("div", {
+      }, props.style])
+    }, [createElementVNode("div", null, [props.swatches.map(swatch => createElementVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
       const rgba = parseColor(color);
       const hsva = RGBtoHSV(rgba);
       const background = RGBtoCSS(rgba);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
-      }, [createVNode("div", {
-        "style": {
+      }, [createElementVNode("div", {
+        "style": normalizeStyle({
           background
-        }
+        })
       }, [props.color && deepEqual(props.color, hsva) ? createVNode(VIcon, {
         "size": "x-small",
         "icon": "$success",
@@ -17019,8 +17019,8 @@ const VSheet = genericComponent()({
       roundedClasses
     } = useRounded(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
+      "class": normalizeClass(['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -17059,17 +17059,17 @@ const VPicker = genericComponent()({
         }, props.class],
         "style": props.style
       }), {
-        default: () => [!props.hideHeader && createVNode("div", {
+        default: () => [!props.hideHeader && createElementVNode("div", {
           "key": "header",
-          "class": [backgroundColorClasses.value],
-          "style": [backgroundColorStyles.value]
+          "class": normalizeClass([backgroundColorClasses.value]),
+          "style": normalizeStyle([backgroundColorStyles.value])
         }, [hasTitle && createVNode(VPickerTitle, {
           "key": "picker-title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), slots.header && createVNode("div", {
+        }), slots.header && createElementVNode("div", {
           "class": "v-picker__header"
-        }, [slots.header()])]), createVNode("div", {
+        }, [slots.header()])]), createElementVNode("div", {
           "class": "v-picker__body"
         }, [slots.default?.()]), slots.actions && createVNode(VDefaultsProvider, {
           "defaults": {
@@ -17079,7 +17079,7 @@ const VPicker = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-picker__actions"
           }, [slots.actions()])]
         })]
@@ -17941,7 +17941,7 @@ const VColorPicker = defineComponent({
         }, props.style]
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [!props.hideCanvas && createVNode(VColorPickerCanvas, {
+        default: () => createElementVNode(Fragment, null, [!props.hideCanvas && createVNode(VColorPickerCanvas, {
           "key": "canvas",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
@@ -17949,7 +17949,7 @@ const VColorPicker = defineComponent({
           "dotSize": props.dotSize,
           "width": props.width,
           "height": props.canvasHeight
-        }, null), (!props.hideSliders || !props.hideInputs) && createVNode("div", {
+        }, null), (!props.hideSliders || !props.hideInputs) && createElementVNode("div", {
           "key": "controls",
           "class": "v-color-picker__controls"
         }, [!props.hideSliders && createVNode(VColorPickerPreview, {
@@ -18324,7 +18324,7 @@ const VCombobox = genericComponent()({
         "onKeydown": onKeydown
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -18383,7 +18383,7 @@ const VCombobox = genericComponent()({
                     let {
                       isSelected
                     } = _ref5;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -18432,10 +18432,10 @@ const VCombobox = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
-            "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
-            "style": index === selectionIndex.value ? textColorStyles.value : {}
+            "class": normalizeClass(['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]]),
+            "style": normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
           }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -18453,9 +18453,9 @@ const VCombobox = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-combobox__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-combobox__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -18463,7 +18463,7 @@ const VCombobox = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
             "class": "v-combobox__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon,
@@ -18551,7 +18551,7 @@ const VConfirmEdit = genericComponent()({
       emit('cancel');
     }
     function actions(actionsProps) {
-      return createVNode(Fragment, null, [createVNode(VBtn, mergeProps({
+      return createElementVNode(Fragment, null, [createVNode(VBtn, mergeProps({
         "disabled": isCancelDisabled.value,
         "variant": "text",
         "color": props.color,
@@ -18567,7 +18567,7 @@ const VConfirmEdit = genericComponent()({
     }
     let actionsUsed = false;
     useRender(() => {
-      return createVNode(Fragment, null, [slots.default?.({
+      return createElementVNode(Fragment, null, [slots.default?.({
         model: internalModel,
         save,
         cancel,
@@ -19450,10 +19450,10 @@ const VDataIterator = genericComponent()({
       groupedItems: paginatedItems.value
     }));
     useRender(() => createVNode(props.tag, {
-      "class": ['v-data-iterator', {
+      "class": normalizeClass(['v-data-iterator', {
         'v-data-iterator--loading': props.loading
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.header?.(slotProps.value), createVNode(MaybeTransition, {
         "transition": props.transition
@@ -19464,7 +19464,7 @@ const VDataIterator = genericComponent()({
           "active": true
         }, {
           default: slotProps => slots.loader?.(slotProps)
-        }) : createVNode("div", {
+        }) : createElementVNode("div", {
           "key": "items"
         }, [!paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value)])]
       }), slots.footer?.(slotProps.value)]
@@ -19758,44 +19758,44 @@ const VPagination = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-pagination', themeClasses.value, props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-pagination', themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style),
       "role": "navigation",
       "aria-label": t(props.ariaLabel),
       "onKeydown": onKeydown,
       "data-test": "v-pagination-root"
     }, {
-      default: () => [createVNode("ul", {
+      default: () => [createElementVNode("ul", {
         "class": "v-pagination__list"
-      }, [props.showFirstLastPage && createVNode("li", {
+      }, [props.showFirstLastPage && createElementVNode("li", {
         "key": "first",
         "class": "v-pagination__first",
         "data-test": "v-pagination-first"
       }, [slots.first ? slots.first(controls.value.first) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.first), null)]), createVNode("li", {
+      }, controls.value.first), null)]), createElementVNode("li", {
         "key": "prev",
         "class": "v-pagination__prev",
         "data-test": "v-pagination-prev"
       }, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.prev), null)]), items.value.map((item, index) => createVNode("li", {
+      }, controls.value.prev), null)]), items.value.map((item, index) => createElementVNode("li", {
         "key": item.key,
-        "class": ['v-pagination__item', {
+        "class": normalizeClass(['v-pagination__item', {
           'v-pagination__item--is-active': item.isActive
-        }],
+        }]),
         "data-test": "v-pagination-item"
       }, [slots.item ? slots.item(item) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
       }, item.props), {
         default: () => [item.page]
-      })])), createVNode("li", {
+      })])), createElementVNode("li", {
         "key": "next",
         "class": "v-pagination__next",
         "data-test": "v-pagination-next"
       }, [slots.next ? slots.next(controls.value.next) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.next), null)]), props.showFirstLastPage && createVNode("li", {
+      }, controls.value.next), null)]), props.showFirstLastPage && createElementVNode("li", {
         "key": "last",
         "class": "v-pagination__last",
         "data-test": "v-pagination-last"
@@ -19904,20 +19904,20 @@ const VDataTableFooter = genericComponent()({
     }));
     useRender(() => {
       const paginationProps = VPagination.filterProps(props);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-data-table-footer"
-      }, [slots.prepend?.(), createVNode("div", {
+      }, [slots.prepend?.(), createElementVNode("div", {
         "class": "v-data-table-footer__items-per-page"
-      }, [createVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
+      }, [createElementVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
         "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
         "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
         "density": "compact",
         "variant": "outlined",
         "hide-details": true
-      }, null)]), createVNode("div", {
+      }, null)]), createElementVNode("div", {
         "class": "v-data-table-footer__info"
-      }, [createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createVNode("div", {
+      }, [createElementVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createElementVNode("div", {
         "class": "v-data-table-footer__pagination"
       }, [createVNode(VPagination, mergeProps({
         "modelValue": page.value,
@@ -19960,18 +19960,18 @@ const VDataTableColumn = defineFunctionalComponent({
   } = _ref;
   const Tag = props.tag ?? 'td';
   return createVNode(Tag, {
-    "class": ['v-data-table__td', {
+    "class": normalizeClass(['v-data-table__td', {
       'v-data-table-column--fixed': props.fixed,
       'v-data-table-column--last-fixed': props.lastFixed,
       'v-data-table-column--no-padding': props.noPadding,
       'v-data-table-column--nowrap': props.nowrap
-    }, `v-data-table-column--align-${props.align}`],
-    "style": {
+    }, `v-data-table-column--align-${props.align}`]),
+    "style": normalizeStyle({
       height: convertToUnit(props.height),
       width: convertToUnit(props.width),
       maxWidth: convertToUnit(props.maxWidth),
       left: convertToUnit(props.fixedOffset || null)
-    }
+    })
   }, {
     default: () => [slots.default?.()]
   });
@@ -20381,16 +20381,16 @@ const VDataTableHeaders = genericComponent()({
               "onUpdate:modelValue": selectAll
             }, null));
           }
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-data-table-header__content"
-          }, [createVNode("span", null, [column.title]), column.sortable && !props.disableSort && createVNode(VIcon, {
+          }, [createElementVNode("span", null, [column.title]), column.sortable && !props.disableSort && createVNode(VIcon, {
             "key": "icon",
             "class": "v-data-table-header__sort-icon",
             "icon": getSortIcon(column)
-          }, null), props.multiSort && isSorted(column) && createVNode("div", {
+          }, null), props.multiSort && isSorted(column) && createElementVNode("div", {
             "key": "badge",
-            "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
-            "style": backgroundColorStyles.value
+            "class": normalizeClass(['v-data-table-header__sort-badge', ...backgroundColorClasses.value]),
+            "style": normalizeStyle(backgroundColorStyles.value)
           }, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
         }
       });
@@ -20409,7 +20409,7 @@ const VDataTableHeaders = genericComponent()({
         "class": [...headerCellClasses.value],
         "colspan": headers.value.length + 1
       }, props.headerProps), {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-data-table-header__content"
         }, [createVNode(VSelect, {
           "chips": true,
@@ -20433,7 +20433,7 @@ const VDataTableHeaders = genericComponent()({
             }
           }, {
             default: () => [props.item.title, createVNode(VIcon, {
-              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "class": normalizeClass(['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active']),
               "icon": getSortIcon(props.item.raw),
               "size": "small"
             }, null)]
@@ -20442,13 +20442,13 @@ const VDataTableHeaders = genericComponent()({
       });
     };
     useRender(() => {
-      return mobile.value ? createVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+      return mobile.value ? createElementVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createElementVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createElementVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y
-      }, null))])), props.loading && createVNode("tr", {
+      }, null))])), props.loading && createElementVNode("tr", {
         "class": "v-data-table-progress"
-      }, [createVNode("th", {
+      }, [createElementVNode("th", {
         "colspan": columns.value.length
       }, [createVNode(LoaderSlot, {
         "name": "v-data-table-progress",
@@ -20494,11 +20494,11 @@ const VDataTableGroupHeaderRow = genericComponent()({
     const rows = computed(() => {
       return extractRows([props.item]);
     });
-    return () => createVNode("tr", {
+    return () => createElementVNode("tr", {
       "class": "v-data-table-group-header-row",
-      "style": {
+      "style": normalizeStyle({
         '--v-data-table-group-header-row-depth': props.item.depth
-      }
+      })
     }, [columns.value.map(column => {
       if (column.key === 'data-table-group') {
         const icon = isGroupOpen(props.item) ? '$expand' : '$next';
@@ -20518,7 +20518,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
             "variant": "text",
             "icon": icon,
             "onClick": onClick
-          }, null), createVNode("span", null, [props.item.value]), createVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
+          }, null), createElementVNode("span", null, [props.item.value]), createElementVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
         });
       }
       if (column.key === 'data-table-select') {
@@ -20531,13 +20531,13 @@ const VDataTableGroupHeaderRow = genericComponent()({
             indeterminate,
             'onUpdate:modelValue': selectGroup
           }
-        }) ?? createVNode("td", null, [createVNode(VCheckboxBtn, {
+        }) ?? createElementVNode("td", null, [createVNode(VCheckboxBtn, {
           "modelValue": modelValue,
           "indeterminate": indeterminate,
           "onUpdate:modelValue": selectGroup
         }, null)]);
       }
-      return createVNode("td", null, null);
+      return createElementVNode("td", null, null);
     })]);
   }
 });
@@ -20583,10 +20583,10 @@ const VDataTableRow = genericComponent()({
     const {
       columns
     } = useHeaders();
-    useRender(() => createVNode("tr", {
-      "class": ['v-data-table__tr', {
+    useRender(() => createElementVNode("tr", {
+      "class": normalizeClass(['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }, displayClasses.value],
+      }, displayClasses.value]),
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
@@ -20675,9 +20675,9 @@ const VDataTableRow = genericComponent()({
           }
           if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
           const displayValue = toDisplayString(slotProps.value);
-          return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
+          return !mobile.value ? displayValue : createElementVNode(Fragment, null, [createElementVNode("div", {
             "class": "v-data-table__td-title"
-          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createVNode("div", {
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createElementVNode("div", {
             "class": "v-data-table__td-value"
           }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
@@ -20740,22 +20740,22 @@ const VDataTableRows = genericComponent()({
     } = useDisplay(props);
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
-        return createVNode("tr", {
+        return createElementVNode("tr", {
           "class": "v-data-table-rows-loading",
           "key": "loading"
-        }, [createVNode("td", {
+        }, [createElementVNode("td", {
           "colspan": columns.value.length
         }, [slots.loading?.() ?? t(props.loadingText)])]);
       }
       if (!props.loading && !props.items.length && !props.hideNoData) {
-        return createVNode("tr", {
+        return createElementVNode("tr", {
           "class": "v-data-table-rows-no-data",
           "key": "no-data"
-        }, [createVNode("td", {
+        }, [createElementVNode("td", {
           "colspan": columns.value.length
         }, [slots['no-data']?.() ?? t(props.noDataText)])]);
       }
-      return createVNode(Fragment, null, [props.items.map((item, index) => {
+      return createElementVNode(Fragment, null, [props.items.map((item, index) => {
         if (item.type === 'group') {
           const slotProps = {
             index,
@@ -20800,7 +20800,7 @@ const VDataTableRows = genericComponent()({
             internalItem: slotProps.internalItem
           }) : props.rowProps)
         };
-        return createVNode(Fragment, {
+        return createElementVNode(Fragment, {
           "key": itemSlotProps.props.key
         }, [slots.item ? slots.item(itemSlotProps) : createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
       })]);
@@ -20834,22 +20834,22 @@ const VTable = genericComponent()({
       densityClasses
     } = useDensity(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-table', {
+      "class": normalizeClass(['v-table', {
         'v-table--fixed-height': !!props.height,
         'v-table--fixed-header': props.fixedHeader,
         'v-table--fixed-footer': props.fixedFooter,
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
         'v-table--hover': props.hover
-      }, themeClasses.value, densityClasses.value, props.class],
-      "style": props.style
+      }, themeClasses.value, densityClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
-      default: () => [slots.top?.(), slots.default ? createVNode("div", {
+      default: () => [slots.top?.(), slots.default ? createElementVNode("div", {
         "class": "v-table__wrapper",
-        "style": {
+        "style": normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [createVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
+        })
+      }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
     }));
     return {};
   }
@@ -21102,12 +21102,12 @@ const VDataTable = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+        default: () => slots.default ? slots.default(slotProps.value) : createElementVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": paginatedItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createElementVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -21278,25 +21278,25 @@ const VDataTableVirtual = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        wrapper: () => createVNode("div", {
+        wrapper: () => createElementVNode("div", {
           "ref": containerRef,
           "onScrollPassive": handleScroll,
           "onScrollend": handleScrollend,
           "class": "v-table__wrapper",
-          "style": {
+          "style": normalizeStyle({
             height: convertToUnit(props.height)
-          }
-        }, [createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+          })
+        }, [createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", {
           "key": "tbody"
-        }, [createVNode("tr", {
+        }, [createElementVNode("tr", {
           "ref": markerRef,
-          "style": {
+          "style": normalizeStyle({
             height: convertToUnit(paddingTop.value),
             border: 0
-          }
-        }, [createVNode("td", {
+          })
+        }, [createElementVNode("td", {
           "colspan": columns.value.length,
           "style": {
             height: 0,
@@ -21325,12 +21325,12 @@ const VDataTableVirtual = genericComponent()({
               }), slots);
             }
           })
-        }), slots['body.append']?.(slotProps.value), createVNode("tr", {
-          "style": {
+        }), slots['body.append']?.(slotProps.value), createElementVNode("tr", {
+          "style": normalizeStyle({
             height: convertToUnit(paddingBottom.value),
             border: 0
-          }
-        }, [createVNode("td", {
+          })
+        }, [createElementVNode("td", {
           "colspan": columns.value.length,
           "style": {
             height: 0,
@@ -21503,17 +21503,17 @@ const VDataTableServer = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+        default: () => slots.default ? slots.default(slotProps.value) : createElementVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead",
           "class": "v-data-table__thead",
           "role": "rowgroup"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": flatItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createElementVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -21544,10 +21544,10 @@ const VContainer = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-container', {
+      "class": normalizeClass(['v-container', {
         'v-container--fluid': props.fluid
-      }, rtlClasses.value, props.class],
-      "style": [dimensionStyles.value, props.style]
+      }, rtlClasses.value, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -21866,11 +21866,11 @@ const VDatePickerControls = genericComponent()({
     }
     useRender(() => {
       // TODO: add slot support and scope defaults
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": ['v-date-picker-controls'],
-        "style": {
+        "style": normalizeStyle({
           '--v-date-picker-controls-height': convertToUnit(props.controlHeight)
-        }
+        })
       }, [createVNode(VBtn, {
         "class": "v-date-picker-controls__month-btn",
         "data-testid": "month-btn",
@@ -21887,7 +21887,7 @@ const VDatePickerControls = genericComponent()({
         "icon": props.modeIcon,
         "variant": "text",
         "onClick": onClickYear
-      }, null), createVNode(VSpacer, null, null), createVNode("div", {
+      }, null), createVNode(VSpacer, null, null), createElementVNode("div", {
         "class": "v-date-picker-controls__month"
       }, [createVNode(VBtn, {
         "data-testid": "prev-month",
@@ -21943,24 +21943,24 @@ const VDatePickerHeader = genericComponent()({
     useRender(() => {
       const hasContent = !!(slots.default || props.header);
       const hasAppend = !!(slots.append || props.appendIcon);
-      return createVNode("div", {
-        "class": ['v-date-picker-header', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-date-picker-header', {
           'v-date-picker-header--clickable': !!props.onClick
-        }, backgroundColorClasses.value],
-        "style": backgroundColorStyles.value,
+        }, backgroundColorClasses.value]),
+        "style": normalizeStyle(backgroundColorStyles.value),
         "onClick": onClick
-      }, [slots.prepend && createVNode("div", {
+      }, [slots.prepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-date-picker-header__prepend"
       }, [slots.prepend()]), hasContent && createVNode(MaybeTransition, {
         "key": "content",
         "name": props.transition
       }, {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "key": props.header,
           "class": "v-date-picker-header__content"
         }, [slots.default?.() ?? props.header])]
-      }), hasAppend && createVNode("div", {
+      }), hasAppend && createElementVNode("div", {
         "class": "v-date-picker-header__append"
       }, [!slots.append ? createVNode(VBtn, {
         "key": "append-btn",
@@ -22246,24 +22246,24 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-month"
-    }, [props.showWeek && createVNode("div", {
+    }, [props.showWeek && createElementVNode("div", {
       "key": "weeks",
       "class": "v-date-picker-month__weeks"
-    }, [!props.hideWeekdays && createVNode("div", {
+    }, [!props.hideWeekdays && createElementVNode("div", {
       "key": "hide-week-days",
       "class": "v-date-picker-month__day"
-    }, [createTextVNode("\xA0")]), weekNumbers.value.map(week => createVNode("div", {
+    }, [createTextVNode("\xA0")]), weekNumbers.value.map(week => createElementVNode("div", {
       "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
     }, [week]))]), createVNode(MaybeTransition, {
       "name": transition.value
     }, {
-      default: () => [createVNode("div", {
+      default: () => [createElementVNode("div", {
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createVNode("div", {
+      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createElementVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -22283,14 +22283,14 @@ const VDatePickerMonth = genericComponent()({
         if (atMax.value && !item.isSelected) {
           item.isDisabled = true;
         }
-        return createVNode("div", {
-          "class": ['v-date-picker-month__day', {
+        return createElementVNode("div", {
+          "class": normalizeClass(['v-date-picker-month__day', {
             'v-date-picker-month__day--adjacent': item.isAdjacent,
             'v-date-picker-month__day--hide-adjacent': item.isHidden,
             'v-date-picker-month__day--selected': item.isSelected,
             'v-date-picker-month__day--week-end': item.isWeekEnd,
             'v-date-picker-month__day--week-start': item.isWeekStart
-          }],
+          }]),
           "data-v-date": !item.isDisabled ? item.isoDate : undefined
         }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null))]);
       })])]
@@ -22340,12 +22340,12 @@ const VDatePickerMonths = genericComponent()({
     watchEffect(() => {
       model.value = model.value ?? adapter.getMonth(adapter.date());
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-months",
-      "style": {
+      "style": normalizeStyle({
         height: convertToUnit(props.height)
-      }
-    }, [createVNode("div", {
+      })
+    }, [createElementVNode("div", {
       "class": "v-date-picker-months__content"
     }, [months.value.map((month, i) => {
       const btnProps = {
@@ -22431,12 +22431,12 @@ const VDatePickerYears = genericComponent()({
         block: 'center'
       });
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-years",
-      "style": {
+      "style": normalizeStyle({
         height: convertToUnit(props.height)
-      }
-    }, [createVNode("div", {
+      })
+    }, [createElementVNode("div", {
       "class": "v-date-picker-years__content"
     }, [years.value.map((year, i) => {
       const btnProps = {
@@ -22673,7 +22673,7 @@ const VDatePicker = genericComponent()({
         }, rtlClasses.value, props.class],
         "style": props.style
       }), {
-        title: () => slots.title?.() ?? createVNode("div", {
+        title: () => slots.title?.() ?? createElementVNode("div", {
           "class": "v-date-picker__title"
         }, [t(props.title)]),
         header: () => slots.header ? createVNode(VDefaultsProvider, {
@@ -22692,7 +22692,7 @@ const VDatePicker = genericComponent()({
           ...slots,
           default: undefined
         }),
-        default: () => createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
+        default: () => createElementVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "text": text.value,
           "onClick:next": onClickNext,
@@ -22801,15 +22801,15 @@ const VEmptyState = genericComponent()({
       const hasText = !!(slots.text || props.text);
       const hasMedia = !!(slots.media || props.image || props.icon);
       const size = props.size || (props.image ? 200 : 96);
-      return createVNode("div", {
-        "class": ['v-empty-state', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-empty-state', {
           [`v-empty-state--${props.justify}`]: true
-        }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style]
-      }, [hasMedia && createVNode("div", {
+        }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style])
+      }, [hasMedia && createElementVNode("div", {
         "key": "media",
         "class": "v-empty-state__media"
-      }, [!slots.media ? createVNode(Fragment, null, [props.image ? createVNode(VImg, {
+      }, [!slots.media ? createElementVNode(Fragment, null, [props.image ? createVNode(VImg, {
         "key": "image",
         "src": props.image,
         "height": size
@@ -22832,22 +22832,22 @@ const VEmptyState = genericComponent()({
         }
       }, {
         default: () => [slots.media()]
-      })]), hasHeadline && createVNode("div", {
+      })]), hasHeadline && createElementVNode("div", {
         "key": "headline",
         "class": "v-empty-state__headline"
-      }, [slots.headline?.() ?? props.headline]), hasTitle && createVNode("div", {
+      }, [slots.headline?.() ?? props.headline]), hasTitle && createElementVNode("div", {
         "key": "title",
         "class": "v-empty-state__title"
-      }, [slots.title?.() ?? props.title]), hasText && createVNode("div", {
+      }, [slots.title?.() ?? props.title]), hasText && createElementVNode("div", {
         "key": "text",
         "class": "v-empty-state__text",
-        "style": {
+        "style": normalizeStyle({
           maxWidth: convertToUnit(props.textWidth)
-        }
-      }, [slots.text?.() ?? props.text]), slots.default && createVNode("div", {
+        })
+      }, [slots.text?.() ?? props.text]), slots.default && createElementVNode("div", {
         "key": "content",
         "class": "v-empty-state__content"
-      }, [slots.default()]), hasActions && createVNode("div", {
+      }, [slots.default()]), hasActions && createElementVNode("div", {
         "key": "actions",
         "class": "v-empty-state__actions"
       }, [createVNode(VDefaultsProvider, {
@@ -22898,10 +22898,10 @@ const VExpansionPanelText = genericComponent()({
     useRender(() => createVNode(VExpandTransition, {
       "onAfterLeave": onAfterLeave
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-expansion-panel-text', props.class],
-        "style": props.style
-      }, [slots.default && hasContent.value && createVNode("div", {
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-expansion-panel-text', props.class]),
+        "style": normalizeStyle(props.style)
+      }, [slots.default && hasContent.value && createElementVNode("div", {
         "class": "v-expansion-panel-text__wrapper"
       }, [slots.default?.()])]), [[vShow, expansionPanel.isSelected.value]])]
     }));
@@ -22935,7 +22935,7 @@ const makeVExpansionPanelTitleProps = propsFactory({
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVExpansionPanelTitleProps(),
   setup(props, _ref) {
@@ -22959,19 +22959,19 @@ const VExpansionPanelTitle = genericComponent()({
       readonly: props.readonly
     }));
     const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
-    useRender(() => withDirectives(createVNode("button", {
-      "class": ['v-expansion-panel-title', {
+    useRender(() => withDirectives(createElementVNode("button", {
+      "class": normalizeClass(['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value,
         'v-expansion-panel-title--focusable': props.focusable,
         'v-expansion-panel-title--static': props.static
-      }, backgroundColorClasses.value, props.class],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+      }, backgroundColorClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
       "aria-expanded": expansionPanel.isSelected.value,
       "onClick": !props.readonly ? expansionPanel.toggle : undefined
-    }, [createVNode("span", {
+    }, [createElementVNode("span", {
       "class": "v-expansion-panel-title__overlay"
     }, null), slots.default?.(slotProps.value), !props.hideActions && createVNode(VDefaultsProvider, {
       "defaults": {
@@ -22980,10 +22980,10 @@ const VExpansionPanelTitle = genericComponent()({
         }
       }
     }, {
-      default: () => [createVNode("span", {
+      default: () => [createElementVNode("span", {
         "class": "v-expansion-panel-title__icon"
       }, [slots.actions?.(slotProps.value) ?? createVNode(VIcon, null, null)])]
-    })]), [[resolveDirective("ripple"), props.ripple]]));
+    })]), [[Ripple, props.ripple]]));
     return {};
   }
 });
@@ -23040,16 +23040,16 @@ const VExpansionPanel = genericComponent()({
       const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
       const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
       return createVNode(props.tag, {
-        "class": ['v-expansion-panel', {
+        "class": normalizeClass(['v-expansion-panel', {
           'v-expansion-panel--active': groupItem.isSelected.value,
           'v-expansion-panel--before-active': isBeforeSelected.value,
           'v-expansion-panel--after-active': isAfterSelected.value,
           'v-expansion-panel--disabled': isDisabled.value
-        }, roundedClasses.value, backgroundColorClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        }, roundedClasses.value, backgroundColorClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [createVNode("div", {
-          "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
+        default: () => [createElementVNode("div", {
+          "class": normalizeClass(['v-expansion-panel__shadow', ...elevationClasses.value])
         }, null), createVNode(VDefaultsProvider, {
           "defaults": {
             VExpansionPanelTitle: {
@@ -23129,11 +23129,11 @@ const VExpansionPanels = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', {
+      "class": normalizeClass(['v-expansion-panels', {
         'v-expansion-panels--flat': props.flat,
         'v-expansion-panels--tile': props.tile
-      }, themeClasses.value, variantClass.value, props.class],
-      "style": props.style
+      }, themeClasses.value, variantClass.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.default?.({
         prev,
@@ -23213,22 +23213,22 @@ const VFab = genericComponent()({
     const vFabRef = ref();
     useRender(() => {
       const btnProps = VBtn.filterProps(props);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "ref": vFabRef,
-        "class": ['v-fab', {
+        "class": normalizeClass(['v-fab', {
           'v-fab--absolute': props.absolute,
           'v-fab--app': !!props.app,
           'v-fab--extended': props.extended,
           'v-fab--offset': props.offset,
           [`v-fab--${position.value}`]: hasPosition.value,
           [`v-fab--${orientation.value}`]: hasPosition.value
-        }, props.class],
-        "style": [props.app ? {
+        }, props.class]),
+        "style": normalizeStyle([props.app ? {
           ...layoutItemStyles.value
         } : {
           height: props.absolute ? '100%' : 'inherit'
-        }, props.style]
-      }, [createVNode("div", {
+        }, props.style])
+      }, [createElementVNode("div", {
         "class": "v-fab__container"
       }, [createVNode(MaybeTransition, {
         "appear": props.appear,
@@ -23444,7 +23444,7 @@ const VFileInput = genericComponent()({
                   ...slotProps
                 }
               } = _ref4;
-              return createVNode(Fragment, null, [createVNode("input", mergeProps({
+              return createElementVNode(Fragment, null, [createElementVNode("input", mergeProps({
                 "ref": inputRef,
                 "type": "file",
                 "readonly": isReadonly.value,
@@ -23464,8 +23464,8 @@ const VFileInput = genericComponent()({
                 "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), createVNode("div", {
-                "class": fieldClass
+              }, slotProps, inputAttrs), null), createElementVNode("div", {
+                "class": normalizeClass(fieldClass)
               }, [!!model.value?.length && !props.hideInput && (slots.selection ? slots.selection({
                 fileNames: fileNames.value,
                 totalBytes: totalBytes.value,
@@ -23478,7 +23478,7 @@ const VFileInput = genericComponent()({
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": !!model.value?.length,
           "value": counterValue.value,
           "disabled": props.disabled
@@ -23554,10 +23554,10 @@ const VFooter = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
+      "class": normalizeClass(['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
         height: convertToUnit(props.height)
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -23606,10 +23606,10 @@ const VForm = genericComponent()({
       }
       e.preventDefault();
     }
-    useRender(() => createVNode("form", {
+    useRender(() => createElementVNode("form", {
       "ref": formRef,
-      "class": ['v-form', props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-form', props.class]),
+      "style": normalizeStyle(props.style),
       "novalidate": true,
       "onReset": onReset,
       "onSubmit": onSubmit
@@ -23706,11 +23706,11 @@ const VInfiniteScrollIntersect = defineComponent({
     watch(isIntersecting, async val => {
       emit('intersect', props.side, val);
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-infinite-scroll-intersect",
-      "style": {
+      "style": normalizeStyle({
         '--v-infinite-margin-size': props.rootMargin
-      },
+      }),
       "ref": intersectionRef
     }, [createTextVNode("\xA0")]));
     return {};
@@ -23822,7 +23822,7 @@ const VInfiniteScroll = genericComponent()({
         }
       };
       if (status === 'error') return slots.error?.(slotProps);
-      if (status === 'empty') return slots.empty?.(slotProps) ?? createVNode("div", null, [t(props.emptyText)]);
+      if (status === 'empty') return slots.empty?.(slotProps) ?? createElementVNode("div", null, [t(props.emptyText)]);
       if (props.mode === 'manual') {
         if (status === 'loading') {
           return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
@@ -23853,13 +23853,13 @@ const VInfiniteScroll = genericComponent()({
       const intersectMode = props.mode === 'intersect';
       return createVNode(Tag, {
         "ref": rootEl,
-        "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+        "class": normalizeClass(['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
           'v-infinite-scroll--start': hasStartIntersect,
           'v-infinite-scroll--end': hasEndIntersect
-        }],
-        "style": dimensionStyles.value
+        }]),
+        "style": normalizeStyle(dimensionStyles.value)
       }, {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-infinite-scroll__side"
         }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
           "key": "start",
@@ -23871,7 +23871,7 @@ const VInfiniteScroll = genericComponent()({
           "side": "end",
           "onIntersect": handleIntersect,
           "rootMargin": margin.value
-        }, null), createVNode("div", {
+        }, null), createElementVNode("div", {
           "class": "v-infinite-scroll__side"
         }, [renderSide('end', endStatus.value)])]
       });
@@ -23911,8 +23911,8 @@ const VItemGroup = genericComponent()({
       selected
     } = useGroup(props, VItemGroupSymbol);
     return () => createVNode(props.tag, {
-      "class": ['v-item-group', themeClasses.value, props.class],
-      "style": props.style
+      "class": normalizeClass(['v-item-group', themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -23980,10 +23980,10 @@ const VLayout = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": layoutRef,
-      "class": [layoutClasses.value, props.class],
-      "style": [dimensionStyles.value, layoutStyles.value, props.style]
+      "class": normalizeClass([layoutClasses.value, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, layoutStyles.value, props.style])
     }, [slots.default?.()]));
     return {
       getLayoutItem,
@@ -24025,9 +24025,9 @@ const VLayoutItem = genericComponent()({
       active: toRef(() => props.modelValue),
       absolute: toRef(() => props.absolute)
     });
-    return () => createVNode("div", {
-      "class": ['v-layout-item', props.class],
-      "style": [layoutItemStyles.value, props.style]
+    return () => createElementVNode("div", {
+      "class": normalizeClass(['v-layout-item', props.class]),
+      "style": normalizeStyle([layoutItemStyles.value, props.style])
     }, [slots.default?.()]);
   }
 });
@@ -24056,7 +24056,7 @@ const makeVLazyProps = propsFactory({
 const VLazy = genericComponent()({
   name: 'VLazy',
   directives: {
-    intersect: Intersect
+    vIntersect: Intersect
   },
   props: makeVLazyProps(),
   emits: {
@@ -24075,8 +24075,8 @@ const VLazy = genericComponent()({
       isActive.value = isIntersecting;
     }
     useRender(() => withDirectives(createVNode(props.tag, {
-      "class": ['v-lazy', props.class],
-      "style": [dimensionStyles.value, props.style]
+      "class": normalizeClass(['v-lazy', props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
     }, {
       default: () => [isActive.value && createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -24084,7 +24084,7 @@ const VLazy = genericComponent()({
       }, {
         default: () => [slots.default?.()]
       })]
-    }), [[resolveDirective("intersect"), {
+    }), [[Intersect, {
       handler: onIntersect,
       options: props.options
     }, null]]));
@@ -24112,9 +24112,9 @@ const VLocaleProvider = genericComponent()({
     const {
       rtlClasses
     } = provideLocale(props);
-    useRender(() => createVNode("div", {
-      "class": ['v-locale-provider', rtlClasses.value, props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-locale-provider', rtlClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -24145,12 +24145,12 @@ const VMain = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     useRender(() => createVNode(props.tag, {
-      "class": ['v-main', {
+      "class": normalizeClass(['v-main', {
         'v-main--scrollable': props.scrollable
-      }, props.class],
-      "style": [mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style]
+      }, props.class]),
+      "style": normalizeStyle([mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style])
     }, {
-      default: () => [props.scrollable ? createVNode("div", {
+      default: () => [props.scrollable ? createElementVNode("div", {
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
@@ -24661,7 +24661,7 @@ const VNavigationDrawer = genericComponent()({
     });
     useRender(() => {
       const hasImage = slots.image || props.image;
-      return createVNode(Fragment, null, [createVNode(props.tag, mergeProps({
+      return createElementVNode(Fragment, null, [createVNode(props.tag, mergeProps({
         "ref": rootEl,
         "onMouseenter": runOpenDelay,
         "onMouseleave": runCloseDelay,
@@ -24677,7 +24677,7 @@ const VNavigationDrawer = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, scopeId, attrs), {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-navigation-drawer__img"
         }, [!slots.image ? createVNode(VImg, {
@@ -24697,17 +24697,17 @@ const VNavigationDrawer = genericComponent()({
               src: props.image
             }
           }
-        }, slots.image)]), slots.prepend && createVNode("div", {
+        }, slots.image)]), slots.prepend && createElementVNode("div", {
           "class": "v-navigation-drawer__prepend"
-        }, [slots.prepend?.()]), createVNode("div", {
+        }, [slots.prepend?.()]), createElementVNode("div", {
           "class": "v-navigation-drawer__content"
-        }, [slots.default?.()]), slots.append && createVNode("div", {
+        }, [slots.default?.()]), slots.append && createElementVNode("div", {
           "class": "v-navigation-drawer__append"
         }, [slots.append?.()])]
       }), createVNode(Transition, {
         "name": "fade-transition"
       }, {
-        default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createVNode("div", mergeProps({
+        default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createElementVNode("div", mergeProps({
           "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
           "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
           "onClick": () => {
@@ -24866,22 +24866,18 @@ const VNumberInput = genericComponent()({
     const controlNodeDefaultHeight = toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
     const incrementSlotProps = {
       props: {
-        style: {
-          touchAction: 'none'
-        },
         onClick: onControlClick,
         onPointerup: onControlMouseup,
-        onPointerdown: onUpControlMousedown
+        onPointerdown: onUpControlMousedown,
+        onPointercancel: onControlPointerCancel
       }
     };
     const decrementSlotProps = {
       props: {
-        style: {
-          touchAction: 'none'
-        },
         onClick: onControlClick,
         onPointerup: onControlMouseup,
-        onPointerdown: onDownControlMousedown
+        onPointerdown: onDownControlMousedown,
+        onPointercancel: onControlPointerCancel
       }
     };
     watch(() => props.precision, () => formatInputValue());
@@ -24978,6 +24974,11 @@ const VNumberInput = genericComponent()({
       e.stopPropagation();
       holdStart('down');
     }
+    function onControlPointerCancel(e) {
+      const el = e.currentTarget;
+      el?.releasePointerCapture(e.pointerId);
+      holdStop();
+    }
     function clampModel() {
       if (controlsDisabled.value) return;
       if (!vTextFieldRef.value) return;
@@ -25029,8 +25030,8 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onUpControlMousedown,
           "onPointerup": onControlMouseup,
+          "onPointercancel": onControlPointerCancel,
           "size": controlNodeSize.value,
-          "style": "touch-action: none",
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "increment-defaults",
@@ -25059,8 +25060,8 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onDownControlMousedown,
           "onPointerup": onControlMouseup,
+          "onPointercancel": onControlPointerCancel,
           "size": controlNodeSize.value,
-          "style": "touch-action: none",
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "decrement-defaults",
@@ -25078,7 +25079,7 @@ const VNumberInput = genericComponent()({
         });
       }
       function controlNode() {
-        return createVNode("div", {
+        return createElementVNode("div", {
           "class": "v-number-input__control"
         }, [decrementControlNode(), createVNode(VDivider, {
           "vertical": controlVariant.value !== 'stacked'
@@ -25089,17 +25090,17 @@ const VNumberInput = genericComponent()({
           "vertical": true
         }, null) : undefined;
       }
-      const appendInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+      const appendInnerControl = controlVariant.value === 'split' ? createElementVNode("div", {
         "class": "v-number-input__control"
       }, [createVNode(VDivider, {
         "vertical": true
-      }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : createVNode(Fragment, null, [dividerNode(), controlNode()]);
+      }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : createElementVNode(Fragment, null, [dividerNode(), controlNode()]);
       const hasAppendInner = slots['append-inner'] || appendInnerControl;
-      const prependInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+      const prependInnerControl = controlVariant.value === 'split' ? createElementVNode("div", {
         "class": "v-number-input__control"
       }, [decrementControlNode(), createVNode(VDivider, {
         "vertical": true
-      }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
+      }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createElementVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef,
@@ -25127,13 +25128,13 @@ const VNumberInput = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
         } : undefined,
         'prepend-inner': hasPrependInner ? function () {
           for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
             args[_key2] = arguments[_key2];
           }
-          return createVNode(Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
+          return createElementVNode(Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
         } : undefined
       });
     });
@@ -25297,16 +25298,16 @@ const VOtpInput = genericComponent()({
     });
     useRender(() => {
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-otp-input', {
           'v-otp-input--divided': !!props.divider
         }, props.class],
         "style": [props.style]
-      }, rootAttrs), [createVNode("div", {
+      }, rootAttrs), [createElementVNode("div", {
         "ref": contentRef,
         "class": "v-otp-input__content",
-        "style": [dimensionStyles.value]
-      }, [fields.value.map((_, i) => createVNode(Fragment, null, [props.divider && i !== 0 && createVNode("span", {
+        "style": normalizeStyle([dimensionStyles.value])
+      }, [fields.value.map((_, i) => createElementVNode(Fragment, null, [props.divider && i !== 0 && createElementVNode("span", {
         "class": "v-otp-input__divider"
       }, [props.divider]), createVNode(VField, {
         "focused": isFocused.value && props.focusAll || focusIndex.value === i,
@@ -25315,7 +25316,7 @@ const VOtpInput = genericComponent()({
         ...slots,
         loader: undefined,
         default: () => {
-          return createVNode("input", {
+          return createElementVNode("input", {
             "ref": val => inputRef.value[i] = val,
             "aria-label": t(props.label, i + 1),
             "autofocus": i === 0 && props.autofocus,
@@ -25335,7 +25336,7 @@ const VOtpInput = genericComponent()({
             "onPaste": event => onPaste(i, event)
           }, null);
         }
-      })])), createVNode("input", mergeProps({
+      })])), createElementVNode("input", mergeProps({
         "class": "v-otp-input-input",
         "type": "hidden"
       }, inputAttrs, {
@@ -25440,10 +25441,10 @@ const VParallax = genericComponent()({
       });
     }
     useRender(() => createVNode(VImg, {
-      "class": ['v-parallax', {
+      "class": normalizeClass(['v-parallax', {
         'v-parallax--active': isIntersecting.value
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "ref": root,
       "cover": true,
       "onLoadstart": onScroll,
@@ -25543,7 +25544,7 @@ const VRadioGroup = genericComponent()({
             isDisabled,
             isReadonly
           } = _ref2;
-          return createVNode(Fragment, null, [label && createVNode(VLabel, {
+          return createElementVNode(Fragment, null, [label && createVNode(VLabel, {
             "id": id.value
           }, {
             default: () => [label]
@@ -25681,7 +25682,7 @@ const VRangeSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createElementVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
@@ -25690,18 +25691,18 @@ const VRangeSlider = genericComponent()({
             id,
             messagesId
           } = _ref4;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
             "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-          }, [createVNode("input", {
+          }, [createElementVNode("input", {
             "id": `${id.value}_start`,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
             "readonly": !!props.readonly,
             "tabindex": "-1",
             "value": model.value[0]
-          }, null), createVNode("input", {
+          }, null), createElementVNode("input", {
             "id": `${id.value}_stop`,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
@@ -25900,16 +25901,16 @@ const VRating = genericComponent()({
         size: props.size,
         variant: 'plain'
       };
-      return createVNode(Fragment, null, [createVNode("label", {
+      return createElementVNode(Fragment, null, [createElementVNode("label", {
         "for": id,
-        "class": {
+        "class": normalizeClass({
           'v-rating__item--half': props.halfIncrements && value % 1 > 0,
           'v-rating__item--full': props.halfIncrements && value % 1 === 0
-        },
+        }),
         "onMouseenter": onMouseenter,
         "onMouseleave": onMouseleave,
         "onClick": onClick
-      }, [createVNode("span", {
+      }, [createElementVNode("span", {
         "class": "v-rating__hidden"
       }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
         ...itemState.value[index],
@@ -25919,7 +25920,7 @@ const VRating = genericComponent()({
         rating: normalizedValue.value
       }) : createVNode(VBtn, mergeProps({
         "aria-label": t(props.itemAriaLabel, value, props.length)
-      }, btnProps), null)]), createVNode("input", {
+      }, btnProps), null)]), createElementVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
         "id": id,
@@ -25933,31 +25934,31 @@ const VRating = genericComponent()({
     }
     function createLabel(labelProps) {
       if (slots['item-label']) return slots['item-label'](labelProps);
-      if (labelProps.label) return createVNode("span", null, [labelProps.label]);
-      return createVNode("span", null, [createTextVNode("\xA0")]);
+      if (labelProps.label) return createElementVNode("span", null, [labelProps.label]);
+      return createElementVNode("span", null, [createTextVNode("\xA0")]);
     }
     useRender(() => {
       const hasLabels = !!props.itemLabels?.length || slots['item-label'];
       return createVNode(props.tag, {
-        "class": ['v-rating', {
+        "class": normalizeClass(['v-rating', {
           'v-rating--hover': props.hover,
           'v-rating--readonly': props.readonly
-        }, themeClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, {
         default: () => [createVNode(VRatingItem, {
           "value": 0,
           "index": -1,
           "showStar": false
-        }, null), range.value.map((value, i) => createVNode("div", {
+        }, null), range.value.map((value, i) => createElementVNode("div", {
           "class": "v-rating__wrapper"
         }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
           value,
           index: i,
           label: props.itemLabels?.[i]
-        }) : undefined, createVNode("div", {
+        }) : undefined, createElementVNode("div", {
           "class": "v-rating__item"
-        }, [props.halfIncrements ? createVNode(Fragment, null, [createVNode(VRatingItem, {
+        }, [props.halfIncrements ? createElementVNode(Fragment, null, [createVNode(VRatingItem, {
           "value": value - 0.5,
           "index": i * 2
         }, null), createVNode(VRatingItem, {
@@ -26014,8 +26015,8 @@ const rootTypes = {
 };
 function genBone(type) {
   let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return createVNode("div", {
-    "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+  return createElementVNode("div", {
+    "class": normalizeClass(['v-skeleton-loader__bone', `v-skeleton-loader__${type}`])
   }, [children]);
 }
 function genBones(bone) {
@@ -26101,7 +26102,7 @@ const VSkeletonLoader = genericComponent()({
         ariaLabel: t(props.loadingText),
         role: 'alert'
       };
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-skeleton-loader', {
           'v-skeleton-loader--boilerplate': props.boilerplate
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
@@ -26307,7 +26308,7 @@ const VSnackbar = genericComponent()({
         "onTouchend": onTouchend,
         "onAfterLeave": onAfterLeave
       }, scopeId), {
-        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createElementVNode("div", {
           "key": "timer",
           "class": "v-snackbar__timer"
         }, [createVNode(VProgressLinear, {
@@ -26315,7 +26316,7 @@ const VSnackbar = genericComponent()({
           "color": typeof props.timer === 'string' ? props.timer : 'info',
           "max": props.timeout,
           "model-value": countdown.time.value
-        }, null)]), hasContent && createVNode("div", {
+        }, null)]), hasContent && createElementVNode("div", {
           "key": "content",
           "class": "v-snackbar__content",
           "role": "status",
@@ -26329,7 +26330,7 @@ const VSnackbar = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-snackbar__actions"
           }, [slots.actions({
             isActive
@@ -26413,7 +26414,7 @@ const VSnackbarQueue = genericComponent()({
         modelValue: _,
         ...snackbarProps
       } = VSnackbar.filterProps(props);
-      return createVNode(Fragment, null, [isVisible.value && !!current.value && (slots.default ? createVNode(VDefaultsProvider, {
+      return createElementVNode(Fragment, null, [isVisible.value && !!current.value && (slots.default ? createVNode(VDefaultsProvider, {
         "defaults": {
           VSnackbar: current.value
         }
@@ -26429,7 +26430,7 @@ const VSnackbarQueue = genericComponent()({
         text: slots.text ? () => slots.text?.({
           item: current.value
         }) : undefined,
-        actions: hasActions ? () => createVNode(Fragment, null, [!slots.actions ? createVNode(VBtn, mergeProps(btnProps.value, {
+        actions: hasActions ? () => createElementVNode(Fragment, null, [!slots.actions ? createVNode(VBtn, mergeProps(btnProps.value, {
           "onClick": onClickClose
         }), null) : createVNode(VDefaultsProvider, {
           "defaults": {
@@ -26587,57 +26588,57 @@ const VBarline = genericComponent()({
     const smooth = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-      return createVNode("svg", {
+      return createElementVNode("svg", {
         "display": "block"
-      }, [createVNode("defs", null, [createVNode("linearGradient", {
+      }, [createElementVNode("defs", null, [createElementVNode("linearGradient", {
         "id": id.value,
         "gradientUnits": "userSpaceOnUse",
         "x1": props.gradientDirection === 'left' ? '100%' : '0',
         "y1": props.gradientDirection === 'top' ? '100%' : '0',
         "x2": props.gradientDirection === 'right' ? '100%' : '0',
         "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-      }, [gradientData.map((color, index) => createVNode("stop", {
+      }, [gradientData.map((color, index) => createElementVNode("stop", {
         "offset": index / Math.max(gradientData.length - 1, 1),
         "stop-color": color || 'currentColor'
-      }, null))])]), createVNode("clipPath", {
+      }, null))])]), createElementVNode("clipPath", {
         "id": `${id.value}-clip`
-      }, [bars.value.map(item => createVNode("rect", {
+      }, [bars.value.map(item => createElementVNode("rect", {
         "x": item.x + offsetX.value,
         "y": item.y,
         "width": lineWidth.value,
         "height": item.height,
         "rx": smooth.value,
         "ry": smooth.value
-      }, [props.autoDraw && createVNode(Fragment, null, [createVNode("animate", {
+      }, [props.autoDraw && createElementVNode(Fragment, null, [createElementVNode("animate", {
         "attributeName": "y",
         "from": item.y + item.height,
         "to": item.y,
         "dur": `${autoDrawDuration.value}ms`,
         "fill": "freeze"
-      }, null), createVNode("animate", {
+      }, null), createElementVNode("animate", {
         "attributeName": "height",
         "from": "0",
         "to": item.height,
         "dur": `${autoDrawDuration.value}ms`,
         "fill": "freeze"
-      }, null)])]))]), hasLabels.value && createVNode("g", {
+      }, null)])]))]), hasLabels.value && createElementVNode("g", {
         "key": "labels",
         "style": {
           textAnchor: 'middle',
           dominantBaseline: 'mathematical',
           fill: 'currentColor'
         }
-      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+      }, [parsedLabels.value.map((item, i) => createElementVNode("text", {
         "x": item.x + offsetX.value + lineWidth.value / 2,
         "y": parseInt(props.height, 10) - 2 + (parseInt(props.labelSize, 10) || 7 * 0.75),
         "font-size": Number(props.labelSize) || 7
       }, [slots.label?.({
         index: i,
         value: item.value
-      }) ?? item.value]))]), createVNode("g", {
+      }) ?? item.value]))]), createElementVNode("g", {
         "clip-path": `url(#${id.value}-clip)`,
         "fill": `url(#${id.value})`
-      }, [createVNode("rect", {
+      }, [createElementVNode("rect", {
         "x": 0,
         "y": 0,
         "width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
@@ -26816,39 +26817,39 @@ const VTrendline = genericComponent()({
     }
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-      return createVNode("svg", {
+      return createElementVNode("svg", {
         "display": "block",
         "stroke-width": parseFloat(props.lineWidth) ?? 4
-      }, [createVNode("defs", null, [createVNode("linearGradient", {
+      }, [createElementVNode("defs", null, [createElementVNode("linearGradient", {
         "id": id.value,
         "gradientUnits": "userSpaceOnUse",
         "x1": props.gradientDirection === 'left' ? '100%' : '0',
         "y1": props.gradientDirection === 'top' ? '100%' : '0',
         "x2": props.gradientDirection === 'right' ? '100%' : '0',
         "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-      }, [gradientData.map((color, index) => createVNode("stop", {
+      }, [gradientData.map((color, index) => createElementVNode("stop", {
         "offset": index / Math.max(gradientData.length - 1, 1),
         "stop-color": color || 'currentColor'
-      }, null))])]), hasLabels.value && createVNode("g", {
+      }, null))])]), hasLabels.value && createElementVNode("g", {
         "key": "labels",
         "style": {
           textAnchor: 'middle',
           dominantBaseline: 'mathematical',
           fill: 'currentColor'
         }
-      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+      }, [parsedLabels.value.map((item, i) => createElementVNode("text", {
         "x": item.x + lineWidth.value / 2 + lineWidth.value / 2,
         "y": parseInt(props.height, 10) - 4 + (parseInt(props.labelSize, 10) || 7 * 0.75),
         "font-size": Number(props.labelSize) || 7
       }, [slots.label?.({
         index: i,
         value: item.value
-      }) ?? item.value]))]), createVNode("path", {
+      }) ?? item.value]))]), createElementVNode("path", {
         "ref": path,
         "d": genPath$1(props.fill),
         "fill": props.fill ? `url(#${id.value})` : 'none',
         "stroke": props.fill ? 'none' : `url(#${id.value})`
-      }, null), props.fill && createVNode("path", {
+      }, null), props.fill && createElementVNode("path", {
         "d": genPath$1(false),
         "fill": "none",
         "stroke": props.color ?? props.gradient?.[0]
@@ -27016,7 +27017,7 @@ const VStepperActions = genericComponent()({
       const nextSlotProps = {
         onClick: onClickNext
       };
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-stepper-actions"
       }, [createVNode(VDefaultsProvider, {
         "defaults": {
@@ -27090,7 +27091,7 @@ const makeVStepperItemProps = propsFactory({
 const VStepperItem = genericComponent()({
   name: 'VStepperItem',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVStepperItemProps(),
   emits: {
@@ -27129,12 +27130,12 @@ const VStepperItem = genericComponent()({
       function onClick() {
         group?.toggle();
       }
-      return withDirectives(createVNode("button", {
-        "class": ['v-stepper-item', {
+      return withDirectives(createElementVNode("button", {
+        "class": normalizeClass(['v-stepper-item', {
           'v-stepper-item--complete': hasCompleted.value,
           'v-stepper-item--disabled': props.disabled,
           'v-stepper-item--error': hasError.value
-        }, group?.selectedClass.value],
+        }, group?.selectedClass.value]),
         "disabled": !props.editable,
         "type": "button",
         "onClick": onClick
@@ -27147,15 +27148,15 @@ const VStepperItem = genericComponent()({
         default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? createVNode(VIcon, {
           "icon": icon.value
         }, null) : step.value)]
-      }), createVNode("div", {
+      }), createElementVNode("div", {
         "class": "v-stepper-item__content"
-      }, [hasTitle && createVNode("div", {
+      }, [hasTitle && createElementVNode("div", {
         "key": "title",
         "class": "v-stepper-item__title"
-      }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && createVNode("div", {
+      }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && createElementVNode("div", {
         "key": "subtitle",
         "class": "v-stepper-item__subtitle"
-      }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[resolveDirective("ripple"), props.ripple && props.editable, null]]);
+      }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[Ripple, props.ripple && props.editable, null]]);
     });
     return {};
   }
@@ -27351,7 +27352,7 @@ const VStepper = genericComponent()({
               raw,
               ...item
             } = _ref2;
-            return createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
+            return createElementVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
               default: slots[`header-item.${item.value}`] ?? slots.header,
               icon: slots.icon,
               title: slots.title,
@@ -27492,14 +27493,14 @@ const VSwitch = genericComponent()({
                 backgroundColorClasses,
                 backgroundColorStyles
               } = _ref3;
-              return createVNode("div", {
-                "class": ['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-                "style": backgroundColorStyles.value,
+              return createElementVNode("div", {
+                "class": normalizeClass(['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+                "style": normalizeStyle(backgroundColorStyles.value),
                 "onClick": onTrackClick
-              }, [slots['track-true'] && createVNode("div", {
+              }, [slots['track-true'] && createElementVNode("div", {
                 "key": "prepend",
                 "class": "v-switch__track-true"
-              }, [slots['track-true'](slotProps)]), slots['track-false'] && createVNode("div", {
+              }, [slots['track-true'](slotProps)]), slots['track-false'] && createElementVNode("div", {
                 "key": "append",
                 "class": "v-switch__track-false"
               }, [slots['track-false'](slotProps)])]);
@@ -27511,11 +27512,11 @@ const VSwitch = genericComponent()({
                 backgroundColorClasses,
                 backgroundColorStyles
               } = _ref4;
-              return createVNode(Fragment, null, [inputNode, createVNode("div", {
-                "class": ['v-switch__thumb', {
+              return createElementVNode(Fragment, null, [inputNode, createElementVNode("div", {
+                "class": normalizeClass(['v-switch__thumb', {
                   'v-switch__thumb--filled': icon || props.loading
-                }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value],
-                "style": props.inset ? undefined : backgroundColorStyles.value
+                }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value]),
+                "style": normalizeStyle(props.inset ? undefined : backgroundColorStyles.value)
               }, [slots.thumb ? createVNode(VDefaultsProvider, {
                 "defaults": {
                   VIcon: {
@@ -27603,10 +27604,10 @@ const VSystemBar = genericComponent()({
       absolute: toRef(() => props.absolute)
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-system-bar', {
+      "class": normalizeClass(['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -27697,10 +27698,10 @@ const VTab = genericComponent()({
         "onGroup:selected": updateSlider
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
+        default: () => createElementVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createElementVNode("div", {
           "ref": sliderEl,
-          "class": ['v-tab__slider', sliderColorClasses.value],
-          "style": sliderColorStyles.value
+          "class": normalizeClass(['v-tab__slider', sliderColorClasses.value]),
+          "style": normalizeStyle(sliderColorStyles.value)
         }, null)])
       });
     });
@@ -27852,7 +27853,7 @@ const VTabs = genericComponent()({
     useRender(() => {
       const slideGroupProps = VSlideGroup.filterProps(props);
       const hasWindow = !!(slots.window || props.items.length > 0);
-      return createVNode(Fragment, null, [createVNode(VSlideGroup, mergeProps(slideGroupProps, {
+      return createElementVNode(Fragment, null, [createVNode(VSlideGroup, mergeProps(slideGroupProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
@@ -27925,7 +27926,7 @@ const makeVTextareaProps = propsFactory({
 const VTextarea = genericComponent()({
   name: 'VTextarea',
   directives: {
-    Intersect
+    vIntersect: Intersect
   },
   inheritAttrs: false,
   props: makeVTextareaProps(),
@@ -28098,9 +28099,9 @@ const VTextarea = genericComponent()({
                   ...slotProps
                 }
               } = _ref3;
-              return createVNode(Fragment, null, [props.prefix && createVNode("span", {
+              return createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [props.prefix]), withDirectives(createVNode("textarea", mergeProps({
+              }, [props.prefix]), withDirectives(createElementVNode("textarea", mergeProps({
                 "ref": textareaRef,
                 "class": fieldClass,
                 "value": model.value,
@@ -28113,24 +28114,24 @@ const VTextarea = genericComponent()({
                 "name": props.name,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), [[resolveDirective("intersect"), {
+              }, slotProps, inputAttrs), null), [[Intersect, {
                 handler: onIntersect
               }, null, {
                 once: true
-              }]]), props.autoGrow && withDirectives(createVNode("textarea", {
-                "class": [fieldClass, 'v-textarea__sizer'],
+              }]]), props.autoGrow && withDirectives(createElementVNode("textarea", {
+                "class": normalizeClass([fieldClass, 'v-textarea__sizer']),
                 "id": `${slotProps.id}-sizer`,
                 "onUpdate:modelValue": $event => model.value = $event,
                 "ref": sizerRef,
                 "readonly": true,
                 "aria-hidden": "true"
-              }, null), [[vModelText, model.value]]), props.suffix && createVNode("span", {
+              }, null), [[vModelText, model.value]]), props.suffix && createElementVNode("span", {
                 "class": "v-text-field__suffix"
               }, [props.suffix])]);
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": props.persistentCounter || isFocused.value,
           "value": counterValue.value,
           "max": max.value,
@@ -28161,8 +28162,8 @@ const VThemeProvider = genericComponent()({
     return () => {
       if (!props.withBackground) return slots.default?.();
       return createVNode(props.tag, {
-        "class": ['v-theme-provider', themeClasses.value, props.class],
-        "style": props.style
+        "class": normalizeClass(['v-theme-provider', themeClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.()]
       });
@@ -28207,21 +28208,21 @@ const VTimelineDivider = genericComponent()({
       backgroundColorClasses: lineColorClasses,
       backgroundColorStyles: lineColorStyles
     } = useBackgroundColor(() => props.lineColor);
-    useRender(() => createVNode("div", {
-      "class": ['v-timeline-divider', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
-      }, props.class],
-      "style": props.style
-    }, [createVNode("div", {
-      "class": ['v-timeline-divider__before', lineColorClasses.value],
-      "style": lineColorStyles.value
-    }, null), !props.hideDot && createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle(props.style)
+    }, [createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__before', lineColorClasses.value]),
+      "style": normalizeStyle(lineColorStyles.value)
+    }, null), !props.hideDot && createElementVNode("div", {
       "key": "dot",
-      "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
-      "style": sizeStyles.value
-    }, [createVNode("div", {
-      "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
-      "style": backgroundColorStyles.value
+      "class": normalizeClass(['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value]),
+      "style": normalizeStyle(sizeStyles.value)
+    }, [createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value]),
+      "style": normalizeStyle(backgroundColorStyles.value)
     }, [!slots.default ? createVNode(VIcon, {
       "key": "icon",
       "color": props.iconColor,
@@ -28237,9 +28238,9 @@ const VTimelineDivider = genericComponent()({
           size: props.size
         }
       }
-    }, slots.default)])]), createVNode("div", {
-      "class": ['v-timeline-divider__after', lineColorClasses.value],
-      "style": lineColorStyles.value
+    }, slots.default)])]), createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__after', lineColorClasses.value]),
+      "style": normalizeStyle(lineColorStyles.value)
     }, null)]));
     return {};
   }
@@ -28290,19 +28291,19 @@ const VTimelineItem = genericComponent()({
     }, {
       flush: 'post'
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-timeline-item', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-item', {
         'v-timeline-item--fill-dot': props.fillDot,
         'v-timeline-item--side-start': props.side === 'start',
         'v-timeline-item--side-end': props.side === 'end'
-      }, props.class],
-      "style": [{
+      }, props.class]),
+      "style": normalizeStyle([{
         '--v-timeline-dot-size': convertToUnit(dotSize.value),
         '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
-      }, props.style]
-    }, [createVNode("div", {
+      }, props.style])
+    }, [createElementVNode("div", {
       "class": "v-timeline-item__body",
-      "style": dimensionStyles.value
+      "style": normalizeStyle(dimensionStyles.value)
     }, [slots.default?.()]), createVNode(VTimelineDivider, {
       "ref": dotRef,
       "hideDot": props.hideDot,
@@ -28315,7 +28316,7 @@ const VTimelineItem = genericComponent()({
       "rounded": props.rounded
     }, {
       default: slots.icon
-    }), props.density !== 'compact' && createVNode("div", {
+    }), props.density !== 'compact' && createElementVNode("div", {
       "class": "v-timeline-item__opposite"
     }, [!props.hideOpposite && slots.opposite?.()])]));
     return {};
@@ -28408,12 +28409,12 @@ const VTimeline = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+      "class": normalizeClass(['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
         'v-timeline--inset-line': !!props.lineInset
-      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
-      "style": [{
+      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([{
         '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -28439,9 +28440,9 @@ const VToolbarItems = genericComponent()({
         variant: toRef(() => props.variant)
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-toolbar-items', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-toolbar-items', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -28613,7 +28614,7 @@ const VCalendarIntervalEvent = genericComponent()({
       }
     };
     useRender(() => {
-      return createVNode("div", null, [slots.intervalEvent?.({
+      return createElementVNode("div", null, [slots.intervalEvent?.({
         height: calcHeight().height,
         margin: calcHeight().margin,
         eventClass: 'v-calendar-internal-event',
@@ -28705,20 +28706,20 @@ const VCalendarInterval = genericComponent()({
       };
     });
     useRender(() => {
-      return props.dayIndex === 0 ? createVNode("div", {
+      return props.dayIndex === 0 ? createElementVNode("div", {
         "class": "v-calendar-day__row-with-label",
-        "style": `height: ${convertToUnit(props.intervalHeight)}`
-      }, [createVNode("div", mergeProps({
+        "style": normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
+      }, [createElementVNode("div", mergeProps({
         "class": "v-calendar-day__row-label"
       }, getPrefixedEventHandlers(attrs, ':time', () => props)), [slots.intervalTitle?.({
         interval: interval.value
-      }) ?? (props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : '12 AM')]), createVNode("div", {
+      }) ?? (props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : '12 AM')]), createElementVNode("div", {
         "class": "v-calendar-day__row-hairline"
-      }, null), createVNode("div", mergeProps({
+      }, null), createElementVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
       }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
         interval: interval.value
-      }) ?? createVNode("div", null, [interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
+      }) ?? createElementVNode("div", null, [interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
         "event": event,
         "interval": interval.value,
         "intervalDivisions": props.intervalDivisions,
@@ -28743,10 +28744,10 @@ const VCalendarInterval = genericComponent()({
             });
           }
         } : {})
-      }))])])]) : createVNode("div", {
+      }))])])]) : createElementVNode("div", {
         "class": "v-calendar-day__row-without-label",
-        "style": `height: ${convertToUnit(props.intervalHeight)}`
-      }, [createVNode("div", mergeProps({
+        "style": normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
+      }, [createElementVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
       }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
         interval: interval.value
@@ -28808,12 +28809,12 @@ const VCalendarDay = genericComponent()({
     }, (v, i) => i).filter((_, index) => props.intervalDuration * (index + props.intervalStart) < 1440)]);
     useRender(() => {
       const calendarIntervalProps = VCalendarInterval.filterProps(props);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-calendar-day__container"
-      }, [!props.hideDayHeader && createVNode("div", mergeProps({
+      }, [!props.hideDayHeader && createElementVNode("div", mergeProps({
         "key": "calendar-week-name",
         "class": "v-calendar-weekly__head-weekday"
-      }, getPrefixedEventHandlers(attrs, ':day', () => props.day)), [adapter.format(props.day.date, 'weekdayShort'), createVNode("div", null, [createVNode(VBtn, mergeProps(getPrefixedEventHandlers(attrs, ':date', () => props.day), {
+      }, getPrefixedEventHandlers(attrs, ':day', () => props.day)), [adapter.format(props.day.date, 'weekdayShort'), createElementVNode("div", null, [createVNode(VBtn, mergeProps(getPrefixedEventHandlers(attrs, ':date', () => props.day), {
         "class": props.day?.isToday ? 'v-calendar-day-label__today' : undefined,
         "icon": true,
         "text": adapter.format(props.day.date, 'dayOfMonth'),
@@ -28876,7 +28877,7 @@ const VCalendarHeader = genericComponent()({
     function toToday() {
       emit('click:toToday');
     }
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-calendar-header"
     }, [props.text && createVNode(VBtn, {
       "key": "today",
@@ -28894,11 +28895,11 @@ const VCalendarHeader = genericComponent()({
       "icon": props.nextIcon,
       "variant": "text",
       "onClick": next
-    }, null), createVNode("div", {
+    }, null), createElementVNode("div", {
       "class": "v-calendar-header__title"
     }, [slots.title?.({
       title: props.title
-    }) ?? createVNode("span", null, [props.title])])]));
+    }) ?? createElementVNode("span", null, [props.title])])]));
     return {};
   }
 });
@@ -28960,9 +28961,9 @@ const VCalendarMonthDay = genericComponent()({
       slots
     } = _ref;
     useRender(() => {
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-calendar-month__day']
-      }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? createVNode("div", {
+      }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? createElementVNode("div", {
         "key": "title",
         "class": "v-calendar-weekly__day-label"
       }, [slots.dayTitle?.({
@@ -28975,13 +28976,13 @@ const VCalendarMonthDay = genericComponent()({
         "size": "x-small",
         "variant": props.day?.isToday ? undefined : 'flat',
         "text": `${props.title}`
-      }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? createVNode("div", {
+      }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? createElementVNode("div", {
         "key": "content",
         "class": "v-calendar-weekly__day-content"
       }, [slots.dayBody?.({
         day: props.day,
         events: props.events
-      }) ?? createVNode("div", null, [createVNode("div", {
+      }) ?? createElementVNode("div", null, [createElementVNode("div", {
         "class": "v-calendar-weekly__day-alldayevents-container"
       }, [props.events?.filter(event => event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
         day: props.day,
@@ -28991,7 +28992,7 @@ const VCalendarMonthDay = genericComponent()({
         "day": props.day,
         "event": event,
         "allDay": true
-      }, attrs), null))]), createVNode("div", {
+      }, attrs), null))]), createElementVNode("div", {
         "class": "v-calendar-weekly__day-events-container"
       }, [props.events?.filter(event => !event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
         day: props.day,
@@ -29078,13 +29079,13 @@ const VCalendar = genericComponent()({
     useRender(() => {
       const calendarDayProps = VCalendarDay.filterProps(props);
       const calendarHeaderProps = VCalendarHeader.filterProps(props);
-      return createVNode("div", {
-        "class": ['v-calendar', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-calendar', {
           'v-calendar-monthly': props.viewMode === 'month',
           'v-calendar-weekly': props.viewMode === 'week',
           'v-calendar-day': props.viewMode === 'day'
-        }]
-      }, [createVNode("div", null, [!props.hideHeader && (slots.header?.({
+        }])
+      }, [createElementVNode("div", null, [!props.hideHeader && (slots.header?.({
         title: title.value,
         clickNext: onClickNext,
         clickPrev: onClickPrev,
@@ -29098,20 +29099,20 @@ const VCalendar = genericComponent()({
         "onClick:toToday": onClickToday
       }), {
         title: slots.title
-      }))]), createVNode("div", {
-        "class": ['v-calendar__container', `days__${weekDays.value.length}`]
-      }, [props.viewMode === 'month' && !props.hideDayHeader && createVNode("div", {
-        "class": ['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
+      }))]), createElementVNode("div", {
+        "class": normalizeClass(['v-calendar__container', `days__${weekDays.value.length}`])
+      }, [props.viewMode === 'month' && !props.hideDayHeader && createElementVNode("div", {
+        "class": normalizeClass(['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])]),
         "key": "calendarWeeklyHead"
-      }, [!props.hideWeekNumber ? createVNode("div", {
+      }, [!props.hideWeekNumber ? createElementVNode("div", {
         "key": "weekNumber0",
         "class": "v-calendar-weekly__head-weeknumber"
-      }, null) : '', weekDays.value.map(weekday => createVNode("div", {
-        "class": `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`
-      }, [dayNames[weekday]]))]), props.viewMode === 'month' && createVNode("div", {
+      }, null) : '', weekDays.value.map(weekday => createElementVNode("div", {
+        "class": normalizeClass(`v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`)
+      }, [dayNames[weekday]]))]), props.viewMode === 'month' && createElementVNode("div", {
         "key": "VCalendarMonth",
-        "class": ['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])]
-      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createVNode("div", mergeProps({
+        "class": normalizeClass(['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])])
+      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createElementVNode("div", mergeProps({
         "class": "v-calendar-month__weeknumber"
       }, getPrefixedEventHandlers(attrs, ':weekNumber', () => ({
         weekNumber: weekNumbers.value[wi],
@@ -29223,11 +29224,11 @@ const VColorInput = genericComponent()({
         }
       }), {
         ...slots,
-        prepend: props.pipIcon ? arg => createVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
+        prepend: props.pipIcon ? arg => createElementVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
           "color": props.pip ? model.value : undefined,
           "icon": props.pipIcon
         }, null), slots.prepend?.(arg)]) : undefined,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, {
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
@@ -29583,7 +29584,7 @@ const VDateInput = genericComponent()({
         "onUpdate:modelValue": onUpdateDisplayModel
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, {
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
@@ -29688,7 +29689,7 @@ const VFileUploadItem = genericComponent()({
         "class": "v-file-upload-item"
       }), {
         ...slots,
-        prepend: slotProps => createVNode(Fragment, null, [!slots.prepend ? createVNode(VAvatar, {
+        prepend: slotProps => createElementVNode(Fragment, null, [!slots.prepend ? createVNode(VAvatar, {
           "icon": props.fileIcon,
           "image": preview.value,
           "rounded": true
@@ -29703,7 +29704,7 @@ const VFileUploadItem = genericComponent()({
         }, {
           default: () => [slots.prepend?.(slotProps) ?? createVNode(VAvatar, null, null)]
         })]),
-        append: slotProps => createVNode(Fragment, null, [props.clearable && createVNode(Fragment, null, [!slots.clear ? createVNode(VBtn, {
+        append: slotProps => createElementVNode(Fragment, null, [props.clearable && createElementVNode(Fragment, null, [!slots.clear ? createVNode(VBtn, {
           "icon": "$clear",
           "density": "comfortable",
           "variant": "text",
@@ -29834,7 +29835,7 @@ const VFileUpload = genericComponent()({
       const cardProps = VSheet.filterProps(props);
       const dividerProps = VDivider.filterProps(props);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      const inputNode = createVNode("input", mergeProps({
+      const inputNode = createElementVNode("input", mergeProps({
         "ref": inputRef,
         "type": "file",
         "disabled": props.disabled,
@@ -29846,7 +29847,7 @@ const VFileUpload = genericComponent()({
           model.value = [...(target.files ?? [])];
         }
       }, inputAttrs), null);
-      return createVNode(Fragment, null, [createVNode(VSheet, mergeProps({
+      return createElementVNode(Fragment, null, [createVNode(VSheet, mergeProps({
         "ref": vSheetRef
       }, cardProps, {
         "class": ['v-file-upload', {
@@ -29860,7 +29861,7 @@ const VFileUpload = genericComponent()({
         "onDrop": onDrop,
         "onClick": !hasBrowse ? onClick : undefined
       }, rootAttrs), {
-        default: () => [hasIcon && createVNode("div", {
+        default: () => [hasIcon && createElementVNode("div", {
           "key": "icon",
           "class": "v-file-upload-icon"
         }, [!slots.icon ? createVNode(VIcon, {
@@ -29875,15 +29876,15 @@ const VFileUpload = genericComponent()({
           }
         }, {
           default: () => [slots.icon()]
-        })]), hasTitle && createVNode("div", {
+        })]), hasTitle && createElementVNode("div", {
           "key": "title",
           "class": "v-file-upload-title"
-        }, [slots.title?.() ?? t(props.title)]), props.density === 'default' && createVNode(Fragment, null, [createVNode("div", {
+        }, [slots.title?.() ?? t(props.title)]), props.density === 'default' && createElementVNode(Fragment, null, [createElementVNode("div", {
           "key": "upload-divider",
           "class": "v-file-upload-divider"
         }, [slots.divider?.() ?? createVNode(VDivider, dividerProps, {
           default: () => [t(props.dividerText)]
-        })]), hasBrowse && createVNode(Fragment, null, [!slots.browse ? createVNode(VBtn, {
+        })]), hasBrowse && createElementVNode(Fragment, null, [!slots.browse ? createVNode(VBtn, {
           "readonly": props.disabled,
           "size": "large",
           "text": t(props.browseText),
@@ -29904,7 +29905,7 @@ const VFileUpload = genericComponent()({
               onClick
             }
           })]
-        })]), props.subtitle && createVNode("div", {
+        })]), props.subtitle && createElementVNode("div", {
           "class": "v-file-upload-subtitle"
         }, [props.subtitle])]), createVNode(VOverlay, {
           "model-value": isDragging.value,
@@ -29913,7 +29914,7 @@ const VFileUpload = genericComponent()({
         }, null), slots.input?.({
           inputNode
         }) ?? inputNode]
-      }), model.value.length > 0 && createVNode("div", {
+      }), model.value.length > 0 && createElementVNode("div", {
         "class": "v-file-upload-items"
       }, [model.value.map((file, i) => {
         const slotProps = {
@@ -30063,23 +30064,23 @@ const VIconBtn = genericComponent()({
         opacity: props.opacity
       };
       return createVNode(props.tag, {
-        "class": [{
+        "class": normalizeClass([{
           'v-icon-btn': true,
           'v-icon-btn--active': isActive.value,
           'v-icon-btn--disabled': props.disabled,
           'v-icon-btn--loading': props.loading,
           'v-icon-btn--readonly': props.readonly,
           [`v-icon-btn--${props.size}`]: true
-        }, themeClasses.value, colorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value, props.class],
-        "style": [{
+        }, themeClasses.value, colorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value, props.class]),
+        "style": normalizeStyle([{
           '--v-icon-btn-rotate': convertToUnit(props.rotate, 'deg'),
           '--v-icon-btn-height': convertToUnit(btnHeight),
           '--v-icon-btn-width': convertToUnit(btnWidth)
-        }, colorStyles.value, props.style],
+        }, colorStyles.value, props.style]),
         "tabindex": props.disabled || props.readonly ? -1 : 0,
         "onClick": onClick
       }, {
-        default: () => [genOverlays(!props.hideOverlay, 'v-icon-btn'), createVNode("div", {
+        default: () => [genOverlays(!props.hideOverlay, 'v-icon-btn'), createElementVNode("div", {
           "class": "v-icon-btn__content",
           "data-no-activator": ""
         }, [!slots.default && icon ? createVNode(VIcon, mergeProps({
@@ -30094,7 +30095,7 @@ const VIconBtn = genericComponent()({
           }
         }, {
           default: () => slots.default?.() ?? toDisplayString(props.text)
-        })]), !!props.loading && createVNode("span", {
+        })]), !!props.loading && createElementVNode("span", {
           "key": "loader",
           "class": "v-icon-btn__loader"
         }, [slots.loader?.() ?? createVNode(VProgressCircular, {
@@ -30229,7 +30230,7 @@ const VStepperVerticalItem = genericComponent()({
         "hide-actions": false,
         "value": step.value
       }), {
-        title: () => createVNode(Fragment, null, [createVNode(VAvatar, {
+        title: () => createElementVNode(Fragment, null, [createVNode(VAvatar, {
           "key": "stepper-avatar",
           "class": "v-stepper-vertical-item__avatar",
           "color": hasColor ? props.color : undefined,
@@ -30239,12 +30240,12 @@ const VStepperVerticalItem = genericComponent()({
           default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? createVNode(VIcon, {
             "icon": icon.value
           }, null) : step.value)]
-        }), createVNode("div", null, [createVNode("div", {
+        }), createElementVNode("div", null, [createElementVNode("div", {
           "class": "v-stepper-vertical-item__title"
-        }, [slots.title?.(slotProps.value) ?? props.title]), createVNode("div", {
+        }, [slots.title?.(slotProps.value) ?? props.title]), createElementVNode("div", {
           "class": "v-stepper-vertical-item__subtitle"
         }, [slots.subtitle?.(slotProps.value) ?? props.subtitle])])]),
-        text: () => createVNode(Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && createVNode(VDefaultsProvider, {
+        text: () => createElementVNode(Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && createVNode(VDefaultsProvider, {
           "defaults": {
             VStepperVerticalActions: {
               disabled: disabled.value,
@@ -30346,7 +30347,7 @@ const VStepperVertical = genericComponent()({
             prev,
             next
           } = _ref2;
-          return createVNode(Fragment, null, [items.value.map(_ref3 => {
+          return createElementVNode(Fragment, null, [items.value.map(_ref3 => {
             let {
               raw,
               ...item
@@ -30435,7 +30436,7 @@ const VPullToRefresh = genericComponent()({
       goingUp.value = newVal < oldVal;
     });
     useRender(() => {
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": ['v-pull-to-refresh'],
         "onTouchstart": onTouchstart,
         "onTouchmove": onTouchmove,
@@ -30445,32 +30446,32 @@ const VPullToRefresh = genericComponent()({
         "onMouseleave": onTouchend,
         "onMousemove": onTouchmove,
         "ref": containerRef
-      }, [createVNode("div", {
-        "class": ['v-pull-to-refresh__pull-down', {
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-pull-to-refresh__pull-down', {
           'v-pull-to-refresh__pull-down--touching': touching.value
-        }],
-        "style": {
+        }]),
+        "style": normalizeStyle({
           top: convertToUnit(-1 * props.pullDownThreshold + topOffset.value),
           height: convertToUnit(props.pullDownThreshold)
-        }
+        })
       }, [slots.pullDownPanel ? slots.pullDownPanel({
         canRefresh: canRefresh.value,
         goingUp: goingUp.value,
         refreshing: refreshing.value
-      }) : createVNode("div", {
+      }) : createElementVNode("div", {
         "class": ['v-pull-to-refresh__pull-down-default']
       }, [refreshing.value ? createVNode(VProgressCircular, {
         "indeterminate": true,
         "active": false
       }, null) : createVNode(VIcon, {
         "icon": canRefresh.value || goingUp.value ? '$sortAsc' : '$sortDesc'
-      }, null)])]), createVNode("div", {
-        "class": ['v-pull-to-refresh__scroll-container', {
+      }, null)])]), createElementVNode("div", {
+        "class": normalizeClass(['v-pull-to-refresh__scroll-container', {
           'v-pull-to-refresh__scroll-container--touching': touching.value
-        }],
-        "style": {
+        }]),
+        "style": normalizeStyle({
           top: convertToUnit(topOffset.value)
-        }
+        })
       }, [slots.default?.()])]);
     });
   }
@@ -30685,37 +30686,37 @@ const VTimePickerClock = genericComponent()({
       }
     }
     useRender(() => {
-      return createVNode("div", {
-        "class": [{
+      return createElementVNode("div", {
+        "class": normalizeClass([{
           'v-time-picker-clock': true,
           'v-time-picker-clock--indeterminate': props.modelValue == null,
           'v-time-picker-clock--readonly': props.readonly
-        }],
+        }]),
         "onMousedown": onMouseDown,
         "onTouchstart": onMouseDown,
         "onWheel": wheel,
         "ref": clockRef
-      }, [createVNode("div", {
+      }, [createElementVNode("div", {
         "class": "v-time-picker-clock__inner",
         "ref": innerClockRef
-      }, [createVNode("div", {
-        "class": [{
+      }, [createElementVNode("div", {
+        "class": normalizeClass([{
           'v-time-picker-clock__hand': true,
           'v-time-picker-clock__hand--inner': isInner(props.modelValue)
-        }, textColorClasses.value],
-        "style": [{
+        }, textColorClasses.value]),
+        "style": normalizeStyle([{
           transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`
-        }, textColorStyles.value]
+        }, textColorStyles.value])
       }, null), genChildren.value.map(value => {
         const isActive = value === displayedValue.value;
-        return createVNode("div", {
-          "class": [{
+        return createElementVNode("div", {
+          "class": normalizeClass([{
             'v-time-picker-clock__item': true,
             'v-time-picker-clock__item--active': isActive,
             'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value)
-          }, isActive && backgroundColorClasses.value],
-          "style": [getTransform(value), isActive && backgroundColorStyles.value]
-        }, [createVNode("span", null, [props.format(value)])]);
+          }, isActive && backgroundColorClasses.value]),
+          "style": normalizeStyle([getTransform(value), isActive && backgroundColorStyles.value])
+        }, [createElementVNode("span", null, [props.format(value)])]);
       })])]);
     });
   }
@@ -30758,46 +30759,46 @@ const VTimePickerControls = genericComponent()({
       if (props.ampm) {
         hour = hour ? (hour - 1) % 12 + 1 : 12;
       }
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-time-picker-controls"
-      }, [createVNode("div", {
-        "class": {
+      }, [createElementVNode("div", {
+        "class": normalizeClass({
           'v-time-picker-controls__time': true,
           'v-time-picker-controls__time--with-seconds': props.useSeconds
-        }
+        })
       }, [createVNode(VBtn, {
         "active": props.viewMode === 'hour',
         "color": props.viewMode === 'hour' ? props.color : undefined,
         "disabled": props.disabled,
         "variant": "tonal",
-        "class": {
+        "class": normalizeClass({
           'v-time-picker-controls__time__btn': true,
           'v-time-picker-controls__time--with-ampm__btn': props.ampm,
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
-        },
+        }),
         "text": props.hour == null ? '--' : pad(`${hour}`),
         "onClick": () => emit('update:viewMode', 'hour')
-      }, null), createVNode("span", {
-        "class": ['v-time-picker-controls__time__separator', {
+      }, null), createElementVNode("span", {
+        "class": normalizeClass(['v-time-picker-controls__time__separator', {
           'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
-        }]
+        }])
       }, [createTextVNode(":")]), createVNode(VBtn, {
         "active": props.viewMode === 'minute',
         "color": props.viewMode === 'minute' ? props.color : undefined,
-        "class": {
+        "class": normalizeClass({
           'v-time-picker-controls__time__btn': true,
           'v-time-picker-controls__time__btn__active': props.viewMode === 'minute',
           'v-time-picker-controls__time--with-ampm__btn': props.ampm,
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
-        },
+        }),
         "disabled": props.disabled,
         "variant": "tonal",
         "text": props.minute == null ? '--' : pad(props.minute),
         "onClick": () => emit('update:viewMode', 'minute')
-      }, null), props.useSeconds && createVNode("span", {
-        "class": ['v-time-picker-controls__time__separator', {
+      }, null), props.useSeconds && createElementVNode("span", {
+        "class": normalizeClass(['v-time-picker-controls__time__separator', {
           'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
-        }],
+        }]),
         "key": "secondsDivider"
       }, [createTextVNode(":")]), props.useSeconds && createVNode(VBtn, {
         "key": "secondsVal",
@@ -30805,25 +30806,25 @@ const VTimePickerControls = genericComponent()({
         "color": props.viewMode === 'second' ? props.color : undefined,
         "variant": "tonal",
         "onClick": () => emit('update:viewMode', 'second'),
-        "class": {
+        "class": normalizeClass({
           'v-time-picker-controls__time__btn': true,
           'v-time-picker-controls__time__btn__active': props.viewMode === 'second',
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
-        },
+        }),
         "disabled": props.disabled,
         "text": props.second == null ? '--' : pad(props.second)
-      }, null), props.ampm && props.ampmInTitle && createVNode("div", {
-        "class": ['v-time-picker-controls__ampm', {
+      }, null), props.ampm && props.ampmInTitle && createElementVNode("div", {
+        "class": normalizeClass(['v-time-picker-controls__ampm', {
           'v-time-picker-controls__ampm--readonly': props.ampmReadonly
-        }]
+        }])
       }, [createVNode(VBtn, {
         "active": props.period === 'am',
         "color": props.period === 'am' ? props.color : undefined,
-        "class": {
+        "class": normalizeClass({
           'v-time-picker-controls__ampm__am': true,
           'v-time-picker-controls__ampm__btn': true,
           'v-time-picker-controls__ampm__btn__active': props.period === 'am'
-        },
+        }),
         "disabled": props.disabled,
         "text": t('$vuetify.timePicker.am'),
         "variant": props.disabled && props.period === 'am' ? 'elevated' : 'tonal',
@@ -30831,11 +30832,11 @@ const VTimePickerControls = genericComponent()({
       }, null), createVNode(VBtn, {
         "active": props.period === 'pm',
         "color": props.period === 'pm' ? props.color : undefined,
-        "class": {
+        "class": normalizeClass({
           'v-time-picker-controls__ampm__pm': true,
           'v-time-picker-controls__ampm__btn': true,
           'v-time-picker-controls__ampm__btn__active': props.period === 'pm'
-        },
+        }),
         "disabled": props.disabled,
         "text": t('$vuetify.timePicker.pm'),
         "variant": props.disabled && props.period === 'pm' ? 'elevated' : 'tonal',
@@ -31063,7 +31064,7 @@ const VTimePicker = genericComponent()({
         "class": ['v-time-picker', props.class],
         "style": props.style
       }), {
-        title: () => slots.title?.() ?? createVNode("div", {
+        title: () => slots.title?.() ?? createElementVNode("div", {
           "class": "v-time-picker__title"
         }, [t(props.title)]),
         header: () => createVNode(VTimePickerControls, mergeProps(timePickerControlsProps, {
@@ -31130,7 +31131,7 @@ const VTreeviewGroup = genericComponent()({
         "subgroup": true
       }), {
         ...slots,
-        activator: slots.activator ? slotProps => createVNode(Fragment, null, [createVNode(VDefaultsProvider, {
+        activator: slots.activator ? slotProps => createElementVNode(Fragment, null, [createVNode(VDefaultsProvider, {
           "defaults": activatorDefaults.value
         }, {
           default: () => [slots.activator?.(slotProps)]
@@ -31196,7 +31197,7 @@ const VTreeviewItem = genericComponent()({
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
-          return createVNode(Fragment, null, [createVNode(VListItemAction, {
+          return createElementVNode(Fragment, null, [createVNode(VListItemAction, {
             "start": false
           }, {
             default: () => [props.toggleIcon ? createVNode(VBtn, {
@@ -31213,7 +31214,7 @@ const VTreeviewItem = genericComponent()({
                   "width": "2"
                 }, null);
               }
-            }) : createVNode("div", {
+            }) : createElementVNode("div", {
               "class": "v-treeview-item__level"
             }, null)]
           }), slots.prepend?.(slotProps)]);
@@ -31282,7 +31283,7 @@ const VTreeviewChildren = genericComponent()({
       } = item;
       const loading = isLoading.has(item.value);
       const slotsWithItem = {
-        prepend: slotProps => createVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createVNode("div", null, [createVNode(VCheckboxBtn, {
+        prepend: slotProps => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
           "key": item.value,
           "modelValue": slotProps.isSelected,
           "disabled": props.disabled,
@@ -32011,7 +32012,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.6-master.2025-05-24";
+const version$1 = "3.8.7-master.2025-05-27";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32309,7 +32310,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.6-master.2025-05-24";
+const version = "3.8.7-master.2025-05-27";
 
 /* eslint-disable local-rules/sort-imports */