@vuetify/nightly 3.8.3-dev.2025-04-29 → 3.8.3-master.2025-04-30

package/dist/vuetify.esm.js

@@ -1,16 +1,15 @@
 /*!
-* Vuetify v3.8.3-dev.2025-04-29
+* Vuetify v3.8.3-master.2025-04-30
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 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"); }
@@ -2782,7 +2781,6 @@ const makeThemeProps = propsFactory({
 function genDefaults$1() {
   return {
     defaultTheme: 'light',
-    prefix: 'v-',
     variations: {
       colors: [],
       lighten: 0,
@@ -2864,10 +2862,7 @@ function genDefaults$1() {
         }
       }
     },
-    stylesheetId: 'vuetify-theme-stylesheet',
-    scoped: false,
-    unimportant: false,
-    utilities: true
+    stylesheetId: 'vuetify-theme-stylesheet'
   };
 }
 function parseThemeOptions() {
@@ -2890,21 +2885,21 @@ function parseThemeOptions() {
 function createCssClass(lines, selector, content, scope) {
   lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
 }
-function genCssVariables(theme, prefix) {
+function genCssVariables(theme) {
   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(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
+    variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
     if (!key.startsWith('on-')) {
-      variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
+      variables.push(`--v-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(`--${prefix}${key}: ${rgb ?? value}`);
+    variables.push(`--v-${key}: ${rgb ?? value}`);
   }
   return variables;
 }
@@ -2948,8 +2943,7 @@ function getScopedSelector(selector, scope) {
   const scopeSelector = `:where(${scope})`;
   return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
 }
-function upsertStyles(id, cspNonce, styles) {
-  const styleEl = getOrCreateStyleElement(id, cspNonce);
+function upsertStyles(styleEl, styles) {
   if (!styleEl) return;
   styleEl.innerHTML = styles;
 }
@@ -2969,17 +2963,8 @@ 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)) {
@@ -3000,49 +2985,28 @@ 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.prefix), parsedOptions.scope);
+    createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
     for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-      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);
-        }
+      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);
       }
-      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;
@@ -3080,55 +3044,22 @@ function createTheme(options) {
         updateStyles();
       }
       function updateStyles() {
-        upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
+        upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.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;
-    }
-  });
+  const themeClasses = toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
   return {
     install,
-    change,
-    cycle,
-    toggle,
     isDisabled: parsedOptions.isDisabled,
     name,
     themes,
     current,
     computedThemes,
-    prefix: parsedOptions.prefix,
     themeClasses,
     styles,
     global: {
-      name: globalName,
+      name,
       current
     }
   };
@@ -3139,7 +3070,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 : `${theme.prefix}theme--${name.value}`);
+  const themeClasses = toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
   const newTheme = {
     ...theme,
     name,
@@ -3806,7 +3737,7 @@ function useRounded(props) {
 
 const makeTransitionProps = propsFactory({
   transition: {
-    type: [Boolean, String, Object],
+    type: null,
     default: 'fade-transition',
     validator: val => val !== true
   }
@@ -3824,16 +3755,19 @@ const MaybeTransition = (props, _ref) => {
   const {
     component = group ? TransitionGroup : Transition,
     ...customProps
-  } = typeof transition === 'object' ? transition : {};
-  return h(component, mergeProps(typeof transition === 'string' ? {
-    name: disabled ? '' : transition
-  } : customProps, typeof transition === 'string' ? {} : Object.fromEntries(Object.entries({
-    disabled,
-    group
-  }).filter(_ref2 => {
-    let [_, v] = _ref2;
-    return v !== undefined;
-  })), rest), slots);
+  } = isObject(transition) ? transition : {};
+  let transitionProps;
+  if (isObject(transition)) {
+    transitionProps = mergeProps(customProps, JSON.parse(JSON.stringify({
+      disabled,
+      group
+    })), rest);
+  } else {
+    transitionProps = mergeProps({
+      name: disabled || !transition ? '' : transition
+    }, rest);
+  }
+  return h(component, transitionProps, slots);
 };
 
 // Utilities
@@ -4683,15 +4617,9 @@ function useVariant(props) {
   };
 }
 
-// Types
-
 const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
-  direction: {
-    type: String,
-    default: 'horizontal'
-  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -4725,7 +4653,7 @@ const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: toRef(() => props.direction === 'horizontal' ? 'auto' : null),
+        height: 'auto',
         baseColor: toRef(() => props.baseColor),
         color: toRef(() => props.color),
         density: toRef(() => props.density),
@@ -4735,7 +4663,7 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-btn-group', `v-btn-group--${props.direction}`, {
+        "class": ['v-btn-group', {
           'v-btn-group--divided': props.divided
         }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": props.style
@@ -12700,12 +12628,7 @@ function useVirtual(props, items) {
   }
   function calculateOffset(index) {
     index = clamp(index, 0, items.value.length - 1);
-    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;
+    return offsets[index] || 0;
   }
   function calculateIndex(scrollTop) {
     return binaryClosest(offsets, scrollTop);
@@ -28718,7 +28641,7 @@ const makeVTooltipProps = propsFactory({
     origin: 'auto',
     scrim: false,
     scrollStrategy: 'reposition',
-    transition: false
+    transition: null
   }), ['absolute', 'persistent'])
 }, 'VTooltip');
 const VTooltip = genericComponent()({
@@ -28745,7 +28668,7 @@ const VTooltip = genericComponent()({
       return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
     });
     const transition = toRef(() => {
-      if (props.transition) return props.transition;
+      if (props.transition != null) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });
     const activatorProps = computed(() => mergeProps({
@@ -29291,7 +29214,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.3-dev.2025-04-29";
+const version$1 = "3.8.3-master.2025-04-30";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29316,7 +29239,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.3-dev.2025-04-29";
+const version = "3.8.3-master.2025-04-30";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };