@vuetify/nightly 3.9.0-beta.0-dev.2025-06-24 → 3.9.0-beta.1-dev.2025-06-28

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.0-dev.2025-06-24
+* Vuetify v3.9.0-beta.1-dev.2025-06-28
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2145,6 +2145,24 @@
       exclude: 'The {0} character is not allowed',
       notEmpty: 'Please choose at least one value',
       pattern: 'Invalid format'
+    },
+    hotkey: {
+      then: 'then',
+      ctrl: 'Ctrl',
+      command: 'Command',
+      space: 'Space',
+      shift: 'Shift',
+      alt: 'Alt',
+      enter: 'Enter',
+      escape: 'Escape',
+      upArrow: 'Up Arrow',
+      downArrow: 'Down Arrow',
+      leftArrow: 'Left Arrow',
+      rightArrow: 'Right Arrow',
+      backspace: 'Backspace',
+      option: 'Option',
+      plus: 'plus',
+      shortcut: 'Keyboard shortcut: {0}'
     }
   };
 
@@ -4655,7 +4673,18 @@
     treeviewExpand: 'mdi-menu-right',
     eyeDropper: 'mdi-eyedropper',
     upload: 'mdi-cloud-upload',
-    color: 'mdi-palette'
+    color: 'mdi-palette',
+    command: 'mdi-apple-keyboard-command',
+    ctrl: 'mdi-apple-keyboard-control',
+    space: 'mdi-keyboard-space',
+    shift: 'mdi-apple-keyboard-shift',
+    alt: 'mdi-apple-keyboard-option',
+    enter: 'mdi-keyboard-return',
+    arrowup: 'mdi-arrow-up',
+    arrowdown: 'mdi-arrow-down',
+    arrowleft: 'mdi-arrow-left',
+    arrowright: 'mdi-arrow-right',
+    backspace: 'mdi-backspace'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -9021,9 +9050,9 @@
   }, 'nested');
   const useNested = props => {
     let isUnmounted = false;
-    const children = vue.ref(new Map());
-    const parents = vue.ref(new Map());
-    const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+    const children = vue.shallowRef(new Map());
+    const parents = vue.shallowRef(new Map());
+    const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(Array.isArray(v) ? v.map(i => vue.toRaw(i)) : v), v => [...v.values()]);
     const activeStrategy = vue.computed(() => {
       if (typeof props.activeStrategy === 'object') return props.activeStrategy;
       if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -9077,7 +9106,7 @@
     });
     function getPath(id) {
       const path = [];
-      let parent = id;
+      let parent = vue.toRaw(id);
       while (parent != null) {
         path.unshift(parent);
         parent = parents.value.get(parent);
@@ -9220,7 +9249,7 @@
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
     const uidSymbol = Symbol('nested item');
-    const computedId = vue.computed(() => vue.toValue(id) ?? uidSymbol);
+    const computedId = vue.computed(() => vue.toRaw(vue.toValue(id)) ?? uidSymbol);
     const item = {
       ...parent,
       id: computedId,
@@ -9229,10 +9258,10 @@
       isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
-      isActivated: vue.computed(() => parent.root.activated.value.has(vue.toRaw(computedId.value))),
+      isActivated: vue.computed(() => parent.root.activated.value.has(computedId.value)),
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
-      isSelected: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'on'),
-      isIndeterminate: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'indeterminate'),
+      isSelected: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+      isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
       isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value)),
       isGroupActivator: parent.isGroupActivator
     };
@@ -18077,6 +18106,317 @@
     return createInstance(options, locale);
   }
 
+  /**
+   * Centralized key alias mapping for consistent key normalization across the hotkey system.
+   *
+   * This maps various user-friendly aliases to canonical key names that match
+   * KeyboardEvent.key values (in lowercase) where possible.
+   */
+  const keyAliasMap = {
+    // Modifier aliases (from vue-use, other libraries, and current implementation)
+    control: 'ctrl',
+    command: 'cmd',
+    option: 'alt',
+    // Arrow key aliases (common abbreviations)
+    up: 'arrowup',
+    down: 'arrowdown',
+    left: 'arrowleft',
+    right: 'arrowright',
+    // Other common key aliases
+    esc: 'escape',
+    spacebar: ' ',
+    space: ' ',
+    return: 'enter',
+    del: 'delete',
+    // Symbol aliases (existing from hotkey-parsing.ts)
+    minus: '-',
+    hyphen: '-'
+  };
+
+  /**
+   * Normalizes a key string to its canonical form using the alias map.
+   *
+   * @param key - The key string to normalize
+   * @returns The canonical key name in lowercase
+   */
+  function normalizeKey(key) {
+    const lowerKey = key.toLowerCase();
+    return keyAliasMap[lowerKey] || lowerKey;
+  }
+
+  // Utilities
+
+  /**
+   * Splits a single combination string into individual key parts.
+   *
+   * A combination is a set of keys that must be pressed simultaneously.
+   * e.g. `ctrl+k`, `shift--`
+   */
+  function splitKeyCombination(combination) {
+    let isInternal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!combination) {
+      if (!isInternal) consoleWarn('Invalid hotkey combination: empty string provided');
+      return [];
+    }
+
+    // --- VALIDATION ---
+    const startsWithPlusOrUnderscore = combination.startsWith('+') || combination.startsWith('_');
+    const hasInvalidLeadingSeparator =
+    // Starts with a single '+' or '_' followed by a non-separator character (e.g. '+a', '_a')
+    startsWithPlusOrUnderscore && !(combination.startsWith('++') || combination.startsWith('__'));
+    const hasInvalidStructure =
+    // Invalid leading separator patterns
+    combination.length > 1 && hasInvalidLeadingSeparator ||
+    // Disallow literal + or _ keys (they require shift)
+    combination.includes('++') || combination.includes('__') || combination === '+' || combination === '_' ||
+    // Ends with a separator that is not part of a doubled literal
+    combination.length > 1 && (combination.endsWith('+') || combination.endsWith('_')) && combination.at(-2) !== combination.at(-1) ||
+    // Stand-alone doubled separators (dangling)
+    combination === '++' || combination === '--' || combination === '__';
+    if (hasInvalidStructure) {
+      if (!isInternal) consoleWarn(`Invalid hotkey combination: "${combination}" has invalid structure`);
+      return [];
+    }
+    const keys = [];
+    let buffer = '';
+    const flushBuffer = () => {
+      if (buffer) {
+        keys.push(normalizeKey(buffer));
+        buffer = '';
+      }
+    };
+    for (let i = 0; i < combination.length; i++) {
+      const char = combination[i];
+      const nextChar = combination[i + 1];
+      if (char === '+' || char === '_' || char === '-') {
+        if (char === nextChar) {
+          flushBuffer();
+          keys.push(char);
+          i++;
+        } else if (char === '+' || char === '_') {
+          flushBuffer();
+        } else {
+          buffer += char;
+        }
+      } else {
+        buffer += char;
+      }
+    }
+    flushBuffer();
+
+    // Within a combination, `-` is only valid as a literal key (e.g., `ctrl+-`).
+    // `-` cannot be part of a longer key name within a combination.
+    const hasInvalidMinus = keys.some(key => key.length > 1 && key.includes('-') && key !== '--');
+    if (hasInvalidMinus) {
+      if (!isInternal) consoleWarn(`Invalid hotkey combination: "${combination}" has invalid structure`);
+      return [];
+    }
+    if (keys.length === 0 && combination) {
+      return [normalizeKey(combination)];
+    }
+    return keys;
+  }
+
+  /**
+   * Splits a hotkey string into its constituent combination groups.
+   *
+   * A sequence is a series of combinations that must be pressed in order.
+   * e.g. `a-b`, `ctrl+k-p`
+   */
+  function splitKeySequence(str) {
+    if (!str) {
+      consoleWarn('Invalid hotkey sequence: empty string provided');
+      return [];
+    }
+
+    // A sequence is invalid if it starts or ends with a separator,
+    // unless it is part of a combination (e.g., `shift+-`).
+    const hasInvalidStart = str.startsWith('-') && !['---', '--+'].includes(str);
+    const hasInvalidEnd = str.endsWith('-') && !str.endsWith('+-') && !str.endsWith('_-') && str !== '-' && str !== '---';
+    if (hasInvalidStart || hasInvalidEnd) {
+      consoleWarn(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+      return [];
+    }
+    const result = [];
+    let buffer = '';
+    let i = 0;
+    while (i < str.length) {
+      const char = str[i];
+      if (char === '-') {
+        // Determine if this hyphen is part of the current combination
+        const prevChar = str[i - 1];
+        const prevPrevChar = i > 1 ? str[i - 2] : undefined;
+        const precededBySinglePlusOrUnderscore = (prevChar === '+' || prevChar === '_') && prevPrevChar !== '+';
+        if (precededBySinglePlusOrUnderscore) {
+          // Treat as part of the combination (e.g., 'ctrl+-')
+          buffer += char;
+          i++;
+        } else {
+          // Treat as sequence separator
+          if (buffer) {
+            result.push(buffer);
+            buffer = '';
+          } else {
+            // Empty buffer means we have a literal '-' key
+            result.push('-');
+          }
+          i++;
+        }
+      } else {
+        buffer += char;
+        i++;
+      }
+    }
+
+    // Add final buffer if it exists
+    if (buffer) {
+      result.push(buffer);
+    }
+
+    // Collapse runs of '-' so that every second '-' is removed
+    const collapsed = [];
+    let minusCount = 0;
+    for (const part of result) {
+      if (part === '-') {
+        if (minusCount % 2 === 0) collapsed.push('-');
+        minusCount++;
+      } else {
+        minusCount = 0;
+        collapsed.push(part);
+      }
+    }
+
+    // Validate that each part of the sequence is a valid combination
+    const areAllValid = collapsed.every(s => splitKeyCombination(s, true).length > 0);
+    if (!areAllValid) {
+      consoleWarn(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+      return [];
+    }
+    return collapsed;
+  }
+
+  // Composables
+
+  // Types
+
+  function useHotkey(keys, callback) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!IN_BROWSER) return function () {};
+    const {
+      event = 'keydown',
+      inputs = false,
+      preventDefault = true,
+      sequenceTimeout = 1000
+    } = options;
+    const isMac = navigator?.userAgent?.includes('Macintosh') ?? false;
+    let timeout = 0;
+    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;
+      return activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable || activeElement.contentEditable === 'true');
+    }
+    function resetSequence() {
+      groupIndex = 0;
+      clearTimer();
+    }
+    function handler(e) {
+      const group = keyGroups[groupIndex];
+      if (!group || isInputFocused()) return;
+      if (!matchesKeyGroup(e, group)) {
+        if (isSequence) resetSequence();
+        return;
+      }
+      if (vue.toValue(preventDefault)) e.preventDefault();
+      if (!isSequence) {
+        callback(e);
+        return;
+      }
+      clearTimer();
+      groupIndex++;
+      if (groupIndex === keyGroups.length) {
+        callback(e);
+        resetSequence();
+        return;
+      }
+      timeout = window.setTimeout(resetSequence, vue.toValue(sequenceTimeout));
+    }
+    function cleanup() {
+      window.removeEventListener(vue.toValue(event), handler);
+      clearTimer();
+    }
+    vue.watch(() => vue.toValue(keys), function (unrefKeys) {
+      cleanup();
+      if (unrefKeys) {
+        const groups = splitKeySequence(unrefKeys.toLowerCase());
+        isSequence = groups.length > 1;
+        keyGroups = groups;
+        resetSequence();
+        window.addEventListener(vue.toValue(event), handler);
+      }
+    }, {
+      immediate: true
+    });
+
+    // Watch for changes in the event type to re-register the listener
+    vue.watch(() => vue.toValue(event), function (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'];
+
+      // 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;
+        }
+      }
+      return {
+        modifiers,
+        actualKey
+      };
+    }
+    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();
+    }
+    return cleanup;
+  }
+
   // Types
 
   const makeVColorPickerProps = propsFactory({
@@ -29766,7 +30106,7 @@
         emit('toggleExpand', e);
       }
       useRender(() => {
-        const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
+        const listItemProps = VListItem.filterProps(props);
         const hasPrepend = slots.prepend || props.toggleIcon;
         return vue.createVNode(VListItem, vue.mergeProps({
           "ref": vListItemRef
@@ -29777,7 +30117,7 @@
             'v-treeview-item--filtered': isFiltered.value
           }, props.class],
           "ripple": false,
-          "onClick": props.onClick ?? activateGroupActivator
+          "onClick": activateGroupActivator
         }), {
           ...slots,
           prepend: hasPrepend ? slotProps => {
@@ -29828,6 +30168,7 @@
     falseIcon: IconValue,
     trueIcon: IconValue,
     returnObject: Boolean,
+    activatable: Boolean,
     selectable: Boolean,
     selectedColor: String,
     selectStrategy: [String, Function, Object],
@@ -29847,7 +30188,7 @@
       } = _ref;
       const isLoading = vue.reactive(new Set());
       const activatorItems = vue.ref([]);
-      const isClickOnOpen = vue.computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable));
+      const isClickOnOpen = vue.computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable && !props.activatable));
       async function checkChildren(item) {
         try {
           if (!props.items?.length || !props.loadChildren) return;
@@ -32281,6 +32622,398 @@
     }
   });
 
+  // Types
+
+  // Display mode types for different visual representations
+
+  // Extended variant type that includes our custom 'contained' variant
+
+  // Key display tuple: [mode, content] where content is string or IconValue
+
+  // Key tuple: [mode, content] where content is string or IconValue
+
+  function processKey(config, requestedMode, isMac) {
+    const keyCfg = isMac && config.mac ? config.mac : config.default;
+
+    // 1. Resolve the safest display mode for the current platform
+    const mode = (() => {
+      // Non-Mac platforms rarely use icons – prefer text
+      if (requestedMode === 'icon' && !isMac) return 'text';
+
+      // If the requested mode lacks an asset, fall back to text
+      if (requestedMode === 'icon' && !keyCfg.icon) return 'text';
+      if (requestedMode === 'symbol' && !keyCfg.symbol) return 'text';
+      return requestedMode;
+    })();
+
+    // 2. Pick value for the chosen mode, defaulting to text representation
+    let value = keyCfg[mode] ?? keyCfg.text;
+
+    // 3. Guard against icon tokens leaking into text mode (e.g. "$ctrl")
+    if (mode === 'text' && typeof value === 'string' && value.startsWith('$') && !value.startsWith('$vuetify.')) {
+      value = value.slice(1).toUpperCase(); // "$ctrl" → "CTRL"
+    }
+    return mode === 'icon' ? ['icon', value] : [mode, value];
+  }
+  const hotkeyMap = {
+    ctrl: {
+      mac: {
+        symbol: '⌃',
+        icon: '$ctrl',
+        text: '$vuetify.hotkey.ctrl'
+      },
+      default: {
+        text: 'Ctrl'
+      }
+    },
+    meta: {
+      mac: {
+        symbol: '⌘',
+        icon: '$command',
+        text: '$vuetify.hotkey.command'
+      },
+      default: {
+        text: 'Ctrl'
+      }
+    },
+    cmd: {
+      mac: {
+        symbol: '⌘',
+        icon: '$command',
+        text: '$vuetify.hotkey.command'
+      },
+      default: {
+        text: 'Ctrl'
+      }
+    },
+    shift: {
+      mac: {
+        symbol: '⇧',
+        icon: '$shift',
+        text: '$vuetify.hotkey.shift'
+      },
+      default: {
+        text: 'Shift'
+      }
+    },
+    alt: {
+      mac: {
+        symbol: '⌥',
+        icon: '$alt',
+        text: '$vuetify.hotkey.option'
+      },
+      default: {
+        text: 'Alt'
+      }
+    },
+    enter: {
+      default: {
+        symbol: '↵',
+        icon: '$enter',
+        text: '$vuetify.hotkey.enter'
+      }
+    },
+    arrowup: {
+      default: {
+        symbol: '↑',
+        icon: '$arrowup',
+        text: '$vuetify.hotkey.upArrow'
+      }
+    },
+    arrowdown: {
+      default: {
+        symbol: '↓',
+        icon: '$arrowdown',
+        text: '$vuetify.hotkey.downArrow'
+      }
+    },
+    arrowleft: {
+      default: {
+        symbol: '←',
+        icon: '$arrowleft',
+        text: '$vuetify.hotkey.leftArrow'
+      }
+    },
+    arrowright: {
+      default: {
+        symbol: '→',
+        icon: '$arrowright',
+        text: '$vuetify.hotkey.rightArrow'
+      }
+    },
+    backspace: {
+      default: {
+        symbol: '⌫',
+        icon: '$backspace',
+        text: '$vuetify.hotkey.backspace'
+      }
+    },
+    escape: {
+      default: {
+        text: '$vuetify.hotkey.escape'
+      }
+    },
+    ' ': {
+      mac: {
+        symbol: '␣',
+        icon: '$space',
+        text: '$vuetify.hotkey.space'
+      },
+      default: {
+        text: '$vuetify.hotkey.space'
+      }
+    },
+    '-': {
+      default: {
+        text: '-'
+      }
+    }
+  };
+
+  // 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,
+    // How to display keys: 'symbol' uses special characters (⌘, ⌃), 'icon' uses SVG icons, 'text' uses words
+    displayMode: {
+      type: String,
+      default: 'icon'
+    },
+    // Custom key mapping configuration. Users can import and modify the exported hotkeyMap as needed
+    keyMap: {
+      type: Object,
+      default: () => hotkeyMap
+    },
+    platform: {
+      type: String,
+      default: 'auto'
+    },
+    inline: Boolean,
+    disabled: Boolean,
+    prefix: String,
+    suffix: String,
+    ...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';
+  }
+  function getKeyText(keyMap, key, isMac) {
+    const lowerKey = key.toLowerCase();
+    if (lowerKey in keyMap) {
+      const result = processKey(keyMap[lowerKey], 'text', isMac);
+      return typeof result[1] === 'string' ? result[1] : String(result[1]);
+    }
+    return key.toUpperCase();
+  }
+  function applyDisplayModeToKey(keyMap, mode, key, isMac) {
+    const lowerKey = key.toLowerCase();
+    if (lowerKey in keyMap) {
+      const result = processKey(keyMap[lowerKey], mode, isMac);
+      if (result[0] === 'text' && typeof result[1] === 'string' && result[1].startsWith('$') && !result[1].startsWith('$vuetify.')) {
+        return ['text', result[1].replace('$', '').toUpperCase(), key];
+      }
+      return [...result, key];
+    }
+    return ['text', key.toUpperCase(), key];
+  }
+  const VHotkey = genericComponent()({
+    name: 'VHotkey',
+    props: makeVHotkeyProps(),
+    setup(props) {
+      const {
+        t
+      } = useLocale();
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        rtlClasses
+      } = useRtl();
+      const {
+        borderClasses
+      } = useBorder(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
+      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);
+      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 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];
+            }, []);
+
+            // 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;
+            });
+
+            // Add sequence separator if not the last group
+            if (groupIndex < sequenceGroups.length - 1) {
+              result.push(THEN_DELINEATOR);
+            }
+            return result;
+          });
+        });
+      });
+      const accessibleLabel = vue.computed(() => {
+        if (!props.keys) return '';
+
+        // Convert the parsed key combinations into readable text
+        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 {
+              // 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));
+            }
+          }
+          return readableParts.join(' ');
+        });
+        const shortcutText = readableShortcuts.join(', ');
+        return t('$vuetify.hotkey.shortcut', shortcutText);
+      });
+      function translateKey(key) {
+        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);
+        return translateKey(textKey);
+      }
+      function renderKey(key, keyIndex, isContained) {
+        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, {
+          "key": keyIndex,
+          "class": vue.normalizeClass(keyClasses),
+          "style": vue.normalizeStyle(isContained ? undefined : colorStyles.value),
+          "aria-hidden": "true",
+          "title": getKeyTooltip(key)
+        }, {
+          default: () => [key[0] === 'icon' ? vue.createVNode(VIcon, {
+            "icon": key[1],
+            "aria-hidden": "true"
+          }, null) : translateKey(key[1])]
+        });
+      }
+      function renderDivider(key, keyIndex) {
+        return vue.createElementVNode("span", {
+          "key": keyIndex,
+          "class": "v-hotkey__divider",
+          "aria-hidden": "true"
+        }, [AND_DELINEATOR.isEqual(key) ? '+' : 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",
+          "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", {
+          "aria-hidden": "true"
+        }, [vue.createTextVNode("\xA0")])])), props.suffix && vue.createElementVNode("span", {
+          "key": "contained-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])])]));
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -32369,6 +33102,7 @@
     VFileUploadItem: VFileUploadItem,
     VFooter: VFooter,
     VForm: VForm,
+    VHotkey: VHotkey,
     VHover: VHover,
     VIcon: VIcon,
     VIconBtn: VIconBtn,
@@ -32792,7 +33526,7 @@
       };
     });
   }
-  const version$1 = "3.9.0-beta.0-dev.2025-06-24";
+  const version$1 = "3.9.0-beta.1-dev.2025-06-28";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -33090,7 +33824,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.0-beta.0-dev.2025-06-24";
+  const version = "3.9.0-beta.1-dev.2025-06-28";
 
   /* eslint-disable local-rules/sort-imports */
 
@@ -33111,6 +33845,7 @@
   exports.useDefaults = useDefaults;
   exports.useDisplay = useDisplay;
   exports.useGoTo = useGoTo;
+  exports.useHotkey = useHotkey;
   exports.useLayout = useLayout;
   exports.useLocale = useLocale;
   exports.useRtl = useRtl;