@codingame/monaco-vscode-api 34.1.2 → 35.0.0

package/vscode/src/vs/platform/actionWidget/browser/actionList.js

@@ -1,17 +1,18 @@
 
 import { registerCss } from '../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
-import { createElement, setVisibility, clearNode, addDisposableListener, EventType, append, $, EventHelper, isActiveElement, isMouseEvent, isHTMLElement, getWindow } from '../../../base/browser/dom.js';
+import { createElement, setVisibility, clearNode, addDisposableListener, EventType, isHTMLElement, append, $, addDisposableGenericMouseUpListener, EventHelper, isActiveElement, isMouseEvent, getWindow, getActiveElement } from '../../../base/browser/dom.js';
 import { renderMarkdown } from '../../../base/browser/markdownRenderer.js';
 import { ActionBar } from '../../../base/browser/ui/actionbar/actionbar.js';
 import { getAnchorRect } from '../../../base/browser/ui/contextview/contextview.js';
 import { KeybindingLabel } from '../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
+import { Toggle } from '../../../base/browser/ui/toggle/toggle.js';
 import { List } from '../../../base/browser/ui/list/listWidget.js';
 import { toAction, SubmenuAction } from '../../../base/common/actions.js';
 import { CancellationTokenSource } from '../../../base/common/cancellation.js';
 import { Codicon } from '../../../base/common/codicons.js';
 import { Emitter } from '../../../base/common/event.js';
-import { MarkdownString } from '../../../base/common/htmlContent.js';
+import { isMarkdownString, MarkdownString } from '../../../base/common/htmlContent.js';
 import { AnchorPosition } from '../../../base/common/layout.js';
 import { DisposableStore, Disposable, MutableDisposable, toDisposable } from '../../../base/common/lifecycle.js';
 import { OS } from '../../../base/common/platform.js';
@@ -22,6 +23,7 @@ import { localize } from '../../../nls.js';
 import { IContextViewService } from '../../contextview/browser/contextView.service.js';
 import { IKeybindingService } from '../../keybinding/common/keybinding.service.js';
 import { IOpenerService } from '../../opener/common/opener.service.js';
+import { Link } from '../../opener/browser/link.js';
 import { defaultListStyles } from '../../theme/browser/defaultStyles.js';
 import { asCssVariable } from '../../theme/common/colorUtils.js';
 import '../../theme/common/colors/baseColors.js';
@@ -135,6 +137,9 @@ let ActionItemRenderer = class ActionItemRenderer {
         const submenuIndicator = createElement("div");
         submenuIndicator.className = "action-list-submenu-indicator";
         container.append(submenuIndicator);
+        const inlineToggleContainer = createElement("div");
+        inlineToggleContainer.className = "action-list-item-inline-toggle";
+        container.append(inlineToggleContainer);
         const elementDisposables = ( new DisposableStore());
         return {
             container,
@@ -147,6 +152,7 @@ let ActionItemRenderer = class ActionItemRenderer {
             keybinding,
             toolbar,
             submenuIndicator,
+            inlineToggleContainer,
             elementDisposables
         };
     }
@@ -231,6 +237,33 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.detail.textContent = "";
             data.detail.style.display = "none";
         }
+        clearNode(data.inlineToggleContainer);
+        if (element.inlineToggle) {
+            const inlineToggle = element.inlineToggle;
+            const toggleLabel = createElement("span");
+            toggleLabel.className = "action-list-item-inline-toggle-label";
+            toggleLabel.textContent = stripNewlines(inlineToggle.label);
+            data.inlineToggleContainer.append(toggleLabel);
+            data.inlineToggleContainer.style.display = "";
+            data.container.classList.add("has-inline-toggle");
+            const toggle = data.elementDisposables.add(( new Toggle({
+                title: inlineToggle.title ?? inlineToggle.label,
+                isChecked: inlineToggle.checked,
+                actionClassName: "action-list-inline-switch",
+                notFocusable: false,
+                inputActiveOptionBorder: undefined,
+                inputActiveOptionForeground: undefined,
+                inputActiveOptionBackground: undefined
+            })));
+            data.inlineToggleContainer.append(toggle.domNode);
+            data.elementDisposables.add(toggle.onChange(() => inlineToggle.onChange(toggle.checked)));
+            data.elementDisposables.add(
+                addDisposableListener(data.inlineToggleContainer, EventType.CLICK, e => e.stopPropagation())
+            );
+        } else {
+            data.inlineToggleContainer.style.display = "none";
+            data.container.classList.remove("has-inline-toggle");
+        }
         const actionTitle = this._keybindingService.lookupKeybinding(acceptSelectedActionCommand)?.getLabel();
         const previewTitle = this._keybindingService.lookupKeybinding(previewSelectedActionCommand)?.getLabel();
         data.container.classList.toggle("option-disabled", !!element.disabled);
@@ -317,7 +350,7 @@ function getKeyboardNavigationLabel(item) {
 let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Disposable {
     constructor(
         user,
-        preview,
+        _supportsPreview,
         items,
         _delegate,
         accessibilityProvider,
@@ -327,6 +360,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         _instantiationService
     ) {
         super();
+        this._supportsPreview = _supportsPreview;
         this._delegate = _delegate;
         this._options = _options;
         this._keybindingService = _keybindingService;
@@ -349,6 +383,12 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         if (this._options?.inlineDescription) {
             this.domNode.classList.add("inline-description");
         }
+        if (this._options?.className) {
+            const classNames = this._options.className.split(/\s+/).filter(className => className.length > 0);
+            if (classNames.length > 0) {
+                this.domNode.classList.add(...classNames);
+            }
+        }
         this._actionLineHeight = 24;
         this._submenuContainer = createElement("div");
         this._submenuContainer.className = "action-list-submenu-panel action-widget";
@@ -379,7 +419,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         const reserveSubmenuSpace = this._options?.reserveSubmenuSpace ?? true;
         const hasAnySubmenuActions = reserveSubmenuSpace && ( items.some(item => !!item.submenuActions?.length && !item.hover?.content));
         this._list = this._register(( new List(user, this.domNode, virtualDelegate, [( new ActionItemRenderer(
-            preview,
+            this._supportsPreview,
             item => this._removeItem(item),
             item => this._showSubmenuForItem(item),
             hasAnySubmenuActions,
@@ -407,20 +447,30 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                             const descText = typeof element.description === "string" ? element.description : element.description.value;
                             label = label + ", " + stripNewlines(descText);
                         }
+                        if (element.hover?.content && !element.ariaDescription && !element.description) {
+                            const hoverContent = element.hover.content;
+                            const hoverText = typeof hoverContent === "string" ? hoverContent : isMarkdownString(hoverContent) ? hoverContent.value : isHTMLElement(hoverContent) ? hoverContent.textContent ?? undefined : undefined;
+                            if (hoverText && (!element.detail || stripNewlines(element.detail) !== stripNewlines(hoverText))) {
+                                label = label + ", " + stripNewlines(hoverText);
+                            }
+                        }
                         if (element.group?.title) {
                             label = label + ", " + element.group.title;
                         }
+                        if (element.inlineToggle) {
+                            label = label + ", " + (element.inlineToggle.checked ? ( localize(1796, "{0}, on", element.inlineToggle.label)) : ( localize(1797, "{0}, off", element.inlineToggle.label)));
+                        }
                         if (element.disabled) {
-                            label = ( localize(1796, "{0}, Disabled Reason: {1}", label, element.disabled));
+                            label = ( localize(1798, "{0}, Disabled Reason: {1}", label, element.disabled));
                         }
                         if (element.submenuActions?.length) {
-                            label = ( localize(1797, "{0}, use right arrow to access options", label));
+                            label = ( localize(1799, "{0}, use right arrow to access options", label));
                         }
                         return label;
                     }
                     return null;
                 },
-                getWidgetAriaLabel: () => ( localize(1798, "Action Widget")),
+                getWidgetAriaLabel: () => ( localize(1800, "Action Widget")),
                 getRole: e => {
                     switch (e.kind) {
                     case ActionListItemKind.Action:
@@ -449,8 +499,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 this._filterInput = createElement("input");
                 this._filterInput.type = "text";
                 this._filterInput.className = "action-list-filter-input";
-                this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1799, "Search..."));
-                this._filterInput.setAttribute("aria-label", ( localize(1800, "Filter items")));
+                this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1801, "Search..."));
+                this._filterInput.setAttribute("aria-label", ( localize(1802, "Filter items")));
                 filterRow.appendChild(this._filterInput);
                 const filterActions = this._options?.filterActions ?? [];
                 if (filterActions.length > 0) {
@@ -476,6 +526,50 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._footerContainer.className = "action-list-footer";
             this._footerContainer.textContent = this._options.footerText;
         }
+        if (this._options?.headerText) {
+            this._headerContainer = createElement("div");
+            this._headerContainer.className = "action-list-header";
+            if (this._options.headerIcon) {
+                const icon = append(this._headerContainer, $("span.action-list-header-icon"));
+                icon.classList.add(...ThemeIcon.asClassNameArray(this._options.headerIcon));
+                icon.setAttribute("aria-hidden", "true");
+            }
+            const text = append(this._headerContainer, $("span.action-list-header-text"));
+            text.textContent = this._options.headerText;
+            if (this._options.headerLink) {
+                const {
+                    label,
+                    uri
+                } = this._options.headerLink;
+                text.textContent += " ";
+                this._register(this._instantiationService.createInstance(Link, text, {
+                    label,
+                    href: ( uri.toString(true))
+                }, {}));
+            }
+            if (this._options.headerDismiss) {
+                const onDismiss = this._options.headerDismiss;
+                const dismissButton = append(this._headerContainer, $("span.action-list-header-dismiss"));
+                dismissButton.appendChild($(ThemeIcon.asCSSSelector(Codicon.close)));
+                dismissButton.tabIndex = 0;
+                dismissButton.setAttribute("role", "button");
+                dismissButton.setAttribute("aria-label", ( localize(1803, "Dismiss")));
+                const dismiss = () => {
+                    onDismiss();
+                    this.focus();
+                    this._headerContainer?.remove();
+                    this._headerContainer = undefined;
+                    this._onDidRequestLayout.fire();
+                };
+                this._register(addDisposableGenericMouseUpListener(dismissButton, () => dismiss()));
+                this._register(addDisposableListener(dismissButton, EventType.KEY_DOWN, e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        dismiss();
+                    }
+                }));
+            }
+        }
         this._applyFilter();
         if (this._list.length) {
             this._focusCheckedOrFirst();
@@ -535,7 +629,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._applyFilter(true);
         }).catch(() => {});
     }
-    _applyFilter(skipTextFilter = false) {
+    _applyFilter(skipTextFilter = false, fireLayout = true) {
         const filterLower = skipTextFilter ? "" : this._filterText.toLowerCase();
         const isFiltering = !skipTextFilter && filterLower.length > 0;
         const visible = [];
@@ -651,7 +745,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         const filterInputHasFocus = this._filterInput && isActiveElement(this._filterInput);
         this._list.splice(0, this._list.length, visible);
-        this._onDidRequestLayout.fire();
+        if (fireLayout) {
+            this._onDidRequestLayout.fire();
+        }
         if (filterInputHasFocus) {
             this._filterInput?.focus();
             this._focusCheckedOrFirst();
@@ -664,6 +760,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                         if (el.item?.id === focusedItemId) {
                             this._list.setFocus([i]);
                             this._list.reveal(i);
+                            this._list.domFocus();
                             break;
                         }
                     }
@@ -677,6 +774,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
     get footerContainer() {
         return this._footerContainer;
     }
+    get headerContainer() {
+        return this._headerContainer;
+    }
     get filterInput() {
         return this._filterInput;
     }
@@ -702,6 +802,32 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         return undefined;
     }
+    updateItems(items, focusItemId) {
+        this._allMenuItems = [...items];
+        this._applyFilter(false, false);
+        if (focusItemId !== undefined) {
+            this.focusItemById(focusItemId);
+        }
+    }
+    focusItemById(itemId) {
+        const focusItem = () => {
+            for (let i = 0; i < this._list.length; i++) {
+                const el = this._list.element(i);
+                if (el.item?.id === itemId) {
+                    this._list.setFocus([i]);
+                    this._list.reveal(i);
+                    this._list.domFocus();
+                    break;
+                }
+            }
+        };
+        focusItem();
+        queueMicrotask(() => {
+            if (this.domNode.isConnected) {
+                focusItem();
+            }
+        });
+    }
     _focusCheckedOrFirst() {
         this._suppressHover = true;
         try {
@@ -754,6 +880,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         case ActionListItemKind.Separator:
             return item.label ? this._actionLineHeight : this._separatorLineHeight;
         default:
+            if (item.inlineToggle) {
+                return this._options?.inlineToggleItemHeight ?? 70;
+            }
             return item.detail ? (this._options?.detailItemHeight ?? 48) : this._actionLineHeight;
         }
     }
@@ -957,13 +1086,14 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         if (isMouseEvent(e.browserEvent)) {
             const target = e.browserEvent.target;
-            if (isHTMLElement(target) && (target.closest(".action-list-item-toolbar") || target.closest(".action-list-submenu-indicator"))) {
+            if (isHTMLElement(target) && (target.closest(".action-list-item-toolbar") || target.closest(".action-list-submenu-indicator") || target.closest(".action-list-item-inline-toggle"))) {
                 this._list.setSelection([]);
                 return;
             }
         }
         if (element.item && this.focusCondition(element)) {
-            this._delegate.onSelect(element.item, e.browserEvent instanceof PreviewSelectedEvent);
+            const isPreviewEvent = e.browserEvent instanceof PreviewSelectedEvent;
+            this._delegate.onSelect(element.item, isPreviewEvent && this._supportsPreview);
         } else {
             this._list.setSelection([]);
         }
@@ -1045,14 +1175,14 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         this._submenuDisposables.clear();
         this._currentSubmenuElement = element;
-        clearNode(this._submenuContainer);
+        this._clearSubmenuContainer();
         let hoverHeader;
         const hoverContent = element.hover?.content;
         if (hoverContent) {
             if (isHTMLElement(hoverContent)) {
                 hoverHeader = hoverContent;
                 if (element.hover?.disposable) {
-                    this._submenuDisposables.add(element.hover.disposable);
+                    this._register(element.hover.disposable);
                 }
             } else {
                 const markdown = typeof hoverContent === "string" ? ( new MarkdownString(hoverContent)) : hoverContent;
@@ -1233,9 +1363,15 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._submenuDisposables.clear();
         this._currentSubmenuWidget = undefined;
         this._currentSubmenuElement = undefined;
-        clearNode(this._submenuContainer);
+        this._clearSubmenuContainer();
         this._submenuContainer.style.display = "none";
     }
+    _clearSubmenuContainer() {
+        if (this._submenuContainer.contains(getActiveElement())) {
+            this._list.domFocus();
+        }
+        clearNode(this._submenuContainer);
+    }
     _scheduleSubmenuHide() {
         this._cancelSubmenuHide();
         this._submenuHideTimeout = setTimeout(() => {
@@ -1337,6 +1473,9 @@ let ActionList = class ActionList extends Disposable {
     get footerContainer() {
         return this._widget.footerContainer;
     }
+    get headerContainer() {
+        return this._widget.headerContainer;
+    }
     get filterInput() {
         return this._widget.filterInput;
     }
@@ -1408,6 +1547,12 @@ let ActionList = class ActionList extends Disposable {
     acceptSelected(preview) {
         this._widget.acceptSelected(preview);
     }
+    updateItems(items, focusItemId) {
+        this._widget.updateItems(items, focusItemId);
+    }
+    focusItemById(itemId) {
+        this._widget.focusItemById(itemId);
+    }
     hasDynamicHeight() {
         return this._widget.hasDynamicHeight;
     }
@@ -1424,7 +1569,8 @@ let ActionList = class ActionList extends Disposable {
         const listHeight = this._widget.computeListHeight();
         const filterHeight = this._widget.filterContainer ? 36 : 0;
         const footerHeight = this._widget.footerContainer ? 32 : 0;
-        const chromeHeight = filterHeight + footerHeight;
+        const headerHeight = this._widget.headerContainer ? this._widget.headerContainer.offsetHeight || 36 : 0;
+        const chromeHeight = filterHeight + footerHeight + headerHeight;
         const targetWindow = getWindow(this.domNode);
         let availableHeight;
         if (this.hasDynamicHeight()) {

package/vscode/src/vs/platform/actionWidget/browser/actionWidget.css

@@ -66,7 +66,7 @@
 	background-color: var(--vscode-list-hoverBackground) !important;
 	color: var(--vscode-list-hoverForeground);
 	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
-	outline-offset: -1px;
+	outline-offset: -2px;
 }
 
 .action-widget .monaco-list-row.group-header {
@@ -83,8 +83,8 @@
 	border-top: 1px solid var(--vscode-editorHoverWidget-border);
 	color: var(--vscode-descriptionForeground);
 	font-size: 12px;
-	margin: 4px 0px;
-	width: 100%;
+	margin: 4px 6px;
+	width: calc(100% - 12px);
 	cursor: default;
 	-webkit-user-select: none;
 	user-select: none;
@@ -139,6 +139,21 @@
 	font-size: 16px;
 }
 
+/* Compact icon modifier: render the leading row codicon at the compact size */
+.action-widget .actionList.compact-icons .monaco-list-row.action .codicon {
+	font-size: var(--vscode-codiconFontSize-compact, 12px);
+}
+
+/* Toolbar codicons keep the regular codicon size even in compact lists */
+.action-widget .actionList.compact-icons .monaco-list-row.action .action-list-item-toolbar .codicon {
+	font-size: var(--vscode-codiconFontSize, 16px);
+}
+
+/* The submenu indicator keeps the regular codicon size even in compact lists */
+.action-widget .actionList.compact-icons .monaco-list-row.action .action-list-submenu-indicator.codicon {
+	font-size: var(--vscode-codiconFontSize, 16px);
+}
+
 .action-widget .monaco-list-row.action.option-disabled,
 .action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
 .action-widget .monaco-list-row.action.option-disabled .codicon,
@@ -268,6 +283,91 @@
 	}
 }
 
+/* Items with an inline toggle — wrap so the toggle sits on its own row */
+.action-widget .monaco-list-row.action.has-inline-toggle {
+	flex-wrap: wrap;
+	align-content: center;
+	padding-right: 6px;
+
+	.title {
+		line-height: 14px;
+	}
+}
+
+.action-widget .monaco-list-row.action .action-list-item-inline-toggle {
+	order: 100;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding-left: 18px;
+	padding-top: 6px;
+	line-height: 16px;
+}
+
+.action-widget .monaco-list-row.action .action-list-item-inline-toggle .action-list-item-inline-toggle-label {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 12px;
+	line-height: 16px;
+	color: var(--vscode-foreground);
+}
+
+/* Inline pill switch (restyles the base Toggle as an iOS-style switch) */
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch {
+	position: relative;
+	flex-shrink: 0;
+	float: none;
+	margin: 0;
+	padding: 0;
+	width: 26px;
+	height: 16px;
+	border-radius: var(--vscode-cornerRadius-circle);
+	border: var(--vscode-strokeThickness) solid var(--vscode-checkbox-border);
+	background-color: var(--vscode-checkbox-background);
+	overflow: visible;
+	transition: background-color 0.1s ease, border-color 0.1s ease;
+}
+
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch:hover {
+	background-color: var(--vscode-checkbox-background);
+}
+
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch::before {
+	content: "";
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background-color: var(--vscode-checkbox-foreground);
+	transition: left 0.1s ease, background-color 0.1s ease;
+}
+
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked {
+	background-color: var(--vscode-button-background);
+	border-color: var(--vscode-button-background);
+}
+
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked:hover {
+	background-color: var(--vscode-button-hoverBackground, var(--vscode-button-background));
+}
+
+.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked::before {
+	left: 11px;
+	background-color: var(--vscode-button-foreground);
+}
+
+.hc-black .action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch,
+.hc-light .action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch {
+	border-color: var(--vscode-contrastBorder);
+}
+
+
 /* Inline description mode — description rendered right after the label */
 .action-widget .inline-description .monaco-list-row.action {
 	/* Override the row gap so group-title and toolbar sit flush */
@@ -386,10 +486,68 @@
 .action-widget .action-list-footer {
 	color: var(--vscode-descriptionForeground);
 	font-size: 11px;
-	padding: 4px 10px 2px 10px;
+	/* Left padding matches the list row padding so the text aligns with the section headings. */
+	padding: 4px 10px 2px 6px;
+	/* Space between the last list item and the divider above the footer. */
+	margin-top: 4px;
 	border-top: 1px solid var(--vscode-editorHoverWidget-border);
 }
 
+/* Header banner */
+.action-widget .action-list-header {
+	display: flex;
+	align-items: flex-start;
+	/* Match the row gap so the text aligns with the item labels. */
+	gap: 6px;
+	color: var(--vscode-foreground);
+	font-size: 12px;
+	line-height: 16px;
+	/* Match the row padding so the icon sits in the item icon column and the text aligns with the item labels. Top padding matches the left so the icon is evenly inset. */
+	padding: 6px 12px 6px 6px;
+	/* No horizontal margin so the rounded box matches the item hover outline. */
+	margin-bottom: 2px;
+	background-color: var(--vscode-chat-requestBubbleBackground);
+	border-radius: var(--vscode-cornerRadius-medium);
+}
+
+/* Give widgets with a header banner more room so the banner text reads well. */
+.action-widget:has(.action-list-header) {
+	min-width: 160px;
+}
+
+.action-widget .action-list-header .action-list-header-icon {
+	flex-shrink: 0;
+	/* Match the row icon column so the icon centers on the item icon column and the text lines up with the item labels. The filled info glyph reads optically heavier than the item check icon, so render it slightly smaller. */
+	width: 12px;
+	text-align: center;
+	font-size: 12px !important;
+	line-height: 16px;
+	color: var(--vscode-descriptionForeground);
+}
+
+.action-widget .action-list-header .action-list-header-text {
+	flex: 1;
+	font-size: 11px;
+}
+
+.action-widget .action-list-header .action-list-header-dismiss {
+	flex-shrink: 0;
+	cursor: pointer;
+	color: var(--vscode-descriptionForeground);
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.action-widget .action-list-header .action-list-header-dismiss:hover {
+	color: var(--vscode-foreground);
+}
+
+.action-widget .action-list-header .action-list-header-dismiss:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: 2px;
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
 /* Anchor for the absolutely-positioned submenu panel */
 .action-widget .actionList {
 	position: relative;

package/vscode/src/vs/platform/actionWidget/browser/actionWidget.d.ts

@@ -18,6 +18,8 @@ export declare class ActionWidgetService extends Disposable implements IActionWi
     constructor(_contextViewService: IContextViewService, _contextKeyService: IContextKeyService, _instantiationService: IInstantiationService);
     show<T>(user: string, supportsPreview: boolean, items: readonly IActionListItem<T>[], delegate: IActionListDelegate<T>, anchor: HTMLElement | StandardMouseEvent | IAnchor, container: HTMLElement | undefined, actionBarActions?: readonly IAction[], accessibilityProvider?: Partial<IListAccessibilityProvider<IActionListItem<T>>>, listOptions?: IActionListOptions): void;
     acceptSelected(preview?: boolean): void;
+    updateItems<T>(items: readonly IActionListItem<T>[], focusItemId?: string): void;
+    focusItemById(itemId: string): void;
     focusPrevious(): void;
     focusNext(): void;
     collapseSection(): void;