vuetify 3.1.12 → 3.1.14

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.12
+* Vuetify v3.1.14
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -339,7 +339,7 @@ function includes(arr, val) {
 }
 const onRE = /^on[^a-z]/;
 const isOn = key => onRE.test(key);
-const EventProp = [Function, Array];
+const EventProp = () => [Function, Array];
 function hasEvent(props, name) {
   name = 'on' + capitalize(name);
   return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -979,7 +979,7 @@ function provideDefaults(defaults, options) {
       }
       return properties;
     }
-    return mergeDeep(properties.prev, properties);
+    return properties.prev ? mergeDeep(properties.prev, properties) : properties;
   });
   provide(DefaultsSymbol, newDefaults);
   return newDefaults;
@@ -1703,7 +1703,7 @@ function createTheme(options) {
       if (/^on-[a-z]/.test(key)) {
         createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
       } else {
-        createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
+        createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
         createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
         createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]);
       }
@@ -1841,7 +1841,8 @@ function useProxiedModel(props, prop, defaultValue) {
   });
   const model = computed({
     get() {
-      return transformIn(isControlled.value ? props[prop] : internal.value);
+      const externalValue = props[prop];
+      return transformIn(isControlled.value ? externalValue : internal.value);
     },
     set(internalValue) {
       const newValue = transformOut(internalValue);
@@ -1933,7 +1934,8 @@ var en = {
     ariaLabel: {
       item: 'Rating {0} of {1}'
     }
-  }
+  },
+  loading: 'Loading...'
 };
 
 const LANG_PREFIX = '$vuetify.';
@@ -2210,6 +2212,7 @@ function createCssTransition(name) {
   return genericComponent()({
     name,
     props: {
+      disabled: Boolean,
       group: Boolean,
       hideOnLeave: Boolean,
       leaveAbsolute: Boolean,
@@ -2226,56 +2229,62 @@ function createCssTransition(name) {
       let {
         slots
       } = _ref;
+      const functions = {
+        onBeforeEnter(el) {
+          el.style.transformOrigin = props.origin;
+        },
+        onLeave(el) {
+          if (props.leaveAbsolute) {
+            const {
+              offsetTop,
+              offsetLeft,
+              offsetWidth,
+              offsetHeight
+            } = el;
+            el._transitionInitialStyles = {
+              position: el.style.position,
+              top: el.style.top,
+              left: el.style.left,
+              width: el.style.width,
+              height: el.style.height
+            };
+            el.style.position = 'absolute';
+            el.style.top = `${offsetTop}px`;
+            el.style.left = `${offsetLeft}px`;
+            el.style.width = `${offsetWidth}px`;
+            el.style.height = `${offsetHeight}px`;
+          }
+          if (props.hideOnLeave) {
+            el.style.setProperty('display', 'none', 'important');
+          }
+        },
+        onAfterLeave(el) {
+          if (props.leaveAbsolute && el?._transitionInitialStyles) {
+            const {
+              position,
+              top,
+              left,
+              width,
+              height
+            } = el._transitionInitialStyles;
+            delete el._transitionInitialStyles;
+            el.style.position = position || '';
+            el.style.top = top || '';
+            el.style.left = left || '';
+            el.style.width = width || '';
+            el.style.height = height || '';
+          }
+        }
+      };
       return () => {
         const tag = props.group ? TransitionGroup : Transition;
         return h(tag, {
-          name,
-          mode: props.mode,
-          onBeforeEnter(el) {
-            el.style.transformOrigin = props.origin;
-          },
-          onLeave(el) {
-            if (props.leaveAbsolute) {
-              const {
-                offsetTop,
-                offsetLeft,
-                offsetWidth,
-                offsetHeight
-              } = el;
-              el._transitionInitialStyles = {
-                position: el.style.position,
-                top: el.style.top,
-                left: el.style.left,
-                width: el.style.width,
-                height: el.style.height
-              };
-              el.style.position = 'absolute';
-              el.style.top = `${offsetTop}px`;
-              el.style.left = `${offsetLeft}px`;
-              el.style.width = `${offsetWidth}px`;
-              el.style.height = `${offsetHeight}px`;
-            }
-            if (props.hideOnLeave) {
-              el.style.setProperty('display', 'none', 'important');
-            }
-          },
-          onAfterLeave(el) {
-            if (props.leaveAbsolute && el?._transitionInitialStyles) {
-              const {
-                position,
-                top,
-                left,
-                width,
-                height
-              } = el._transitionInitialStyles;
-              delete el._transitionInitialStyles;
-              el.style.position = position || '';
-              el.style.top = top || '';
-              el.style.left = left || '';
-              el.style.width = width || '';
-              el.style.height = height || '';
-            }
-          }
+          name: props.disabled ? '' : name,
+          css: !props.disabled,
+          ...(props.group ? undefined : {
+            mode: props.mode
+          }),
+          ...(props.disabled ? {} : functions)
         }, slots.default);
       };
     }
@@ -2289,7 +2298,8 @@ function createJavascriptTransition(name, functions) {
       mode: {
         type: String,
         default: mode
-      }
+      },
+      disabled: Boolean
     },
     setup(props, _ref2) {
       let {
@@ -2297,9 +2307,10 @@ function createJavascriptTransition(name, functions) {
       } = _ref2;
       return () => {
         return h(Transition, {
-          name,
+          name: props.disabled ? '' : name,
+          css: !props.disabled,
           // mode: props.mode, // TODO: vuejs/vue-next#3104
-          ...functions
+          ...(props.disabled ? {} : functions)
         }, slots.default);
       };
     }
@@ -2705,9 +2716,9 @@ const VImg = genericComponent()({
     ...makeTransitionProps()
   },
   emits: {
-    loadstart: event => true,
-    load: event => true,
-    error: event => true
+    loadstart: value => true,
+    load: value => true,
+    error: value => true
   },
   setup(props, _ref) {
     let {
@@ -5332,9 +5343,9 @@ const makeVFieldProps = propsFactory({
     default: 'filled',
     validator: v => allowedVariants$1.includes(v)
   },
-  'onClick:clear': EventProp,
-  'onClick:appendInner': EventProp,
-  'onClick:prependInner': EventProp,
+  'onClick:clear': EventProp(),
+  'onClick:appendInner': EventProp(),
+  'onClick:prependInner': EventProp(),
   ...makeThemeProps(),
   ...makeLoaderProps()
 }, 'v-field');
@@ -5833,7 +5844,7 @@ function useValidation(props) {
     const results = [];
     isValidating.value = true;
     for (const rule of props.rules) {
-      if (results.length >= (props.maxErrors ?? 1)) {
+      if (results.length >= +(props.maxErrors ?? 1)) {
         break;
       }
       const handler = typeof rule === 'function' ? rule : () => rule;
@@ -5880,8 +5891,8 @@ const makeVInputProps = propsFactory({
     default: 'horizontal',
     validator: v => ['horizontal', 'vertical'].includes(v)
   },
-  'onClick:prepend': EventProp,
-  'onClick:append': EventProp,
+  'onClick:prepend': EventProp(),
+  'onClick:append': EventProp(),
   ...makeDensityProps(),
   ...makeValidationProps()
 }, 'v-input');
@@ -6038,6 +6049,9 @@ function forwardRefs(target) {
       if (Reflect.has(target, key)) {
         return Reflect.get(target, key);
       }
+
+      // Skip internal properties
+      if (typeof key === 'symbol' || key.startsWith('__')) return;
       for (const ref of refs) {
         if (ref.value && Reflect.has(ref.value, key)) {
           const val = Reflect.get(ref.value, key);
@@ -6045,6 +6059,20 @@ function forwardRefs(target) {
         }
       }
     },
+    has(target, key) {
+      if (Reflect.has(target, key)) {
+        return true;
+      }
+
+      // Skip internal properties
+      if (typeof key === 'symbol' || key.startsWith('__')) return false;
+      for (const ref of refs) {
+        if (ref.value && Reflect.has(ref.value, key)) {
+          return true;
+        }
+      }
+      return false;
+    },
     getOwnPropertyDescriptor(target, key) {
       const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
       if (descriptor) return descriptor;
@@ -6095,6 +6123,7 @@ const makeVTextFieldProps = propsFactory({
     type: String,
     default: 'text'
   },
+  modelModifiers: Object,
   ...makeVInputProps(),
   ...makeVFieldProps()
 }, 'v-text-field');
@@ -6169,7 +6198,7 @@ const VTextField = genericComponent()({
     function onInput(e) {
       const el = e.target;
       model.value = el.value;
-      if (['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
+      if (props.modelModifiers?.trim && ['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
         const caretPosition = [el.selectionStart, el.selectionEnd];
         nextTick(() => {
           el.selectionStart = caretPosition[0];
@@ -6234,9 +6263,6 @@ const VTextField = genericComponent()({
                   ...slotProps
                 }
               } = _ref3;
-              const placeholder = computed(() => {
-                return (props.persistentPlaceholder || isFocused.value) && !isDirty.value ? props.placeholder : '';
-              });
               const inputNode = withDirectives(createVNode("input", mergeProps({
                 "ref": inputRef,
                 "value": model.value,
@@ -6245,7 +6271,7 @@ const VTextField = genericComponent()({
                 "readonly": isReadonly.value,
                 "disabled": isDisabled.value,
                 "name": props.name,
-                "placeholder": placeholder.value,
+                "placeholder": props.placeholder,
                 "size": 1,
                 "type": props.type,
                 "onFocus": onFocus,
@@ -6809,8 +6835,8 @@ const VChip = genericComponent()({
       type: Boolean,
       default: true
     },
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
@@ -7561,6 +7587,9 @@ const VListGroup = genericComponent()({
     } = useNestedItem(toRef(props, 'value'), true);
     const id = computed(() => `v-list-group--id-${String(_id.value)}`);
     const list = useList();
+    const {
+      isBooted
+    } = useSsrBoot();
     function onClick(e) {
       open(!isOpen.value, e);
     }
@@ -7570,6 +7599,17 @@ const VListGroup = genericComponent()({
       id: id.value
     }));
     const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
+    const activatorDefaults = computed(() => ({
+      VListItem: {
+        active: isOpen.value,
+        activeColor: props.activeColor,
+        color: props.color,
+        prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
+        appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
+        title: props.title,
+        value: props.value
+      }
+    }));
     useRender(() => createVNode(props.tag, {
       "class": ['v-list-group', {
         'v-list-group--prepend': list?.hasPrepend.value,
@@ -7579,17 +7619,7 @@ const VListGroup = genericComponent()({
       }]
     }, {
       default: () => [slots.activator && createVNode(VDefaultsProvider, {
-        "defaults": {
-          VListItem: {
-            active: isOpen.value,
-            activeColor: props.activeColor,
-            color: props.color,
-            prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
-            appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
-            title: props.title,
-            value: props.value
-          }
-        }
+        "defaults": activatorDefaults.value
       }, {
         default: () => [createVNode(VListGroupActivator, null, {
           default: () => [slots.activator({
@@ -7597,7 +7627,12 @@ const VListGroup = genericComponent()({
             isOpen: isOpen.value
           })]
         })]
-      }), createVNode(VExpandTransition, null, {
+      }), createVNode(MaybeTransition, {
+        "transition": {
+          component: VExpandTransition
+        },
+        "disabled": !isBooted.value
+      }, {
         default: () => [withDirectives(createVNode("div", {
           "class": "v-list-group__items",
           "role": "group",
@@ -7645,8 +7680,8 @@ const VListItem = genericComponent()({
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -8188,7 +8223,8 @@ const VList = genericComponent()({
     }
     function focus(location) {
       if (!contentRef.value) return;
-      const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+      const targets = ['button', '[href]', 'input', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
+      const focusable = [...contentRef.value.querySelectorAll(targets)].filter(el => !el.hasAttribute('disabled'));
       const idx = focusable.indexOf(document.activeElement);
       if (!location) {
         if (!contentRef.value.contains(document.activeElement)) {
@@ -8369,6 +8405,7 @@ function useActivator(props, _ref) {
       isActive.value = !isActive.value;
     },
     mouseenter: e => {
+      if (e.sourceCapabilities?.firesTouchEvents) return;
       isHovered = true;
       activatorEl.value = e.currentTarget || e.target;
       runOpenDelay();
@@ -9895,6 +9932,9 @@ const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const isFocused = ref(false);
+    let keyboardLookupPrefix = '';
+    let keyboardLookupLastTime;
     const displayItems = computed(() => {
       if (props.hideSelected) {
         return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9931,6 +9971,26 @@ const VSelect = genericComponent()({
       } else if (e.key === 'End') {
         listRef.value?.focus('last');
       }
+
+      // html select hotkeys
+      const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
+
+      function checkPrintable(e) {
+        const isPrintableChar = e.key.length === 1;
+        const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
+        return isPrintableChar && noModifier;
+      }
+      if (props.multiple || !checkPrintable(e)) return;
+      const now = performance.now();
+      if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
+        keyboardLookupPrefix = '';
+      }
+      keyboardLookupPrefix += e.key.toLowerCase();
+      keyboardLookupLastTime = now;
+      const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
+      if (item !== undefined) {
+        model.value = [item];
+      }
     }
     function select(item) {
       if (props.multiple) {
@@ -9960,7 +10020,9 @@ const VSelect = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
+      const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? undefined : props.placeholder;
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -9968,8 +10030,10 @@ const VSelect = genericComponent()({
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "class": ['v-select', {
           'v-select--active-menu': menu.value,
           'v-select--chips': !!props.chips,
@@ -9978,6 +10042,7 @@ const VSelect = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
+        "placeholder": placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onBlur": onBlur,
@@ -10026,7 +10091,8 @@ const VSelect = genericComponent()({
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 }
               });
@@ -10353,6 +10419,7 @@ const VAutocomplete = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -10362,7 +10429,7 @@ const VAutocomplete = genericComponent()({
           if (v == null) model.value = [];
         },
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
@@ -10372,6 +10439,7 @@ const VAutocomplete = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
+        "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onFocus": () => isFocused.value = true,
@@ -10402,14 +10470,13 @@ const VAutocomplete = genericComponent()({
           }, {
             default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => slots.item?.({
+            }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
               item,
-              index,
               props: mergeProps(item.props, {
                 onClick: () => select(item)
               })
             }) ?? createVNode(VListItem, mergeProps({
-              "key": index
+              "key": item.value
             }, item.props, {
               "onClick": () => select(item)
             }), {
@@ -10419,7 +10486,8 @@ const VAutocomplete = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -10544,7 +10612,7 @@ const VBadge = genericComponent()({
     });
     useRender(() => {
       const value = Number(props.content);
-      const content = !props.max || isNaN(value) ? props.content : value <= props.max ? value : `${props.max}+`;
+      const content = !props.max || isNaN(value) ? props.content : value <= +props.max ? value : `${props.max}+`;
       const [badgeAttrs, attrs] = pick(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
       return createVNode(props.tag, mergeProps({
         "class": ['v-badge', {
@@ -11341,47 +11409,48 @@ const Touch = {
 
 const VWindowSymbol = Symbol.for('vuetify:v-window');
 const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
+const makeVWindowProps = propsFactory({
+  continuous: Boolean,
+  nextIcon: {
+    type: [Boolean, String, Function, Object],
+    default: '$next'
+  },
+  prevIcon: {
+    type: [Boolean, String, Function, Object],
+    default: '$prev'
+  },
+  reverse: Boolean,
+  showArrows: {
+    type: [Boolean, String],
+    validator: v => typeof v === 'boolean' || v === 'hover'
+  },
+  touch: {
+    type: [Object, Boolean],
+    default: undefined
+  },
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  modelValue: null,
+  disabled: Boolean,
+  selectedClass: {
+    type: String,
+    default: 'v-window-item--active'
+  },
+  // TODO: mandatory should probably not be exposed but do this for now
+  mandatory: {
+    default: 'force'
+  },
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'v-window');
 const VWindow = genericComponent()({
   name: 'VWindow',
   directives: {
     Touch
   },
-  props: {
-    continuous: Boolean,
-    nextIcon: {
-      type: [Boolean, String, Function, Object],
-      default: '$next'
-    },
-    prevIcon: {
-      type: [Boolean, String, Function, Object],
-      default: '$prev'
-    },
-    reverse: Boolean,
-    showArrows: {
-      type: [Boolean, String],
-      validator: v => typeof v === 'boolean' || v === 'hover'
-    },
-    touch: {
-      type: [Object, Boolean],
-      default: undefined
-    },
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    modelValue: null,
-    disabled: Boolean,
-    selectedClass: {
-      type: String,
-      default: 'v-window-item--active'
-    },
-    // TODO: mandatory should probably not be exposed but do this for now
-    mandatory: {
-      default: 'force'
-    },
-    ...makeTagProps(),
-    ...makeThemeProps()
-  },
+  props: makeVWindowProps(),
   emits: {
     'update:modelValue': v => true
   },
@@ -11509,112 +11578,6 @@ const VWindow = genericComponent()({
   }
 });
 
-const VWindowItem = genericComponent()({
-  name: 'VWindowItem',
-  directives: {
-    Touch
-  },
-  props: {
-    reverseTransition: {
-      type: [Boolean, String],
-      default: undefined
-    },
-    transition: {
-      type: [Boolean, String],
-      default: undefined
-    },
-    ...makeGroupItemProps(),
-    ...makeLazyProps()
-  },
-  emits: {
-    'group:selected': val => true
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const window = inject$1(VWindowSymbol);
-    const groupItem = useGroupItem(props, VWindowGroupSymbol);
-    const {
-      isBooted
-    } = useSsrBoot();
-    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-    const isTransitioning = ref(false);
-    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
-    function onAfterTransition() {
-      if (!isTransitioning.value || !window) {
-        return;
-      }
-
-      // Finalize transition state.
-      isTransitioning.value = false;
-      if (window.transitionCount.value > 0) {
-        window.transitionCount.value -= 1;
-
-        // Remove container height if we are out of transition.
-        if (window.transitionCount.value === 0) {
-          window.transitionHeight.value = undefined;
-        }
-      }
-    }
-    function onBeforeTransition() {
-      if (isTransitioning.value || !window) {
-        return;
-      }
-
-      // Initialize transition state here.
-      isTransitioning.value = true;
-      if (window.transitionCount.value === 0) {
-        // Set initial height for height transition.
-        window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight);
-      }
-      window.transitionCount.value += 1;
-    }
-    function onTransitionCancelled() {
-      onAfterTransition(); // This should have the same path as normal transition end.
-    }
-
-    function onEnterTransition(el) {
-      if (!isTransitioning.value) {
-        return;
-      }
-      nextTick(() => {
-        // Do not set height if no transition or cancelled.
-        if (!hasTransition.value || !isTransitioning.value || !window) {
-          return;
-        }
-
-        // Set transition target height.
-        window.transitionHeight.value = convertToUnit(el.clientHeight);
-      });
-    }
-    const transition = computed(() => {
-      const name = window.isReversed.value ? props.reverseTransition : props.transition;
-      return !hasTransition.value ? false : {
-        name: typeof name !== 'string' ? window.transition.value : name,
-        onBeforeEnter: onBeforeTransition,
-        onAfterEnter: onAfterTransition,
-        onEnterCancelled: onTransitionCancelled,
-        onBeforeLeave: onBeforeTransition,
-        onAfterLeave: onAfterTransition,
-        onLeaveCancelled: onTransitionCancelled,
-        onEnter: onEnterTransition
-      };
-    });
-    const {
-      hasContent
-    } = useLazy(props, groupItem.isSelected);
-    useRender(() => createVNode(MaybeTransition, {
-      "transition": isBooted.value && transition.value
-    }, {
-      default: () => [withDirectives(createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value]
-      }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
-    }));
-    return {};
-  }
-});
-
 // Types
 
 const VCarousel = genericComponent()({
@@ -11635,16 +11598,15 @@ const VCarousel = genericComponent()({
     interval: {
       type: [Number, String],
       default: 6000,
-      validator: value => value > 0
+      validator: value => Number(value) > 0
     },
-    modelValue: null,
     progress: [Boolean, String],
-    showArrows: {
-      type: [Boolean, String],
-      default: true,
-      validator: v => typeof v === 'boolean' || v === 'hover'
-    },
-    verticalDelimiters: [Boolean, String]
+    verticalDelimiters: [Boolean, String],
+    ...makeVWindowProps({
+      continuous: true,
+      mandatory: 'force',
+      showArrows: true
+    })
   },
   emits: {
     'update:modelValue': val => true
@@ -11712,6 +11674,7 @@ const VCarousel = genericComponent()({
         }, {
           default: () => [group.items.value.map((item, index) => {
             const props = {
+              id: `carousel-item-${item.id}`,
               'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
               class: [group.isSelected(item.id) && 'v-btn--active'],
               onClick: () => group.select(item.id, true)
@@ -11734,29 +11697,189 @@ const VCarousel = genericComponent()({
   }
 });
 
-// Types
-
-const VCarouselItem = genericComponent()({
-  name: 'VCarouselItem',
-  inheritAttrs: false,
+const VWindowItem = genericComponent()({
+  name: 'VWindowItem',
+  directives: {
+    Touch
+  },
   props: {
-    value: null
+    reverseTransition: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    transition: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    ...makeGroupItemProps(),
+    ...makeLazyProps()
+  },
+  emits: {
+    'group:selected': val => true
   },
   setup(props, _ref) {
     let {
-      slots,
-      attrs
+      slots
     } = _ref;
-    useRender(() => createVNode(VWindowItem, {
-      "class": "v-carousel-item",
-      "value": props.value
-    }, {
-      default: () => [createVNode(VImg, attrs, slots)]
-    }));
-  }
-});
-
-const VCode = createSimpleFunctional('v-code');
+    const window = inject$1(VWindowSymbol);
+    const groupItem = useGroupItem(props, VWindowGroupSymbol);
+    const {
+      isBooted
+    } = useSsrBoot();
+    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
+    const isTransitioning = ref(false);
+    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+    function onAfterTransition() {
+      if (!isTransitioning.value || !window) {
+        return;
+      }
+
+      // Finalize transition state.
+      isTransitioning.value = false;
+      if (window.transitionCount.value > 0) {
+        window.transitionCount.value -= 1;
+
+        // Remove container height if we are out of transition.
+        if (window.transitionCount.value === 0) {
+          window.transitionHeight.value = undefined;
+        }
+      }
+    }
+    function onBeforeTransition() {
+      if (isTransitioning.value || !window) {
+        return;
+      }
+
+      // Initialize transition state here.
+      isTransitioning.value = true;
+      if (window.transitionCount.value === 0) {
+        // Set initial height for height transition.
+        window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight);
+      }
+      window.transitionCount.value += 1;
+    }
+    function onTransitionCancelled() {
+      onAfterTransition(); // This should have the same path as normal transition end.
+    }
+
+    function onEnterTransition(el) {
+      if (!isTransitioning.value) {
+        return;
+      }
+      nextTick(() => {
+        // Do not set height if no transition or cancelled.
+        if (!hasTransition.value || !isTransitioning.value || !window) {
+          return;
+        }
+
+        // Set transition target height.
+        window.transitionHeight.value = convertToUnit(el.clientHeight);
+      });
+    }
+    const transition = computed(() => {
+      const name = window.isReversed.value ? props.reverseTransition : props.transition;
+      return !hasTransition.value ? false : {
+        name: typeof name !== 'string' ? window.transition.value : name,
+        onBeforeEnter: onBeforeTransition,
+        onAfterEnter: onAfterTransition,
+        onEnterCancelled: onTransitionCancelled,
+        onBeforeLeave: onBeforeTransition,
+        onAfterLeave: onAfterTransition,
+        onLeaveCancelled: onTransitionCancelled,
+        onEnter: onEnterTransition
+      };
+    });
+    const {
+      hasContent
+    } = useLazy(props, groupItem.isSelected);
+    useRender(() => createVNode(MaybeTransition, {
+      "transition": transition.value,
+      "disabled": !isBooted.value
+    }, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": ['v-window-item', groupItem.selectedClass.value]
+      }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
+    }));
+    return {};
+  }
+});
+
+// Types
+
+const VCarouselItem = genericComponent()({
+  name: 'VCarouselItem',
+  inheritAttrs: false,
+  props: {
+    value: null
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs
+    } = _ref;
+    useRender(() => createVNode(VWindowItem, {
+      "class": "v-carousel-item",
+      "value": props.value
+    }, {
+      default: () => [createVNode(VImg, attrs, slots)]
+    }));
+  }
+});
+
+const VCode = createSimpleFunctional('v-code');
+
+const makeVSheetProps = propsFactory({
+  color: String,
+  ...makeBorderProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeLocationProps(),
+  ...makePositionProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'v-sheet');
+const VSheet = genericComponent()({
+  name: 'VSheet',
+  props: {
+    ...makeVSheetProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
+    } = usePosition(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
+    }, slots));
+    return {};
+  }
+});
 
 // Types
 
@@ -12300,7 +12423,7 @@ const useSlider = _ref => {
   });
   const min = computed(() => parseFloat(props.min));
   const max = computed(() => parseFloat(props.max));
-  const step = computed(() => props.step > 0 ? parseFloat(props.step) : 0);
+  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
   const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
   const thumbSize = computed(() => parseInt(props.thumbSize, 10));
   const tickSize = computed(() => parseInt(props.tickSize, 10));
@@ -12794,7 +12917,7 @@ const VSlider = genericComponent()({
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? props.label ? createVNode(VLabel, {
-          "id": slotProps.id,
+          "id": slotProps.id.value,
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
@@ -13279,59 +13402,6 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
-const makeVSheetProps = propsFactory({
-  color: String,
-  ...makeBorderProps(),
-  ...makeDimensionProps(),
-  ...makeElevationProps(),
-  ...makeLocationProps(),
-  ...makePositionProps(),
-  ...makeRoundedProps(),
-  ...makeTagProps(),
-  ...makeThemeProps()
-}, 'v-sheet');
-const VSheet = genericComponent()({
-  name: 'VSheet',
-  props: {
-    ...makeVSheetProps()
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
-    const {
-      backgroundColorClasses,
-      backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
-    const {
-      borderClasses
-    } = useBorder(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
-    const {
-      elevationClasses
-    } = useElevation(props);
-    const {
-      locationStyles
-    } = useLocation(props);
-    const {
-      positionClasses
-    } = usePosition(props);
-    const {
-      roundedClasses
-    } = useRounded(props);
-    useRender(() => createVNode(props.tag, {
-      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
-    }, slots));
-    return {};
-  }
-});
-
 // Types
 
 const VColorPicker = defineComponent({
@@ -13368,13 +13438,9 @@ const VColorPicker = defineComponent({
     modelValue: {
       type: [Object, String]
     },
-    width: {
-      type: [Number, String],
-      default: 300
-    },
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
-    ...makeThemeProps()
+    ...omit(makeVSheetProps({
+      width: 300
+    }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
   },
   emits: {
     'update:modelValue': color => true,
@@ -13412,53 +13478,57 @@ const VColorPicker = defineComponent({
         trackFillColor: undefined
       }
     });
-    useRender(() => createVNode(VSheet, {
-      "rounded": props.rounded,
-      "elevation": props.elevation,
-      "theme": props.theme,
-      "class": ['v-color-picker'],
-      "style": {
-        '--v-color-picker-color-hsv': HSVtoCSS({
-          ...(currentColor.value ?? nullColor),
-          a: 1
-        })
-      },
-      "maxWidth": props.width
-    }, {
-      default: () => [!props.hideCanvas && createVNode(VColorPickerCanvas, {
-        "key": "canvas",
-        "color": currentColor.value,
-        "onUpdate:color": updateColor,
-        "disabled": props.disabled,
-        "dotSize": props.dotSize,
-        "width": props.width,
-        "height": props.canvasHeight
-      }, null), (!props.hideSliders || !props.hideInputs) && createVNode("div", {
-        "key": "controls",
-        "class": "v-color-picker__controls"
-      }, [!props.hideSliders && createVNode(VColorPickerPreview, {
-        "key": "preview",
-        "color": currentColor.value,
-        "onUpdate:color": updateColor,
-        "hideAlpha": !mode.value.endsWith('a'),
-        "disabled": props.disabled
-      }, null), !props.hideInputs && createVNode(VColorPickerEdit, {
-        "key": "edit",
-        "modes": props.modes,
-        "mode": mode.value,
-        "onUpdate:mode": m => mode.value = m,
-        "color": currentColor.value,
-        "onUpdate:color": updateColor,
-        "disabled": props.disabled
-      }, null)]), props.showSwatches && createVNode(VColorPickerSwatches, {
-        "key": "swatches",
-        "color": currentColor.value,
-        "onUpdate:color": updateColor,
-        "maxHeight": props.swatchesMaxHeight,
-        "swatches": props.swatches,
-        "disabled": props.disabled
-      }, null)]
-    }));
+    useRender(() => {
+      const [sheetProps] = VSheet.filterProps(props);
+      return createVNode(VSheet, mergeProps({
+        "rounded": props.rounded,
+        "elevation": props.elevation,
+        "theme": props.theme,
+        "class": ['v-color-picker'],
+        "style": {
+          '--v-color-picker-color-hsv': HSVtoCSS({
+            ...(currentColor.value ?? nullColor),
+            a: 1
+          })
+        }
+      }, sheetProps, {
+        "maxWidth": props.width
+      }), {
+        default: () => [!props.hideCanvas && createVNode(VColorPickerCanvas, {
+          "key": "canvas",
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "disabled": props.disabled,
+          "dotSize": props.dotSize,
+          "width": props.width,
+          "height": props.canvasHeight
+        }, null), (!props.hideSliders || !props.hideInputs) && createVNode("div", {
+          "key": "controls",
+          "class": "v-color-picker__controls"
+        }, [!props.hideSliders && createVNode(VColorPickerPreview, {
+          "key": "preview",
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "hideAlpha": !mode.value.endsWith('a'),
+          "disabled": props.disabled
+        }, null), !props.hideInputs && createVNode(VColorPickerEdit, {
+          "key": "edit",
+          "modes": props.modes,
+          "mode": mode.value,
+          "onUpdate:mode": m => mode.value = m,
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "disabled": props.disabled
+        }, null)]), props.showSwatches && createVNode(VColorPickerSwatches, {
+          "key": "swatches",
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "maxHeight": props.swatchesMaxHeight,
+          "swatches": props.swatches,
+          "disabled": props.disabled
+        }, null)]
+      });
+    });
     return {};
   }
 });
@@ -13533,7 +13603,7 @@ const VCombobox = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
-    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v || [])), v => {
+    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
@@ -13711,6 +13781,7 @@ const VCombobox = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -13720,7 +13791,7 @@ const VCombobox = genericComponent()({
           if (v == null) model.value = [];
         }],
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
           'v-combobox--chips': !!props.chips,
@@ -13729,6 +13800,7 @@ const VCombobox = genericComponent()({
         }],
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
         "readonly": props.readonly,
+        "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onFocus": () => isFocused.value = true,
@@ -13759,14 +13831,13 @@ const VCombobox = genericComponent()({
           }, {
             default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => slots.item?.({
+            }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
               item,
-              index,
               props: mergeProps(item.props, {
                 onClick: () => select(item)
               })
             }) ?? createVNode(VListItem, mergeProps({
-              "key": index
+              "key": item.value
             }, item.props, {
               "onClick": () => select(item)
             }), {
@@ -13776,7 +13847,8 @@ const VCombobox = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -14186,7 +14258,6 @@ const VFileInput = genericComponent()({
     multiple: Boolean,
     hint: String,
     persistentHint: Boolean,
-    placeholder: String,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -15510,12 +15581,18 @@ const VNavigationDrawer = genericComponent()({
         bgColor: 'transparent'
       }
     });
+    function onMouseenter() {
+      isHovering.value = true;
+    }
+    function onMouseleave() {
+      isHovering.value = false;
+    }
     useRender(() => {
       const hasImage = slots.image || props.image;
       return createVNode(Fragment, null, [createVNode(props.tag, mergeProps({
         "ref": rootEl,
-        "onMouseenter": () => isHovering.value = true,
-        "onMouseleave": () => isHovering.value = false,
+        "onMouseenter": onMouseenter,
+        "onMouseleave": onMouseleave,
         "class": ['v-navigation-drawer', `v-navigation-drawer--${location.value}`, {
           'v-navigation-drawer--expand-on-hover': props.expandOnHover,
           'v-navigation-drawer--floating': props.floating,
@@ -15791,7 +15868,7 @@ const VPagination = genericComponent()({
               ref,
               ellipsis: false,
               icon: true,
-              disabled: !!props.disabled || props.length < 2,
+              disabled: !!props.disabled || +props.length < 2,
               color: isActive ? props.activeColor : props.color,
               ariaCurrent: isActive,
               ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
@@ -15840,7 +15917,7 @@ const VPagination = genericComponent()({
       refs.value[currentIndex]?.$el.focus();
     }
     function onKeydown(e) {
-      if (e.key === keyValues.left && !props.disabled && page.value > props.start) {
+      if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
         page.value = page.value - 1;
         nextTick(updateFocus);
       } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
@@ -16544,35 +16621,36 @@ function calculateCenteredOffset(_ref2) {
 // Types
 
 const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
+const makeVSlideGroupProps = propsFactory({
+  centerActive: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  symbol: {
+    type: null,
+    default: VSlideGroupSymbol
+  },
+  nextIcon: {
+    type: IconValue,
+    default: '$next'
+  },
+  prevIcon: {
+    type: IconValue,
+    default: '$prev'
+  },
+  showArrows: {
+    type: [Boolean, String],
+    validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
+  },
+  ...makeTagProps(),
+  ...makeGroupProps({
+    selectedClass: 'v-slide-group-item--active'
+  })
+}, 'v-slide-group');
 const VSlideGroup = genericComponent()({
   name: 'VSlideGroup',
-  props: {
-    centerActive: Boolean,
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    symbol: {
-      type: null,
-      default: VSlideGroupSymbol
-    },
-    nextIcon: {
-      type: IconValue,
-      default: '$next'
-    },
-    prevIcon: {
-      type: IconValue,
-      default: '$prev'
-    },
-    showArrows: {
-      type: [Boolean, String],
-      validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
-    },
-    ...makeTagProps(),
-    ...makeGroupProps({
-      selectedClass: 'v-slide-group-item--active'
-    })
-  },
+  props: makeVSlideGroupProps(),
   emits: {
     'update:modelValue': value => true
   },
@@ -17281,10 +17359,6 @@ const VTabs = genericComponent()({
       default: 'start'
     },
     color: String,
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
     fixedTabs: Boolean,
     items: {
       type: Array,
@@ -17299,11 +17373,9 @@ const VTabs = genericComponent()({
     },
     hideSlider: Boolean,
     sliderColor: String,
-    modelValue: null,
-    mandatory: {
-      type: [Boolean, String],
-      default: 'force'
-    },
+    ...makeVSlideGroupProps({
+      mandatory: 'force'
+    }),
     ...makeDensityProps(),
     ...makeTagProps()
   },
@@ -17333,26 +17405,27 @@ const VTabs = genericComponent()({
         hideSlider: toRef(props, 'hideSlider')
       }
     });
-    useRender(() => createVNode(VSlideGroup, {
-      "modelValue": model.value,
-      "onUpdate:modelValue": $event => model.value = $event,
-      "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
-        'v-tabs--fixed-tabs': props.fixedTabs,
-        'v-tabs--grow': props.grow,
-        'v-tabs--stacked': props.stacked
-      }, densityClasses.value, backgroundColorClasses.value],
-      "style": [{
-        '--v-tabs-height': convertToUnit(props.height)
-      }, backgroundColorStyles.value],
-      "role": "tablist",
-      "symbol": VTabsSymbol,
-      "mandatory": props.mandatory,
-      "direction": props.direction
-    }, {
-      default: () => [slots.default ? slots.default() : parsedItems.value.map(item => createVNode(VTab, mergeProps(item, {
-        "key": item.title
-      }), null))]
-    }));
+    useRender(() => {
+      const [slideGroupProps] = VSlideGroup.filterProps(props);
+      return createVNode(VSlideGroup, mergeProps(slideGroupProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
+          'v-tabs--fixed-tabs': props.fixedTabs,
+          'v-tabs--grow': props.grow,
+          'v-tabs--stacked': props.stacked
+        }, densityClasses.value, backgroundColorClasses.value],
+        "style": [{
+          '--v-tabs-height': convertToUnit(props.height)
+        }, backgroundColorStyles.value],
+        "role": "tablist",
+        "symbol": VTabsSymbol
+      }), {
+        default: () => [slots.default ? slots.default() : parsedItems.value.map(item => createVNode(VTab, mergeProps(item, {
+          "key": item.title
+        }), null))]
+      });
+    });
     return {};
   }
 });
@@ -17429,6 +17502,7 @@ const VTextarea = genericComponent()({
       validator: v => !isNaN(parseFloat(v))
     },
     suffix: String,
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   },
@@ -17468,7 +17542,7 @@ const VTextarea = genericComponent()({
     const textareaRef = ref();
     const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
     const messages = computed(() => {
-      return props.messages.length ? props.messages : isActive.value || props.persistentHint ? props.hint : '';
+      return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
     });
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
@@ -17493,12 +17567,14 @@ const VTextarea = genericComponent()({
     }
     function onInput(e) {
       const el = e.target;
-      const caretPosition = [el.selectionStart, el.selectionEnd];
       model.value = el.value;
-      nextTick(() => {
-        el.selectionStart = caretPosition[0];
-        el.selectionEnd = caretPosition[1];
-      });
+      if (props.modelModifiers?.trim) {
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
+      }
     }
     const sizerRef = ref();
     function calculateInputHeight() {
@@ -18842,10 +18918,8 @@ const VDataTableRows = genericComponent()({
       type: String,
       default: '$vuetify.noDataText'
     },
-    rowHeight: Number
-  },
-  emits: {
-    'click:row': (event, value) => true
+    rowHeight: Number,
+    'onClick:row': Function
   },
   setup(props, _ref) {
     let {
@@ -18909,14 +18983,14 @@ const VDataTableRows = genericComponent()({
       };
       return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : createVNode(VDataTableRow, {
         "key": `item_${item.value}`,
-        "onClick": event => {
+        "onClick": expandOnClick.value || props['onClick:row'] ? event => {
           if (expandOnClick.value) {
             toggleExpand(item);
           }
-          emit('click:row', event, {
+          props['onClick:row']?.(event, {
             item
           });
-        },
+        } : undefined,
         "index": index,
         "item": item
       }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
@@ -19219,6 +19293,7 @@ const makeVDataTableProps = propsFactory({
   ...makeDataTableItemProps(),
   ...makeDataTableHeaderProps(),
   hideNoData: Boolean,
+  hover: Boolean,
   noDataText: {
     type: String,
     default: '$vuetify.noDataText'
@@ -19226,7 +19301,8 @@ const makeVDataTableProps = propsFactory({
   height: [String, Number],
   width: [String, Number],
   fixedHeader: Boolean,
-  fixedFooter: Boolean
+  fixedFooter: Boolean,
+  'onClick:row': Function
 }, 'v-data-table');
 const VDataTable = genericComponent()({
   name: 'VDataTable',
@@ -19247,8 +19323,7 @@ const VDataTable = genericComponent()({
     'update:sortBy': value => true,
     'update:options': value => true,
     'update:groupBy': value => true,
-    'update:expanded': value => true,
-    'click:row': (event, value) => true
+    'update:expanded': value => true
   },
   setup(props, _ref) {
     let {
@@ -19343,7 +19418,8 @@ const VDataTable = genericComponent()({
       }],
       "fixedHeader": props.fixedHeader,
       "fixedFooter": props.fixedFooter,
-      "height": props.height
+      "height": props.height,
+      "hover": props.hover
     }, {
       top: slots.top,
       default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
@@ -19353,7 +19429,7 @@ const VDataTable = genericComponent()({
         "multiSort": props.multiSort
       }, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": paginatedItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots)]), slots.tbody?.(), slots.tfoot?.()])),
       bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
@@ -19464,7 +19540,7 @@ const VDataTableVirtual = genericComponent()({
     'update:options': value => true,
     'update:groupBy': value => true,
     'update:expanded': value => true,
-    'click:row': (event, value) => true
+    'click:row': (e, value) => true
   },
   setup(props, _ref) {
     let {
@@ -19548,8 +19624,10 @@ const VDataTableVirtual = genericComponent()({
       "style": {
         '--v-table-row-height': convertToUnit(itemHeight.value)
       },
+      "fixedHeader": props.fixedHeader,
+      "fixedFooter": props.fixedFooter,
       "height": props.height,
-      "fixedHeader": props.fixedHeader
+      "hover": props.hover
     }, {
       top: slots.top,
       wrapper: () => createVNode("div", {
@@ -19575,7 +19653,7 @@ const VDataTableVirtual = genericComponent()({
         }
       }, null)]), createVNode(VDataTableRows, {
         "items": visibleItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots), createVNode("tr", {
         "style": {
           height: convertToUnit(paddingBottom.value),
@@ -19625,7 +19703,7 @@ const VDataTableServer = genericComponent()({
     'update:options': options => true,
     'update:expanded': options => true,
     'update:groupBy': value => true,
-    'click:row': (event, value) => true
+    'click:row': (e, value) => true
   },
   setup(props, _ref) {
     let {
@@ -19703,7 +19781,8 @@ const VDataTableServer = genericComponent()({
       }],
       "fixedHeader": props.fixedHeader,
       "fixedFooter": props.fixedFooter,
-      "height": props.height
+      "height": props.height,
+      "hover": props.hover
     }, {
       top: slots.top,
       default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
@@ -19720,7 +19799,7 @@ const VDataTableServer = genericComponent()({
         "role": "rowgroup"
       }, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": flatItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots)]), slots.tbody?.(), slots.tfoot?.()])),
       bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
@@ -19729,6 +19808,137 @@ const VDataTableServer = genericComponent()({
   }
 });
 
+// Types
+
+const rootTypes = {
+  actions: 'button@2',
+  article: 'heading, paragraph',
+  avatar: 'avatar',
+  button: 'button',
+  card: 'image, heading',
+  'card-avatar': 'image, list-item-avatar',
+  chip: 'chip',
+  'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',
+  'date-picker-options': 'text, avatar@2',
+  'date-picker-days': 'avatar@28',
+  heading: 'heading',
+  image: 'image',
+  'list-item': 'text',
+  'list-item-avatar': 'avatar, text',
+  'list-item-two-line': 'sentences',
+  'list-item-avatar-two-line': 'avatar, sentences',
+  'list-item-three-line': 'paragraph',
+  'list-item-avatar-three-line': 'avatar, paragraph',
+  paragraph: 'text@3',
+  sentences: 'text@2',
+  subtitle: 'text',
+  table: 'table-heading, table-thead, table-tbody, table-tfoot',
+  'table-heading': 'chip, text',
+  'table-thead': 'heading@6',
+  'table-tbody': 'table-row-divider@6',
+  'table-row-divider': 'table-row, divider',
+  'table-row': 'text@6',
+  'table-tfoot': 'text@2, avatar@2',
+  text: 'text'
+};
+function genBone(type) {
+  let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return createVNode("div", {
+    "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+  }, [children]);
+}
+function genBones(bone) {
+  // e.g. 'text@3'
+  const [type, length] = bone.split('@');
+
+  // Generate a length array based upon
+  // value after @ in the bone string
+  return Array.from({
+    length
+  }).map(() => genStructure(type));
+}
+function genStructure(type) {
+  let children = [];
+  if (!type) return children;
+
+  // TODO: figure out a better way to type this
+  const bone = rootTypes[type];
+
+  // End of recursion, do nothing
+  /* eslint-disable-next-line no-empty, brace-style */
+  if (type === bone) ;
+  // Array of values - e.g. 'heading, paragraph, text@2'
+  else if (type.includes(',')) return mapBones(type);
+  // Array of values - e.g. 'paragraph@4'
+  else if (type.includes('@')) return genBones(type);
+  // Array of values - e.g. 'card@2'
+  else if (bone.includes(',')) children = mapBones(bone);
+  // Array of values - e.g. 'list-item@2'
+  else if (bone.includes('@')) children = genBones(bone);
+  // Single value - e.g. 'card-heading'
+  else if (bone) children.push(genStructure(bone));
+  return [genBone(type, children)];
+}
+function mapBones(bones) {
+  // Remove spaces and return array of structures
+  return bones.replace(/\s/g, '').split(',').map(genStructure);
+}
+const VSkeletonLoader = genericComponent()({
+  name: 'VSkeletonLoader',
+  props: {
+    boilerplate: Boolean,
+    color: String,
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$vuetify.loading'
+    },
+    type: {
+      type: [String, Array],
+      default: 'image'
+    },
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeThemeProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      t
+    } = useLocale();
+    const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
+    useRender(() => {
+      const isLoading = !slots.default || props.loading;
+      return createVNode("div", {
+        "class": ['v-skeleton-loader', {
+          'v-skeleton-loader--boilerplate': props.boilerplate
+        }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}],
+        "aria-busy": !props.boilerplate ? isLoading : undefined,
+        "aria-live": !props.boilerplate ? 'polite' : undefined,
+        "aria-label": !props.boilerplate ? t(props.loadingText) : undefined,
+        "role": !props.boilerplate ? 'alert' : undefined
+      }, [isLoading ? items.value : slots.default?.()]);
+    });
+    return {};
+  }
+});
+
 const VVirtualScrollItem = genericComponent()({
   name: 'VVirtualScrollItem',
   props: {
@@ -19902,12 +20112,12 @@ const VVirtualScroll = genericComponent()({
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  VAlert: VAlert,
+  VAlertTitle: VAlertTitle,
   VApp: VApp,
   VAppBar: VAppBar,
   VAppBarNavIcon: VAppBarNavIcon,
   VAppBarTitle: VAppBarTitle,
-  VAlert: VAlert,
-  VAlertTitle: VAlertTitle,
   VAutocomplete: VAutocomplete,
   VAvatar: VAvatar,
   VBadge: VBadge,
@@ -19916,8 +20126,8 @@ var components = /*#__PURE__*/Object.freeze({
   VBannerText: VBannerText,
   VBottomNavigation: VBottomNavigation,
   VBreadcrumbs: VBreadcrumbs,
-  VBreadcrumbsItem: VBreadcrumbsItem,
   VBreadcrumbsDivider: VBreadcrumbsDivider,
+  VBreadcrumbsItem: VBreadcrumbsItem,
   VBtn: VBtn,
   VBtnGroup: VBtnGroup,
   VBtnToggle: VBtnToggle,
@@ -19933,41 +20143,51 @@ var components = /*#__PURE__*/Object.freeze({
   VCheckboxBtn: VCheckboxBtn,
   VChip: VChip,
   VChipGroup: VChipGroup,
+  VClassIcon: VClassIcon,
   VCode: VCode,
+  VCol: VCol,
   VColorPicker: VColorPicker,
   VCombobox: VCombobox,
+  VComponentIcon: VComponentIcon,
+  VContainer: VContainer,
   VCounter: VCounter,
+  VDataTable: VDataTable,
+  VDataTableFooter: VDataTableFooter,
+  VDataTableRow: VDataTableRow,
+  VDataTableRows: VDataTableRows,
+  VDataTableServer: VDataTableServer,
+  VDataTableVirtual: VDataTableVirtual,
   VDefaultsProvider: VDefaultsProvider,
   VDialog: VDialog,
+  VDialogBottomTransition: VDialogBottomTransition,
+  VDialogTopTransition: VDialogTopTransition,
+  VDialogTransition: VDialogTransition,
   VDivider: VDivider,
-  VExpansionPanels: VExpansionPanels,
+  VExpandTransition: VExpandTransition,
+  VExpandXTransition: VExpandXTransition,
   VExpansionPanel: VExpansionPanel,
   VExpansionPanelText: VExpansionPanelText,
   VExpansionPanelTitle: VExpansionPanelTitle,
+  VExpansionPanels: VExpansionPanels,
+  VFabTransition: VFabTransition,
+  VFadeTransition: VFadeTransition,
   VField: VField,
   VFieldLabel: VFieldLabel,
   VFileInput: VFileInput,
   VFooter: VFooter,
   VForm: VForm,
-  VContainer: VContainer,
-  VCol: VCol,
-  VRow: VRow,
-  VSpacer: VSpacer,
   VHover: VHover,
   VIcon: VIcon,
-  VComponentIcon: VComponentIcon,
-  VSvgIcon: VSvgIcon,
-  VLigatureIcon: VLigatureIcon,
-  VClassIcon: VClassIcon,
   VImg: VImg,
   VInput: VInput,
-  VItemGroup: VItemGroup,
   VItem: VItem,
+  VItemGroup: VItemGroup,
   VKbd: VKbd,
   VLabel: VLabel,
   VLayout: VLayout,
   VLayoutItem: VLayoutItem,
   VLazy: VLazy,
+  VLigatureIcon: VLigatureIcon,
   VList: VList,
   VListGroup: VListGroup,
   VListImg: VListImg,
@@ -19993,54 +20213,45 @@ var components = /*#__PURE__*/Object.freeze({
   VRangeSlider: VRangeSlider,
   VRating: VRating,
   VResponsive: VResponsive,
+  VRow: VRow,
+  VScaleTransition: VScaleTransition,
+  VScrollXReverseTransition: VScrollXReverseTransition,
+  VScrollXTransition: VScrollXTransition,
+  VScrollYReverseTransition: VScrollYReverseTransition,
+  VScrollYTransition: VScrollYTransition,
   VSelect: VSelect,
   VSelectionControl: VSelectionControl,
   VSelectionControlGroup: VSelectionControlGroup,
   VSheet: VSheet,
+  VSkeletonLoader: VSkeletonLoader,
   VSlideGroup: VSlideGroup,
   VSlideGroupItem: VSlideGroupItem,
+  VSlideXReverseTransition: VSlideXReverseTransition,
+  VSlideXTransition: VSlideXTransition,
+  VSlideYReverseTransition: VSlideYReverseTransition,
+  VSlideYTransition: VSlideYTransition,
   VSlider: VSlider,
   VSnackbar: VSnackbar,
+  VSpacer: VSpacer,
+  VSvgIcon: VSvgIcon,
   VSwitch: VSwitch,
   VSystemBar: VSystemBar,
-  VTabs: VTabs,
   VTab: VTab,
   VTable: VTable,
-  VTextarea: VTextarea,
+  VTabs: VTabs,
   VTextField: VTextField,
+  VTextarea: VTextarea,
   VThemeProvider: VThemeProvider,
   VTimeline: VTimeline,
   VTimelineItem: VTimelineItem,
   VToolbar: VToolbar,
-  VToolbarTitle: VToolbarTitle,
   VToolbarItems: VToolbarItems,
+  VToolbarTitle: VToolbarTitle,
   VTooltip: VTooltip,
   VValidation: VValidation,
+  VVirtualScroll: VVirtualScroll,
   VWindow: VWindow,
-  VWindowItem: VWindowItem,
-  VDialogTransition: VDialogTransition,
-  VFabTransition: VFabTransition,
-  VDialogBottomTransition: VDialogBottomTransition,
-  VDialogTopTransition: VDialogTopTransition,
-  VFadeTransition: VFadeTransition,
-  VScaleTransition: VScaleTransition,
-  VScrollXTransition: VScrollXTransition,
-  VScrollXReverseTransition: VScrollXReverseTransition,
-  VScrollYTransition: VScrollYTransition,
-  VScrollYReverseTransition: VScrollYReverseTransition,
-  VSlideXTransition: VSlideXTransition,
-  VSlideXReverseTransition: VSlideXReverseTransition,
-  VSlideYTransition: VSlideYTransition,
-  VSlideYReverseTransition: VSlideYReverseTransition,
-  VExpandTransition: VExpandTransition,
-  VExpandXTransition: VExpandXTransition,
-  VDataTable: VDataTable,
-  VDataTableRows: VDataTableRows,
-  VDataTableRow: VDataTableRow,
-  VDataTableVirtual: VDataTableVirtual,
-  VDataTableServer: VDataTableServer,
-  VDataTableFooter: VDataTableFooter,
-  VVirtualScroll: VVirtualScroll
+  VWindowItem: VWindowItem
 });
 
 // Types
@@ -20251,7 +20462,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.12";
+const version$1 = "3.1.14";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20263,7 +20474,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.12";
+const version = "3.1.14";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};