@vuetify/nightly 3.9.0-beta.1-dev.2025-06-28 → 3.9.0-beta.1-dev.2025-07-02

package/dist/vuetify.d.ts

@@ -93489,37 +93489,41 @@ declare module 'vue' {
   }
   export interface GlobalComponents {
     VApp: VApp
-    VAppBar: VAppBar
-    VAppBarNavIcon: VAppBarNavIcon
-    VAppBarTitle: VAppBarTitle
     VAlert: VAlert
     VAlertTitle: VAlertTitle
-    VBadge: VBadge
-    VAutocomplete: VAutocomplete
+    VBottomNavigation: VBottomNavigation
     VAvatar: VAvatar
-    VBottomSheet: VBottomSheet
+    VAutocomplete: VAutocomplete
+    VBanner: VBanner
+    VBannerActions: VBannerActions
+    VBannerText: VBannerText
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
-    VBtnGroup: VBtnGroup
-    VBtnToggle: VBtnToggle
+    VBadge: VBadge
+    VAppBar: VAppBar
+    VAppBarNavIcon: VAppBarNavIcon
+    VAppBarTitle: VAppBarTitle
+    VBtn: VBtn
+    VCarousel: VCarousel
+    VCarouselItem: VCarouselItem
+    VBottomSheet: VBottomSheet
     VCard: VCard
     VCardActions: VCardActions
     VCardItem: VCardItem
     VCardSubtitle: VCardSubtitle
     VCardText: VCardText
     VCardTitle: VCardTitle
-    VCarousel: VCarousel
-    VCarouselItem: VCarouselItem
-    VCode: VCode
+    VBtnToggle: VBtnToggle
+    VChipGroup: VChipGroup
     VCheckbox: VCheckbox
     VCheckboxBtn: VCheckboxBtn
-    VColorPicker: VColorPicker
-    VChip: VChip
-    VChipGroup: VChipGroup
-    VBtn: VBtn
+    VBtnGroup: VBtnGroup
+    VCode: VCode
     VCounter: VCounter
+    VChip: VChip
     VCombobox: VCombobox
+    VColorPicker: VColorPicker
     VDatePicker: VDatePicker
     VDatePickerControls: VDatePickerControls
     VDatePickerHeader: VDatePickerHeader
@@ -93533,32 +93537,28 @@ declare module 'vue' {
     VDataTableRow: VDataTableRow
     VDataTableVirtual: VDataTableVirtual
     VDataTableServer: VDataTableServer
-    VDialog: VDialog
     VDivider: VDivider
-    VField: VField
-    VFieldLabel: VFieldLabel
-    VFab: VFab
+    VDialog: VDialog
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
-    VFooter: VFooter
-    VImg: VImg
     VFileInput: VFileInput
     VEmptyState: VEmptyState
+    VFab: VFab
+    VField: VField
+    VFieldLabel: VFieldLabel
+    VFooter: VFooter
+    VImg: VImg
     VIcon: VIcon
     VComponentIcon: VComponentIcon
     VSvgIcon: VSvgIcon
     VLigatureIcon: VLigatureIcon
     VClassIcon: VClassIcon
-    VInfiniteScroll: VInfiniteScroll
-    VLabel: VLabel
+    VInput: VInput
     VItemGroup: VItemGroup
     VItem: VItem
-    VInput: VInput
-    VKbd: VKbd
-    VMenu: VMenu
-    VMain: VMain
+    VInfiniteScroll: VInfiniteScroll
     VList: VList
     VListGroup: VListGroup
     VListImg: VListImg
@@ -93568,44 +93568,43 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
+    VMain: VMain
+    VLabel: VLabel
     VMessages: VMessages
-    VNavigationDrawer: VNavigationDrawer
+    VMenu: VMenu
+    VOtpInput: VOtpInput
+    VKbd: VKbd
     VNumberInput: VNumberInput
-    VOverlay: VOverlay
     VPagination: VPagination
     VProgressCircular: VProgressCircular
-    VBottomNavigation: VBottomNavigation
+    VNavigationDrawer: VNavigationDrawer
     VProgressLinear: VProgressLinear
-    VOtpInput: VOtpInput
-    VRating: VRating
+    VRadioGroup: VRadioGroup
+    VOverlay: VOverlay
     VSelect: VSelect
     VSelectionControl: VSelectionControl
-    VSheet: VSheet
+    VRating: VRating
     VSelectionControlGroup: VSelectionControlGroup
     VSkeletonLoader: VSkeletonLoader
     VSlideGroup: VSlideGroup
     VSlideGroupItem: VSlideGroupItem
-    VSlider: VSlider
+    VSheet: VSheet
     VSnackbar: VSnackbar
-    VSystemBar: VSystemBar
-    VSwitch: VSwitch
+    VSlider: VSlider
     VStepper: VStepper
     VStepperActions: VStepperActions
     VStepperHeader: VStepperHeader
     VStepperItem: VStepperItem
     VStepperWindow: VStepperWindow
     VStepperWindowItem: VStepperWindowItem
+    VSystemBar: VSystemBar
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
-    VTextarea: VTextarea
     VTextField: VTextField
-    VTimeline: VTimeline
-    VTimelineItem: VTimelineItem
-    VTreeview: VTreeview
-    VTreeviewItem: VTreeviewItem
-    VTreeviewGroup: VTreeviewGroup
+    VTable: VTable
+    VTextarea: VTextarea
     VToolbar: VToolbar
     VToolbarTitle: VToolbarTitle
     VToolbarItems: VToolbarItems
@@ -93613,35 +93612,37 @@ declare module 'vue' {
     VTimePickerClock: VTimePickerClock
     VTimePickerControls: VTimePickerControls
     VTooltip: VTooltip
+    VTreeview: VTreeview
+    VTreeviewItem: VTreeviewItem
+    VTreeviewGroup: VTreeviewGroup
+    VTimeline: VTimeline
+    VTimelineItem: VTimelineItem
     VWindow: VWindow
     VWindowItem: VWindowItem
-    VBanner: VBanner
-    VBannerActions: VBannerActions
-    VBannerText: VBannerText
+    VSwitch: VSwitch
     VConfirmEdit: VConfirmEdit
     VDataIterator: VDataIterator
     VDefaultsProvider: VDefaultsProvider
     VForm: VForm
+    VHover: VHover
     VContainer: VContainer
     VCol: VCol
     VRow: VRow
     VSpacer: VSpacer
-    VHover: VHover
     VLayout: VLayout
     VLayoutItem: VLayoutItem
     VLazy: VLazy
     VLocaleProvider: VLocaleProvider
     VNoSsr: VNoSsr
-    VParallax: VParallax
     VRadio: VRadio
+    VParallax: VParallax
     VRangeSlider: VRangeSlider
     VResponsive: VResponsive
     VSnackbarQueue: VSnackbarQueue
     VSparkline: VSparkline
     VSpeedDial: VSpeedDial
-    VThemeProvider: VThemeProvider
     VValidation: VValidation
-    VVirtualScroll: VVirtualScroll
+    VThemeProvider: VThemeProvider
     VFabTransition: VFabTransition
     VDialogBottomTransition: VDialogBottomTransition
     VDialogTopTransition: VDialogTopTransition
@@ -93658,27 +93659,26 @@ declare module 'vue' {
     VExpandTransition: VExpandTransition
     VExpandXTransition: VExpandXTransition
     VDialogTransition: VDialogTransition
-    VRadioGroup: VRadioGroup
-    VTable: VTable
+    VVirtualScroll: VVirtualScroll
     VColorInput: VColorInput
-    VFileUpload: VFileUpload
-    VFileUploadItem: VFileUploadItem
-    VIconBtn: VIconBtn
-    VPicker: VPicker
-    VPickerTitle: VPickerTitle
-    VStepperVertical: VStepperVertical
-    VStepperVerticalItem: VStepperVerticalItem
-    VStepperVerticalActions: VStepperVerticalActions
-    VHotkey: VHotkey
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
     VCalendarInterval: VCalendarInterval
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
+    VPicker: VPicker
+    VPickerTitle: VPickerTitle
+    VStepperVertical: VStepperVertical
+    VStepperVerticalItem: VStepperVerticalItem
+    VStepperVerticalActions: VStepperVerticalActions
+    VIconBtn: VIconBtn
+    VHotkey: VHotkey
     VDateInput: VDateInput
     VMaskInput: VMaskInput
     VPullToRefresh: VPullToRefresh
+    VFileUpload: VFileUpload
+    VFileUploadItem: VFileUploadItem
   }
   export interface GlobalDirectives {
     vClickOutside: typeof import('vuetify/directives')['ClickOutside']

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.1-dev.2025-06-28
+* Vuetify v3.9.0-beta.1-dev.2025-07-02
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -10730,7 +10730,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     });
     if (flipped.isFull) {
       const values = flipped.values();
-      if (deepEqual(values.at(-1), values.at(-3))) {
+      if (deepEqual(values.at(-1), values.at(-3)) && !deepEqual(values.at(-1), values.at(-2))) {
         // Flipping is causing a container resize loop
         return;
       }
@@ -12580,7 +12580,7 @@ const VTextField = genericComponent()({
       if (!isFocused.value) focus();
       nextTick(() => {
         if (inputRef.value !== document.activeElement) {
-          inputRef.value?.focus();
+          nextTick(() => inputRef.value?.focus());
         }
       });
     }
@@ -12919,7 +12919,7 @@ function useVirtual(props, items) {
     raf = requestAnimationFrame(_calculateVisibleItems);
   }
   function _calculateVisibleItems() {
-    if (!containerRef.value || !viewportHeight.value) return;
+    if (!containerRef.value || !viewportHeight.value || !itemHeight.value) return;
     const scrollTop = lastScrollTop - markerOffset;
     const direction = Math.sign(scrollVelocity);
     const startPx = Math.max(0, scrollTop - BUFFER_PX);
@@ -17802,7 +17802,7 @@ function format(value, formatString, locale, formats) {
     case 'fullDate':
       options = {
         year: 'numeric',
-        month: 'long',
+        month: 'short',
         day: 'numeric'
       };
       break;
@@ -20119,7 +20119,8 @@ function sortItems(items, sortByItems, locale, options) {
 
       // Dates should be compared numerically
       if (sortA instanceof Date && sortB instanceof Date) {
-        return sortA.getTime() - sortB.getTime();
+        sortA = sortA.getTime();
+        sortB = sortB.getTime();
       }
       [sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s);
       if (sortA !== sortB) {
@@ -20843,7 +20844,6 @@ const VDataTableColumn = defineFunctionalComponent({
   } = _ref;
   const Tag = props.tag ?? 'td';
   return createVNode(Tag, {
-    "tabindex": "0",
     "class": normalizeClass(['v-data-table__td', {
       'v-data-table-column--fixed': props.fixed,
       'v-data-table-column--last-fixed': props.lastFixed,
@@ -21246,14 +21246,14 @@ const VDataTableHeaders = genericComponent()({
         },
         "colspan": column.colspan,
         "rowspan": column.rowspan,
-        "onClick": column.sortable ? () => toggleSort(column) : undefined,
         "fixed": column.fixed,
         "nowrap": column.nowrap,
         "lastFixed": column.lastFixed,
-        "noPadding": noPadding
-      }, headerProps, {
-        "onKeydown": event => column.sortable && handleEnterKeyPress(event, column)
-      }), {
+        "noPadding": noPadding,
+        "tabindex": column.sortable ? 0 : undefined,
+        "onClick": column.sortable ? () => toggleSort(column) : undefined,
+        "onKeydown": column.sortable ? event => handleEnterKeyPress(event, column) : undefined
+      }, headerProps), {
         default: () => {
           const columnSlotName = `header.${column.key}`;
           const columnSlotProps = {
@@ -22939,13 +22939,9 @@ function useCalendar(props) {
     const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
     return adapter.setMonth(date, value);
   }, v => adapter.getMonth(v));
-  const weekDays = computed(() => {
-    const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
-    return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
-  });
   const weekdayLabels = computed(() => {
-    const labels = adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat);
-    return weekDays.value.map(day => labels[day]);
+    const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
+    return adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat).filter((_, i) => props.weekdays.includes((i + firstDayOfWeek) % 7));
   });
   const weeksInMonth = computed(() => {
     const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
@@ -22969,13 +22965,14 @@ function useCalendar(props) {
   });
   function genDays(days, today) {
     return days.filter(date => {
-      return weekDays.value.includes(adapter.toJsDate(date).getDay());
+      return props.weekdays.includes(adapter.toJsDate(date).getDay());
     }).map((date, index) => {
       const isoDate = adapter.toISO(date);
       const isAdjacent = !adapter.isSameMonth(date, month.value);
       const isStart = adapter.isSameDay(date, adapter.startOfMonth(month.value));
       const isEnd = adapter.isSameDay(date, adapter.endOfMonth(month.value));
       const isSame = adapter.isSameDay(date, month.value);
+      const weekdaysCount = props.weekdays.length;
       return {
         date,
         formatted: adapter.format(date, 'keyboardDate'),
@@ -22987,8 +22984,8 @@ function useCalendar(props) {
         isSelected: model.value.some(value => adapter.isSameDay(date, value)),
         isStart,
         isToday: adapter.isSameDay(date, today),
-        isWeekEnd: index % 7 === 6,
-        isWeekStart: index % 7 === 0,
+        isWeekEnd: index % weekdaysCount === weekdaysCount - 1,
+        isWeekStart: index % weekdaysCount === 0,
         isoDate,
         localized: adapter.format(date, 'dayOfMonth'),
         month: adapter.getMonth(date),
@@ -23035,7 +23032,6 @@ function useCalendar(props) {
     genDays,
     model,
     weeksInMonth,
-    weekDays,
     weekdayLabels,
     weekNumbers
   };
@@ -23076,7 +23072,6 @@ const VDatePickerMonth = genericComponent()({
       daysInMonth,
       model,
       weekNumbers,
-      weekDays,
       weekdayLabels
     } = useCalendar(props);
     const adapter = useDate();
@@ -23151,7 +23146,7 @@ const VDatePickerMonth = genericComponent()({
     useRender(() => createElementVNode("div", {
       "class": "v-date-picker-month",
       "style": {
-        '--v-date-picker-days-in-week': weekDays.value.length
+        '--v-date-picker-days-in-week': props.weekdays.length
       }
     }, [props.showWeek && createElementVNode("div", {
       "key": "weeks",
@@ -26322,19 +26317,21 @@ const VOtpInput = genericComponent()({
     const contentRef = ref();
     const inputRef = ref([]);
     const current = computed(() => inputRef.value[focusIndex.value]);
-    const intersectScope = effectScope();
-    intersectScope.run(() => {
-      const {
-        intersectionRef,
-        isIntersecting
-      } = useIntersectionObserver();
-      watch(isIntersecting, v => {
-        if (!v) return;
-        intersectionRef.value?.focus();
-        intersectScope.stop();
-      });
-      watchEffect(() => {
-        intersectionRef.value = inputRef.value[0];
+    useToggleScope(() => props.autofocus, () => {
+      const intersectScope = effectScope();
+      intersectScope.run(() => {
+        const {
+          intersectionRef,
+          isIntersecting
+        } = useIntersectionObserver();
+        watchEffect(() => {
+          intersectionRef.value = inputRef.value[0];
+        });
+        watch(isIntersecting, v => {
+          if (!v) return;
+          intersectionRef.value?.focus();
+          intersectScope.stop();
+        });
       });
     });
     function onInput() {
@@ -31233,7 +31230,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-beta.1-dev.2025-06-28";
+const version$1 = "3.9.0-beta.1-dev.2025-07-02";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31258,7 +31255,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-beta.1-dev.2025-06-28";
+const version = "3.9.0-beta.1-dev.2025-07-02";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };