vuetify 3.8.6 → 3.8.7

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.6
+* Vuetify v3.8.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -514,6 +514,21 @@
   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'];
@@ -618,6 +633,33 @@
       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
 
@@ -1616,18 +1658,18 @@
         return vue.createVNode(props.tag, vue.mergeProps(attrs, {
           "style": null
         }), {
-          default: () => [vue.createVNode("svg", {
+          default: () => [vue.createElementVNode("svg", {
             "class": "v-icon__svg",
             "xmlns": "http://www.w3.org/2000/svg",
             "viewBox": "0 0 24 24",
             "role": "img",
             "aria-hidden": "true"
-          }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? vue.createVNode("path", {
+          }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? vue.createElementVNode("path", {
             "d": path[0],
             "fill-opacity": path[1]
-          }, null) : vue.createVNode("path", {
+          }, null) : vue.createElementVNode("path", {
             "d": path
-          }, null)) : vue.createVNode("path", {
+          }, null)) : vue.createElementVNode("path", {
             "d": props.icon
           }, null)])]
         });
@@ -1651,7 +1693,7 @@
     setup(props) {
       return () => {
         return vue.createVNode(props.tag, {
-          "class": props.icon
+          "class": vue.normalizeClass(props.icon)
         }, null);
       };
     }
@@ -3116,11 +3158,11 @@
       const {
         rtlClasses
       } = useRtl();
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": layoutRef,
-        "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-        "style": [props.style]
-      }, [vue.createVNode("div", {
+        "class": vue.normalizeClass(['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-application__wrap"
       }, [slots.default?.()])]));
       return {
@@ -3160,10 +3202,10 @@
       useRender(() => {
         const hasText = !!(slots.default || slots.text || props.text);
         return vue.createVNode(props.tag, {
-          "class": ['v-toolbar-title', props.class],
-          "style": props.style
+          "class": vue.normalizeClass(['v-toolbar-title', props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, {
-          default: () => [hasText && vue.createVNode("div", {
+          default: () => [hasText && vue.createElementVNode("div", {
             "class": "v-toolbar-title__placeholder"
           }, [slots.text ? slots.text() : props.text, slots.default?.()])]
         });
@@ -3623,16 +3665,16 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-responsive', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-responsive', {
           'v-responsive--inline': props.inline
-        }, props.class],
-        "style": [dimensionStyles.value, props.style]
-      }, [vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-responsive__sizer",
-        "style": aspectStyles.value
-      }, null), slots.additional?.(), slots.default && vue.createVNode("div", {
-        "class": ['v-responsive__content', props.contentClass]
+        "style": vue.normalizeStyle(aspectStyles.value)
+      }, null), slots.additional?.(), slots.default && vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-responsive__content', props.contentClass])
       }, [slots.default()])]));
       return {};
     }
@@ -3866,7 +3908,7 @@
   const VImg = genericComponent()({
     name: 'VImg',
     directives: {
-      intersect: Intersect
+      vIntersect: Intersect
     },
     props: makeVImgProps(),
     emits: {
@@ -3995,11 +4037,11 @@
       }));
       const __image = () => {
         if (!normalisedSrc.value.src || state.value === 'idle') return null;
-        const img = vue.createVNode("img", {
-          "class": ['v-img__img', containClasses.value],
-          "style": {
+        const img = vue.createElementVNode("img", {
+          "class": vue.normalizeClass(['v-img__img', containClasses.value]),
+          "style": vue.normalizeStyle({
             objectPosition: props.position
-          },
+          }),
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
@@ -4016,7 +4058,7 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [vue.withDirectives(sources ? vue.createVNode("picture", {
+          default: () => [vue.withDirectives(sources ? vue.createElementVNode("picture", {
             "class": "v-img__picture"
           }, [sources, img]) : img, [[vue.vShow, state.value === 'loaded']])]
         });
@@ -4024,11 +4066,11 @@
       const __preloadImage = () => vue.createVNode(MaybeTransition, {
         "transition": props.transition
       }, {
-        default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createVNode("img", {
-          "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
-          "style": {
+        default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createElementVNode("img", {
+          "class": vue.normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
+          "style": vue.normalizeStyle({
             objectPosition: props.position
-          },
+          }),
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.lazySrc,
           "alt": props.alt,
@@ -4042,7 +4084,7 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && vue.createVNode("div", {
+          default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && vue.createElementVNode("div", {
             "class": "v-img__placeholder"
           }, [slots.placeholder()])]
         });
@@ -4053,18 +4095,18 @@
           "transition": props.transition,
           "appear": true
         }, {
-          default: () => [state.value === 'error' && vue.createVNode("div", {
+          default: () => [state.value === 'error' && vue.createElementVNode("div", {
             "class": "v-img__error"
           }, [slots.error()])]
         });
       };
       const __gradient = () => {
         if (!props.gradient) return null;
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-img__gradient",
-          "style": {
+          "style": vue.normalizeStyle({
             backgroundImage: `linear-gradient(${props.gradient})`
-          }
+          })
         }, null);
       };
       const isBooted = vue.shallowRef(false);
@@ -4096,9 +4138,9 @@
           "aria-label": props.alt,
           "role": props.alt ? 'img' : undefined
         }), {
-          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          additional: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
           default: slots.default
-        }), [[vue.resolveDirective("intersect"), {
+        }), [[Intersect, {
           handler: init,
           options: props.options
         }, null, {
@@ -4241,16 +4283,16 @@
         const extension = slots.extension?.();
         isExtended.value = !!(props.extended || extension);
         return vue.createVNode(props.tag, {
-          "class": ['v-toolbar', {
+          "class": vue.normalizeClass(['v-toolbar', {
             'v-toolbar--absolute': props.absolute,
             'v-toolbar--collapse': props.collapse,
             'v-toolbar--flat': props.flat,
             'v-toolbar--floating': props.floating,
             [`v-toolbar--density-${props.density}`]: true
-          }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-          "style": [backgroundColorStyles.value, props.style]
+          }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [hasImage && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-toolbar__image"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -4273,19 +4315,19 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-toolbar__content",
-              "style": {
+              "style": vue.normalizeStyle({
                 height: convertToUnit(contentHeight.value)
-              }
-            }, [slots.prepend && vue.createVNode("div", {
+              })
+            }, [slots.prepend && vue.createElementVNode("div", {
               "class": "v-toolbar__prepend"
             }, [slots.prepend?.()]), hasTitle && vue.createVNode(VToolbarTitle, {
               "key": "title",
               "text": props.title
             }, {
               text: slots.title
-            }), slots.default?.(), slots.append && vue.createVNode("div", {
+            }), slots.default?.(), slots.append && vue.createElementVNode("div", {
               "class": "v-toolbar__append"
             }, [slots.append?.()])])]
           }), vue.createVNode(VDefaultsProvider, {
@@ -4296,11 +4338,11 @@
             }
           }, {
             default: () => [vue.createVNode(VExpandTransition, null, {
-              default: () => [isExtended.value && vue.createVNode("div", {
+              default: () => [isExtended.value && vue.createElementVNode("div", {
                 "class": "v-toolbar__extension",
-                "style": {
+                "style": vue.normalizeStyle({
                   height: convertToUnit(extensionHeight.value)
-                }
+                })
               }, [extension])]
             })]
           })]
@@ -4579,12 +4621,12 @@
 
   const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
   function genOverlays(isClickable, name) {
-    return vue.createVNode(vue.Fragment, null, [isClickable && vue.createVNode("span", {
+    return vue.createElementVNode(vue.Fragment, null, [isClickable && vue.createElementVNode("span", {
       "key": "overlay",
-      "class": `${name}__overlay`
-    }, null), vue.createVNode("span", {
+      "class": vue.normalizeClass(`${name}__overlay`)
+    }, null), vue.createElementVNode("span", {
       "key": "underlay",
-      "class": `${name}__underlay`
+      "class": vue.normalizeClass(`${name}__underlay`)
     }, null)]);
   }
   const makeVariantProps = propsFactory({
@@ -4668,10 +4710,10 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-btn-group', {
+          "class": vue.normalizeClass(['v-btn-group', {
             'v-btn-group--divided': props.divided
-          }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-          "style": props.style
+          }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, slots);
       });
     }
@@ -5028,19 +5070,19 @@
         return vue.createVNode(iconData.value.component, {
           "tag": props.tag,
           "icon": iconData.value.icon,
-          "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+          "class": vue.normalizeClass(['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
             'v-icon--clickable': hasClick,
             'v-icon--disabled': props.disabled,
             'v-icon--start': props.start,
             'v-icon--end': props.end
-          }, props.class],
-          "style": [{
+          }, props.class]),
+          "style": vue.normalizeStyle([{
             '--v-icon-opacity': props.opacity
           }, !sizeClasses.value ? {
             fontSize: convertToUnit(props.size),
             height: convertToUnit(props.size),
             width: convertToUnit(props.size)
-          } : undefined, textColorStyles.value, props.style],
+          } : undefined, textColorStyles.value, props.style]),
           "role": hasClick ? 'button' : undefined,
           "aria-hidden": !hasClick,
           "tabindex": hasClick ? props.disabled ? -1 : 0 : undefined
@@ -5137,7 +5179,7 @@
         resizeRef,
         contentRect
       } = useResizeObserver();
-      const normalizedValue = vue.toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
+      const normalizedValue = vue.toRef(() => clamp(parseFloat(props.modelValue), 0, 100));
       const width = vue.toRef(() => Number(props.width));
       const size = vue.toRef(() => {
         // Get size from element if size prop value is small, large etc
@@ -5152,26 +5194,26 @@
       });
       useRender(() => vue.createVNode(props.tag, {
         "ref": root,
-        "class": ['v-progress-circular', {
+        "class": vue.normalizeClass(['v-progress-circular', {
           'v-progress-circular--indeterminate': !!props.indeterminate,
           'v-progress-circular--visible': isIntersecting.value,
           'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
-        }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class],
-        "style": [sizeStyles.value, textColorStyles.value, props.style],
+        }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class]),
+        "style": vue.normalizeStyle([sizeStyles.value, textColorStyles.value, props.style]),
         "role": "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
         "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
       }, {
-        default: () => [vue.createVNode("svg", {
-          "style": {
+        default: () => [vue.createElementVNode("svg", {
+          "style": vue.normalizeStyle({
             transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
-          },
+          }),
           "xmlns": "http://www.w3.org/2000/svg",
           "viewBox": `0 0 ${diameter.value} ${diameter.value}`
-        }, [vue.createVNode("circle", {
-          "class": ['v-progress-circular__underlay', underlayColorClasses.value],
-          "style": underlayColorStyles.value,
+        }, [vue.createElementVNode("circle", {
+          "class": vue.normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
+          "style": vue.normalizeStyle(underlayColorStyles.value),
           "fill": "transparent",
           "cx": "50%",
           "cy": "50%",
@@ -5179,7 +5221,7 @@
           "stroke-width": strokeWidth.value,
           "stroke-dasharray": CIRCUMFERENCE,
           "stroke-dashoffset": 0
-        }, null), vue.createVNode("circle", {
+        }, null), vue.createElementVNode("circle", {
           "class": "v-progress-circular__overlay",
           "fill": "transparent",
           "cx": "50%",
@@ -5188,7 +5230,7 @@
           "stroke-width": strokeWidth.value,
           "stroke-dasharray": CIRCUMFERENCE,
           "stroke-dashoffset": strokeDashOffset.value
-        }, null)]), slots.default && vue.createVNode("div", {
+        }, null)]), slots.default && vue.createElementVNode("div", {
           "class": "v-progress-circular__content"
         }, [slots.default({
           value: normalizedValue.value
@@ -5362,21 +5404,21 @@
       }
       useRender(() => vue.createVNode(props.tag, {
         "ref": intersectionRef,
-        "class": ['v-progress-linear', {
+        "class": vue.normalizeClass(['v-progress-linear', {
           'v-progress-linear--absolute': props.absolute,
           'v-progress-linear--active': props.active && isIntersecting.value,
           'v-progress-linear--reverse': isReversed.value,
           'v-progress-linear--rounded': props.rounded,
           'v-progress-linear--rounded-bar': props.roundedBar,
           'v-progress-linear--striped': props.striped
-        }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
-        "style": [{
+        }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([{
           bottom: props.location === 'bottom' ? 0 : undefined,
           top: props.location === 'top' ? 0 : undefined,
           height: props.active ? convertToUnit(height.value) : 0,
           '--v-progress-linear-height': convertToUnit(height.value),
           ...(props.absolute ? locationStyles.value : {})
-        }, props.style],
+        }, props.style]),
         "role": "progressbar",
         "aria-hidden": props.active ? 'false' : 'true',
         "aria-valuemin": "0",
@@ -5384,10 +5426,10 @@
         "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
         "onClick": props.clickable && handleClick
       }, {
-        default: () => [props.stream && vue.createVNode("div", {
+        default: () => [props.stream && vue.createElementVNode("div", {
           "key": "stream",
-          "class": ['v-progress-linear__stream', textColorClasses.value],
-          "style": {
+          "class": vue.normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
+          "style": vue.normalizeStyle({
             ...textColorStyles.value,
             [isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
             borderTop: `${convertToUnit(height.value / 2)} dotted`,
@@ -5395,35 +5437,35 @@
             top: `calc(50% - ${convertToUnit(height.value / 4)})`,
             width: convertToUnit(100 - normalizedBuffer.value, '%'),
             '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
-          }
-        }, null), vue.createVNode("div", {
-          "class": ['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-          "style": [backgroundColorStyles.value, {
+          })
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, {
             opacity: parseFloat(props.bgOpacity),
             width: props.stream ? 0 : undefined
-          }]
-        }, null), vue.createVNode("div", {
-          "class": ['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined],
-          "style": [bufferColorStyles.value, {
+          }])
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+          "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
             width: convertToUnit(normalizedBuffer.value, '%')
-          }]
+          }])
         }, null), vue.createVNode(vue.Transition, {
           "name": transition.value
         }, {
-          default: () => [!props.indeterminate ? vue.createVNode("div", {
-            "class": ['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined],
-            "style": [barColorStyles.value, {
+          default: () => [!props.indeterminate ? vue.createElementVNode("div", {
+            "class": vue.normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "style": vue.normalizeStyle([barColorStyles.value, {
               width: convertToUnit(normalizedValue.value, '%')
-            }]
-          }, null) : vue.createVNode("div", {
+            }])
+          }, null) : vue.createElementVNode("div", {
             "class": "v-progress-linear__indeterminate"
-          }, [['long', 'short'].map(bar => vue.createVNode("div", {
+          }, [['long', 'short'].map(bar => vue.createElementVNode("div", {
             "key": bar,
-            "class": ['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined],
-            "style": barColorStyles.value
+            "class": vue.normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "style": vue.normalizeStyle(barColorStyles.value)
           }, null))])]
-        }), slots.default && vue.createVNode("div", {
+        }), slots.default && vue.createElementVNode("div", {
           "class": "v-progress-linear__content"
         }, [slots.default({
           value: normalizedValue.value,
@@ -5453,8 +5495,8 @@
     let {
       slots
     } = _ref;
-    return vue.createVNode("div", {
-      "class": `${props.name}__loader`
+    return vue.createElementVNode("div", {
+      "class": vue.normalizeClass(`${props.name}__loader`)
     }, [slots.default?.({
       color: props.color,
       isActive: props.active
@@ -6044,7 +6086,7 @@
           "onClick": onClick,
           "value": valueAttr.value
         }, link.linkProps), {
-          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
+          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createElementVNode("span", {
             "key": "prepend",
             "class": "v-btn__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -6058,7 +6100,7 @@
                 icon: props.prependIcon
               }
             }
-          }, slots.prepend)]), vue.createVNode("span", {
+          }, slots.prepend)]), vue.createElementVNode("span", {
             "class": "v-btn__content",
             "data-no-activator": ""
           }, [!slots.default && hasIcon ? vue.createVNode(VIcon, {
@@ -6074,7 +6116,7 @@
             }
           }, {
             default: () => [slots.default?.() ?? vue.toDisplayString(props.text)]
-          })]), !props.icon && hasAppend && vue.createVNode("span", {
+          })]), !props.icon && hasAppend && vue.createElementVNode("span", {
             "key": "append",
             "class": "v-btn__append"
           }, [!slots.append ? vue.createVNode(VIcon, {
@@ -6088,7 +6130,7 @@
                 icon: props.appendIcon
               }
             }
-          }, slots.append)]), !!props.loading && vue.createVNode("span", {
+          }, slots.append)]), !!props.loading && vue.createElementVNode("span", {
             "key": "loader",
             "class": "v-btn__loader"
           }, [slots.loader?.() ?? vue.createVNode(VProgressCircular, {
@@ -6261,20 +6303,20 @@
         const hasTitle = !!(slots.title || props.title);
         const hasClose = !!(slots.close || props.closable);
         return isActive.value && vue.createVNode(props.tag, {
-          "class": ['v-alert', props.border && {
+          "class": vue.normalizeClass(['v-alert', props.border && {
             'v-alert--border': !!props.border,
             [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
           }, {
             'v-alert--prominent': props.prominent
-          }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
-          "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+          }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class]),
+          "style": vue.normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
           "role": "alert"
         }, {
-          default: () => [genOverlays(false, 'v-alert'), props.border && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-alert'), props.border && vue.createElementVNode("div", {
             "key": "border",
-            "class": ['v-alert__border', textColorClasses.value],
-            "style": textColorStyles.value
-          }, null), hasPrepend && vue.createVNode("div", {
+            "class": vue.normalizeClass(['v-alert__border', textColorClasses.value]),
+            "style": vue.normalizeStyle(textColorStyles.value)
+          }, null), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-alert__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -6292,16 +6334,16 @@
                 size: props.prominent ? 44 : 28
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-alert__content"
           }, [hasTitle && vue.createVNode(VAlertTitle, {
             "key": "title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createVNode("div", {
+          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-alert__append"
-          }, [slots.append()]), hasClose && vue.createVNode("div", {
+          }, [slots.append()]), hasClose && vue.createElementVNode("div", {
             "key": "close",
             "class": "v-alert__close"
           }, [!slots.close ? vue.createVNode(VBtn, vue.mergeProps({
@@ -6374,11 +6416,11 @@
         sizeStyles
       } = useSize(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-avatar', {
+        "class": vue.normalizeClass(['v-avatar', {
           'v-avatar--start': props.start,
           'v-avatar--end': props.end
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
-        "style": [colorStyles.value, sizeStyles.value, props.style]
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class]),
+        "style": vue.normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
       }, {
         default: () => [!slots.default ? props.image ? vue.createVNode(VImg, {
           "key": "image",
@@ -6420,11 +6462,11 @@
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode("label", {
-        "class": ['v-label', {
+      useRender(() => vue.createElementVNode("label", {
+        "class": vue.normalizeClass(['v-label', {
           'v-label--clickable': !!props.onClick
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "onClick": props.onClick
       }, [props.text, slots.default?.()]));
       return {};
@@ -6519,11 +6561,11 @@
           valueComparator: vue.toRef(() => props.valueComparator)
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-selection-control-group', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-selection-control-group', {
           'v-selection-control-group--inline': props.inline
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "role": props.type === 'radio' ? 'radiogroup' : undefined
       }, [slots.default?.()]));
       return {};
@@ -6599,7 +6641,7 @@
   const VSelectionControl = genericComponent()({
     name: 'VSelectionControl',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     inheritAttrs: false,
     props: makeVSelectionControlProps(),
@@ -6670,7 +6712,7 @@
           }
         }) : props.label;
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        const inputNode = vue.createVNode("input", vue.mergeProps({
+        const inputNode = vue.createElementVNode("input", vue.mergeProps({
           "ref": input,
           "checked": model.value,
           "disabled": !!props.disabled,
@@ -6685,7 +6727,7 @@
           "name": props.name,
           "aria-checked": props.type === 'checkbox' ? model.value : undefined
         }, inputAttrs), null);
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-selection-control', {
             'v-selection-control--dirty': model.value,
             'v-selection-control--disabled': props.disabled,
@@ -6696,13 +6738,13 @@
           }, densityClasses.value, props.class]
         }, rootAttrs, {
           "style": props.style
-        }), [vue.createVNode("div", {
-          "class": ['v-selection-control__wrapper', textColorClasses.value],
-          "style": textColorStyles.value
+        }), [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-selection-control__wrapper', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
         }, [slots.default?.({
           backgroundColorClasses,
           backgroundColorStyles
-        }), vue.withDirectives(vue.createVNode("div", {
+        }), vue.withDirectives(vue.createElementVNode("div", {
           "class": ['v-selection-control__input']
         }, [slots.input?.({
           model,
@@ -6717,10 +6759,10 @@
             onBlur,
             id: id.value
           }
-        }) ?? vue.createVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
+        }) ?? vue.createElementVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
           "key": "icon",
           "icon": icon.value
-        }, null), inputNode])]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
+        }, null), inputNode])]), [[Ripple, props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
           "for": id.value,
           "onClick": onClickLabel
         }, {
@@ -6797,7 +6839,8 @@
     function InputIcon(_ref) {
       let {
         name,
-        color
+        color,
+        ...attrs
       } = _ref;
       const localeKey = {
         prepend: 'prependAction',
@@ -6814,13 +6857,13 @@
         callEvent(listener, new PointerEvent('click', e));
       }
       const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
-      return vue.createVNode(VIcon, {
+      return vue.createVNode(VIcon, vue.mergeProps({
         "icon": props[`${name}Icon`],
         "aria-label": label,
         "onClick": listener,
         "onKeydown": onKeydown,
         "color": color
-      }, null);
+      }, attrs), null);
     }
     return {
       InputIcon
@@ -6860,10 +6903,10 @@
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
-        "class": ['v-messages', textColorClasses.value, props.class],
-        "style": [textColorStyles.value, props.style]
+        "class": vue.normalizeClass(['v-messages', textColorClasses.value, props.class]),
+        "style": vue.normalizeStyle([textColorStyles.value, props.style])
       }, {
-        default: () => [props.active && messages.value.map((message, i) => vue.createVNode("div", {
+        default: () => [props.active && messages.value.map((message, i) => vue.createElementVNode("div", {
           "class": "v-messages__message",
           "key": `${i}-${messages.value}`
         }, [slots.message ? slots.message({
@@ -7329,31 +7372,31 @@
         const hasAppend = !!(slots.append || props.appendIcon);
         const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
-        return vue.createVNode("div", {
-          "class": ['v-input', `v-input--${props.direction}`, {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-input', `v-input--${props.direction}`, {
             'v-input--center-affix': props.centerAffix,
             'v-input--focused': props.focused,
             'v-input--glow': props.glow,
             'v-input--hide-spin-buttons': props.hideSpinButtons
-          }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
-          "style": [dimensionStyles.value, props.style]
-        }, [hasPrepend && vue.createVNode("div", {
+          }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class]),
+          "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+        }, [hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-input__prepend"
         }, [slots.prepend?.(slotProps.value), props.prependIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prepend",
           "color": iconColor.value
-        }, null)]), slots.default && vue.createVNode("div", {
+        }, null)]), slots.default && vue.createElementVNode("div", {
           "class": "v-input__control"
-        }, [slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
+        }, [slots.default?.(slotProps.value)]), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-input__append"
         }, [props.appendIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "append",
           "color": iconColor.value
-        }, null), slots.append?.(slotProps.value)]), hasDetails && vue.createVNode("div", {
+        }, null), slots.append?.(slotProps.value)]), hasDetails && vue.createElementVNode("div", {
           "id": messagesId.value,
           "class": "v-input__details",
           "role": "alert",
@@ -7744,7 +7787,7 @@
       min = 0;
       max = scrollHeight + -containerHeight;
     }
-    return Math.max(Math.min(value, max), min);
+    return clamp(value, min, max);
   }
 
   function calculateUpdatedTarget(_ref) {
@@ -8102,42 +8145,42 @@
         return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-slide-group', {
+        "class": vue.normalizeClass(['v-slide-group', {
           'v-slide-group--vertical': !isHorizontal.value,
           'v-slide-group--has-affixes': hasAffixes.value,
           'v-slide-group--is-overflowing': isOverflowing.value
-        }, displayClasses.value, props.class],
-        "style": props.style,
+        }, displayClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
         "onFocus": onFocus
       }, {
-        default: () => [hasAffixes.value && vue.createVNode("div", {
+        default: () => [hasAffixes.value && vue.createElementVNode("div", {
           "key": "prev",
-          "class": ['v-slide-group__prev', {
+          "class": vue.normalizeClass(['v-slide-group__prev', {
             'v-slide-group__prev--disabled': !hasPrev.value
-          }],
+          }]),
           "onMousedown": onFocusAffixes,
           "onClick": () => hasPrev.value && scrollTo('prev')
         }, [slots.prev?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
             "icon": isRtl.value ? props.nextIcon : props.prevIcon
           }, null)]
-        })]), vue.createVNode("div", {
+        })]), vue.createElementVNode("div", {
           "key": "container",
           "ref": containerRef,
           "class": "v-slide-group__container",
           "onScroll": onScroll
-        }, [vue.createVNode("div", {
+        }, [vue.createElementVNode("div", {
           "ref": contentRef,
           "class": "v-slide-group__content",
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
           "onKeydown": onKeydown
-        }, [slots.default?.(slotProps.value)])]), hasAffixes.value && vue.createVNode("div", {
+        }, [slots.default?.(slotProps.value)])]), hasAffixes.value && vue.createElementVNode("div", {
           "key": "next",
-          "class": ['v-slide-group__next', {
+          "class": vue.normalizeClass(['v-slide-group__next', {
             'v-slide-group__next--disabled': !hasNext.value
-          }],
+          }]),
           "onMousedown": onFocusAffixes,
           "onClick": () => hasNext.value && scrollTo('next')
         }, [slots.next?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
@@ -8292,7 +8335,7 @@
   const VChip = genericComponent()({
     name: 'VChip',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVChipProps(),
     emits: {
@@ -8392,7 +8435,7 @@
           default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VExpandXTransition, {
             "key": "filter"
           }, {
-            default: () => [vue.withDirectives(vue.createVNode("div", {
+            default: () => [vue.withDirectives(vue.createElementVNode("div", {
               "class": "v-chip__filter"
             }, [!slots.filter ? vue.createVNode(VIcon, {
               "key": "filter-icon",
@@ -8406,10 +8449,10 @@
                 }
               }
             }, slots.filter)]), [[vue.vShow, group.isSelected.value]])]
-          }), hasPrepend && vue.createVNode("div", {
+          }), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-chip__prepend"
-          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependIcon && vue.createVNode(VIcon, {
+          }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependIcon && vue.createVNode(VIcon, {
             "key": "prepend-icon",
             "icon": props.prependIcon,
             "start": true
@@ -8430,7 +8473,7 @@
                 start: true
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-chip__content",
             "data-no-activator": ""
           }, [slots.default?.({
@@ -8440,10 +8483,10 @@
             toggle: group?.toggle,
             value: group?.value.value,
             disabled: props.disabled
-          }) ?? vue.toDisplayString(props.text)]), hasAppend && vue.createVNode("div", {
+          }) ?? vue.toDisplayString(props.text)]), hasAppend && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-chip__append"
-          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+          }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
             "key": "append-icon",
             "end": true,
             "icon": props.appendIcon
@@ -8464,7 +8507,7 @@
                 icon: props.appendIcon
               }
             }
-          }, slots.append)]), hasClose && vue.createVNode("button", vue.mergeProps({
+          }, slots.append)]), hasClose && vue.createElementVNode("button", vue.mergeProps({
             "key": "close",
             "class": "v-chip__close",
             "type": "button",
@@ -8482,7 +8525,7 @@
               }
             }
           }, slots.close)])]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
+        }), [[Ripple, isClickable.value && props.ripple, null]]);
       };
     }
   });
@@ -9255,13 +9298,13 @@
         }
       }));
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-group', {
+        "class": vue.normalizeClass(['v-list-group', {
           'v-list-group--prepend': list?.hasPrepend.value,
           'v-list-group--fluid': props.fluid,
           'v-list-group--subgroup': props.subgroup,
           'v-list-group--open': isOpen.value
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.activator && vue.createVNode(VDefaultsProvider, {
           "defaults": activatorDefaults.value
@@ -9278,7 +9321,7 @@
           },
           "disabled": !isBooted.value
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-list-group__items",
             "role": "group",
             "aria-labelledby": id.value
@@ -9304,10 +9347,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-item-subtitle', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-list-item-subtitle', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-list-item-subtitle-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -9370,7 +9413,7 @@
   const VListItem = genericComponent()({
     name: 'VListItem',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVListItemProps(),
     emits: {
@@ -9505,10 +9548,10 @@
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, link.linkProps), {
-          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode("div", {
+          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-list-item__prepend"
-          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
+          }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
             "key": "prepend-avatar",
             "density": props.density,
             "image": props.prependAvatar
@@ -9534,9 +9577,9 @@
             }
           }, {
             default: () => [slots.prepend?.(slotProps.value)]
-          }), vue.createVNode("div", {
+          }), vue.createElementVNode("div", {
             "class": "v-list-item__spacer"
-          }, null)]), vue.createVNode("div", {
+          }, null)]), vue.createElementVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
@@ -9551,10 +9594,10 @@
             default: () => [slots.subtitle?.({
               subtitle: props.subtitle
             }) ?? vue.toDisplayString(props.subtitle)]
-          }), slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
+          }), slots.default?.(slotProps.value)]), hasAppend && vue.createElementVNode("div", {
             "key": "append",
             "class": "v-list-item__append"
-          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+          }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
             "key": "append-icon",
             "density": props.density,
             "icon": props.appendIcon
@@ -9580,10 +9623,10 @@
             }
           }, {
             default: () => [slots.append?.(slotProps.value)]
-          }), vue.createVNode("div", {
+          }), vue.createElementVNode("div", {
             "class": "v-list-item__spacer"
           }, null)])]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
+        }), [[Ripple, isClickable.value && props.ripple]]);
       });
       return {
         activate,
@@ -9621,15 +9664,15 @@
       useRender(() => {
         const hasText = !!(slots.default || props.title);
         return vue.createVNode(props.tag, {
-          "class": ['v-list-subheader', {
+          "class": vue.normalizeClass(['v-list-subheader', {
             'v-list-subheader--inset': props.inset,
             'v-list-subheader--sticky': props.sticky
-          }, textColorClasses.value, props.class],
-          "style": [{
+          }, textColorClasses.value, props.class]),
+          "style": vue.normalizeStyle([{
             textColorStyles
-          }, props.style]
+          }, props.style])
         }, {
-          default: () => [hasText && vue.createVNode("div", {
+          default: () => [hasText && vue.createElementVNode("div", {
             "class": "v-list-subheader__text"
           }, [slots.default?.() ?? props.title])]
         });
@@ -9674,25 +9717,25 @@
         return styles;
       });
       useRender(() => {
-        const divider = vue.createVNode("hr", {
-          "class": [{
+        const divider = vue.createElementVNode("hr", {
+          "class": vue.normalizeClass([{
             'v-divider': true,
             'v-divider--inset': props.inset,
             'v-divider--vertical': props.vertical
-          }, themeClasses.value, textColorClasses.value, props.class],
-          "style": [dividerStyles.value, textColorStyles.value, {
+          }, themeClasses.value, textColorClasses.value, props.class]),
+          "style": vue.normalizeStyle([dividerStyles.value, textColorStyles.value, {
             '--v-border-opacity': props.opacity
-          }, props.style],
+          }, props.style]),
           "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
           "role": `${attrs.role || 'separator'}`
         }, null);
         if (!slots.default) return divider;
-        return vue.createVNode("div", {
-          "class": ['v-divider__wrapper', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-divider__wrapper', {
             'v-divider__wrapper--vertical': props.vertical,
             'v-divider__wrapper--inset': props.inset
-          }]
-        }, [divider, vue.createVNode("div", {
+          }])
+        }, [divider, vue.createElementVNode("div", {
           "class": "v-divider__content"
         }, [slots.default()]), divider]);
       });
@@ -10111,12 +10154,12 @@
       useRender(() => {
         return vue.createVNode(props.tag, {
           "ref": contentRef,
-          "class": ['v-list', {
+          "class": vue.normalizeClass(['v-list', {
             'v-list--disabled': props.disabled,
             'v-list--nav': props.nav,
             'v-list--slim': props.slim
-          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
-          "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
           "tabindex": props.disabled ? -1 : 0,
           "role": "listbox",
           "aria-activedescendant": undefined,
@@ -10160,11 +10203,11 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-list-item-action', {
+        "class": vue.normalizeClass(['v-list-item-action', {
           'v-list-item-action--start': props.start,
           'v-list-item-action--end': props.end
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, slots));
       return {};
     }
@@ -10185,11 +10228,11 @@
       } = _ref;
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-list-item-media', {
+          "class": vue.normalizeClass(['v-list-item-media', {
             'v-list-item-media--start': props.start,
             'v-list-item-media--end': props.end
-          }, props.class],
-          "style": props.style
+          }, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, slots);
       });
       return {};
@@ -10278,11 +10321,19 @@
         vue.watch(() => props.locationStrategy, reset);
         vue.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 {
@@ -10293,6 +10344,12 @@
     function onResize(e) {
       updateLocation.value?.(e);
     }
+    function onVisualResize(e) {
+      updateLocation.value?.(e);
+    }
+    function onVisualScroll(e) {
+      updateLocation.value?.(e);
+    }
     return {
       contentStyles,
       updateLocation
@@ -10444,13 +10501,7 @@
         }
       }
       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),
@@ -11341,7 +11392,7 @@
       "name": "fade-transition",
       "appear": true
     }, {
-      default: () => [props.modelValue && vue.createVNode("div", vue.mergeProps({
+      default: () => [props.modelValue && vue.createElementVNode("div", vue.mergeProps({
         "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
         "style": props.color.backgroundColorStyles.value
       }, rest), null)]
@@ -11382,7 +11433,7 @@
   const VOverlay = genericComponent()({
     name: 'VOverlay',
     directives: {
-      ClickOutside
+      vClickOutside: ClickOutside
     },
     inheritAttrs: false,
     props: {
@@ -11562,7 +11613,7 @@
         _onAfterLeave();
         emit('afterLeave');
       }
-      useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
+      useRender(() => vue.createElementVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         targetRef,
         props: vue.mergeProps({
@@ -11572,7 +11623,7 @@
         "disabled": !teleportTarget.value,
         "to": teleportTarget.value
       }, {
-        default: () => [vue.createVNode("div", vue.mergeProps({
+        default: () => [vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-overlay', {
             'v-overlay--absolute': props.absolute || props.contained,
             'v-overlay--active': isActive.value,
@@ -11596,13 +11647,13 @@
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+          default: () => [vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
             "ref": contentEl,
             "class": ['v-overlay__content', props.contentClass],
             "style": [dimensionStyles.value, contentStyles.value]
           }, contentEvents.value, props.contentProps), [slots.default?.({
             isActive
-          })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
+          })]), [[vue.vShow, isActive.value], [ClickOutside, {
             handler: onClickOutside,
             closeConditional,
             include: () => [activatorEl.value]
@@ -11931,11 +11982,11 @@
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-counter', {
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-counter', {
             'text-error': props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
-          }, props.class],
-          "style": props.style
+          }, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, [slots.default ? slots.default({
           counter: counter.value,
           max: props.max,
@@ -11958,10 +12009,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(VLabel, {
-        "class": ['v-field-label', {
+        "class": vue.normalizeClass(['v-field-label', {
           'v-field-label--floating': props.floating
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "aria-hidden": props.floating || undefined
       }, slots));
       return {};
@@ -12138,7 +12189,7 @@
             for: id.value
           }
         }) : props.label;
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-field', {
             'v-field--active': isActive.value,
             'v-field--appended': hasAppend,
@@ -12158,7 +12209,7 @@
           }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
           "style": [backgroundColorStyles.value, props.style],
           "onClick": onClick
-        }, attrs), [vue.createVNode("div", {
+        }, attrs), [vue.createElementVNode("div", {
           "class": "v-field__overlay"
         }, null), vue.createVNode(LoaderSlot, {
           "name": "v-field",
@@ -12166,23 +12217,23 @@
           "color": props.error ? 'error' : typeof props.loading === 'string' ? props.loading : props.color
         }, {
           default: slots.loader
-        }), hasPrepend && vue.createVNode("div", {
+        }), hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-field__prepend-inner"
         }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prependInner",
           "color": iconColor.value
-        }, null), slots['prepend-inner']?.(slotProps.value)]), vue.createVNode("div", {
+        }, null), slots['prepend-inner']?.(slotProps.value)]), vue.createElementVNode("div", {
           "class": "v-field__field",
           "data-no-activator": ""
         }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && vue.createVNode(VFieldLabel, {
           "key": "floating-label",
           "ref": floatingLabelRef,
-          "class": [textColorClasses.value],
+          "class": vue.normalizeClass([textColorClasses.value]),
           "floating": true,
           "for": id.value,
-          "style": textColorStyles.value
+          "style": vue.normalizeStyle(textColorStyles.value)
         }, {
           default: () => [label()]
         }), hasLabel.value && vue.createVNode(VFieldLabel, {
@@ -12200,14 +12251,14 @@
           },
           focus,
           blur
-        }) ?? vue.createVNode("div", {
+        }) ?? vue.createElementVNode("div", {
           "id": id.value,
           "class": "v-field__input",
           "aria-describedby": messagesId.value
         }, null)]), hasClear && vue.createVNode(VExpandXTransition, {
           "key": "clear"
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-field__clearable",
             "onMousedown": e => {
               e.preventDefault();
@@ -12225,27 +12276,29 @@
               props: {
                 onFocus: focus,
                 onBlur: blur,
-                onClick: props['onClick:clear']
+                onClick: props['onClick:clear'],
+                tabindex: -1
               }
             }) : vue.createVNode(InputIcon, {
               "name": "clear",
               "onFocus": focus,
-              "onBlur": blur
+              "onBlur": blur,
+              "tabindex": -1
             }, null)]
           })]), [[vue.vShow, props.dirty]])]
-        }), hasAppend && vue.createVNode("div", {
+        }), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-field__append-inner"
         }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "appendInner",
           "color": iconColor.value
-        }, null)]), vue.createVNode("div", {
-          "class": ['v-field__outline', textColorClasses.value],
-          "style": textColorStyles.value
-        }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+        }, null)]), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-field__outline', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
+        }, [isOutlined && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
           "class": "v-field__outline__start"
-        }, null), hasFloatingLabel.value && vue.createVNode("div", {
+        }, null), hasFloatingLabel.value && vue.createElementVNode("div", {
           "class": "v-field__outline__notch"
         }, [vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
@@ -12253,7 +12306,7 @@
           "for": id.value
         }, {
           default: () => [label()]
-        })]), vue.createVNode("div", {
+        })]), vue.createElementVNode("div", {
           "class": "v-field__outline__end"
         }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
@@ -12294,7 +12347,7 @@
   const VTextField = genericComponent()({
     name: 'VTextField',
     directives: {
-      Intersect
+      vIntersect: Intersect
     },
     inheritAttrs: false,
     props: makeVTextFieldProps(),
@@ -12426,7 +12479,7 @@
                     ...slotProps
                   }
                 } = _ref3;
-                const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
+                const inputNode = vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "value": model.value,
                   "onInput": onInput,
@@ -12439,29 +12492,29 @@
                   "type": props.type,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
+                }, slotProps, inputAttrs), null), [[Intersect, {
                   handler: onIntersect
                 }, null, {
                   once: true
                 }]]);
-                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
+                return vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [vue.createVNode("span", {
+                }, [vue.createElementVNode("span", {
                   "class": "v-text-field__prefix__text"
-                }, [props.prefix])]), slots.default ? vue.createVNode("div", {
-                  "class": fieldClass,
+                }, [props.prefix])]), slots.default ? vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(fieldClass),
                   "data-no-activator": ""
                 }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
                   class: fieldClass
-                }), props.suffix && vue.createVNode("span", {
+                }), props.suffix && vue.createElementVNode("span", {
                   "class": "v-text-field__suffix"
-                }, [vue.createVNode("span", {
+                }, [vue.createElementVNode("span", {
                   "class": "v-text-field__suffix__text"
                 }, [props.suffix])])]);
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": props.persistentCounter || isFocused.value,
             "value": counterValue.value,
             "max": max.value,
@@ -12499,9 +12552,9 @@
       vue.watch(() => contentRect.value?.height, height => {
         if (height != null) emit('update:height', height);
       });
-      useRender(() => props.renderless ? vue.createVNode(vue.Fragment, null, [slots.default?.({
+      useRender(() => props.renderless ? vue.createElementVNode(vue.Fragment, null, [slots.default?.({
         itemRef: resizeRef
-      })]) : vue.createVNode("div", vue.mergeProps({
+      })]) : vue.createElementVNode("div", vue.mergeProps({
         "ref": resizeRef,
         "class": ['v-virtual-scroll__item', props.class],
         "style": props.style
@@ -12836,30 +12889,30 @@
             ...slotProps
           })
         }));
-        return props.renderless ? vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+        return props.renderless ? vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__spacer",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingTop: convertToUnit(paddingTop.value)
-          }
-        }, null), children, vue.createVNode("div", {
+          })
+        }, null), children, vue.createElementVNode("div", {
           "class": "v-virtual-scroll__spacer",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingBottom: convertToUnit(paddingBottom.value)
-          }
-        }, null)]) : vue.createVNode("div", {
+          })
+        }, null)]) : vue.createElementVNode("div", {
           "ref": containerRef,
-          "class": ['v-virtual-scroll', props.class],
+          "class": vue.normalizeClass(['v-virtual-scroll', props.class]),
           "onScrollPassive": handleScroll,
           "onScrollend": handleScrollend,
-          "style": [dimensionStyles.value, props.style]
-        }, [vue.createVNode("div", {
+          "style": vue.normalizeStyle([dimensionStyles.value, props.style])
+        }, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__container",
-          "style": {
+          "style": vue.normalizeStyle({
             paddingTop: convertToUnit(paddingTop.value),
             paddingBottom: convertToUnit(paddingBottom.value)
-          }
+          })
         }, [children])]);
       });
       return {
@@ -13021,6 +13074,7 @@
       const selectedValues = vue.computed(() => model.value.map(selection => selection.value));
       const isFocused = vue.shallowRef(false);
       let keyboardLookupPrefix = '';
+      let keyboardLookupIndex = -1;
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
@@ -13088,18 +13142,46 @@
         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];
         }
       }
 
@@ -13201,7 +13283,7 @@
           "title": t(label.value)
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -13259,7 +13341,7 @@
                       let {
                         isSelected
                       } = _ref3;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -13305,7 +13387,7 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "key": item.value,
               "class": "v-select__selection"
             }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
@@ -13325,9 +13407,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-select__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-select__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -13335,7 +13417,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-select__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon
@@ -13486,17 +13568,17 @@
     if (matches == null || !matches.length) return text;
     return matches.map((match, i) => {
       const start = i === 0 ? 0 : matches[i - 1][1];
-      const result = [vue.createVNode("span", {
-        "class": `${name}__unmask`
-      }, [text.slice(start, match[0])]), vue.createVNode("span", {
-        "class": `${name}__mask`
+      const result = [vue.createElementVNode("span", {
+        "class": vue.normalizeClass(`${name}__unmask`)
+      }, [text.slice(start, match[0])]), vue.createElementVNode("span", {
+        "class": vue.normalizeClass(`${name}__mask`)
       }, [text.slice(match[0], match[1])])];
       if (i === matches.length - 1) {
-        result.push(vue.createVNode("span", {
-          "class": `${name}__unmask`
+        result.push(vue.createElementVNode("span", {
+          "class": vue.normalizeClass(`${name}__unmask`)
         }, [text.slice(match[1])]));
       }
-      return vue.createVNode(vue.Fragment, null, [result]);
+      return vue.createElementVNode(vue.Fragment, null, [result]);
     });
   }
 
@@ -13798,7 +13880,7 @@
           "onKeydown": onKeydown
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -13857,7 +13939,7 @@
                       let {
                         isSelected
                       } = _ref4;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -13906,10 +13988,10 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "key": item.value,
-              "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
-              "style": index === selectionIndex.value ? textColorStyles.value : {}
+              "class": vue.normalizeClass(['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]]),
+              "style": vue.normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
             }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -13927,9 +14009,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-autocomplete__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-autocomplete__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -13937,7 +14019,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-autocomplete__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon,
@@ -14034,12 +14116,12 @@
         }, attrs, {
           "style": props.style
         }), {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-badge__wrapper"
           }, [ctx.slots.default?.(), vue.createVNode(MaybeTransition, {
             "transition": props.transition
           }, {
-            default: () => [vue.withDirectives(vue.createVNode("span", vue.mergeProps({
+            default: () => [vue.withDirectives(vue.createElementVNode("span", vue.mergeProps({
               "class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
               "style": [backgroundColorStyles.value, textColorStyles.value, props.inline ? {} : locationStyles.value],
               "aria-atomic": "true",
@@ -14076,9 +14158,9 @@
           variant: 'text'
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-banner-actions', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-banner-actions', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -14164,15 +14246,15 @@
         const hasPrependMedia = !!(props.avatar || props.icon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         return vue.createVNode(props.tag, {
-          "class": ['v-banner', {
+          "class": vue.normalizeClass(['v-banner', {
             'v-banner--stacked': props.stacked || mobile.value,
             'v-banner--sticky': props.sticky,
             [`v-banner--${props.lines}-line`]: !!props.lines
-          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-          "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
+          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
           "role": "banner"
         }, {
-          default: () => [hasPrepend && vue.createVNode("div", {
+          default: () => [hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-banner__prepend"
           }, [!slots.prepend ? vue.createVNode(VAvatar, {
@@ -14192,7 +14274,7 @@
                 image: props.avatar
               }
             }
-          }, slots.prepend)]), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createElementVNode("div", {
             "class": "v-banner__content"
           }, [hasText && vue.createVNode(VBannerText, {
             "key": "text"
@@ -14301,16 +14383,16 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-bottom-navigation', {
+          "class": vue.normalizeClass(['v-bottom-navigation', {
             'v-bottom-navigation--active': isActive.value,
             'v-bottom-navigation--grow': props.grow,
             'v-bottom-navigation--shift': props.mode === 'shift'
-          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-          "style": [backgroundColorStyles.value, layoutItemStyles.value, {
+          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, {
             height: convertToUnit(height.value)
-          }, ssrBootStyles.value, props.style]
+          }, ssrBootStyles.value, props.style])
         }, {
-          default: () => [slots.default && vue.createVNode("div", {
+          default: () => [slots.default && vue.createElementVNode("div", {
             "class": "v-bottom-navigation__content"
           }, [slots.default()])]
         });
@@ -14497,10 +14579,10 @@
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode("li", {
+      useRender(() => vue.createElementVNode("li", {
         "aria-hidden": "true",
-        "class": ['v-breadcrumbs-divider', props.class],
-        "style": props.style
+        "class": vue.normalizeClass(['v-breadcrumbs-divider', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots?.default?.() ?? props.divider]));
       return {};
     }
@@ -14535,15 +14617,15 @@
       } = useTextColor(() => isActive.value ? props.activeColor : props.color);
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-breadcrumbs-item', {
+          "class": vue.normalizeClass(['v-breadcrumbs-item', {
             'v-breadcrumbs-item--active': isActive.value,
             'v-breadcrumbs-item--disabled': props.disabled,
             [`${props.activeClass}`]: isActive.value && props.activeClass
-          }, textColorClasses.value, props.class],
-          "style": [textColorStyles.value, props.style],
+          }, textColorClasses.value, props.class]),
+          "style": vue.normalizeStyle([textColorStyles.value, props.style]),
           "aria-current": isActive.value ? 'page' : undefined
         }, {
-          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createVNode("a", vue.mergeProps({
+          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createElementVNode("a", vue.mergeProps({
             "class": "v-breadcrumbs-item--link",
             "onClick": link.navigate
           }, link.linkProps), [slots.default?.() ?? props.title])]
@@ -14619,10 +14701,10 @@
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.icon);
         return vue.createVNode(props.tag, {
-          "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
-          "style": [backgroundColorStyles.value, props.style]
+          "class": vue.normalizeClass(['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [hasPrepend && vue.createVNode("li", {
+          default: () => [hasPrepend && vue.createElementVNode("li", {
             "key": "prepend",
             "class": "v-breadcrumbs__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -14643,7 +14725,7 @@
               item,
               raw
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [slots.item?.({
+            return vue.createElementVNode(vue.Fragment, null, [slots.item?.({
               item,
               index
             }) ?? vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
@@ -14682,9 +14764,9 @@
           variant: 'text'
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-card-actions', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-card-actions', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -14703,10 +14785,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-card-subtitle', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-card-subtitle', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-card-subtitle-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -14745,13 +14827,13 @@
         const hasAppend = !!(hasAppendMedia || slots.append);
         const hasTitle = !!(props.title != null || slots.title);
         const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-        return vue.createVNode("div", {
-          "class": ['v-card-item', props.class],
-          "style": props.style
-        }, [hasPrepend && vue.createVNode("div", {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-card-item', props.class]),
+          "style": vue.normalizeStyle(props.style)
+        }, [hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-card-item__prepend"
-        }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
+        }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
           "key": "prepend-avatar",
           "density": props.density,
           "image": props.prependAvatar
@@ -14772,7 +14854,7 @@
               icon: props.prependIcon
             }
           }
-        }, slots.prepend)]), vue.createVNode("div", {
+        }, slots.prepend)]), vue.createElementVNode("div", {
           "class": "v-card-item__content"
         }, [hasTitle && vue.createVNode(VCardTitle, {
           "key": "title"
@@ -14782,10 +14864,10 @@
           "key": "subtitle"
         }, {
           default: () => [slots.subtitle?.() ?? vue.toDisplayString(props.subtitle)]
-        }), slots.default?.()]), hasAppend && vue.createVNode("div", {
+        }), slots.default?.()]), hasAppend && vue.createElementVNode("div", {
           "key": "append",
           "class": "v-card-item__append"
-        }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+        }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
           "key": "append-icon",
           "density": props.density,
           "icon": props.appendIcon
@@ -14825,10 +14907,10 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-card-text', props.class],
-        "style": [{
+        "class": vue.normalizeClass(['v-card-text', props.class]),
+        "style": vue.normalizeStyle([{
           '--v-card-text-opacity': props.opacity
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -14884,7 +14966,7 @@
   const VCard = genericComponent()({
     name: 'VCard',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVCardProps(),
     setup(props, _ref) {
@@ -14948,7 +15030,7 @@
           "onClick": isClickable && link.navigate,
           "tabindex": props.disabled ? -1 : undefined
         }, link.linkProps), {
-          default: () => [hasImage && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-card__image"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -14991,7 +15073,7 @@
           }), slots.default?.(), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
           }), genOverlays(isClickable, 'v-card')]
-        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple]]);
+        }), [[Ripple, isClickable && props.ripple]]);
       });
       return {};
     }
@@ -15150,7 +15232,7 @@
   const VWindow = genericComponent()({
     name: 'VWindow',
     directives: {
-      Touch
+      vTouch: Touch
     },
     props: makeVWindowProps(),
     emits: {
@@ -15222,7 +15304,7 @@
         };
         arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
           props: prevProps
-        }) : vue.createVNode(VBtn, prevProps, null) : vue.createVNode("div", null, null));
+        }) : vue.createVNode(VBtn, prevProps, null) : vue.createElementVNode("div", null, null));
         const nextProps = {
           icon: isRtl.value ? props.prevIcon : props.nextIcon,
           class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
@@ -15231,7 +15313,7 @@
         };
         arrows.push(canMoveForward.value ? slots.next ? slots.next({
           props: nextProps
-        }) : vue.createVNode(VBtn, nextProps, null) : vue.createVNode("div", null, null));
+        }) : vue.createVNode(VBtn, nextProps, null) : vue.createElementVNode("div", null, null));
         return arrows;
       });
       const touchOptions = vue.computed(() => {
@@ -15257,24 +15339,24 @@
       });
       useRender(() => vue.withDirectives(vue.createVNode(props.tag, {
         "ref": rootRef,
-        "class": ['v-window', {
+        "class": vue.normalizeClass(['v-window', {
           'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-        }, themeClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
-        default: () => [vue.createVNode("div", {
+        default: () => [vue.createElementVNode("div", {
           "class": "v-window__container",
-          "style": {
+          "style": vue.normalizeStyle({
             height: transitionHeight.value
-          }
+          })
         }, [slots.default?.({
           group
-        }), props.showArrows !== false && vue.createVNode("div", {
+        }), props.showArrows !== false && vue.createElementVNode("div", {
           "class": "v-window__controls"
         }, [arrows.value])]), slots.additional?.({
           group
         })]
-      }), [[vue.resolveDirective("touch"), touchOptions.value]]));
+      }), [[Touch, touchOptions.value]]));
       return {
         group
       };
@@ -15359,12 +15441,12 @@
             let {
               group
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [!props.hideDelimiters && vue.createVNode("div", {
+            return vue.createElementVNode(vue.Fragment, null, [!props.hideDelimiters && vue.createElementVNode("div", {
               "class": "v-carousel__controls",
-              "style": {
+              "style": vue.normalizeStyle({
                 left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
                 right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-              }
+              })
             }, [group.items.value.length > 0 && vue.createVNode(VDefaultsProvider, {
               "defaults": {
                 VBtn: {
@@ -15418,7 +15500,7 @@
   const VWindowItem = genericComponent()({
     name: 'VWindowItem',
     directives: {
-      Touch
+      vTouch: Touch
     },
     props: makeVWindowItemProps(),
     emits: {
@@ -15502,9 +15584,9 @@
         "transition": transition.value,
         "disabled": !isBooted.value
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-window-item', groupItem.selectedClass.value, props.class],
-          "style": props.style
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-window-item', groupItem.selectedClass.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
       return {
@@ -15704,21 +15786,21 @@
         immediate: true
       });
       vue.onMounted(() => updateCanvas());
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": resizeRef,
-        "class": ['v-color-picker-canvas', props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-color-picker-canvas', props.class]),
+        "style": vue.normalizeStyle(props.style),
         "onMousedown": handleMouseDown,
         "onTouchstartPassive": handleMouseDown
-      }, [vue.createVNode("canvas", {
+      }, [vue.createElementVNode("canvas", {
         "ref": canvasRef,
         "width": canvasWidth.value,
         "height": canvasHeight.value
-      }, null), props.color && vue.createVNode("div", {
-        "class": ['v-color-picker-canvas__dot', {
+      }, null), props.color && vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-canvas__dot', {
           'v-color-picker-canvas__dot--disabled': props.disabled
-        }],
-        "style": dotStyles.value
+        }]),
+        "style": vue.normalizeStyle(dotStyles.value)
       }, null)]));
       return {};
     }
@@ -15918,9 +16000,9 @@
       label,
       ...rest
     } = _ref;
-    return vue.createVNode("div", {
+    return vue.createElementVNode("div", {
       "class": "v-color-picker-edit__input"
-    }, [vue.createVNode("input", rest, null), vue.createVNode("span", null, [label])]);
+    }, [vue.createElementVNode("input", vue.normalizeProps(vue.guardReactiveProps(rest)), null), vue.createElementVNode("span", null, [label])]);
   };
   const makeVColorPickerEditProps = propsFactory({
     color: Object,
@@ -15977,9 +16059,9 @@
           };
         });
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-edit', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-edit', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [inputs.value?.map(props => vue.createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && vue.createVNode(VBtn, {
         "icon": "$unfold",
         "size": "x-small",
@@ -16143,7 +16225,7 @@
       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));
     }
@@ -16322,7 +16404,7 @@
   const VSliderThumb = genericComponent()({
     name: 'VSliderThumb',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVSliderThumbProps(),
     emits: {
@@ -16402,15 +16484,15 @@
       }
       useRender(() => {
         const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%');
-        return vue.createVNode("div", {
-          "class": ['v-slider-thumb', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-thumb', {
             'v-slider-thumb--focused': props.focused,
             'v-slider-thumb--pressed': props.focused && mousePressed.value
-          }, props.class, rtlClasses.value],
-          "style": [{
+          }, props.class, rtlClasses.value]),
+          "style": vue.normalizeStyle([{
             '--v-slider-thumb-position': positionPercentage,
             '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-          }, props.style],
+          }, props.style]),
           "role": "slider",
           "tabindex": disabled.value ? -1 : 0,
           "aria-label": props.name,
@@ -16420,25 +16502,25 @@
           "aria-readonly": !!readonly.value,
           "aria-orientation": direction.value,
           "onKeydown": !readonly.value ? onKeydown : undefined
-        }, [vue.createVNode("div", {
-          "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
-          "style": {
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
+          "style": vue.normalizeStyle({
             ...textColorStyles.value
-          }
-        }, null), vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-slider-thumb__ripple', textColorClasses.value],
-          "style": textColorStyles.value
-        }, null), [[vue.resolveDirective("ripple"), props.ripple, null, {
+          })
+        }, null), vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
+          "style": vue.normalizeStyle(textColorStyles.value)
+        }, null), [[Ripple, props.ripple, null, {
           circle: true,
           center: true
         }]]), vue.createVNode(VScaleTransition, {
           "origin": "bottom center"
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
+          default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-slider-thumb__label-container"
-          }, [vue.createVNode("div", {
+          }, [vue.createElementVNode("div", {
             "class": ['v-slider-thumb__label']
-          }, [vue.createVNode("div", null, [slots['thumb-label']?.({
+          }, [vue.createElementVNode("div", null, [slots['thumb-label']?.({
             modelValue: props.modelValue
           }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
         })]);
@@ -16515,17 +16597,17 @@
         const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
         return ticks.map((tick, index) => {
           const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
-          return vue.createVNode("div", {
+          return vue.createElementVNode("div", {
             "key": tick.value,
-            "class": ['v-slider-track__tick', {
+            "class": vue.normalizeClass(['v-slider-track__tick', {
               'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
               'v-slider-track__tick--first': tick.value === min.value,
               'v-slider-track__tick--last': tick.value === max.value
-            }],
-            "style": {
+            }]),
+            "style": vue.normalizeStyle({
               [startDir.value]: directionValue
-            }
-          }, [(tick.label || slots['tick-label']) && vue.createVNode("div", {
+            })
+          }, [(tick.label || slots['tick-label']) && vue.createElementVNode("div", {
             "class": "v-slider-track__tick-label"
           }, [slots['tick-label']?.({
             tick,
@@ -16534,30 +16616,30 @@
         });
       });
       useRender(() => {
-        return vue.createVNode("div", {
-          "class": ['v-slider-track', roundedClasses.value, props.class],
-          "style": [{
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track', roundedClasses.value, props.class]),
+          "style": vue.normalizeStyle([{
             '--v-slider-track-size': convertToUnit(trackSize.value),
             '--v-slider-tick-size': convertToUnit(tickSize.value)
-          }, props.style]
-        }, [vue.createVNode("div", {
-          "class": ['v-slider-track__background', trackColorClasses.value, {
+          }, props.style])
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__background', trackColorClasses.value, {
             'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
-          }],
-          "style": {
+          }]),
+          "style": vue.normalizeStyle({
             ...backgroundStyles.value,
             ...trackColorStyles.value
-          }
-        }, null), vue.createVNode("div", {
-          "class": ['v-slider-track__fill', trackFillColorClasses.value],
-          "style": {
+          })
+        }, null), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__fill', trackFillColorClasses.value]),
+          "style": vue.normalizeStyle({
             ...trackFillStyles.value,
             ...trackFillColorStyles.value
-          }
-        }, null), showTicks.value && vue.createVNode("div", {
-          "class": ['v-slider-track__ticks', {
+          })
+        }, null), showTicks.value && vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-slider-track__ticks', {
             'v-slider-track__ticks--always-show': showTicks.value === 'always'
-          }]
+          }])
         }, [computedTicks.value])]);
       });
       return {};
@@ -16651,7 +16733,7 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "id": slotProps.id.value,
             "class": "v-slider__label",
             "text": props.label
@@ -16661,11 +16743,11 @@
               id,
               messagesId
             } = _ref4;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
               "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-            }, [vue.createVNode("input", {
+            }, [vue.createElementVNode("input", {
               "id": id.value,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
@@ -16738,12 +16820,12 @@
           });
         } catch (e) {}
       }
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-preview', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
-        }, props.class],
-        "style": props.style
-      }, [SUPPORTS_EYE_DROPPER && vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
+      }, [SUPPORTS_EYE_DROPPER && vue.createElementVNode("div", {
         "class": "v-color-picker-preview__eye-dropper",
         "key": "eyeDropper"
       }, [vue.createVNode(VBtn, {
@@ -16752,13 +16834,13 @@
         "icon": "$eyeDropper",
         "variant": "plain",
         "onClick": openEyeDropper
-      }, null)]), vue.createVNode("div", {
+      }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__dot"
-      }, [vue.createVNode("div", {
-        "style": {
+      }, [vue.createElementVNode("div", {
+        "style": vue.normalizeStyle({
           background: HSVtoCSS(props.color ?? nullColor)
-        }
-      }, null)]), vue.createVNode("div", {
+        })
+      }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__sliders"
       }, [vue.createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__hue",
@@ -17143,24 +17225,24 @@
       let {
         emit
       } = _ref;
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-color-picker-swatches', props.class],
-        "style": [{
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-color-picker-swatches', props.class]),
+        "style": vue.normalizeStyle([{
           maxHeight: convertToUnit(props.maxHeight)
-        }, props.style]
-      }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
+        }, props.style])
+      }, [vue.createElementVNode("div", null, [props.swatches.map(swatch => vue.createElementVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
         const rgba = parseColor(color);
         const hsva = RGBtoHSV(rgba);
         const background = RGBtoCSS(rgba);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
-        }, [vue.createVNode("div", {
-          "style": {
+        }, [vue.createElementVNode("div", {
+          "style": vue.normalizeStyle({
             background
-          }
+          })
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
           "icon": "$success",
@@ -17219,8 +17301,8 @@
         roundedClasses
       } = useRounded(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
+        "class": vue.normalizeClass(['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -17259,17 +17341,17 @@
           }, props.class],
           "style": props.style
         }), {
-          default: () => [!props.hideHeader && vue.createVNode("div", {
+          default: () => [!props.hideHeader && vue.createElementVNode("div", {
             "key": "header",
-            "class": [backgroundColorClasses.value],
-            "style": [backgroundColorStyles.value]
+            "class": vue.normalizeClass([backgroundColorClasses.value]),
+            "style": vue.normalizeStyle([backgroundColorStyles.value])
           }, [hasTitle && vue.createVNode(VPickerTitle, {
             "key": "picker-title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), slots.header && vue.createVNode("div", {
+          }), slots.header && vue.createElementVNode("div", {
             "class": "v-picker__header"
-          }, [slots.header()])]), vue.createVNode("div", {
+          }, [slots.header()])]), vue.createElementVNode("div", {
             "class": "v-picker__body"
           }, [slots.default?.()]), slots.actions && vue.createVNode(VDefaultsProvider, {
             "defaults": {
@@ -17279,7 +17361,7 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-picker__actions"
             }, [slots.actions()])]
           })]
@@ -18141,7 +18223,7 @@
           }, props.style]
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
+          default: () => vue.createElementVNode(vue.Fragment, null, [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
             "key": "canvas",
             "color": currentColor.value,
             "onUpdate:color": updateColor,
@@ -18149,7 +18231,7 @@
             "dotSize": props.dotSize,
             "width": props.width,
             "height": props.canvasHeight
-          }, null), (!props.hideSliders || !props.hideInputs) && vue.createVNode("div", {
+          }, null), (!props.hideSliders || !props.hideInputs) && vue.createElementVNode("div", {
             "key": "controls",
             "class": "v-color-picker__controls"
           }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
@@ -18524,7 +18606,7 @@
           "onKeydown": onKeydown
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
             "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -18583,7 +18665,7 @@
                       let {
                         isSelected
                       } = _ref5;
-                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      return vue.createElementVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
@@ -18632,10 +18714,10 @@
               index
             })) : undefined;
             if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "key": item.value,
-              "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
-              "style": index === selectionIndex.value ? textColorStyles.value : {}
+              "class": vue.normalizeClass(['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]]),
+              "style": vue.normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
             }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -18653,9 +18735,9 @@
               }
             }, {
               default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
+            }) : slotContent ?? vue.createElementVNode("span", {
               "class": "v-combobox__selection-text"
-            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createElementVNode("span", {
               "class": "v-combobox__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -18663,7 +18745,7 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
               "class": "v-combobox__menu-icon",
               "color": vTextFieldRef.value?.fieldIconColor,
               "icon": props.menuIcon,
@@ -18751,7 +18833,7 @@
         emit('cancel');
       }
       function actions(actionsProps) {
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isCancelDisabled.value,
           "variant": "text",
           "color": props.color,
@@ -18767,7 +18849,7 @@
       }
       let actionsUsed = false;
       useRender(() => {
-        return vue.createVNode(vue.Fragment, null, [slots.default?.({
+        return vue.createElementVNode(vue.Fragment, null, [slots.default?.({
           model: internalModel,
           save,
           cancel,
@@ -19650,10 +19732,10 @@
         groupedItems: paginatedItems.value
       }));
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-data-iterator', {
+        "class": vue.normalizeClass(['v-data-iterator', {
           'v-data-iterator--loading': props.loading
-        }, props.class],
-        "style": props.style
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.header?.(slotProps.value), vue.createVNode(MaybeTransition, {
           "transition": props.transition
@@ -19664,7 +19746,7 @@
             "active": true
           }, {
             default: slotProps => slots.loader?.(slotProps)
-          }) : vue.createVNode("div", {
+          }) : vue.createElementVNode("div", {
             "key": "items"
           }, [!paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value)])]
         }), slots.footer?.(slotProps.value)]
@@ -19958,44 +20040,44 @@
       }
       useRender(() => vue.createVNode(props.tag, {
         "ref": resizeRef,
-        "class": ['v-pagination', themeClasses.value, props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-pagination', themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "role": "navigation",
         "aria-label": t(props.ariaLabel),
         "onKeydown": onKeydown,
         "data-test": "v-pagination-root"
       }, {
-        default: () => [vue.createVNode("ul", {
+        default: () => [vue.createElementVNode("ul", {
           "class": "v-pagination__list"
-        }, [props.showFirstLastPage && vue.createVNode("li", {
+        }, [props.showFirstLastPage && vue.createElementVNode("li", {
           "key": "first",
           "class": "v-pagination__first",
           "data-test": "v-pagination-first"
         }, [slots.first ? slots.first(controls.value.first) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.first), null)]), vue.createVNode("li", {
+        }, controls.value.first), null)]), vue.createElementVNode("li", {
           "key": "prev",
           "class": "v-pagination__prev",
           "data-test": "v-pagination-prev"
         }, [slots.prev ? slots.prev(controls.value.prev) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createVNode("li", {
+        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createElementVNode("li", {
           "key": item.key,
-          "class": ['v-pagination__item', {
+          "class": vue.normalizeClass(['v-pagination__item', {
             'v-pagination__item--is-active': item.isActive
-          }],
+          }]),
           "data-test": "v-pagination-item"
         }, [slots.item ? slots.item(item) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
         }, item.props), {
           default: () => [item.page]
-        })])), vue.createVNode("li", {
+        })])), vue.createElementVNode("li", {
           "key": "next",
           "class": "v-pagination__next",
           "data-test": "v-pagination-next"
         }, [slots.next ? slots.next(controls.value.next) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
-        }, controls.value.next), null)]), props.showFirstLastPage && vue.createVNode("li", {
+        }, controls.value.next), null)]), props.showFirstLastPage && vue.createElementVNode("li", {
           "key": "last",
           "class": "v-pagination__last",
           "data-test": "v-pagination-last"
@@ -20104,20 +20186,20 @@
       }));
       useRender(() => {
         const paginationProps = VPagination.filterProps(props);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-data-table-footer"
-        }, [slots.prepend?.(), vue.createVNode("div", {
+        }, [slots.prepend?.(), vue.createElementVNode("div", {
           "class": "v-data-table-footer__items-per-page"
-        }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+        }, [vue.createElementVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
           "items": itemsPerPageOptions.value,
           "modelValue": itemsPerPage.value,
           "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
           "density": "compact",
           "variant": "outlined",
           "hide-details": true
-        }, null)]), vue.createVNode("div", {
+        }, null)]), vue.createElementVNode("div", {
           "class": "v-data-table-footer__info"
-        }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
+        }, [vue.createElementVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createElementVNode("div", {
           "class": "v-data-table-footer__pagination"
         }, [vue.createVNode(VPagination, vue.mergeProps({
           "modelValue": page.value,
@@ -20160,18 +20242,18 @@
     } = _ref;
     const Tag = props.tag ?? 'td';
     return vue.createVNode(Tag, {
-      "class": ['v-data-table__td', {
+      "class": vue.normalizeClass(['v-data-table__td', {
         'v-data-table-column--fixed': props.fixed,
         'v-data-table-column--last-fixed': props.lastFixed,
         'v-data-table-column--no-padding': props.noPadding,
         'v-data-table-column--nowrap': props.nowrap
-      }, `v-data-table-column--align-${props.align}`],
-      "style": {
+      }, `v-data-table-column--align-${props.align}`]),
+      "style": vue.normalizeStyle({
         height: convertToUnit(props.height),
         width: convertToUnit(props.width),
         maxWidth: convertToUnit(props.maxWidth),
         left: convertToUnit(props.fixedOffset || null)
-      }
+      })
     }, {
       default: () => [slots.default?.()]
     });
@@ -20581,16 +20663,16 @@
                 "onUpdate:modelValue": selectAll
               }, null));
             }
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-data-table-header__content"
-            }, [vue.createVNode("span", null, [column.title]), column.sortable && !props.disableSort && vue.createVNode(VIcon, {
+            }, [vue.createElementVNode("span", null, [column.title]), column.sortable && !props.disableSort && vue.createVNode(VIcon, {
               "key": "icon",
               "class": "v-data-table-header__sort-icon",
               "icon": getSortIcon(column)
-            }, null), props.multiSort && isSorted(column) && vue.createVNode("div", {
+            }, null), props.multiSort && isSorted(column) && vue.createElementVNode("div", {
               "key": "badge",
-              "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
-              "style": backgroundColorStyles.value
+              "class": vue.normalizeClass(['v-data-table-header__sort-badge', ...backgroundColorClasses.value]),
+              "style": vue.normalizeStyle(backgroundColorStyles.value)
             }, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
           }
         });
@@ -20609,7 +20691,7 @@
           "class": [...headerCellClasses.value],
           "colspan": headers.value.length + 1
         }, props.headerProps), {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-data-table-header__content"
           }, [vue.createVNode(VSelect, {
             "chips": true,
@@ -20633,7 +20715,7 @@
               }
             }, {
               default: () => [props.item.title, vue.createVNode(VIcon, {
-                "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+                "class": vue.normalizeClass(['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active']),
                 "icon": getSortIcon(props.item.raw),
                 "size": "small"
               }, null)]
@@ -20642,13 +20724,13 @@
         });
       };
       useRender(() => {
-        return mobile.value ? vue.createVNode("tr", null, [vue.createVNode(VDataTableMobileHeaderCell, null, null)]) : vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
+        return mobile.value ? vue.createElementVNode("tr", null, [vue.createVNode(VDataTableMobileHeaderCell, null, null)]) : vue.createElementVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createElementVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
           "column": column,
           "x": x,
           "y": y
-        }, null))])), props.loading && vue.createVNode("tr", {
+        }, null))])), props.loading && vue.createElementVNode("tr", {
           "class": "v-data-table-progress"
-        }, [vue.createVNode("th", {
+        }, [vue.createElementVNode("th", {
           "colspan": columns.value.length
         }, [vue.createVNode(LoaderSlot, {
           "name": "v-data-table-progress",
@@ -20694,11 +20776,11 @@
       const rows = vue.computed(() => {
         return extractRows([props.item]);
       });
-      return () => vue.createVNode("tr", {
+      return () => vue.createElementVNode("tr", {
         "class": "v-data-table-group-header-row",
-        "style": {
+        "style": vue.normalizeStyle({
           '--v-data-table-group-header-row-depth': props.item.depth
-        }
+        })
       }, [columns.value.map(column => {
         if (column.key === 'data-table-group') {
           const icon = isGroupOpen(props.item) ? '$expand' : '$next';
@@ -20718,7 +20800,7 @@
               "variant": "text",
               "icon": icon,
               "onClick": onClick
-            }, null), vue.createVNode("span", null, [props.item.value]), vue.createVNode("span", null, [vue.createTextVNode("("), rows.value.length, vue.createTextVNode(")")])]
+            }, null), vue.createElementVNode("span", null, [props.item.value]), vue.createElementVNode("span", null, [vue.createTextVNode("("), rows.value.length, vue.createTextVNode(")")])]
           });
         }
         if (column.key === 'data-table-select') {
@@ -20731,13 +20813,13 @@
               indeterminate,
               'onUpdate:modelValue': selectGroup
             }
-          }) ?? vue.createVNode("td", null, [vue.createVNode(VCheckboxBtn, {
+          }) ?? vue.createElementVNode("td", null, [vue.createVNode(VCheckboxBtn, {
             "modelValue": modelValue,
             "indeterminate": indeterminate,
             "onUpdate:modelValue": selectGroup
           }, null)]);
         }
-        return vue.createVNode("td", null, null);
+        return vue.createElementVNode("td", null, null);
       })]);
     }
   });
@@ -20783,10 +20865,10 @@
       const {
         columns
       } = useHeaders();
-      useRender(() => vue.createVNode("tr", {
-        "class": ['v-data-table__tr', {
+      useRender(() => vue.createElementVNode("tr", {
+        "class": vue.normalizeClass(['v-data-table__tr', {
           'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-        }, displayClasses.value],
+        }, displayClasses.value]),
         "onClick": props.onClick,
         "onContextmenu": props.onContextmenu,
         "onDblclick": props.onDblclick
@@ -20875,9 +20957,9 @@
             }
             if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
             const displayValue = vue.toDisplayString(slotProps.value);
-            return !mobile.value ? displayValue : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+            return !mobile.value ? displayValue : vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
               "class": "v-data-table__td-title"
-            }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), vue.createVNode("div", {
+            }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), vue.createElementVNode("div", {
               "class": "v-data-table__td-value"
             }, [slots[slotName]?.(slotProps) ?? displayValue])]);
           }
@@ -20940,22 +21022,22 @@
       } = useDisplay(props);
       useRender(() => {
         if (props.loading && (!props.items.length || slots.loading)) {
-          return vue.createVNode("tr", {
+          return vue.createElementVNode("tr", {
             "class": "v-data-table-rows-loading",
             "key": "loading"
-          }, [vue.createVNode("td", {
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length
           }, [slots.loading?.() ?? t(props.loadingText)])]);
         }
         if (!props.loading && !props.items.length && !props.hideNoData) {
-          return vue.createVNode("tr", {
+          return vue.createElementVNode("tr", {
             "class": "v-data-table-rows-no-data",
             "key": "no-data"
-          }, [vue.createVNode("td", {
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length
           }, [slots['no-data']?.() ?? t(props.noDataText)])]);
         }
-        return vue.createVNode(vue.Fragment, null, [props.items.map((item, index) => {
+        return vue.createElementVNode(vue.Fragment, null, [props.items.map((item, index) => {
           if (item.type === 'group') {
             const slotProps = {
               index,
@@ -21000,7 +21082,7 @@
               internalItem: slotProps.internalItem
             }) : props.rowProps)
           };
-          return vue.createVNode(vue.Fragment, {
+          return vue.createElementVNode(vue.Fragment, {
             "key": itemSlotProps.props.key
           }, [slots.item ? slots.item(itemSlotProps) : vue.createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
         })]);
@@ -21034,22 +21116,22 @@
         densityClasses
       } = useDensity(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-table', {
+        "class": vue.normalizeClass(['v-table', {
           'v-table--fixed-height': !!props.height,
           'v-table--fixed-header': props.fixedHeader,
           'v-table--fixed-footer': props.fixedFooter,
           'v-table--has-top': !!slots.top,
           'v-table--has-bottom': !!slots.bottom,
           'v-table--hover': props.hover
-        }, themeClasses.value, densityClasses.value, props.class],
-        "style": props.style
+        }, themeClasses.value, densityClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
-        default: () => [slots.top?.(), slots.default ? vue.createVNode("div", {
+        default: () => [slots.top?.(), slots.default ? vue.createElementVNode("div", {
           "class": "v-table__wrapper",
-          "style": {
+          "style": vue.normalizeStyle({
             height: convertToUnit(props.height)
-          }
-        }, [vue.createVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
+          })
+        }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
       }));
       return {};
     }
@@ -21302,12 +21384,12 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createElementVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
             "items": paginatedItems.value
           }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -21478,25 +21560,25 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          wrapper: () => vue.createVNode("div", {
+          wrapper: () => vue.createElementVNode("div", {
             "ref": containerRef,
             "onScrollPassive": handleScroll,
             "onScrollend": handleScrollend,
             "class": "v-table__wrapper",
-            "style": {
+            "style": vue.normalizeStyle({
               height: convertToUnit(props.height)
-            }
-          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            })
+          }, [vue.createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", {
             "key": "tbody"
-          }, [vue.createVNode("tr", {
+          }, [vue.createElementVNode("tr", {
             "ref": markerRef,
-            "style": {
+            "style": vue.normalizeStyle({
               height: convertToUnit(paddingTop.value),
               border: 0
-            }
-          }, [vue.createVNode("td", {
+            })
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
               height: 0,
@@ -21525,12 +21607,12 @@
                 }), slots);
               }
             })
-          }), slots['body.append']?.(slotProps.value), vue.createVNode("tr", {
-            "style": {
+          }), slots['body.append']?.(slotProps.value), vue.createElementVNode("tr", {
+            "style": vue.normalizeStyle({
               height: convertToUnit(paddingBottom.value),
               border: 0
-            }
-          }, [vue.createVNode("td", {
+            })
+          }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
               height: 0,
@@ -21703,17 +21785,17 @@
           "fixedHeader": props.fixedHeader || props.sticky
         }), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createElementVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead",
             "class": "v-data-table__thead",
             "role": "rowgroup"
-          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createVNode("tbody", {
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", {
             "class": "v-data-table__tbody",
             "role": "rowgroup"
           }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
             "items": flatItems.value
           }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -21744,10 +21826,10 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-container', {
+        "class": vue.normalizeClass(['v-container', {
           'v-container--fluid': props.fluid
-        }, rtlClasses.value, props.class],
-        "style": [dimensionStyles.value, props.style]
+        }, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -22066,11 +22148,11 @@
       }
       useRender(() => {
         // TODO: add slot support and scope defaults
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": ['v-date-picker-controls'],
-          "style": {
+          "style": vue.normalizeStyle({
             '--v-date-picker-controls-height': convertToUnit(props.controlHeight)
-          }
+          })
         }, [vue.createVNode(VBtn, {
           "class": "v-date-picker-controls__month-btn",
           "data-testid": "month-btn",
@@ -22087,7 +22169,7 @@
           "icon": props.modeIcon,
           "variant": "text",
           "onClick": onClickYear
-        }, null), vue.createVNode(VSpacer, null, null), vue.createVNode("div", {
+        }, null), vue.createVNode(VSpacer, null, null), vue.createElementVNode("div", {
           "class": "v-date-picker-controls__month"
         }, [vue.createVNode(VBtn, {
           "data-testid": "prev-month",
@@ -22143,24 +22225,24 @@
       useRender(() => {
         const hasContent = !!(slots.default || props.header);
         const hasAppend = !!(slots.append || props.appendIcon);
-        return vue.createVNode("div", {
-          "class": ['v-date-picker-header', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-date-picker-header', {
             'v-date-picker-header--clickable': !!props.onClick
-          }, backgroundColorClasses.value],
-          "style": backgroundColorStyles.value,
+          }, backgroundColorClasses.value]),
+          "style": vue.normalizeStyle(backgroundColorStyles.value),
           "onClick": onClick
-        }, [slots.prepend && vue.createVNode("div", {
+        }, [slots.prepend && vue.createElementVNode("div", {
           "key": "prepend",
           "class": "v-date-picker-header__prepend"
         }, [slots.prepend()]), hasContent && vue.createVNode(MaybeTransition, {
           "key": "content",
           "name": props.transition
         }, {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "key": props.header,
             "class": "v-date-picker-header__content"
           }, [slots.default?.() ?? props.header])]
-        }), hasAppend && vue.createVNode("div", {
+        }), hasAppend && vue.createElementVNode("div", {
           "class": "v-date-picker-header__append"
         }, [!slots.append ? vue.createVNode(VBtn, {
           "key": "append-btn",
@@ -22446,24 +22528,24 @@
           model.value = [value];
         }
       }
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-month"
-      }, [props.showWeek && vue.createVNode("div", {
+      }, [props.showWeek && vue.createElementVNode("div", {
         "key": "weeks",
         "class": "v-date-picker-month__weeks"
-      }, [!props.hideWeekdays && vue.createVNode("div", {
+      }, [!props.hideWeekdays && vue.createElementVNode("div", {
         "key": "hide-week-days",
         "class": "v-date-picker-month__day"
-      }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createVNode("div", {
+      }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createElementVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
       }, [week]))]), vue.createVNode(MaybeTransition, {
         "name": transition.value
       }, {
-        default: () => [vue.createVNode("div", {
+        default: () => [vue.createElementVNode("div", {
           "ref": daysRef,
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
-        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createVNode("div", {
+        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createElementVNode("div", {
           "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
@@ -22483,14 +22565,14 @@
           if (atMax.value && !item.isSelected) {
             item.isDisabled = true;
           }
-          return vue.createVNode("div", {
-            "class": ['v-date-picker-month__day', {
+          return vue.createElementVNode("div", {
+            "class": vue.normalizeClass(['v-date-picker-month__day', {
               'v-date-picker-month__day--adjacent': item.isAdjacent,
               'v-date-picker-month__day--hide-adjacent': item.isHidden,
               'v-date-picker-month__day--selected': item.isSelected,
               'v-date-picker-month__day--week-end': item.isWeekEnd,
               'v-date-picker-month__day--week-start': item.isWeekStart
-            }],
+            }]),
             "data-v-date": !item.isDisabled ? item.isoDate : undefined
           }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? vue.createVNode(VBtn, slotProps.props, null))]);
         })])]
@@ -22540,12 +22622,12 @@
       vue.watchEffect(() => {
         model.value = model.value ?? adapter.getMonth(adapter.date());
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-months",
-        "style": {
+        "style": vue.normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [vue.createVNode("div", {
+        })
+      }, [vue.createElementVNode("div", {
         "class": "v-date-picker-months__content"
       }, [months.value.map((month, i) => {
         const btnProps = {
@@ -22631,12 +22713,12 @@
           block: 'center'
         });
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-years",
-        "style": {
+        "style": vue.normalizeStyle({
           height: convertToUnit(props.height)
-        }
-      }, [vue.createVNode("div", {
+        })
+      }, [vue.createElementVNode("div", {
         "class": "v-date-picker-years__content"
       }, [years.value.map((year, i) => {
         const btnProps = {
@@ -22873,7 +22955,7 @@
           }, rtlClasses.value, props.class],
           "style": props.style
         }), {
-          title: () => slots.title?.() ?? vue.createVNode("div", {
+          title: () => slots.title?.() ?? vue.createElementVNode("div", {
             "class": "v-date-picker__title"
           }, [t(props.title)]),
           header: () => slots.header ? vue.createVNode(VDefaultsProvider, {
@@ -22892,7 +22974,7 @@
             ...slots,
             default: undefined
           }),
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
+          default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
             "disabled": disabled.value,
             "text": text.value,
             "onClick:next": onClickNext,
@@ -23001,15 +23083,15 @@
         const hasText = !!(slots.text || props.text);
         const hasMedia = !!(slots.media || props.image || props.icon);
         const size = props.size || (props.image ? 200 : 96);
-        return vue.createVNode("div", {
-          "class": ['v-empty-state', {
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-empty-state', {
             [`v-empty-state--${props.justify}`]: true
-          }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class],
-          "style": [backgroundColorStyles.value, dimensionStyles.value, props.style]
-        }, [hasMedia && vue.createVNode("div", {
+          }, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style])
+        }, [hasMedia && vue.createElementVNode("div", {
           "key": "media",
           "class": "v-empty-state__media"
-        }, [!slots.media ? vue.createVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
+        }, [!slots.media ? vue.createElementVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
           "key": "image",
           "src": props.image,
           "height": size
@@ -23032,22 +23114,22 @@
           }
         }, {
           default: () => [slots.media()]
-        })]), hasHeadline && vue.createVNode("div", {
+        })]), hasHeadline && vue.createElementVNode("div", {
           "key": "headline",
           "class": "v-empty-state__headline"
-        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createVNode("div", {
+        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createElementVNode("div", {
           "key": "title",
           "class": "v-empty-state__title"
-        }, [slots.title?.() ?? props.title]), hasText && vue.createVNode("div", {
+        }, [slots.title?.() ?? props.title]), hasText && vue.createElementVNode("div", {
           "key": "text",
           "class": "v-empty-state__text",
-          "style": {
+          "style": vue.normalizeStyle({
             maxWidth: convertToUnit(props.textWidth)
-          }
-        }, [slots.text?.() ?? props.text]), slots.default && vue.createVNode("div", {
+          })
+        }, [slots.text?.() ?? props.text]), slots.default && vue.createElementVNode("div", {
           "key": "content",
           "class": "v-empty-state__content"
-        }, [slots.default()]), hasActions && vue.createVNode("div", {
+        }, [slots.default()]), hasActions && vue.createElementVNode("div", {
           "key": "actions",
           "class": "v-empty-state__actions"
         }, [vue.createVNode(VDefaultsProvider, {
@@ -23098,10 +23180,10 @@
       useRender(() => vue.createVNode(VExpandTransition, {
         "onAfterLeave": onAfterLeave
       }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-expansion-panel-text', props.class],
-          "style": props.style
-        }, [slots.default && hasContent.value && vue.createVNode("div", {
+        default: () => [vue.withDirectives(vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-expansion-panel-text', props.class]),
+          "style": vue.normalizeStyle(props.style)
+        }, [slots.default && hasContent.value && vue.createElementVNode("div", {
           "class": "v-expansion-panel-text__wrapper"
         }, [slots.default?.()])]), [[vue.vShow, expansionPanel.isSelected.value]])]
       }));
@@ -23135,7 +23217,7 @@
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVExpansionPanelTitleProps(),
     setup(props, _ref) {
@@ -23159,19 +23241,19 @@
         readonly: props.readonly
       }));
       const icon = vue.toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
-      useRender(() => vue.withDirectives(vue.createVNode("button", {
-        "class": ['v-expansion-panel-title', {
+      useRender(() => vue.withDirectives(vue.createElementVNode("button", {
+        "class": vue.normalizeClass(['v-expansion-panel-title', {
           'v-expansion-panel-title--active': expansionPanel.isSelected.value,
           'v-expansion-panel-title--focusable': props.focusable,
           'v-expansion-panel-title--static': props.static
-        }, backgroundColorClasses.value, props.class],
-        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
+        }, backgroundColorClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
         "type": "button",
         "tabindex": expansionPanel.disabled.value ? -1 : undefined,
         "disabled": expansionPanel.disabled.value,
         "aria-expanded": expansionPanel.isSelected.value,
         "onClick": !props.readonly ? expansionPanel.toggle : undefined
-      }, [vue.createVNode("span", {
+      }, [vue.createElementVNode("span", {
         "class": "v-expansion-panel-title__overlay"
       }, null), slots.default?.(slotProps.value), !props.hideActions && vue.createVNode(VDefaultsProvider, {
         "defaults": {
@@ -23180,10 +23262,10 @@
           }
         }
       }, {
-        default: () => [vue.createVNode("span", {
+        default: () => [vue.createElementVNode("span", {
           "class": "v-expansion-panel-title__icon"
         }, [slots.actions?.(slotProps.value) ?? vue.createVNode(VIcon, null, null)])]
-      })]), [[vue.resolveDirective("ripple"), props.ripple]]));
+      })]), [[Ripple, props.ripple]]));
       return {};
     }
   });
@@ -23240,16 +23322,16 @@
         const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
         const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
         return vue.createVNode(props.tag, {
-          "class": ['v-expansion-panel', {
+          "class": vue.normalizeClass(['v-expansion-panel', {
             'v-expansion-panel--active': groupItem.isSelected.value,
             'v-expansion-panel--before-active': isBeforeSelected.value,
             'v-expansion-panel--after-active': isAfterSelected.value,
             'v-expansion-panel--disabled': isDisabled.value
-          }, roundedClasses.value, backgroundColorClasses.value, props.class],
-          "style": [backgroundColorStyles.value, props.style]
+          }, roundedClasses.value, backgroundColorClasses.value, props.class]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
         }, {
-          default: () => [vue.createVNode("div", {
-            "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
+          default: () => [vue.createElementVNode("div", {
+            "class": vue.normalizeClass(['v-expansion-panel__shadow', ...elevationClasses.value])
           }, null), vue.createVNode(VDefaultsProvider, {
             "defaults": {
               VExpansionPanelTitle: {
@@ -23329,11 +23411,11 @@
         }
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-expansion-panels', {
+        "class": vue.normalizeClass(['v-expansion-panels', {
           'v-expansion-panels--flat': props.flat,
           'v-expansion-panels--tile': props.tile
-        }, themeClasses.value, variantClass.value, props.class],
-        "style": props.style
+        }, themeClasses.value, variantClass.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.({
           prev,
@@ -23413,22 +23495,22 @@
       const vFabRef = vue.ref();
       useRender(() => {
         const btnProps = VBtn.filterProps(props);
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "ref": vFabRef,
-          "class": ['v-fab', {
+          "class": vue.normalizeClass(['v-fab', {
             'v-fab--absolute': props.absolute,
             'v-fab--app': !!props.app,
             'v-fab--extended': props.extended,
             'v-fab--offset': props.offset,
             [`v-fab--${position.value}`]: hasPosition.value,
             [`v-fab--${orientation.value}`]: hasPosition.value
-          }, props.class],
-          "style": [props.app ? {
+          }, props.class]),
+          "style": vue.normalizeStyle([props.app ? {
             ...layoutItemStyles.value
           } : {
             height: props.absolute ? '100%' : 'inherit'
-          }, props.style]
-        }, [vue.createVNode("div", {
+          }, props.style])
+        }, [vue.createElementVNode("div", {
           "class": "v-fab__container"
         }, [vue.createVNode(MaybeTransition, {
           "appear": props.appear,
@@ -23644,7 +23726,7 @@
                     ...slotProps
                   }
                 } = _ref4;
-                return vue.createVNode(vue.Fragment, null, [vue.createVNode("input", vue.mergeProps({
+                return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "type": "file",
                   "readonly": isReadonly.value,
@@ -23664,8 +23746,8 @@
                   "onDragleave": onDragleave,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), vue.createVNode("div", {
-                  "class": fieldClass
+                }, slotProps, inputAttrs), null), vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(fieldClass)
                 }, [!!model.value?.length && !props.hideInput && (slots.selection ? slots.selection({
                   fileNames: fileNames.value,
                   totalBytes: totalBytes.value,
@@ -23678,7 +23760,7 @@
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": !!model.value?.length,
             "value": counterValue.value,
             "disabled": props.disabled
@@ -23754,10 +23836,10 @@
       });
       useRender(() => vue.createVNode(props.tag, {
         "ref": resizeRef,
-        "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
+        "class": vue.normalizeClass(['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
           height: convertToUnit(props.height)
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -23806,10 +23888,10 @@
         }
         e.preventDefault();
       }
-      useRender(() => vue.createVNode("form", {
+      useRender(() => vue.createElementVNode("form", {
         "ref": formRef,
-        "class": ['v-form', props.class],
-        "style": props.style,
+        "class": vue.normalizeClass(['v-form', props.class]),
+        "style": vue.normalizeStyle(props.style),
         "novalidate": true,
         "onReset": onReset,
         "onSubmit": onSubmit
@@ -23906,11 +23988,11 @@
       vue.watch(isIntersecting, async val => {
         emit('intersect', props.side, val);
       });
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "class": "v-infinite-scroll-intersect",
-        "style": {
+        "style": vue.normalizeStyle({
           '--v-infinite-margin-size': props.rootMargin
-        },
+        }),
         "ref": intersectionRef
       }, [vue.createTextVNode("\xA0")]));
       return {};
@@ -24022,7 +24104,7 @@
           }
         };
         if (status === 'error') return slots.error?.(slotProps);
-        if (status === 'empty') return slots.empty?.(slotProps) ?? vue.createVNode("div", null, [t(props.emptyText)]);
+        if (status === 'empty') return slots.empty?.(slotProps) ?? vue.createElementVNode("div", null, [t(props.emptyText)]);
         if (props.mode === 'manual') {
           if (status === 'loading') {
             return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
@@ -24053,13 +24135,13 @@
         const intersectMode = props.mode === 'intersect';
         return vue.createVNode(Tag, {
           "ref": rootEl,
-          "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+          "class": vue.normalizeClass(['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
             'v-infinite-scroll--start': hasStartIntersect,
             'v-infinite-scroll--end': hasEndIntersect
-          }],
-          "style": dimensionStyles.value
+          }]),
+          "style": vue.normalizeStyle(dimensionStyles.value)
         }, {
-          default: () => [vue.createVNode("div", {
+          default: () => [vue.createElementVNode("div", {
             "class": "v-infinite-scroll__side"
           }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
             "key": "start",
@@ -24071,7 +24153,7 @@
             "side": "end",
             "onIntersect": handleIntersect,
             "rootMargin": margin.value
-          }, null), vue.createVNode("div", {
+          }, null), vue.createElementVNode("div", {
             "class": "v-infinite-scroll__side"
           }, [renderSide('end', endStatus.value)])]
         });
@@ -24111,8 +24193,8 @@
         selected
       } = useGroup(props, VItemGroupSymbol);
       return () => vue.createVNode(props.tag, {
-        "class": ['v-item-group', themeClasses.value, props.class],
-        "style": props.style
+        "class": vue.normalizeClass(['v-item-group', themeClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, {
         default: () => [slots.default?.({
           isSelected,
@@ -24180,10 +24262,10 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      useRender(() => vue.createVNode("div", {
+      useRender(() => vue.createElementVNode("div", {
         "ref": layoutRef,
-        "class": [layoutClasses.value, props.class],
-        "style": [dimensionStyles.value, layoutStyles.value, props.style]
+        "class": vue.normalizeClass([layoutClasses.value, props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, layoutStyles.value, props.style])
       }, [slots.default?.()]));
       return {
         getLayoutItem,
@@ -24225,9 +24307,9 @@
         active: vue.toRef(() => props.modelValue),
         absolute: vue.toRef(() => props.absolute)
       });
-      return () => vue.createVNode("div", {
-        "class": ['v-layout-item', props.class],
-        "style": [layoutItemStyles.value, props.style]
+      return () => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-layout-item', props.class]),
+        "style": vue.normalizeStyle([layoutItemStyles.value, props.style])
       }, [slots.default?.()]);
     }
   });
@@ -24256,7 +24338,7 @@
   const VLazy = genericComponent()({
     name: 'VLazy',
     directives: {
-      intersect: Intersect
+      vIntersect: Intersect
     },
     props: makeVLazyProps(),
     emits: {
@@ -24275,8 +24357,8 @@
         isActive.value = isIntersecting;
       }
       useRender(() => vue.withDirectives(vue.createVNode(props.tag, {
-        "class": ['v-lazy', props.class],
-        "style": [dimensionStyles.value, props.style]
+        "class": vue.normalizeClass(['v-lazy', props.class]),
+        "style": vue.normalizeStyle([dimensionStyles.value, props.style])
       }, {
         default: () => [isActive.value && vue.createVNode(MaybeTransition, {
           "transition": props.transition,
@@ -24284,7 +24366,7 @@
         }, {
           default: () => [slots.default?.()]
         })]
-      }), [[vue.resolveDirective("intersect"), {
+      }), [[Intersect, {
         handler: onIntersect,
         options: props.options
       }, null]]));
@@ -24312,9 +24394,9 @@
       const {
         rtlClasses
       } = provideLocale(props);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-locale-provider', rtlClasses.value, props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-locale-provider', rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -24345,12 +24427,12 @@
         ssrBootStyles
       } = useSsrBoot();
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-main', {
+        "class": vue.normalizeClass(['v-main', {
           'v-main--scrollable': props.scrollable
-        }, props.class],
-        "style": [mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style]
+        }, props.class]),
+        "style": vue.normalizeStyle([mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style])
       }, {
-        default: () => [props.scrollable ? vue.createVNode("div", {
+        default: () => [props.scrollable ? vue.createElementVNode("div", {
           "class": "v-main__scroller"
         }, [slots.default?.()]) : slots.default?.()]
       }));
@@ -24581,7 +24663,7 @@
     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;
@@ -24861,7 +24943,7 @@
       });
       useRender(() => {
         const hasImage = slots.image || props.image;
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(props.tag, vue.mergeProps({
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(props.tag, vue.mergeProps({
           "ref": rootEl,
           "onMouseenter": runOpenDelay,
           "onMouseleave": runCloseDelay,
@@ -24877,7 +24959,7 @@
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
           "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
         }, scopeId, attrs), {
-          default: () => [hasImage && vue.createVNode("div", {
+          default: () => [hasImage && vue.createElementVNode("div", {
             "key": "image",
             "class": "v-navigation-drawer__img"
           }, [!slots.image ? vue.createVNode(VImg, {
@@ -24897,17 +24979,17 @@
                 src: props.image
               }
             }
-          }, slots.image)]), slots.prepend && vue.createVNode("div", {
+          }, slots.image)]), slots.prepend && vue.createElementVNode("div", {
             "class": "v-navigation-drawer__prepend"
-          }, [slots.prepend?.()]), vue.createVNode("div", {
+          }, [slots.prepend?.()]), vue.createElementVNode("div", {
             "class": "v-navigation-drawer__content"
-          }, [slots.default?.()]), slots.append && vue.createVNode("div", {
+          }, [slots.default?.()]), slots.append && vue.createElementVNode("div", {
             "class": "v-navigation-drawer__append"
           }, [slots.append?.()])]
         }), vue.createVNode(vue.Transition, {
           "name": "fade-transition"
         }, {
-          default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createVNode("div", vue.mergeProps({
+          default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createElementVNode("div", vue.mergeProps({
             "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
             "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
             "onClick": () => {
@@ -25066,6 +25148,9 @@
       const controlNodeDefaultHeight = vue.toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
       const incrementSlotProps = {
         props: {
+          style: {
+            touchAction: 'none'
+          },
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onUpControlMousedown
@@ -25073,6 +25158,9 @@
       };
       const decrementSlotProps = {
         props: {
+          style: {
+            touchAction: 'none'
+          },
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onDownControlMousedown
@@ -25105,25 +25193,33 @@
       }
       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) {
@@ -25205,17 +25301,18 @@
         } = VTextField.filterProps(props);
         function incrementControlNode() {
           return !slots.increment ? vue.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) : vue.createVNode(VDefaultsProvider, {
             "key": "increment-defaults",
@@ -25234,18 +25331,19 @@
         }
         function decrementControlNode() {
           return !slots.decrement ? vue.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) : vue.createVNode(VDefaultsProvider, {
             "key": "decrement-defaults",
             "defaults": {
@@ -25262,7 +25360,7 @@
           });
         }
         function controlNode() {
-          return vue.createVNode("div", {
+          return vue.createElementVNode("div", {
             "class": "v-number-input__control"
           }, [decrementControlNode(), vue.createVNode(VDivider, {
             "vertical": controlVariant.value !== 'stacked'
@@ -25273,17 +25371,17 @@
             "vertical": true
           }, null) : undefined;
         }
-        const appendInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+        const appendInnerControl = controlVariant.value === 'split' ? vue.createElementVNode("div", {
           "class": "v-number-input__control"
         }, [vue.createVNode(VDivider, {
           "vertical": true
-        }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]);
+        }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : vue.createElementVNode(vue.Fragment, null, [dividerNode(), controlNode()]);
         const hasAppendInner = slots['append-inner'] || appendInnerControl;
-        const prependInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+        const prependInnerControl = controlVariant.value === 'split' ? vue.createElementVNode("div", {
           "class": "v-number-input__control"
         }, [decrementControlNode(), vue.createVNode(VDivider, {
           "vertical": true
-        }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
+        }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createElementVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef,
@@ -25311,13 +25409,13 @@
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
+            return vue.createElementVNode(vue.Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
           } : undefined,
           'prepend-inner': hasPrependInner ? function () {
             for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
               args[_key2] = arguments[_key2];
             }
-            return vue.createVNode(vue.Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
+            return vue.createElementVNode(vue.Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
           } : undefined
         });
       });
@@ -25481,16 +25579,16 @@
       });
       useRender(() => {
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-otp-input', {
             'v-otp-input--divided': !!props.divider
           }, props.class],
           "style": [props.style]
-        }, rootAttrs), [vue.createVNode("div", {
+        }, rootAttrs), [vue.createElementVNode("div", {
           "ref": contentRef,
           "class": "v-otp-input__content",
-          "style": [dimensionStyles.value]
-        }, [fields.value.map((_, i) => vue.createVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createVNode("span", {
+          "style": vue.normalizeStyle([dimensionStyles.value])
+        }, [fields.value.map((_, i) => vue.createElementVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createElementVNode("span", {
           "class": "v-otp-input__divider"
         }, [props.divider]), vue.createVNode(VField, {
           "focused": isFocused.value && props.focusAll || focusIndex.value === i,
@@ -25499,7 +25597,7 @@
           ...slots,
           loader: undefined,
           default: () => {
-            return vue.createVNode("input", {
+            return vue.createElementVNode("input", {
               "ref": val => inputRef.value[i] = val,
               "aria-label": t(props.label, i + 1),
               "autofocus": i === 0 && props.autofocus,
@@ -25519,7 +25617,7 @@
               "onPaste": event => onPaste(i, event)
             }, null);
           }
-        })])), vue.createVNode("input", vue.mergeProps({
+        })])), vue.createElementVNode("input", vue.mergeProps({
           "class": "v-otp-input-input",
           "type": "hidden"
         }, inputAttrs, {
@@ -25624,10 +25722,10 @@
         });
       }
       useRender(() => vue.createVNode(VImg, {
-        "class": ['v-parallax', {
+        "class": vue.normalizeClass(['v-parallax', {
           'v-parallax--active': isIntersecting.value
-        }, props.class],
-        "style": props.style,
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style),
         "ref": root,
         "cover": true,
         "onLoadstart": onScroll,
@@ -25727,7 +25825,7 @@
               isDisabled,
               isReadonly
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
+            return vue.createElementVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
               "id": id.value
             }, {
               default: () => [label]
@@ -25865,7 +25963,7 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
@@ -25874,18 +25972,18 @@
               id,
               messagesId
             } = _ref4;
-            return vue.createVNode("div", {
+            return vue.createElementVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
               "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
-            }, [vue.createVNode("input", {
+            }, [vue.createElementVNode("input", {
               "id": `${id.value}_start`,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
               "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[0]
-            }, null), vue.createVNode("input", {
+            }, null), vue.createElementVNode("input", {
               "id": `${id.value}_stop`,
               "name": props.name || id.value,
               "disabled": !!props.disabled,
@@ -26084,16 +26182,16 @@
           size: props.size,
           variant: 'plain'
         };
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode("label", {
+        return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("label", {
           "for": id,
-          "class": {
+          "class": vue.normalizeClass({
             'v-rating__item--half': props.halfIncrements && value % 1 > 0,
             'v-rating__item--full': props.halfIncrements && value % 1 === 0
-          },
+          }),
           "onMouseenter": onMouseenter,
           "onMouseleave": onMouseleave,
           "onClick": onClick
-        }, [vue.createVNode("span", {
+        }, [vue.createElementVNode("span", {
           "class": "v-rating__hidden"
         }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
           ...itemState.value[index],
@@ -26103,7 +26201,7 @@
           rating: normalizedValue.value
         }) : vue.createVNode(VBtn, vue.mergeProps({
           "aria-label": t(props.itemAriaLabel, value, props.length)
-        }, btnProps), null)]), vue.createVNode("input", {
+        }, btnProps), null)]), vue.createElementVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
           "id": id,
@@ -26117,31 +26215,31 @@
       }
       function createLabel(labelProps) {
         if (slots['item-label']) return slots['item-label'](labelProps);
-        if (labelProps.label) return vue.createVNode("span", null, [labelProps.label]);
-        return vue.createVNode("span", null, [vue.createTextVNode("\xA0")]);
+        if (labelProps.label) return vue.createElementVNode("span", null, [labelProps.label]);
+        return vue.createElementVNode("span", null, [vue.createTextVNode("\xA0")]);
       }
       useRender(() => {
         const hasLabels = !!props.itemLabels?.length || slots['item-label'];
         return vue.createVNode(props.tag, {
-          "class": ['v-rating', {
+          "class": vue.normalizeClass(['v-rating', {
             'v-rating--hover': props.hover,
             'v-rating--readonly': props.readonly
-          }, themeClasses.value, props.class],
-          "style": props.style
+          }, themeClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, {
           default: () => [vue.createVNode(VRatingItem, {
             "value": 0,
             "index": -1,
             "showStar": false
-          }, null), range.value.map((value, i) => vue.createVNode("div", {
+          }, null), range.value.map((value, i) => vue.createElementVNode("div", {
             "class": "v-rating__wrapper"
           }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
             value,
             index: i,
             label: props.itemLabels?.[i]
-          }) : undefined, vue.createVNode("div", {
+          }) : undefined, vue.createElementVNode("div", {
             "class": "v-rating__item"
-          }, [props.halfIncrements ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
+          }, [props.halfIncrements ? vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
             "value": value - 0.5,
             "index": i * 2
           }, null), vue.createVNode(VRatingItem, {
@@ -26198,8 +26296,8 @@
   };
   function genBone(type) {
     let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    return vue.createVNode("div", {
-      "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+    return vue.createElementVNode("div", {
+      "class": vue.normalizeClass(['v-skeleton-loader__bone', `v-skeleton-loader__${type}`])
     }, [children]);
   }
   function genBones(bone) {
@@ -26285,7 +26383,7 @@
           ariaLabel: t(props.loadingText),
           role: 'alert'
         };
-        return vue.createVNode("div", vue.mergeProps({
+        return vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-skeleton-loader', {
             'v-skeleton-loader--boilerplate': props.boilerplate
           }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
@@ -26491,7 +26589,7 @@
           "onTouchend": onTouchend,
           "onAfterLeave": onAfterLeave
         }, scopeId), {
-          default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createElementVNode("div", {
             "key": "timer",
             "class": "v-snackbar__timer"
           }, [vue.createVNode(VProgressLinear, {
@@ -26499,7 +26597,7 @@
             "color": typeof props.timer === 'string' ? props.timer : 'info',
             "max": props.timeout,
             "model-value": countdown.time.value
-          }, null)]), hasContent && vue.createVNode("div", {
+          }, null)]), hasContent && vue.createElementVNode("div", {
             "key": "content",
             "class": "v-snackbar__content",
             "role": "status",
@@ -26513,7 +26611,7 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
+            default: () => [vue.createElementVNode("div", {
               "class": "v-snackbar__actions"
             }, [slots.actions({
               isActive
@@ -26597,7 +26695,7 @@
           modelValue: _,
           ...snackbarProps
         } = VSnackbar.filterProps(props);
-        return vue.createVNode(vue.Fragment, null, [isVisible.value && !!current.value && (slots.default ? vue.createVNode(VDefaultsProvider, {
+        return vue.createElementVNode(vue.Fragment, null, [isVisible.value && !!current.value && (slots.default ? vue.createVNode(VDefaultsProvider, {
           "defaults": {
             VSnackbar: current.value
           }
@@ -26613,7 +26711,7 @@
           text: slots.text ? () => slots.text?.({
             item: current.value
           }) : undefined,
-          actions: hasActions ? () => vue.createVNode(vue.Fragment, null, [!slots.actions ? vue.createVNode(VBtn, vue.mergeProps(btnProps.value, {
+          actions: hasActions ? () => vue.createElementVNode(vue.Fragment, null, [!slots.actions ? vue.createVNode(VBtn, vue.mergeProps(btnProps.value, {
             "onClick": onClickClose
           }), null) : vue.createVNode(VDefaultsProvider, {
             "defaults": {
@@ -26771,57 +26869,57 @@
       const smooth = vue.computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
       useRender(() => {
         const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-        return vue.createVNode("svg", {
+        return vue.createElementVNode("svg", {
           "display": "block"
-        }, [vue.createVNode("defs", null, [vue.createVNode("linearGradient", {
+        }, [vue.createElementVNode("defs", null, [vue.createElementVNode("linearGradient", {
           "id": id.value,
           "gradientUnits": "userSpaceOnUse",
           "x1": props.gradientDirection === 'left' ? '100%' : '0',
           "y1": props.gradientDirection === 'top' ? '100%' : '0',
           "x2": props.gradientDirection === 'right' ? '100%' : '0',
           "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-        }, [gradientData.map((color, index) => vue.createVNode("stop", {
+        }, [gradientData.map((color, index) => vue.createElementVNode("stop", {
           "offset": index / Math.max(gradientData.length - 1, 1),
           "stop-color": color || 'currentColor'
-        }, null))])]), vue.createVNode("clipPath", {
+        }, null))])]), vue.createElementVNode("clipPath", {
           "id": `${id.value}-clip`
-        }, [bars.value.map(item => vue.createVNode("rect", {
+        }, [bars.value.map(item => vue.createElementVNode("rect", {
           "x": item.x + offsetX.value,
           "y": item.y,
           "width": lineWidth.value,
           "height": item.height,
           "rx": smooth.value,
           "ry": smooth.value
-        }, [props.autoDraw && vue.createVNode(vue.Fragment, null, [vue.createVNode("animate", {
+        }, [props.autoDraw && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("animate", {
           "attributeName": "y",
           "from": item.y + item.height,
           "to": item.y,
           "dur": `${autoDrawDuration.value}ms`,
           "fill": "freeze"
-        }, null), vue.createVNode("animate", {
+        }, null), vue.createElementVNode("animate", {
           "attributeName": "height",
           "from": "0",
           "to": item.height,
           "dur": `${autoDrawDuration.value}ms`,
           "fill": "freeze"
-        }, null)])]))]), hasLabels.value && vue.createVNode("g", {
+        }, null)])]))]), hasLabels.value && vue.createElementVNode("g", {
           "key": "labels",
           "style": {
             textAnchor: 'middle',
             dominantBaseline: 'mathematical',
             fill: 'currentColor'
           }
-        }, [parsedLabels.value.map((item, i) => vue.createVNode("text", {
+        }, [parsedLabels.value.map((item, i) => vue.createElementVNode("text", {
           "x": item.x + offsetX.value + lineWidth.value / 2,
           "y": parseInt(props.height, 10) - 2 + (parseInt(props.labelSize, 10) || 7 * 0.75),
           "font-size": Number(props.labelSize) || 7
         }, [slots.label?.({
           index: i,
           value: item.value
-        }) ?? item.value]))]), vue.createVNode("g", {
+        }) ?? item.value]))]), vue.createElementVNode("g", {
           "clip-path": `url(#${id.value}-clip)`,
           "fill": `url(#${id.value})`
-        }, [vue.createVNode("rect", {
+        }, [vue.createElementVNode("rect", {
           "x": 0,
           "y": 0,
           "width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
@@ -27000,39 +27098,39 @@
       }
       useRender(() => {
         const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
-        return vue.createVNode("svg", {
+        return vue.createElementVNode("svg", {
           "display": "block",
           "stroke-width": parseFloat(props.lineWidth) ?? 4
-        }, [vue.createVNode("defs", null, [vue.createVNode("linearGradient", {
+        }, [vue.createElementVNode("defs", null, [vue.createElementVNode("linearGradient", {
           "id": id.value,
           "gradientUnits": "userSpaceOnUse",
           "x1": props.gradientDirection === 'left' ? '100%' : '0',
           "y1": props.gradientDirection === 'top' ? '100%' : '0',
           "x2": props.gradientDirection === 'right' ? '100%' : '0',
           "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
-        }, [gradientData.map((color, index) => vue.createVNode("stop", {
+        }, [gradientData.map((color, index) => vue.createElementVNode("stop", {
           "offset": index / Math.max(gradientData.length - 1, 1),
           "stop-color": color || 'currentColor'
-        }, null))])]), hasLabels.value && vue.createVNode("g", {
+        }, null))])]), hasLabels.value && vue.createElementVNode("g", {
           "key": "labels",
           "style": {
             textAnchor: 'middle',
             dominantBaseline: 'mathematical',
             fill: 'currentColor'
           }
-        }, [parsedLabels.value.map((item, i) => vue.createVNode("text", {
+        }, [parsedLabels.value.map((item, i) => vue.createElementVNode("text", {
           "x": item.x + lineWidth.value / 2 + lineWidth.value / 2,
           "y": parseInt(props.height, 10) - 4 + (parseInt(props.labelSize, 10) || 7 * 0.75),
           "font-size": Number(props.labelSize) || 7
         }, [slots.label?.({
           index: i,
           value: item.value
-        }) ?? item.value]))]), vue.createVNode("path", {
+        }) ?? item.value]))]), vue.createElementVNode("path", {
           "ref": path,
           "d": genPath$1(props.fill),
           "fill": props.fill ? `url(#${id.value})` : 'none',
           "stroke": props.fill ? 'none' : `url(#${id.value})`
-        }, null), props.fill && vue.createVNode("path", {
+        }, null), props.fill && vue.createElementVNode("path", {
           "d": genPath$1(false),
           "fill": "none",
           "stroke": props.color ?? props.gradient?.[0]
@@ -27200,7 +27298,7 @@
         const nextSlotProps = {
           onClick: onClickNext
         };
-        return vue.createVNode("div", {
+        return vue.createElementVNode("div", {
           "class": "v-stepper-actions"
         }, [vue.createVNode(VDefaultsProvider, {
           "defaults": {
@@ -27274,7 +27372,7 @@
   const VStepperItem = genericComponent()({
     name: 'VStepperItem',
     directives: {
-      Ripple
+      vRipple: Ripple
     },
     props: makeVStepperItemProps(),
     emits: {
@@ -27313,12 +27411,12 @@
         function onClick() {
           group?.toggle();
         }
-        return vue.withDirectives(vue.createVNode("button", {
-          "class": ['v-stepper-item', {
+        return vue.withDirectives(vue.createElementVNode("button", {
+          "class": vue.normalizeClass(['v-stepper-item', {
             'v-stepper-item--complete': hasCompleted.value,
             'v-stepper-item--disabled': props.disabled,
             'v-stepper-item--error': hasError.value
-          }, group?.selectedClass.value],
+          }, group?.selectedClass.value]),
           "disabled": !props.editable,
           "type": "button",
           "onClick": onClick
@@ -27331,15 +27429,15 @@
           default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? vue.createVNode(VIcon, {
             "icon": icon.value
           }, null) : step.value)]
-        }), vue.createVNode("div", {
+        }), vue.createElementVNode("div", {
           "class": "v-stepper-item__content"
-        }, [hasTitle && vue.createVNode("div", {
+        }, [hasTitle && vue.createElementVNode("div", {
           "key": "title",
           "class": "v-stepper-item__title"
-        }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && vue.createVNode("div", {
+        }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && vue.createElementVNode("div", {
           "key": "subtitle",
           "class": "v-stepper-item__subtitle"
-        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[vue.resolveDirective("ripple"), props.ripple && props.editable, null]]);
+        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[Ripple, props.ripple && props.editable, null]]);
       });
       return {};
     }
@@ -27535,7 +27633,7 @@
                 raw,
                 ...item
               } = _ref2;
-              return vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
+              return vue.createElementVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
                 default: slots[`header-item.${item.value}`] ?? slots.header,
                 icon: slots.icon,
                 title: slots.title,
@@ -27676,14 +27774,14 @@
                   backgroundColorClasses,
                   backgroundColorStyles
                 } = _ref3;
-                return vue.createVNode("div", {
-                  "class": ['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
-                  "style": backgroundColorStyles.value,
+                return vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+                  "style": vue.normalizeStyle(backgroundColorStyles.value),
                   "onClick": onTrackClick
-                }, [slots['track-true'] && vue.createVNode("div", {
+                }, [slots['track-true'] && vue.createElementVNode("div", {
                   "key": "prepend",
                   "class": "v-switch__track-true"
-                }, [slots['track-true'](slotProps)]), slots['track-false'] && vue.createVNode("div", {
+                }, [slots['track-true'](slotProps)]), slots['track-false'] && vue.createElementVNode("div", {
                   "key": "append",
                   "class": "v-switch__track-false"
                 }, [slots['track-false'](slotProps)])]);
@@ -27695,11 +27793,11 @@
                   backgroundColorClasses,
                   backgroundColorStyles
                 } = _ref4;
-                return vue.createVNode(vue.Fragment, null, [inputNode, vue.createVNode("div", {
-                  "class": ['v-switch__thumb', {
+                return vue.createElementVNode(vue.Fragment, null, [inputNode, vue.createElementVNode("div", {
+                  "class": vue.normalizeClass(['v-switch__thumb', {
                     'v-switch__thumb--filled': icon || props.loading
-                  }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value],
-                  "style": props.inset ? undefined : backgroundColorStyles.value
+                  }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value]),
+                  "style": vue.normalizeStyle(props.inset ? undefined : backgroundColorStyles.value)
                 }, [slots.thumb ? vue.createVNode(VDefaultsProvider, {
                   "defaults": {
                     VIcon: {
@@ -27787,10 +27885,10 @@
         absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-system-bar', {
+        "class": vue.normalizeClass(['v-system-bar', {
           'v-system-bar--window': props.window
-        }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
+        }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style])
       }, slots));
       return {};
     }
@@ -27881,10 +27979,10 @@
           "onGroup:selected": updateSlider
         }), {
           ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
+          default: () => vue.createElementVNode(vue.Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && vue.createElementVNode("div", {
             "ref": sliderEl,
-            "class": ['v-tab__slider', sliderColorClasses.value],
-            "style": sliderColorStyles.value
+            "class": vue.normalizeClass(['v-tab__slider', sliderColorClasses.value]),
+            "style": vue.normalizeStyle(sliderColorStyles.value)
           }, null)])
         });
       });
@@ -28036,7 +28134,7 @@
       useRender(() => {
         const slideGroupProps = VSlideGroup.filterProps(props);
         const hasWindow = !!(slots.window || props.items.length > 0);
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VSlideGroup, vue.mergeProps(slideGroupProps, {
+        return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSlideGroup, vue.mergeProps(slideGroupProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
@@ -28109,7 +28207,7 @@
   const VTextarea = genericComponent()({
     name: 'VTextarea',
     directives: {
-      Intersect
+      vIntersect: Intersect
     },
     inheritAttrs: false,
     props: makeVTextareaProps(),
@@ -28282,9 +28380,9 @@
                     ...slotProps
                   }
                 } = _ref3;
-                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
+                return vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [props.prefix]), vue.withDirectives(vue.createVNode("textarea", vue.mergeProps({
+                }, [props.prefix]), vue.withDirectives(vue.createElementVNode("textarea", vue.mergeProps({
                   "ref": textareaRef,
                   "class": fieldClass,
                   "value": model.value,
@@ -28297,24 +28395,24 @@
                   "name": props.name,
                   "onFocus": onFocus,
                   "onBlur": blur
-                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
+                }, slotProps, inputAttrs), null), [[Intersect, {
                   handler: onIntersect
                 }, null, {
                   once: true
-                }]]), props.autoGrow && vue.withDirectives(vue.createVNode("textarea", {
-                  "class": [fieldClass, 'v-textarea__sizer'],
+                }]]), props.autoGrow && vue.withDirectives(vue.createElementVNode("textarea", {
+                  "class": vue.normalizeClass([fieldClass, 'v-textarea__sizer']),
                   "id": `${slotProps.id}-sizer`,
                   "onUpdate:modelValue": $event => model.value = $event,
                   "ref": sizerRef,
                   "readonly": true,
                   "aria-hidden": "true"
-                }, null), [[vue.vModelText, model.value]]), props.suffix && vue.createVNode("span", {
+                }, null), [[vue.vModelText, model.value]]), props.suffix && vue.createElementVNode("span", {
                   "class": "v-text-field__suffix"
                 }, [props.suffix])]);
               }
             });
           },
-          details: hasDetails ? slotProps => vue.createVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+          details: hasDetails ? slotProps => vue.createElementVNode(vue.Fragment, null, [slots.details?.(slotProps), hasCounter && vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("span", null, null), vue.createVNode(VCounter, {
             "active": props.persistentCounter || isFocused.value,
             "value": counterValue.value,
             "max": max.value,
@@ -28345,8 +28443,8 @@
       return () => {
         if (!props.withBackground) return slots.default?.();
         return vue.createVNode(props.tag, {
-          "class": ['v-theme-provider', themeClasses.value, props.class],
-          "style": props.style
+          "class": vue.normalizeClass(['v-theme-provider', themeClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
         }, {
           default: () => [slots.default?.()]
         });
@@ -28391,21 +28489,21 @@
         backgroundColorClasses: lineColorClasses,
         backgroundColorStyles: lineColorStyles
       } = useBackgroundColor(() => props.lineColor);
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-timeline-divider', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
-        }, props.class],
-        "style": props.style
-      }, [vue.createVNode("div", {
-        "class": ['v-timeline-divider__before', lineColorClasses.value],
-        "style": lineColorStyles.value
-      }, null), !props.hideDot && vue.createVNode("div", {
+        }, props.class]),
+        "style": vue.normalizeStyle(props.style)
+      }, [vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__before', lineColorClasses.value]),
+        "style": vue.normalizeStyle(lineColorStyles.value)
+      }, null), !props.hideDot && vue.createElementVNode("div", {
         "key": "dot",
-        "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
-        "style": sizeStyles.value
-      }, [vue.createVNode("div", {
-        "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
-        "style": backgroundColorStyles.value
+        "class": vue.normalizeClass(['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value]),
+        "style": vue.normalizeStyle(sizeStyles.value)
+      }, [vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value]),
+        "style": vue.normalizeStyle(backgroundColorStyles.value)
       }, [!slots.default ? vue.createVNode(VIcon, {
         "key": "icon",
         "color": props.iconColor,
@@ -28421,9 +28519,9 @@
             size: props.size
           }
         }
-      }, slots.default)])]), vue.createVNode("div", {
-        "class": ['v-timeline-divider__after', lineColorClasses.value],
-        "style": lineColorStyles.value
+      }, slots.default)])]), vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-divider__after', lineColorClasses.value]),
+        "style": vue.normalizeStyle(lineColorStyles.value)
       }, null)]));
       return {};
     }
@@ -28474,19 +28572,19 @@
       }, {
         flush: 'post'
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-timeline-item', {
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-timeline-item', {
           'v-timeline-item--fill-dot': props.fillDot,
           'v-timeline-item--side-start': props.side === 'start',
           'v-timeline-item--side-end': props.side === 'end'
-        }, props.class],
-        "style": [{
+        }, props.class]),
+        "style": vue.normalizeStyle([{
           '--v-timeline-dot-size': convertToUnit(dotSize.value),
           '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
-        }, props.style]
-      }, [vue.createVNode("div", {
+        }, props.style])
+      }, [vue.createElementVNode("div", {
         "class": "v-timeline-item__body",
-        "style": dimensionStyles.value
+        "style": vue.normalizeStyle(dimensionStyles.value)
       }, [slots.default?.()]), vue.createVNode(VTimelineDivider, {
         "ref": dotRef,
         "hideDot": props.hideDot,
@@ -28499,7 +28597,7 @@
         "rounded": props.rounded
       }, {
         default: slots.icon
-      }), props.density !== 'compact' && vue.createVNode("div", {
+      }), props.density !== 'compact' && vue.createElementVNode("div", {
         "class": "v-timeline-item__opposite"
       }, [!props.hideOpposite && slots.opposite?.()])]));
       return {};
@@ -28592,12 +28690,12 @@
         }
       });
       useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+        "class": vue.normalizeClass(['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
           'v-timeline--inset-line': !!props.lineInset
-        }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
-        "style": [{
+        }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class]),
+        "style": vue.normalizeStyle([{
           '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-        }, props.style]
+        }, props.style])
       }, slots));
       return {};
     }
@@ -28623,9 +28721,9 @@
           variant: vue.toRef(() => props.variant)
         }
       });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-toolbar-items', props.class],
-        "style": props.style
+      useRender(() => vue.createElementVNode("div", {
+        "class": vue.normalizeClass(['v-toolbar-items', props.class]),
+        "style": vue.normalizeStyle(props.style)
       }, [slots.default?.()]));
       return {};
     }
@@ -29222,7 +29320,7 @@
       };
     });
   }
-  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
@@ -29247,7 +29345,7 @@
       ...options
     });
   };
-  const version = "3.8.6";
+  const version = "3.8.7";
   createVuetify.version = version;
 
   exports.blueprints = index;