@vuetify/nightly 3.9.0-master.2025-07-10 → 3.9.0-master.2025-07-12

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-master.2025-07-10
+* Vuetify v3.9.0-master.2025-07-12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -7523,7 +7523,6 @@ const VInput = genericComponent()({
     } = useInputIcon(props);
     const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
-    const messagesId = computed(() => `${id.value}-messages`);
     const {
       errorMessages,
       isDirty,
@@ -7537,6 +7536,18 @@ const VInput = genericComponent()({
       validate,
       validationClasses
     } = useValidation(props, 'v-input', id);
+    const messages = computed(() => {
+      if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
+        return errorMessages.value;
+      } else if (props.hint && (props.persistentHint || props.focused)) {
+        return props.hint;
+      } else {
+        return props.messages;
+      }
+    });
+    const hasMessages = toRef(() => messages.value.length > 0);
+    const hasDetails = toRef(() => !props.hideDetails || props.hideDetails === 'auto' && (hasMessages.value || !!slots.details));
+    const messagesId = computed(() => hasDetails.value ? `${id.value}-messages` : undefined);
     const slotProps = computed(() => ({
       id,
       messagesId,
@@ -7546,6 +7557,7 @@ const VInput = genericComponent()({
       isPristine,
       isValid,
       isValidating,
+      hasDetails,
       reset,
       resetValidation,
       validate
@@ -7557,20 +7569,9 @@ const VInput = genericComponent()({
       if (!props.iconColor) return undefined;
       return props.iconColor === true ? color.value : props.iconColor;
     });
-    const messages = computed(() => {
-      if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
-        return errorMessages.value;
-      } else if (props.hint && (props.persistentHint || props.focused)) {
-        return props.hint;
-      } else {
-        return props.messages;
-      }
-    });
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.prependIcon);
       const hasAppend = !!(slots.append || props.appendIcon);
-      const hasMessages = messages.value.length > 0;
-      const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return createElementVNode("div", {
         "class": normalizeClass(['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
@@ -7595,13 +7596,13 @@ const VInput = genericComponent()({
         "key": "append-icon",
         "name": "append",
         "color": iconColor.value
-      }, null), slots.append?.(slotProps.value)]), hasDetails && createElementVNode("div", {
+      }, null), slots.append?.(slotProps.value)]), hasDetails.value && createElementVNode("div", {
         "id": messagesId.value,
         "class": "v-input__details",
         "role": "alert",
         "aria-live": "polite"
       }, [createVNode(VMessages, {
-        "active": hasMessages,
+        "active": hasMessages.value,
         "messages": messages.value
       }, {
         message: slots.message
@@ -12265,8 +12266,7 @@ const VFieldLabel = genericComponent()({
       "class": normalizeClass(['v-field-label', {
         'v-field-label--floating': props.floating
       }, props.class]),
-      "style": normalizeStyle(props.style),
-      "aria-hidden": props.floating || undefined
+      "style": normalizeStyle(props.style)
     }, slots));
     return {};
   }
@@ -12290,6 +12290,7 @@ const makeVFieldProps = propsFactory({
   },
   color: String,
   baseColor: String,
+  details: Boolean,
   dirty: Boolean,
   disabled: {
     type: Boolean,
@@ -12361,7 +12362,7 @@ const VField = genericComponent()({
     const hasFloatingLabel = toRef(() => !props.singleLine && hasLabel.value);
     const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
-    const messagesId = toRef(() => `${id.value}-messages`);
+    const messagesId = toRef(() => !props.details ? undefined : `${id.value}-messages`);
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
@@ -12486,6 +12487,7 @@ const VField = genericComponent()({
         "class": normalizeClass([textColorClasses.value]),
         "floating": true,
         "for": id.value,
+        "aria-hidden": !isActive.value,
         "style": normalizeStyle(textColorStyles.value)
       }, {
         default: () => [label()]
@@ -12556,7 +12558,8 @@ const VField = genericComponent()({
       }, [createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
         "floating": true,
-        "for": id.value
+        "for": id.value,
+        "aria-hidden": !isActive.value
       }, {
         default: () => [label()]
       })]), createElementVNode("div", {
@@ -12564,7 +12567,8 @@ const VField = genericComponent()({
       }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
         "floating": true,
-        "for": id.value
+        "for": id.value,
+        "aria-hidden": !isActive.value
       }, {
         default: () => [label()]
       })])]);
@@ -12716,6 +12720,7 @@ const VTextField = genericComponent()({
             isDirty,
             isReadonly,
             isValid,
+            hasDetails,
             reset
           } = _ref2;
           return createVNode(VField, mergeProps({
@@ -12732,6 +12737,7 @@ const VTextField = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -24553,7 +24559,8 @@ const VFileInput = genericComponent()({
             isDisabled,
             isDirty,
             isReadonly,
-            isValid
+            isValid,
+            hasDetails
           } = _ref3;
           return createVNode(VField, mergeProps({
             "ref": vFieldRef,
@@ -24569,6 +24576,7 @@ const VFileInput = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false,
             "onDragover": onDragover,
             "onDrop": onDrop
@@ -29326,7 +29334,8 @@ const VTextarea = genericComponent()({
             isDisabled,
             isDirty,
             isReadonly,
-            isValid
+            isValid,
+            hasDetails
           } = _ref2;
           return createVNode(VField, mergeProps({
             "ref": vFieldRef,
@@ -29345,6 +29354,7 @@ const VTextarea = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -31392,7 +31402,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-master.2025-07-10";
+const version$1 = "3.9.0-master.2025-07-12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31417,7 +31427,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-master.2025-07-10";
+const version = "3.9.0-master.2025-07-12";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };