vuetify 3.1.12 → 3.1.14

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.12
+* Vuetify v3.1.14
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -343,7 +343,7 @@
   }
   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' + vue.capitalize(name);
     return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -983,7 +983,7 @@
         }
         return properties;
       }
-      return mergeDeep(properties.prev, properties);
+      return properties.prev ? mergeDeep(properties.prev, properties) : properties;
     });
     vue.provide(DefaultsSymbol, newDefaults);
     return newDefaults;
@@ -1707,7 +1707,7 @@
         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})`]);
         }
@@ -1845,7 +1845,8 @@
     });
     const model = vue.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);
@@ -1937,7 +1938,8 @@
       ariaLabel: {
         item: 'Rating {0} of {1}'
       }
-    }
+    },
+    loading: 'Loading...'
   };
 
   const LANG_PREFIX = '$vuetify.';
@@ -2214,6 +2216,7 @@
     return genericComponent()({
       name,
       props: {
+        disabled: Boolean,
         group: Boolean,
         hideOnLeave: Boolean,
         leaveAbsolute: Boolean,
@@ -2230,56 +2233,62 @@
         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 ? vue.TransitionGroup : vue.Transition;
           return vue.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);
         };
       }
@@ -2293,7 +2302,8 @@
         mode: {
           type: String,
           default: mode
-        }
+        },
+        disabled: Boolean
       },
       setup(props, _ref2) {
         let {
@@ -2301,9 +2311,10 @@
         } = _ref2;
         return () => {
           return vue.h(vue.Transition, {
-            name,
+            name: props.disabled ? '' : name,
+            css: !props.disabled,
             // mode: props.mode, // TODO: vuejs/vue-next#3104
-            ...functions
+            ...(props.disabled ? {} : functions)
           }, slots.default);
         };
       }
@@ -2709,9 +2720,9 @@
       ...makeTransitionProps()
     },
     emits: {
-      loadstart: event => true,
-      load: event => true,
-      error: event => true
+      loadstart: value => true,
+      load: value => true,
+      error: value => true
     },
     setup(props, _ref) {
       let {
@@ -5336,9 +5347,9 @@
       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');
@@ -5837,7 +5848,7 @@
       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;
@@ -5884,8 +5895,8 @@
       default: 'horizontal',
       validator: v => ['horizontal', 'vertical'].includes(v)
     },
-    'onClick:prepend': EventProp,
-    'onClick:append': EventProp,
+    'onClick:prepend': EventProp(),
+    'onClick:append': EventProp(),
     ...makeDensityProps(),
     ...makeValidationProps()
   }, 'v-input');
@@ -6042,6 +6053,9 @@
         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);
@@ -6049,6 +6063,20 @@
           }
         }
       },
+      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;
@@ -6099,6 +6127,7 @@
       type: String,
       default: 'text'
     },
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   }, 'v-text-field');
@@ -6173,7 +6202,7 @@
       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];
           vue.nextTick(() => {
             el.selectionStart = caretPosition[0];
@@ -6238,9 +6267,6 @@
                     ...slotProps
                   }
                 } = _ref3;
-                const placeholder = vue.computed(() => {
-                  return (props.persistentPlaceholder || isFocused.value) && !isDirty.value ? props.placeholder : '';
-                });
                 const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "value": model.value,
@@ -6249,7 +6275,7 @@
                   "readonly": isReadonly.value,
                   "disabled": isDisabled.value,
                   "name": props.name,
-                  "placeholder": placeholder.value,
+                  "placeholder": props.placeholder,
                   "size": 1,
                   "type": props.type,
                   "onFocus": onFocus,
@@ -6813,8 +6839,8 @@
         type: Boolean,
         default: true
       },
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -7565,6 +7591,9 @@
       } = useNestedItem(vue.toRef(props, 'value'), true);
       const id = vue.computed(() => `v-list-group--id-${String(_id.value)}`);
       const list = useList();
+      const {
+        isBooted
+      } = useSsrBoot();
       function onClick(e) {
         open(!isOpen.value, e);
       }
@@ -7574,6 +7603,17 @@
         id: id.value
       }));
       const toggleIcon = vue.computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
+      const activatorDefaults = vue.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(() => vue.createVNode(props.tag, {
         "class": ['v-list-group', {
           'v-list-group--prepend': list?.hasPrepend.value,
@@ -7583,17 +7623,7 @@
         }]
       }, {
         default: () => [slots.activator && vue.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: () => [vue.createVNode(VListGroupActivator, null, {
             default: () => [slots.activator({
@@ -7601,7 +7631,12 @@
               isOpen: isOpen.value
             })]
           })]
-        }), vue.createVNode(VExpandTransition, null, {
+        }), vue.createVNode(MaybeTransition, {
+          "transition": {
+            component: VExpandTransition
+          },
+          "disabled": !isBooted.value
+        }, {
           default: () => [vue.withDirectives(vue.createVNode("div", {
             "class": "v-list-group__items",
             "role": "group",
@@ -7649,8 +7684,8 @@
       subtitle: [String, Number, Boolean],
       title: [String, Number, Boolean],
       value: null,
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
@@ -8192,7 +8227,8 @@
       }
       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)) {
@@ -8373,6 +8409,7 @@
         isActive.value = !isActive.value;
       },
       mouseenter: e => {
+        if (e.sourceCapabilities?.firesTouchEvents) return;
         isHovered = true;
         activatorEl.value = e.currentTarget || e.target;
         runOpenDelay();
@@ -9899,6 +9936,9 @@
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const isFocused = vue.ref(false);
+      let keyboardLookupPrefix = '';
+      let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
           return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9935,6 +9975,26 @@
         } 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) {
@@ -9964,7 +10024,9 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -9972,8 +10034,10 @@
           "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,
@@ -9982,6 +10046,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": true,
+          "placeholder": placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onBlur": onBlur,
@@ -10030,7 +10095,8 @@
                     } = _ref2;
                     return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
-                      "ripple": false
+                      "ripple": false,
+                      "tabindex": "-1"
                     }, null) : undefined;
                   }
                 });
@@ -10357,6 +10423,7 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -10366,7 +10433,7 @@
             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,
@@ -10376,6 +10443,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": props.readonly,
+          "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onFocus": () => isFocused.value = true,
@@ -10406,14 +10474,13 @@
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.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: vue.mergeProps(item.props, {
                   onClick: () => select(item)
                 })
               }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": index
+                "key": item.value
               }, item.props, {
                 "onClick": () => select(item)
               }), {
@@ -10423,7 +10490,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -10548,7 +10616,7 @@
       });
       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 vue.createVNode(props.tag, vue.mergeProps({
           "class": ['v-badge', {
@@ -11345,47 +11413,48 @@
 
   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
     },
@@ -11513,112 +11582,6 @@
     }
   });
 
-  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 = vue.inject(VWindowSymbol);
-      const groupItem = useGroupItem(props, VWindowGroupSymbol);
-      const {
-        isBooted
-      } = useSsrBoot();
-      if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-      const isTransitioning = vue.ref(false);
-      const hasTransition = vue.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;
-        }
-        vue.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 = vue.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(() => vue.createVNode(MaybeTransition, {
-        "transition": isBooted.value && transition.value
-      }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['v-window-item', groupItem.selectedClass.value]
-        }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
-      }));
-      return {};
-    }
-  });
-
   // Types
 
   const VCarousel = genericComponent()({
@@ -11639,16 +11602,15 @@
       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
@@ -11716,6 +11678,7 @@
           }, {
             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)
@@ -11738,29 +11701,189 @@
     }
   });
 
-  // 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(() => vue.createVNode(VWindowItem, {
-        "class": "v-carousel-item",
-        "value": props.value
-      }, {
-        default: () => [vue.createVNode(VImg, attrs, slots)]
-      }));
-    }
-  });
-
-  const VCode = createSimpleFunctional('v-code');
+      const window = vue.inject(VWindowSymbol);
+      const groupItem = useGroupItem(props, VWindowGroupSymbol);
+      const {
+        isBooted
+      } = useSsrBoot();
+      if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
+      const isTransitioning = vue.ref(false);
+      const hasTransition = vue.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;
+        }
+        vue.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 = vue.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(() => vue.createVNode(MaybeTransition, {
+        "transition": transition.value,
+        "disabled": !isBooted.value
+      }, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": ['v-window-item', groupItem.selectedClass.value]
+        }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
+      }));
+      return {};
+    }
+  });
+
+  // Types
+
+  const VCarouselItem = genericComponent()({
+    name: 'VCarouselItem',
+    inheritAttrs: false,
+    props: {
+      value: null
+    },
+    setup(props, _ref) {
+      let {
+        slots,
+        attrs
+      } = _ref;
+      useRender(() => vue.createVNode(VWindowItem, {
+        "class": "v-carousel-item",
+        "value": props.value
+      }, {
+        default: () => [vue.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(vue.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(() => vue.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
 
@@ -12304,7 +12427,7 @@
     });
     const min = vue.computed(() => parseFloat(props.min));
     const max = vue.computed(() => parseFloat(props.max));
-    const step = vue.computed(() => props.step > 0 ? parseFloat(props.step) : 0);
+    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
     const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     const thumbSize = vue.computed(() => parseInt(props.thumbSize, 10));
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
@@ -12798,7 +12921,7 @@
         }), {
           ...slots,
           prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? props.label ? vue.createVNode(VLabel, {
-            "id": slotProps.id,
+            "id": slotProps.id.value,
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
@@ -13283,59 +13406,6 @@
     }
   });
 
-  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(vue.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(() => vue.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({
@@ -13372,13 +13442,9 @@
       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,
@@ -13416,53 +13482,57 @@
           trackFillColor: undefined
         }
       });
-      useRender(() => vue.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 && vue.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) && vue.createVNode("div", {
-          "key": "controls",
-          "class": "v-color-picker__controls"
-        }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
-          "key": "preview",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "hideAlpha": !mode.value.endsWith('a'),
-          "disabled": props.disabled
-        }, null), !props.hideInputs && vue.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 && vue.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 vue.createVNode(VSheet, vue.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 && vue.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) && vue.createVNode("div", {
+            "key": "controls",
+            "class": "v-color-picker__controls"
+          }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
+            "key": "preview",
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "hideAlpha": !mode.value.endsWith('a'),
+            "disabled": props.disabled
+          }, null), !props.hideInputs && vue.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 && vue.createVNode(VColorPickerSwatches, {
+            "key": "swatches",
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "maxHeight": props.swatchesMaxHeight,
+            "swatches": props.swatches,
+            "disabled": props.disabled
+          }, null)]
+        });
+      });
       return {};
     }
   });
@@ -13537,7 +13607,7 @@
         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;
       });
@@ -13715,6 +13785,7 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -13724,7 +13795,7 @@
             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,
@@ -13733,6 +13804,7 @@
           }],
           "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,
@@ -13763,14 +13835,13 @@
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.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: vue.mergeProps(item.props, {
                   onClick: () => select(item)
                 })
               }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": index
+                "key": item.value
               }, item.props, {
                 "onClick": () => select(item)
               }), {
@@ -13780,7 +13851,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -14190,7 +14262,6 @@
       multiple: Boolean,
       hint: String,
       persistentHint: Boolean,
-      placeholder: String,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -15514,12 +15585,18 @@
           bgColor: 'transparent'
         }
       });
+      function onMouseenter() {
+        isHovering.value = true;
+      }
+      function onMouseleave() {
+        isHovering.value = false;
+      }
       useRender(() => {
         const hasImage = slots.image || props.image;
         return vue.createVNode(vue.Fragment, null, [vue.createVNode(props.tag, vue.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,
@@ -15795,7 +15872,7 @@
                 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),
@@ -15844,7 +15921,7 @@
         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;
           vue.nextTick(updateFocus);
         } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
@@ -16548,35 +16625,36 @@
   // 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
     },
@@ -17285,10 +17363,6 @@
         default: 'start'
       },
       color: String,
-      direction: {
-        type: String,
-        default: 'horizontal'
-      },
       fixedTabs: Boolean,
       items: {
         type: Array,
@@ -17303,11 +17377,9 @@
       },
       hideSlider: Boolean,
       sliderColor: String,
-      modelValue: null,
-      mandatory: {
-        type: [Boolean, String],
-        default: 'force'
-      },
+      ...makeVSlideGroupProps({
+        mandatory: 'force'
+      }),
       ...makeDensityProps(),
       ...makeTagProps()
     },
@@ -17337,26 +17409,27 @@
           hideSlider: vue.toRef(props, 'hideSlider')
         }
       });
-      useRender(() => vue.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 => vue.createVNode(VTab, vue.mergeProps(item, {
-          "key": item.title
-        }), null))]
-      }));
+      useRender(() => {
+        const [slideGroupProps] = VSlideGroup.filterProps(props);
+        return 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}`, {
+            '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 => vue.createVNode(VTab, vue.mergeProps(item, {
+            "key": item.title
+          }), null))]
+        });
+      });
       return {};
     }
   });
@@ -17433,6 +17506,7 @@
         validator: v => !isNaN(parseFloat(v))
       },
       suffix: String,
+      modelModifiers: Object,
       ...makeVInputProps(),
       ...makeVFieldProps()
     },
@@ -17472,7 +17546,7 @@
       const textareaRef = vue.ref();
       const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
       const messages = vue.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) {
@@ -17497,12 +17571,14 @@
       }
       function onInput(e) {
         const el = e.target;
-        const caretPosition = [el.selectionStart, el.selectionEnd];
         model.value = el.value;
-        vue.nextTick(() => {
-          el.selectionStart = caretPosition[0];
-          el.selectionEnd = caretPosition[1];
-        });
+        if (props.modelModifiers?.trim) {
+          const caretPosition = [el.selectionStart, el.selectionEnd];
+          vue.nextTick(() => {
+            el.selectionStart = caretPosition[0];
+            el.selectionEnd = caretPosition[1];
+          });
+        }
       }
       const sizerRef = vue.ref();
       function calculateInputHeight() {
@@ -18846,10 +18922,8 @@
         type: String,
         default: '$vuetify.noDataText'
       },
-      rowHeight: Number
-    },
-    emits: {
-      'click:row': (event, value) => true
+      rowHeight: Number,
+      'onClick:row': Function
     },
     setup(props, _ref) {
       let {
@@ -18913,14 +18987,14 @@
         };
         return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.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)]);
@@ -19223,6 +19297,7 @@
     ...makeDataTableItemProps(),
     ...makeDataTableHeaderProps(),
     hideNoData: Boolean,
+    hover: Boolean,
     noDataText: {
       type: String,
       default: '$vuetify.noDataText'
@@ -19230,7 +19305,8 @@
     height: [String, Number],
     width: [String, Number],
     fixedHeader: Boolean,
-    fixedFooter: Boolean
+    fixedFooter: Boolean,
+    'onClick:row': Function
   }, 'v-data-table');
   const VDataTable = genericComponent()({
     name: 'VDataTable',
@@ -19251,8 +19327,7 @@
       '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 {
@@ -19347,7 +19422,8 @@
         }],
         "fixedHeader": props.fixedHeader,
         "fixedFooter": props.fixedFooter,
-        "height": props.height
+        "height": props.height,
+        "hover": props.hover
       }, {
         top: slots.top,
         default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
@@ -19357,7 +19433,7 @@
           "multiSort": props.multiSort
         }, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.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 ?? (() => vue.createVNode(VDataTableFooter, null, {
           prepend: slots['footer.prepend']
@@ -19468,7 +19544,7 @@
       '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 {
@@ -19552,8 +19628,10 @@
         "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: () => vue.createVNode("div", {
@@ -19579,7 +19657,7 @@
           }
         }, null)]), vue.createVNode(VDataTableRows, {
           "items": visibleItems.value,
-          "onClick:row": (event, value) => emit('click:row', event, value)
+          "onClick:row": props['onClick:row']
         }, slots), vue.createVNode("tr", {
           "style": {
             height: convertToUnit(paddingBottom.value),
@@ -19629,7 +19707,7 @@
       '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 {
@@ -19707,7 +19785,8 @@
         }],
         "fixedHeader": props.fixedHeader,
         "fixedFooter": props.fixedFooter,
-        "height": props.height
+        "height": props.height,
+        "hover": props.hover
       }, {
         top: slots.top,
         default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
@@ -19724,7 +19803,7 @@
           "role": "rowgroup"
         }, [slots.body ? slots.body() : vue.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 ?? (() => vue.createVNode(VDataTableFooter, null, {
           prepend: slots['footer.prepend']
@@ -19733,6 +19812,137 @@
     }
   });
 
+  // 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 vue.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(vue.toRef(props, 'color'));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        t
+      } = useLocale();
+      const items = vue.computed(() => genStructure(wrapInArray(props.type).join(',')));
+      useRender(() => {
+        const isLoading = !slots.default || props.loading;
+        return vue.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: {
@@ -19906,12 +20116,12 @@
 
   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,
@@ -19920,8 +20130,8 @@
     VBannerText: VBannerText,
     VBottomNavigation: VBottomNavigation,
     VBreadcrumbs: VBreadcrumbs,
-    VBreadcrumbsItem: VBreadcrumbsItem,
     VBreadcrumbsDivider: VBreadcrumbsDivider,
+    VBreadcrumbsItem: VBreadcrumbsItem,
     VBtn: VBtn,
     VBtnGroup: VBtnGroup,
     VBtnToggle: VBtnToggle,
@@ -19937,41 +20147,51 @@
     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,
@@ -19997,54 +20217,45 @@
     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
@@ -20255,7 +20466,7 @@
       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
@@ -20267,7 +20478,7 @@
     }
   }
 
-  const version = "3.1.12";
+  const version = "3.1.14";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20288,6 +20499,4 @@
   exports.useTheme = useTheme;
   exports.version = version;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));