vuetify 3.4.1 → 3.4.3

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.1
+* Vuetify v3.4.3
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4971,6 +4971,13 @@
   }
 
   // Utilities
+
+  // Types
+
+  function useRoute() {
+    const vm = getCurrentInstance('useRoute');
+    return vue.computed(() => vm?.proxy?.$route);
+  }
   function useRouter() {
     return getCurrentInstance('useRouter')?.proxy?.$router;
   }
@@ -4988,12 +4995,17 @@
       };
     }
     const link = props.to ? RouterLink.useLink(props) : undefined;
+    const route = useRoute();
     return {
       isLink,
       isClickable,
       route: link?.route,
       navigate: link?.navigate,
-      isActive: link && vue.computed(() => props.exact ? link.isExactActive?.value : link.isActive?.value),
+      isActive: link && vue.computed(() => {
+        if (!props.exact) return link.isActive?.value;
+        if (!route.value) return link.isExactActive?.value;
+        return link.isExactActive?.value && deepEqual(link.route.value.query, route.value.query);
+      }),
       href: vue.computed(() => props.to ? link?.route.value.href : props.href)
     };
   }
@@ -5810,7 +5822,10 @@
       default: null
     },
     name: String,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
     modelValue: null,
     type: String,
     valueComparator: {
@@ -11449,7 +11464,9 @@
                     item,
                     index,
                     props: itemProps
-                  }) ?? vue.createVNode(VListItem, itemProps, {
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
                     prepend: _ref3 => {
                       let {
                         isSelected
@@ -13411,7 +13428,7 @@
                 const props = {
                   id: `carousel-item-${item.id}`,
                   'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
-                  class: [group.isSelected(item.id) && 'v-btn--active'],
+                  class: ['v-carousel__controls__item', group.isSelected(item.id) && 'v-btn--active'],
                   onClick: () => group.select(item.id, true)
                 };
                 return slots.item ? slots.item({
@@ -16806,13 +16823,11 @@
     }
   }
 
-  // Utilities
-
-  // Types
-
+  // Composables
+  const DateOptionsSymbol = Symbol.for('vuetify:date-options');
   const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
   function createDate(options, locale) {
-    const date = mergeDeep({
+    const _options = mergeDeep({
       adapter: VuetifyDateAdapter,
       locale: {
         af: 'af-ZA',
@@ -16858,22 +16873,28 @@
         zhHant: 'zh-TW'
       }
     }, options);
-    const instance = vue.reactive(typeof date.adapter === 'function'
+    return {
+      options: _options,
+      instance: createInstance(_options, locale)
+    };
+  }
+  function createInstance(options, locale) {
+    const instance = vue.reactive(typeof options.adapter === 'function'
     // eslint-disable-next-line new-cap
-    ? new date.adapter({
-      locale: date.locale?.[locale.current.value] ?? locale.current.value,
-      formats: date.formats
-    }) : date.adapter);
+    ? new options.adapter({
+      locale: options.locale[locale.current.value] ?? locale.current.value,
+      formats: options.formats
+    }) : options.adapter);
     vue.watch(locale.current, value => {
-      const newLocale = date.locale ? date.locale[value] : value;
-      instance.locale = newLocale ?? instance.locale;
+      instance.locale = options.locale[value] ?? value ?? instance.locale;
     });
     return instance;
   }
   function useDate() {
-    const instance = vue.inject(DateAdapterSymbol);
-    if (!instance) throw new Error('[Vuetify] Could not find injected date adapter');
-    return instance;
+    const options = vue.inject(DateOptionsSymbol);
+    if (!options) throw new Error('[Vuetify] Could not find injected date options');
+    const locale = useLocale();
+    return createInstance(options, locale);
   }
 
   // https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
@@ -17214,152 +17235,473 @@
     }
   });
 
+  // Utilities
+
   // Types
 
-  const makeVDataTableFooterProps = propsFactory({
+  function useRefs() {
+    const refs = vue.ref([]);
+    vue.onBeforeUpdate(() => refs.value = []);
+    function updateRef(e, i) {
+      refs.value[i] = e;
+    }
+    return {
+      refs,
+      updateRef
+    };
+  }
+
+  // Types
+
+  const makeVPaginationProps = propsFactory({
+    activeColor: String,
+    start: {
+      type: [Number, String],
+      default: 1
+    },
+    modelValue: {
+      type: Number,
+      default: props => props.start
+    },
+    disabled: Boolean,
+    length: {
+      type: [Number, String],
+      default: 1,
+      validator: val => val % 1 === 0
+    },
+    totalVisible: [Number, String],
+    firstIcon: {
+      type: IconValue,
+      default: '$first'
+    },
     prevIcon: {
-      type: String,
+      type: IconValue,
       default: '$prev'
     },
     nextIcon: {
-      type: String,
+      type: IconValue,
       default: '$next'
     },
-    firstIcon: {
+    lastIcon: {
+      type: IconValue,
+      default: '$last'
+    },
+    ariaLabel: {
       type: String,
-      default: '$first'
+      default: '$vuetify.pagination.ariaLabel.root'
     },
-    lastIcon: {
+    pageAriaLabel: {
       type: String,
-      default: '$last'
+      default: '$vuetify.pagination.ariaLabel.page'
     },
-    itemsPerPageText: {
+    currentPageAriaLabel: {
       type: String,
-      default: '$vuetify.dataFooter.itemsPerPageText'
+      default: '$vuetify.pagination.ariaLabel.currentPage'
     },
-    pageText: {
+    firstAriaLabel: {
       type: String,
-      default: '$vuetify.dataFooter.pageText'
+      default: '$vuetify.pagination.ariaLabel.first'
     },
-    firstPageLabel: {
+    previousAriaLabel: {
       type: String,
-      default: '$vuetify.dataFooter.firstPage'
+      default: '$vuetify.pagination.ariaLabel.previous'
     },
-    prevPageLabel: {
+    nextAriaLabel: {
       type: String,
-      default: '$vuetify.dataFooter.prevPage'
+      default: '$vuetify.pagination.ariaLabel.next'
     },
-    nextPageLabel: {
+    lastAriaLabel: {
       type: String,
-      default: '$vuetify.dataFooter.nextPage'
+      default: '$vuetify.pagination.ariaLabel.last'
     },
-    lastPageLabel: {
+    ellipsis: {
       type: String,
-      default: '$vuetify.dataFooter.lastPage'
+      default: '...'
     },
-    itemsPerPageOptions: {
-      type: Array,
-      default: () => [{
-        value: 10,
-        title: '10'
-      }, {
-        value: 25,
-        title: '25'
-      }, {
-        value: 50,
-        title: '50'
-      }, {
-        value: 100,
-        title: '100'
-      }, {
-        value: -1,
-        title: '$vuetify.dataFooter.itemsPerPageAll'
-      }]
+    showFirstLastPage: Boolean,
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'nav'
+    }),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'VPagination');
+  const VPagination = genericComponent()({
+    name: 'VPagination',
+    props: makeVPaginationProps(),
+    emits: {
+      'update:modelValue': value => true,
+      first: value => true,
+      prev: value => true,
+      next: value => true,
+      last: value => true
     },
-    showCurrentPage: Boolean
-  }, 'VDataTableFooter');
-  const VDataTableFooter = genericComponent()({
-    name: 'VDataTableFooter',
-    props: makeVDataTableFooterProps(),
     setup(props, _ref) {
       let {
-        slots
+        slots,
+        emit
       } = _ref;
+      const page = useProxiedModel(props, 'modelValue');
       const {
-        t
+        t,
+        n
       } = useLocale();
       const {
-        page,
-        pageCount,
-        startIndex,
-        stopIndex,
-        itemsLength,
-        itemsPerPage,
-        setItemsPerPage
-      } = usePagination();
-      const itemsPerPageOptions = vue.computed(() => props.itemsPerPageOptions.map(option => {
-        if (typeof option === 'number') {
-          return {
-            value: option,
-            title: option === -1 ? t('$vuetify.dataFooter.itemsPerPageAll') : String(option)
-          };
+        isRtl
+      } = useRtl();
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        width
+      } = useDisplay();
+      const maxButtons = vue.shallowRef(-1);
+      provideDefaults(undefined, {
+        scoped: true
+      });
+      const {
+        resizeRef
+      } = useResizeObserver(entries => {
+        if (!entries.length) return;
+        const {
+          target,
+          contentRect
+        } = entries[0];
+        const firstItem = target.querySelector('.v-pagination__list > *');
+        if (!firstItem) return;
+        const totalWidth = contentRect.width;
+        const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
+        maxButtons.value = getMax(totalWidth, itemWidth);
+      });
+      const length = vue.computed(() => parseInt(props.length, 10));
+      const start = vue.computed(() => parseInt(props.start, 10));
+      const totalVisible = vue.computed(() => {
+        if (props.totalVisible != null) return parseInt(props.totalVisible, 10);else if (maxButtons.value >= 0) return maxButtons.value;
+        return getMax(width.value, 58);
+      });
+      function getMax(totalWidth, itemWidth) {
+        const minButtons = props.showFirstLastPage ? 5 : 3;
+        return Math.max(0, Math.floor(
+        // Round to two decimal places to avoid floating point errors
+        +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
+      }
+      const range = vue.computed(() => {
+        if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
+        if (totalVisible.value <= 0) return [];else if (totalVisible.value === 1) return [page.value];
+        if (length.value <= totalVisible.value) {
+          return createRange(length.value, start.value);
         }
-        return {
-          ...option,
-          title: t(option.title)
-        };
-      }));
-      return () => vue.createVNode("div", {
-        "class": "v-data-table-footer"
-      }, [slots.prepend?.(), vue.createVNode("div", {
-        "class": "v-data-table-footer__items-per-page"
-      }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
-        "items": itemsPerPageOptions.value,
-        "modelValue": itemsPerPage.value,
-        "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
-        "density": "compact",
-        "variant": "outlined",
-        "hide-details": true
-      }, null)]), vue.createVNode("div", {
-        "class": "v-data-table-footer__info"
-      }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
-        "class": "v-data-table-footer__pagination"
-      }, [vue.createVNode(VBtn, {
-        "icon": props.firstIcon,
-        "variant": "plain",
-        "onClick": () => page.value = 1,
-        "disabled": page.value === 1,
-        "aria-label": t(props.firstPageLabel)
-      }, null), vue.createVNode(VBtn, {
-        "icon": props.prevIcon,
-        "variant": "plain",
-        "onClick": () => page.value = Math.max(1, page.value - 1),
-        "disabled": page.value === 1,
-        "aria-label": t(props.prevPageLabel)
-      }, null), props.showCurrentPage && vue.createVNode("span", {
-        "key": "page",
-        "class": "v-data-table-footer__page"
-      }, [page.value]), vue.createVNode(VBtn, {
-        "icon": props.nextIcon,
-        "variant": "plain",
-        "onClick": () => page.value = Math.min(pageCount.value, page.value + 1),
-        "disabled": page.value === pageCount.value,
-        "aria-label": t(props.nextPageLabel)
-      }, null), vue.createVNode(VBtn, {
-        "icon": props.lastIcon,
-        "variant": "plain",
-        "onClick": () => page.value = pageCount.value,
-        "disabled": page.value === pageCount.value,
-        "aria-label": t(props.lastPageLabel)
-      }, null)])]);
-    }
-  });
-
-  // Types
+        const even = totalVisible.value % 2 === 0;
+        const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
+        const left = even ? middle : middle + 1;
+        const right = length.value - middle;
+        if (left - page.value >= 0) {
+          return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
+        } else if (page.value - right >= (even ? 1 : 0)) {
+          const rangeLength = totalVisible.value - 1;
+          const rangeStart = length.value - rangeLength + start.value;
+          return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
+        } else {
+          const rangeLength = Math.max(1, totalVisible.value - 3);
+          const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
+          return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
+        }
+      });
 
-  const VDataTableColumn = defineFunctionalComponent({
-    align: {
-      type: String,
+      // TODO: 'first' | 'prev' | 'next' | 'last' does not work here?
+      function setValue(e, value, event) {
+        e.preventDefault();
+        page.value = value;
+        event && emit(event, value);
+      }
+      const {
+        refs,
+        updateRef
+      } = useRefs();
+      provideDefaults({
+        VPaginationBtn: {
+          color: vue.toRef(props, 'color'),
+          border: vue.toRef(props, 'border'),
+          density: vue.toRef(props, 'density'),
+          size: vue.toRef(props, 'size'),
+          variant: vue.toRef(props, 'variant'),
+          rounded: vue.toRef(props, 'rounded'),
+          elevation: vue.toRef(props, 'elevation')
+        }
+      });
+      const items = vue.computed(() => {
+        return range.value.map((item, index) => {
+          const ref = e => updateRef(e, index);
+          if (typeof item === 'string') {
+            return {
+              isActive: false,
+              key: `ellipsis-${index}`,
+              page: item,
+              props: {
+                ref,
+                ellipsis: true,
+                icon: true,
+                disabled: true
+              }
+            };
+          } else {
+            const isActive = item === page.value;
+            return {
+              isActive,
+              key: item,
+              page: n(item),
+              props: {
+                ref,
+                ellipsis: false,
+                icon: true,
+                disabled: !!props.disabled || +props.length < 2,
+                color: isActive ? props.activeColor : props.color,
+                ariaCurrent: isActive,
+                ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
+                onClick: e => setValue(e, item)
+              }
+            };
+          }
+        });
+      });
+      const controls = vue.computed(() => {
+        const prevDisabled = !!props.disabled || page.value <= start.value;
+        const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
+        return {
+          first: props.showFirstLastPage ? {
+            icon: isRtl.value ? props.lastIcon : props.firstIcon,
+            onClick: e => setValue(e, start.value, 'first'),
+            disabled: prevDisabled,
+            ariaLabel: t(props.firstAriaLabel),
+            ariaDisabled: prevDisabled
+          } : undefined,
+          prev: {
+            icon: isRtl.value ? props.nextIcon : props.prevIcon,
+            onClick: e => setValue(e, page.value - 1, 'prev'),
+            disabled: prevDisabled,
+            ariaLabel: t(props.previousAriaLabel),
+            ariaDisabled: prevDisabled
+          },
+          next: {
+            icon: isRtl.value ? props.prevIcon : props.nextIcon,
+            onClick: e => setValue(e, page.value + 1, 'next'),
+            disabled: nextDisabled,
+            ariaLabel: t(props.nextAriaLabel),
+            ariaDisabled: nextDisabled
+          },
+          last: props.showFirstLastPage ? {
+            icon: isRtl.value ? props.firstIcon : props.lastIcon,
+            onClick: e => setValue(e, start.value + length.value - 1, 'last'),
+            disabled: nextDisabled,
+            ariaLabel: t(props.lastAriaLabel),
+            ariaDisabled: nextDisabled
+          } : undefined
+        };
+      });
+      function updateFocus() {
+        const currentIndex = page.value - start.value;
+        refs.value[currentIndex]?.$el.focus();
+      }
+      function onKeydown(e) {
+        if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
+          page.value = page.value - 1;
+          vue.nextTick(updateFocus);
+        } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
+          page.value = page.value + 1;
+          vue.nextTick(updateFocus);
+        }
+      }
+      useRender(() => vue.createVNode(props.tag, {
+        "ref": resizeRef,
+        "class": ['v-pagination', themeClasses.value, props.class],
+        "style": props.style,
+        "role": "navigation",
+        "aria-label": t(props.ariaLabel),
+        "onKeydown": onKeydown,
+        "data-test": "v-pagination-root"
+      }, {
+        default: () => [vue.createVNode("ul", {
+          "class": "v-pagination__list"
+        }, [props.showFirstLastPage && vue.createVNode("li", {
+          "key": "first",
+          "class": "v-pagination__first",
+          "data-test": "v-pagination-first"
+        }, [slots.first ? slots.first(controls.value.first) : vue.createVNode(VBtn, vue.mergeProps({
+          "_as": "VPaginationBtn"
+        }, controls.value.first), null)]), vue.createVNode("li", {
+          "key": "prev",
+          "class": "v-pagination__prev",
+          "data-test": "v-pagination-prev"
+        }, [slots.prev ? slots.prev(controls.value.prev) : vue.createVNode(VBtn, vue.mergeProps({
+          "_as": "VPaginationBtn"
+        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createVNode("li", {
+          "key": item.key,
+          "class": ['v-pagination__item', {
+            'v-pagination__item--is-active': item.isActive
+          }],
+          "data-test": "v-pagination-item"
+        }, [slots.item ? slots.item(item) : vue.createVNode(VBtn, vue.mergeProps({
+          "_as": "VPaginationBtn"
+        }, item.props), {
+          default: () => [item.page]
+        })])), vue.createVNode("li", {
+          "key": "next",
+          "class": "v-pagination__next",
+          "data-test": "v-pagination-next"
+        }, [slots.next ? slots.next(controls.value.next) : vue.createVNode(VBtn, vue.mergeProps({
+          "_as": "VPaginationBtn"
+        }, controls.value.next), null)]), props.showFirstLastPage && vue.createVNode("li", {
+          "key": "last",
+          "class": "v-pagination__last",
+          "data-test": "v-pagination-last"
+        }, [slots.last ? slots.last(controls.value.last) : vue.createVNode(VBtn, vue.mergeProps({
+          "_as": "VPaginationBtn"
+        }, controls.value.last), null)])])]
+      }));
+      return {};
+    }
+  });
+
+  // Types
+
+  const makeVDataTableFooterProps = propsFactory({
+    prevIcon: {
+      type: String,
+      default: '$prev'
+    },
+    nextIcon: {
+      type: String,
+      default: '$next'
+    },
+    firstIcon: {
+      type: String,
+      default: '$first'
+    },
+    lastIcon: {
+      type: String,
+      default: '$last'
+    },
+    itemsPerPageText: {
+      type: String,
+      default: '$vuetify.dataFooter.itemsPerPageText'
+    },
+    pageText: {
+      type: String,
+      default: '$vuetify.dataFooter.pageText'
+    },
+    firstPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.firstPage'
+    },
+    prevPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.prevPage'
+    },
+    nextPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.nextPage'
+    },
+    lastPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.lastPage'
+    },
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => [{
+        value: 10,
+        title: '10'
+      }, {
+        value: 25,
+        title: '25'
+      }, {
+        value: 50,
+        title: '50'
+      }, {
+        value: 100,
+        title: '100'
+      }, {
+        value: -1,
+        title: '$vuetify.dataFooter.itemsPerPageAll'
+      }]
+    },
+    showCurrentPage: Boolean
+  }, 'VDataTableFooter');
+  const VDataTableFooter = genericComponent()({
+    name: 'VDataTableFooter',
+    props: makeVDataTableFooterProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const {
+        page,
+        pageCount,
+        startIndex,
+        stopIndex,
+        itemsLength,
+        itemsPerPage,
+        setItemsPerPage
+      } = usePagination();
+      const itemsPerPageOptions = vue.computed(() => props.itemsPerPageOptions.map(option => {
+        if (typeof option === 'number') {
+          return {
+            value: option,
+            title: option === -1 ? t('$vuetify.dataFooter.itemsPerPageAll') : String(option)
+          };
+        }
+        return {
+          ...option,
+          title: t(option.title)
+        };
+      }));
+      useRender(() => vue.createVNode("div", {
+        "class": "v-data-table-footer"
+      }, [slots.prepend?.(), vue.createVNode("div", {
+        "class": "v-data-table-footer__items-per-page"
+      }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+        "items": itemsPerPageOptions.value,
+        "modelValue": itemsPerPage.value,
+        "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
+        "density": "compact",
+        "variant": "outlined",
+        "hide-details": true
+      }, null)]), vue.createVNode("div", {
+        "class": "v-data-table-footer__info"
+      }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
+        "class": "v-data-table-footer__pagination"
+      }, [vue.createVNode(VPagination, {
+        "modelValue": page.value,
+        "onUpdate:modelValue": $event => page.value = $event,
+        "density": "comfortable",
+        "first-aria-label": props.firstPageLabel,
+        "last-aria-label": props.lastPageLabel,
+        "length": pageCount.value,
+        "next-aria-label": props.nextPageLabel,
+        "prev-aria-label": props.prevPageLabel,
+        "rounded": true,
+        "show-first-last-page": true,
+        "total-visible": props.showCurrentPage ? 1 : 0,
+        "variant": "plain"
+      }, null)])]));
+      return {};
+    }
+  });
+
+  // Types
+
+  const VDataTableColumn = defineFunctionalComponent({
+    align: {
+      type: String,
       default: 'start'
     },
     fixed: Boolean,
@@ -17738,7 +18080,7 @@
           }, loaderClasses.value],
           "style": {
             width: convertToUnit(column.width),
-            minWidth: convertToUnit(column.width),
+            minWidth: convertToUnit(column.minWidth),
             ...getFixedStyles(column, y)
           },
           "colspan": column.colspan,
@@ -18373,7 +18715,7 @@
           default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
             "items": paginatedItems.value
           }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -19246,21 +19588,20 @@
       // model comes in always as array
       // leaves as array if multiple
       const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v));
-      // shorthand to access the first value in the model or a fresh date
-      const _model = vue.computed(() => {
-        const value = model.value?.[0];
-        return value && adapter.isValid(value) ? value : adapter.date();
+      const displayValue = vue.computed(() => {
+        if (model.value.length > 0) return adapter.date(model.value[0]);
+        if (props.min) return adapter.date(props.min);
+        if (Array.isArray(props.allowedDates)) return adapter.date(props.allowedDates[0]);
+        return adapter.date();
       });
       const year = useProxiedModel(props, 'year', undefined, v => {
-        let date = adapter.date(_model.value);
-        if (v != null) date = adapter.setYear(date, Number(v));
-        return adapter.startOfYear(date);
+        const value = v != null ? Number(v) : adapter.getYear(displayValue.value);
+        return adapter.startOfYear(adapter.setYear(adapter.date(), value));
       }, v => adapter.getYear(v));
       const month = useProxiedModel(props, 'month', undefined, v => {
-        let date = adapter.date(_model.value);
-        if (v != null) date = adapter.setMonth(date, Number(v));
-        date = adapter.setYear(date, adapter.getYear(year.value));
-        return date;
+        const value = v != null ? Number(v) : adapter.getMonth(displayValue.value);
+        const date = adapter.setYear(adapter.date(), adapter.getYear(year.value));
+        return adapter.setMonth(date, value);
       }, v => adapter.getMonth(v));
       const weeksInMonth = vue.computed(() => {
         const weeks = adapter.getWeekArray(month.value);
@@ -19314,9 +19655,9 @@
       function isDisabled(value) {
         if (props.disabled) return true;
         const date = adapter.date(value);
-        if (props.min && adapter.isAfter(props.min, date)) return true;
-        if (props.max && adapter.isAfter(date, props.max)) return true;
-        if (Array.isArray(props.allowedDates)) {
+        if (props.min && adapter.isAfter(adapter.date(props.min), date)) return true;
+        if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
+        if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
           return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
         }
         if (typeof props.allowedDates === 'function') {
@@ -19338,6 +19679,10 @@
           model.value = [value];
         }
       }
+      vue.watch(displayValue, val => {
+        month.value = val;
+        year.value = val;
+      });
       return () => vue.createVNode("div", {
         "class": "v-date-picker-month"
       }, [props.showWeek && vue.createVNode("div", {
@@ -19709,22 +20054,22 @@
       function onClickNext() {
         if (month.value < 11) {
           month.value++;
-          emit('update:month', month.value);
         } else {
           year.value++;
           month.value = 0;
           emit('update:year', year.value);
         }
+        emit('update:month', month.value);
       }
       function onClickPrev() {
         if (month.value > 0) {
           month.value--;
-          emit('update:month', month.value);
         } else {
           year.value--;
           month.value = 11;
-          emit('update:year', month.value);
+          emit('update:year', year.value);
         }
+        emit('update:month', month.value);
       }
       function onClickMonth() {
         viewMode.value = viewMode.value === 'months' ? 'month' : 'months';
@@ -21452,577 +21797,244 @@
         }, {
           default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createVNode("div", vue.mergeProps({
             "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
-            "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
-            "onClick": () => isActive.value = false
-          }, scopeId), null)]
-        })]);
-      });
-      return {
-        isStuck
-      };
-    }
-  });
-
-  // Composables
-  const VNoSsr = defineComponent({
-    name: 'VNoSsr',
-    setup(_, _ref) {
-      let {
-        slots
-      } = _ref;
-      const show = useHydration();
-      return () => show.value && slots.default?.();
-    }
-  });
-
-  // Types
-
-  const makeVOtpInputProps = propsFactory({
-    autofocus: Boolean,
-    divider: String,
-    focusAll: Boolean,
-    label: {
-      type: String,
-      default: '$vuetify.input.otp'
-    },
-    length: {
-      type: [Number, String],
-      default: 6
-    },
-    modelValue: {
-      type: [Number, String],
-      default: undefined
-    },
-    placeholder: String,
-    type: {
-      type: String,
-      default: 'number'
-    },
-    ...makeDimensionProps(),
-    ...makeFocusProps(),
-    ...only(makeVFieldProps({
-      variant: 'outlined'
-    }), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'rounded', 'style', 'theme', 'variant'])
-  }, 'VOtpInput');
-  const VOtpInput = genericComponent()({
-    name: 'VOtpInput',
-    props: makeVOtpInputProps(),
-    emits: {
-      finish: val => true,
-      'update:focused': val => true,
-      'update:modelValue': val => true
-    },
-    setup(props, _ref) {
-      let {
-        attrs,
-        emit,
-        slots
-      } = _ref;
-      const {
-        dimensionStyles
-      } = useDimension(props);
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
-      const model = useProxiedModel(props, 'modelValue', '', val => String(val).split(''), val => val.join(''));
-      const {
-        t
-      } = useLocale();
-      const length = vue.computed(() => Number(props.length));
-      const fields = vue.computed(() => Array(length.value).fill(0));
-      const focusIndex = vue.ref(-1);
-      const contentRef = vue.ref();
-      const inputRef = vue.ref([]);
-      const current = vue.computed(() => inputRef.value[focusIndex.value]);
-      function onInput() {
-        // The maxlength attribute doesn't work for the number type input, so the text type is used.
-        // The following logic simulates the behavior of a number input.
-        if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {
-          current.value.value = '';
-          return;
-        }
-        const array = model.value.slice();
-        const value = current.value.value;
-        array[focusIndex.value] = value;
-        let target = null;
-        if (focusIndex.value > model.value.length) {
-          target = model.value.length + 1;
-        } else if (focusIndex.value + 1 !== length.value) {
-          target = 'next';
-        }
-        model.value = array;
-        if (target) focusChild(contentRef.value, target);
-      }
-      function onKeydown(e) {
-        const array = model.value.slice();
-        const index = focusIndex.value;
-        let target = null;
-        if (!['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) return;
-        e.preventDefault();
-        if (e.key === 'ArrowLeft') {
-          target = 'prev';
-        } else if (e.key === 'ArrowRight') {
-          target = 'next';
-        } else if (['Backspace', 'Delete'].includes(e.key)) {
-          array[focusIndex.value] = '';
-          model.value = array;
-          if (focusIndex.value > 0 && e.key === 'Backspace') {
-            target = 'prev';
-          } else {
-            requestAnimationFrame(() => {
-              inputRef.value[index]?.select();
-            });
-          }
-        }
-        requestAnimationFrame(() => {
-          if (target != null) {
-            focusChild(contentRef.value, target);
-          }
-        });
-      }
-      function onPaste(index, e) {
-        e.preventDefault();
-        e.stopPropagation();
-        model.value = (e?.clipboardData?.getData('Text') ?? '').split('');
-        inputRef.value?.[index].blur();
-      }
-      function reset() {
-        model.value = [];
-      }
-      function onFocus(e, index) {
-        focus();
-        focusIndex.value = index;
-      }
-      function onBlur() {
-        blur();
-        focusIndex.value = -1;
-      }
-      provideDefaults({
-        VField: {
-          color: vue.computed(() => props.color),
-          bgColor: vue.computed(() => props.color),
-          baseColor: vue.computed(() => props.baseColor),
-          disabled: vue.computed(() => props.disabled),
-          error: vue.computed(() => props.error),
-          variant: vue.computed(() => props.variant)
-        }
-      }, {
-        scoped: true
-      });
-      vue.watch(model, val => {
-        if (val.length === length.value) emit('finish', val.join(''));
-      }, {
-        deep: true
-      });
-      vue.watch(focusIndex, val => {
-        if (val < 0) return;
-        vue.nextTick(() => {
-          inputRef.value[val]?.select();
-        });
-      });
-      useRender(() => {
-        const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        return vue.createVNode("div", vue.mergeProps({
-          "class": ['v-otp-input', {
-            'v-otp-input--divided': !!props.divider
-          }, props.class],
-          "style": [props.style]
-        }, rootAttrs), [vue.createVNode("div", {
-          "ref": contentRef,
-          "class": "v-otp-input__content",
-          "style": [dimensionStyles.value]
-        }, [fields.value.map((_, i) => vue.createVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createVNode("span", {
-          "class": "v-otp-input__divider"
-        }, [props.divider]), vue.createVNode(VField, {
-          "focused": isFocused.value && props.focusAll || focusIndex.value === i,
-          "key": i
-        }, {
-          ...slots,
-          default: () => {
-            return vue.createVNode("input", {
-              "ref": val => inputRef.value[i] = val,
-              "aria-label": t(props.label, i + 1),
-              "autofocus": i === 0 && props.autofocus,
-              "autocomplete": "one-time-code",
-              "class": ['v-otp-input__field'],
-              "inputmode": props.type === 'number' ? 'numeric' : 'text',
-              "min": props.type === 'number' ? 0 : undefined,
-              "maxlength": "1",
-              "placeholder": props.placeholder,
-              "type": props.type === 'number' ? 'text' : props.type,
-              "value": model.value[i],
-              "onInput": onInput,
-              "onFocus": e => onFocus(e, i),
-              "onBlur": onBlur,
-              "onKeydown": onKeydown,
-              "onPaste": event => onPaste(i, event)
-            }, null);
-          }
-        })])), vue.createVNode("input", vue.mergeProps({
-          "class": "v-otp-input-input",
-          "type": "hidden"
-        }, inputAttrs, {
-          "value": model.value.join('')
-        }), null), vue.createVNode(VOverlay, {
-          "contained": true,
-          "content-class": "v-otp-input__loader",
-          "model-value": !!props.loading,
-          "persistent": true
-        }, {
-          default: () => [slots.loader?.() ?? vue.createVNode(VProgressCircular, {
-            "color": typeof props.loading === 'boolean' ? undefined : props.loading,
-            "indeterminate": true,
-            "size": "24",
-            "width": "2"
-          }, null)]
-        }), slots.default?.()])]);
+            "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
+            "onClick": () => isActive.value = false
+          }, scopeId), null)]
+        })]);
       });
       return {
-        blur: () => {
-          inputRef.value?.some(input => input.blur());
-        },
-        focus: () => {
-          inputRef.value?.[0].focus();
-        },
-        reset,
-        isFocused
+        isStuck
       };
     }
   });
 
-  // Utilities
-
-  // Types
-
-  function useRefs() {
-    const refs = vue.ref([]);
-    vue.onBeforeUpdate(() => refs.value = []);
-    function updateRef(e, i) {
-      refs.value[i] = e;
+  // Composables
+  const VNoSsr = defineComponent({
+    name: 'VNoSsr',
+    setup(_, _ref) {
+      let {
+        slots
+      } = _ref;
+      const show = useHydration();
+      return () => show.value && slots.default?.();
     }
-    return {
-      refs,
-      updateRef
-    };
-  }
+  });
 
   // Types
 
-  const makeVPaginationProps = propsFactory({
-    activeColor: String,
-    start: {
-      type: [Number, String],
-      default: 1
-    },
-    modelValue: {
-      type: Number,
-      default: props => props.start
+  const makeVOtpInputProps = propsFactory({
+    autofocus: Boolean,
+    divider: String,
+    focusAll: Boolean,
+    label: {
+      type: String,
+      default: '$vuetify.input.otp'
     },
-    disabled: Boolean,
     length: {
       type: [Number, String],
-      default: 1,
-      validator: val => val % 1 === 0
-    },
-    totalVisible: [Number, String],
-    firstIcon: {
-      type: IconValue,
-      default: '$first'
-    },
-    prevIcon: {
-      type: IconValue,
-      default: '$prev'
-    },
-    nextIcon: {
-      type: IconValue,
-      default: '$next'
-    },
-    lastIcon: {
-      type: IconValue,
-      default: '$last'
-    },
-    ariaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.root'
-    },
-    pageAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.page'
-    },
-    currentPageAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.currentPage'
-    },
-    firstAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.first'
-    },
-    previousAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.previous'
-    },
-    nextAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.next'
+      default: 6
     },
-    lastAriaLabel: {
-      type: String,
-      default: '$vuetify.pagination.ariaLabel.last'
+    modelValue: {
+      type: [Number, String],
+      default: undefined
     },
-    ellipsis: {
+    placeholder: String,
+    type: {
       type: String,
-      default: '...'
+      default: 'number'
     },
-    showFirstLastPage: Boolean,
-    ...makeBorderProps(),
-    ...makeComponentProps(),
-    ...makeDensityProps(),
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeTagProps({
-      tag: 'nav'
-    }),
-    ...makeThemeProps(),
-    ...makeVariantProps({
-      variant: 'text'
-    })
-  }, 'VPagination');
-  const VPagination = genericComponent()({
-    name: 'VPagination',
-    props: makeVPaginationProps(),
+    ...makeDimensionProps(),
+    ...makeFocusProps(),
+    ...only(makeVFieldProps({
+      variant: 'outlined'
+    }), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'rounded', 'style', 'theme', 'variant'])
+  }, 'VOtpInput');
+  const VOtpInput = genericComponent()({
+    name: 'VOtpInput',
+    props: makeVOtpInputProps(),
     emits: {
-      'update:modelValue': value => true,
-      first: value => true,
-      prev: value => true,
-      next: value => true,
-      last: value => true
+      finish: val => true,
+      'update:focused': val => true,
+      'update:modelValue': val => true
     },
     setup(props, _ref) {
       let {
-        slots,
-        emit
+        attrs,
+        emit,
+        slots
       } = _ref;
-      const page = useProxiedModel(props, 'modelValue');
-      const {
-        t,
-        n
-      } = useLocale();
-      const {
-        isRtl
-      } = useRtl();
       const {
-        themeClasses
-      } = provideTheme(props);
+        dimensionStyles
+      } = useDimension(props);
       const {
-        width
-      } = useDisplay();
-      const maxButtons = vue.shallowRef(-1);
-      provideDefaults(undefined, {
-        scoped: true
-      });
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
+      const model = useProxiedModel(props, 'modelValue', '', val => String(val).split(''), val => val.join(''));
       const {
-        resizeRef
-      } = useResizeObserver(entries => {
-        if (!entries.length) return;
-        const {
-          target,
-          contentRect
-        } = entries[0];
-        const firstItem = target.querySelector('.v-pagination__list > *');
-        if (!firstItem) return;
-        const totalWidth = contentRect.width;
-        const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
-        maxButtons.value = getMax(totalWidth, itemWidth);
-      });
-      const length = vue.computed(() => parseInt(props.length, 10));
-      const start = vue.computed(() => parseInt(props.start, 10));
-      const totalVisible = vue.computed(() => {
-        if (props.totalVisible) return parseInt(props.totalVisible, 10);else if (maxButtons.value >= 0) return maxButtons.value;
-        return getMax(width.value, 58);
-      });
-      function getMax(totalWidth, itemWidth) {
-        const minButtons = props.showFirstLastPage ? 5 : 3;
-        return Math.max(0, Math.floor(
-        // Round to two decimal places to avoid floating point errors
-        +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
-      }
-      const range = vue.computed(() => {
-        if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
-        if (totalVisible.value <= 1) return [page.value];
-        if (length.value <= totalVisible.value) {
-          return createRange(length.value, start.value);
+        t
+      } = useLocale();
+      const length = vue.computed(() => Number(props.length));
+      const fields = vue.computed(() => Array(length.value).fill(0));
+      const focusIndex = vue.ref(-1);
+      const contentRef = vue.ref();
+      const inputRef = vue.ref([]);
+      const current = vue.computed(() => inputRef.value[focusIndex.value]);
+      function onInput() {
+        // The maxlength attribute doesn't work for the number type input, so the text type is used.
+        // The following logic simulates the behavior of a number input.
+        if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {
+          current.value.value = '';
+          return;
         }
-        const even = totalVisible.value % 2 === 0;
-        const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
-        const left = even ? middle : middle + 1;
-        const right = length.value - middle;
-        if (left - page.value >= 0) {
-          return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
-        } else if (page.value - right >= (even ? 1 : 0)) {
-          const rangeLength = totalVisible.value - 1;
-          const rangeStart = length.value - rangeLength + start.value;
-          return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
-        } else {
-          const rangeLength = Math.max(1, totalVisible.value - 3);
-          const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
-          return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
+        const array = model.value.slice();
+        const value = current.value.value;
+        array[focusIndex.value] = value;
+        let target = null;
+        if (focusIndex.value > model.value.length) {
+          target = model.value.length + 1;
+        } else if (focusIndex.value + 1 !== length.value) {
+          target = 'next';
+        }
+        model.value = array;
+        if (target) focusChild(contentRef.value, target);
+      }
+      function onKeydown(e) {
+        const array = model.value.slice();
+        const index = focusIndex.value;
+        let target = null;
+        if (!['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) return;
+        e.preventDefault();
+        if (e.key === 'ArrowLeft') {
+          target = 'prev';
+        } else if (e.key === 'ArrowRight') {
+          target = 'next';
+        } else if (['Backspace', 'Delete'].includes(e.key)) {
+          array[focusIndex.value] = '';
+          model.value = array;
+          if (focusIndex.value > 0 && e.key === 'Backspace') {
+            target = 'prev';
+          } else {
+            requestAnimationFrame(() => {
+              inputRef.value[index]?.select();
+            });
+          }
         }
-      });
-
-      // TODO: 'first' | 'prev' | 'next' | 'last' does not work here?
-      function setValue(e, value, event) {
+        requestAnimationFrame(() => {
+          if (target != null) {
+            focusChild(contentRef.value, target);
+          }
+        });
+      }
+      function onPaste(index, e) {
         e.preventDefault();
-        page.value = value;
-        event && emit(event, value);
+        e.stopPropagation();
+        model.value = (e?.clipboardData?.getData('Text') ?? '').split('');
+        inputRef.value?.[index].blur();
+      }
+      function reset() {
+        model.value = [];
+      }
+      function onFocus(e, index) {
+        focus();
+        focusIndex.value = index;
+      }
+      function onBlur() {
+        blur();
+        focusIndex.value = -1;
       }
-      const {
-        refs,
-        updateRef
-      } = useRefs();
       provideDefaults({
-        VPaginationBtn: {
-          color: vue.toRef(props, 'color'),
-          border: vue.toRef(props, 'border'),
-          density: vue.toRef(props, 'density'),
-          size: vue.toRef(props, 'size'),
-          variant: vue.toRef(props, 'variant'),
-          rounded: vue.toRef(props, 'rounded'),
-          elevation: vue.toRef(props, 'elevation')
+        VField: {
+          color: vue.computed(() => props.color),
+          bgColor: vue.computed(() => props.color),
+          baseColor: vue.computed(() => props.baseColor),
+          disabled: vue.computed(() => props.disabled),
+          error: vue.computed(() => props.error),
+          variant: vue.computed(() => props.variant)
         }
+      }, {
+        scoped: true
       });
-      const items = vue.computed(() => {
-        return range.value.map((item, index) => {
-          const ref = e => updateRef(e, index);
-          if (typeof item === 'string') {
-            return {
-              isActive: false,
-              key: `ellipsis-${index}`,
-              page: item,
-              props: {
-                ref,
-                ellipsis: true,
-                icon: true,
-                disabled: true
-              }
-            };
-          } else {
-            const isActive = item === page.value;
-            return {
-              isActive,
-              key: item,
-              page: n(item),
-              props: {
-                ref,
-                ellipsis: false,
-                icon: true,
-                disabled: !!props.disabled || +props.length < 2,
-                color: isActive ? props.activeColor : props.color,
-                ariaCurrent: isActive,
-                ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
-                onClick: e => setValue(e, item)
-              }
-            };
-          }
+      vue.watch(model, val => {
+        if (val.length === length.value) emit('finish', val.join(''));
+      }, {
+        deep: true
+      });
+      vue.watch(focusIndex, val => {
+        if (val < 0) return;
+        vue.nextTick(() => {
+          inputRef.value[val]?.select();
         });
       });
-      const controls = vue.computed(() => {
-        const prevDisabled = !!props.disabled || page.value <= start.value;
-        const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
-        return {
-          first: props.showFirstLastPage ? {
-            icon: isRtl.value ? props.lastIcon : props.firstIcon,
-            onClick: e => setValue(e, start.value, 'first'),
-            disabled: prevDisabled,
-            ariaLabel: t(props.firstAriaLabel),
-            ariaDisabled: prevDisabled
-          } : undefined,
-          prev: {
-            icon: isRtl.value ? props.nextIcon : props.prevIcon,
-            onClick: e => setValue(e, page.value - 1, 'prev'),
-            disabled: prevDisabled,
-            ariaLabel: t(props.previousAriaLabel),
-            ariaDisabled: prevDisabled
-          },
-          next: {
-            icon: isRtl.value ? props.prevIcon : props.nextIcon,
-            onClick: e => setValue(e, page.value + 1, 'next'),
-            disabled: nextDisabled,
-            ariaLabel: t(props.nextAriaLabel),
-            ariaDisabled: nextDisabled
-          },
-          last: props.showFirstLastPage ? {
-            icon: isRtl.value ? props.firstIcon : props.lastIcon,
-            onClick: e => setValue(e, start.value + length.value - 1, 'last'),
-            disabled: nextDisabled,
-            ariaLabel: t(props.lastAriaLabel),
-            ariaDisabled: nextDisabled
-          } : undefined
-        };
+      useRender(() => {
+        const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        return vue.createVNode("div", vue.mergeProps({
+          "class": ['v-otp-input', {
+            'v-otp-input--divided': !!props.divider
+          }, props.class],
+          "style": [props.style]
+        }, rootAttrs), [vue.createVNode("div", {
+          "ref": contentRef,
+          "class": "v-otp-input__content",
+          "style": [dimensionStyles.value]
+        }, [fields.value.map((_, i) => vue.createVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createVNode("span", {
+          "class": "v-otp-input__divider"
+        }, [props.divider]), vue.createVNode(VField, {
+          "focused": isFocused.value && props.focusAll || focusIndex.value === i,
+          "key": i
+        }, {
+          ...slots,
+          default: () => {
+            return vue.createVNode("input", {
+              "ref": val => inputRef.value[i] = val,
+              "aria-label": t(props.label, i + 1),
+              "autofocus": i === 0 && props.autofocus,
+              "autocomplete": "one-time-code",
+              "class": ['v-otp-input__field'],
+              "disabled": props.disabled,
+              "inputmode": props.type === 'number' ? 'numeric' : 'text',
+              "min": props.type === 'number' ? 0 : undefined,
+              "maxlength": "1",
+              "placeholder": props.placeholder,
+              "type": props.type === 'number' ? 'text' : props.type,
+              "value": model.value[i],
+              "onInput": onInput,
+              "onFocus": e => onFocus(e, i),
+              "onBlur": onBlur,
+              "onKeydown": onKeydown,
+              "onPaste": event => onPaste(i, event)
+            }, null);
+          }
+        })])), vue.createVNode("input", vue.mergeProps({
+          "class": "v-otp-input-input",
+          "type": "hidden"
+        }, inputAttrs, {
+          "value": model.value.join('')
+        }), null), vue.createVNode(VOverlay, {
+          "contained": true,
+          "content-class": "v-otp-input__loader",
+          "model-value": !!props.loading,
+          "persistent": true
+        }, {
+          default: () => [slots.loader?.() ?? vue.createVNode(VProgressCircular, {
+            "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+            "indeterminate": true,
+            "size": "24",
+            "width": "2"
+          }, null)]
+        }), slots.default?.()])]);
       });
-      function updateFocus() {
-        const currentIndex = page.value - start.value;
-        refs.value[currentIndex]?.$el.focus();
-      }
-      function onKeydown(e) {
-        if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
-          page.value = page.value - 1;
-          vue.nextTick(updateFocus);
-        } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
-          page.value = page.value + 1;
-          vue.nextTick(updateFocus);
-        }
-      }
-      useRender(() => vue.createVNode(props.tag, {
-        "ref": resizeRef,
-        "class": ['v-pagination', themeClasses.value, props.class],
-        "style": props.style,
-        "role": "navigation",
-        "aria-label": t(props.ariaLabel),
-        "onKeydown": onKeydown,
-        "data-test": "v-pagination-root"
-      }, {
-        default: () => [vue.createVNode("ul", {
-          "class": "v-pagination__list"
-        }, [props.showFirstLastPage && vue.createVNode("li", {
-          "key": "first",
-          "class": "v-pagination__first",
-          "data-test": "v-pagination-first"
-        }, [slots.first ? slots.first(controls.value.first) : vue.createVNode(VBtn, vue.mergeProps({
-          "_as": "VPaginationBtn"
-        }, controls.value.first), null)]), vue.createVNode("li", {
-          "key": "prev",
-          "class": "v-pagination__prev",
-          "data-test": "v-pagination-prev"
-        }, [slots.prev ? slots.prev(controls.value.prev) : vue.createVNode(VBtn, vue.mergeProps({
-          "_as": "VPaginationBtn"
-        }, controls.value.prev), null)]), items.value.map((item, index) => vue.createVNode("li", {
-          "key": item.key,
-          "class": ['v-pagination__item', {
-            'v-pagination__item--is-active': item.isActive
-          }],
-          "data-test": "v-pagination-item"
-        }, [slots.item ? slots.item(item) : vue.createVNode(VBtn, vue.mergeProps({
-          "_as": "VPaginationBtn"
-        }, item.props), {
-          default: () => [item.page]
-        })])), vue.createVNode("li", {
-          "key": "next",
-          "class": "v-pagination__next",
-          "data-test": "v-pagination-next"
-        }, [slots.next ? slots.next(controls.value.next) : vue.createVNode(VBtn, vue.mergeProps({
-          "_as": "VPaginationBtn"
-        }, controls.value.next), null)]), props.showFirstLastPage && vue.createVNode("li", {
-          "key": "last",
-          "class": "v-pagination__last",
-          "data-test": "v-pagination-last"
-        }, [slots.last ? slots.last(controls.value.last) : vue.createVNode(VBtn, vue.mergeProps({
-          "_as": "VPaginationBtn"
-        }, controls.value.last), null)])])]
-      }));
-      return {};
+      return {
+        blur: () => {
+          inputRef.value?.some(input => input.blur());
+        },
+        focus: () => {
+          inputRef.value?.[0].focus();
+        },
+        reset,
+        isFocused
+      };
     }
   });
 
@@ -23084,7 +23096,7 @@
           "class": ['v-slide-group__prev', {
             'v-slide-group__prev--disabled': !hasPrev.value
           }],
-          "onClick": () => scrollTo('prev')
+          "onClick": () => hasPrev.value && scrollTo('prev')
         }, [slots.prev?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
             "icon": isRtl.value ? props.nextIcon : props.prevIcon
@@ -23109,7 +23121,7 @@
           "class": ['v-slide-group__next', {
             'v-slide-group__next--disabled': !hasNext.value
           }],
-          "onClick": () => scrollTo('next')
+          "onClick": () => hasNext.value && scrollTo('next')
         }, [slots.next?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
             "icon": isRtl.value ? props.prevIcon : props.nextIcon
@@ -24002,11 +24014,12 @@
           "maxWidth": props.fixed ? 300 : undefined,
           "onGroup:selected": updateSlider
         }), {
-          default: () => [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
+          ...slots,
+          default: () => vue.createVNode(vue.Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
             "ref": sliderEl,
             "class": ['v-tab__slider', sliderColorClasses.value],
             "style": sliderColorStyles.value
-          }, null)]
+          }, null)])
         });
       });
       return {};
@@ -25148,7 +25161,8 @@
       app.provide(ThemeSymbol, theme);
       app.provide(IconSymbol, icons);
       app.provide(LocaleSymbol, locale);
-      app.provide(DateAdapterSymbol, date);
+      app.provide(DateOptionsSymbol, date.options);
+      app.provide(DateAdapterSymbol, date.instance);
       if (IN_BROWSER && options.ssr) {
         if (app.$nuxt) {
           app.$nuxt.hook('app:suspense:resolve', () => {
@@ -25194,7 +25208,7 @@
       date
     };
   }
-  const version$1 = "3.4.1";
+  const version$1 = "3.4.3";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25208,7 +25222,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.4.1";
+  const version = "3.4.3";
 
   /* eslint-disable local-rules/sort-imports */