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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.8.9-master.2025-06-17
+* Vuetify v3.8.10-dev.2025-06-18
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -81,6 +81,7 @@ const IN_BROWSER = typeof window !== 'undefined';
 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"); }
@@ -587,18 +588,23 @@ function checkPrintable(e) {
 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;
 }
@@ -940,7 +946,7 @@ function APCAcontrast(text, background) {
     // 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;
 }
@@ -2181,6 +2187,10 @@ function createNumberFunction(current, fallback) {
     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);
 
@@ -2203,6 +2213,7 @@ function createProvideFunction(state) {
       current,
       fallback,
       messages,
+      decimalSeparator: toRef(() => inferDecimalSeparator(current, fallback)),
       t: createTranslateFunction(current, fallback, messages),
       n: createNumberFunction(current, fallback),
       provide: createProvideFunction({
@@ -2225,6 +2236,7 @@ function createVuetifyAdapter(options) {
     current,
     fallback,
     messages,
+    decimalSeparator: toRef(() => options?.decimalSeparator ?? inferDecimalSeparator(current, fallback)),
     t: createTranslateFunction(current, fallback, messages),
     n: createNumberFunction(current, fallback),
     provide: createProvideFunction({
@@ -2351,6 +2363,7 @@ const makeThemeProps = propsFactory({
 function genDefaults$2() {
   return {
     defaultTheme: 'light',
+    prefix: 'v-',
     variations: {
       colors: [],
       lighten: 0,
@@ -2388,8 +2401,8 @@ function genDefaults$2() {
           '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'
         }
@@ -2425,14 +2438,17 @@ function genDefaults$2() {
           '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() {
@@ -2455,21 +2471,21 @@ function parseThemeOptions() {
 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;
 }
@@ -2513,7 +2529,8 @@ function getScopedSelector(selector, scope) {
   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;
 }
@@ -2533,8 +2550,17 @@ function getOrCreateStyleElement(id, cspNonce) {
 // Composables
 function createTheme(options) {
   const parsedOptions = parseThemeOptions(options);
-  const name = shallowRef(parsedOptions.defaultTheme);
+  const _name = shallowRef(parsedOptions.defaultTheme);
   const themes = ref(parsedOptions.themes);
+  const systemName = shallowRef('light');
+  const name = computed({
+    get() {
+      return _name.value === 'system' ? systemName.value : _name.value;
+    },
+    set(val) {
+      _name.value = val;
+    }
+  });
   const computedThemes = computed(() => {
     const acc = {};
     for (const [name, original] of Object.entries(themes.value)) {
@@ -2555,28 +2581,49 @@ function createTheme(options) {
   const current = toRef(() => computedThemes.value[name.value]);
   const styles = 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 = toRef(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
+  const themeNames = 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 (getCurrentScope()) {
+      onScopeDispose(() => {
+        media.removeEventListener('change', updateSystemName);
+      });
+    }
+  }
   function install(app) {
     if (parsedOptions.isDisabled) return;
     const head = app._context.provides.usehead;
@@ -2614,22 +2661,55 @@ function createTheme(options) {
         updateStyles();
       }
       function updateStyles() {
-        upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
+        upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
       }
     }
   }
-  const themeClasses = 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
     }
   };
@@ -2640,7 +2720,7 @@ function provideTheme(props) {
   if (!theme) throw new Error('Could not find Vuetify theme injection');
   const name = toRef(() => props.theme ?? theme.name.value);
   const current = toRef(() => theme.themes.value[name.value]);
-  const themeClasses = toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+  const themeClasses = toRef(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
   const newTheme = {
     ...theme,
     name,
@@ -3744,7 +3824,10 @@ const makeVToolbarProps = propsFactory({
     default: 'default',
     validator: v => allowedDensities$1.includes(v)
   },
-  extended: Boolean,
+  extended: {
+    type: Boolean,
+    default: null
+  },
   extensionHeight: {
     type: [Number, String],
     default: 48
@@ -3792,7 +3875,7 @@ const VToolbar = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const isExtended = shallowRef(!!(props.extended || slots.extension?.()));
+    const isExtended = shallowRef(props.extended === null ? !!slots.extension?.() : props.extended);
     const contentHeight = 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 = 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({
@@ -3804,7 +3887,7 @@ const VToolbar = genericComponent()({
       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 createVNode(props.tag, {
         "class": normalizeClass(['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -4187,9 +4270,15 @@ function useVariant(props) {
   };
 }
 
+// Types
+
 const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -4223,7 +4312,7 @@ const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: 'auto',
+        height: toRef(() => props.direction === 'horizontal' ? 'auto' : null),
         baseColor: toRef(() => props.baseColor),
         color: toRef(() => props.color),
         density: toRef(() => props.density),
@@ -4233,7 +4322,7 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": normalizeClass(['v-btn-group', {
+        "class": 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": normalizeStyle(props.style)
@@ -5566,8 +5655,8 @@ function rippleCancelShow(e) {
   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);
   }
@@ -5595,9 +5684,12 @@ function updateRipple(el, binding, wasEnabled) {
   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, {
@@ -5619,7 +5711,7 @@ function updateRipple(el, binding, wasEnabled) {
     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);
 
@@ -5639,7 +5731,9 @@ function removeListeners(el) {
   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);
@@ -5648,8 +5742,8 @@ function mounted$4(el, binding) {
   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) {
@@ -5922,6 +6016,31 @@ const VAppBarTitle = genericComponent()({
 // 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 = 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'];
@@ -5961,6 +6080,7 @@ const makeVAlertProps = propsFactory({
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
+  ...makeIconSizeProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
   ...makeRoundedProps(),
@@ -5988,6 +6108,9 @@ const VAlert = genericComponent()({
       if (!props.type) return props.icon;
       return props.icon ?? `$${props.type}`;
     });
+    const {
+      iconSize
+    } = useIconSizes(props, () => props.prominent ? 44 : 28);
     const {
       themeClasses
     } = provideTheme(props);
@@ -6035,6 +6158,11 @@ const VAlert = genericComponent()({
       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 && createVNode(props.tag, {
         "class": normalizeClass(['v-alert', props.border && {
           'v-alert--border': !!props.border,
@@ -6052,19 +6180,14 @@ const VAlert = genericComponent()({
         }, null), hasPrepend && createElementVNode("div", {
           "key": "prepend",
           "class": "v-alert__prepend"
-        }, [!slots.prepend ? createVNode(VIcon, {
-          "key": "prepend-icon",
-          "density": props.density,
-          "icon": icon.value,
-          "size": props.prominent ? 44 : 28
-        }, null) : createVNode(VDefaultsProvider, {
+        }, [!slots.prepend ? createVNode(VIcon, mergeProps({
+          "key": "prepend-icon"
+        }, iconProps), null) : createVNode(VDefaultsProvider, {
           "key": "prepend-defaults",
           "disabled": !icon.value,
           "defaults": {
             VIcon: {
-              density: props.density,
-              icon: icon.value,
-              size: props.prominent ? 44 : 28
+              ...iconProps
             }
           }
         }, slots.prepend)]), createElementVNode("div", {
@@ -7589,6 +7712,7 @@ function getOffsetPosition(isHorizontal, element) {
 const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
 const makeVSlideGroupProps = propsFactory({
   centerActive: Boolean,
+  contentClass: null,
   direction: {
     type: String,
     default: 'horizontal'
@@ -7901,7 +8025,7 @@ const VSlideGroup = genericComponent()({
       })]), createElementVNode("div", {
         "key": "container",
         "ref": containerRef,
-        "class": "v-slide-group__container",
+        "class": normalizeClass(['v-slide-group__container', props.contentClass]),
         "onScroll": onScroll
       }, [createElementVNode("div", {
         "ref": contentRef,
@@ -8264,16 +8388,85 @@ const VChip = genericComponent()({
   }
 });
 
+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 = 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 = createElementVNode("hr", {
+        "class": normalizeClass([{
+          'v-divider': true,
+          'v-divider--inset': props.inset,
+          'v-divider--vertical': props.vertical
+        }, themeClasses.value, textColorClasses.value, props.class]),
+        "style": 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 createElementVNode("div", {
+        "class": normalizeClass(['v-divider__wrapper', {
+          'v-divider__wrapper--vertical': props.vertical,
+          'v-divider__wrapper--inset': props.inset
+        }])
+      }, [divider, 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 = inject$1(ListKey, {
+    filterable: false,
     hasPrepend: shallowRef(false),
     updateHasPrepend: () => null
   });
   const data = {
+    filterable: parent.filterable || filterable,
     hasPrepend: shallowRef(false),
     updateHasPrepend: value => {
       if (value) data.hasPrepend.value = value;
@@ -8982,6 +9175,7 @@ const makeVListGroupProps = propsFactory({
     type: IconValue,
     default: '$expand'
   },
+  rawId: [String, Number],
   prependIcon: IconValue,
   appendIcon: IconValue,
   fluid: Boolean,
@@ -9003,13 +9197,12 @@ const VListGroup = genericComponent()({
       open,
       id: _id
     } = useNestedItem(() => props.value, true);
-    const id = computed(() => `v-list-group--id-${String(_id.value)}`);
+    const id = 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);
     }
@@ -9225,6 +9418,9 @@ const VListItem = genericComponent()({
       roundedClasses
     } = useRounded(roundedProps);
     const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+    const rippleOptions = toRef(() => props.ripple !== undefined && !!props.ripple && list?.filterable ? {
+      keys: [keyCodes.enter]
+    } : props.ripple);
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
@@ -9249,8 +9445,9 @@ const VListItem = genericComponent()({
     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));
       }
     }
@@ -9360,7 +9557,7 @@ const VListItem = genericComponent()({
         }), createElementVNode("div", {
           "class": "v-list-item__spacer"
         }, null)])]
-      }), [[Ripple, isClickable.value && props.ripple]]);
+      }), [[Ripple, isClickable.value && rippleOptions.value]]);
     });
     return {
       activate,
@@ -9415,68 +9612,6 @@ const VListSubheader = genericComponent()({
   }
 });
 
-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 = 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 = createElementVNode("hr", {
-        "class": normalizeClass([{
-          'v-divider': true,
-          'v-divider--inset': props.inset,
-          'v-divider--vertical': props.vertical
-        }, themeClasses.value, textColorClasses.value, props.class]),
-        "style": 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 createElementVNode("div", {
-        "class": normalizeClass(['v-divider__wrapper', {
-          'v-divider__wrapper--vertical': props.vertical,
-          'v-divider__wrapper--inset': props.inset
-        }])
-      }, [divider, createElementVNode("div", {
-        "class": "v-divider__content"
-      }, [slots.default()]), divider]);
-    });
-    return {};
-  }
-});
-
 // Types
 
 const makeVListChildrenProps = propsFactory({
@@ -9527,9 +9662,10 @@ const VListChildren = genericComponent()({
         }) : undefined
       };
       const listGroupProps = VListGroup.filterProps(itemProps);
-      return children ? createVNode(VListGroup, mergeProps({
-        "value": itemProps?.value
-      }, listGroupProps), {
+      return children ? createVNode(VListGroup, mergeProps(listGroupProps, {
+        "value": props.returnObject ? item : itemProps?.value,
+        "rawId": itemProps?.value
+      }), {
         activator: _ref3 => {
           let {
             props: activatorProps
@@ -9745,6 +9881,7 @@ const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
+  filterable: Boolean,
   expandIcon: IconValue,
   collapseIcon: IconValue,
   lines: {
@@ -9828,7 +9965,9 @@ const VList = genericComponent()({
     const activeColor = toRef(() => props.activeColor);
     const baseColor = toRef(() => props.baseColor);
     const color = toRef(() => props.color);
-    createList();
+    createList({
+      filterable: props.filterable
+    });
     provideDefaults({
       VListGroup: {
         activeColor,
@@ -11511,6 +11650,7 @@ const makeVMenuProps = propsFactory({
   // disableKeys: Boolean,
   id: String,
   submenu: Boolean,
+  disableInitialFocus: Boolean,
   ...omit(makeVOverlayProps({
     closeDelay: 250,
     closeOnContentClick: true,
@@ -11585,7 +11725,7 @@ const VMenu = genericComponent()({
     watch(isActive, val => {
       if (val) {
         parent?.register();
-        if (IN_BROWSER) {
+        if (IN_BROWSER && !props.disableInitialFocus) {
           document.addEventListener('focusin', onFocusIn, {
             once: true
           });
@@ -12422,7 +12562,12 @@ function useVirtual(props, items) {
   }
   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);
@@ -12776,6 +12921,7 @@ const makeSelectProps = propsFactory({
   },
   openOnClear: Boolean,
   itemColor: String,
+  noAutoScroll: Boolean,
   ...makeItemsProps({
     itemChildren: false
   })
@@ -12990,7 +13136,7 @@ const VSelect = genericComponent()({
     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);
         });
       }
@@ -13083,6 +13229,22 @@ const VSelect = genericComponent()({
                   key: item.value,
                   onClick: () => select(item, null)
                 });
+                if (item.raw.type === 'divider') {
+                  return slots.divider?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VDivider, mergeProps(item.props, {
+                    "key": `divider-${index}`
+                  }), null);
+                }
+                if (item.raw.type === 'subheader') {
+                  return slots.subheader?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VListSubheader, mergeProps(item.props, {
+                    "key": `subheader-${index}`
+                  }), null);
+                }
                 return slots.item?.({
                   item,
                   index,
@@ -13243,6 +13405,9 @@ function filterItems(items, query, options) {
     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);
@@ -13445,7 +13610,7 @@ const VAutocomplete = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus();
       }
     }
@@ -13650,6 +13815,7 @@ const VAutocomplete = genericComponent()({
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
             "ref": listRef,
+            "filterable": true,
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
@@ -13681,6 +13847,22 @@ const VAutocomplete = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
+                if (item.raw.type === 'divider') {
+                  return slots.divider?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VDivider, mergeProps(item.props, {
+                    "key": `divider-${index}`
+                  }), null);
+                }
+                if (item.raw.type === 'subheader') {
+                  return slots.subheader?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VListSubheader, mergeProps(item.props, {
+                    "key": `subheader-${index}`
+                  }), null);
+                }
                 return slots.item?.({
                   item,
                   index,
@@ -13825,7 +14007,8 @@ const makeVBadgeProps = propsFactory({
   ...makeThemeProps(),
   ...makeTransitionProps({
     transition: 'scale-rotate-transition'
-  })
+  }),
+  ...makeDimensionProps()
 }, 'VBadge');
 const VBadge = genericComponent()({
   name: 'VBadge',
@@ -13855,6 +14038,9 @@ const VBadge = genericComponent()({
       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}+`;
@@ -13876,7 +14062,7 @@ const VBadge = genericComponent()({
         }, {
           default: () => [withDirectives(createElementVNode("span", 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",
@@ -17285,13 +17471,13 @@ function date(value) {
   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);
   });
 }
@@ -17755,9 +17941,9 @@ class VuetifyDateAdapter {
   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);
@@ -18112,6 +18298,7 @@ const VCombobox = genericComponent()({
         _search.value = val ?? '';
         if (!props.multiple && !hasSelectionSlot.value) {
           model.value = [transformItem$3(props, val)];
+          nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
         }
         if (val && props.multiple && props.delimiters?.length) {
           const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
@@ -18192,7 +18379,7 @@ const VCombobox = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus();
       }
     }
@@ -18397,6 +18584,7 @@ const VCombobox = genericComponent()({
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
             "ref": listRef,
+            "filterable": true,
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
@@ -18428,6 +18616,22 @@ const VCombobox = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
+                if (item.raw.type === 'divider') {
+                  return slots.divider?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VDivider, mergeProps(item.props, {
+                    "key": `divider-${index}`
+                  }), null);
+                }
+                if (item.raw.type === 'subheader') {
+                  return slots.subheader?.({
+                    props: item.raw,
+                    index
+                  }) ?? createVNode(VListSubheader, mergeProps(item.props, {
+                    "key": `subheader-${index}`
+                  }), null);
+                }
                 return slots.item?.({
                   item,
                   index,
@@ -20310,6 +20514,7 @@ const makeVDataTableHeadersProps = propsFactory({
   color: String,
   disableSort: Boolean,
   fixedHeader: Boolean,
+  lastFixed: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -20356,10 +20561,11 @@ const VDataTableHeaders = genericComponent()({
       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
       };
     }
@@ -20875,11 +21081,18 @@ const VDataTableRows = genericComponent()({
   }
 });
 
+// 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(),
@@ -20906,7 +21119,9 @@ const VTable = genericComponent()({
         '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": normalizeStyle(props.style)
     }, {
@@ -22081,7 +22296,8 @@ const makeCalendarProps = propsFactory({
   firstDayOfWeek: {
     type: [Number, String],
     default: undefined
-  }
+  },
+  weekdayFormat: String
 }, 'calendar');
 function useCalendar(props) {
   const adapter = useDate();
@@ -22322,7 +22538,7 @@ const VDatePickerMonth = genericComponent()({
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createElementVNode("div", {
+      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat).map(weekDay => createElementVNode("div", {
         "class": normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -22831,7 +23047,9 @@ const VDatePicker = genericComponent()({
             "max": maxDate.value,
             "year": year.value,
             "allowedMonths": allowedMonths
-          }), null) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
+          }), {
+            ...pick(slots, ['month'])
+          }) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
             "key": "date-picker-years"
           }, datePickerYearsProps, {
             "modelValue": year.value,
@@ -22839,7 +23057,9 @@ const VDatePicker = genericComponent()({
             "min": minDate.value,
             "max": maxDate.value,
             "allowedYears": allowedYears
-          }), null) : createVNode(VDatePickerMonth, mergeProps({
+          }), {
+            ...pick(slots, ['year'])
+          }) : createVNode(VDatePickerMonth, mergeProps({
             "key": "date-picker-month"
           }, datePickerMonthProps, {
             "modelValue": model.value,
@@ -22850,7 +23070,9 @@ const VDatePicker = genericComponent()({
             "onUpdate:year": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
-          }), null)]
+          }), {
+            ...pick(slots, ['day'])
+          })]
         })]),
         actions: slots.actions
       });
@@ -23941,6 +24163,9 @@ const VInfiniteScroll = genericComponent()({
         startStatus.value = status;
       } else if (side === 'end') {
         endStatus.value = status;
+      } else if (side === 'both') {
+        startStatus.value = status;
+        endStatus.value = status;
       }
     }
     function getStatus(side) {
@@ -24052,6 +24277,32 @@ const VInfiniteScroll = genericComponent()({
         }, [renderSide('end', endStatus.value)])]
       });
     });
+    function reset(side) {
+      const effectiveSide = side ?? props.side;
+      setStatus(effectiveSide, 'ok');
+      nextTick(() => {
+        setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+        if (props.mode !== 'manual') {
+          nextTick(() => {
+            window.requestAnimationFrame(() => {
+              window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                  if (effectiveSide === 'both') {
+                    intersecting('start');
+                    intersecting('end');
+                  } else {
+                    intersecting(effectiveSide);
+                  }
+                });
+              });
+            });
+          });
+        }
+      });
+    }
+    return {
+      reset
+    };
   }
 });
 
@@ -24131,8 +24382,47 @@ const VItem = genericComponent()({
   }
 });
 
-// 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(() => createVNode(props.tag, {
+      "class": normalizeClass(['v-kbd', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, props.style])
+    }, slots));
+    return {};
+  }
+});
 
 const makeVLayoutProps = propsFactory({
   ...makeComponentProps(),
@@ -24970,6 +25260,14 @@ const makeVNumberInputProps = propsFactory({
     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()({
@@ -24995,11 +25293,24 @@ const VNumberInput = genericComponent()({
     const form = useForm(props);
     const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
     const isFocused = shallowRef(props.focused);
+    const {
+      decimalSeparator: decimalSeparatorFromLocale
+    } = useLocale();
+    const decimalSeparator = 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 = shallowRef(null);
@@ -25016,8 +25327,11 @@ const VNumberInput = genericComponent()({
         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;
         }
       }
@@ -25054,6 +25368,7 @@ const VNumberInput = genericComponent()({
       }
     };
     watch(() => props.precision, () => formatInputValue());
+    watch(() => props.minFractionDigits, () => formatInputValue());
     onMounted(() => {
       clampModel();
     });
@@ -25087,24 +25402,24 @@ const VNumberInput = genericComponent()({
         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;
       }
@@ -25156,19 +25471,16 @@ const VNumberInput = genericComponent()({
       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;
@@ -25176,7 +25488,7 @@ const VNumberInput = genericComponent()({
         inputText.value = null;
         return;
       }
-      inputText.value = model.value.toString();
+      inputText.value = model.value.toString().replace('.', decimalSeparator.value);
     }
     function onFocus() {
       trimDecimalZeros();
@@ -25443,9 +25755,10 @@ const VOtpInput = genericComponent()({
       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 = [];
@@ -30145,11 +30458,6 @@ const makeVIconBtnProps = propsFactory({
   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,
@@ -30169,6 +30477,7 @@ const makeVIconBtnProps = propsFactory({
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeElevationProps(),
+  ...makeIconSizeProps(),
   ...makeRoundedProps(),
   ...makeTagProps({
     tag: 'button'
@@ -30223,7 +30532,6 @@ const VIconBtn = genericComponent()({
       })()
     }));
     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;
@@ -30235,12 +30543,12 @@ const VIconBtn = genericComponent()({
       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
       };
@@ -30283,7 +30591,7 @@ const VIconBtn = genericComponent()({
           "color": typeof props.loading === 'boolean' ? undefined : props.loading,
           "indeterminate": "disable-shrink",
           "width": "2",
-          "size": iconSize
+          "size": iconSize.value
         }, null)])]
       });
     });
@@ -30291,6 +30599,251 @@ const VIconBtn = genericComponent()({
   }
 });
 
+// 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 = computed(() => {
+    if (typeof props.mask === 'string') {
+      if (props.mask in presets) return presets[props.mask];
+      return props.mask;
+    }
+    return props.mask?.mask ?? '';
+  });
+  const tokens = computed(() => {
+    return {
+      ...defaultTokens,
+      ...(isObject(props.mask) ? props.mask.tokens : null)
+    };
+  });
+  const selection = shallowRef(0);
+  const lazySelection = 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 = ref();
+    const {
+      maskText,
+      updateRange,
+      unmaskText
+    } = useMask(props, vTextFieldRef);
+    const returnMaskedValue = 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;
+    });
+    onBeforeMount(() => {
+      if (props.returnMaskedValue) {
+        emit('update:modelValue', model.value);
+      }
+    });
+    useRender(() => {
+      const textFieldProps = VTextField.filterProps(props);
+      return createVNode(VTextField, mergeProps(textFieldProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "ref": vTextFieldRef
+      }), {
+        ...slots
+      });
+    });
+    return forwardRefs({}, vTextFieldRef);
+  }
+});
+
 // Types
 
 const makeVStepperVerticalActionsProps = propsFactory({
@@ -31362,6 +31915,7 @@ const VTreeviewItem = genericComponent()({
     }
     function onClickAction(e) {
       e.preventDefault();
+      e.stopPropagation();
       emit('toggleExpand', e);
     }
     useRender(() => {
@@ -31432,6 +31986,11 @@ const makeVTreeviewChildrenProps = propsFactory({
   selectable: Boolean,
   selectedColor: String,
   selectStrategy: [String, Function, Object],
+  index: Number,
+  path: {
+    type: Array,
+    default: () => []
+  },
   ...makeDensityProps()
 }, 'VTreeviewChildren');
 const VTreeviewChildren = genericComponent()({
@@ -31459,12 +32018,19 @@ const VTreeviewChildren = genericComponent()({
         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 => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
           "key": item.value,
@@ -31485,11 +32051,13 @@ const VTreeviewChildren = genericComponent()({
           }
         }, null)]), slots.prepend?.({
           ...slotProps,
+          ...treeItemProps,
           item: item.raw,
           internalItem: item
         })]),
         append: slots.append ? slotProps => slots.append?.({
           ...slotProps,
+          ...treeItemProps,
           item: item.raw,
           internalItem: item
         }) : undefined,
@@ -31505,9 +32073,13 @@ const VTreeviewChildren = genericComponent()({
         }) : undefined
       };
       const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
-      const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+      const treeviewChildrenProps = VTreeviewChildren.filterProps({
+        ...props,
+        ...treeItemProps
+      });
       return children ? createVNode(VTreeviewGroup, mergeProps(treeviewGroupProps, {
-        "value": props.returnObject ? item.raw : treeviewGroupProps?.value
+        "value": props.returnObject ? item.raw : treeviewGroupProps?.value,
+        "rawId": treeviewGroupProps?.value
       }), {
         activator: _ref2 => {
           let {
@@ -31555,7 +32127,7 @@ const makeVTreeviewProps = propsFactory({
   ...makeFilterProps({
     filterKeys: ['title']
   }),
-  ...makeVTreeviewChildrenProps(),
+  ...omit(makeVTreeviewChildrenProps(), ['index', 'path']),
   ...omit(makeVListProps({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
@@ -31798,6 +32370,7 @@ var components = /*#__PURE__*/Object.freeze({
   VListSubheader: VListSubheader,
   VLocaleProvider: VLocaleProvider,
   VMain: VMain,
+  VMaskInput: VMaskInput,
   VMenu: VMenu,
   VMessages: VMessages,
   VNavigationDrawer: VNavigationDrawer,
@@ -32195,7 +32768,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.9-master.2025-06-17";
+const version$1 = "3.8.10-dev.2025-06-18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32493,7 +33066,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.9-master.2025-06-17";
+const version = "3.8.10-dev.2025-06-18";
 
 /* eslint-disable local-rules/sort-imports */