@progress/kendo-angular-layout 17.3.0-develop.2 → 18.0.0-develop.2

package/esm2022/index.mjs

@@ -11,6 +11,7 @@ export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
 export * from './panelbar/events';
 export { SplitterComponent } from './splitter/splitter.component';
 export { SplitterPaneComponent } from './splitter/splitter-pane.component';
+// TabStrip exports
 export { TabStripComponent } from './tabstrip/tabstrip.component';
 export { TabStripTabComponent } from './tabstrip/models/tabstrip-tab.component';
 export { TabContentDirective } from './tabstrip/directives/tab-content.directive';

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736180615,
-    version: '17.3.0-develop.2',
+    publishDate: 1736255983,
+    version: '18.0.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2022/tabstrip/models/scrollable-settings.mjs

@@ -6,12 +6,13 @@ import { BUTTON_SCROLL_SPEED, MOUSE_SCROLL_SPEED } from "../constants";
 /**
  * @hidden
  */
-const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
+const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, scrollButtonsPosition = 'split', prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
     enabled,
     scrollButtons,
     mouseScroll,
     buttonScrollSpeed,
     mouseScrollSpeed,
+    scrollButtonsPosition,
     prevButtonIcon,
     nextButtonIcon,
     prevSVGButtonIcon,

package/esm2022/tabstrip/models/size.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/tabstrip/rendering/tab.component.mjs

@@ -81,7 +81,7 @@ export class TabComponent {
         this.tabClose.emit(closeArgs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
             <span class="k-link" *ngIf="!tab.tabTitle">
                 <span class="k-link-text">{{ tab.title }}</span>
@@ -165,6 +165,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-item']
+            }, {
+                type: HostBinding,
+                args: ['class.k-tabstrip-item']
             }], activeClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']

package/esm2022/tabstrip/tabstrip-scroll.service.mjs

@@ -37,16 +37,6 @@ export class ScrollService {
     get tabsOverflow() {
         return this.tablistOverflowSize > 0;
     }
-    get scrollButtonsSize() {
-        if (!this.owner.hasScrollButtons) {
-            return 0;
-        }
-        const prevRect = this.owner.prevScrollButton.hostBoundingClientRect;
-        const prevSize = isTablistHorizontal(this.owner.tabPosition) ? prevRect.width : prevRect.height;
-        const nextRect = this.owner.nextScrollButton.hostBoundingClientRect;
-        const nextSize = isTablistHorizontal(this.owner.tabPosition) ? nextRect.width : nextRect.height;
-        return prevSize + nextSize;
-    }
     constructor(ngZone) {
         this.ngZone = ngZone;
     }
@@ -58,7 +48,7 @@ export class ScrollService {
         const currentPrevButtonActive = !this.isDisabled('prev');
         const currentNextButtonActive = !this.isDisabled('next');
         const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
-        const calculatedNextButtonActive = this.position < this.tablistOverflowSize + this.scrollButtonsSize && this.tablistOverflowSize > 0;
+        const calculatedNextButtonActive = this.position < this.tablistOverflowSize && this.tablistOverflowSize > 0;
         if (calculatedPrevButtonActive !== currentPrevButtonActive) {
             this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
         }
@@ -137,6 +127,10 @@ export class ScrollService {
         }
         this.toggleScrollButtonsState();
     }
+    onScroll(e) {
+        this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
+        this.toggleScrollButtonsState();
+    }
     scrollTabs(direction) {
         this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
         if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
@@ -148,13 +142,12 @@ export class ScrollService {
         this.toggleScrollButtonsState();
     }
     calculateListPosition(direction, scrollSpeed) {
-        const adjustedMaxScroll = this.tablistOverflowSize + this.scrollButtonsSize;
         if (direction === 'prev' && this.position > 0) {
             this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
         }
-        else if (direction === 'next' && this.position < adjustedMaxScroll) {
-            if (this.position + scrollSpeed > adjustedMaxScroll) {
-                this.position = adjustedMaxScroll;
+        else if (direction === 'next' && this.position < this.tablistOverflowSize) {
+            if (this.position + scrollSpeed > this.tablistOverflowSize) {
+                this.position = this.tablistOverflowSize;
                 return;
             }
             this.position += scrollSpeed;
@@ -172,7 +165,7 @@ export class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
-    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.host.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 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
 }

package/esm2022/tabstrip/tabstrip.component.mjs

@@ -90,12 +90,52 @@ export class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(value);
         if (this.tablist) {
             this.toggleScrollButtons(this.scrollService.tabsOverflow);
-            this.attachWheelHandler(this.tablist.nativeElement);
+            if (this.isScrollable && this.mouseScrollEnabled) {
+                this.attachWheelHandler(this.tablist.nativeElement);
+            }
         }
     }
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Specifies the size of the TabStrip.
+     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     */
+    set size(value) {
+        switch (value) {
+            case 'small':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                break;
+            case 'medium':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                break;
+            case 'large':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                break;
+            case 'none':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+        }
+        this._size = value;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
      */
@@ -157,6 +197,11 @@ export class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    // To be released with a breaking change in Q2 2025
+    // @HostBinding('class.k-tabstrip-scrollable-overlay')
+    // public get tabStripScrollableOverlay(): boolean {
+    //     return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
+    // }
     /**
      * A query list of all declared tabs.
      */
@@ -193,6 +238,7 @@ export class TabStripComponent {
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
+    _size = 'medium';
     constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
         this.localization = localization;
         this.renderer = renderer;
@@ -205,7 +251,7 @@ export class TabStripComponent {
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
         this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
+            if (this.hasScrollButtons.visible) {
                 const action = activeButtonSettings.active ? 'remove' : 'add';
                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
             }
@@ -233,6 +279,8 @@ export class TabStripComponent {
                 this.scrollService.toggleScrollButtonsState();
             });
         });
+        // To be released in Q2 2025
+        // this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -248,7 +296,7 @@ export class TabStripComponent {
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
                         this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-                            if (this.hasScrollButtons) {
+                            if (this.hasScrollButtons.visible) {
                                 const action = activeButtonSettings.active ? 'remove' : 'add';
                                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
                             }
@@ -379,6 +427,10 @@ export class TabStripComponent {
         if (this.isScrollable && this.mouseScrollEnabled) {
             this.attachWheelHandler(tablist);
         }
+        // To be released in Q2 2025
+        // if (this.isScrollable && !this.mouseScrollEnabled) {
+        //     this.attachTablistScrollHandler(tablist);
+        // }
         this.subscriptionsArePresent = true;
     }
     toggleScrollButtons(tabsOverflow) {
@@ -398,7 +450,7 @@ export class TabStripComponent {
                 this.prevScrollButton.toggle(true);
                 this.nextScrollButton.toggle(true);
             }
-            if (scrollButtonsArePresent && alwaysVisible) {
+            if (scrollButtonsArePresent) {
                 this.ngZone.runOutsideAngular(() => {
                     this.scrollService.toggleScrollButtonsState();
                 });
@@ -420,8 +472,47 @@ export class TabStripComponent {
             }));
         });
     }
+    /* tslint:disable:no-unused-variable */
+    attachTablistScrollHandler(tablist) {
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
+                const scrollEvent = new TabScrollEvent({
+                    originalEvent: e
+                });
+                this.tabScroll.emit(scrollEvent);
+                const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
+                if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
+                    return;
+                }
+                if (!this.hasScrollButtons.visible) {
+                    this.setScrollableOverlayClasses();
+                }
+                this.scrollService.onScroll(e);
+            }));
+        });
+    }
+    setScrollableOverlayClasses() {
+        const wrapper = this.wrapper.nativeElement;
+        const container = this.tablist?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const scrollOffset = isTablistHorizontal(this.tabPosition) ? container.scrollLeft : container.scrollTop;
+        if (scrollOffset === 0) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else if (scrollOffset > 0 && scrollOffset < this.scrollService.tablistOverflowSize) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-end');
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
             TabStripService,
             ScrollService,
             LocalizationService,
@@ -455,10 +546,10 @@ export class TabStripComponent {
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="tabStripScrollable" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -466,9 +557,30 @@ export class TabStripComponent {
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
+                    #nextScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="false"
+                    [title]="localization.get('nextTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
@@ -476,7 +588,8 @@ export class TabStripComponent {
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': false
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -503,7 +616,24 @@ export class TabStripComponent {
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
+                    #prevScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="true"
+                    [title]="localization.get('previousTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
                     #nextScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -511,7 +641,12 @@ export class TabStripComponent {
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -594,10 +729,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="tabStripScrollable" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -605,9 +740,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
+                    #nextScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="false"
+                    [title]="localization.get('nextTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
@@ -615,7 +771,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': false
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -642,7 +799,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
+                    #prevScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="true"
+                    [title]="localization.get('previousTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
                     #nextScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -650,7 +824,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -692,6 +871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], scrollable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], closeIcon: [{
                 type: Input
             }], closeIconClass: [{
@@ -711,7 +892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.k-tabstrip']
             }, {
                 type: HostBinding,
-                args: ['class.k-header']
+                args: ['class.k-tabstrip-md']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -735,14 +916,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [TabStripTabComponent]
             }], tablist: [{
                 type: ViewChild,
-                args: ['tablist', { static: false }]
+                args: ['tablist']
             }], tabHeaderContainers: [{
                 type: ViewChildren,
                 args: ['tabHeaderContainer', { read: ElementRef }]
             }], prevScrollButton: [{
                 type: ViewChild,
-                args: ['prevScrollButton', { static: false }]
+                args: ['prevScrollButton']
             }], nextScrollButton: [{
                 type: ViewChild,
-                args: ['nextScrollButton', { static: false }]
+                args: ['nextScrollButton']
             }] } });

package/esm2022/tabstrip/util.mjs

@@ -32,7 +32,12 @@ export const isTabClosable = (tab, tabStripClosable) => {
  * Checks if the TabStrip scroll buttons will be rendered. Depends on the value of the TabStrip scrollable settings.
  */
 export const tabStripHasScrollButtons = (scrollableSettings) => {
-    return scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const visible = scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const position = scrollableSettings.scrollButtonsPosition;
+    return {
+        visible,
+        position
+    };
 };
 /**
  * @hidden

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736180615,
-    version: '17.3.0-develop.2',
+    publishDate: 1736255983,
+    version: '18.0.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -3068,7 +3068,12 @@ const isTabClosable = (tab, tabStripClosable) => {
  * Checks if the TabStrip scroll buttons will be rendered. Depends on the value of the TabStrip scrollable settings.
  */
 const tabStripHasScrollButtons = (scrollableSettings) => {
-    return scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const visible = scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const position = scrollableSettings.scrollButtonsPosition;
+    return {
+        visible,
+        position
+    };
 };
 /**
  * @hidden
@@ -3352,16 +3357,6 @@ class ScrollService {
     get tabsOverflow() {
         return this.tablistOverflowSize > 0;
     }
-    get scrollButtonsSize() {
-        if (!this.owner.hasScrollButtons) {
-            return 0;
-        }
-        const prevRect = this.owner.prevScrollButton.hostBoundingClientRect;
-        const prevSize = isTablistHorizontal(this.owner.tabPosition) ? prevRect.width : prevRect.height;
-        const nextRect = this.owner.nextScrollButton.hostBoundingClientRect;
-        const nextSize = isTablistHorizontal(this.owner.tabPosition) ? nextRect.width : nextRect.height;
-        return prevSize + nextSize;
-    }
     constructor(ngZone) {
         this.ngZone = ngZone;
     }
@@ -3373,7 +3368,7 @@ class ScrollService {
         const currentPrevButtonActive = !this.isDisabled('prev');
         const currentNextButtonActive = !this.isDisabled('next');
         const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
-        const calculatedNextButtonActive = this.position < this.tablistOverflowSize + this.scrollButtonsSize && this.tablistOverflowSize > 0;
+        const calculatedNextButtonActive = this.position < this.tablistOverflowSize && this.tablistOverflowSize > 0;
         if (calculatedPrevButtonActive !== currentPrevButtonActive) {
             this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
         }
@@ -3452,6 +3447,10 @@ class ScrollService {
         }
         this.toggleScrollButtonsState();
     }
+    onScroll(e) {
+        this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
+        this.toggleScrollButtonsState();
+    }
     scrollTabs(direction) {
         this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
         if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
@@ -3463,13 +3462,12 @@ class ScrollService {
         this.toggleScrollButtonsState();
     }
     calculateListPosition(direction, scrollSpeed) {
-        const adjustedMaxScroll = this.tablistOverflowSize + this.scrollButtonsSize;
         if (direction === 'prev' && this.position > 0) {
             this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
         }
-        else if (direction === 'next' && this.position < adjustedMaxScroll) {
-            if (this.position + scrollSpeed > adjustedMaxScroll) {
-                this.position = adjustedMaxScroll;
+        else if (direction === 'next' && this.position < this.tablistOverflowSize) {
+            if (this.position + scrollSpeed > this.tablistOverflowSize) {
+                this.position = this.tablistOverflowSize;
                 return;
             }
             this.position += scrollSpeed;
@@ -3487,7 +3485,7 @@ class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
-    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.host.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 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
 }
@@ -3498,12 +3496,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @hidden
  */
-const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
+const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, scrollButtonsPosition = 'split', prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
     enabled,
     scrollButtons,
     mouseScroll,
     buttonScrollSpeed,
     mouseScrollSpeed,
+    scrollButtonsPosition,
     prevButtonIcon,
     nextButtonIcon,
     prevSVGButtonIcon,
@@ -3772,7 +3771,7 @@ class TabComponent {
         this.tabClose.emit(closeArgs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
             <span class="k-link" *ngIf="!tab.tabTitle">
                 <span class="k-link-text">{{ tab.title }}</span>
@@ -3856,6 +3855,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-item']
+            }, {
+                type: HostBinding,
+                args: ['class.k-tabstrip-item']
             }], activeClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
@@ -4004,12 +4006,52 @@ class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(value);
         if (this.tablist) {
             this.toggleScrollButtons(this.scrollService.tabsOverflow);
-            this.attachWheelHandler(this.tablist.nativeElement);
+            if (this.isScrollable && this.mouseScrollEnabled) {
+                this.attachWheelHandler(this.tablist.nativeElement);
+            }
         }
     }
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Specifies the size of the TabStrip.
+     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     */
+    set size(value) {
+        switch (value) {
+            case 'small':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                break;
+            case 'medium':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                break;
+            case 'large':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                break;
+            case 'none':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+        }
+        this._size = value;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
      */
@@ -4071,6 +4113,11 @@ class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    // To be released with a breaking change in Q2 2025
+    // @HostBinding('class.k-tabstrip-scrollable-overlay')
+    // public get tabStripScrollableOverlay(): boolean {
+    //     return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
+    // }
     /**
      * A query list of all declared tabs.
      */
@@ -4107,6 +4154,7 @@ class TabStripComponent {
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
+    _size = 'medium';
     constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
         this.localization = localization;
         this.renderer = renderer;
@@ -4119,7 +4167,7 @@ class TabStripComponent {
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
         this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
+            if (this.hasScrollButtons.visible) {
                 const action = activeButtonSettings.active ? 'remove' : 'add';
                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
             }
@@ -4147,6 +4195,8 @@ class TabStripComponent {
                 this.scrollService.toggleScrollButtonsState();
             });
         });
+        // To be released in Q2 2025
+        // this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -4162,7 +4212,7 @@ class TabStripComponent {
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
                         this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-                            if (this.hasScrollButtons) {
+                            if (this.hasScrollButtons.visible) {
                                 const action = activeButtonSettings.active ? 'remove' : 'add';
                                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
                             }
@@ -4293,6 +4343,10 @@ class TabStripComponent {
         if (this.isScrollable && this.mouseScrollEnabled) {
             this.attachWheelHandler(tablist);
         }
+        // To be released in Q2 2025
+        // if (this.isScrollable && !this.mouseScrollEnabled) {
+        //     this.attachTablistScrollHandler(tablist);
+        // }
         this.subscriptionsArePresent = true;
     }
     toggleScrollButtons(tabsOverflow) {
@@ -4312,7 +4366,7 @@ class TabStripComponent {
                 this.prevScrollButton.toggle(true);
                 this.nextScrollButton.toggle(true);
             }
-            if (scrollButtonsArePresent && alwaysVisible) {
+            if (scrollButtonsArePresent) {
                 this.ngZone.runOutsideAngular(() => {
                     this.scrollService.toggleScrollButtonsState();
                 });
@@ -4334,8 +4388,47 @@ class TabStripComponent {
             }));
         });
     }
+    /* tslint:disable:no-unused-variable */
+    attachTablistScrollHandler(tablist) {
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
+                const scrollEvent = new TabScrollEvent({
+                    originalEvent: e
+                });
+                this.tabScroll.emit(scrollEvent);
+                const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
+                if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
+                    return;
+                }
+                if (!this.hasScrollButtons.visible) {
+                    this.setScrollableOverlayClasses();
+                }
+                this.scrollService.onScroll(e);
+            }));
+        });
+    }
+    setScrollableOverlayClasses() {
+        const wrapper = this.wrapper.nativeElement;
+        const container = this.tablist?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const scrollOffset = isTablistHorizontal(this.tabPosition) ? container.scrollLeft : container.scrollTop;
+        if (scrollOffset === 0) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else if (scrollOffset > 0 && scrollOffset < this.scrollService.tablistOverflowSize) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-end');
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
             TabStripService,
             ScrollService,
             LocalizationService,
@@ -4369,10 +4462,10 @@ class TabStripComponent {
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="tabStripScrollable" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -4380,9 +4473,30 @@ class TabStripComponent {
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
+                    #nextScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="false"
+                    [title]="localization.get('nextTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
@@ -4390,7 +4504,8 @@ class TabStripComponent {
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': false
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -4417,7 +4532,24 @@ class TabStripComponent {
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
+                    #prevScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="true"
+                    [title]="localization.get('previousTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
                     #nextScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -4425,7 +4557,12 @@ class TabStripComponent {
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -4508,10 +4645,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="tabStripScrollable" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -4519,9 +4656,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
+                    #nextScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="false"
+                    [title]="localization.get('nextTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
@@ -4529,7 +4687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': false
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -4556,7 +4715,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
+                    #prevScrollButton
+                    kendoTabStripScrollableButton
+                    [scrollable]="scrollable"
+                    [tabPosition]="tabPosition"
+                    [prev]="true"
+                    [title]="localization.get('previousTabButton')"
+                    (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="onScrollButtonClick($event)"></span>
+                <span
+                    role="button"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
                     #nextScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -4564,7 +4740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -4606,6 +4787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], scrollable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], closeIcon: [{
                 type: Input
             }], closeIconClass: [{
@@ -4625,7 +4808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.k-tabstrip']
             }, {
                 type: HostBinding,
-                args: ['class.k-header']
+                args: ['class.k-tabstrip-md']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -4649,16 +4832,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [TabStripTabComponent]
             }], tablist: [{
                 type: ViewChild,
-                args: ['tablist', { static: false }]
+                args: ['tablist']
             }], tabHeaderContainers: [{
                 type: ViewChildren,
                 args: ['tabHeaderContainer', { read: ElementRef }]
             }], prevScrollButton: [{
                 type: ViewChild,
-                args: ['prevScrollButton', { static: false }]
+                args: ['prevScrollButton']
             }], nextScrollButton: [{
                 type: ViewChild,
-                args: ['nextScrollButton', { static: false }]
+                args: ['nextScrollButton']
             }] } });
 
 /**

package/index.d.ts

@@ -22,8 +22,9 @@ export { TabAlignment } from './tabstrip/models/tab-alignment';
 export { TabStripScrollButtonsVisibility } from './tabstrip/models/scroll-buttons-visibility';
 export { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
 export { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
-export { TabStripScrollableSettings } from './tabstrip/models/scrollable-settings';
+export { TabStripScrollableSettings, TabStripScrollButtonsPosition } from './tabstrip/models/scrollable-settings';
 export { TabTemplateDirective } from './tabstrip/directives/tab.directive';
+export { TabStripSize } from './tabstrip/models/size';
 export * from './tabstrip/events';
 export { DrawerComponent } from './drawer/drawer.component';
 export { DrawerContainerComponent } from './drawer/drawer-container.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "17.3.0-develop.2",
+  "version": "18.0.0-develop.2",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,17 +39,17 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "17.3.0-develop.2",
-    "@progress/kendo-angular-l10n": "17.3.0-develop.2",
-    "@progress/kendo-angular-progressbar": "17.3.0-develop.2",
-    "@progress/kendo-angular-icons": "17.3.0-develop.2",
-    "@progress/kendo-angular-buttons": "17.3.0-develop.2",
-    "@progress/kendo-angular-intl": "17.3.0-develop.2",
+    "@progress/kendo-angular-common": "18.0.0-develop.2",
+    "@progress/kendo-angular-l10n": "18.0.0-develop.2",
+    "@progress/kendo-angular-progressbar": "18.0.0-develop.2",
+    "@progress/kendo-angular-icons": "18.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "18.0.0-develop.2",
+    "@progress/kendo-angular-intl": "18.0.0-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.3.0-develop.2",
+    "@progress/kendo-angular-schematics": "18.0.0-develop.2",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/tabstrip/models/scrollable-settings.d.ts

@@ -14,7 +14,7 @@ export interface TabStripScrollableSettings {
      */
     enabled?: boolean;
     /**
-     * Determines whether the TabStrip scroll buttons visibility mode. The possible options are:
+     * Determines the TabStrip scroll buttons visibility mode. The possible options are:
      * - 'auto'(default) - The scroll buttons will be rendered only when the tabs list overflows its container.
      * - 'visible' - The scroll buttons will be always visible.
      * - 'hidden' - No scroll buttons will be rendered.
@@ -57,7 +57,18 @@ export interface TabStripScrollableSettings {
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     nextSVGButtonIcon?: SVGIcon;
+    /**
+     * Determines the TabStrip scroll buttons position. The possible options are:
+     * - 'start'—The scroll buttons will be rendered at the start before all tabs.
+     * - 'end'—The scroll buttons will be rendered at the end after all tabs.
+     * - 'split'(default)—The scroll buttons will be rendered at each side of the tabs.
+     */
+    scrollButtonsPosition?: TabStripScrollButtonsPosition;
 }
+/**
+ * The available options for the `scrollButtonsPosition` option.
+ */
+export type TabStripScrollButtonsPosition = 'start' | 'end' | 'split';
 /**
  * @hidden
  */

package/tabstrip/models/size.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the possible sizes of the TabStrip ([see example](slug:sizing_tabstrip)).
+ */
+export type TabStripSize = 'small' | 'medium' | 'large' | 'none';

package/tabstrip/tabstrip-scroll.service.d.ts

@@ -19,12 +19,12 @@ export declare class ScrollService {
     get tabstripSize(): number;
     get tablistOverflowSize(): number;
     get tabsOverflow(): boolean;
-    get scrollButtonsSize(): number;
     constructor(ngZone: NgZone);
     toggleScrollButtonsState(): void;
     scrollToSelectedTab(): void;
     getScrollOffset(activeIndex: number): number;
     onMouseScroll(event: any): void;
+    onScroll(e: Event): void;
     scrollTabs(direction: string): void;
     calculateListPosition(direction: string, scrollSpeed: number): void;
     restoreScrollPosition(): void;

package/tabstrip/tabstrip.component.d.ts

@@ -11,11 +11,12 @@ import { ScrollService } from './tabstrip-scroll.service';
 import { TabPosition } from './models/tab-position';
 import { TabAlignment } from './models/tab-alignment';
 import { Subscription } from 'rxjs';
-import { TabStripScrollableSettings } from './models/scrollable-settings';
+import { TabStripScrollableSettings, TabStripScrollButtonsPosition } from './models/scrollable-settings';
 import { TabScrollEvent } from './events/tabscroll-event';
 import { TabStripScrollableButtonComponent } from './scrollable-button.component';
 import { ScrollButtonType } from './models/scroll-button-type';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { TabStripSize } from './models/size';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
@@ -74,6 +75,18 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      */
     set scrollable(value: boolean | TabStripScrollableSettings);
     get scrollable(): boolean | TabStripScrollableSettings;
+    /**
+     * Specifies the size of the TabStrip.
+     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     */
+    set size(value: TabStripSize);
+    get size(): TabStripSize;
     /**
      * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
      */
@@ -152,6 +165,7 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     private tabStripId;
     private tabsChangesSub;
     private activeStateChangeSub;
+    private _size;
     constructor(localization: LocalizationService, renderer: Renderer2, wrapper: ElementRef, tabstripService: TabStripService, scrollService: ScrollService, ngZone: NgZone);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -163,7 +177,10 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden
      */
-    get hasScrollButtons(): boolean;
+    get hasScrollButtons(): {
+        visible: boolean;
+        position: TabStripScrollButtonsPosition;
+    };
     /**
      * @hidden
      */
@@ -204,6 +221,8 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     private initDomEvents;
     private toggleScrollButtons;
     private attachWheelHandler;
+    private attachTablistScrollHandler;
+    private setScrollableOverlayClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabStripComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "kendo-tabstrip", ["kendoTabStrip"], { "height": { "alias": "height"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; }; "tabPosition": { "alias": "tabPosition"; "required": false; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "closeIcon": { "alias": "closeIcon"; "required": false; }; "closeIconClass": { "alias": "closeIconClass"; "required": false; }; "closeSVGIcon": { "alias": "closeSVGIcon"; "required": false; }; "showContentArea": { "alias": "showContentArea"; "required": false; }; }, { "tabSelect": "tabSelect"; "tabClose": "tabClose"; "tabScroll": "tabScroll"; }, ["tabs"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "kendo-tabstrip", ["kendoTabStrip"], { "height": { "alias": "height"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; }; "tabPosition": { "alias": "tabPosition"; "required": false; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "closeIcon": { "alias": "closeIcon"; "required": false; }; "closeIconClass": { "alias": "closeIconClass"; "required": false; }; "closeSVGIcon": { "alias": "closeSVGIcon"; "required": false; }; "showContentArea": { "alias": "showContentArea"; "required": false; }; }, { "tabSelect": "tabSelect"; "tabClose": "tabClose"; "tabScroll": "tabScroll"; }, ["tabs"], never, true, never>;
 }

package/tabstrip/util.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, QueryList } from "@angular/core";
-import { TabStripScrollableSettings } from './models/scrollable-settings';
+import { TabStripScrollableSettings, TabStripScrollButtonsPosition } from './models/scrollable-settings';
 import { TabStripTabComponent } from "./models/tabstrip-tab.component";
 import { TabPosition } from './models/tab-position';
 /**
@@ -23,7 +23,10 @@ export declare const isTabClosable: (tab: TabStripTabComponent, tabStripClosable
  *
  * Checks if the TabStrip scroll buttons will be rendered. Depends on the value of the TabStrip scrollable settings.
  */
-export declare const tabStripHasScrollButtons: (scrollableSettings: TabStripScrollableSettings) => boolean;
+export declare const tabStripHasScrollButtons: (scrollableSettings: TabStripScrollableSettings) => {
+    visible: boolean;
+    position: TabStripScrollButtonsPosition;
+};
 /**
  * @hidden
  *