vuetify 3.1.0 → 3.1.2

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.0
+* Vuetify v3.1.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -994,7 +994,7 @@
   // Utils
   function propIsDefined(vnode, prop) {
     var _vnode$props, _vnode$props2;
-    return ((_vnode$props = vnode.props) == null ? void 0 : _vnode$props.hasOwnProperty(prop)) || ((_vnode$props2 = vnode.props) == null ? void 0 : _vnode$props2.hasOwnProperty(toKebabCase(prop)));
+    return typeof ((_vnode$props = vnode.props) == null ? void 0 : _vnode$props[prop]) !== 'undefined' || typeof ((_vnode$props2 = vnode.props) == null ? void 0 : _vnode$props2[toKebabCase(prop)]) !== 'undefined';
   }
   const defineComponent = function defineComponent(options) {
     options._setup = options._setup ?? options.setup;
@@ -2370,9 +2370,7 @@
           const animation = animate(el, [{
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
-          }, {
-            transform: ''
-          }], {
+          }, {}], {
             duration: 225 * speed,
             easing: deceleratedEasing
           });
@@ -2382,9 +2380,7 @@
             }, {
               opacity: 0,
               offset: 0.33
-            }, {
-              opacity: 1
-            }], {
+            }, {}], {
               duration: 225 * 2 * speed,
               easing: standardEasing
             });
@@ -2407,9 +2403,7 @@
             sy,
             speed
           } = getDimensions(props.target, el);
-          const animation = animate(el, [{
-            transform: ''
-          }, {
+          const animation = animate(el, [{}, {
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
           }], {
@@ -4390,9 +4384,69 @@
     updated: updated$1
   };
 
+  // Composables
+
+  // Types
+
+  const oppositeMap = {
+    center: 'center',
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
+  const makeLocationProps = propsFactory({
+    location: String
+  }, 'location');
+  function useLocation(props) {
+    let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let offset = arguments.length > 2 ? arguments[2] : undefined;
+    const {
+      isRtl
+    } = useRtl();
+    const locationStyles = vue.computed(() => {
+      if (!props.location) return {};
+      const {
+        side,
+        align
+      } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+      function getOffset(side) {
+        return offset ? offset(side) : 0;
+      }
+      const styles = {};
+      if (side !== 'center') {
+        if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+      }
+      if (align !== 'center') {
+        if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+      } else {
+        if (side === 'center') styles.top = styles.left = '50%';else {
+          styles[{
+            top: 'left',
+            bottom: 'left',
+            left: 'top',
+            right: 'top'
+          }[side]] = '50%';
+        }
+        styles.transform = {
+          top: 'translateX(-50%)',
+          bottom: 'translateX(-50%)',
+          left: 'translateY(-50%)',
+          right: 'translateY(-50%)',
+          center: 'translate(-50%, -50%)'
+        }[side];
+      }
+      return styles;
+    });
+    return {
+      locationStyles
+    };
+  }
+
   const VProgressLinear = defineComponent({
     name: 'VProgressLinear',
     props: {
+      absolute: Boolean,
       active: {
         type: Boolean,
         default: true
@@ -4422,6 +4476,9 @@
       stream: Boolean,
       striped: Boolean,
       roundedBar: Boolean,
+      ...makeLocationProps({
+        location: 'top'
+      }),
       ...makeRoundedProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -4440,6 +4497,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        locationStyles
+      } = useLocation(props);
       const {
         textColorClasses,
         textColorStyles
@@ -4481,6 +4541,7 @@
       useRender(() => vue.createVNode(props.tag, {
         "ref": intersectionRef,
         "class": ['v-progress-linear', {
+          'v-progress-linear--absolute': props.absolute,
           'v-progress-linear--active': props.active && isIntersecting.value,
           'v-progress-linear--reverse': isReversed.value,
           'v-progress-linear--rounded': props.rounded,
@@ -4488,8 +4549,11 @@
           'v-progress-linear--striped': props.striped
         }, roundedClasses.value, themeClasses.value],
         "style": {
+          bottom: props.location === 'bottom' ? 0 : undefined,
+          top: props.location === 'top' ? 0 : undefined,
           height: props.active ? convertToUnit(height.value) : 0,
-          '--v-progress-linear-height': convertToUnit(height.value)
+          '--v-progress-linear-height': convertToUnit(height.value),
+          ...locationStyles.value
         },
         "role": "progressbar",
         "aria-hidden": props.active ? 'false' : 'true',
@@ -4575,65 +4639,6 @@
     }, null)]);
   }
 
-  // Composables
-
-  // Types
-
-  const oppositeMap = {
-    center: 'center',
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left'
-  };
-  const makeLocationProps = propsFactory({
-    location: String
-  }, 'location');
-  function useLocation(props) {
-    let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    let offset = arguments.length > 2 ? arguments[2] : undefined;
-    const {
-      isRtl
-    } = useRtl();
-    const locationStyles = vue.computed(() => {
-      if (!props.location) return {};
-      const {
-        side,
-        align
-      } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-      function getOffset(side) {
-        return offset ? offset(side) : 0;
-      }
-      const styles = {};
-      if (side !== 'center') {
-        if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-      }
-      if (align !== 'center') {
-        if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-      } else {
-        if (side === 'center') styles.top = styles.left = '50%';else {
-          styles[{
-            top: 'left',
-            bottom: 'left',
-            left: 'top',
-            right: 'top'
-          }[side]] = '50%';
-        }
-        styles.transform = {
-          top: 'translateX(-50%)',
-          bottom: 'translateX(-50%)',
-          left: 'translateY(-50%)',
-          right: 'translateY(-50%)',
-          center: 'translate(-50%, -50%)'
-        }[side];
-      }
-      return styles;
-    });
-    return {
-      locationStyles
-    };
-  }
-
   // Utilities
 
   // Types
@@ -4839,8 +4844,14 @@
       const group = useGroupItem(props, props.symbol, false);
       const link = useLink(props, attrs);
       const isActive = vue.computed(() => {
-        var _link$isActive;
-        return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || (group == null ? void 0 : group.isSelected.value));
+        if (props.active !== undefined) {
+          return props.active;
+        }
+        if (link.isLink.value) {
+          var _link$isActive;
+          return (_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value;
+        }
+        return group == null ? void 0 : group.isSelected.value;
       });
       const isDisabled = vue.computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
       const isElevated = vue.computed(() => {
@@ -4850,7 +4861,7 @@
       useRender(() => {
         var _slots$prepend, _slots$default, _slots$append, _slots$loader;
         const Tag = link.isLink.value ? 'a' : props.tag;
-        const hasColor = !group || group.isSelected.value;
+        const hasColor = !group || isActive.value;
         const hasPrepend = !!(props.prependIcon || slots.prepend);
         const hasAppend = !!(props.appendIcon || slots.append);
         const hasIcon = !!(props.icon && props.icon !== true);
@@ -4978,13 +4989,13 @@
     props: {
       ...VToolbarTitle.props
     },
-    setup(_, _ref) {
+    setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VToolbarTitle, {
+      useRender(() => vue.createVNode(VToolbarTitle, vue.mergeProps(props, {
         "class": "v-app-bar-title"
-      }, slots));
+      }), slots));
       return {};
     }
   });
@@ -5330,6 +5341,7 @@
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
+      const messagesId = vue.computed(() => `${id.value}-messages`);
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
@@ -5454,7 +5466,8 @@
           ...slotProps.value,
           props: {
             id: id.value,
-            class: 'v-field__input'
+            class: 'v-field__input',
+            'aria-describedby': messagesId.value
           },
           focus,
           blur
@@ -5537,7 +5550,9 @@
         "transition": props.transition,
         "tag": "div",
         "class": ['v-messages', textColorClasses.value],
-        "style": textColorStyles.value
+        "style": textColorStyles.value,
+        "role": "alert",
+        "aria-live": "polite"
       }, {
         default: () => [props.active && messages.value.map((message, i) => vue.createVNode("div", {
           "class": "v-messages__message",
@@ -5855,6 +5870,7 @@
       } = useInputIcon(props);
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
+      const messagesId = vue.computed(() => `${id.value}-messages`);
       const {
         errorMessages,
         isDirty,
@@ -5870,6 +5886,7 @@
       } = useValidation(props, 'v-input', id);
       const slotProps = vue.computed(() => ({
         id,
+        messagesId,
         isDirty,
         isDisabled,
         isReadonly,
@@ -5905,6 +5922,7 @@
         }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && vue.createVNode("div", {
           "class": "v-input__details"
         }, [vue.createVNode(VMessages, {
+          "id": messagesId.value,
           "active": hasMessages,
           "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
         }, {
@@ -6576,11 +6594,13 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly
             } = _ref2;
             return vue.createVNode(VCheckboxBtn, vue.mergeProps(checkboxProps, {
               "id": id.value,
+              "aria-describedby": messagesId.value,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
             }, controlAttrs, {
@@ -6698,6 +6718,7 @@
       provideDefaults({
         VChip: {
           color: vue.toRef(props, 'color'),
+          disabled: vue.toRef(props, 'disabled'),
           filter: vue.toRef(props, 'filter'),
           variant: vue.toRef(props, 'variant')
         }
@@ -6747,7 +6768,10 @@
         default: '$complete'
       },
       label: Boolean,
-      link: Boolean,
+      link: {
+        type: Boolean,
+        default: undefined
+      },
       pill: Boolean,
       prependAvatar: String,
       prependIcon: IconValue,
@@ -6760,6 +6784,8 @@
         type: Boolean,
         default: true
       },
+      onClick: EventProp,
+      onClickOnce: EventProp,
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -6813,7 +6839,8 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const group = useGroupItem(props, VChipGroupSymbol, false);
       const link = useLink(props, attrs);
-      const isClickable = vue.computed(() => !props.disabled && (!!group || link.isClickable.value || props.link));
+      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
+      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
       function onCloseClick(e) {
         isActive.value = false;
         emit('click:close', e);
@@ -6825,6 +6852,12 @@
         (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
         group == null ? void 0 : group.toggle();
       }
+      function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick(e);
+        }
+      }
       return () => {
         var _slots$default;
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -6845,7 +6878,9 @@
           "disabled": props.disabled || undefined,
           "draggable": props.draggable,
           "href": link.href.value,
-          "onClick": onClick
+          "tabindex": isClickable.value ? 0 : undefined,
+          "onClick": onClick,
+          "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
           default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
             "key": "filter",
@@ -7561,6 +7596,10 @@
       nav: Boolean,
       prependAvatar: String,
       prependIcon: IconValue,
+      ripple: {
+        type: Boolean,
+        default: true
+      },
       subtitle: [String, Number, Boolean],
       title: [String, Number, Boolean],
       value: null,
@@ -7752,7 +7791,7 @@
               "key": "append-avatar"
             }, null)])]
           })]
-        }), [[vue.resolveDirective("ripple"), isClickable.value]]);
+        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
     }
@@ -9293,19 +9332,18 @@
         vue.warn(`Unable to locate target ${_target}`);
         return undefined;
       }
-      if (!useTeleport.cache.has(targetElement)) {
-        const el = document.createElement('div');
-        el.className = 'v-overlay-container';
-        targetElement.appendChild(el);
-        useTeleport.cache.set(targetElement, el);
+      let container = targetElement.querySelector('.v-overlay-container');
+      if (!container) {
+        container = document.createElement('div');
+        container.className = 'v-overlay-container';
+        targetElement.appendChild(container);
       }
-      return useTeleport.cache.get(targetElement);
+      return container;
     });
     return {
       teleportTarget
     };
   }
-  useTeleport.cache = new WeakMap();
 
   function defaultConditional() {
     return true;
@@ -9809,12 +9847,19 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const selections = vue.computed(() => {
         return model.value.map(v => {
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return items.value.filter(item => !selections.value.some(s => s === item));
+        }
+        return items.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         model.value = [];
@@ -9823,11 +9868,11 @@
         }
       }
       function onClickControl() {
-        if (props.hideNoData && !items.value.length || props.readonly) return;
+        if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
         menu.value = !menu.value;
       }
       function onKeydown(e) {
-        if (props.readonly) return;
+        if (props.readonly || form != null && form.isReadonly.value) return;
         if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
           e.preventDefault();
           menu.value = true;
@@ -9854,7 +9899,7 @@
       }
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => selection === item.value);
+          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
           } else {
@@ -9881,6 +9926,7 @@
       }
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
         const [textFieldProps] = filterVTextFieldProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -9913,20 +9959,21 @@
               "activator": "parent",
               "contentClass": "v-select__content",
               "eager": props.eager,
+              "maxHeight": 310,
               "openOnClick": false,
               "closeOnContentClick": false,
               "transition": props.transition
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.createVNode(VList, {
                 "ref": listRef,
                 "selected": selected.value,
                 "selectStrategy": props.multiple ? 'independent' : 'single-independent',
                 "onMousedown": e => e.preventDefault(),
                 "onFocusout": onFocusout
               }, {
-                default: () => [!items.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
-                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), items.value.map((item, index) => {
+                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                   if (slots.item) {
                     var _slots$item;
                     return (_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
@@ -10028,7 +10075,7 @@
     const customFiltersLength = Object.keys((options == null ? void 0 : options.customKeyFilter) ?? {}).length;
     if (!(items != null && items.length)) return array;
     loop: for (let i = 0; i < items.length; i++) {
-      const item = items[i].raw;
+      const item = items[i];
       const customMatches = {};
       const defaultMatches = {};
       let match = -1;
@@ -10068,7 +10115,7 @@
     }
     return array;
   }
-  function useFilter(props, items, query) {
+  function useFilter(props, items, query, options) {
     const strQuery = vue.computed(() => typeof (query == null ? void 0 : query.value) !== 'string' && typeof (query == null ? void 0 : query.value) !== 'number' ? '' : String(query.value));
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
@@ -10079,7 +10126,7 @@
       const results = filterItems(transformedItems, strQuery.value, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
-        filterKeys: props.filterKeys,
+        filterKeys: vue.unref(options == null ? void 0 : options.filterKeys) ?? props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter
       });
@@ -10159,6 +10206,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const {
         filteredItems,
         getMatches
@@ -10168,6 +10216,12 @@
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+        }
+        return filteredItems.value;
+      });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const listRef = vue.ref();
       function onClear(e) {
@@ -10178,11 +10232,11 @@
         search.value = '';
       }
       function onClickControl() {
-        if (props.hideNoData && !items.value.length || props.readonly) return;
+        if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
         menu.value = true;
       }
       function onKeydown(e) {
-        if (props.readonly) return;
+        if (props.readonly || form != null && form.isReadonly.value) return;
         if (['Enter', 'ArrowDown'].includes(e.key)) {
           menu.value = true;
         }
@@ -10220,7 +10274,7 @@
       const isSelecting = vue.ref(false);
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => selection === item.value);
+          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
             search.value = '';
@@ -10259,6 +10313,7 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
         const [textFieldProps] = filterVTextFieldProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -10294,12 +10349,13 @@
               "activator": "parent",
               "contentClass": "v-autocomplete__content",
               "eager": props.eager,
+              "maxHeight": 310,
               "openOnClick": false,
               "closeOnContentClick": false,
               "transition": props.transition,
               "onAfterLeave": onAfterLeave
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.createVNode(VList, {
                 "ref": listRef,
                 "selected": selected.value,
                 "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -10307,9 +10363,9 @@
                 "onFocusin": onFocusin,
                 "onFocusout": onFocusout
               }, {
-                default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
-                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
+                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                   var _slots$item;
                   return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                     item,
@@ -11002,7 +11058,10 @@
       },
       prependAvatar: String,
       prependIcon: IconValue,
-      ripple: Boolean,
+      ripple: {
+        type: Boolean,
+        default: true
+      },
       subtitle: String,
       text: String,
       title: String,
@@ -11123,7 +11182,7 @@
           }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
           }), genOverlays(isClickable.value, 'v-card')]
-        }), [[vue.resolveDirective("ripple"), isClickable.value]]);
+        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
     }
@@ -12416,6 +12475,10 @@
       position: {
         type: Number,
         required: true
+      },
+      ripple: {
+        type: Boolean,
+        default: true
       }
     },
     emits: {
@@ -12516,7 +12579,7 @@
         }, null), vue.withDirectives(vue.createVNode("div", {
           "class": ['v-slider-thumb__ripple', textColorClasses.value],
           "style": textColorStyles.value
-        }, null), [[vue.resolveDirective("ripple"), true, null, {
+        }, null), [[vue.resolveDirective("ripple"), props.ripple, null, {
           circle: true,
           center: true
         }]]), vue.createVNode(VScaleTransition, {
@@ -12719,13 +12782,15 @@
           prepend: hasPrepend ? slotProps => {
             var _slots$label, _slots$prepend;
             return vue.createVNode(vue.Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? vue.createVNode(VLabel, {
+              "id": slotProps.id,
               "class": "v-slider__label",
               "text": props.label
             }, null) : undefined, (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps)]);
           } : undefined,
           default: _ref2 => {
             let {
-              id
+              id,
+              messagesId
             } = _ref2;
             return vue.createVNode("div", {
               "class": "v-slider__container",
@@ -12746,6 +12811,7 @@
               'tick-label': slots['tick-label']
             }), vue.createVNode(VSliderThumb, {
               "ref": thumbContainerRef,
+              "aria-describedby": messagesId.value,
               "focused": isFocused.value,
               "min": min.value,
               "max": max.value,
@@ -13447,6 +13513,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const _search = vue.ref(!props.multiple ? ((_model$value$ = model.value[0]) == null ? void 0 : _model$value$.title) ?? '' : '');
       const search = vue.computed({
         get: () => {
@@ -13491,6 +13558,12 @@
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+        }
+        return filteredItems.value;
+      });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
       const listRef = vue.ref();
@@ -13501,11 +13574,11 @@
         }
       }
       function onClickControl() {
-        if (props.hideNoData && !items.value.length || props.readonly) return;
+        if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
         menu.value = true;
       }
       function onKeydown(e) {
-        if (props.readonly) return;
+        if (props.readonly || form != null && form.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
         const length = selected.value.length;
         if (selectionIndex.value > -1) e.preventDefault();
@@ -13558,7 +13631,7 @@
             vTextFieldRef.value.setSelectionRange(0, 0);
           }
         }
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && search.value) {
           select(transformItem$1(props, search.value));
           search.value = '';
         }
@@ -13568,7 +13641,7 @@
       }
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => selection === item.value);
+          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
           } else {
@@ -13612,6 +13685,7 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
         const [textFieldProps] = filterVTextFieldProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -13646,12 +13720,13 @@
               "activator": "parent",
               "contentClass": "v-combobox__content",
               "eager": props.eager,
+              "maxHeight": 310,
               "openOnClick": false,
               "closeOnContentClick": false,
               "transition": props.transition,
               "onAfterLeave": onAfterLeave
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.createVNode(VList, {
                 "ref": listRef,
                 "selected": selected.value,
                 "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -13659,9 +13734,9 @@
                 "onFocusin": onFocusin,
                 "onFocusout": onFocusout
               }, {
-                default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
-                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
+                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                   var _slots$item;
                   return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                     item,
@@ -14211,6 +14286,7 @@
           ...slots,
           default: _ref3 => {
             let {
+              id,
               isDisabled,
               isDirty,
               isReadonly,
@@ -14224,6 +14300,7 @@
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
+              "id": id.value,
               "active": isDirty.value || isFocused.value,
               "dirty": isDirty.value,
               "focused": isFocused.value,
@@ -16004,6 +16081,7 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly
             } = _ref2;
@@ -16013,6 +16091,7 @@
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
               "id": id.value,
+              "aria-describedby": messagesId.value,
               "defaultsTarget": "VRadio",
               "trueIcon": props.trueIcon,
               "falseIcon": props.falseIcon,
@@ -16136,7 +16215,8 @@
           default: _ref2 => {
             var _startThumbRef$value4, _stopThumbRef$value4;
             let {
-              id
+              id,
+              messagesId
             } = _ref2;
             return vue.createVNode("div", {
               "class": "v-slider__container",
@@ -16164,6 +16244,7 @@
               'tick-label': slots['tick-label']
             }), vue.createVNode(VSliderThumb, {
               "ref": startThumbRef,
+              "aria-describedby": messagesId.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]],
@@ -16193,6 +16274,7 @@
               'thumb-label': slots['thumb-label']
             }), vue.createVNode(VSliderThumb, {
               "ref": stopThumbRef,
+              "aria-describedby": messagesId.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],
@@ -17030,6 +17112,7 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly,
               isValid
@@ -17040,6 +17123,7 @@
               "modelValue": model.value,
               "onUpdate:modelValue": [$event => model.value = $event, onChange],
               "id": id.value,
+              "aria-describedby": messagesId.value,
               "type": "checkbox",
               "aria-checked": indeterminate.value ? 'mixed' : undefined,
               "disabled": isDisabled.value,
@@ -18310,7 +18394,7 @@
       locale
     };
   }
-  const version$1 = "3.1.0";
+  const version$1 = "3.1.2";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18331,7 +18415,7 @@
       ...options
     });
   };
-  const version = "3.1.0";
+  const version = "3.1.2";
   createVuetify.version = version;
 
   exports.components = components;