@progress/kendo-angular-dateinputs 25.0.0-develop.7 → 25.0.0-develop.8

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

@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1784618813,
-    version: '25.0.0-develop.7',
+    publishDate: 1784795905,
+    version: '25.0.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1881,7 +1881,6 @@ class ViewComponent {
     @if (firstDate(row)) {
       <td
         class="k-alt k-calendar-td"
-        role="gridcell"
         (click)="handleWeekNumberClick(row)"
         >
         @if (!weekNumberTemplateRef) {
@@ -1907,8 +1906,8 @@ class ViewComponent {
         role="gridcell"
         [attr.id]="cell.id"
         [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
-        [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
-        [attr.aria-disabled]="cell.isDisabled"
+        [attr.aria-selected]="(cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd) || null"
+        [attr.aria-disabled]="cell.isDisabled || null"
         [attr.aria-label]="getMonthLabel(cell.value)"
         [ngClass]="getStyles(cell)"
         [title]="cell.title"
@@ -1943,7 +1942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     @if (firstDate(row)) {
       <td
         class="k-alt k-calendar-td"
-        role="gridcell"
         (click)="handleWeekNumberClick(row)"
         >
         @if (!weekNumberTemplateRef) {
@@ -1969,8 +1967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         role="gridcell"
         [attr.id]="cell.id"
         [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
-        [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
-        [attr.aria-disabled]="cell.isDisabled"
+        [attr.aria-selected]="(cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd) || null"
+        [attr.aria-disabled]="cell.isDisabled || null"
         [attr.aria-label]="getMonthLabel(cell.value)"
         [ngClass]="getStyles(cell)"
         [title]="cell.title"
@@ -2052,6 +2050,7 @@ class HorizontalViewListComponent {
     cdr;
     element;
     renderer;
+    localization;
     handleMultiViewCalendarFocus() {
         this.focusCalendar.emit();
     }
@@ -2117,16 +2116,19 @@ class HorizontalViewListComponent {
         return this.activeView === CalendarViewEnum.century;
     }
     get role() {
-        return this.views >= 2 ? 'grid' : null;
-    }
-    get tabindex() {
-        return this.views >= 2 ? '0' : null;
+        return 'grid';
     }
-    get getActiveDescendant() {
-        return this.views === 1 ? this.activeDescendant : null;
+    get hostActiveDescendant() {
+        return this.activeDescendant || null;
     }
     get getTabIndex() {
-        return this.disabled || this.views >= 2 ? null : this.tabIndex;
+        if (this.views >= 2) {
+            return null;
+        }
+        return this.disabled ? null : String(this.tabIndex) || '0';
+    }
+    get weekNumberLabel() {
+        return this.localization.get('weekNumberLabel');
     }
     service;
     weekNames = [];
@@ -2140,12 +2142,13 @@ class HorizontalViewListComponent {
     showWeekNumbers;
     intlSubscription;
     animation;
-    constructor(bus, intl, cdr, element, renderer) {
+    constructor(bus, intl, cdr, element, renderer, localization) {
         this.bus = bus;
         this.intl = intl;
         this.cdr = cdr;
         this.element = element;
         this.renderer = renderer;
+        this.localization = localization;
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
     }
     ngOnChanges(changes) {
@@ -2305,15 +2308,13 @@ class HorizontalViewListComponent {
             this.renderer.setAttribute(this.element.nativeElement, attributeNames.ariaActiveDescendant, this.activeDescendant);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HorizontalViewListComponent, isStandalone: true, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", allowReverse: "allowReverse", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: HorizontalViewListComponent, isStandalone: true, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", allowReverse: "allowReverse", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.aria-activedescendant": "this.hostActiveDescendant" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
           <table
-            [attr.role]="views >= 2 ? 'none' : 'grid'"
+            role="none"
             class="k-calendar-table"
             [ngClass]="class"
-            [attr.aria-labelledby]="id"
-            [attr.aria-activedescendant]="getActiveDescendant"
             [attr.tabindex]="getTabIndex"
             (focus)="handleClassicCalendarFocus()"
             (blur)="handleClassicCalendarBlur($event)"
@@ -2327,10 +2328,11 @@ class HorizontalViewListComponent {
                   @for (name of weekNames; track $index; let i = $index) {
                     <th
                       class="k-calendar-th"
+                      [class.k-alt]="weekNumber && i === 0"
                       scope="col"
-                      [attr.aria-label]="wideWeekNames[i]"
+                      [attr.aria-label]="weekNumber && i === 0 ? weekNumberLabel : wideWeekNames[i]"
                       role="columnheader"
-                    >{{name}}</th>
+                    >@if (weekNumber && i === 0) {<span class="k-sr-only">{{weekNumberLabel}}</span>}{{name}}</th>
                   }
                 </tr>
               </thead>
@@ -2407,11 +2409,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
           <table
-            [attr.role]="views >= 2 ? 'none' : 'grid'"
+            role="none"
             class="k-calendar-table"
             [ngClass]="class"
-            [attr.aria-labelledby]="id"
-            [attr.aria-activedescendant]="getActiveDescendant"
             [attr.tabindex]="getTabIndex"
             (focus)="handleClassicCalendarFocus()"
             (blur)="handleClassicCalendarBlur($event)"
@@ -2425,10 +2425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   @for (name of weekNames; track $index; let i = $index) {
                     <th
                       class="k-calendar-th"
+                      [class.k-alt]="weekNumber && i === 0"
                       scope="col"
-                      [attr.aria-label]="wideWeekNames[i]"
+                      [attr.aria-label]="weekNumber && i === 0 ? weekNumberLabel : wideWeekNames[i]"
                       role="columnheader"
-                    >{{name}}</th>
+                    >@if (weekNumber && i === 0) {<span class="k-sr-only">{{weekNumberLabel}}</span>}{{name}}</th>
                   }
                 </tr>
               </thead>
@@ -2499,7 +2500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [NgClass, ViewComponent, NgTemplateOutlet, KForOf]
                 }]
-        }], ctorParameters: () => [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { handleMultiViewCalendarFocus: [{
+        }], ctorParameters: () => [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }], propDecorators: { handleMultiViewCalendarFocus: [{
                 type: HostListener,
                 args: ["focus"]
             }], handleMultiViewCalendarBlur: [{
@@ -2597,9 +2598,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], tabindex: [{
+            }], hostActiveDescendant: [{
                 type: HostBinding,
-                args: ['attr.tabindex']
+                args: ['attr.aria-activedescendant']
             }] } });
 
 /**
@@ -2735,7 +2736,6 @@ class HeaderComponent {
       <button
         kendoButton
         class="k-calendar-title"
-        role="button"
         [id]="id"
         type="button"
         fillMode="flat"
@@ -2746,6 +2746,7 @@ class HeaderComponent {
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
+        [attr.aria-label]="title"
         [title]="parentViewButtonTitle"
         [scope]="this">
         @if (!titleTemplateRef) {
@@ -2770,8 +2771,9 @@ class HeaderComponent {
             tabindex="-1"
             type="button"
             class="k-calendar-nav-prev"
-            [attr.aria-disabled]="isPrevDisabled"
+            [attr.aria-disabled]="isPrevDisabled || null"
             [disabled]="isPrevDisabled"
+            [attr.aria-label]="prevButtonTitle"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
             >
@@ -2781,7 +2783,6 @@ class HeaderComponent {
           kendoButton
           class="k-calendar-nav-today"
           fillMode="flat"
-          role="link"
           [size]="size"
           [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
@@ -2802,8 +2803,9 @@ class HeaderComponent {
             class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
-            [attr.aria-disabled]="isNextDisabled"
+            [attr.aria-disabled]="isNextDisabled || null"
             [disabled]="isNextDisabled"
+            [attr.aria-label]="nextButtonTitle"
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
             >
@@ -2827,7 +2829,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <button
         kendoButton
         class="k-calendar-title"
-        role="button"
         [id]="id"
         type="button"
         fillMode="flat"
@@ -2838,6 +2839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
+        [attr.aria-label]="title"
         [title]="parentViewButtonTitle"
         [scope]="this">
         @if (!titleTemplateRef) {
@@ -2862,8 +2864,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             tabindex="-1"
             type="button"
             class="k-calendar-nav-prev"
-            [attr.aria-disabled]="isPrevDisabled"
+            [attr.aria-disabled]="isPrevDisabled || null"
             [disabled]="isPrevDisabled"
+            [attr.aria-label]="prevButtonTitle"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
             >
@@ -2873,7 +2876,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           kendoButton
           class="k-calendar-nav-today"
           fillMode="flat"
-          role="link"
           [size]="size"
           [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
@@ -2894,8 +2896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
-            [attr.aria-disabled]="isNextDisabled"
+            [attr.aria-disabled]="isNextDisabled || null"
             [disabled]="isNextDisabled"
+            [attr.aria-label]="nextButtonTitle"
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
             >
@@ -3591,8 +3594,12 @@ class Messages extends ComponentMessages {
      * The title of the **Parent View** button in the header of the MultiViewCalendar.
      */
     parentViewButtonTitle;
+    /**
+     * The label of the week number column in the Calendar.
+     */
+    weekNumberLabel;
     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-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", weekNumberLabel: "weekNumberLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -3607,6 +3614,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], parentViewButtonTitle: [{
                 type: Input
+            }], weekNumberLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -4230,7 +4239,7 @@ class MultiViewCalendarComponent {
         return this.views >= 2 ? this.id : null;
     }
     get ariaDisabled() {
-        return this.disabled;
+        return this.disabled || null;
     }
     /**
      * @hidden
@@ -4446,8 +4455,7 @@ class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        const activeElement = this.views >= 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
-            this.element.nativeElement.querySelector('.k-calendar-table');
+        const activeElement = this.element.nativeElement.querySelector('.k-calendar-view');
         activeElement.blur();
     }
     /**
@@ -4804,7 +4812,7 @@ class MultiViewCalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiViewCalendarComponent, isStandalone: true, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", size: "size", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiViewCalendarComponent, isStandalone: true, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", size: "size", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
             BusViewService,
             RANGE_CALENDAR_VALUE_ACCESSOR,
             RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -4829,6 +4837,9 @@ class MultiViewCalendarComponent {
 
       i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
       parentViewButtonTitle="Navigate to parent view"
+
+      i18n-weekNumberLabel="kendo.calendar.weekNumberLabel|The label of the week number column in the Calendar"
+      weekNumberLabel="Week number"
       >
     </ng-container>
     @if (showCalendarHeader) {
@@ -4856,7 +4867,7 @@ class MultiViewCalendarComponent {
       [showOtherMonthDays]="showOtherMonthDays"
       [allowReverse]="allowReverse"
       [id]="calendarHeaderIdLabel"
-      [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
+      [attr.aria-labelledby]="calendarHeaderIdLabel || multiViewCalendarHeaderIdLabel"
       [activeView]="activeViewEnum"
       [activeDescendant]="ariaActivedescendant"
       [isActive]="isActive || isHovered"
@@ -4927,6 +4938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
       i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
       parentViewButtonTitle="Navigate to parent view"
+
+      i18n-weekNumberLabel="kendo.calendar.weekNumberLabel|The label of the week number column in the Calendar"
+      weekNumberLabel="Week number"
       >
     </ng-container>
     @if (showCalendarHeader) {
@@ -4954,7 +4968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [showOtherMonthDays]="showOtherMonthDays"
       [allowReverse]="allowReverse"
       [id]="calendarHeaderIdLabel"
-      [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
+      [attr.aria-labelledby]="calendarHeaderIdLabel || multiViewCalendarHeaderIdLabel"
       [activeView]="activeViewEnum"
       [activeDescendant]="ariaActivedescendant"
       [isActive]="isActive || isHovered"
@@ -5045,6 +5059,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], weekNumber: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.k-week-number']
             }], activeRangeEnd: [{
                 type: Input
             }], selectionRange: [{
@@ -5591,6 +5608,7 @@ class VirtualizationComponent {
     pageChange = new EventEmitter();
     scrollChange = new EventEmitter();
     wrapperClasses = true;
+    role = 'none';
     get horizontalClass() {
         return this.direction === 'horizontal';
     }
@@ -5769,7 +5787,7 @@ class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i19.ScrollbarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VirtualizationComponent, isStandalone: true, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VirtualizationComponent, isStandalone: true, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total", role: "role" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "attr.role": "this.role", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
                 provide: SCROLLER_FACTORY_TOKEN,
                 useValue: DEFAULT_SCROLLER_FACTORY
             }], usesOnChanges: true, ngImport: i0, template: `
@@ -5832,14 +5850,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], scrollChange: [{
                 type: Output
             }], wrapperClasses: [{
-                type: HostBinding,
-                args: ['class.k-flex']
-            }, {
                 type: HostBinding,
                 args: ['class.k-content']
             }, {
                 type: HostBinding,
                 args: ['class.k-scrollable']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }, {
+                type: Input
             }], horizontalClass: [{
                 type: HostBinding,
                 args: ['class.k-scrollable-horizontal']
@@ -5970,6 +5990,7 @@ class NavigationComponent {
       [topOffset]="topOffset"
       [bottomOffset]="bottomOffset"
       [maxScrollDifference]="maxViewHeight"
+      [role]="null"
       (pageChange)="onPageChange($event)"
       (scrollChange)="scrollChange($event)"
       >
@@ -5989,7 +6010,7 @@ class NavigationComponent {
         </li>
       </ul>
     </kendo-virtualization>
-    `, isInline: true, dependencies: [{ kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total", "role"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { 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: NavigationComponent, decorators: [{
             type: Component,
@@ -6006,6 +6027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [topOffset]="topOffset"
       [bottomOffset]="bottomOffset"
       [maxScrollDifference]="maxViewHeight"
+      [role]="null"
       (pageChange)="onPageChange($event)"
       (scrollChange)="scrollChange($event)"
       >
@@ -6067,6 +6089,7 @@ class ViewListComponent {
     intl;
     dom;
     renderer;
+    localization;
     allowReverse;
     cellTemplateRef;
     weekNumberTemplateRef;
@@ -6126,6 +6149,9 @@ class ViewListComponent {
     get activeViewValue() {
         return CalendarViewEnum[this.activeView];
     }
+    get weekNumberLabel() {
+        return this.localization.get('weekNumberLabel');
+    }
     service;
     activeDate;
     dates = [];
@@ -6143,12 +6169,13 @@ class ViewListComponent {
     showWeekNumbers;
     minViewsToRender = 1;
     intlSubscription;
-    constructor(bus, cdr, intl, dom, renderer) {
+    constructor(bus, cdr, intl, dom, renderer, localization) {
         this.bus = bus;
         this.cdr = cdr;
         this.intl = intl;
         this.dom = dom;
         this.renderer = renderer;
+        this.localization = localization;
     }
     ngOnInit() {
         this.weekNames = this.getWeekNames(this.weekDaysFormat);
@@ -6260,7 +6287,7 @@ class ViewListComponent {
             this.cdr.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ViewListComponent, isStandalone: true, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", size: "size", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
       [currentDate]="activeDate"
@@ -6275,11 +6302,17 @@ class ViewListComponent {
       >
     </kendo-calendar-header>
     @if (isMonthView()) {
-      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'">
-        <thead class="k-calendar-thead">
-          <tr class="k-calendar-tr">
+      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" role="table">
+        <thead class="k-calendar-thead" role="rowgroup">
+          <tr class="k-calendar-tr" role="row">
             @for (name of weekNames; track $index; let i = $index) {
-              <th class="k-calendar-th" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
+              <th
+                class="k-calendar-th"
+                [class.k-alt]="weekNumber && i === 0"
+                scope="col"
+                [attr.aria-label]="weekNumber && i === 0 ? weekNumberLabel : wideWeekNames[i]"
+                role="columnheader"
+              >@if (weekNumber && i === 0) {<span class="k-sr-only">{{weekNumberLabel}}</span>}{{name}}</th>
             }
           </tr>
         </thead>
@@ -6345,7 +6378,7 @@ class ViewListComponent {
         [currentDate]="activeDate">
       </kendo-calendar-footer>
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total", "role"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
@@ -6366,11 +6399,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       >
     </kendo-calendar-header>
     @if (isMonthView()) {
-      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'">
-        <thead class="k-calendar-thead">
-          <tr class="k-calendar-tr">
+      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" role="table">
+        <thead class="k-calendar-thead" role="rowgroup">
+          <tr class="k-calendar-tr" role="row">
             @for (name of weekNames; track $index; let i = $index) {
-              <th class="k-calendar-th" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
+              <th
+                class="k-calendar-th"
+                [class.k-alt]="weekNumber && i === 0"
+                scope="col"
+                [attr.aria-label]="weekNumber && i === 0 ? weekNumberLabel : wideWeekNames[i]"
+                role="columnheader"
+              >@if (weekNumber && i === 0) {<span class="k-sr-only">{{weekNumberLabel}}</span>}{{name}}</th>
             }
           </tr>
         </thead>
@@ -6440,7 +6479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [HeaderComponent, VirtualizationComponent, KForOf, ViewComponent, FooterComponent]
                 }]
-        }], ctorParameters: () => [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }], propDecorators: { allowReverse: [{
+        }], ctorParameters: () => [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }], propDecorators: { allowReverse: [{
                 type: Input
             }], cellTemplateRef: [{
                 type: Input
@@ -6729,8 +6768,12 @@ class CalendarMessages extends ComponentMessages {
      * The title of the **Parent View** button in the header of the Calendar.
      */
     parentViewButtonTitle;
+    /**
+     * The label of the week number column in the Calendar.
+     */
+    weekNumberLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CalendarMessages, isStandalone: true, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CalendarMessages, isStandalone: true, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", weekNumberLabel: "weekNumberLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
@@ -6745,6 +6788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], parentViewButtonTitle: [{
                 type: Input
+            }], weekNumberLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -7057,6 +7102,12 @@ class CalendarComponent {
      * @default false
      */
     weekNumber = false;
+    /**
+     * @hidden
+     */
+    get hostWeekNumberClass() {
+        return this.weekNumber && this.type !== 'classic';
+    }
     /**
      * @hidden
      */
@@ -7363,7 +7414,8 @@ class CalendarComponent {
     }
     get ariaDisabled() {
         // in Classic mode, the inner MultiViewCalendar should handle the disabled class and aria attr
-        return this.type === 'classic' ? undefined : this.disabled;
+        const isDisabled = this.disabled ? true : null;
+        return this.type === 'classic' ? null : isDisabled;
     }
     domEvents = [];
     control;
@@ -8009,7 +8061,7 @@ class CalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CalendarComponent, isStandalone: true, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { closePopup: "closePopup", activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CalendarComponent, isStandalone: true, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { closePopup: "closePopup", activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.hostWeekNumberClass", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
             BusViewService,
             CALENDAR_VALUE_ACCESSOR,
             CALENDAR_RANGE_VALIDATORS,
@@ -8037,6 +8089,9 @@ class CalendarComponent {
 
       i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
       parentViewButtonTitle="Navigate to parent view"
+
+      i18n-weekNumberLabel="kendo.calendar.weekNumberLabel|The label of the week number column in the Calendar"
+      weekNumberLabel="Week number"
       >
     </ng-container>
     @if (type === 'infinite') {
@@ -8181,6 +8236,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
       i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
       parentViewButtonTitle="Navigate to parent view"
+
+      i18n-weekNumberLabel="kendo.calendar.weekNumberLabel|The label of the week number column in the Calendar"
+      weekNumberLabel="Week number"
       >
     </ng-container>
     @if (type === 'infinite') {
@@ -8338,7 +8396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], weekNumber: [{
                 type: Input
-            }, {
+            }], hostWeekNumberClass: [{
                 type: HostBinding,
                 args: ['class.k-week-number']
             }], closePopup: [{
@@ -8665,7 +8723,7 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    role = 'textbox';
+    role = null;
     /**
      * @hidden
      */
@@ -8818,6 +8876,18 @@ class DateInputComponent {
      * @hidden
      */
     hasPopup;
+    /**
+     * @hidden
+     */
+    set ariaInvalidState(value) {
+        this._ariaInvalidState = value;
+        if (value !== null && this.inputElement) {
+            this.setAriaInvalid();
+        }
+    }
+    get ariaInvalidState() {
+        return this._ariaInvalidState;
+    }
     /**
      * Specifies the size of the component. The default value is set by the Kendo theme.
      *
@@ -8990,6 +9060,7 @@ class DateInputComponent {
     _size;
     _rounded;
     _fillMode;
+    _ariaInvalidState = null;
     control;
     subs = new Subscription();
     _inputAttributes;
@@ -9151,15 +9222,13 @@ class DateInputComponent {
      * @hidden
      */
     setAriaInvalid() {
-        if (!this.control) {
+        if (this._ariaInvalidState === null && !this.control) {
             return;
         }
-        if (this.control.invalid) {
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'true');
-        }
-        else {
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'false');
-        }
+        const isInvalid = this._ariaInvalidState !== null
+            ? this._ariaInvalidState
+            : !!(this.control.invalid && (this.control.touched || this.control.dirty));
+        this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, `${isInvalid}`);
     }
     /**
      * @hidden
@@ -9311,6 +9380,7 @@ class DateInputComponent {
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.ngControl)) {
             this.ngZone.run(() => {
                 this.onControlTouched();
+                this.setAriaInvalid();
                 this.emitBlur(args.event);
                 this.cdr.markForCheck();
             });
@@ -9385,7 +9455,7 @@ class DateInputComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement, this.injector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", ariaInvalidState: "ariaInvalidState", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -9411,7 +9481,7 @@ class DateInputComponent {
       autocapitalize="off"
       spellcheck="false"
       [attr.role]="role"
-      [attr.aria-readonly]="ariaReadOnly"
+      [attr.aria-readonly]="ariaReadOnly || null"
       [id]="focusableId"
       [title]="title"
       [tabindex]="tabindex"
@@ -9517,7 +9587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       autocapitalize="off"
       spellcheck="false"
       [attr.role]="role"
-      [attr.aria-readonly]="ariaReadOnly"
+      [attr.aria-readonly]="ariaReadOnly || null"
       [id]="focusableId"
       [title]="title"
       [tabindex]="tabindex"
@@ -9657,6 +9727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], hasPopup: [{
                 type: Input
+            }], ariaInvalidState: [{
+                type: Input
             }], size: [{
                 type: Input
             }], rounded: [{
@@ -10468,6 +10540,16 @@ class DatePickerComponent extends MultiTabStop {
     get isControlRequired() {
         return isControlRequired(this.control);
     }
+    /**
+     * @hidden
+     */
+    get ariaInvalidState() {
+        const control = this.control?.control;
+        if (!control) {
+            return null;
+        }
+        return control.invalid && (control.touched || control.dirty);
+    }
     _popupSettings = { animate: true };
     _show = false;
     _value = null;
@@ -10539,6 +10621,7 @@ class DatePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
+        this.pickerSubscriptions.add(this.control?.control?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
     }
     /**
      * @hidden
@@ -10976,8 +11059,8 @@ class DatePickerComponent extends MultiTabStop {
     blurComponent() {
         this.isActive = false;
         this.show = false;
-        this.cdr.detectChanges();
         this.onControlTouched();
+        this.cdr.detectChanges();
         this.onBlur.emit();
     }
     handleSameSelection() {
@@ -11047,6 +11130,7 @@ class DatePickerComponent extends MultiTabStop {
           pickerType="datepicker"
           hasPopup="grid"
           [isPopupOpen]="show"
+          [ariaInvalidState]="ariaInvalidState"
           [clearButton]="clearButton"
           [disabled]="disabled"
           [readonly]="readonly || readOnlyInput"
@@ -11082,6 +11166,7 @@ class DatePickerComponent extends MultiTabStop {
           #toggleButton
           type="button"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [tabindex]="-1"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
@@ -11145,6 +11230,7 @@ class DatePickerComponent extends MultiTabStop {
                     icon="check"
                     themeColor="primary"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     [tabIndex]="-1"
@@ -11206,7 +11292,7 @@ class DatePickerComponent extends MultiTabStop {
             </kendo-calendar-messages>
           </kendo-calendar>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "ariaInvalidState", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -11258,6 +11344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           pickerType="datepicker"
           hasPopup="grid"
           [isPopupOpen]="show"
+          [ariaInvalidState]="ariaInvalidState"
           [clearButton]="clearButton"
           [disabled]="disabled"
           [readonly]="readonly || readOnlyInput"
@@ -11293,6 +11380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           #toggleButton
           type="button"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [tabindex]="-1"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
@@ -11356,6 +11444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     icon="check"
                     themeColor="primary"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     [tabIndex]="-1"
@@ -11656,7 +11745,7 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
             ], 'k-actionsheet-content'),
             div([div('button', 'k-button k-button-lg')], 'k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
         ], 'k-actionsheet-view'),
-    ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
+    ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : 'k-actionsheet-bottom'}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
 /**
  * @hidden
@@ -12371,6 +12460,12 @@ class TimeListComponent {
         return this.disabled ? undefined : 0;
     }
     componentClass = true;
+    get hostRole() {
+        return this.roleAttribute;
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel;
+    }
     get isDayPeriod() {
         return this.part?.type === 'dayperiod';
     }
@@ -12587,10 +12682,8 @@ class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast", isFirst: "isFirst" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast", isFirst: "isFirst" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
-      [attr.role]="roleAttribute"
-      [attr.aria-label]="ariaLabel"
       [skip]="skip"
       [take]="total"
       [total]="total"
@@ -12598,7 +12691,7 @@ class TimeListComponent {
       [maxScrollDifference]="listHeight"
       [topOffset]="topOffset"
       [bottomOffset]="bottomOffset"
-      class="k-time-container"
+      class="k-content k-scrollable k-time-container"
       tabindex="-1"
       >
       <ul [ngStyle]="style" class="k-reset"
@@ -12606,7 +12699,7 @@ class TimeListComponent {
                 click: handleItemClick
             }"
         [scope]="this"
-        [attr.role]="'presentation'"
+        [attr.role]="'none'"
         >
         @for (item of data; track $index; let index = $index) {
           <li class="k-item"
@@ -12619,7 +12712,7 @@ class TimeListComponent {
         }
       </ul>
     </kendo-virtualization>
-    `, isInline: true, dependencies: [{ kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total", "role"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
@@ -12627,8 +12720,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: 'kendo-timelist',
                     template: `
     <kendo-virtualization
-      [attr.role]="roleAttribute"
-      [attr.aria-label]="ariaLabel"
       [skip]="skip"
       [take]="total"
       [total]="total"
@@ -12636,7 +12727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [maxScrollDifference]="listHeight"
       [topOffset]="topOffset"
       [bottomOffset]="bottomOffset"
-      class="k-time-container"
+      class="k-content k-scrollable k-time-container"
       tabindex="-1"
       >
       <ul [ngStyle]="style" class="k-reset"
@@ -12644,7 +12735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 click: handleItemClick
             }"
         [scope]="this"
-        [attr.role]="'presentation'"
+        [attr.role]="'none'"
         >
         @for (item of data; track $index; let index = $index) {
           <li class="k-item"
@@ -12692,6 +12783,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], componentClass: [{
                 type: HostBinding,
                 args: ["class.k-time-list"]
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }] } });
 
 const isEqualTillMinute = (value, min) => value.getHours() === min.getHours() && value.getMinutes() === min.getMinutes();
@@ -12819,8 +12916,12 @@ class TimePickerMessages extends ComponentMessages {
      * Specifies the title of the **Close** button of the ActionSheet that renders instead of the popup when using small screen devices in adaptive mode.
      */
     adaptiveCloseButtonTitle;
+    /**
+     * Specifies the accessible label of the TimeSelector.
+     */
+    timeSelectorLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TimePickerMessages, isStandalone: true, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TimePickerMessages, isStandalone: true, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", timeSelectorLabel: "timeSelectorLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
@@ -12855,6 +12956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], adaptiveCloseButtonTitle: [{
                 type: Input
+            }], timeSelectorLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -12921,6 +13024,12 @@ class TimeSelectorComponent {
     now;
     timeLists;
     timeListWrappers;
+    /**
+     * @hidden
+     */
+    get role() {
+        return 'group';
+    }
     /**
      * @hidden
      */
@@ -13061,7 +13170,10 @@ class TimeSelectorComponent {
         if (this.localization) {
             this.subscriptions.add(this.localization
                 .changes
-                .subscribe(() => this.cdr.markForCheck()));
+                .subscribe(() => {
+                this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.localization.get('timeSelectorLabel'));
+                this.cdr.markForCheck();
+            }));
         }
         this.renderer.addClass(this.element.nativeElement, 'k-timeselector');
         this.dom.isAdaptiveEnabled = this.isAdaptiveEnabled;
@@ -13279,7 +13391,7 @@ class TimeSelectorComponent {
         return listIdx;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart", tabOutNow: "tabOutNow" }, host: { properties: { "attr.role": "this.role", "class.k-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -13304,17 +13416,36 @@ class TimeSelectorComponent {
 
           i18n-nowLabel="kendo.timeselector.nowLabel|The label for the Now button in the timeselector component"
           nowLabel="Select now"
+
+          i18n-timeSelectorLabel="kendo.timeselector.timeSelectorLabel|The accessible label for the timeselector component"
+          timeSelectorLabel="Time Selector"
+
+          i18n-hour="kendo.timeselector.hour|The label for the Hour column in the timeselector component"
+          hour="Hour"
+
+          i18n-minute="kendo.timeselector.minute|The label for the Minute column in the timeselector component"
+          minute="Minute"
+
+          i18n-second="kendo.timeselector.second|The label for the Second column in the timeselector component"
+          second="Second"
+
+          i18n-millisecond="kendo.timeselector.millisecond|The label for the Millisecond column in the timeselector component"
+          millisecond="Millisecond"
+
+          i18n-dayperiod="kendo.timeselector.dayperiod|The label for the AM/PM column in the timeselector component"
+          dayperiod="AM/PM"
           >
         </ng-container>
         <div class="k-time-header">
-          <span class="k-title k-timeselector-title">
+          <span class="k-title">
             {{ intl.formatDate(current, format) }}
           </span>
           @if (showNowButton) {
             <button
                 #now
                 type="button"
-                class="k-button k-button-flat k-button-primary k-time-now"
+                class="k-button k-button-flat k-time-now"
+                [class.k-button-lg]="isAdaptiveEnabled"
                 [attr.title]="localization.get('nowLabel')"
                 [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -13325,7 +13456,7 @@ class TimeSelectorComponent {
                 }"
               [scope]="this"
               [disabled]="disabled"
-            >{{localization.get('now')}}</button>
+            ><span class="k-button-text">{{localization.get('now')}}</span></button>
           }
         </div>
         <div class="k-time-list-container">
@@ -13337,7 +13468,7 @@ class TimeSelectorComponent {
                 class="k-time-list-wrapper"
                 role="presentation" tabindex="-1"
                 >
-                <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
+                <span class="k-title">{{intl.dateFieldName(part)}}</span>
                 <kendo-timelist
                   [isLast]="idx === dateFormatParts.length - 1"
                   [isFirst]="idx === 0"
@@ -13358,7 +13489,7 @@ class TimeSelectorComponent {
                 ></kendo-timelist>
               </div>
             }
-            @if (part.type === 'literal') {
+            @if (part.type === 'literal' && part.pattern.trim()) {
               <div class="k-time-separator">
                 {{part.pattern}}
               </div>
@@ -13382,7 +13513,7 @@ class TimeSelectorComponent {
                 }"
                 [scope]="this"
                 [disabled]="disabled"
-              >{{localization.get('accept')}}</button>
+              ><span class="k-button-text">{{localization.get('accept')}}</span></button>
             }
             @if (cancelButton) {
               <button
@@ -13399,7 +13530,7 @@ class TimeSelectorComponent {
                 }"
                 [scope]="this"
                 [disabled]="disabled"
-              >{{localization.get('cancel')}}</button>
+              ><span class="k-button-text">{{localization.get('cancel')}}</span></button>
             }
           </div>
         }
@@ -13437,17 +13568,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-nowLabel="kendo.timeselector.nowLabel|The label for the Now button in the timeselector component"
           nowLabel="Select now"
+
+          i18n-timeSelectorLabel="kendo.timeselector.timeSelectorLabel|The accessible label for the timeselector component"
+          timeSelectorLabel="Time Selector"
+
+          i18n-hour="kendo.timeselector.hour|The label for the Hour column in the timeselector component"
+          hour="Hour"
+
+          i18n-minute="kendo.timeselector.minute|The label for the Minute column in the timeselector component"
+          minute="Minute"
+
+          i18n-second="kendo.timeselector.second|The label for the Second column in the timeselector component"
+          second="Second"
+
+          i18n-millisecond="kendo.timeselector.millisecond|The label for the Millisecond column in the timeselector component"
+          millisecond="Millisecond"
+
+          i18n-dayperiod="kendo.timeselector.dayperiod|The label for the AM/PM column in the timeselector component"
+          dayperiod="AM/PM"
           >
         </ng-container>
         <div class="k-time-header">
-          <span class="k-title k-timeselector-title">
+          <span class="k-title">
             {{ intl.formatDate(current, format) }}
           </span>
           @if (showNowButton) {
             <button
                 #now
                 type="button"
-                class="k-button k-button-flat k-button-primary k-time-now"
+                class="k-button k-button-flat k-time-now"
+                [class.k-button-lg]="isAdaptiveEnabled"
                 [attr.title]="localization.get('nowLabel')"
                 [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -13458,7 +13608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }"
               [scope]="this"
               [disabled]="disabled"
-            >{{localization.get('now')}}</button>
+            ><span class="k-button-text">{{localization.get('now')}}</span></button>
           }
         </div>
         <div class="k-time-list-container">
@@ -13470,7 +13620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 class="k-time-list-wrapper"
                 role="presentation" tabindex="-1"
                 >
-                <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
+                <span class="k-title">{{intl.dateFieldName(part)}}</span>
                 <kendo-timelist
                   [isLast]="idx === dateFormatParts.length - 1"
                   [isFirst]="idx === 0"
@@ -13491,7 +13641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 ></kendo-timelist>
               </div>
             }
-            @if (part.type === 'literal') {
+            @if (part.type === 'literal' && part.pattern.trim()) {
               <div class="k-time-separator">
                 {{part.pattern}}
               </div>
@@ -13515,7 +13665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }"
                 [scope]="this"
                 [disabled]="disabled"
-              >{{localization.get('accept')}}</button>
+              ><span class="k-button-text">{{localization.get('accept')}}</span></button>
             }
             @if (cancelButton) {
               <button
@@ -13532,7 +13682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }"
                 [scope]="this"
                 [disabled]="disabled"
-              >{{localization.get('cancel')}}</button>
+              ><span class="k-button-text">{{localization.get('cancel')}}</span></button>
             }
           </div>
         }
@@ -13557,6 +13707,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], timeListWrappers: [{
                 type: ViewChildren,
                 args: ['listWrapper']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
@@ -13684,8 +13837,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker#integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
-const ACCEPT_BUTTON_SELECTOR$1 = '.k-button.k-time-accept';
-const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
  * Represents the [Kendo UI TimePicker component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker).
  *
@@ -14067,15 +14218,27 @@ class TimePickerComponent extends MultiTabStop {
     get isControlRequired() {
         return isControlRequired(this.control);
     }
+    /**
+     * @hidden
+     */
+    get ariaInvalidState() {
+        const control = this.control?.control;
+        if (!control) {
+            return null;
+        }
+        return control.invalid && (control.touched || control.dirty);
+    }
     /**
      * @hidden
      */
     windowSize;
+    adaptiveAcceptBtnRef;
+    adaptiveCancelBtnRef;
     get adaptiveAcceptButton() {
-        return this.actionSheet.element.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR$1);
+        return this.adaptiveAcceptBtnRef?.nativeElement;
     }
     get adaptiveCancelButton() {
-        return this.actionSheet.element.nativeElement.querySelector(CANCEL_BUTTON_SELECTOR);
+        return this.adaptiveCancelBtnRef?.nativeElement;
     }
     get inputElement() {
         return this.wrapper.nativeElement.querySelector('input');
@@ -14149,6 +14312,7 @@ class TimePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
+        this.pickerSubscriptions.add(this.control?.control?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
     }
     /**
      * @hidden
@@ -14394,7 +14558,7 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     get popupClasses() {
-        const popupClasses = ['k-timepicker-popup'];
+        const popupClasses = ['k-timepicker-popup', 'k-list-container'];
         if (!this.popupSettings.popupClass) {
             return popupClasses;
         }
@@ -14662,7 +14826,7 @@ class TimePickerComponent extends MultiTabStop {
             },
             PickerService,
             { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TimePickerComponent) }
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }, { propertyName: "adaptiveAcceptBtnRef", first: true, predicate: ["adaptiveAcceptBtn"], descendants: true }, { propertyName: "adaptiveCancelBtnRef", first: true, predicate: ["adaptiveCancelBtn"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
           i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
           accept="Set"
@@ -14705,6 +14869,9 @@ class TimePickerComponent extends MultiTabStop {
 
           i18n-adaptiveCloseButtonTitle="kendo.timepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
+
+          i18n-timeSelectorLabel="kendo.timepicker.timeSelectorLabel|The accessible label for the time selector in the timepicker component"
+          timeSelectorLabel="Time Selector"
           >
         </ng-container>
         <kendo-dateinput
@@ -14712,6 +14879,7 @@ class TimePickerComponent extends MultiTabStop {
           pickerType="timepicker"
           hasPopup="dialog"
           [isPopupOpen]="show"
+          [ariaInvalidState]="ariaInvalidState"
           [disabled]="disabled"
           [clearButton]="clearButton"
           [readonly]="readonly || readOnlyInput"
@@ -14747,6 +14915,7 @@ class TimePickerComponent extends MultiTabStop {
           type="button"
           tabindex="-1"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
           [attr.disabled]="disabled ? '' : null"
@@ -14802,8 +14971,10 @@ class TimePickerComponent extends MultiTabStop {
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
+                    themeColor="primary"
                     size="large"
                     [tabIndex]="-1"
                     (click)="show = false">
@@ -14816,10 +14987,10 @@ class TimePickerComponent extends MultiTabStop {
             </div>
             <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
               <button kendoButton
+                #adaptiveCancelBtn
                 type="button"
                 (click)="handleReject()"
                 size="large"
-                class="k-time-cancel"
                 [attr.title]="localization.get('cancelLabel')"
                 [attr.aria-label]="localization.get('cancelLabel')"
                 >
@@ -14827,10 +14998,10 @@ class TimePickerComponent extends MultiTabStop {
               </button>
 
               <button kendoButton
+                #adaptiveAcceptBtn
                 type="button"
                 (click)="handleActionSheetAccept()"
                 size="large"
-                class="k-time-accept"
                 themeColor="primary"
                 [attr.title]="localization.get('acceptLabel')"
                 [attr.aria-label]="localization.get('acceptLabel')"
@@ -14877,11 +15048,12 @@ class TimePickerComponent extends MultiTabStop {
               [second]="localization.get('second')"
               [millisecond]="localization.get('millisecond')"
               [dayperiod]="localization.get('dayperiod')"
+              [timeSelectorLabel]="localization.get('timeSelectorLabel')"
               >
             </kendo-timeselector-messages>
           </kendo-timeselector>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "ariaInvalidState", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -14946,6 +15118,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-adaptiveCloseButtonTitle="kendo.timepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
+
+          i18n-timeSelectorLabel="kendo.timepicker.timeSelectorLabel|The accessible label for the time selector in the timepicker component"
+          timeSelectorLabel="Time Selector"
           >
         </ng-container>
         <kendo-dateinput
@@ -14953,6 +15128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           pickerType="timepicker"
           hasPopup="dialog"
           [isPopupOpen]="show"
+          [ariaInvalidState]="ariaInvalidState"
           [disabled]="disabled"
           [clearButton]="clearButton"
           [readonly]="readonly || readOnlyInput"
@@ -14988,6 +15164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           type="button"
           tabindex="-1"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
           [attr.disabled]="disabled ? '' : null"
@@ -15043,8 +15220,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
+                    themeColor="primary"
                     size="large"
                     [tabIndex]="-1"
                     (click)="show = false">
@@ -15057,10 +15236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             </div>
             <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
               <button kendoButton
+                #adaptiveCancelBtn
                 type="button"
                 (click)="handleReject()"
                 size="large"
-                class="k-time-cancel"
                 [attr.title]="localization.get('cancelLabel')"
                 [attr.aria-label]="localization.get('cancelLabel')"
                 >
@@ -15068,10 +15247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               </button>
 
               <button kendoButton
+                #adaptiveAcceptBtn
                 type="button"
                 (click)="handleActionSheetAccept()"
                 size="large"
-                class="k-time-accept"
                 themeColor="primary"
                 [attr.title]="localization.get('acceptLabel')"
                 [attr.aria-label]="localization.get('acceptLabel')"
@@ -15118,6 +15297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [second]="localization.get('second')"
               [millisecond]="localization.get('millisecond')"
               [dayperiod]="localization.get('dayperiod')"
+              [timeSelectorLabel]="localization.get('timeSelectorLabel')"
               >
             </kendo-timeselector-messages>
           </kendo-timeselector>
@@ -15218,6 +15398,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
+            }], adaptiveAcceptBtnRef: [{
+                type: ViewChild,
+                args: ['adaptiveAcceptBtn', { static: false }]
+            }], adaptiveCancelBtnRef: [{
+                type: ViewChild,
+                args: ['adaptiveCancelBtn', { static: false }]
             }] } });
 
 /**
@@ -15312,8 +15498,16 @@ class DateTimePickerMessages extends ComponentMessages {
      * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
     adaptiveCloseButtonTitle;
+    /**
+     * The accessible label of the date and time selector container.
+     */
+    dateTimeSelectorLabel;
+    /**
+     * The accessible label of the time selector element.
+     */
+    timeSelectorLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DateTimePickerMessages, isStandalone: true, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DateTimePickerMessages, isStandalone: true, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", dateTimeSelectorLabel: "dateTimeSelectorLabel", timeSelectorLabel: "timeSelectorLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateTimePickerMessages, decorators: [{
             type: Directive,
@@ -15364,6 +15558,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], adaptiveCloseButtonTitle: [{
                 type: Input
+            }], dateTimeSelectorLabel: [{
+                type: Input
+            }], timeSelectorLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -16112,6 +16310,16 @@ class DateTimePickerComponent extends MultiTabStop {
     get isControlRequired() {
         return isControlRequired(this.formControl);
     }
+    /**
+     * @hidden
+     */
+    get ariaInvalidState() {
+        const control = this.formControl;
+        if (!control) {
+            return null;
+        }
+        return control.invalid && (control.touched || control.dirty);
+    }
     popupRef;
     _popupSettings = { animate: true };
     _value = null;
@@ -16175,6 +16383,7 @@ class DateTimePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
+        this.subscriptions.add(this.formControl?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
     }
     ngOnChanges(changes) {
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
@@ -16951,6 +17160,12 @@ class DateTimePickerComponent extends MultiTabStop {
 
           i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
+
+          i18n-dateTimeSelectorLabel="kendo.datetimepicker.dateTimeSelectorLabel|The accessible label of the date and time selector container"
+          dateTimeSelectorLabel="Date and time selector"
+
+            i18n-timeSelectorLabel="kendo.datetimepicker.timeSelectorLabel|The accessible label of the time selector element"
+            timeSelectorLabel="Time selector"
           >
         </ng-container>
 
@@ -16983,6 +17198,7 @@ class DateTimePickerComponent extends MultiTabStop {
           hasPopup="dialog"
           [inputAttributes]="inputAttributes"
           [isPopupOpen]="isOpen"
+          [ariaInvalidState]="ariaInvalidState"
           (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown
@@ -16999,6 +17215,7 @@ class DateTimePickerComponent extends MultiTabStop {
           #toggleButton
           type="button"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [tabindex]="-1"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
@@ -17068,6 +17285,7 @@ class DateTimePickerComponent extends MultiTabStop {
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"
@@ -17116,6 +17334,8 @@ class DateTimePickerComponent extends MultiTabStop {
           <div
             class="k-datetime-wrap k-{{activeTab}}-tab"
                 [class.k-datetime-wrap-lg]="isAdaptive"
+                role="group"
+                [attr.aria-label]="localization.get('dateTimeSelectorLabel')"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -17211,6 +17431,7 @@ class DateTimePickerComponent extends MultiTabStop {
                     [second]="localization.get('second')"
                     [millisecond]="localization.get('millisecond')"
                     [dayperiod]="localization.get('dayperiod')"
+                    [timeSelectorLabel]="localization.get('timeSelectorLabel')"
                     >
                   </kendo-timeselector-messages>
                 </kendo-timeselector>
@@ -17261,7 +17482,7 @@ class DateTimePickerComponent extends MultiTabStop {
             }
           </div>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: SegmentedControlComponent, selector: "kendo-segmented-control", inputs: ["items", "layoutMode", "size", "selected"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "ariaInvalidState", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: SegmentedControlComponent, selector: "kendo-segmented-control", inputs: ["items", "layoutMode", "size", "selected"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -17349,6 +17570,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
+
+          i18n-dateTimeSelectorLabel="kendo.datetimepicker.dateTimeSelectorLabel|The accessible label of the date and time selector container"
+          dateTimeSelectorLabel="Date and time selector"
+
+            i18n-timeSelectorLabel="kendo.datetimepicker.timeSelectorLabel|The accessible label of the time selector element"
+            timeSelectorLabel="Time selector"
           >
         </ng-container>
 
@@ -17381,6 +17608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           hasPopup="dialog"
           [inputAttributes]="inputAttributes"
           [isPopupOpen]="isOpen"
+          [ariaInvalidState]="ariaInvalidState"
           (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown
@@ -17397,6 +17625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           #toggleButton
           type="button"
           class="k-input-button k-button k-icon-button"
+          [class.k-disabled]="disabled"
           [tabindex]="-1"
           [attr.title]="localization.get('toggle')"
           [attr.aria-label]="localization.get('toggle')"
@@ -17466,6 +17695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"
@@ -17514,6 +17744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <div
             class="k-datetime-wrap k-{{activeTab}}-tab"
                 [class.k-datetime-wrap-lg]="isAdaptive"
+                role="group"
+                [attr.aria-label]="localization.get('dateTimeSelectorLabel')"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -17609,6 +17841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     [second]="localization.get('second')"
                     [millisecond]="localization.get('millisecond')"
                     [dayperiod]="localization.get('dayperiod')"
+                    [timeSelectorLabel]="localization.get('timeSelectorLabel')"
                     >
                   </kendo-timeselector-messages>
                 </kendo-timeselector>
@@ -19074,6 +19307,7 @@ class DateRangePopupComponent {
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"
@@ -19236,6 +19470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type="button"
                     icon="check"
                     [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="localization.get('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"