@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-16

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.7.4-next.2024-11-06
+* Vuetify v3.7.5-dev.2024-12-16
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, onBeforeUnmount, watch, readonly, useId, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1253,9 +1253,6 @@ function getForeground(color) {
 }
 
 // Utilities
-
-// Types
-
 function getCurrentInstance(name, message) {
   const vm = getCurrentInstance$1();
   if (!vm) {
@@ -1268,20 +1265,6 @@ function getCurrentInstanceName() {
   const vm = getCurrentInstance(name).type;
   return toKebabCase(vm?.aliasName || vm?.name);
 }
-let _uid = 0;
-let _map = new WeakMap();
-function getUid() {
-  const vm = getCurrentInstance('getUid');
-  if (_map.has(vm)) return _map.get(vm);else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
-}
-getUid.reset = () => {
-  _uid = 0;
-  _map = new WeakMap();
-};
 
 // Utilities
 
@@ -1651,7 +1634,7 @@ function useLayout() {
 function useLayoutItem(options) {
   const layout = inject$1(VuetifyLayoutKey);
   if (!layout) throw new Error('[Vuetify] Could not find injected layout');
-  const id = options.id ?? `layout-item-${getUid()}`;
+  const id = options.id ?? `layout-item-${useId()}`;
   const vm = getCurrentInstance('useLayoutItem');
   provide(VuetifyLayoutItemKey, {
     id
@@ -2427,15 +2410,15 @@ function createTheme(options) {
     const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
     for (const key of colors) {
       if (/^on-[a-z]/.test(key)) {
-        createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${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-color: rgb(var(--v-theme-${key}))`, `color: rgb(var(--v-theme-on-${key}))`]);
-        createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key}))`]);
+        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})`]);
       }
     }
     lines.push(...bgLines, ...fgLines);
-    return '@layer vuetify.theme {\n' + lines.map(v => `  ${v}`).join('') + '\n}';
+    return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
   });
   function getHead() {
     return {
@@ -4153,7 +4136,7 @@ function useGroupItem(props, injectKey) {
   if (!vm) {
     throw new Error('[Vuetify] useGroupItem composable must be used inside a component setup function');
   }
-  const id = getUid();
+  const id = useId();
   provide(Symbol.for(`${injectKey.description}:id`), id);
   const group = inject$1(injectKey, null);
   if (!group) {
@@ -6132,7 +6115,7 @@ const VSelectionControlGroup = genericComponent()({
       slots
     } = _ref;
     const modelValue = useProxiedModel(props, 'modelValue');
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-selection-control-group-${uid}`);
     const name = computed(() => props.name || id.value);
     const updateHandlers = new Set();
@@ -6269,7 +6252,7 @@ const VSelectionControl = genericComponent()({
       backgroundColorStyles,
       trueValue
     } = useSelectionControl(props);
-    const uid = getUid();
+    const uid = useId();
     const isFocused = shallowRef(false);
     const isFocusVisible = shallowRef(false);
     const input = ref();
@@ -6670,8 +6653,13 @@ function createForm(props) {
     resetValidation
   };
 }
-function useForm() {
-  return inject$1(FormKey, null);
+function useForm(props) {
+  const form = inject$1(FormKey, null);
+  return {
+    ...form,
+    isReadonly: computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
+    isDisabled: computed(() => !!(props?.disabled ?? form?.isDisabled.value))
+  };
 }
 
 // Composables
@@ -6709,20 +6697,18 @@ const makeValidationProps = propsFactory({
 }, 'validation');
 function useValidation(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getUid();
+  let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : useId();
   const model = useProxiedModel(props, 'modelValue');
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
-  const form = useForm();
+  const form = useForm(props);
   const internalErrorMessages = ref([]);
   const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-  const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value));
-  const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value));
   const errorMessages = computed(() => {
     return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
   });
   const validateOn = computed(() => {
-    let value = (props.validateOn ?? form?.validateOn.value) || 'input';
+    let value = (props.validateOn ?? form.validateOn?.value) || 'input';
     if (value === 'lazy') value = 'input lazy';
     if (value === 'eager') value = 'input eager';
     const set = new Set(value?.split(' ') ?? []);
@@ -6748,14 +6734,14 @@ function useValidation(props) {
     return {
       [`${name}--error`]: isValid.value === false,
       [`${name}--dirty`]: isDirty.value,
-      [`${name}--disabled`]: isDisabled.value,
-      [`${name}--readonly`]: isReadonly.value
+      [`${name}--disabled`]: form.isDisabled.value,
+      [`${name}--readonly`]: form.isReadonly.value
     };
   });
   const vm = getCurrentInstance('validation');
   const uid = computed(() => props.name ?? unref(id));
   onBeforeMount(() => {
-    form?.register({
+    form.register?.({
       id: uid.value,
       vm,
       validate,
@@ -6764,13 +6750,13 @@ function useValidation(props) {
     });
   });
   onBeforeUnmount(() => {
-    form?.unregister(uid.value);
+    form.unregister?.(uid.value);
   });
   onMounted(async () => {
     if (!validateOn.value.lazy) {
       await validate(!validateOn.value.eager);
     }
-    form?.update(uid.value, isValid.value, errorMessages.value);
+    form.update?.(uid.value, isValid.value, errorMessages.value);
   });
   useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
     watch(validationModel, () => {
@@ -6790,7 +6776,7 @@ function useValidation(props) {
     });
   });
   watch([isValid, errorMessages], () => {
-    form?.update(uid.value, isValid.value, errorMessages.value);
+    form.update?.(uid.value, isValid.value, errorMessages.value);
   });
   async function reset() {
     model.value = null;
@@ -6831,8 +6817,8 @@ function useValidation(props) {
   return {
     errorMessages,
     isDirty,
-    isDisabled,
-    isReadonly,
+    isDisabled: form.isDisabled,
+    isReadonly: form.isReadonly,
     isPristine,
     isValid,
     isValidating,
@@ -6903,7 +6889,7 @@ const VInput = genericComponent()({
     const {
       InputIcon
     } = useInputIcon(props);
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
     const {
@@ -7011,7 +6997,7 @@ const VCheckbox = genericComponent()({
       focus,
       blur
     } = useFocus(props);
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -7751,6 +7737,7 @@ const VSlideGroup = genericComponent()({
 
 const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
 const makeVChipGroupProps = propsFactory({
+  baseColor: String,
   column: Boolean,
   filter: Boolean,
   valueComparator: {
@@ -7790,6 +7777,7 @@ const VChipGroup = genericComponent()({
     } = useGroup(props, VChipGroupSymbol);
     provideDefaults({
       VChip: {
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled'),
         filter: toRef(props, 'filter'),
@@ -7823,6 +7811,7 @@ const makeVChipProps = propsFactory({
   activeClass: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   closable: Boolean,
   closeIcon: {
     type: IconValue,
@@ -7835,7 +7824,7 @@ const makeVChipProps = propsFactory({
   draggable: Boolean,
   filter: Boolean,
   filterIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete'
   },
   label: Boolean,
@@ -7897,11 +7886,6 @@ const VChip = genericComponent()({
     const {
       borderClasses
     } = useBorder(props);
-    const {
-      colorClasses,
-      colorStyles,
-      variantClasses
-    } = useVariant(props);
     const {
       densityClasses
     } = useDensity(props);
@@ -7931,6 +7915,18 @@ const VChip = genericComponent()({
         emit('click:close', e);
       }
     }));
+    const variantProps = computed(() => {
+      const showColor = !group || group.isSelected.value;
+      return {
+        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        variant: props.variant
+      };
+    });
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(variantProps);
     function onClick(e) {
       emit('click', e);
       if (!isClickable.value) return;
@@ -7951,16 +7947,16 @@ const VChip = genericComponent()({
       const hasFilter = !!(slots.filter || props.filter) && group;
       const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
-      const hasColor = !group || group.isSelected.value;
       return isActive.value && withDirectives(createVNode(Tag, mergeProps({
         "class": ['v-chip', {
           'v-chip--disabled': props.disabled,
           'v-chip--label': props.label,
           'v-chip--link': isClickable.value,
           'v-chip--filter': hasFilter,
-          'v-chip--pill': props.pill
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
-        "style": [hasColor ? colorStyles.value : undefined, props.style],
+          'v-chip--pill': props.pill,
+          [`${props.activeClass}`]: props.activeClass && link.isActive?.value
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
+        "style": [colorStyles.value, props.style],
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
         "tabindex": isClickable.value ? 0 : undefined,
@@ -8689,7 +8685,7 @@ const useNested = props => {
 };
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
-  const uidSymbol = Symbol(getUid());
+  const uidSymbol = Symbol('nested item');
   const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol);
   const item = {
     ...parent,
@@ -8932,7 +8928,8 @@ const VListItem = genericComponent()({
     const list = useList();
     const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
     const isLink = computed(() => props.link !== false && link.isLink.value);
-    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || !!list && (root.selectable.value || root.activatable.value || props.value != null)));
+    const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
     const roundedProps = computed(() => props.rounded || props.nav);
     const color = computed(() => props.color ?? props.activeColor);
     const variantProps = computed(() => ({
@@ -9023,7 +9020,7 @@ const VListItem = genericComponent()({
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, dimensionStyles.value, props.style],
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-        "aria-selected": root.activatable.value ? isActivated.value : isSelected.value,
+        "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
@@ -9440,8 +9437,8 @@ const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
-  expandIcon: String,
-  collapseIcon: String,
+  expandIcon: IconValue,
+  collapseIcon: IconValue,
   lines: {
     type: [Boolean, String],
     default: 'one'
@@ -11190,7 +11187,7 @@ const VMenu = genericComponent()({
     const {
       isRtl
     } = useRtl();
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
@@ -11486,7 +11483,7 @@ const VField = genericComponent()({
     } = useRtl();
     const isActive = computed(() => props.dirty || props.active);
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
     const labelRef = ref();
@@ -11615,7 +11612,8 @@ const VField = genericComponent()({
         "style": textColorStyles.value
       }, {
         default: () => [label()]
-      }), createVNode(VFieldLabel, {
+      }), hasLabel.value && createVNode(VFieldLabel, {
+        "key": "label",
         "ref": labelRef,
         "for": id.value
       }, {
@@ -12441,7 +12439,7 @@ const VSelect = genericComponent()({
     const counterValue = computed(() => {
       return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
     });
-    const form = useForm();
+    const form = useForm(props);
     const selectedValues = computed(() => model.value.map(selection => selection.value));
     const isFocused = shallowRef(false);
     const label = computed(() => menu.value ? props.closeText : props.openText);
@@ -12453,7 +12451,7 @@ const VSelect = genericComponent()({
       }
       return items.value;
     });
-    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const computedMenuProps = computed(() => {
       return {
         ...props.menuProps,
@@ -12480,7 +12478,7 @@ const VSelect = genericComponent()({
       }
     }
     function onKeydown(e) {
-      if (!e.key || props.readonly || form?.isReadonly.value) return;
+      if (!e.key || form.isReadonly.value) return;
       if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
         e.preventDefault();
       }
@@ -12958,7 +12956,7 @@ const VAutocomplete = genericComponent()({
     const counterValue = computed(() => {
       return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
     });
-    const form = useForm();
+    const form = useForm(props);
     const {
       filteredItems,
       getMatches
@@ -12976,7 +12974,7 @@ const VAutocomplete = genericComponent()({
       const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
       return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
     });
-    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const listRef = ref();
     const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
@@ -13003,7 +13001,7 @@ const VAutocomplete = genericComponent()({
       }
     }
     function onKeydown(e) {
-      if (props.readonly || form?.isReadonly.value) return;
+      if (form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = model.value.length;
       if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -13180,7 +13178,7 @@ const VAutocomplete = genericComponent()({
           'v-autocomplete--selecting-index': selectionIndex.value > -1
         }, props.class],
         "style": props.style,
-        "readonly": props.readonly,
+        "readonly": form.isReadonly.value,
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
@@ -16799,7 +16797,7 @@ const VCombobox = genericComponent()({
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
-    const form = useForm();
+    const form = useForm(props);
     const hasChips = computed(() => !!(props.chips || slots.chip));
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
     const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
@@ -16859,7 +16857,7 @@ const VCombobox = genericComponent()({
       const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
       return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
     });
-    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const listRef = ref();
     const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
@@ -16887,7 +16885,7 @@ const VCombobox = genericComponent()({
     }
     // eslint-disable-next-line complexity
     function onKeydown(e) {
-      if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
+      if (isComposingIgnoreKey(e) || form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = model.value.length;
       if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -17059,7 +17057,7 @@ const VCombobox = genericComponent()({
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
         }, props.class],
         "style": props.style,
-        "readonly": props.readonly,
+        "readonly": form.isReadonly.value,
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
@@ -18103,21 +18101,23 @@ const VConfirmEdit = genericComponent()({
       internalModel.value = structuredClone(toRaw(model.value));
       emit('cancel');
     }
-    let actionsUsed = false;
-    useRender(() => {
-      const actions = createVNode(Fragment, null, [createVNode(VBtn, {
+    function actions(actionsProps) {
+      return createVNode(Fragment, null, [createVNode(VBtn, mergeProps({
         "disabled": isPristine.value,
         "variant": "text",
         "color": props.color,
         "onClick": cancel,
         "text": t(props.cancelText)
-      }, null), createVNode(VBtn, {
+      }, actionsProps), null), createVNode(VBtn, mergeProps({
         "disabled": isPristine.value,
         "variant": "text",
         "color": props.color,
         "onClick": save,
         "text": t(props.okText)
-      }, null)]);
+      }, actionsProps), null)]);
+    }
+    let actionsUsed = false;
+    useRender(() => {
       return createVNode(Fragment, null, [slots.default?.({
         model: internalModel,
         save,
@@ -18127,7 +18127,7 @@ const VConfirmEdit = genericComponent()({
           actionsUsed = true;
           return actions;
         }
-      }), !actionsUsed && actions]);
+      }), !actionsUsed && actions()]);
     });
     return {
       save,
@@ -21417,7 +21417,7 @@ const VDatePickerControls = genericComponent()({
 // Types
 
 const makeVDatePickerHeaderProps = propsFactory({
-  appendIcon: String,
+  appendIcon: IconValue,
   color: String,
   header: String,
   transition: String,
@@ -24636,7 +24636,7 @@ const VRadioGroup = genericComponent()({
       attrs,
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `radio-group-${uid}`);
     const model = useProxiedModel(props, 'modelValue');
     useRender(() => {
@@ -24999,7 +24999,8 @@ const VRating = genericComponent()({
         onClick
       };
     }));
-    const name = computed(() => props.name ?? `v-rating-${getUid()}`);
+    const uid = useId();
+    const name = computed(() => props.name ?? `v-rating-${uid}`);
     function VRatingItem(_ref2) {
       let {
         value,
@@ -25538,7 +25539,7 @@ const VBarline = genericComponent()({
     let {
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `barline-${uid}`);
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500);
     const hasLabels = computed(() => {
@@ -25736,7 +25737,7 @@ const VTrendline = genericComponent()({
     let {
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `trendline-${uid}`);
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
     const lastLength = ref(0);
@@ -26073,20 +26074,20 @@ const makeStepperItemProps = propsFactory({
   subtitle: String,
   complete: Boolean,
   completeIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete'
   },
   editable: Boolean,
   editIcon: {
-    type: String,
+    type: IconValue,
     default: '$edit'
   },
   error: Boolean,
   errorIcon: {
-    type: String,
+    type: IconValue,
     default: '$error'
   },
-  icon: String,
+  icon: IconValue,
   ripple: {
     type: [Boolean, Object],
     default: true
@@ -26247,10 +26248,10 @@ const VStepperWindowItem = genericComponent()({
 const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
-  completeIcon: String,
-  editIcon: String,
+  completeIcon: IconValue,
+  editIcon: IconValue,
   editable: Boolean,
-  errorIcon: String,
+  errorIcon: IconValue,
   hideActions: Boolean,
   items: {
     type: Array,
@@ -26440,7 +26441,7 @@ const VSwitch = genericComponent()({
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `switch-${uid}`);
     function onChange() {
       if (indeterminate.value) {
@@ -27485,7 +27486,7 @@ const VTooltip = genericComponent()({
     const {
       scopeId
     } = useScopeId();
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-tooltip-${uid}`);
     const overlay = ref();
     const location = computed(() => {
@@ -28148,7 +28149,7 @@ const VDateInput = genericComponent()({
                 },
                 "onMousedown": e => e.preventDefault()
               }), {
-                actions: !props.hideActions ? () => actions : undefined
+                actions: !props.hideActions ? actions : undefined
               });
             }
           })]
@@ -28213,8 +28214,8 @@ const VNumberInput = genericComponent()({
     const vTextFieldRef = ref();
     const stepDecimals = computed(() => getDecimals(props.step));
     const modelDecimals = computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0);
-    const form = useForm();
-    const controlsDisabled = computed(() => props.disabled || props.readonly || form?.isReadonly.value);
+    const form = useForm(props);
+    const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
     const canIncrease = computed(() => {
       if (controlsDisabled.value) return false;
       return (model.value ?? 0) + props.step <= props.max;
@@ -28237,7 +28238,7 @@ const VNumberInput = genericComponent()({
       click: onClickDown
     }));
     onMounted(() => {
-      if (!props.readonly && !props.disabled) {
+      if (!controlsDisabled.value) {
         clampModel();
       }
     });
@@ -28313,7 +28314,8 @@ const VNumberInput = genericComponent()({
           "flat": true,
           "key": "increment-btn",
           "height": controlNodeDefaultHeight.value,
-          "name": "increment-btn",
+          "data-testid": "increment",
+          "aria-hidden": "true",
           "icon": incrementIcon.value,
           "onClick": onClickUp,
           "onMousedown": onControlMousedown,
@@ -28340,7 +28342,8 @@ const VNumberInput = genericComponent()({
           "flat": true,
           "key": "decrement-btn",
           "height": controlNodeDefaultHeight.value,
-          "name": "decrement-btn",
+          "data-testid": "decrement",
+          "aria-hidden": "true",
           "icon": decrementIcon.value,
           "size": controlNodeSize.value,
           "tabindex": "-1",
@@ -29592,9 +29595,8 @@ const VTreeviewItem = genericComponent()({
     const vListItemRef = ref();
     const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));
-    function activateItem(e) {
-      if (!isClickable.value || !isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator) return;
-      if (vListItemRef.value?.root.activatable.value) {
+    function activateGroupActivator(e) {
+      if (isClickable.value && isActivatableGroupActivator.value) {
         vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
       }
     }
@@ -29613,7 +29615,7 @@ const VTreeviewItem = genericComponent()({
           'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)
         }, props.class],
         "ripple": false,
-        "onClick": props.onClick ?? activateItem
+        "onClick": props.onClick ?? activateGroupActivator
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
@@ -30374,7 +30376,6 @@ function createVuetify$1() {
         };
       }
     }
-    getUid.reset();
     if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
       app.mixin({
         computed: {
@@ -30403,7 +30404,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.4-next.2024-11-06";
+const version$1 = "3.7.5-dev.2024-12-16";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30656,7 +30657,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.4-next.2024-11-06";
+const version = "3.7.5-dev.2024-12-16";
 
 /* eslint-disable local-rules/sort-imports */