vuetify 3.10.8 → 3.10.10

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.8
+* Vuetify v3.10.10
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -680,7 +680,8 @@ function getAxis(anchor) {
 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,
@@ -750,13 +751,7 @@ function getElementBox(el) {
       });
     }
   } 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());
   }
 }
 
@@ -1794,7 +1789,7 @@ function throttle(fn, delay) {
     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) {
@@ -1805,7 +1800,7 @@ function throttle(fn, delay) {
     } else if (elapsed >= delay) {
       invoke();
     } else if (options.trailing) {
-      timeoutId = window.setTimeout(invoke, delay - elapsed);
+      timeoutId = setTimeout(invoke, delay - elapsed);
     }
   };
   wrap.clear = clear;
@@ -11325,9 +11320,10 @@ function useDelay(props, cb) {
   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);
       });
@@ -11455,7 +11451,8 @@ function useActivator(props, _ref) {
       };
     }
     if (openOnFocus.value) {
-      events.onFocusin = () => {
+      events.onFocusin = e => {
+        if (!e.target.matches(':focus-visible')) return;
         isFocused = true;
         runOpenDelay();
       };
@@ -12833,14 +12830,24 @@ const VTextField = genericComponent()({
     }
     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];
-        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;
+      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);
@@ -15567,6 +15574,12 @@ const VCard = genericComponent()({
       roundedClasses
     } = useRounded(props);
     const link = useLink(props, attrs);
+    const loadingColor = shallowRef(undefined);
+    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);
@@ -15609,7 +15622,7 @@ const VCard = genericComponent()({
         }, slots.image)]), createVNode(LoaderSlot, {
           "name": "v-card",
           "active": !!props.loading,
-          "color": typeof props.loading === 'boolean' ? undefined : props.loading
+          "color": loadingColor.value
         }, {
           default: slots.loader
         }), hasCardItem && createVNode(VCardItem, {
@@ -19032,11 +19045,6 @@ function useHotkey(keys, callback) {
   let keyGroups;
   let isSequence = false;
   let groupIndex = 0;
-  function clearTimer() {
-    if (!timeout) return;
-    clearTimeout(timeout);
-    timeout = 0;
-  }
   function isInputFocused() {
     if (toValue(inputs)) return false;
     const activeElement = document.activeElement;
@@ -19044,12 +19052,12 @@ function useHotkey(keys, callback) {
   }
   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;
     }
@@ -19058,7 +19066,7 @@ function useHotkey(keys, callback) {
       callback(e);
       return;
     }
-    clearTimer();
+    clearTimeout(timeout);
     groupIndex++;
     if (groupIndex === keyGroups.length) {
       callback(e);
@@ -19069,12 +19077,12 @@ function useHotkey(keys, callback) {
   }
   function cleanup() {
     window.removeEventListener(toValue(event), handler);
-    clearTimer();
+    clearTimeout(timeout);
   }
-  watch(() => toValue(keys), function (unrefKeys) {
+  watch(() => 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();
@@ -19085,55 +19093,50 @@ function useHotkey(keys, callback) {
   });
 
   // Watch for changes in the event type to re-register the listener
-  watch(() => toValue(event), function (newEvent, oldEvent) {
+  watch(() => toValue(event), (newEvent, oldEvent) => {
     if (oldEvent && keyGroups && keyGroups.length > 0) {
       window.removeEventListener(oldEvent, handler);
       window.addEventListener(newEvent, handler);
     }
   });
-  try {
-    getCurrentInstance('useHotkey');
-    onBeforeUnmount(cleanup);
-  } catch {
-    // Not in Vue setup context
-  }
-  function parseKeyGroup(group) {
-    const MODIFIERS = ['ctrl', 'shift', 'alt', 'meta', 'cmd'];
+  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
@@ -23763,11 +23766,15 @@ function useCalendar(props) {
       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));
     }
@@ -23787,6 +23794,37 @@ function useCalendar(props) {
     weekNumbers
   };
 }
+function useCalendarRange(props) {
+  const adapter = useDate();
+  const minDate = computed(() => {
+    if (!props.min) return null;
+    const date = adapter.date(props.min);
+    return adapter.isValid(date) ? date : null;
+  });
+  const maxDate = 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
 
@@ -24227,24 +24265,14 @@ const VDatePicker = genericComponent()({
     const viewMode = useProxiedModel(props, 'viewMode');
     // const inputMode = useProxiedModel(props, 'inputMode')
 
-    const minDate = computed(() => {
-      const date = adapter.date(props.min);
-      return props.min && adapter.isValid(date) ? date : null;
-    });
-    const maxDate = computed(() => {
-      const date = adapter.date(props.max);
-      return props.max && adapter.isValid(date) ? date : null;
-    });
+    const {
+      minDate,
+      maxDate,
+      clampDate
+    } = useCalendarRange(props);
     const internal = 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 = toRef(() => props.headerColor ?? props.color);
@@ -30031,14 +30059,24 @@ const VTextarea = genericComponent()({
     }
     function onInput(e) {
       const el = e.target;
-      model.value = el.value;
-      if (props.modelModifiers?.trim) {
-        const caretPosition = [el.selectionStart, el.selectionEnd];
-        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;
+      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 = ref();
     const rows = ref(Number(props.rows));
@@ -34837,15 +34875,10 @@ const VDateInput = genericComponent()({
     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');
@@ -34941,16 +34974,16 @@ const VDateInput = genericComponent()({
         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);
           }
         }
       }
@@ -36564,7 +36597,7 @@ const VPullToRefresh = genericComponent()({
 
 // 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;
@@ -36703,15 +36736,6 @@ const hotkeyMap = {
     }
   }
 };
-
-// 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,
@@ -36733,30 +36757,21 @@ const makeVHotkeyProps = propsFactory({
   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) {
@@ -36798,57 +36813,38 @@ const VHotkey = genericComponent()({
     const {
       elevationClasses
     } = useElevation(props);
-    const isContainedVariant = computed(() => props.variant === 'contained');
-    const effectiveVariantProps = 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 = computed(() => props.platform === 'auto' ? typeof navigator !== 'undefined' && /macintosh/i.test(navigator.userAgent) : props.platform === 'mac');
-    const effectiveDisplayMode = computed(() => props.displayMode);
-    const AND_DELINEATOR = new Delineator('and'); // For + separators
-    const THEN_DELINEATOR = new Delineator('then'); // For - separators
-
-    const effectiveKeyMap = computed(() => props.keyMap);
     const keyCombinations = 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 = computed(() => {
@@ -36858,16 +36854,16 @@ const VHotkey = genericComponent()({
       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(' ');
@@ -36879,11 +36875,12 @@ const VHotkey = genericComponent()({
       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 createVNode(KeyComponent, {
@@ -36904,47 +36901,39 @@ const VHotkey = genericComponent()({
         "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(() => createElementVNode("div", {
-      "class": 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": normalizeStyle(props.style),
-      "role": "img",
-      "aria-label": accessibleLabel.value
-    }, [isContainedVariant.value ? createVNode(VKbd, {
-      "key": "contained",
-      "class": normalizeClass(['v-hotkey__contained-wrapper', borderClasses.value, roundedClasses.value, elevationClasses.value, colorClasses.value]),
-      "style": normalizeStyle(colorStyles.value),
-      "aria-hidden": "true"
-    }, {
-      default: () => [props.prefix && createElementVNode("span", {
-        "key": "contained-prefix",
+    useRender(() => {
+      const content = createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
+        "key": "prefix",
         "class": "v-hotkey__prefix"
       }, [props.prefix]), keyCombinations.value.map((combination, comboIndex) => 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 && createElementVNode("span", {
+      }, [combination.map((key, keyIndex) => Array.isArray(key) ? renderKey(key, keyIndex) : renderDivider(key, keyIndex)), comboIndex < keyCombinations.value.length - 1 && createElementVNode("span", {
         "aria-hidden": "true"
       }, [createTextVNode("\xA0")])])), props.suffix && createElementVNode("span", {
-        "key": "contained-suffix",
+        "key": "suffix",
         "class": "v-hotkey__suffix"
-      }, [props.suffix])]
-    }) : createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
-      "key": "prefix",
-      "class": "v-hotkey__prefix"
-    }, [props.prefix]), keyCombinations.value.map((combination, comboIndex) => 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 && createElementVNode("span", {
-      "aria-hidden": "true"
-    }, [createTextVNode("\xA0")])])), props.suffix && createElementVNode("span", {
-      "key": "suffix",
-      "class": "v-hotkey__suffix"
-    }, [props.suffix])])]));
+      }, [props.suffix])]);
+      return createElementVNode("div", {
+        "class": 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": normalizeStyle(props.style),
+        "role": "img",
+        "aria-label": accessibleLabel.value
+      }, [props.variant !== 'contained' ? content : createVNode(VKbd, {
+        "key": "contained",
+        "class": normalizeClass(['v-hotkey__contained-wrapper', borderClasses.value, roundedClasses.value, elevationClasses.value, colorClasses.value]),
+        "style": normalizeStyle(colorStyles.value),
+        "aria-hidden": "true"
+      }, {
+        default: () => [content]
+      })]);
+    });
   }
 });
 
@@ -38150,7 +38139,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -38448,7 +38437,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.10.8";
+const version = "3.10.10";
 
 /* eslint-disable local-rules/sort-imports */