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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* 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.
 */
@@ -14,7 +14,6 @@
   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"); }
@@ -2786,7 +2785,6 @@
   function genDefaults$1() {
     return {
       defaultTheme: 'light',
-      prefix: 'v-',
       variations: {
         colors: [],
         lighten: 0,
@@ -2868,10 +2866,7 @@
           }
         }
       },
-      stylesheetId: 'vuetify-theme-stylesheet',
-      scoped: false,
-      unimportant: false,
-      utilities: true
+      stylesheetId: 'vuetify-theme-stylesheet'
     };
   }
   function parseThemeOptions() {
@@ -2894,21 +2889,21 @@
   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;
   }
@@ -2952,8 +2947,7 @@
     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;
   }
@@ -2973,17 +2967,8 @@
   // 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)) {
@@ -3004,49 +2989,28 @@
     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.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 = 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;
@@ -3084,55 +3048,22 @@
           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 = vue.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
       }
     };
@@ -3143,7 +3074,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 : `${theme.prefix}theme--${name.value}`);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -3810,7 +3741,7 @@
 
   const makeTransitionProps = propsFactory({
     transition: {
-      type: [Boolean, String, Object],
+      type: null,
       default: 'fade-transition',
       validator: val => val !== true
     }
@@ -3828,16 +3759,19 @@
     const {
       component = group ? vue.TransitionGroup : vue.Transition,
       ...customProps
-    } = typeof transition === 'object' ? transition : {};
-    return vue.h(component, vue.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 = vue.mergeProps(customProps, JSON.parse(JSON.stringify({
+        disabled,
+        group
+      })), rest);
+    } else {
+      transitionProps = vue.mergeProps({
+        name: disabled || !transition ? '' : transition
+      }, rest);
+    }
+    return vue.h(component, transitionProps, slots);
   };
 
   // Utilities
@@ -4687,15 +4621,9 @@
     };
   }
 
-  // Types
-
   const makeVBtnGroupProps = propsFactory({
     baseColor: String,
     divided: Boolean,
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
@@ -4729,7 +4657,7 @@
       } = useRounded(props);
       provideDefaults({
         VBtn: {
-          height: vue.toRef(() => props.direction === 'horizontal' ? 'auto' : null),
+          height: 'auto',
           baseColor: vue.toRef(() => props.baseColor),
           color: vue.toRef(() => props.color),
           density: vue.toRef(() => props.density),
@@ -4739,7 +4667,7 @@
       });
       useRender(() => {
         return vue.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
@@ -12704,12 +12632,7 @@
     }
     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);
@@ -28722,7 +28645,7 @@
       origin: 'auto',
       scrim: false,
       scrollStrategy: 'reposition',
-      transition: false
+      transition: null
     }), ['absolute', 'persistent'])
   }, 'VTooltip');
   const VTooltip = genericComponent()({
@@ -28749,7 +28672,7 @@
         return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
       });
       const transition = vue.toRef(() => {
-        if (props.transition) return props.transition;
+        if (props.transition != null) return props.transition;
         return isActive.value ? 'scale-transition' : 'fade-transition';
       });
       const activatorProps = vue.computed(() => vue.mergeProps({
@@ -29295,7 +29218,7 @@
       };
     });
   }
-  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
@@ -29320,7 +29243,7 @@
       ...options
     });
   };
-  const version = "3.8.3-dev.2025-04-29";
+  const version = "3.8.3-master.2025-04-30";
   createVuetify.version = version;
 
   exports.blueprints = index;