vuetify 3.3.13 → 3.3.15

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.13
+* Vuetify v3.3.15
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -233,14 +233,22 @@
     include.forEach(prop => clone[prop] = obj[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];
@@ -393,8 +401,6 @@
   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);
   }
@@ -664,6 +670,94 @@
     });
   }
 
+  /**
+   * 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) {
@@ -1020,36 +1114,13 @@
     const dark = Math.min(l1, l2);
     return (light + 0.05) / (dark + 0.05);
   }
-
-  // Utilities
-
-  // Types
-
-  function useToggleScope(source, fn) {
-    let scope;
-    function start() {
-      scope = vue.effectScope();
-      scope.run(() => fn.length ? fn(() => {
-        scope?.stop();
-        start();
-      }) : fn());
-    }
-    vue.watch(source, active => {
-      if (active && !scope) {
-        start();
-      } else if (!active) {
-        scope?.stop();
-        scope = undefined;
-      }
-    }, {
-      immediate: true
-    });
-    vue.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
 
@@ -1071,6 +1142,7 @@
       const scoped = vue.unref(options?.scoped);
       const reset = vue.unref(options?.reset);
       const root = vue.unref(options?.root);
+      if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value;
       let properties = mergeDeep(providedDefaults.value, {
         prev: injectedDefaults.value
       });
@@ -1126,16 +1198,16 @@
           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);
+      vue.provide(DefaultsSymbol, vue.computed(() => {
+        return _subcomponentDefaults.value ? mergeDeep(injected?.value ?? {}, _subcomponentDefaults.value) : injected?.value;
+      }));
     }
     return {
       props: _props,
@@ -1317,9 +1389,10 @@
   // 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];
@@ -1796,6 +1869,34 @@
     zhHant: false
   };
 
+  // Utilities
+
+  // Types
+
+  function useToggleScope(source, fn) {
+    let scope;
+    function start() {
+      scope = vue.effectScope();
+      scope.run(() => fn.length ? fn(() => {
+        scope?.stop();
+        start();
+      }) : fn());
+    }
+    vue.watch(source, active => {
+      if (active && !scope) {
+        start();
+      } else if (!active) {
+        scope?.stop();
+        scope = undefined;
+      }
+    }, {
+      immediate: true
+    });
+    vue.onScopeDispose(() => {
+      scope?.stop();
+    });
+  }
+
   // Composables
 
   // Types
@@ -1997,94 +2098,6 @@
     };
   }
 
-  /**
-   * 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
@@ -2106,6 +2119,7 @@
         colors: {
           background: '#FFFFFF',
           surface: '#FFFFFF',
+          'surface-bright': '#FFFFFF',
           'surface-variant': '#424242',
           'on-surface-variant': '#EEEEEE',
           primary: '#6200EE',
@@ -2141,7 +2155,8 @@
         colors: {
           background: '#121212',
           surface: '#212121',
-          'surface-variant': '#BDBDBD',
+          'surface-bright': '#ccbfd6',
+          'surface-variant': '#a3a3a3',
           'on-surface-variant': '#424242',
           primary: '#BB86FC',
           'primary-darken-1': '#3700B3',
@@ -2220,8 +2235,6 @@
           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)))
@@ -2233,7 +2246,7 @@
           // }
 
           // 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;
@@ -2334,12 +2347,14 @@
     const theme = vue.inject(ThemeSymbol, null);
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     const name = vue.computed(() => {
-      return props.theme ?? theme?.name.value;
+      return props.theme ?? theme.name.value;
     });
+    const current = vue.computed(() => theme.themes.value[name.value]);
     const themeClasses = vue.computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
+      current,
       themeClasses
     };
     vue.provide(ThemeSymbol, newTheme);
@@ -3262,6 +3277,11 @@
       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}`);
         }
@@ -5791,6 +5811,12 @@
     } = useTextColor(vue.computed(() => {
       return model.value && !props.error && !props.disabled ? props.color : undefined;
     }));
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(vue.computed(() => {
+      return model.value && !props.error && !props.disabled ? props.color : undefined;
+    }));
     const icon = vue.computed(() => model.value ? props.trueIcon : props.falseIcon);
     return {
       group,
@@ -5800,6 +5826,8 @@
       model,
       textColorClasses,
       textColorStyles,
+      backgroundColorClasses,
+      backgroundColorStyles,
       icon
     };
   }
@@ -5825,6 +5853,8 @@
         model,
         textColorClasses,
         textColorStyles,
+        backgroundColorClasses,
+        backgroundColorStyles,
         trueValue
       } = useSelectionControl(props);
       const uid = getUid();
@@ -5889,12 +5919,17 @@
         }), [vue.createVNode("div", {
           "class": ['v-selection-control__wrapper', textColorClasses.value],
           "style": textColorStyles.value
-        }, [slots.default?.(), vue.withDirectives(vue.createVNode("div", {
+        }, [slots.default?.({
+          backgroundColorClasses,
+          backgroundColorStyles
+        }), vue.withDirectives(vue.createVNode("div", {
           "class": ['v-selection-control__input']
         }, [slots.input?.({
           model,
           textColorClasses,
           textColorStyles,
+          backgroundColorClasses,
+          backgroundColorStyles,
           inputNode,
           icon: icon.value,
           props: {
@@ -5907,7 +5942,8 @@
           "icon": icon.value
         }, null), inputNode])]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
           "for": id.value,
-          "clickable": true
+          "clickable": true,
+          "onClick": e => e.stopPropagation()
         }, {
           default: () => [label]
         })]);
@@ -5956,16 +5992,19 @@
       const trueIcon = vue.computed(() => {
         return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
-      useRender(() => vue.createVNode(VSelectionControl, vue.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 vue.createVNode(VSelectionControl, vue.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 {};
     }
   });
@@ -6529,12 +6568,12 @@
       const uid = getUid();
       const id = vue.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 vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-checkbox', props.class]
-        }, inputAttrs, inputProps, {
+        }, rootAttrs, inputProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "id": id.value,
@@ -9101,7 +9140,7 @@
       if (selector) {
         if (selector === 'parent') {
           let el = vm?.proxy?.$el?.parentNode;
-          while (el.hasAttribute('data-no-activator')) {
+          while (el?.hasAttribute('data-no-activator')) {
             el = el.parentNode;
           }
           activator = el;
@@ -10862,6 +10901,7 @@
       } = useLocale();
       const vTextFieldRef = vue.ref();
       const vMenuRef = vue.ref();
+      const vVirtualScrollRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
         get: () => _menu.value,
@@ -10991,6 +11031,14 @@
           vTextFieldRef.value.value = '';
         }
       }
+      vue.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']);
@@ -11052,6 +11100,7 @@
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
+                "ref": vVirtualScrollRef,
                 "renderless": true,
                 "items": displayItems.value
               }, {
@@ -11312,6 +11361,7 @@
       const isPristine = vue.shallowRef(true);
       const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
+      const vVirtualScrollRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
         get: () => _menu.value,
@@ -11402,7 +11452,7 @@
           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');
@@ -11515,6 +11565,14 @@
         if (val) menu.value = true;
         isPristine.value = !val;
       });
+      vue.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']);
@@ -11574,6 +11632,7 @@
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
+                "ref": vVirtualScrollRef,
                 "renderless": true,
                 "items": displayItems.value
               }, {
@@ -14845,6 +14904,7 @@
       const isPristine = vue.shallowRef(true);
       const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
+      const vVirtualScrollRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
         get: () => _menu.value,
@@ -15078,6 +15138,14 @@
           search.value = '';
         }
       });
+      vue.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']);
@@ -15136,6 +15204,7 @@
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
+                "ref": vVirtualScrollRef,
                 "renderless": true,
                 "items": displayItems.value
               }, {
@@ -17527,7 +17596,7 @@
       const id = vue.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({
@@ -17539,7 +17608,7 @@
         return vue.createVNode(VInput, vue.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
@@ -18516,6 +18585,7 @@
         focus,
         blur
       } = useFocus(props);
+      const control = vue.ref();
       const loaderColor = vue.computed(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
@@ -18526,16 +18596,15 @@
           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 = vue.ref();
-        function onClick(e) {
-          e.stopPropagation();
-          e.preventDefault();
-          control.value?.input?.click();
-        }
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-switch', {
             'v-switch--inset': props.inset
@@ -18543,7 +18612,7 @@
             'v-switch--indeterminate': indeterminate.value
           }, loaderClasses.value, props.class],
           "style": props.style
-        }, inputAttrs, inputProps, {
+        }, rootAttrs, inputProps, {
           "id": id.value,
           "focused": isFocused.value
         }), {
@@ -18571,19 +18640,29 @@
               "onBlur": blur
             }, controlAttrs), {
               ...slots,
-              default: () => vue.createVNode("div", {
-                "class": "v-switch__track",
-                "onClick": onClick
-              }, null),
-              input: _ref3 => {
+              default: _ref3 => {
                 let {
-                  inputNode,
-                  icon
+                  backgroundColorClasses,
+                  backgroundColorStyles
                 } = _ref3;
+                return vue.createVNode("div", {
+                  "class": ['v-switch__track', ...backgroundColorClasses.value],
+                  "style": backgroundColorStyles.value,
+                  "onClick": onTrackClick
+                }, null);
+              },
+              input: _ref4 => {
+                let {
+                  inputNode,
+                  icon,
+                  backgroundColorClasses,
+                  backgroundColorStyles
+                } = _ref4;
                 return vue.createVNode(vue.Fragment, null, [inputNode, vue.createVNode("div", {
                   "class": ['v-switch__thumb', {
                     'v-switch__thumb--filled': icon || props.loading
-                  }]
+                  }, props.inset ? undefined : backgroundColorClasses.value],
+                  "style": props.inset ? undefined : backgroundColorStyles.value
                 }, [vue.createVNode(VScaleTransition, null, {
                   default: () => [!props.loading ? icon && vue.createVNode(VIcon, {
                     "key": icon,
@@ -18724,8 +18803,8 @@
           const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
           const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
           const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
-          const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]);
-          const initialScale = prevBox[widthHeight] / nextBox[widthHeight];
+          const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
+          const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
           const sigma = 1.5;
           animate(nextEl, {
             backgroundColor: [color, 'currentcolor'],
@@ -19121,6 +19200,7 @@
                   once: true
                 }]]), props.autoGrow && vue.withDirectives(vue.createVNode("textarea", {
                   "class": [fieldClass, 'v-textarea__sizer'],
+                  "id": `${slotProps.id}-sizer`,
                   "onUpdate:modelValue": $event => model.value = $event,
                   "ref": sizerRef,
                   "readonly": true,
@@ -21725,6 +21805,98 @@
     }
   });
 
+  // Types
+
+  const makeVDatePickerControlsProps = propsFactory({
+    displayDate: String,
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    nextIcon: {
+      type: [String],
+      default: '$next'
+    },
+    prevIcon: {
+      type: [String],
+      default: '$prev'
+    },
+    expandIcon: {
+      type: [String],
+      default: '$expand'
+    },
+    collapseIcon: {
+      type: [String],
+      default: '$collapse'
+    },
+    viewMode: {
+      type: String,
+      default: 'month'
+    }
+  }, 'VDatePickerControls');
+  const VDatePickerControls = genericComponent()({
+    name: 'VDatePickerControls',
+    props: makeVDatePickerControlsProps(),
+    emits: {
+      'click:mode': () => true,
+      'click:prev': () => true,
+      'click:next': () => true
+    },
+    setup(props, _ref) {
+      let {
+        emit
+      } = _ref;
+      const modeIcon = vue.computed(() => {
+        return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon;
+      });
+      const disableMode = vue.computed(() => {
+        return Array.isArray(props.disabled) ? props.disabled.includes('mode') : props.disabled;
+      });
+      const disablePrev = vue.computed(() => {
+        return Array.isArray(props.disabled) ? props.disabled.includes('prev') : props.disabled;
+      });
+      const disableNext = vue.computed(() => {
+        return Array.isArray(props.disabled) ? props.disabled.includes('next') : props.disabled;
+      });
+      function onClickPrev() {
+        emit('click:prev');
+      }
+      function onClickNext() {
+        emit('click:next');
+      }
+      function onClickMode() {
+        emit('click:mode');
+      }
+      useRender(() => {
+        return vue.createVNode("div", {
+          "class": "v-date-picker-controls"
+        }, [vue.createVNode("div", {
+          "class": "v-date-picker-controls__date"
+        }, [props.displayDate]), vue.createVNode(VBtn, {
+          "disabled": disableMode.value,
+          "key": "expand-btn",
+          "icon": modeIcon.value,
+          "variant": "text",
+          "onClick": onClickMode
+        }, null), vue.createVNode(VSpacer, null, null), vue.createVNode("div", {
+          "key": "month-buttons",
+          "class": "v-date-picker-controls__month"
+        }, [vue.createVNode(VBtn, {
+          "disabled": disablePrev.value,
+          "icon": props.prevIcon,
+          "variant": "text",
+          "onClick": onClickPrev
+        }, null), vue.createVNode(VBtn, {
+          "disabled": disableNext.value,
+          "icon": props.nextIcon,
+          "variant": "text",
+          "onClick": onClickNext
+        }, null)])]);
+      });
+      return {};
+    }
+  });
+
   // Utilities
 
   // Types
@@ -22293,76 +22465,6 @@
     };
   }
 
-  const makeVDatePickerControlsProps = propsFactory({
-    nextIcon: {
-      type: [String],
-      default: '$next'
-    },
-    prevIcon: {
-      type: [String],
-      default: '$prev'
-    },
-    expandIcon: {
-      type: [String],
-      default: '$expand'
-    },
-    collapseIcon: {
-      type: [String],
-      default: '$collapse'
-    },
-    range: {
-      default: false,
-      type: [Boolean, String],
-      validator: v => v === false || ['start', 'end'].includes(v)
-    },
-    ...omit(makeDateProps(), ['modelValue', 'inputMode'])
-  }, 'VDatePickerControls');
-  const VDatePickerControls = genericComponent()({
-    name: 'VDatePickerControls',
-    props: makeVDatePickerControlsProps(),
-    emits: {
-      ...omit(dateEmits, ['update:modelValue', 'update:inputMode'])
-    },
-    setup(props, _ref) {
-      let {
-        emit
-      } = _ref;
-      const adapter = useDate();
-      const monthAndYear = vue.computed(() => {
-        const month = props.range === 'end' ? adapter.addMonths(props.displayDate, 1) : props.displayDate;
-        return adapter.format(month, 'monthAndYear');
-      });
-      useRender(() => {
-        const prevBtn = vue.createVNode(VBtn, {
-          "variant": "text",
-          "icon": props.prevIcon,
-          "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, -1))
-        }, null);
-        const nextBtn = vue.createVNode(VBtn, {
-          "variant": "text",
-          "icon": props.nextIcon,
-          "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, 1))
-        }, null);
-        return vue.createVNode("div", {
-          "class": "v-date-picker-controls"
-        }, [props.viewMode === 'month' && props.range === 'start' && prevBtn, !!props.range && vue.createVNode(VSpacer, {
-          "key": "range-spacer"
-        }, null), vue.createVNode("div", {
-          "class": "v-date-picker-controls__date"
-        }, [monthAndYear.value]), vue.createVNode(VBtn, {
-          "key": "expand-btn",
-          "variant": "text",
-          "icon": props.viewMode === 'month' ? props.expandIcon : props.collapseIcon,
-          "onClick": () => emit('update:viewMode', props.viewMode === 'month' ? 'year' : 'month')
-        }, null), vue.createVNode(VSpacer, null, null), props.viewMode === 'month' && !props.range && vue.createVNode("div", {
-          "class": "v-date-picker-controls__month",
-          "key": "month-buttons"
-        }, [prevBtn, nextBtn]), props.viewMode === 'month' && props.range === 'end' && nextBtn]);
-      });
-      return {};
-    }
-  });
-
   // Composables
 
   // Types
@@ -22419,6 +22521,8 @@
     side: {
       type: String
     },
+    min: [Number, String, Date],
+    max: [Number, String, Date],
     ...omit(makeDateProps(), ['inputMode', 'viewMode'])
   }, 'VDatePickerMonth');
   const VDatePickerMonth = genericComponent()({
@@ -22494,6 +22598,7 @@
         const startDate = validDates[0];
         const endDate = validDates[1];
         return days.map((date, index) => {
+          const isDisabled = !!(props.min && adapter.isAfter(props.min, date) || props.max && adapter.isAfter(date, props.max));
           const isStart = startDate && adapter.isSameDay(date, startDate);
           const isEnd = endDate && adapter.isSameDay(date, endDate);
           const isAdjacent = !adapter.isSameMonth(date, month.value);
@@ -22504,6 +22609,7 @@
             formatted: adapter.format(date, 'keyboardDate'),
             year: adapter.getYear(date),
             month: adapter.getMonth(date),
+            isDisabled,
             isWeekStart: index % 7 === 0,
             isWeekEnd: index % 7 === 6,
             isSelected: isStart || isEnd,
@@ -22646,50 +22752,55 @@
         "onTouchstart": handleMousedown
       }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => vue.createVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
-      }, [weekDay])), daysInMonth.value.map((item, index) => vue.createVNode("div", {
-        "class": ['v-date-picker-month__day', {
-          'v-date-picker-month__day--selected': item.isSelected,
-          'v-date-picker-month__day--start': item.isStart,
-          'v-date-picker-month__day--end': item.isEnd,
-          'v-date-picker-month__day--adjacent': item.isAdjacent,
-          'v-date-picker-month__day--hide-adjacent': item.isHidden,
-          'v-date-picker-month__day--week-start': item.isWeekStart,
-          'v-date-picker-month__day--week-end': item.isWeekEnd,
-          'v-date-picker-month__day--hovered': item.isHovered
-        }],
-        "data-v-date": !item.isHidden ? item.isoDate : undefined
-      }, [item.inRange && vue.createVNode("div", {
-        "key": "in-range",
-        "class": ['v-date-picker-month__day--range', backgroundColorClasses.value],
-        "style": backgroundColorStyles.value
-      }, null), item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && vue.createVNode("div", {
-        "key": "in-hover",
-        "class": "v-date-picker-month__day--hover"
-      }, null), (props.showAdjacentMonths || !item.isAdjacent) && vue.createVNode(VBtn, {
-        "icon": true,
-        "ripple": false,
-        "variant": (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat',
-        "active": item.isSelected,
-        "color": item.isSelected || item.isToday ? props.color : item.isHovered ? undefined : 'transparent'
-      }, {
-        default: () => [item.localized]
-      })]))])]);
+      }, [weekDay])), daysInMonth.value.map((item, index) => {
+        const color = item.isSelected || item.isToday ? props.color : item.isHovered || item.isDisabled ? undefined : 'transparent';
+        const variant = item.isDisabled ? 'text' : (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat';
+        return vue.createVNode("div", {
+          "class": ['v-date-picker-month__day', {
+            'v-date-picker-month__day--selected': item.isSelected,
+            'v-date-picker-month__day--start': item.isStart,
+            'v-date-picker-month__day--end': item.isEnd,
+            'v-date-picker-month__day--adjacent': item.isAdjacent,
+            'v-date-picker-month__day--hide-adjacent': item.isHidden,
+            'v-date-picker-month__day--week-start': item.isWeekStart,
+            'v-date-picker-month__day--week-end': item.isWeekEnd,
+            'v-date-picker-month__day--hovered': item.isHovered
+          }],
+          "data-v-date": !item.isHidden && !item.isDisabled ? item.isoDate : undefined
+        }, [item.inRange && vue.createVNode("div", {
+          "key": "in-range",
+          "class": ['v-date-picker-month__day--range', backgroundColorClasses.value],
+          "style": backgroundColorStyles.value
+        }, null), item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && vue.createVNode("div", {
+          "key": "in-hover",
+          "class": "v-date-picker-month__day--hover"
+        }, null), (props.showAdjacentMonths || !item.isAdjacent) && vue.createVNode(VBtn, {
+          "active": item.isSelected,
+          "color": color,
+          "disabled": item.isDisabled,
+          "icon": true,
+          "ripple": false,
+          "variant": variant
+        }, {
+          default: () => [item.localized]
+        })]);
+      })])]);
     }
   });
 
   const makeVDatePickerYearsProps = propsFactory({
     color: String,
-    min: Number,
-    max: Number,
     height: [String, Number],
-    displayDate: null
+    displayDate: null,
+    min: [Number, String, Date],
+    max: [Number, String, Date]
   }, 'VDatePickerYears');
   const VDatePickerYears = genericComponent()({
     name: 'VDatePickerYears',
     props: makeVDatePickerYearsProps(),
     emits: {
       'update:displayDate': date => true,
-      'update:viewMode': date => true
+      'click:mode': () => true
     },
     setup(props, _ref) {
       let {
@@ -22698,8 +22809,8 @@
       const adapter = useDate();
       const displayYear = vue.computed(() => adapter.getYear(props.displayDate ?? new Date()));
       const years = vue.computed(() => {
-        const min = props.min ?? displayYear.value - 50 - 2;
-        const max = props.max ?? displayYear.value + 50;
+        const min = props.min ? adapter.date(props.min).getFullYear() : displayYear.value - 100;
+        const max = props.max ? adapter.date(props.max).getFullYear() : displayYear.value + 50;
         return createRange(max - min, min);
       });
       const yearRef = vue.ref();
@@ -22715,19 +22826,21 @@
         }
       }, [vue.createVNode("div", {
         "class": "v-date-picker-years__content"
-      }, [years.value.map(year => vue.createVNode(VBtn, {
-        "ref": year === displayYear.value ? yearRef : undefined,
-        "variant": year === displayYear.value ? 'flat' : 'text',
-        "rounded": "xl",
-        "active": year === displayYear.value,
-        "color": year === displayYear.value ? props.color : undefined,
-        "onClick": () => {
+      }, [years.value.map(year => {
+        function onClick() {
           emit('update:displayDate', adapter.setYear(props.displayDate, year));
-          emit('update:viewMode', 'month');
-        }
-      }, {
-        default: () => [year]
-      }))])]));
+          emit('click:mode');
+        }
+        return vue.createVNode(VBtn, {
+          "ref": year === displayYear.value ? yearRef : undefined,
+          "active": year === displayYear.value,
+          "color": year === displayYear.value ? props.color : undefined,
+          "rounded": "xl",
+          "text": String(year),
+          "variant": year === displayYear.value ? 'flat' : 'text',
+          "onClick": onClick
+        }, null);
+      })])]));
       return {};
     }
   });
@@ -23012,21 +23125,24 @@
       const header = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
       const headerIcon = vue.computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
       const headerTransition = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
-      function updateFromInput(input, index) {
-        const {
-          isValid,
-          date
-        } = adapter;
-        if (isValid(input)) {
-          const newModel = model.value.slice();
-          newModel[index] = date(input);
-          if (props.hideActions) {
-            model.value = newModel;
-          } else {
-            temporaryModel.value = newModel;
-          }
+      const minDate = vue.computed(() => props.min && adapter.isValid(props.min) ? adapter.date(props.min) : null);
+      const maxDate = vue.computed(() => props.max && adapter.isValid(props.max) ? adapter.date(props.max) : null);
+      const disabled = vue.computed(() => {
+        if (!minDate.value && !maxDate.value) return false;
+        const targets = [];
+        if (minDate.value) {
+          const date = adapter.addDays(adapter.startOfMonth(displayDate.value), -1);
+          adapter.isAfter(minDate.value, date) && targets.push('prev');
         }
-      }
+        if (maxDate.value) {
+          const date = adapter.addDays(adapter.endOfMonth(displayDate.value), 1);
+          adapter.isAfter(date, maxDate.value) && targets.push('next');
+        }
+        if (minDate.value?.getFullYear() === maxDate.value?.getFullYear()) {
+          targets.push('mode');
+        }
+        return targets;
+      });
       vue.watch(model, val => {
         if (!isEqual(val, temporaryModel.value)) {
           temporaryModel.value = val;
@@ -23041,6 +23157,21 @@
           isReversing.value = adapter.isBefore(val[0], oldVal[0]);
         }
       });
+      function updateFromInput(input, index) {
+        const {
+          isValid,
+          date
+        } = adapter;
+        if (isValid(input)) {
+          const newModel = model.value.slice();
+          newModel[index] = date(input);
+          if (props.hideActions) {
+            model.value = newModel;
+          } else {
+            temporaryModel.value = newModel;
+          }
+        }
+      }
       function onClickCancel() {
         emit('click:cancel');
       }
@@ -23051,6 +23182,15 @@
       function onClickAppend() {
         inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar';
       }
+      function onClickNext() {
+        displayDate.value = adapter.addMonths(displayDate.value, 1);
+      }
+      function onClickPrev() {
+        displayDate.value = adapter.addMonths(displayDate.value, -1);
+      }
+      function onClickMode() {
+        viewMode.value = viewMode.value === 'month' ? 'year' : 'month';
+      }
       const headerSlotProps = vue.computed(() => ({
         header: header.value,
         appendIcon: headerIcon.value,
@@ -23072,10 +23212,11 @@
             "key": "header"
           }, headerSlotProps.value), null),
           default: () => inputMode.value === 'calendar' ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
-            "displayDate": displayDate.value,
-            "onUpdate:displayDate": $event => displayDate.value = $event,
-            "viewMode": viewMode.value,
-            "onUpdate:viewMode": $event => viewMode.value = $event
+            "disabled": disabled.value,
+            "displayDate": adapter.format(displayDate.value, 'monthAndYear'),
+            "onClick:next": onClickNext,
+            "onClick:prev": onClickPrev,
+            "onClick:mode": onClickMode
           }), null), vue.createVNode(VFadeTransition, {
             "hideOnLeave": true
           }, {
@@ -23085,14 +23226,16 @@
               "modelValue": temporaryModel.value,
               "onUpdate:modelValue": $event => temporaryModel.value = $event,
               "displayDate": displayDate.value,
-              "onUpdate:displayDate": $event => displayDate.value = $event
+              "min": minDate.value,
+              "max": maxDate.value
             }), null) : vue.createVNode(VDatePickerYears, vue.mergeProps({
               "key": "date-picker-years"
             }, datePickerYearsProps, {
               "displayDate": displayDate.value,
               "onUpdate:displayDate": $event => displayDate.value = $event,
-              "viewMode": viewMode.value,
-              "onUpdate:viewMode": $event => viewMode.value = $event
+              "min": minDate.value,
+              "max": maxDate.value,
+              "onClick:mode": onClickMode
             }), null)]
           })]) : vue.createVNode("div", {
             "class": "v-date-picker__input"
@@ -24435,7 +24578,7 @@
       date
     };
   }
-  const version$1 = "3.3.13";
+  const version$1 = "3.3.15";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -24449,7 +24592,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.13";
+  const version = "3.3.15";
 
   /* eslint-disable local-rules/sort-imports */