diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
index f442c7235d..dfe2fa7afd 100644
--- a/etc/lime-elements.api.md
+++ b/etc/lime-elements.api.md
@@ -527,6 +527,11 @@ export namespace Components {
         "length"?: number;
         "maxLength"?: number;
     }
+    // @internal
+    export interface LimelHotkey {
+        "disabled": boolean;
+        "value": string;
+    }
     export interface LimelIcon {
         "badge": boolean;
         "name": string;
@@ -638,6 +643,8 @@ export namespace Components {
     export interface LimelMenuItemMeta {
         "badge"?: string | number;
         "commandText"?: string;
+        "disabled": boolean;
+        "hotkey"?: string;
         "showChevron": boolean;
     }
     // @internal (undocumented)
@@ -1391,6 +1398,10 @@ export namespace JSX {
         //
         // (undocumented)
         "limel-helper-line": Omit<LimelHelperLine, keyof LimelHelperLineAttributes> & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes]?: LimelHelperLine[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `attr:${K}`]?: LimelHelperLineAttributes[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `prop:${K}`]?: LimelHelperLine[K] };
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-hotkey"" is marked as @public, but its signature references "JSX" which is marked as @internal
+        //
+        // (undocumented)
+        "limel-hotkey": Omit<LimelHotkey, keyof LimelHotkeyAttributes> & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes]?: LimelHotkey[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `attr:${K}`]?: LimelHotkeyAttributes[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `prop:${K}`]?: LimelHotkey[K] };
         // (undocumented)
         "limel-icon": Omit<LimelIcon, keyof LimelIconAttributes> & { [K in keyof LimelIcon & keyof LimelIconAttributes]?: LimelIcon[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `attr:${K}`]?: LimelIconAttributes[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `prop:${K}`]?: LimelIcon[K] };
         // (undocumented)
@@ -2534,6 +2545,20 @@ export namespace JSX {
         "maxLength": number;
     }
 
+    // @internal
+    export interface LimelHotkey {
+        "disabled"?: boolean;
+        "value"?: string;
+    }
+
+    // (undocumented)
+    export interface LimelHotkeyAttributes {
+        // (undocumented)
+        "disabled": boolean;
+        // (undocumented)
+        "value": string;
+    }
+
     export interface LimelIcon {
         "badge"?: boolean;
         "name"?: string;
@@ -2827,6 +2852,8 @@ export namespace JSX {
     export interface LimelMenuItemMeta {
         "badge"?: string | number;
         "commandText"?: string;
+        "disabled"?: boolean;
+        "hotkey"?: string;
         "showChevron"?: boolean;
     }
 
@@ -2837,6 +2864,10 @@ export namespace JSX {
         // (undocumented)
         "commandText": string;
         // (undocumented)
+        "disabled": boolean;
+        // (undocumented)
+        "hotkey": string;
+        // (undocumented)
         "showChevron": boolean;
     }
 
@@ -4153,6 +4184,7 @@ interface MenuItem<T = any> {
     badge?: number | string;
     commandText?: string;
     disabled?: boolean;
+    hotkey?: string;
     icon?: string | Icon;
     // @deprecated
     iconColor?: Color;
@@ -4192,6 +4224,7 @@ export type OpenDirection = 'left-start' | 'left' | 'left-end' | 'right-start' |
 // @public
 interface Option_2<T extends string = string> {
     disabled?: boolean;
+    hotkey?: string;
     icon?: string | Icon;
     // @deprecated
     iconColor?: Color;
diff --git a/src/components/hotkey/examples/hotkey-basic.scss b/src/components/hotkey/examples/hotkey-basic.scss
new file mode 100644
index 0000000000..3a6d8aae18
--- /dev/null
+++ b/src/components/hotkey/examples/hotkey-basic.scss
@@ -0,0 +1,9 @@
+:host {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 2rem;
+}
+
+limel-example-value {
+    grid-column: 1/-1;
+}
diff --git a/src/components/hotkey/examples/hotkey-basic.tsx b/src/components/hotkey/examples/hotkey-basic.tsx
new file mode 100644
index 0000000000..49264b904e
--- /dev/null
+++ b/src/components/hotkey/examples/hotkey-basic.tsx
@@ -0,0 +1,59 @@
+import { Component, h, Host } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * The value is passed as a string, indicating which hotkey to display.
+ *
+ * The component will automatically detect the operating system, and
+ * render the hotkey accordingly, using standard glyphs to save space.
+ *
+ * For example, the "meta" key will be rendered as <kbd>⌘</kbd> on macOS,
+ * and as <kbd>⊞ Win</kbd> on Windows/Linux. Or the "alt" key will be rendered
+ * as <kbd>⌥</kbd> on macOS, and as <kbd>Alt</kbd> on Windows.
+ *
+ * :::note
+ * `meta` always means the actual Meta key.
+ *
+ * This component will render `meta` using platform conventions:
+ * - macOS/iOS/iPadOS: <kbd>⌘</kbd>
+ * - Windows/Linux: <kbd>⊞ Win</kbd>
+ *
+ * If you want a hotkey that differs between operating systems (for example
+ * ⌘+C on macOS and Ctrl+C on Windows/Linux), detect the OS in your application
+ * and pass the appropriate hotkey string.
+ *
+ * - `ctrl` means "Control specifically" on all platforms.
+ * - `cmd` or `command` always render as <kbd>⌘</kbd> (even on Windows/Linux).
+ * :::
+ *
+ * :::important
+ * This component is **display-only**. It does not listen for or handle
+ * any keyboard events. Keyboard event handling is the responsibility
+ * of the parent component (e.g. `limel-menu` or `limel-select`).
+ * :::
+ */
+@Component({
+    tag: 'limel-example-hotkey-basic',
+    shadow: true,
+    styleUrl: 'hotkey-basic.scss',
+})
+export class HotkeyBasicExample {
+    public render() {
+        return (
+            <Host>
+                <limel-hotkey value="s" />
+                <limel-hotkey value="alt+s" />
+                <limel-hotkey value="meta+c" />
+                <limel-hotkey value="meta+alt+s" />
+                <limel-hotkey value="meta+enter" />
+                <limel-hotkey value="cmd+enter" />
+                <limel-hotkey value="ctrl+shift+c" />
+                <limel-hotkey value="f1" />
+                <limel-hotkey value="tab" />
+                <limel-hotkey value="+" />
+                <limel-hotkey value="-" />
+            </Host>
+        );
+    }
+}
diff --git a/src/components/hotkey/examples/hotkey-disabled.tsx b/src/components/hotkey/examples/hotkey-disabled.tsx
new file mode 100644
index 0000000000..90378b8af0
--- /dev/null
+++ b/src/components/hotkey/examples/hotkey-disabled.tsx
@@ -0,0 +1,24 @@
+import { Component, h, Host } from '@stencil/core';
+
+/**
+ * The `disabled` prop
+ *
+ * When set to `true`, the hotkey is rendered in a visually disabled state.
+ * This is useful when the action associated with the hotkey is temporarily
+ * unavailable (e.g. a disabled menu item).
+ */
+@Component({
+    tag: 'limel-example-hotkey-disabled',
+    shadow: true,
+    styleUrl: 'hotkey-basic.scss',
+})
+export class HotkeyDisabledExample {
+    public render() {
+        return (
+            <Host>
+                <limel-hotkey value="a" disabled={true} />
+                <limel-hotkey value="b" />
+            </Host>
+        );
+    }
+}
diff --git a/src/components/hotkey/hotkey.scss b/src/components/hotkey/hotkey.scss
new file mode 100644
index 0000000000..5eb118f3b7
--- /dev/null
+++ b/src/components/hotkey/hotkey.scss
@@ -0,0 +1,33 @@
+@forward '../markdown/partial-styles/_kbd.scss';
+:host(limel-hotkey) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+:host(limel-hotkey[disabled]:not([disabled='false'])) {
+    opacity: 0.5;
+}
+
+kbd {
+    margin: 0;
+    font-size: 0.75rem;
+    box-shadow:
+        var(--button-shadow-pressed),
+        0 0.625rem 0.375px -0.5rem rgb(var(--color-black), 0.02),
+        0 0.025rem 0.5rem 0 rgb(var(--contrast-100)) inset;
+}
+
+span {
+    display: inline-block;
+    &::first-letter {
+        text-transform: uppercase;
+    }
+}
+
+kbd.is-glyph {
+    span {
+        transform: scale(1.2);
+    }
+}
diff --git a/src/components/hotkey/hotkey.tsx b/src/components/hotkey/hotkey.tsx
new file mode 100644
index 0000000000..26ee995054
--- /dev/null
+++ b/src/components/hotkey/hotkey.tsx
@@ -0,0 +1,131 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { tokenizeHotkeyString } from '../../util/hotkeys';
+import { isAppleDevice } from '../../util/device';
+
+/**
+ * This is a display-only component used to visualize keyboard shortcuts.
+ * It renders hotkey strings as styled `<kbd>` elements with
+ * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
+ *
+ * It does **not** listen for or handle any keyboard events.
+ * Keyboard event handling is the responsibility of the parent component
+ * (e.g. `limel-menu` or `limel-select`).
+ *
+ * @exampleComponent limel-example-hotkey-basic
+ * @exampleComponent limel-example-hotkey-disabled
+ * @private
+ */
+@Component({
+    tag: 'limel-hotkey',
+    shadow: true,
+    styleUrl: 'hotkey.scss',
+})
+export class Hotkey {
+    /**
+     * The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`.
+     */
+    @Prop({ reflect: true })
+    public value: string;
+
+    /**
+     * When `true`, the hotkey is rendered in a visually disabled state.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    public render() {
+        const isApple = isAppleDevice();
+        const parts = tokenizeHotkeyString(this.value);
+        const ariaLabel = (this.value ?? '').trim();
+
+        return (
+            <Host aria-label={ariaLabel || undefined}>
+                {parts.map((part, index) => {
+                    const { display, isGlyph } = this.formatDisplayToken(
+                        part,
+                        isApple
+                    );
+
+                    return (
+                        <kbd
+                            key={`${part}-${index}`}
+                            class={isGlyph ? 'is-glyph' : undefined}
+                        >
+                            <span>{display}</span>
+                        </kbd>
+                    );
+                })}
+            </Host>
+        );
+    }
+
+    private formatDisplayToken(
+        token: string,
+        isApple: boolean
+    ): {
+        display: string;
+        isGlyph: boolean;
+    } {
+        const trimmed = (token ?? '').trim();
+        if (!trimmed) {
+            return { display: '', isGlyph: false };
+        }
+
+        if (trimmed === '+') {
+            return { display: '+', isGlyph: false };
+        }
+
+        const lower = trimmed.toLowerCase();
+
+        switch (lower) {
+            case 'meta': {
+                return isApple
+                    ? { display: '⌘', isGlyph: true }
+                    : { display: '⊞ Win', isGlyph: false };
+            }
+
+            case 'cmd':
+            case 'command': {
+                return { display: '⌘', isGlyph: true };
+            }
+
+            case 'alt':
+            case 'option': {
+                return isApple
+                    ? { display: '⌥', isGlyph: true }
+                    : { display: 'Alt', isGlyph: false };
+            }
+
+            case 'shift': {
+                return { display: '⇧', isGlyph: true };
+            }
+
+            case 'enter':
+            case 'return': {
+                return { display: '↩', isGlyph: true };
+            }
+
+            case 'tab': {
+                return { display: '⇥', isGlyph: true };
+            }
+
+            case 'delete':
+            case 'del':
+            case 'backspace': {
+                if (isApple) {
+                    return { display: '⌫', isGlyph: true };
+                }
+                return lower === 'backspace'
+                    ? { display: 'Backspace', isGlyph: false }
+                    : { display: 'Del', isGlyph: false };
+            }
+
+            case 'ctrl':
+            case 'control': {
+                return { display: 'Ctrl', isGlyph: false };
+            }
+        }
+
+        return { display: trimmed, isGlyph: false };
+    }
+}
diff --git a/src/components/list-item/menu-item-meta/menu-item-meta.tsx b/src/components/list-item/menu-item-meta/menu-item-meta.tsx
index b68043f7bb..fe3a018560 100644
--- a/src/components/list-item/menu-item-meta/menu-item-meta.tsx
+++ b/src/components/list-item/menu-item-meta/menu-item-meta.tsx
@@ -19,9 +19,21 @@ export class MenuItemMeta {
     /**
      * Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`
      */
-    @Prop()
+    @Prop({ reflect: true })
     public commandText?: string;
 
+    /**
+     * Hotkey to display. When provided, `commandText` is ignored.
+     */
+    @Prop({ reflect: true })
+    public hotkey?: string;
+
+    /**
+     * Will be set to `true` when the menu item is disabled.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
     /**
      * Optional badge value
      */
@@ -45,6 +57,12 @@ export class MenuItemMeta {
     }
 
     private renderCommandText() {
+        if (this.hotkey) {
+            return (
+                <limel-hotkey value={this.hotkey} disabled={this.disabled} />
+            );
+        }
+
         if (!this.commandText) {
             return;
         }
diff --git a/src/components/markdown/partial-styles/_kbd.scss b/src/components/markdown/partial-styles/_kbd.scss
index aa97edeb10..f188456366 100644
--- a/src/components/markdown/partial-styles/_kbd.scss
+++ b/src/components/markdown/partial-styles/_kbd.scss
@@ -1,10 +1,10 @@
 @use '../../../style/mixins';
 
 kbd {
+    display: inline-block;
     @include mixins.font-family('monospace');
     font-weight: 600;
     color: rgb(var(--contrast-1100));
-    background-color: rgb(var(--contrast-200));
 
     white-space: pre;
     word-spacing: normal;
@@ -12,16 +12,23 @@ kbd {
     word-wrap: normal;
     line-height: normal;
 
-    padding: 0.125rem 0.5rem;
+    border: {
+        radius: 0.125rem;
+        style: solid;
+        color: rgb(var(--contrast-500));
+        width: 0 1px 0.1875rem 1px;
+    }
+
+    padding: 0.0625rem 0.375rem;
     margin: 0 0.25rem;
+
+    background-color: rgb(var(--contrast-200));
     box-shadow:
         var(--button-shadow-normal),
-        0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;
+        0 0.625rem 0.375px -0.5rem rgb(var(--color-black), 0.02),
+        0 0.025rem 0.5rem 0 rgb(var(--contrast-100)) inset;
 
-    border: {
-        radius: 0.125rem;
-        style: solid;
-        color: rgba(var(--contrast-600), 0.8);
-        width: 0 1px 0.125rem 1px;
+    &::first-letter {
+        text-transform: uppercase;
     }
 }
diff --git a/src/components/menu-list/menu-list-renderer.tsx b/src/components/menu-list/menu-list-renderer.tsx
index 6f763eb7bb..acdc50fbcb 100644
--- a/src/components/menu-list/menu-list-renderer.tsx
+++ b/src/components/menu-list/menu-list-renderer.tsx
@@ -105,9 +105,11 @@ export class MenuListRenderer {
         }
 
         const hasSubMenu = this.hasSubItems(item);
+        const hasHotkey = 'hotkey' in item && !!(item as any).hotkey;
         const hasMeta =
             hasSubMenu ||
             item.badge !== undefined ||
+            hasHotkey ||
             (!!('commandText' in item) && !!item.commandText);
 
         const primaryComponent = hasMeta
@@ -115,6 +117,8 @@ export class MenuListRenderer {
                   name: 'limel-menu-item-meta',
                   props: {
                       commandText: (item as any).commandText,
+                      hotkey: (item as any).hotkey,
+                      disabled: !!item.disabled,
                       badge: (item as any).badge,
                       showChevron: hasSubMenu,
                   },
diff --git a/src/components/menu/examples/menu-hotkeys.tsx b/src/components/menu/examples/menu-hotkeys.tsx
index 6e4a1ec2e3..41cce809c8 100644
--- a/src/components/menu/examples/menu-hotkeys.tsx
+++ b/src/components/menu/examples/menu-hotkeys.tsx
@@ -3,11 +3,39 @@ import {
     ListSeparator,
     LimelMenuCustomEvent,
 } from '@limetech/lime-elements';
-import { Component, h, State } from '@stencil/core';
+import { Component, h, Host, State } from '@stencil/core';
 
 /**
  * Menu with supporting hotkeys
  *
+ * Use `hotkey` to bind actual keyboard interaction while the menu is open.
+ *
+ * :::note
+ * 1. `commandText` is ignored and won't render, when `hotkey` is defined.
+ * 2. The `hotkey` works only when the menu is open. Adding a hotkey does not
+ * trigger the action which is tied to a menu item selectable from
+ * anywhere in the application.
+ * 3. Some keys are reserved for menu interaction and will be ignored as hotkeys:
+ * `tab` and the arrow keys are always reserved; `enter`, `escape`, and `space`
+ * are reserved unless used with a modifier (e.g. `alt+enter`).
+ * :::
+ *
+ * :::important
+ * 1. `meta` means the Meta key.
+ * It is rendered as <kbd>⌘</kbd> on Apple devices, and <kbd>⊞ Win</kbd> on
+ * Windows/Linux. (`cmd`, `command`, `win`, `windows` are aliases for `meta`.)
+ *
+ * If you want "primary modifier" hotkeys (e.g. <kbd>⌘</kbd> on macOS and
+ * <kbd>Ctrl</kbd> on Windows/Linux), detect OS in your application and provide
+ * different `hotkey` values.
+ *
+ * `ctrl` means the Control key on all platforms.
+ * 2. All browsers and operating systems have some built-in hotkeys
+ * that may conflict with your defined hotkeys.
+ * For example, `cmd+p` is often used to print the current page.
+ * Make sure to choose hotkeys that do not conflict with common browser hotkeys,
+ * and user's expected behavior.
+ * :::
  */
 @Component({
     tag: 'limel-example-menu-hotkeys',
@@ -18,24 +46,54 @@ export class MenuHotkeysExample {
     private lastSelectedItem: string;
 
     private items: Array<ListSeparator | MenuItem> = [
-        { text: 'Copy', commandText: 'alt + C' },
-        { text: 'Cut', commandText: 'alt + X' },
+        { text: 'Edit message', commandText: 'Is ignored', hotkey: 'e' },
+        { text: 'Mark unread', hotkey: 'u', disabled: true },
+        {
+            text: 'Remind me',
+            items: [
+                { text: 'Later today' },
+                { text: 'Tomorrow' },
+                { text: 'Next week' },
+            ],
+        },
         { separator: true },
-        { text: 'Paste', commandText: 'alt + V' },
+        { text: 'Copy link', hotkey: 'l' },
+        { text: 'Copy message', hotkey: 'meta+c' },
+        { separator: true },
+        {
+            text: 'Organize',
+            hotkey: 'o',
+            items: [
+                { text: 'Move to', hotkey: 'm' },
+                { text: 'Label as', hotkey: 'shift+l' },
+                { text: 'Mute', hotkey: 'alt+m' },
+            ],
+        },
+        {
+            text: 'Connect to apps',
+            items: [{ text: 'Trello' }, { text: 'Asana' }],
+        },
+        { separator: true },
+        { text: 'Delete message…', hotkey: 'backspace' },
     ];
 
     public render() {
-        console.log(this.items);
-
-        return [
-            <limel-menu items={this.items} onSelect={this.handleSelect}>
-                <limel-button label="Menu" slot="trigger" />
-            </limel-menu>,
-            <limel-example-value
-                label="Last selected item"
-                value={this.lastSelectedItem}
-            />,
-        ];
+        return (
+            <Host>
+                <limel-menu items={this.items} onSelect={this.handleSelect}>
+                    <limel-icon-button
+                        label="Menu"
+                        icon="menu_2"
+                        elevated={true}
+                        slot="trigger"
+                    />
+                </limel-menu>
+                <limel-example-value
+                    label="Last selected item"
+                    value={this.lastSelectedItem}
+                />
+            </Host>
+        );
     }
 
     private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {
diff --git a/src/components/menu/examples/menu-searchable-hotkeys.tsx b/src/components/menu/examples/menu-searchable-hotkeys.tsx
new file mode 100644
index 0000000000..e6df3739a2
--- /dev/null
+++ b/src/components/menu/examples/menu-searchable-hotkeys.tsx
@@ -0,0 +1,160 @@
+import {
+    MenuItem,
+    ListSeparator,
+    LimelMenuCustomEvent,
+} from '@limetech/lime-elements';
+import { Component, Host, State, h } from '@stencil/core';
+
+const isApple = /Mac|iPhone|iPad|iPod/i.test(
+    (navigator as any).userAgentData?.platform ?? navigator.platform ?? ''
+);
+
+type SuggestionValue = {
+    propertyName?: string;
+    searchTerm?: string;
+    applyAll?: boolean;
+};
+
+const FILTERABLE_PROPERTIES = [
+    'Name',
+    'Company',
+    'City',
+    'Country',
+    'Email',
+    'Phone',
+    'Website',
+];
+
+/**
+ * Searchable menu with hotkeys
+ *
+ * When it comes to menus that have a search functionality,
+ * hotkeys can be a great way to speed up selection, but it can also be
+ * tricky to implement in a way that feels intuitive and doesn't interfere with
+ * the search experience.
+ *
+ * Consider that when the menu is opened, they focus is on the search input,
+ * and the user is either already typing something to filter the results
+ * or has typed something and is seeing the filtered results, while the focus is
+ * still in the input field.
+ *
+ * Therefore, using a single hotkey for each item in the search results is not
+ * a good idea, as it can interfere with the user's ability to type their search query.
+ * For such scenarios, hotkey combinations that require a modifier
+ * key (e.g. Ctrl or Cmd) can be a good solution,
+ * as they allow the user to quickly select an item from the search results
+ * without interfering with their ability to type.
+ *
+ * In this example, the first search result gets:
+ * - Apple devices: <kbd>⌘</kbd> + <kbd>↩</kbd>
+ * - Others: <kbd>Ctrl</kbd> + <kbd>↩</kbd>
+ *
+ * The final “Apply all” item (shown only when there are many results) gets:
+ * - Apple devices: <kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>↩</kbd>
+ * - Others: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>↩</kbd>
+ */
+@Component({
+    tag: 'limel-example-menu-searchable-hotkeys',
+    shadow: true,
+})
+export class MenuSearchableHotkeysExample {
+    @State()
+    private lastSelectedItem = '';
+
+    private get primaryHotkey() {
+        return isApple ? 'meta+enter' : 'ctrl+enter';
+    }
+
+    private get applyAllHotkey() {
+        return isApple ? 'meta+alt+enter' : 'ctrl+alt+enter';
+    }
+
+    public render() {
+        return (
+            <Host>
+                <limel-menu
+                    searcher={this.handleSearch}
+                    searchPlaceholder="Find property…"
+                    onSelect={this.handleSelect}
+                    emptyResultMessage="No matching properties"
+                >
+                    <limel-chip
+                        text="Filter"
+                        icon={{
+                            name: 'plus_math',
+                            color: 'rgb(var(--contrast-800))',
+                            title: 'Add',
+                        }}
+                        slot="trigger"
+                    />
+                </limel-menu>
+                <limel-example-value
+                    label="Last selected item"
+                    value={this.lastSelectedItem}
+                />
+            </Host>
+        );
+    }
+
+    private handleSearch = async (
+        queryString: string
+    ): Promise<Array<MenuItem | ListSeparator>> => {
+        const searchTerm = queryString?.trim() ?? '';
+        if (searchTerm.length === 0) {
+            return [];
+        }
+
+        const menuItems = FILTERABLE_PROPERTIES.filter((item) => {
+            return item.toLowerCase().includes(searchTerm.toLowerCase());
+        }).map((propertyName) => {
+            return {
+                text: propertyName,
+                value: {
+                    propertyName,
+                    searchTerm,
+                } satisfies SuggestionValue,
+            } as MenuItem;
+        });
+
+        if (menuItems.length === 0) {
+            return [];
+        }
+
+        menuItems[0] = {
+            ...menuItems[0],
+            hotkey: this.primaryHotkey,
+        };
+
+        if (menuItems.length <= 1) {
+            return menuItems;
+        }
+
+        const applyAllMenuItem: MenuItem = {
+            text: 'Apply all',
+            hotkey: this.applyAllHotkey,
+            value: {
+                applyAll: true,
+                searchTerm,
+            } satisfies SuggestionValue,
+        };
+
+        return [...menuItems, { separator: true }, applyAllMenuItem];
+    };
+
+    private handleSelect = (
+        event: LimelMenuCustomEvent<MenuItem<SuggestionValue>>
+    ) => {
+        const selectedItem = event.detail;
+        if (!selectedItem?.value) {
+            return;
+        }
+
+        if (selectedItem.value.applyAll) {
+            this.lastSelectedItem = `Apply all (${selectedItem.value.searchTerm})`;
+
+            return;
+        }
+
+        this.lastSelectedItem = `${selectedItem.value.propertyName}`;
+    };
+}
diff --git a/src/components/menu/menu.e2e.tsx b/src/components/menu/menu.e2e.tsx
index 78df13e36b..82f24336e0 100644
--- a/src/components/menu/menu.e2e.tsx
+++ b/src/components/menu/menu.e2e.tsx
@@ -1,4 +1,5 @@
 import { render, h } from '@stencil/vitest';
+import { vi } from 'vitest';
 
 describe('limel-menu', () => {
     const items = [
@@ -122,4 +123,225 @@ describe('limel-menu', () => {
     // Focus restoration and keyboard navigation tests are skipped —
     // they require real browser focus management (page.keyboard, page.focus)
     // which isn't available in the Stencil vitest render API.
+
+    describe('hotkeys', () => {
+        it('selects the matching item when a hotkey is pressed while the menu is open', async () => {
+            const hotkeyItems = [
+                { text: 'Copy', hotkey: 'alt+c' },
+                { text: 'Cut', hotkey: 'alt+x' },
+            ];
+
+            const { root, waitForChanges } = await render(
+                <limel-menu items={hotkeyItems}>
+                    <button slot="trigger">Menu</button>
+                </limel-menu>
+            );
+            await waitForChanges();
+
+            const handler = vi.fn();
+            root.addEventListener('select', (e: Event) =>
+                handler((e as CustomEvent).detail)
+            );
+
+            // Open the menu
+            const trigger = root.querySelector(
+                'button[slot="trigger"]'
+            ) as HTMLElement;
+            trigger.click();
+            await waitForChanges();
+
+            // Find the menu surface (rendered via portal on document.body)
+            const surface = document.querySelector('limel-menu-surface');
+            expect(surface).toBeTruthy();
+
+            // Dispatch the hotkey on the surface
+            surface!.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'c',
+                    code: 'KeyC',
+                    altKey: true,
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler).toHaveBeenCalledWith(
+                expect.objectContaining({ text: 'Copy' })
+            );
+
+            // Menu should close after selection
+            expect((root as any).open).toBeFalsy();
+        });
+
+        it('does not allow reserved keys (Enter) to be used as item hotkeys', async () => {
+            const hotkeyItems = [
+                { text: 'First' },
+                {
+                    text: 'Second (should not steal Enter)',
+                    hotkey: 'enter',
+                },
+            ];
+
+            const { root, waitForChanges } = await render(
+                <limel-menu items={hotkeyItems} open={true}>
+                    <button slot="trigger">Menu</button>
+                </limel-menu>
+            );
+            await waitForChanges();
+
+            const handler = vi.fn();
+            root.addEventListener('select', (e: Event) =>
+                handler((e as CustomEvent).detail)
+            );
+
+            const surface = document.querySelector('limel-menu-surface');
+            expect(surface).toBeTruthy();
+
+            // Enter is reserved — should NOT trigger the "Second" item's hotkey
+            surface!.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'Enter',
+                    code: 'Enter',
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            // Enter on a reserved key should not trigger the hotkey handler
+            // (it may activate the focused item via native menu behavior,
+            // but should not match the "enter" hotkey on the second item)
+            const calls = handler.mock.calls;
+            for (const [detail] of calls) {
+                expect(detail.text).not.toBe('Second (should not steal Enter)');
+            }
+        });
+
+        it('does not trigger hotkey selection for reserved arrow keys', async () => {
+            const hotkeyItems = [
+                { text: 'Down (reserved)', hotkey: 'arrowdown' },
+                { text: 'Another item' },
+            ];
+
+            const { root, waitForChanges } = await render(
+                <limel-menu items={hotkeyItems} open={true}>
+                    <button slot="trigger">Menu</button>
+                </limel-menu>
+            );
+            await waitForChanges();
+
+            const handler = vi.fn();
+            root.addEventListener('select', (e: Event) =>
+                handler((e as CustomEvent).detail)
+            );
+
+            const surface = document.querySelector('limel-menu-surface');
+            expect(surface).toBeTruthy();
+
+            // ArrowDown is reserved for navigation, not hotkey activation
+            surface!.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'ArrowDown',
+                    code: 'ArrowDown',
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            expect(handler).not.toHaveBeenCalled();
+        });
+
+        it('allows modified arrow key combos as item hotkeys', async () => {
+            const hotkeyItems = [
+                { text: 'Alt+Down action', hotkey: 'alt+arrowdown' },
+                { text: 'Another item' },
+            ];
+
+            const { root, waitForChanges } = await render(
+                <limel-menu items={hotkeyItems} open={true}>
+                    <button slot="trigger">Menu</button>
+                </limel-menu>
+            );
+            await waitForChanges();
+
+            const handler = vi.fn();
+            root.addEventListener('select', (e: Event) =>
+                handler((e as CustomEvent).detail)
+            );
+
+            const surface = document.querySelector('limel-menu-surface');
+            expect(surface).toBeTruthy();
+
+            surface!.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'ArrowDown',
+                    code: 'ArrowDown',
+                    altKey: true,
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler).toHaveBeenCalledWith(
+                expect.objectContaining({ text: 'Alt+Down action' })
+            );
+        });
+
+        it('triggers modified hotkeys while search input is focused', async () => {
+            const searchableItems = [
+                { text: 'Apply first', hotkey: 'ctrl+enter' },
+            ];
+            const searcher = vi.fn().mockResolvedValue(searchableItems);
+
+            const { root, waitForChanges } = await render(
+                <limel-menu searcher={searcher} open={true}>
+                    <button slot="trigger">Menu</button>
+                </limel-menu>
+            );
+            await waitForChanges();
+
+            const handler = vi.fn();
+            root.addEventListener('select', (e: Event) =>
+                handler((e as CustomEvent).detail)
+            );
+
+            const surface = document.querySelector('limel-menu-surface');
+            expect(surface).toBeTruthy();
+
+            const input =
+                surface?.querySelector('limel-input-field') ||
+                surface?.shadowRoot?.querySelector('limel-input-field');
+            expect(input).toBeTruthy();
+
+            input!.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: 'a',
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            input!.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'Enter',
+                    code: 'Enter',
+                    ctrlKey: true,
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            await waitForChanges();
+
+            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler).toHaveBeenCalledWith(
+                expect.objectContaining({ text: 'Apply first' })
+            );
+        });
+    });
 });
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index f8c46e021b..88afab3691 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -33,6 +33,11 @@ import {
     TAB,
 } from '../../util/keycodes';
 import { focusTriggerElement } from '../../util/focus-trigger-element';
+import {
+    hotkeyFromKeyboardEvent,
+    normalizeHotkeyString,
+    tokenizeHotkeyString,
+} from '../../util/hotkeys';
 
 interface MenuCrumbItem extends BreadcrumbsItem {
     menuItem?: MenuItem;
@@ -56,13 +61,14 @@ const DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {
  * @exampleComponent limel-example-menu-icons
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
- * @exampleComponent limel-example-menu-hotkeys
  * @exampleComponent limel-example-menu-secondary-text
  * @exampleComponent limel-example-menu-notification
  * @exampleComponent limel-example-menu-sub-menus
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
  * @exampleComponent limel-example-menu-searchable
+ * @exampleComponent limel-example-menu-hotkeys
+ * @exampleComponent limel-example-menu-searchable-hotkeys
  * @exampleComponent limel-example-menu-composite
  */
 @Component({
@@ -205,6 +211,7 @@ export class Menu {
     private breadcrumbs: HTMLLimelBreadcrumbsElement;
     private triggerElement: HTMLSlotElement;
     private selectedMenuItem?: MenuItem;
+    private readonly normalizedHotkeyCache = new Map<string, string | null>();
 
     constructor() {
         this.portalId = createRandomString();
@@ -265,19 +272,166 @@ export class Menu {
     @Watch('items')
     protected itemsWatcher() {
         this.clearSearch();
+        this.normalizedHotkeyCache.clear();
         this.setFocus();
     }
 
+    public connectedCallback() {
+        if (this.open) {
+            document.addEventListener(
+                'keydown',
+                this.handleDocumentKeyDown,
+                true
+            );
+        }
+    }
+
+    public disconnectedCallback() {
+        document.removeEventListener(
+            'keydown',
+            this.handleDocumentKeyDown,
+            true
+        );
+    }
+
     @Watch('open')
     protected openWatcher(newValue: boolean) {
         const opened = newValue;
         if (opened) {
+            document.addEventListener(
+                'keydown',
+                this.handleDocumentKeyDown,
+                true
+            );
             this.setFocus();
         } else {
+            document.removeEventListener(
+                'keydown',
+                this.handleDocumentKeyDown,
+                true
+            );
             this.clearSearch();
         }
     }
 
+    private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {
+        if (!this.open || event.defaultPrevented || event.repeat) {
+            return;
+        }
+
+        if (this.isFromTextInput(event) && !this.hasModifier(event)) {
+            return;
+        }
+
+        const pressedHotkey = hotkeyFromKeyboardEvent(event);
+        if (!pressedHotkey) {
+            return;
+        }
+
+        if (this.isReservedMenuHotkey(pressedHotkey)) {
+            return;
+        }
+
+        const matchedItem = this.findMenuItemByHotkey(pressedHotkey);
+        if (!matchedItem) {
+            return;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+        this.handleSelect(matchedItem);
+    };
+
+    private isFromTextInput(event: KeyboardEvent): boolean {
+        const path =
+            typeof event.composedPath === 'function'
+                ? event.composedPath()
+                : [];
+
+        for (const node of path) {
+            if (!('tagName' in (node as any))) {
+                continue;
+            }
+
+            const element = node as HTMLElement;
+
+            if (element.isContentEditable) {
+                return true;
+            }
+
+            const tagName = element.tagName;
+            if (
+                tagName === 'INPUT' ||
+                tagName === 'TEXTAREA' ||
+                tagName === 'SELECT'
+            ) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private hasModifier(event: KeyboardEvent): boolean {
+        return event.ctrlKey || event.metaKey || event.altKey;
+    }
+
+    private isReservedMenuHotkey(hotkey: string): boolean {
+        const tokens = tokenizeHotkeyString(hotkey);
+        const key = tokens.at(-1);
+        if (!key) {
+            return false;
+        }
+
+        const hasModifiers = tokens.length > 1;
+        if (hasModifiers) {
+            return false;
+        }
+
+        return (
+            key === 'arrowup' ||
+            key === 'arrowdown' ||
+            key === 'arrowleft' ||
+            key === 'arrowright' ||
+            key === 'tab' ||
+            key === 'enter' ||
+            key === 'space' ||
+            key === 'escape'
+        );
+    }
+
+    private findMenuItemByHotkey(pressedHotkey: string): MenuItem | null {
+        for (const item of this.visibleItems) {
+            if (!this.isMenuItem(item) || item.disabled) {
+                continue;
+            }
+
+            const rawHotkey = item.hotkey;
+            if (!rawHotkey) {
+                continue;
+            }
+
+            const normalized = this.getNormalizedHotkey(rawHotkey);
+            if (normalized && normalized === pressedHotkey) {
+                return item;
+            }
+        }
+
+        return null;
+    }
+
+    private getNormalizedHotkey(raw: string): string | null {
+        const cacheKey = raw.trim();
+        if (this.normalizedHotkeyCache.has(cacheKey)) {
+            return this.normalizedHotkeyCache.get(cacheKey) ?? null;
+        }
+
+        const normalized = normalizeHotkeyString(cacheKey);
+        this.normalizedHotkeyCache.set(cacheKey, normalized);
+
+        return normalized;
+    }
+
     private getBreadcrumbsItems() {
         const breadCrumbItems: MenuCrumbItem[] = [];
         let currentItem = this.currentSubMenu;
@@ -459,6 +613,10 @@ export class Menu {
     // Will change focus to breadcrumbs (if present) or the first/last item
     // in the dropdown list to enable selection with the keyboard
     private readonly handleInputKeyDown = (event: KeyboardEvent) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+
         const isForwardTab =
             event.key === TAB &&
             !event.altKey &&
diff --git a/src/components/menu/menu.types.ts b/src/components/menu/menu.types.ts
index 80cc74df0a..86b73244fb 100644
--- a/src/components/menu/menu.types.ts
+++ b/src/components/menu/menu.types.ts
@@ -61,6 +61,21 @@ export interface MenuItem<T = any> {
      */
     commandText?: string;
 
+    /**
+     * Hotkey(s) that can be used to select this item while the menu is open.
+     * This is for actual keyboard interaction. `commandText` is purely visual.
+     *
+     * Note: In a menu, some keys are reserved for built-in navigation and
+     * activation (e.g. `enter`, `escape`, `space`, `tab`, and arrow keys).
+     * These will be ignored as hotkeys, unless combined with other modifiers.
+     *
+     * Examples:
+     * - `"alt+c"`
+     * - `"ctrl+shift+p"`
+     * - `"cmd+k"` (alias for `meta+k`)
+     */
+    hotkey?: string;
+
     /**
      * Text to display in the menu item.
      */
diff --git a/src/components/select/examples/select-hotkeys.tsx b/src/components/select/examples/select-hotkeys.tsx
new file mode 100644
index 0000000000..804045885e
--- /dev/null
+++ b/src/components/select/examples/select-hotkeys.tsx
@@ -0,0 +1,89 @@
+import {
+    LimelSelectCustomEvent,
+    Option,
+    ListSeparator,
+} from '@limetech/lime-elements';
+import { Component, h, Host, State } from '@stencil/core';
+
+/**
+ * Select with option hotkeys.
+ *
+ * Use `hotkey` on options to bind keyboard interaction while the select
+ * dropdown is open.
+ *
+ * :::note
+ * 1. Hotkeys work only while the custom dropdown is open.
+ * 2. On mobile/iOS, `limel-select` uses a native `<select>`, so option
+ * hotkeys are not active.
+ * 3. Some keys are reserved for dropdown navigation and are ignored as
+ * option hotkeys: `tab` and arrow keys are always reserved; `enter`, `escape`,
+ * and `space` are reserved unless used with a modifier (for example
+ * `alt+enter`).
+ * :::
+ *
+ * :::important
+ * `meta` means the Meta key.
+ * It is rendered as <kbd>⌘</kbd> on Apple devices and <kbd>⊞ Win</kbd> on
+ * Windows/Linux. (`cmd`, `command`, `win`, `windows` are aliases for `meta`.)
+ *
+ * `ctrl` means the Control key on all platforms.
+ *
+ * Choose hotkeys that do not conflict with common browser shortcuts.
+ * :::
+ */
+@Component({
+    shadow: true,
+    tag: 'limel-example-select-hotkeys',
+})
+export class SelectHotkeysExample {
+    @State()
+    private value: Option;
+
+    private options: (Option | ListSeparator)[] = [
+        {
+            text: 'Started',
+            value: 'started',
+            hotkey: 's',
+        },
+        {
+            text: 'In progress',
+            value: 'in-progress',
+            hotkey: 'p',
+        },
+        {
+            text: 'Blocked',
+            value: 'blocked',
+            hotkey: 'b',
+        },
+        {
+            text: 'Done',
+            value: 'done',
+            hotkey: 'd',
+        },
+        { separator: true },
+        {
+            text: 'Closed',
+            secondaryText: 'as not planned',
+            value: 'closed',
+            hotkey: 'cmd+d',
+        },
+    ];
+
+    public render() {
+        return (
+            <Host>
+                <limel-select
+                    label="Task status"
+                    value={this.value}
+                    options={this.options}
+                    onChange={this.handleChange}
+                />
+                <limel-example-value value={this.value} />
+            </Host>
+        );
+    }
+
+    private handleChange = (event: LimelSelectCustomEvent<Option>) => {
+        this.value = event.detail;
+    };
+}
diff --git a/src/components/select/option.types.ts b/src/components/select/option.types.ts
index cf59ef0980..5be565206e 100644
--- a/src/components/select/option.types.ts
+++ b/src/components/select/option.types.ts
@@ -29,6 +29,12 @@ export interface Option<T extends string = string> {
      */
     value: T;
 
+    /**
+     * Optional keyboard shortcut for selecting this option when the custom
+     * dropdown is open.
+     */
+    hotkey?: string;
+
     /**
      * Set to `true` to make this option disabled and not possible to select.
      */
diff --git a/src/components/select/select.template.tsx b/src/components/select/select.template.tsx
index d627607517..0c1112a8ee 100644
--- a/src/components/select/select.template.tsx
+++ b/src/components/select/select.template.tsx
@@ -189,7 +189,12 @@ const SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {
 };
 
 const MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {
-    const items = createMenuItems(props.options, props.value, props.required);
+    const items = createMenuItems(
+        props.options,
+        props.value,
+        props.required,
+        props.isOpen
+    );
 
     return (
         <limel-portal
@@ -274,7 +279,8 @@ function isSelected(option: Option, value: Option | Option[]): boolean {
 function createMenuItems(
     options: Array<Option | ListSeparator>,
     value: Option | Option[],
-    selectIsRequired = false
+    selectIsRequired = false,
+    isOpen = false
 ): Array<ListItem<Option> | ListSeparator> {
     const menuOptionFilter = getMenuOptionFilter(selectIsRequired);
 
@@ -287,17 +293,31 @@ function createMenuItems(
         }
 
         const selected = isSelected(option, value);
-        const { text, secondaryText, disabled } = option;
+        const { text, secondaryText, disabled, hotkey } = option;
         const name = getIconName(option.icon);
 
         const color = getIconColor(option.icon, option.iconColor);
 
+        const primaryComponent = hotkey
+            ? {
+                  name: 'limel-hotkey',
+                  props: {
+                      value: hotkey,
+                      disabled: !isOpen || disabled,
+                      style: {
+                          order: '2',
+                      },
+                  },
+              }
+            : undefined;
+
         if (!name) {
             return {
                 text: text,
                 secondaryText: secondaryText,
                 selected: selected,
                 disabled: disabled,
+                primaryComponent,
                 value: option,
             };
         }
@@ -307,6 +327,7 @@ function createMenuItems(
             secondaryText: secondaryText,
             selected: selected,
             disabled: disabled,
+            primaryComponent,
             value: option,
             icon: {
                 name: name,
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 9e5056e53e..1dd306deb2 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -14,6 +14,11 @@ import {
 } from '@stencil/core';
 import { isMobileDevice } from '../../util/device';
 import { ENTER, SPACE } from '../../util/keycodes';
+import {
+    hotkeyFromKeyboardEvent,
+    normalizeHotkeyString,
+    tokenizeHotkeyString,
+} from '../../util/hotkeys';
 import { isMultiple } from '../../util/multiple';
 import { createRandomString } from '../../util/random-string';
 import { SelectTemplate, triggerIconColorWarning } from './select.template';
@@ -28,6 +33,7 @@ import { SelectTemplate, triggerIconColorWarning } from './select.template';
  * @exampleComponent limel-example-select-with-empty-option
  * @exampleComponent limel-example-select-preselected
  * @exampleComponent limel-example-select-change-options
+ * @exampleComponent limel-example-select-hotkeys
  * @exampleComponent limel-example-select-dialog
  */
 @Component({
@@ -119,6 +125,7 @@ export class Select {
     private portalId: string;
     private focusObserver: IntersectionObserver;
     private focusTimeoutId: ReturnType<typeof setTimeout>;
+    private readonly normalizedHotkeyCache = new Map<string, string | null>();
 
     constructor() {
         this.handleMenuChange = this.handleMenuChange.bind(this);
@@ -167,6 +174,11 @@ export class Select {
     }
 
     public disconnectedCallback() {
+        document.removeEventListener(
+            'keydown',
+            this.handleDocumentKeyDown,
+            true
+        );
         this.cancelPendingFocus();
 
         if (this.mdcFloatingLabel) {
@@ -217,6 +229,20 @@ export class Select {
 
     @Watch('menuOpen')
     protected watchOpen(newValue: boolean, oldValue: boolean) {
+        if (newValue) {
+            document.addEventListener(
+                'keydown',
+                this.handleDocumentKeyDown,
+                true
+            );
+        } else {
+            document.removeEventListener(
+                'keydown',
+                this.handleDocumentKeyDown,
+                true
+            );
+        }
+
         if (this.checkValid) {
             return;
         }
@@ -227,6 +253,11 @@ export class Select {
         }
     }
 
+    @Watch('options')
+    protected watchOptions() {
+        this.normalizedHotkeyCache.clear();
+    }
+
     private setMenuFocus() {
         if (this.isMobileDevice) {
             return;
@@ -360,6 +391,117 @@ export class Select {
         this.setTriggerFocus();
     }
 
+    private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {
+        if (
+            this.isMobileDevice ||
+            !this.menuOpen ||
+            event.defaultPrevented ||
+            event.repeat
+        ) {
+            return;
+        }
+
+        const pressedHotkey = hotkeyFromKeyboardEvent(event);
+        if (!pressedHotkey || this.isReservedSelectHotkey(pressedHotkey)) {
+            return;
+        }
+
+        const matchedOption = this.findOptionByHotkey(pressedHotkey);
+        if (!matchedOption || matchedOption.disabled) {
+            return;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (this.multiple) {
+            const selector = `#${this.portalId} limel-menu-surface`;
+            const menuSurface = document
+                .querySelector(selector)
+                ?.shadowRoot?.querySelector('.mdc-menu-surface');
+            const scrollPosition = menuSurface?.scrollTop || 0;
+
+            const currentValue = isMultiple(this.value) ? this.value : [];
+            const hasSelectedOption = currentValue.some(
+                (option) => option.value === matchedOption.value
+            );
+
+            const nextValue = hasSelectedOption
+                ? currentValue.filter(
+                      (option) => option.value !== matchedOption.value
+                  )
+                : [...currentValue, matchedOption];
+
+            this.change.emit(nextValue);
+
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    menuSurface.scrollTop = scrollPosition;
+                });
+            });
+
+            return;
+        }
+
+        this.change.emit(matchedOption);
+        this.menuOpen = false;
+        this.setTriggerFocus();
+    };
+
+    private isReservedSelectHotkey(hotkey: string): boolean {
+        const tokens = tokenizeHotkeyString(hotkey);
+        const key = tokens.at(-1);
+        if (!key) {
+            return false;
+        }
+
+        if (
+            key === 'arrowup' ||
+            key === 'arrowdown' ||
+            key === 'arrowleft' ||
+            key === 'arrowright'
+        ) {
+            return true;
+        }
+
+        if (key === 'tab') {
+            return true;
+        }
+
+        const hasModifiers = tokens.length > 1;
+        return (
+            !hasModifiers &&
+            (key === 'enter' || key === 'space' || key === 'escape')
+        );
+    }
+
+    private findOptionByHotkey(pressedHotkey: string): Option | null {
+        for (const option of this.getOptionsExcludingSeparators()) {
+            if (option.disabled || !option.hotkey) {
+                continue;
+            }
+
+            const normalized = this.getNormalizedHotkey(option.hotkey);
+            if (normalized && normalized === pressedHotkey) {
+                return option;
+            }
+        }
+
+        return null;
+    }
+
+    private getNormalizedHotkey(raw: string): string | null {
+        const cacheKey = raw.trim();
+        if (this.normalizedHotkeyCache.has(cacheKey)) {
+            return this.normalizedHotkeyCache.get(cacheKey) ?? null;
+        }
+
+        const normalized = normalizeHotkeyString(cacheKey);
+        this.normalizedHotkeyCache.set(cacheKey, normalized);
+
+        return normalized;
+    }
+
     private openMenu() {
         if (this.emitFirstChangeEvent()) {
             this.hasChanged = true;
diff --git a/src/util/device.ts b/src/util/device.ts
index 6d06a49030..6c544ee26e 100644
--- a/src/util/device.ts
+++ b/src/util/device.ts
@@ -1,16 +1,38 @@
-const userAgent = window.navigator.userAgent;
+function getUserAgent(): string {
+    return typeof navigator === 'undefined' ? '' : (navigator.userAgent ?? '');
+}
+
+function getPlatform(): string {
+    if (typeof navigator === 'undefined') {
+        return '';
+    }
+
+    return (
+        (navigator as any).userAgentData?.platform ?? navigator.platform ?? ''
+    );
+}
+
+function getMaxTouchPoints(): number {
+    if (typeof navigator === 'undefined') {
+        return 0;
+    }
+
+    return (navigator as any).maxTouchPoints ?? 0;
+}
 
 /**
  *
  */
 export function isIOSDevice() {
-    return /iPad|iPhone|iPod/i.test(userAgent) && !(window as any).MSStream;
+    const userAgent = getUserAgent();
+    return /iPad|iPhone|iPod/i.test(userAgent) && !(globalThis as any).MSStream;
 }
 
 /**
  *
  */
 export function isAndroidDevice() {
+    const userAgent = getUserAgent();
     return /Android/i.test(userAgent);
 }
 
@@ -20,3 +42,19 @@ export function isAndroidDevice() {
 export function isMobileDevice() {
     return isAndroidDevice() || isIOSDevice();
 }
+
+/**
+ * Detects whether the user is on an Apple device (iOS/iPadOS/macOS).
+ */
+export function isAppleDevice(): boolean {
+    const ua = getUserAgent();
+    const platform = getPlatform();
+
+    const isIPadIPhoneIPod = /iPad|iPhone|iPod/i.test(ua);
+    const isMacLike = /Mac/i.test(platform);
+
+    // iPadOS can report itself as Mac; use touch points to detect it.
+    const isIPadOS13Plus = isMacLike && getMaxTouchPoints() > 1;
+
+    return isIPadIPhoneIPod || isIPadOS13Plus || isMacLike;
+}
diff --git a/src/util/hotkeys.spec.ts b/src/util/hotkeys.spec.ts
new file mode 100644
index 0000000000..6b37e115a7
--- /dev/null
+++ b/src/util/hotkeys.spec.ts
@@ -0,0 +1,159 @@
+import { hotkeyFromKeyboardEvent, normalizeHotkeyString } from './hotkeys';
+
+describe('hotkeys util', () => {
+    describe('normalizeHotkeyString', () => {
+        it('keeps + as a key', () => {
+            expect(normalizeHotkeyString('+')).toBe('+');
+        });
+
+        it('supports ++ as the + key token', () => {
+            expect(normalizeHotkeyString('meta++')).toBe('meta++');
+        });
+
+        it('keeps backspace and delete as distinct keys', () => {
+            expect(normalizeHotkeyString('backspace')).toBe('backspace');
+            expect(normalizeHotkeyString('delete')).toBe('delete');
+            expect(normalizeHotkeyString('del')).toBe('delete');
+        });
+    });
+
+    describe('hotkeyFromKeyboardEvent', () => {
+        it('includes multiple modifiers', () => {
+            const pressed = hotkeyFromKeyboardEvent({
+                key: 'a',
+                code: 'KeyA',
+                altKey: true,
+                ctrlKey: true,
+                metaKey: false,
+                shiftKey: false,
+            } as any);
+
+            expect(pressed).toBe('ctrl+alt+a');
+        });
+
+        it('handles function keys', () => {
+            expect(
+                hotkeyFromKeyboardEvent({
+                    key: 'F1',
+                    code: 'F1',
+                    altKey: false,
+                    ctrlKey: false,
+                    metaKey: false,
+                    shiftKey: false,
+                } as any)
+            ).toBe('f1');
+
+            expect(
+                hotkeyFromKeyboardEvent({
+                    key: 'F12',
+                    code: 'F12',
+                    altKey: false,
+                    ctrlKey: false,
+                    metaKey: false,
+                    shiftKey: false,
+                } as any)
+            ).toBe('f12');
+        });
+
+        it('handles arrow keys', () => {
+            expect(
+                hotkeyFromKeyboardEvent({
+                    key: 'ArrowLeft',
+                    code: 'ArrowLeft',
+                    altKey: false,
+                    ctrlKey: false,
+                    metaKey: false,
+                    shiftKey: false,
+                } as any)
+            ).toBe('arrowleft');
+
+            expect(
+                hotkeyFromKeyboardEvent({
+                    key: 'ArrowRight',
+                    code: 'ArrowRight',
+                    altKey: false,
+                    ctrlKey: false,
+                    metaKey: false,
+                    shiftKey: false,
+                } as any)
+            ).toBe('arrowright');
+        });
+
+        it('uses event.code for non-QWERTY letter normalization', () => {
+            const pressed = hotkeyFromKeyboardEvent({
+                key: '@',
+                code: 'KeyQ',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: false,
+            } as any);
+
+            // Uses code "KeyQ" to normalize to "q" (layout-independent)
+            expect(pressed).toBe('q');
+        });
+
+        it('uses event.code for digit normalization', () => {
+            const pressed = hotkeyFromKeyboardEvent({
+                key: ')',
+                code: 'Digit0',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: false,
+            } as any);
+
+            // Uses code "Digit0" to normalize to "0" (layout-independent)
+            expect(pressed).toBe('0');
+        });
+
+        it('does not include shift for the + key', () => {
+            const pressed = hotkeyFromKeyboardEvent({
+                key: '+',
+                code: 'Equal',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: true,
+            } as any);
+
+            expect(pressed).toBe('+');
+        });
+
+        it('still includes shift for letter keys', () => {
+            const pressed = hotkeyFromKeyboardEvent({
+                key: 'A',
+                code: 'KeyA',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: true,
+            } as any);
+
+            expect(pressed).toBe('shift+a');
+        });
+
+        it('keeps Backspace and Delete as distinct keys', () => {
+            const backspace = hotkeyFromKeyboardEvent({
+                key: 'Backspace',
+                code: 'Backspace',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: false,
+            } as any);
+
+            const del = hotkeyFromKeyboardEvent({
+                key: 'Delete',
+                code: 'Delete',
+                altKey: false,
+                ctrlKey: false,
+                metaKey: false,
+                shiftKey: false,
+            } as any);
+
+            expect(backspace).toBe('backspace');
+            expect(del).toBe('delete');
+        });
+    });
+});
diff --git a/src/util/hotkeys.ts b/src/util/hotkeys.ts
new file mode 100644
index 0000000000..a576b155ec
--- /dev/null
+++ b/src/util/hotkeys.ts
@@ -0,0 +1,242 @@
+/**
+ * These helpers provide a consistent way to:
+ * - Normalize user-defined hotkey strings (e.g. "cmd+k", "ctrl+shift+p")
+ * - Normalize `KeyboardEvent`s into the same canonical hotkey format
+ *
+ * **Canonical format**
+ * - Modifiers are ordered: `meta`, `ctrl`, `alt`, `shift`
+ * - Tokens are joined with `+`
+ * - The final token is the non-modifier key
+ *
+ * Examples:
+ * - `"cmd+k"` → `"meta+k"`
+ * - `"return"` → `"enter"`
+ * - `"backspace"` → `"backspace"`
+ * - `"alt+shift+l"` → `"alt+shift+l"`
+ */
+const NORMALIZED_HOTKEY_SEPARATOR = '+';
+
+const KEY_ALIASES: Record<string, string> = {
+    cmd: 'meta',
+    command: 'meta',
+    win: 'meta',
+    windows: 'meta',
+    control: 'ctrl',
+    option: 'alt',
+    esc: 'escape',
+    return: 'enter',
+    del: 'delete',
+    up: 'arrowup',
+    down: 'arrowdown',
+    left: 'arrowleft',
+    right: 'arrowright',
+    spacebar: 'space',
+};
+
+export const tokenizeHotkeyString = (hotkey: string): string[] => {
+    const raw = (hotkey ?? '').trim();
+    if (!raw) {
+        return [];
+    }
+
+    // Allow `+` as a hotkey.
+    if (raw === '+') {
+        return ['+'];
+    }
+
+    // Split on `+`, but treat `++` as the `+` key.
+    const tokens: string[] = [];
+    let current = '';
+    let index = 0;
+
+    while (index < raw.length) {
+        const char = raw[index];
+        if (char !== '+') {
+            current += char;
+            index++;
+            continue;
+        }
+
+        const nextChar = raw[index + 1];
+        if (nextChar === '+') {
+            const token = current.trim();
+            if (token) {
+                tokens.push(token);
+            }
+            tokens.push('+');
+            current = '';
+            index += 2;
+            continue;
+        }
+
+        const token = current.trim();
+        if (token) {
+            tokens.push(token);
+        }
+        current = '';
+        index++;
+    }
+
+    const tail = current.trim();
+    if (tail) {
+        tokens.push(tail);
+    }
+
+    return tokens;
+};
+
+const normalizeKey = (key: string): string | null => {
+    const normalized = key.trim().toLowerCase();
+    if (!normalized) {
+        return null;
+    }
+
+    if (KEY_ALIASES[normalized]) {
+        return KEY_ALIASES[normalized];
+    }
+
+    return normalized;
+};
+
+const normalizeModifiersAndKey = (input: {
+    key: string;
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+}): string | null => {
+    const normalizedKey = normalizeKey(input.key);
+    if (!normalizedKey) {
+        return null;
+    }
+
+    // Ignore pure modifier presses
+    if (['shift', 'alt', 'ctrl', 'meta'].includes(normalizedKey)) {
+        return null;
+    }
+
+    const parts: string[] = [];
+
+    if (input.meta) {
+        parts.push('meta');
+    }
+    if (input.ctrl) {
+        parts.push('ctrl');
+    }
+    if (input.alt) {
+        parts.push('alt');
+    }
+    if (input.shift) {
+        parts.push('shift');
+    }
+
+    parts.push(normalizedKey);
+
+    return parts.join(NORMALIZED_HOTKEY_SEPARATOR);
+};
+
+/**
+ * Normalize a user-defined hotkey string to the canonical format.
+ *
+ * Returns `null` for empty/invalid inputs or if the string only contains
+ * modifiers (e.g. `"ctrl+shift"`).
+ *
+ * @param hotkey - User-provided hotkey string.
+ */
+export const normalizeHotkeyString = (hotkey: string): string | null => {
+    if (!hotkey) {
+        return null;
+    }
+
+    const tokens = tokenizeHotkeyString(hotkey);
+    if (tokens.length === 0) {
+        return null;
+    }
+
+    let alt = false;
+    let ctrl = false;
+    let meta = false;
+    let shift = false;
+    let key: string | null = null;
+
+    for (const token of tokens) {
+        const normalized = normalizeKey(token);
+        if (!normalized) {
+            continue;
+        }
+
+        if (normalized === 'alt') {
+            alt = true;
+            continue;
+        }
+        if (normalized === 'ctrl') {
+            ctrl = true;
+            continue;
+        }
+        if (normalized === 'meta') {
+            meta = true;
+            continue;
+        }
+        if (normalized === 'shift') {
+            shift = true;
+            continue;
+        }
+
+        // Last non-modifier wins
+        key = normalized;
+    }
+
+    if (!key) {
+        return null;
+    }
+
+    return normalizeModifiersAndKey({ key, alt, ctrl, meta, shift });
+};
+
+const normalizeEventKey = (event: KeyboardEvent): string | null => {
+    const code = (event.code || '').trim();
+    if (/^Key[A-Z]$/.test(code)) {
+        return code.slice(3).toLowerCase();
+    }
+
+    if (/^Digit\d$/.test(code)) {
+        return code.slice(5);
+    }
+
+    const key = event.key;
+
+    if (key === ' ') {
+        return 'space';
+    }
+
+    return normalizeKey(key);
+};
+
+/**
+ * Convert a `KeyboardEvent` into a canonical hotkey string.
+ *
+ * Uses `event.code` when possible for letter/digit keys to avoid
+ * layout-dependent results.
+ *
+ * @param event - Keyboard event to normalize.
+ */
+export const hotkeyFromKeyboardEvent = (
+    event: KeyboardEvent
+): string | null => {
+    const key = normalizeEventKey(event);
+    if (!key) {
+        return null;
+    }
+
+    // `+` typically requires Shift on many keyboard layouts, but users expect to
+    // write hotkeys like `meta++` (⌘+) without explicitly adding `shift`.
+    const shift = key === '+' ? false : event.shiftKey;
+
+    return normalizeModifiersAndKey({
+        key,
+        alt: event.altKey,
+        ctrl: event.ctrlKey,
+        meta: event.metaKey,
+        shift,
+    });
+};