vscode-elements · bendera · May 12, 2025 · May 13, 2025
diff --git a/dev/vscode-key-label/basic-example.html b/dev/vscode-key-label/basic-example.html
@@ -0,0 +1,39 @@
+<!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>
+        <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>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,43 @@
+import {css, CSSResultGroup} from 'lit';
+import defaultStyles from '../includes/default.styles.js';
+
+const styles: CSSResultGroup = [
+  defaultStyles,
+  css`
+    :host {
+      display: inline-block;
+    }
+
+    .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);
+      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;
+    }
+
+    .before,
+    .after {
+      line-height: 18px;
+      margin: 0 2px;
+      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
@@ -0,0 +1,38 @@
+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';
+
+/**
+ *
+ */
+@customElement('vscode-key-label')
+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`
+      <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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vscode-key-label': VscodeKeyLabel;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {VscodeKeyLabel} from './vscode-key-label.js';