@progress/kendo-angular-buttons 25.0.0-develop.2 → 25.0.0-develop.21

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

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, isDevMode, EventEmitter, HostListener, HostBinding, Output, Input, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, isDevMode, EventEmitter, signal, HostListener, HostBinding, Output, Input, Optional, ChangeDetectionStrategy, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, afterNextRender, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
 import * as i12 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, KENDO_WEBMCP_HOST, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, isSafari, hasObservers, KENDO_WEBMCP_HOST, provideComponentName, isChanged, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { chevronDownIcon, xCircleIcon, moreVerticalIcon, microphoneIcon, stopIcon, pasteSparkleIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
@@ -34,10 +34,10 @@ class KendoButtonService {
     click(button) {
         this.buttonClicked.next(button);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: KendoButtonService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: KendoButtonService, decorators: [{
             type: Injectable
         }] });
 
@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783688474,
-    version: '25.0.0-develop.2',
+    publishDate: 1785852409,
+    version: '25.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -199,7 +199,13 @@ class ButtonComponent {
      *
      * @default false
      */
-    toggleable = false;
+    set toggleable(value) {
+        this._toggleable.set(value);
+        this.toggleAriaPressed(value);
+    }
+    get toggleable() {
+        return this._toggleable();
+    }
     /**
      * Backwards-compatible alias
      *
@@ -221,10 +227,10 @@ class ButtonComponent {
      * @default false
      */
     get selected() {
-        return this._selected || false;
+        return this._selected() || false;
     }
     set selected(value) {
-        this._selected = value;
+        this._selected.set(value);
     }
     /**
      * @hidden
@@ -292,10 +298,10 @@ class ButtonComponent {
      */
     set size(size) {
         this.handleClasses(size, 'size');
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the Button.
@@ -303,10 +309,10 @@ class ButtonComponent {
      */
     set rounded(rounded) {
         this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the background and border styles of the Button.
@@ -314,10 +320,10 @@ class ButtonComponent {
      */
     set fillMode(fillMode) {
         this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets a predefined theme color for the Button.
@@ -326,10 +332,10 @@ class ButtonComponent {
      */
     set themeColor(themeColor) {
         this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        this._themeColor.set(themeColor);
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     /**
      * Sets an SVG icon to display inside the Button.
@@ -353,19 +359,26 @@ class ButtonComponent {
      */
     click = new EventEmitter();
     element;
-    isDisabled = false;
     chevronDownIcon = chevronDownIcon;
-    _size = undefined;
-    _rounded = undefined;
-    _fillMode = undefined;
-    _themeColor = undefined;
+    get isDisabled() {
+        return this._disabled();
+    }
+    set isDisabled(value) {
+        this._disabled.set(value);
+    }
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
     _focused = false;
-    direction;
-    _selected;
     subs = new Subscription();
     _iconClass;
     _icon;
     _svgIcon;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _toggleable = signal(false, ...(ngDevMode ? [{ debugName: "_toggleable" }] : []));
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     set isFocused(isFocused) {
         toggleClass('k-focus', isFocused, this.renderer, this.element);
         this._focused = isFocused;
@@ -381,10 +394,10 @@ class ButtonComponent {
         return this.isDisabled;
     }
     get classActive() {
-        return this.selected;
+        return this._selected();
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     /**
      * @hidden
@@ -412,8 +425,8 @@ class ButtonComponent {
         this.service = service;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
@@ -432,11 +445,6 @@ class ButtonComponent {
             }));
         });
     }
-    ngOnChanges(change) {
-        if (isChanged('togglable', change) || isChanged('toggleable', change)) {
-            this.toggleAriaPressed(this.toggleable);
-        }
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -536,8 +544,8 @@ class ButtonComponent {
             this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -546,8 +554,9 @@ class ButtonComponent {
             {
                 provide: KENDO_WEBMCP_HOST,
                 useExisting: ButtonComponent
-            }
-        ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
+            },
+            provideComponentName('button')
+        ], exportAs: ["kendoButton"], ngImport: i0, template: `
         <ng-template #iconTemplate>
             @if (icon || svgIcon) {
                 <kendo-icon-wrapper
@@ -586,11 +595,13 @@ class ButtonComponent {
             </span>
         }
 
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoButton',
                     providers: [
                         LocalizationService,
@@ -601,9 +612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: KENDO_WEBMCP_HOST,
                             useExisting: ButtonComponent
-                        }
+                        },
+                        provideComponentName('button')
                     ],
-                    selector: 'button[kendoButton]',
                     template: `
         <ng-template #iconTemplate>
             @if (icon || svgIcon) {
@@ -772,7 +783,7 @@ class ButtonGroupComponent {
      */
     set tabIndex(value) {
         this._tabIndex = value;
-        this.currentTabIndex = value;
+        this._currentTabIndex.set(value);
     }
     get tabIndex() {
         return this._tabIndex;
@@ -795,9 +806,9 @@ class ButtonGroupComponent {
     navigate = new EventEmitter();
     buttons;
     _tabIndex = 0;
-    currentTabIndex = 0;
+    _currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "_currentTabIndex" }] : []));
     lastFocusedIndex = -1;
-    direction;
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
     wrapperClasses = true;
     get disabledClass() {
@@ -808,7 +819,7 @@ class ButtonGroupComponent {
     }
     role = 'group';
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     get ariaDisabled() {
         return this.disabled;
@@ -820,14 +831,14 @@ class ButtonGroupComponent {
         if (this.disabled) {
             return undefined;
         }
-        return this.navigable ? this.currentTabIndex : undefined;
+        return this.navigable ? this._currentTabIndex() : undefined;
     }
     constructor(service, localization, renderer, element) {
         this.service = service;
         this.renderer = renderer;
         this.element = element;
         validatePackage(packageMetadata);
-        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
     }
     ngOnInit() {
         this.subs.add(this.service.buttonClicked$.subscribe((button) => {
@@ -846,7 +857,7 @@ class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             if (this.navigable) {
-                this.currentTabIndex = -1;
+                this._currentTabIndex.set(-1);
                 this.renderer.setAttribute(button, tabindex, '0');
             }
         }));
@@ -855,13 +866,13 @@ class ButtonGroupComponent {
         this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
             this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
             this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
+            this._currentTabIndex.set(this.tabIndex);
         });
         this.subs.add(fromEvent(this.element.nativeElement, 'focusout')
             .pipe(filter((event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement))
             .subscribe(() => {
             this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
+            this._currentTabIndex.set(this.tabIndex);
         }));
     }
     ngOnChanges(changes) {
@@ -875,10 +886,10 @@ class ButtonGroupComponent {
         if (isChanged('navigable', changes)) {
             if (changes['navigable'].currentValue) {
                 this.defocus(this.buttons.toArray());
-                this.currentTabIndex = 0;
+                this._currentTabIndex.set(0);
             }
             else {
-                this.currentTabIndex = -1;
+                this._currentTabIndex.set(-1);
                 this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
             }
         }
@@ -971,7 +982,7 @@ class ButtonGroupComponent {
             .subscribe(handler));
     }
     focusHandler = () => {
-        this.currentTabIndex = -1;
+        this._currentTabIndex.set(-1);
         this.defocus(this.buttons.toArray());
         const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
         const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
@@ -979,21 +990,24 @@ class ButtonGroupComponent {
             return i === index;
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
             KendoButtonService,
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.buttongroup'
-            }
+            },
+            provideComponentName('buttongroup')
         ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kendoButton]"></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-buttongroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoButtonGroup',
                     providers: [
                         KendoButtonService,
@@ -1001,9 +1015,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.buttongroup'
-                        }
+                        },
+                        provideComponentName('buttongroup')
                     ],
-                    selector: 'kendo-buttongroup',
                     template: `
         <ng-content select="[kendoButton]"></ng-content>
     `,
@@ -1064,8 +1078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class ChipComponent {
     element;
     renderer;
-    ngZone;
     localizationService;
+    ngZone;
     /**
      * Sets the label text of the Chip.
      *
@@ -1096,7 +1110,13 @@ class ChipComponent {
      * Specifies the selected state of the Chip.
      * @default false
      */
-    selected = false;
+    set selected(value) {
+        this._selected.set(value);
+        this.setAriSelected(value);
+    }
+    get selected() {
+        return this._selected();
+    }
     /**
      * Specifies if the Chip is removable.
      * If set to `true`, the Chip renders a remove icon.
@@ -1201,15 +1221,17 @@ class ChipComponent {
         return this.disabled || null;
     }
     get selectedClass() {
-        return this.selected;
+        return this._selected();
     }
     get focusedClass() {
-        return this.focused;
+        return this._focused();
     }
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * @hidden
      */
@@ -1226,33 +1248,27 @@ class ChipComponent {
     _rounded = undefined;
     _fillMode = undefined;
     _themeColor = undefined;
-    focused = false;
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
-    constructor(element, renderer, ngZone, localizationService) {
+    constructor(element, renderer, localizationService, ngZone) {
         this.element = element;
         this.renderer = renderer;
-        this.ngZone = ngZone;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localizationService.rtl ? 'rtl' : 'ltr');
     }
     ngOnInit() {
         this.subs.add(this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
-        this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
+        this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this._selected()}`);
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    ngOnChanges(changes) {
-        if (changes?.['selected']) {
-            const hasAriaSelected = this.element.nativeElement.hasAttribute('aria-selected');
-            if (!hasAriaSelected) {
-                this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
-            }
-        }
-    }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
         this.attachElementEventHandlers(chip);
@@ -1380,14 +1396,21 @@ class ChipComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+    setAriSelected(value) {
+        const hasAriaSelected = this.element?.nativeElement.hasAttribute('aria-selected');
+        if (!hasAriaSelected) {
+            this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${value}`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.chip'
-            }
-        ], usesOnChanges: true, ngImport: i0, template: `
+            },
+            provideComponentName('chip')
+        ], ngImport: i0, template: `
         @if (icon || svgIcon) {
           <kendo-icon-wrapper
             size="small"
@@ -1452,12 +1475,13 @@ class ChipComponent {
             }
           </span>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (icon || svgIcon) {
           <kendo-icon-wrapper
@@ -1529,12 +1553,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.chip'
-                        }
+                        },
+                        provideComponentName('chip')
                     ],
                     standalone: true,
                     imports: [NgStyle, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -1623,7 +1648,9 @@ class ChipListComponent {
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * Sets the selection mode of the ChipList.
      *
@@ -1662,6 +1689,7 @@ class ChipListComponent {
     _size = undefined;
     subs = new Subscription();
     _navigable = true;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     /**
      * @hidden
      */
@@ -1712,11 +1740,11 @@ class ChipListComponent {
         this.element = element;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localizationService.rtl ? 'rtl' : 'ltr');
     }
     ngOnInit() {
         this.dynamicRTLSubscription = this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr'));
     }
     ngAfterViewInit() {
         const stylingInputs = ['size'];
@@ -1871,8 +1899,8 @@ class ChipListComponent {
             chip.sizeIsSet = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "attr.aria-multiselectable": "this.multiple", "attr.role": "this.role" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "attr.aria-multiselectable": "this.multiple", "attr.role": "this.role" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1880,12 +1908,13 @@ class ChipListComponent {
             }
         ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chiplist, kendo-chip-list',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <ng-content></ng-content>
     `,
@@ -1966,10 +1995,10 @@ class ButtonItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]',
@@ -2003,10 +2032,10 @@ class FocusService {
         this.focusedIndex = index;
         this.onFocus.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FocusService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
         }] });
 
@@ -2132,10 +2161,10 @@ class NavigationService {
             return args.current !== args.end ? args.current + args.step : args.end;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2148,10 +2177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class PopupContainerService {
     container;
     template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupContainerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -2200,10 +2229,10 @@ class FocusableDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoButtonFocusable]',
@@ -2252,8 +2281,8 @@ class ListComponent {
     onBlur() {
         this.onItemBlur.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
         <ul class="k-menu-group" role="list" [ngClass]="sizeClass">
           @for (dataItem of data; track dataItem; let index = $index; let isFirst = $first; let isLast = $last) {
             <li kendoButtonFocusable
@@ -2307,7 +2336,7 @@ class ListComponent {
         </ul>
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-button-list',
@@ -2388,7 +2417,7 @@ class ListButton extends MultiTabStop {
     focusService;
     navigationService;
     wrapperRef;
-    _zone;
+    zone;
     popupService;
     elRef;
     cdr;
@@ -2396,16 +2425,16 @@ class ListButton extends MultiTabStop {
     listId = guid();
     buttonId = guid();
     _data;
-    _open = false;
-    _disabled = false;
-    _active = false;
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
     _popupSettings = { animate: true, popupClass: '' };
     _isFocused = false;
     _itemClick;
     _blur;
     wrapper;
     subs = new Subscription();
-    direction;
+    direction = signal(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
     popupRef;
     popupSubs = new Subscription();
     button;
@@ -2420,10 +2449,10 @@ class ListButton extends MultiTabStop {
         if (value && this.openState) {
             this.openState = false;
         }
-        this._disabled = value;
+        this._disabled.set(value);
     }
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
@@ -2480,7 +2509,7 @@ class ListButton extends MultiTabStop {
      */
     get anchorAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -2490,18 +2519,18 @@ class ListButton extends MultiTabStop {
      */
     get popupAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
     }
     isClosePrevented = false;
-    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService) {
         super();
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapperRef = wrapperRef;
-        this._zone = _zone;
+        this.zone = zone;
         this.popupService = popupService;
         this.elRef = elRef;
         this.cdr = cdr;
@@ -2510,7 +2539,7 @@ class ListButton extends MultiTabStop {
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction.set(rtl ? 'rtl' : 'ltr'))));
         this.subscribeEvents();
     }
     ngOnChanges(changes) {
@@ -2534,7 +2563,7 @@ class ListButton extends MultiTabStop {
         return popupClasses.join(' ');
     }
     get openState() {
-        return this._open;
+        return this._open();
     }
     /**
      * @hidden
@@ -2543,19 +2572,19 @@ class ListButton extends MultiTabStop {
         if (this.disabled) {
             return;
         }
-        this._open = open;
+        this._open.set(open);
     }
     /**
      * Returns the current open state of the popup.
      */
     get isOpen() {
-        return this._open;
+        return this._open();
     }
     /**
      * @hidden
      */
     togglePopupVisibility() {
-        if (this._disabled) {
+        if (this._disabled()) {
             return;
         }
         this._toggle(!this.openState, true);
@@ -2596,11 +2625,11 @@ class ListButton extends MultiTabStop {
         }));
     }
     subscribeComponentBlurredEvent() {
-        this._zone.runOutsideAngular(() => {
+        this.zone.runOutsideAngular(() => {
             this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused), tap(() => this.focusButton())).subscribe(this.handleTab.bind(this)));
             this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper())));
+                .subscribe(() => this.zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
@@ -2639,7 +2668,7 @@ class ListButton extends MultiTabStop {
      * @hidden
      */
     keyHandler(event, keyEvent, isHost) {
-        if (this._disabled) {
+        if (this._disabled()) {
             return;
         }
         const eventData = event;
@@ -2706,8 +2735,8 @@ class ListButton extends MultiTabStop {
         this.blurWrapper();
     }
     onNavigationEnterUp(_args) {
-        if (!this._disabled && !this.openState) {
-            this._active = false;
+        if (!this._disabled() && !this.openState) {
+            this._active.set(false);
         }
         if (this.openState) {
             const focused = this.focusService.focused;
@@ -2724,7 +2753,7 @@ class ListButton extends MultiTabStop {
         }
     }
     onNavigationOpen() {
-        if (!this._disabled && !this.openState) {
+        if (!this._disabled() && !this.openState) {
             this.togglePopupVisibility();
         }
     }
@@ -2787,12 +2816,13 @@ class ListButton extends MultiTabStop {
             this.isClosePrevented = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ListButton, isStandalone: true, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ListButton, isStandalone: true, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListButton, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: ''
                 }]
         }], ctorParameters: () => [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }], propDecorators: { button: [{
@@ -2897,24 +2927,39 @@ class DropDownButtonComponent extends ListButton {
     /**
      * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#size). The default value is set by the Kendo theme.
      */
-    size = undefined;
+    set size(size) {
+        this._size.set(size);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#roundness). The default value is set by the Kendo theme.
      */
-    rounded = undefined;
+    set rounded(rounded) {
+        this._rounded.set(rounded);
+    }
+    get rounded() {
+        return this._rounded();
+    }
     /**
      * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#fill-mode). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        this._fillMode.set(fillMode === 'clear' ? 'flat' : fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#theme-colors).
      */
-    themeColor = undefined;
+    set themeColor(themeColor) {
+        this._themeColor.set(themeColor);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Sets attributes for the main button.
      */
@@ -2940,20 +2985,23 @@ class DropDownButtonComponent extends ListButton {
      */
     onBlur = new EventEmitter();
     get focused() {
-        return this._isFocused && !this._disabled;
+        return this._isFocused && !this._disabled();
     }
     hostDisplayStyle = 'inline-flex';
     get dir() {
-        return this.direction;
+        return this.direction();
     }
     /**
      * @hidden
      */
     get active() {
-        return this._active;
+        return this._active();
     }
     itemTemplate;
-    _fillMode = undefined;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -2963,10 +3011,10 @@ class DropDownButtonComponent extends ListButton {
         this.keyDownHandler(event, true);
         const code = normalizeKeys(event);
         if (code === Keys.Space) {
-            this._active = true;
+            this._active.set(true);
         }
         if (code === Keys.Enter) {
-            this._active = true;
+            this._active.set(true);
             event.preventDefault();
         }
     }
@@ -2975,27 +3023,27 @@ class DropDownButtonComponent extends ListButton {
      */
     keyup(event) {
         this.keyUpHandler(event);
-        this._active = false;
+        this._active.set(false);
     }
     /**
      * @hidden
      */
     mousedown(event) {
-        if (this._disabled) {
+        if (this._disabled()) {
             event.preventDefault();
         }
         else {
-            this._active = true;
+            this._active.set(true);
         }
     }
     /**
      * @hidden
      */
     mouseup(event) {
-        if (this._disabled) {
+        if (this._disabled()) {
             event.preventDefault();
         }
-        this._active = false;
+        this._active.set(false);
     }
     /**
      * @hidden
@@ -3038,7 +3086,7 @@ class DropDownButtonComponent extends ListButton {
         zone.runOutsideAngular(() => {
             this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
                 if (this.active) {
-                    zone.run(() => this._active = false);
+                    zone.run(() => this._active.set(false));
                 }
             });
         });
@@ -3056,7 +3104,7 @@ class DropDownButtonComponent extends ListButton {
      * @hidden
      */
     handleFocus(event) {
-        if (!this._disabled) {
+        if (!this._disabled()) {
             if (!this._isFocused) {
                 this.onFocus.emit();
             }
@@ -3098,8 +3146,8 @@ class DropDownButtonComponent extends ListButton {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "style.display": "this.hostDisplayStyle", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "style.display": "this.hostDisplayStyle", "attr.dir": "this.dir" } }, providers: [
             FocusService,
             NavigationService,
             NAVIGATION_SETTINGS_PROVIDER$2,
@@ -3108,7 +3156,8 @@ class DropDownButtonComponent extends ListButton {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.dropdownbutton'
             },
-            PopupContainerService
+            PopupContainerService,
+            provideComponentName('dropdownbutton')
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <button kendoButton #button
             type="button"
@@ -3153,11 +3202,13 @@ class DropDownButtonComponent extends ListButton {
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-dropdownbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoDropDownButton',
                     providers: [
                         FocusService,
@@ -3168,9 +3219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.dropdownbutton'
                         },
-                        PopupContainerService
+                        PopupContainerService,
+                        provideComponentName('dropdownbutton')
                     ],
-                    selector: 'kendo-dropdownbutton',
                     template: `
         <button kendoButton #button
             type="button"
@@ -3360,10 +3411,10 @@ class DialItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialItemTemplate]',
@@ -3393,10 +3444,10 @@ class FloatingActionButtonTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFloatingActionButtonTemplate]',
@@ -3467,8 +3518,8 @@ class DialItemComponent {
         };
         return directions[dir][align];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
         @if (dialItemTemplate) {
           <ng-template
             [ngTemplateOutlet]="dialItemTemplate"
@@ -3491,7 +3542,7 @@ class DialItemComponent {
         }
         `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoDialItem]',
@@ -3585,8 +3636,8 @@ class DialListComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
         @for (item of dialItems; track item; let idx = $index) {
           <li
             kendoButtonFocusable
@@ -3603,7 +3654,7 @@ class DialListComponent {
         }
         `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoDialList]',
@@ -3684,17 +3735,19 @@ class FloatingActionButtonComponent {
     element;
     focusService;
     navigationService;
-    ngZone;
     popupService;
     builder;
     localizationService;
+    ngZone;
     get fixedClass() {
         return this.positionMode === 'fixed';
     }
     get absoluteClass() {
         return this.positionMode === 'absolute';
     }
-    direction;
+    get direction() {
+        return this._direction();
+    }
     button;
     popupTemplate;
     dialItemTemplate;
@@ -3734,10 +3787,10 @@ class FloatingActionButtonComponent {
      * @default false
      */
     set disabled(disabled) {
-        this._disabled = disabled;
+        this._disabled.set(disabled);
     }
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     /**
      * Specifies the alignment of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#alignment)).
@@ -3847,9 +3900,10 @@ class FloatingActionButtonComponent {
     _themeColor = undefined;
     _size = undefined;
     _rounded = undefined;
-    _disabled = false;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
     _align = { horizontal: 'end', vertical: 'bottom' };
     _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subscriptions = new Subscription();
     popupMouseDownListener;
     rtl = false;
@@ -3857,20 +3911,21 @@ class FloatingActionButtonComponent {
     popupRef;
     initialSetup = true;
     focusChangedProgrammatically = false;
-    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
+    constructor(renderer, element, focusService, navigationService, popupService, builder, localizationService, ngZone) {
         this.renderer = renderer;
         this.element = element;
         this.focusService = focusService;
         this.navigationService = navigationService;
-        this.ngZone = ngZone;
         this.popupService = popupService;
         this.builder = builder;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
+        this._direction.set(this.localizationService.rtl ? 'rtl' : 'ltr');
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -3926,7 +3981,9 @@ class FloatingActionButtonComponent {
             return;
         }
         if (shouldOpen) {
-            setTimeout(() => this.openDial());
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.openDial());
+            });
         }
         else {
             this.closeDial();
@@ -4337,8 +4394,8 @@ class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
             FocusService,
             NavigationService,
             NAVIGATION_SETTINGS_PROVIDER$1,
@@ -4346,7 +4403,8 @@ class FloatingActionButtonComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.floatingactionbutton'
-            }
+            },
+            provideComponentName('floatingactionbutton')
         ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
         <button
             #button
@@ -4409,12 +4467,13 @@ class FloatingActionButtonComponent {
             >
           </ul>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatingactionbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         FocusService,
                         NavigationService,
@@ -4423,7 +4482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.floatingactionbutton'
-                        }
+                        },
+                        provideComponentName('floatingactionbutton')
                     ],
                     template: `
         <button
@@ -4491,7 +4551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [NgClass, EventsOutsideAngularDirective, NgTemplateOutlet, IconWrapperComponent, DialListComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }], propDecorators: { fixedClass: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { fixedClass: [{
                 type: HostBinding,
                 args: ['class.k-pos-fixed']
             }], absoluteClass: [{
@@ -4583,15 +4643,27 @@ class Messages extends ComponentMessages {
      * </kendo-splitbutton>
      * ```
      */
-    splitButtonLabel;
+    set splitButtonLabel(value) {
+        this._splitButtonLabel.set(value);
+    }
+    get splitButtonLabel() {
+        return this._splitButtonLabel();
+    }
     /**
      * Specifies the text for the SplitButton toggle button `aria-label`.
      */
-    toggleButtonLabel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
+    set toggleButtonLabel(value) {
+        this._toggleButtonLabel.set(value);
+    }
+    get toggleButtonLabel() {
+        return this._toggleButtonLabel();
+    }
+    _toggleButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_toggleButtonLabel" }] : []));
+    _splitButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitButtonLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: Messages, isStandalone: true, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-splitbutton-messages-base'
@@ -4615,13 +4687,13 @@ class SplitButtonCustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
                 provide: Messages,
                 useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
             }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -4643,15 +4715,15 @@ class LocalizedSplitButtonMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4734,30 +4806,40 @@ class SplitButtonComponent extends ListButton {
     /**
      * Configures the padding of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#size)). The default value is set by the Kendo theme.
      */
-    size = undefined;
+    set size(size) {
+        this._size.set(size);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Configures the border radius of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#rounded)). The default value is set by the Kendo theme.
      */
     set rounded(rounded) {
         this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Configures the background and border styles of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#fillmode)). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        this._fillMode.set(fillMode === 'clear' ? 'flat' : fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
-    themeColor = undefined;
+    set themeColor(themeColor) {
+        this._themeColor.set(themeColor);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Disables the SplitButton when set to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
@@ -4765,10 +4847,10 @@ class SplitButtonComponent extends ListButton {
         if (this.isOpen) {
             this.toggle(false);
         }
-        this._disabled = value;
+        this._disabled.set(value);
     }
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     /**
      * Configures the popup settings of the SplitButton.
@@ -4853,7 +4935,9 @@ class SplitButtonComponent extends ListButton {
      * Specifies a template to customize the content of the items in the drop-down list.
      */
     itemTemplate;
-    activeArrow = false;
+    get activeArrow() {
+        return this._activeArrow();
+    }
     listId = guid();
     /**
      * @hidden
@@ -4865,7 +4949,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get active() {
-        return this._active;
+        return this._active();
     }
     /**
      * @hidden
@@ -4873,30 +4957,33 @@ class SplitButtonComponent extends ListButton {
     get componentTabIndex() {
         return this.disabled ? -1 : this.tabIndex;
     }
-    buttonText = '';
+    buttonText = signal('', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
     arrowButtonClicked = false;
-    _rounded = undefined;
-    _fillMode = undefined;
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     _buttonAttributes = null;
+    _activeArrow = signal(false, ...(ngDevMode ? [{ debugName: "_activeArrow" }] : []));
     documentMouseUpSub;
     set isFocused(value) {
         this._isFocused = value;
     }
     get isFocused() {
-        return this._isFocused && !this._disabled && isDocumentAvailable() && this.wrapperContains(document.activeElement);
+        return this._isFocused && !this._disabled() && isDocumentAvailable() && this.wrapperContains(document.activeElement);
     }
     get widgetClasses() {
         return true;
     }
     get dir() {
-        return this.direction;
+        return this.direction();
     }
     /**
      * @hidden
      */
     get ariaLabel() {
         const localizationMsg = this.messageFor('splitButtonLabel') || '';
-        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
+        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText());
     }
     /**
      * @hidden
@@ -4908,7 +4995,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     onButtonFocus(event) {
-        if (!this._disabled) {
+        if (!this._disabled()) {
             if (!this._isFocused) {
                 this.onFocus.emit();
             }
@@ -4934,14 +5021,14 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     toggleButtonActiveState(enable) {
-        this._active = enable;
+        this._active.set(enable);
     }
     /**
      * @hidden
      */
     toggleArrowButtonActiveState(enable) {
         this.arrowButtonClicked = true;
-        this.activeArrow = enable;
+        this._activeArrow.set(enable);
     }
     /**
      * @hidden
@@ -4963,14 +5050,14 @@ class SplitButtonComponent extends ListButton {
     keydown(event) {
         this.keyDownHandler(event, true);
         if (event.code === Keys.Space) {
-            this._active = true;
+            this._active.set(true);
         }
     }
     /**
      * @hidden
      */
     keyup(event) {
-        this._active = false;
+        this._active.set(false);
         if (event.code !== Keys.Space) {
             this.keyUpHandler(event);
         }
@@ -5036,7 +5123,7 @@ class SplitButtonComponent extends ListButton {
      */
     get anchorAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -5046,7 +5133,7 @@ class SplitButtonComponent extends ListButton {
      */
     get popupAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -5085,10 +5172,10 @@ class SplitButtonComponent extends ListButton {
         zone.runOutsideAngular(() => {
             this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
                 if (this.active) {
-                    zone.run(() => this._active = false);
+                    zone.run(() => this._active.set(false));
                 }
                 if (this.activeArrow) {
-                    zone.run(() => this.activeArrow = false);
+                    zone.run(() => this._activeArrow.set(false));
                 }
             });
         });
@@ -5105,8 +5192,8 @@ class SplitButtonComponent extends ListButton {
                 .split('\n')
                 .join('')
                 .trim();
-            if (innerText !== this.buttonText) {
-                this.buttonText = innerText;
+            if (innerText !== this.buttonText()) {
+                this.buttonText.set(innerText);
             }
         }
     }
@@ -5136,8 +5223,8 @@ class SplitButtonComponent extends ListButton {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
             FocusService,
             NavigationService,
             NAVIGATION_SETTINGS_PROVIDER,
@@ -5150,11 +5237,12 @@ class SplitButtonComponent extends ListButton {
             {
                 provide: MultiTabStop,
                 useExisting: forwardRef(() => SplitButtonComponent)
-            }
+            },
+            provideComponentName('splitbutton')
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSplitButtonLocalizedMessages
           i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+          splitButtonLabel="[[buttonText]] splitbutton"
           i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
           toggleButtonLabel="Toggle options"
         ></ng-container>
@@ -5201,6 +5289,7 @@ class SplitButtonComponent extends ListButton {
             [attr.aria-label]="messageFor('toggleButtonLabel')"
             [attr.aria-expanded]="openState"
             [attr.aria-controls]="openState ? listId : null"
+            [attr.aria-disabled]="disabled || null"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -5220,11 +5309,13 @@ class SplitButtonComponent extends ListButton {
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-splitbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSplitButton',
                     providers: [
                         FocusService,
@@ -5239,13 +5330,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: MultiTabStop,
                             useExisting: forwardRef(() => SplitButtonComponent)
-                        }
+                        },
+                        provideComponentName('splitbutton')
                     ],
-                    selector: 'kendo-splitbutton',
                     template: `
         <ng-container kendoSplitButtonLocalizedMessages
           i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+          splitButtonLabel="[[buttonText]] splitbutton"
           i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
           toggleButtonLabel="Toggle options"
         ></ng-container>
@@ -5292,6 +5383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [attr.aria-label]="messageFor('toggleButtonLabel')"
             [attr.aria-expanded]="openState"
             [attr.aria-controls]="openState ? listId : null"
+            [attr.aria-disabled]="disabled || null"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -5515,12 +5607,15 @@ class SpeechToTextButtonComponent {
     get listeningClass() {
         return this.isListening;
     }
+    get ariaPressed() {
+        return this.isListening ? 'true' : 'false';
+    }
     speechToTextButtonClass = true;
     get classDisabled() {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     /**
      * @hidden
@@ -5600,15 +5695,20 @@ class SpeechToTextButtonComponent {
         this.renderer = renderer;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
     /**
      * Indicates whether the button is actively listening for incoming audio.
      */
-    isListening = false;
+    get isListening() {
+        return this._isListening();
+    }
+    set isListening(value) {
+        this._isListening.set(value);
+    }
     /**
      * Indicates whether web speech functionality is supported.
      */
@@ -5653,7 +5753,7 @@ class SpeechToTextButtonComponent {
                 }
                 const result = asyncFactory();
                 const observable = this.toObservable(result);
-                observable.pipe(take(1)).subscribe(() => this.isListening = !this.isListening);
+                observable.pipe(take(1)).subscribe(() => this._isListening.set(!this._isListening()));
             });
         }
     }
@@ -5688,8 +5788,9 @@ class SpeechToTextButtonComponent {
     _rounded = undefined;
     _fillMode = undefined;
     _themeColor = undefined;
+    _isListening = signal(false, ...(ngDevMode ? [{ debugName: "_isListening" }] : []));
     _focused = false;
-    direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     handleClasses(value, input) {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
@@ -5705,13 +5806,13 @@ class SpeechToTextButtonComponent {
     }
     handleStart() {
         this.ngZone.run(() => {
-            this.isListening = true;
+            this._isListening.set(true);
             this.start.emit();
         });
     }
     handleEnd() {
         this.ngZone.run(() => {
-            this.isListening = false;
+            this._isListening.set(false);
             this.end.emit();
         });
     }
@@ -5756,7 +5857,7 @@ class SpeechToTextButtonComponent {
             this.speechRecognition.stop();
             this.speechRecognition.destroy();
             this.speechRecognition = null;
-            this.isListening = false;
+            this._isListening.set(false);
         }
     }
     createWebSpeech() {
@@ -5776,13 +5877,14 @@ class SpeechToTextButtonComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "attr.aria-pressed": "this.ariaPressed", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.speechtotextbutton'
-            }
+            },
+            provideComponentName('speechtotextbutton')
         ], exportAs: ["kendoSpeechToTextButton"], usesOnChanges: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             innerCssClass="k-button-icon"
@@ -5790,20 +5892,22 @@ class SpeechToTextButtonComponent {
             [svgIcon]="buttonSvgIcon">
         </kendo-icon-wrapper>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoSpeechToTextButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSpeechToTextButton',
                     providers: [
                         LocalizationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.speechtotextbutton'
-                        }
+                        },
+                        provideComponentName('speechtotextbutton')
                     ],
-                    selector: 'button[kendoSpeechToTextButton]',
                     template: `
         <kendo-icon-wrapper
             innerCssClass="k-button-icon"
@@ -5851,6 +5955,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], listeningClass: [{
                 type: HostBinding,
                 args: ['class.k-listening']
+            }], ariaPressed: [{
+                type: HostBinding,
+                args: ['attr.aria-pressed']
             }], speechToTextButtonClass: [{
                 type: HostBinding,
                 args: ['class.k-speech-to-text-button']
@@ -6204,7 +6311,7 @@ class SmartPasteButtonComponent {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     onFocus() {
         this.isFocused = true;
@@ -6248,7 +6355,7 @@ class SmartPasteButtonComponent {
     _fillMode = undefined;
     _themeColor = undefined;
     _focused = false;
-    direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     _iconClass;
     _icon = DEFAULT_ICON;
     _svgIcon = DEFAULT_SVG_ICON;
@@ -6262,8 +6369,8 @@ class SmartPasteButtonComponent {
         this.http = http;
         this.controlContainer = controlContainer;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = elementRef.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
@@ -6295,7 +6402,7 @@ class SmartPasteButtonComponent {
      * Reads clipboard content and sends it to the AI service for processing.
      */
     async paste() {
-        if (!this.nativeForm) {
+        if (!this.nativeForm || this.isDisabled) {
             return;
         }
         if (this.smartPasteBusy) {
@@ -6472,13 +6579,14 @@ class SmartPasteButtonComponent {
             this.currentRequestSubscription = null;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i3$1.ControlContainer, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SmartPasteButtonComponent, isStandalone: true, selector: "button[kendoSmartPasteButton]", inputs: { formFields: "formFields", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", requestUrl: "requestUrl", requestOptions: "requestOptions", smartPasteFormFields: "smartPasteFormFields" }, outputs: { requestStart: "requestStart", requestEnd: "requestEnd", requestCancel: "requestCancel" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i3$1.ControlContainer, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: SmartPasteButtonComponent, isStandalone: true, selector: "button[kendoSmartPasteButton]", inputs: { formFields: "formFields", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", requestUrl: "requestUrl", requestOptions: "requestOptions", smartPasteFormFields: "smartPasteFormFields" }, outputs: { requestStart: "requestStart", requestEnd: "requestEnd", requestCancel: "requestCancel" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.smartpastebutton'
-            }
+            },
+            provideComponentName('smartpastebutton')
         ], exportAs: ["kendoSmartPasteButton"], ngImport: i0, template: `
         @if (icon || svgIcon) {
           <kendo-icon-wrapper
@@ -6495,20 +6603,22 @@ class SmartPasteButtonComponent {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoSmartPasteButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSmartPasteButton',
                     providers: [
                         LocalizationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.smartpastebutton'
-                        }
+                        },
+                        provideComponentName('smartpastebutton')
                     ],
-                    selector: 'button[kendoSmartPasteButton]',
                     standalone: true,
                     imports: [IconWrapperComponent, NgClass],
                     template: `
@@ -6597,12 +6707,13 @@ class SegmentedControlComponent {
     renderer;
     wrapper;
     zone;
+    injector;
     hostClass = true;
     get stretchedClass() {
         return this._layoutMode === 'stretch';
     }
     get direction() {
-        return this._direction;
+        return this._direction();
     }
     hostRole = 'group';
     thumb;
@@ -6664,16 +6775,17 @@ class SegmentedControlComponent {
     _items = [];
     _size;
     _layoutMode = 'compact';
-    _direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
-    constructor(renderer, wrapper, zone, localization) {
+    constructor(renderer, wrapper, zone, injector, localization) {
         this.renderer = renderer;
         this.wrapper = wrapper;
         this.zone = zone;
+        this.injector = injector;
         validatePackage(packageMetadata);
-        this._direction = localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
         this.subs.add(localization.changes.subscribe(({ rtl }) => {
-            this._direction = rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -6725,7 +6837,7 @@ class SegmentedControlComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             const element = this.wrapper.nativeElement;
             if (!element?.getBoundingClientRect) {
                 return;
@@ -6741,15 +6853,16 @@ class SegmentedControlComponent {
             const right = controlRect.right - itemRect.right;
             this.renderer.setStyle(selectionIndicator, 'left', `${left}px`);
             this.renderer.setStyle(selectionIndicator, 'right', `${right}px`);
-        });
+        }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SegmentedControlComponent, isStandalone: true, selector: "kendo-segmented-control", inputs: { items: "items", layoutMode: "layoutMode", size: "size", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.k-segmented-control": "this.hostClass", "class.k-segmented-control-stretched": "this.stretchedClass", "attr.dir": "this.direction", "attr.role": "this.hostRole" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: SegmentedControlComponent, isStandalone: true, selector: "kendo-segmented-control", inputs: { items: "items", layoutMode: "layoutMode", size: "size", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.k-segmented-control": "this.hostClass", "class.k-segmented-control-stretched": "this.stretchedClass", "attr.dir": "this.direction", "attr.role": "this.hostRole" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.segmentedcontrol'
-            }
+            },
+            provideComponentName('segmentedcontrol')
         ], viewQueries: [{ propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }], ngImport: i0, template: `
         <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
         <div class="k-segmented-control-thumb" #thumb [attr.aria-hidden]="true"></div>
@@ -6778,7 +6891,7 @@ class SegmentedControlComponent {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-segmented-control',
@@ -6790,7 +6903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.segmentedcontrol'
-                        }
+                        },
+                        provideComponentName('segmentedcontrol')
                     ],
                     template: `
         <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
@@ -6820,7 +6934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
     `
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-segmented-control']
             }], stretchedClass: [{
@@ -7071,11 +7185,11 @@ const KENDO_BUTTONS = [
  * ```
  */
 class ButtonGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [ButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BUTTONGROUP],
@@ -7107,11 +7221,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonComponent],
@@ -7143,11 +7257,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class ButtonsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_BUTTONS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -7167,11 +7281,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * - `SplitButtonCustomMessagesComponent`&mdash;The SplitButton custom messages component class.
  */
 class SplitButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SplitButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SplitButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPLITBUTTON, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -7206,11 +7320,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class DropDownButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DROPDOWNBUTTON],
@@ -7242,11 +7356,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class ChipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [ChipComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [ChipComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CHIPLIST],
@@ -7277,11 +7391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class FloatingActionButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FLOATINGACTIONBUTTON],
@@ -7300,11 +7414,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * - `SpeechToTextButtonComponent`&mdash;The SpeechToTextButton component class.
  */
 class SpeechToTextButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, imports: [SpeechToTextButtonComponent], exports: [SpeechToTextButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, providers: [IconsService], imports: [KENDO_SPEECHTOTEXTBUTTON] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonModule, imports: [SpeechToTextButtonComponent], exports: [SpeechToTextButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonModule, providers: [IconsService], imports: [KENDO_SPEECHTOTEXTBUTTON] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SpeechToTextButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPEECHTOTEXTBUTTON],
@@ -7330,11 +7444,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class SmartPasteButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent], exports: [SmartPasteButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent], exports: [SmartPasteButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SmartPasteButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SmartPasteButtonComponent],
@@ -7352,11 +7466,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * - `SegmentedControlComponent`&mdash;The SegmentedControl component class.
  */
 class SegmentedControlModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SEGMENTEDCONTROL],