monaco-editor-core 0.57.0 → 0.58.0-dev-20261104

package/esm/vs/base/browser/ui/toggle/switch.css

@@ -5,6 +5,8 @@
 
 .monaco-switch {
 	position: relative;
+	/* Lets the thumb size itself from the track's inner height with `cqh`. */
+	container-type: size;
 	flex: 0 0 auto;
 	width: var(--vscode-spacing-size280);
 	height: var(--vscode-spacing-size160);
@@ -31,19 +33,26 @@
 	outline-offset: var(--vscode-spacing-size20);
 }
 
+/* The thumb fills the track's inner height and is inset by its own transparent border,
+ * so every gap around it is made of borders. Borders snap to whole device pixels, so
+ * the gaps stay equal at any display scale or zoom, where fixed offsets round unevenly.
+ * Style the thumb with `background-color`, as `background` would reset the clip. */
 .monaco-switch-thumb {
 	position: absolute;
-	top: var(--vscode-strokeThickness);
-	left: var(--vscode-strokeThickness);
-	width: var(--vscode-spacing-size120);
-	height: var(--vscode-spacing-size120);
+	top: 0;
+	bottom: 0;
+	left: 0;
+	box-sizing: border-box;
+	width: 100cqh;
+	border: var(--vscode-strokeThickness) solid transparent;
 	border-radius: var(--vscode-cornerRadius-circle);
-	background: var(--vscode-button-foreground);
-	transition: transform 120ms ease;
+	background-color: var(--vscode-button-foreground);
+	background-clip: padding-box;
+	transition: left 120ms ease;
 }
 
 .monaco-switch.checked .monaco-switch-thumb {
-	transform: translateX(var(--vscode-spacing-size120));
+	left: calc(100% - 100cqh);
 }
 
 /* The workbench marks high contrast with `.hc-black` / `.hc-light`; `.vscode-high-contrast`

package/esm/vs/base/browser/ui/toggle/switch.js

@@ -21,16 +21,19 @@ export class Switch extends Disposable {
         /** Fires with the new state when the user flips the switch, not when it is set in code. */
         this.onChange = this._onChange.event;
         this._checked = !!options.checked;
-        this._title = options.title ?? options.ariaLabel;
+        const title = options.title === false ? undefined : options.title;
+        this._title = title ?? options.ariaLabel;
         this.domNode = dom.$('button.monaco-switch');
         this.domNode.type = 'button';
         this.domNode.setAttribute('role', 'switch');
         dom.append(this.domNode, dom.$('.monaco-switch-thumb'));
-        this._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({
-            content: this._title,
-            style: 1 /* HoverStyle.Pointer */,
-        })));
-        this.setAriaLabel(options.ariaLabel, options.title);
+        if (options.title !== false) {
+            this._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({
+                content: this._title,
+                style: 1 /* HoverStyle.Pointer */,
+            })));
+        }
+        this.setAriaLabel(options.ariaLabel, title);
         this.disabled = !!options.disabled;
         this._applyState();
         this._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {

package/esm/vs/base/browser/ui/toggle/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/toggle/switch.ts","vs/base/browser/ui/toggle/switch.ts"],"names":[],"mappings":"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","file":"switch.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { Emitter, Event } from '../../../common/event.js';\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { HoverStyle } from '../hover/hover.js';\nimport { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';\nimport './switch.css';\n\nexport interface ISwitchOptions {\n\treadonly checked?: boolean;\n\t/** Accessible name. Also used as the hover title unless {@link title} is given. */\n\treadonly ariaLabel: string;\n\t/** Hover title. Defaults to {@link ariaLabel}. */\n\treadonly title?: string;\n\treadonly disabled?: boolean;\n}\n\n/**\n * A pill switch for a setting that takes effect as soon as it is flipped, e.g. enabling\n * a plugin or letting a model be chosen automatically.\n *\n * Use this rather than a `Checkbox` when the control commits immediately; a checkbox\n * reads as part of a form that is submitted later.\n */\nexport class Switch extends Disposable {\n\n\tprivate readonly _onChange = this._register(new Emitter<boolean>());\n\t/** Fires with the new state when the user flips the switch, not when it is set in code. */\n\treadonly onChange: Event<boolean> = this._onChange.event;\n\n\treadonly domNode: HTMLButtonElement;\n\n\tprivate _checked: boolean;\n\tprivate _title: string;\n\n\tconstructor(options: ISwitchOptions) {\n\t\tsuper();\n\t\tthis._checked = !!options.checked;\n\t\tthis._title = options.title ?? options.ariaLabel;\n\n\t\tthis.domNode = dom.$('button.monaco-switch');\n\t\tthis.domNode.type = 'button';\n\t\tthis.domNode.setAttribute('role', 'switch');\n\t\tdom.append(this.domNode, dom.$('.monaco-switch-thumb'));\n\n\t\tthis._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({\n\t\t\tcontent: this._title,\n\t\t\tstyle: HoverStyle.Pointer,\n\t\t})));\n\n\t\tthis.setAriaLabel(options.ariaLabel, options.title);\n\t\tthis.disabled = !!options.disabled;\n\t\tthis._applyState();\n\n\t\tthis._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {\n\t\t\tdom.EventHelper.stop(e, true);\n\t\t\tif (this.domNode.disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._checked = !this._checked;\n\t\t\tthis._applyState();\n\t\t\tthis._onChange.fire(this._checked);\n\t\t}));\n\t}\n\n\tget checked(): boolean {\n\t\treturn this._checked;\n\t}\n\n\t/** Sets the state without firing {@link onChange}. */\n\tset checked(checked: boolean) {\n\t\tif (this._checked !== checked) {\n\t\t\tthis._checked = checked;\n\t\t\tthis._applyState();\n\t\t}\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.domNode.disabled;\n\t}\n\n\tset disabled(disabled: boolean) {\n\t\tthis.domNode.disabled = disabled;\n\t}\n\n\tsetAriaLabel(ariaLabel: string, title = ariaLabel): void {\n\t\tthis.domNode.setAttribute('aria-label', ariaLabel);\n\t\tthis._title = title;\n\t}\n\n\tprivate _applyState(): void {\n\t\tthis.domNode.setAttribute('aria-checked', String(this._checked));\n\t\tthis.domNode.classList.toggle('checked', this._checked);\n\t}\n}\n","/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { Emitter, Event } from '../../../common/event.js';\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { HoverStyle } from '../hover/hover.js';\nimport { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';\nimport './switch.css';\n\nexport interface ISwitchOptions {\n\treadonly checked?: boolean;\n\t/** Accessible name. Also used as the hover title unless {@link title} is given. */\n\treadonly ariaLabel: string;\n\t/** Hover title. Defaults to {@link ariaLabel}. */\n\treadonly title?: string;\n\treadonly disabled?: boolean;\n}\n\n/**\n * A pill switch for a setting that takes effect as soon as it is flipped, e.g. enabling\n * a plugin or letting a model be chosen automatically.\n *\n * Use this rather than a `Checkbox` when the control commits immediately; a checkbox\n * reads as part of a form that is submitted later.\n */\nexport class Switch extends Disposable {\n\n\tprivate readonly _onChange = this._register(new Emitter<boolean>());\n\t/** Fires with the new state when the user flips the switch, not when it is set in code. */\n\treadonly onChange: Event<boolean> = this._onChange.event;\n\n\treadonly domNode: HTMLButtonElement;\n\n\tprivate _checked: boolean;\n\tprivate _title: string;\n\n\tconstructor(options: ISwitchOptions) {\n\t\tsuper();\n\t\tthis._checked = !!options.checked;\n\t\tthis._title = options.title ?? options.ariaLabel;\n\n\t\tthis.domNode = dom.$('button.monaco-switch');\n\t\tthis.domNode.type = 'button';\n\t\tthis.domNode.setAttribute('role', 'switch');\n\t\tdom.append(this.domNode, dom.$('.monaco-switch-thumb'));\n\n\t\tthis._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({\n\t\t\tcontent: this._title,\n\t\t\tstyle: HoverStyle.Pointer,\n\t\t})));\n\n\t\tthis.setAriaLabel(options.ariaLabel, options.title);\n\t\tthis.disabled = !!options.disabled;\n\t\tthis._applyState();\n\n\t\tthis._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {\n\t\t\tdom.EventHelper.stop(e, true);\n\t\t\tif (this.domNode.disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._checked = !this._checked;\n\t\t\tthis._applyState();\n\t\t\tthis._onChange.fire(this._checked);\n\t\t}));\n\t}\n\n\tget checked(): boolean {\n\t\treturn this._checked;\n\t}\n\n\t/** Sets the state without firing {@link onChange}. */\n\tset checked(checked: boolean) {\n\t\tif (this._checked !== checked) {\n\t\t\tthis._checked = checked;\n\t\t\tthis._applyState();\n\t\t}\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.domNode.disabled;\n\t}\n\n\tset disabled(disabled: boolean) {\n\t\tthis.domNode.disabled = disabled;\n\t}\n\n\tsetAriaLabel(ariaLabel: string, title = ariaLabel): void {\n\t\tthis.domNode.setAttribute('aria-label', ariaLabel);\n\t\tthis._title = title;\n\t}\n\n\tprivate _applyState(): void {\n\t\tthis.domNode.setAttribute('aria-checked', String(this._checked));\n\t\tthis.domNode.classList.toggle('checked', this._checked);\n\t}\n}\n"]}
+{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/toggle/switch.ts","vs/base/browser/ui/toggle/switch.ts"],"names":[],"mappings":"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","file":"switch.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { Emitter, Event } from '../../../common/event.js';\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { HoverStyle } from '../hover/hover.js';\nimport { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';\nimport './switch.css';\n\nexport interface ISwitchOptions {\n\treadonly checked?: boolean;\n\t/** Accessible name. Also used as the hover title unless {@link title} is given. */\n\treadonly ariaLabel: string;\n\t/**\n\t * Hover title. Defaults to {@link ariaLabel}. Pass `false` for no hover, for example when\n\t * the surrounding element already shows one that explains the switch.\n\t */\n\treadonly title?: string | false;\n\treadonly disabled?: boolean;\n}\n\n/**\n * A pill switch for a setting that takes effect as soon as it is flipped, e.g. enabling\n * a plugin or letting a model be chosen automatically.\n *\n * Use this rather than a `Checkbox` when the control commits immediately; a checkbox\n * reads as part of a form that is submitted later.\n */\nexport class Switch extends Disposable {\n\n\tprivate readonly _onChange = this._register(new Emitter<boolean>());\n\t/** Fires with the new state when the user flips the switch, not when it is set in code. */\n\treadonly onChange: Event<boolean> = this._onChange.event;\n\n\treadonly domNode: HTMLButtonElement;\n\n\tprivate _checked: boolean;\n\tprivate _title: string;\n\n\tconstructor(options: ISwitchOptions) {\n\t\tsuper();\n\t\tthis._checked = !!options.checked;\n\t\tconst title = options.title === false ? undefined : options.title;\n\t\tthis._title = title ?? options.ariaLabel;\n\n\t\tthis.domNode = dom.$('button.monaco-switch');\n\t\tthis.domNode.type = 'button';\n\t\tthis.domNode.setAttribute('role', 'switch');\n\t\tdom.append(this.domNode, dom.$('.monaco-switch-thumb'));\n\n\t\tif (options.title !== false) {\n\t\t\tthis._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({\n\t\t\t\tcontent: this._title,\n\t\t\t\tstyle: HoverStyle.Pointer,\n\t\t\t})));\n\t\t}\n\n\t\tthis.setAriaLabel(options.ariaLabel, title);\n\t\tthis.disabled = !!options.disabled;\n\t\tthis._applyState();\n\n\t\tthis._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {\n\t\t\tdom.EventHelper.stop(e, true);\n\t\t\tif (this.domNode.disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._checked = !this._checked;\n\t\t\tthis._applyState();\n\t\t\tthis._onChange.fire(this._checked);\n\t\t}));\n\t}\n\n\tget checked(): boolean {\n\t\treturn this._checked;\n\t}\n\n\t/** Sets the state without firing {@link onChange}. */\n\tset checked(checked: boolean) {\n\t\tif (this._checked !== checked) {\n\t\t\tthis._checked = checked;\n\t\t\tthis._applyState();\n\t\t}\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.domNode.disabled;\n\t}\n\n\tset disabled(disabled: boolean) {\n\t\tthis.domNode.disabled = disabled;\n\t}\n\n\tsetAriaLabel(ariaLabel: string, title = ariaLabel): void {\n\t\tthis.domNode.setAttribute('aria-label', ariaLabel);\n\t\tthis._title = title;\n\t}\n\n\tprivate _applyState(): void {\n\t\tthis.domNode.setAttribute('aria-checked', String(this._checked));\n\t\tthis.domNode.classList.toggle('checked', this._checked);\n\t}\n}\n","/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { Emitter, Event } from '../../../common/event.js';\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { HoverStyle } from '../hover/hover.js';\nimport { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';\nimport './switch.css';\n\nexport interface ISwitchOptions {\n\treadonly checked?: boolean;\n\t/** Accessible name. Also used as the hover title unless {@link title} is given. */\n\treadonly ariaLabel: string;\n\t/**\n\t * Hover title. Defaults to {@link ariaLabel}. Pass `false` for no hover, for example when\n\t * the surrounding element already shows one that explains the switch.\n\t */\n\treadonly title?: string | false;\n\treadonly disabled?: boolean;\n}\n\n/**\n * A pill switch for a setting that takes effect as soon as it is flipped, e.g. enabling\n * a plugin or letting a model be chosen automatically.\n *\n * Use this rather than a `Checkbox` when the control commits immediately; a checkbox\n * reads as part of a form that is submitted later.\n */\nexport class Switch extends Disposable {\n\n\tprivate readonly _onChange = this._register(new Emitter<boolean>());\n\t/** Fires with the new state when the user flips the switch, not when it is set in code. */\n\treadonly onChange: Event<boolean> = this._onChange.event;\n\n\treadonly domNode: HTMLButtonElement;\n\n\tprivate _checked: boolean;\n\tprivate _title: string;\n\n\tconstructor(options: ISwitchOptions) {\n\t\tsuper();\n\t\tthis._checked = !!options.checked;\n\t\tconst title = options.title === false ? undefined : options.title;\n\t\tthis._title = title ?? options.ariaLabel;\n\n\t\tthis.domNode = dom.$('button.monaco-switch');\n\t\tthis.domNode.type = 'button';\n\t\tthis.domNode.setAttribute('role', 'switch');\n\t\tdom.append(this.domNode, dom.$('.monaco-switch-thumb'));\n\n\t\tif (options.title !== false) {\n\t\t\tthis._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({\n\t\t\t\tcontent: this._title,\n\t\t\t\tstyle: HoverStyle.Pointer,\n\t\t\t})));\n\t\t}\n\n\t\tthis.setAriaLabel(options.ariaLabel, title);\n\t\tthis.disabled = !!options.disabled;\n\t\tthis._applyState();\n\n\t\tthis._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {\n\t\t\tdom.EventHelper.stop(e, true);\n\t\t\tif (this.domNode.disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._checked = !this._checked;\n\t\t\tthis._applyState();\n\t\t\tthis._onChange.fire(this._checked);\n\t\t}));\n\t}\n\n\tget checked(): boolean {\n\t\treturn this._checked;\n\t}\n\n\t/** Sets the state without firing {@link onChange}. */\n\tset checked(checked: boolean) {\n\t\tif (this._checked !== checked) {\n\t\t\tthis._checked = checked;\n\t\t\tthis._applyState();\n\t\t}\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.domNode.disabled;\n\t}\n\n\tset disabled(disabled: boolean) {\n\t\tthis.domNode.disabled = disabled;\n\t}\n\n\tsetAriaLabel(ariaLabel: string, title = ariaLabel): void {\n\t\tthis.domNode.setAttribute('aria-label', ariaLabel);\n\t\tthis._title = title;\n\t}\n\n\tprivate _applyState(): void {\n\t\tthis.domNode.setAttribute('aria-checked', String(this._checked));\n\t\tthis.domNode.classList.toggle('checked', this._checked);\n\t}\n}\n"]}

package/esm/vs/base/browser/ui/toolbar/toolbar.css

@@ -24,8 +24,7 @@
 		flex-shrink: 0;
 	}
 
-	.monaco-action-bar:not(.has-overflow) > .actions-container > .action-item:last-child,
-	.monaco-action-bar.has-overflow > .actions-container > .action-item:nth-last-child(2) {
+	.monaco-action-bar > .actions-container > .action-item.toolbar-shrinkable-item {
 		flex-shrink: 1;
 		min-width: var(--vscode-toolbar-action-min-width, 20px);
 	}

package/esm/vs/base/browser/ui/toolbar/toolbar.js

@@ -10,7 +10,7 @@ import { Action, Separator, SubmenuAction } from '../../../common/actions.js';
 import { Codicon } from '../../../common/codicons.js';
 import { ThemeIcon } from '../../../common/themables.js';
 import { EventMultiplexer } from '../../../common/event.js';
-import { Disposable, DisposableStore, toDisposable } from '../../../common/lifecycle.js';
+import { Disposable, DisposableMap, toDisposable } from '../../../common/lifecycle.js';
 import './toolbar.css';
 import * as nls from '../../../../nls.js';
 import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
@@ -25,13 +25,13 @@ export class ToolBar extends Disposable {
     constructor(container, contextMenuProvider, options = { orientation: 0 /* ActionsOrientation.HORIZONTAL */ }) {
         super();
         this.container = container;
-        this.submenuActionViewItems = [];
         this.hasSecondaryActions = false;
         this._onDidChangeDropdownVisibility = this._register(new EventMultiplexer());
         this.originalPrimaryActions = [];
         this.originalSecondaryActions = [];
         this.hiddenActions = [];
-        this.disposables = this._register(new DisposableStore());
+        this.minItemsWidth = 0;
+        this.dropdownMenuDisposables = this._register(new DisposableMap());
         options.hoverDelegate = options.hoverDelegate ?? this._register(createInstantHoverDelegate());
         this.options = options;
         this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem?.show(), options.toggleMenuTitle));
@@ -56,12 +56,12 @@ export class ToolBar extends Disposable {
                         closeAnimation: this.options.dropdownMenuCloseAnimation,
                         anchorAlignmentProvider: this.options.anchorAlignmentProvider,
                         menuAsChild: !!this.options.renderDropdownAsChildElement,
+                        menuAsPopover: !!this.options.renderDropdownAsPopover,
                         skipTelemetry: this.options.skipTelemetry,
                         isMenu: true,
                         hoverDelegate: this.options.hoverDelegate
                     });
-                    this.toggleMenuActionViewItem.setActionContext(this.actionBar.context);
-                    this.disposables.add(this._onDidChangeDropdownVisibility.add(this.toggleMenuActionViewItem.onDidChangeVisibility));
+                    this.dropdownMenuDisposables.set(this.toggleMenuActionViewItem, this._onDidChangeDropdownVisibility.add(this.toggleMenuActionViewItem.onDidChangeVisibility));
                     return this.toggleMenuActionViewItem;
                 }
                 if (options.actionViewItemProvider) {
@@ -80,12 +80,11 @@ export class ToolBar extends Disposable {
                         closeAnimation: this.options.dropdownMenuCloseAnimation,
                         anchorAlignmentProvider: this.options.anchorAlignmentProvider,
                         menuAsChild: !!this.options.renderDropdownAsChildElement,
+                        menuAsPopover: !!this.options.renderDropdownAsPopover,
                         skipTelemetry: this.options.skipTelemetry,
                         hoverDelegate: this.options.hoverDelegate
                     });
-                    result.setActionContext(this.actionBar.context);
-                    this.submenuActionViewItems.push(result);
-                    this.disposables.add(this._onDidChangeDropdownVisibility.add(result.onDidChangeVisibility));
+                    this.dropdownMenuDisposables.set(result, this._onDidChangeDropdownVisibility.add(result.onDidChangeVisibility));
                     return result;
                 }
                 return undefined;
@@ -112,10 +111,6 @@ export class ToolBar extends Disposable {
     }
     set context(context) {
         this.actionBar.context = context;
-        this.toggleMenuActionViewItem?.setActionContext(context);
-        for (const actionViewItem of this.submenuActionViewItems) {
-            actionViewItem.setActionContext(context);
-        }
     }
     getElement() {
         return this.element;
@@ -162,7 +157,7 @@ export class ToolBar extends Disposable {
         this.hasSecondaryActions = !!(secondaryActions && secondaryActions.length > 0);
         if (this.hasSecondaryActions && secondaryActions) {
             this.toggleMenuAction.menuActions = secondaryActions.slice(0);
-            primaryActionsToSet.push(this.toggleMenuAction);
+            primaryActionsToSet.splice(this.getSecondaryActionsPosition(primaryActionsToSet), 0, this.toggleMenuAction);
         }
         if (primaryActionsToSet.length > 0 && this.options.trailingSeparator) {
             primaryActionsToSet.push(new Separator());
@@ -189,13 +184,13 @@ export class ToolBar extends Disposable {
                     overflowWidth = ACTION_MIN_WIDTH + ACTION_PADDING;
                 }
                 const separatorWidth = this.options.trailingSeparator && !this.actionBar.isEmpty() ? this.actionBar.getWidth(this.actionBar.length() - 1) + ACTION_PADDING : 0;
-                this.container.style.minWidth = `${primaryActionsMinWidth + overflowWidth + separatorWidth}px`;
-                this.element.style.minWidth = `${primaryActionsMinWidth + overflowWidth + separatorWidth}px`;
+                this.minItemsWidth = primaryActionsMinWidth + overflowWidth + separatorWidth;
+                this.reserveMinWidth(this.minItemsWidth);
             }
             else {
                 const minimumActionWidth = this.originalPrimaryActions.length > 0 ? this.getActionMinWidth(this.originalPrimaryActions[0]) : ACTION_MIN_WIDTH + ACTION_PADDING;
-                this.container.style.minWidth = `${minimumActionWidth}px`;
-                this.element.style.minWidth = `${minimumActionWidth}px`;
+                this.minItemsWidth = 0;
+                this.reserveMinWidth(minimumActionWidth);
             }
             // Update toolbar actions to fit with container width
             this.updateActions(this.getAvailableWidth());
@@ -204,6 +199,29 @@ export class ToolBar extends Disposable {
     get overflowFromStart() {
         return this.options.responsiveBehavior?.kind === 'all' && this.options.responsiveBehavior.overflowFrom === 'start';
     }
+    getSecondaryActionsPosition(primaryActions = this.originalPrimaryActions) {
+        const requestedPosition = this.options.getSecondaryActionsPosition?.(primaryActions) ?? primaryActions.length;
+        return Number.isFinite(requestedPosition)
+            ? Math.max(0, Math.min(primaryActions.length, Math.trunc(requestedPosition)))
+            : primaryActions.length;
+    }
+    getRenderedPrimaryActionCountBefore(position) {
+        const renderedActions = new Set(this.actionBar.viewItems.map(item => item.action));
+        return this.originalPrimaryActions
+            .slice(0, position)
+            .reduce((count, action) => count + (renderedActions.has(action) ? 1 : 0), 0);
+    }
+    getToggleMenuActionInsertionIndex() {
+        return this.getRenderedPrimaryActionCountBefore(this.getSecondaryActionsPosition());
+    }
+    getPrimaryActionInsertionIndex(action) {
+        const actionPosition = this.originalPrimaryActions.indexOf(action);
+        if (actionPosition === -1) {
+            return this.actionBar.length();
+        }
+        const toggleOffset = this.actionBar.hasAction(this.toggleMenuAction) && this.getSecondaryActionsPosition() <= actionPosition ? 1 : 0;
+        return this.getRenderedPrimaryActionCountBefore(actionPosition) + toggleOffset;
+    }
     getKeybindingLabel(action) {
         const key = this.options.getKeyBinding?.(action);
         return key?.getLabel() ?? undefined;
@@ -225,13 +243,33 @@ export class ToolBar extends Disposable {
         }
         return this.element.getBoundingClientRect().width;
     }
+    reserveMinWidth(width) {
+        if (this.options.responsiveBehavior?.reserveMinWidth === false) {
+            return;
+        }
+        this.container.style.minWidth = `${width}px`;
+        this.element.style.minWidth = `${width}px`;
+    }
     applyResponsiveActionMinWidths() {
         if (!this.options.responsiveBehavior?.enabled) {
             return;
         }
+        const actionsContainer = this.actionBar.getContainer().firstElementChild;
+        if (!DOM.isHTMLElement(actionsContainer)) {
+            return;
+        }
         if (this.options.responsiveBehavior.kind === 'last') {
-            const hasToggleMenuAction = this.actionBar.hasAction(this.toggleMenuAction);
-            const shrinkableIndex = hasToggleMenuAction ? this.actionBar.length() - 2 : this.actionBar.length() - 1;
+            let shrinkableIndex = -1;
+            for (let index = this.actionBar.length() - 1; index >= 0; index--) {
+                const action = this.actionBar.getAction(index);
+                if (action && !(action instanceof Separator) && this.originalPrimaryActions.includes(action)) {
+                    shrinkableIndex = index;
+                    break;
+                }
+            }
+            for (let index = 0; index < actionsContainer.children.length; index++) {
+                actionsContainer.children.item(index)?.classList.toggle('toolbar-shrinkable-item', index === shrinkableIndex);
+            }
             const shrinkableAction = shrinkableIndex >= 0 ? this.actionBar.getAction(shrinkableIndex) : undefined;
             const minWidth = `${this.getConfiguredActionMinWidth(shrinkableAction)}px`;
             if (this.element.style.getPropertyValue(ACTION_MIN_WIDTH_VAR) !== minWidth) {
@@ -239,10 +277,6 @@ export class ToolBar extends Disposable {
             }
             return;
         }
-        const actionsContainer = this.actionBar.getContainer().firstElementChild;
-        if (!DOM.isHTMLElement(actionsContainer)) {
-            return;
-        }
         for (let i = 0; i < actionsContainer.children.length; i++) {
             const actionItem = actionsContainer.children.item(i);
             if (!DOM.isHTMLElement(actionItem)) {
@@ -268,6 +302,11 @@ export class ToolBar extends Disposable {
         // element which is set based on the `responsiveBehavior.minItems` option
         const parsedMinWidth = parseInt(this.element.style.minWidth);
         containerWidth = Math.max(containerWidth, Number.isNaN(parsedMinWidth) ? 0 : parsedMinWidth);
+        // Without a reserved minimum width the toolbar can be narrower than the
+        // width of its minimum items, in which case they overflow too.
+        const minItems = this.options.responsiveBehavior?.reserveMinWidth !== false || containerWidth >= this.minItemsWidth
+            ? this.options.responsiveBehavior?.minItems
+            : undefined;
         // Each action is assumed to have a minimum width so that actions with a label
         // can shrink to the action's minimum width. We do this so that action visibility
         // takes precedence over the action label.
@@ -396,16 +435,16 @@ export class ToolBar extends Disposable {
                 return;
             }
             // Check for max items limit
-            if (this.options.responsiveBehavior?.minItems !== undefined) {
+            if (minItems !== undefined) {
                 const primaryActionsCount = getVisiblePrimaryActionCount();
-                if (primaryActionsCount <= this.options.responsiveBehavior.minItems) {
+                if (primaryActionsCount <= minItems) {
                     return;
                 }
             }
             // Hide actions from the configured end.
             while (minimumWidth > containerWidth && this.actionBar.length() > 0) {
-                if (this.options.responsiveBehavior?.minItems !== undefined
-                    && getVisiblePrimaryActionCount() <= this.options.responsiveBehavior.minItems) {
+                if (minItems !== undefined
+                    && getVisiblePrimaryActionCount() <= minItems) {
                     break;
                 }
                 const actionsToHide = getActionsToHide();
@@ -416,7 +455,7 @@ export class ToolBar extends Disposable {
                     this.hiddenActions.push(action);
                     const index = this.actionBar.viewItems.findIndex(item => item.action === action);
                     if (index !== -1) {
-                        this.actionBar.pull(index);
+                        this.pullAction(index);
                     }
                 }
                 this.hiddenActions.sort((a, b) => this.originalPrimaryActions.indexOf(a) - this.originalPrimaryActions.indexOf(b));
@@ -428,7 +467,7 @@ export class ToolBar extends Disposable {
                         icon: this.options.icon ?? true,
                         label: this.options.label ?? false,
                         keybinding: this.getKeybindingLabel(this.toggleMenuAction),
-                        index: this.options.trailingSeparator ? this.actionBar.length() - 1 : undefined,
+                        index: this.getToggleMenuActionInsertionIndex(),
                     });
                     this.updateOverflowClassName();
                 }
@@ -441,27 +480,25 @@ export class ToolBar extends Disposable {
             while (this.hiddenActions.length > 0) {
                 const actionsToRestore = getActionsToRestore();
                 const keepToggleMenuAction = this.originalSecondaryActions.length > 0 || this.hiddenActions.length > actionsToRestore.length;
-                if (projectedActionBarMinimumWidth(actionsToRestore, keepToggleMenuAction) > containerWidth) {
+                const isBelowMinItems = this.options.responsiveBehavior?.reserveMinWidth === false && minItems !== undefined && getVisiblePrimaryActionCount() < minItems;
+                if (!isBelowMinItems && projectedActionBarMinimumWidth(actionsToRestore, keepToggleMenuAction) > containerWidth) {
                     // Not enough space to show the action
                     break;
                 }
                 for (const action of actionsToRestore) {
                     this.hiddenActions.splice(this.hiddenActions.indexOf(action), 1);
-                    const visibleActions = new Set(this.actionBar.viewItems.map(item => item.action));
                     this.actionBar.push(action, {
                         icon: this.options.icon ?? true,
                         label: this.options.label ?? false,
                         keybinding: this.getKeybindingLabel(action),
-                        index: this.originalPrimaryActions
-                            .slice(0, this.originalPrimaryActions.indexOf(action))
-                            .reduce((index, precedingAction) => index + (visibleActions.has(precedingAction) ? 1 : 0), 0)
+                        index: this.getPrimaryActionInsertionIndex(action),
                     });
                 }
                 // There are no secondary actions, and there is only one hidden item left so we
                 // remove the overflow menu making space for the last hidden action to be shown.
                 if (this.originalSecondaryActions.length === 0 && this.hiddenActions.length === 0) {
                     this.toggleMenuAction.menuActions = [];
-                    this.actionBar.pull(this.actionBar.viewItems.findIndex(item => item.action === this.toggleMenuAction));
+                    this.pullAction(this.actionBar.viewItems.findIndex(item => item.action === this.toggleMenuAction));
                     this.updateOverflowClassName();
                 }
                 this.applyResponsiveActionMinWidths();
@@ -508,14 +545,24 @@ export class ToolBar extends Disposable {
     updateOverflowClassName() {
         this.actionBar.domNode.classList.toggle('has-overflow', this.actionBar.hasAction(this.toggleMenuAction));
     }
+    pullAction(index) {
+        const viewItem = this.actionBar.viewItems[index];
+        if (viewItem) {
+            this.dropdownMenuDisposables.deleteAndDispose(viewItem);
+            if (this.toggleMenuActionViewItem === viewItem) {
+                this.toggleMenuActionViewItem = undefined;
+            }
+        }
+        this.actionBar.pull(index);
+    }
     clear() {
-        this.submenuActionViewItems = [];
-        this.disposables.clear();
+        this.toggleMenuActionViewItem = undefined;
+        this.toggleMenuAction.menuActions = [];
+        this.dropdownMenuDisposables.clearAndDisposeAll();
         this.actionBar.clear();
     }
     dispose() {
         this.clear();
-        this.disposables.dispose();
         this.element.remove();
         super.dispose();
     }