@progress/kendo-angular-layout 24.0.0-develop.8 → 24.0.0

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

@@ -3,23 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Optional, isDevMode, ContentChildren, ViewChildren, HostBinding, ViewChild, Input, SkipSelf, Host, Component, EventEmitter, HostListener, ContentChild, Output, Inject, QueryList, NgZone, forwardRef, ElementRef, ViewEncapsulation, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, Directive, Optional, isDevMode, ContentChildren, ViewChildren, HostBinding, ViewChild, Input, SkipSelf, Host, Component, EventEmitter, forwardRef, HostListener, ContentChild, Output, Inject, QueryList, NgZone, ElementRef, ViewEncapsulation, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeKeys, WatermarkOverlayComponent, isDocumentAvailable, anyChanged, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
+import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeKeys, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, isDocumentAvailable, anyChanged, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i1$2 from '@angular/animations';
+import * as i2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
-import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
+import { ProgressBarComponent, ProgressBarCustomMessagesComponent } from '@progress/kendo-angular-progressbar';
 import { Draggable } from '@progress/kendo-draggable';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DatePipe } from '@progress/kendo-angular-intl';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 
 /**
  * @hidden
@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777363092,
-    version: '24.0.0-develop.8',
+    publishDate: 1779273377,
+    version: '24.0.0',
     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'
 };
 
@@ -428,7 +428,7 @@ class PanelBarItemComponent {
         return (this.hasChildItems || this.hasContent) ? !this.disabled && this.expanded : null;
     }
     get ariaSelected() {
-        return !this.disabled && this.selected;
+        return !this.disabled && (this.selected || this.expanded);
     }
     get ariaDisabled() {
         return this.disabled ? true : null;
@@ -669,8 +669,8 @@ class PanelBarItemComponent {
                 <div
                   #contentWrapper
                   [@toggle]="state"
-                  [attr.role]="'group'"
-                  [attr.aria-hidden]="!disabled && !expanded"
+                  [attr.role]="hasChildItems ? 'group' : null"
+                  [attr.aria-hidden]="(!disabled && !expanded) || null"
                   >
                 @if (hasChildItems && !items?.length) {
                   <div
@@ -843,8 +843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 <div
                   #contentWrapper
                   [@toggle]="state"
-                  [attr.role]="'group'"
-                  [attr.aria-hidden]="!disabled && !expanded"
+                  [attr.role]="hasChildItems ? 'group' : null"
+                  [attr.aria-hidden]="(!disabled && !expanded) || null"
                   >
                 @if (hasChildItems && !items?.length) {
                   <div
@@ -1236,7 +1236,7 @@ class PanelBarComponent {
     hostClasses = true;
     tabIndex = 0;
     role = 'tree';
-    activeDescendant = '';
+    activeDescendant = null;
     get hostHeight() {
         return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
     }
@@ -1369,7 +1369,7 @@ class PanelBarComponent {
     onComponentBlur() {
         this.eventService.onBlur();
         this.focused = false;
-        this.activeDescendant = '';
+        this.activeDescendant = null;
     }
     /**
      * @hidden
@@ -1455,7 +1455,7 @@ class PanelBarComponent {
                 if (currentItem.selected !== selectedState || currentItem.focused !== focusedState) {
                     currentItem.selected = selectedState;
                     currentItem.focused = focusedState;
-                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    this.activeDescendant = focusedState ? currentItem.itemId : null;
                     modifiedItems.push(currentItem);
                 }
             });
@@ -1466,7 +1466,7 @@ class PanelBarComponent {
                 const focusedState = currentItem === item;
                 if (currentItem.focused !== focusedState) {
                     currentItem.focused = focusedState;
-                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    this.activeDescendant = focusedState ? currentItem.itemId : null;
                     modifiedItems.push(currentItem);
                 }
             });
@@ -1659,7 +1659,8 @@ class PanelBarComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.panelbar'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => PanelBarComponent) }
         ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
         @if (contentChildItems && !items) {
           <ng-content select="kendo-panelbar-item"></ng-content>
@@ -1701,7 +1702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.panelbar'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => PanelBarComponent) }
                     ],
                     selector: 'kendo-panelbar',
                     template: `
@@ -1860,11 +1862,7 @@ class SplitterService {
                 pane.detectChanges();
             }
         }
-        const notCollapsed = this.panes.filter(p => !p.collapsed);
-        const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
-            pane.forceExpand = allHaveFixedSize ? true : false;
-        });
+        this.syncPaneExpandState();
         return pane.collapsible;
     }
     togglePane(keyCode, index) {
@@ -2010,6 +2008,23 @@ class SplitterService {
         this.containerSize = containerSize;
         this.rtl = direction === 'rtl';
     }
+    syncPaneExpandState() {
+        if (!this.panes) {
+            return;
+        }
+        const notCollapsed = this.panes.filter(p => !p.collapsed);
+        const someAreCollapsed = notCollapsed.length < this.panes.length;
+        const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
+        // A pane is flexible when it is resizable or collapsible, meaning it can absorb extra space.
+        const someAreFlexible = notCollapsed.some(p => p.resizable || p.collapsible);
+        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+            // Force-expand only when a pane is collapsed (space needs redistribution),
+            // all visible panes have a fixed size, and either no flexible pane exists
+            // or this pane itself is flexible and can absorb the extra space.
+            // When no pane is collapsed, sizes are balanced and no expansion is needed.
+            pane.forceExpand = someAreCollapsed && allHaveFixedSize && (!someAreFlexible || pane.resizable || pane.collapsible);
+        });
+    }
     containerSize = () => { };
     rtl;
     isPercent(size) {
@@ -2151,11 +2166,7 @@ class SplitterPaneComponent {
             // Trigger the same forceExpand logic that tryToggle does
             // This ensures remaining panes expand when a pane is collapsed
             if (this.splitterService?.panes) {
-                const notCollapsed = this.splitterService.panes.filter(p => !p.collapsed);
-                const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-                notCollapsed.filter(p => p.fixedSize).forEach(pane => {
-                    pane.forceExpand = allHaveFixedSize;
-                });
+                this.splitterService.syncPaneExpandState();
             }
         }
     }
@@ -2207,7 +2218,34 @@ class SplitterPaneComponent {
     /**
      * @hidden
      */
-    forceExpand = false;
+    set forceExpand(value) {
+        if (this._forceExpand === value) {
+            return;
+        }
+        this._forceExpand = value;
+        // Enforce min/max constraints during flex redistribution so panes
+        // do not exceed their bounds when absorbing a collapsed pane's space.
+        const sizeProp = this.orientation === 'vertical' ? 'height' : 'width';
+        if (value) {
+            if (this.max) {
+                this.renderer.setStyle(this.nativeElement, `max-${sizeProp}`, this.max);
+            }
+            if (this.min) {
+                this.renderer.setStyle(this.nativeElement, `min-${sizeProp}`, this.min);
+            }
+        }
+        else {
+            if (this.max) {
+                this.renderer.removeStyle(this.nativeElement, `max-${sizeProp}`);
+            }
+            if (this.min) {
+                this.renderer.removeStyle(this.nativeElement, `min-${sizeProp}`);
+            }
+        }
+    }
+    get forceExpand() {
+        return this._forceExpand;
+    }
     /**
      * @hidden
      */
@@ -2216,6 +2254,7 @@ class SplitterPaneComponent {
     _order;
     _splitterBarAttributes;
     _collapsed = false;
+    _forceExpand = false;
     constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;
@@ -2377,8 +2416,9 @@ class SplitterBarComponent {
     ariaLabel = 'Splitter pane';
     focused = false;
     get hostOrientation() {
-        return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        return this.orientation === 'horizontal' ? 'vertical' : null;
     }
+    ariaKeyShortcuts = 'ArrowLeft ArrowRight ArrowUp ArrowDown';
     get tabIndex() {
         return this.splitterService.isStatic(this.index) ? -1 : 0;
     }
@@ -2488,10 +2528,10 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
-            'caret-alt-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
-            'caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
-            'caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
+            'chevron-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'chevron-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
+            'chevron-up': isCollapsible && !isHorizontal && !isCollapsed,
+            'chevron-down': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     previousSVGArrowClass() {
@@ -2501,16 +2541,16 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
-            return caretAltLeftIcon;
+            return chevronLeftIcon;
         }
         if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
-            return caretAltRightIcon;
+            return chevronRightIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
-            return caretAltUpIcon;
+            return chevronUpIcon;
         }
         if (isCollapsible && !isHorizontal && isCollapsed) {
-            return caretAltDownIcon;
+            return chevronDownIcon;
         }
     }
     nextArrowClass() {
@@ -2520,10 +2560,10 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
-            'caret-alt-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
-            'caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
-            'caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
+            'chevron-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'chevron-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
+            'chevron-down': isCollapsible && !isHorizontal && !isCollapsed,
+            'chevron-up': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     nextSVGArrowClass() {
@@ -2533,16 +2573,16 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
-            return caretAltRightIcon;
+            return chevronRightIcon;
         }
         if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
-            return caretAltLeftIcon;
+            return chevronLeftIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
-            return caretAltDownIcon;
+            return chevronDownIcon;
         }
         if (isCollapsible && !isHorizontal && isCollapsed) {
-            return caretAltUpIcon;
+            return chevronUpIcon;
         }
     }
     togglePane() {
@@ -2587,7 +2627,7 @@ class SplitterBarComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         @if (shouldShowIcon('prev')) {
           <div class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
@@ -2597,7 +2637,7 @@ class SplitterBarComponent {
             ></kendo-icon-wrapper>
           </div>
         }
-        <div class="k-resize-handle"></div>
+        <div class="k-resize-handle" aria-hidden="true"></div>
         @if (shouldShowIcon('next')) {
           <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
@@ -2623,7 +2663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             ></kendo-icon-wrapper>
           </div>
         }
-        <div class="k-resize-handle"></div>
+        <div class="k-resize-handle" aria-hidden="true"></div>
         @if (shouldShowIcon('next')) {
           <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
@@ -2651,6 +2691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], hostOrientation: [{
                 type: HostBinding,
                 args: ['attr.aria-orientation']
+            }], ariaKeyShortcuts: [{
+                type: HostBinding,
+                args: ['attr.aria-keyshortcuts']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -3500,10 +3543,10 @@ const HIDDEN_CLASS = 'k-hidden';
  * @hidden
  */
 const DIRECTION_CLASSES = {
-    left: 'caret-alt-left',
-    right: 'caret-alt-right',
-    up: 'caret-alt-up',
-    down: 'caret-alt-down'
+    left: 'chevron-left',
+    right: 'chevron-right',
+    up: 'chevron-up',
+    down: 'chevron-down'
 };
 /**
  * @hidden
@@ -3725,10 +3768,10 @@ class TabStripScrollableButtonComponent {
     get svgIcon() {
         return this.scrollButtonSVGIcon;
     }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
-    caretAltUpIcon = caretAltUpIcon;
-    caretAltDownIcon = caretAltDownIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
+    chevronUpIcon = chevronUpIcon;
+    chevronDownIcon = chevronDownIcon;
     subs = new Subscription();
     constructor(host, renderer, ngZone, localization) {
         this.host = host;
@@ -3757,16 +3800,22 @@ class TabStripScrollableButtonComponent {
         this.onClick.emit(buttonType);
     };
     get scrollButtonIconClass() {
-        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                DIRECTION_CLASSES.left :
-                DIRECTION_CLASSES.right :
-            DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                DIRECTION_CLASSES.right :
-                DIRECTION_CLASSES.left :
-            DIRECTION_CLASSES.down;
+        const horizontal = isTablistHorizontal(this.tabPosition);
+        const rtl = this.localization.rtl;
+        let defaultPrevIcon;
+        if (!horizontal) {
+            defaultPrevIcon = DIRECTION_CLASSES.up;
+        }
+        else {
+            defaultPrevIcon = rtl ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.left;
+        }
+        let defaultNextIcon;
+        if (!horizontal) {
+            defaultNextIcon = DIRECTION_CLASSES.down;
+        }
+        else {
+            defaultNextIcon = rtl ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.right;
+        }
         if (typeof this.scrollable === 'object') {
             const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
             const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
@@ -3791,16 +3840,22 @@ class TabStripScrollableButtonComponent {
         }
     }
     get scrollButtonSVGIcon() {
-        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                this.caretAltLeftIcon :
-                this.caretAltRightIcon :
-            this.caretAltUpIcon;
-        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                this.caretAltRightIcon :
-                this.caretAltLeftIcon :
-            this.caretAltDownIcon;
+        const horizontal = isTablistHorizontal(this.tabPosition);
+        const rtl = this.localization.rtl;
+        let defaultPrevSVGIcon;
+        if (!horizontal) {
+            defaultPrevSVGIcon = this.chevronUpIcon;
+        }
+        else {
+            defaultPrevSVGIcon = rtl ? this.chevronRightIcon : this.chevronLeftIcon;
+        }
+        let defaultNextSVGIcon;
+        if (!horizontal) {
+            defaultNextSVGIcon = this.chevronDownIcon;
+        }
+        else {
+            defaultNextSVGIcon = rtl ? this.chevronLeftIcon : this.chevronRightIcon;
+        }
         if (typeof this.scrollable === 'object') {
             const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
             const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
@@ -3878,7 +3933,7 @@ class TabComponent {
         return this.tab.selected;
     }
     get disabledClass() {
-        return this.tab.disabled;
+        return this.tab.disabled || null;
     }
     get focusedClass() {
         return this.tab.focused;
@@ -3950,7 +4005,7 @@ class TabComponent {
         }
 
         @if (tabClosable) {
-          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+          <span class="k-remove-tab k-icon-button k-button k-button-xs k-rounded-md k-button-flat-base k-button-flat"
             (click)="closeTab(index)" [title]="closeButtonTitle">
             <kendo-icon-wrapper
               [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
@@ -3982,7 +4037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }
 
         @if (tabClosable) {
-          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+          <span class="k-remove-tab k-icon-button k-button k-button-xs k-rounded-md k-button-flat-base k-button-flat"
             (click)="closeTab(index)" [title]="closeButtonTitle">
             <kendo-icon-wrapper
               [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
@@ -4583,7 +4638,8 @@ class TabStripComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.tabstrip'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TabStripComponent) }
         ], queries: [{ propertyName: "tabs", predicate: TabStripTabComponent }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true }, { propertyName: "tabHeaderContainers", predicate: ["tabHeaderContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoTabStrip"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTabStripLocalizedMessages
           i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
@@ -4657,7 +4713,7 @@ class TabStripComponent {
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : null"
               >
               @for (tab of tabs; track tab; let i = $index) {
                 <li
@@ -4728,9 +4784,9 @@ class TabStripComponent {
                             [tabIndex]="0"
                             role="tabpanel"
                             [id]="getTabPanelId(i)"
-                            [attr.aria-hidden]="!tab.selected"
+                            [attr.aria-hidden]="!tab.selected || null"
                             [attr.aria-labelledby]="getTabId(i)"
-                            [attr.aria-disabled]="tab.disabled"
+                            [attr.aria-disabled]="tab.disabled || null"
                         >
                             <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
                         </div>
@@ -4773,7 +4829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.tabstrip'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TabStripComponent) }
                     ],
                     exportAs: 'kendoTabStrip',
                     selector: 'kendo-tabstrip',
@@ -4850,7 +4907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : null"
               >
               @for (tab of tabs; track tab; let i = $index) {
                 <li
@@ -4921,9 +4978,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             [tabIndex]="0"
                             role="tabpanel"
                             [id]="getTabPanelId(i)"
-                            [attr.aria-hidden]="!tab.selected"
+                            [attr.aria-hidden]="!tab.selected || null"
                             [attr.aria-labelledby]="getTabId(i)"
-                            [attr.aria-disabled]="tab.disabled"
+                            [attr.aria-disabled]="tab.disabled || null"
                         >
                             <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
                         </div>
@@ -5295,148 +5352,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }] });
 
-/**
- * @hidden
- */
-function miniExpandPush(duration, width, miniWidth) {
-    return [
-        style({ overflow: 'hidden', flexBasis: `${miniWidth}px` }),
-        animate(`${duration}ms ease-in`, style({ flexBasis: `${width}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function miniCollapsePush(duration, width, miniWidth) {
-    return [
-        style({ overflow: 'hidden', flexBasis: `${width}px` }),
-        animate(`${duration}ms ease-in`, style({ flexBasis: `${miniWidth}px` }))
-    ];
-}
-/**
- * @hidden
- *
- */
-function miniExpandOverlay(duration, width, miniWidth) {
-    return [
-        style({ width: `${miniWidth}px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', width: `${width}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function expandPush(duration, width) {
-    return [
-        style({ overflow: 'hidden', flexBasis: '0px' }),
-        animate(`${duration}ms ease-in`, style({ flexBasis: `${width}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function collapsePush(duration, width) {
-    return [
-        style({ flexBasis: `${width}px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', flexBasis: `0px` }))
-    ];
-}
-/**
- * @hidden
- */
-function expandRTLOverlay(duration, width) {
-    return [
-        style({ marginRight: `-${width}px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', marginRight: `0px` }))
-    ];
-}
-/**
- * @hidden
- */
-function expandOverlay(duration, width, position) {
-    const marginProp = position !== 'end' ? 'marginLeft' : 'marginRight';
-    return [
-        style({ [marginProp]: `-${width}px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', [marginProp]: `0px` }))
-    ];
-}
-/**
- * @hidden
- */
-function miniCollapseOverlay(duration, width, miniWidth) {
-    return [
-        style({ width: `${width}px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', width: `${miniWidth}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function collapseOverlay(duration, width, position) {
-    const marginProp = position !== 'end' ? 'marginLeft' : 'marginRight';
-    return [
-        style({ [marginProp]: `0px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', [marginProp]: `-${width}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function collapseRTLOverlay(duration, width) {
-    return [
-        style({ marginRight: `0px` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', marginRight: `-${width}px` }))
-    ];
-}
-/**
- * @hidden
- */
-function expandAnimation(settings) {
-    const duration = settings.animation.duration;
-    const width = settings.width;
-    const miniWidth = settings.miniWidth;
-    const mode = settings.mode;
-    const mini = settings.mini;
-    const rtl = settings.rtl;
-    const position = settings.position;
-    if (mini && mode === 'push') {
-        return miniExpandPush(duration, width, miniWidth);
-    }
-    if (!mini && mode === 'push') {
-        return expandPush(duration, width);
-    }
-    if (!mini && mode === 'overlay') {
-        return rtl ? expandRTLOverlay(duration, width) : expandOverlay(duration, width, position);
-    }
-    if (mini && mode === 'overlay') {
-        return miniExpandOverlay(duration, width, miniWidth);
-    }
-}
-/**
- * @hidden
- */
-function collapseAnimation(settings) {
-    const duration = settings.animation.duration;
-    const width = settings.width;
-    const miniWidth = settings.miniWidth;
-    const mode = settings.mode;
-    const mini = settings.mini;
-    const rtl = settings.rtl;
-    const position = settings.position;
-    if (mini && mode === 'push') {
-        return miniCollapsePush(duration, width, miniWidth);
-    }
-    if (!mini && mode === 'push') {
-        return collapsePush(duration, width);
-    }
-    if (!mini && mode === 'overlay') {
-        return rtl ? collapseRTLOverlay(duration, width) : collapseOverlay(duration, width, position);
-    }
-    if (mini && mode === 'overlay') {
-        return miniCollapseOverlay(duration, width, miniWidth);
-    }
-}
-
 /**
  * @hidden
  */
@@ -5861,8 +5776,6 @@ const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
  * ```
  */
 class DrawerComponent {
-    element;
-    builder;
     localizationService;
     drawerService;
     hostClasses = true;
@@ -5872,33 +5785,6 @@ class DrawerComponent {
     get endPositionClass() {
         return this.position === 'end';
     }
-    get overlayMarginLeft() {
-        if (!this.shouldApplyOverlayMargin()) {
-            return null;
-        }
-        if (this.rtl || this.position === 'end') {
-            return null;
-        }
-        return `-${this.drawerWidth}px`;
-    }
-    get overlayMarginRight() {
-        if (!this.shouldApplyOverlayMargin()) {
-            return null;
-        }
-        if (!this.rtl && this.position !== 'end') {
-            return null;
-        }
-        return `-${this.drawerWidth}px`;
-    }
-    get flexStyles() {
-        if (this.mode === 'overlay') {
-            return;
-        }
-        if (!this.expanded && !this.minimized) {
-            return 0;
-        }
-        return this.drawerWidth;
-    }
     /**
      * Specifies the mode in which the Drawer displays.
      *
@@ -5933,10 +5819,9 @@ class DrawerComponent {
     width = 240;
     /**
      * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
-     *
-     * @default 50
+     * By default, the mini view width is determined by the used Kendo Theme.
      */
-    miniWidth = 50;
+    miniWidth;
     /**
      * Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
      *
@@ -6016,12 +5901,11 @@ class DrawerComponent {
      */
     licenseMessage;
     viewItems;
-    animationEnd = new EventEmitter();
+    pendingToggle = null;
+    animatingViaToggle = false;
     dynamicRTLSubscription;
     rtl = false;
-    constructor(element, builder, localizationService, drawerService) {
-        this.element = element;
-        this.builder = builder;
+    constructor(localizationService, drawerService) {
         this.localizationService = localizationService;
         this.drawerService = drawerService;
         const isValid = validatePackage(packageMetadata);
@@ -6034,17 +5918,26 @@ class DrawerComponent {
         this.drawerService.owner = this;
     }
     ngOnChanges(changes) {
-        if (changes && changes['items']) {
+        if (changes?.['items']) {
             this.drawerService.resetSelection();
             this.drawerService.init();
             this.viewItems = this.drawerService.view;
         }
+        if (changes?.['expanded']) {
+            this.animatingViaToggle = false;
+        }
     }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    get listExpanded() {
+        return this.expanded || (this.animatingViaToggle && this.pendingToggle === false);
+    }
     /**
      * @hidden
      */
@@ -6057,6 +5950,51 @@ class DrawerComponent {
     get drawerWidth() {
         return this.minimized ? this.miniWidth : this.width;
     }
+    /**
+     * @hidden
+     */
+    get drawerWrapperStyle() {
+        const styles = {};
+        const slidesLeft = (!this.rtl && this.position === 'start') || (this.rtl && this.position === 'end');
+        if (this.expanded) {
+            styles['width'] = `${this.width}px`;
+        }
+        else if (this.mini) {
+            if (isPresent(this.miniWidth)) {
+                styles['width'] = `${this.miniWidth}px`;
+            }
+        }
+        else {
+            styles['width'] = '0';
+        }
+        if (this.mode === 'overlay') {
+            if (this.minimized) {
+                styles['transform'] = 'translateX(0%)';
+            }
+            else if (this.expanded) {
+                styles['opacity'] = '1';
+                styles['transform'] = 'translateX(0px)';
+            }
+            else {
+                styles['opacity'] = '0';
+                styles['transform'] = slidesLeft ? 'translateX(-100%)' : 'translateX(100%)';
+            }
+        }
+        else {
+            styles['opacity'] = (this.expanded || this.minimized) ? '1' : '0';
+        }
+        if (this.animation && this.animatingViaToggle) {
+            const animationSettings = typeof this.animation === 'boolean' ? DEFAULT_ANIMATION : this.animation;
+            const duration = animationSettings.duration;
+            if (this.mini) {
+                styles['transition'] = `width ${duration}ms`;
+            }
+            else {
+                styles['transition'] = `all ${duration}ms`;
+            }
+        }
+        return styles;
+    }
     /**
      * Toggles the visibility of the Drawer.
      * If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
@@ -6069,20 +6007,16 @@ class DrawerComponent {
         if (current === previous) {
             return;
         }
-        if (current === true) {
-            this.setExpanded(true);
-        }
-        else if (current === false && !this.animation) {
-            this.setExpanded(false);
-        }
-        if (this.animation) {
-            this.animationEnd.pipe(take(1))
-                .subscribe(() => { this.onAnimationEnd(current); });
-            this.animate(current);
-        }
-        else {
+        this.animatingViaToggle = true;
+        this.setExpanded(current);
+        const anim = this.animation && typeof this.animation !== 'boolean' ? this.animation : DEFAULT_ANIMATION;
+        const duration = this.animation ? anim.duration : 0;
+        if (!this.animation || duration === 0) {
+            this.animatingViaToggle = false;
             this[current ? 'expand' : 'collapse'].emit();
+            return;
         }
+        this.pendingToggle = current;
     }
     /**
      * @hidden
@@ -6090,59 +6024,39 @@ class DrawerComponent {
     onSelect(e) {
         this.select.emit(Object.assign(e, { sender: this }));
     }
-    onAnimationEnd(currentExpanded) {
-        if (currentExpanded) {
-            this.expand.emit();
+    /**
+     * @hidden
+     */
+    onTransitionEnd(event) {
+        if (this.pendingToggle === null) {
+            return;
         }
-        else {
-            this.setExpanded(false);
-            this.collapse.emit();
+        if (event.target !== event.currentTarget) {
+            return;
         }
+        const wasExpanding = this.pendingToggle;
+        this.pendingToggle = null;
+        this.animatingViaToggle = false;
+        this[wasExpanding ? 'expand' : 'collapse'].emit();
     }
     setExpanded(value) {
         this.expanded = value;
         this.expandedChange.emit(value);
     }
-    shouldApplyOverlayMargin() {
-        return this.mode !== 'push' && !this.expanded && !this.minimized;
-    }
-    animate(expanded) {
-        const settings = {
-            mode: this.mode,
-            mini: this.mini,
-            miniWidth: this.miniWidth,
-            width: this.width,
-            rtl: this.rtl,
-            position: this.position,
-            animation: (typeof this.animation !== 'boolean') ? this.animation : DEFAULT_ANIMATION
-        };
-        const animation = expanded ? expandAnimation(settings) : collapseAnimation(settings);
-        const player = this.createPlayer(animation, this.element.nativeElement);
-        player.play();
-    }
-    createPlayer(animation, animatedElement) {
-        const factory = this.builder.build(animation);
-        let player = factory.create(animatedElement);
-        player.onDone(() => {
-            if (player) {
-                this.animationEnd.emit();
-                player.destroy();
-                player = null;
-            }
-        });
-        return player;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.marginLeft": "this.overlayMarginLeft", "style.marginRight": "this.overlayMarginRight", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             DrawerService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.drawer'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DrawerComponent) }
         ], queries: [{ propertyName: "drawerTemplate", first: true, predicate: DrawerTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: DrawerHeaderTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: DrawerItemTemplateDirective, descendants: true }], exportAs: ["kendoDrawer"], usesOnChanges: true, ngImport: i0, template: `
-        @if (expanded || mini) {
-          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+        @if (expanded || mini || animation) {
+          <div class="k-drawer-wrapper"
+            [style]="drawerWrapperStyle"
+            (transitionend)="onTransitionEnd($event)">
             @if (!drawerTemplate) {
               @if (headerTemplate) {
                 <ng-template
@@ -6154,7 +6068,7 @@ class DrawerComponent {
                 aria-orientation="vertical"
                 (select)="onSelect($event)"
                 [mini]="mini"
-                [expanded]="expanded"
+                [expanded]="listExpanded"
                 [(view)]="viewItems"
                 [itemTemplate]="itemTemplate?.templateRef"
                 class="k-drawer-items">
@@ -6188,12 +6102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.drawer'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DrawerComponent) }
                     ],
                     selector: 'kendo-drawer',
                     template: `
-        @if (expanded || mini) {
-          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+        @if (expanded || mini || animation) {
+          <div class="k-drawer-wrapper"
+            [style]="drawerWrapperStyle"
+            (transitionend)="onTransitionEnd($event)">
             @if (!drawerTemplate) {
               @if (headerTemplate) {
                 <ng-template
@@ -6205,7 +6122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 aria-orientation="vertical"
                 (select)="onSelect($event)"
                 [mini]="mini"
-                [expanded]="expanded"
+                [expanded]="listExpanded"
                 [(view)]="viewItems"
                 [itemTemplate]="itemTemplate?.templateRef"
                 class="k-drawer-items">
@@ -6231,7 +6148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }], propDecorators: { hostClasses: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: DrawerService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-drawer']
             }], startPositionClass: [{
@@ -6240,15 +6157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], endPositionClass: [{
                 type: HostBinding,
                 args: ['class.k-drawer-end']
-            }], overlayMarginLeft: [{
-                type: HostBinding,
-                args: ['style.marginLeft']
-            }], overlayMarginRight: [{
-                type: HostBinding,
-                args: ['style.marginRight']
-            }], flexStyles: [{
-                type: HostBinding,
-                args: ['style.flexBasis.px']
             }], mode: [{
                 type: Input
             }], position: [{
@@ -6956,6 +6864,7 @@ class StepperStepComponent {
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
           [attr.title]='step.label'
+          [attr.aria-label]='step.label'
           [attr.aria-disabled]='step.disabled'
           [attr.aria-current]='index === current ? "step" : null'
           (focus)='onFocus()'
@@ -6971,7 +6880,6 @@ class StepperStepComponent {
             @if (showIndicator) {
               <span
                 class='k-step-indicator'
-                aria-hidden='true'
                 [style.transition-duration.ms]='transitionDuration'
                 >
                 @if (indicatorTemplate) {
@@ -7035,6 +6943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
           [attr.title]='step.label'
+          [attr.aria-label]='step.label'
           [attr.aria-disabled]='step.disabled'
           [attr.aria-current]='index === current ? "step" : null'
           (focus)='onFocus()'
@@ -7050,7 +6959,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             @if (showIndicator) {
               <span
                 class='k-step-indicator'
-                aria-hidden='true'
                 [style.transition-duration.ms]='transitionDuration'
                 >
                 @if (indicatorTemplate) {
@@ -7622,7 +7530,8 @@ class StepperComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.stepper'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => StepperComponent) }
         ], queries: [{ propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true }, { propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true }], exportAs: ["kendoStepper"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoStepperLocalizedMessages
           i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
@@ -7651,7 +7560,7 @@ class StepperComponent {
           (listClick)="onListClick($event)">
         </ol>
 
-        @if (steps.length > 0) {
+        @if (steps.length > 1) {
           <kendo-progressbar
             [attr.aria-hidden]='true'
             [animation]='progressAnimation'
@@ -7661,9 +7570,10 @@ class StepperComponent {
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
+            <kendo-progressbar-messages progressBarLabel="progress"></kendo-progressbar-messages>
           </kendo-progressbar>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -7675,7 +7585,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.stepper'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => StepperComponent) }
                     ],
                     selector: 'kendo-stepper',
                     template: `
@@ -7706,7 +7617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           (listClick)="onListClick($event)">
         </ol>
 
-        @if (steps.length > 0) {
+        @if (steps.length > 1) {
           <kendo-progressbar
             [attr.aria-hidden]='true'
             [animation]='progressAnimation'
@@ -7716,11 +7627,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
+            <kendo-progressbar-messages progressBarLabel="progress"></kendo-progressbar-messages>
           </kendo-progressbar>
         }
         `,
                     standalone: true,
-                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent]
+                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent, ProgressBarCustomMessagesComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: StepperService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -8072,7 +7984,7 @@ class AvatarComponent {
     _fillMode = undefined;
     _rounded = undefined;
     _svgIcon;
-    _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base', 'k-avatar-info', 'k-avatar-success', 'k-avatar-warning', 'k-avatar-error', 'k-avatar-dark', 'k-avatar-light', 'k-avatar-inverse'];
+    _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base'];
     constructor(localization, renderer, element) {
         this.localization = localization;
         this.renderer = renderer;
@@ -9041,6 +8953,9 @@ class ExpansionPanelComponent {
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
+    get disabledClass() {
+        return this.disabled;
+    }
     direction;
     /**
      * @hidden
@@ -9245,8 +9160,8 @@ class ExpansionPanelComponent {
     removeContentHiddenClass() {
         this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -9256,8 +9171,7 @@ class ExpansionPanelComponent {
         <div
           #header
           [class.k-expander-header]="true"
-          [class.k-disabled]="disabled"
-          [attr.aria-disabled]="disabled"
+          [attr.aria-disabled]="disabled || null"
           [attr.aria-expanded]="expanded && !disabled"
           role="button"
           tabindex="0"
@@ -9290,7 +9204,7 @@ class ExpansionPanelComponent {
           </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+          <div class="k-expander-content">
             <ng-content></ng-content>
           </div>
         </div>
@@ -9312,8 +9226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         <div
           #header
           [class.k-expander-header]="true"
-          [class.k-disabled]="disabled"
-          [attr.aria-disabled]="disabled"
+          [attr.aria-disabled]="disabled || null"
           [attr.aria-expanded]="expanded && !disabled"
           role="button"
           tabindex="0"
@@ -9346,7 +9259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+          <div class="k-expander-content">
             <ng-content></ng-content>
           </div>
         </div>
@@ -9354,7 +9267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [NgTemplateOutlet, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i1$2.AnimationBuilder }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -9395,6 +9308,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], expandedClass: [{
                 type: HostBinding,
                 args: ['class.k-expanded']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -10415,18 +10331,12 @@ class TileLayoutItemComponent {
     resizable = true;
     itemClass = true;
     hostRole = 'listitem';
-    get hostDropEffect() {
-        return this.isResizable || this.isReorderable ? 'execute' : undefined;
-    }
     get hostTabindex() {
         return this.isNavigable ? '0' : undefined;
     }
     get ariaKeyShortcuts() {
         return this.isNavigable ? 'Enter' : undefined;
     }
-    get hostGrabbed() {
-        return this.isResizable || this.isReorderable;
-    }
     get hostLabelledBy() {
         return this.title ? this.titleId : undefined;
     }
@@ -10552,7 +10462,7 @@ class TileLayoutItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
         @if (title) {
           <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
@@ -10621,18 +10531,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], hostDropEffect: [{
-                type: HostBinding,
-                args: ['attr.aria-dropeffect']
             }], hostTabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
             }], ariaKeyShortcuts: [{
                 type: HostBinding,
                 args: ['attr.aria-keyshortcuts']
-            }], hostGrabbed: [{
-                type: HostBinding,
-                args: ['attr.aria-grabbed']
             }], hostLabelledBy: [{
                 type: HostBinding,
                 args: ['attr.aria-labelledby']
@@ -11832,13 +11736,19 @@ class TimelineCardComponent {
         }
     }
     get role() {
-        return this.orientation === 'vertical' ? 'button' : 'tabpanel';
+        if (this.orientation === 'vertical') {
+            return 'button';
+        }
+        return this.event ? 'tabpanel' : null;
+    }
+    get ariaCardLabel() {
+        return this.orientation === 'horizontal' && this.event ? this.event.subtitle : null;
     }
     get ariaLive() {
         return this.orientation === 'vertical' ? 'polite' : null;
     }
     get ariaExpanded() {
-        return this.orientation === 'vertical' ? this.expanded : null;
+        return this.orientation === 'vertical' && this.collapsible ? this.expanded : null;
     }
     calloutSvgIcon = chevronRightIcon;
     calloutFontIcon = 'arrow-chevron-right';
@@ -11912,6 +11822,7 @@ class TimelineCardComponent {
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
+          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -11940,16 +11851,13 @@ class TimelineCardComponent {
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <button
-                        kendoButton
-                        [icon]="calloutFontIcon"
-                        [svgIcon]="calloutSvgIcon"
-                        class="k-event-collapse"
-                        fillMode="flat"
-                        [attr.aria-hidden]="true"
-                        tabindex="-1"
-                        type="button"
-                      ></button>
+                      <span class="k-event-collapse k-button k-button-flat k-button-xs k-icon-button">
+                        <kendo-icon-wrapper
+                          [name]="calloutFontIcon"
+                          [svgIcon]="calloutSvgIcon"
+                          innerCssClass="k-button-icon">
+                        </kendo-icon-wrapper>
+                      </span>
                     }
                   </div>
                 }
@@ -12016,7 +11924,7 @@ class TimelineCardComponent {
             </div>
           }
         </kendo-card>
-        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
             trigger('toggle', [
                 state('collapsed', style({
                     height: '0',
@@ -12064,6 +11972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
+          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -12092,16 +12001,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <button
-                        kendoButton
-                        [icon]="calloutFontIcon"
-                        [svgIcon]="calloutSvgIcon"
-                        class="k-event-collapse"
-                        fillMode="flat"
-                        [attr.aria-hidden]="true"
-                        tabindex="-1"
-                        type="button"
-                      ></button>
+                      <span class="k-event-collapse k-button k-button-flat k-button-xs k-icon-button">
+                        <kendo-icon-wrapper
+                          [name]="calloutFontIcon"
+                          [svgIcon]="calloutSvgIcon"
+                          innerCssClass="k-button-icon">
+                        </kendo-icon-wrapper>
+                      </span>
                     }
                   </div>
                 }
@@ -12170,7 +12076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </kendo-card>
         `,
                     standalone: true,
-                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
+                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, IconWrapperComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimelineService }, { type: i0.Renderer2 }], propDecorators: { event: [{
                 type: Input
@@ -12263,8 +12169,8 @@ class TimelineHorizontalComponent {
     trackWrapWidth;
     scrollableTrackWidth;
     cardWidth;
-    svgLeftIcon = caretAltLeftIcon;
-    svgRightIcon = caretAltRightIcon;
+    svgLeftIcon = chevronLeftIcon;
+    svgRightIcon = chevronRightIcon;
     calloutStyle;
     animationState = 'center';
     translateValue = 0;
@@ -12552,9 +12458,10 @@ class TimelineHorizontalComponent {
         });
     }
     assignAriaLabel(cardElement, dateElement) {
-        const dateLabelId = `k-${guid()}`;
-        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
-        this.renderer.setAttribute(cardElement, 'aria-label', dateLabelId);
+        const dateSpan = dateElement.querySelector('.k-timeline-date');
+        if (dateSpan) {
+            this.renderer.setAttribute(cardElement, 'aria-label', dateSpan.textContent.trim());
+        }
     }
     assignAriaDescribedBy(cardElement, dateElement) {
         const cardId = `k-${guid()}`;
@@ -12677,10 +12584,11 @@ class TimelineHorizontalComponent {
           <button
             kendoButton
             [svgIcon]="svgLeftIcon"
-            icon="caret-alt-left"
+            icon="chevron-left"
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
+            [attr.aria-hidden]="true"
             (click)="previousClick()"
             [disabled]="isFirstRange"
             tabindex="-1"
@@ -12689,10 +12597,11 @@ class TimelineHorizontalComponent {
           <button
             kendoButton
             [svgIcon]="svgRightIcon"
-            icon="caret-alt-right"
+            icon="chevron-right"
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"
+            [attr.aria-hidden]="true"
             (click)="nextClick()"
             [disabled]="isLastRange"
             tabindex="-1"
@@ -12777,7 +12686,7 @@ class TimelineHorizontalComponent {
           }
           <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
             trigger('trackSlide', [
                 state('left', style({
                     transform: `translateX({{transformValue}}%)`,
@@ -12831,10 +12740,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <button
             kendoButton
             [svgIcon]="svgLeftIcon"
-            icon="caret-alt-left"
+            icon="chevron-left"
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
+            [attr.aria-hidden]="true"
             (click)="previousClick()"
             [disabled]="isFirstRange"
             tabindex="-1"
@@ -12843,10 +12753,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <button
             kendoButton
             [svgIcon]="svgRightIcon"
-            icon="caret-alt-right"
+            icon="chevron-right"
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"
+            [attr.aria-hidden]="true"
             (click)="nextClick()"
             [disabled]="isLastRange"
             tabindex="-1"