vuetify 3.3.12 → 3.3.14

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.3.12
+* Vuetify v3.3.14
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -224,14 +224,22 @@ function omit(obj, exclude) {
   exclude.forEach(prop => delete clone[prop]);
   return clone;
 }
+const onRE = /^on[^a-z]/;
+const isOn = key => onRE.test(key);
+const bubblingEvents = ['onAfterscriptexecute', 'onAnimationcancel', 'onAnimationend', 'onAnimationiteration', 'onAnimationstart', 'onAuxclick', 'onBeforeinput', 'onBeforescriptexecute', 'onChange', 'onClick', 'onCompositionend', 'onCompositionstart', 'onCompositionupdate', 'onContextmenu', 'onCopy', 'onCut', 'onDblclick', 'onFocusin', 'onFocusout', 'onFullscreenchange', 'onFullscreenerror', 'onGesturechange', 'onGestureend', 'onGesturestart', 'onGotpointercapture', 'onInput', 'onKeydown', 'onKeypress', 'onKeyup', 'onLostpointercapture', 'onMousedown', 'onMousemove', 'onMouseout', 'onMouseover', 'onMouseup', 'onMousewheel', 'onPaste', 'onPointercancel', 'onPointerdown', 'onPointerenter', 'onPointerleave', 'onPointermove', 'onPointerout', 'onPointerover', 'onPointerup', 'onReset', 'onSelect', 'onSubmit', 'onTouchcancel', 'onTouchend', 'onTouchmove', 'onTouchstart', 'onTransitioncancel', 'onTransitionend', 'onTransitionrun', 'onTransitionstart', 'onWheel'];
 
 /**
  * Filter attributes that should be applied to
- * the root element of a an input component. Remaining
+ * the root element of an input component. Remaining
  * attributes should be passed to the <input> element inside.
  */
 function filterInputAttrs(attrs) {
-  return pick(attrs, ['class', 'style', 'id', /^data-/]);
+  const [events, props] = pick(attrs, [onRE]);
+  const inputEvents = omit(events, bubblingEvents);
+  const [rootAttrs, inputAttrs] = pick(props, ['class', 'style', 'id', /^data-/]);
+  Object.assign(rootAttrs, events);
+  Object.assign(inputAttrs, inputEvents);
+  return [rootAttrs, inputAttrs];
 }
 function wrapInArray(v) {
   return v == null ? [] : Array.isArray(v) ? v : [v];
@@ -384,8 +392,6 @@ function destructComputed(getter) {
 function includes(arr, val) {
   return arr.includes(val);
 }
-const onRE = /^on[^a-z]/;
-const isOn = key => onRE.test(key);
 function eventName(propName) {
   return propName[2].toLowerCase() + propName.slice(3);
 }
@@ -652,6 +658,94 @@ function unbindProps(el, props) {
   });
 }
 
+/**
+ * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA
+ * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup
+ */
+// Types
+
+// MAGICAL NUMBERS
+
+// sRGB Conversion to Relative Luminance (Y)
+
+// Transfer Curve (aka "Gamma") for sRGB linearization
+// Simple power curve vs piecewise described in docs
+// Essentially, 2.4 best models actual display
+// characteristics in combination with the total method
+const mainTRC = 2.4;
+const Rco = 0.2126729; // sRGB Red Coefficient (from matrix)
+const Gco = 0.7151522; // sRGB Green Coefficient (from matrix)
+const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix)
+
+// For Finding Raw SAPC Contrast from Relative Luminance (Y)
+
+// Constants for SAPC Power Curve Exponents
+// One pair for normal text, and one for reverse
+// These are the "beating heart" of SAPC
+const normBG = 0.55;
+const normTXT = 0.58;
+const revTXT = 0.57;
+const revBG = 0.62;
+
+// For Clamping and Scaling Values
+
+const blkThrs = 0.03; // Level that triggers the soft black clamp
+const blkClmp = 1.45; // Exponent for the soft black clamp curve
+const deltaYmin = 0.0005; // Lint trap
+const scaleBoW = 1.25; // Scaling for dark text on light
+const scaleWoB = 1.25; // Scaling for light text on dark
+const loConThresh = 0.078; // Threshold for new simple offset scale
+const loConFactor = 12.82051282051282; // = 1/0.078,
+const loConOffset = 0.06; // The simple offset
+const loClip = 0.001; // Output clip (lint trap #2)
+
+function APCAcontrast(text, background) {
+  // Linearize sRGB
+  const Rtxt = (text.r / 255) ** mainTRC;
+  const Gtxt = (text.g / 255) ** mainTRC;
+  const Btxt = (text.b / 255) ** mainTRC;
+  const Rbg = (background.r / 255) ** mainTRC;
+  const Gbg = (background.g / 255) ** mainTRC;
+  const Bbg = (background.b / 255) ** mainTRC;
+
+  // Apply the standard coefficients and sum to Y
+  let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
+  let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco;
+
+  // Soft clamp Y when near black.
+  // Now clamping all colors to prevent crossover errors
+  if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp;
+  if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp;
+
+  // Return 0 Early for extremely low ∆Y (lint trap #1)
+  if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0;
+
+  // SAPC CONTRAST
+
+  let outputContrast; // For weighted final values
+  if (Ybg > Ytxt) {
+    // For normal polarity, black text on white
+    // Calculate the SAPC contrast value and scale
+
+    const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW;
+
+    // NEW! SAPC SmoothScale™
+    // Low Contrast Smooth Scale Rollout to prevent polarity reversal
+    // and also a low clip for very low contrasts (lint trap #2)
+    // much of this is for very low contrasts, less than 10
+    // therefore for most reversing needs, only loConOffset is important
+    outputContrast = SAPC < loClip ? 0.0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset;
+  } else {
+    // For reverse polarity, light text on dark
+    // WoB should always return negative value.
+
+    const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
+    outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+  }
+  return outputContrast * 100;
+}
+
 /* eslint-disable no-console */
 
 function consoleWarn(message) {
@@ -1008,36 +1102,13 @@ function getContrast(first, second) {
   const dark = Math.min(l1, l2);
   return (light + 0.05) / (dark + 0.05);
 }
-
-// Utilities
-
-// Types
-
-function useToggleScope(source, fn) {
-  let scope;
-  function start() {
-    scope = effectScope();
-    scope.run(() => fn.length ? fn(() => {
-      scope?.stop();
-      start();
-    }) : fn());
-  }
-  watch(source, active => {
-    if (active && !scope) {
-      start();
-    } else if (!active) {
-      scope?.stop();
-      scope = undefined;
-    }
-  }, {
-    immediate: true
-  });
-  onScopeDispose(() => {
-    scope?.stop();
-  });
+function getForeground(color) {
+  const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color)));
+  const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color)));
+  return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
 }
 
-// Composables
+// Utilities
 
 // Types
 
@@ -1059,6 +1130,7 @@ function provideDefaults(defaults, options) {
     const scoped = unref(options?.scoped);
     const reset = unref(options?.reset);
     const root = unref(options?.root);
+    if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value;
     let properties = mergeDeep(providedDefaults.value, {
       prev: injectedDefaults.value
     });
@@ -1114,16 +1186,16 @@ function internalUseDefaults() {
         let [key] = _ref;
         return key.startsWith(key[0].toUpperCase());
       });
-      if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
+      _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined;
+    } else {
+      _subcomponentDefaults.value = undefined;
     }
   });
   function provideSubDefaults() {
-    // If subcomponent defaults are provided, override any
-    // subcomponents provided by the component's setup function.
-    // This uses injectSelf so must be done after the original setup to work.
-    useToggleScope(_subcomponentDefaults, () => {
-      provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
-    });
+    const injected = injectSelf(DefaultsSymbol, vm);
+    provide(DefaultsSymbol, computed(() => {
+      return _subcomponentDefaults.value ? mergeDeep(injected?.value ?? {}, _subcomponentDefaults.value) : injected?.value;
+    }));
   }
   return {
     props: _props,
@@ -1301,9 +1373,10 @@ function isPotentiallyScrollable(el) {
 // Types
 
 function injectSelf(key) {
+  let vm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstance('injectSelf');
   const {
     provides
-  } = getCurrentInstance('injectSelf');
+  } = vm;
   if (provides && key in provides) {
     // TS doesn't allow symbol as index type
     return provides[key];
@@ -1641,6 +1714,7 @@ function createLayout(props) {
 
 var en = {
   badge: 'Badge',
+  open: 'Open',
   close: 'Close',
   dataIterator: {
     noResultsText: 'No matching records found',
@@ -1779,6 +1853,34 @@ const defaultRtl = {
   zhHant: false
 };
 
+// Utilities
+
+// Types
+
+function useToggleScope(source, fn) {
+  let scope;
+  function start() {
+    scope = effectScope();
+    scope.run(() => fn.length ? fn(() => {
+      scope?.stop();
+      start();
+    }) : fn());
+  }
+  watch(source, active => {
+    if (active && !scope) {
+      start();
+    } else if (!active) {
+      scope?.stop();
+      scope = undefined;
+    }
+  }, {
+    immediate: true
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}
+
 // Composables
 
 // Types
@@ -1980,94 +2082,6 @@ function useRtl() {
   };
 }
 
-/**
- * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA
- * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup
- */
-// Types
-
-// MAGICAL NUMBERS
-
-// sRGB Conversion to Relative Luminance (Y)
-
-// Transfer Curve (aka "Gamma") for sRGB linearization
-// Simple power curve vs piecewise described in docs
-// Essentially, 2.4 best models actual display
-// characteristics in combination with the total method
-const mainTRC = 2.4;
-const Rco = 0.2126729; // sRGB Red Coefficient (from matrix)
-const Gco = 0.7151522; // sRGB Green Coefficient (from matrix)
-const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix)
-
-// For Finding Raw SAPC Contrast from Relative Luminance (Y)
-
-// Constants for SAPC Power Curve Exponents
-// One pair for normal text, and one for reverse
-// These are the "beating heart" of SAPC
-const normBG = 0.55;
-const normTXT = 0.58;
-const revTXT = 0.57;
-const revBG = 0.62;
-
-// For Clamping and Scaling Values
-
-const blkThrs = 0.03; // Level that triggers the soft black clamp
-const blkClmp = 1.45; // Exponent for the soft black clamp curve
-const deltaYmin = 0.0005; // Lint trap
-const scaleBoW = 1.25; // Scaling for dark text on light
-const scaleWoB = 1.25; // Scaling for light text on dark
-const loConThresh = 0.078; // Threshold for new simple offset scale
-const loConFactor = 12.82051282051282; // = 1/0.078,
-const loConOffset = 0.06; // The simple offset
-const loClip = 0.001; // Output clip (lint trap #2)
-
-function APCAcontrast(text, background) {
-  // Linearize sRGB
-  const Rtxt = (text.r / 255) ** mainTRC;
-  const Gtxt = (text.g / 255) ** mainTRC;
-  const Btxt = (text.b / 255) ** mainTRC;
-  const Rbg = (background.r / 255) ** mainTRC;
-  const Gbg = (background.g / 255) ** mainTRC;
-  const Bbg = (background.b / 255) ** mainTRC;
-
-  // Apply the standard coefficients and sum to Y
-  let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
-  let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco;
-
-  // Soft clamp Y when near black.
-  // Now clamping all colors to prevent crossover errors
-  if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp;
-  if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp;
-
-  // Return 0 Early for extremely low ∆Y (lint trap #1)
-  if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0;
-
-  // SAPC CONTRAST
-
-  let outputContrast; // For weighted final values
-  if (Ybg > Ytxt) {
-    // For normal polarity, black text on white
-    // Calculate the SAPC contrast value and scale
-
-    const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW;
-
-    // NEW! SAPC SmoothScale™
-    // Low Contrast Smooth Scale Rollout to prevent polarity reversal
-    // and also a low clip for very low contrasts (lint trap #2)
-    // much of this is for very low contrasts, less than 10
-    // therefore for most reversing needs, only loConOffset is important
-    outputContrast = SAPC < loClip ? 0.0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset;
-  } else {
-    // For reverse polarity, light text on dark
-    // WoB should always return negative value.
-
-    const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
-    outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
-  }
-  return outputContrast * 100;
-}
-
 // Utilities
 
 // Types
@@ -2203,8 +2217,6 @@ function createTheme(options) {
         if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
         const onColor = `on-${color}`;
         const colorVal = parseColor(theme.colors[color]);
-        const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
-        const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
 
         // TODO: warn about poor color selections
         // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -2216,7 +2228,7 @@ function createTheme(options) {
         // }
 
         // Prefer white text if both have an acceptable contrast ratio
-        theme.colors[onColor] = whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
+        theme.colors[onColor] = getForeground(colorVal);
       }
     }
     return acc;
@@ -3245,6 +3257,11 @@ function useColor(colors) {
     if (colors.value.background) {
       if (isCssColor(colors.value.background)) {
         styles.backgroundColor = colors.value.background;
+        if (!colors.value.text) {
+          const textColor = getForeground(styles.backgroundColor);
+          styles.color = textColor;
+          styles.caretColor = textColor;
+        }
       } else {
         classes.push(`bg-${colors.value.background}`);
       }
@@ -5844,6 +5861,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,34 +5891,24 @@ 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
+        "clickable": true,
+        "onClick": e => e.stopPropagation()
       }, {
         default: () => [label]
       })]);
@@ -5936,16 +5957,19 @@ const VCheckboxBtn = genericComponent()({
     const trueIcon = computed(() => {
       return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
     });
-    useRender(() => createVNode(VSelectionControl, mergeProps(props, {
-      "modelValue": model.value,
-      "onUpdate:modelValue": [$event => model.value = $event, onChange],
-      "class": ['v-checkbox-btn', props.class],
-      "style": props.style,
-      "type": "checkbox",
-      "falseIcon": falseIcon.value,
-      "trueIcon": trueIcon.value,
-      "aria-checked": indeterminate.value ? 'mixed' : undefined
-    }), slots));
+    useRender(() => {
+      const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue']);
+      return createVNode(VSelectionControl, mergeProps(controlProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": [$event => model.value = $event, onChange],
+        "class": ['v-checkbox-btn', props.class],
+        "style": props.style,
+        "type": "checkbox",
+        "falseIcon": falseIcon.value,
+        "trueIcon": trueIcon.value,
+        "aria-checked": indeterminate.value ? 'mixed' : undefined
+      }), slots);
+    });
     return {};
   }
 });
@@ -6509,12 +6533,12 @@ const VCheckbox = genericComponent()({
     const uid = getUid();
     const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
-      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = VInput.filterProps(props);
       const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
         "class": ['v-checkbox', props.class]
-      }, inputAttrs, inputProps, {
+      }, rootAttrs, inputProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "id": id.value,
@@ -7654,7 +7678,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 +7710,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 +7756,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 +9869,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 +10209,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 +10233,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 +10270,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 +10315,7 @@ const makeVTextFieldProps = propsFactory({
   persistentPlaceholder: Boolean,
   persistentCounter: Boolean,
   suffix: String,
+  role: String,
   type: {
     type: String,
     default: 'text'
@@ -10409,7 +10440,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 +10479,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 +10803,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 +10840,8 @@ const makeSelectProps = propsFactory({
 const makeVSelectProps = propsFactory({
   ...makeSelectProps(),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'button'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: {
@@ -10824,6 +10866,7 @@ const VSelect = genericComponent()({
     } = useLocale();
     const vTextFieldRef = ref();
     const vMenuRef = ref();
+    const vVirtualScrollRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
       get: () => _menu.value,
@@ -10854,6 +10897,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(() => {
@@ -10952,6 +10996,14 @@ const VSelect = genericComponent()({
         vTextFieldRef.value.value = '';
       }
     }
+    watch(menu, () => {
+      if (!props.hideSelected && menu.value && selections.value.length) {
+        const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
+      }
+    });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -10980,7 +11032,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({
@@ -11011,6 +11065,7 @@ const VSelect = genericComponent()({
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
+              "ref": vVirtualScrollRef,
               "renderless": true,
               "items": displayItems.value
             }, {
@@ -11243,7 +11298,8 @@ const makeVAutocompleteProps = propsFactory({
   }),
   ...makeSelectProps(),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'combobox'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: false
@@ -11270,6 +11326,7 @@ const VAutocomplete = genericComponent()({
     const isPristine = shallowRef(true);
     const listHasFocus = shallowRef(false);
     const vMenuRef = ref();
+    const vVirtualScrollRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
       get: () => _menu.value,
@@ -11280,6 +11337,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,
@@ -11359,7 +11417,7 @@ const VAutocomplete = genericComponent()({
         menu.value = false;
       }
       if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
-        select(filteredItems.value[0]);
+        select(displayItems.value[0]);
       }
       if (e.key === 'ArrowDown' && highlightFirst.value) {
         listRef.value?.focus('next');
@@ -11472,6 +11530,14 @@ const VAutocomplete = genericComponent()({
       if (val) menu.value = true;
       isPristine.value = !val;
     });
+    watch(menu, () => {
+      if (!props.hideSelected && menu.value && selections.value.length) {
+        const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
+      }
+    });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -11531,6 +11597,7 @@ const VAutocomplete = genericComponent()({
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
+              "ref": vVirtualScrollRef,
               "renderless": true,
               "items": displayItems.value
             }, {
@@ -11627,7 +11694,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 +14840,8 @@ const makeVComboboxProps = propsFactory({
     returnObject: true
   }),
   ...omit(makeVTextFieldProps({
-    modelValue: null
+    modelValue: null,
+    role: 'combobox'
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
   ...makeTransitionProps({
     transition: false
@@ -14799,6 +14869,7 @@ const VCombobox = genericComponent()({
     const isPristine = shallowRef(true);
     const listHasFocus = shallowRef(false);
     const vMenuRef = ref();
+    const vVirtualScrollRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
       get: () => _menu.value,
@@ -14810,6 +14881,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,
@@ -15031,6 +15103,14 @@ const VCombobox = genericComponent()({
         search.value = '';
       }
     });
+    watch(menu, () => {
+      if (!props.hideSelected && menu.value && selections.value.length) {
+        const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
+      }
+    });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -15089,6 +15169,7 @@ const VCombobox = genericComponent()({
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
+              "ref": vVirtualScrollRef,
               "renderless": true,
               "items": displayItems.value
             }, {
@@ -15185,7 +15266,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]);
         }
       });
@@ -17478,7 +17561,7 @@ const VRadioGroup = genericComponent()({
     const id = computed(() => props.id || `radio-group-${uid}`);
     const model = useProxiedModel(props, 'modelValue');
     useRender(() => {
-      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = VInput.filterProps(props);
       const [controlProps, _2] = VSelectionControl.filterProps(props);
       const label = slots.label ? slots.label({
@@ -17490,7 +17573,7 @@ const VRadioGroup = genericComponent()({
       return createVNode(VInput, mergeProps({
         "class": ['v-radio-group', props.class],
         "style": props.style
-      }, inputAttrs, inputProps, {
+      }, rootAttrs, inputProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "id": id.value
@@ -18467,6 +18550,7 @@ const VSwitch = genericComponent()({
       focus,
       blur
     } = useFocus(props);
+    const control = ref();
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
@@ -18477,16 +18561,15 @@ const VSwitch = genericComponent()({
         indeterminate.value = false;
       }
     }
+    function onTrackClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      control.value?.input?.click();
+    }
     useRender(() => {
-      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = VInput.filterProps(props);
       const [controlProps, _2] = VSelectionControl.filterProps(props);
-      const control = ref();
-      function onClick(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        control.value?.input?.click();
-      }
       return createVNode(VInput, mergeProps({
         "class": ['v-switch', {
           'v-switch--inset': props.inset
@@ -18494,7 +18577,7 @@ const VSwitch = genericComponent()({
           'v-switch--indeterminate': indeterminate.value
         }, loaderClasses.value, props.class],
         "style": props.style
-      }, inputAttrs, inputProps, {
+      }, rootAttrs, inputProps, {
         "id": id.value,
         "focused": isFocused.value
       }), {
@@ -18524,29 +18607,36 @@ const VSwitch = genericComponent()({
             ...slots,
             default: () => createVNode("div", {
               "class": "v-switch__track",
-              "onClick": onClick
+              "onClick": onTrackClick
             }, 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 +19117,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 +20378,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.12";
+const version$1 = "3.3.14";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20314,7 +20403,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.12";
+const version = "3.3.14";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };