vuetify 3.3.12 → 3.3.13

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.12
+* Vuetify v3.3.13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1641,6 +1641,7 @@ function createLayout(props) {
 
 var en = {
   badge: 'Badge',
+  open: 'Open',
   close: 'Close',
   dataIterator: {
     noResultsText: 'No matching records found',
@@ -5844,6 +5845,20 @@ const VSelectionControl = genericComponent()({
         }
       }) : props.label;
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const inputNode = createVNode("input", mergeProps({
+        "ref": input,
+        "checked": model.value,
+        "disabled": !!(props.readonly || props.disabled),
+        "id": id.value,
+        "onBlur": onBlur,
+        "onFocus": onFocus,
+        "onInput": onInput,
+        "aria-disabled": !!(props.readonly || props.disabled),
+        "type": props.type,
+        "value": trueValue.value,
+        "name": props.name,
+        "aria-checked": props.type === 'checkbox' ? model.value : undefined
+      }, inputAttrs), null);
       return createVNode("div", mergeProps({
         "class": ['v-selection-control', {
           'v-selection-control--dirty': model.value,
@@ -5860,32 +5875,21 @@ const VSelectionControl = genericComponent()({
         "style": textColorStyles.value
       }, [slots.default?.(), withDirectives(createVNode("div", {
         "class": ['v-selection-control__input']
-      }, [icon.value && createVNode(VIcon, {
-        "key": "icon",
-        "icon": icon.value
-      }, null), createVNode("input", mergeProps({
-        "ref": input,
-        "checked": model.value,
-        "disabled": !!(props.readonly || props.disabled),
-        "id": id.value,
-        "onBlur": onBlur,
-        "onFocus": onFocus,
-        "onInput": onInput,
-        "aria-disabled": !!(props.readonly || props.disabled),
-        "type": props.type,
-        "value": trueValue.value,
-        "name": props.name,
-        "aria-checked": props.type === 'checkbox' ? model.value : undefined
-      }, inputAttrs), null), slots.input?.({
+      }, [slots.input?.({
         model,
         textColorClasses,
         textColorStyles,
+        inputNode,
+        icon: icon.value,
         props: {
           onFocus,
           onBlur,
           id: id.value
         }
-      })]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
+      }) ?? createVNode(Fragment, null, [icon.value && createVNode(VIcon, {
+        "key": "icon",
+        "icon": icon.value
+      }, null), inputNode])]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
         "for": id.value,
         "clickable": true
       }, {
@@ -7654,7 +7658,6 @@ const VListItem = genericComponent()({
         "style": [colorStyles.value, dimensionStyles.value, props.style],
         "href": link.href.value,
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-        "title": props.title,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, {
@@ -7687,7 +7690,9 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.prepend?.(slotProps.value)]
-        })]), createVNode("div", {
+        }), createVNode("div", {
+          "class": "v-list-item__spacer"
+        }, null)]), createVNode("div", {
           "class": "v-list-item__content",
           "data-no-activator": ""
         }, [hasTitle && createVNode(VListItemTitle, {
@@ -7731,7 +7736,9 @@ const VListItem = genericComponent()({
           }
         }, {
           default: () => [slots.append?.(slotProps.value)]
-        })])]
+        }), createVNode("div", {
+          "class": "v-list-item__spacer"
+        }, null)])]
       }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
@@ -9842,10 +9849,11 @@ const VMenu = genericComponent()({
         }, 40);
       }
     });
-    function onFocusIn(e) {
+    async function onFocusIn(e) {
       const before = e.relatedTarget;
       const after = e.target;
-      if (before !== after && overlay.value?.contentEl &&
+      await nextTick();
+      if (isActive.value && before !== after && overlay.value?.contentEl &&
       // We're the topmost menu
       overlay.value?.globalTop &&
       // It isn't the document or the menu body
@@ -10181,7 +10189,7 @@ const VField = genericComponent()({
           'v-field--no-label': !label,
           [`v-field--variant-${props.variant}`]: true
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
-        "style": [backgroundColorStyles.value, textColorStyles.value, props.style],
+        "style": [backgroundColorStyles.value, props.style],
         "onClick": onClick
       }, attrs), [createVNode("div", {
         "class": "v-field__overlay"
@@ -10205,7 +10213,8 @@ const VField = genericComponent()({
         "ref": floatingLabelRef,
         "class": [textColorClasses.value],
         "floating": true,
-        "for": id.value
+        "for": id.value,
+        "style": textColorStyles.value
       }, {
         default: () => [label]
       }), createVNode(VFieldLabel, {
@@ -10241,7 +10250,8 @@ const VField = genericComponent()({
         "key": "append-icon",
         "name": "appendInner"
       }, null)]), createVNode("div", {
-        "class": ['v-field__outline', textColorClasses.value]
+        "class": ['v-field__outline', textColorClasses.value],
+        "style": textColorStyles.value
       }, [isOutlined && createVNode(Fragment, null, [createVNode("div", {
         "class": "v-field__outline__start"
       }, null), hasLabel.value && createVNode("div", {
@@ -10285,6 +10295,7 @@ const makeVTextFieldProps = propsFactory({
   persistentPlaceholder: Boolean,
   persistentCounter: Boolean,
   suffix: String,
+  role: String,
   type: {
     type: String,
     default: 'text'
@@ -10409,7 +10420,7 @@ const VTextField = genericComponent()({
             "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner'],
-            "role": "textbox"
+            "role": props.role
           }, fieldProps, {
             "id": id.value,
             "active": isActive.value || isDirty.value,
@@ -10448,10 +10459,12 @@ const VTextField = genericComponent()({
                 "class": "v-text-field__prefix"
               }, [createVNode("span", {
                 "class": "v-text-field__prefix__text"
-              }, [props.prefix])]), createVNode("div", {
+              }, [props.prefix])]), slots.default ? createVNode("div", {
                 "class": fieldClass,
                 "data-no-activator": ""
-              }, [slots.default ? createVNode(Fragment, null, [slots.default(), inputNode]) : cloneVNode(inputNode)]), props.suffix && createVNode("span", {
+              }, [slots.default(), inputNode]) : cloneVNode(inputNode, {
+                class: fieldClass
+              }), props.suffix && createVNode("span", {
                 "class": "v-text-field__suffix"
               }, [createVNode("span", {
                 "class": "v-text-field__suffix__text"
@@ -10770,6 +10783,14 @@ function useScrolling(listRef, textFieldRef) {
 const makeSelectProps = propsFactory({
   chips: Boolean,
   closableChips: Boolean,
+  closeText: {
+    type: String,
+    default: '$vuetify.close'
+  },
+  openText: {
+    type: String,
+    default: '$vuetify.open'
+  },
   eager: Boolean,
   hideNoData: Boolean,
   hideSelected: Boolean,
@@ -10799,7 +10820,8 @@ const makeSelectProps = propsFactory({
 const makeVSelectProps = propsFactory({
   ...makeSelectProps(),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'button'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: {
@@ -10854,6 +10876,7 @@ const VSelect = genericComponent()({
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
     const isFocused = shallowRef(false);
+    const label = computed(() => menu.value ? props.closeText : props.openText);
     let keyboardLookupPrefix = '';
     let keyboardLookupLastTime;
     const displayItems = computed(() => {
@@ -10980,7 +11003,9 @@ const VSelect = genericComponent()({
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onBlur": onBlur,
-        "onKeydown": onKeydown
+        "onKeydown": onKeydown,
+        "aria-label": t(label.value),
+        "title": t(label.value)
       }), {
         ...slots,
         default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
@@ -11243,7 +11268,8 @@ const makeVAutocompleteProps = propsFactory({
   }),
   ...makeSelectProps(),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'combobox'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: false
@@ -11280,6 +11306,7 @@ const VAutocomplete = genericComponent()({
     });
     const selectionIndex = shallowRef(-1);
     const color = computed(() => vTextFieldRef.value?.color);
+    const label = computed(() => menu.value ? props.closeText : props.openText);
     const {
       items,
       transformIn,
@@ -11627,7 +11654,9 @@ const VAutocomplete = genericComponent()({
             "class": "v-autocomplete__menu-icon",
             "icon": props.menuIcon,
             "onMousedown": onMousedownMenuIcon,
-            "onClick": noop
+            "onClick": noop,
+            "aria-label": t(label.value),
+            "title": t(label.value)
           }, null) : undefined]);
         }
       });
@@ -14771,7 +14800,8 @@ const makeVComboboxProps = propsFactory({
     returnObject: true
   }),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'combobox'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: false
@@ -14810,6 +14840,7 @@ const VCombobox = genericComponent()({
     const selectionIndex = shallowRef(-1);
     let cleared = false;
     const color = computed(() => vTextFieldRef.value?.color);
+    const label = computed(() => menu.value ? props.closeText : props.openText);
     const {
       items,
       transformIn,
@@ -15185,7 +15216,9 @@ const VCombobox = genericComponent()({
             "class": "v-combobox__menu-icon",
             "icon": props.menuIcon,
             "onMousedown": onMousedownMenuIcon,
-            "onClick": noop
+            "onClick": noop,
+            "aria-label": t(label.value),
+            "title": t(label.value)
           }, null) : undefined]);
         }
       });
@@ -18528,25 +18561,32 @@ const VSwitch = genericComponent()({
             }, null),
             input: _ref3 => {
               let {
-                textColorClasses,
-                textColorStyles
+                inputNode,
+                icon
               } = _ref3;
-              return createVNode("div", {
-                "class": ['v-switch__thumb', textColorClasses.value],
-                "style": textColorStyles.value
-              }, [props.loading && createVNode(LoaderSlot, {
-                "name": "v-switch",
-                "active": true,
-                "color": isValid.value === false ? undefined : loaderColor.value
-              }, {
-                default: slotProps => slots.loader ? slots.loader(slotProps) : createVNode(VProgressCircular, {
-                  "active": slotProps.isActive,
-                  "color": slotProps.color,
-                  "indeterminate": true,
-                  "size": "16",
-                  "width": "2"
-                }, null)
-              })]);
+              return createVNode(Fragment, null, [inputNode, createVNode("div", {
+                "class": ['v-switch__thumb', {
+                  'v-switch__thumb--filled': icon || props.loading
+                }]
+              }, [createVNode(VScaleTransition, null, {
+                default: () => [!props.loading ? icon && createVNode(VIcon, {
+                  "key": icon,
+                  "icon": icon,
+                  "size": "x-small"
+                }, null) : createVNode(LoaderSlot, {
+                  "name": "v-switch",
+                  "active": true,
+                  "color": isValid.value === false ? undefined : loaderColor.value
+                }, {
+                  default: slotProps => slots.loader ? slots.loader(slotProps) : createVNode(VProgressCircular, {
+                    "active": slotProps.isActive,
+                    "color": slotProps.color,
+                    "indeterminate": true,
+                    "size": "16",
+                    "width": "2"
+                  }, null)
+                })]
+              })])]);
             }
           });
         }
@@ -19027,8 +19067,7 @@ const VTextarea = genericComponent()({
             "onMousedown": onControlMousedown,
             "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
-            "onClick:appendInner": props['onClick:appendInner'],
-            "role": "textbox"
+            "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
             "active": isActive.value || isDirty.value,
             "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
@@ -20289,7 +20328,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.12";
+const version$1 = "3.3.13";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20314,7 +20353,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.12";
+const version = "3.3.13";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };