@vuetify/nightly 3.0.0-next-20220112.0 → 3.0.0-next-20220128.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-next-20220112.0
+* Vuetify v3.0.0-next-20220128.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2611,12 +2611,7 @@
       next: () => step(1),
       isSelected: id => selected.value.includes(id),
       selectedClass: vue.computed(() => props.selectedClass),
-      items: vue.computed(() => items.map(_ref => {
-        let {
-          id
-        } = _ref;
-        return id;
-      }))
+      items: vue.computed(() => items)
     };
     vue.provide(injectKey, state);
     return state;
@@ -2857,7 +2852,8 @@
       ...makeSizeProps(),
       ...makeTagProps({
         tag: 'i'
-      })
+      }),
+      ...makeThemeProps()
     },
 
     setup(props, _ref) {
@@ -2876,6 +2872,9 @@
         });
       }
 
+      const {
+        themeClasses
+      } = provideTheme(props);
       const {
         iconData
       } = useIcon(slotIcon || props);
@@ -2890,7 +2889,7 @@
         return vue.createVNode(iconData.value.component, {
           "tag": props.tag,
           "icon": iconData.value.icon,
-          "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, {
+          "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, themeClasses.value, {
             'v-icon--left': props.left,
             'v-icon--right': props.right
           }],
@@ -7116,11 +7115,11 @@
       } = useElevation(props);
       vue.provide(VExpansionPanelSymbol, groupItem);
       const isBeforeSelected = vue.computed(() => {
-        const index = groupItem.group.items.value.indexOf(groupItem.id);
+        const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
         return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === 1);
       });
       const isAfterSelected = vue.computed(() => {
-        const index = groupItem.group.items.value.indexOf(groupItem.id);
+        const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
         return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === -1);
       });
       const {
@@ -8373,16 +8372,16 @@
       let {
         slots
       } = _ref;
-      const hover = useProxiedModel(props, 'modelValue');
+      const isHovering = useProxiedModel(props, 'modelValue');
       const {
         runOpenDelay,
         runCloseDelay
-      } = useDelay(props, value => !props.disabled && (hover.value = value));
+      } = useDelay(props, value => !props.disabled && (isHovering.value = value));
       return () => {
         var _slots$default;
 
         return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
-          hover: hover.value,
+          isHovering: isHovering.value,
           props: {
             onMouseenter: runOpenDelay,
             onMouseleave: runCloseDelay
@@ -8596,37 +8595,26 @@
 
   });
 
-  const VListSubheader = defineComponent({
-    name: 'VListSubheader',
-    props: {
-      color: String,
-      inset: Boolean,
-      ...makeTagProps()
-    },
-
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
-      return () => vue.createVNode(props.tag, {
-        "class": ['v-list-subheader', {
-          'v-list-subheader--inset': props.inset
-        }, textColorClasses.value],
-        "style": {
-          textColorStyles
-        }
-      }, {
-        default: () => [slots.default && vue.createVNode("div", {
-          "class": "v-list-subheader__text"
-        }, [slots.default()])]
-      }, 8, ["class", "style"]);
-    }
+  // Utilities
 
-  });
+  const ListKey = Symbol.for('vuetify:list');
+  function createList() {
+    const parent = vue.inject(ListKey, {
+      hasPrepend: vue.ref(false),
+      updateHasPrepend: () => null
+    });
+    const data = {
+      hasPrepend: vue.ref(false),
+      updateHasPrepend: value => {
+        if (value) data.hasPrepend.value = value;
+      }
+    };
+    vue.provide(ListKey, data);
+    return parent;
+  }
+  function useList() {
+    return vue.inject(ListKey, null);
+  }
 
   const singleOpenStrategy = _ref => {
     let {
@@ -8664,7 +8652,7 @@
       let parent = parents.get(id);
       opened.add(id);
 
-      while (parent != null) {
+      while (parent != null && parent !== id) {
         opened.add(parent);
         parent = parents.get(parent);
       }
@@ -8916,7 +8904,7 @@
           return arr;
         }),
         register: (id, parentId, isGroup) => {
-          parentId && parents.value.set(id, parentId);
+          parentId && id !== parentId && parents.value.set(id, parentId);
           isGroup && children.value.set(id, []);
 
           if (parentId != null) {
@@ -9023,30 +9011,6 @@
     return group;
   };
 
-  const VListGroupItems = defineComponent({
-    name: 'VListGroupItems',
-    props: {
-      open: Boolean,
-      items: Array
-    },
-
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      createList();
-      return () => {
-        return vue.createVNode(VExpandTransition, null, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": "v-list-group__items"
-          }, [vue.createVNode(VListChildren, {
-            "items": props.items
-          }, slots, 8, ["items"])], 512), [[vue.vShow, props.open]])]
-        });
-      };
-    }
-
-  });
   const VListGroup = genericComponent()({
     name: 'VListGroup',
     props: {
@@ -9059,14 +9023,13 @@
         type: String,
         default: '$expand'
       },
-      items: Array,
       ...makeTagProps()
     },
 
-    setup(props, _ref2) {
+    setup(props, _ref) {
       let {
         slots
-      } = _ref2;
+      } = _ref;
       const {
         isOpen,
         open
@@ -9077,23 +9040,27 @@
         open(!isOpen.value, e);
       };
 
-      const headerProps = vue.computed(() => ({
+      const activatorProps = vue.computed(() => ({
         onClick,
         appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-        class: 'v-list-group__header'
+        class: 'v-list-group__header',
+        value: `${props.value}_header`
       }));
       return () => {
-        var _slots$header;
+        var _slots$activator, _slots$default;
 
         return vue.createVNode(props.tag, {
           "class": ['v-list-group', {
             'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
           }]
         }, {
-          default: () => [(_slots$header = slots.header) == null ? void 0 : _slots$header.call(slots, headerProps.value), vue.createVNode(VListGroupItems, {
-            "items": props.items,
-            "open": isOpen.value
-          }, slots, 8, ["items", "open"])],
+          default: () => [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
+            props: activatorProps.value
+          }), vue.createVNode(VExpandTransition, null, {
+            default: () => [vue.withDirectives(vue.createVNode("div", {
+              "class": "v-list-group__items"
+            }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)], 512), [[vue.vShow, isOpen.value]])]
+          })],
           _: 1
         }, 8, ["class"]);
       };
@@ -9270,9 +9237,13 @@
             }, null, 8, ["density", "icon", "image"])]
           }, 8, ["left"])), hasHeader && vue.createVNode(VListItemHeader, null, {
             default: () => [hasTitle && vue.createVNode(VListItemTitle, null, {
-              default: () => [slots.title ? slots.title() : props.title]
+              default: () => [slots.title ? slots.title({
+                title: props.title
+              }) : props.title]
             }), hasSubtitle && vue.createVNode(VListItemSubtitle, null, {
-              default: () => [slots.subtitle ? slots.subtitle() : props.subtitle]
+              default: () => [slots.subtitle ? slots.subtitle({
+                subtitle: props.subtitle
+              }) : props.subtitle]
             })],
             _: 1
           }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && (slots.append ? slots.append(slotProps.value) : vue.createVNode(VListItemAvatar, {
@@ -9291,6 +9262,46 @@
 
   });
 
+  const VListSubheader = defineComponent({
+    name: 'VListSubheader',
+    props: {
+      color: String,
+      inset: Boolean,
+      sticky: Boolean,
+      text: String,
+      ...makeTagProps()
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.toRef(props, 'color'));
+      return () => {
+        var _slots$default, _slots$default2;
+
+        const hasText = !!(slots.default || props.text);
+        return vue.createVNode(props.tag, {
+          "class": ['v-list-subheader', {
+            'v-list-subheader--inset': props.inset,
+            'v-list-subheader--sticky': props.sticky
+          }, textColorClasses.value],
+          "style": {
+            textColorStyles
+          }
+        }, {
+          default: () => [hasText && vue.createVNode("div", {
+            "class": "v-list-subheader__text"
+          }, [(_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.text])]
+        }, 8, ["class", "style"]);
+      };
+    }
+
+  });
+
   const VListChildren = genericComponent()({
     name: 'VListChildren',
     props: {
@@ -9301,51 +9312,69 @@
       let {
         slots
       } = _ref;
+      createList();
       return () => {
         var _slots$default, _slots$default2, _props$items;
 
         return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : (_props$items = props.items) == null ? void 0 : _props$items.map(_ref2 => {
           let {
             children,
-            ...item
+            props: itemProps,
+            type
           } = _ref2;
-          const {
-            value,
-            ...rest
-          } = item;
+          if (type === 'divider') return vue.createVNode(VDivider, itemProps, null, 16);
+          if (type === 'subheader') return vue.createVNode(VListSubheader, itemProps, slots, 16);
           return children ? vue.createVNode(VListGroup, {
-            "value": value,
-            "items": children
-          }, { ...slots,
-            header: headerProps => slots.externalHeader ? slots.externalHeader({ ...rest,
-              ...headerProps
-            }) : vue.createVNode(VListItem, vue.mergeProps(rest, headerProps), null, 16),
+            "value": itemProps == null ? void 0 : itemProps.value
+          }, {
+            default: () => vue.createVNode(VListChildren, {
+              "items": children
+            }, slots, 8, ["items"]),
+            activator: _ref3 => {
+              let {
+                props: activatorProps
+              } = _ref3;
+              return slots.header ? slots.header({ ...itemProps,
+                ...activatorProps
+              }) : vue.createVNode(VListItem, vue.mergeProps(itemProps, activatorProps), null, 16);
+            },
             _: 2
-          }, 8, ["value", "items"]) : slots.item ? slots.item(item) : vue.createVNode(VListItem, item, slots, 16);
+          }, 8, ["value"]) : slots.item ? slots.item(itemProps) : vue.createVNode(VListItem, itemProps, slots, 16);
         });
       };
     }
 
   });
 
-  const ListKey = Symbol.for('vuetify:list');
-  const createList = () => {
-    const parent = vue.inject(ListKey, {
-      hasPrepend: vue.ref(false),
-      updateHasPrepend: () => null
+  const parseItems = items => {
+    if (!items) return undefined;
+    return items.map(item => {
+      if (typeof item === 'string') return {
+        type: 'item',
+        value: item,
+        title: item
+      };
+      const {
+        $type,
+        $children,
+        ...props
+      } = item;
+      if ($type === 'subheader') return {
+        type: 'subheader',
+        props
+      };
+      if ($type === 'divider') return {
+        type: 'divider',
+        props
+      };
+      return {
+        type: 'item',
+        props,
+        children: parseItems($children)
+      };
     });
-    const data = {
-      hasPrepend: vue.ref(false),
-      updateHasPrepend: value => {
-        if (value) data.hasPrepend.value = value;
-      }
-    };
-    vue.provide(ListKey, data);
-    return parent;
-  };
-  const useList = () => {
-    return vue.inject(ListKey, null);
   };
+
   const VList = genericComponent()({
     name: 'VList',
     props: {
@@ -9356,10 +9385,6 @@
         default: 'one'
       },
       nav: Boolean,
-      subheader: {
-        type: [Boolean, String],
-        default: false
-      },
       items: Array,
       ...makeNestedProps({
         selectStrategy: 'leaf',
@@ -9384,6 +9409,7 @@
       let {
         slots
       } = _ref;
+      const items = vue.computed(() => parseItems(props.items));
       const {
         themeClasses
       } = provideTheme(props);
@@ -9413,28 +9439,24 @@
       } = useNested(props);
       createList();
       useRender(() => {
-        const hasHeader = typeof props.subheader === 'string' || slots.subheader;
         return vue.createVNode(props.tag, {
           "class": ['v-list', {
             'v-list--disabled': props.disabled,
             'v-list--nav': props.nav,
-            'v-list--subheader': props.subheader,
-            'v-list--subheader-sticky': props.subheader === 'sticky',
             [`v-list--${props.lines}-line`]: true
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
           "style": [backgroundColorStyles.value, dimensionStyles.value]
         }, {
-          default: () => [hasHeader && (slots.subheader ? slots.subheader() : vue.createVNode(VListSubheader, null, {
-            default: () => [props.subheader]
-          })), vue.createVNode(VListChildren, {
-            "items": props.items
+          default: () => [vue.createVNode(VListChildren, {
+            "items": items.value
           }, {
             default: slots.default,
             item: slots.item,
-            externalHeader: slots.header,
+            title: slots.title,
+            subtitle: slots.subtitle,
+            header: slots.header,
             _: 1
-          }, 8, ["items"])],
-          _: 1
+          }, 8, ["items"])]
         }, 8, ["class", "style"]);
       });
       return {
@@ -10176,6 +10198,7 @@
         default: '...'
       },
       showFirstLastPage: Boolean,
+      ...makeRoundedProps(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -10310,6 +10333,7 @@
                 icon: true,
                 disabled: !!props.disabled || props.length < 2,
                 elevation: props.elevation,
+                rounded: props.rounded,
                 color: isActive ? props.color : undefined,
                 ariaCurrent: isActive,
                 ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
@@ -10737,7 +10761,7 @@
     },
     showTicks: {
       type: [Boolean, String],
-      default: true,
+      default: false,
       validator: v => typeof v === 'boolean' || v === 'always'
     },
     showTickLabels: {
@@ -10821,6 +10845,7 @@
     const mousePressed = vue.ref(false);
     const startOffset = vue.ref(0);
     const trackContainerRef = vue.ref();
+    const activeThumbRef = vue.ref();
 
     function roundValue(value) {
       if (step.value <= 0) return value;
@@ -10862,14 +10887,14 @@
     };
 
     const handleStart = e => {
-      const activeThumb = getActiveThumb(e);
-      if (!activeThumb) return;
-      activeThumb.focus();
+      activeThumbRef.value = getActiveThumb(e);
+      if (!activeThumbRef.value) return;
+      activeThumbRef.value.focus();
       mousePressed.value = true;
 
-      if (activeThumb.contains(e.target)) {
+      if (activeThumbRef.value.contains(e.target)) {
         thumbMoved = true;
-        startOffset.value = getOffset(e, activeThumb, props.direction);
+        startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
       } else {
         startOffset.value = 0;
         handleMouseMove(parseMouseMove(e));
@@ -10953,6 +10978,7 @@
       return !!label;
     }));
     const data = {
+      activeThumbRef,
       color: vue.toRef(props, 'color'),
       decimals,
       disabled,
@@ -11041,7 +11067,8 @@
         elevation,
         isReversed,
         horizontalDirection,
-        mousePressed
+        mousePressed,
+        decimals
       } = slider;
       const {
         textColorClasses,
@@ -11118,7 +11145,7 @@
           "aria-valuenow": props.modelValue,
           "aria-readonly": readonly.value,
           "aria-orientation": direction.value,
-          "onKeydown": onKeydown
+          "onKeydown": !readonly.value ? onKeydown : undefined
         }, [vue.createVNode("div", {
           "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
           "style": { ...textColorStyles.value
@@ -11138,7 +11165,7 @@
             "class": ['v-slider-thumb__label']
           }, [vue.createVNode("div", null, [(_slots$thumbLabel = (_slots$thumbLabel2 = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel2.call(slots, {
             modelValue: props.modelValue
-          })) != null ? _slots$thumbLabel : props.modelValue.toFixed(1)])])], 512), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+          })) != null ? _slots$thumbLabel : props.modelValue.toFixed(step.value ? decimals.value : 1)])])], 512), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
         })], 46, ["tabindex", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-readonly", "aria-orientation", "onKeydown"]);
       };
     }
@@ -11259,6 +11286,7 @@
     name: 'VRangeSlider',
     props: { ...makeVInputProps(),
       ...makeSliderProps(),
+      strict: Boolean,
       modelValue: {
         type: Array,
         default: () => [0, 0]
@@ -11275,20 +11303,15 @@
       } = _ref;
       const startThumbRef = vue.ref();
       const stopThumbRef = vue.ref();
-      const focusedThumb = vue.ref();
       const inputRef = vue.ref();
-      let canSwitch = false;
 
       function getActiveThumb(e) {
-        var _startThumbRef$value, _stopThumbRef$value;
-
         if (!startThumbRef.value || !stopThumbRef.value) return;
-        canSwitch = true;
         const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
         const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction);
         const a = Math.abs(startOffset);
         const b = Math.abs(stopOffset);
-        return a < b || a === b && startOffset < 0 ? (_startThumbRef$value = startThumbRef.value) == null ? void 0 : _startThumbRef$value.$el : (_stopThumbRef$value = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value.$el;
+        return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
       }
 
       const {
@@ -11300,25 +11323,33 @@
         onSliderTouchstart,
         trackContainerRef,
         position,
-        hasLabels
+        hasLabels,
+        activeThumbRef
       } = useSlider({
         /* eslint-disable @typescript-eslint/no-use-before-define */
         props,
         handleSliderMouseUp: newValue => {
-          model.value = focusedThumb.value === startThumbRef.value ? [newValue, model.value[1]] : [model.value[0], newValue];
+          var _startThumbRef$value;
+
+          model.value = activeThumbRef.value === ((_startThumbRef$value = startThumbRef.value) == null ? void 0 : _startThumbRef$value.$el) ? [newValue, model.value[1]] : [model.value[0], newValue];
         },
         handleMouseMove: newValue => {
-          if (focusedThumb.value === startThumbRef.value) {
-            model.value = [Math.min(newValue, model.value[1]), model.value[1]];
-          } else {
-            model.value = [model.value[0], Math.max(model.value[0], newValue)];
-          }
+          var _startThumbRef$value3;
+
+          const [start, stop] = model.value;
+
+          if (!props.strict && start === stop && start !== min.value) {
+            var _stopThumbRef$value, _startThumbRef$value2, _activeThumbRef$value;
 
-          if (canSwitch && model.value[0] === model.value[1]) {
-            focusedThumb.value = newValue > model.value[0] ? stopThumbRef.value : startThumbRef.value;
+            activeThumbRef.value = newValue > start ? (_stopThumbRef$value = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value.$el : (_startThumbRef$value2 = startThumbRef.value) == null ? void 0 : _startThumbRef$value2.$el;
+            (_activeThumbRef$value = activeThumbRef.value) == null ? void 0 : _activeThumbRef$value.focus();
           }
 
-          canSwitch = false;
+          if (activeThumbRef.value === ((_startThumbRef$value3 = startThumbRef.value) == null ? void 0 : _startThumbRef$value3.$el)) {
+            model.value = [Math.min(newValue, stop), stop];
+          } else {
+            model.value = [start, Math.max(start, newValue)];
+          }
         },
         getActiveThumb
         /* eslint-enable @typescript-eslint/no-use-before-define */
@@ -11349,6 +11380,8 @@
           "focused": isFocused.value
         }), { ...slots,
           default: _ref2 => {
+            var _startThumbRef$value4, _stopThumbRef$value4;
+
             let {
               id
             } = _ref2;
@@ -11379,23 +11412,28 @@
               _: 1
             }, 8, ["start", "stop"]), vue.createVNode(VSliderThumb, {
               "ref": startThumbRef,
-              "focused": isFocused && focusedThumb.value === startThumbRef.value,
+              "focused": isFocused && activeThumbRef.value === ((_startThumbRef$value4 = startThumbRef.value) == null ? void 0 : _startThumbRef$value4.$el),
               "modelValue": model.value[0],
               "onUpdate:modelValue": v => model.value = [v, model.value[1]],
               "onFocus": e => {
-                var _stopThumbRef$value2, _stopThumbRef$value3;
+                var _startThumbRef$value5, _stopThumbRef$value2;
 
                 focus();
-                focusedThumb.value = startThumbRef.value; // Make sure second thumb is focused if
+                activeThumbRef.value = (_startThumbRef$value5 = startThumbRef.value) == null ? void 0 : _startThumbRef$value5.$el; // Make sure second thumb is focused if
                 // the thumbs are on top of each other
                 // and they are both at minimum value
                 // but only if focused from outside.
 
-                if (model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== ((_stopThumbRef$value2 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value2.$el)) (_stopThumbRef$value3 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value3.$el.focus();
+                if (model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== ((_stopThumbRef$value2 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value2.$el)) {
+                  var _startThumbRef$value6, _stopThumbRef$value3;
+
+                  (_startThumbRef$value6 = startThumbRef.value) == null ? void 0 : _startThumbRef$value6.$el.blur();
+                  (_stopThumbRef$value3 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value3.$el.focus();
+                }
               },
               "onBlur": () => {
                 blur();
-                focusedThumb.value = null;
+                activeThumbRef.value = undefined;
               },
               "min": min.value,
               "max": model.value[1],
@@ -11405,27 +11443,28 @@
               _: 1
             }, 8, ["focused", "modelValue", "onUpdate:modelValue", "onFocus", "onBlur", "min", "max", "position"]), vue.createVNode(VSliderThumb, {
               "ref": stopThumbRef,
-              "focused": isFocused && focusedThumb.value === stopThumbRef.value,
+              "focused": isFocused && activeThumbRef.value === ((_stopThumbRef$value4 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value4.$el),
               "modelValue": model.value[1],
               "onUpdate:modelValue": v => model.value = [model.value[0], v],
               "onFocus": e => {
-                var _startThumbRef$value2;
+                var _stopThumbRef$value5, _startThumbRef$value7;
 
                 focus();
-                focusedThumb.value = stopThumbRef.value; // Make sure first thumb is focused if
+                activeThumbRef.value = (_stopThumbRef$value5 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value5.$el; // Make sure first thumb is focused if
                 // the thumbs are on top of each other
                 // and they are both at maximum value
                 // but only if focused from outside.
 
-                if (model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== ((_startThumbRef$value2 = startThumbRef.value) == null ? void 0 : _startThumbRef$value2.$el)) {
-                  var _startThumbRef$value3;
+                if (model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== ((_startThumbRef$value7 = startThumbRef.value) == null ? void 0 : _startThumbRef$value7.$el)) {
+                  var _stopThumbRef$value6, _startThumbRef$value8;
 
-                  (_startThumbRef$value3 = startThumbRef.value) == null ? void 0 : _startThumbRef$value3.$el.focus();
+                  (_stopThumbRef$value6 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value6.$el.blur();
+                  (_startThumbRef$value8 = startThumbRef.value) == null ? void 0 : _startThumbRef$value8.$el.focus();
                 }
               },
               "onBlur": () => {
                 blur();
-                focusedThumb.value = null;
+                activeThumbRef.value = undefined;
               },
               "min": model.value[0],
               "max": max.value,
@@ -11756,7 +11795,8 @@
         onSliderTouchstart,
         trackContainerRef,
         position,
-        hasLabels
+        hasLabels,
+        readonly
       } = useSlider({
         props,
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -11797,8 +11837,8 @@
             } = _ref2;
             return vue.createVNode("div", {
               "class": "v-slider__container",
-              "onMousedown": onSliderMousedown,
-              "onTouchstartPassive": onSliderTouchstart
+              "onMousedown": !readonly.value ? onSliderMousedown : undefined,
+              "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
             }, [vue.createVNode("input", {
               "id": id.value,
               "name": props.name || id.value,
@@ -12800,111 +12840,535 @@
 
   });
 
-  var components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    VApp: VApp,
-    VAppBar: VAppBar,
-    VAppBarNavIcon: VAppBarNavIcon,
-    VAppBarTitle: VAppBarTitle,
-    VAlert: VAlert,
-    VAvatar: VAvatar,
-    VBadge: VBadge,
-    VBanner: VBanner,
-    VBannerActions: VBannerActions,
-    VBannerAvatar: VBannerAvatar,
-    VBannerContent: VBannerContent,
-    VBannerText: VBannerText,
-    VBottomNavigation: VBottomNavigation,
-    VBreadcrumbs: VBreadcrumbs,
-    VBreadcrumbsItem: VBreadcrumbsItem,
-    VBreadcrumbsDivider: VBreadcrumbsDivider,
-    VBtn: VBtn,
-    VBtnGroup: VBtnGroup,
-    VBtnToggle: VBtnToggle,
-    VCard: VCard,
-    VCardActions: VCardActions,
-    VCardAvatar: VCardAvatar,
-    VCardHeader: VCardHeader,
-    VCardHeaderText: VCardHeaderText,
-    VCardImg: VCardImg,
-    VCardSubtitle: VCardSubtitle,
-    VCardText: VCardText,
-    VCardTitle: VCardTitle,
-    VCheckbox: VCheckbox,
-    VChip: VChip,
-    VCode: VCode,
-    VCounter: VCounter,
-    VDefaultsProvider: VDefaultsProvider,
-    VDialog: VDialog,
-    VDivider: VDivider,
-    VExpansionPanels: VExpansionPanels,
-    VExpansionPanel: VExpansionPanel,
-    VExpansionPanelText: VExpansionPanelText,
-    VExpansionPanelTitle: VExpansionPanelTitle,
-    VField: VField,
-    VFieldLabel: VFieldLabel,
-    VFileInput: VFileInput,
-    VFooter: VFooter,
-    VForm: VForm,
-    VContainer: VContainer,
-    VCol: VCol,
-    VRow: VRow,
-    VSpacer: VSpacer,
-    VHover: VHover,
-    VIcon: VIcon,
-    VComponentIcon: VComponentIcon,
-    VSvgIcon: VSvgIcon,
-    VLigatureIcon: VLigatureIcon,
-    VClassIcon: VClassIcon,
-    VImg: VImg,
-    VInput: VInput,
-    VItemGroup: VItemGroup,
-    VItem: VItem,
-    VKbd: VKbd,
-    VLabel: VLabel,
-    VLayout: VLayout,
-    VLayoutItem: VLayoutItem,
-    VLazy: VLazy,
-    VList: VList,
-    VListSubheader: VListSubheader,
-    VListImg: VListImg,
-    VListItem: VListItem,
-    VListItemAvatar: VListItemAvatar,
-    VListItemHeader: VListItemHeader,
-    VListItemMedia: VListItemMedia,
-    VListItemSubtitle: VListItemSubtitle,
-    VListItemTitle: VListItemTitle,
-    VListGroup: VListGroup,
-    VLocaleProvider: VLocaleProvider,
-    VMain: VMain,
-    VMenu: VMenu,
-    VMessages: VMessages,
-    VNavigationDrawer: VNavigationDrawer,
-    VNoSsr: VNoSsr,
-    VOverlay: VOverlay,
-    VPagination: VPagination,
-    VParallax: VParallax,
-    VProgressCircular: VProgressCircular,
-    VProgressLinear: VProgressLinear,
-    VRadio: VRadio,
-    VRadioGroup: VRadioGroup,
-    VRangeSlider: VRangeSlider,
-    VRating: VRating,
-    VResponsive: VResponsive,
-    VSelectionControl: VSelectionControl,
-    VSelectionControlGroup: VSelectionControlGroup,
-    VSheet: VSheet,
-    VSlider: VSlider,
-    VSwitch: VSwitch,
-    VSystemBar: VSystemBar,
-    VTable: VTable,
-    VTextarea: VTextarea,
-    VTextField: VTextField,
-    VThemeProvider: VThemeProvider,
+  // Types
+
+  const handleGesture = wrapper => {
+    const {
+      touchstartX,
+      touchendX,
+      touchstartY,
+      touchendY
+    } = wrapper;
+    const dirRatio = 0.5;
+    const minDistance = 16;
+    wrapper.offsetX = touchendX - touchstartX;
+    wrapper.offsetY = touchendY - touchstartY;
+
+    if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+      wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
+      wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
+    }
+
+    if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+      wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
+      wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
+    }
+  };
+
+  function touchstart(event, wrapper) {
+    var _wrapper$start;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchstartX = touch.clientX;
+    wrapper.touchstartY = touch.clientY;
+    (_wrapper$start = wrapper.start) == null ? void 0 : _wrapper$start.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+  }
+
+  function touchend(event, wrapper) {
+    var _wrapper$end;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchendX = touch.clientX;
+    wrapper.touchendY = touch.clientY;
+    (_wrapper$end = wrapper.end) == null ? void 0 : _wrapper$end.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+    handleGesture(wrapper);
+  }
+
+  function touchmove(event, wrapper) {
+    var _wrapper$move;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchmoveX = touch.clientX;
+    wrapper.touchmoveY = touch.clientY;
+    (_wrapper$move = wrapper.move) == null ? void 0 : _wrapper$move.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+  }
+
+  function createHandlers() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const wrapper = {
+      touchstartX: 0,
+      touchstartY: 0,
+      touchendX: 0,
+      touchendY: 0,
+      touchmoveX: 0,
+      touchmoveY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      left: value.left,
+      right: value.right,
+      up: value.up,
+      down: value.down,
+      start: value.start,
+      move: value.move,
+      end: value.end
+    };
+    return {
+      touchstart: e => touchstart(e, wrapper),
+      touchend: e => touchend(e, wrapper),
+      touchmove: e => touchmove(e, wrapper)
+    };
+  }
+
+  function mounted$3(el, binding) {
+    var _value$options, _binding$instance, _target$_touchHandler;
+
+    const value = binding.value;
+    const target = value != null && value.parent ? el.parentElement : el;
+    const options = (_value$options = value == null ? void 0 : value.options) != null ? _value$options : {
+      passive: true
+    };
+    const uid = (_binding$instance = binding.instance) == null ? void 0 : _binding$instance.$.uid; // TODO: use custom uid generator
+
+    if (!target || !uid) return;
+    const handlers = createHandlers(binding.value);
+    target._touchHandlers = (_target$_touchHandler = target._touchHandlers) != null ? _target$_touchHandler : Object.create(null);
+    target._touchHandlers[uid] = handlers;
+    keys(handlers).forEach(eventName => {
+      target.addEventListener(eventName, handlers[eventName], options);
+    });
+  }
+
+  function unmounted$3(el, binding) {
+    var _binding$value, _binding$instance2;
+
+    const target = (_binding$value = binding.value) != null && _binding$value.parent ? el.parentElement : el;
+    const uid = (_binding$instance2 = binding.instance) == null ? void 0 : _binding$instance2.$.uid;
+    if (!(target != null && target._touchHandlers) || !uid) return;
+    const handlers = target._touchHandlers[uid];
+    keys(handlers).forEach(eventName => {
+      target.removeEventListener(eventName, handlers[eventName]);
+    });
+    delete target._touchHandlers[uid];
+  }
+
+  const Touch = {
+    mounted: mounted$3,
+    unmounted: unmounted$3
+  };
+
+  const VWindowSymbol = Symbol.for('vuetify:v-window');
+  const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
+  const VWindow = vue.defineComponent({
+    name: 'VWindow',
+    directives: {
+      Touch
+    },
+    props: {
+      continuous: Boolean,
+      nextIcon: {
+        type: [Boolean, String],
+        default: '$next'
+      },
+      prevIcon: {
+        type: [Boolean, String],
+        default: '$prev'
+      },
+      reverse: Boolean,
+      showArrows: {
+        type: [Boolean, String],
+        validator: v => typeof v === 'boolean' || v === 'hover'
+      },
+      touch: {
+        type: [Object, Boolean],
+        default: undefined
+      },
+      direction: {
+        type: String,
+        default: 'horizontal'
+      },
+      modelValue: null,
+      disabled: Boolean,
+      selectedClass: {
+        type: String,
+        default: 'v-window-item--active'
+      },
+      // TODO: mandatory should probably not be exposed but do this for now
+      mandatory: {
+        default: 'force'
+      },
+      ...makeTagProps(),
+      ...makeThemeProps()
+    },
+    emits: {
+      'update:modelValue': v => true
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        isRtl
+      } = useRtl();
+      const {
+        t
+      } = useLocale();
+      const group = useGroup(props, VWindowGroupSymbol);
+      const rootRef = vue.ref();
+      const isRtlReverse = vue.computed(() => isRtl.value ? !props.reverse : props.reverse);
+      const isReversed = vue.ref(false);
+      const transition = vue.computed(() => {
+        const axis = props.direction === 'vertical' ? 'y' : 'x';
+        const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
+        const direction = reverse ? '-reverse' : '';
+        return `v-window-${axis}${direction}-transition`;
+      });
+      const transitionCount = vue.ref(0);
+      const transitionHeight = vue.ref(undefined);
+      const activeIndex = vue.computed(() => {
+        return group.items.value.findIndex(item => group.selected.value.includes(item.id));
+      });
+      vue.watch(activeIndex, (newVal, oldVal) => {
+        const itemsLength = group.items.value.length;
+        const lastIndex = itemsLength - 1;
+
+        if (itemsLength <= 2) {
+          isReversed.value = newVal < oldVal;
+        } else if (newVal === lastIndex && oldVal === 0) {
+          isReversed.value = true;
+        } else if (newVal === 0 && oldVal === lastIndex) {
+          isReversed.value = false;
+        } else {
+          isReversed.value = newVal < oldVal;
+        }
+      });
+      vue.provide(VWindowSymbol, {
+        transition,
+        isReversed,
+        transitionCount,
+        transitionHeight,
+        rootRef
+      });
+      const canMoveBack = vue.computed(() => props.continuous || activeIndex.value !== 0);
+      const canMoveForward = vue.computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+
+      function prev() {
+        canMoveBack.value && group.prev();
+      }
+
+      function next() {
+        canMoveForward.value && group.next();
+      }
+
+      provideDefaults({
+        VBtn: {
+          variant: 'text'
+        }
+      }, {
+        scoped: true
+      });
+      const arrows = vue.computed(() => {
+        const arrows = [];
+        const prevProps = {
+          icon: isRtl.value ? props.nextIcon : props.prevIcon,
+          class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,
+          onClick: group.prev,
+          ariaLabel: t('$vuetify.carousel.prev')
+        };
+        arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
+          props: prevProps
+        }) : vue.createVNode(VBtn, prevProps, null, 16) : vue.createVNode("div", null, null));
+        const nextProps = {
+          icon: isRtl.value ? props.prevIcon : props.nextIcon,
+          class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
+          onClick: group.next,
+          ariaLabel: t('$vuetify.carousel.next')
+        };
+        arrows.push(canMoveForward.value ? slots.next ? slots.next({
+          props: nextProps
+        }) : vue.createVNode(VBtn, nextProps, null, 16) : vue.createVNode("div", null, null));
+        return arrows;
+      });
+      const touchOptions = vue.computed(() => {
+        if (props.touch === false) return props.touch;
+        const options = {
+          left: () => {
+            isRtlReverse.value ? prev() : next();
+          },
+          right: () => {
+            isRtlReverse.value ? next() : prev();
+          },
+          end: _ref2 => {
+            let {
+              originalEvent
+            } = _ref2;
+            originalEvent.stopPropagation();
+          },
+          start: _ref3 => {
+            let {
+              originalEvent
+            } = _ref3;
+            originalEvent.stopPropagation();
+          }
+        };
+        return { ...options,
+          ...(props.touch === true ? {} : props.touch)
+        };
+      });
+      return () => {
+        var _slots$default;
+
+        return vue.withDirectives(vue.createVNode(props.tag, {
+          "ref": rootRef,
+          "class": ['v-window', {
+            'v-window--show-arrows-on-hover': props.showArrows === 'hover'
+          }, themeClasses.value]
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": "v-window__container",
+            "style": {
+              height: transitionHeight.value
+            }
+          }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), props.showArrows !== false && vue.createVNode("div", {
+            "class": "v-window__controls"
+          }, [arrows.value])], 4)]
+        }, 8, ["class"]), [[vue.resolveDirective("touch"), touchOptions.value]]);
+      };
+    }
+
+  });
+
+  const VWindowItem = defineComponent({
+    name: 'VWindowItem',
+    directives: {
+      Touch
+    },
+    props: {
+      reverseTransition: {
+        type: [Boolean, String],
+        default: undefined
+      },
+      transition: {
+        type: [Boolean, String],
+        default: undefined
+      },
+      ...makeLazyProps(),
+      ...makeGroupItemProps()
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const window = vue.inject(VWindowSymbol);
+      const groupItem = useGroupItem(props, VWindowGroupSymbol);
+      if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
+      const isTransitioning = vue.ref(false);
+      const hasTransition = vue.computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+
+      function onAfterTransition() {
+        if (!isTransitioning.value || !window) {
+          return;
+        } // Finalize transition state.
+
+
+        isTransitioning.value = false;
+
+        if (window.transitionCount.value > 0) {
+          window.transitionCount.value -= 1; // Remove container height if we are out of transition.
+
+          if (window.transitionCount.value === 0) {
+            window.transitionHeight.value = undefined;
+          }
+        }
+      }
+
+      function onBeforeTransition() {
+        if (isTransitioning.value || !window) {
+          return;
+        } // Initialize transition state here.
+
+
+        isTransitioning.value = true;
+
+        if (window.transitionCount.value === 0) {
+          var _window$rootRef$value;
+
+          // Set initial height for height transition.
+          window.transitionHeight.value = convertToUnit((_window$rootRef$value = window.rootRef.value) == null ? void 0 : _window$rootRef$value.clientHeight);
+        }
+
+        window.transitionCount.value += 1;
+      }
+
+      function onTransitionCancelled() {
+        onAfterTransition(); // This should have the same path as normal transition end.
+      }
+
+      function onEnterTransition(el) {
+        if (!isTransitioning.value) {
+          return;
+        }
+
+        vue.nextTick(() => {
+          // Do not set height if no transition or cancelled.
+          if (!hasTransition.value || !isTransitioning.value || !window) {
+            return;
+          } // Set transition target height.
+
+
+          window.transitionHeight.value = convertToUnit(el.clientHeight);
+        });
+      }
+
+      const transition = vue.computed(() => {
+        const name = window.isReversed.value ? props.reverseTransition : props.transition;
+        return !hasTransition.value ? false : {
+          name: typeof name !== 'string' ? window.transition.value : name,
+          onBeforeEnter: onBeforeTransition,
+          onAfterEnter: onAfterTransition,
+          onEnterCancelled: onTransitionCancelled,
+          onBeforeLeave: onBeforeTransition,
+          onAfterLeave: onAfterTransition,
+          onLeaveCancelled: onTransitionCancelled,
+          onEnter: onEnterTransition
+        };
+      });
+      const {
+        hasContent
+      } = useLazy(props, groupItem.isSelected);
+      return () => {
+        return vue.createVNode(MaybeTransition, {
+          "transition": transition.value
+        }, {
+          default: () => [vue.withDirectives(vue.createVNode("div", {
+            "class": ['v-window-item', groupItem.selectedClass.value]
+          }, [slots.default && hasContent.value && slots.default()], 2), [[vue.vShow, groupItem.isSelected.value]])]
+        }, 8, ["transition"]);
+      };
+    }
+
+  });
+
+  var components = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    VApp: VApp,
+    VAppBar: VAppBar,
+    VAppBarNavIcon: VAppBarNavIcon,
+    VAppBarTitle: VAppBarTitle,
+    VAlert: VAlert,
+    VAvatar: VAvatar,
+    VBadge: VBadge,
+    VBanner: VBanner,
+    VBannerActions: VBannerActions,
+    VBannerAvatar: VBannerAvatar,
+    VBannerContent: VBannerContent,
+    VBannerText: VBannerText,
+    VBottomNavigation: VBottomNavigation,
+    VBreadcrumbs: VBreadcrumbs,
+    VBreadcrumbsItem: VBreadcrumbsItem,
+    VBreadcrumbsDivider: VBreadcrumbsDivider,
+    VBtn: VBtn,
+    VBtnGroup: VBtnGroup,
+    VBtnToggle: VBtnToggle,
+    VCard: VCard,
+    VCardActions: VCardActions,
+    VCardAvatar: VCardAvatar,
+    VCardHeader: VCardHeader,
+    VCardHeaderText: VCardHeaderText,
+    VCardImg: VCardImg,
+    VCardSubtitle: VCardSubtitle,
+    VCardText: VCardText,
+    VCardTitle: VCardTitle,
+    VCheckbox: VCheckbox,
+    VChip: VChip,
+    VCode: VCode,
+    VCounter: VCounter,
+    VDefaultsProvider: VDefaultsProvider,
+    VDialog: VDialog,
+    VDivider: VDivider,
+    VExpansionPanels: VExpansionPanels,
+    VExpansionPanel: VExpansionPanel,
+    VExpansionPanelText: VExpansionPanelText,
+    VExpansionPanelTitle: VExpansionPanelTitle,
+    VField: VField,
+    VFieldLabel: VFieldLabel,
+    VFileInput: VFileInput,
+    VFooter: VFooter,
+    VForm: VForm,
+    VContainer: VContainer,
+    VCol: VCol,
+    VRow: VRow,
+    VSpacer: VSpacer,
+    VHover: VHover,
+    VIcon: VIcon,
+    VComponentIcon: VComponentIcon,
+    VSvgIcon: VSvgIcon,
+    VLigatureIcon: VLigatureIcon,
+    VClassIcon: VClassIcon,
+    VImg: VImg,
+    VInput: VInput,
+    VItemGroup: VItemGroup,
+    VItem: VItem,
+    VKbd: VKbd,
+    VLabel: VLabel,
+    VLayout: VLayout,
+    VLayoutItem: VLayoutItem,
+    VLazy: VLazy,
+    VList: VList,
+    VListSubheader: VListSubheader,
+    VListImg: VListImg,
+    VListItem: VListItem,
+    VListItemAvatar: VListItemAvatar,
+    VListItemHeader: VListItemHeader,
+    VListItemMedia: VListItemMedia,
+    VListItemSubtitle: VListItemSubtitle,
+    VListItemTitle: VListItemTitle,
+    VListGroup: VListGroup,
+    VLocaleProvider: VLocaleProvider,
+    VMain: VMain,
+    VMenu: VMenu,
+    VMessages: VMessages,
+    VNavigationDrawer: VNavigationDrawer,
+    VNoSsr: VNoSsr,
+    VOverlay: VOverlay,
+    VPagination: VPagination,
+    VParallax: VParallax,
+    VProgressCircular: VProgressCircular,
+    VProgressLinear: VProgressLinear,
+    VRadio: VRadio,
+    VRadioGroup: VRadioGroup,
+    VRangeSlider: VRangeSlider,
+    VRating: VRating,
+    VResponsive: VResponsive,
+    VSelectionControl: VSelectionControl,
+    VSelectionControlGroup: VSelectionControlGroup,
+    VSheet: VSheet,
+    VSlider: VSlider,
+    VSwitch: VSwitch,
+    VSystemBar: VSystemBar,
+    VTable: VTable,
+    VTextarea: VTextarea,
+    VTextField: VTextField,
+    VThemeProvider: VThemeProvider,
     VTimeline: VTimeline,
     VTimelineItem: VTimelineItem,
     VTooltip: VTooltip,
     VValidation: VValidation,
+    VWindow: VWindow,
+    VWindowItem: VWindowItem,
     VDialogTransition: VDialogTransition,
     VCarouselTransition: VCarouselTransition,
     VCarouselReverseTransition: VCarouselReverseTransition,
@@ -12929,7 +13393,7 @@
   });
 
   // Types
-  function mounted$3(el, binding) {
+  function mounted$2(el, binding) {
     var _modifierKeys$attr, _modifierKeys$char, _modifierKeys$child, _modifierKeys$sub;
 
     const modifiers = binding.modifiers || {};
@@ -12956,7 +13420,7 @@
       let mutations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       let observer = arguments.length > 1 ? arguments[1] : undefined;
       handler == null ? void 0 : handler(mutations, observer);
-      if (once) unmounted$3(el, binding);
+      if (once) unmounted$2(el, binding);
     });
     if (immediate) handler == null ? void 0 : handler([], observer);
     el._mutate = Object(el._mutate);
@@ -12966,7 +13430,7 @@
     observer.observe(el, options);
   }
 
-  function unmounted$3(el, binding) {
+  function unmounted$2(el, binding) {
     var _el$_mutate;
 
     if (!((_el$_mutate = el._mutate) != null && _el$_mutate[binding.instance.$.uid])) return;
@@ -12977,11 +13441,11 @@
   }
 
   const Mutate = {
-    mounted: mounted$3,
-    unmounted: unmounted$3
+    mounted: mounted$2,
+    unmounted: unmounted$2
   };
 
-  function mounted$2(el, binding) {
+  function mounted$1(el, binding) {
     var _binding$modifiers, _binding$modifiers2;
 
     const handler = binding.value;
@@ -13000,7 +13464,7 @@
     }
   }
 
-  function unmounted$2(el, binding) {
+  function unmounted$1(el, binding) {
     var _el$_onResize;
 
     if (!((_el$_onResize = el._onResize) != null && _el$_onResize[binding.instance.$.uid])) return;
@@ -13013,11 +13477,11 @@
   }
 
   const Resize = {
-    mounted: mounted$2,
-    unmounted: unmounted$2
+    mounted: mounted$1,
+    unmounted: unmounted$1
   };
 
-  function mounted$1(el, binding) {
+  function mounted(el, binding) {
     var _binding$modifiers;
 
     const {
@@ -13040,7 +13504,7 @@
     };
   }
 
-  function unmounted$1(el, binding) {
+  function unmounted(el, binding) {
     var _el$_onScroll;
 
     if (!((_el$_onScroll = el._onScroll) != null && _el$_onScroll[binding.instance.$.uid])) return;
@@ -13055,136 +13519,14 @@
 
   function updated(el, binding) {
     if (binding.value === binding.oldValue) return;
-    unmounted$1(el, binding);
-    mounted$1(el, binding);
+    unmounted(el, binding);
+    mounted(el, binding);
   }
 
   const Scroll = {
-    mounted: mounted$1,
-    unmounted: unmounted$1,
-    updated
-  };
-
-  // Types
-
-  const handleGesture = wrapper => {
-    const {
-      touchstartX,
-      touchendX,
-      touchstartY,
-      touchendY
-    } = wrapper;
-    const dirRatio = 0.5;
-    const minDistance = 16;
-    wrapper.offsetX = touchendX - touchstartX;
-    wrapper.offsetY = touchendY - touchstartY;
-
-    if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
-      wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
-      wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
-    }
-
-    if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
-      wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
-      wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
-    }
-  };
-
-  function touchstart(event, wrapper) {
-    var _wrapper$start;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchstartX = touch.clientX;
-    wrapper.touchstartY = touch.clientY;
-    (_wrapper$start = wrapper.start) == null ? void 0 : _wrapper$start.call(wrapper, { ...event,
-      ...wrapper
-    });
-  }
-
-  function touchend(event, wrapper) {
-    var _wrapper$end;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchendX = touch.clientX;
-    wrapper.touchendY = touch.clientY;
-    (_wrapper$end = wrapper.end) == null ? void 0 : _wrapper$end.call(wrapper, { ...event,
-      ...wrapper
-    });
-    handleGesture(wrapper);
-  }
-
-  function touchmove(event, wrapper) {
-    var _wrapper$move;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchmoveX = touch.clientX;
-    wrapper.touchmoveY = touch.clientY;
-    (_wrapper$move = wrapper.move) == null ? void 0 : _wrapper$move.call(wrapper, { ...event,
-      ...wrapper
-    });
-  }
-
-  function createHandlers() {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const wrapper = {
-      touchstartX: 0,
-      touchstartY: 0,
-      touchendX: 0,
-      touchendY: 0,
-      touchmoveX: 0,
-      touchmoveY: 0,
-      offsetX: 0,
-      offsetY: 0,
-      left: value.left,
-      right: value.right,
-      up: value.up,
-      down: value.down,
-      start: value.start,
-      move: value.move,
-      end: value.end
-    };
-    return {
-      touchstart: e => touchstart(e, wrapper),
-      touchend: e => touchend(e, wrapper),
-      touchmove: e => touchmove(e, wrapper)
-    };
-  }
-
-  function mounted(el, binding) {
-    var _value$options, _binding$instance, _target$_touchHandler;
-
-    const value = binding.value;
-    const target = value != null && value.parent ? el.parentElement : el;
-    const options = (_value$options = value == null ? void 0 : value.options) != null ? _value$options : {
-      passive: true
-    };
-    const uid = (_binding$instance = binding.instance) == null ? void 0 : _binding$instance.$.uid; // TODO: use custom uid generator
-
-    if (!target || !uid) return;
-    const handlers = createHandlers(binding.value);
-    target._touchHandlers = (_target$_touchHandler = target._touchHandlers) != null ? _target$_touchHandler : Object.create(null);
-    target._touchHandlers[uid] = handlers;
-    keys(handlers).forEach(eventName => {
-      target.addEventListener(eventName, handlers[eventName], options);
-    });
-  }
-
-  function unmounted(el, binding) {
-    var _binding$value, _binding$instance2;
-
-    const target = (_binding$value = binding.value) != null && _binding$value.parent ? el.parentElement : el;
-    const uid = (_binding$instance2 = binding.instance) == null ? void 0 : _binding$instance2.$.uid;
-    if (!(target != null && target._touchHandlers) || !uid) return;
-    const handlers = target._touchHandlers[uid];
-    keys(handlers).forEach(eventName => {
-      target.removeEventListener(eventName, handlers[eventName]);
-    });
-    delete target._touchHandlers[uid];
-  }
-
-  const Touch = {
     mounted,
-    unmounted
+    unmounted,
+    updated
   };
 
   var directives = /*#__PURE__*/Object.freeze({
@@ -13323,7 +13665,7 @@
       ...options
     });
   };
-  const version = "3.0.0-next-20220112.0";
+  const version = "3.0.0-next-20220128.0";
 
   exports.components = components;
   exports.createVuetify = createVuetify;