chore(hotkey): add new @private component

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;
@@ -1391,6 +1396,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 +2543,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;

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;
+}

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>
+        );
+    }
+}

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>
+        );
+    }
+}