@progress/kendo-angular-toolbar 18.1.0-develop.3 → 18.1.0-develop.31

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, ViewContainerRef, Component, ContentChildren, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } 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 * 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 { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, 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: 1738245757,
-    version: '18.1.0-develop.3',
+    publishDate: 1739264198,
+    version: '18.1.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -263,6 +263,23 @@ 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
@@ -399,9 +416,11 @@ class NavigationService {
         }
     }
     focusOverflowButton() {
-        this.isOverflowButtonFocused = true;
-        this.overflowButton.nativeElement.tabIndex = 0;
-        this.overflowButton.nativeElement.focus();
+        if (this.overflowButton) {
+            this.isOverflowButtonFocused = true;
+            this.overflowButton.nativeElement.tabIndex = 0;
+            this.overflowButton.nativeElement.focus();
+        }
     }
     isOverflowButtonVisible() {
         return (isPresent(this.overflowButton) &&
@@ -420,12 +439,17 @@ 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);
     }
@@ -467,7 +491,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: "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: "sectionTemplate", first: true, predicate: ["sectionTemplate"], 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,
@@ -477,6 +501,9 @@ 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 }]
@@ -561,6 +588,9 @@ 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 });
 }
@@ -601,6 +631,7 @@ 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);
@@ -617,6 +648,11 @@ 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');
@@ -652,6 +688,7 @@ 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);
@@ -670,6 +707,7 @@ 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') {
@@ -711,11 +749,19 @@ 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" }, 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", previousToolButton: "previousToolButton", nextToolButton: "nextToolButton" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
@@ -725,6 +771,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { moreToolsTitle: [{
                 type: Input
+            }], previousToolButton: [{
+                type: Input
+            }], nextToolButton: [{
+                type: Input
             }] } });
 
 /**
@@ -758,6 +808,251 @@ 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';
@@ -780,13 +1075,27 @@ class ToolBarComponent {
     renderer;
     _cdr;
     toolsService;
+    scrollService;
     get overflowClass() {
         return `k-button-${SIZES[this.size]}`;
     }
     /**
-     * Hides the overflowing tools in a popup.
+     * 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
      */
-    overflow = false;
+    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);
+    }
     /**
      * @hidden
      */
@@ -794,10 +1103,39 @@ class ToolBarComponent {
         this.overflow = value;
     }
     get resizable() {
-        return this.overflow;
+        return this.showMenu;
     }
     /**
-     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
+     * @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)).
      *
      * The available options are:
      * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
@@ -864,8 +1202,15 @@ class ToolBarComponent {
     allTools;
     overflowButton;
     popupTemplate;
+    popupSectionTemplate;
+    scrollContainer;
     resizeSensor;
     container;
+    prevScrollButton;
+    nextScrollButton;
+    startButtonGroup;
+    endButtonGroup;
+    scrollSeparator;
     popupRef;
     direction;
     get appendTo() {
@@ -894,17 +1239,40 @@ 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();
     /**
@@ -932,12 +1300,11 @@ class ToolBarComponent {
         return this.direction;
     }
     get resizableClass() {
-        return this.overflow;
+        return this.resizable;
     }
-    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) {
+    element, zone, renderer, _cdr, toolsService, scrollService) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -947,13 +1314,19 @@ 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());
         }));
     }
@@ -1010,9 +1383,11 @@ class ToolBarComponent {
                 }
             });
         });
-        if (this.overflow) {
+        if (this.overflowEnabled) {
             this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
-            this.navigationService.overflowButton = this.overflowButton;
+            if (this.showMenu) {
+                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(() => {
@@ -1023,6 +1398,38 @@ 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 => {
@@ -1056,6 +1463,10 @@ class ToolBarComponent {
         this.cancelRenderedToolsSubscription$.next();
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    showOverflowSeparator = false;
     /**
      * @hidden
      */
@@ -1068,6 +1479,31 @@ 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
      */
@@ -1075,6 +1511,17 @@ 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
      */
@@ -1093,17 +1540,30 @@ class ToolBarComponent {
             this.popupRef = null;
         }
         if (this.popupOpen) {
-            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();
+            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.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
             this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
@@ -1113,15 +1573,51 @@ class ToolBarComponent {
      */
     onResize() {
         if (isDocumentAvailable()) {
-            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();
+            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();
+                }
             }
+            this.resizeSensor?.acceptSize();
         }
     }
     /**
@@ -1129,45 +1625,94 @@ class ToolBarComponent {
      */
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
-            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')) {
+            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();
-                                ev.target.click();
-                                ev.target.focus();
-                            }
-                        });
-                        break;
-                    default:
-                        break;
-                }
-            });
+                                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(() => {
+                                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;
+                    }
+                });
+            }
         });
         this.cancelRenderedToolsSubscription$.next();
         this.navigationService.setRenderedTools(this.toolsService.overflowTools);
@@ -1190,6 +1735,9 @@ class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
+        if (this.sectionKeydownListener) {
+            this.sectionKeydownListener();
+        }
         this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     /**
@@ -1203,6 +1751,11 @@ 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) {
@@ -1217,7 +1770,7 @@ class ToolBarComponent {
         return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
     }
     get overflowAnchorWidth() {
-        if (!this.overflow) {
+        if (!this.showMenu) {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
@@ -1284,7 +1837,7 @@ class ToolBarComponent {
             return r.tool === tool;
         });
         const width = renderedElement.width;
-        tool.overflows = this.overflow;
+        tool.overflows = this.showMenu;
         this.refreshService.refresh(tool);
         return width;
     }
@@ -1306,11 +1859,17 @@ class ToolBarComponent {
         this.refreshService.refresh(tool);
         return renderedElement.width; // returns 0 if `overflows` is true
     }
-    setPopupContentDimensions() {
+    setPopupContentDimensions(isSection) {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        popupContentContainer.style.width = this.popupWidth;
-        popupContentContainer.style.height = this.popupHeight;
-        popupContentContainer.style.overflow = 'auto';
+        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';
+        }
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -1330,7 +1889,10 @@ class ToolBarComponent {
         }
     }
     normalizePopupClasses(classList) {
-        let classes = ['k-menu-popup', 'k-toolbar-popup'];
+        let classes = ['k-toolbar-popup'];
+        if (this.normalizedOverflow.mode === 'menu') {
+            classes.push('k-menu-popup');
+        }
         if (!classList) {
             return classes;
         }
@@ -1347,62 +1909,204 @@ class ToolBarComponent {
         }
         return classes;
     }
-    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: [
+    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: [
             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: "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: `
+        ], 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: `
         <ng-container kendoToolbarLocalizedMessages
-        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-        moreToolsTitle="More tools"
+            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"
         >
         </ng-container>
-        <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 *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>
+        <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="more-vertical"
-            [svgIcon]="moreVerticalIcon"
+            [icon]="overflowButtonIcon('font')"
+            [svgIcon]="overflowButtonIcon('svg')"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
+            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
+            *ngIf="showMenu"
             [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 
@@ -1410,7 +2114,7 @@ class ToolBarComponent {
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="overflow"
+                        [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -1421,9 +2125,29 @@ 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="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"] }] });
+        <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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -1434,6 +2158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NavigationService,
                         LocalizationService,
                         ToolbarToolsService,
+                        ScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -1442,50 +2167,162 @@ 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-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"
         >
         </ng-container>
-        <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 *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>
+        <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="more-vertical"
-            [svgIcon]="moreVerticalIcon"
+            [icon]="overflowButtonIcon('font')"
+            [svgIcon]="overflowButtonIcon('svg')"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
+            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
+            *ngIf="showMenu"
             [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 
@@ -1493,7 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="overflow"
+                        [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -1504,13 +2341,33 @@ 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="overflow" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ButtonGroupComponent, ToolbarScrollableButtonComponent]
                 }]
-        }], 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: [{
+        }], 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: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -1538,15 +2395,42 @@ 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']]
@@ -1739,6 +2623,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         imageUrl: ''
     };
     toolbarButtonElement;
+    sectionButtonElement;
     overflowButtonElement;
     _showText = 'both';
     _text;
@@ -1798,7 +2683,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
+        return this[`${this.location}ButtonElement`]?.nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -1807,7 +2692,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: "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: "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: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -1860,6 +2745,34 @@ 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: [{
@@ -1921,6 +2834,34 @@ 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]
@@ -1968,6 +2909,9 @@ 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 }]
@@ -2013,12 +2957,18 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     toolbarButtonGroup;
+    sectionButtonGroup;
     overflowListItems;
     buttonComponents;
     get buttonElements() {
-        if (this.overflows) {
+        if (this.overflows && this.location === 'overflow') {
             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)
@@ -2086,8 +3036,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
+        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
+        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
         this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
         this.focusButton(this.focusedIndex, ev);
     }
@@ -2095,8 +3045,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(ev) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
+        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
+        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
         const peekAtIndex = makePeeker(this.buttonElements);
         const isUnmodified = areEqual(this.focusedIndex);
         this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
@@ -2132,7 +3082,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: "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: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], 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}}"
@@ -2194,6 +3144,42 @@ 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: [{
@@ -2264,6 +3250,42 @@ 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]
@@ -2281,6 +3303,9 @@ 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']
@@ -2471,7 +3496,8 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      */
     close = new EventEmitter();
     dropdownButton;
-    dropDownButtonComponent;
+    toolbarDropDownButton;
+    sectionDropDownButton;
     overflowListItems;
     toolbarOptions = {
         text: '',
@@ -2509,7 +3535,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.renderer.addClass(this[`${this.location}DropDownButton`].button.nativeElement, 'k-toolbar-menu-button');
+        });
     }
     /**
      * @hidden
@@ -2529,9 +3557,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.dropDownButtonComponent?.focus();
+        if (!this.overflows || this.location === 'section') {
+            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+                this[`${this.location}DropDownButton`]?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -2546,7 +3574,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) {
+        if (this.overflows && this.location !== 'section') {
             const peekAtIndex = makePeeker(this.overflowButtons);
             const isUnmodified = areEqual(this.focusedIndex);
             this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
@@ -2584,9 +3612,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: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, 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: "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: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
+            <kendo-dropdownbutton #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2608,6 +3636,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
+
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -2648,6 +3677,30 @@ 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: [{
@@ -2658,7 +3711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar-dropdownbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
+            <kendo-dropdownbutton #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2680,6 +3733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
+
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -2720,6 +3774,30 @@ 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]
@@ -2769,9 +3847,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], dropDownButtonComponent: [{
+            }], toolbarDropDownButton: [{
                 type: ViewChild,
-                args: [DropDownButtonComponent, { static: false }]
+                args: ['toolbarDropDownButton', { static: false }]
+            }], sectionDropDownButton: [{
+                type: ViewChild,
+                args: ['sectionDropDownButton', { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']
@@ -2987,6 +4068,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
+    sectionSplitButton;
     overflowMainButton;
     overflowListItems;
     constructor() {
@@ -3018,9 +4100,9 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarSplitButton.focus();
+        if (!this.overflows || this.location === 'section') {
+            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+                this[`${this.location}SplitButton`].focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -3064,7 +4146,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.itemClick.emit(dataItem);
     }
     focusButton(index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
+        if ((!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') && this.location !== 'section') {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
@@ -3073,7 +4155,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: "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: "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: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -3143,6 +4225,32 @@ 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: [{
@@ -3221,6 +4329,32 @@ 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]
@@ -3272,6 +4406,9 @@ 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 }]
@@ -3320,6 +4457,10 @@ 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>
@@ -3338,6 +4479,10 @@ 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>