vscode-elements · alexander-heimbuch · Nov 26, 2025
diff --git a/dev/vscode-single-select/combobox-mode/combobox.html b/dev/vscode-single-select/combobox-mode/combobox.html
@@ -36,6 +36,9 @@
           sl.addEventListener('change', () => {
             console.log(sl.value);
           });
+          sl.addEventListener('action', (event) => {
+            console.log(event);
+          })
         </script>
       </vscode-demo>
     </main>

diff --git a/dev/vscode-single-select/select-mode/with-action.html b/dev/vscode-single-select/select-mode/with-action.html
@@ -0,0 +1,41 @@
+<!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>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-single-select label="Single Select with Actions">
+          <vscode-option action='{ "icon": "add", "title": "Add", "type": "add" }'>Lorem</vscode-option>
+          <vscode-option action='{ "icon": "trash", "title": "Delete", "type": "delete" }'>Ipsum</vscode-option>
+          <vscode-option action='{ "icon": "link-external", "title": "Open", "type": "open" }'>Dolor</vscode-option>
+        </vscode-single-select>
+        <button type="button">focus</button>
+      </vscode-demo>
+      <script type="module">
+        const sl = document.querySelector('vscode-single-select');
+        const bt = document.querySelector('button');
+
+        bt.addEventListener('click', () => {
+          sl.focus();
+        });
+
+        sl.addEventListener('action', (event) => console.log(event.detail));
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/src/includes/vscode-select/OptionListController.ts b/src/includes/vscode-select/OptionListController.ts
@@ -196,6 +196,7 @@ export class OptionListController implements ReactiveController {
         filteredIndex: index,
         ranges: [],
         visible: true,
+        action: op.action
       };
     });
 
@@ -233,6 +234,7 @@ export class OptionListController implements ReactiveController {
       value: value ?? '',
       visible,
       ranges,
+      action: option.action
     });
 
     if (visible) {

diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
@@ -231,9 +231,6 @@ export default [
 
     .option.single-select {
       display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
 
     .option.multi-select {
@@ -413,5 +410,16 @@ export default [
     :host([position='above']) .description {
       border-width: 0 0 1px;
     }
+
+    .option .label {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .option.with-action {
+      display: flex;
+    }
   `,
 ];
diff --git a/src/includes/vscode-select/types.ts b/src/includes/vscode-select/types.ts
@@ -4,6 +4,7 @@ export interface Option {
   description?: string;
   selected?: boolean;
   disabled?: boolean;
+  action: { icon: string; title?: string; type: string; } | undefined;
 }
 
 export interface InternalOption extends Required<Option> {

diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts
@@ -14,6 +14,7 @@ import type {InternalOption, Option, FilterMethod} from './types.js';
 import {OptionListController} from './OptionListController.js';
 import {checkIcon} from './template-elements.js';
 import '../../vscode-scrollable/vscode-scrollable.js';
+import '../../vscode-icon/vscode-icon.js';
 
 export const VISIBLE_OPTS = 10;
 export const OPT_HEIGHT = 22;
@@ -131,12 +132,13 @@ export class VscodeSelectBase extends VscElement {
   }
   get options(): Option[] {
     return this._opts.options.map(
-      ({label, value, description, selected, disabled}) => ({
+      ({label, value, description, selected, disabled, action}) => ({
         label,
         value,
         description,
         selected,
         disabled,
+        action
       })
     );
   }
@@ -315,6 +317,7 @@ export class VscodeSelectBase extends VscElement {
         description,
         selected,
         disabled,
+        action: el.action
       };
 
       this._opts.add(op);
@@ -615,6 +618,19 @@ export class VscodeSelectBase extends VscElement {
       this.open = false;
     }
   };
+
+  protected _onActionClick(op: Option) {
+    return (ev: MouseEvent) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.dispatchEvent(new CustomEvent('action', {
+      detail: {
+        type: op.action?.type,
+        value: op.value
+      }
+    }))
+    }
+  }
   //#endregion
 
   //#region render functions
@@ -664,6 +680,7 @@ export class VscodeSelectBase extends VscElement {
               option: true,
               'single-select': !this._opts.multiSelect,
               'multi-select': this._opts.multiSelect,
+              'with-action': !!op.action,
               selected,
             };
 
@@ -682,11 +699,21 @@ export class VscodeSelectBase extends VscElement {
                 role="option"
                 tabindex="-1"
               >
+                <span class="label">
                 ${when(
                   this._opts.multiSelect,
                   () => this._renderCheckbox(selected, labelText),
                   () => labelText
                 )}
+                </span>
+                ${when(
+                  op.action,
+                  () => html`<vscode-icon
+                    @click=${this._onActionClick(op)}
+                    class="action"
+                    action-icon name=${op.action?.icon} title=${op.action?.title} size="12"></vscode-icon>
+                  `
+                )}
               </li>
             `;
           }

diff --git a/src/vscode-option/vscode-option.ts b/src/vscode-option/vscode-option.ts
@@ -22,6 +22,9 @@ export class VscodeOption extends VscElement {
   @property({type: Boolean, reflect: true})
   disabled = false;
 
+  @property({ type: Object})
+  action?: { icon: string; title?: string; type: string; } | undefined;
+
   private _initialized = false;
 
   override connectedCallback(): void {