@vuetify/nightly 3.8.9-master.2025-06-14 → 3.8.10-dev.2025-06-18

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.9-master.2025-06-14
+* Vuetify v3.8.10-dev.2025-06-18
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -85,6 +85,7 @@
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
   const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
   const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
+  const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
 
   function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
   function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -591,18 +592,23 @@
   function isPrimitive(value) {
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint';
   }
-  function extractNumber(text, decimalDigitsLimit) {
-    const cleanText = text.split('').filter(x => /[\d\-.]/.test(x)).filter((x, i, all) => i === 0 && /[-]/.test(x) ||
+  function escapeForRegex(sign) {
+    return '\\^$*+?.()|{}[]'.includes(sign) ? `\\${sign}` : sign;
+  }
+  function extractNumber(text, decimalDigitsLimit, decimalSeparator) {
+    const onlyValidCharacters = new RegExp(`[\\d\\-${escapeForRegex(decimalSeparator)}]`);
+    const cleanText = text.split('').filter(x => onlyValidCharacters.test(x)).filter((x, i, all) => i === 0 && /[-]/.test(x) ||
     // sign allowed at the start
-    x === '.' && i === all.indexOf('.') ||
+    x === decimalSeparator && i === all.indexOf(x) ||
     // decimal separator allowed only once
     /\d/.test(x)).join('');
     if (decimalDigitsLimit === 0) {
-      return cleanText.split('.')[0];
+      return cleanText.split(decimalSeparator)[0];
     }
-    if (decimalDigitsLimit !== null && /\.\d/.test(cleanText)) {
-      const parts = cleanText.split('.');
-      return [parts[0], parts[1].substring(0, decimalDigitsLimit)].join('.');
+    const decimalPart = new RegExp(`${escapeForRegex(decimalSeparator)}\\d`);
+    if (decimalDigitsLimit !== null && decimalPart.test(cleanText)) {
+      const parts = cleanText.split(decimalSeparator);
+      return [parts[0], parts[1].substring(0, decimalDigitsLimit)].join(decimalSeparator);
     }
     return cleanText;
   }
@@ -944,7 +950,7 @@
       // WoB should always return negative value.
 
       const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
-      outputContrast = SAPC > -1e-3 ? 0.0 : SAPC > -0.078 ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+      outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
     }
     return outputContrast * 100;
   }
@@ -2185,6 +2191,10 @@
       return numberFormat.format(value);
     };
   }
+  function inferDecimalSeparator(current, fallback) {
+    const format = createNumberFunction(current, fallback);
+    return format(0.1).includes(',') ? ',' : '.';
+  }
   function useProvided(props, prop, provided) {
     const internal = useProxiedModel(props, prop, props[prop] ?? provided.value);
 
@@ -2207,6 +2217,7 @@
         current,
         fallback,
         messages,
+        decimalSeparator: vue.toRef(() => inferDecimalSeparator(current, fallback)),
         t: createTranslateFunction(current, fallback, messages),
         n: createNumberFunction(current, fallback),
         provide: createProvideFunction({
@@ -2229,6 +2240,7 @@
       current,
       fallback,
       messages,
+      decimalSeparator: vue.toRef(() => options?.decimalSeparator ?? inferDecimalSeparator(current, fallback)),
       t: createTranslateFunction(current, fallback, messages),
       n: createNumberFunction(current, fallback),
       provide: createProvideFunction({
@@ -2355,6 +2367,7 @@
   function genDefaults$2() {
     return {
       defaultTheme: 'light',
+      prefix: 'v-',
       variations: {
         colors: [],
         lighten: 0,
@@ -2392,8 +2405,8 @@
             'activated-opacity': 0.12,
             'pressed-opacity': 0.12,
             'dragged-opacity': 0.08,
-            'theme-kbd': '#212529',
-            'theme-on-kbd': '#FFFFFF',
+            'theme-kbd': '#EEEEEE',
+            'theme-on-kbd': '#000000',
             'theme-code': '#F5F5F5',
             'theme-on-code': '#000000'
           }
@@ -2429,14 +2442,17 @@
             'activated-opacity': 0.12,
             'pressed-opacity': 0.16,
             'dragged-opacity': 0.08,
-            'theme-kbd': '#212529',
+            'theme-kbd': '#424242',
             'theme-on-kbd': '#FFFFFF',
             'theme-code': '#343434',
             'theme-on-code': '#CCCCCC'
           }
         }
       },
-      stylesheetId: 'vuetify-theme-stylesheet'
+      stylesheetId: 'vuetify-theme-stylesheet',
+      scoped: false,
+      unimportant: false,
+      utilities: true
     };
   }
   function parseThemeOptions() {
@@ -2459,21 +2475,21 @@
   function createCssClass(lines, selector, content, scope) {
     lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
   }
-  function genCssVariables(theme) {
+  function genCssVariables(theme, prefix) {
     const lightOverlay = theme.dark ? 2 : 1;
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
       const rgb = parseColor(value);
-      variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
+      variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
-        variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
+        variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
       const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-      variables.push(`--v-${key}: ${rgb ?? value}`);
+      variables.push(`--${prefix}${key}: ${rgb ?? value}`);
     }
     return variables;
   }
@@ -2517,7 +2533,8 @@
     const scopeSelector = `:where(${scope})`;
     return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
   }
-  function upsertStyles(styleEl, styles) {
+  function upsertStyles(id, cspNonce, styles) {
+    const styleEl = getOrCreateStyleElement(id, cspNonce);
     if (!styleEl) return;
     styleEl.innerHTML = styles;
   }
@@ -2537,8 +2554,17 @@
   // Composables
   function createTheme(options) {
     const parsedOptions = parseThemeOptions(options);
-    const name = vue.shallowRef(parsedOptions.defaultTheme);
+    const _name = vue.shallowRef(parsedOptions.defaultTheme);
     const themes = vue.ref(parsedOptions.themes);
+    const systemName = vue.shallowRef('light');
+    const name = vue.computed({
+      get() {
+        return _name.value === 'system' ? systemName.value : _name.value;
+      },
+      set(val) {
+        _name.value = val;
+      }
+    });
     const computedThemes = vue.computed(() => {
       const acc = {};
       for (const [name, original] of Object.entries(themes.value)) {
@@ -2559,28 +2585,49 @@
     const current = vue.toRef(() => computedThemes.value[name.value]);
     const styles = vue.computed(() => {
       const lines = [];
+      const important = parsedOptions.unimportant ? '' : ' !important';
+      const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
       if (current.value?.dark) {
         createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
       }
-      createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
+      createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
       for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)], parsedOptions.scope);
-      }
-      const bgLines = [];
-      const fgLines = [];
-      const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
-      for (const key of colors) {
-        if (key.startsWith('on-')) {
-          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-        } else {
-          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope);
+        createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
+      }
+      if (parsedOptions.utilities) {
+        const bgLines = [];
+        const fgLines = [];
+        const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
+        for (const key of colors) {
+          if (key.startsWith('on-')) {
+            createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+          } else {
+            createCssClass(bgLines, `.${scoped}bg-${key}`, [`--${parsedOptions.prefix}theme-overlay-multiplier: var(--${parsedOptions.prefix}theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`, `color: rgb(var(--${parsedOptions.prefix}theme-on-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
+          }
         }
+        lines.push(...bgLines, ...fgLines);
       }
-      lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
+    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
+    const themeNames = vue.toRef(() => Object.keys(computedThemes.value));
+    if (SUPPORTS_MATCH_MEDIA) {
+      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      function updateSystemName() {
+        systemName.value = media.matches ? 'dark' : 'light';
+      }
+      updateSystemName();
+      media.addEventListener('change', updateSystemName, {
+        passive: true
+      });
+      if (vue.getCurrentScope()) {
+        vue.onScopeDispose(() => {
+          media.removeEventListener('change', updateSystemName);
+        });
+      }
+    }
     function install(app) {
       if (parsedOptions.isDisabled) return;
       const head = app._context.provides.usehead;
@@ -2618,22 +2665,55 @@
           updateStyles();
         }
         function updateStyles() {
-          upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
+          upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
         }
       }
     }
-    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+    function change(themeName) {
+      if (!themeNames.value.includes(themeName)) {
+        consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
+        return;
+      }
+      name.value = themeName;
+    }
+    function cycle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
+      const currentIndex = themeArray.indexOf(name.value);
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
+      change(themeArray[nextIndex]);
+    }
+    function toggle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
+      cycle(themeArray);
+    }
+    const globalName = new Proxy(name, {
+      get(target, prop) {
+        return target[prop];
+      },
+      set(target, prop, val) {
+        if (prop === 'value') {
+          deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
+        }
+        // @ts-expect-error
+        target[prop] = val;
+        return true;
+      }
+    });
     return {
       install,
+      change,
+      cycle,
+      toggle,
       isDisabled: parsedOptions.isDisabled,
       name,
       themes,
       current,
       computedThemes,
+      prefix: parsedOptions.prefix,
       themeClasses,
       styles,
       global: {
-        name,
+        name: globalName,
         current
       }
     };
@@ -2644,7 +2724,7 @@
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     const name = vue.toRef(() => props.theme ?? theme.name.value);
     const current = vue.toRef(() => theme.themes.value[name.value]);
-    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -3748,7 +3828,10 @@
       default: 'default',
       validator: v => allowedDensities$1.includes(v)
     },
-    extended: Boolean,
+    extended: {
+      type: Boolean,
+      default: null
+    },
     extensionHeight: {
       type: [Number, String],
       default: 48
@@ -3796,7 +3879,7 @@
       const {
         rtlClasses
       } = useRtl();
-      const isExtended = vue.shallowRef(!!(props.extended || slots.extension?.()));
+      const isExtended = vue.shallowRef(props.extended === null ? !!slots.extension?.() : props.extended);
       const contentHeight = vue.computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
       const extensionHeight = vue.computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
       provideDefaults({
@@ -3808,7 +3891,7 @@
         const hasTitle = !!(props.title || slots.title);
         const hasImage = !!(slots.image || props.image);
         const extension = slots.extension?.();
-        isExtended.value = !!(props.extended || extension);
+        isExtended.value = props.extended === null ? !!extension : props.extended;
         return vue.createVNode(props.tag, {
           "class": vue.normalizeClass(['v-toolbar', {
             'v-toolbar--absolute': props.absolute,
@@ -4191,9 +4274,15 @@
     };
   }
 
+  // Types
+
   const makeVBtnGroupProps = propsFactory({
     baseColor: String,
     divided: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
@@ -4227,7 +4316,7 @@
       } = useRounded(props);
       provideDefaults({
         VBtn: {
-          height: 'auto',
+          height: vue.toRef(() => props.direction === 'horizontal' ? 'auto' : null),
           baseColor: vue.toRef(() => props.baseColor),
           color: vue.toRef(() => props.color),
           density: vue.toRef(() => props.density),
@@ -4237,7 +4326,7 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": vue.normalizeClass(['v-btn-group', {
+          "class": vue.normalizeClass(['v-btn-group', `v-btn-group--${props.direction}`, {
             'v-btn-group--divided': props.divided
           }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
           "style": vue.normalizeStyle(props.style)
@@ -4404,6 +4493,7 @@
       } else {
         const isSelected = selected.value.includes(id);
         if (props.mandatory && isSelected) return;
+        if (!isSelected && !value) return;
         selected.value = value ?? !isSelected ? [id] : [];
       }
     }
@@ -4838,7 +4928,7 @@
       const observer = new IntersectionObserver(entries => {
         isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
       }, options);
-      vue.onBeforeUnmount(() => {
+      vue.onScopeDispose(() => {
         observer.disconnect();
       });
       vue.watch(intersectionRef, (newValue, oldValue) => {
@@ -5369,9 +5459,9 @@
 
   function useSelectLink(link, select) {
     vue.watch(() => link.isActive?.value, isActive => {
-      if (link.isLink.value && isActive && select) {
+      if (link.isLink.value && isActive != null && select) {
         vue.nextTick(() => {
-          select(true);
+          select(isActive);
         });
       }
     }, {
@@ -5569,8 +5659,8 @@
     window.clearTimeout(element._ripple.showTimer);
   }
   let keyboardRipple = false;
-  function keyboardRippleShow(e) {
-    if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
+  function keyboardRippleShow(e, keys) {
+    if (!keyboardRipple && keys.includes(e.keyCode)) {
       keyboardRipple = true;
       rippleShow(e);
     }
@@ -5598,9 +5688,12 @@
     el._ripple.enabled = enabled;
     el._ripple.centered = modifiers.center;
     el._ripple.circle = modifiers.circle;
-    if (isObject(value) && value.class) {
-      el._ripple.class = value.class;
+    const bindingValue = isObject(value) ? value : {};
+    if (bindingValue.class) {
+      el._ripple.class = bindingValue.class;
     }
+    const allowedKeys = bindingValue.keys ?? [keyCodes.enter, keyCodes.space];
+    el._ripple.keyDownHandler = e => keyboardRippleShow(e, allowedKeys);
     if (enabled && !wasEnabled) {
       if (modifiers.stop) {
         el.addEventListener('touchstart', rippleStop, {
@@ -5622,7 +5715,7 @@
       el.addEventListener('mousedown', rippleShow);
       el.addEventListener('mouseup', rippleHide);
       el.addEventListener('mouseleave', rippleHide);
-      el.addEventListener('keydown', keyboardRippleShow);
+      el.addEventListener('keydown', e => keyboardRippleShow(e, allowedKeys));
       el.addEventListener('keyup', keyboardRippleHide);
       el.addEventListener('blur', focusRippleHide);
 
@@ -5642,7 +5735,9 @@
     el.removeEventListener('touchcancel', rippleHide);
     el.removeEventListener('mouseup', rippleHide);
     el.removeEventListener('mouseleave', rippleHide);
-    el.removeEventListener('keydown', keyboardRippleShow);
+    if (el._ripple?.keyDownHandler) {
+      el.removeEventListener('keydown', el._ripple.keyDownHandler);
+    }
     el.removeEventListener('keyup', keyboardRippleHide);
     el.removeEventListener('dragstart', rippleHide);
     el.removeEventListener('blur', focusRippleHide);
@@ -5651,8 +5746,8 @@
     updateRipple(el, binding, false);
   }
   function unmounted$4(el) {
-    delete el._ripple;
     removeListeners(el);
+    delete el._ripple;
   }
   function updated$1(el, binding) {
     if (binding.value === binding.oldValue) {
@@ -5925,6 +6020,31 @@
   // Utilities
   const VAlertTitle = createSimpleFunctional('v-alert-title');
 
+  // Utilities
+
+  // Types
+
+  // Types
+
+  // Composables
+  const makeIconSizeProps = propsFactory({
+    iconSize: [Number, String],
+    iconSizes: {
+      type: Array,
+      default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
+    }
+  }, 'iconSize');
+  function useIconSizes(props, fallback) {
+    const iconSize = vue.computed(() => {
+      const iconSizeMap = new Map(props.iconSizes);
+      const _iconSize = props.iconSize ?? fallback() ?? 'default';
+      return iconSizeMap.has(_iconSize) ? iconSizeMap.get(_iconSize) : _iconSize;
+    });
+    return {
+      iconSize
+    };
+  }
+
   // Types
 
   const allowedTypes = ['success', 'info', 'warning', 'error'];
@@ -5964,6 +6084,7 @@
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeIconSizeProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
@@ -5991,6 +6112,9 @@
         if (!props.type) return props.icon;
         return props.icon ?? `$${props.type}`;
       });
+      const {
+        iconSize
+      } = useIconSizes(props, () => props.prominent ? 44 : 28);
       const {
         themeClasses
       } = provideTheme(props);
@@ -6038,6 +6162,11 @@
         const hasPrepend = !!(slots.prepend || icon.value);
         const hasTitle = !!(slots.title || props.title);
         const hasClose = !!(slots.close || props.closable);
+        const iconProps = {
+          density: props.density,
+          icon: icon.value,
+          size: iconSize.value
+        };
         return isActive.value && vue.createVNode(props.tag, {
           "class": vue.normalizeClass(['v-alert', props.border && {
             'v-alert--border': !!props.border,
@@ -6055,19 +6184,14 @@
           }, null), hasPrepend && vue.createElementVNode("div", {
             "key": "prepend",
             "class": "v-alert__prepend"
-          }, [!slots.prepend ? vue.createVNode(VIcon, {
-            "key": "prepend-icon",
-            "density": props.density,
-            "icon": icon.value,
-            "size": props.prominent ? 44 : 28
-          }, null) : vue.createVNode(VDefaultsProvider, {
+          }, [!slots.prepend ? vue.createVNode(VIcon, vue.mergeProps({
+            "key": "prepend-icon"
+          }, iconProps), null) : vue.createVNode(VDefaultsProvider, {
             "key": "prepend-defaults",
             "disabled": !icon.value,
             "defaults": {
               VIcon: {
-                density: props.density,
-                icon: icon.value,
-                size: props.prominent ? 44 : 28
+                ...iconProps
               }
             }
           }, slots.prepend)]), vue.createElementVNode("div", {
@@ -7592,6 +7716,7 @@
   const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
   const makeVSlideGroupProps = propsFactory({
     centerActive: Boolean,
+    contentClass: null,
     direction: {
       type: String,
       default: 'horizontal'
@@ -7904,7 +8029,7 @@
         })]), vue.createElementVNode("div", {
           "key": "container",
           "ref": containerRef,
-          "class": "v-slide-group__container",
+          "class": vue.normalizeClass(['v-slide-group__container', props.contentClass]),
           "onScroll": onScroll
         }, [vue.createElementVNode("div", {
           "ref": contentRef,
@@ -8267,16 +8392,85 @@
     }
   });
 
+  const makeVDividerProps = propsFactory({
+    color: String,
+    inset: Boolean,
+    length: [Number, String],
+    opacity: [Number, String],
+    thickness: [Number, String],
+    vertical: Boolean,
+    ...makeComponentProps(),
+    ...makeThemeProps()
+  }, 'VDivider');
+  const VDivider = genericComponent()({
+    name: 'VDivider',
+    props: makeVDividerProps(),
+    setup(props, _ref) {
+      let {
+        attrs,
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(() => props.color);
+      const dividerStyles = vue.computed(() => {
+        const styles = {};
+        if (props.length) {
+          styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
+        }
+        if (props.thickness) {
+          styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
+        }
+        return styles;
+      });
+      useRender(() => {
+        const divider = vue.createElementVNode("hr", {
+          "class": vue.normalizeClass([{
+            'v-divider': true,
+            'v-divider--inset': props.inset,
+            'v-divider--vertical': props.vertical
+          }, themeClasses.value, textColorClasses.value, props.class]),
+          "style": vue.normalizeStyle([dividerStyles.value, textColorStyles.value, {
+            '--v-border-opacity': props.opacity
+          }, props.style]),
+          "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
+          "role": `${attrs.role || 'separator'}`
+        }, null);
+        if (!slots.default) return divider;
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-divider__wrapper', {
+            'v-divider__wrapper--vertical': props.vertical,
+            'v-divider__wrapper--inset': props.inset
+          }])
+        }, [divider, vue.createElementVNode("div", {
+          "class": "v-divider__content"
+        }, [slots.default()]), divider]);
+      });
+      return {};
+    }
+  });
+
   // Utilities
 
   // List
   const ListKey = Symbol.for('vuetify:list');
   function createList() {
+    let {
+      filterable
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      filterable: false
+    };
     const parent = vue.inject(ListKey, {
+      filterable: false,
       hasPrepend: vue.shallowRef(false),
       updateHasPrepend: () => null
     });
     const data = {
+      filterable: parent.filterable || filterable,
       hasPrepend: vue.shallowRef(false),
       updateHasPrepend: value => {
         if (value) data.hasPrepend.value = value;
@@ -8985,6 +9179,7 @@
       type: IconValue,
       default: '$expand'
     },
+    rawId: [String, Number],
     prependIcon: IconValue,
     appendIcon: IconValue,
     fluid: Boolean,
@@ -9006,13 +9201,12 @@
         open,
         id: _id
       } = useNestedItem(() => props.value, true);
-      const id = vue.computed(() => `v-list-group--id-${String(_id.value)}`);
+      const id = vue.computed(() => `v-list-group--id-${String(props.rawId ?? _id.value)}`);
       const list = useList();
       const {
         isBooted
       } = useSsrBoot();
       function onClick(e) {
-        e.stopPropagation();
         if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
         open(!isOpen.value, e);
       }
@@ -9228,6 +9422,9 @@
         roundedClasses
       } = useRounded(roundedProps);
       const lineClasses = vue.toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+      const rippleOptions = vue.toRef(() => props.ripple !== undefined && !!props.ripple && list?.filterable ? {
+        keys: [keyCodes.enter]
+      } : props.ripple);
       const slotProps = vue.computed(() => ({
         isActive: isActive.value,
         select,
@@ -9252,8 +9449,9 @@
       function onKeyDown(e) {
         const target = e.target;
         if (['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === 'Enter' || e.key === ' ' && !list?.filterable) {
           e.preventDefault();
+          e.stopPropagation();
           e.target.dispatchEvent(new MouseEvent('click', e));
         }
       }
@@ -9363,7 +9561,7 @@
           }), vue.createElementVNode("div", {
             "class": "v-list-item__spacer"
           }, null)])]
-        }), [[Ripple, isClickable.value && props.ripple]]);
+        }), [[Ripple, isClickable.value && rippleOptions.value]]);
       });
       return {
         activate,
@@ -9418,68 +9616,6 @@
     }
   });
 
-  const makeVDividerProps = propsFactory({
-    color: String,
-    inset: Boolean,
-    length: [Number, String],
-    opacity: [Number, String],
-    thickness: [Number, String],
-    vertical: Boolean,
-    ...makeComponentProps(),
-    ...makeThemeProps()
-  }, 'VDivider');
-  const VDivider = genericComponent()({
-    name: 'VDivider',
-    props: makeVDividerProps(),
-    setup(props, _ref) {
-      let {
-        attrs,
-        slots
-      } = _ref;
-      const {
-        themeClasses
-      } = provideTheme(props);
-      const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(() => props.color);
-      const dividerStyles = vue.computed(() => {
-        const styles = {};
-        if (props.length) {
-          styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
-        }
-        if (props.thickness) {
-          styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
-        }
-        return styles;
-      });
-      useRender(() => {
-        const divider = vue.createElementVNode("hr", {
-          "class": vue.normalizeClass([{
-            'v-divider': true,
-            'v-divider--inset': props.inset,
-            'v-divider--vertical': props.vertical
-          }, themeClasses.value, textColorClasses.value, props.class]),
-          "style": vue.normalizeStyle([dividerStyles.value, textColorStyles.value, {
-            '--v-border-opacity': props.opacity
-          }, props.style]),
-          "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
-          "role": `${attrs.role || 'separator'}`
-        }, null);
-        if (!slots.default) return divider;
-        return vue.createElementVNode("div", {
-          "class": vue.normalizeClass(['v-divider__wrapper', {
-            'v-divider__wrapper--vertical': props.vertical,
-            'v-divider__wrapper--inset': props.inset
-          }])
-        }, [divider, vue.createElementVNode("div", {
-          "class": "v-divider__content"
-        }, [slots.default()]), divider]);
-      });
-      return {};
-    }
-  });
-
   // Types
 
   const makeVListChildrenProps = propsFactory({
@@ -9530,9 +9666,10 @@
           }) : undefined
         };
         const listGroupProps = VListGroup.filterProps(itemProps);
-        return children ? vue.createVNode(VListGroup, vue.mergeProps({
-          "value": itemProps?.value
-        }, listGroupProps), {
+        return children ? vue.createVNode(VListGroup, vue.mergeProps(listGroupProps, {
+          "value": props.returnObject ? item : itemProps?.value,
+          "rawId": itemProps?.value
+        }), {
           activator: _ref3 => {
             let {
               props: activatorProps
@@ -9748,6 +9885,7 @@
     activeClass: String,
     bgColor: String,
     disabled: Boolean,
+    filterable: Boolean,
     expandIcon: IconValue,
     collapseIcon: IconValue,
     lines: {
@@ -9831,7 +9969,9 @@
       const activeColor = vue.toRef(() => props.activeColor);
       const baseColor = vue.toRef(() => props.baseColor);
       const color = vue.toRef(() => props.color);
-      createList();
+      createList({
+        filterable: props.filterable
+      });
       provideDefaults({
         VListGroup: {
           activeColor,
@@ -11514,6 +11654,7 @@
     // disableKeys: Boolean,
     id: String,
     submenu: Boolean,
+    disableInitialFocus: Boolean,
     ...omit(makeVOverlayProps({
       closeDelay: 250,
       closeOnContentClick: true,
@@ -11588,7 +11729,7 @@
       vue.watch(isActive, val => {
         if (val) {
           parent?.register();
-          if (IN_BROWSER) {
+          if (IN_BROWSER && !props.disableInitialFocus) {
             document.addEventListener('focusin', onFocusIn, {
               once: true
             });
@@ -12068,6 +12209,16 @@
     }
   });
 
+  function useAutofocus(props) {
+    function onIntersect(isIntersecting, entries) {
+      if (!props.autofocus || !isIntersecting) return;
+      entries[0].target?.focus?.();
+    }
+    return {
+      onIntersect
+    };
+  }
+
   // Types
 
   const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
@@ -12114,6 +12265,9 @@
         focus,
         blur
       } = useFocus(props);
+      const {
+        onIntersect
+      } = useAutofocus(props);
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : (model.value ?? '').toString().length;
       });
@@ -12123,10 +12277,6 @@
         return props.counter;
       });
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
-      function onIntersect(isIntersecting, entries) {
-        if (!props.autofocus || !isIntersecting) return;
-        entries[0].target?.focus?.();
-      }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
@@ -12416,7 +12566,12 @@
     }
     function calculateOffset(index) {
       index = clamp(index, 0, items.value.length - 1);
-      return offsets[index] || 0;
+      const whole = Math.floor(index);
+      const fraction = index % 1;
+      const next = whole + 1;
+      const wholeOffset = offsets[whole] || 0;
+      const nextOffset = offsets[next] || wholeOffset;
+      return wholeOffset + (nextOffset - wholeOffset) * fraction;
     }
     function calculateIndex(scrollTop) {
       return binaryClosest(offsets, scrollTop);
@@ -12770,6 +12925,7 @@
     },
     openOnClear: Boolean,
     itemColor: String,
+    noAutoScroll: Boolean,
     ...makeItemsProps({
       itemChildren: false
     })
@@ -12984,7 +13140,7 @@
       vue.watch(menu, () => {
         if (!props.hideSelected && menu.value && model.value.length) {
           const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
-          IN_BROWSER && window.requestAnimationFrame(() => {
+          IN_BROWSER && !props.noAutoScroll && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
         }
@@ -13077,6 +13233,22 @@
                     key: item.value,
                     onClick: () => select(item, null)
                   });
+                  if (item.raw.type === 'divider') {
+                    return slots.divider?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VDivider, vue.mergeProps(item.props, {
+                      "key": `divider-${index}`
+                    }), null);
+                  }
+                  if (item.raw.type === 'subheader') {
+                    return slots.subheader?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VListSubheader, vue.mergeProps(item.props, {
+                      "key": `subheader-${index}`
+                    }), null);
+                  }
                   return slots.item?.({
                     item,
                     index,
@@ -13237,6 +13409,9 @@
       let match = -1;
       if ((query || customFiltersLength > 0) && !options?.noFilter) {
         if (typeof item === 'object') {
+          if (['divider', 'subheader'].includes(item.raw?.type)) {
+            continue;
+          }
           const filterKeys = keys || Object.keys(transformed);
           for (const key of filterKeys) {
             const value = getPropertyFromItem(transformed, key);
@@ -13439,7 +13614,7 @@
         menu.value = !menu.value;
       }
       function onListKeydown(e) {
-        if (e.key !== ' ' && checkPrintable(e)) {
+        if (checkPrintable(e) || e.key === 'Backspace') {
           vTextFieldRef.value?.focus();
         }
       }
@@ -13644,6 +13819,7 @@
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
               "ref": listRef,
+              "filterable": true,
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
@@ -13675,6 +13851,22 @@
                     active: highlightFirst.value && index === 0 ? true : undefined,
                     onClick: () => select(item, null)
                   });
+                  if (item.raw.type === 'divider') {
+                    return slots.divider?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VDivider, vue.mergeProps(item.props, {
+                      "key": `divider-${index}`
+                    }), null);
+                  }
+                  if (item.raw.type === 'subheader') {
+                    return slots.subheader?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VListSubheader, vue.mergeProps(item.props, {
+                      "key": `subheader-${index}`
+                    }), null);
+                  }
                   return slots.item?.({
                     item,
                     index,
@@ -13819,7 +14011,8 @@
     ...makeThemeProps(),
     ...makeTransitionProps({
       transition: 'scale-rotate-transition'
-    })
+    }),
+    ...makeDimensionProps()
   }, 'VBadge');
   const VBadge = genericComponent()({
     name: 'VBadge',
@@ -13849,6 +14042,9 @@
         const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
         return base + (['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0) : 0);
       });
+      const {
+        dimensionStyles
+      } = useDimension(props);
       useRender(() => {
         const value = Number(props.content);
         const content = !props.max || isNaN(value) ? props.content : value <= Number(props.max) ? value : `${props.max}+`;
@@ -13870,7 +14066,7 @@
           }, {
             default: () => [vue.withDirectives(vue.createElementVNode("span", vue.mergeProps({
               "class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
-              "style": [backgroundColorStyles.value, textColorStyles.value, props.inline ? {} : locationStyles.value],
+              "style": [backgroundColorStyles.value, textColorStyles.value, dimensionStyles.value, props.inline ? {} : locationStyles.value],
               "aria-atomic": "true",
               "aria-label": t(props.label, value),
               "aria-live": "polite",
@@ -17279,13 +17475,13 @@
     return null;
   }
   const sundayJanuarySecond2000 = new Date(2000, 0, 2);
-  function getWeekdays(locale, firstDayOfWeek) {
+  function getWeekdays(locale, firstDayOfWeek, weekdayFormat) {
     const daysFromSunday = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
     return createRange(7).map(i => {
       const weekday = new Date(sundayJanuarySecond2000);
       weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
       return new Intl.DateTimeFormat(locale, {
-        weekday: 'narrow'
+        weekday: weekdayFormat ?? 'narrow'
       }).format(weekday);
     });
   }
@@ -17749,9 +17945,9 @@
     getDiff(date, comparing, unit) {
       return getDiff(date, comparing, unit);
     }
-    getWeekdays(firstDayOfWeek) {
+    getWeekdays(firstDayOfWeek, weekdayFormat) {
       const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
-      return getWeekdays(this.locale, firstDay);
+      return getWeekdays(this.locale, firstDay, weekdayFormat);
     }
     getYear(date) {
       return getYear(date);
@@ -18106,6 +18302,7 @@
           _search.value = val ?? '';
           if (!props.multiple && !hasSelectionSlot.value) {
             model.value = [transformItem$3(props, val)];
+            vue.nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
           }
           if (val && props.multiple && props.delimiters?.length) {
             const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
@@ -18186,7 +18383,7 @@
         menu.value = !menu.value;
       }
       function onListKeydown(e) {
-        if (e.key !== ' ' && checkPrintable(e)) {
+        if (checkPrintable(e) || e.key === 'Backspace') {
           vTextFieldRef.value?.focus();
         }
       }
@@ -18391,6 +18588,7 @@
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
               "ref": listRef,
+              "filterable": true,
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
@@ -18422,6 +18620,22 @@
                     active: highlightFirst.value && index === 0 ? true : undefined,
                     onClick: () => select(item, null)
                   });
+                  if (item.raw.type === 'divider') {
+                    return slots.divider?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VDivider, vue.mergeProps(item.props, {
+                      "key": `divider-${index}`
+                    }), null);
+                  }
+                  if (item.raw.type === 'subheader') {
+                    return slots.subheader?.({
+                      props: item.raw,
+                      index
+                    }) ?? vue.createVNode(VListSubheader, vue.mergeProps(item.props, {
+                      "key": `subheader-${index}`
+                    }), null);
+                  }
                   return slots.item?.({
                     item,
                     index,
@@ -20304,6 +20518,7 @@
     color: String,
     disableSort: Boolean,
     fixedHeader: Boolean,
+    lastFixed: Boolean,
     multiSort: Boolean,
     sortAscIcon: {
       type: IconValue,
@@ -20350,10 +20565,11 @@
         loaderClasses
       } = useLoader(props);
       function getFixedStyles(column, y) {
-        if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined;
+        if (!(props.sticky || props.fixedHeader) && !(column.fixed || column.lastFixed)) return undefined;
         return {
           position: 'sticky',
-          left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,
+          left: column.fixed || column.lastFixed ? convertToUnit(column.fixedOffset) : undefined,
+          right: column.lastFixed ? convertToUnit(column.fixedOffset ?? 0) : undefined,
           top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
         };
       }
@@ -20869,11 +21085,18 @@
     }
   });
 
+  // Types
+
   const makeVTableProps = propsFactory({
     fixedHeader: Boolean,
     fixedFooter: Boolean,
     height: [Number, String],
     hover: Boolean,
+    striped: {
+      type: String,
+      default: null,
+      validator: v => ['even', 'odd'].includes(v)
+    },
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
@@ -20900,7 +21123,9 @@
           'v-table--fixed-footer': props.fixedFooter,
           'v-table--has-top': !!slots.top,
           'v-table--has-bottom': !!slots.bottom,
-          'v-table--hover': props.hover
+          'v-table--hover': props.hover,
+          'v-table--striped-even': props.striped === 'even',
+          'v-table--striped-odd': props.striped === 'odd'
         }, themeClasses.value, densityClasses.value, props.class]),
         "style": vue.normalizeStyle(props.style)
       }, {
@@ -22075,7 +22300,8 @@
     firstDayOfWeek: {
       type: [Number, String],
       default: undefined
-    }
+    },
+    weekdayFormat: String
   }, 'calendar');
   function useCalendar(props) {
     const adapter = useDate();
@@ -22316,7 +22542,7 @@
           "ref": daysRef,
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
-        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createElementVNode("div", {
+        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat).map(weekDay => vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
@@ -22825,7 +23051,9 @@
               "max": maxDate.value,
               "year": year.value,
               "allowedMonths": allowedMonths
-            }), null) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
+            }), {
+              ...pick(slots, ['month'])
+            }) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
               "key": "date-picker-years"
             }, datePickerYearsProps, {
               "modelValue": year.value,
@@ -22833,7 +23061,9 @@
               "min": minDate.value,
               "max": maxDate.value,
               "allowedYears": allowedYears
-            }), null) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
+            }), {
+              ...pick(slots, ['year'])
+            }) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
               "key": "date-picker-month"
             }, datePickerMonthProps, {
               "modelValue": model.value,
@@ -22844,7 +23074,9 @@
               "onUpdate:year": [$event => year.value = $event, onUpdateYear],
               "min": minDate.value,
               "max": maxDate.value
-            }), null)]
+            }), {
+              ...pick(slots, ['day'])
+            })]
           })]),
           actions: slots.actions
         });
@@ -23935,6 +24167,9 @@
           startStatus.value = status;
         } else if (side === 'end') {
           endStatus.value = status;
+        } else if (side === 'both') {
+          startStatus.value = status;
+          endStatus.value = status;
         }
       }
       function getStatus(side) {
@@ -24046,6 +24281,32 @@
           }, [renderSide('end', endStatus.value)])]
         });
       });
+      function reset(side) {
+        const effectiveSide = side ?? props.side;
+        setStatus(effectiveSide, 'ok');
+        vue.nextTick(() => {
+          setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+          if (props.mode !== 'manual') {
+            vue.nextTick(() => {
+              window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                  window.requestAnimationFrame(() => {
+                    if (effectiveSide === 'both') {
+                      intersecting('start');
+                      intersecting('end');
+                    } else {
+                      intersecting(effectiveSide);
+                    }
+                  });
+                });
+              });
+            });
+          }
+        });
+      }
+      return {
+        reset
+      };
     }
   });
 
@@ -24125,8 +24386,47 @@
     }
   });
 
-  // Styles
-  const VKbd = createSimpleFunctional('v-kbd', 'kbd');
+  const makeVKbdProps = propsFactory({
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'kbd'
+    }),
+    ...makeThemeProps(),
+    ...makeElevationProps(),
+    color: String
+  }, 'VKbd');
+  const VKbd = genericComponent()({
+    name: 'VKbd',
+    props: makeVKbdProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        borderClasses
+      } = useBorder(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(() => props.color);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      useRender(() => vue.createVNode(props.tag, {
+        "class": vue.normalizeClass(['v-kbd', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
+      }, slots));
+      return {};
+    }
+  });
 
   const makeVLayoutProps = propsFactory({
     ...makeComponentProps(),
@@ -24964,6 +25264,14 @@
       type: Number,
       default: 0
     },
+    minFractionDigits: {
+      type: Number,
+      default: null
+    },
+    decimalSeparator: {
+      type: String,
+      validator: v => !v || v.length === 1
+    },
     ...omit(makeVTextFieldProps(), ['modelValue', 'validationValue'])
   }, 'VNumberInput');
   const VNumberInput = genericComponent()({
@@ -24989,11 +25297,24 @@
       const form = useForm(props);
       const controlsDisabled = vue.computed(() => form.isDisabled.value || form.isReadonly.value);
       const isFocused = vue.shallowRef(props.focused);
+      const {
+        decimalSeparator: decimalSeparatorFromLocale
+      } = useLocale();
+      const decimalSeparator = vue.computed(() => props.decimalSeparator?.[0] || decimalSeparatorFromLocale.value);
       function correctPrecision(val) {
         let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
+        let trim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
         const fixed = precision == null ? String(val) : val.toFixed(precision);
-        return isFocused.value ? Number(fixed).toString() // trim zeros
-        : fixed;
+        if (isFocused.value && trim) {
+          return Number(fixed).toString() // trim zeros
+          .replace('.', decimalSeparator.value);
+        }
+        if (props.minFractionDigits === null || precision !== null && precision < props.minFractionDigits) {
+          return fixed.replace('.', decimalSeparator.value);
+        }
+        let [baseDigits, fractionDigits] = fixed.split('.');
+        fractionDigits = (fractionDigits ?? '').padEnd(props.minFractionDigits, '0').replace(new RegExp(`(?<=\\d{${props.minFractionDigits}})0`, 'g'), '');
+        return [baseDigits, fractionDigits].filter(Boolean).join(decimalSeparator.value);
       }
       const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(Number(val), props.min, props.max));
       const _inputText = vue.shallowRef(null);
@@ -25010,8 +25331,11 @@
           if (val === null || val === '') {
             model.value = null;
             _inputText.value = null;
-          } else if (!isNaN(Number(val)) && Number(val) <= props.max && Number(val) >= props.min) {
-            model.value = Number(val);
+            return;
+          }
+          const parsedValue = Number(val.replace(decimalSeparator.value, '.'));
+          if (!isNaN(parsedValue) && parsedValue <= props.max && parsedValue >= props.min) {
+            model.value = parsedValue;
             _inputText.value = val;
           }
         }
@@ -25048,6 +25372,7 @@
         }
       };
       vue.watch(() => props.precision, () => formatInputValue());
+      vue.watch(() => props.minFractionDigits, () => formatInputValue());
       vue.onMounted(() => {
         clampModel();
       });
@@ -25081,24 +25406,24 @@
           selectionEnd
         } = inputElement ?? {};
         const potentialNewInputVal = existingTxt ? existingTxt.slice(0, selectionStart) + e.data + existingTxt.slice(selectionEnd) : e.data;
-        const potentialNewNumber = extractNumber(potentialNewInputVal, props.precision);
+        const potentialNewNumber = extractNumber(potentialNewInputVal, props.precision, decimalSeparator.value);
 
-        // Only numbers, "-", "." are allowed
-        // AND "-", "." are allowed only once
-        // AND "-" is only allowed at the start
-        if (!/^-?(\d+(\.\d*)?|(\.\d+)|\d*|\.)$/.test(potentialNewInputVal)) {
+        // Allow only numbers, "-" and {decimal separator}
+        // Allow "-" and {decimal separator} only once
+        // Allow "-" only at the start
+        if (!new RegExp(`^-?\\d*${escapeForRegex(decimalSeparator.value)}?\\d*$`).test(potentialNewInputVal)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
         if (props.precision == null) return;
 
         // Ignore decimal digits above precision limit
-        if (potentialNewInputVal.split('.')[1]?.length > props.precision) {
+        if (potentialNewInputVal.split(decimalSeparator.value)[1]?.length > props.precision) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
         // Ignore decimal separator when precision = 0
-        if (props.precision === 0 && potentialNewInputVal.includes('.')) {
+        if (props.precision === 0 && potentialNewInputVal.includes(decimalSeparator.value)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
@@ -25150,19 +25475,16 @@
         if (controlsDisabled.value) return;
         if (!vTextFieldRef.value) return;
         const actualText = vTextFieldRef.value.value;
-        if (actualText && !isNaN(Number(actualText))) {
-          inputText.value = correctPrecision(clamp(Number(actualText), props.min, props.max));
+        const parsedValue = Number(actualText.replace(decimalSeparator.value, '.'));
+        if (actualText && !isNaN(parsedValue)) {
+          inputText.value = correctPrecision(clamp(parsedValue, props.min, props.max));
         } else {
           inputText.value = null;
         }
       }
       function formatInputValue() {
         if (controlsDisabled.value) return;
-        if (model.value === null || isNaN(model.value)) {
-          inputText.value = null;
-          return;
-        }
-        inputText.value = props.precision == null ? String(model.value) : model.value.toFixed(props.precision);
+        inputText.value = model.value !== null && !isNaN(model.value) ? correctPrecision(model.value, props.precision, false) : null;
       }
       function trimDecimalZeros() {
         if (controlsDisabled.value) return;
@@ -25170,7 +25492,7 @@
           inputText.value = null;
           return;
         }
-        inputText.value = model.value.toString();
+        inputText.value = model.value.toString().replace('.', decimalSeparator.value);
       }
       function onFocus() {
         trimDecimalZeros();
@@ -25372,6 +25694,21 @@
       const contentRef = vue.ref();
       const inputRef = vue.ref([]);
       const current = vue.computed(() => inputRef.value[focusIndex.value]);
+      const intersectScope = vue.effectScope();
+      intersectScope.run(() => {
+        const {
+          intersectionRef,
+          isIntersecting
+        } = useIntersectionObserver();
+        vue.watch(isIntersecting, v => {
+          if (!v) return;
+          intersectionRef.value?.focus();
+          intersectScope.stop();
+        });
+        vue.watchEffect(() => {
+          intersectionRef.value = inputRef.value[0];
+        });
+      });
       function onInput() {
         // The maxlength attribute doesn't work for the number type input, so the text type is used.
         // The following logic simulates the behavior of a number input.
@@ -25422,9 +25759,10 @@
         e.preventDefault();
         e.stopPropagation();
         const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
+        const finalIndex = clipboardText.length - 1 === -1 ? index : clipboardText.length - 1;
         if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
-        inputRef.value?.[index].blur();
+        inputRef.value?.[finalIndex].focus();
       }
       function reset() {
         model.value = [];
@@ -28118,6 +28456,9 @@
         focus,
         blur
       } = useFocus(props);
+      const {
+        onIntersect
+      } = useAutofocus(props);
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value || '').toString().length;
       });
@@ -28126,10 +28467,6 @@
         if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
         return props.counter;
       });
-      function onIntersect(isIntersecting, entries) {
-        if (!props.autofocus || !isIntersecting) return;
-        entries[0].target?.focus?.();
-      }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const controlHeight = vue.shallowRef('');
@@ -30125,11 +30462,6 @@
     hideOverlay: Boolean,
     icon: [String, Function, Object],
     iconColor: String,
-    iconSize: [Number, String],
-    iconSizes: {
-      type: Array,
-      default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
-    },
     loading: Boolean,
     opacity: [Number, String],
     readonly: Boolean,
@@ -30149,6 +30481,7 @@
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeElevationProps(),
+    ...makeIconSizeProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
       tag: 'button'
@@ -30203,7 +30536,6 @@
         })()
       }));
       const btnSizeMap = new Map(props.sizes);
-      const iconSizeMap = new Map(props.iconSizes);
       function onClick() {
         if (props.disabled || props.readonly || isActive.value === undefined || props.tag === 'a' && attrs.href) return;
         isActive.value = !isActive.value;
@@ -30215,12 +30547,12 @@
         const btnSize = hasNamedSize ? btnSizeMap.get(_btnSize) : _btnSize;
         const btnHeight = props.height ?? btnSize;
         const btnWidth = props.width ?? btnSize;
-        const _iconSize = props.iconSize;
-        const hasNamedIconSize = iconSizeMap.has(_iconSize);
-        const iconSize = !_iconSize ? hasNamedSize ? iconSizeMap.get(_btnSize) : iconSizeMap.get('default') : hasNamedIconSize ? iconSizeMap.get(_iconSize) : _iconSize;
+        const {
+          iconSize
+        } = useIconSizes(props, () => new Map(props.iconSizes).get(_btnSize));
         const iconProps = {
           icon,
-          size: iconSize,
+          size: iconSize.value,
           iconColor: props.iconColor,
           opacity: props.opacity
         };
@@ -30263,7 +30595,7 @@
             "color": typeof props.loading === 'boolean' ? undefined : props.loading,
             "indeterminate": "disable-shrink",
             "width": "2",
-            "size": iconSize
+            "size": iconSize.value
           }, null)])]
         });
       });
@@ -30271,6 +30603,251 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
+  const makeMaskProps = propsFactory({
+    mask: [String, Object],
+    returnMaskedValue: Boolean
+  }, 'mask');
+  const defaultDelimiters = /[-!$%^&*()_+|~=`{}[\]:";'<>?,./\\ ]/;
+  const presets = {
+    'credit-card': '#### - #### - #### - ####',
+    date: '##/##/####',
+    'date-time': '##/##/#### ##:##',
+    'iso-date': '####-##-##',
+    'iso-date-time': '####-##-## ##:##',
+    phone: '(###) ### - ####',
+    social: '###-##-####',
+    time: '##:##',
+    'time-with-seconds': '##:##:##'
+  };
+  function isMaskDelimiter(char) {
+    return char ? defaultDelimiters.test(char) : false;
+  }
+  const defaultTokens = {
+    '#': {
+      pattern: /[0-9]/
+    },
+    A: {
+      pattern: /[A-Z]/i,
+      convert: v => v.toUpperCase()
+    },
+    a: {
+      pattern: /[a-z]/i,
+      convert: v => v.toLowerCase()
+    },
+    N: {
+      pattern: /[0-9A-Z]/i,
+      convert: v => v.toUpperCase()
+    },
+    n: {
+      pattern: /[0-9a-z]/i,
+      convert: v => v.toLowerCase()
+    },
+    X: {
+      pattern: defaultDelimiters
+    }
+  };
+  function useMask(props, inputRef) {
+    const mask = vue.computed(() => {
+      if (typeof props.mask === 'string') {
+        if (props.mask in presets) return presets[props.mask];
+        return props.mask;
+      }
+      return props.mask?.mask ?? '';
+    });
+    const tokens = vue.computed(() => {
+      return {
+        ...defaultTokens,
+        ...(isObject(props.mask) ? props.mask.tokens : null)
+      };
+    });
+    const selection = vue.shallowRef(0);
+    const lazySelection = vue.shallowRef(0);
+    function isMask(char) {
+      return char in tokens.value;
+    }
+    function maskValidates(mask, char) {
+      if (char == null || !isMask(mask)) return false;
+      const item = tokens.value[mask];
+      if (item.pattern) return item.pattern.test(char);
+      return item.test(char);
+    }
+    function convert(mask, char) {
+      const item = tokens.value[mask];
+      return item.convert ? item.convert(char) : char;
+    }
+    function maskText(text) {
+      const trimmedText = text?.trim().replace(/\s+/g, ' ');
+      if (trimmedText == null) return '';
+      if (!mask.value.length || !trimmedText.length) return trimmedText;
+      let textIndex = 0;
+      let maskIndex = 0;
+      let newText = '';
+      while (maskIndex < mask.value.length) {
+        const mchar = mask.value[maskIndex];
+        const tchar = trimmedText[textIndex];
+
+        // Escaped character in mask, the next mask character is inserted
+        if (mchar === '\\') {
+          newText += mask.value[maskIndex + 1];
+          maskIndex += 2;
+          continue;
+        }
+        if (!isMask(mchar)) {
+          newText += mchar;
+          if (tchar === mchar) {
+            textIndex++;
+          }
+        } else if (maskValidates(mchar, tchar)) {
+          newText += convert(mchar, tchar);
+          textIndex++;
+        } else {
+          break;
+        }
+        maskIndex++;
+      }
+      return newText;
+    }
+    function unmaskText(text) {
+      if (text == null) return null;
+      if (!mask.value.length || !text.length) return text;
+      let textIndex = 0;
+      let maskIndex = 0;
+      let newText = '';
+      while (true) {
+        const mchar = mask.value[maskIndex];
+        const tchar = text[textIndex];
+        if (tchar == null) break;
+        if (mchar == null) {
+          newText += tchar;
+          textIndex++;
+          continue;
+        }
+
+        // Escaped character in mask, skip the next input character
+        if (mchar === '\\') {
+          if (tchar === mask.value[maskIndex + 1]) {
+            textIndex++;
+          }
+          maskIndex += 2;
+          continue;
+        }
+        if (maskValidates(mchar, tchar)) {
+          // masked char
+          newText += tchar;
+          textIndex++;
+          maskIndex++;
+          continue;
+        } else if (mchar !== tchar) {
+          // input doesn't match mask, skip forward until it does
+          while (true) {
+            const mchar = mask.value[maskIndex++];
+            if (mchar == null || maskValidates(mchar, tchar)) break;
+          }
+          continue;
+        }
+        textIndex++;
+        maskIndex++;
+      }
+      return newText;
+    }
+    function setCaretPosition(newSelection) {
+      selection.value = newSelection;
+      inputRef.value && inputRef.value.setSelectionRange(selection.value, selection.value);
+    }
+    function resetSelections() {
+      if (!inputRef.value?.selectionEnd) return;
+      selection.value = inputRef.value.selectionEnd;
+      lazySelection.value = 0;
+      for (let index = 0; index < selection.value; index++) {
+        isMaskDelimiter(inputRef.value.value[index]) || lazySelection.value++;
+      }
+    }
+    function updateRange() {
+      if (!inputRef.value) return;
+      resetSelections();
+      let selection = 0;
+      const newValue = inputRef.value.value;
+      if (newValue) {
+        for (let index = 0; index < newValue.length; index++) {
+          if (lazySelection.value <= 0) break;
+          isMaskDelimiter(newValue[index]) || lazySelection.value--;
+          selection++;
+        }
+      }
+      setCaretPosition(selection);
+    }
+    return {
+      updateRange,
+      maskText,
+      unmaskText
+    };
+  }
+
+  // Types
+
+  const makeVMaskInputProps = propsFactory({
+    ...makeVTextFieldProps(),
+    ...makeMaskProps()
+  }, 'VMaskInput');
+  const VMaskInput = genericComponent()({
+    name: 'VMaskInput',
+    props: makeVMaskInputProps(),
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        slots,
+        emit
+      } = _ref;
+      const vTextFieldRef = vue.ref();
+      const {
+        maskText,
+        updateRange,
+        unmaskText
+      } = useMask(props, vTextFieldRef);
+      const returnMaskedValue = vue.computed(() => props.mask && props.returnMaskedValue);
+      const model = useProxiedModel(props, 'modelValue', undefined,
+      // Always display masked value in input when mask is applied
+      val => props.mask ? maskText(unmaskText(val)) : val, val => {
+        if (props.mask) {
+          const valueBeforeChange = unmaskText(model.value);
+          // E.g. mask is #-# and the input value is '2-23'
+          // model-value should be enforced to '2-2'
+          const enforcedMaskedValue = maskText(unmaskText(val));
+          const newUnmaskedValue = unmaskText(enforcedMaskedValue);
+          if (newUnmaskedValue === valueBeforeChange) {
+            vTextFieldRef.value.value = enforcedMaskedValue;
+          }
+          val = newUnmaskedValue;
+          updateRange();
+          return returnMaskedValue.value ? maskText(val) : val;
+        }
+        return val;
+      });
+      vue.onBeforeMount(() => {
+        if (props.returnMaskedValue) {
+          emit('update:modelValue', model.value);
+        }
+      });
+      useRender(() => {
+        const textFieldProps = VTextField.filterProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
+          "ref": vTextFieldRef
+        }), {
+          ...slots
+        });
+      });
+      return forwardRefs({}, vTextFieldRef);
+    }
+  });
+
   // Types
 
   const makeVStepperVerticalActionsProps = propsFactory({
@@ -31342,6 +31919,7 @@
       }
       function onClickAction(e) {
         e.preventDefault();
+        e.stopPropagation();
         emit('toggleExpand', e);
       }
       useRender(() => {
@@ -31412,6 +31990,11 @@
     selectable: Boolean,
     selectedColor: String,
     selectStrategy: [String, Function, Object],
+    index: Number,
+    path: {
+      type: Array,
+      default: () => []
+    },
     ...makeDensityProps()
   }, 'VTreeviewChildren');
   const VTreeviewChildren = genericComponent()({
@@ -31439,12 +32022,19 @@
           select(!isSelected);
         }
       }
-      return () => slots.default?.() ?? props.items?.map(item => {
+      return () => slots.default?.() ?? props.items?.map((item, index) => {
         const {
           children,
           props: itemProps
         } = item;
         const loading = isLoading.has(item.value);
+        const treeItemProps = {
+          index,
+          depth: props.path?.length ?? 0,
+          isFirst: index === 0,
+          isLast: props.items ? props.items.length - 1 === index : false,
+          path: [...props.path, index]
+        };
         const slotsWithItem = {
           prepend: slotProps => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.createVNode(VCheckboxBtn, {
             "key": item.value,
@@ -31465,11 +32055,13 @@
             }
           }, null)]), slots.prepend?.({
             ...slotProps,
+            ...treeItemProps,
             item: item.raw,
             internalItem: item
           })]),
           append: slots.append ? slotProps => slots.append?.({
             ...slotProps,
+            ...treeItemProps,
             item: item.raw,
             internalItem: item
           }) : undefined,
@@ -31485,9 +32077,13 @@
           }) : undefined
         };
         const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
-        const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+        const treeviewChildrenProps = VTreeviewChildren.filterProps({
+          ...props,
+          ...treeItemProps
+        });
         return children ? vue.createVNode(VTreeviewGroup, vue.mergeProps(treeviewGroupProps, {
-          "value": props.returnObject ? item.raw : treeviewGroupProps?.value
+          "value": props.returnObject ? item.raw : treeviewGroupProps?.value,
+          "rawId": treeviewGroupProps?.value
         }), {
           activator: _ref2 => {
             let {
@@ -31535,7 +32131,7 @@
     ...makeFilterProps({
       filterKeys: ['title']
     }),
-    ...makeVTreeviewChildrenProps(),
+    ...omit(makeVTreeviewChildrenProps(), ['index', 'path']),
     ...omit(makeVListProps({
       collapseIcon: '$treeviewCollapse',
       expandIcon: '$treeviewExpand',
@@ -31778,6 +32374,7 @@
     VListSubheader: VListSubheader,
     VLocaleProvider: VLocaleProvider,
     VMain: VMain,
+    VMaskInput: VMaskInput,
     VMenu: VMenu,
     VMessages: VMessages,
     VNavigationDrawer: VNavigationDrawer,
@@ -32175,7 +32772,7 @@
       };
     });
   }
-  const version$1 = "3.8.9-master.2025-06-14";
+  const version$1 = "3.8.10-dev.2025-06-18";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -32473,7 +33070,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.9-master.2025-06-14";
+  const version = "3.8.10-dev.2025-06-18";
 
   /* eslint-disable local-rules/sort-imports */