@codingame/monaco-vscode-api 22.1.9 → 23.0.0

package/vscode/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.js

@@ -14,13 +14,12 @@ class HighlightedLabel extends Disposable {
         this.title = '';
         this.highlights = [];
         this.didEverRender = false;
-        this.supportIcons = options?.supportIcons ?? false;
         this.domNode = append(container, $('span.monaco-highlighted-label'));
     }
     get element() {
         return this.domNode;
     }
-    set(text, highlights = [], title = '', escapeNewLines) {
+    set(text, highlights = [], title = '', escapeNewLines, supportIcons) {
         if (!text) {
             text = '';
         }
@@ -33,9 +32,9 @@ class HighlightedLabel extends Disposable {
         this.text = text;
         this.title = title;
         this.highlights = highlights;
-        this.render();
+        this.render(supportIcons);
     }
-    render() {
+    render(supportIcons) {
         const children = [];
         let pos = 0;
         for (const highlight of this.highlights) {
@@ -44,7 +43,7 @@ class HighlightedLabel extends Disposable {
             }
             if (pos < highlight.start) {
                 const substring = this.text.substring(pos, highlight.start);
-                if (this.supportIcons) {
+                if (supportIcons) {
                     children.push(...renderLabelWithIcons(substring));
                 }
                 else {
@@ -53,7 +52,7 @@ class HighlightedLabel extends Disposable {
                 pos = highlight.start;
             }
             const substring = this.text.substring(pos, highlight.end);
-            const element = $('span.highlight', undefined, ...this.supportIcons ? renderLabelWithIcons(substring) : [substring]);
+            const element = $('span.highlight', undefined, ...supportIcons ? renderLabelWithIcons(substring) : [substring]);
             if (highlight.extraClasses) {
                 element.classList.add(...highlight.extraClasses);
             }
@@ -62,7 +61,7 @@ class HighlightedLabel extends Disposable {
         }
         if (pos < this.text.length) {
             const substring = this.text.substring(pos);
-            if (this.supportIcons) {
+            if (supportIcons) {
                 children.push(...renderLabelWithIcons(substring));
             }
             else {

package/vscode/src/vs/base/browser/ui/hover/hover.d.ts

@@ -119,6 +119,16 @@ export interface IHoverWidget extends IDisposable {
      */
     readonly isDisposed: boolean;
 }
+export declare enum HoverStyle {
+    /**
+     * The hover is anchored below the element with a pointer above it pointing at the target.
+     */
+    Pointer = 1,
+    /**
+     * The hover is anchored to the bottom right of the cursor's location.
+     */
+    Mouse = 2
+}
 export interface IHoverOptions {
     /**
      * The content to display in the primary section of the hover. The type of text determines the
@@ -162,6 +172,10 @@ export interface IHoverOptions {
      * Note that this is overridden to true when in screen reader optimized mode.
      */
     trapFocus?: boolean;
+    /**
+     * The style of the hover, this sets default values of {@link position} and {@link appearance}:
+     */
+    style?: HoverStyle;
     /**
      * Options that defines where the hover is positioned.
      */

package/vscode/src/vs/base/browser/ui/hover/hover.js

@@ -1,5 +1,10 @@
 
 
+var HoverStyle;
+(function (HoverStyle) {
+    HoverStyle[HoverStyle["Pointer"] = 1] = "Pointer";
+    HoverStyle[HoverStyle["Mouse"] = 2] = "Mouse";
+})(HoverStyle || (HoverStyle = {}));
 function isManagedHoverTooltipMarkdownString(obj) {
     const candidate = obj;
     return typeof candidate === 'object' && 'markdown' in candidate && 'markdownNotSupportedFallback' in candidate;
@@ -9,4 +14,4 @@ function isManagedHoverTooltipHTMLElement(obj) {
     return typeof candidate === 'object' && 'element' in candidate;
 }
 
-export { isManagedHoverTooltipHTMLElement, isManagedHoverTooltipMarkdownString };
+export { HoverStyle, isManagedHoverTooltipHTMLElement, isManagedHoverTooltipMarkdownString };

package/vscode/src/vs/base/browser/ui/iconLabel/iconLabel.d.ts

@@ -3,6 +3,7 @@ import { IMatch } from "../../../common/filters.js";
 import { Disposable } from "../../../common/lifecycle.js";
 import type { IManagedHoverTooltipMarkdownString } from "../hover/hover.js";
 import { URI } from "../../../common/uri.js";
+import { ThemeIcon } from "../../../common/themables.js";
 export interface IIconLabelCreationOptions {
     readonly supportHighlights?: boolean;
     readonly supportDescriptionHighlights?: boolean;
@@ -16,6 +17,7 @@ export interface IIconLabelValueOptions {
     suffix?: string;
     hideIcon?: boolean;
     extraClasses?: readonly string[];
+    bold?: boolean;
     italic?: boolean;
     strikethrough?: boolean;
     matches?: readonly IMatch[];
@@ -24,7 +26,8 @@ export interface IIconLabelValueOptions {
     disabledCommand?: boolean;
     readonly separator?: string;
     readonly domId?: string;
-    iconPath?: URI;
+    iconPath?: URI | ThemeIcon;
+    supportIcons?: boolean;
 }
 export declare class IconLabel extends Disposable {
     private readonly creationOptions?;

package/vscode/src/vs/base/browser/ui/iconLabel/iconLabel.js

@@ -9,6 +9,7 @@ import { equals } from '../../../common/objects.js';
 import { Range } from '../../../common/range.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
+import { ThemeIcon } from '../../../common/themables.js';
 
 registerCss(iconlabel);
 class FastLabelNode {
@@ -71,6 +72,9 @@ class IconLabel extends Disposable {
             if (options.extraClasses) {
                 labelClasses.push(...options.extraClasses);
             }
+            if (options.bold) {
+                labelClasses.push('bold');
+            }
             if (options.italic) {
                 labelClasses.push('italic');
             }
@@ -99,7 +103,14 @@ class IconLabel extends Disposable {
             else {
                 iconNode = existingIconNode;
             }
-            iconNode.style.backgroundImage = asCSSUrl(options?.iconPath);
+            if (ThemeIcon.isThemeIcon(options.iconPath)) {
+                const iconClass = ThemeIcon.asClassName(options.iconPath);
+                iconNode.className = `monaco-icon-label-iconpath ${iconClass}`;
+                iconNode.style.backgroundImage = '';
+            }
+            else {
+                iconNode.style.backgroundImage = asCSSUrl(options?.iconPath);
+            }
             iconNode.style.backgroundRepeat = 'no-repeat';
             iconNode.style.backgroundPosition = 'center';
             iconNode.style.backgroundSize = 'contain';
@@ -116,7 +127,8 @@ class IconLabel extends Disposable {
         if (description || this.descriptionNode) {
             const descriptionNode = this.getOrCreateDescriptionNode();
             if (descriptionNode instanceof HighlightedLabel) {
-                descriptionNode.set(description || '', options ? options.descriptionMatches : undefined, undefined, options?.labelEscapeNewLines);
+                const supportIcons = options?.supportIcons ?? this.creationOptions?.supportIcons;
+                descriptionNode.set(description || '', options ? options.descriptionMatches : undefined, undefined, options?.labelEscapeNewLines, supportIcons);
                 this.setupHover(descriptionNode.element, options?.descriptionTitle);
             }
             else {
@@ -172,10 +184,7 @@ class IconLabel extends Disposable {
                 append(this.labelContainer, $('span.monaco-icon-description-container'))
             )));
             if (this.creationOptions?.supportDescriptionHighlights) {
-                this.descriptionNode = this._register(( new HighlightedLabel(
-                    append(descriptionContainer.element, $('span.label-description')),
-                    { supportIcons: !!this.creationOptions.supportIcons }
-                )));
+                this.descriptionNode = this._register(( new HighlightedLabel(append(descriptionContainer.element, $('span.label-description')))));
             }
             else {
                 this.descriptionNode = this._register(( new FastLabelNode(append(descriptionContainer.element, $('span.label-description')))));
@@ -248,16 +257,14 @@ class LabelWithHighlights extends Disposable {
         }
         this.label = label;
         this.options = options;
+        const supportIcons = options?.supportIcons ?? this.supportIcons;
         if (typeof label === 'string') {
             if (!this.singleLabel) {
                 this.container.textContent = '';
                 this.container.classList.remove('multiple');
-                this.singleLabel = this._register(( new HighlightedLabel(
-                    append(this.container, $('a.label-name', { id: options?.domId })),
-                    { supportIcons: this.supportIcons }
-                )));
+                this.singleLabel = this._register(( new HighlightedLabel(append(this.container, $('a.label-name', { id: options?.domId })))));
             }
-            this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
+            this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines, supportIcons);
         }
         else {
             this.container.textContent = '';
@@ -270,8 +277,8 @@ class LabelWithHighlights extends Disposable {
                 const m = matches ? matches[i] : undefined;
                 const id = options?.domId && `${options?.domId}_${i}`;
                 const name = $('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' });
-                const highlightedLabel = this._register(( new HighlightedLabel(append(this.container, name), { supportIcons: this.supportIcons })));
-                highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines);
+                const highlightedLabel = this._register(( new HighlightedLabel(append(this.container, name))));
+                highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines, supportIcons);
                 if (i < label.length - 1) {
                     append(name, $('span.label-separator', undefined, separator));
                 }

package/vscode/src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -33,9 +33,8 @@
 
 .monaco-icon-label-iconpath {
 	width: 16px;
-	height: 16px;
-	padding-left: 2px;
-	margin-top: 2px;
+	height: 22px;
+	margin-right: 6px;
 	display: flex;
 }
 
@@ -79,6 +78,11 @@
 	opacity: .95;
 }
 
+.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
+	font-weight: bold;
+}
+
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	font-style: italic;

package/vscode/src/vs/base/browser/ui/list/listPaging.d.ts

@@ -1,6 +1,6 @@
 import { Event } from "../../../common/event.js";
 import { IDisposable } from "../../../common/lifecycle.js";
-import { IPagedModel } from "@codingame/monaco-vscode-62190c26-af1c-5f7a-a364-e05a59cfb7c7-common/vscode/vs/base/common/paging";
+import { IPagedModel } from "@codingame/monaco-vscode-2eda793f-4b5b-58e8-83c5-1bfd3bad15f1-common/vscode/vs/base/common/paging";
 import { ScrollbarVisibility } from "../../../common/scrollable.js";
 import { IListContextMenuEvent, IListEvent, IListMouseEvent, IListRenderer, IListVirtualDelegate } from "./list.js";
 import { IListAccessibilityProvider, IListOptionsUpdate, IListStyles, List, TypeNavigationMode } from "./listWidget.js";
@@ -30,8 +30,9 @@ export interface IPagedListOptions<T> {
     readonly alwaysConsumeMouseWheel?: boolean;
 }
 export declare class PagedList<T> implements IDisposable {
-    private list;
+    private readonly list;
     private _model;
+    private readonly modelDisposables;
     constructor(user: string, container: HTMLElement, virtualDelegate: IListVirtualDelegate<number>, renderers: IPagedRenderer<T, any>[], options?: IPagedListOptions<T>);
     updateOptions(options: IListOptionsUpdate): void;
     getHTMLElement(): HTMLElement;

package/vscode/src/vs/base/browser/ui/list/listPaging.js

@@ -3,7 +3,7 @@ import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { range } from '../../../common/arrays.js';
 import { CancellationTokenSource } from '../../../common/cancellation.js';
 import { Event } from '../../../common/event.js';
-import { Disposable } from '../../../common/lifecycle.js';
+import { Disposable, DisposableStore } from '../../../common/lifecycle.js';
 import * as list from './list.css';
 import { List } from './listWidget.js';
 import { isActiveElement } from '../../dom.js';
@@ -69,6 +69,7 @@ function fromPagedListOptions(modelProvider, options) {
 }
 class PagedList {
     constructor(user, container, virtualDelegate, renderers, options = {}) {
+        this.modelDisposables = ( new DisposableStore());
         const modelProvider = () => this.model;
         const pagedRenderers = ( renderers.map(r => ( new PagedRenderer(r, modelProvider))));
         this.list = ( new List(
@@ -149,8 +150,10 @@ class PagedList {
         return this._model;
     }
     set model(model) {
+        this.modelDisposables.clear();
         this._model = model;
         this.list.splice(0, this.list.length, range(model.length));
+        this.modelDisposables.add(model.onDidIncrementLength(newLength => this.list.splice(this.list.length, 0, range(this.list.length, newLength))));
     }
     get length() {
         return this.list.length;
@@ -220,6 +223,7 @@ class PagedList {
     }
     dispose() {
         this.list.dispose();
+        this.modelDisposables.dispose();
     }
 }
 

package/vscode/src/vs/base/browser/ui/list/listView.d.ts

@@ -18,11 +18,12 @@ export declare enum ListViewTargetSector {
     CENTER_BOTTOM = 2,// [50%-75%)
     BOTTOM = 3
 }
+export type CheckBoxAccessibleState = boolean | "mixed";
 export interface IListViewAccessibilityProvider<T> {
     getSetSize?(element: T, index: number, listLength: number): number;
     getPosInSet?(element: T, index: number): number;
     getRole?(element: T): AriaRole | undefined;
-    isChecked?(element: T): boolean | IValueWithChangeEvent<boolean> | undefined;
+    isChecked?(element: T): CheckBoxAccessibleState | IValueWithChangeEvent<CheckBoxAccessibleState> | undefined;
 }
 export interface IListViewOptionsUpdate {
     readonly smoothScrolling?: boolean;

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -635,11 +635,12 @@ class ListView {
         const role = this.accessibilityProvider.getRole(item.element) || 'listitem';
         item.row.domNode.setAttribute('role', role);
         const checked = this.accessibilityProvider.isChecked(item.element);
-        if (typeof checked === 'boolean') {
-            item.row.domNode.setAttribute('aria-checked', String(!!checked));
+        const toAriaState = (value) => value === 'mixed' ? 'mixed' : String(!!value);
+        if (typeof checked === 'boolean' || checked === 'mixed') {
+            item.row.domNode.setAttribute('aria-checked', toAriaState(checked));
         }
         else if (checked) {
-            const update = (checked) => item.row.domNode.setAttribute('aria-checked', String(!!checked));
+            const update = (value) => item.row.domNode.setAttribute('aria-checked', toAriaState(value));
             update(checked.value);
             item.checkedDisposable = checked.onDidChange(() => update(checked.value));
         }

package/vscode/src/vs/base/browser/ui/list/listWidget.d.ts

@@ -57,7 +57,7 @@ export interface IListAccessibilityProvider<T> extends IListViewAccessibilityPro
     getWidgetAriaLabel(): string | IObservable<string>;
     getWidgetRole?(): AriaRole;
     getAriaLevel?(element: T): number | undefined;
-    onDidChangeActiveDescendant?: Event<void>;
+    readonly onDidChangeActiveDescendant?: Event<void>;
     getActiveDescendantId?(element: T): string | undefined;
 }
 export declare class DefaultStyleController implements IStyleController {

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -724,7 +724,7 @@ class DefaultStyleController {
             content.push(`
 				.monaco-drag-image${suffix},
 				.monaco-list${suffix}:focus .monaco-list-row.focused,
-				.monaco-workbench.context-menu-visible .monaco-list${suffix}.last-focused .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
+				.context-menu-visible .monaco-list${suffix}.last-focused .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
 			`);
         }
         const inactiveFocusAndSelectionOutline = asCssValueWithDefault(styles.listSelectionOutline, styles.listInactiveFocusOutline ?? '');
@@ -765,13 +765,13 @@ class DefaultStyleController {
             content.push(`
 				.monaco-table > .monaco-split-view2,
 				.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before,
-				.monaco-workbench:not(.reduce-motion) .monaco-table:hover > .monaco-split-view2,
-				.monaco-workbench:not(.reduce-motion) .monaco-table:hover > .monaco-split-view2 .monaco-sash.vertical::before {
+				.monaco-enable-motion .monaco-table:hover > .monaco-split-view2,
+				.monaco-enable-motion .monaco-table:hover > .monaco-split-view2 .monaco-sash.vertical::before {
 					border-color: ${styles.tableColumnsBorder};
 				}
 
-				.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2,
-				.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
+				.monaco-enable-motion .monaco-table > .monaco-split-view2,
+				.monaco-enable-motion .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
 					border-color: transparent;
 				}
 			`);

package/vscode/src/vs/base/browser/ui/progressbar/progressAccessibilitySignal.d.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from "../../../common/lifecycle.js";
 export interface IScopedAccessibilityProgressSignalDelegate extends IDisposable {
 }
-export declare function setProgressAcccessibilitySignalScheduler(progressAccessibilitySignalScheduler: (msDelayTime: number, msLoopTime?: number) => IScopedAccessibilityProgressSignalDelegate): void;
-export declare function getProgressAcccessibilitySignalScheduler(msDelayTime: number, msLoopTime?: number): IScopedAccessibilityProgressSignalDelegate;
+export declare function setProgressAccessibilitySignalScheduler(progressAccessibilitySignalScheduler: (msDelayTime: number, msLoopTime?: number) => IScopedAccessibilityProgressSignalDelegate): void;
+export declare function getProgressAccessibilitySignalScheduler(msDelayTime: number, msLoopTime?: number): IScopedAccessibilityProgressSignalDelegate;

package/vscode/src/vs/base/browser/ui/progressbar/progressAccessibilitySignal.js

@@ -6,11 +6,11 @@ const nullScopedAccessibilityProgressSignalFactory = () => ({
     dispose: () => { },
 });
 let progressAccessibilitySignalSchedulerFactory = nullScopedAccessibilityProgressSignalFactory;
-function setProgressAcccessibilitySignalScheduler(progressAccessibilitySignalScheduler) {
+function setProgressAccessibilitySignalScheduler(progressAccessibilitySignalScheduler) {
     progressAccessibilitySignalSchedulerFactory = progressAccessibilitySignalScheduler;
 }
-function getProgressAcccessibilitySignalScheduler(msDelayTime, msLoopTime) {
+function getProgressAccessibilitySignalScheduler(msDelayTime, msLoopTime) {
     return progressAccessibilitySignalSchedulerFactory(msDelayTime, msLoopTime);
 }
 
-export { getProgressAcccessibilitySignalScheduler, setProgressAcccessibilitySignalScheduler };
+export { getProgressAccessibilitySignalScheduler, setProgressAccessibilitySignalScheduler };

package/vscode/src/vs/base/browser/ui/progressbar/progressbar.js

@@ -1,7 +1,7 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { show, createElement, hide } from '../../dom.js';
-import { getProgressAcccessibilitySignalScheduler } from './progressAccessibilitySignal.js';
+import { getProgressAccessibilitySignalScheduler } from './progressAccessibilitySignal.js';
 import { RunOnceScheduler } from '../../../common/async.js';
 import { Disposable, MutableDisposable } from '../../../common/lifecycle.js';
 import { isNumber } from '../../../common/types.js';
@@ -118,7 +118,7 @@ class ProgressBar extends Disposable {
     }
     show(delay) {
         this.showDelayedScheduler.cancel();
-        this.progressSignal.value = getProgressAcccessibilitySignalScheduler(ProgressBar.PROGRESS_SIGNAL_DEFAULT_DELAY);
+        this.progressSignal.value = getProgressAccessibilitySignalScheduler(ProgressBar.PROGRESS_SIGNAL_DEFAULT_DELAY);
         if (typeof delay === 'number') {
             this.showDelayedScheduler.schedule(delay);
         }

package/vscode/src/vs/base/browser/ui/sash/sash.css

@@ -111,7 +111,7 @@
 	background: transparent;
 }
 
-.monaco-workbench:not(.reduce-motion) .monaco-sash:before {
+.monaco-enable-motion .monaco-sash:before {
 	transition: background-color 0.1s ease-out;
 }
 

package/vscode/src/vs/base/browser/ui/scrollbar/media/scrollbars.css

@@ -59,6 +59,10 @@
 	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
 }
 
+.monaco-scrollable-element > .scrollbar {
+	background: var(--vscode-scrollbar-background);
+}
+
 .monaco-scrollable-element > .scrollbar > .slider {
 	background: var(--vscode-scrollbarSlider-background);
 }

package/vscode/src/vs/base/browser/ui/scrollbar/scrollableElement.js

@@ -336,7 +336,7 @@ class AbstractScrollableElement extends Widget {
                 this._horizontalScrollbar.writeScrollPosition(desiredScrollPosition, desiredScrollLeft);
             }
             desiredScrollPosition = this._scrollable.validateScrollPosition(desiredScrollPosition);
-            if (this._options.inertialScroll && (deltaX || deltaY)) {
+            if (this._options.inertialScroll && (deltaX || deltaY) && !classifier.isPhysicalMouseWheel()) {
                 let startPeriodic = false;
                 if (this._inertialSpeed.X === 0 && this._inertialSpeed.Y === 0) {
                     startPeriodic = true;

package/vscode/src/vs/base/browser/ui/selectBox/selectBoxCustom.d.ts

@@ -26,6 +26,7 @@ export declare class SelectBoxList extends Disposable implements ISelectBoxDeleg
     private _dropDownPosition;
     private _hasDetails;
     private selectionDetailsPane;
+    private readonly _selectionDetailsDisposables;
     private _skipLayout;
     private _cachedMaxDetailsHeight?;
     private _hover?;

package/vscode/src/vs/base/browser/ui/selectBox/selectBoxCustom.js

@@ -4,7 +4,7 @@ import { localize } from '../../../../nls.js';
 import { equals } from '../../../common/arrays.js';
 import { Emitter, Event } from '../../../common/event.js';
 import { KeyCode, KeyCodeUtils } from '../../../common/keyCodes.js';
-import { Disposable } from '../../../common/lifecycle.js';
+import { Disposable, DisposableStore } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { ScrollbarVisibility } from '../../../common/scrollable.js';
 import { asCssValueWithDefault } from '../../cssValue.js';
@@ -60,6 +60,7 @@ class SelectBoxList extends Disposable {
         this.options = [];
         this._currentSelection = 0;
         this._hasDetails = false;
+        this._selectionDetailsDisposables = this._register(( new DisposableStore()));
         this._skipLayout = false;
         this._sticky = false;
         this._isVisible = false;
@@ -612,7 +613,7 @@ class SelectBoxList extends Disposable {
         const rendered = renderMarkdown({ value: text, supportThemeIcons: true }, { actionHandler });
         rendered.element.classList.add('select-box-description-markdown');
         cleanRenderedMarkdown(rendered.element);
-        return rendered.element;
+        return rendered;
     }
     onListFocus(e) {
         if (!this._isVisible || !this._hasDetails) {
@@ -621,6 +622,7 @@ class SelectBoxList extends Disposable {
         this.updateDetail(e.indexes[0]);
     }
     updateDetail(selectedIndex) {
+        this._selectionDetailsDisposables.clear();
         this.selectionDetailsPane.textContent = '';
         const option = this.options[selectedIndex];
         const description = option?.description ?? '';
@@ -628,7 +630,8 @@ class SelectBoxList extends Disposable {
         if (description) {
             if (descriptionIsMarkdown) {
                 const actionHandler = option.descriptionMarkdownActionHandler;
-                this.selectionDetailsPane.appendChild(this.renderDescriptionMarkdown(description, actionHandler));
+                const result = this._selectionDetailsDisposables.add(this.renderDescriptionMarkdown(description, actionHandler));
+                this.selectionDetailsPane.appendChild(result.element);
             }
             else {
                 this.selectionDetailsPane.textContent = description;

package/vscode/src/vs/base/browser/ui/table/table.css

@@ -51,7 +51,7 @@
 	border-left: 1px solid transparent;
 }
 
-.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2,
-.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
+.monaco-enable-motion .monaco-table > .monaco-split-view2,
+.monaco-enable-motion .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
 	transition: border-color 0.2s ease-out;
 }

package/vscode/src/vs/base/browser/ui/toggle/toggle.d.ts

@@ -3,7 +3,7 @@ import { Emitter, Event } from "../../../common/event.js";
 import { ThemeIcon } from "../../../common/themables.js";
 import { IKeyboardEvent } from "../../keyboardEvent.js";
 import { BaseActionViewItem, IActionViewItemOptions } from "../actionbar/actionViewItems.js";
-import { IHoverDelegate } from "../hover/hoverDelegate.js";
+import { IHoverLifecycleOptions } from "../hover/hover.js";
 import { Widget } from "../widget.js";
 export interface IToggleOpts extends IToggleStyles {
     readonly actionClassName?: string;
@@ -11,7 +11,7 @@ export interface IToggleOpts extends IToggleStyles {
     readonly title: string;
     readonly isChecked: boolean;
     readonly notFocusable?: boolean;
-    readonly hoverDelegate?: IHoverDelegate;
+    readonly hoverLifecycleOptions?: IHoverLifecycleOptions;
 }
 export interface IToggleStyles {
     readonly inputActiveOptionBorder: string | undefined;
@@ -25,7 +25,7 @@ export interface ICheckboxStyles {
     readonly checkboxDisabledBackground: string | undefined;
     readonly checkboxDisabledForeground: string | undefined;
     readonly size?: number;
-    readonly hoverDelegate?: IHoverDelegate;
+    readonly hoverLifecycleOptions?: IHoverLifecycleOptions;
 }
 export declare const unthemedToggleStyles: {
     inputActiveOptionBorder: string;
@@ -49,10 +49,10 @@ export declare class Toggle extends Widget {
     private readonly _onKeyDown;
     get onKeyDown(): Event<IKeyboardEvent>;
     private readonly _opts;
+    private _title;
     private _icon;
     readonly domNode: HTMLElement;
     private _checked;
-    private _hover;
     constructor(opts: IToggleOpts);
     get enabled(): boolean;
     focus(): void;
@@ -91,9 +91,9 @@ export declare class Checkbox extends BaseCheckbox {
 }
 export declare class TriStateCheckbox extends BaseCheckbox {
     private _state;
-    constructor(title: string, _state: boolean | "partial", styles: ICheckboxStyles);
-    get checked(): boolean | "partial";
-    set checked(newState: boolean | "partial");
+    constructor(title: string, _state: boolean | "mixed", styles: ICheckboxStyles);
+    get checked(): boolean | "mixed";
+    set checked(newState: boolean | "mixed");
     protected applyStyles(enabled?: boolean): void;
 }
 export interface ICheckboxActionViewItemOptions extends IActionViewItemOptions {

package/vscode/src/vs/base/browser/ui/toggle/toggle.js

@@ -6,8 +6,8 @@ import { KeyCode } from '../../../common/keyCodes.js';
 import { ThemeIcon } from '../../../common/themables.js';
 import { createElement, isActiveElement, $, addDisposableListener, EventType } from '../../dom.js';
 import { BaseActionViewItem } from '../actionbar/actionViewItems.js';
+import { HoverStyle } from '../hover/hover.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
-import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { Widget } from '../widget.js';
 import * as toggle from './toggle.css';
 
@@ -30,7 +30,6 @@ class ToggleActionViewItem extends BaseActionViewItem {
             inputActiveOptionBackground: options.toggleStyles?.inputActiveOptionBackground,
             inputActiveOptionBorder: options.toggleStyles?.inputActiveOptionBorder,
             inputActiveOptionForeground: options.toggleStyles?.inputActiveOptionForeground,
-            hoverDelegate: options.hoverDelegate
         })));
         this._register(this.toggle.onChange(() => {
             this._action.checked = !!this.toggle && this.toggle.checked;
@@ -82,6 +81,7 @@ class Toggle extends Widget {
         this._onChange = this._register(( new Emitter()));
         this._onKeyDown = this._register(( new Emitter()));
         this._opts = opts;
+        this._title = this._opts.title;
         this._checked = this._opts.isChecked;
         const classes = ['monaco-custom-toggle'];
         if (this._opts.icon) {
@@ -95,14 +95,17 @@ class Toggle extends Widget {
             classes.push('checked');
         }
         this.domNode = createElement('div');
-        this._hover = this._register(getBaseLayerHoverDelegate().setupManagedHover(opts.hoverDelegate ?? getDefaultHoverDelegate('mouse'), this.domNode, this._opts.title));
+        this._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({
+            content: this._title,
+            style: HoverStyle.Pointer,
+        }), this._opts.hoverLifecycleOptions));
         this.domNode.classList.add(...classes);
         if (!this._opts.notFocusable) {
             this.domNode.tabIndex = 0;
         }
         this.domNode.setAttribute('role', 'checkbox');
         this.domNode.setAttribute('aria-checked', String(this._checked));
-        this.domNode.setAttribute('aria-label', this._opts.title);
+        this.setTitle(this._opts.title);
         this.applyStyles();
         this.onclick(this.domNode, (ev) => {
             if (this.enabled) {
@@ -169,7 +172,7 @@ class Toggle extends Widget {
         this.domNode.classList.add('disabled');
     }
     setTitle(newTitle) {
-        this._hover.update(newTitle);
+        this._title = newTitle;
         this.domNode.setAttribute('aria-label', newTitle);
     }
     set visible(visible) {
@@ -224,7 +227,7 @@ class BaseCheckbox extends Widget {
 class Checkbox extends BaseCheckbox {
     constructor(title, isChecked, styles) {
         const toggle = ( new Toggle(
-            { title, isChecked, icon: Codicon.check, actionClassName: BaseCheckbox.CLASS_NAME, hoverDelegate: styles.hoverDelegate, ...unthemedToggleStyles }
+            { title, isChecked, icon: Codicon.check, actionClassName: BaseCheckbox.CLASS_NAME, hoverLifecycleOptions: styles.hoverLifecycleOptions, ...unthemedToggleStyles }
         ));
         super(toggle, toggle.domNode, styles);
         this._register(toggle);
@@ -257,7 +260,7 @@ class TriStateCheckbox extends BaseCheckbox {
             case true:
                 icon = Codicon.check;
                 break;
-            case 'partial':
+            case 'mixed':
                 icon = Codicon.dash;
                 break;
             case false:
@@ -269,7 +272,7 @@ class TriStateCheckbox extends BaseCheckbox {
             isChecked: _state === true,
             icon,
             actionClassName: Checkbox.CLASS_NAME,
-            hoverDelegate: styles.hoverDelegate,
+            hoverLifecycleOptions: styles.hoverLifecycleOptions,
             ...unthemedToggleStyles
         }));
         super(checkbox, checkbox.domNode, styles);
@@ -296,7 +299,7 @@ class TriStateCheckbox extends BaseCheckbox {
             case true:
                 this.checkbox.setIcon(Codicon.check);
                 break;
-            case 'partial':
+            case 'mixed':
                 this.checkbox.setIcon(Codicon.dash);
                 break;
             case false: