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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.6-master.2025-05-24
+* Vuetify v3.8.6-master.2025-05-26
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1658,18 +1658,18 @@
         return vue.createVNode(props.tag, vue.mergeProps(attrs, {
           "style": null
         }), {
-          default: () => [vue.createVNode("svg", {
+          default: () => [vue.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) ? vue.createVNode("path", {
+          }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? vue.createElementVNode("path", {
             "d": path[0],
             "fill-opacity": path[1]
-          }, null) : vue.createVNode("path", {
+          }, null) : vue.createElementVNode("path", {
             "d": path
-          }, null)) : vue.createVNode("path", {
+          }, null)) : vue.createElementVNode("path", {
             "d": props.icon
           }, null)])]
         });
@@ -1693,7 +1693,7 @@
     setup(props) {
       return () => {
         return vue.createVNode(props.tag, {
-          "class": props.icon
+          "class": vue.normalizeClass(props.icon)
         }, null);
       };
     }
@@ -3158,11 +3158,11 @@
       const {
         rtlClasses
       } = useRtl();
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": layoutRef,
-        "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-        "style": [props.style]
-      }, [vue.createVNode("div", {
+        "class": vue.normalizeClass(['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-application__wrap"
       }, [slots.default?.()])]));
       return {
@@ -3202,10 +3202,10 @@
       useRender(() => {
         const hasText = !!(slots.default || slots.text || props.text);
         return vue.createVNode(props.tag, {
-          "class": ['v-toolbar-title', props.class],
-          "style": props.style
+          "class": vue.normalizeClass(['v-toolbar-title', props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, {
-          default: () => [hasText && vue.createVNode("div", {
+          default: () => [hasText && vue.createElementVNode("div", {
             "class": "v-toolbar-title__placeholder"
           }, [slots.text ? slots.text() : props.text, slots.default?.()])]
         });
@@ -3665,16 +3665,16 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-responsive', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-responsive', {
           'v-responsive--inline': props.inline
-        }, props.class],
-        "style": [dimensionStyles.value, props.style]
-      }, [vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-responsive__sizer",
-        "style": aspectStyles.value
-      }, null), slots.additional?.(), slots.default && vue.createVNode("div", {
-        "class": ['v-responsive__content', props.contentClass]
+        "style": vue.normalizeStyle(aspectStyles.value)
+      }, null), slots.additional?.(), slots.default && vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-responsive__content', props.contentClass])
       }, [slots.default()])]));
       return {};
     }
@@ -3908,7 +3908,7 @@
   const VImg = genericComponent()({
     name: 'VImg',
     directives: {
-      intersect: Intersect
+      vIntersect: Intersect
     },
     props: makeVImgProps(),
     emits: {
@@ -4037,11 +4037,11 @@
       }));
       const __image = () => {
         if (!normalisedSrc.value.src || state.value === 'idle') return null;
-        const img = vue.createVNode("img", {
-          "class": ['v-img__img', containClasses.value],
-          "style": {
+        const img = vue.createElementVNode("img", {
+          "class": vue.normalizeClass(['v-img__img', containClasses.value]),
+          "style": vue.normalizeStyle({
             objectPosition: props.position
-          },
+          }),
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
@@ -4058,7 +4058,7 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [vue.withDirectives(sources ? vue.createVNode("picture", {
+          default: () => [vue.withDirectives(sources ? vue.createElementVNode("picture", {
             "class": "v-img__picture"
           }, [sources, img]) : img, [[vue.vShow, state.value === 'loaded']])]
         });
@@ -4066,11 +4066,11 @@
       const __preloadImage = () => vue.createVNode(MaybeTransition, {
         "transition": props.transition
       }, {
-        default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createVNode("img", {
-          "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
-          "style": {
+        default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createElementVNode("img", {
+          "class": vue.normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
+          "style": vue.normalizeStyle({
             objectPosition: props.position
-          },
+          }),
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.lazySrc,
           "alt": props.alt,
@@ -4084,7 +4084,7 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && vue.createVNode("div", {
+          default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && vue.createElementVNode("div", {
             "class": "v-img__placeholder"
           }, [slots.placeholder()])]
         });
@@ -4095,18 +4095,18 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [state.value === 'error' && vue.createVNode("div", {
+          default: () => [state.value === 'error' && vue.createElementVNode("div", {
             "class": "v-img__error"
           }, [slots.error()])]
         });
       };
       const __gradient = () => {
         if (!props.gradient) return null;
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-img__gradient",
-          "style": {
+          "style": vue.normalizeStyle({
             backgroundImage: `linear-gradient(${props.gradient})`
-          }
+          })
         }, null);
       };
       const isBooted = vue.shallowRef(false);
@@ -4138,9 +4138,9 @@
           "aria-label": props.alt,
           "role": props.alt ? 'img' : undefined
         }), {
-          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          additional: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
           default: slots.default
-        }), [[vue.resolveDirective("intersect"), {
+        }), [[Intersect, {
           handler: init,
           options: props.options
         }, null, {
@@ -4283,16 +4283,16 @@
         const extension = slots.extension?.();
         isExtended.value = !!(props.extended || extension);
         return vue.createVNode(props.tag, {
-          "class": ['v-toolbar', {
+          "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [hasImage && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-toolbar__image"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -4315,19 +4315,19 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-toolbar__content",
-              "style": {
+              "style": vue.normalizeStyle({
                 height: convertToUnit(contentHeight.value)
-              }
-            }, [slots.prepend && vue.createVNode("div", {
+              })
+            }, [slots.prepend && vue.createElementVNode("div", {
               "class": "v-toolbar__prepend"
             }, [slots.prepend?.()]), hasTitle && vue.createVNode(VToolbarTitle, {
               "key": "title",
               "text": props.title
             }, {
               text: slots.title
-            }), slots.default?.(), slots.append && vue.createVNode("div", {
+            }), slots.default?.(), slots.append && vue.createElementVNode("div", {
               "class": "v-toolbar__append"
             }, [slots.append?.()])])]
           }), vue.createVNode(VDefaultsProvider, {
@@ -4338,11 +4338,11 @@
             }
           }, {
             default: () => [vue.createVNode(VExpandTransition, null, {
-              default: () => [isExtended.value && vue.createVNode("div", {
+              default: () => [isExtended.value && vue.createElementVNode("div", {
                 "class": "v-toolbar__extension",
-                "style": {
+                "style": vue.normalizeStyle({
                   height: convertToUnit(extensionHeight.value)
-                }
+                })
               }, [extension])]
             })]
           })]
@@ -4621,12 +4621,12 @@
 
   const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
   function genOverlays(isClickable, name) {
-    return vue.createVNode(vue.Fragment, null, [isClickable && vue.createVNode("span", {
+    return vue.createElementVNode(vue.Fragment, null, [isClickable && vue.createElementVNode("span", {
       "key": "overlay",
-      "class": `${name}__overlay`
-    }, null), vue.createVNode("span", {
+      "class": vue.normalizeClass(`${name}__overlay`)
+    }, null), vue.createElementVNode("span", {
       "key": "underlay",
-      "class": `${name}__underlay`
+      "class": vue.normalizeClass(`${name}__underlay`)
     }, null)]);
   }
   const makeVariantProps = propsFactory({
@@ -4710,10 +4710,10 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-btn-group', {
+          "class": vue.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": vue.normalizeStyle(props.style)
         }, slots);
       });
     }
@@ -5070,19 +5070,19 @@
         return vue.createVNode(iconData.value.component, {
           "tag": props.tag,
           "icon": iconData.value.icon,
-          "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+          "class": vue.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": vue.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
@@ -5194,26 +5194,26 @@
       });
       useRender(() => vue.createVNode(props.tag, {
         "ref": root,
-        "class": ['v-progress-circular', {
+        "class": vue.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": vue.normalizeStyle([sizeStyles.value, textColorStyles.value, props.style]),
         "role": "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
         "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
       }, {
-        default: () => [vue.createVNode("svg", {
-          "style": {
+        default: () => [vue.createElementVNode("svg", {
+          "style": vue.normalizeStyle({
             transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
-          },
+          }),
           "xmlns": "http://www.w3.org/2000/svg",
           "viewBox": `0 0 ${diameter.value} ${diameter.value}`
-        }, [vue.createVNode("circle", {
-          "class": ['v-progress-circular__underlay', underlayColorClasses.value],
-          "style": underlayColorStyles.value,
+        }, [vue.createElementVNode("circle", {
+          "class": vue.normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
+          "style": vue.normalizeStyle(underlayColorStyles.value),
           "fill": "transparent",
           "cx": "50%",
           "cy": "50%",
@@ -5221,7 +5221,7 @@
           "stroke-width": strokeWidth.value,
           "stroke-dasharray": CIRCUMFERENCE,
           "stroke-dashoffset": 0
-        }, null), vue.createVNode("circle", {
+        }, null), vue.createElementVNode("circle", {
           "class": "v-progress-circular__overlay",
           "fill": "transparent",
           "cx": "50%",
@@ -5230,7 +5230,7 @@
           "stroke-width": strokeWidth.value,
           "stroke-dasharray": CIRCUMFERENCE,
           "stroke-dashoffset": strokeDashOffset.value
-        }, null)]), slots.default && vue.createVNode("div", {
+        }, null)]), slots.default && vue.createElementVNode("div", {
           "class": "v-progress-circular__content"
         }, [slots.default({
           value: normalizedValue.value
@@ -5404,21 +5404,21 @@
       }
       useRender(() => vue.createVNode(props.tag, {
         "ref": intersectionRef,
-        "class": ['v-progress-linear', {
+        "class": vue.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": vue.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",
@@ -5426,10 +5426,10 @@
         "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
         "onClick": props.clickable && handleClick
       }, {
-        default: () => [props.stream && vue.createVNode("div", {
+        default: () => [props.stream && vue.createElementVNode("div", {
           "key": "stream",
-          "class": ['v-progress-linear__stream', textColorClasses.value],
-          "style": {
+          "class": vue.normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
+          "style": vue.normalizeStyle({
             ...textColorStyles.value,
             [isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
             borderTop: `${convertToUnit(height.value / 2)} dotted`,
@@ -5437,35 +5437,35 @@
             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), vue.createVNode("div", {
-          "class": ['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-          "style": [backgroundColorStyles.value, {
+          })
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, {
             opacity: parseFloat(props.bgOpacity),
             width: props.stream ? 0 : undefined
-          }]
-        }, null), vue.createVNode("div", {
-          "class": ['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined],
-          "style": [bufferColorStyles.value, {
+          }])
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+          "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
             width: convertToUnit(normalizedBuffer.value, '%')
-          }]
+          }])
         }, null), vue.createVNode(vue.Transition, {
           "name": transition.value
         }, {
-          default: () => [!props.indeterminate ? vue.createVNode("div", {
-            "class": ['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined],
-            "style": [barColorStyles.value, {
+          default: () => [!props.indeterminate ? vue.createElementVNode("div", {
+            "class": vue.normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "style": vue.normalizeStyle([barColorStyles.value, {
               width: convertToUnit(normalizedValue.value, '%')
-            }]
-          }, null) : vue.createVNode("div", {
+            }])
+          }, null) : vue.createElementVNode("div", {
             "class": "v-progress-linear__indeterminate"
-          }, [['long', 'short'].map(bar => vue.createVNode("div", {
+          }, [['long', 'short'].map(bar => vue.createElementVNode("div", {
             "key": bar,
-            "class": ['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined],
-            "style": barColorStyles.value
+            "class": vue.normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "style": vue.normalizeStyle(barColorStyles.value)
           }, null))])]
-        }), slots.default && vue.createVNode("div", {
+        }), slots.default && vue.createElementVNode("div", {
           "class": "v-progress-linear__content"
         }, [slots.default({
           value: normalizedValue.value,
@@ -5495,8 +5495,8 @@
     let {
       slots
     } = _ref;
-    return vue.createVNode("div", {
-      "class": `${props.name}__loader`
+    return vue.createElementVNode("div", {
+      "class": vue.normalizeClass(`${props.name}__loader`)
     }, [slots.default?.({
       color: props.color,
       isActive: props.active
@@ -6086,7 +6086,7 @@
           "onClick": onClick,
           "value": valueAttr.value
         }, link.linkProps), {
-          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
+          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createElementVNode("span", {
             "key": "prepend",
             "class": "v-btn__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -6100,7 +6100,7 @@
                 icon: props.prependIcon
               }
             }
-          }, slots.prepend)]), vue.createVNode("span", {
+          }, slots.prepend)]), vue.createElementVNode("span", {
             "class": "v-btn__content",
             "data-no-activator": ""
           }, [!slots.default && hasIcon ? vue.createVNode(VIcon, {
@@ -6116,7 +6116,7 @@
             }
           }, {
             default: () => [slots.default?.() ?? vue.toDisplayString(props.text)]
-          })]), !props.icon && hasAppend && vue.createVNode("span", {
+          })]), !props.icon && hasAppend && vue.createElementVNode("span", {
             "key": "append",
             "class": "v-btn__append"
           }, [!slots.append ? vue.createVNode(VIcon, {
@@ -6130,7 +6130,7 @@
                 icon: props.appendIcon
               }
             }
-          }, slots.append)]), !!props.loading && vue.createVNode("span", {
+          }, slots.append)]), !!props.loading && vue.createElementVNode("span", {
             "key": "loader",
             "class": "v-btn__loader"
           }, [slots.loader?.() ?? vue.createVNode(VProgressCircular, {
@@ -6303,20 +6303,20 @@
         const hasTitle = !!(slots.title || props.title);
         const hasClose = !!(slots.close || props.closable);
         return isActive.value && vue.createVNode(props.tag, {
-          "class": ['v-alert', props.border && {
+          "class": vue.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": vue.normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
           "role": "alert"
         }, {
-          default: () => [genOverlays(false, 'v-alert'), props.border && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-alert'), props.border && vue.createElementVNode("div", {
             "key": "border",
-            "class": ['v-alert__border', textColorClasses.value],
-            "style": textColorStyles.value
-          }, null), hasPrepend && vue.createVNode("div", {
+            "class": vue.normalizeClass(['v-alert__border', textColorClasses.value]),
+            "style": vue.normalizeStyle(textColorStyles.value)
+          }, null), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-alert__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -6334,16 +6334,16 @@
                 size: props.prominent ? 44 : 28
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-alert__content"
           }, [hasTitle && vue.createVNode(VAlertTitle, {
             "key": "title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createVNode("div", {
+          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-alert__append"
-          }, [slots.append()]), hasClose && vue.createVNode("div", {
+          }, [slots.append()]), hasClose && vue.createElementVNode("div", {
             "key": "close",
             "class": "v-alert__close"
           }, [!slots.close ? vue.createVNode(VBtn, vue.mergeProps({
@@ -6416,11 +6416,11 @@
         sizeStyles
       } = useSize(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-avatar', {
+        "class": vue.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": vue.normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
       }, {
         default: () => [!slots.default ? props.image ? vue.createVNode(VImg, {
           "key": "image",
@@ -6462,11 +6462,11 @@
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode("label", {
-        "class": ['v-label', {
+      useRender(() => vue.createElementVNode("label", {
+        "class": vue.normalizeClass(['v-label', {
           'v-label--clickable': !!props.onClick
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "onClick": props.onClick
       }, [props.text, slots.default?.()]));
       return {};
@@ -6561,11 +6561,11 @@
           valueComparator: vue.toRef(() => props.valueComparator)
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-selection-control-group', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-selection-control-group', {
           'v-selection-control-group--inline': props.inline
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "role": props.type === 'radio' ? 'radiogroup' : undefined
       }, [slots.default?.()]));
       return {};
@@ -6641,7 +6641,7 @@
   const VSelectionControl = genericComponent()({
     name: 'VSelectionControl',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     inheritAttrs: false,
     props: makeVSelectionControlProps(),
@@ -6712,7 +6712,7 @@
           }
         }) : props.label;
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        const inputNode = vue.createVNode("input", vue.mergeProps({
+        const inputNode = vue.createElementVNode("input", vue.mergeProps({
           "ref": input,
           "checked": model.value,
           "disabled": !!props.disabled,
@@ -6727,7 +6727,7 @@
           "name": props.name,
           "aria-checked": props.type === 'checkbox' ? model.value : undefined
         }, inputAttrs), null);
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-selection-control', {
             'v-selection-control--dirty': model.value,
             'v-selection-control--disabled': props.disabled,
@@ -6738,13 +6738,13 @@
           }, densityClasses.value, props.class]
         }, rootAttrs, {
           "style": props.style
-        }), [vue.createVNode("div", {
-          "class": ['v-selection-control__wrapper', textColorClasses.value],
-          "style": textColorStyles.value
+        }), [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-selection-control__wrapper', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
         }, [slots.default?.({
           backgroundColorClasses,
           backgroundColorStyles
-        }), vue.withDirectives(vue.createVNode("div", {
+        }), vue.withDirectives(vue.createElementVNode("div", {
           "class": ['v-selection-control__input']
         }, [slots.input?.({
           model,
@@ -6759,10 +6759,10 @@
             onBlur,
             id: id.value
           }
-        }) ?? vue.createVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
+        }) ?? vue.createElementVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
           "key": "icon",
           "icon": icon.value
-        }, null), inputNode])]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
+        }, null), inputNode])]), [[Ripple, props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
           "for": id.value,
           "onClick": onClickLabel
         }, {
@@ -6903,10 +6903,10 @@
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
-        "class": ['v-messages', textColorClasses.value, props.class],
-        "style": [textColorStyles.value, props.style]
+        "class": vue.normalizeClass(['v-messages', textColorClasses.value, props.class]),
+        "style": vue.normalizeStyle([textColorStyles.value, props.style])
       }, {
-        default: () => [props.active && messages.value.map((message, i) => vue.createVNode("div", {
+        default: () => [props.active && messages.value.map((message, i) => vue.createElementVNode("div", {
           "class": "v-messages__message",
           "key": `${i}-${messages.value}`
         }, [slots.message ? slots.message({
@@ -7372,31 +7372,31 @@
         const hasAppend = !!(slots.append || props.appendIcon);
         const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
-        return vue.createVNode("div", {
-          "class": ['v-input', `v-input--${props.direction}`, {
+        return vue.createElementVNode("div", {
+          "class": vue.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 && vue.createVNode("div", {
+          }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class]),
+          "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+        }, [hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-input__prepend"
         }, [slots.prepend?.(slotProps.value), props.prependIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prepend",
           "color": iconColor.value
-        }, null)]), slots.default && vue.createVNode("div", {
+        }, null)]), slots.default && vue.createElementVNode("div", {
           "class": "v-input__control"
-        }, [slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
+        }, [slots.default?.(slotProps.value)]), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-input__append"
         }, [props.appendIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "append",
           "color": iconColor.value
-        }, null), slots.append?.(slotProps.value)]), hasDetails && vue.createVNode("div", {
+        }, null), slots.append?.(slotProps.value)]), hasDetails && vue.createElementVNode("div", {
           "id": messagesId.value,
           "class": "v-input__details",
           "role": "alert",
@@ -8145,42 +8145,42 @@
         return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-slide-group', {
+        "class": vue.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": vue.normalizeStyle(props.style),
         "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
         "onFocus": onFocus
       }, {
-        default: () => [hasAffixes.value && vue.createVNode("div", {
+        default: () => [hasAffixes.value && vue.createElementVNode("div", {
           "key": "prev",
-          "class": ['v-slide-group__prev', {
+          "class": vue.normalizeClass(['v-slide-group__prev', {
             'v-slide-group__prev--disabled': !hasPrev.value
-          }],
+          }]),
           "onMousedown": onFocusAffixes,
           "onClick": () => hasPrev.value && scrollTo('prev')
         }, [slots.prev?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
             "icon": isRtl.value ? props.nextIcon : props.prevIcon
           }, null)]
-        })]), vue.createVNode("div", {
+        })]), vue.createElementVNode("div", {
           "key": "container",
           "ref": containerRef,
           "class": "v-slide-group__container",
           "onScroll": onScroll
-        }, [vue.createVNode("div", {
+        }, [vue.createElementVNode("div", {
           "ref": contentRef,
           "class": "v-slide-group__content",
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
           "onKeydown": onKeydown
-        }, [slots.default?.(slotProps.value)])]), hasAffixes.value && vue.createVNode("div", {
+        }, [slots.default?.(slotProps.value)])]), hasAffixes.value && vue.createElementVNode("div", {
           "key": "next",
-          "class": ['v-slide-group__next', {
+          "class": vue.normalizeClass(['v-slide-group__next', {
             'v-slide-group__next--disabled': !hasNext.value
-          }],
+          }]),
           "onMousedown": onFocusAffixes,
           "onClick": () => hasNext.value && scrollTo('next')
         }, [slots.next?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
@@ -8335,7 +8335,7 @@
   const VChip = genericComponent()({
     name: 'VChip',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVChipProps(),
     emits: {
@@ -8435,7 +8435,7 @@
           default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VExpandXTransition, {
             "key": "filter"
           }, {
-            default: () => [vue.withDirectives(vue.createVNode("div", {
+            default: () => [vue.withDirectives(vue.createElementVNode("div", {
               "class": "v-chip__filter"
             }, [!slots.filter ? vue.createVNode(VIcon, {
               "key": "filter-icon",
@@ -8449,10 +8449,10 @@
                 }
               }
             }, slots.filter)]), [[vue.vShow, group.isSelected.value]])]
-          }), hasPrepend && vue.createVNode("div", {
+          }), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-chip__prepend"
-          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependIcon && vue.createVNode(VIcon, {
+          }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependIcon && vue.createVNode(VIcon, {
             "key": "prepend-icon",
             "icon": props.prependIcon,
             "start": true
@@ -8473,7 +8473,7 @@
                 start: true
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-chip__content",
             "data-no-activator": ""
           }, [slots.default?.({
@@ -8483,10 +8483,10 @@
             toggle: group?.toggle,
             value: group?.value.value,
             disabled: props.disabled
-          }) ?? vue.toDisplayString(props.text)]), hasAppend && vue.createVNode("div", {
+          }) ?? vue.toDisplayString(props.text)]), hasAppend && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-chip__append"
-          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+          }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
             "key": "append-icon",
             "end": true,
             "icon": props.appendIcon
@@ -8507,7 +8507,7 @@
                 icon: props.appendIcon
               }
             }
-          }, slots.append)]), hasClose && vue.createVNode("button", vue.mergeProps({
+          }, slots.append)]), hasClose && vue.createElementVNode("button", vue.mergeProps({
             "key": "close",
             "class": "v-chip__close",
             "type": "button",
@@ -8525,7 +8525,7 @@
               }
             }
           }, slots.close)])]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
+        }), [[Ripple, isClickable.value && props.ripple, null]]);
       };
     }
   });
@@ -9298,13 +9298,13 @@
         }
       }));
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-group', {
+        "class": vue.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": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.activator && vue.createVNode(VDefaultsProvider, {
           "defaults": activatorDefaults.value
@@ -9321,7 +9321,7 @@
           },
           "disabled": !isBooted.value
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-list-group__items",
             "role": "group",
             "aria-labelledby": id.value
@@ -9347,10 +9347,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-item-subtitle', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-list-item-subtitle', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-list-item-subtitle-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -9413,7 +9413,7 @@
   const VListItem = genericComponent()({
     name: 'VListItem',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVListItemProps(),
     emits: {
@@ -9548,10 +9548,10 @@
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, link.linkProps), {
-          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode("div", {
+          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-list-item__prepend"
-          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
+          }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
             "key": "prepend-avatar",
             "density": props.density,
             "image": props.prependAvatar
@@ -9577,9 +9577,9 @@
             }
           }, {
             default: () => [slots.prepend?.(slotProps.value)]
-          }), vue.createVNode("div", {
+          }), vue.createElementVNode("div", {
             "class": "v-list-item__spacer"
-          }, null)]), vue.createVNode("div", {
+          }, null)]), vue.createElementVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
@@ -9594,10 +9594,10 @@
             default: () => [slots.subtitle?.({
               subtitle: props.subtitle
             }) ?? vue.toDisplayString(props.subtitle)]
-          }), slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
+          }), slots.default?.(slotProps.value)]), hasAppend && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-list-item__append"
-          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+          }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
             "key": "append-icon",
             "density": props.density,
             "icon": props.appendIcon
@@ -9623,10 +9623,10 @@
             }
           }, {
             default: () => [slots.append?.(slotProps.value)]
-          }), vue.createVNode("div", {
+          }), vue.createElementVNode("div", {
             "class": "v-list-item__spacer"
           }, null)])]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
+        }), [[Ripple, isClickable.value && props.ripple]]);
       });
       return {
         activate,
@@ -9664,15 +9664,15 @@
       useRender(() => {
         const hasText = !!(slots.default || props.title);
         return vue.createVNode(props.tag, {
-          "class": ['v-list-subheader', {
+          "class": vue.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": vue.normalizeStyle([{
             textColorStyles
-          }, props.style]
+          }, props.style])
         }, {
-          default: () => [hasText && vue.createVNode("div", {
+          default: () => [hasText && vue.createElementVNode("div", {
             "class": "v-list-subheader__text"
           }, [slots.default?.() ?? props.title])]
         });
@@ -9717,25 +9717,25 @@
         return styles;
       });
       useRender(() => {
-        const divider = vue.createVNode("hr", {
-          "class": [{
+        const divider = vue.createElementVNode("hr", {
+          "class": vue.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": vue.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 vue.createVNode("div", {
-          "class": ['v-divider__wrapper', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-divider__wrapper', {
             'v-divider__wrapper--vertical': props.vertical,
             'v-divider__wrapper--inset': props.inset
-          }]
-        }, [divider, vue.createVNode("div", {
+          }])
+        }, [divider, vue.createElementVNode("div", {
           "class": "v-divider__content"
         }, [slots.default()]), divider]);
       });
@@ -10154,12 +10154,12 @@
       useRender(() => {
         return vue.createVNode(props.tag, {
           "ref": contentRef,
-          "class": ['v-list', {
+          "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
           "tabindex": props.disabled ? -1 : 0,
           "role": "listbox",
           "aria-activedescendant": undefined,
@@ -10203,11 +10203,11 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-item-action', {
+        "class": vue.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": vue.normalizeStyle(props.style)
       }, slots));
       return {};
     }
@@ -10228,11 +10228,11 @@
       } = _ref;
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-list-item-media', {
+          "class": vue.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": vue.normalizeStyle(props.style)
         }, slots);
       });
       return {};
@@ -11392,7 +11392,7 @@
       "name": "fade-transition",
       "appear": true
     }, {
-      default: () => [props.modelValue && vue.createVNode("div", vue.mergeProps({
+      default: () => [props.modelValue && vue.createElementVNode("div", vue.mergeProps({
         "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
         "style": props.color.backgroundColorStyles.value
       }, rest), null)]
@@ -11433,7 +11433,7 @@
   const VOverlay = genericComponent()({
     name: 'VOverlay',
     directives: {
-      ClickOutside
+      vClickOutside: ClickOutside
     },
     inheritAttrs: false,
     props: {
@@ -11613,7 +11613,7 @@
         _onAfterLeave();
         emit('afterLeave');
       }
-      useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
+      useRender(() => vue.createElementVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         targetRef,
         props: vue.mergeProps({
@@ -11623,7 +11623,7 @@
         "disabled": !teleportTarget.value,
         "to": teleportTarget.value
       }, {
-        default: () => [vue.createVNode("div", vue.mergeProps({
+        default: () => [vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-overlay', {
             'v-overlay--absolute': props.absolute || props.contained,
             'v-overlay--active': isActive.value,
@@ -11647,13 +11647,13 @@
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+          default: () => [vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
             "ref": contentEl,
             "class": ['v-overlay__content', props.contentClass],
             "style": [dimensionStyles.value, contentStyles.value]
           }, contentEvents.value, props.contentProps), [slots.default?.({
             isActive
-          })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
+          })]), [[vue.vShow, isActive.value], [ClickOutside, {
             handler: onClickOutside,
             closeConditional,
             include: () => [activatorEl.value]
@@ -11982,11 +11982,11 @@
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-counter', {
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-counter', {
             'text-error': props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
-          }, props.class],
-          "style": props.style
+          }, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, [slots.default ? slots.default({
           counter: counter.value,
           max: props.max,
@@ -12009,10 +12009,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(VLabel, {
-        "class": ['v-field-label', {
+        "class": vue.normalizeClass(['v-field-label', {
           'v-field-label--floating': props.floating
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "aria-hidden": props.floating || undefined
       }, slots));
       return {};
@@ -12189,7 +12189,7 @@
             for: id.value
           }
         }) : props.label;
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-field', {
             'v-field--active': isActive.value,
             'v-field--appended': hasAppend,
@@ -12209,7 +12209,7 @@
           }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
           "style": [backgroundColorStyles.value, props.style],
           "onClick": onClick
-        }, attrs), [vue.createVNode("div", {
+        }, attrs), [vue.createElementVNode("div", {
           "class": "v-field__overlay"
         }, null), vue.createVNode(LoaderSlot, {
           "name": "v-field",
@@ -12217,23 +12217,23 @@
           "color": props.error ? 'error' : typeof props.loading === 'string' ? props.loading : props.color
         }, {
           default: slots.loader
-        }), hasPrepend && vue.createVNode("div", {
+        }), hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-field__prepend-inner"
         }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prependInner",
           "color": iconColor.value
-        }, null), slots['prepend-inner']?.(slotProps.value)]), vue.createVNode("div", {
+        }, null), slots['prepend-inner']?.(slotProps.value)]), vue.createElementVNode("div", {
           "class": "v-field__field",
           "data-no-activator": ""
         }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && vue.createVNode(VFieldLabel, {
           "key": "floating-label",
           "ref": floatingLabelRef,
-          "class": [textColorClasses.value],
+          "class": vue.normalizeClass([textColorClasses.value]),
           "floating": true,
           "for": id.value,
-          "style": textColorStyles.value
+          "style": vue.normalizeStyle(textColorStyles.value)
         }, {
           default: () => [label()]
         }), hasLabel.value && vue.createVNode(VFieldLabel, {
@@ -12251,14 +12251,14 @@
           },
           focus,
           blur
-        }) ?? vue.createVNode("div", {
+        }) ?? vue.createElementVNode("div", {
           "id": id.value,
           "class": "v-field__input",
           "aria-describedby": messagesId.value
         }, null)]), hasClear && vue.createVNode(VExpandXTransition, {
           "key": "clear"
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-field__clearable",
             "onMousedown": e => {
               e.preventDefault();
@@ -12286,19 +12286,19 @@
               "tabindex": -1
             }, null)]
           })]), [[vue.vShow, props.dirty]])]
-        }), hasAppend && vue.createVNode("div", {
+        }), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-field__append-inner"
         }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "appendInner",
           "color": iconColor.value
-        }, null)]), vue.createVNode("div", {
-          "class": ['v-field__outline', textColorClasses.value],
-          "style": textColorStyles.value
-        }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+        }, null)]), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-field__outline', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
+        }, [isOutlined && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
           "class": "v-field__outline__start"
-        }, null), hasFloatingLabel.value && vue.createVNode("div", {
+        }, null), hasFloatingLabel.value && vue.createElementVNode("div", {
           "class": "v-field__outline__notch"
         }, [vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
@@ -12306,7 +12306,7 @@
           "for": id.value
         }, {
           default: () => [label()]
-        })]), vue.createVNode("div", {
+        })]), vue.createElementVNode("div", {
           "class": "v-field__outline__end"
         }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
@@ -12347,7 +12347,7 @@
   const VTextField = genericComponent()({
     name: 'VTextField',
     directives: {
-      Intersect
+      vIntersect: Intersect
     },
     inheritAttrs: false,
     props: makeVTextFieldProps(),
@@ -12479,7 +12479,7 @@
                     ...slotProps
                   }
                 } = _ref3;
-                const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
+                const inputNode = vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "value": model.value,
                   "onInput": onInput,
@@ -12492,29 +12492,29 @@
                   "type": props.type,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
+                }, slotProps, inputAttrs), null), [[Intersect, {
                   handler: onIntersect
                 }, null, {
                   once: true
                 }]]);
-                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
+                return vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [vue.createVNode("span", {
+                }, [vue.createElementVNode("span", {
                   "class": "v-text-field__prefix__text"
-                }, [props.prefix])]), slots.default ? vue.createVNode("div", {
-                  "class": fieldClass,
+                }, [props.prefix])]), slots.default ? vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(fieldClass),
                   "data-no-activator": ""
                 }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
                   class: fieldClass
-                }), props.suffix && vue.createVNode("span", {
+                }), props.suffix && vue.createElementVNode("span", {
                   "class": "v-text-field__suffix"
-                }, [vue.createVNode("span", {
+                }, [vue.createElementVNode("span", {
                   "class": "v-text-field__suffix__text"
                 }, [props.suffix])])]);
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": props.persistentCounter || isFocused.value,
             "value": counterValue.value,
             "max": max.value,
@@ -12552,9 +12552,9 @@
       vue.watch(() => contentRect.value?.height, height => {
         if (height != null) emit('update:height', height);
       });
-      useRender(() => props.renderless ? vue.createVNode(vue.Fragment, null, [slots.default?.({
+      useRender(() => props.renderless ? vue.createElementVNode(vue.Fragment, null, [slots.default?.({
         itemRef: resizeRef
-      })]) : vue.createVNode("div", vue.mergeProps({
+      })]) : vue.createElementVNode("div", vue.mergeProps({
         "ref": resizeRef,
         "class": ['v-virtual-scroll__item', props.class],
         "style": props.style
@@ -12889,30 +12889,30 @@
             ...slotProps
           })
         }));
-        return props.renderless ? vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+        return props.renderless ? vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__spacer",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingTop: convertToUnit(paddingTop.value)
-          }
-        }, null), children, vue.createVNode("div", {
+          })
+        }, null), children, vue.createElementVNode("div", {
           "class": "v-virtual-scroll__spacer",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingBottom: convertToUnit(paddingBottom.value)
-          }
-        }, null)]) : vue.createVNode("div", {
+          })
+        }, null)]) : vue.createElementVNode("div", {
           "ref": containerRef,
-          "class": ['v-virtual-scroll', props.class],
+          "class": vue.normalizeClass(['v-virtual-scroll', props.class]),
           "onScrollPassive": handleScroll,
           "onScrollend": handleScrollend,
-          "style": [dimensionStyles.value, props.style]
-        }, [vue.createVNode("div", {
+          "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+        }, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__container",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingTop: convertToUnit(paddingTop.value),
             paddingBottom: convertToUnit(paddingBottom.value)
-          }
+          })
         }, [children])]);
       });
       return {
@@ -13283,7 +13283,7 @@
           "title": t(label.value)
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -13341,7 +13341,7 @@
                       let {
                         isSelected
                       } = _ref3;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -13387,7 +13387,7 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "key": item.value,
               "class": "v-select__selection"
             }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
@@ -13407,9 +13407,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-select__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-select__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -13417,7 +13417,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-select__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon
@@ -13568,17 +13568,17 @@
     if (matches == null || !matches.length) return text;
     return matches.map((match, i) => {
       const start = i === 0 ? 0 : matches[i - 1][1];
-      const result = [vue.createVNode("span", {
-        "class": `${name}__unmask`
-      }, [text.slice(start, match[0])]), vue.createVNode("span", {
-        "class": `${name}__mask`
+      const result = [vue.createElementVNode("span", {
+        "class": vue.normalizeClass(`${name}__unmask`)
+      }, [text.slice(start, match[0])]), vue.createElementVNode("span", {
+        "class": vue.normalizeClass(`${name}__mask`)
       }, [text.slice(match[0], match[1])])];
       if (i === matches.length - 1) {
-        result.push(vue.createVNode("span", {
-          "class": `${name}__unmask`
+        result.push(vue.createElementVNode("span", {
+          "class": vue.normalizeClass(`${name}__unmask`)
         }, [text.slice(match[1])]));
       }
-      return vue.createVNode(vue.Fragment, null, [result]);
+      return vue.createElementVNode(vue.Fragment, null, [result]);
     });
   }
 
@@ -13880,7 +13880,7 @@
           "onKeydown": onKeydown
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -13939,7 +13939,7 @@
                       let {
                         isSelected
                       } = _ref4;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -13988,10 +13988,10 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.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": vue.normalizeClass(['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]]),
+              "style": vue.normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
             }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -14009,9 +14009,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-autocomplete__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-autocomplete__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -14019,7 +14019,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-autocomplete__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon,
@@ -14116,12 +14116,12 @@
         }, attrs, {
           "style": props.style
         }), {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-badge__wrapper"
           }, [ctx.slots.default?.(), vue.createVNode(MaybeTransition, {
             "transition": props.transition
           }, {
-            default: () => [vue.withDirectives(vue.createVNode("span", vue.mergeProps({
+            default: () => [vue.withDirectives(vue.createElementVNode("span", vue.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",
@@ -14158,9 +14158,9 @@
           variant: 'text'
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-banner-actions', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-banner-actions', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -14246,15 +14246,15 @@
         const hasPrependMedia = !!(props.avatar || props.icon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         return vue.createVNode(props.tag, {
-          "class": ['v-banner', {
+          "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
           "role": "banner"
         }, {
-          default: () => [hasPrepend && vue.createVNode("div", {
+          default: () => [hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-banner__prepend"
           }, [!slots.prepend ? vue.createVNode(VAvatar, {
@@ -14274,7 +14274,7 @@
                 image: props.avatar
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-banner__content"
           }, [hasText && vue.createVNode(VBannerText, {
             "key": "text"
@@ -14383,16 +14383,16 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-bottom-navigation', {
+          "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, {
             height: convertToUnit(height.value)
-          }, ssrBootStyles.value, props.style]
+          }, ssrBootStyles.value, props.style])
         }, {
-          default: () => [slots.default && vue.createVNode("div", {
+          default: () => [slots.default && vue.createElementVNode("div", {
             "class": "v-bottom-navigation__content"
           }, [slots.default()])]
         });
@@ -14579,10 +14579,10 @@
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode("li", {
+      useRender(() => vue.createElementVNode("li", {
         "aria-hidden": "true",
-        "class": ['v-breadcrumbs-divider', props.class],
-        "style": props.style
+        "class": vue.normalizeClass(['v-breadcrumbs-divider', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots?.default?.() ?? props.divider]));
       return {};
     }
@@ -14617,15 +14617,15 @@
       } = useTextColor(() => isActive.value ? props.activeColor : props.color);
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-breadcrumbs-item', {
+          "class": vue.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": vue.normalizeStyle([textColorStyles.value, props.style]),
           "aria-current": isActive.value ? 'page' : undefined
         }, {
-          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createVNode("a", vue.mergeProps({
+          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createElementVNode("a", vue.mergeProps({
             "class": "v-breadcrumbs-item--link",
             "onClick": link.navigate
           }, link.linkProps), [slots.default?.() ?? props.title])]
@@ -14701,10 +14701,10 @@
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.icon);
         return vue.createVNode(props.tag, {
-          "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
-          "style": [backgroundColorStyles.value, props.style]
+          "class": vue.normalizeClass(['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [hasPrepend && vue.createVNode("li", {
+          default: () => [hasPrepend && vue.createElementVNode("li", {
             "key": "prepend",
             "class": "v-breadcrumbs__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -14725,7 +14725,7 @@
               item,
               raw
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [slots.item?.({
+            return vue.createElementVNode(vue.Fragment, null, [slots.item?.({
               item,
               index
             }) ?? vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
@@ -14764,9 +14764,9 @@
           variant: 'text'
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-card-actions', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-card-actions', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -14785,10 +14785,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-card-subtitle', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-card-subtitle', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-card-subtitle-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -14827,13 +14827,13 @@
         const hasAppend = !!(hasAppendMedia || slots.append);
         const hasTitle = !!(props.title != null || slots.title);
         const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-        return vue.createVNode("div", {
-          "class": ['v-card-item', props.class],
-          "style": props.style
-        }, [hasPrepend && vue.createVNode("div", {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-card-item', props.class]),
+          "style": vue.normalizeStyle(props.style)
+        }, [hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-card-item__prepend"
-        }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
+        }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
           "key": "prepend-avatar",
           "density": props.density,
           "image": props.prependAvatar
@@ -14854,7 +14854,7 @@
               icon: props.prependIcon
             }
           }
-        }, slots.prepend)]), vue.createVNode("div", {
+        }, slots.prepend)]), vue.createElementVNode("div", {
           "class": "v-card-item__content"
         }, [hasTitle && vue.createVNode(VCardTitle, {
           "key": "title"
@@ -14864,10 +14864,10 @@
           "key": "subtitle"
         }, {
           default: () => [slots.subtitle?.() ?? vue.toDisplayString(props.subtitle)]
-        }), slots.default?.()]), hasAppend && vue.createVNode("div", {
+        }), slots.default?.()]), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-card-item__append"
-        }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+        }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
           "key": "append-icon",
           "density": props.density,
           "icon": props.appendIcon
@@ -14907,10 +14907,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-card-text', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-card-text', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-card-text-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -14966,7 +14966,7 @@
   const VCard = genericComponent()({
     name: 'VCard',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVCardProps(),
     setup(props, _ref) {
@@ -15030,7 +15030,7 @@
           "onClick": isClickable && link.navigate,
           "tabindex": props.disabled ? -1 : undefined
         }, link.linkProps), {
-          default: () => [hasImage && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-card__image"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -15073,7 +15073,7 @@
           }), slots.default?.(), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
           }), genOverlays(isClickable, 'v-card')]
-        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple]]);
+        }), [[Ripple, isClickable && props.ripple]]);
       });
       return {};
     }
@@ -15232,7 +15232,7 @@
   const VWindow = genericComponent()({
     name: 'VWindow',
     directives: {
-      Touch
+      vTouch: Touch
     },
     props: makeVWindowProps(),
     emits: {
@@ -15304,7 +15304,7 @@
         };
         arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
           props: prevProps
-        }) : vue.createVNode(VBtn, prevProps, null) : vue.createVNode("div", null, null));
+        }) : vue.createVNode(VBtn, prevProps, null) : vue.createElementVNode("div", null, null));
         const nextProps = {
           icon: isRtl.value ? props.prevIcon : props.nextIcon,
           class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
@@ -15313,7 +15313,7 @@
         };
         arrows.push(canMoveForward.value ? slots.next ? slots.next({
           props: nextProps
-        }) : vue.createVNode(VBtn, nextProps, null) : vue.createVNode("div", null, null));
+        }) : vue.createVNode(VBtn, nextProps, null) : vue.createElementVNode("div", null, null));
         return arrows;
       });
       const touchOptions = vue.computed(() => {
@@ -15339,24 +15339,24 @@
       });
       useRender(() => vue.withDirectives(vue.createVNode(props.tag, {
         "ref": rootRef,
-        "class": ['v-window', {
+        "class": vue.normalizeClass(['v-window', {
           'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-        }, themeClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
-        default: () => [vue.createVNode("div", {
+        default: () => [vue.createElementVNode("div", {
           "class": "v-window__container",
-          "style": {
+          "style": vue.normalizeStyle({
             height: transitionHeight.value
-          }
+          })
         }, [slots.default?.({
           group
-        }), props.showArrows !== false && vue.createVNode("div", {
+        }), props.showArrows !== false && vue.createElementVNode("div", {
           "class": "v-window__controls"
         }, [arrows.value])]), slots.additional?.({
           group
         })]
-      }), [[vue.resolveDirective("touch"), touchOptions.value]]));
+      }), [[Touch, touchOptions.value]]));
       return {
         group
       };
@@ -15441,12 +15441,12 @@
             let {
               group
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [!props.hideDelimiters && vue.createVNode("div", {
+            return vue.createElementVNode(vue.Fragment, null, [!props.hideDelimiters && vue.createElementVNode("div", {
               "class": "v-carousel__controls",
-              "style": {
+              "style": vue.normalizeStyle({
                 left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
                 right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-              }
+              })
             }, [group.items.value.length > 0 && vue.createVNode(VDefaultsProvider, {
               "defaults": {
                 VBtn: {
@@ -15500,7 +15500,7 @@
   const VWindowItem = genericComponent()({
     name: 'VWindowItem',
     directives: {
-      Touch
+      vTouch: Touch
     },
     props: makeVWindowItemProps(),
     emits: {
@@ -15584,9 +15584,9 @@
         "transition": transition.value,
         "disabled": !isBooted.value
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-window-item', groupItem.selectedClass.value, props.class],
-          "style": props.style
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-window-item', groupItem.selectedClass.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
       return {
@@ -15786,21 +15786,21 @@
         immediate: true
       });
       vue.onMounted(() => updateCanvas());
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": resizeRef,
-        "class": ['v-color-picker-canvas', props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-color-picker-canvas', props.class]),
+        "style": vue.normalizeStyle(props.style),
         "onMousedown": handleMouseDown,
         "onTouchstartPassive": handleMouseDown
-      }, [vue.createVNode("canvas", {
+      }, [vue.createElementVNode("canvas", {
         "ref": canvasRef,
         "width": canvasWidth.value,
         "height": canvasHeight.value
-      }, null), props.color && vue.createVNode("div", {
-        "class": ['v-color-picker-canvas__dot', {
+      }, null), props.color && vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-canvas__dot', {
           'v-color-picker-canvas__dot--disabled': props.disabled
-        }],
-        "style": dotStyles.value
+        }]),
+        "style": vue.normalizeStyle(dotStyles.value)
       }, null)]));
       return {};
     }
@@ -16000,9 +16000,9 @@
       label,
       ...rest
     } = _ref;
-    return vue.createVNode("div", {
+    return vue.createElementVNode("div", {
       "class": "v-color-picker-edit__input"
-    }, [vue.createVNode("input", rest, null), vue.createVNode("span", null, [label])]);
+    }, [vue.createElementVNode("input", vue.normalizeProps(vue.guardReactiveProps(rest)), null), vue.createElementVNode("span", null, [label])]);
   };
   const makeVColorPickerEditProps = propsFactory({
     color: Object,
@@ -16059,9 +16059,9 @@
           };
         });
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-edit', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-edit', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [inputs.value?.map(props => vue.createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && vue.createVNode(VBtn, {
         "icon": "$unfold",
         "size": "x-small",
@@ -16404,7 +16404,7 @@
   const VSliderThumb = genericComponent()({
     name: 'VSliderThumb',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVSliderThumbProps(),
     emits: {
@@ -16484,15 +16484,15 @@
       }
       useRender(() => {
         const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%');
-        return vue.createVNode("div", {
-          "class": ['v-slider-thumb', {
+        return vue.createElementVNode("div", {
+          "class": vue.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": vue.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,
@@ -16502,25 +16502,25 @@
           "aria-readonly": !!readonly.value,
           "aria-orientation": direction.value,
           "onKeydown": !readonly.value ? onKeydown : undefined
-        }, [vue.createVNode("div", {
-          "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
-          "style": {
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
+          "style": vue.normalizeStyle({
             ...textColorStyles.value
-          }
-        }, null), vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-slider-thumb__ripple', textColorClasses.value],
-          "style": textColorStyles.value
-        }, null), [[vue.resolveDirective("ripple"), props.ripple, null, {
+          })
+        }, null), vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
+        }, null), [[Ripple, props.ripple, null, {
           circle: true,
           center: true
         }]]), vue.createVNode(VScaleTransition, {
           "origin": "bottom center"
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-slider-thumb__label-container"
-          }, [vue.createVNode("div", {
+          }, [vue.createElementVNode("div", {
             "class": ['v-slider-thumb__label']
-          }, [vue.createVNode("div", null, [slots['thumb-label']?.({
+          }, [vue.createElementVNode("div", null, [slots['thumb-label']?.({
             modelValue: props.modelValue
           }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
         })]);
@@ -16597,17 +16597,17 @@
         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 vue.createVNode("div", {
+          return vue.createElementVNode("div", {
             "key": tick.value,
-            "class": ['v-slider-track__tick', {
+            "class": vue.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": vue.normalizeStyle({
               [startDir.value]: directionValue
-            }
-          }, [(tick.label || slots['tick-label']) && vue.createVNode("div", {
+            })
+          }, [(tick.label || slots['tick-label']) && vue.createElementVNode("div", {
             "class": "v-slider-track__tick-label"
           }, [slots['tick-label']?.({
             tick,
@@ -16616,30 +16616,30 @@
         });
       });
       useRender(() => {
-        return vue.createVNode("div", {
-          "class": ['v-slider-track', roundedClasses.value, props.class],
-          "style": [{
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track', roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([{
             '--v-slider-track-size': convertToUnit(trackSize.value),
             '--v-slider-tick-size': convertToUnit(tickSize.value)
-          }, props.style]
-        }, [vue.createVNode("div", {
-          "class": ['v-slider-track__background', trackColorClasses.value, {
+          }, props.style])
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__background', trackColorClasses.value, {
             'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
-          }],
-          "style": {
+          }]),
+          "style": vue.normalizeStyle({
             ...backgroundStyles.value,
             ...trackColorStyles.value
-          }
-        }, null), vue.createVNode("div", {
-          "class": ['v-slider-track__fill', trackFillColorClasses.value],
-          "style": {
+          })
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__fill', trackFillColorClasses.value]),
+          "style": vue.normalizeStyle({
             ...trackFillStyles.value,
             ...trackFillColorStyles.value
-          }
-        }, null), showTicks.value && vue.createVNode("div", {
-          "class": ['v-slider-track__ticks', {
+          })
+        }, null), showTicks.value && vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__ticks', {
             'v-slider-track__ticks--always-show': showTicks.value === 'always'
-          }]
+          }])
         }, [computedTicks.value])]);
       });
       return {};
@@ -16733,7 +16733,7 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "id": slotProps.id.value,
             "class": "v-slider__label",
             "text": props.label
@@ -16743,11 +16743,11 @@
               id,
               messagesId
             } = _ref4;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
               "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-            }, [vue.createVNode("input", {
+            }, [vue.createElementVNode("input", {
               "id": id.value,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
@@ -16820,12 +16820,12 @@
           });
         } catch (e) {}
       }
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-preview', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
-        }, props.class],
-        "style": props.style
-      }, [SUPPORTS_EYE_DROPPER && vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
+      }, [SUPPORTS_EYE_DROPPER && vue.createElementVNode("div", {
         "class": "v-color-picker-preview__eye-dropper",
         "key": "eyeDropper"
       }, [vue.createVNode(VBtn, {
@@ -16834,13 +16834,13 @@
         "icon": "$eyeDropper",
         "variant": "plain",
         "onClick": openEyeDropper
-      }, null)]), vue.createVNode("div", {
+      }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__dot"
-      }, [vue.createVNode("div", {
-        "style": {
+      }, [vue.createElementVNode("div", {
+        "style": vue.normalizeStyle({
           background: HSVtoCSS(props.color ?? nullColor)
-        }
-      }, null)]), vue.createVNode("div", {
+        })
+      }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__sliders"
       }, [vue.createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__hue",
@@ -17225,24 +17225,24 @@
       let {
         emit
       } = _ref;
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-swatches', props.class],
-        "style": [{
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-swatches', props.class]),
+        "style": vue.normalizeStyle([{
           maxHeight: convertToUnit(props.maxHeight)
-        }, props.style]
-      }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
+        }, props.style])
+      }, [vue.createElementVNode("div", null, [props.swatches.map(swatch => vue.createElementVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
         const rgba = parseColor(color);
         const hsva = RGBtoHSV(rgba);
         const background = RGBtoCSS(rgba);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
-        }, [vue.createVNode("div", {
-          "style": {
+        }, [vue.createElementVNode("div", {
+          "style": vue.normalizeStyle({
             background
-          }
+          })
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
           "icon": "$success",
@@ -17301,8 +17301,8 @@
         roundedClasses
       } = useRounded(props);
       useRender(() => vue.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": vue.normalizeClass(['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -17341,17 +17341,17 @@
           }, props.class],
           "style": props.style
         }), {
-          default: () => [!props.hideHeader && vue.createVNode("div", {
+          default: () => [!props.hideHeader && vue.createElementVNode("div", {
             "key": "header",
-            "class": [backgroundColorClasses.value],
-            "style": [backgroundColorStyles.value]
+            "class": vue.normalizeClass([backgroundColorClasses.value]),
+            "style": vue.normalizeStyle([backgroundColorStyles.value])
           }, [hasTitle && vue.createVNode(VPickerTitle, {
             "key": "picker-title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), slots.header && vue.createVNode("div", {
+          }), slots.header && vue.createElementVNode("div", {
             "class": "v-picker__header"
-          }, [slots.header()])]), vue.createVNode("div", {
+          }, [slots.header()])]), vue.createElementVNode("div", {
             "class": "v-picker__body"
           }, [slots.default?.()]), slots.actions && vue.createVNode(VDefaultsProvider, {
             "defaults": {
@@ -17361,7 +17361,7 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-picker__actions"
             }, [slots.actions()])]
           })]
@@ -18223,7 +18223,7 @@
           }, props.style]
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
+          default: () => vue.createElementVNode(vue.Fragment, null, [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
             "key": "canvas",
             "color": currentColor.value,
             "onUpdate:color": updateColor,
@@ -18231,7 +18231,7 @@
             "dotSize": props.dotSize,
             "width": props.width,
             "height": props.canvasHeight
-          }, null), (!props.hideSliders || !props.hideInputs) && vue.createVNode("div", {
+          }, null), (!props.hideSliders || !props.hideInputs) && vue.createElementVNode("div", {
             "key": "controls",
             "class": "v-color-picker__controls"
           }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
@@ -18606,7 +18606,7 @@
           "onKeydown": onKeydown
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -18665,7 +18665,7 @@
                       let {
                         isSelected
                       } = _ref5;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -18714,10 +18714,10 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.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": vue.normalizeClass(['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]]),
+              "style": vue.normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
             }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -18735,9 +18735,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-combobox__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-combobox__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -18745,7 +18745,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-combobox__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon,
@@ -18833,7 +18833,7 @@
         emit('cancel');
       }
       function actions(actionsProps) {
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isCancelDisabled.value,
           "variant": "text",
           "color": props.color,
@@ -18849,7 +18849,7 @@
       }
       let actionsUsed = false;
       useRender(() => {
-        return vue.createVNode(vue.Fragment, null, [slots.default?.({
+        return vue.createElementVNode(vue.Fragment, null, [slots.default?.({
           model: internalModel,
           save,
           cancel,
@@ -19732,10 +19732,10 @@
         groupedItems: paginatedItems.value
       }));
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-data-iterator', {
+        "class": vue.normalizeClass(['v-data-iterator', {
           'v-data-iterator--loading': props.loading
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.header?.(slotProps.value), vue.createVNode(MaybeTransition, {
           "transition": props.transition
@@ -19746,7 +19746,7 @@
             "active": true
           }, {
             default: slotProps => slots.loader?.(slotProps)
-          }) : vue.createVNode("div", {
+          }) : vue.createElementVNode("div", {
             "key": "items"
           }, [!paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value)])]
         }), slots.footer?.(slotProps.value)]
@@ -20040,44 +20040,44 @@
       }
       useRender(() => vue.createVNode(props.tag, {
         "ref": resizeRef,
-        "class": ['v-pagination', themeClasses.value, props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-pagination', themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "role": "navigation",
         "aria-label": t(props.ariaLabel),
         "onKeydown": onKeydown,
         "data-test": "v-pagination-root"
       }, {
-        default: () => [vue.createVNode("ul", {
+        default: () => [vue.createElementVNode("ul", {
           "class": "v-pagination__list"
-        }, [props.showFirstLastPage && vue.createVNode("li", {
+        }, [props.showFirstLastPage && vue.createElementVNode("li", {
           "key": "first",
           "class": "v-pagination__first",
           "data-test": "v-pagination-first"
         }, [slots.first ? slots.first(controls.value.first) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.first), null)]), vue.createVNode("li", {
+        }, controls.value.first), null)]), vue.createElementVNode("li", {
           "key": "prev",
           "class": "v-pagination__prev",
           "data-test": "v-pagination-prev"
         }, [slots.prev ? slots.prev(controls.value.prev) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createVNode("li", {
+        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createElementVNode("li", {
           "key": item.key,
-          "class": ['v-pagination__item', {
+          "class": vue.normalizeClass(['v-pagination__item', {
             'v-pagination__item--is-active': item.isActive
-          }],
+          }]),
           "data-test": "v-pagination-item"
         }, [slots.item ? slots.item(item) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
         }, item.props), {
           default: () => [item.page]
-        })])), vue.createVNode("li", {
+        })])), vue.createElementVNode("li", {
           "key": "next",
           "class": "v-pagination__next",
           "data-test": "v-pagination-next"
         }, [slots.next ? slots.next(controls.value.next) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.next), null)]), props.showFirstLastPage && vue.createVNode("li", {
+        }, controls.value.next), null)]), props.showFirstLastPage && vue.createElementVNode("li", {
           "key": "last",
           "class": "v-pagination__last",
           "data-test": "v-pagination-last"
@@ -20186,20 +20186,20 @@
       }));
       useRender(() => {
         const paginationProps = VPagination.filterProps(props);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-data-table-footer"
-        }, [slots.prepend?.(), vue.createVNode("div", {
+        }, [slots.prepend?.(), vue.createElementVNode("div", {
           "class": "v-data-table-footer__items-per-page"
-        }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+        }, [vue.createElementVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
           "items": itemsPerPageOptions.value,
           "modelValue": itemsPerPage.value,
           "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
           "density": "compact",
           "variant": "outlined",
           "hide-details": true
-        }, null)]), vue.createVNode("div", {
+        }, null)]), vue.createElementVNode("div", {
           "class": "v-data-table-footer__info"
-        }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
+        }, [vue.createElementVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createElementVNode("div", {
           "class": "v-data-table-footer__pagination"
         }, [vue.createVNode(VPagination, vue.mergeProps({
           "modelValue": page.value,
@@ -20242,18 +20242,18 @@
     } = _ref;
     const Tag = props.tag ?? 'td';
     return vue.createVNode(Tag, {
-      "class": ['v-data-table__td', {
+      "class": vue.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": vue.normalizeStyle({
         height: convertToUnit(props.height),
         width: convertToUnit(props.width),
         maxWidth: convertToUnit(props.maxWidth),
         left: convertToUnit(props.fixedOffset || null)
-      }
+      })
     }, {
       default: () => [slots.default?.()]
     });
@@ -20663,16 +20663,16 @@
                 "onUpdate:modelValue": selectAll
               }, null));
             }
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-data-table-header__content"
-            }, [vue.createVNode("span", null, [column.title]), column.sortable && !props.disableSort && vue.createVNode(VIcon, {
+            }, [vue.createElementVNode("span", null, [column.title]), column.sortable && !props.disableSort && vue.createVNode(VIcon, {
               "key": "icon",
               "class": "v-data-table-header__sort-icon",
               "icon": getSortIcon(column)
-            }, null), props.multiSort && isSorted(column) && vue.createVNode("div", {
+            }, null), props.multiSort && isSorted(column) && vue.createElementVNode("div", {
               "key": "badge",
-              "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
-              "style": backgroundColorStyles.value
+              "class": vue.normalizeClass(['v-data-table-header__sort-badge', ...backgroundColorClasses.value]),
+              "style": vue.normalizeStyle(backgroundColorStyles.value)
             }, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
           }
         });
@@ -20691,7 +20691,7 @@
           "class": [...headerCellClasses.value],
           "colspan": headers.value.length + 1
         }, props.headerProps), {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-data-table-header__content"
           }, [vue.createVNode(VSelect, {
             "chips": true,
@@ -20715,7 +20715,7 @@
               }
             }, {
               default: () => [props.item.title, vue.createVNode(VIcon, {
-                "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+                "class": vue.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)]
@@ -20724,13 +20724,13 @@
         });
       };
       useRender(() => {
-        return mobile.value ? vue.createVNode("tr", null, [vue.createVNode(VDataTableMobileHeaderCell, null, null)]) : vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
+        return mobile.value ? vue.createElementVNode("tr", null, [vue.createVNode(VDataTableMobileHeaderCell, null, null)]) : vue.createElementVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createElementVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
           "column": column,
           "x": x,
           "y": y
-        }, null))])), props.loading && vue.createVNode("tr", {
+        }, null))])), props.loading && vue.createElementVNode("tr", {
           "class": "v-data-table-progress"
-        }, [vue.createVNode("th", {
+        }, [vue.createElementVNode("th", {
           "colspan": columns.value.length
         }, [vue.createVNode(LoaderSlot, {
           "name": "v-data-table-progress",
@@ -20776,11 +20776,11 @@
       const rows = vue.computed(() => {
         return extractRows([props.item]);
       });
-      return () => vue.createVNode("tr", {
+      return () => vue.createElementVNode("tr", {
         "class": "v-data-table-group-header-row",
-        "style": {
+        "style": vue.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';
@@ -20800,7 +20800,7 @@
               "variant": "text",
               "icon": icon,
               "onClick": onClick
-            }, null), vue.createVNode("span", null, [props.item.value]), vue.createVNode("span", null, [vue.createTextVNode("("), rows.value.length, vue.createTextVNode(")")])]
+            }, null), vue.createElementVNode("span", null, [props.item.value]), vue.createElementVNode("span", null, [vue.createTextVNode("("), rows.value.length, vue.createTextVNode(")")])]
           });
         }
         if (column.key === 'data-table-select') {
@@ -20813,13 +20813,13 @@
               indeterminate,
               'onUpdate:modelValue': selectGroup
             }
-          }) ?? vue.createVNode("td", null, [vue.createVNode(VCheckboxBtn, {
+          }) ?? vue.createElementVNode("td", null, [vue.createVNode(VCheckboxBtn, {
             "modelValue": modelValue,
             "indeterminate": indeterminate,
             "onUpdate:modelValue": selectGroup
           }, null)]);
         }
-        return vue.createVNode("td", null, null);
+        return vue.createElementVNode("td", null, null);
       })]);
     }
   });
@@ -20865,10 +20865,10 @@
       const {
         columns
       } = useHeaders();
-      useRender(() => vue.createVNode("tr", {
-        "class": ['v-data-table__tr', {
+      useRender(() => vue.createElementVNode("tr", {
+        "class": vue.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
@@ -20957,9 +20957,9 @@
             }
             if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
             const displayValue = vue.toDisplayString(slotProps.value);
-            return !mobile.value ? displayValue : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+            return !mobile.value ? displayValue : vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
               "class": "v-data-table__td-title"
-            }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), vue.createVNode("div", {
+            }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), vue.createElementVNode("div", {
               "class": "v-data-table__td-value"
             }, [slots[slotName]?.(slotProps) ?? displayValue])]);
           }
@@ -21022,22 +21022,22 @@
       } = useDisplay(props);
       useRender(() => {
         if (props.loading && (!props.items.length || slots.loading)) {
-          return vue.createVNode("tr", {
+          return vue.createElementVNode("tr", {
             "class": "v-data-table-rows-loading",
             "key": "loading"
-          }, [vue.createVNode("td", {
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length
           }, [slots.loading?.() ?? t(props.loadingText)])]);
         }
         if (!props.loading && !props.items.length && !props.hideNoData) {
-          return vue.createVNode("tr", {
+          return vue.createElementVNode("tr", {
             "class": "v-data-table-rows-no-data",
             "key": "no-data"
-          }, [vue.createVNode("td", {
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length
           }, [slots['no-data']?.() ?? t(props.noDataText)])]);
         }
-        return vue.createVNode(vue.Fragment, null, [props.items.map((item, index) => {
+        return vue.createElementVNode(vue.Fragment, null, [props.items.map((item, index) => {
           if (item.type === 'group') {
             const slotProps = {
               index,
@@ -21082,7 +21082,7 @@
               internalItem: slotProps.internalItem
             }) : props.rowProps)
           };
-          return vue.createVNode(vue.Fragment, {
+          return vue.createElementVNode(vue.Fragment, {
             "key": itemSlotProps.props.key
           }, [slots.item ? slots.item(itemSlotProps) : vue.createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
         })]);
@@ -21116,22 +21116,22 @@
         densityClasses
       } = useDensity(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-table', {
+        "class": vue.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": vue.normalizeStyle(props.style)
       }, {
-        default: () => [slots.top?.(), slots.default ? vue.createVNode("div", {
+        default: () => [slots.top?.(), slots.default ? vue.createElementVNode("div", {
           "class": "v-table__wrapper",
-          "style": {
+          "style": vue.normalizeStyle({
             height: convertToUnit(props.height)
-          }
-        }, [vue.createVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
+          })
+        }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
       }));
       return {};
     }
@@ -21384,12 +21384,12 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createElementVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.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 && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -21560,25 +21560,25 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          wrapper: () => vue.createVNode("div", {
+          wrapper: () => vue.createElementVNode("div", {
             "ref": containerRef,
             "onScrollPassive": handleScroll,
             "onScrollend": handleScrollend,
             "class": "v-table__wrapper",
-            "style": {
+            "style": vue.normalizeStyle({
               height: convertToUnit(props.height)
-            }
-          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            })
+          }, [vue.createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", {
             "key": "tbody"
-          }, [vue.createVNode("tr", {
+          }, [vue.createElementVNode("tr", {
             "ref": markerRef,
-            "style": {
+            "style": vue.normalizeStyle({
               height: convertToUnit(paddingTop.value),
               border: 0
-            }
-          }, [vue.createVNode("td", {
+            })
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
               height: 0,
@@ -21607,12 +21607,12 @@
                 }), slots);
               }
             })
-          }), slots['body.append']?.(slotProps.value), vue.createVNode("tr", {
-            "style": {
+          }), slots['body.append']?.(slotProps.value), vue.createElementVNode("tr", {
+            "style": vue.normalizeStyle({
               height: convertToUnit(paddingBottom.value),
               border: 0
-            }
-          }, [vue.createVNode("td", {
+            })
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
               height: 0,
@@ -21785,17 +21785,17 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createElementVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead",
             "class": "v-data-table__thead",
             "role": "rowgroup"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", {
             "class": "v-data-table__tbody",
             "role": "rowgroup"
           }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.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 && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -21826,10 +21826,10 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-container', {
+        "class": vue.normalizeClass(['v-container', {
           'v-container--fluid': props.fluid
-        }, rtlClasses.value, props.class],
-        "style": [dimensionStyles.value, props.style]
+        }, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -22148,11 +22148,11 @@
       }
       useRender(() => {
         // TODO: add slot support and scope defaults
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": ['v-date-picker-controls'],
-          "style": {
+          "style": vue.normalizeStyle({
             '--v-date-picker-controls-height': convertToUnit(props.controlHeight)
-          }
+          })
         }, [vue.createVNode(VBtn, {
           "class": "v-date-picker-controls__month-btn",
           "data-testid": "month-btn",
@@ -22169,7 +22169,7 @@
           "icon": props.modeIcon,
           "variant": "text",
           "onClick": onClickYear
-        }, null), vue.createVNode(VSpacer, null, null), vue.createVNode("div", {
+        }, null), vue.createVNode(VSpacer, null, null), vue.createElementVNode("div", {
           "class": "v-date-picker-controls__month"
         }, [vue.createVNode(VBtn, {
           "data-testid": "prev-month",
@@ -22225,24 +22225,24 @@
       useRender(() => {
         const hasContent = !!(slots.default || props.header);
         const hasAppend = !!(slots.append || props.appendIcon);
-        return vue.createVNode("div", {
-          "class": ['v-date-picker-header', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-date-picker-header', {
             'v-date-picker-header--clickable': !!props.onClick
-          }, backgroundColorClasses.value],
-          "style": backgroundColorStyles.value,
+          }, backgroundColorClasses.value]),
+          "style": vue.normalizeStyle(backgroundColorStyles.value),
           "onClick": onClick
-        }, [slots.prepend && vue.createVNode("div", {
+        }, [slots.prepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-date-picker-header__prepend"
         }, [slots.prepend()]), hasContent && vue.createVNode(MaybeTransition, {
           "key": "content",
           "name": props.transition
         }, {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "key": props.header,
             "class": "v-date-picker-header__content"
           }, [slots.default?.() ?? props.header])]
-        }), hasAppend && vue.createVNode("div", {
+        }), hasAppend && vue.createElementVNode("div", {
           "class": "v-date-picker-header__append"
         }, [!slots.append ? vue.createVNode(VBtn, {
           "key": "append-btn",
@@ -22528,24 +22528,24 @@
           model.value = [value];
         }
       }
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-month"
-      }, [props.showWeek && vue.createVNode("div", {
+      }, [props.showWeek && vue.createElementVNode("div", {
         "key": "weeks",
         "class": "v-date-picker-month__weeks"
-      }, [!props.hideWeekdays && vue.createVNode("div", {
+      }, [!props.hideWeekdays && vue.createElementVNode("div", {
         "key": "hide-week-days",
         "class": "v-date-picker-month__day"
-      }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createVNode("div", {
+      }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createElementVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
       }, [week]))]), vue.createVNode(MaybeTransition, {
         "name": transition.value
       }, {
-        default: () => [vue.createVNode("div", {
+        default: () => [vue.createElementVNode("div", {
           "ref": daysRef,
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
-        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createVNode("div", {
+        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createElementVNode("div", {
           "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
@@ -22565,14 +22565,14 @@
           if (atMax.value && !item.isSelected) {
             item.isDisabled = true;
           }
-          return vue.createVNode("div", {
-            "class": ['v-date-picker-month__day', {
+          return vue.createElementVNode("div", {
+            "class": vue.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) ?? vue.createVNode(VBtn, slotProps.props, null))]);
         })])]
@@ -22622,12 +22622,12 @@
       vue.watchEffect(() => {
         model.value = model.value ?? adapter.getMonth(adapter.date());
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-months",
-        "style": {
+        "style": vue.normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [vue.createVNode("div", {
+        })
+      }, [vue.createElementVNode("div", {
         "class": "v-date-picker-months__content"
       }, [months.value.map((month, i) => {
         const btnProps = {
@@ -22713,12 +22713,12 @@
           block: 'center'
         });
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-years",
-        "style": {
+        "style": vue.normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [vue.createVNode("div", {
+        })
+      }, [vue.createElementVNode("div", {
         "class": "v-date-picker-years__content"
       }, [years.value.map((year, i) => {
         const btnProps = {
@@ -22955,7 +22955,7 @@
           }, rtlClasses.value, props.class],
           "style": props.style
         }), {
-          title: () => slots.title?.() ?? vue.createVNode("div", {
+          title: () => slots.title?.() ?? vue.createElementVNode("div", {
             "class": "v-date-picker__title"
           }, [t(props.title)]),
           header: () => slots.header ? vue.createVNode(VDefaultsProvider, {
@@ -22974,7 +22974,7 @@
             ...slots,
             default: undefined
           }),
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
             "disabled": disabled.value,
             "text": text.value,
             "onClick:next": onClickNext,
@@ -23083,15 +23083,15 @@
         const hasText = !!(slots.text || props.text);
         const hasMedia = !!(slots.media || props.image || props.icon);
         const size = props.size || (props.image ? 200 : 96);
-        return vue.createVNode("div", {
-          "class": ['v-empty-state', {
+        return vue.createElementVNode("div", {
+          "class": vue.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 && vue.createVNode("div", {
+          }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style])
+        }, [hasMedia && vue.createElementVNode("div", {
           "key": "media",
           "class": "v-empty-state__media"
-        }, [!slots.media ? vue.createVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
+        }, [!slots.media ? vue.createElementVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
           "key": "image",
           "src": props.image,
           "height": size
@@ -23114,22 +23114,22 @@
           }
         }, {
           default: () => [slots.media()]
-        })]), hasHeadline && vue.createVNode("div", {
+        })]), hasHeadline && vue.createElementVNode("div", {
           "key": "headline",
           "class": "v-empty-state__headline"
-        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createVNode("div", {
+        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createElementVNode("div", {
           "key": "title",
           "class": "v-empty-state__title"
-        }, [slots.title?.() ?? props.title]), hasText && vue.createVNode("div", {
+        }, [slots.title?.() ?? props.title]), hasText && vue.createElementVNode("div", {
           "key": "text",
           "class": "v-empty-state__text",
-          "style": {
+          "style": vue.normalizeStyle({
             maxWidth: convertToUnit(props.textWidth)
-          }
-        }, [slots.text?.() ?? props.text]), slots.default && vue.createVNode("div", {
+          })
+        }, [slots.text?.() ?? props.text]), slots.default && vue.createElementVNode("div", {
           "key": "content",
           "class": "v-empty-state__content"
-        }, [slots.default()]), hasActions && vue.createVNode("div", {
+        }, [slots.default()]), hasActions && vue.createElementVNode("div", {
           "key": "actions",
           "class": "v-empty-state__actions"
         }, [vue.createVNode(VDefaultsProvider, {
@@ -23180,10 +23180,10 @@
       useRender(() => vue.createVNode(VExpandTransition, {
         "onAfterLeave": onAfterLeave
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-expansion-panel-text', props.class],
-          "style": props.style
-        }, [slots.default && hasContent.value && vue.createVNode("div", {
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-expansion-panel-text', props.class]),
+          "style": vue.normalizeStyle(props.style)
+        }, [slots.default && hasContent.value && vue.createElementVNode("div", {
           "class": "v-expansion-panel-text__wrapper"
         }, [slots.default?.()])]), [[vue.vShow, expansionPanel.isSelected.value]])]
       }));
@@ -23217,7 +23217,7 @@
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVExpansionPanelTitleProps(),
     setup(props, _ref) {
@@ -23241,19 +23241,19 @@
         readonly: props.readonly
       }));
       const icon = vue.toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
-      useRender(() => vue.withDirectives(vue.createVNode("button", {
-        "class": ['v-expansion-panel-title', {
+      useRender(() => vue.withDirectives(vue.createElementVNode("button", {
+        "class": vue.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": vue.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
-      }, [vue.createVNode("span", {
+      }, [vue.createElementVNode("span", {
         "class": "v-expansion-panel-title__overlay"
       }, null), slots.default?.(slotProps.value), !props.hideActions && vue.createVNode(VDefaultsProvider, {
         "defaults": {
@@ -23262,10 +23262,10 @@
           }
         }
       }, {
-        default: () => [vue.createVNode("span", {
+        default: () => [vue.createElementVNode("span", {
           "class": "v-expansion-panel-title__icon"
         }, [slots.actions?.(slotProps.value) ?? vue.createVNode(VIcon, null, null)])]
-      })]), [[vue.resolveDirective("ripple"), props.ripple]]));
+      })]), [[Ripple, props.ripple]]));
       return {};
     }
   });
@@ -23322,16 +23322,16 @@
         const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
         const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
         return vue.createVNode(props.tag, {
-          "class": ['v-expansion-panel', {
+          "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [vue.createVNode("div", {
-            "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
+          default: () => [vue.createElementVNode("div", {
+            "class": vue.normalizeClass(['v-expansion-panel__shadow', ...elevationClasses.value])
           }, null), vue.createVNode(VDefaultsProvider, {
             "defaults": {
               VExpansionPanelTitle: {
@@ -23411,11 +23411,11 @@
         }
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-expansion-panels', {
+        "class": vue.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": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.({
           prev,
@@ -23495,22 +23495,22 @@
       const vFabRef = vue.ref();
       useRender(() => {
         const btnProps = VBtn.filterProps(props);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "ref": vFabRef,
-          "class": ['v-fab', {
+          "class": vue.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": vue.normalizeStyle([props.app ? {
             ...layoutItemStyles.value
           } : {
             height: props.absolute ? '100%' : 'inherit'
-          }, props.style]
-        }, [vue.createVNode("div", {
+          }, props.style])
+        }, [vue.createElementVNode("div", {
           "class": "v-fab__container"
         }, [vue.createVNode(MaybeTransition, {
           "appear": props.appear,
@@ -23726,7 +23726,7 @@
                     ...slotProps
                   }
                 } = _ref4;
-                return vue.createVNode(vue.Fragment, null, [vue.createVNode("input", vue.mergeProps({
+                return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "type": "file",
                   "readonly": isReadonly.value,
@@ -23746,8 +23746,8 @@
                   "onDragleave": onDragleave,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), vue.createVNode("div", {
-                  "class": fieldClass
+                }, slotProps, inputAttrs), null), vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(fieldClass)
                 }, [!!model.value?.length && !props.hideInput && (slots.selection ? slots.selection({
                   fileNames: fileNames.value,
                   totalBytes: totalBytes.value,
@@ -23760,7 +23760,7 @@
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": !!model.value?.length,
             "value": counterValue.value,
             "disabled": props.disabled
@@ -23836,10 +23836,10 @@
       });
       useRender(() => vue.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": vue.normalizeClass(['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
           height: convertToUnit(props.height)
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -23888,10 +23888,10 @@
         }
         e.preventDefault();
       }
-      useRender(() => vue.createVNode("form", {
+      useRender(() => vue.createElementVNode("form", {
         "ref": formRef,
-        "class": ['v-form', props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-form', props.class]),
+        "style": vue.normalizeStyle(props.style),
         "novalidate": true,
         "onReset": onReset,
         "onSubmit": onSubmit
@@ -23988,11 +23988,11 @@
       vue.watch(isIntersecting, async val => {
         emit('intersect', props.side, val);
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-infinite-scroll-intersect",
-        "style": {
+        "style": vue.normalizeStyle({
           '--v-infinite-margin-size': props.rootMargin
-        },
+        }),
         "ref": intersectionRef
       }, [vue.createTextVNode("\xA0")]));
       return {};
@@ -24104,7 +24104,7 @@
           }
         };
         if (status === 'error') return slots.error?.(slotProps);
-        if (status === 'empty') return slots.empty?.(slotProps) ?? vue.createVNode("div", null, [t(props.emptyText)]);
+        if (status === 'empty') return slots.empty?.(slotProps) ?? vue.createElementVNode("div", null, [t(props.emptyText)]);
         if (props.mode === 'manual') {
           if (status === 'loading') {
             return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
@@ -24135,13 +24135,13 @@
         const intersectMode = props.mode === 'intersect';
         return vue.createVNode(Tag, {
           "ref": rootEl,
-          "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+          "class": vue.normalizeClass(['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
             'v-infinite-scroll--start': hasStartIntersect,
             'v-infinite-scroll--end': hasEndIntersect
-          }],
-          "style": dimensionStyles.value
+          }]),
+          "style": vue.normalizeStyle(dimensionStyles.value)
         }, {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-infinite-scroll__side"
           }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
             "key": "start",
@@ -24153,7 +24153,7 @@
             "side": "end",
             "onIntersect": handleIntersect,
             "rootMargin": margin.value
-          }, null), vue.createVNode("div", {
+          }, null), vue.createElementVNode("div", {
             "class": "v-infinite-scroll__side"
           }, [renderSide('end', endStatus.value)])]
         });
@@ -24193,8 +24193,8 @@
         selected
       } = useGroup(props, VItemGroupSymbol);
       return () => vue.createVNode(props.tag, {
-        "class": ['v-item-group', themeClasses.value, props.class],
-        "style": props.style
+        "class": vue.normalizeClass(['v-item-group', themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.({
           isSelected,
@@ -24262,10 +24262,10 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": layoutRef,
-        "class": [layoutClasses.value, props.class],
-        "style": [dimensionStyles.value, layoutStyles.value, props.style]
+        "class": vue.normalizeClass([layoutClasses.value, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, layoutStyles.value, props.style])
       }, [slots.default?.()]));
       return {
         getLayoutItem,
@@ -24307,9 +24307,9 @@
         active: vue.toRef(() => props.modelValue),
         absolute: vue.toRef(() => props.absolute)
       });
-      return () => vue.createVNode("div", {
-        "class": ['v-layout-item', props.class],
-        "style": [layoutItemStyles.value, props.style]
+      return () => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-layout-item', props.class]),
+        "style": vue.normalizeStyle([layoutItemStyles.value, props.style])
       }, [slots.default?.()]);
     }
   });
@@ -24338,7 +24338,7 @@
   const VLazy = genericComponent()({
     name: 'VLazy',
     directives: {
-      intersect: Intersect
+      vIntersect: Intersect
     },
     props: makeVLazyProps(),
     emits: {
@@ -24357,8 +24357,8 @@
         isActive.value = isIntersecting;
       }
       useRender(() => vue.withDirectives(vue.createVNode(props.tag, {
-        "class": ['v-lazy', props.class],
-        "style": [dimensionStyles.value, props.style]
+        "class": vue.normalizeClass(['v-lazy', props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
       }, {
         default: () => [isActive.value && vue.createVNode(MaybeTransition, {
           "transition": props.transition,
@@ -24366,7 +24366,7 @@
         }, {
           default: () => [slots.default?.()]
         })]
-      }), [[vue.resolveDirective("intersect"), {
+      }), [[Intersect, {
         handler: onIntersect,
         options: props.options
       }, null]]));
@@ -24394,9 +24394,9 @@
       const {
         rtlClasses
       } = provideLocale(props);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-locale-provider', rtlClasses.value, props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-locale-provider', rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -24427,12 +24427,12 @@
         ssrBootStyles
       } = useSsrBoot();
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-main', {
+        "class": vue.normalizeClass(['v-main', {
           'v-main--scrollable': props.scrollable
-        }, props.class],
-        "style": [mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style]
+        }, props.class]),
+        "style": vue.normalizeStyle([mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style])
       }, {
-        default: () => [props.scrollable ? vue.createVNode("div", {
+        default: () => [props.scrollable ? vue.createElementVNode("div", {
           "class": "v-main__scroller"
         }, [slots.default?.()]) : slots.default?.()]
       }));
@@ -24943,7 +24943,7 @@
       });
       useRender(() => {
         const hasImage = slots.image || props.image;
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(props.tag, vue.mergeProps({
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(props.tag, vue.mergeProps({
           "ref": rootEl,
           "onMouseenter": runOpenDelay,
           "onMouseleave": runCloseDelay,
@@ -24959,7 +24959,7 @@
           }, 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 && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-navigation-drawer__img"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -24979,17 +24979,17 @@
                 src: props.image
               }
             }
-          }, slots.image)]), slots.prepend && vue.createVNode("div", {
+          }, slots.image)]), slots.prepend && vue.createElementVNode("div", {
             "class": "v-navigation-drawer__prepend"
-          }, [slots.prepend?.()]), vue.createVNode("div", {
+          }, [slots.prepend?.()]), vue.createElementVNode("div", {
             "class": "v-navigation-drawer__content"
-          }, [slots.default?.()]), slots.append && vue.createVNode("div", {
+          }, [slots.default?.()]), slots.append && vue.createElementVNode("div", {
             "class": "v-navigation-drawer__append"
           }, [slots.append?.()])]
         }), vue.createVNode(vue.Transition, {
           "name": "fade-transition"
         }, {
-          default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createVNode("div", vue.mergeProps({
+          default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createElementVNode("div", vue.mergeProps({
             "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
             "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
             "onClick": () => {
@@ -25360,7 +25360,7 @@
           });
         }
         function controlNode() {
-          return vue.createVNode("div", {
+          return vue.createElementVNode("div", {
             "class": "v-number-input__control"
           }, [decrementControlNode(), vue.createVNode(VDivider, {
             "vertical": controlVariant.value !== 'stacked'
@@ -25371,17 +25371,17 @@
             "vertical": true
           }, null) : undefined;
         }
-        const appendInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+        const appendInnerControl = controlVariant.value === 'split' ? vue.createElementVNode("div", {
           "class": "v-number-input__control"
         }, [vue.createVNode(VDivider, {
           "vertical": true
-        }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]);
+        }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : vue.createElementVNode(vue.Fragment, null, [dividerNode(), controlNode()]);
         const hasAppendInner = slots['append-inner'] || appendInnerControl;
-        const prependInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+        const prependInnerControl = controlVariant.value === 'split' ? vue.createElementVNode("div", {
           "class": "v-number-input__control"
         }, [decrementControlNode(), vue.createVNode(VDivider, {
           "vertical": true
-        }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
+        }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createElementVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef,
@@ -25409,13 +25409,13 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
+            return vue.createElementVNode(vue.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 vue.createVNode(vue.Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
+            return vue.createElementVNode(vue.Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
           } : undefined
         });
       });
@@ -25579,16 +25579,16 @@
       });
       useRender(() => {
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-otp-input', {
             'v-otp-input--divided': !!props.divider
           }, props.class],
           "style": [props.style]
-        }, rootAttrs), [vue.createVNode("div", {
+        }, rootAttrs), [vue.createElementVNode("div", {
           "ref": contentRef,
           "class": "v-otp-input__content",
-          "style": [dimensionStyles.value]
-        }, [fields.value.map((_, i) => vue.createVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createVNode("span", {
+          "style": vue.normalizeStyle([dimensionStyles.value])
+        }, [fields.value.map((_, i) => vue.createElementVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createElementVNode("span", {
           "class": "v-otp-input__divider"
         }, [props.divider]), vue.createVNode(VField, {
           "focused": isFocused.value && props.focusAll || focusIndex.value === i,
@@ -25597,7 +25597,7 @@
           ...slots,
           loader: undefined,
           default: () => {
-            return vue.createVNode("input", {
+            return vue.createElementVNode("input", {
               "ref": val => inputRef.value[i] = val,
               "aria-label": t(props.label, i + 1),
               "autofocus": i === 0 && props.autofocus,
@@ -25617,7 +25617,7 @@
               "onPaste": event => onPaste(i, event)
             }, null);
           }
-        })])), vue.createVNode("input", vue.mergeProps({
+        })])), vue.createElementVNode("input", vue.mergeProps({
           "class": "v-otp-input-input",
           "type": "hidden"
         }, inputAttrs, {
@@ -25722,10 +25722,10 @@
         });
       }
       useRender(() => vue.createVNode(VImg, {
-        "class": ['v-parallax', {
+        "class": vue.normalizeClass(['v-parallax', {
           'v-parallax--active': isIntersecting.value
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "ref": root,
         "cover": true,
         "onLoadstart": onScroll,
@@ -25825,7 +25825,7 @@
               isDisabled,
               isReadonly
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
+            return vue.createElementVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
               "id": id.value
             }, {
               default: () => [label]
@@ -25963,7 +25963,7 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
@@ -25972,18 +25972,18 @@
               id,
               messagesId
             } = _ref4;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
               "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-            }, [vue.createVNode("input", {
+            }, [vue.createElementVNode("input", {
               "id": `${id.value}_start`,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
               "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[0]
-            }, null), vue.createVNode("input", {
+            }, null), vue.createElementVNode("input", {
               "id": `${id.value}_stop`,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
@@ -26182,16 +26182,16 @@
           size: props.size,
           variant: 'plain'
         };
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode("label", {
+        return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("label", {
           "for": id,
-          "class": {
+          "class": vue.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
-        }, [vue.createVNode("span", {
+        }, [vue.createElementVNode("span", {
           "class": "v-rating__hidden"
         }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
           ...itemState.value[index],
@@ -26201,7 +26201,7 @@
           rating: normalizedValue.value
         }) : vue.createVNode(VBtn, vue.mergeProps({
           "aria-label": t(props.itemAriaLabel, value, props.length)
-        }, btnProps), null)]), vue.createVNode("input", {
+        }, btnProps), null)]), vue.createElementVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
           "id": id,
@@ -26215,31 +26215,31 @@
       }
       function createLabel(labelProps) {
         if (slots['item-label']) return slots['item-label'](labelProps);
-        if (labelProps.label) return vue.createVNode("span", null, [labelProps.label]);
-        return vue.createVNode("span", null, [vue.createTextVNode("\xA0")]);
+        if (labelProps.label) return vue.createElementVNode("span", null, [labelProps.label]);
+        return vue.createElementVNode("span", null, [vue.createTextVNode("\xA0")]);
       }
       useRender(() => {
         const hasLabels = !!props.itemLabels?.length || slots['item-label'];
         return vue.createVNode(props.tag, {
-          "class": ['v-rating', {
+          "class": vue.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": vue.normalizeStyle(props.style)
         }, {
           default: () => [vue.createVNode(VRatingItem, {
             "value": 0,
             "index": -1,
             "showStar": false
-          }, null), range.value.map((value, i) => vue.createVNode("div", {
+          }, null), range.value.map((value, i) => vue.createElementVNode("div", {
             "class": "v-rating__wrapper"
           }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
             value,
             index: i,
             label: props.itemLabels?.[i]
-          }) : undefined, vue.createVNode("div", {
+          }) : undefined, vue.createElementVNode("div", {
             "class": "v-rating__item"
-          }, [props.halfIncrements ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
+          }, [props.halfIncrements ? vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
             "value": value - 0.5,
             "index": i * 2
           }, null), vue.createVNode(VRatingItem, {
@@ -26296,8 +26296,8 @@
   };
   function genBone(type) {
     let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    return vue.createVNode("div", {
-      "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+    return vue.createElementVNode("div", {
+      "class": vue.normalizeClass(['v-skeleton-loader__bone', `v-skeleton-loader__${type}`])
     }, [children]);
   }
   function genBones(bone) {
@@ -26383,7 +26383,7 @@
           ariaLabel: t(props.loadingText),
           role: 'alert'
         };
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-skeleton-loader', {
             'v-skeleton-loader--boilerplate': props.boilerplate
           }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
@@ -26589,7 +26589,7 @@
           "onTouchend": onTouchend,
           "onAfterLeave": onAfterLeave
         }, scopeId), {
-          default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createElementVNode("div", {
             "key": "timer",
             "class": "v-snackbar__timer"
           }, [vue.createVNode(VProgressLinear, {
@@ -26597,7 +26597,7 @@
             "color": typeof props.timer === 'string' ? props.timer : 'info',
             "max": props.timeout,
             "model-value": countdown.time.value
-          }, null)]), hasContent && vue.createVNode("div", {
+          }, null)]), hasContent && vue.createElementVNode("div", {
             "key": "content",
             "class": "v-snackbar__content",
             "role": "status",
@@ -26611,7 +26611,7 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-snackbar__actions"
             }, [slots.actions({
               isActive
@@ -26695,7 +26695,7 @@
           modelValue: _,
           ...snackbarProps
         } = VSnackbar.filterProps(props);
-        return vue.createVNode(vue.Fragment, null, [isVisible.value && !!current.value && (slots.default ? vue.createVNode(VDefaultsProvider, {
+        return vue.createElementVNode(vue.Fragment, null, [isVisible.value && !!current.value && (slots.default ? vue.createVNode(VDefaultsProvider, {
           "defaults": {
             VSnackbar: current.value
           }
@@ -26711,7 +26711,7 @@
           text: slots.text ? () => slots.text?.({
             item: current.value
           }) : undefined,
-          actions: hasActions ? () => vue.createVNode(vue.Fragment, null, [!slots.actions ? vue.createVNode(VBtn, vue.mergeProps(btnProps.value, {
+          actions: hasActions ? () => vue.createElementVNode(vue.Fragment, null, [!slots.actions ? vue.createVNode(VBtn, vue.mergeProps(btnProps.value, {
             "onClick": onClickClose
           }), null) : vue.createVNode(VDefaultsProvider, {
             "defaults": {
@@ -26869,57 +26869,57 @@
       const smooth = vue.computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
       useRender(() => {
         const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-        return vue.createVNode("svg", {
+        return vue.createElementVNode("svg", {
           "display": "block"
-        }, [vue.createVNode("defs", null, [vue.createVNode("linearGradient", {
+        }, [vue.createElementVNode("defs", null, [vue.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) => vue.createVNode("stop", {
+        }, [gradientData.map((color, index) => vue.createElementVNode("stop", {
           "offset": index / Math.max(gradientData.length - 1, 1),
           "stop-color": color || 'currentColor'
-        }, null))])]), vue.createVNode("clipPath", {
+        }, null))])]), vue.createElementVNode("clipPath", {
           "id": `${id.value}-clip`
-        }, [bars.value.map(item => vue.createVNode("rect", {
+        }, [bars.value.map(item => vue.createElementVNode("rect", {
           "x": item.x + offsetX.value,
           "y": item.y,
           "width": lineWidth.value,
           "height": item.height,
           "rx": smooth.value,
           "ry": smooth.value
-        }, [props.autoDraw && vue.createVNode(vue.Fragment, null, [vue.createVNode("animate", {
+        }, [props.autoDraw && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("animate", {
           "attributeName": "y",
           "from": item.y + item.height,
           "to": item.y,
           "dur": `${autoDrawDuration.value}ms`,
           "fill": "freeze"
-        }, null), vue.createVNode("animate", {
+        }, null), vue.createElementVNode("animate", {
           "attributeName": "height",
           "from": "0",
           "to": item.height,
           "dur": `${autoDrawDuration.value}ms`,
           "fill": "freeze"
-        }, null)])]))]), hasLabels.value && vue.createVNode("g", {
+        }, null)])]))]), hasLabels.value && vue.createElementVNode("g", {
           "key": "labels",
           "style": {
             textAnchor: 'middle',
             dominantBaseline: 'mathematical',
             fill: 'currentColor'
           }
-        }, [parsedLabels.value.map((item, i) => vue.createVNode("text", {
+        }, [parsedLabels.value.map((item, i) => vue.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]))]), vue.createVNode("g", {
+        }) ?? item.value]))]), vue.createElementVNode("g", {
           "clip-path": `url(#${id.value}-clip)`,
           "fill": `url(#${id.value})`
-        }, [vue.createVNode("rect", {
+        }, [vue.createElementVNode("rect", {
           "x": 0,
           "y": 0,
           "width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
@@ -27098,39 +27098,39 @@
       }
       useRender(() => {
         const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-        return vue.createVNode("svg", {
+        return vue.createElementVNode("svg", {
           "display": "block",
           "stroke-width": parseFloat(props.lineWidth) ?? 4
-        }, [vue.createVNode("defs", null, [vue.createVNode("linearGradient", {
+        }, [vue.createElementVNode("defs", null, [vue.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) => vue.createVNode("stop", {
+        }, [gradientData.map((color, index) => vue.createElementVNode("stop", {
           "offset": index / Math.max(gradientData.length - 1, 1),
           "stop-color": color || 'currentColor'
-        }, null))])]), hasLabels.value && vue.createVNode("g", {
+        }, null))])]), hasLabels.value && vue.createElementVNode("g", {
           "key": "labels",
           "style": {
             textAnchor: 'middle',
             dominantBaseline: 'mathematical',
             fill: 'currentColor'
           }
-        }, [parsedLabels.value.map((item, i) => vue.createVNode("text", {
+        }, [parsedLabels.value.map((item, i) => vue.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]))]), vue.createVNode("path", {
+        }) ?? item.value]))]), vue.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 && vue.createVNode("path", {
+        }, null), props.fill && vue.createElementVNode("path", {
           "d": genPath$1(false),
           "fill": "none",
           "stroke": props.color ?? props.gradient?.[0]
@@ -27298,7 +27298,7 @@
         const nextSlotProps = {
           onClick: onClickNext
         };
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-stepper-actions"
         }, [vue.createVNode(VDefaultsProvider, {
           "defaults": {
@@ -27372,7 +27372,7 @@
   const VStepperItem = genericComponent()({
     name: 'VStepperItem',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVStepperItemProps(),
     emits: {
@@ -27411,12 +27411,12 @@
         function onClick() {
           group?.toggle();
         }
-        return vue.withDirectives(vue.createVNode("button", {
-          "class": ['v-stepper-item', {
+        return vue.withDirectives(vue.createElementVNode("button", {
+          "class": vue.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
@@ -27429,15 +27429,15 @@
           default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? vue.createVNode(VIcon, {
             "icon": icon.value
           }, null) : step.value)]
-        }), vue.createVNode("div", {
+        }), vue.createElementVNode("div", {
           "class": "v-stepper-item__content"
-        }, [hasTitle && vue.createVNode("div", {
+        }, [hasTitle && vue.createElementVNode("div", {
           "key": "title",
           "class": "v-stepper-item__title"
-        }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && vue.createVNode("div", {
+        }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && vue.createElementVNode("div", {
           "key": "subtitle",
           "class": "v-stepper-item__subtitle"
-        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[vue.resolveDirective("ripple"), props.ripple && props.editable, null]]);
+        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[Ripple, props.ripple && props.editable, null]]);
       });
       return {};
     }
@@ -27633,7 +27633,7 @@
                 raw,
                 ...item
               } = _ref2;
-              return vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
+              return vue.createElementVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
                 default: slots[`header-item.${item.value}`] ?? slots.header,
                 icon: slots.icon,
                 title: slots.title,
@@ -27774,14 +27774,14 @@
                   backgroundColorClasses,
                   backgroundColorStyles
                 } = _ref3;
-                return vue.createVNode("div", {
-                  "class": ['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-                  "style": backgroundColorStyles.value,
+                return vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+                  "style": vue.normalizeStyle(backgroundColorStyles.value),
                   "onClick": onTrackClick
-                }, [slots['track-true'] && vue.createVNode("div", {
+                }, [slots['track-true'] && vue.createElementVNode("div", {
                   "key": "prepend",
                   "class": "v-switch__track-true"
-                }, [slots['track-true'](slotProps)]), slots['track-false'] && vue.createVNode("div", {
+                }, [slots['track-true'](slotProps)]), slots['track-false'] && vue.createElementVNode("div", {
                   "key": "append",
                   "class": "v-switch__track-false"
                 }, [slots['track-false'](slotProps)])]);
@@ -27793,11 +27793,11 @@
                   backgroundColorClasses,
                   backgroundColorStyles
                 } = _ref4;
-                return vue.createVNode(vue.Fragment, null, [inputNode, vue.createVNode("div", {
-                  "class": ['v-switch__thumb', {
+                return vue.createElementVNode(vue.Fragment, null, [inputNode, vue.createElementVNode("div", {
+                  "class": vue.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": vue.normalizeStyle(props.inset ? undefined : backgroundColorStyles.value)
                 }, [slots.thumb ? vue.createVNode(VDefaultsProvider, {
                   "defaults": {
                     VIcon: {
@@ -27885,10 +27885,10 @@
         absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-system-bar', {
+        "class": vue.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": vue.normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -27979,10 +27979,10 @@
           "onGroup:selected": updateSlider
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
+          default: () => vue.createElementVNode(vue.Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && vue.createElementVNode("div", {
             "ref": sliderEl,
-            "class": ['v-tab__slider', sliderColorClasses.value],
-            "style": sliderColorStyles.value
+            "class": vue.normalizeClass(['v-tab__slider', sliderColorClasses.value]),
+            "style": vue.normalizeStyle(sliderColorStyles.value)
           }, null)])
         });
       });
@@ -28134,7 +28134,7 @@
       useRender(() => {
         const slideGroupProps = VSlideGroup.filterProps(props);
         const hasWindow = !!(slots.window || props.items.length > 0);
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VSlideGroup, vue.mergeProps(slideGroupProps, {
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSlideGroup, vue.mergeProps(slideGroupProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
@@ -28207,7 +28207,7 @@
   const VTextarea = genericComponent()({
     name: 'VTextarea',
     directives: {
-      Intersect
+      vIntersect: Intersect
     },
     inheritAttrs: false,
     props: makeVTextareaProps(),
@@ -28380,9 +28380,9 @@
                     ...slotProps
                   }
                 } = _ref3;
-                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
+                return vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [props.prefix]), vue.withDirectives(vue.createVNode("textarea", vue.mergeProps({
+                }, [props.prefix]), vue.withDirectives(vue.createElementVNode("textarea", vue.mergeProps({
                   "ref": textareaRef,
                   "class": fieldClass,
                   "value": model.value,
@@ -28395,24 +28395,24 @@
                   "name": props.name,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
+                }, slotProps, inputAttrs), null), [[Intersect, {
                   handler: onIntersect
                 }, null, {
                   once: true
-                }]]), props.autoGrow && vue.withDirectives(vue.createVNode("textarea", {
-                  "class": [fieldClass, 'v-textarea__sizer'],
+                }]]), props.autoGrow && vue.withDirectives(vue.createElementVNode("textarea", {
+                  "class": vue.normalizeClass([fieldClass, 'v-textarea__sizer']),
                   "id": `${slotProps.id}-sizer`,
                   "onUpdate:modelValue": $event => model.value = $event,
                   "ref": sizerRef,
                   "readonly": true,
                   "aria-hidden": "true"
-                }, null), [[vue.vModelText, model.value]]), props.suffix && vue.createVNode("span", {
+                }, null), [[vue.vModelText, model.value]]), props.suffix && vue.createElementVNode("span", {
                   "class": "v-text-field__suffix"
                 }, [props.suffix])]);
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": props.persistentCounter || isFocused.value,
             "value": counterValue.value,
             "max": max.value,
@@ -28443,8 +28443,8 @@
       return () => {
         if (!props.withBackground) return slots.default?.();
         return vue.createVNode(props.tag, {
-          "class": ['v-theme-provider', themeClasses.value, props.class],
-          "style": props.style
+          "class": vue.normalizeClass(['v-theme-provider', themeClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, {
           default: () => [slots.default?.()]
         });
@@ -28489,21 +28489,21 @@
         backgroundColorClasses: lineColorClasses,
         backgroundColorStyles: lineColorStyles
       } = useBackgroundColor(() => props.lineColor);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-timeline-divider', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
-        }, props.class],
-        "style": props.style
-      }, [vue.createVNode("div", {
-        "class": ['v-timeline-divider__before', lineColorClasses.value],
-        "style": lineColorStyles.value
-      }, null), !props.hideDot && vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
+      }, [vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__before', lineColorClasses.value]),
+        "style": vue.normalizeStyle(lineColorStyles.value)
+      }, null), !props.hideDot && vue.createElementVNode("div", {
         "key": "dot",
-        "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
-        "style": sizeStyles.value
-      }, [vue.createVNode("div", {
-        "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
-        "style": backgroundColorStyles.value
+        "class": vue.normalizeClass(['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value]),
+        "style": vue.normalizeStyle(sizeStyles.value)
+      }, [vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value]),
+        "style": vue.normalizeStyle(backgroundColorStyles.value)
       }, [!slots.default ? vue.createVNode(VIcon, {
         "key": "icon",
         "color": props.iconColor,
@@ -28519,9 +28519,9 @@
             size: props.size
           }
         }
-      }, slots.default)])]), vue.createVNode("div", {
-        "class": ['v-timeline-divider__after', lineColorClasses.value],
-        "style": lineColorStyles.value
+      }, slots.default)])]), vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__after', lineColorClasses.value]),
+        "style": vue.normalizeStyle(lineColorStyles.value)
       }, null)]));
       return {};
     }
@@ -28572,19 +28572,19 @@
       }, {
         flush: 'post'
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-timeline-item', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.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": vue.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]
-      }, [vue.createVNode("div", {
+        }, props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-timeline-item__body",
-        "style": dimensionStyles.value
+        "style": vue.normalizeStyle(dimensionStyles.value)
       }, [slots.default?.()]), vue.createVNode(VTimelineDivider, {
         "ref": dotRef,
         "hideDot": props.hideDot,
@@ -28597,7 +28597,7 @@
         "rounded": props.rounded
       }, {
         default: slots.icon
-      }), props.density !== 'compact' && vue.createVNode("div", {
+      }), props.density !== 'compact' && vue.createElementVNode("div", {
         "class": "v-timeline-item__opposite"
       }, [!props.hideOpposite && slots.opposite?.()])]));
       return {};
@@ -28690,12 +28690,12 @@
         }
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+        "class": vue.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": vue.normalizeStyle([{
           '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -28721,9 +28721,9 @@
           variant: vue.toRef(() => props.variant)
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-toolbar-items', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-toolbar-items', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -29320,7 +29320,7 @@
       };
     });
   }
-  const version$1 = "3.8.6-master.2025-05-24";
+  const version$1 = "3.8.6-master.2025-05-26";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -29345,7 +29345,7 @@
       ...options
     });
   };
-  const version = "3.8.6-master.2025-05-24";
+  const version = "3.8.6-master.2025-05-26";
   createVuetify.version = version;
 
   exports.blueprints = index;