vuetify 3.3.12 → 3.4.0-alpha.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.12
+* Vuetify v3.4.0-alpha.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -78,6 +78,7 @@
   const IN_BROWSER = typeof window !== 'undefined';
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
   const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+  const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
 
   function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
   function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -161,7 +162,15 @@
     return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
   }
   function refElement(obj) {
-    return obj && '$el' in obj ? obj.$el : obj;
+    if (obj && '$el' in obj) {
+      const el = obj.$el;
+      if (el?.nodeType === Node.TEXT_NODE) {
+        // Multi-root component, use the first element
+        return el.nextElementSibling;
+      }
+      return el;
+    }
+    return obj;
   }
 
   // KeyboardEvent.keyCode aliases
@@ -233,14 +242,22 @@
     include.forEach(prop => clone[prop] = obj[prop]);
     return clone;
   }
+  const onRE = /^on[^a-z]/;
+  const isOn = key => onRE.test(key);
+  const bubblingEvents = ['onAfterscriptexecute', 'onAnimationcancel', 'onAnimationend', 'onAnimationiteration', 'onAnimationstart', 'onAuxclick', 'onBeforeinput', 'onBeforescriptexecute', 'onChange', 'onClick', 'onCompositionend', 'onCompositionstart', 'onCompositionupdate', 'onContextmenu', 'onCopy', 'onCut', 'onDblclick', 'onFocusin', 'onFocusout', 'onFullscreenchange', 'onFullscreenerror', 'onGesturechange', 'onGestureend', 'onGesturestart', 'onGotpointercapture', 'onInput', 'onKeydown', 'onKeypress', 'onKeyup', 'onLostpointercapture', 'onMousedown', 'onMousemove', 'onMouseout', 'onMouseover', 'onMouseup', 'onMousewheel', 'onPaste', 'onPointercancel', 'onPointerdown', 'onPointerenter', 'onPointerleave', 'onPointermove', 'onPointerout', 'onPointerover', 'onPointerup', 'onReset', 'onSelect', 'onSubmit', 'onTouchcancel', 'onTouchend', 'onTouchmove', 'onTouchstart', 'onTransitioncancel', 'onTransitionend', 'onTransitionrun', 'onTransitionstart', 'onWheel'];
 
   /**
    * Filter attributes that should be applied to
-   * the root element of a an input component. Remaining
+   * the root element of an input component. Remaining
    * attributes should be passed to the <input> element inside.
    */
   function filterInputAttrs(attrs) {
-    return pick(attrs, ['class', 'style', 'id', /^data-/]);
+    const [events, props] = pick(attrs, [onRE]);
+    const inputEvents = omit(events, bubblingEvents);
+    const [rootAttrs, inputAttrs] = pick(props, ['class', 'style', 'id', /^data-/]);
+    Object.assign(rootAttrs, events);
+    Object.assign(inputAttrs, inputEvents);
+    return [rootAttrs, inputAttrs];
   }
   function wrapInArray(v) {
     return v == null ? [] : Array.isArray(v) ? v : [v];
@@ -393,8 +410,6 @@
   function includes(arr, val) {
     return arr.includes(val);
   }
-  const onRE = /^on[^a-z]/;
-  const isOn = key => onRE.test(key);
   function eventName(propName) {
     return propName[2].toLowerCase() + propName.slice(3);
   }
@@ -554,6 +569,18 @@
       }
     };
   }
+  function getTargetBox(target) {
+    if (Array.isArray(target)) {
+      return new Box({
+        x: target[0],
+        y: target[1],
+        width: 0,
+        height: 0
+      });
+    } else {
+      return target.getBoundingClientRect();
+    }
+  }
 
   // Utilities
 
@@ -1025,34 +1052,6 @@
 
   // Types
 
-  function useToggleScope(source, fn) {
-    let scope;
-    function start() {
-      scope = vue.effectScope();
-      scope.run(() => fn.length ? fn(() => {
-        scope?.stop();
-        start();
-      }) : fn());
-    }
-    vue.watch(source, active => {
-      if (active && !scope) {
-        start();
-      } else if (!active) {
-        scope?.stop();
-        scope = undefined;
-      }
-    }, {
-      immediate: true
-    });
-    vue.onScopeDispose(() => {
-      scope?.stop();
-    });
-  }
-
-  // Composables
-
-  // Types
-
   const DefaultsSymbol = Symbol.for('vuetify:defaults');
   function createDefaults(options) {
     return vue.ref(options);
@@ -1071,6 +1070,7 @@
       const scoped = vue.unref(options?.scoped);
       const reset = vue.unref(options?.reset);
       const root = vue.unref(options?.root);
+      if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value;
       let properties = mergeDeep(providedDefaults.value, {
         prev: injectedDefaults.value
       });
@@ -1126,16 +1126,16 @@
           let [key] = _ref;
           return key.startsWith(key[0].toUpperCase());
         });
-        if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
+        _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined;
+      } else {
+        _subcomponentDefaults.value = undefined;
       }
     });
     function provideSubDefaults() {
-      // If subcomponent defaults are provided, override any
-      // subcomponents provided by the component's setup function.
-      // This uses injectSelf so must be done after the original setup to work.
-      useToggleScope(_subcomponentDefaults, () => {
-        provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
-      });
+      const injected = injectSelf(DefaultsSymbol, vm);
+      vue.provide(DefaultsSymbol, vue.computed(() => {
+        return _subcomponentDefaults.value ? mergeDeep(injected?.value ?? {}, _subcomponentDefaults.value) : injected?.value;
+      }));
     }
     return {
       props: _props,
@@ -1317,9 +1317,10 @@
   // Types
 
   function injectSelf(key) {
+    let vm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstance('injectSelf');
     const {
       provides
-    } = getCurrentInstance('injectSelf');
+    } = vm;
     if (provides && key in provides) {
       // TS doesn't allow symbol as index type
       return provides[key];
@@ -1657,6 +1658,7 @@
 
   var en = {
     badge: 'Badge',
+    open: 'Open',
     close: 'Close',
     dataIterator: {
       noResultsText: 'No matching records found',
@@ -1795,6 +1797,34 @@
     zhHant: false
   };
 
+  // Utilities
+
+  // Types
+
+  function useToggleScope(source, fn) {
+    let scope;
+    function start() {
+      scope = vue.effectScope();
+      scope.run(() => fn.length ? fn(() => {
+        scope?.stop();
+        start();
+      }) : fn());
+    }
+    vue.watch(source, active => {
+      if (active && !scope) {
+        start();
+      } else if (!active) {
+        scope?.stop();
+        scope = undefined;
+      }
+    }, {
+      immediate: true
+    });
+    vue.onScopeDispose(() => {
+      scope?.stop();
+    });
+  }
+
   // Composables
 
   // Types
@@ -2107,9 +2137,9 @@
           surface: '#FFFFFF',
           'surface-variant': '#424242',
           'on-surface-variant': '#EEEEEE',
-          primary: '#6200EE',
-          'primary-darken-1': '#3700B3',
-          secondary: '#03DAC6',
+          primary: '#1867C0',
+          'primary-darken-1': '#1F5592',
+          secondary: '#48A9A6',
           'secondary-darken-1': '#018786',
           error: '#B00020',
           info: '#2196F3',
@@ -2142,10 +2172,10 @@
           surface: '#212121',
           'surface-variant': '#BDBDBD',
           'on-surface-variant': '#424242',
-          primary: '#BB86FC',
-          'primary-darken-1': '#3700B3',
-          secondary: '#03DAC5',
-          'secondary-darken-1': '#03DAC5',
+          primary: '#2196F3',
+          'primary-darken-1': '#277CC1',
+          secondary: '#54B6B2',
+          'secondary-darken-1': '#48A9A6',
           error: '#CF6679',
           info: '#2196F3',
           success: '#4CAF50',
@@ -2630,7 +2660,7 @@
   // Types
 
   const makeVDialogTransitionProps = propsFactory({
-    target: Object
+    target: [Object, Array]
   }, 'v-dialog-transition');
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
@@ -2732,7 +2762,7 @@
     return els && [...els];
   }
   function getDimensions(target, el) {
-    const targetBox = target.getBoundingClientRect();
+    const targetBox = getTargetBox(target);
     const elBox = nullifyTransforms(el);
     const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v));
     const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ');
@@ -2978,6 +3008,10 @@
   const makeVImgProps = propsFactory({
     alt: String,
     cover: Boolean,
+    draggable: {
+      type: [Boolean, String],
+      default: undefined
+    },
     eager: Boolean,
     gradient: String,
     lazySrc: String,
@@ -2996,6 +3030,8 @@
       type: [String, Object],
       default: ''
     },
+    crossorigin: String,
+    referrerpolicy: String,
     srcset: String,
     ...makeVResponsiveProps(),
     ...makeComponentProps(),
@@ -3120,6 +3156,9 @@
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
           "alt": props.alt,
+          "crossorigin": props.crossorigin,
+          "referrerpolicy": props.referrerpolicy,
+          "draggable": props.draggable,
           "sizes": props.sizes,
           "ref": image,
           "onLoad": onLoad,
@@ -3141,7 +3180,10 @@
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createVNode("img", {
           "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
           "src": normalisedSrc.value.lazySrc,
-          "alt": props.alt
+          "alt": props.alt,
+          "crossorigin": props.crossorigin,
+          "referrerpolicy": props.referrerpolicy,
+          "draggable": props.draggable
         }, null)]
       });
       const __placeholder = () => {
@@ -4160,7 +4202,8 @@
     file: 'mdi-paperclip',
     plus: 'mdi-plus',
     minus: 'mdi-minus',
-    calendar: 'mdi-calendar'
+    calendar: 'mdi-calendar',
+    eyeDropper: 'mdi-eyedropper'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -5750,6 +5793,7 @@
 
   const makeVSelectionControlProps = propsFactory({
     label: String,
+    baseColor: String,
     trueValue: null,
     falseValue: null,
     value: null,
@@ -5788,7 +5832,8 @@
       textColorClasses,
       textColorStyles
     } = useTextColor(vue.computed(() => {
-      return model.value && !props.error && !props.disabled ? props.color : undefined;
+      if (props.error || props.disabled) return undefined;
+      return model.value ? props.color : props.baseColor;
     }));
     const icon = vue.computed(() => model.value ? props.trueIcon : props.falseIcon);
     return {
@@ -5860,6 +5905,20 @@
           }
         }) : props.label;
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        const inputNode = vue.createVNode("input", vue.mergeProps({
+          "ref": input,
+          "checked": model.value,
+          "disabled": !!(props.readonly || props.disabled),
+          "id": id.value,
+          "onBlur": onBlur,
+          "onFocus": onFocus,
+          "onInput": onInput,
+          "aria-disabled": !!(props.readonly || props.disabled),
+          "type": props.type,
+          "value": trueValue.value,
+          "name": props.name,
+          "aria-checked": props.type === 'checkbox' ? model.value : undefined
+        }, inputAttrs), null);
         return vue.createVNode("div", vue.mergeProps({
           "class": ['v-selection-control', {
             'v-selection-control--dirty': model.value,
@@ -5876,34 +5935,24 @@
           "style": textColorStyles.value
         }, [slots.default?.(), vue.withDirectives(vue.createVNode("div", {
           "class": ['v-selection-control__input']
-        }, [icon.value && vue.createVNode(VIcon, {
-          "key": "icon",
-          "icon": icon.value
-        }, null), vue.createVNode("input", vue.mergeProps({
-          "ref": input,
-          "checked": model.value,
-          "disabled": !!(props.readonly || props.disabled),
-          "id": id.value,
-          "onBlur": onBlur,
-          "onFocus": onFocus,
-          "onInput": onInput,
-          "aria-disabled": !!(props.readonly || props.disabled),
-          "type": props.type,
-          "value": trueValue.value,
-          "name": props.name,
-          "aria-checked": props.type === 'checkbox' ? model.value : undefined
-        }, inputAttrs), null), slots.input?.({
+        }, [slots.input?.({
           model,
           textColorClasses,
           textColorStyles,
+          inputNode,
+          icon: icon.value,
           props: {
             onFocus,
             onBlur,
             id: id.value
           }
-        })]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
+        }) ?? vue.createVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
+          "key": "icon",
+          "icon": icon.value
+        }, null), inputNode])]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
           "for": id.value,
-          "clickable": true
+          "clickable": true,
+          "onClick": e => e.stopPropagation()
         }, {
           default: () => [label]
         })]);
@@ -5952,16 +6001,19 @@
       const trueIcon = vue.computed(() => {
         return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
-      useRender(() => vue.createVNode(VSelectionControl, vue.mergeProps(props, {
-        "modelValue": model.value,
-        "onUpdate:modelValue": [$event => model.value = $event, onChange],
-        "class": ['v-checkbox-btn', props.class],
-        "style": props.style,
-        "type": "checkbox",
-        "falseIcon": falseIcon.value,
-        "trueIcon": trueIcon.value,
-        "aria-checked": indeterminate.value ? 'mixed' : undefined
-      }), slots));
+      useRender(() => {
+        const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue']);
+        return vue.createVNode(VSelectionControl, vue.mergeProps(controlProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": [$event => model.value = $event, onChange],
+          "class": ['v-checkbox-btn', props.class],
+          "style": props.style,
+          "type": "checkbox",
+          "falseIcon": falseIcon.value,
+          "trueIcon": trueIcon.value,
+          "aria-checked": indeterminate.value ? 'mixed' : undefined
+        }), slots);
+      });
       return {};
     }
   });
@@ -6525,12 +6577,12 @@
       const uid = getUid();
       const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
-        const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+        const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = VInput.filterProps(props);
         const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-checkbox', props.class]
-        }, inputAttrs, inputProps, {
+        }, rootAttrs, inputProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "id": id.value,
@@ -6568,6 +6620,7 @@
     end: Boolean,
     icon: IconValue,
     image: String,
+    text: String,
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -6618,7 +6671,7 @@
         }, null) : props.icon ? vue.createVNode(VIcon, {
           "key": "icon",
           "icon": props.icon
-        }, null) : slots.default?.(), genOverlays(false, 'v-avatar')]
+        }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
       }));
       return {};
     }
@@ -7670,7 +7723,6 @@
           "style": [colorStyles.value, dimensionStyles.value, props.style],
           "href": link.href.value,
           "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-          "title": props.title,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
@@ -7703,7 +7755,9 @@
             }
           }, {
             default: () => [slots.prepend?.(slotProps.value)]
-          })]), vue.createVNode("div", {
+          }), vue.createVNode("div", {
+            "class": "v-list-item__spacer"
+          }, null)]), vue.createVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
@@ -7747,7 +7801,9 @@
             }
           }, {
             default: () => [slots.append?.(slotProps.value)]
-          })])]
+          }), vue.createVNode("div", {
+            "class": "v-list-item__spacer"
+          }, null)])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
@@ -8396,7 +8452,7 @@
     return contentBox;
   }
   function connectedLocationStrategy(data, props, contentStyles) {
-    const activatorFixed = isFixedPosition(data.activatorEl.value);
+    const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);
     if (activatorFixed) {
       Object.assign(contentStyles.value, {
         position: 'fixed',
@@ -8445,11 +8501,11 @@
     const observer = new ResizeObserver(() => {
       if (observe) updateLocation();
     });
-    vue.watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
-      let [newActivatorEl, newContentEl] = _ref;
-      let [oldActivatorEl, oldContentEl] = _ref2;
-      if (oldActivatorEl) observer.unobserve(oldActivatorEl);
-      if (newActivatorEl) observer.observe(newActivatorEl);
+    vue.watch([data.target, data.contentEl], (_ref, _ref2) => {
+      let [newTarget, newContentEl] = _ref;
+      let [oldTarget, oldContentEl] = _ref2;
+      if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);
+      if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget);
       if (oldContentEl) observer.unobserve(oldContentEl);
       if (newContentEl) observer.observe(newContentEl);
     }, {
@@ -8465,8 +8521,8 @@
       requestAnimationFrame(() => {
         requestAnimationFrame(() => observe = true);
       });
-      if (!data.activatorEl.value || !data.contentEl.value) return;
-      const targetBox = data.activatorEl.value.getBoundingClientRect();
+      if (!data.target.value || !data.contentEl.value) return;
+      const targetBox = getTargetBox(data.target.value);
       const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
       const viewportMargin = 12;
@@ -8753,11 +8809,11 @@
     function onScroll(e) {
       data.isActive.value = false;
     }
-    bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll);
+    bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
   }
   function blockScrollStrategy(data, props) {
     const offsetParent = data.root.value?.offsetParent;
-    const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+    const scrollElements = [...new Set([...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
     const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
     const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
     if (scrollableParent) {
@@ -8801,7 +8857,7 @@
     }
     ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
       scope.run(() => {
-        bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+        bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
           if (slow) {
             // If the position calculation is slow,
             // defer updates until scrolling is finished.
@@ -8882,6 +8938,7 @@
   // Types
 
   const makeActivatorProps = propsFactory({
+    target: [String, Object],
     activator: [String, Object],
     activatorProps: {
       type: Object,
@@ -8904,6 +8961,7 @@
       isActive,
       isTop
     } = _ref;
+    const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
     let isHovered = false;
     let isFocused = false;
@@ -8921,10 +8979,14 @@
         isActive.value = value;
       }
     });
+    const cursorTarget = vue.ref();
     const availableEvents = {
       onClick: e => {
         e.stopPropagation();
         activatorEl.value = e.currentTarget || e.target;
+        if (!isActive.value) {
+          cursorTarget.value = [e.clientX, e.clientY];
+        }
         isActive.value = !isActive.value;
       },
       onMouseenter: e => {
@@ -9018,6 +9080,15 @@
         isActive.value = false;
       }
     });
+    vue.watch(isActive, val => {
+      if (!val) {
+        setTimeout(() => {
+          cursorTarget.value = undefined;
+        });
+      }
+    }, {
+      flush: 'post'
+    });
     const activatorRef = vue.ref();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
@@ -9025,7 +9096,15 @@
         activatorEl.value = refElement(activatorRef.value);
       });
     });
-    const vm = getCurrentInstance('useActivator');
+    const targetRef = vue.ref();
+    const target = vue.computed(() => {
+      if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
+      if (targetRef.value) return refElement(targetRef.value);
+      return getTarget(props.target, vm) || activatorEl.value;
+    });
+    const targetEl = vue.computed(() => {
+      return Array.isArray(target.value) ? undefined : target.value;
+    });
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
@@ -9049,6 +9128,9 @@
     return {
       activatorEl,
       activatorRef,
+      target,
+      targetEl,
+      targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents
@@ -9090,31 +9172,34 @@
     }
     function getActivator() {
       let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-      let activator;
-      if (selector) {
-        if (selector === 'parent') {
-          let el = vm?.proxy?.$el?.parentNode;
-          while (el.hasAttribute('data-no-activator')) {
-            el = el.parentNode;
-          }
-          activator = el;
-        } else if (typeof selector === 'string') {
-          // Selector
-          activator = document.querySelector(selector);
-        } else if ('$el' in selector) {
-          // Component (ref)
-          activator = selector.$el;
-        } else {
-          // HTMLElement | Element
-          activator = selector;
-        }
-      }
+      const activator = getTarget(selector, vm);
 
       // The activator should only be a valid element (Ignore comments and text nodes)
-      activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : null;
+      activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
       return activatorEl.value;
     }
   }
+  function getTarget(selector, vm) {
+    if (!selector) return;
+    let target;
+    if (selector === 'parent') {
+      let el = vm?.proxy?.$el?.parentNode;
+      while (el.hasAttribute('data-no-activator')) {
+        el = el.parentNode;
+      }
+      target = el;
+    } else if (typeof selector === 'string') {
+      // Selector
+      target = document.querySelector(selector);
+    } else if ('$el' in selector) {
+      // Component (ref)
+      target = selector.$el;
+    } else {
+      // HTMLElement | Element | [x, y]
+      target = selector;
+    }
+    return target;
+  }
 
   // Utilities
 
@@ -9238,10 +9323,30 @@
       ssr: !!ssr
     };
   }
+  const makeDisplayProps = propsFactory({
+    mobileBreakpoint: [Number, String]
+  }, 'display');
   function useDisplay() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const display = vue.inject(DisplaySymbol);
     if (!display) throw new Error('Could not find Vuetify display injection');
-    return display;
+    const mobile = vue.computed(() => {
+      if (!props.mobileBreakpoint) return display.mobile.value;
+      const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
+      return display.width.value < breakpointValue;
+    });
+    const displayClasses = vue.computed(() => {
+      if (!name) return {};
+      return {
+        [`${name}--mobile`]: mobile.value
+      };
+    });
+    return {
+      ...display,
+      displayClasses,
+      mobile
+    };
   }
 
   // Composables
@@ -9558,6 +9663,9 @@
       const {
         activatorEl,
         activatorRef,
+        target,
+        targetEl,
+        targetRef,
         activatorEvents,
         contentEvents,
         scrimEvents
@@ -9583,13 +9691,13 @@
       } = useLocationStrategies(props, {
         isRtl,
         contentEl,
-        activatorEl,
+        target,
         isActive
       });
       useScrollStrategies(props, {
         root,
         contentEl,
-        activatorEl,
+        targetEl,
         isActive,
         updateLocation
       });
@@ -9657,7 +9765,8 @@
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         props: vue.mergeProps({
-          ref: activatorRef
+          ref: activatorRef,
+          targetRef
         }, activatorEvents.value, props.activatorProps)
       }), isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
@@ -9680,7 +9789,7 @@
           "appear": true,
           "persisted": true,
           "transition": props.transition,
-          "target": activatorEl.value,
+          "target": target.value,
           "onAfterLeave": () => {
             onAfterLeave();
             emit('afterLeave');
@@ -9701,6 +9810,7 @@
       })]));
       return {
         activatorEl,
+        target,
         animateClick,
         contentEl,
         globalTop,
@@ -9858,10 +9968,11 @@
           }, 40);
         }
       });
-      function onFocusIn(e) {
+      async function onFocusIn(e) {
         const before = e.relatedTarget;
         const after = e.target;
-        if (before !== after && overlay.value?.contentEl &&
+        await vue.nextTick();
+        if (isActive.value && before !== after && overlay.value?.contentEl &&
         // We're the topmost menu
         overlay.value?.globalTop &&
         // It isn't the document or the menu body
@@ -10197,7 +10308,7 @@
             'v-field--no-label': !label,
             [`v-field--variant-${props.variant}`]: true
           }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
-          "style": [backgroundColorStyles.value, textColorStyles.value, props.style],
+          "style": [backgroundColorStyles.value, props.style],
           "onClick": onClick
         }, attrs), [vue.createVNode("div", {
           "class": "v-field__overlay"
@@ -10221,7 +10332,8 @@
           "ref": floatingLabelRef,
           "class": [textColorClasses.value],
           "floating": true,
-          "for": id.value
+          "for": id.value,
+          "style": textColorStyles.value
         }, {
           default: () => [label]
         }), vue.createVNode(VFieldLabel, {
@@ -10257,7 +10369,8 @@
           "key": "append-icon",
           "name": "appendInner"
         }, null)]), vue.createVNode("div", {
-          "class": ['v-field__outline', textColorClasses.value]
+          "class": ['v-field__outline', textColorClasses.value],
+          "style": textColorStyles.value
         }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
           "class": "v-field__outline__start"
         }, null), hasLabel.value && vue.createVNode("div", {
@@ -10301,6 +10414,7 @@
     persistentPlaceholder: Boolean,
     persistentCounter: Boolean,
     suffix: String,
+    role: String,
     type: {
       type: String,
       default: 'text'
@@ -10425,7 +10539,7 @@
               "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner'],
-              "role": "textbox"
+              "role": props.role
             }, fieldProps, {
               "id": id.value,
               "active": isActive.value || isDirty.value,
@@ -10464,10 +10578,12 @@
                   "class": "v-text-field__prefix"
                 }, [vue.createVNode("span", {
                   "class": "v-text-field__prefix__text"
-                }, [props.prefix])]), vue.createVNode("div", {
+                }, [props.prefix])]), slots.default ? vue.createVNode("div", {
                   "class": fieldClass,
                   "data-no-activator": ""
-                }, [slots.default ? vue.createVNode(vue.Fragment, null, [slots.default(), inputNode]) : vue.cloneVNode(inputNode)]), props.suffix && vue.createVNode("span", {
+                }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
+                  class: fieldClass
+                }), props.suffix && vue.createVNode("span", {
                   "class": "v-text-field__suffix"
                 }, [vue.createVNode("span", {
                   "class": "v-text-field__suffix__text"
@@ -10786,6 +10902,14 @@
   const makeSelectProps = propsFactory({
     chips: Boolean,
     closableChips: Boolean,
+    closeText: {
+      type: String,
+      default: '$vuetify.close'
+    },
+    openText: {
+      type: String,
+      default: '$vuetify.open'
+    },
     eager: Boolean,
     hideNoData: Boolean,
     hideSelected: Boolean,
@@ -10815,7 +10939,8 @@
   const makeVSelectProps = propsFactory({
     ...makeSelectProps(),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'button'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: {
@@ -10870,6 +10995,7 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const isFocused = vue.shallowRef(false);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       let keyboardLookupPrefix = '';
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
@@ -10996,7 +11122,9 @@
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onBlur": onBlur,
-          "onKeydown": onKeydown
+          "onKeydown": onKeydown,
+          "aria-label": t(label.value),
+          "title": t(label.value)
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
@@ -11259,7 +11387,8 @@
     }),
     ...makeSelectProps(),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'combobox'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: false
@@ -11296,6 +11425,7 @@
       });
       const selectionIndex = vue.shallowRef(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       const {
         items,
         transformIn,
@@ -11643,7 +11773,9 @@
               "class": "v-autocomplete__menu-icon",
               "icon": props.menuIcon,
               "onMousedown": onMousedownMenuIcon,
-              "onClick": noop
+              "onClick": noop,
+              "aria-label": t(label.value),
+              "title": t(label.value)
             }, null) : undefined]);
           }
         });
@@ -11798,6 +11930,7 @@
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
@@ -11819,8 +11952,9 @@
         densityClasses
       } = useDensity(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -11856,7 +11990,7 @@
             'v-banner--stacked': props.stacked || mobile.value,
             'v-banner--sticky': props.sticky,
             [`v-banner--${props.lines}-line`]: !!props.lines
-          }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
+          }, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
           "style": [dimensionStyles.value, locationStyles.value, props.style],
           "role": "banner"
         }, {
@@ -12163,12 +12297,17 @@
               item,
               raw
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-              "key": item.title,
+            return vue.createVNode(vue.Fragment, null, [slots.item?.({
+              item,
+              index
+            }) ?? vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
+              "key": index,
               "disabled": index >= array.length - 1
-            }, item), {
+            }, typeof item === 'string' ? {
+              title: item
+            } : item), {
               default: slots.title ? () => slots.title?.({
-                item: raw,
+                item,
                 index
               }) : undefined
             }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
@@ -13506,7 +13645,11 @@
     ...makeRoundedProps(),
     ...makeElevationProps({
       elevation: 2
-    })
+    }),
+    ripple: {
+      type: Boolean,
+      default: true
+    }
   }, 'Slider');
   const useSteps = props => {
     const min = vue.computed(() => parseFloat(props.min));
@@ -14113,7 +14256,8 @@
               "position": trackStop.value,
               "elevation": props.elevation,
               "onFocus": focus,
-              "onBlur": blur
+              "onBlur": blur,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -14144,12 +14288,36 @@
       let {
         emit
       } = _ref;
+      const abortController = new AbortController();
+      vue.onUnmounted(() => abortController.abort());
+      async function openEyeDropper() {
+        if (!SUPPORTS_EYE_DROPPER) return;
+        const eyeDropper = new window.EyeDropper();
+        try {
+          const result = await eyeDropper.open({
+            signal: abortController.signal
+          });
+          const colorHexValue = HexToHSV(result.sRGBHex);
+          emit('update:color', {
+            ...(props.color ?? nullColor),
+            ...colorHexValue
+          });
+        } catch (e) {}
+      }
       useRender(() => vue.createVNode("div", {
         "class": ['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
         }, props.class],
         "style": props.style
-      }, [vue.createVNode("div", {
+      }, [SUPPORTS_EYE_DROPPER && vue.createVNode("div", {
+        "class": "v-color-picker-preview__eye-dropper",
+        "key": "eyeDropper"
+      }, [vue.createVNode(VBtn, {
+        "onClick": openEyeDropper,
+        "icon": "$eyeDropper",
+        "variant": "plain",
+        "density": "comfortable"
+      }, null)]), vue.createVNode("div", {
         "class": "v-color-picker-preview__dot"
       }, [vue.createVNode("div", {
         "style": {
@@ -14787,7 +14955,8 @@
       returnObject: true
     }),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'combobox'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: false
@@ -14826,6 +14995,7 @@
       const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
       const color = vue.computed(() => vTextFieldRef.value?.color);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       const {
         items,
         transformIn,
@@ -15201,7 +15371,9 @@
               "class": "v-combobox__menu-icon",
               "icon": props.menuIcon,
               "onMousedown": onMousedownMenuIcon,
-              "onClick": noop
+              "onClick": noop,
+              "aria-label": t(label.value),
+              "title": t(label.value)
             }, null) : undefined]);
           }
         });
@@ -16816,6 +16988,7 @@
     sticky: Boolean,
     ...makeBorderProps(),
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -16854,8 +17027,9 @@
         elevationClasses
       } = useElevation(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         roundedClasses
       } = useRounded(props);
@@ -16966,7 +17140,7 @@
             'v-navigation-drawer--temporary': isTemporary.value,
             'v-navigation-drawer--active': isActive.value,
             'v-navigation-drawer--sticky': isSticky.value
-          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
           "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
         }, scopeId, attrs), {
           default: () => [hasImage && vue.createVNode("div", {
@@ -17494,7 +17668,7 @@
       const id = vue.computed(() => props.id || `radio-group-${uid}`);
       const model = useProxiedModel(props, 'modelValue');
       useRender(() => {
-        const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+        const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
         const label = slots.label ? slots.label({
@@ -17506,7 +17680,7 @@
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-radio-group', props.class],
           "style": props.style
-        }, inputAttrs, inputProps, {
+        }, rootAttrs, inputProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "id": id.value
@@ -17714,7 +17888,8 @@
               },
               "min": min.value,
               "max": model.value[1],
-              "position": trackStart.value
+              "position": trackStart.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             }), vue.createVNode(VSliderThumb, {
@@ -17742,7 +17917,8 @@
               },
               "min": model.value[0],
               "max": max.value,
-              "position": trackStop.value
+              "position": trackStop.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -18016,6 +18192,7 @@
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeTagProps(),
     ...makeGroupProps({
       selectedClass: 'v-slide-group-item--active'
@@ -18035,8 +18212,9 @@
         isRtl
       } = useRtl();
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const group = useGroup(props, props.symbol);
       const isOverflowing = vue.shallowRef(false);
       const scrollOffset = vue.shallowRef(0);
@@ -18256,7 +18434,7 @@
           'v-slide-group--vertical': !isHorizontal.value,
           'v-slide-group--has-affixes': hasAffixes.value,
           'v-slide-group--is-overflowing': isOverflowing.value
-        }, props.class],
+        }, displayClasses.value, props.class],
         "style": props.style,
         "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
         "onFocus": onFocus
@@ -18483,6 +18661,7 @@
         focus,
         blur
       } = useFocus(props);
+      const control = vue.ref();
       const loaderColor = vue.computed(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
@@ -18493,16 +18672,15 @@
           indeterminate.value = false;
         }
       }
+      function onTrackClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        control.value?.input?.click();
+      }
       useRender(() => {
-        const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+        const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
-        const control = vue.ref();
-        function onClick(e) {
-          e.stopPropagation();
-          e.preventDefault();
-          control.value?.input?.click();
-        }
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-switch', {
             'v-switch--inset': props.inset
@@ -18510,7 +18688,7 @@
             'v-switch--indeterminate': indeterminate.value
           }, loaderClasses.value, props.class],
           "style": props.style
-        }, inputAttrs, inputProps, {
+        }, rootAttrs, inputProps, {
           "id": id.value,
           "focused": isFocused.value
         }), {
@@ -18540,29 +18718,36 @@
               ...slots,
               default: () => vue.createVNode("div", {
                 "class": "v-switch__track",
-                "onClick": onClick
+                "onClick": onTrackClick
               }, null),
               input: _ref3 => {
                 let {
-                  textColorClasses,
-                  textColorStyles
+                  inputNode,
+                  icon
                 } = _ref3;
-                return vue.createVNode("div", {
-                  "class": ['v-switch__thumb', textColorClasses.value],
-                  "style": textColorStyles.value
-                }, [props.loading && vue.createVNode(LoaderSlot, {
-                  "name": "v-switch",
-                  "active": true,
-                  "color": isValid.value === false ? undefined : loaderColor.value
-                }, {
-                  default: slotProps => slots.loader ? slots.loader(slotProps) : vue.createVNode(VProgressCircular, {
-                    "active": slotProps.isActive,
-                    "color": slotProps.color,
-                    "indeterminate": true,
-                    "size": "16",
-                    "width": "2"
-                  }, null)
-                })]);
+                return vue.createVNode(vue.Fragment, null, [inputNode, vue.createVNode("div", {
+                  "class": ['v-switch__thumb', {
+                    'v-switch__thumb--filled': icon || props.loading
+                  }]
+                }, [vue.createVNode(VScaleTransition, null, {
+                  default: () => [!props.loading ? icon && vue.createVNode(VIcon, {
+                    "key": icon,
+                    "icon": icon,
+                    "size": "x-small"
+                  }, null) : vue.createVNode(LoaderSlot, {
+                    "name": "v-switch",
+                    "active": true,
+                    "color": isValid.value === false ? undefined : loaderColor.value
+                  }, {
+                    default: slotProps => slots.loader ? slots.loader(slotProps) : vue.createVNode(VProgressCircular, {
+                      "active": slotProps.isActive,
+                      "color": slotProps.color,
+                      "indeterminate": true,
+                      "size": "16",
+                      "width": "2"
+                    }, null)
+                  })]
+                })])]);
               }
             });
           }
@@ -19043,8 +19228,7 @@
               "onMousedown": onControlMousedown,
               "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
-              "onClick:appendInner": props['onClick:appendInner'],
-              "role": "textbox"
+              "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
               "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
@@ -24396,7 +24580,7 @@
       date
     };
   }
-  const version$1 = "3.3.12";
+  const version$1 = "3.4.0-alpha.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -24410,7 +24594,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.12";
+  const version = "3.4.0-alpha.0";
 
   /* eslint-disable local-rules/sort-imports */