vuetify 3.8.6 → 3.8.7

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.8.6
+* Vuetify v3.8.7
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, createElementVNode, normalizeClass, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, normalizeStyle, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -510,6 +510,21 @@ function checkPrintable(e) {
 function isPrimitive(value) {
   return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint';
 }
+function extractNumber(text, decimalDigitsLimit) {
+  const cleanText = text.split('').filter(x => /[\d\-.]/.test(x)).filter((x, i, all) => i === 0 && /[-]/.test(x) ||
+  // sign allowed at the start
+  x === '.' && i === all.indexOf('.') ||
+  // decimal separator allowed only once
+  /\d/.test(x)).join('');
+  if (decimalDigitsLimit === 0) {
+    return cleanText.split('.')[0];
+  }
+  if (decimalDigitsLimit !== null && /\.\d/.test(cleanText)) {
+    const parts = cleanText.split('.');
+    return [parts[0], parts[1].substring(0, decimalDigitsLimit)].join('.');
+  }
+  return cleanText;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -614,6 +629,33 @@ function getTargetBox(target) {
     return target.getBoundingClientRect();
   }
 }
+function getElementBox(el) {
+  if (el === document.documentElement) {
+    if (!visualViewport) {
+      return new Box({
+        x: 0,
+        y: 0,
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      });
+    } else {
+      return new Box({
+        x: visualViewport.scale > 1 ? 0 : visualViewport.offsetLeft,
+        y: visualViewport.scale > 1 ? 0 : visualViewport.offsetTop,
+        width: visualViewport.width * visualViewport.scale,
+        height: visualViewport.height * visualViewport.scale
+      });
+    }
+  } else {
+    const rect = el.getBoundingClientRect();
+    return new Box({
+      x: rect.x,
+      y: rect.y,
+      width: el.clientWidth,
+      height: el.clientHeight
+    });
+  }
+}
 
 // Utilities
 
@@ -1612,18 +1654,18 @@ const VSvgIcon = defineComponent({
       return createVNode(props.tag, mergeProps(attrs, {
         "style": null
       }), {
-        default: () => [createVNode("svg", {
+        default: () => [createElementVNode("svg", {
           "class": "v-icon__svg",
           "xmlns": "http://www.w3.org/2000/svg",
           "viewBox": "0 0 24 24",
           "role": "img",
           "aria-hidden": "true"
-        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createVNode("path", {
+        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createElementVNode("path", {
           "d": path[0],
           "fill-opacity": path[1]
-        }, null) : createVNode("path", {
+        }, null) : createElementVNode("path", {
           "d": path
-        }, null)) : createVNode("path", {
+        }, null)) : createElementVNode("path", {
           "d": props.icon
         }, null)])]
       });
@@ -1647,7 +1689,7 @@ const VClassIcon = defineComponent({
   setup(props) {
     return () => {
       return createVNode(props.tag, {
-        "class": props.icon
+        "class": normalizeClass(props.icon)
       }, null);
     };
   }
@@ -3112,11 +3154,11 @@ const VApp = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": layoutRef,
-      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-      "style": [props.style]
-    }, [createVNode("div", {
+      "class": normalizeClass(['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([props.style])
+    }, [createElementVNode("div", {
       "class": "v-application__wrap"
     }, [slots.default?.()])]));
     return {
@@ -3156,10 +3198,10 @@ const VToolbarTitle = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || slots.text || props.text);
       return createVNode(props.tag, {
-        "class": ['v-toolbar-title', props.class],
-        "style": props.style
+        "class": normalizeClass(['v-toolbar-title', props.class]),
+        "style": normalizeStyle(props.style)
       }, {
-        default: () => [hasText && createVNode("div", {
+        default: () => [hasText && createElementVNode("div", {
           "class": "v-toolbar-title__placeholder"
         }, [slots.text ? slots.text() : props.text, slots.default?.()])]
       });
@@ -3619,16 +3661,16 @@ const VResponsive = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    useRender(() => createVNode("div", {
-      "class": ['v-responsive', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-responsive', {
         'v-responsive--inline': props.inline
-      }, props.class],
-      "style": [dimensionStyles.value, props.style]
-    }, [createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
+    }, [createElementVNode("div", {
       "class": "v-responsive__sizer",
-      "style": aspectStyles.value
-    }, null), slots.additional?.(), slots.default && createVNode("div", {
-      "class": ['v-responsive__content', props.contentClass]
+      "style": normalizeStyle(aspectStyles.value)
+    }, null), slots.additional?.(), slots.default && createElementVNode("div", {
+      "class": normalizeClass(['v-responsive__content', props.contentClass])
     }, [slots.default()])]));
     return {};
   }
@@ -3862,7 +3904,7 @@ const makeVImgProps = propsFactory({
 const VImg = genericComponent()({
   name: 'VImg',
   directives: {
-    intersect: Intersect
+    vIntersect: Intersect
   },
   props: makeVImgProps(),
   emits: {
@@ -3991,11 +4033,11 @@ const VImg = genericComponent()({
     }));
     const __image = () => {
       if (!normalisedSrc.value.src || state.value === 'idle') return null;
-      const img = createVNode("img", {
-        "class": ['v-img__img', containClasses.value],
-        "style": {
+      const img = createElementVNode("img", {
+        "class": normalizeClass(['v-img__img', containClasses.value]),
+        "style": normalizeStyle({
           objectPosition: props.position
-        },
+        }),
         "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.src,
         "srcset": normalisedSrc.value.srcset,
@@ -4012,7 +4054,7 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [withDirectives(sources ? createVNode("picture", {
+        default: () => [withDirectives(sources ? createElementVNode("picture", {
           "class": "v-img__picture"
         }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
       });
@@ -4020,11 +4062,11 @@ const VImg = genericComponent()({
     const __preloadImage = () => createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
-      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
-        "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
-        "style": {
+      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createElementVNode("img", {
+        "class": normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
+        "style": normalizeStyle({
           objectPosition: props.position
-        },
+        }),
         "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.lazySrc,
         "alt": props.alt,
@@ -4038,7 +4080,7 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && createVNode("div", {
+        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && createElementVNode("div", {
           "class": "v-img__placeholder"
         }, [slots.placeholder()])]
       });
@@ -4049,18 +4091,18 @@ const VImg = genericComponent()({
         "transition": props.transition,
         "appear": true
       }, {
-        default: () => [state.value === 'error' && createVNode("div", {
+        default: () => [state.value === 'error' && createElementVNode("div", {
           "class": "v-img__error"
         }, [slots.error()])]
       });
     };
     const __gradient = () => {
       if (!props.gradient) return null;
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-img__gradient",
-        "style": {
+        "style": normalizeStyle({
           backgroundImage: `linear-gradient(${props.gradient})`
-        }
+        })
       }, null);
     };
     const isBooted = shallowRef(false);
@@ -4092,9 +4134,9 @@ const VImg = genericComponent()({
         "aria-label": props.alt,
         "role": props.alt ? 'img' : undefined
       }), {
-        additional: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        additional: () => createElementVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
         default: slots.default
-      }), [[resolveDirective("intersect"), {
+      }), [[Intersect, {
         handler: init,
         options: props.options
       }, null, {
@@ -4237,16 +4279,16 @@ const VToolbar = genericComponent()({
       const extension = slots.extension?.();
       isExtended.value = !!(props.extended || extension);
       return createVNode(props.tag, {
-        "class": ['v-toolbar', {
+        "class": normalizeClass(['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
           'v-toolbar--collapse': props.collapse,
           'v-toolbar--flat': props.flat,
           'v-toolbar--floating': props.floating,
           [`v-toolbar--density-${props.density}`]: true
-        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-toolbar__image"
         }, [!slots.image ? createVNode(VImg, {
@@ -4269,19 +4311,19 @@ const VToolbar = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-toolbar__content",
-            "style": {
+            "style": normalizeStyle({
               height: convertToUnit(contentHeight.value)
-            }
-          }, [slots.prepend && createVNode("div", {
+            })
+          }, [slots.prepend && createElementVNode("div", {
             "class": "v-toolbar__prepend"
           }, [slots.prepend?.()]), hasTitle && createVNode(VToolbarTitle, {
             "key": "title",
             "text": props.title
           }, {
             text: slots.title
-          }), slots.default?.(), slots.append && createVNode("div", {
+          }), slots.default?.(), slots.append && createElementVNode("div", {
             "class": "v-toolbar__append"
           }, [slots.append?.()])])]
         }), createVNode(VDefaultsProvider, {
@@ -4292,11 +4334,11 @@ const VToolbar = genericComponent()({
           }
         }, {
           default: () => [createVNode(VExpandTransition, null, {
-            default: () => [isExtended.value && createVNode("div", {
+            default: () => [isExtended.value && createElementVNode("div", {
               "class": "v-toolbar__extension",
-              "style": {
+              "style": normalizeStyle({
                 height: convertToUnit(extensionHeight.value)
-              }
+              })
             }, [extension])]
           })]
         })]
@@ -4575,12 +4617,12 @@ function useDensity(props) {
 
 const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
 function genOverlays(isClickable, name) {
-  return createVNode(Fragment, null, [isClickable && createVNode("span", {
+  return createElementVNode(Fragment, null, [isClickable && createElementVNode("span", {
     "key": "overlay",
-    "class": `${name}__overlay`
-  }, null), createVNode("span", {
+    "class": normalizeClass(`${name}__overlay`)
+  }, null), createElementVNode("span", {
     "key": "underlay",
-    "class": `${name}__underlay`
+    "class": normalizeClass(`${name}__underlay`)
   }, null)]);
 }
 const makeVariantProps = propsFactory({
@@ -4664,10 +4706,10 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-btn-group', {
+        "class": normalizeClass(['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, slots);
     });
   }
@@ -5024,19 +5066,19 @@ const VIcon = genericComponent()({
       return createVNode(iconData.value.component, {
         "tag": props.tag,
         "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+        "class": normalizeClass(['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
           'v-icon--clickable': hasClick,
           'v-icon--disabled': props.disabled,
           'v-icon--start': props.start,
           'v-icon--end': props.end
-        }, props.class],
-        "style": [{
+        }, props.class]),
+        "style": normalizeStyle([{
           '--v-icon-opacity': props.opacity
         }, !sizeClasses.value ? {
           fontSize: convertToUnit(props.size),
           height: convertToUnit(props.size),
           width: convertToUnit(props.size)
-        } : undefined, textColorStyles.value, props.style],
+        } : undefined, textColorStyles.value, props.style]),
         "role": hasClick ? 'button' : undefined,
         "aria-hidden": !hasClick,
         "tabindex": hasClick ? props.disabled ? -1 : 0 : undefined
@@ -5133,7 +5175,7 @@ const VProgressCircular = genericComponent()({
       resizeRef,
       contentRect
     } = useResizeObserver();
-    const normalizedValue = toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
+    const normalizedValue = toRef(() => clamp(parseFloat(props.modelValue), 0, 100));
     const width = toRef(() => Number(props.width));
     const size = toRef(() => {
       // Get size from element if size prop value is small, large etc
@@ -5148,26 +5190,26 @@ const VProgressCircular = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": root,
-      "class": ['v-progress-circular', {
+      "class": normalizeClass(['v-progress-circular', {
         'v-progress-circular--indeterminate': !!props.indeterminate,
         'v-progress-circular--visible': isIntersecting.value,
         'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
-      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class],
-      "style": [sizeStyles.value, textColorStyles.value, props.style],
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class]),
+      "style": normalizeStyle([sizeStyles.value, textColorStyles.value, props.style]),
       "role": "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
       "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
     }, {
-      default: () => [createVNode("svg", {
-        "style": {
+      default: () => [createElementVNode("svg", {
+        "style": normalizeStyle({
           transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
-        },
+        }),
         "xmlns": "http://www.w3.org/2000/svg",
         "viewBox": `0 0 ${diameter.value} ${diameter.value}`
-      }, [createVNode("circle", {
-        "class": ['v-progress-circular__underlay', underlayColorClasses.value],
-        "style": underlayColorStyles.value,
+      }, [createElementVNode("circle", {
+        "class": normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
+        "style": normalizeStyle(underlayColorStyles.value),
         "fill": "transparent",
         "cx": "50%",
         "cy": "50%",
@@ -5175,7 +5217,7 @@ const VProgressCircular = genericComponent()({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": 0
-      }, null), createVNode("circle", {
+      }, null), createElementVNode("circle", {
         "class": "v-progress-circular__overlay",
         "fill": "transparent",
         "cx": "50%",
@@ -5184,7 +5226,7 @@ const VProgressCircular = genericComponent()({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": strokeDashOffset.value
-      }, null)]), slots.default && createVNode("div", {
+      }, null)]), slots.default && createElementVNode("div", {
         "class": "v-progress-circular__content"
       }, [slots.default({
         value: normalizedValue.value
@@ -5358,21 +5400,21 @@ const VProgressLinear = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": intersectionRef,
-      "class": ['v-progress-linear', {
+      "class": normalizeClass(['v-progress-linear', {
         'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
         'v-progress-linear--reverse': isReversed.value,
         'v-progress-linear--rounded': props.rounded,
         'v-progress-linear--rounded-bar': props.roundedBar,
         'v-progress-linear--striped': props.striped
-      }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-      "style": [{
+      }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([{
         bottom: props.location === 'bottom' ? 0 : undefined,
         top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...(props.absolute ? locationStyles.value : {})
-      }, props.style],
+      }, props.style]),
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -5380,10 +5422,10 @@ const VProgressLinear = genericComponent()({
       "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
       "onClick": props.clickable && handleClick
     }, {
-      default: () => [props.stream && createVNode("div", {
+      default: () => [props.stream && createElementVNode("div", {
         "key": "stream",
-        "class": ['v-progress-linear__stream', textColorClasses.value],
-        "style": {
+        "class": normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
+        "style": normalizeStyle({
           ...textColorStyles.value,
           [isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
           borderTop: `${convertToUnit(height.value / 2)} dotted`,
@@ -5391,35 +5433,35 @@ const VProgressLinear = genericComponent()({
           top: `calc(50% - ${convertToUnit(height.value / 4)})`,
           width: convertToUnit(100 - normalizedBuffer.value, '%'),
           '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
-        }
-      }, null), createVNode("div", {
-        "class": ['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-        "style": [backgroundColorStyles.value, {
+        })
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+        "style": normalizeStyle([backgroundColorStyles.value, {
           opacity: parseFloat(props.bgOpacity),
           width: props.stream ? 0 : undefined
-        }]
-      }, null), createVNode("div", {
-        "class": ['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined],
-        "style": [bufferColorStyles.value, {
+        }])
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+        "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
           width: convertToUnit(normalizedBuffer.value, '%')
-        }]
+        }])
       }, null), createVNode(Transition, {
         "name": transition.value
       }, {
-        default: () => [!props.indeterminate ? createVNode("div", {
-          "class": ['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined],
-          "style": [barColorStyles.value, {
+        default: () => [!props.indeterminate ? createElementVNode("div", {
+          "class": normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "style": normalizeStyle([barColorStyles.value, {
             width: convertToUnit(normalizedValue.value, '%')
-          }]
-        }, null) : createVNode("div", {
+          }])
+        }, null) : createElementVNode("div", {
           "class": "v-progress-linear__indeterminate"
-        }, [['long', 'short'].map(bar => createVNode("div", {
+        }, [['long', 'short'].map(bar => createElementVNode("div", {
           "key": bar,
-          "class": ['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined],
-          "style": barColorStyles.value
+          "class": normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "style": normalizeStyle(barColorStyles.value)
         }, null))])]
-      }), slots.default && createVNode("div", {
+      }), slots.default && createElementVNode("div", {
         "class": "v-progress-linear__content"
       }, [slots.default({
         value: normalizedValue.value,
@@ -5449,8 +5491,8 @@ function LoaderSlot(props, _ref) {
   let {
     slots
   } = _ref;
-  return createVNode("div", {
-    "class": `${props.name}__loader`
+  return createElementVNode("div", {
+    "class": normalizeClass(`${props.name}__loader`)
   }, [slots.default?.({
     color: props.color,
     isActive: props.active
@@ -6040,7 +6082,7 @@ const VBtn = genericComponent()({
         "onClick": onClick,
         "value": valueAttr.value
       }, link.linkProps), {
-        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode("span", {
+        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createElementVNode("span", {
           "key": "prepend",
           "class": "v-btn__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -6054,7 +6096,7 @@ const VBtn = genericComponent()({
               icon: props.prependIcon
             }
           }
-        }, slots.prepend)]), createVNode("span", {
+        }, slots.prepend)]), createElementVNode("span", {
           "class": "v-btn__content",
           "data-no-activator": ""
         }, [!slots.default && hasIcon ? createVNode(VIcon, {
@@ -6070,7 +6112,7 @@ const VBtn = genericComponent()({
           }
         }, {
           default: () => [slots.default?.() ?? toDisplayString(props.text)]
-        })]), !props.icon && hasAppend && createVNode("span", {
+        })]), !props.icon && hasAppend && createElementVNode("span", {
           "key": "append",
           "class": "v-btn__append"
         }, [!slots.append ? createVNode(VIcon, {
@@ -6084,7 +6126,7 @@ const VBtn = genericComponent()({
               icon: props.appendIcon
             }
           }
-        }, slots.append)]), !!props.loading && createVNode("span", {
+        }, slots.append)]), !!props.loading && createElementVNode("span", {
           "key": "loader",
           "class": "v-btn__loader"
         }, [slots.loader?.() ?? createVNode(VProgressCircular, {
@@ -6257,20 +6299,20 @@ const VAlert = genericComponent()({
       const hasTitle = !!(slots.title || props.title);
       const hasClose = !!(slots.close || props.closable);
       return isActive.value && createVNode(props.tag, {
-        "class": ['v-alert', props.border && {
+        "class": normalizeClass(['v-alert', props.border && {
           'v-alert--border': !!props.border,
           [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
         }, {
           'v-alert--prominent': props.prominent
-        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class]),
+        "style": normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
         "role": "alert"
       }, {
-        default: () => [genOverlays(false, 'v-alert'), props.border && createVNode("div", {
+        default: () => [genOverlays(false, 'v-alert'), props.border && createElementVNode("div", {
           "key": "border",
-          "class": ['v-alert__border', textColorClasses.value],
-          "style": textColorStyles.value
-        }, null), hasPrepend && createVNode("div", {
+          "class": normalizeClass(['v-alert__border', textColorClasses.value]),
+          "style": normalizeStyle(textColorStyles.value)
+        }, null), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-alert__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -6288,16 +6330,16 @@ const VAlert = genericComponent()({
               size: props.prominent ? 44 : 28
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-alert__content"
         }, [hasTitle && createVNode(VAlertTitle, {
           "key": "title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createVNode("div", {
+        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createElementVNode("div", {
           "key": "append",
           "class": "v-alert__append"
-        }, [slots.append()]), hasClose && createVNode("div", {
+        }, [slots.append()]), hasClose && createElementVNode("div", {
           "key": "close",
           "class": "v-alert__close"
         }, [!slots.close ? createVNode(VBtn, mergeProps({
@@ -6370,11 +6412,11 @@ const VAvatar = genericComponent()({
       sizeStyles
     } = useSize(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-avatar', {
+      "class": normalizeClass(['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
-      "style": [colorStyles.value, sizeStyles.value, props.style]
+      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class]),
+      "style": normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
     }, {
       default: () => [!slots.default ? props.image ? createVNode(VImg, {
         "key": "image",
@@ -6416,11 +6458,11 @@ const VLabel = genericComponent()({
     let {
       slots
     } = _ref;
-    useRender(() => createVNode("label", {
-      "class": ['v-label', {
+    useRender(() => createElementVNode("label", {
+      "class": normalizeClass(['v-label', {
         'v-label--clickable': !!props.onClick
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "onClick": props.onClick
     }, [props.text, slots.default?.()]));
     return {};
@@ -6515,11 +6557,11 @@ const VSelectionControlGroup = genericComponent()({
         valueComparator: toRef(() => props.valueComparator)
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-selection-control-group', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-selection-control-group', {
         'v-selection-control-group--inline': props.inline
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "role": props.type === 'radio' ? 'radiogroup' : undefined
     }, [slots.default?.()]));
     return {};
@@ -6595,7 +6637,7 @@ function useSelectionControl(props) {
 const VSelectionControl = genericComponent()({
   name: 'VSelectionControl',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   inheritAttrs: false,
   props: makeVSelectionControlProps(),
@@ -6666,7 +6708,7 @@ const VSelectionControl = genericComponent()({
         }
       }) : props.label;
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      const inputNode = createVNode("input", mergeProps({
+      const inputNode = createElementVNode("input", mergeProps({
         "ref": input,
         "checked": model.value,
         "disabled": !!props.disabled,
@@ -6681,7 +6723,7 @@ const VSelectionControl = genericComponent()({
         "name": props.name,
         "aria-checked": props.type === 'checkbox' ? model.value : undefined
       }, inputAttrs), null);
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-selection-control', {
           'v-selection-control--dirty': model.value,
           'v-selection-control--disabled': props.disabled,
@@ -6692,13 +6734,13 @@ const VSelectionControl = genericComponent()({
         }, densityClasses.value, props.class]
       }, rootAttrs, {
         "style": props.style
-      }), [createVNode("div", {
-        "class": ['v-selection-control__wrapper', textColorClasses.value],
-        "style": textColorStyles.value
+      }), [createElementVNode("div", {
+        "class": normalizeClass(['v-selection-control__wrapper', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
       }, [slots.default?.({
         backgroundColorClasses,
         backgroundColorStyles
-      }), withDirectives(createVNode("div", {
+      }), withDirectives(createElementVNode("div", {
         "class": ['v-selection-control__input']
       }, [slots.input?.({
         model,
@@ -6713,10 +6755,10 @@ const VSelectionControl = genericComponent()({
           onBlur,
           id: id.value
         }
-      }) ?? createVNode(Fragment, null, [icon.value && createVNode(VIcon, {
+      }) ?? createElementVNode(Fragment, null, [icon.value && createVNode(VIcon, {
         "key": "icon",
         "icon": icon.value
-      }, null), inputNode])]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
+      }, null), inputNode])]), [[Ripple, props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
         "for": id.value,
         "onClick": onClickLabel
       }, {
@@ -6793,7 +6835,8 @@ function useInputIcon(props) {
   function InputIcon(_ref) {
     let {
       name,
-      color
+      color,
+      ...attrs
     } = _ref;
     const localeKey = {
       prepend: 'prependAction',
@@ -6810,13 +6853,13 @@ function useInputIcon(props) {
       callEvent(listener, new PointerEvent('click', e));
     }
     const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
-    return createVNode(VIcon, {
+    return createVNode(VIcon, mergeProps({
       "icon": props[`${name}Icon`],
       "aria-label": label,
       "onClick": listener,
       "onKeydown": onKeydown,
       "color": color
-    }, null);
+    }, attrs), null);
   }
   return {
     InputIcon
@@ -6856,10 +6899,10 @@ const VMessages = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
-      "class": ['v-messages', textColorClasses.value, props.class],
-      "style": [textColorStyles.value, props.style]
+      "class": normalizeClass(['v-messages', textColorClasses.value, props.class]),
+      "style": normalizeStyle([textColorStyles.value, props.style])
     }, {
-      default: () => [props.active && messages.value.map((message, i) => createVNode("div", {
+      default: () => [props.active && messages.value.map((message, i) => createElementVNode("div", {
         "class": "v-messages__message",
         "key": `${i}-${messages.value}`
       }, [slots.message ? slots.message({
@@ -7325,31 +7368,31 @@ const VInput = genericComponent()({
       const hasAppend = !!(slots.append || props.appendIcon);
       const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
-      return createVNode("div", {
-        "class": ['v-input', `v-input--${props.direction}`, {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--focused': props.focused,
           'v-input--glow': props.glow,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
-        "style": [dimensionStyles.value, props.style]
-      }, [hasPrepend && createVNode("div", {
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class]),
+        "style": normalizeStyle([dimensionStyles.value, props.style])
+      }, [hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
       }, [slots.prepend?.(slotProps.value), props.prependIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prepend",
         "color": iconColor.value
-      }, null)]), slots.default && createVNode("div", {
+      }, null)]), slots.default && createElementVNode("div", {
         "class": "v-input__control"
-      }, [slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
+      }, [slots.default?.(slotProps.value)]), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-input__append"
       }, [props.appendIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "append",
         "color": iconColor.value
-      }, null), slots.append?.(slotProps.value)]), hasDetails && createVNode("div", {
+      }, null), slots.append?.(slotProps.value)]), hasDetails && createElementVNode("div", {
         "id": messagesId.value,
         "class": "v-input__details",
         "role": "alert",
@@ -7740,7 +7783,7 @@ function clampTarget(container, value, rtl, horizontal) {
     min = 0;
     max = scrollHeight + -containerHeight;
   }
-  return Math.max(Math.min(value, max), min);
+  return clamp(value, min, max);
 }
 
 function calculateUpdatedTarget(_ref) {
@@ -8098,42 +8141,42 @@ const VSlideGroup = genericComponent()({
       return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-slide-group', {
+      "class": normalizeClass(['v-slide-group', {
         'v-slide-group--vertical': !isHorizontal.value,
         'v-slide-group--has-affixes': hasAffixes.value,
         'v-slide-group--is-overflowing': isOverflowing.value
-      }, displayClasses.value, props.class],
-      "style": props.style,
+      }, displayClasses.value, props.class]),
+      "style": normalizeStyle(props.style),
       "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
       "onFocus": onFocus
     }, {
-      default: () => [hasAffixes.value && createVNode("div", {
+      default: () => [hasAffixes.value && createElementVNode("div", {
         "key": "prev",
-        "class": ['v-slide-group__prev', {
+        "class": normalizeClass(['v-slide-group__prev', {
           'v-slide-group__prev--disabled': !hasPrev.value
-        }],
+        }]),
         "onMousedown": onFocusAffixes,
         "onClick": () => hasPrev.value && scrollTo('prev')
       }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
           "icon": isRtl.value ? props.nextIcon : props.prevIcon
         }, null)]
-      })]), createVNode("div", {
+      })]), createElementVNode("div", {
         "key": "container",
         "ref": containerRef,
         "class": "v-slide-group__container",
         "onScroll": onScroll
-      }, [createVNode("div", {
+      }, [createElementVNode("div", {
         "ref": contentRef,
         "class": "v-slide-group__content",
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
         "onKeydown": onKeydown
-      }, [slots.default?.(slotProps.value)])]), hasAffixes.value && createVNode("div", {
+      }, [slots.default?.(slotProps.value)])]), hasAffixes.value && createElementVNode("div", {
         "key": "next",
-        "class": ['v-slide-group__next', {
+        "class": normalizeClass(['v-slide-group__next', {
           'v-slide-group__next--disabled': !hasNext.value
-        }],
+        }]),
         "onMousedown": onFocusAffixes,
         "onClick": () => hasNext.value && scrollTo('next')
       }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
@@ -8288,7 +8331,7 @@ const makeVChipProps = propsFactory({
 const VChip = genericComponent()({
   name: 'VChip',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVChipProps(),
   emits: {
@@ -8388,7 +8431,7 @@ const VChip = genericComponent()({
         default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VExpandXTransition, {
           "key": "filter"
         }, {
-          default: () => [withDirectives(createVNode("div", {
+          default: () => [withDirectives(createElementVNode("div", {
             "class": "v-chip__filter"
           }, [!slots.filter ? createVNode(VIcon, {
             "key": "filter-icon",
@@ -8402,10 +8445,10 @@ const VChip = genericComponent()({
               }
             }
           }, slots.filter)]), [[vShow, group.isSelected.value]])]
-        }), hasPrepend && createVNode("div", {
+        }), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-chip__prepend"
-        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
           "key": "prepend-icon",
           "icon": props.prependIcon,
           "start": true
@@ -8426,7 +8469,7 @@ const VChip = genericComponent()({
               start: true
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-chip__content",
           "data-no-activator": ""
         }, [slots.default?.({
@@ -8436,10 +8479,10 @@ const VChip = genericComponent()({
           toggle: group?.toggle,
           value: group?.value.value,
           disabled: props.disabled
-        }) ?? toDisplayString(props.text)]), hasAppend && createVNode("div", {
+        }) ?? toDisplayString(props.text)]), hasAppend && createElementVNode("div", {
           "key": "append",
           "class": "v-chip__append"
-        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
           "key": "append-icon",
           "end": true,
           "icon": props.appendIcon
@@ -8460,7 +8503,7 @@ const VChip = genericComponent()({
               icon: props.appendIcon
             }
           }
-        }, slots.append)]), hasClose && createVNode("button", mergeProps({
+        }, slots.append)]), hasClose && createElementVNode("button", mergeProps({
           "key": "close",
           "class": "v-chip__close",
           "type": "button",
@@ -8478,7 +8521,7 @@ const VChip = genericComponent()({
             }
           }
         }, slots.close)])]
-      }), [[resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
+      }), [[Ripple, isClickable.value && props.ripple, null]]);
     };
   }
 });
@@ -9251,13 +9294,13 @@ const VListGroup = genericComponent()({
       }
     }));
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-group', {
+      "class": normalizeClass(['v-list-group', {
         'v-list-group--prepend': list?.hasPrepend.value,
         'v-list-group--fluid': props.fluid,
         'v-list-group--subgroup': props.subgroup,
         'v-list-group--open': isOpen.value
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.activator && createVNode(VDefaultsProvider, {
         "defaults": activatorDefaults.value
@@ -9274,7 +9317,7 @@ const VListGroup = genericComponent()({
         },
         "disabled": !isBooted.value
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-list-group__items",
           "role": "group",
           "aria-labelledby": id.value
@@ -9300,10 +9343,10 @@ const VListItemSubtitle = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-item-subtitle', props.class],
-      "style": [{
+      "class": normalizeClass(['v-list-item-subtitle', props.class]),
+      "style": normalizeStyle([{
         '--v-list-item-subtitle-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -9366,7 +9409,7 @@ const makeVListItemProps = propsFactory({
 const VListItem = genericComponent()({
   name: 'VListItem',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVListItemProps(),
   emits: {
@@ -9501,10 +9544,10 @@ const VListItem = genericComponent()({
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
-        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode("div", {
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-list-item__prepend"
-        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
           "key": "prepend-avatar",
           "density": props.density,
           "image": props.prependAvatar
@@ -9530,9 +9573,9 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.prepend?.(slotProps.value)]
-        }), createVNode("div", {
+        }), createElementVNode("div", {
           "class": "v-list-item__spacer"
-        }, null)]), createVNode("div", {
+        }, null)]), createElementVNode("div", {
           "class": "v-list-item__content",
           "data-no-activator": ""
         }, [hasTitle && createVNode(VListItemTitle, {
@@ -9547,10 +9590,10 @@ const VListItem = genericComponent()({
           default: () => [slots.subtitle?.({
             subtitle: props.subtitle
           }) ?? toDisplayString(props.subtitle)]
-        }), slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
+        }), slots.default?.(slotProps.value)]), hasAppend && createElementVNode("div", {
           "key": "append",
           "class": "v-list-item__append"
-        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
           "key": "append-icon",
           "density": props.density,
           "icon": props.appendIcon
@@ -9576,10 +9619,10 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.append?.(slotProps.value)]
-        }), createVNode("div", {
+        }), createElementVNode("div", {
           "class": "v-list-item__spacer"
         }, null)])]
-      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
+      }), [[Ripple, isClickable.value && props.ripple]]);
     });
     return {
       activate,
@@ -9617,15 +9660,15 @@ const VListSubheader = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || props.title);
       return createVNode(props.tag, {
-        "class": ['v-list-subheader', {
+        "class": normalizeClass(['v-list-subheader', {
           'v-list-subheader--inset': props.inset,
           'v-list-subheader--sticky': props.sticky
-        }, textColorClasses.value, props.class],
-        "style": [{
+        }, textColorClasses.value, props.class]),
+        "style": normalizeStyle([{
           textColorStyles
-        }, props.style]
+        }, props.style])
       }, {
-        default: () => [hasText && createVNode("div", {
+        default: () => [hasText && createElementVNode("div", {
           "class": "v-list-subheader__text"
         }, [slots.default?.() ?? props.title])]
       });
@@ -9670,25 +9713,25 @@ const VDivider = genericComponent()({
       return styles;
     });
     useRender(() => {
-      const divider = createVNode("hr", {
-        "class": [{
+      const divider = createElementVNode("hr", {
+        "class": normalizeClass([{
           'v-divider': true,
           'v-divider--inset': props.inset,
           'v-divider--vertical': props.vertical
-        }, themeClasses.value, textColorClasses.value, props.class],
-        "style": [dividerStyles.value, textColorStyles.value, {
+        }, themeClasses.value, textColorClasses.value, props.class]),
+        "style": normalizeStyle([dividerStyles.value, textColorStyles.value, {
           '--v-border-opacity': props.opacity
-        }, props.style],
+        }, props.style]),
         "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
         "role": `${attrs.role || 'separator'}`
       }, null);
       if (!slots.default) return divider;
-      return createVNode("div", {
-        "class": ['v-divider__wrapper', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-divider__wrapper', {
           'v-divider__wrapper--vertical': props.vertical,
           'v-divider__wrapper--inset': props.inset
-        }]
-      }, [divider, createVNode("div", {
+        }])
+      }, [divider, createElementVNode("div", {
         "class": "v-divider__content"
       }, [slots.default()]), divider]);
     });
@@ -10107,12 +10150,12 @@ const VList = genericComponent()({
     useRender(() => {
       return createVNode(props.tag, {
         "ref": contentRef,
-        "class": ['v-list', {
+        "class": normalizeClass(['v-list', {
           'v-list--disabled': props.disabled,
           'v-list--nav': props.nav,
           'v-list--slim': props.slim
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
         "tabindex": props.disabled ? -1 : 0,
         "role": "listbox",
         "aria-activedescendant": undefined,
@@ -10156,11 +10199,11 @@ const VListItemAction = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-list-item-action', {
+      "class": normalizeClass(['v-list-item-action', {
         'v-list-item-action--start': props.start,
         'v-list-item-action--end': props.end
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, slots));
     return {};
   }
@@ -10181,11 +10224,11 @@ const VListItemMedia = genericComponent()({
     } = _ref;
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-list-item-media', {
+        "class": normalizeClass(['v-list-item-media', {
           'v-list-item-media--start': props.start,
           'v-list-item-media--end': props.end
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": normalizeStyle(props.style)
       }, slots);
     });
     return {};
@@ -10274,11 +10317,19 @@ function useLocationStrategies(props, data) {
       watch(() => props.locationStrategy, reset);
       onScopeDispose(() => {
         window.removeEventListener('resize', onResize);
+        visualViewport?.removeEventListener('resize', onVisualResize);
+        visualViewport?.removeEventListener('scroll', onVisualScroll);
         updateLocation.value = undefined;
       });
       window.addEventListener('resize', onResize, {
         passive: true
       });
+      visualViewport?.addEventListener('resize', onVisualResize, {
+        passive: true
+      });
+      visualViewport?.addEventListener('scroll', onVisualScroll, {
+        passive: true
+      });
       if (typeof props.locationStrategy === 'function') {
         updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;
       } else {
@@ -10289,6 +10340,12 @@ function useLocationStrategies(props, data) {
   function onResize(e) {
     updateLocation.value?.(e);
   }
+  function onVisualResize(e) {
+    updateLocation.value?.(e);
+  }
+  function onVisualScroll(e) {
+    updateLocation.value?.(e);
+  }
   return {
     contentStyles,
     updateLocation
@@ -10440,13 +10497,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
       }
     }
     const viewport = scrollParents.reduce((box, el) => {
-      const rect = el.getBoundingClientRect();
-      const scrollBox = new Box({
-        x: el === document.documentElement ? 0 : rect.x,
-        y: el === document.documentElement ? 0 : rect.y,
-        width: el.clientWidth,
-        height: el.clientHeight
-      });
+      const scrollBox = getElementBox(el);
       if (box) {
         return new Box({
           x: Math.max(box.left, scrollBox.left),
@@ -11337,7 +11388,7 @@ function Scrim(props) {
     "name": "fade-transition",
     "appear": true
   }, {
-    default: () => [props.modelValue && createVNode("div", mergeProps({
+    default: () => [props.modelValue && createElementVNode("div", mergeProps({
       "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
       "style": props.color.backgroundColorStyles.value
     }, rest), null)]
@@ -11378,7 +11429,7 @@ const makeVOverlayProps = propsFactory({
 const VOverlay = genericComponent()({
   name: 'VOverlay',
   directives: {
-    ClickOutside
+    vClickOutside: ClickOutside
   },
   inheritAttrs: false,
   props: {
@@ -11558,7 +11609,7 @@ const VOverlay = genericComponent()({
       _onAfterLeave();
       emit('afterLeave');
     }
-    useRender(() => createVNode(Fragment, null, [slots.activator?.({
+    useRender(() => createElementVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
       targetRef,
       props: mergeProps({
@@ -11568,7 +11619,7 @@ const VOverlay = genericComponent()({
       "disabled": !teleportTarget.value,
       "to": teleportTarget.value
     }, {
-      default: () => [createVNode("div", mergeProps({
+      default: () => [createElementVNode("div", mergeProps({
         "class": ['v-overlay', {
           'v-overlay--absolute': props.absolute || props.contained,
           'v-overlay--active': isActive.value,
@@ -11592,13 +11643,13 @@ const VOverlay = genericComponent()({
         "onAfterEnter": onAfterEnter,
         "onAfterLeave": onAfterLeave
       }, {
-        default: () => [withDirectives(createVNode("div", mergeProps({
+        default: () => [withDirectives(createElementVNode("div", mergeProps({
           "ref": contentEl,
           "class": ['v-overlay__content', props.contentClass],
           "style": [dimensionStyles.value, contentStyles.value]
         }, contentEvents.value, props.contentProps), [slots.default?.({
           isActive
-        })]), [[vShow, isActive.value], [resolveDirective("click-outside"), {
+        })]), [[vShow, isActive.value], [ClickOutside, {
           handler: onClickOutside,
           closeConditional,
           include: () => [activatorEl.value]
@@ -11927,11 +11978,11 @@ const VCounter = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-counter', {
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-counter', {
           'text-error': props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": normalizeStyle(props.style)
       }, [slots.default ? slots.default({
         counter: counter.value,
         max: props.max,
@@ -11954,10 +12005,10 @@ const VFieldLabel = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(VLabel, {
-      "class": ['v-field-label', {
+      "class": normalizeClass(['v-field-label', {
         'v-field-label--floating': props.floating
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "aria-hidden": props.floating || undefined
     }, slots));
     return {};
@@ -12134,7 +12185,7 @@ const VField = genericComponent()({
           for: id.value
         }
       }) : props.label;
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-field', {
           'v-field--active': isActive.value,
           'v-field--appended': hasAppend,
@@ -12154,7 +12205,7 @@ const VField = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
         "style": [backgroundColorStyles.value, props.style],
         "onClick": onClick
-      }, attrs), [createVNode("div", {
+      }, attrs), [createElementVNode("div", {
         "class": "v-field__overlay"
       }, null), createVNode(LoaderSlot, {
         "name": "v-field",
@@ -12162,23 +12213,23 @@ const VField = genericComponent()({
         "color": props.error ? 'error' : typeof props.loading === 'string' ? props.loading : props.color
       }, {
         default: slots.loader
-      }), hasPrepend && createVNode("div", {
+      }), hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-field__prepend-inner"
       }, [props.prependInnerIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prependInner",
         "color": iconColor.value
-      }, null), slots['prepend-inner']?.(slotProps.value)]), createVNode("div", {
+      }, null), slots['prepend-inner']?.(slotProps.value)]), createElementVNode("div", {
         "class": "v-field__field",
         "data-no-activator": ""
       }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "key": "floating-label",
         "ref": floatingLabelRef,
-        "class": [textColorClasses.value],
+        "class": normalizeClass([textColorClasses.value]),
         "floating": true,
         "for": id.value,
-        "style": textColorStyles.value
+        "style": normalizeStyle(textColorStyles.value)
       }, {
         default: () => [label()]
       }), hasLabel.value && createVNode(VFieldLabel, {
@@ -12196,14 +12247,14 @@ const VField = genericComponent()({
         },
         focus,
         blur
-      }) ?? createVNode("div", {
+      }) ?? createElementVNode("div", {
         "id": id.value,
         "class": "v-field__input",
         "aria-describedby": messagesId.value
       }, null)]), hasClear && createVNode(VExpandXTransition, {
         "key": "clear"
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-field__clearable",
           "onMousedown": e => {
             e.preventDefault();
@@ -12221,27 +12272,29 @@ const VField = genericComponent()({
             props: {
               onFocus: focus,
               onBlur: blur,
-              onClick: props['onClick:clear']
+              onClick: props['onClick:clear'],
+              tabindex: -1
             }
           }) : createVNode(InputIcon, {
             "name": "clear",
             "onFocus": focus,
-            "onBlur": blur
+            "onBlur": blur,
+            "tabindex": -1
           }, null)]
         })]), [[vShow, props.dirty]])]
-      }), hasAppend && createVNode("div", {
+      }), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-field__append-inner"
       }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "appendInner",
         "color": iconColor.value
-      }, null)]), createVNode("div", {
-        "class": ['v-field__outline', textColorClasses.value],
-        "style": textColorStyles.value
-      }, [isOutlined && createVNode(Fragment, null, [createVNode("div", {
+      }, null)]), createElementVNode("div", {
+        "class": normalizeClass(['v-field__outline', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
+      }, [isOutlined && createElementVNode(Fragment, null, [createElementVNode("div", {
         "class": "v-field__outline__start"
-      }, null), hasFloatingLabel.value && createVNode("div", {
+      }, null), hasFloatingLabel.value && createElementVNode("div", {
         "class": "v-field__outline__notch"
       }, [createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
@@ -12249,7 +12302,7 @@ const VField = genericComponent()({
         "for": id.value
       }, {
         default: () => [label()]
-      })]), createVNode("div", {
+      })]), createElementVNode("div", {
         "class": "v-field__outline__end"
       }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
@@ -12290,7 +12343,7 @@ const makeVTextFieldProps = propsFactory({
 const VTextField = genericComponent()({
   name: 'VTextField',
   directives: {
-    Intersect
+    vIntersect: Intersect
   },
   inheritAttrs: false,
   props: makeVTextFieldProps(),
@@ -12422,7 +12475,7 @@ const VTextField = genericComponent()({
                   ...slotProps
                 }
               } = _ref3;
-              const inputNode = withDirectives(createVNode("input", mergeProps({
+              const inputNode = withDirectives(createElementVNode("input", mergeProps({
                 "ref": inputRef,
                 "value": model.value,
                 "onInput": onInput,
@@ -12435,29 +12488,29 @@ const VTextField = genericComponent()({
                 "type": props.type,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), [[resolveDirective("intersect"), {
+              }, slotProps, inputAttrs), null), [[Intersect, {
                 handler: onIntersect
               }, null, {
                 once: true
               }]]);
-              return createVNode(Fragment, null, [props.prefix && createVNode("span", {
+              return createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [createVNode("span", {
+              }, [createElementVNode("span", {
                 "class": "v-text-field__prefix__text"
-              }, [props.prefix])]), slots.default ? createVNode("div", {
-                "class": fieldClass,
+              }, [props.prefix])]), slots.default ? createElementVNode("div", {
+                "class": normalizeClass(fieldClass),
                 "data-no-activator": ""
               }, [slots.default(), inputNode]) : cloneVNode(inputNode, {
                 class: fieldClass
-              }), props.suffix && createVNode("span", {
+              }), props.suffix && createElementVNode("span", {
                 "class": "v-text-field__suffix"
-              }, [createVNode("span", {
+              }, [createElementVNode("span", {
                 "class": "v-text-field__suffix__text"
               }, [props.suffix])])]);
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": props.persistentCounter || isFocused.value,
           "value": counterValue.value,
           "max": max.value,
@@ -12495,9 +12548,9 @@ const VVirtualScrollItem = genericComponent()({
     watch(() => contentRect.value?.height, height => {
       if (height != null) emit('update:height', height);
     });
-    useRender(() => props.renderless ? createVNode(Fragment, null, [slots.default?.({
+    useRender(() => props.renderless ? createElementVNode(Fragment, null, [slots.default?.({
       itemRef: resizeRef
-    })]) : createVNode("div", mergeProps({
+    })]) : createElementVNode("div", mergeProps({
       "ref": resizeRef,
       "class": ['v-virtual-scroll__item', props.class],
       "style": props.style
@@ -12832,30 +12885,30 @@ const VVirtualScroll = genericComponent()({
           ...slotProps
         })
       }));
-      return props.renderless ? createVNode(Fragment, null, [createVNode("div", {
+      return props.renderless ? createElementVNode(Fragment, null, [createElementVNode("div", {
         "ref": markerRef,
         "class": "v-virtual-scroll__spacer",
-        "style": {
+        "style": normalizeStyle({
           paddingTop: convertToUnit(paddingTop.value)
-        }
-      }, null), children, createVNode("div", {
+        })
+      }, null), children, createElementVNode("div", {
         "class": "v-virtual-scroll__spacer",
-        "style": {
+        "style": normalizeStyle({
           paddingBottom: convertToUnit(paddingBottom.value)
-        }
-      }, null)]) : createVNode("div", {
+        })
+      }, null)]) : createElementVNode("div", {
         "ref": containerRef,
-        "class": ['v-virtual-scroll', props.class],
+        "class": normalizeClass(['v-virtual-scroll', props.class]),
         "onScrollPassive": handleScroll,
         "onScrollend": handleScrollend,
-        "style": [dimensionStyles.value, props.style]
-      }, [createVNode("div", {
+        "style": normalizeStyle([dimensionStyles.value, props.style])
+      }, [createElementVNode("div", {
         "ref": markerRef,
         "class": "v-virtual-scroll__container",
-        "style": {
+        "style": normalizeStyle({
           paddingTop: convertToUnit(paddingTop.value),
           paddingBottom: convertToUnit(paddingBottom.value)
-        }
+        })
       }, [children])]);
     });
     return {
@@ -13017,6 +13070,7 @@ const VSelect = genericComponent()({
     const selectedValues = computed(() => model.value.map(selection => selection.value));
     const isFocused = shallowRef(false);
     let keyboardLookupPrefix = '';
+    let keyboardLookupIndex = -1;
     let keyboardLookupLastTime;
     const displayItems = computed(() => {
       if (props.hideSelected) {
@@ -13084,18 +13138,46 @@ const VSelect = genericComponent()({
       const now = performance.now();
       if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
         keyboardLookupPrefix = '';
+        keyboardLookupIndex = -1;
       }
       keyboardLookupPrefix += e.key.toLowerCase();
       keyboardLookupLastTime = now;
-      const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
-      if (item !== undefined) {
-        if (!props.multiple) {
-          model.value = [item];
+      const items = displayItems.value;
+      function findItem() {
+        let result = findItemBase();
+        if (result) return result;
+        if (keyboardLookupPrefix.at(-1) === keyboardLookupPrefix.at(-2)) {
+          // No matches but we have a repeated letter, try the next item with that prefix
+          keyboardLookupPrefix = keyboardLookupPrefix.slice(0, -1);
+          result = findItemBase();
+          if (result) return result;
         }
-        const index = displayItems.value.indexOf(item);
-        if (~index && IN_BROWSER) {
-          listRef.value?.focus(index);
+
+        // Still nothing, wrap around to the top
+        keyboardLookupIndex = -1;
+        result = findItemBase();
+        if (result) return result;
+
+        // Still nothing, try just the new letter
+        keyboardLookupPrefix = e.key.toLowerCase();
+        return findItemBase();
+      }
+      function findItemBase() {
+        for (let i = keyboardLookupIndex + 1; i < items.length; i++) {
+          const _item = items[i];
+          if (_item.title.toLowerCase().startsWith(keyboardLookupPrefix)) {
+            return [_item, i];
+          }
         }
+        return undefined;
+      }
+      const result = findItem();
+      if (!result) return;
+      const [item, index] = result;
+      keyboardLookupIndex = index;
+      listRef.value?.focus(index);
+      if (!props.multiple) {
+        model.value = [item];
       }
     }
 
@@ -13197,7 +13279,7 @@ const VSelect = genericComponent()({
         "title": t(label.value)
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -13255,7 +13337,7 @@ const VSelect = genericComponent()({
                     let {
                       isSelected
                     } = _ref3;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -13301,7 +13383,7 @@ const VSelect = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
             "class": "v-select__selection"
           }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
@@ -13321,9 +13403,9 @@ const VSelect = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-select__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-select__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -13331,7 +13413,7 @@ const VSelect = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
             "class": "v-select__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon
@@ -13482,17 +13564,17 @@ function highlightResult(name, text, matches) {
   if (matches == null || !matches.length) return text;
   return matches.map((match, i) => {
     const start = i === 0 ? 0 : matches[i - 1][1];
-    const result = [createVNode("span", {
-      "class": `${name}__unmask`
-    }, [text.slice(start, match[0])]), createVNode("span", {
-      "class": `${name}__mask`
+    const result = [createElementVNode("span", {
+      "class": normalizeClass(`${name}__unmask`)
+    }, [text.slice(start, match[0])]), createElementVNode("span", {
+      "class": normalizeClass(`${name}__mask`)
     }, [text.slice(match[0], match[1])])];
     if (i === matches.length - 1) {
-      result.push(createVNode("span", {
-        "class": `${name}__unmask`
+      result.push(createElementVNode("span", {
+        "class": normalizeClass(`${name}__unmask`)
       }, [text.slice(match[1])]));
     }
-    return createVNode(Fragment, null, [result]);
+    return createElementVNode(Fragment, null, [result]);
   });
 }
 
@@ -13794,7 +13876,7 @@ const VAutocomplete = genericComponent()({
         "onKeydown": onKeydown
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -13853,7 +13935,7 @@ const VAutocomplete = genericComponent()({
                     let {
                       isSelected
                     } = _ref4;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -13902,10 +13984,10 @@ const VAutocomplete = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
-            "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
-            "style": index === selectionIndex.value ? textColorStyles.value : {}
+            "class": normalizeClass(['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]]),
+            "style": normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
           }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -13923,9 +14005,9 @@ const VAutocomplete = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-autocomplete__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-autocomplete__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -13933,7 +14015,7 @@ const VAutocomplete = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
             "class": "v-autocomplete__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon,
@@ -14030,12 +14112,12 @@ const VBadge = genericComponent()({
       }, attrs, {
         "style": props.style
       }), {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-badge__wrapper"
         }, [ctx.slots.default?.(), createVNode(MaybeTransition, {
           "transition": props.transition
         }, {
-          default: () => [withDirectives(createVNode("span", mergeProps({
+          default: () => [withDirectives(createElementVNode("span", mergeProps({
             "class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
             "style": [backgroundColorStyles.value, textColorStyles.value, props.inline ? {} : locationStyles.value],
             "aria-atomic": "true",
@@ -14072,9 +14154,9 @@ const VBannerActions = genericComponent()({
         variant: 'text'
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-banner-actions', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-banner-actions', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -14160,15 +14242,15 @@ const VBanner = genericComponent()({
       const hasPrependMedia = !!(props.avatar || props.icon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       return createVNode(props.tag, {
-        "class": ['v-banner', {
+        "class": normalizeClass(['v-banner', {
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
         "role": "banner"
       }, {
-        default: () => [hasPrepend && createVNode("div", {
+        default: () => [hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-banner__prepend"
         }, [!slots.prepend ? createVNode(VAvatar, {
@@ -14188,7 +14270,7 @@ const VBanner = genericComponent()({
               image: props.avatar
             }
           }
-        }, slots.prepend)]), createVNode("div", {
+        }, slots.prepend)]), createElementVNode("div", {
           "class": "v-banner__content"
         }, [hasText && createVNode(VBannerText, {
           "key": "text"
@@ -14297,16 +14379,16 @@ const VBottomNavigation = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-bottom-navigation', {
+        "class": normalizeClass(['v-bottom-navigation', {
           'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
           'v-bottom-navigation--shift': props.mode === 'shift'
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, {
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value)
-        }, ssrBootStyles.value, props.style]
+        }, ssrBootStyles.value, props.style])
       }, {
-        default: () => [slots.default && createVNode("div", {
+        default: () => [slots.default && createElementVNode("div", {
           "class": "v-bottom-navigation__content"
         }, [slots.default()])]
       });
@@ -14493,10 +14575,10 @@ const VBreadcrumbsDivider = genericComponent()({
     let {
       slots
     } = _ref;
-    useRender(() => createVNode("li", {
+    useRender(() => createElementVNode("li", {
       "aria-hidden": "true",
-      "class": ['v-breadcrumbs-divider', props.class],
-      "style": props.style
+      "class": normalizeClass(['v-breadcrumbs-divider', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots?.default?.() ?? props.divider]));
     return {};
   }
@@ -14531,15 +14613,15 @@ const VBreadcrumbsItem = genericComponent()({
     } = useTextColor(() => isActive.value ? props.activeColor : props.color);
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-breadcrumbs-item', {
+        "class": normalizeClass(['v-breadcrumbs-item', {
           'v-breadcrumbs-item--active': isActive.value,
           'v-breadcrumbs-item--disabled': props.disabled,
           [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, textColorClasses.value, props.class],
-        "style": [textColorStyles.value, props.style],
+        }, textColorClasses.value, props.class]),
+        "style": normalizeStyle([textColorStyles.value, props.style]),
         "aria-current": isActive.value ? 'page' : undefined
       }, {
-        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createVNode("a", mergeProps({
+        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createElementVNode("a", mergeProps({
           "class": "v-breadcrumbs-item--link",
           "onClick": link.navigate
         }, link.linkProps), [slots.default?.() ?? props.title])]
@@ -14615,10 +14697,10 @@ const VBreadcrumbs = genericComponent()({
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.icon);
       return createVNode(props.tag, {
-        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        "class": normalizeClass(['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [hasPrepend && createVNode("li", {
+        default: () => [hasPrepend && createElementVNode("li", {
           "key": "prepend",
           "class": "v-breadcrumbs__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -14639,7 +14721,7 @@ const VBreadcrumbs = genericComponent()({
             item,
             raw
           } = _ref2;
-          return createVNode(Fragment, null, [slots.item?.({
+          return createElementVNode(Fragment, null, [slots.item?.({
             item,
             index
           }) ?? createVNode(VBreadcrumbsItem, mergeProps({
@@ -14678,9 +14760,9 @@ const VCardActions = genericComponent()({
         variant: 'text'
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-card-actions', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-card-actions', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -14699,10 +14781,10 @@ const VCardSubtitle = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-card-subtitle', props.class],
-      "style": [{
+      "class": normalizeClass(['v-card-subtitle', props.class]),
+      "style": normalizeStyle([{
         '--v-card-subtitle-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -14741,13 +14823,13 @@ const VCardItem = genericComponent()({
       const hasAppend = !!(hasAppendMedia || slots.append);
       const hasTitle = !!(props.title != null || slots.title);
       const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-      return createVNode("div", {
-        "class": ['v-card-item', props.class],
-        "style": props.style
-      }, [hasPrepend && createVNode("div", {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-card-item', props.class]),
+        "style": normalizeStyle(props.style)
+      }, [hasPrepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-card-item__prepend"
-      }, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+      }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
         "key": "prepend-avatar",
         "density": props.density,
         "image": props.prependAvatar
@@ -14768,7 +14850,7 @@ const VCardItem = genericComponent()({
             icon: props.prependIcon
           }
         }
-      }, slots.prepend)]), createVNode("div", {
+      }, slots.prepend)]), createElementVNode("div", {
         "class": "v-card-item__content"
       }, [hasTitle && createVNode(VCardTitle, {
         "key": "title"
@@ -14778,10 +14860,10 @@ const VCardItem = genericComponent()({
         "key": "subtitle"
       }, {
         default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
-      }), slots.default?.()]), hasAppend && createVNode("div", {
+      }), slots.default?.()]), hasAppend && createElementVNode("div", {
         "key": "append",
         "class": "v-card-item__append"
-      }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+      }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
         "key": "append-icon",
         "density": props.density,
         "icon": props.appendIcon
@@ -14821,10 +14903,10 @@ const VCardText = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(props.tag, {
-      "class": ['v-card-text', props.class],
-      "style": [{
+      "class": normalizeClass(['v-card-text', props.class]),
+      "style": normalizeStyle([{
         '--v-card-text-opacity': props.opacity
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -14880,7 +14962,7 @@ const makeVCardProps = propsFactory({
 const VCard = genericComponent()({
   name: 'VCard',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVCardProps(),
   setup(props, _ref) {
@@ -14944,7 +15026,7 @@ const VCard = genericComponent()({
         "onClick": isClickable && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
       }, link.linkProps), {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-card__image"
         }, [!slots.image ? createVNode(VImg, {
@@ -14987,7 +15069,7 @@ const VCard = genericComponent()({
         }), slots.default?.(), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
         }), genOverlays(isClickable, 'v-card')]
-      }), [[resolveDirective("ripple"), isClickable && props.ripple]]);
+      }), [[Ripple, isClickable && props.ripple]]);
     });
     return {};
   }
@@ -15146,7 +15228,7 @@ const makeVWindowProps = propsFactory({
 const VWindow = genericComponent()({
   name: 'VWindow',
   directives: {
-    Touch
+    vTouch: Touch
   },
   props: makeVWindowProps(),
   emits: {
@@ -15218,7 +15300,7 @@ const VWindow = genericComponent()({
       };
       arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
         props: prevProps
-      }) : createVNode(VBtn, prevProps, null) : createVNode("div", null, null));
+      }) : createVNode(VBtn, prevProps, null) : createElementVNode("div", null, null));
       const nextProps = {
         icon: isRtl.value ? props.prevIcon : props.nextIcon,
         class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
@@ -15227,7 +15309,7 @@ const VWindow = genericComponent()({
       };
       arrows.push(canMoveForward.value ? slots.next ? slots.next({
         props: nextProps
-      }) : createVNode(VBtn, nextProps, null) : createVNode("div", null, null));
+      }) : createVNode(VBtn, nextProps, null) : createElementVNode("div", null, null));
       return arrows;
     });
     const touchOptions = computed(() => {
@@ -15253,24 +15335,24 @@ const VWindow = genericComponent()({
     });
     useRender(() => withDirectives(createVNode(props.tag, {
       "ref": rootRef,
-      "class": ['v-window', {
+      "class": normalizeClass(['v-window', {
         'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-      }, themeClasses.value, props.class],
-      "style": props.style
+      }, themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
-      default: () => [createVNode("div", {
+      default: () => [createElementVNode("div", {
         "class": "v-window__container",
-        "style": {
+        "style": normalizeStyle({
           height: transitionHeight.value
-        }
+        })
       }, [slots.default?.({
         group
-      }), props.showArrows !== false && createVNode("div", {
+      }), props.showArrows !== false && createElementVNode("div", {
         "class": "v-window__controls"
       }, [arrows.value])]), slots.additional?.({
         group
       })]
-    }), [[resolveDirective("touch"), touchOptions.value]]));
+    }), [[Touch, touchOptions.value]]));
     return {
       group
     };
@@ -15355,12 +15437,12 @@ const VCarousel = genericComponent()({
           let {
             group
           } = _ref2;
-          return createVNode(Fragment, null, [!props.hideDelimiters && createVNode("div", {
+          return createElementVNode(Fragment, null, [!props.hideDelimiters && createElementVNode("div", {
             "class": "v-carousel__controls",
-            "style": {
+            "style": normalizeStyle({
               left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
               right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-            }
+            })
           }, [group.items.value.length > 0 && createVNode(VDefaultsProvider, {
             "defaults": {
               VBtn: {
@@ -15414,7 +15496,7 @@ const makeVWindowItemProps = propsFactory({
 const VWindowItem = genericComponent()({
   name: 'VWindowItem',
   directives: {
-    Touch
+    vTouch: Touch
   },
   props: makeVWindowItemProps(),
   emits: {
@@ -15498,9 +15580,9 @@ const VWindowItem = genericComponent()({
       "transition": transition.value,
       "disabled": !isBooted.value
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
-        "style": props.style
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-window-item', groupItem.selectedClass.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
     return {
@@ -15700,21 +15782,21 @@ const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": resizeRef,
-      "class": ['v-color-picker-canvas', props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-color-picker-canvas', props.class]),
+      "style": normalizeStyle(props.style),
       "onMousedown": handleMouseDown,
       "onTouchstartPassive": handleMouseDown
-    }, [createVNode("canvas", {
+    }, [createElementVNode("canvas", {
       "ref": canvasRef,
       "width": canvasWidth.value,
       "height": canvasHeight.value
-    }, null), props.color && createVNode("div", {
-      "class": ['v-color-picker-canvas__dot', {
+    }, null), props.color && createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
-      }],
-      "style": dotStyles.value
+      }]),
+      "style": normalizeStyle(dotStyles.value)
     }, null)]));
     return {};
   }
@@ -15914,9 +15996,9 @@ const VColorPickerInput = _ref => {
     label,
     ...rest
   } = _ref;
-  return createVNode("div", {
+  return createElementVNode("div", {
     "class": "v-color-picker-edit__input"
-  }, [createVNode("input", rest, null), createVNode("span", null, [label])]);
+  }, [createElementVNode("input", normalizeProps(guardReactiveProps(rest)), null), createElementVNode("span", null, [label])]);
 };
 const makeVColorPickerEditProps = propsFactory({
   color: Object,
@@ -15973,9 +16055,9 @@ const VColorPickerEdit = defineComponent({
         };
       });
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-edit', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-edit', props.class]),
+      "style": normalizeStyle(props.style)
     }, [inputs.value?.map(props => createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",
@@ -16139,7 +16221,7 @@ const useSlider = _ref => {
     const clickOffset = getPosition(e, position);
 
     // It is possible for left to be NaN, force to number
-    let clickPos = Math.min(Math.max((clickOffset - trackStart - startOffset.value) / trackLength, 0), 1) || 0;
+    let clickPos = clamp((clickOffset - trackStart - startOffset.value) / trackLength) || 0;
     if (vertical ? indexFromEnd.value : indexFromEnd.value !== isRtl.value) clickPos = 1 - clickPos;
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
@@ -16318,7 +16400,7 @@ const makeVSliderThumbProps = propsFactory({
 const VSliderThumb = genericComponent()({
   name: 'VSliderThumb',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVSliderThumbProps(),
   emits: {
@@ -16398,15 +16480,15 @@ const VSliderThumb = genericComponent()({
     }
     useRender(() => {
       const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%');
-      return createVNode("div", {
-        "class": ['v-slider-thumb', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }, props.class, rtlClasses.value],
-        "style": [{
+        }, props.class, rtlClasses.value]),
+        "style": normalizeStyle([{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-        }, props.style],
+        }, props.style]),
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
         "aria-label": props.name,
@@ -16416,25 +16498,25 @@ const VSliderThumb = genericComponent()({
         "aria-readonly": !!readonly.value,
         "aria-orientation": direction.value,
         "onKeydown": !readonly.value ? onKeydown : undefined
-      }, [createVNode("div", {
-        "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
-        "style": {
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
+        "style": normalizeStyle({
           ...textColorStyles.value
-        }
-      }, null), withDirectives(createVNode("div", {
-        "class": ['v-slider-thumb__ripple', textColorClasses.value],
-        "style": textColorStyles.value
-      }, null), [[resolveDirective("ripple"), props.ripple, null, {
+        })
+      }, null), withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
+        "style": normalizeStyle(textColorStyles.value)
+      }, null), [[Ripple, props.ripple, null, {
         circle: true,
         center: true
       }]]), createVNode(VScaleTransition, {
         "origin": "bottom center"
       }, {
-        default: () => [withDirectives(createVNode("div", {
+        default: () => [withDirectives(createElementVNode("div", {
           "class": "v-slider-thumb__label-container"
-        }, [createVNode("div", {
+        }, [createElementVNode("div", {
           "class": ['v-slider-thumb__label']
-        }, [createVNode("div", null, [slots['thumb-label']?.({
+        }, [createElementVNode("div", null, [slots['thumb-label']?.({
           modelValue: props.modelValue
         }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
       })]);
@@ -16511,17 +16593,17 @@ const VSliderTrack = genericComponent()({
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
       return ticks.map((tick, index) => {
         const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
-        return createVNode("div", {
+        return createElementVNode("div", {
           "key": tick.value,
-          "class": ['v-slider-track__tick', {
+          "class": normalizeClass(['v-slider-track__tick', {
             'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
             'v-slider-track__tick--first': tick.value === min.value,
             'v-slider-track__tick--last': tick.value === max.value
-          }],
-          "style": {
+          }]),
+          "style": normalizeStyle({
             [startDir.value]: directionValue
-          }
-        }, [(tick.label || slots['tick-label']) && createVNode("div", {
+          })
+        }, [(tick.label || slots['tick-label']) && createElementVNode("div", {
           "class": "v-slider-track__tick-label"
         }, [slots['tick-label']?.({
           tick,
@@ -16530,30 +16612,30 @@ const VSliderTrack = genericComponent()({
       });
     });
     useRender(() => {
-      return createVNode("div", {
-        "class": ['v-slider-track', roundedClasses.value, props.class],
-        "style": [{
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track', roundedClasses.value, props.class]),
+        "style": normalizeStyle([{
           '--v-slider-track-size': convertToUnit(trackSize.value),
           '--v-slider-tick-size': convertToUnit(tickSize.value)
-        }, props.style]
-      }, [createVNode("div", {
-        "class": ['v-slider-track__background', trackColorClasses.value, {
+        }, props.style])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
-        }],
-        "style": {
+        }]),
+        "style": normalizeStyle({
           ...backgroundStyles.value,
           ...trackColorStyles.value
-        }
-      }, null), createVNode("div", {
-        "class": ['v-slider-track__fill', trackFillColorClasses.value],
-        "style": {
+        })
+      }, null), createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__fill', trackFillColorClasses.value]),
+        "style": normalizeStyle({
           ...trackFillStyles.value,
           ...trackFillColorStyles.value
-        }
-      }, null), showTicks.value && createVNode("div", {
-        "class": ['v-slider-track__ticks', {
+        })
+      }, null), showTicks.value && createElementVNode("div", {
+        "class": normalizeClass(['v-slider-track__ticks', {
           'v-slider-track__ticks--always-show': showTicks.value === 'always'
-        }]
+        }])
       }, [computedTicks.value])]);
     });
     return {};
@@ -16647,7 +16729,7 @@ const VSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createElementVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "id": slotProps.id.value,
           "class": "v-slider__label",
           "text": props.label
@@ -16657,11 +16739,11 @@ const VSlider = genericComponent()({
             id,
             messagesId
           } = _ref4;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
             "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-          }, [createVNode("input", {
+          }, [createElementVNode("input", {
             "id": id.value,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
@@ -16734,12 +16816,12 @@ const VColorPickerPreview = defineComponent({
         });
       } catch (e) {}
     }
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-preview', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }, props.class],
-      "style": props.style
-    }, [SUPPORTS_EYE_DROPPER && createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle(props.style)
+    }, [SUPPORTS_EYE_DROPPER && createElementVNode("div", {
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [createVNode(VBtn, {
@@ -16748,13 +16830,13 @@ const VColorPickerPreview = defineComponent({
       "icon": "$eyeDropper",
       "variant": "plain",
       "onClick": openEyeDropper
-    }, null)]), createVNode("div", {
+    }, null)]), createElementVNode("div", {
       "class": "v-color-picker-preview__dot"
-    }, [createVNode("div", {
-      "style": {
+    }, [createElementVNode("div", {
+      "style": normalizeStyle({
         background: HSVtoCSS(props.color ?? nullColor)
-      }
-    }, null)]), createVNode("div", {
+      })
+    }, null)]), createElementVNode("div", {
       "class": "v-color-picker-preview__sliders"
     }, [createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",
@@ -17139,24 +17221,24 @@ const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
-    useRender(() => createVNode("div", {
-      "class": ['v-color-picker-swatches', props.class],
-      "style": [{
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-color-picker-swatches', props.class]),
+      "style": normalizeStyle([{
         maxHeight: convertToUnit(props.maxHeight)
-      }, props.style]
-    }, [createVNode("div", null, [props.swatches.map(swatch => createVNode("div", {
+      }, props.style])
+    }, [createElementVNode("div", null, [props.swatches.map(swatch => createElementVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
       const rgba = parseColor(color);
       const hsva = RGBtoHSV(rgba);
       const background = RGBtoCSS(rgba);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
-      }, [createVNode("div", {
-        "style": {
+      }, [createElementVNode("div", {
+        "style": normalizeStyle({
           background
-        }
+        })
       }, [props.color && deepEqual(props.color, hsva) ? createVNode(VIcon, {
         "size": "x-small",
         "icon": "$success",
@@ -17215,8 +17297,8 @@ const VSheet = genericComponent()({
       roundedClasses
     } = useRounded(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
+      "class": normalizeClass(['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -17255,17 +17337,17 @@ const VPicker = genericComponent()({
         }, props.class],
         "style": props.style
       }), {
-        default: () => [!props.hideHeader && createVNode("div", {
+        default: () => [!props.hideHeader && createElementVNode("div", {
           "key": "header",
-          "class": [backgroundColorClasses.value],
-          "style": [backgroundColorStyles.value]
+          "class": normalizeClass([backgroundColorClasses.value]),
+          "style": normalizeStyle([backgroundColorStyles.value])
         }, [hasTitle && createVNode(VPickerTitle, {
           "key": "picker-title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), slots.header && createVNode("div", {
+        }), slots.header && createElementVNode("div", {
           "class": "v-picker__header"
-        }, [slots.header()])]), createVNode("div", {
+        }, [slots.header()])]), createElementVNode("div", {
           "class": "v-picker__body"
         }, [slots.default?.()]), slots.actions && createVNode(VDefaultsProvider, {
           "defaults": {
@@ -17275,7 +17357,7 @@ const VPicker = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-picker__actions"
           }, [slots.actions()])]
         })]
@@ -18137,7 +18219,7 @@ const VColorPicker = defineComponent({
         }, props.style]
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [!props.hideCanvas && createVNode(VColorPickerCanvas, {
+        default: () => createElementVNode(Fragment, null, [!props.hideCanvas && createVNode(VColorPickerCanvas, {
           "key": "canvas",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
@@ -18145,7 +18227,7 @@ const VColorPicker = defineComponent({
           "dotSize": props.dotSize,
           "width": props.width,
           "height": props.canvasHeight
-        }, null), (!props.hideSliders || !props.hideInputs) && createVNode("div", {
+        }, null), (!props.hideSliders || !props.hideInputs) && createElementVNode("div", {
           "key": "controls",
           "class": "v-color-picker__controls"
         }, [!props.hideSliders && createVNode(VColorPickerPreview, {
@@ -18520,7 +18602,7 @@ const VCombobox = genericComponent()({
         "onKeydown": onKeydown
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+        default: () => createElementVNode(Fragment, null, [createVNode(VMenu, mergeProps({
           "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -18579,7 +18661,7 @@ const VCombobox = genericComponent()({
                     let {
                       isSelected
                     } = _ref5;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    return createElementVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
@@ -18628,10 +18710,10 @@ const VCombobox = genericComponent()({
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "key": item.value,
-            "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
-            "style": index === selectionIndex.value ? textColorStyles.value : {}
+            "class": normalizeClass(['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]]),
+            "style": normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
           }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -18649,9 +18731,9 @@ const VCombobox = genericComponent()({
             }
           }, {
             default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
+          }) : slotContent ?? createElementVNode("span", {
             "class": "v-combobox__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+          }, [item.title, props.multiple && index < model.value.length - 1 && createElementVNode("span", {
             "class": "v-combobox__selection-comma"
           }, [createTextVNode(",")])])]);
         })]),
@@ -18659,7 +18741,7 @@ const VCombobox = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
             "class": "v-combobox__menu-icon",
             "color": vTextFieldRef.value?.fieldIconColor,
             "icon": props.menuIcon,
@@ -18747,7 +18829,7 @@ const VConfirmEdit = genericComponent()({
       emit('cancel');
     }
     function actions(actionsProps) {
-      return createVNode(Fragment, null, [createVNode(VBtn, mergeProps({
+      return createElementVNode(Fragment, null, [createVNode(VBtn, mergeProps({
         "disabled": isCancelDisabled.value,
         "variant": "text",
         "color": props.color,
@@ -18763,7 +18845,7 @@ const VConfirmEdit = genericComponent()({
     }
     let actionsUsed = false;
     useRender(() => {
-      return createVNode(Fragment, null, [slots.default?.({
+      return createElementVNode(Fragment, null, [slots.default?.({
         model: internalModel,
         save,
         cancel,
@@ -19646,10 +19728,10 @@ const VDataIterator = genericComponent()({
       groupedItems: paginatedItems.value
     }));
     useRender(() => createVNode(props.tag, {
-      "class": ['v-data-iterator', {
+      "class": normalizeClass(['v-data-iterator', {
         'v-data-iterator--loading': props.loading
-      }, props.class],
-      "style": props.style
+      }, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.header?.(slotProps.value), createVNode(MaybeTransition, {
         "transition": props.transition
@@ -19660,7 +19742,7 @@ const VDataIterator = genericComponent()({
           "active": true
         }, {
           default: slotProps => slots.loader?.(slotProps)
-        }) : createVNode("div", {
+        }) : createElementVNode("div", {
           "key": "items"
         }, [!paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value)])]
       }), slots.footer?.(slotProps.value)]
@@ -19954,44 +20036,44 @@ const VPagination = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-pagination', themeClasses.value, props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-pagination', themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style),
       "role": "navigation",
       "aria-label": t(props.ariaLabel),
       "onKeydown": onKeydown,
       "data-test": "v-pagination-root"
     }, {
-      default: () => [createVNode("ul", {
+      default: () => [createElementVNode("ul", {
         "class": "v-pagination__list"
-      }, [props.showFirstLastPage && createVNode("li", {
+      }, [props.showFirstLastPage && createElementVNode("li", {
         "key": "first",
         "class": "v-pagination__first",
         "data-test": "v-pagination-first"
       }, [slots.first ? slots.first(controls.value.first) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.first), null)]), createVNode("li", {
+      }, controls.value.first), null)]), createElementVNode("li", {
         "key": "prev",
         "class": "v-pagination__prev",
         "data-test": "v-pagination-prev"
       }, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.prev), null)]), items.value.map((item, index) => createVNode("li", {
+      }, controls.value.prev), null)]), items.value.map((item, index) => createElementVNode("li", {
         "key": item.key,
-        "class": ['v-pagination__item', {
+        "class": normalizeClass(['v-pagination__item', {
           'v-pagination__item--is-active': item.isActive
-        }],
+        }]),
         "data-test": "v-pagination-item"
       }, [slots.item ? slots.item(item) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
       }, item.props), {
         default: () => [item.page]
-      })])), createVNode("li", {
+      })])), createElementVNode("li", {
         "key": "next",
         "class": "v-pagination__next",
         "data-test": "v-pagination-next"
       }, [slots.next ? slots.next(controls.value.next) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
-      }, controls.value.next), null)]), props.showFirstLastPage && createVNode("li", {
+      }, controls.value.next), null)]), props.showFirstLastPage && createElementVNode("li", {
         "key": "last",
         "class": "v-pagination__last",
         "data-test": "v-pagination-last"
@@ -20100,20 +20182,20 @@ const VDataTableFooter = genericComponent()({
     }));
     useRender(() => {
       const paginationProps = VPagination.filterProps(props);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-data-table-footer"
-      }, [slots.prepend?.(), createVNode("div", {
+      }, [slots.prepend?.(), createElementVNode("div", {
         "class": "v-data-table-footer__items-per-page"
-      }, [createVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
+      }, [createElementVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
         "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
         "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
         "density": "compact",
         "variant": "outlined",
         "hide-details": true
-      }, null)]), createVNode("div", {
+      }, null)]), createElementVNode("div", {
         "class": "v-data-table-footer__info"
-      }, [createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createVNode("div", {
+      }, [createElementVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createElementVNode("div", {
         "class": "v-data-table-footer__pagination"
       }, [createVNode(VPagination, mergeProps({
         "modelValue": page.value,
@@ -20156,18 +20238,18 @@ const VDataTableColumn = defineFunctionalComponent({
   } = _ref;
   const Tag = props.tag ?? 'td';
   return createVNode(Tag, {
-    "class": ['v-data-table__td', {
+    "class": normalizeClass(['v-data-table__td', {
       'v-data-table-column--fixed': props.fixed,
       'v-data-table-column--last-fixed': props.lastFixed,
       'v-data-table-column--no-padding': props.noPadding,
       'v-data-table-column--nowrap': props.nowrap
-    }, `v-data-table-column--align-${props.align}`],
-    "style": {
+    }, `v-data-table-column--align-${props.align}`]),
+    "style": normalizeStyle({
       height: convertToUnit(props.height),
       width: convertToUnit(props.width),
       maxWidth: convertToUnit(props.maxWidth),
       left: convertToUnit(props.fixedOffset || null)
-    }
+    })
   }, {
     default: () => [slots.default?.()]
   });
@@ -20577,16 +20659,16 @@ const VDataTableHeaders = genericComponent()({
               "onUpdate:modelValue": selectAll
             }, null));
           }
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-data-table-header__content"
-          }, [createVNode("span", null, [column.title]), column.sortable && !props.disableSort && createVNode(VIcon, {
+          }, [createElementVNode("span", null, [column.title]), column.sortable && !props.disableSort && createVNode(VIcon, {
             "key": "icon",
             "class": "v-data-table-header__sort-icon",
             "icon": getSortIcon(column)
-          }, null), props.multiSort && isSorted(column) && createVNode("div", {
+          }, null), props.multiSort && isSorted(column) && createElementVNode("div", {
             "key": "badge",
-            "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
-            "style": backgroundColorStyles.value
+            "class": normalizeClass(['v-data-table-header__sort-badge', ...backgroundColorClasses.value]),
+            "style": normalizeStyle(backgroundColorStyles.value)
           }, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
         }
       });
@@ -20605,7 +20687,7 @@ const VDataTableHeaders = genericComponent()({
         "class": [...headerCellClasses.value],
         "colspan": headers.value.length + 1
       }, props.headerProps), {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-data-table-header__content"
         }, [createVNode(VSelect, {
           "chips": true,
@@ -20629,7 +20711,7 @@ const VDataTableHeaders = genericComponent()({
             }
           }, {
             default: () => [props.item.title, createVNode(VIcon, {
-              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "class": normalizeClass(['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active']),
               "icon": getSortIcon(props.item.raw),
               "size": "small"
             }, null)]
@@ -20638,13 +20720,13 @@ const VDataTableHeaders = genericComponent()({
       });
     };
     useRender(() => {
-      return mobile.value ? createVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+      return mobile.value ? createElementVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createElementVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createElementVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y
-      }, null))])), props.loading && createVNode("tr", {
+      }, null))])), props.loading && createElementVNode("tr", {
         "class": "v-data-table-progress"
-      }, [createVNode("th", {
+      }, [createElementVNode("th", {
         "colspan": columns.value.length
       }, [createVNode(LoaderSlot, {
         "name": "v-data-table-progress",
@@ -20690,11 +20772,11 @@ const VDataTableGroupHeaderRow = genericComponent()({
     const rows = computed(() => {
       return extractRows([props.item]);
     });
-    return () => createVNode("tr", {
+    return () => createElementVNode("tr", {
       "class": "v-data-table-group-header-row",
-      "style": {
+      "style": normalizeStyle({
         '--v-data-table-group-header-row-depth': props.item.depth
-      }
+      })
     }, [columns.value.map(column => {
       if (column.key === 'data-table-group') {
         const icon = isGroupOpen(props.item) ? '$expand' : '$next';
@@ -20714,7 +20796,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
             "variant": "text",
             "icon": icon,
             "onClick": onClick
-          }, null), createVNode("span", null, [props.item.value]), createVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
+          }, null), createElementVNode("span", null, [props.item.value]), createElementVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
         });
       }
       if (column.key === 'data-table-select') {
@@ -20727,13 +20809,13 @@ const VDataTableGroupHeaderRow = genericComponent()({
             indeterminate,
             'onUpdate:modelValue': selectGroup
           }
-        }) ?? createVNode("td", null, [createVNode(VCheckboxBtn, {
+        }) ?? createElementVNode("td", null, [createVNode(VCheckboxBtn, {
           "modelValue": modelValue,
           "indeterminate": indeterminate,
           "onUpdate:modelValue": selectGroup
         }, null)]);
       }
-      return createVNode("td", null, null);
+      return createElementVNode("td", null, null);
     })]);
   }
 });
@@ -20779,10 +20861,10 @@ const VDataTableRow = genericComponent()({
     const {
       columns
     } = useHeaders();
-    useRender(() => createVNode("tr", {
-      "class": ['v-data-table__tr', {
+    useRender(() => createElementVNode("tr", {
+      "class": normalizeClass(['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }, displayClasses.value],
+      }, displayClasses.value]),
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
@@ -20871,9 +20953,9 @@ const VDataTableRow = genericComponent()({
           }
           if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
           const displayValue = toDisplayString(slotProps.value);
-          return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
+          return !mobile.value ? displayValue : createElementVNode(Fragment, null, [createElementVNode("div", {
             "class": "v-data-table__td-title"
-          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createVNode("div", {
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createElementVNode("div", {
             "class": "v-data-table__td-value"
           }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
@@ -20936,22 +21018,22 @@ const VDataTableRows = genericComponent()({
     } = useDisplay(props);
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
-        return createVNode("tr", {
+        return createElementVNode("tr", {
           "class": "v-data-table-rows-loading",
           "key": "loading"
-        }, [createVNode("td", {
+        }, [createElementVNode("td", {
           "colspan": columns.value.length
         }, [slots.loading?.() ?? t(props.loadingText)])]);
       }
       if (!props.loading && !props.items.length && !props.hideNoData) {
-        return createVNode("tr", {
+        return createElementVNode("tr", {
           "class": "v-data-table-rows-no-data",
           "key": "no-data"
-        }, [createVNode("td", {
+        }, [createElementVNode("td", {
           "colspan": columns.value.length
         }, [slots['no-data']?.() ?? t(props.noDataText)])]);
       }
-      return createVNode(Fragment, null, [props.items.map((item, index) => {
+      return createElementVNode(Fragment, null, [props.items.map((item, index) => {
         if (item.type === 'group') {
           const slotProps = {
             index,
@@ -20996,7 +21078,7 @@ const VDataTableRows = genericComponent()({
             internalItem: slotProps.internalItem
           }) : props.rowProps)
         };
-        return createVNode(Fragment, {
+        return createElementVNode(Fragment, {
           "key": itemSlotProps.props.key
         }, [slots.item ? slots.item(itemSlotProps) : createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
       })]);
@@ -21030,22 +21112,22 @@ const VTable = genericComponent()({
       densityClasses
     } = useDensity(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-table', {
+      "class": normalizeClass(['v-table', {
         'v-table--fixed-height': !!props.height,
         'v-table--fixed-header': props.fixedHeader,
         'v-table--fixed-footer': props.fixedFooter,
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
         'v-table--hover': props.hover
-      }, themeClasses.value, densityClasses.value, props.class],
-      "style": props.style
+      }, themeClasses.value, densityClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
-      default: () => [slots.top?.(), slots.default ? createVNode("div", {
+      default: () => [slots.top?.(), slots.default ? createElementVNode("div", {
         "class": "v-table__wrapper",
-        "style": {
+        "style": normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [createVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
+        })
+      }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
     }));
     return {};
   }
@@ -21298,12 +21380,12 @@ const VDataTable = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+        default: () => slots.default ? slots.default(slotProps.value) : createElementVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": paginatedItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createElementVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -21474,25 +21556,25 @@ const VDataTableVirtual = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        wrapper: () => createVNode("div", {
+        wrapper: () => createElementVNode("div", {
           "ref": containerRef,
           "onScrollPassive": handleScroll,
           "onScrollend": handleScrollend,
           "class": "v-table__wrapper",
-          "style": {
+          "style": normalizeStyle({
             height: convertToUnit(props.height)
-          }
-        }, [createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+          })
+        }, [createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", {
           "key": "tbody"
-        }, [createVNode("tr", {
+        }, [createElementVNode("tr", {
           "ref": markerRef,
-          "style": {
+          "style": normalizeStyle({
             height: convertToUnit(paddingTop.value),
             border: 0
-          }
-        }, [createVNode("td", {
+          })
+        }, [createElementVNode("td", {
           "colspan": columns.value.length,
           "style": {
             height: 0,
@@ -21521,12 +21603,12 @@ const VDataTableVirtual = genericComponent()({
               }), slots);
             }
           })
-        }), slots['body.append']?.(slotProps.value), createVNode("tr", {
-          "style": {
+        }), slots['body.append']?.(slotProps.value), createElementVNode("tr", {
+          "style": normalizeStyle({
             height: convertToUnit(paddingBottom.value),
             border: 0
-          }
-        }, [createVNode("td", {
+          })
+        }, [createElementVNode("td", {
           "colspan": columns.value.length,
           "style": {
             height: 0,
@@ -21699,17 +21781,17 @@ const VDataTableServer = genericComponent()({
         "fixedHeader": props.fixedHeader || props.sticky
       }), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+        default: () => slots.default ? slots.default(slotProps.value) : createElementVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createElementVNode("thead", {
           "key": "thead",
           "class": "v-data-table__thead",
           "role": "rowgroup"
-        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createElementVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": flatItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createElementVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -21740,10 +21822,10 @@ const VContainer = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-container', {
+      "class": normalizeClass(['v-container', {
         'v-container--fluid': props.fluid
-      }, rtlClasses.value, props.class],
-      "style": [dimensionStyles.value, props.style]
+      }, rtlClasses.value, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -22062,11 +22144,11 @@ const VDatePickerControls = genericComponent()({
     }
     useRender(() => {
       // TODO: add slot support and scope defaults
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": ['v-date-picker-controls'],
-        "style": {
+        "style": normalizeStyle({
           '--v-date-picker-controls-height': convertToUnit(props.controlHeight)
-        }
+        })
       }, [createVNode(VBtn, {
         "class": "v-date-picker-controls__month-btn",
         "data-testid": "month-btn",
@@ -22083,7 +22165,7 @@ const VDatePickerControls = genericComponent()({
         "icon": props.modeIcon,
         "variant": "text",
         "onClick": onClickYear
-      }, null), createVNode(VSpacer, null, null), createVNode("div", {
+      }, null), createVNode(VSpacer, null, null), createElementVNode("div", {
         "class": "v-date-picker-controls__month"
       }, [createVNode(VBtn, {
         "data-testid": "prev-month",
@@ -22139,24 +22221,24 @@ const VDatePickerHeader = genericComponent()({
     useRender(() => {
       const hasContent = !!(slots.default || props.header);
       const hasAppend = !!(slots.append || props.appendIcon);
-      return createVNode("div", {
-        "class": ['v-date-picker-header', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-date-picker-header', {
           'v-date-picker-header--clickable': !!props.onClick
-        }, backgroundColorClasses.value],
-        "style": backgroundColorStyles.value,
+        }, backgroundColorClasses.value]),
+        "style": normalizeStyle(backgroundColorStyles.value),
         "onClick": onClick
-      }, [slots.prepend && createVNode("div", {
+      }, [slots.prepend && createElementVNode("div", {
         "key": "prepend",
         "class": "v-date-picker-header__prepend"
       }, [slots.prepend()]), hasContent && createVNode(MaybeTransition, {
         "key": "content",
         "name": props.transition
       }, {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "key": props.header,
           "class": "v-date-picker-header__content"
         }, [slots.default?.() ?? props.header])]
-      }), hasAppend && createVNode("div", {
+      }), hasAppend && createElementVNode("div", {
         "class": "v-date-picker-header__append"
       }, [!slots.append ? createVNode(VBtn, {
         "key": "append-btn",
@@ -22442,24 +22524,24 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-month"
-    }, [props.showWeek && createVNode("div", {
+    }, [props.showWeek && createElementVNode("div", {
       "key": "weeks",
       "class": "v-date-picker-month__weeks"
-    }, [!props.hideWeekdays && createVNode("div", {
+    }, [!props.hideWeekdays && createElementVNode("div", {
       "key": "hide-week-days",
       "class": "v-date-picker-month__day"
-    }, [createTextVNode("\xA0")]), weekNumbers.value.map(week => createVNode("div", {
+    }, [createTextVNode("\xA0")]), weekNumbers.value.map(week => createElementVNode("div", {
       "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
     }, [week]))]), createVNode(MaybeTransition, {
       "name": transition.value
     }, {
-      default: () => [createVNode("div", {
+      default: () => [createElementVNode("div", {
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createVNode("div", {
+      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createElementVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -22479,14 +22561,14 @@ const VDatePickerMonth = genericComponent()({
         if (atMax.value && !item.isSelected) {
           item.isDisabled = true;
         }
-        return createVNode("div", {
-          "class": ['v-date-picker-month__day', {
+        return createElementVNode("div", {
+          "class": normalizeClass(['v-date-picker-month__day', {
             'v-date-picker-month__day--adjacent': item.isAdjacent,
             'v-date-picker-month__day--hide-adjacent': item.isHidden,
             'v-date-picker-month__day--selected': item.isSelected,
             'v-date-picker-month__day--week-end': item.isWeekEnd,
             'v-date-picker-month__day--week-start': item.isWeekStart
-          }],
+          }]),
           "data-v-date": !item.isDisabled ? item.isoDate : undefined
         }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null))]);
       })])]
@@ -22536,12 +22618,12 @@ const VDatePickerMonths = genericComponent()({
     watchEffect(() => {
       model.value = model.value ?? adapter.getMonth(adapter.date());
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-months",
-      "style": {
+      "style": normalizeStyle({
         height: convertToUnit(props.height)
-      }
-    }, [createVNode("div", {
+      })
+    }, [createElementVNode("div", {
       "class": "v-date-picker-months__content"
     }, [months.value.map((month, i) => {
       const btnProps = {
@@ -22627,12 +22709,12 @@ const VDatePickerYears = genericComponent()({
         block: 'center'
       });
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-date-picker-years",
-      "style": {
+      "style": normalizeStyle({
         height: convertToUnit(props.height)
-      }
-    }, [createVNode("div", {
+      })
+    }, [createElementVNode("div", {
       "class": "v-date-picker-years__content"
     }, [years.value.map((year, i) => {
       const btnProps = {
@@ -22869,7 +22951,7 @@ const VDatePicker = genericComponent()({
         }, rtlClasses.value, props.class],
         "style": props.style
       }), {
-        title: () => slots.title?.() ?? createVNode("div", {
+        title: () => slots.title?.() ?? createElementVNode("div", {
           "class": "v-date-picker__title"
         }, [t(props.title)]),
         header: () => slots.header ? createVNode(VDefaultsProvider, {
@@ -22888,7 +22970,7 @@ const VDatePicker = genericComponent()({
           ...slots,
           default: undefined
         }),
-        default: () => createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
+        default: () => createElementVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "text": text.value,
           "onClick:next": onClickNext,
@@ -22997,15 +23079,15 @@ const VEmptyState = genericComponent()({
       const hasText = !!(slots.text || props.text);
       const hasMedia = !!(slots.media || props.image || props.icon);
       const size = props.size || (props.image ? 200 : 96);
-      return createVNode("div", {
-        "class": ['v-empty-state', {
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-empty-state', {
           [`v-empty-state--${props.justify}`]: true
-        }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style]
-      }, [hasMedia && createVNode("div", {
+        }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style])
+      }, [hasMedia && createElementVNode("div", {
         "key": "media",
         "class": "v-empty-state__media"
-      }, [!slots.media ? createVNode(Fragment, null, [props.image ? createVNode(VImg, {
+      }, [!slots.media ? createElementVNode(Fragment, null, [props.image ? createVNode(VImg, {
         "key": "image",
         "src": props.image,
         "height": size
@@ -23028,22 +23110,22 @@ const VEmptyState = genericComponent()({
         }
       }, {
         default: () => [slots.media()]
-      })]), hasHeadline && createVNode("div", {
+      })]), hasHeadline && createElementVNode("div", {
         "key": "headline",
         "class": "v-empty-state__headline"
-      }, [slots.headline?.() ?? props.headline]), hasTitle && createVNode("div", {
+      }, [slots.headline?.() ?? props.headline]), hasTitle && createElementVNode("div", {
         "key": "title",
         "class": "v-empty-state__title"
-      }, [slots.title?.() ?? props.title]), hasText && createVNode("div", {
+      }, [slots.title?.() ?? props.title]), hasText && createElementVNode("div", {
         "key": "text",
         "class": "v-empty-state__text",
-        "style": {
+        "style": normalizeStyle({
           maxWidth: convertToUnit(props.textWidth)
-        }
-      }, [slots.text?.() ?? props.text]), slots.default && createVNode("div", {
+        })
+      }, [slots.text?.() ?? props.text]), slots.default && createElementVNode("div", {
         "key": "content",
         "class": "v-empty-state__content"
-      }, [slots.default()]), hasActions && createVNode("div", {
+      }, [slots.default()]), hasActions && createElementVNode("div", {
         "key": "actions",
         "class": "v-empty-state__actions"
       }, [createVNode(VDefaultsProvider, {
@@ -23094,10 +23176,10 @@ const VExpansionPanelText = genericComponent()({
     useRender(() => createVNode(VExpandTransition, {
       "onAfterLeave": onAfterLeave
     }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-expansion-panel-text', props.class],
-        "style": props.style
-      }, [slots.default && hasContent.value && createVNode("div", {
+      default: () => [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(['v-expansion-panel-text', props.class]),
+        "style": normalizeStyle(props.style)
+      }, [slots.default && hasContent.value && createElementVNode("div", {
         "class": "v-expansion-panel-text__wrapper"
       }, [slots.default?.()])]), [[vShow, expansionPanel.isSelected.value]])]
     }));
@@ -23131,7 +23213,7 @@ const makeVExpansionPanelTitleProps = propsFactory({
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVExpansionPanelTitleProps(),
   setup(props, _ref) {
@@ -23155,19 +23237,19 @@ const VExpansionPanelTitle = genericComponent()({
       readonly: props.readonly
     }));
     const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
-    useRender(() => withDirectives(createVNode("button", {
-      "class": ['v-expansion-panel-title', {
+    useRender(() => withDirectives(createElementVNode("button", {
+      "class": normalizeClass(['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value,
         'v-expansion-panel-title--focusable': props.focusable,
         'v-expansion-panel-title--static': props.static
-      }, backgroundColorClasses.value, props.class],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+      }, backgroundColorClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
       "aria-expanded": expansionPanel.isSelected.value,
       "onClick": !props.readonly ? expansionPanel.toggle : undefined
-    }, [createVNode("span", {
+    }, [createElementVNode("span", {
       "class": "v-expansion-panel-title__overlay"
     }, null), slots.default?.(slotProps.value), !props.hideActions && createVNode(VDefaultsProvider, {
       "defaults": {
@@ -23176,10 +23258,10 @@ const VExpansionPanelTitle = genericComponent()({
         }
       }
     }, {
-      default: () => [createVNode("span", {
+      default: () => [createElementVNode("span", {
         "class": "v-expansion-panel-title__icon"
       }, [slots.actions?.(slotProps.value) ?? createVNode(VIcon, null, null)])]
-    })]), [[resolveDirective("ripple"), props.ripple]]));
+    })]), [[Ripple, props.ripple]]));
     return {};
   }
 });
@@ -23236,16 +23318,16 @@ const VExpansionPanel = genericComponent()({
       const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
       const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
       return createVNode(props.tag, {
-        "class": ['v-expansion-panel', {
+        "class": normalizeClass(['v-expansion-panel', {
           'v-expansion-panel--active': groupItem.isSelected.value,
           'v-expansion-panel--before-active': isBeforeSelected.value,
           'v-expansion-panel--after-active': isAfterSelected.value,
           'v-expansion-panel--disabled': isDisabled.value
-        }, roundedClasses.value, backgroundColorClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style]
+        }, roundedClasses.value, backgroundColorClasses.value, props.class]),
+        "style": normalizeStyle([backgroundColorStyles.value, props.style])
       }, {
-        default: () => [createVNode("div", {
-          "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
+        default: () => [createElementVNode("div", {
+          "class": normalizeClass(['v-expansion-panel__shadow', ...elevationClasses.value])
         }, null), createVNode(VDefaultsProvider, {
           "defaults": {
             VExpansionPanelTitle: {
@@ -23325,11 +23407,11 @@ const VExpansionPanels = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', {
+      "class": normalizeClass(['v-expansion-panels', {
         'v-expansion-panels--flat': props.flat,
         'v-expansion-panels--tile': props.tile
-      }, themeClasses.value, variantClass.value, props.class],
-      "style": props.style
+      }, themeClasses.value, variantClass.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.default?.({
         prev,
@@ -23409,22 +23491,22 @@ const VFab = genericComponent()({
     const vFabRef = ref();
     useRender(() => {
       const btnProps = VBtn.filterProps(props);
-      return createVNode("div", {
+      return createElementVNode("div", {
         "ref": vFabRef,
-        "class": ['v-fab', {
+        "class": normalizeClass(['v-fab', {
           'v-fab--absolute': props.absolute,
           'v-fab--app': !!props.app,
           'v-fab--extended': props.extended,
           'v-fab--offset': props.offset,
           [`v-fab--${position.value}`]: hasPosition.value,
           [`v-fab--${orientation.value}`]: hasPosition.value
-        }, props.class],
-        "style": [props.app ? {
+        }, props.class]),
+        "style": normalizeStyle([props.app ? {
           ...layoutItemStyles.value
         } : {
           height: props.absolute ? '100%' : 'inherit'
-        }, props.style]
-      }, [createVNode("div", {
+        }, props.style])
+      }, [createElementVNode("div", {
         "class": "v-fab__container"
       }, [createVNode(MaybeTransition, {
         "appear": props.appear,
@@ -23640,7 +23722,7 @@ const VFileInput = genericComponent()({
                   ...slotProps
                 }
               } = _ref4;
-              return createVNode(Fragment, null, [createVNode("input", mergeProps({
+              return createElementVNode(Fragment, null, [createElementVNode("input", mergeProps({
                 "ref": inputRef,
                 "type": "file",
                 "readonly": isReadonly.value,
@@ -23660,8 +23742,8 @@ const VFileInput = genericComponent()({
                 "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), createVNode("div", {
-                "class": fieldClass
+              }, slotProps, inputAttrs), null), createElementVNode("div", {
+                "class": normalizeClass(fieldClass)
               }, [!!model.value?.length && !props.hideInput && (slots.selection ? slots.selection({
                 fileNames: fileNames.value,
                 totalBytes: totalBytes.value,
@@ -23674,7 +23756,7 @@ const VFileInput = genericComponent()({
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": !!model.value?.length,
           "value": counterValue.value,
           "disabled": props.disabled
@@ -23750,10 +23832,10 @@ const VFooter = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
+      "class": normalizeClass(['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
         height: convertToUnit(props.height)
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -23802,10 +23884,10 @@ const VForm = genericComponent()({
       }
       e.preventDefault();
     }
-    useRender(() => createVNode("form", {
+    useRender(() => createElementVNode("form", {
       "ref": formRef,
-      "class": ['v-form', props.class],
-      "style": props.style,
+      "class": normalizeClass(['v-form', props.class]),
+      "style": normalizeStyle(props.style),
       "novalidate": true,
       "onReset": onReset,
       "onSubmit": onSubmit
@@ -23902,11 +23984,11 @@ const VInfiniteScrollIntersect = defineComponent({
     watch(isIntersecting, async val => {
       emit('intersect', props.side, val);
     });
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "class": "v-infinite-scroll-intersect",
-      "style": {
+      "style": normalizeStyle({
         '--v-infinite-margin-size': props.rootMargin
-      },
+      }),
       "ref": intersectionRef
     }, [createTextVNode("\xA0")]));
     return {};
@@ -24018,7 +24100,7 @@ const VInfiniteScroll = genericComponent()({
         }
       };
       if (status === 'error') return slots.error?.(slotProps);
-      if (status === 'empty') return slots.empty?.(slotProps) ?? createVNode("div", null, [t(props.emptyText)]);
+      if (status === 'empty') return slots.empty?.(slotProps) ?? createElementVNode("div", null, [t(props.emptyText)]);
       if (props.mode === 'manual') {
         if (status === 'loading') {
           return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
@@ -24049,13 +24131,13 @@ const VInfiniteScroll = genericComponent()({
       const intersectMode = props.mode === 'intersect';
       return createVNode(Tag, {
         "ref": rootEl,
-        "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+        "class": normalizeClass(['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
           'v-infinite-scroll--start': hasStartIntersect,
           'v-infinite-scroll--end': hasEndIntersect
-        }],
-        "style": dimensionStyles.value
+        }]),
+        "style": normalizeStyle(dimensionStyles.value)
       }, {
-        default: () => [createVNode("div", {
+        default: () => [createElementVNode("div", {
           "class": "v-infinite-scroll__side"
         }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
           "key": "start",
@@ -24067,7 +24149,7 @@ const VInfiniteScroll = genericComponent()({
           "side": "end",
           "onIntersect": handleIntersect,
           "rootMargin": margin.value
-        }, null), createVNode("div", {
+        }, null), createElementVNode("div", {
           "class": "v-infinite-scroll__side"
         }, [renderSide('end', endStatus.value)])]
       });
@@ -24107,8 +24189,8 @@ const VItemGroup = genericComponent()({
       selected
     } = useGroup(props, VItemGroupSymbol);
     return () => createVNode(props.tag, {
-      "class": ['v-item-group', themeClasses.value, props.class],
-      "style": props.style
+      "class": normalizeClass(['v-item-group', themeClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -24176,10 +24258,10 @@ const VLayout = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    useRender(() => createVNode("div", {
+    useRender(() => createElementVNode("div", {
       "ref": layoutRef,
-      "class": [layoutClasses.value, props.class],
-      "style": [dimensionStyles.value, layoutStyles.value, props.style]
+      "class": normalizeClass([layoutClasses.value, props.class]),
+      "style": normalizeStyle([dimensionStyles.value, layoutStyles.value, props.style])
     }, [slots.default?.()]));
     return {
       getLayoutItem,
@@ -24221,9 +24303,9 @@ const VLayoutItem = genericComponent()({
       active: toRef(() => props.modelValue),
       absolute: toRef(() => props.absolute)
     });
-    return () => createVNode("div", {
-      "class": ['v-layout-item', props.class],
-      "style": [layoutItemStyles.value, props.style]
+    return () => createElementVNode("div", {
+      "class": normalizeClass(['v-layout-item', props.class]),
+      "style": normalizeStyle([layoutItemStyles.value, props.style])
     }, [slots.default?.()]);
   }
 });
@@ -24252,7 +24334,7 @@ const makeVLazyProps = propsFactory({
 const VLazy = genericComponent()({
   name: 'VLazy',
   directives: {
-    intersect: Intersect
+    vIntersect: Intersect
   },
   props: makeVLazyProps(),
   emits: {
@@ -24271,8 +24353,8 @@ const VLazy = genericComponent()({
       isActive.value = isIntersecting;
     }
     useRender(() => withDirectives(createVNode(props.tag, {
-      "class": ['v-lazy', props.class],
-      "style": [dimensionStyles.value, props.style]
+      "class": normalizeClass(['v-lazy', props.class]),
+      "style": normalizeStyle([dimensionStyles.value, props.style])
     }, {
       default: () => [isActive.value && createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -24280,7 +24362,7 @@ const VLazy = genericComponent()({
       }, {
         default: () => [slots.default?.()]
       })]
-    }), [[resolveDirective("intersect"), {
+    }), [[Intersect, {
       handler: onIntersect,
       options: props.options
     }, null]]));
@@ -24308,9 +24390,9 @@ const VLocaleProvider = genericComponent()({
     const {
       rtlClasses
     } = provideLocale(props);
-    useRender(() => createVNode("div", {
-      "class": ['v-locale-provider', rtlClasses.value, props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-locale-provider', rtlClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -24341,12 +24423,12 @@ const VMain = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     useRender(() => createVNode(props.tag, {
-      "class": ['v-main', {
+      "class": normalizeClass(['v-main', {
         'v-main--scrollable': props.scrollable
-      }, props.class],
-      "style": [mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style]
+      }, props.class]),
+      "style": normalizeStyle([mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style])
     }, {
-      default: () => [props.scrollable ? createVNode("div", {
+      default: () => [props.scrollable ? createElementVNode("div", {
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
@@ -24577,7 +24659,7 @@ function useTouch(_ref) {
   function getProgress(pos) {
     let limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'top' ? (pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
-    return limit ? Math.max(0, Math.min(1, progress)) : progress;
+    return limit ? clamp(progress) : progress;
   }
   function onTouchstart(e) {
     if (touchless.value) return;
@@ -24857,7 +24939,7 @@ const VNavigationDrawer = genericComponent()({
     });
     useRender(() => {
       const hasImage = slots.image || props.image;
-      return createVNode(Fragment, null, [createVNode(props.tag, mergeProps({
+      return createElementVNode(Fragment, null, [createVNode(props.tag, mergeProps({
         "ref": rootEl,
         "onMouseenter": runOpenDelay,
         "onMouseleave": runCloseDelay,
@@ -24873,7 +24955,7 @@ const VNavigationDrawer = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, scopeId, attrs), {
-        default: () => [hasImage && createVNode("div", {
+        default: () => [hasImage && createElementVNode("div", {
           "key": "image",
           "class": "v-navigation-drawer__img"
         }, [!slots.image ? createVNode(VImg, {
@@ -24893,17 +24975,17 @@ const VNavigationDrawer = genericComponent()({
               src: props.image
             }
           }
-        }, slots.image)]), slots.prepend && createVNode("div", {
+        }, slots.image)]), slots.prepend && createElementVNode("div", {
           "class": "v-navigation-drawer__prepend"
-        }, [slots.prepend?.()]), createVNode("div", {
+        }, [slots.prepend?.()]), createElementVNode("div", {
           "class": "v-navigation-drawer__content"
-        }, [slots.default?.()]), slots.append && createVNode("div", {
+        }, [slots.default?.()]), slots.append && createElementVNode("div", {
           "class": "v-navigation-drawer__append"
         }, [slots.append?.()])]
       }), createVNode(Transition, {
         "name": "fade-transition"
       }, {
-        default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createVNode("div", mergeProps({
+        default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createElementVNode("div", mergeProps({
           "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
           "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
           "onClick": () => {
@@ -25062,6 +25144,9 @@ const VNumberInput = genericComponent()({
     const controlNodeDefaultHeight = toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
     const incrementSlotProps = {
       props: {
+        style: {
+          touchAction: 'none'
+        },
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown
@@ -25069,6 +25154,9 @@ const VNumberInput = genericComponent()({
     };
     const decrementSlotProps = {
       props: {
+        style: {
+          touchAction: 'none'
+        },
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown
@@ -25101,25 +25189,33 @@ const VNumberInput = genericComponent()({
     }
     function onBeforeinput(e) {
       if (!e.data) return;
-      const existingTxt = e.target?.value;
-      const selectionStart = e.target?.selectionStart;
-      const selectionEnd = e.target?.selectionEnd;
+      const inputElement = e.target;
+      const {
+        value: existingTxt,
+        selectionStart,
+        selectionEnd
+      } = inputElement ?? {};
       const potentialNewInputVal = existingTxt ? existingTxt.slice(0, selectionStart) + e.data + existingTxt.slice(selectionEnd) : e.data;
+      const potentialNewNumber = extractNumber(potentialNewInputVal, props.precision);
+
       // Only numbers, "-", "." are allowed
       // AND "-", "." are allowed only once
       // AND "-" is only allowed at the start
       if (!/^-?(\d+(\.\d*)?|(\.\d+)|\d*|\.)$/.test(potentialNewInputVal)) {
         e.preventDefault();
+        inputElement.value = potentialNewNumber;
       }
       if (props.precision == null) return;
 
       // Ignore decimal digits above precision limit
       if (potentialNewInputVal.split('.')[1]?.length > props.precision) {
         e.preventDefault();
+        inputElement.value = potentialNewNumber;
       }
       // Ignore decimal separator when precision = 0
       if (props.precision === 0 && potentialNewInputVal.includes('.')) {
         e.preventDefault();
+        inputElement.value = potentialNewNumber;
       }
     }
     async function onKeydown(e) {
@@ -25201,17 +25297,18 @@ const VNumberInput = genericComponent()({
       } = VTextField.filterProps(props);
       function incrementControlNode() {
         return !slots.increment ? createVNode(VBtn, {
+          "aria-hidden": "true",
+          "data-testid": "increment",
           "disabled": !canIncrease.value,
           "flat": true,
-          "key": "increment-btn",
           "height": controlNodeDefaultHeight.value,
-          "data-testid": "increment",
-          "aria-hidden": "true",
           "icon": incrementIcon.value,
+          "key": "increment-btn",
           "onClick": onControlClick,
-          "onPointerup": onControlMouseup,
           "onPointerdown": onUpControlMousedown,
+          "onPointerup": onControlMouseup,
           "size": controlNodeSize.value,
+          "style": "touch-action: none",
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "increment-defaults",
@@ -25230,18 +25327,19 @@ const VNumberInput = genericComponent()({
       }
       function decrementControlNode() {
         return !slots.decrement ? createVNode(VBtn, {
+          "aria-hidden": "true",
+          "data-testid": "decrement",
           "disabled": !canDecrease.value,
           "flat": true,
-          "key": "decrement-btn",
           "height": controlNodeDefaultHeight.value,
-          "data-testid": "decrement",
-          "aria-hidden": "true",
           "icon": decrementIcon.value,
-          "size": controlNodeSize.value,
-          "tabindex": "-1",
+          "key": "decrement-btn",
           "onClick": onControlClick,
+          "onPointerdown": onDownControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointerdown": onDownControlMousedown
+          "size": controlNodeSize.value,
+          "style": "touch-action: none",
+          "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "decrement-defaults",
           "defaults": {
@@ -25258,7 +25356,7 @@ const VNumberInput = genericComponent()({
         });
       }
       function controlNode() {
-        return createVNode("div", {
+        return createElementVNode("div", {
           "class": "v-number-input__control"
         }, [decrementControlNode(), createVNode(VDivider, {
           "vertical": controlVariant.value !== 'stacked'
@@ -25269,17 +25367,17 @@ const VNumberInput = genericComponent()({
           "vertical": true
         }, null) : undefined;
       }
-      const appendInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+      const appendInnerControl = controlVariant.value === 'split' ? createElementVNode("div", {
         "class": "v-number-input__control"
       }, [createVNode(VDivider, {
         "vertical": true
-      }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : createVNode(Fragment, null, [dividerNode(), controlNode()]);
+      }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : createElementVNode(Fragment, null, [dividerNode(), controlNode()]);
       const hasAppendInner = slots['append-inner'] || appendInnerControl;
-      const prependInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+      const prependInnerControl = controlVariant.value === 'split' ? createElementVNode("div", {
         "class": "v-number-input__control"
       }, [decrementControlNode(), createVNode(VDivider, {
         "vertical": true
-      }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
+      }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createElementVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef,
@@ -25307,13 +25405,13 @@ const VNumberInput = genericComponent()({
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
+          return createElementVNode(Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
         } : undefined,
         'prepend-inner': hasPrependInner ? function () {
           for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
             args[_key2] = arguments[_key2];
           }
-          return createVNode(Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
+          return createElementVNode(Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
         } : undefined
       });
     });
@@ -25477,16 +25575,16 @@ const VOtpInput = genericComponent()({
     });
     useRender(() => {
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-otp-input', {
           'v-otp-input--divided': !!props.divider
         }, props.class],
         "style": [props.style]
-      }, rootAttrs), [createVNode("div", {
+      }, rootAttrs), [createElementVNode("div", {
         "ref": contentRef,
         "class": "v-otp-input__content",
-        "style": [dimensionStyles.value]
-      }, [fields.value.map((_, i) => createVNode(Fragment, null, [props.divider && i !== 0 && createVNode("span", {
+        "style": normalizeStyle([dimensionStyles.value])
+      }, [fields.value.map((_, i) => createElementVNode(Fragment, null, [props.divider && i !== 0 && createElementVNode("span", {
         "class": "v-otp-input__divider"
       }, [props.divider]), createVNode(VField, {
         "focused": isFocused.value && props.focusAll || focusIndex.value === i,
@@ -25495,7 +25593,7 @@ const VOtpInput = genericComponent()({
         ...slots,
         loader: undefined,
         default: () => {
-          return createVNode("input", {
+          return createElementVNode("input", {
             "ref": val => inputRef.value[i] = val,
             "aria-label": t(props.label, i + 1),
             "autofocus": i === 0 && props.autofocus,
@@ -25515,7 +25613,7 @@ const VOtpInput = genericComponent()({
             "onPaste": event => onPaste(i, event)
           }, null);
         }
-      })])), createVNode("input", mergeProps({
+      })])), createElementVNode("input", mergeProps({
         "class": "v-otp-input-input",
         "type": "hidden"
       }, inputAttrs, {
@@ -25620,10 +25718,10 @@ const VParallax = genericComponent()({
       });
     }
     useRender(() => createVNode(VImg, {
-      "class": ['v-parallax', {
+      "class": normalizeClass(['v-parallax', {
         'v-parallax--active': isIntersecting.value
-      }, props.class],
-      "style": props.style,
+      }, props.class]),
+      "style": normalizeStyle(props.style),
       "ref": root,
       "cover": true,
       "onLoadstart": onScroll,
@@ -25723,7 +25821,7 @@ const VRadioGroup = genericComponent()({
             isDisabled,
             isReadonly
           } = _ref2;
-          return createVNode(Fragment, null, [label && createVNode(VLabel, {
+          return createElementVNode(Fragment, null, [label && createVNode(VLabel, {
             "id": id.value
           }, {
             default: () => [label]
@@ -25861,7 +25959,7 @@ const VRangeSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createElementVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
@@ -25870,18 +25968,18 @@ const VRangeSlider = genericComponent()({
             id,
             messagesId
           } = _ref4;
-          return createVNode("div", {
+          return createElementVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
             "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-          }, [createVNode("input", {
+          }, [createElementVNode("input", {
             "id": `${id.value}_start`,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
             "readonly": !!props.readonly,
             "tabindex": "-1",
             "value": model.value[0]
-          }, null), createVNode("input", {
+          }, null), createElementVNode("input", {
             "id": `${id.value}_stop`,
             "name": props.name || id.value,
             "disabled": !!props.disabled,
@@ -26080,16 +26178,16 @@ const VRating = genericComponent()({
         size: props.size,
         variant: 'plain'
       };
-      return createVNode(Fragment, null, [createVNode("label", {
+      return createElementVNode(Fragment, null, [createElementVNode("label", {
         "for": id,
-        "class": {
+        "class": normalizeClass({
           'v-rating__item--half': props.halfIncrements && value % 1 > 0,
           'v-rating__item--full': props.halfIncrements && value % 1 === 0
-        },
+        }),
         "onMouseenter": onMouseenter,
         "onMouseleave": onMouseleave,
         "onClick": onClick
-      }, [createVNode("span", {
+      }, [createElementVNode("span", {
         "class": "v-rating__hidden"
       }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
         ...itemState.value[index],
@@ -26099,7 +26197,7 @@ const VRating = genericComponent()({
         rating: normalizedValue.value
       }) : createVNode(VBtn, mergeProps({
         "aria-label": t(props.itemAriaLabel, value, props.length)
-      }, btnProps), null)]), createVNode("input", {
+      }, btnProps), null)]), createElementVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
         "id": id,
@@ -26113,31 +26211,31 @@ const VRating = genericComponent()({
     }
     function createLabel(labelProps) {
       if (slots['item-label']) return slots['item-label'](labelProps);
-      if (labelProps.label) return createVNode("span", null, [labelProps.label]);
-      return createVNode("span", null, [createTextVNode("\xA0")]);
+      if (labelProps.label) return createElementVNode("span", null, [labelProps.label]);
+      return createElementVNode("span", null, [createTextVNode("\xA0")]);
     }
     useRender(() => {
       const hasLabels = !!props.itemLabels?.length || slots['item-label'];
       return createVNode(props.tag, {
-        "class": ['v-rating', {
+        "class": normalizeClass(['v-rating', {
           'v-rating--hover': props.hover,
           'v-rating--readonly': props.readonly
-        }, themeClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, {
         default: () => [createVNode(VRatingItem, {
           "value": 0,
           "index": -1,
           "showStar": false
-        }, null), range.value.map((value, i) => createVNode("div", {
+        }, null), range.value.map((value, i) => createElementVNode("div", {
           "class": "v-rating__wrapper"
         }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
           value,
           index: i,
           label: props.itemLabels?.[i]
-        }) : undefined, createVNode("div", {
+        }) : undefined, createElementVNode("div", {
           "class": "v-rating__item"
-        }, [props.halfIncrements ? createVNode(Fragment, null, [createVNode(VRatingItem, {
+        }, [props.halfIncrements ? createElementVNode(Fragment, null, [createVNode(VRatingItem, {
           "value": value - 0.5,
           "index": i * 2
         }, null), createVNode(VRatingItem, {
@@ -26194,8 +26292,8 @@ const rootTypes = {
 };
 function genBone(type) {
   let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return createVNode("div", {
-    "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+  return createElementVNode("div", {
+    "class": normalizeClass(['v-skeleton-loader__bone', `v-skeleton-loader__${type}`])
   }, [children]);
 }
 function genBones(bone) {
@@ -26281,7 +26379,7 @@ const VSkeletonLoader = genericComponent()({
         ariaLabel: t(props.loadingText),
         role: 'alert'
       };
-      return createVNode("div", mergeProps({
+      return createElementVNode("div", mergeProps({
         "class": ['v-skeleton-loader', {
           'v-skeleton-loader--boilerplate': props.boilerplate
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
@@ -26487,7 +26585,7 @@ const VSnackbar = genericComponent()({
         "onTouchend": onTouchend,
         "onAfterLeave": onAfterLeave
       }, scopeId), {
-        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createElementVNode("div", {
           "key": "timer",
           "class": "v-snackbar__timer"
         }, [createVNode(VProgressLinear, {
@@ -26495,7 +26593,7 @@ const VSnackbar = genericComponent()({
           "color": typeof props.timer === 'string' ? props.timer : 'info',
           "max": props.timeout,
           "model-value": countdown.time.value
-        }, null)]), hasContent && createVNode("div", {
+        }, null)]), hasContent && createElementVNode("div", {
           "key": "content",
           "class": "v-snackbar__content",
           "role": "status",
@@ -26509,7 +26607,7 @@ const VSnackbar = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
+          default: () => [createElementVNode("div", {
             "class": "v-snackbar__actions"
           }, [slots.actions({
             isActive
@@ -26593,7 +26691,7 @@ const VSnackbarQueue = genericComponent()({
         modelValue: _,
         ...snackbarProps
       } = VSnackbar.filterProps(props);
-      return createVNode(Fragment, null, [isVisible.value && !!current.value && (slots.default ? createVNode(VDefaultsProvider, {
+      return createElementVNode(Fragment, null, [isVisible.value && !!current.value && (slots.default ? createVNode(VDefaultsProvider, {
         "defaults": {
           VSnackbar: current.value
         }
@@ -26609,7 +26707,7 @@ const VSnackbarQueue = genericComponent()({
         text: slots.text ? () => slots.text?.({
           item: current.value
         }) : undefined,
-        actions: hasActions ? () => createVNode(Fragment, null, [!slots.actions ? createVNode(VBtn, mergeProps(btnProps.value, {
+        actions: hasActions ? () => createElementVNode(Fragment, null, [!slots.actions ? createVNode(VBtn, mergeProps(btnProps.value, {
           "onClick": onClickClose
         }), null) : createVNode(VDefaultsProvider, {
           "defaults": {
@@ -26767,57 +26865,57 @@ const VBarline = genericComponent()({
     const smooth = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-      return createVNode("svg", {
+      return createElementVNode("svg", {
         "display": "block"
-      }, [createVNode("defs", null, [createVNode("linearGradient", {
+      }, [createElementVNode("defs", null, [createElementVNode("linearGradient", {
         "id": id.value,
         "gradientUnits": "userSpaceOnUse",
         "x1": props.gradientDirection === 'left' ? '100%' : '0',
         "y1": props.gradientDirection === 'top' ? '100%' : '0',
         "x2": props.gradientDirection === 'right' ? '100%' : '0',
         "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-      }, [gradientData.map((color, index) => createVNode("stop", {
+      }, [gradientData.map((color, index) => createElementVNode("stop", {
         "offset": index / Math.max(gradientData.length - 1, 1),
         "stop-color": color || 'currentColor'
-      }, null))])]), createVNode("clipPath", {
+      }, null))])]), createElementVNode("clipPath", {
         "id": `${id.value}-clip`
-      }, [bars.value.map(item => createVNode("rect", {
+      }, [bars.value.map(item => createElementVNode("rect", {
         "x": item.x + offsetX.value,
         "y": item.y,
         "width": lineWidth.value,
         "height": item.height,
         "rx": smooth.value,
         "ry": smooth.value
-      }, [props.autoDraw && createVNode(Fragment, null, [createVNode("animate", {
+      }, [props.autoDraw && createElementVNode(Fragment, null, [createElementVNode("animate", {
         "attributeName": "y",
         "from": item.y + item.height,
         "to": item.y,
         "dur": `${autoDrawDuration.value}ms`,
         "fill": "freeze"
-      }, null), createVNode("animate", {
+      }, null), createElementVNode("animate", {
         "attributeName": "height",
         "from": "0",
         "to": item.height,
         "dur": `${autoDrawDuration.value}ms`,
         "fill": "freeze"
-      }, null)])]))]), hasLabels.value && createVNode("g", {
+      }, null)])]))]), hasLabels.value && createElementVNode("g", {
         "key": "labels",
         "style": {
           textAnchor: 'middle',
           dominantBaseline: 'mathematical',
           fill: 'currentColor'
         }
-      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+      }, [parsedLabels.value.map((item, i) => createElementVNode("text", {
         "x": item.x + offsetX.value + lineWidth.value / 2,
         "y": parseInt(props.height, 10) - 2 + (parseInt(props.labelSize, 10) || 7 * 0.75),
         "font-size": Number(props.labelSize) || 7
       }, [slots.label?.({
         index: i,
         value: item.value
-      }) ?? item.value]))]), createVNode("g", {
+      }) ?? item.value]))]), createElementVNode("g", {
         "clip-path": `url(#${id.value}-clip)`,
         "fill": `url(#${id.value})`
-      }, [createVNode("rect", {
+      }, [createElementVNode("rect", {
         "x": 0,
         "y": 0,
         "width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
@@ -26996,39 +27094,39 @@ const VTrendline = genericComponent()({
     }
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-      return createVNode("svg", {
+      return createElementVNode("svg", {
         "display": "block",
         "stroke-width": parseFloat(props.lineWidth) ?? 4
-      }, [createVNode("defs", null, [createVNode("linearGradient", {
+      }, [createElementVNode("defs", null, [createElementVNode("linearGradient", {
         "id": id.value,
         "gradientUnits": "userSpaceOnUse",
         "x1": props.gradientDirection === 'left' ? '100%' : '0',
         "y1": props.gradientDirection === 'top' ? '100%' : '0',
         "x2": props.gradientDirection === 'right' ? '100%' : '0',
         "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-      }, [gradientData.map((color, index) => createVNode("stop", {
+      }, [gradientData.map((color, index) => createElementVNode("stop", {
         "offset": index / Math.max(gradientData.length - 1, 1),
         "stop-color": color || 'currentColor'
-      }, null))])]), hasLabels.value && createVNode("g", {
+      }, null))])]), hasLabels.value && createElementVNode("g", {
         "key": "labels",
         "style": {
           textAnchor: 'middle',
           dominantBaseline: 'mathematical',
           fill: 'currentColor'
         }
-      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+      }, [parsedLabels.value.map((item, i) => createElementVNode("text", {
         "x": item.x + lineWidth.value / 2 + lineWidth.value / 2,
         "y": parseInt(props.height, 10) - 4 + (parseInt(props.labelSize, 10) || 7 * 0.75),
         "font-size": Number(props.labelSize) || 7
       }, [slots.label?.({
         index: i,
         value: item.value
-      }) ?? item.value]))]), createVNode("path", {
+      }) ?? item.value]))]), createElementVNode("path", {
         "ref": path,
         "d": genPath$1(props.fill),
         "fill": props.fill ? `url(#${id.value})` : 'none',
         "stroke": props.fill ? 'none' : `url(#${id.value})`
-      }, null), props.fill && createVNode("path", {
+      }, null), props.fill && createElementVNode("path", {
         "d": genPath$1(false),
         "fill": "none",
         "stroke": props.color ?? props.gradient?.[0]
@@ -27196,7 +27294,7 @@ const VStepperActions = genericComponent()({
       const nextSlotProps = {
         onClick: onClickNext
       };
-      return createVNode("div", {
+      return createElementVNode("div", {
         "class": "v-stepper-actions"
       }, [createVNode(VDefaultsProvider, {
         "defaults": {
@@ -27270,7 +27368,7 @@ const makeVStepperItemProps = propsFactory({
 const VStepperItem = genericComponent()({
   name: 'VStepperItem',
   directives: {
-    Ripple
+    vRipple: Ripple
   },
   props: makeVStepperItemProps(),
   emits: {
@@ -27309,12 +27407,12 @@ const VStepperItem = genericComponent()({
       function onClick() {
         group?.toggle();
       }
-      return withDirectives(createVNode("button", {
-        "class": ['v-stepper-item', {
+      return withDirectives(createElementVNode("button", {
+        "class": normalizeClass(['v-stepper-item', {
           'v-stepper-item--complete': hasCompleted.value,
           'v-stepper-item--disabled': props.disabled,
           'v-stepper-item--error': hasError.value
-        }, group?.selectedClass.value],
+        }, group?.selectedClass.value]),
         "disabled": !props.editable,
         "type": "button",
         "onClick": onClick
@@ -27327,15 +27425,15 @@ const VStepperItem = genericComponent()({
         default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? createVNode(VIcon, {
           "icon": icon.value
         }, null) : step.value)]
-      }), createVNode("div", {
+      }), createElementVNode("div", {
         "class": "v-stepper-item__content"
-      }, [hasTitle && createVNode("div", {
+      }, [hasTitle && createElementVNode("div", {
         "key": "title",
         "class": "v-stepper-item__title"
-      }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && createVNode("div", {
+      }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && createElementVNode("div", {
         "key": "subtitle",
         "class": "v-stepper-item__subtitle"
-      }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[resolveDirective("ripple"), props.ripple && props.editable, null]]);
+      }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[Ripple, props.ripple && props.editable, null]]);
     });
     return {};
   }
@@ -27531,7 +27629,7 @@ const VStepper = genericComponent()({
               raw,
               ...item
             } = _ref2;
-            return createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
+            return createElementVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
               default: slots[`header-item.${item.value}`] ?? slots.header,
               icon: slots.icon,
               title: slots.title,
@@ -27672,14 +27770,14 @@ const VSwitch = genericComponent()({
                 backgroundColorClasses,
                 backgroundColorStyles
               } = _ref3;
-              return createVNode("div", {
-                "class": ['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-                "style": backgroundColorStyles.value,
+              return createElementVNode("div", {
+                "class": normalizeClass(['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+                "style": normalizeStyle(backgroundColorStyles.value),
                 "onClick": onTrackClick
-              }, [slots['track-true'] && createVNode("div", {
+              }, [slots['track-true'] && createElementVNode("div", {
                 "key": "prepend",
                 "class": "v-switch__track-true"
-              }, [slots['track-true'](slotProps)]), slots['track-false'] && createVNode("div", {
+              }, [slots['track-true'](slotProps)]), slots['track-false'] && createElementVNode("div", {
                 "key": "append",
                 "class": "v-switch__track-false"
               }, [slots['track-false'](slotProps)])]);
@@ -27691,11 +27789,11 @@ const VSwitch = genericComponent()({
                 backgroundColorClasses,
                 backgroundColorStyles
               } = _ref4;
-              return createVNode(Fragment, null, [inputNode, createVNode("div", {
-                "class": ['v-switch__thumb', {
+              return createElementVNode(Fragment, null, [inputNode, createElementVNode("div", {
+                "class": normalizeClass(['v-switch__thumb', {
                   'v-switch__thumb--filled': icon || props.loading
-                }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value],
-                "style": props.inset ? undefined : backgroundColorStyles.value
+                }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value]),
+                "style": normalizeStyle(props.inset ? undefined : backgroundColorStyles.value)
               }, [slots.thumb ? createVNode(VDefaultsProvider, {
                 "defaults": {
                   VIcon: {
@@ -27783,10 +27881,10 @@ const VSystemBar = genericComponent()({
       absolute: toRef(() => props.absolute)
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-system-bar', {
+      "class": normalizeClass(['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style])
     }, slots));
     return {};
   }
@@ -27877,10 +27975,10 @@ const VTab = genericComponent()({
         "onGroup:selected": updateSlider
       }), {
         ...slots,
-        default: () => createVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
+        default: () => createElementVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createElementVNode("div", {
           "ref": sliderEl,
-          "class": ['v-tab__slider', sliderColorClasses.value],
-          "style": sliderColorStyles.value
+          "class": normalizeClass(['v-tab__slider', sliderColorClasses.value]),
+          "style": normalizeStyle(sliderColorStyles.value)
         }, null)])
       });
     });
@@ -28032,7 +28130,7 @@ const VTabs = genericComponent()({
     useRender(() => {
       const slideGroupProps = VSlideGroup.filterProps(props);
       const hasWindow = !!(slots.window || props.items.length > 0);
-      return createVNode(Fragment, null, [createVNode(VSlideGroup, mergeProps(slideGroupProps, {
+      return createElementVNode(Fragment, null, [createVNode(VSlideGroup, mergeProps(slideGroupProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
@@ -28105,7 +28203,7 @@ const makeVTextareaProps = propsFactory({
 const VTextarea = genericComponent()({
   name: 'VTextarea',
   directives: {
-    Intersect
+    vIntersect: Intersect
   },
   inheritAttrs: false,
   props: makeVTextareaProps(),
@@ -28278,9 +28376,9 @@ const VTextarea = genericComponent()({
                   ...slotProps
                 }
               } = _ref3;
-              return createVNode(Fragment, null, [props.prefix && createVNode("span", {
+              return createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [props.prefix]), withDirectives(createVNode("textarea", mergeProps({
+              }, [props.prefix]), withDirectives(createElementVNode("textarea", mergeProps({
                 "ref": textareaRef,
                 "class": fieldClass,
                 "value": model.value,
@@ -28293,24 +28391,24 @@ const VTextarea = genericComponent()({
                 "name": props.name,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, slotProps, inputAttrs), null), [[resolveDirective("intersect"), {
+              }, slotProps, inputAttrs), null), [[Intersect, {
                 handler: onIntersect
               }, null, {
                 once: true
-              }]]), props.autoGrow && withDirectives(createVNode("textarea", {
-                "class": [fieldClass, 'v-textarea__sizer'],
+              }]]), props.autoGrow && withDirectives(createElementVNode("textarea", {
+                "class": normalizeClass([fieldClass, 'v-textarea__sizer']),
                 "id": `${slotProps.id}-sizer`,
                 "onUpdate:modelValue": $event => model.value = $event,
                 "ref": sizerRef,
                 "readonly": true,
                 "aria-hidden": "true"
-              }, null), [[vModelText, model.value]]), props.suffix && createVNode("span", {
+              }, null), [[vModelText, model.value]]), props.suffix && createElementVNode("span", {
                 "class": "v-text-field__suffix"
               }, [props.suffix])]);
             }
           });
         },
-        details: hasDetails ? slotProps => createVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+        details: hasDetails ? slotProps => createElementVNode(Fragment, null, [slots.details?.(slotProps), hasCounter && createElementVNode(Fragment, null, [createElementVNode("span", null, null), createVNode(VCounter, {
           "active": props.persistentCounter || isFocused.value,
           "value": counterValue.value,
           "max": max.value,
@@ -28341,8 +28439,8 @@ const VThemeProvider = genericComponent()({
     return () => {
       if (!props.withBackground) return slots.default?.();
       return createVNode(props.tag, {
-        "class": ['v-theme-provider', themeClasses.value, props.class],
-        "style": props.style
+        "class": normalizeClass(['v-theme-provider', themeClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.()]
       });
@@ -28387,21 +28485,21 @@ const VTimelineDivider = genericComponent()({
       backgroundColorClasses: lineColorClasses,
       backgroundColorStyles: lineColorStyles
     } = useBackgroundColor(() => props.lineColor);
-    useRender(() => createVNode("div", {
-      "class": ['v-timeline-divider', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
-      }, props.class],
-      "style": props.style
-    }, [createVNode("div", {
-      "class": ['v-timeline-divider__before', lineColorClasses.value],
-      "style": lineColorStyles.value
-    }, null), !props.hideDot && createVNode("div", {
+      }, props.class]),
+      "style": normalizeStyle(props.style)
+    }, [createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__before', lineColorClasses.value]),
+      "style": normalizeStyle(lineColorStyles.value)
+    }, null), !props.hideDot && createElementVNode("div", {
       "key": "dot",
-      "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
-      "style": sizeStyles.value
-    }, [createVNode("div", {
-      "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
-      "style": backgroundColorStyles.value
+      "class": normalizeClass(['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value]),
+      "style": normalizeStyle(sizeStyles.value)
+    }, [createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value]),
+      "style": normalizeStyle(backgroundColorStyles.value)
     }, [!slots.default ? createVNode(VIcon, {
       "key": "icon",
       "color": props.iconColor,
@@ -28417,9 +28515,9 @@ const VTimelineDivider = genericComponent()({
           size: props.size
         }
       }
-    }, slots.default)])]), createVNode("div", {
-      "class": ['v-timeline-divider__after', lineColorClasses.value],
-      "style": lineColorStyles.value
+    }, slots.default)])]), createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-divider__after', lineColorClasses.value]),
+      "style": normalizeStyle(lineColorStyles.value)
     }, null)]));
     return {};
   }
@@ -28470,19 +28568,19 @@ const VTimelineItem = genericComponent()({
     }, {
       flush: 'post'
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-timeline-item', {
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-timeline-item', {
         'v-timeline-item--fill-dot': props.fillDot,
         'v-timeline-item--side-start': props.side === 'start',
         'v-timeline-item--side-end': props.side === 'end'
-      }, props.class],
-      "style": [{
+      }, props.class]),
+      "style": normalizeStyle([{
         '--v-timeline-dot-size': convertToUnit(dotSize.value),
         '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
-      }, props.style]
-    }, [createVNode("div", {
+      }, props.style])
+    }, [createElementVNode("div", {
       "class": "v-timeline-item__body",
-      "style": dimensionStyles.value
+      "style": normalizeStyle(dimensionStyles.value)
     }, [slots.default?.()]), createVNode(VTimelineDivider, {
       "ref": dotRef,
       "hideDot": props.hideDot,
@@ -28495,7 +28593,7 @@ const VTimelineItem = genericComponent()({
       "rounded": props.rounded
     }, {
       default: slots.icon
-    }), props.density !== 'compact' && createVNode("div", {
+    }), props.density !== 'compact' && createElementVNode("div", {
       "class": "v-timeline-item__opposite"
     }, [!props.hideOpposite && slots.opposite?.()])]));
     return {};
@@ -28588,12 +28686,12 @@ const VTimeline = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+      "class": normalizeClass(['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
         'v-timeline--inset-line': !!props.lineInset
-      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
-      "style": [{
+      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class]),
+      "style": normalizeStyle([{
         '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-      }, props.style]
+      }, props.style])
     }, slots));
     return {};
   }
@@ -28619,9 +28717,9 @@ const VToolbarItems = genericComponent()({
         variant: toRef(() => props.variant)
       }
     });
-    useRender(() => createVNode("div", {
-      "class": ['v-toolbar-items', props.class],
-      "style": props.style
+    useRender(() => createElementVNode("div", {
+      "class": normalizeClass(['v-toolbar-items', props.class]),
+      "style": normalizeStyle(props.style)
     }, [slots.default?.()]));
     return {};
   }
@@ -29218,7 +29316,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.6";
+const version$1 = "3.8.7";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29243,7 +29341,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.6";
+const version = "3.8.7";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };