@vuetify/nightly 3.8.8-master.2025-06-06 → 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,41 +101799,34 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
-    VApp: VApp
     VAppBar: VAppBar
     VAppBarNavIcon: VAppBarNavIcon
     VAppBarTitle: VAppBarTitle
     VAlert: VAlert
     VAlertTitle: VAlertTitle
-    VAutocomplete: VAutocomplete
     VAvatar: VAvatar
+    VApp: VApp
     VBadge: VBadge
     VBanner: VBanner
     VBannerActions: VBannerActions
     VBannerText: VBannerText
+    VAutocomplete: VAutocomplete
     VBottomSheet: VBottomSheet
-    VBottomNavigation: VBottomNavigation
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
+    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
-    VChipGroup: VChipGroup
-    VCode: VCode
-    VBtnToggle: VBtnToggle
-    VCheckbox: VCheckbox
-    VCheckboxBtn: VCheckboxBtn
-    VCombobox: VCombobox
-    VCounter: VCounter
-    VColorPicker: VColorPicker
-    VBtnGroup: VBtnGroup
     VDataTable: VDataTable
     VDataTableHeaders: VDataTableHeaders
     VDataTableFooter: VDataTableFooter
@@ -101831,8 +101834,14 @@ declare module 'vue' {
     VDataTableRow: VDataTableRow
     VDataTableVirtual: VDataTableVirtual
     VDataTableServer: VDataTableServer
+    VCode: VCode
+    VCheckbox: VCheckbox
+    VCheckboxBtn: VCheckboxBtn
     VChip: VChip
-    VEmptyState: VEmptyState
+    VCounter: VCounter
+    VChipGroup: VChipGroup
+    VCombobox: VCombobox
+    VColorPicker: VColorPicker
     VDatePicker: VDatePicker
     VDatePickerControls: VDatePickerControls
     VDatePickerHeader: VDatePickerHeader
@@ -101840,28 +101849,28 @@ declare module 'vue' {
     VDatePickerMonths: VDatePickerMonths
     VDatePickerYears: VDatePickerYears
     VDivider: VDivider
-    VFab: VFab
+    VDialog: VDialog
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
-    VDialog: VDialog
+    VFab: VFab
+    VFooter: VFooter
+    VFileInput: VFileInput
     VField: VField
     VFieldLabel: VFieldLabel
-    VFileInput: VFileInput
-    VFooter: VFooter
-    VInput: VInput
     VIcon: VIcon
     VComponentIcon: VComponentIcon
     VSvgIcon: VSvgIcon
     VLigatureIcon: VLigatureIcon
     VClassIcon: VClassIcon
     VInfiniteScroll: VInfiniteScroll
+    VInput: VInput
+    VKbd: VKbd
     VItemGroup: VItemGroup
     VItem: VItem
-    VImg: VImg
     VLabel: VLabel
-    VKbd: VKbd
+    VImg: VImg
     VList: VList
     VListGroup: VListGroup
     VListImg: VListImg
@@ -101871,68 +101880,69 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
+    VMenu: VMenu
     VMain: VMain
     VNavigationDrawer: VNavigationDrawer
-    VMenu: VMenu
+    VNumberInput: VNumberInput
+    VOverlay: VOverlay
     VMessages: VMessages
     VOtpInput: VOtpInput
-    VNumberInput: VNumberInput
+    VProgressCircular: VProgressCircular
     VPagination: VPagination
     VProgressLinear: VProgressLinear
-    VOverlay: VOverlay
-    VProgressCircular: VProgressCircular
     VRadioGroup: VRadioGroup
     VRating: VRating
-    VSelectionControl: VSelectionControl
-    VSheet: VSheet
     VSelect: VSelect
-    VSkeletonLoader: VSkeletonLoader
     VSelectionControlGroup: VSelectionControlGroup
+    VSkeletonLoader: VSkeletonLoader
+    VSheet: VSheet
+    VSelectionControl: VSelectionControl
     VSlideGroup: VSlideGroup
     VSlideGroupItem: VSlideGroupItem
-    VSlider: VSlider
-    VTextField: VTextField
     VStepper: VStepper
     VStepperActions: VStepperActions
     VStepperHeader: VStepperHeader
     VStepperItem: VStepperItem
     VStepperWindow: VStepperWindow
     VStepperWindowItem: VStepperWindowItem
-    VSystemBar: VSystemBar
     VSnackbar: VSnackbar
+    VSlider: VSlider
+    VSystemBar: VSystemBar
+    VSwitch: VSwitch
+    VTimeline: VTimeline
+    VTimelineItem: VTimelineItem
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
+    VTextField: VTextField
     VTextarea: VTextarea
-    VTable: VTable
-    VWindow: VWindow
-    VWindowItem: VWindowItem
     VToolbar: VToolbar
     VToolbarTitle: VToolbarTitle
     VToolbarItems: VToolbarItems
     VTooltip: VTooltip
-    VSwitch: VSwitch
+    VWindow: VWindow
+    VWindowItem: VWindowItem
     VConfirmEdit: VConfirmEdit
+    VTable: VTable
     VDataIterator: VDataIterator
     VDefaultsProvider: VDefaultsProvider
+    VForm: VForm
     VContainer: VContainer
     VCol: VCol
     VRow: VRow
     VSpacer: VSpacer
     VHover: VHover
-    VForm: VForm
     VLazy: VLazy
-    VLayout: VLayout
-    VLayoutItem: VLayoutItem
     VLocaleProvider: VLocaleProvider
     VNoSsr: VNoSsr
+    VRadio: VRadio
     VParallax: VParallax
     VRangeSlider: VRangeSlider
     VResponsive: VResponsive
-    VRadio: VRadio
-    VSparkline: VSparkline
+    VSnackbarQueue: VSnackbarQueue
     VSpeedDial: VSpeedDial
+    VSparkline: VSparkline
     VThemeProvider: VThemeProvider
     VValidation: VValidation
     VVirtualScroll: VVirtualScroll
@@ -101952,31 +101962,31 @@ declare module 'vue' {
     VExpandTransition: VExpandTransition
     VExpandXTransition: VExpandXTransition
     VDialogTransition: VDialogTransition
-    VTimeline: VTimeline
-    VTimelineItem: VTimelineItem
-    VSnackbarQueue: VSnackbarQueue
+    VEmptyState: VEmptyState
+    VLayout: VLayout
+    VLayoutItem: VLayoutItem
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
     VCalendarInterval: VCalendarInterval
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
+    VIconBtn: VIconBtn
     VPicker: VPicker
     VPickerTitle: VPickerTitle
-    VIconBtn: VIconBtn
-    VStepperVertical: VStepperVertical
-    VStepperVerticalItem: VStepperVerticalItem
-    VStepperVerticalActions: VStepperVerticalActions
-    VTreeview: VTreeview
-    VTreeviewItem: VTreeviewItem
-    VTreeviewGroup: VTreeviewGroup
     VColorInput: VColorInput
-    VFileUpload: VFileUpload
-    VFileUploadItem: VFileUploadItem
     VTimePicker: VTimePicker
     VTimePickerClock: VTimePickerClock
     VTimePickerControls: VTimePickerControls
-    VPullToRefresh: VPullToRefresh
+    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-06
+* 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-06";
+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-06";
+const version = "3.8.8-master.2025-06-07";
 
 /* eslint-disable local-rules/sort-imports */