vuetify 3.10.8 → 3.10.10

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.8
+* Vuetify v3.10.10
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -684,7 +684,8 @@
   class Box {
     constructor(args) {
       const pageScale = document.body.currentCSSZoom ?? 1;
-      const factor = args instanceof DOMRect ? 1 + (1 - pageScale) / pageScale : 1;
+      const ignoreZoom = args.top === undefined; // detect DOMRect without breaking in jsdom
+      const factor = ignoreZoom ? 1 : 1 + (1 - pageScale) / pageScale;
       const {
         x,
         y,
@@ -754,13 +755,7 @@
         });
       }
     } else {
-      const rect = el.getBoundingClientRect();
-      return new Box({
-        x: rect.x,
-        y: rect.y,
-        width: el.clientWidth,
-        height: el.clientHeight
-      });
+      return new Box(el.getBoundingClientRect());
     }
   }
 
@@ -1798,7 +1793,7 @@
       const elapsed = now - Math.max(start, lastExec);
       function invoke() {
         lastExec = Date.now();
-        timeoutId = window.setTimeout(clear, delay);
+        timeoutId = setTimeout(clear, delay);
         fn(...args);
       }
       if (!throttling) {
@@ -1809,7 +1804,7 @@
       } else if (elapsed >= delay) {
         invoke();
       } else if (options.trailing) {
-        timeoutId = window.setTimeout(invoke, delay - elapsed);
+        timeoutId = setTimeout(invoke, delay - elapsed);
       }
     };
     wrap.clear = clear;
@@ -11329,9 +11324,10 @@
     let clearDelay = () => {};
     function runDelay(isOpening, options) {
       clearDelay?.();
-      const delay = Math.max(options?.minDelay ?? 0, Number(isOpening ? props.openDelay : props.closeDelay));
+      const delay = isOpening ? props.openDelay : props.closeDelay;
+      const normalizedDelay = Math.max(options?.minDelay ?? 0, Number(delay ?? 0));
       return new Promise(resolve => {
-        clearDelay = defer(delay, () => {
+        clearDelay = defer(normalizedDelay, () => {
           cb?.(isOpening);
           resolve(isOpening);
         });
@@ -11459,7 +11455,8 @@
         };
       }
       if (openOnFocus.value) {
-        events.onFocusin = () => {
+        events.onFocusin = e => {
+          if (!e.target.matches(':focus-visible')) return;
           isFocused = true;
           runOpenDelay();
         };
@@ -12837,14 +12834,24 @@
       }
       function onInput(e) {
         const el = e.target;
-        model.value = el.value;
-        if (props.modelModifiers?.trim && ['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
-          const caretPosition = [el.selectionStart, el.selectionEnd];
-          vue.nextTick(() => {
-            el.selectionStart = caretPosition[0];
-            el.selectionEnd = caretPosition[1];
-          });
+        if (!(props.modelModifiers?.trim && ['text', 'search', 'password', 'tel', 'url'].includes(props.type))) {
+          model.value = el.value;
+          return;
         }
+        const value = el.value;
+        const start = el.selectionStart;
+        const end = el.selectionEnd;
+        model.value = value;
+        vue.nextTick(() => {
+          let offset = 0;
+          if (value.trimStart().length === el.value.length) {
+            // #22307 - Whitespace has been removed from the
+            // start, offset the caret position to compensate
+            offset = value.length - el.value.length;
+          }
+          if (start != null) el.selectionStart = start - offset;
+          if (end != null) el.selectionEnd = end - offset;
+        });
       }
       useRender(() => {
         const hasCounter = !!(slots.counter || props.counter !== false && props.counter != null);
@@ -15571,6 +15578,12 @@
         roundedClasses
       } = useRounded(props);
       const link = useLink(props, attrs);
+      const loadingColor = vue.shallowRef(undefined);
+      vue.watch(() => props.loading, (val, old) => {
+        loadingColor.value = !val && typeof old === 'string' ? old : typeof val === 'boolean' ? undefined : val;
+      }, {
+        immediate: true
+      });
       useRender(() => {
         const isLink = props.link !== false && link.isLink.value;
         const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
@@ -15613,7 +15626,7 @@
           }, slots.image)]), vue.createVNode(LoaderSlot, {
             "name": "v-card",
             "active": !!props.loading,
-            "color": typeof props.loading === 'boolean' ? undefined : props.loading
+            "color": loadingColor.value
           }, {
             default: slots.loader
           }), hasCardItem && vue.createVNode(VCardItem, {
@@ -19036,11 +19049,6 @@
     let keyGroups;
     let isSequence = false;
     let groupIndex = 0;
-    function clearTimer() {
-      if (!timeout) return;
-      clearTimeout(timeout);
-      timeout = 0;
-    }
     function isInputFocused() {
       if (vue.toValue(inputs)) return false;
       const activeElement = document.activeElement;
@@ -19048,12 +19056,12 @@
     }
     function resetSequence() {
       groupIndex = 0;
-      clearTimer();
+      clearTimeout(timeout);
     }
     function handler(e) {
       const group = keyGroups[groupIndex];
       if (!group || isInputFocused()) return;
-      if (!matchesKeyGroup(e, group)) {
+      if (!matchesKeyGroup(e, group, isMac)) {
         if (isSequence) resetSequence();
         return;
       }
@@ -19062,7 +19070,7 @@
         callback(e);
         return;
       }
-      clearTimer();
+      clearTimeout(timeout);
       groupIndex++;
       if (groupIndex === keyGroups.length) {
         callback(e);
@@ -19073,12 +19081,12 @@
     }
     function cleanup() {
       window.removeEventListener(vue.toValue(event), handler);
-      clearTimer();
+      clearTimeout(timeout);
     }
-    vue.watch(() => vue.toValue(keys), function (unrefKeys) {
+    vue.watch(() => vue.toValue(keys), newKeys => {
       cleanup();
-      if (unrefKeys) {
-        const groups = splitKeySequence(unrefKeys.toLowerCase());
+      if (newKeys) {
+        const groups = splitKeySequence(newKeys.toLowerCase());
         isSequence = groups.length > 1;
         keyGroups = groups;
         resetSequence();
@@ -19089,55 +19097,50 @@
     });
 
     // Watch for changes in the event type to re-register the listener
-    vue.watch(() => vue.toValue(event), function (newEvent, oldEvent) {
+    vue.watch(() => vue.toValue(event), (newEvent, oldEvent) => {
       if (oldEvent && keyGroups && keyGroups.length > 0) {
         window.removeEventListener(oldEvent, handler);
         window.addEventListener(newEvent, handler);
       }
     });
-    try {
-      getCurrentInstance('useHotkey');
-      vue.onBeforeUnmount(cleanup);
-    } catch {
-      // Not in Vue setup context
-    }
-    function parseKeyGroup(group) {
-      const MODIFIERS = ['ctrl', 'shift', 'alt', 'meta', 'cmd'];
+    vue.onScopeDispose(cleanup, true);
+    return cleanup;
+  }
+  function matchesKeyGroup(e, group, isMac) {
+    const {
+      modifiers,
+      actualKey
+    } = parseKeyGroup(group);
+    const expectCtrl = modifiers.ctrl || !isMac && (modifiers.cmd || modifiers.meta);
+    const expectMeta = isMac && (modifiers.cmd || modifiers.meta);
+    return e.ctrlKey === expectCtrl && e.metaKey === expectMeta && e.shiftKey === modifiers.shift && e.altKey === modifiers.alt && e.key.toLowerCase() === actualKey?.toLowerCase();
+  }
+  function parseKeyGroup(group) {
+    const MODIFIERS = ['ctrl', 'shift', 'alt', 'meta', 'cmd'];
 
-      // Use the shared combination splitting logic
-      const parts = splitKeyCombination(group.toLowerCase());
+    // Use the shared combination splitting logic
+    const parts = splitKeyCombination(group.toLowerCase());
 
-      // If the combination is invalid, return empty result
-      if (parts.length === 0) {
-        return {
-          modifiers: Object.fromEntries(MODIFIERS.map(m => [m, false])),
-          actualKey: undefined
-        };
-      }
-      const modifiers = Object.fromEntries(MODIFIERS.map(m => [m, false]));
-      let actualKey;
-      for (const part of parts) {
-        if (MODIFIERS.includes(part)) {
-          modifiers[part] = true;
-        } else {
-          actualKey = part;
-        }
-      }
+    // If the combination is invalid, return empty result
+    if (parts.length === 0) {
       return {
-        modifiers,
-        actualKey
+        modifiers: Object.fromEntries(MODIFIERS.map(m => [m, false])),
+        actualKey: undefined
       };
     }
-    function matchesKeyGroup(e, group) {
-      const {
-        modifiers,
-        actualKey
-      } = parseKeyGroup(group);
-      const expectCtrl = modifiers.ctrl || !isMac && (modifiers.cmd || modifiers.meta);
-      const expectMeta = isMac && (modifiers.cmd || modifiers.meta);
-      return e.ctrlKey === expectCtrl && e.metaKey === expectMeta && e.shiftKey === modifiers.shift && e.altKey === modifiers.alt && e.key.toLowerCase() === actualKey?.toLowerCase();
+    const modifiers = Object.fromEntries(MODIFIERS.map(m => [m, false]));
+    let actualKey;
+    for (const part of parts) {
+      if (MODIFIERS.includes(part)) {
+        modifiers[part] = true;
+      } else {
+        actualKey = part;
+      }
     }
-    return cleanup;
+    return {
+      modifiers,
+      actualKey
+    };
   }
 
   // Utilities
@@ -23767,11 +23770,15 @@
         return week.length ? adapter.getWeek(week[0], props.firstDayOfWeek, props.firstDayOfYear) : null;
       });
     });
+    const {
+      minDate,
+      maxDate
+    } = useCalendarRange(props);
     function isDisabled(value) {
       if (props.disabled) return true;
       const date = adapter.date(value);
-      if (props.min && adapter.isBefore(adapter.endOfDay(date), adapter.date(props.min))) return true;
-      if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
+      if (minDate.value && adapter.isBefore(adapter.endOfDay(date), minDate.value)) return true;
+      if (maxDate.value && adapter.isAfter(date, maxDate.value)) return true;
       if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
         return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
       }
@@ -23791,6 +23798,37 @@
       weekNumbers
     };
   }
+  function useCalendarRange(props) {
+    const adapter = useDate();
+    const minDate = vue.computed(() => {
+      if (!props.min) return null;
+      const date = adapter.date(props.min);
+      return adapter.isValid(date) ? date : null;
+    });
+    const maxDate = vue.computed(() => {
+      if (!props.max) return null;
+      const date = adapter.date(props.max);
+      return adapter.isValid(date) ? date : null;
+    });
+    function clampDate(date) {
+      if (minDate.value && adapter.isBefore(date, minDate.value)) {
+        return minDate.value;
+      }
+      if (maxDate.value && adapter.isAfter(date, maxDate.value)) {
+        return maxDate.value;
+      }
+      return date;
+    }
+    function isInAllowedRange(date) {
+      return (!minDate.value || adapter.isAfter(date, minDate.value)) && (!maxDate.value || adapter.isBefore(date, maxDate.value));
+    }
+    return {
+      minDate,
+      maxDate,
+      clampDate,
+      isInAllowedRange
+    };
+  }
 
   // Types
 
@@ -24231,24 +24269,14 @@
       const viewMode = useProxiedModel(props, 'viewMode');
       // const inputMode = useProxiedModel(props, 'inputMode')
 
-      const minDate = vue.computed(() => {
-        const date = adapter.date(props.min);
-        return props.min && adapter.isValid(date) ? date : null;
-      });
-      const maxDate = vue.computed(() => {
-        const date = adapter.date(props.max);
-        return props.max && adapter.isValid(date) ? date : null;
-      });
+      const {
+        minDate,
+        maxDate,
+        clampDate
+      } = useCalendarRange(props);
       const internal = vue.computed(() => {
         const today = adapter.date();
-        let value = today;
-        if (model.value?.[0]) {
-          value = adapter.date(model.value[0]);
-        } else if (minDate.value && adapter.isBefore(today, minDate.value)) {
-          value = minDate.value;
-        } else if (maxDate.value && adapter.isAfter(today, maxDate.value)) {
-          value = maxDate.value;
-        }
+        const value = model.value?.[0] ? adapter.date(model.value[0]) : clampDate(today);
         return value && adapter.isValid(value) ? value : today;
       });
       const headerColor = vue.toRef(() => props.headerColor ?? props.color);
@@ -30035,14 +30063,24 @@
       }
       function onInput(e) {
         const el = e.target;
-        model.value = el.value;
-        if (props.modelModifiers?.trim) {
-          const caretPosition = [el.selectionStart, el.selectionEnd];
-          vue.nextTick(() => {
-            el.selectionStart = caretPosition[0];
-            el.selectionEnd = caretPosition[1];
-          });
+        if (!props.modelModifiers?.trim) {
+          model.value = el.value;
+          return;
         }
+        const value = el.value;
+        const start = el.selectionStart;
+        const end = el.selectionEnd;
+        model.value = value;
+        vue.nextTick(() => {
+          let offset = 0;
+          if (value.trimStart().length === el.value.length) {
+            // #22307 - Whitespace has been removed from the
+            // start, offset the caret position to compensate
+            offset = value.length - el.value.length;
+          }
+          if (start != null) el.selectionStart = start - offset;
+          if (end != null) el.selectionEnd = end - offset;
+        });
       }
       const sizerRef = vue.ref();
       const rows = vue.ref(Number(props.rows));
@@ -34841,15 +34879,10 @@
       const {
         mobile
       } = useDisplay(props);
-      const clamp = date => {
-        if (props.max && adapter.isAfter(date, props.max)) {
-          return props.max;
-        }
-        if (props.min && adapter.isBefore(date, props.min)) {
-          return props.min;
-        }
-        return date;
-      };
+      const {
+        clampDate,
+        isInAllowedRange
+      } = useCalendarRange(props);
       const emptyModelValue = () => props.multiple ? [] : null;
       const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
       const menu = useProxiedModel(props, 'menu');
@@ -34945,16 +34978,16 @@
           model.value = emptyModelValue();
         } else if (!props.multiple) {
           if (isValid(value)) {
-            model.value = clamp(parseDate(value));
+            model.value = clampDate(parseDate(value));
           }
         } else {
           const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
           if (parts.every(isValid)) {
             if (props.multiple === 'range') {
-              const [start, stop] = parts.map(parseDate).map(clamp).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+              const [start, stop] = parts.map(parseDate).map(clampDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
               model.value = createDateRange(adapter, start, stop);
             } else {
-              model.value = parts.map(parseDate).map(clamp);
+              model.value = parts.map(parseDate).filter(isInAllowedRange);
             }
           }
         }
@@ -36568,7 +36601,7 @@
 
   // Key display tuple: [mode, content] where content is string or IconValue
 
-  // Key tuple: [mode, content] where content is string or IconValue
+  // Key tuple: [mode, content, keycode] where content is string or IconValue
 
   function processKey(config, requestedMode, isMac) {
     const keyCfg = isMac && config.mac ? config.mac : config.default;
@@ -36707,15 +36740,6 @@
       }
     }
   };
-
-  // Create custom variant props that extend the base variant props with our 'contained' option
-  const makeVHotkeyVariantProps = propsFactory({
-    variant: {
-      type: String,
-      default: 'elevated',
-      validator: v => ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain', 'contained'].includes(v)
-    }
-  }, 'VHotkeyVariant');
   const makeVHotkeyProps = propsFactory({
     // String representing keyboard shortcuts (e.g., "ctrl+k", "meta+shift+p")
     keys: String,
@@ -36737,30 +36761,21 @@
     disabled: Boolean,
     prefix: String,
     suffix: String,
+    variant: {
+      type: String,
+      default: 'elevated',
+      validator: v => ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain', 'contained'].includes(v)
+    },
     ...makeComponentProps(),
     ...makeThemeProps(),
     ...makeBorderProps(),
     ...makeRoundedProps(),
     ...makeElevationProps(),
-    ...makeVHotkeyVariantProps(),
     color: String
   }, 'VHotkey');
-  class Delineator {
-    constructor(delineator) {
-      if (['and', 'then'].includes(delineator)) this.val = delineator;else {
-        throw new Error('Not a valid delineator');
-      }
-    }
-    isEqual(d) {
-      return this.val === d.val;
-    }
-  }
-  function isDelineator(value) {
-    return value instanceof Delineator;
-  }
-  function isString(value) {
-    return typeof value === 'string';
-  }
+  const AND_DELINEATOR = Symbol('VHotkey:AND_DELINEATOR'); // For + separators
+  const THEN_DELINEATOR = Symbol('VHotkey:THEN_DELINEATOR'); // For - separators
+
   function getKeyText(keyMap, key, isMac) {
     const lowerKey = key.toLowerCase();
     if (lowerKey in keyMap) {
@@ -36802,57 +36817,38 @@
       const {
         elevationClasses
       } = useElevation(props);
-      const isContainedVariant = vue.computed(() => props.variant === 'contained');
-      const effectiveVariantProps = vue.computed(() => ({
-        ...props,
-        variant: isContainedVariant.value ? 'elevated' : props.variant
-      }));
       const {
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(effectiveVariantProps);
+      } = useVariant(() => ({
+        color: props.color,
+        variant: props.variant === 'contained' ? 'elevated' : props.variant
+      }));
       const isMac = vue.computed(() => props.platform === 'auto' ? typeof navigator !== 'undefined' && /macintosh/i.test(navigator.userAgent) : props.platform === 'mac');
-      const effectiveDisplayMode = vue.computed(() => props.displayMode);
-      const AND_DELINEATOR = new Delineator('and'); // For + separators
-      const THEN_DELINEATOR = new Delineator('then'); // For - separators
-
-      const effectiveKeyMap = vue.computed(() => props.keyMap);
       const keyCombinations = vue.computed(() => {
         if (!props.keys) return [];
 
         // Split by spaces to handle multiple key combinations
         // Example: "ctrl+k meta+p" -> ["ctrl+k", "meta+p"]
         return props.keys.split(' ').map(combination => {
-          // Use the shared sequence splitting logic
+          const result = [];
           const sequenceGroups = splitKeySequence(combination);
-
-          // Process each sequence group
-          return sequenceGroups.flatMap((group, groupIndex) => {
-            // Use the shared key combination splitting logic
-            const keyParts = splitKeyCombination(group);
-            const parts = keyParts.reduce((acc, part, index) => {
-              if (index !== 0) {
-                // Add AND delineator between keys
-                return [...acc, AND_DELINEATOR, part];
-              }
-              return [...acc, part];
-            }, []);
+          for (let i = 0; i < sequenceGroups.length; i++) {
+            const group = sequenceGroups[i];
 
             // Add THEN delineator between sequence groups
-            const result = parts.map(key => {
-              if (isString(key)) {
-                return applyDisplayModeToKey(effectiveKeyMap.value, effectiveDisplayMode.value, key, isMac.value);
-              }
-              return key;
-            });
+            if (i > 0) result.push(THEN_DELINEATOR);
+            const keyParts = splitKeyCombination(group);
+            for (let j = 0; j < keyParts.length; j++) {
+              const part = keyParts[j];
 
-            // Add sequence separator if not the last group
-            if (groupIndex < sequenceGroups.length - 1) {
-              result.push(THEN_DELINEATOR);
+              // Add AND delineator between keys
+              if (j > 0) result.push(AND_DELINEATOR);
+              result.push(applyDisplayModeToKey(props.keyMap, props.displayMode, part, isMac.value));
             }
-            return result;
-          });
+          }
+          return result;
         });
       });
       const accessibleLabel = vue.computed(() => {
@@ -36862,16 +36858,16 @@
         const readableShortcuts = keyCombinations.value.map(combination => {
           const readableParts = [];
           for (const key of combination) {
-            if (isDelineator(key)) {
-              if (AND_DELINEATOR.isEqual(key)) {
-                readableParts.push(t('$vuetify.hotkey.plus'));
-              } else if (THEN_DELINEATOR.isEqual(key)) {
-                readableParts.push(t('$vuetify.hotkey.then'));
-              }
-            } else {
+            if (Array.isArray(key)) {
               // Always use text representation for screen readers
               const textKey = key[0] === 'icon' || key[0] === 'symbol' ? applyDisplayModeToKey(mergeDeep(hotkeyMap, props.keyMap), 'text', String(key[1]), isMac.value)[1] : key[1];
               readableParts.push(translateKey(textKey));
+            } else {
+              if (key === AND_DELINEATOR) {
+                readableParts.push(t('$vuetify.hotkey.plus'));
+              } else if (key === THEN_DELINEATOR) {
+                readableParts.push(t('$vuetify.hotkey.then'));
+              }
             }
           }
           return readableParts.join(' ');
@@ -36883,11 +36879,12 @@
         return key.startsWith('$vuetify.') ? t(key) : key;
       }
       function getKeyTooltip(key) {
-        if (effectiveDisplayMode.value === 'text') return undefined;
-        const textKey = getKeyText(effectiveKeyMap.value, String(key[2]), isMac.value);
+        if (props.displayMode === 'text') return undefined;
+        const textKey = getKeyText(props.keyMap, String(key[2]), isMac.value);
         return translateKey(textKey);
       }
-      function renderKey(key, keyIndex, isContained) {
+      function renderKey(key, keyIndex) {
+        const isContained = props.variant === 'contained';
         const KeyComponent = isContained ? 'kbd' : VKbd;
         const keyClasses = ['v-hotkey__key', `v-hotkey__key-${key[0]}`, ...(isContained ? ['v-hotkey__key--nested'] : [borderClasses.value, roundedClasses.value, elevationClasses.value, colorClasses.value])];
         return vue.createVNode(KeyComponent, {
@@ -36908,47 +36905,39 @@
           "key": keyIndex,
           "class": "v-hotkey__divider",
           "aria-hidden": "true"
-        }, [AND_DELINEATOR.isEqual(key) ? '+' : t('$vuetify.hotkey.then')]);
+        }, [key === AND_DELINEATOR ? '+' : t('$vuetify.hotkey.then')]);
       }
-      useRender(() => vue.createElementVNode("div", {
-        "class": vue.normalizeClass(['v-hotkey', {
-          'v-hotkey--disabled': props.disabled,
-          'v-hotkey--inline': props.inline,
-          'v-hotkey--contained': isContainedVariant.value
-        }, themeClasses.value, rtlClasses.value, variantClasses.value, props.class]),
-        "style": vue.normalizeStyle(props.style),
-        "role": "img",
-        "aria-label": accessibleLabel.value
-      }, [isContainedVariant.value ? vue.createVNode(VKbd, {
-        "key": "contained",
-        "class": vue.normalizeClass(['v-hotkey__contained-wrapper', borderClasses.value, roundedClasses.value, elevationClasses.value, colorClasses.value]),
-        "style": vue.normalizeStyle(colorStyles.value),
-        "aria-hidden": "true"
-      }, {
-        default: () => [props.prefix && vue.createElementVNode("span", {
-          "key": "contained-prefix",
+      useRender(() => {
+        const content = vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
+          "key": "prefix",
           "class": "v-hotkey__prefix"
         }, [props.prefix]), keyCombinations.value.map((combination, comboIndex) => vue.createElementVNode("span", {
           "class": "v-hotkey__combination",
           "key": comboIndex
-        }, [combination.map((key, keyIndex) => isDelineator(key) ? renderDivider(key, keyIndex) : renderKey(key, keyIndex, true)), comboIndex < keyCombinations.value.length - 1 && vue.createElementVNode("span", {
+        }, [combination.map((key, keyIndex) => Array.isArray(key) ? renderKey(key, keyIndex) : renderDivider(key, keyIndex)), comboIndex < keyCombinations.value.length - 1 && vue.createElementVNode("span", {
           "aria-hidden": "true"
         }, [vue.createTextVNode("\xA0")])])), props.suffix && vue.createElementVNode("span", {
-          "key": "contained-suffix",
+          "key": "suffix",
           "class": "v-hotkey__suffix"
-        }, [props.suffix])]
-      }) : vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
-        "key": "prefix",
-        "class": "v-hotkey__prefix"
-      }, [props.prefix]), keyCombinations.value.map((combination, comboIndex) => vue.createElementVNode("span", {
-        "class": "v-hotkey__combination",
-        "key": comboIndex
-      }, [combination.map((key, keyIndex) => isDelineator(key) ? renderDivider(key, keyIndex) : renderKey(key, keyIndex, false)), comboIndex < keyCombinations.value.length - 1 && vue.createElementVNode("span", {
-        "aria-hidden": "true"
-      }, [vue.createTextVNode("\xA0")])])), props.suffix && vue.createElementVNode("span", {
-        "key": "suffix",
-        "class": "v-hotkey__suffix"
-      }, [props.suffix])])]));
+        }, [props.suffix])]);
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-hotkey', {
+            'v-hotkey--disabled': props.disabled,
+            'v-hotkey--inline': props.inline,
+            'v-hotkey--contained': props.variant === 'contained'
+          }, themeClasses.value, rtlClasses.value, variantClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style),
+          "role": "img",
+          "aria-label": accessibleLabel.value
+        }, [props.variant !== 'contained' ? content : vue.createVNode(VKbd, {
+          "key": "contained",
+          "class": vue.normalizeClass(['v-hotkey__contained-wrapper', borderClasses.value, roundedClasses.value, elevationClasses.value, colorClasses.value]),
+          "style": vue.normalizeStyle(colorStyles.value),
+          "aria-hidden": "true"
+        }, {
+          default: () => [content]
+        })]);
+      });
     }
   });
 
@@ -38154,7 +38143,7 @@
       };
     });
   }
-  const version$1 = "3.10.8";
+  const version$1 = "3.10.10";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -38452,7 +38441,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.10.8";
+  const version = "3.10.10";
 
   /* eslint-disable local-rules/sort-imports */