@vuetify/nightly 3.8.8-master.2025-06-04 → 3.8.8-master.2025-06-07

package/dist/vuetify-labs.d.ts

@@ -51326,6 +51326,7 @@ declare const VNumberInput: {
         "v-slot:increment"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
         "v-slot:decrement"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
     } & {
+        "onUpdate:focused"?: ((val: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((val: number) => any) | undefined;
     }, Omit<Omit<{
         $: vue.ComponentInternalInstance;
@@ -53266,6 +53267,7 @@ declare const VNumberInput: {
             } | {};
         }) | {};
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        'update:focused': (val: boolean) => true;
         'update:modelValue': (val: number) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         flat: boolean;
@@ -53462,6 +53464,7 @@ declare const VNumberInput: {
         "v-slot:increment"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
         "v-slot:decrement"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
     } & {
+        "onUpdate:focused"?: ((val: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((val: number) => any) | undefined;
     }, Omit<Omit<{
         $: vue.ComponentInternalInstance;
@@ -55575,6 +55578,7 @@ declare const VNumberInput: {
     "v-slot:increment"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
     "v-slot:decrement"?: false | ((arg: ControlSlot$1) => vue.VNodeChild) | undefined;
 } & {
+    "onUpdate:focused"?: ((val: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: number) => any) | undefined;
 }, Omit<Omit<{
     $: vue.ComponentInternalInstance;
@@ -57515,6 +57519,7 @@ declare const VNumberInput: {
         } | {};
     }) | {};
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:focused': (val: boolean) => true;
     'update:modelValue': (val: number) => true;
 }, string, {
     flat: boolean;
@@ -89439,6 +89444,7 @@ declare const VDateInput: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
         onCancel?: (() => any) | undefined;
+        "onUpdate:focused"?: ((val: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         "onUpdate:menu"?: ((val: boolean) => any) | undefined;
         onSave?: ((value: string) => any) | undefined;
@@ -91383,6 +91389,7 @@ declare const VDateInput: {
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         save: (value: string) => true;
         cancel: () => true;
+        'update:focused': (val: boolean) => true;
         'update:modelValue': (val: string) => true;
         'update:menu': (val: boolean) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
@@ -91638,6 +91645,7 @@ declare const VDateInput: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
         onCancel?: (() => any) | undefined;
+        "onUpdate:focused"?: ((val: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         "onUpdate:menu"?: ((val: boolean) => any) | undefined;
         onSave?: ((value: string) => any) | undefined;
@@ -93811,6 +93819,7 @@ declare const VDateInput: {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 } & {
     onCancel?: (() => any) | undefined;
+    "onUpdate:focused"?: ((val: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string) => any) | undefined;
     "onUpdate:menu"?: ((val: boolean) => any) | undefined;
     onSave?: ((value: string) => any) | undefined;
@@ -95755,6 +95764,7 @@ declare const VDateInput: {
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     save: (value: string) => true;
     cancel: () => true;
+    'update:focused': (val: boolean) => true;
     'update:modelValue': (val: string) => true;
     'update:menu': (val: boolean) => true;
 }, string, {
@@ -101789,76 +101799,78 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
-    VApp: VApp
-    VAlert: VAlert
-    VAlertTitle: VAlertTitle
     VAppBar: VAppBar
     VAppBarNavIcon: VAppBarNavIcon
     VAppBarTitle: VAppBarTitle
-    VAutocomplete: VAutocomplete
+    VAlert: VAlert
+    VAlertTitle: VAlertTitle
     VAvatar: VAvatar
+    VApp: VApp
+    VBadge: VBadge
     VBanner: VBanner
     VBannerActions: VBannerActions
     VBannerText: VBannerText
-    VBadge: VBadge
-    VBottomNavigation: VBottomNavigation
+    VAutocomplete: VAutocomplete
+    VBottomSheet: VBottomSheet
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
-    VBottomSheet: VBottomSheet
-    VBtnGroup: VBtnGroup
-    VBtnToggle: VBtnToggle
+    VBottomNavigation: VBottomNavigation
     VBtn: VBtn
+    VBtnToggle: VBtnToggle
+    VBtnGroup: VBtnGroup
+    VCarousel: VCarousel
+    VCarouselItem: VCarouselItem
     VCard: VCard
     VCardActions: VCardActions
     VCardItem: VCardItem
     VCardSubtitle: VCardSubtitle
     VCardText: VCardText
     VCardTitle: VCardTitle
-    VCarousel: VCarousel
-    VCarouselItem: VCarouselItem
+    VDataTable: VDataTable
+    VDataTableHeaders: VDataTableHeaders
+    VDataTableFooter: VDataTableFooter
+    VDataTableRows: VDataTableRows
+    VDataTableRow: VDataTableRow
+    VDataTableVirtual: VDataTableVirtual
+    VDataTableServer: VDataTableServer
+    VCode: VCode
     VCheckbox: VCheckbox
     VCheckboxBtn: VCheckboxBtn
-    VChipGroup: VChipGroup
     VChip: VChip
+    VCounter: VCounter
+    VChipGroup: VChipGroup
     VCombobox: VCombobox
-    VCode: VCode
     VColorPicker: VColorPicker
-    VCounter: VCounter
-    VDialog: VDialog
     VDatePicker: VDatePicker
     VDatePickerControls: VDatePickerControls
     VDatePickerHeader: VDatePickerHeader
     VDatePickerMonth: VDatePickerMonth
     VDatePickerMonths: VDatePickerMonths
     VDatePickerYears: VDatePickerYears
-    VDataTable: VDataTable
-    VDataTableHeaders: VDataTableHeaders
-    VDataTableFooter: VDataTableFooter
-    VDataTableRows: VDataTableRows
-    VDataTableRow: VDataTableRow
-    VDataTableVirtual: VDataTableVirtual
-    VDataTableServer: VDataTableServer
     VDivider: VDivider
-    VEmptyState: VEmptyState
-    VFooter: VFooter
-    VFileInput: VFileInput
+    VDialog: VDialog
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
     VFab: VFab
+    VFooter: VFooter
+    VFileInput: VFileInput
+    VField: VField
+    VFieldLabel: VFieldLabel
     VIcon: VIcon
     VComponentIcon: VComponentIcon
     VSvgIcon: VSvgIcon
     VLigatureIcon: VLigatureIcon
     VClassIcon: VClassIcon
-    VImg: VImg
     VInfiniteScroll: VInfiniteScroll
+    VInput: VInput
+    VKbd: VKbd
     VItemGroup: VItemGroup
     VItem: VItem
     VLabel: VLabel
-    VKbd: VKbd
+    VImg: VImg
     VList: VList
     VListGroup: VListGroup
     VListImg: VListImg
@@ -101868,74 +101880,72 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
+    VMenu: VMenu
     VMain: VMain
     VNavigationDrawer: VNavigationDrawer
-    VMenu: VMenu
     VNumberInput: VNumberInput
-    VMessages: VMessages
     VOverlay: VOverlay
-    VPagination: VPagination
-    VProgressCircular: VProgressCircular
+    VMessages: VMessages
     VOtpInput: VOtpInput
+    VProgressCircular: VProgressCircular
+    VPagination: VPagination
     VProgressLinear: VProgressLinear
     VRadioGroup: VRadioGroup
-    VSelect: VSelect
-    VSelectionControl: VSelectionControl
     VRating: VRating
+    VSelect: VSelect
     VSelectionControlGroup: VSelectionControlGroup
-    VSheet: VSheet
     VSkeletonLoader: VSkeletonLoader
+    VSheet: VSheet
+    VSelectionControl: VSelectionControl
     VSlideGroup: VSlideGroup
     VSlideGroupItem: VSlideGroupItem
+    VStepper: VStepper
+    VStepperActions: VStepperActions
+    VStepperHeader: VStepperHeader
+    VStepperItem: VStepperItem
+    VStepperWindow: VStepperWindow
+    VStepperWindowItem: VStepperWindowItem
     VSnackbar: VSnackbar
     VSlider: VSlider
-    VField: VField
-    VFieldLabel: VFieldLabel
-    VSwitch: VSwitch
     VSystemBar: VSystemBar
+    VSwitch: VSwitch
+    VTimeline: VTimeline
+    VTimelineItem: VTimelineItem
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
-    VStepper: VStepper
-    VStepperActions: VStepperActions
-    VStepperHeader: VStepperHeader
-    VStepperItem: VStepperItem
-    VStepperWindow: VStepperWindow
-    VStepperWindowItem: VStepperWindowItem
-    VTable: VTable
     VTextField: VTextField
     VTextarea: VTextarea
-    VTimeline: VTimeline
-    VTimelineItem: VTimelineItem
-    VTooltip: VTooltip
     VToolbar: VToolbar
     VToolbarTitle: VToolbarTitle
     VToolbarItems: VToolbarItems
+    VTooltip: VTooltip
     VWindow: VWindow
     VWindowItem: VWindowItem
     VConfirmEdit: VConfirmEdit
+    VTable: VTable
     VDataIterator: VDataIterator
+    VDefaultsProvider: VDefaultsProvider
     VForm: VForm
     VContainer: VContainer
     VCol: VCol
     VRow: VRow
     VSpacer: VSpacer
     VHover: VHover
-    VLayout: VLayout
-    VLayoutItem: VLayoutItem
     VLazy: VLazy
     VLocaleProvider: VLocaleProvider
     VNoSsr: VNoSsr
+    VRadio: VRadio
     VParallax: VParallax
     VRangeSlider: VRangeSlider
-    VRadio: VRadio
     VResponsive: VResponsive
-    VSparkline: VSparkline
     VSnackbarQueue: VSnackbarQueue
     VSpeedDial: VSpeedDial
+    VSparkline: VSparkline
     VThemeProvider: VThemeProvider
     VValidation: VValidation
+    VVirtualScroll: VVirtualScroll
     VFabTransition: VFabTransition
     VDialogBottomTransition: VDialogBottomTransition
     VDialogTopTransition: VDialogTopTransition
@@ -101952,30 +101962,30 @@ declare module 'vue' {
     VExpandTransition: VExpandTransition
     VExpandXTransition: VExpandXTransition
     VDialogTransition: VDialogTransition
-    VVirtualScroll: VVirtualScroll
-    VInput: VInput
-    VDefaultsProvider: VDefaultsProvider
+    VEmptyState: VEmptyState
+    VLayout: VLayout
+    VLayoutItem: VLayoutItem
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
     VCalendarInterval: VCalendarInterval
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
-    VFileUpload: VFileUpload
-    VFileUploadItem: VFileUploadItem
-    VColorInput: VColorInput
+    VIconBtn: VIconBtn
     VPicker: VPicker
     VPickerTitle: VPickerTitle
-    VStepperVertical: VStepperVertical
-    VStepperVerticalItem: VStepperVerticalItem
-    VStepperVerticalActions: VStepperVerticalActions
-    VIconBtn: VIconBtn
+    VColorInput: VColorInput
     VTimePicker: VTimePicker
     VTimePickerClock: VTimePickerClock
     VTimePickerControls: VTimePickerControls
+    VFileUpload: VFileUpload
+    VFileUploadItem: VFileUploadItem
     VTreeview: VTreeview
     VTreeviewItem: VTreeviewItem
     VTreeviewGroup: VTreeviewGroup
+    VStepperVertical: VStepperVertical
+    VStepperVerticalItem: VStepperVerticalItem
+    VStepperVerticalActions: VStepperVerticalActions
     VDateInput: VDateInput
     VPullToRefresh: VPullToRefresh
   }

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.8-master.2025-06-04
+* Vuetify v3.8.8-master.2025-06-07
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -12114,10 +12114,12 @@ const VTextField = genericComponent()({
     const inputRef = ref();
     const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
-      if (inputRef.value !== document.activeElement) {
-        inputRef.value?.focus();
-      }
       if (!isFocused.value) focus();
+      nextTick(() => {
+        if (inputRef.value !== document.activeElement) {
+          inputRef.value?.focus();
+        }
+      });
     }
     function onControlMousedown(e) {
       emit('mousedown:control', e);
@@ -12126,7 +12128,6 @@ const VTextField = genericComponent()({
       e.preventDefault();
     }
     function onControlClick(e) {
-      onFocus();
       emit('click:control', e);
     }
     function onClear(e, reset) {
@@ -19939,7 +19940,9 @@ const VDataTableFooter = genericComponent()({
         "class": "v-data-table-footer"
       }, [slots.prepend?.(), createElementVNode("div", {
         "class": "v-data-table-footer__items-per-page"
-      }, [createElementVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
+      }, [createElementVNode("span", {
+        "aria-label": t(props.itemsPerPageText)
+      }, [t(props.itemsPerPageText)]), createVNode(VSelect, {
         "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
         "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
@@ -24885,6 +24888,7 @@ const VNumberInput = genericComponent()({
     ...makeVNumberInputProps()
   },
   emits: {
+    'update:focused': val => true,
     'update:modelValue': val => true
   },
   setup(props, _ref) {
@@ -24900,11 +24904,7 @@ const VNumberInput = genericComponent()({
     });
     const form = useForm(props);
     const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
+    const isFocused = shallowRef(props.focused);
     function correctPrecision(val) {
       let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
       const fixed = precision == null ? String(val) : val.toFixed(precision);
@@ -25089,11 +25089,9 @@ const VNumberInput = genericComponent()({
       inputText.value = model.value.toString();
     }
     function onFocus() {
-      focus();
       trimDecimalZeros();
     }
     function onBlur() {
-      blur();
       clampModel();
     }
     useRender(() => {
@@ -25186,9 +25184,12 @@ const VNumberInput = genericComponent()({
       }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createElementVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
       return createVNode(VTextField, mergeProps({
-        "ref": vTextFieldRef,
+        "ref": vTextFieldRef
+      }, textFieldProps, {
         "modelValue": inputText.value,
         "onUpdate:modelValue": $event => inputText.value = $event,
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.value,
         "onBeforeinput": onBeforeinput,
         "onFocus": onFocus,
@@ -25201,8 +25202,7 @@ const VNumberInput = genericComponent()({
           'v-number-input--reverse': props.reverse,
           'v-number-input--split': controlVariant.value === 'split',
           'v-number-input--stacked': controlVariant.value === 'stacked'
-        }, props.class]
-      }, textFieldProps, {
+        }, props.class],
         "style": props.style,
         "inputmode": "decimal"
       }), {
@@ -25337,7 +25337,7 @@ const VOtpInput = genericComponent()({
     function onPaste(index, e) {
       e.preventDefault();
       e.stopPropagation();
-      const clipboardText = e?.clipboardData?.getData('Text').slice(0, length.value) ?? '';
+      const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
       if (isValidNumber(clipboardText)) return;
       model.value = clipboardText.split('');
       inputRef.value?.[index].blur();
@@ -25369,7 +25369,10 @@ const VOtpInput = genericComponent()({
       scoped: true
     });
     watch(model, val => {
-      if (val.length === length.value) emit('finish', val.join(''));
+      if (val.length === length.value) {
+        focusIndex.value = length.value - 1;
+        emit('finish', val.join(''));
+      }
     }, {
       deep: true
     });
@@ -29260,13 +29263,9 @@ const VColorInput = genericComponent()({
     let {
       slots
     } = _ref;
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
     const model = useProxiedModel(props, 'modelValue');
     const menu = shallowRef(false);
+    const isFocused = shallowRef(props.focused);
     const isInteractive = computed(() => !props.disabled && !props.readonly);
     const display = computed(() => model.value || null);
     function onKeydown(e) {
@@ -29297,10 +29296,9 @@ const VColorInput = genericComponent()({
         "modelValue": display.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
-        "onFocus": focus,
-        "onBlur": blur,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prependInner": isInteractive.value ? onClick : undefined,
+        "onUpdate:focused": event => isFocused.value = event,
         "onClick:appendInner": isInteractive.value ? onClick : undefined,
         "onUpdate:modelValue": val => {
           model.value = val;
@@ -29504,6 +29502,7 @@ const VDateInput = genericComponent()({
   emits: {
     save: value => true,
     cancel: () => true,
+    'update:focused': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -29526,15 +29525,11 @@ const VDateInput = genericComponent()({
     const {
       mobile
     } = useDisplay(props);
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
     const emptyModelValue = () => props.multiple ? [] : null;
     const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
     const menu = useProxiedModel(props, 'menu');
     const isEditingInput = shallowRef(false);
+    const isFocused = shallowRef(props.focused);
     const vTextFieldRef = ref();
     const disabledActions = ref(['save']);
     function format(date) {
@@ -29610,7 +29605,6 @@ const VDateInput = genericComponent()({
       if (props.updateOn.includes('blur')) {
         onUserInput(e.target);
       }
-      blur();
 
       // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
       if (mobile.value && isEditingInput.value && !isFocused.value) {
@@ -29655,12 +29649,12 @@ const VDateInput = genericComponent()({
         "readonly": isReadonly.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
-        "onFocus": focus,
         "onBlur": onBlur,
         "validationValue": model.value,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prepend": isInteractive.value ? onClick : undefined,
-        "onUpdate:modelValue": onUpdateDisplayModel
+        "onUpdate:modelValue": onUpdateDisplayModel,
+        "onUpdate:focused": event => isFocused.value = event
       }), {
         ...slots,
         default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
@@ -32091,7 +32085,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.8-master.2025-06-04";
+const version$1 = "3.8.8-master.2025-06-07";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32389,7 +32383,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.8-master.2025-06-04";
+const version = "3.8.8-master.2025-06-07";
 
 /* eslint-disable local-rules/sort-imports */