@progress/kendo-angular-toolbar 18.1.0-develop.30 → 18.1.0-develop.4

package/fesm2022/progress-kendo-angular-toolbar.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ElementRef, Directive, ViewChild, Input, Output, forwardRef, Component, HostBinding, HostListener, ViewContainerRef, ContentChildren, isDevMode, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, inject, ElementRef, Directive, ViewChild, Input, Output, forwardRef, ViewContainerRef, Component, ContentChildren, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { Keys, isDocumentAvailable, guid, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
@@ -12,7 +12,7 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738961998,
-    version: '18.1.0-develop.30',
+    publishDate: 1738318239,
+    version: '18.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -263,23 +263,6 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  * nodeType 1 is Element, nodeType 3 is Text
  */
 const isElementOrTextNode = n => n.nodeType === 1 || n.nodeType === 3;
-/**
- * @hidden
- */
-const normalizeOverflowSettings = (overflow) => {
-    const defaultOverflowSettings = { mode: 'none', scrollButtons: 'auto', scrollButtonsPosition: 'split' };
-    let normalizedSettings = {};
-    if (typeof overflow === 'object') {
-        normalizedSettings = Object.assign(defaultOverflowSettings, overflow);
-    }
-    else if (typeof overflow === 'boolean') {
-        normalizedSettings = overflow ? Object.assign(defaultOverflowSettings, { mode: 'menu' }) : defaultOverflowSettings;
-    }
-    else {
-        normalizedSettings = Object.assign(defaultOverflowSettings, { mode: overflow });
-    }
-    return normalizedSettings;
-};
 
 /**
  * @hidden
@@ -416,11 +399,9 @@ class NavigationService {
         }
     }
     focusOverflowButton() {
-        if (this.overflowButton) {
-            this.isOverflowButtonFocused = true;
-            this.overflowButton.nativeElement.tabIndex = 0;
-            this.overflowButton.nativeElement.focus();
-        }
+        this.isOverflowButtonFocused = true;
+        this.overflowButton.nativeElement.tabIndex = 0;
+        this.overflowButton.nativeElement.focus();
     }
     isOverflowButtonVisible() {
         return (isPresent(this.overflowButton) &&
@@ -439,17 +420,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ToolBarToolComponent {
     toolbarTemplate;
-    sectionTemplate;
     popupTemplate;
     tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
     overflows = true;
     visibility;
     element;
     isBuiltInTool = false;
-    /**
-     * @hidden
-     */
-    location;
     constructor() {
         this.element = inject(ElementRef);
     }
@@ -491,7 +467,7 @@ class ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, decorators: [{
             type: Directive,
@@ -501,9 +477,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
                 type: ViewChild,
                 args: ['toolbarTemplate', { static: true }]
-            }], sectionTemplate: [{
-                type: ViewChild,
-                args: ['sectionTemplate', { static: true }]
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
@@ -588,9 +561,6 @@ class ToolbarToolsService {
     renderedTools = [];
     overflowTools = [];
     allTools = [];
-    reset() {
-        this.renderedTools = this.overflowTools = this.allTools = [];
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService });
 }
@@ -631,7 +601,6 @@ class ToolBarRendererComponent {
         if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
             return;
         }
-        this.tool.location = this.location;
         this.internalComponentRef = viewContainerRootNodes[0];
         this.element = this.tool.element;
         this.internalComponentRef.addEventListener('click', this.onClick);
@@ -648,11 +617,6 @@ class ToolBarRendererComponent {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
                 this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
             }
-            else if (this.location === 'section') {
-                this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
-            }
             else {
                 this.template = this.tool.popupTemplate;
                 this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
@@ -688,7 +652,6 @@ class ToolBarRendererComponent {
         return this.internalComponentRef?.style?.display !== 'none';
     }
     refresh() {
-        this.tool.location = this.location;
         if (this.resizable && this.internalComponentRef) {
             if (this.location === 'toolbar') {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
@@ -707,7 +670,6 @@ class ToolBarRendererComponent {
         this.rendererClick.emit({ context: this, event: ev });
     };
     updateTools() {
-        this.tool.location = this.location;
         const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
         const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
         if (this.location === 'toolbar') {
@@ -749,19 +711,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ToolbarMessages extends ComponentMessages {
     /**
-     * The title of the **More Tools** button in a responsive ToolBar
+     * The title of the **more tools** button in a responsive ToolBar
      */
     moreToolsTitle;
-    /**
-     * The title for the **Previous Tool** button when the Toolbar is scrollable.
-     */
-    previousToolButton;
-    /**
-     * The title for the **Next Tool** button when the Toolbar is scrollable.
-     */
-    nextToolButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle", previousToolButton: "previousToolButton", nextToolButton: "nextToolButton" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
@@ -771,10 +725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { moreToolsTitle: [{
                 type: Input
-            }], previousToolButton: [{
-                type: Input
-            }], nextToolButton: [{
-                type: Input
             }] } });
 
 /**
@@ -808,251 +758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
-const DEFAULT_SCROLL_SPEED = 100;
-/**
- * @hidden
- */
-class ScrollService {
-    ngZone;
-    localization;
-    owner;
-    position = 0;
-    scrollButtonActiveStateChange = new Subject();
-    get scrollElement() {
-        return this.owner.scrollContainer?.nativeElement;
-    }
-    get scrollContainerOverflowSize() {
-        if (!isDocumentAvailable()) {
-            return 0;
-        }
-        if (!this.scrollElement) {
-            return 0;
-        }
-        const overflowSize = Math.floor(this.scrollElement.scrollWidth - this.scrollElement.getBoundingClientRect().width);
-        return overflowSize < 0 ? 0 : overflowSize;
-    }
-    get toolsOverflow() {
-        return this.scrollContainerOverflowSize > 0;
-    }
-    constructor(ngZone, localization) {
-        this.ngZone = ngZone;
-        this.localization = localization;
-    }
-    toggleScrollButtonsState() {
-        const toolbar = this.owner;
-        if (!toolbar.hasScrollButtons) {
-            return;
-        }
-        const currentPrevButtonActive = !this.isDisabled('prev');
-        const currentNextButtonActive = !this.isDisabled('next');
-        const defaultOffset = 1;
-        const rtlDelta = this.localization.rtl ? -1 : 1;
-        const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.scrollContainerOverflowSize > 0;
-        const calculatedNextButtonActive = (this.position * rtlDelta) < this.scrollContainerOverflowSize - defaultOffset && this.scrollContainerOverflowSize > 0;
-        if (calculatedPrevButtonActive !== currentPrevButtonActive) {
-            this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
-        }
-        if (calculatedNextButtonActive !== currentNextButtonActive) {
-            this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
-        }
-    }
-    onScroll(e) {
-        this.position = e.target.scrollLeft;
-        this.toggleScrollButtonsState();
-    }
-    scrollTools(direction) {
-        this.calculateListPosition(direction, DEFAULT_SCROLL_SPEED);
-        if (this.scrollElement) {
-            this.scrollElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
-        }
-        this.toggleScrollButtonsState();
-    }
-    calculateListPosition(direction, scrollSpeed) {
-        if (direction === 'prev') {
-            if (!this.localization.rtl) {
-                this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
-            }
-            else {
-                this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
-            }
-        }
-        else if (direction === 'next' && this.position < this.scrollContainerOverflowSize) {
-            if (this.position + scrollSpeed > this.scrollContainerOverflowSize) {
-                this.position = this.scrollContainerOverflowSize;
-                return;
-            }
-            if (this.localization.rtl) {
-                this.position -= scrollSpeed;
-            }
-            else {
-                this.position += scrollSpeed;
-            }
-        }
-    }
-    toggleButtonActiveState(buttonType, active) {
-        this.scrollButtonActiveStateChange.next({ buttonType, active });
-    }
-    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.nativeElement.classList.contains('k-disabled');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; } });
-
-const DIRECTION_CLASSES = {
-    left: 'caret-alt-left',
-    right: 'caret-alt-right'
-};
-/**
- * @hidden
- */
-class ToolbarScrollableButtonComponent {
-    host;
-    renderer;
-    ngZone;
-    localization;
-    get prevClass() {
-        return this.prev;
-    }
-    get nextClass() {
-        return !this.prev;
-    }
-    /**
-     * @hidden
-     */
-    onMouseDown(ev) {
-        ev.preventDefault();
-        ev.stopImmediatePropagation();
-    }
-    role = 'button';
-    prev = false;
-    overflow;
-    onClick = new EventEmitter();
-    get iconClass() {
-        return this.scrollButtonIconClass;
-    }
-    get customIconClass() {
-        return this.customScrollButtonIconClass;
-    }
-    get svgIcon() {
-        return this.scrollButtonSVGIcon;
-    }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
-    subs = new Subscription();
-    constructor(host, renderer, ngZone, localization) {
-        this.host = host;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localization = localization;
-    }
-    ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
-        });
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    clickHandler = () => {
-        const buttonType = this.prev ? 'prev' : 'next';
-        this.onClick.emit(buttonType);
-    };
-    get scrollButtonIconClass() {
-        const defaultPrevIcon = !this.localization.rtl ?
-            DIRECTION_CLASSES.left :
-            DIRECTION_CLASSES.right;
-        const defaultNextIcon = !this.localization.rtl ?
-            DIRECTION_CLASSES.right :
-            DIRECTION_CLASSES.left;
-        if (typeof this.overflow === 'object') {
-            const prevIcon = typeof this.overflow.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
-            const nextIcon = typeof this.overflow.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
-            if (prevIcon && this.prev) {
-                return prevIcon;
-            }
-            else if (nextIcon && !this.prev) {
-                return nextIcon;
-            }
-        }
-    }
-    get customScrollButtonIconClass() {
-        if (typeof this.overflow === 'object') {
-            const prevIcon = this.overflow.prevButtonIcon;
-            const nextIcon = this.overflow.nextButtonIcon;
-            if (prevIcon && this.prev) {
-                return `k-icon ${prevIcon}`;
-            }
-            if (nextIcon && !this.prev) {
-                return `k-icon ${nextIcon}`;
-            }
-        }
-    }
-    get scrollButtonSVGIcon() {
-        const defaultPrevSVGIcon = !this.localization.rtl ?
-            this.caretAltLeftIcon :
-            this.caretAltRightIcon;
-        const defaultNextSVGIcon = !this.localization.rtl ?
-            this.caretAltRightIcon :
-            this.caretAltLeftIcon;
-        if (typeof this.overflow === 'object') {
-            const prevIcon = this.overflow.prevSVGButtonIcon !== undefined ? this.overflow.prevSVGButtonIcon : defaultPrevSVGIcon;
-            const nextIcon = this.overflow.nextSVGButtonIcon !== undefined ? this.overflow.nextSVGButtonIcon : defaultNextSVGIcon;
-            if (prevIcon || nextIcon) {
-                return this.prev ? prevIcon : nextIcon;
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarScrollableButtonComponent, isStandalone: true, selector: "[kendoToolbarScrollableButton]", inputs: { prev: "prev", overflow: "overflow" }, outputs: { onClick: "onClick" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "class.k-toolbar-prev": "this.prevClass", "class.k-toolbar-next": "this.nextClass", "attr.role": "this.role" } }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon"
-            innerCssClass="k-button-icon"
-        >
-        </kendo-icon-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarScrollableButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon"
-            innerCssClass="k-button-icon"
-        >
-        </kendo-icon-wrapper>
-    `,
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoToolbarScrollableButton]',
-                    standalone: true,
-                    imports: [IconWrapperComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-prev']
-            }], nextClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-next']
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], prev: [{
-                type: Input
-            }], overflow: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
 /* eslint-disable no-case-declarations */
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
@@ -1075,27 +780,13 @@ class ToolBarComponent {
     renderer;
     _cdr;
     toolsService;
-    scrollService;
     get overflowClass() {
         return `k-button-${SIZES[this.size]}`;
     }
     /**
-     * Configures the overflow mode. Used to specify how tools will be rendered when the total size of all tools is greater than the size of the Toolbar container.
-     * @default false
+     * Hides the overflowing tools in a popup.
      */
-    set overflow(overflow) {
-        this._overflow = overflow;
-        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
-    }
-    get overflow() {
-        return this._overflow;
-    }
-    get show() {
-        const buttonsVisibility = this.normalizedOverflow.scrollButtons;
-        const showAuto = buttonsVisibility === 'auto' && this.showAutoButtons;
-        const showAlways = buttonsVisibility === 'visible';
-        return this.isScrollMode && (showAuto || showAlways);
-    }
+    overflow = false;
     /**
      * @hidden
      */
@@ -1103,39 +794,10 @@ class ToolBarComponent {
         this.overflow = value;
     }
     get resizable() {
-        return this.showMenu;
+        return this.overflow;
     }
     /**
-     * @hidden
-     */
-    get hasScrollButtons() {
-        const visible = this.normalizedOverflow.mode === 'scroll' && this.normalizedOverflow.scrollButtons !== 'hidden';
-        const position = this.normalizedOverflow.scrollButtonsPosition;
-        return {
-            visible,
-            position
-        };
-    }
-    /**
-     * @hidden
-     */
-    get isScrollMode() {
-        return this.normalizedOverflow.mode === 'scroll';
-    }
-    /**
-     * @hidden
-     */
-    get showMenu() {
-        return this.normalizedOverflow.mode === 'menu' || this.normalizedOverflow.mode === 'section';
-    }
-    /**
-     * @hidden
-     */
-    get overflowEnabled() {
-        return this.normalizedOverflow.mode !== 'none';
-    }
-    /**
-     * Configures the popup of the ToolBar overflow button ([see example](slug:responsive_toolbar#customizing-the-popup)).
+     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
      *
      * The available options are:
      * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
@@ -1202,15 +864,8 @@ class ToolBarComponent {
     allTools;
     overflowButton;
     popupTemplate;
-    popupSectionTemplate;
-    scrollContainer;
     resizeSensor;
     container;
-    prevScrollButton;
-    nextScrollButton;
-    startButtonGroup;
-    endButtonGroup;
-    scrollSeparator;
     popupRef;
     direction;
     get appendTo() {
@@ -1239,40 +894,17 @@ class ToolBarComponent {
     get popupOpen() {
         return this._open;
     }
-    /**
-     * @hidden
-     */
-    prevButtonIcon = caretAltLeftIcon;
-    /**
-     * @hidden
-     */
-    nextButtonIcon = caretAltRightIcon;
     hostClass = true;
-    get scrollableClass() {
-        return this.isScrollMode;
-    }
-    get sectionClass() {
-        return this.normalizedOverflow.mode === 'section';
-    }
-    _overflow = false;
     _popupSettings;
     cachedOverflowAnchorWidth;
     _open;
     toolbarKeydownListener;
     overflowKeydownListener;
-    sectionKeydownListener;
     cancelRenderedToolsSubscription$ = new Subject();
     cachedGap;
     _size = DEFAULT_SIZE;
     _fillMode = DEFAULT_FILL_MODE;
     overflowButtonClickedTime = null;
-    showAutoButtons = false;
-    /**
-     * @hidden
-     */
-    get normalizedOverflow() {
-        return normalizeOverflowSettings(this.overflow);
-    }
     subscriptions = new Subscription();
     popupSubs = new Subscription();
     /**
@@ -1300,11 +932,12 @@ class ToolBarComponent {
         return this.direction;
     }
     get resizableClass() {
-        return this.resizable;
+        return this.overflow;
     }
+    moreVerticalIcon = moreVerticalIcon;
     constructor(localization, popupService, refreshService, navigationService, 
     // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr, toolsService, scrollService) {
+    element, zone, renderer, _cdr, toolsService) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -1314,19 +947,13 @@ class ToolBarComponent {
         this.renderer = renderer;
         this._cdr = _cdr;
         this.toolsService = toolsService;
-        this.scrollService = scrollService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.scrollService.owner = this;
     }
     ngAfterContentInit() {
         this.toolsService.allTools = this.allTools.toArray();
         this.subscriptions.add(this.allTools.changes.subscribe(() => {
-            this.toolsService.reset();
             this.toolsService.allTools = this.allTools.toArray();
-            this.allTools.forEach((tool) => {
-                this.refreshService.refresh(tool);
-            });
             this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
         }));
     }
@@ -1383,11 +1010,9 @@ class ToolBarComponent {
                 }
             });
         });
-        if (this.overflowEnabled) {
+        if (this.overflow) {
             this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
-            if (this.showMenu) {
-                this.navigationService.overflowButton = this.overflowButton;
-            }
+            this.navigationService.overflowButton = this.overflowButton;
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // button icons are not rendered until onResize() is called
             this.zone.runOutsideAngular(() => {
@@ -1398,38 +1023,6 @@ class ToolBarComponent {
                 });
             });
         }
-        if (this.isScrollMode) {
-            if (this.show) {
-                if (this.normalizedOverflow.scrollButtons === 'visible' && !this.scrollService.toolsOverflow) {
-                    this.renderer.addClass(this.nextScrollButton.nativeElement, 'k-disabled');
-                    this.renderer.addClass(this.prevScrollButton.nativeElement, 'k-disabled');
-                }
-                else {
-                    const buttonToDisable = this.direction === 'rtl' ? this.nextScrollButton : this.prevScrollButton;
-                    this.renderer.addClass(buttonToDisable.nativeElement, 'k-disabled');
-                }
-            }
-            if (this.hasScrollButtons.visible) {
-                this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-                    if (this.show) {
-                        const action = activeButtonSettings.active ? 'remove' : 'add';
-                        const scrollButton = this[`${activeButtonSettings.buttonType}ScrollButton`].nativeElement;
-                        this.renderer[`${action}Class`](scrollButton, 'k-disabled');
-                        action === 'add' && this[`${activeButtonSettings.buttonType}ScrollButton`].nativeElement.blur();
-                    }
-                }));
-            }
-            this.zone.runOutsideAngular(() => {
-                this.subscriptions.add(this.renderer.listen(this.scrollContainer.nativeElement, 'scroll', (e) => {
-                    if (!this.hasScrollButtons.visible) {
-                        this.setScrollableOverlayClasses();
-                    }
-                    else {
-                        this.scrollService.onScroll(e);
-                    }
-                }));
-            });
-        }
         this.navigationService.setRenderedTools(this.toolsService.renderedTools);
         const stylingOptions = ['size', 'fillMode'];
         stylingOptions.forEach(option => {
@@ -1463,10 +1056,6 @@ class ToolBarComponent {
         this.cancelRenderedToolsSubscription$.next();
         this.subscriptions.unsubscribe();
     }
-    /**
-     * @hidden
-     */
-    showOverflowSeparator = false;
     /**
      * @hidden
      */
@@ -1479,31 +1068,6 @@ class ToolBarComponent {
     get cdr() {
         return this._cdr;
     }
-    /**
-     * @hidden
-     */
-    get sectionSizeClass() {
-        return this.size === 'none' ? '' : `k-toolbar-items-list-${SIZES[this.size]}`;
-    }
-    /**
-     * @hidden
-     */
-    getScrollButtonTitle(buttonType) {
-        let currentButton;
-        if (this.localization.rtl) {
-            currentButton = buttonType === 'prev' ? 'nextToolButton' : 'previousToolButton';
-        }
-        else {
-            currentButton = buttonType === 'prev' ? 'previousToolButton' : 'nextToolButton';
-        }
-        return this.localization.get(currentButton);
-    }
-    /**
-     * @hidden
-     */
-    scrollTools(dir) {
-        this.scrollService.scrollTools(dir);
-    }
     /**
      * @hidden
      */
@@ -1511,17 +1075,6 @@ class ToolBarComponent {
         this.navigationService.click(data);
         this.element.nativeElement.setAttribute('tabindex', '-1');
     }
-    /**
-     * @hidden
-     */
-    overflowButtonIcon(iconType) {
-        if (iconType === 'svg') {
-            return this.normalizedOverflow.mode === 'section' ? moreHorizontalIcon : moreVerticalIcon;
-        }
-        else {
-            return this.normalizedOverflow.mode === 'section' ? 'more-horizontal' : 'more-vertical';
-        }
-    }
     /**
      * @hidden
      */
@@ -1540,30 +1093,17 @@ class ToolBarComponent {
             this.popupRef = null;
         }
         if (this.popupOpen) {
-            let settings;
-            const isSection = this.normalizedOverflow.mode === 'section';
-            if (isSection) {
-                settings = {
-                    anchor: this.element.nativeElement,
-                    content: this.popupSectionTemplate,
-                    popupClass: this.normalizePopupClasses(),
-                    positionMode: 'absolute'
-                };
-            }
-            else {
-                settings = {
-                    anchor: this.overflowButton,
-                    anchorAlign: this.popupSettings.anchorAlign,
-                    popupAlign: this.popupSettings.popupAlign,
-                    content: this.popupTemplate,
-                    appendTo: this.appendTo,
-                    animate: this.popupSettings.animate,
-                    popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
-                    positionMode: 'absolute'
-                };
-            }
-            this.popupRef = this.popupService.open(settings);
-            this.setPopupContentDimensions(isSection);
+            this.popupRef = this.popupService.open({
+                anchor: this.overflowButton,
+                anchorAlign: this.popupSettings.anchorAlign,
+                popupAlign: this.popupSettings.popupAlign,
+                content: this.popupTemplate,
+                appendTo: this.appendTo,
+                animate: this.popupSettings.animate,
+                popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
+                positionMode: 'absolute'
+            });
+            this.setPopupContentDimensions();
             this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
             this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
@@ -1573,51 +1113,15 @@ class ToolBarComponent {
      */
     onResize() {
         if (isDocumentAvailable()) {
-            if (this.showMenu) {
-                const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
-                this.shrink(containerWidth, this.childrenWidth);
-                this.stretch(containerWidth, this.childrenWidth);
-                this.displayAnchor();
-                const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
-                if (this.popupOpen && !isImmediateResize) {
-                    this.toggle();
-                }
-            }
-            else if (this.isScrollMode) {
-                if (this.normalizedOverflow.scrollButtons === 'auto') {
-                    const containerWidth = innerWidth(this.element.nativeElement);
-                    let scrollButtonsWidth = 0;
-                    if (this.showAutoButtons) {
-                        const separatorWidth = this.scrollSeparator.nativeElement.getBoundingClientRect().width + 2 * this.gap;
-                        if (this.hasScrollButtons.position === 'split') {
-                            scrollButtonsWidth = innerWidth(this.prevScrollButton.nativeElement) + innerWidth(this.nextScrollButton.nativeElement) + 2 * separatorWidth;
-                        }
-                        else if (this.hasScrollButtons.position === 'end') {
-                            scrollButtonsWidth = innerWidth(this.endButtonGroup.nativeElement) + separatorWidth;
-                        }
-                        else {
-                            scrollButtonsWidth = innerWidth(this.startButtonGroup.nativeElement) + separatorWidth;
-                        }
-                    }
-                    const shouldShowButtons = (this.childrenWidth + scrollButtonsWidth) > containerWidth;
-                    if (shouldShowButtons !== this.showAutoButtons) {
-                        this.showAutoButtons = shouldShowButtons;
-                        this.cdr.detectChanges();
-                    }
-                    this.scrollService.toggleScrollButtonsState();
-                }
-                else if (!this.hasScrollButtons.visible) {
-                    this.setScrollableOverlayClasses();
-                }
-                else if (!this.scrollService.toolsOverflow) {
-                    this.renderer.addClass(this.nextScrollButton.nativeElement, 'k-disabled');
-                    this.renderer.addClass(this.prevScrollButton.nativeElement, 'k-disabled');
-                }
-                else {
-                    this.scrollService.toggleScrollButtonsState();
-                }
-            }
+            const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
+            this.shrink(containerWidth, this.childrenWidth);
+            this.stretch(containerWidth, this.childrenWidth);
+            this.displayAnchor();
             this.resizeSensor?.acceptSize();
+            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+            if (this.popupOpen && !isImmediateResize) {
+                this.toggle();
+            }
         }
     }
     /**
@@ -1625,94 +1129,45 @@ class ToolBarComponent {
      */
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
-            if (this.normalizedOverflow.mode === 'section') {
-                this.sectionKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                    switch (ev.keyCode) {
-                        case Keys.ArrowLeft:
-                            this.zone.run(() => {
-                                ev.preventDefault();
-                                if (this.direction === 'ltr') {
-                                    this.navigationService.focusPrev(ev);
-                                }
-                                else {
-                                    this.navigationService.focusNext(ev);
-                                }
-                                // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-                                this.element.nativeElement.setAttribute('tabindex', '-1');
-                            });
-                            break;
-                        case Keys.ArrowRight:
-                            this.zone.run(() => {
-                                ev.preventDefault();
-                                if (this.direction === 'ltr') {
-                                    this.navigationService.focusNext(ev);
-                                }
-                                else {
-                                    this.navigationService.focusPrev(ev);
-                                }
-                                // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-                                this.element.nativeElement.setAttribute('tabindex', '-1');
-                            });
-                            break;
-                        case Keys.Escape: {
-                            this.zone.run(() => this.toggle(false));
-                            const eventArgs = new PreventableEvent();
-                            this.close.emit(eventArgs);
-                            break;
-                        }
-                        case Keys.Tab:
-                            this.zone.run(() => {
-                                this.toggle(false);
-                                this.navigationService.resetNavigation();
-                            });
-                            break;
-                        default:
-                            break;
-                    }
-                });
-            }
-            else {
-                this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                    switch (ev.keyCode) {
-                        case Keys.ArrowUp:
-                            this.zone.run(() => {
-                                ev.preventDefault();
-                                this.navigationService.focusPrev(ev);
-                            });
-                            break;
-                        case Keys.ArrowDown:
-                            this.zone.run(() => {
+            this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
+                switch (ev.keyCode) {
+                    case Keys.ArrowUp:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            this.navigationService.focusPrev(ev);
+                        });
+                        break;
+                    case Keys.ArrowDown:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            this.navigationService.focusNext(ev);
+                        });
+                        break;
+                    case Keys.Escape:
+                        this.zone.run(() => this.toggle(false));
+                        const eventArgs = new PreventableEvent();
+                        this.close.emit(eventArgs);
+                        break;
+                    case Keys.Tab:
+                        this.zone.run(() => {
+                            this.toggle(false);
+                            this.navigationService.resetNavigation();
+                        });
+                        break;
+                    case Keys.Enter:
+                    case Keys.Space:
+                        this.zone.run(() => {
+                            if (ev.target.closest('.k-menu-item')) {
                                 ev.preventDefault();
-                                this.navigationService.focusNext(ev);
-                            });
-                            break;
-                        case Keys.Escape: {
-                            this.zone.run(() => this.toggle(false));
-                            const eventArgs = new PreventableEvent();
-                            this.close.emit(eventArgs);
-                            break;
-                        }
-                        case Keys.Tab:
-                            this.zone.run(() => {
-                                this.toggle(false);
-                                this.navigationService.resetNavigation();
-                            });
-                            break;
-                        case Keys.Enter:
-                        case Keys.Space:
-                            this.zone.run(() => {
-                                if (ev.target.closest('.k-menu-item')) {
-                                    ev.preventDefault();
-                                    ev.target.click();
-                                    ev.target.focus();
-                                }
-                            });
-                            break;
-                        default:
-                            break;
-                    }
-                });
-            }
+                                ev.target.click();
+                                ev.target.focus();
+                            }
+                        });
+                        break;
+                    default:
+                        break;
+                }
+            });
         });
         this.cancelRenderedToolsSubscription$.next();
         this.navigationService.setRenderedTools(this.toolsService.overflowTools);
@@ -1735,9 +1190,6 @@ class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
-        if (this.sectionKeydownListener) {
-            this.sectionKeydownListener();
-        }
         this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     /**
@@ -1751,11 +1203,6 @@ class ToolBarComponent {
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
         this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
-        const isVisible = visibility === 'visible';
-        if (isVisible !== this.showOverflowSeparator) {
-            this.showOverflowSeparator = isVisible;
-            this.cdr.detectChanges();
-        }
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
@@ -1770,7 +1217,7 @@ class ToolBarComponent {
         return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
     }
     get overflowAnchorWidth() {
-        if (!this.showMenu) {
+        if (!this.overflow) {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
@@ -1837,7 +1284,7 @@ class ToolBarComponent {
             return r.tool === tool;
         });
         const width = renderedElement.width;
-        tool.overflows = this.showMenu;
+        tool.overflows = this.overflow;
         this.refreshService.refresh(tool);
         return width;
     }
@@ -1859,17 +1306,11 @@ class ToolBarComponent {
         this.refreshService.refresh(tool);
         return renderedElement.width; // returns 0 if `overflows` is true
     }
-    setPopupContentDimensions(isSection) {
+    setPopupContentDimensions() {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        if (isSection) {
-            const toolbarWidth = this.element.nativeElement.getBoundingClientRect().width;
-            popupContentContainer.style.width = `${toolbarWidth}px`;
-        }
-        else {
-            popupContentContainer.style.width = this.popupWidth;
-            popupContentContainer.style.height = this.popupHeight;
-            popupContentContainer.style.overflow = 'auto';
-        }
+        popupContentContainer.style.width = this.popupWidth;
+        popupContentContainer.style.height = this.popupHeight;
+        popupContentContainer.style.overflow = 'auto';
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -1889,10 +1330,7 @@ class ToolBarComponent {
         }
     }
     normalizePopupClasses(classList) {
-        let classes = ['k-toolbar-popup'];
-        if (this.normalizedOverflow.mode === 'menu') {
-            classes.push('k-menu-popup');
-        }
+        let classes = ['k-menu-popup', 'k-toolbar-popup'];
         if (!classList) {
             return classes;
         }
@@ -1909,204 +1347,62 @@ class ToolBarComponent {
         }
         return classes;
     }
-    setScrollableOverlayClasses() {
-        const wrapper = this.element.nativeElement;
-        const container = this.scrollContainer?.nativeElement;
-        if (!container) {
-            return;
-        }
-        const scrollOffset = container.scrollLeft;
-        const defaultOffset = 1;
-        if (this.scrollService.toolsOverflow) {
-            this.renderer.addClass(wrapper, 'k-toolbar-scrollable-overlay');
-            if (scrollOffset === 0) {
-                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
-                this.renderer.addClass(wrapper, 'k-toolbar-scrollable-start');
-            }
-            else if ((scrollOffset > 0 && scrollOffset < this.scrollService.scrollContainerOverflowSize - defaultOffset) || (scrollOffset < 0 && Math.abs(scrollOffset) < this.scrollService.scrollContainerOverflowSize - defaultOffset)) {
-                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
-                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
-            }
-            else {
-                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
-                this.renderer.addClass(wrapper, 'k-toolbar-scrollable-end');
-            }
-        }
-        else {
-            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-overlay');
-            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
-            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
             ToolbarToolsService,
-            ScrollService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.toolbar'
             }
-        ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "popupSectionTemplate", first: true, predicate: ["popupSectionTemplate"], descendants: true, static: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "startButtonGroup", first: true, predicate: ["startButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "endButtonGroup", first: true, predicate: ["endButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "scrollSeparator", first: true, predicate: ["scrollSeparator"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
-            i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-            moreToolsTitle="More tools"
-
-            i18n-previousToolButton="kendo.toolbar.previousToolButton|The title for the **Previous Tool** button when the Toolbar is scrollable."
-            previousToolButton="Scroll left"
-
-            i18n-nextToolButton="kendo.toolbar.nextToolButton|The title for the **Next Tool** button when the Toolbar is scrollable."
-            nextToolButton="Scroll right"
+        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+        moreToolsTitle="More tools"
         >
         </ng-container>
-        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
-            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
-                kendoToolbarScrollableButton
-                [prev]="true"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('prev')"
-                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
-                <span #prevScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="true"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-                <span #nextScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="false"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-            </div>
-            <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
+        <ng-container *ngFor="let tool of allTools; let index = index"
+            kendoToolbarRenderer
+            [tool]="tool"
+            location="toolbar"
+            [resizable]="overflow"
+            (rendererClick)="onRendererClick($event)"
+            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+            <ng-template #wrapper>
+                <div class="k-toolbar-item">
+                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                </div>
+            </ng-template>
         </ng-container>
-        <div class="k-toolbar-items k-toolbar-items-scroll" *ngIf="isScrollMode; else noScroll" #scrollContainer>
-            <ng-container *ngFor="let tool of allTools; let index = index"
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-        </div>
-        <ng-template #noScroll>
-            <ng-container *ngFor="let tool of allTools; let index = index"
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-        </ng-template>
-        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
         <button
             kendoButton
             fillMode="flat"
             #overflowButton
             type="button"
-            [icon]="overflowButtonIcon('font')"
-            [svgIcon]="overflowButtonIcon('svg')"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
+            aria-haspopup="menu"
+            *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
         </button>
-        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
-            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
-            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
-                kendoToolbarScrollableButton
-                [prev]="false"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
-                <span #prevScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="true"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-                <span #nextScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="false"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-            </div>
-        </ng-container>
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
-                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
                     <ng-template 
@@ -2114,7 +1410,7 @@ class ToolBarComponent {
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="resizable"
+                        [resizable]="overflow"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -2125,29 +1421,9 @@ class ToolBarComponent {
                 </ng-container>
             </div>
         </ng-template>
-        <ng-template #popupSectionTemplate>
-            <span class="k-toolbar-items-list k-toolbar-items-list-solid"
-                [ngClass]="sectionSizeClass"
-                role="toolbar"
-                [id]="popupId"
-                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
-                [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index"
-                    kendoToolbarRenderer
-                    [tool]="tool"
-                    location="section"
-                    [resizable]="resizable"
-                    (rendererClick)="onRendererClick($event)"
-                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                    <ng-template #wrapper>
-                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                    </ng-template>
-                </ng-container>
-            </span>
-        </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }] });
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -2158,7 +1434,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NavigationService,
                         LocalizationService,
                         ToolbarToolsService,
-                        ScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -2167,162 +1442,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar',
                     template: `
         <ng-container kendoToolbarLocalizedMessages
-            i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-            moreToolsTitle="More tools"
-
-            i18n-previousToolButton="kendo.toolbar.previousToolButton|The title for the **Previous Tool** button when the Toolbar is scrollable."
-            previousToolButton="Scroll left"
-
-            i18n-nextToolButton="kendo.toolbar.nextToolButton|The title for the **Next Tool** button when the Toolbar is scrollable."
-            nextToolButton="Scroll right"
+        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+        moreToolsTitle="More tools"
         >
         </ng-container>
-        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
-            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
-                kendoToolbarScrollableButton
-                [prev]="true"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('prev')"
-                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
-                <span #prevScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="true"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-                <span #nextScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="false"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-            </div>
-            <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
+        <ng-container *ngFor="let tool of allTools; let index = index"
+            kendoToolbarRenderer
+            [tool]="tool"
+            location="toolbar"
+            [resizable]="overflow"
+            (rendererClick)="onRendererClick($event)"
+            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+            <ng-template #wrapper>
+                <div class="k-toolbar-item">
+                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                </div>
+            </ng-template>
         </ng-container>
-        <div class="k-toolbar-items k-toolbar-items-scroll" *ngIf="isScrollMode; else noScroll" #scrollContainer>
-            <ng-container *ngFor="let tool of allTools; let index = index"
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-        </div>
-        <ng-template #noScroll>
-            <ng-container *ngFor="let tool of allTools; let index = index"
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-        </ng-template>
-        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
         <button
             kendoButton
             fillMode="flat"
             #overflowButton
             type="button"
-            [icon]="overflowButtonIcon('font')"
-            [svgIcon]="overflowButtonIcon('svg')"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
+            aria-haspopup="menu"
+            *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
         </button>
-        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
-            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
-            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
-                kendoToolbarScrollableButton
-                [prev]="false"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
-                <span #prevScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="true"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-                <span #nextScrollButton
-                    kendoToolbarScrollableButton
-                    [prev]="false"
-                    [overflow]="normalizedOverflow"
-                    [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
-                        'k-button-lg': size === 'large'
-                    }"
-                    (onClick)="scrollTools($event)">
-                </span>
-            </div>
-        </ng-container>
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
-                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
                     <ng-template 
@@ -2330,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="resizable"
+                        [resizable]="overflow"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -2341,33 +1504,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-container>
             </div>
         </ng-template>
-        <ng-template #popupSectionTemplate>
-            <span class="k-toolbar-items-list k-toolbar-items-list-solid"
-                [ngClass]="sectionSizeClass"
-                role="toolbar"
-                [id]="popupId"
-                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
-                [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index"
-                    kendoToolbarRenderer
-                    [tool]="tool"
-                    location="section"
-                    [resizable]="resizable"
-                    (rendererClick)="onRendererClick($event)"
-                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                    <ng-template #wrapper>
-                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                    </ng-template>
-                </ng-container>
-            </span>
-        </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ButtonGroupComponent, ToolbarScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }]; }, propDecorators: { overflow: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }]; }, propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -2395,42 +1538,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
-            }], popupSectionTemplate: [{
-                type: ViewChild,
-                args: ['popupSectionTemplate', { static: true }]
-            }], scrollContainer: [{
-                type: ViewChild,
-                args: ['scrollContainer', { read: ElementRef, static: false }]
             }], resizeSensor: [{
                 type: ViewChild,
                 args: ['resizeSensor', { static: false }]
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
-            }], prevScrollButton: [{
-                type: ViewChild,
-                args: ['prevScrollButton', { read: ElementRef }]
-            }], nextScrollButton: [{
-                type: ViewChild,
-                args: ['nextScrollButton', { read: ElementRef }]
-            }], startButtonGroup: [{
-                type: ViewChild,
-                args: ['startButtonGroup', { read: ElementRef }]
-            }], endButtonGroup: [{
-                type: ViewChild,
-                args: ['endButtonGroup', { read: ElementRef }]
-            }], scrollSeparator: [{
-                type: ViewChild,
-                args: ['scrollSeparator', { read: ElementRef }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
-            }], scrollableClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-scrollable']
-            }], sectionClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-section']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
@@ -2623,7 +1739,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         imageUrl: ''
     };
     toolbarButtonElement;
-    sectionButtonElement;
     overflowButtonElement;
     _showText = 'both';
     _text;
@@ -2683,7 +1798,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return this[`${this.location}ButtonElement`]?.nativeElement;
+        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -2692,7 +1807,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -2745,34 +1860,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 </span>
             </div>
         </ng-template>
-        <ng-template #sectionTemplate>
-            <button
-                #sectionButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                (click)="click.emit($event)"
-                (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChangeHandler($event)"
-                (blur)="onBlur()"
-            >
-                {{ toolbarOptions.text }}
-            </button>
-        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
@@ -2834,34 +1921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </span>
             </div>
         </ng-template>
-        <ng-template #sectionTemplate>
-            <button
-                #sectionButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                (click)="click.emit($event)"
-                (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChangeHandler($event)"
-                (blur)="onBlur()"
-            >
-                {{ toolbarOptions.text }}
-            </button>
-        </ng-template>
     `,
                     standalone: true,
                     imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
@@ -2909,9 +1968,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarButtonElement: [{
                 type: ViewChild,
                 args: ['toolbarButton', { read: ElementRef }]
-            }], sectionButtonElement: [{
-                type: ViewChild,
-                args: ['sectionButton', { read: ElementRef }]
             }], overflowButtonElement: [{
                 type: ViewChild,
                 args: ['overflowButton', { read: ElementRef }]
@@ -2957,18 +2013,12 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     toolbarButtonGroup;
-    sectionButtonGroup;
     overflowListItems;
     buttonComponents;
     get buttonElements() {
-        if (this.overflows && this.location === 'overflow') {
+        if (this.overflows) {
             return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
         }
-        else if (this.overflows && this.location === 'section') {
-            return this.sectionButtonGroup
-                .buttons.filter(b => !b.isDisabled)
-                .map(b => b.element);
-        }
         else {
             return this.toolbarButtonGroup
                 .buttons.filter(b => !b.isDisabled)
@@ -3036,8 +2086,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
-        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
         this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
         this.focusButton(this.focusedIndex, ev);
     }
@@ -3045,8 +2095,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(ev) {
-        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
-        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
         const peekAtIndex = makePeeker(this.buttonElements);
         const isUnmodified = areEqual(this.focusedIndex);
         this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
@@ -3082,7 +2132,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
                 class="k-toolbar-button-group k-button-group-{{fillMode}}"
@@ -3144,42 +2194,6 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                     </span>
                 </div>
         </ng-template>
-        <ng-template #sectionTemplate>
-        <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #sectionButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
-            >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
-        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
@@ -3250,42 +2264,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </span>
                 </div>
         </ng-template>
-        <ng-template #sectionTemplate>
-        <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #sectionButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
-            >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
-        </ng-template>
     `,
                     standalone: true,
                     imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
@@ -3303,9 +2281,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]
-            }], sectionButtonGroup: [{
-                type: ViewChild,
-                args: ['sectionButtonGroup', { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']
@@ -3496,8 +2471,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      */
     close = new EventEmitter();
     dropdownButton;
-    toolbarDropDownButton;
-    sectionDropDownButton;
+    dropDownButtonComponent;
     overflowListItems;
     toolbarOptions = {
         text: '',
@@ -3535,9 +2509,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.renderer.addClass(this[`${this.location}DropDownButton`].button.nativeElement, 'k-toolbar-menu-button');
-        });
+        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
     }
     /**
      * @hidden
@@ -3557,9 +2529,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows || this.location === 'section') {
-            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}DropDownButton`]?.focus();
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.dropDownButtonComponent?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -3574,7 +2546,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
             return false;
         }
-        if (this.overflows && this.location !== 'section') {
+        if (this.overflows) {
             const peekAtIndex = makePeeker(this.overflowButtons);
             const isUnmodified = areEqual(this.focusedIndex);
             this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
@@ -3612,9 +2584,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
+            <kendo-dropdownbutton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -3636,7 +2608,6 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
-
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -3677,30 +2648,6 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 </div>
             </ng-container>
         </ng-template>
-
-        <ng-template #sectionTemplate>
-            <kendo-dropdownbutton #sectionDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
-        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
@@ -3711,7 +2658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar-dropdownbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
+            <kendo-dropdownbutton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -3733,7 +2680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
-
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -3774,30 +2720,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </div>
             </ng-container>
         </ng-template>
-
-        <ng-template #sectionTemplate>
-            <kendo-dropdownbutton #sectionDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
-        </ng-template>
     `,
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
@@ -3847,12 +2769,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], toolbarDropDownButton: [{
+            }], dropDownButtonComponent: [{
                 type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
-            }], sectionDropDownButton: [{
-                type: ViewChild,
-                args: ['sectionDropDownButton', { static: false }]
+                args: [DropDownButtonComponent, { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']
@@ -4068,7 +2987,6 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
-    sectionSplitButton;
     overflowMainButton;
     overflowListItems;
     constructor() {
@@ -4100,9 +3018,9 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows || this.location === 'section') {
-            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}SplitButton`].focus();
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.toolbarSplitButton.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -4146,7 +3064,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.itemClick.emit(dataItem);
     }
     focusButton(index, ev) {
-        if ((!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') && this.location !== 'section') {
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
@@ -4155,7 +3073,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -4225,32 +3143,6 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             </div>
             </ng-container>
         </ng-template>
-        <ng-template #sectionTemplate>
-            <kendo-splitbutton
-                #sectionSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
-        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
@@ -4329,32 +3221,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
             </ng-container>
         </ng-template>
-        <ng-template #sectionTemplate>
-            <kendo-splitbutton
-                #sectionSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
-        </ng-template>
     `,
                     standalone: true,
                     imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
@@ -4406,9 +3272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]
-            }], sectionSplitButton: [{
-                type: ViewChild,
-                args: ['sectionSplitButton', { static: false }]
             }], overflowMainButton: [{
                 type: ViewChild,
                 args: ['overflowMainButton', { read: ElementRef }]
@@ -4457,10 +3320,6 @@ class ToolBarSeparatorComponent extends ToolBarToolComponent {
             <div class="k-separator k-toolbar-separator"></div>
         </ng-template>
 
-        <ng-template #sectionTemplate>
-            <div class="k-separator k-toolbar-separator"></div>
-        </ng-template>
-
         <ng-template #popupTemplate>
             <div class="k-item k-menu-item">
                 <div class="k-separator k-separator-horizontal"></div>
@@ -4479,10 +3338,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div class="k-separator k-toolbar-separator"></div>
         </ng-template>
 
-        <ng-template #sectionTemplate>
-            <div class="k-separator k-toolbar-separator"></div>
-        </ng-template>
-
         <ng-template #popupTemplate>
             <div class="k-item k-menu-item">
                 <div class="k-separator k-separator-horizontal"></div>