vuetify 3.4.2 → 3.4.3

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.4.2
+* Vuetify v3.4.3
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, withModifiers, toDisplayString, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -4967,6 +4967,13 @@ function usePosition(props) {
 }
 
 // Utilities
+
+// Types
+
+function useRoute() {
+  const vm = getCurrentInstance('useRoute');
+  return computed(() => vm?.proxy?.$route);
+}
 function useRouter() {
   return getCurrentInstance('useRouter')?.proxy?.$router;
 }
@@ -4984,12 +4991,17 @@ function useLink(props, attrs) {
     };
   }
   const link = props.to ? RouterLink.useLink(props) : undefined;
+  const route = useRoute();
   return {
     isLink,
     isClickable,
     route: link?.route,
     navigate: link?.navigate,
-    isActive: link && computed(() => props.exact ? link.isExactActive?.value : link.isActive?.value),
+    isActive: link && 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: computed(() => props.to ? link?.route.value.href : props.href)
   };
 }
@@ -5806,7 +5818,10 @@ const makeSelectionControlGroupProps = propsFactory({
     default: null
   },
   name: String,
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: null
+  },
   modelValue: null,
   type: String,
   valueComparator: {
@@ -11445,7 +11460,9 @@ const VSelect = genericComponent()({
                   item,
                   index,
                   props: itemProps
-                }) ?? createVNode(VListItem, itemProps, {
+                }) ?? createVNode(VListItem, mergeProps(itemProps, {
+                  "role": "option"
+                }), {
                   prepend: _ref3 => {
                     let {
                       isSelected
@@ -13407,7 +13424,7 @@ const VCarousel = genericComponent()({
               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({
@@ -16802,13 +16819,11 @@ class VuetifyDateAdapter {
   }
 }
 
-// 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',
@@ -16854,22 +16869,28 @@ function createDate(options, locale) {
       zhHant: 'zh-TW'
     }
   }, options);
-  const instance = reactive(typeof date.adapter === 'function'
+  return {
+    options: _options,
+    instance: createInstance(_options, locale)
+  };
+}
+function createInstance(options, locale) {
+  const instance = 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);
   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 = inject$1(DateAdapterSymbol);
-  if (!instance) throw new Error('[Vuetify] Could not find injected date adapter');
-  return instance;
+  const options = inject$1(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
@@ -17210,152 +17231,473 @@ const VDataIterator = genericComponent()({
   }
 });
 
+// Utilities
+
 // Types
 
-const makeVDataTableFooterProps = propsFactory({
+function useRefs() {
+  const refs = ref([]);
+  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 = 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 = 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 = computed(() => parseInt(props.length, 10));
+    const start = computed(() => parseInt(props.start, 10));
+    const totalVisible = 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 = 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 () => createVNode("div", {
-      "class": "v-data-table-footer"
-    }, [slots.prepend?.(), createVNode("div", {
-      "class": "v-data-table-footer__items-per-page"
-    }, [createVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
-      "items": itemsPerPageOptions.value,
-      "modelValue": itemsPerPage.value,
-      "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
-      "density": "compact",
-      "variant": "outlined",
-      "hide-details": true
-    }, null)]), createVNode("div", {
-      "class": "v-data-table-footer__info"
-    }, [createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createVNode("div", {
-      "class": "v-data-table-footer__pagination"
-    }, [createVNode(VBtn, {
-      "icon": props.firstIcon,
-      "variant": "plain",
-      "onClick": () => page.value = 1,
-      "disabled": page.value === 1,
-      "aria-label": t(props.firstPageLabel)
-    }, null), 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 && createVNode("span", {
-      "key": "page",
-      "class": "v-data-table-footer__page"
-    }, [page.value]), 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), 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: toRef(props, 'color'),
+        border: toRef(props, 'border'),
+        density: toRef(props, 'density'),
+        size: toRef(props, 'size'),
+        variant: toRef(props, 'variant'),
+        rounded: toRef(props, 'rounded'),
+        elevation: toRef(props, 'elevation')
+      }
+    });
+    const items = 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 = 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;
+        nextTick(updateFocus);
+      } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
+        page.value = page.value + 1;
+        nextTick(updateFocus);
+      }
+    }
+    useRender(() => 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: () => [createVNode("ul", {
+        "class": "v-pagination__list"
+      }, [props.showFirstLastPage && createVNode("li", {
+        "key": "first",
+        "class": "v-pagination__first",
+        "data-test": "v-pagination-first"
+      }, [slots.first ? slots.first(controls.value.first) : createVNode(VBtn, mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.first), null)]), createVNode("li", {
+        "key": "prev",
+        "class": "v-pagination__prev",
+        "data-test": "v-pagination-prev"
+      }, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.prev), null)]), items.value.map((item, index) => 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) : createVNode(VBtn, mergeProps({
+        "_as": "VPaginationBtn"
+      }, item.props), {
+        default: () => [item.page]
+      })])), createVNode("li", {
+        "key": "next",
+        "class": "v-pagination__next",
+        "data-test": "v-pagination-next"
+      }, [slots.next ? slots.next(controls.value.next) : createVNode(VBtn, mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.next), null)]), props.showFirstLastPage && createVNode("li", {
+        "key": "last",
+        "class": "v-pagination__last",
+        "data-test": "v-pagination-last"
+      }, [slots.last ? slots.last(controls.value.last) : createVNode(VBtn, 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 = 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(() => createVNode("div", {
+      "class": "v-data-table-footer"
+    }, [slots.prepend?.(), createVNode("div", {
+      "class": "v-data-table-footer__items-per-page"
+    }, [createVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
+      "items": itemsPerPageOptions.value,
+      "modelValue": itemsPerPage.value,
+      "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
+      "density": "compact",
+      "variant": "outlined",
+      "hide-details": true
+    }, null)]), createVNode("div", {
+      "class": "v-data-table-footer__info"
+    }, [createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createVNode("div", {
+      "class": "v-data-table-footer__pagination"
+    }, [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,
@@ -17734,7 +18076,7 @@ const VDataTableHeaders = genericComponent()({
         }, loaderClasses.value],
         "style": {
           width: convertToUnit(column.width),
-          minWidth: convertToUnit(column.width),
+          minWidth: convertToUnit(column.minWidth),
           ...getFixedStyles(column, y)
         },
         "colspan": column.colspan,
@@ -18369,7 +18711,7 @@ const VDataTable = genericComponent()({
         default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), createVNode("thead", null, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, 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) : createVNode(Fragment, null, [createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -19242,21 +19584,20 @@ const VDatePickerMonth = genericComponent()({
     // 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 = computed(() => {
-      const value = model.value?.[0];
-      return value && adapter.isValid(value) ? value : adapter.date();
+    const displayValue = 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 = computed(() => {
       const weeks = adapter.getWeekArray(month.value);
@@ -19310,9 +19651,9 @@ const VDatePickerMonth = genericComponent()({
     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') {
@@ -19334,6 +19675,10 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
+    watch(displayValue, val => {
+      month.value = val;
+      year.value = val;
+    });
     return () => createVNode("div", {
       "class": "v-date-picker-month"
     }, [props.showWeek && createVNode("div", {
@@ -19705,22 +20050,22 @@ const VDatePicker = genericComponent()({
     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';
@@ -21448,577 +21793,244 @@ const VNavigationDrawer = genericComponent()({
       }, {
         default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createVNode("div", 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 = computed(() => Number(props.length));
-    const fields = computed(() => Array(length.value).fill(0));
-    const focusIndex = ref(-1);
-    const contentRef = ref();
-    const inputRef = ref([]);
-    const current = 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: computed(() => props.color),
-        bgColor: computed(() => props.color),
-        baseColor: computed(() => props.baseColor),
-        disabled: computed(() => props.disabled),
-        error: computed(() => props.error),
-        variant: computed(() => props.variant)
-      }
-    }, {
-      scoped: true
-    });
-    watch(model, val => {
-      if (val.length === length.value) emit('finish', val.join(''));
-    }, {
-      deep: true
-    });
-    watch(focusIndex, val => {
-      if (val < 0) return;
-      nextTick(() => {
-        inputRef.value[val]?.select();
-      });
-    });
-    useRender(() => {
-      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-      return createVNode("div", mergeProps({
-        "class": ['v-otp-input', {
-          'v-otp-input--divided': !!props.divider
-        }, props.class],
-        "style": [props.style]
-      }, rootAttrs), [createVNode("div", {
-        "ref": contentRef,
-        "class": "v-otp-input__content",
-        "style": [dimensionStyles.value]
-      }, [fields.value.map((_, i) => createVNode(Fragment, null, [props.divider && i !== 0 && createVNode("span", {
-        "class": "v-otp-input__divider"
-      }, [props.divider]), createVNode(VField, {
-        "focused": isFocused.value && props.focusAll || focusIndex.value === i,
-        "key": i
-      }, {
-        ...slots,
-        default: () => {
-          return 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);
-        }
-      })])), createVNode("input", mergeProps({
-        "class": "v-otp-input-input",
-        "type": "hidden"
-      }, inputAttrs, {
-        "value": model.value.join('')
-      }), null), createVNode(VOverlay, {
-        "contained": true,
-        "content-class": "v-otp-input__loader",
-        "model-value": !!props.loading,
-        "persistent": true
-      }, {
-        default: () => [slots.loader?.() ?? 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 = ref([]);
-  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 = 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 = computed(() => parseInt(props.length, 10));
-    const start = computed(() => parseInt(props.start, 10));
-    const totalVisible = 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 = 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 = computed(() => Number(props.length));
+    const fields = computed(() => Array(length.value).fill(0));
+    const focusIndex = ref(-1);
+    const contentRef = ref();
+    const inputRef = ref([]);
+    const current = 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: toRef(props, 'color'),
-        border: toRef(props, 'border'),
-        density: toRef(props, 'density'),
-        size: toRef(props, 'size'),
-        variant: toRef(props, 'variant'),
-        rounded: toRef(props, 'rounded'),
-        elevation: toRef(props, 'elevation')
+      VField: {
+        color: computed(() => props.color),
+        bgColor: computed(() => props.color),
+        baseColor: computed(() => props.baseColor),
+        disabled: computed(() => props.disabled),
+        error: computed(() => props.error),
+        variant: computed(() => props.variant)
       }
+    }, {
+      scoped: true
     });
-    const items = 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)
-            }
-          };
-        }
+    watch(model, val => {
+      if (val.length === length.value) emit('finish', val.join(''));
+    }, {
+      deep: true
+    });
+    watch(focusIndex, val => {
+      if (val < 0) return;
+      nextTick(() => {
+        inputRef.value[val]?.select();
       });
     });
-    const controls = 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 createVNode("div", mergeProps({
+        "class": ['v-otp-input', {
+          'v-otp-input--divided': !!props.divider
+        }, props.class],
+        "style": [props.style]
+      }, rootAttrs), [createVNode("div", {
+        "ref": contentRef,
+        "class": "v-otp-input__content",
+        "style": [dimensionStyles.value]
+      }, [fields.value.map((_, i) => createVNode(Fragment, null, [props.divider && i !== 0 && createVNode("span", {
+        "class": "v-otp-input__divider"
+      }, [props.divider]), createVNode(VField, {
+        "focused": isFocused.value && props.focusAll || focusIndex.value === i,
+        "key": i
+      }, {
+        ...slots,
+        default: () => {
+          return 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);
+        }
+      })])), createVNode("input", mergeProps({
+        "class": "v-otp-input-input",
+        "type": "hidden"
+      }, inputAttrs, {
+        "value": model.value.join('')
+      }), null), createVNode(VOverlay, {
+        "contained": true,
+        "content-class": "v-otp-input__loader",
+        "model-value": !!props.loading,
+        "persistent": true
+      }, {
+        default: () => [slots.loader?.() ?? 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;
-        nextTick(updateFocus);
-      } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
-        page.value = page.value + 1;
-        nextTick(updateFocus);
-      }
-    }
-    useRender(() => 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: () => [createVNode("ul", {
-        "class": "v-pagination__list"
-      }, [props.showFirstLastPage && createVNode("li", {
-        "key": "first",
-        "class": "v-pagination__first",
-        "data-test": "v-pagination-first"
-      }, [slots.first ? slots.first(controls.value.first) : createVNode(VBtn, mergeProps({
-        "_as": "VPaginationBtn"
-      }, controls.value.first), null)]), createVNode("li", {
-        "key": "prev",
-        "class": "v-pagination__prev",
-        "data-test": "v-pagination-prev"
-      }, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
-        "_as": "VPaginationBtn"
-      }, controls.value.prev), null)]), items.value.map((item, index) => 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) : createVNode(VBtn, mergeProps({
-        "_as": "VPaginationBtn"
-      }, item.props), {
-        default: () => [item.page]
-      })])), createVNode("li", {
-        "key": "next",
-        "class": "v-pagination__next",
-        "data-test": "v-pagination-next"
-      }, [slots.next ? slots.next(controls.value.next) : createVNode(VBtn, mergeProps({
-        "_as": "VPaginationBtn"
-      }, controls.value.next), null)]), props.showFirstLastPage && createVNode("li", {
-        "key": "last",
-        "class": "v-pagination__last",
-        "data-test": "v-pagination-last"
-      }, [slots.last ? slots.last(controls.value.last) : createVNode(VBtn, mergeProps({
-        "_as": "VPaginationBtn"
-      }, controls.value.last), null)])])]
-    }));
-    return {};
+    return {
+      blur: () => {
+        inputRef.value?.some(input => input.blur());
+      },
+      focus: () => {
+        inputRef.value?.[0].focus();
+      },
+      reset,
+      isFocused
+    };
   }
 });
 
@@ -23080,7 +23092,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__prev', {
           'v-slide-group__prev--disabled': !hasPrev.value
         }],
-        "onClick": () => scrollTo('prev')
+        "onClick": () => hasPrev.value && scrollTo('prev')
       }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
           "icon": isRtl.value ? props.nextIcon : props.prevIcon
@@ -23105,7 +23117,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__next', {
           'v-slide-group__next--disabled': !hasNext.value
         }],
-        "onClick": () => scrollTo('next')
+        "onClick": () => hasNext.value && scrollTo('next')
       }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
           "icon": isRtl.value ? props.prevIcon : props.nextIcon
@@ -23998,11 +24010,12 @@ const VTab = genericComponent()({
         "maxWidth": props.fixed ? 300 : undefined,
         "onGroup:selected": updateSlider
       }), {
-        default: () => [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
+        ...slots,
+        default: () => createVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
           "ref": sliderEl,
           "class": ['v-tab__slider', sliderColorClasses.value],
           "style": sliderColorStyles.value
-        }, null)]
+        }, null)])
       });
     });
     return {};
@@ -25069,7 +25082,8 @@ function createVuetify$1() {
     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', () => {
@@ -25115,7 +25129,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.2";
+const version$1 = "3.4.3";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25140,7 +25154,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.4.2";
+const version = "3.4.3";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };