@vuetify/nightly 3.8.0-master.2025-04-04 → 3.8.1-dev.2025-04-07

package/dist/vuetify.d.ts

@@ -82943,45 +82943,40 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
-    VAutocomplete: VAutocomplete
+    VApp: VApp
     VAppBar: VAppBar
     VAppBarNavIcon: VAppBarNavIcon
     VAppBarTitle: VAppBarTitle
     VAvatar: VAvatar
-    VApp: VApp
+    VAlert: VAlert
+    VAlertTitle: VAlertTitle
+    VAutocomplete: VAutocomplete
     VBadge: VBadge
     VBanner: VBanner
     VBannerActions: VBannerActions
     VBannerText: VBannerText
-    VAlert: VAlert
-    VAlertTitle: VAlertTitle
-    VBtn: VBtn
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
+    VBottomSheet: VBottomSheet
+    VBottomNavigation: VBottomNavigation
+    VBtnGroup: VBtnGroup
+    VBtn: VBtn
+    VCheckbox: VCheckbox
+    VCheckboxBtn: VCheckboxBtn
     VCard: VCard
     VCardActions: VCardActions
     VCardItem: VCardItem
     VCardSubtitle: VCardSubtitle
     VCardText: VCardText
     VCardTitle: VCardTitle
-    VCheckbox: VCheckbox
-    VCheckboxBtn: VCheckboxBtn
-    VBottomNavigation: VBottomNavigation
     VBtnToggle: VBtnToggle
+    VChipGroup: VChipGroup
     VCarousel: VCarousel
     VCarouselItem: VCarouselItem
-    VBottomSheet: VBottomSheet
-    VChip: VChip
-    VBtnGroup: VBtnGroup
-    VChipGroup: VChipGroup
     VColorPicker: VColorPicker
-    VDatePicker: VDatePicker
-    VDatePickerControls: VDatePickerControls
-    VDatePickerHeader: VDatePickerHeader
-    VDatePickerMonth: VDatePickerMonth
-    VDatePickerMonths: VDatePickerMonths
-    VDatePickerYears: VDatePickerYears
+    VCode: VCode
+    VCombobox: VCombobox
     VDataTable: VDataTable
     VDataTableHeaders: VDataTableHeaders
     VDataTableFooter: VDataTableFooter
@@ -82989,31 +82984,38 @@ declare module 'vue' {
     VDataTableRow: VDataTableRow
     VDataTableVirtual: VDataTableVirtual
     VDataTableServer: VDataTableServer
-    VCode: VCode
+    VDatePicker: VDatePicker
+    VDatePickerControls: VDatePickerControls
+    VDatePickerHeader: VDatePickerHeader
+    VDatePickerMonth: VDatePickerMonth
+    VDatePickerMonths: VDatePickerMonths
+    VDatePickerYears: VDatePickerYears
     VCounter: VCounter
-    VDialog: VDialog
-    VCombobox: VCombobox
-    VDivider: VDivider
-    VFileInput: VFileInput
-    VFab: VFab
+    VChip: VChip
     VEmptyState: VEmptyState
+    VDivider: VDivider
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
+    VDialog: VDialog
+    VFab: VFab
     VField: VField
     VFieldLabel: VFieldLabel
     VFooter: VFooter
+    VFileInput: VFileInput
     VIcon: VIcon
     VComponentIcon: VComponentIcon
     VSvgIcon: VSvgIcon
     VLigatureIcon: VLigatureIcon
     VClassIcon: VClassIcon
-    VImg: VImg
+    VInput: VInput
+    VLabel: VLabel
+    VInfiniteScroll: VInfiniteScroll
     VItemGroup: VItemGroup
     VItem: VItem
-    VInput: VInput
     VKbd: VKbd
+    VImg: VImg
     VList: VList
     VListGroup: VListGroup
     VListImg: VListImg
@@ -83023,35 +83025,33 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
-    VInfiniteScroll: VInfiniteScroll
-    VLabel: VLabel
-    VMenu: VMenu
-    VNumberInput: VNumberInput
     VMain: VMain
     VNavigationDrawer: VNavigationDrawer
-    VPagination: VPagination
+    VMenu: VMenu
     VOtpInput: VOtpInput
     VOverlay: VOverlay
-    VProgressCircular: VProgressCircular
-    VProgressLinear: VProgressLinear
     VMessages: VMessages
+    VNumberInput: VNumberInput
+    VPagination: VPagination
+    VProgressLinear: VProgressLinear
     VRadioGroup: VRadioGroup
+    VProgressCircular: VProgressCircular
+    VSelect: VSelect
     VRating: VRating
     VSelectionControl: VSelectionControl
     VSelectionControlGroup: VSelectionControlGroup
-    VSkeletonLoader: VSkeletonLoader
-    VSelect: VSelect
     VSlideGroup: VSlideGroup
     VSlideGroupItem: VSlideGroupItem
+    VSnackbar: VSnackbar
     VSheet: VSheet
+    VSkeletonLoader: VSkeletonLoader
     VSlider: VSlider
-    VSnackbar: VSnackbar
     VSwitch: VSwitch
-    VSystemBar: VSystemBar
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
+    VSystemBar: VSystemBar
     VStepper: VStepper
     VStepperActions: VStepperActions
     VStepperHeader: VStepperHeader
@@ -83059,34 +83059,34 @@ declare module 'vue' {
     VStepperWindow: VStepperWindow
     VStepperWindowItem: VStepperWindowItem
     VTextarea: VTextarea
+    VTable: VTable
     VToolbar: VToolbar
     VToolbarTitle: VToolbarTitle
     VToolbarItems: VToolbarItems
-    VTable: VTable
+    VTextField: VTextField
     VTimeline: VTimeline
     VTimelineItem: VTimelineItem
-    VTooltip: VTooltip
     VWindow: VWindow
     VWindowItem: VWindowItem
-    VTextField: VTextField
+    VTooltip: VTooltip
     VConfirmEdit: VConfirmEdit
     VDataIterator: VDataIterator
-    VHover: VHover
     VDefaultsProvider: VDefaultsProvider
+    VForm: VForm
+    VHover: VHover
     VContainer: VContainer
     VCol: VCol
     VRow: VRow
     VSpacer: VSpacer
-    VForm: VForm
-    VLazy: VLazy
     VLayout: VLayout
     VLayoutItem: VLayoutItem
+    VLazy: VLazy
     VLocaleProvider: VLocaleProvider
     VNoSsr: VNoSsr
     VParallax: VParallax
     VRadio: VRadio
-    VResponsive: VResponsive
     VRangeSlider: VRangeSlider
+    VResponsive: VResponsive
     VSnackbarQueue: VSnackbarQueue
     VSparkline: VSparkline
     VSpeedDial: VSpeedDial
@@ -83111,6 +83111,9 @@ declare module 'vue' {
     VDialogTransition: VDialogTransition
     VFileUpload: VFileUpload
     VFileUploadItem: VFileUploadItem
+    VStepperVertical: VStepperVertical
+    VStepperVerticalItem: VStepperVerticalItem
+    VStepperVerticalActions: VStepperVerticalActions
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
@@ -83118,18 +83121,15 @@ declare module 'vue' {
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
     VIconBtn: VIconBtn
-    VTreeview: VTreeview
-    VTreeviewItem: VTreeviewItem
-    VTreeviewGroup: VTreeviewGroup
+    VPicker: VPicker
+    VPickerTitle: VPickerTitle
     VTimePicker: VTimePicker
     VTimePickerClock: VTimePickerClock
     VTimePickerControls: VTimePickerControls
-    VPicker: VPicker
-    VPickerTitle: VPickerTitle
-    VStepperVertical: VStepperVertical
-    VStepperVerticalItem: VStepperVerticalItem
-    VStepperVerticalActions: VStepperVerticalActions
-    VPullToRefresh: VPullToRefresh
+    VTreeview: VTreeview
+    VTreeviewItem: VTreeviewItem
+    VTreeviewGroup: VTreeviewGroup
     VDateInput: VDateInput
+    VPullToRefresh: VPullToRefresh
   }
 }

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-master.2025-04-04
+* Vuetify v3.8.1-dev.2025-04-07
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2855,93 +2855,144 @@ function parseThemeOptions() {
     themes
   });
 }
+function createCssClass(lines, selector, content, scope) {
+  lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
+}
+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(`--v-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}`);
+    }
+  }
+  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}`);
+  }
+  return variables;
+}
+function genVariation(name, color, variations) {
+  const object = {};
+  if (variations) {
+    for (const variation of ['lighten', 'darken']) {
+      const fn = variation === 'lighten' ? lighten : darken;
+      for (const amount of createRange(variations[variation], 1)) {
+        object[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
+      }
+    }
+  }
+  return object;
+}
+function genVariations(colors, variations) {
+  if (!variations) return {};
+  let variationColors = {};
+  for (const name of variations.colors) {
+    const color = colors[name];
+    if (!color) continue;
+    variationColors = {
+      ...variationColors,
+      ...genVariation(name, color, variations)
+    };
+  }
+  return variationColors;
+}
+function genOnColors(colors) {
+  const onColors = {};
+  for (const color of Object.keys(colors)) {
+    if (color.startsWith('on-') || colors[`on-${color}`]) continue;
+    const onColor = `on-${color}`;
+    const colorVal = parseColor(colors[color]);
+    onColors[onColor] = getForeground(colorVal);
+  }
+  return onColors;
+}
+function getScopedSelector(selector, scope) {
+  if (!scope) return selector;
+  const scopeSelector = `:where(${scope})`;
+  return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
+}
+function upsertStyles(styleEl, styles) {
+  if (!styleEl) return;
+  styleEl.innerHTML = styles;
+}
+function getOrCreateStyleElement(id, cspNonce) {
+  if (!IN_BROWSER) return null;
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement('style');
+    style.id = id;
+    style.type = 'text/css';
+    if (cspNonce) style.setAttribute('nonce', cspNonce);
+    document.head.appendChild(style);
+  }
+  return style;
+}
 
 // Composables
 function createTheme(options) {
   const parsedOptions = parseThemeOptions(options);
-  const name = ref(parsedOptions.defaultTheme);
+  const name = shallowRef(parsedOptions.defaultTheme);
   const themes = ref(parsedOptions.themes);
   const computedThemes = computed(() => {
     const acc = {};
     for (const [name, original] of Object.entries(themes.value)) {
-      const theme = acc[name] = {
+      const colors = {
+        ...original.colors,
+        ...genVariations(original.colors, parsedOptions.variations)
+      };
+      acc[name] = {
         ...original,
         colors: {
-          ...original.colors
+          ...colors,
+          ...genOnColors(colors)
         }
       };
-      if (parsedOptions.variations) {
-        for (const name of parsedOptions.variations.colors) {
-          const color = theme.colors[name];
-          if (!color) continue;
-          for (const variation of ['lighten', 'darken']) {
-            const fn = variation === 'lighten' ? lighten : darken;
-            for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-              theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
-            }
-          }
-        }
-      }
-      for (const color of Object.keys(theme.colors)) {
-        if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
-        const onColor = `on-${color}`;
-        const colorVal = parseColor(theme.colors[color]);
-        theme.colors[onColor] = getForeground(colorVal);
-      }
     }
     return acc;
   });
   const current = computed(() => computedThemes.value[name.value]);
-  function createCssClass(lines, selector, content) {
-    lines.push(`${getScopedSelector(selector)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
-  }
-  function getScopedSelector(selector) {
-    if (!parsedOptions.scope) {
-      return selector;
-    }
-    const scopeSelector = `:where(${parsedOptions.scope})`;
-    if (selector === ':root') {
-      return scopeSelector;
-    }
-    return `${scopeSelector} ${selector}`;
-  }
   const styles = computed(() => {
     const lines = [];
     if (current.value?.dark) {
-      createCssClass(lines, ':root', ['color-scheme: dark']);
+      createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
     }
-    createCssClass(lines, ':root', genCssVariables(current.value));
+    createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
     for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-      createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]);
+      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 (/^on-[a-z]/.test(key)) {
-        createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
+      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`]);
-        createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
-        createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]);
+        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);
     return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
   });
-  function getHead() {
-    return {
-      style: [{
-        textContent: styles.value,
-        id: parsedOptions.stylesheetId,
-        nonce: parsedOptions.cspNonce || false
-      }]
-    };
-  }
   function install(app) {
     if (parsedOptions.isDisabled) return;
     const head = app._context.provides.usehead;
     if (head) {
+      function getHead() {
+        return {
+          style: [{
+            textContent: styles.value,
+            id: parsedOptions.stylesheetId,
+            nonce: parsedOptions.cspNonce || false
+          }]
+        };
+      }
       if (head.push) {
         const entry = head.push(getHead);
         if (IN_BROWSER) {
@@ -2958,7 +3009,6 @@ function createTheme(options) {
         }
       }
     } else {
-      let styleEl = IN_BROWSER ? document.getElementById(parsedOptions.stylesheetId) : null;
       if (IN_BROWSER) {
         watch(styles, updateStyles, {
           immediate: true
@@ -2967,15 +3017,7 @@ function createTheme(options) {
         updateStyles();
       }
       function updateStyles() {
-        if (typeof document !== 'undefined' && !styleEl) {
-          const el = document.createElement('style');
-          el.type = 'text/css';
-          el.id = parsedOptions.stylesheetId;
-          if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
-          styleEl = el;
-          document.head.appendChild(styleEl);
-        }
-        if (styleEl) styleEl.innerHTML = styles.value;
+        upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
       }
     }
   }
@@ -2999,9 +3041,7 @@ function provideTheme(props) {
   getCurrentInstance('provideTheme');
   const theme = inject$1(ThemeSymbol, null);
   if (!theme) throw new Error('Could not find Vuetify theme injection');
-  const name = computed(() => {
-    return props.theme ?? theme.name.value;
-  });
+  const name = computed(() => props.theme ?? theme.name.value);
   const current = computed(() => theme.themes.value[name.value]);
   const themeClasses = computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
   const newTheme = {
@@ -3019,24 +3059,6 @@ function useTheme() {
   if (!theme) throw new Error('Could not find Vuetify theme injection');
   return theme;
 }
-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(`--v-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}`);
-    }
-  }
-  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}`);
-  }
-  return variables;
-}
 
 const makeVAppProps = propsFactory({
   ...makeComponentProps(),
@@ -12546,7 +12568,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);
@@ -29214,7 +29241,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.0-master.2025-04-04";
+const version$1 = "3.8.1-dev.2025-04-07";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29239,7 +29266,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.0-master.2025-04-04";
+const version = "3.8.1-dev.2025-04-07";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };