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

package/dist/vuetify-labs.esm.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.
 */
@@ -2141,6 +2141,24 @@ var en = {
     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}'
   }
 };
 
@@ -4651,7 +4669,18 @@ const aliases = {
   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 (?)
@@ -9017,9 +9046,9 @@ const makeNestedProps = propsFactory({
 }, 'nested');
 const useNested = props => {
   let isUnmounted = false;
-  const children = ref(new Map());
-  const parents = ref(new Map());
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+  const children = shallowRef(new Map());
+  const parents = shallowRef(new Map());
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(Array.isArray(v) ? v.map(i => toRaw(i)) : v), v => [...v.values()]);
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy;
     if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -9073,7 +9102,7 @@ const useNested = props => {
   });
   function getPath(id) {
     const path = [];
-    let parent = id;
+    let parent = toRaw(id);
     while (parent != null) {
       path.unshift(parent);
       parent = parents.value.get(parent);
@@ -9216,7 +9245,7 @@ const useNested = props => {
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
   const uidSymbol = Symbol('nested item');
-  const computedId = computed(() => toValue(id) ?? uidSymbol);
+  const computedId = computed(() => toRaw(toValue(id)) ?? uidSymbol);
   const item = {
     ...parent,
     id: computedId,
@@ -9225,10 +9254,10 @@ const useNestedItem = (id, isGroup) => {
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
-    isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
+    isActivated: computed(() => parent.root.activated.value.has(computedId.value)),
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
-    isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
+    isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator
   };
@@ -18073,6 +18102,317 @@ function useDate() {
   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 (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 (toValue(preventDefault)) e.preventDefault();
+    if (!isSequence) {
+      callback(e);
+      return;
+    }
+    clearTimer();
+    groupIndex++;
+    if (groupIndex === keyGroups.length) {
+      callback(e);
+      resetSequence();
+      return;
+    }
+    timeout = window.setTimeout(resetSequence, toValue(sequenceTimeout));
+  }
+  function cleanup() {
+    window.removeEventListener(toValue(event), handler);
+    clearTimer();
+  }
+  watch(() => toValue(keys), function (unrefKeys) {
+    cleanup();
+    if (unrefKeys) {
+      const groups = splitKeySequence(unrefKeys.toLowerCase());
+      isSequence = groups.length > 1;
+      keyGroups = groups;
+      resetSequence();
+      window.addEventListener(toValue(event), handler);
+    }
+  }, {
+    immediate: true
+  });
+
+  // Watch for changes in the event type to re-register the listener
+  watch(() => toValue(event), function (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'];
+
+    // 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({
@@ -29762,7 +30102,7 @@ const VTreeviewItem = genericComponent()({
       emit('toggleExpand', e);
     }
     useRender(() => {
-      const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
+      const listItemProps = VListItem.filterProps(props);
       const hasPrepend = slots.prepend || props.toggleIcon;
       return createVNode(VListItem, mergeProps({
         "ref": vListItemRef
@@ -29773,7 +30113,7 @@ const VTreeviewItem = genericComponent()({
           'v-treeview-item--filtered': isFiltered.value
         }, props.class],
         "ripple": false,
-        "onClick": props.onClick ?? activateGroupActivator
+        "onClick": activateGroupActivator
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
@@ -29824,6 +30164,7 @@ const makeVTreeviewChildrenProps = propsFactory({
   falseIcon: IconValue,
   trueIcon: IconValue,
   returnObject: Boolean,
+  activatable: Boolean,
   selectable: Boolean,
   selectedColor: String,
   selectStrategy: [String, Function, Object],
@@ -29843,7 +30184,7 @@ const VTreeviewChildren = genericComponent()({
     } = _ref;
     const isLoading = reactive(new Set());
     const activatorItems = ref([]);
-    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable));
+    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable && !props.activatable));
     async function checkChildren(item) {
       try {
         if (!props.items?.length || !props.loadChildren) return;
@@ -32277,6 +32618,398 @@ const VPullToRefresh = genericComponent()({
   }
 });
 
+// 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 = computed(() => props.variant === 'contained');
+    const effectiveVariantProps = computed(() => ({
+      ...props,
+      variant: isContainedVariant.value ? 'elevated' : props.variant
+    }));
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(effectiveVariantProps);
+    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 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 = 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 createVNode(KeyComponent, {
+        "key": keyIndex,
+        "class": normalizeClass(keyClasses),
+        "style": normalizeStyle(isContained ? undefined : colorStyles.value),
+        "aria-hidden": "true",
+        "title": getKeyTooltip(key)
+      }, {
+        default: () => [key[0] === 'icon' ? createVNode(VIcon, {
+          "icon": key[1],
+          "aria-hidden": "true"
+        }, null) : translateKey(key[1])]
+      });
+    }
+    function renderDivider(key, keyIndex) {
+      return createElementVNode("span", {
+        "key": keyIndex,
+        "class": "v-hotkey__divider",
+        "aria-hidden": "true"
+      }, [AND_DELINEATOR.isEqual(key) ? '+' : 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",
+        "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", {
+        "aria-hidden": "true"
+      }, [createTextVNode("\xA0")])])), props.suffix && createElementVNode("span", {
+        "key": "contained-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])])]));
+  }
+});
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   VAlert: VAlert,
@@ -32365,6 +33098,7 @@ var components = /*#__PURE__*/Object.freeze({
   VFileUploadItem: VFileUploadItem,
   VFooter: VFooter,
   VForm: VForm,
+  VHotkey: VHotkey,
   VHover: VHover,
   VIcon: VIcon,
   VIconBtn: VIconBtn,
@@ -32788,7 +33522,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -33086,7 +33820,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */
 
@@ -33099,5 +33833,5 @@ const createVuetify = function () {
   });
 };
 
-export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };
+export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify-labs.esm.js.map