From 76475a64d15fa081a3ea3a4a9fcbdcb9daed335a Mon Sep 17 00:00:00 2001
From: bendera <szoftverhiba@gmail.com>
Date: Mon, 12 May 2025 23:32:51 +0200
Subject: [PATCH 1/2] Add KeyLabel component

---
 dev/vscode-key-label/basic-example.html       | 37 +++++++++++++++++++
 dev/vscode-textfield/events.html              | 17 ++++++++-
 src/main.ts                                   |  1 +
 src/vscode-key-label/index.ts                 |  1 +
 .../vscode-key-label.styles.ts                | 32 ++++++++++++++++
 src/vscode-key-label/vscode-key-label.ts      | 21 +++++++++++
 6 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 dev/vscode-key-label/basic-example.html
 create mode 100644 src/vscode-key-label/index.ts
 create mode 100644 src/vscode-key-label/vscode-key-label.styles.ts
 create mode 100644 src/vscode-key-label/vscode-key-label.ts
diff --git a/dev/vscode-key-label/basic-example.html b/dev/vscode-key-label/basic-example.html
new file mode 100644
index 000000000..63000056d
--- /dev/null
+++ b/dev/vscode-key-label/basic-example.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <h1>%%TITLE%%</h1>
+    <main>
+      <vscode-demo>
+        <span style="display: flex; align-items: center; line-height: 10px"
+          ><vscode-key-label>Ctrl</vscode-key-label> +
+          <vscode-key-label>K</vscode-key-label></span
+        >
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-textfield/events.html b/dev/vscode-textfield/events.html
index c61eab409..334c3988a 100644
--- a/dev/vscode-textfield/events.html
+++ b/dev/vscode-textfield/events.html
@@ -13,7 +13,7 @@
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
     ></script>
-    <script type="module" src="/dist/vscode-textfield/index.js"></script>
+    <script type="module" src="/dist/main.js"></script>
     <script>
       const logEvents = (selector, eventType) => {
         document.querySelector(selector).addEventListener(eventType, (ev) => {
@@ -27,7 +27,20 @@
     <h1>Textfield</h1>
     <h2>Change, Input</h2>
     <vscode-demo>
-      <vscode-textfield id="textfield-1"></vscode-textfield>
+      <vscode-textfield id="textfield-1">
+        <span
+          slot="content-after"
+          style="
+            display: flex;
+            align-items: center;
+            margin-top: -1px;
+            margin-right: 1px;
+          "
+        >
+          <vscode-key-label>Ctrl</vscode-key-label>
+          <span>+</span><vscode-key-label>K</vscode-key-label></span
+        >
+      </vscode-textfield>
       <script type="module">
         logEvents('#textfield-1', 'change');
         logEvents('#textfield-1', 'input');
diff --git a/src/main.ts b/src/main.ts
index 1e11e818e..1ef47e32d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,7 @@ export {VscodeFormContainer} from './vscode-form-container/index.js';
 export {VscodeFormGroup} from './vscode-form-group/index.js';
 export {VscodeFormHelper} from './vscode-form-helper/index.js';
 export {VscodeIcon} from './vscode-icon/index.js';
+export {VscodeKeyLabel} from './vscode-key-label/index.js';
 export {VscodeLabel} from './vscode-label/index.js';
 export {VscodeMultiSelect} from './vscode-multi-select/index.js';
 export {VscodeOption} from './vscode-option/index.js';
diff --git a/src/vscode-key-label/index.ts b/src/vscode-key-label/index.ts
new file mode 100644
index 000000000..0243c0496
--- /dev/null
+++ b/src/vscode-key-label/index.ts
@@ -0,0 +1 @@
+export {VscodeKeyLabel} from './vscode-key-label.js';
diff --git a/src/vscode-key-label/vscode-key-label.styles.ts b/src/vscode-key-label/vscode-key-label.styles.ts
new file mode 100644
index 000000000..95d14413b
--- /dev/null
+++ b/src/vscode-key-label/vscode-key-label.styles.ts
@@ -0,0 +1,32 @@
+import {css, CSSResultGroup} from 'lit';
+import defaultStyles from '../includes/default.styles.js';
+
+const styles: CSSResultGroup = [
+  defaultStyles,
+  css`
+    :host {
+      display: inline-block;
+      margin: 0 2px;
+    }
+
+    span {
+      background-color: var(--vscode-keybindingLabel-background);
+      border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
+      border-top-color: var(--vscode-keybindingLabel-border);
+      border-right-color: var(--vscode-keybindingLabel-border);
+      border-left-color: var(--vscode-keybindingLabel-border);
+      border-radius: 3px;
+      border-style: solid;
+      border-width: 1px;
+      box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
+      color: var(--vscode-keybindingLabel-foreground);
+      display: inline-block;
+      font-size: 11px;
+      line-height: 10px;
+      padding: 3px 5px;
+      vertical-align: middle;
+    }
+  `,
+];
+
+export default styles;
diff --git a/src/vscode-key-label/vscode-key-label.ts b/src/vscode-key-label/vscode-key-label.ts
new file mode 100644
index 000000000..cc1dcc8ee
--- /dev/null
+++ b/src/vscode-key-label/vscode-key-label.ts
@@ -0,0 +1,21 @@
+import {html, TemplateResult} from 'lit';
+import {customElement, VscElement} from '../includes/VscElement.js';
+import styles from './vscode-key-label.styles.js';
+
+/**
+ *
+ */
+@customElement('vscode-key-label')
+export class VscodeKeyLabel extends VscElement {
+  static override styles = styles;
+
+  override render(): TemplateResult {
+    return html`<span><slot></slot></span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vscode-key-label': VscodeKeyLabel;
+  }
+}

From 20ce7d949da6d5ae0aeaffac1b582f0d447ee737 Mon Sep 17 00:00:00 2001
From: bendera <szoftverhiba@gmail.com>
Date: Tue, 13 May 2025 23:28:06 +0200
Subject: [PATCH 2/2] Add prefix + suffix option to KeyLabel

---
 dev/vscode-key-label/basic-example.html       | 10 +++++----
 .../vscode-key-label.styles.ts                | 15 +++++++++++--
 src/vscode-key-label/vscode-key-label.ts      | 21 +++++++++++++++++--
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/dev/vscode-key-label/basic-example.html b/dev/vscode-key-label/basic-example.html
index 63000056d..8c3843ba1 100644
--- a/dev/vscode-key-label/basic-example.html
+++ b/dev/vscode-key-label/basic-example.html
@@ -27,10 +27,12 @@
     <h1>%%TITLE%%</h1>
     <main>
       <vscode-demo>
-        <span style="display: flex; align-items: center; line-height: 10px"
-          ><vscode-key-label>Ctrl</vscode-key-label> +
-          <vscode-key-label>K</vscode-key-label></span
-        >
+        <p><kbd>Ctrl</kbd> + <kbd>K</kbd></p>
+        <p>
+          Press
+          <vscode-key-label text-after="+">Ctrl</vscode-key-label
+          ><vscode-key-label>K</vscode-key-label> to search
+        </p>
       </vscode-demo>
     </main>
   </body>
diff --git a/src/vscode-key-label/vscode-key-label.styles.ts b/src/vscode-key-label/vscode-key-label.styles.ts
index 95d14413b..f182459f3 100644
--- a/src/vscode-key-label/vscode-key-label.styles.ts
+++ b/src/vscode-key-label/vscode-key-label.styles.ts
@@ -6,10 +6,14 @@ const styles: CSSResultGroup = [
   css`
     :host {
       display: inline-block;
-      margin: 0 2px;
     }
 
-    span {
+    .wrapper {
+      align-items: center;
+      display: inline-flex;
+    }
+
+    .key {
       background-color: var(--vscode-keybindingLabel-background);
       border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
       border-top-color: var(--vscode-keybindingLabel-border);
@@ -26,6 +30,13 @@ const styles: CSSResultGroup = [
       padding: 3px 5px;
       vertical-align: middle;
     }
+
+    .before,
+    .after {
+      line-height: 18px;
+      margin: 0 2px;
+      vertical-align: middle;
+    }
   `,
 ];
 
diff --git a/src/vscode-key-label/vscode-key-label.ts b/src/vscode-key-label/vscode-key-label.ts
index cc1dcc8ee..08d1a81fe 100644
--- a/src/vscode-key-label/vscode-key-label.ts
+++ b/src/vscode-key-label/vscode-key-label.ts
@@ -1,6 +1,7 @@
-import {html, TemplateResult} from 'lit';
+import {html, nothing, TemplateResult} from 'lit';
 import {customElement, VscElement} from '../includes/VscElement.js';
 import styles from './vscode-key-label.styles.js';
+import {property} from 'lit/decorators.js';
 
 /**
  *
@@ -9,8 +10,24 @@ import styles from './vscode-key-label.styles.js';
 export class VscodeKeyLabel extends VscElement {
   static override styles = styles;
 
+  @property({reflect: true, attribute: 'text-before'})
+  textBefore = '';
+
+  @property({reflect: true, attribute: 'text-after'})
+  textAfter = '';
+
   override render(): TemplateResult {
-    return html`<span><slot></slot></span>`;
+    return html`
+      <div class="wrapper">
+        ${this.textBefore
+          ? html`<div class="before">${this.textBefore}</div>`
+          : nothing}
+        <div class="key"><slot></slot></div>
+        ${this.textAfter
+          ? html`<div class="after">${this.textAfter}</div>`
+          : nothing}
+      </div>
+    `;
   }
 }
 
