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

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* 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.
 */
@@ -1257,9 +1257,6 @@
   }
 
   // Utilities
-
-  // Types
-
   function getCurrentInstance(name, message) {
     const vm = vue.getCurrentInstance();
     if (!vm) {
@@ -1272,20 +1269,6 @@
     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
 
@@ -1655,7 +1638,7 @@
   function useLayoutItem(options) {
     const layout = vue.inject(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-${vue.useId()}`;
     const vm = getCurrentInstance('useLayoutItem');
     vue.provide(VuetifyLayoutItemKey, {
       id
@@ -2431,15 +2414,15 @@
       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 {
@@ -4157,7 +4140,7 @@
     if (!vm) {
       throw new Error('[Vuetify] useGroupItem composable must be used inside a component setup function');
     }
-    const id = getUid();
+    const id = vue.useId();
     vue.provide(Symbol.for(`${injectKey.description}:id`), id);
     const group = vue.inject(injectKey, null);
     if (!group) {
@@ -6136,7 +6119,7 @@
         slots
       } = _ref;
       const modelValue = useProxiedModel(props, 'modelValue');
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-selection-control-group-${uid}`);
       const name = vue.computed(() => props.name || id.value);
       const updateHandlers = new Set();
@@ -6273,7 +6256,7 @@
         backgroundColorStyles,
         trueValue
       } = useSelectionControl(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const isFocused = vue.shallowRef(false);
       const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
@@ -6674,8 +6657,13 @@
       resetValidation
     };
   }
-  function useForm() {
-    return vue.inject(FormKey, null);
+  function useForm(props) {
+    const form = vue.inject(FormKey, null);
+    return {
+      ...form,
+      isReadonly: vue.computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
+      isDisabled: vue.computed(() => !!(props?.disabled ?? form?.isDisabled.value))
+    };
   }
 
   // Composables
@@ -6713,20 +6701,18 @@
   }, '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] : vue.useId();
     const model = useProxiedModel(props, 'modelValue');
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
-    const form = useForm();
+    const form = useForm(props);
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-    const isDisabled = vue.computed(() => !!(props.disabled ?? form?.isDisabled.value));
-    const isReadonly = vue.computed(() => !!(props.readonly ?? form?.isReadonly.value));
     const errorMessages = vue.computed(() => {
       return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
     const validateOn = vue.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(' ') ?? []);
@@ -6752,14 +6738,14 @@
       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 = vue.computed(() => props.name ?? vue.unref(id));
     vue.onBeforeMount(() => {
-      form?.register({
+      form.register?.({
         id: uid.value,
         vm,
         validate,
@@ -6768,13 +6754,13 @@
       });
     });
     vue.onBeforeUnmount(() => {
-      form?.unregister(uid.value);
+      form.unregister?.(uid.value);
     });
     vue.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, () => {
       vue.watch(validationModel, () => {
@@ -6794,7 +6780,7 @@
       });
     });
     vue.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;
@@ -6835,8 +6821,8 @@
     return {
       errorMessages,
       isDirty,
-      isDisabled,
-      isReadonly,
+      isDisabled: form.isDisabled,
+      isReadonly: form.isReadonly,
       isPristine,
       isValid,
       isValidating,
@@ -6907,7 +6893,7 @@
       const {
         InputIcon
       } = useInputIcon(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
       const {
@@ -7015,7 +7001,7 @@
         focus,
         blur
       } = useFocus(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -7755,6 +7741,7 @@
 
   const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
   const makeVChipGroupProps = propsFactory({
+    baseColor: String,
     column: Boolean,
     filter: Boolean,
     valueComparator: {
@@ -7794,6 +7781,7 @@
       } = useGroup(props, VChipGroupSymbol);
       provideDefaults({
         VChip: {
+          baseColor: vue.toRef(props, 'baseColor'),
           color: vue.toRef(props, 'color'),
           disabled: vue.toRef(props, 'disabled'),
           filter: vue.toRef(props, 'filter'),
@@ -7827,6 +7815,7 @@
     activeClass: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     closable: Boolean,
     closeIcon: {
       type: IconValue,
@@ -7839,7 +7828,7 @@
     draggable: Boolean,
     filter: Boolean,
     filterIcon: {
-      type: String,
+      type: IconValue,
       default: '$complete'
     },
     label: Boolean,
@@ -7901,11 +7890,6 @@
       const {
         borderClasses
       } = useBorder(props);
-      const {
-        colorClasses,
-        colorStyles,
-        variantClasses
-      } = useVariant(props);
       const {
         densityClasses
       } = useDensity(props);
@@ -7935,6 +7919,18 @@
           emit('click:close', e);
         }
       }));
+      const variantProps = vue.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;
@@ -7955,16 +7951,16 @@
         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 && vue.withDirectives(vue.createVNode(Tag, vue.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,
@@ -8693,7 +8689,7 @@
   };
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
-    const uidSymbol = Symbol(getUid());
+    const uidSymbol = Symbol('nested item');
     const computedId = vue.computed(() => id.value !== undefined ? id.value : uidSymbol);
     const item = {
       ...parent,
@@ -8936,7 +8932,8 @@
       const list = useList();
       const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
-      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || !!list && (root.selectable.value || root.activatable.value || props.value != null)));
+      const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
+      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
       const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
@@ -9027,7 +9024,7 @@
           }, 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), {
@@ -9444,8 +9441,8 @@
     activeClass: String,
     bgColor: String,
     disabled: Boolean,
-    expandIcon: String,
-    collapseIcon: String,
+    expandIcon: IconValue,
+    collapseIcon: IconValue,
     lines: {
       type: [Boolean, String],
       default: 'one'
@@ -11194,7 +11191,7 @@
       const {
         isRtl
       } = useRtl();
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
@@ -11490,7 +11487,7 @@
       } = useRtl();
       const isActive = vue.computed(() => props.dirty || props.active);
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
       const labelRef = vue.ref();
@@ -11619,7 +11616,8 @@
           "style": textColorStyles.value
         }, {
           default: () => [label()]
-        }), vue.createVNode(VFieldLabel, {
+        }), hasLabel.value && vue.createVNode(VFieldLabel, {
+          "key": "label",
           "ref": labelRef,
           "for": id.value
         }, {
@@ -12445,7 +12443,7 @@
       const counterValue = vue.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 = vue.computed(() => model.value.map(selection => selection.value));
       const isFocused = vue.shallowRef(false);
       const label = vue.computed(() => menu.value ? props.closeText : props.openText);
@@ -12457,7 +12455,7 @@
         }
         return items.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const computedMenuProps = vue.computed(() => {
         return {
           ...props.menuProps,
@@ -12484,7 +12482,7 @@
         }
       }
       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();
         }
@@ -12962,7 +12960,7 @@
       const counterValue = vue.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
@@ -12980,7 +12978,7 @@
         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 = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const listRef = vue.ref();
       const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
@@ -13007,7 +13005,7 @@
         }
       }
       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)) {
@@ -13184,7 +13182,7 @@
             '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,
@@ -16803,7 +16801,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
-      const form = useForm();
+      const form = useForm(props);
       const hasChips = vue.computed(() => !!(props.chips || slots.chip));
       const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
       const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
@@ -16863,7 +16861,7 @@
         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 = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const listRef = vue.ref();
       const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
@@ -16891,7 +16889,7 @@
       }
       // 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)) {
@@ -17063,7 +17061,7 @@
             [`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,
@@ -18107,21 +18105,23 @@
         internalModel.value = structuredClone(vue.toRaw(model.value));
         emit('cancel');
       }
-      let actionsUsed = false;
-      useRender(() => {
-        const actions = vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, {
+      function actions(actionsProps) {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isPristine.value,
           "variant": "text",
           "color": props.color,
           "onClick": cancel,
           "text": t(props.cancelText)
-        }, null), vue.createVNode(VBtn, {
+        }, actionsProps), null), vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isPristine.value,
           "variant": "text",
           "color": props.color,
           "onClick": save,
           "text": t(props.okText)
-        }, null)]);
+        }, actionsProps), null)]);
+      }
+      let actionsUsed = false;
+      useRender(() => {
         return vue.createVNode(vue.Fragment, null, [slots.default?.({
           model: internalModel,
           save,
@@ -18131,7 +18131,7 @@
             actionsUsed = true;
             return actions;
           }
-        }), !actionsUsed && actions]);
+        }), !actionsUsed && actions()]);
       });
       return {
         save,
@@ -21421,7 +21421,7 @@
   // Types
 
   const makeVDatePickerHeaderProps = propsFactory({
-    appendIcon: String,
+    appendIcon: IconValue,
     color: String,
     header: String,
     transition: String,
@@ -24640,7 +24640,7 @@
         attrs,
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `radio-group-${uid}`);
       const model = useProxiedModel(props, 'modelValue');
       useRender(() => {
@@ -25003,7 +25003,8 @@
           onClick
         };
       }));
-      const name = vue.computed(() => props.name ?? `v-rating-${getUid()}`);
+      const uid = vue.useId();
+      const name = vue.computed(() => props.name ?? `v-rating-${uid}`);
       function VRatingItem(_ref2) {
         let {
           value,
@@ -25542,7 +25543,7 @@
       let {
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `barline-${uid}`);
       const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || 500);
       const hasLabels = vue.computed(() => {
@@ -25740,7 +25741,7 @@
       let {
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `trendline-${uid}`);
       const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
       const lastLength = vue.ref(0);
@@ -26077,20 +26078,20 @@
     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
@@ -26251,10 +26252,10 @@
   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,
@@ -26444,7 +26445,7 @@
       const loaderColor = vue.computed(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `switch-${uid}`);
       function onChange() {
         if (indeterminate.value) {
@@ -27489,7 +27490,7 @@
       const {
         scopeId
       } = useScopeId();
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-tooltip-${uid}`);
       const overlay = vue.ref();
       const location = vue.computed(() => {
@@ -28152,7 +28153,7 @@
                   },
                   "onMousedown": e => e.preventDefault()
                 }), {
-                  actions: !props.hideActions ? () => actions : undefined
+                  actions: !props.hideActions ? actions : undefined
                 });
               }
             })]
@@ -28217,8 +28218,8 @@
       const vTextFieldRef = vue.ref();
       const stepDecimals = vue.computed(() => getDecimals(props.step));
       const modelDecimals = vue.computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0);
-      const form = useForm();
-      const controlsDisabled = vue.computed(() => props.disabled || props.readonly || form?.isReadonly.value);
+      const form = useForm(props);
+      const controlsDisabled = vue.computed(() => form.isDisabled.value || form.isReadonly.value);
       const canIncrease = vue.computed(() => {
         if (controlsDisabled.value) return false;
         return (model.value ?? 0) + props.step <= props.max;
@@ -28241,7 +28242,7 @@
         click: onClickDown
       }));
       vue.onMounted(() => {
-        if (!props.readonly && !props.disabled) {
+        if (!controlsDisabled.value) {
           clampModel();
         }
       });
@@ -28317,7 +28318,8 @@
             "flat": true,
             "key": "increment-btn",
             "height": controlNodeDefaultHeight.value,
-            "name": "increment-btn",
+            "data-testid": "increment",
+            "aria-hidden": "true",
             "icon": incrementIcon.value,
             "onClick": onClickUp,
             "onMousedown": onControlMousedown,
@@ -28344,7 +28346,8 @@
             "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",
@@ -29596,9 +29599,8 @@
       const vListItemRef = vue.ref();
       const isActivatableGroupActivator = vue.computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
       const isClickable = vue.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);
         }
       }
@@ -29617,7 +29619,7 @@
             '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 => {
@@ -30378,7 +30380,6 @@
           };
         }
       }
-      getUid.reset();
       if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
         app.mixin({
           computed: {
@@ -30407,7 +30408,7 @@
       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
@@ -30660,7 +30661,7 @@
 
   /* 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 */