@progress/kendo-angular-dropdowns 25.0.0-develop.1 → 25.0.0-develop.12

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, afterNextRender, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, signal, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i10 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, hasFocusableParent, parseCSSClassNames, isControlRequired, guid, hasObservers, SeparatorComponent, SuffixTemplateDirective, PrefixTemplateDirective, KendoInput, KENDO_WEBMCP_HOST, MultiTabStop, anyChanged, EventsOutsideAngularDirective, scrollbarWidth, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
@@ -20,8 +20,8 @@ import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime,
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
-import { checkIcon, xIcon, chevronDownIcon, searchIcon, xCircleIcon } from '@progress/kendo-svg-icons';
-import { IconComponent, IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
+import { checkIcon, searchIcon, xIcon, chevronDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
+import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783679907,
-    version: '25.0.0-develop.1',
+    publishDate: 1785317924,
+    version: '25.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -211,6 +211,17 @@ const hasProps = (obj, props) => {
     }
     return props.every(prop => obj.hasOwnProperty(prop));
 };
+/**
+ * @hidden
+ *
+ * Checks whether an array contains grouped data.
+ * GroupResult { aggregates: AggregateResult, field: string, items: object[], value: any }
+ * https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
+ */
+const isGroupedData = (data) => {
+    return isPresent(data) && data.length > 0 && isPresent(data[0])
+        && hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
+};
 /**
  * @hidden
  *
@@ -466,12 +477,12 @@ class SearchBarComponent {
     get isSuggestable() {
         return this._isSuggestable;
     }
-    set isFilterable(isFilterable) {
-        this._isFilterable = isFilterable;
+    set hasListAutocomplete(hasListAutocomplete) {
+        this._hasListAutocomplete = hasListAutocomplete;
         this.setAriaAutocomplete();
     }
-    get isFilterable() {
-        return this._isFilterable;
+    get hasListAutocomplete() {
+        return this._hasListAutocomplete;
     }
     get userInput() {
         return this._userInput;
@@ -510,7 +521,7 @@ class SearchBarComponent {
     ariaControls;
     ariaExpanded = null;
     get attrAriaInvalid() {
-        return this.formControl?.invalid ? true : null;
+        return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
     }
     set placeholder(text) {
         this._placeholder = text || '';
@@ -538,7 +549,7 @@ class SearchBarComponent {
     _previousValue = "";
     _placeholder = "";
     _isSuggestable = false;
-    _isFilterable = false;
+    _hasListAutocomplete = false;
     renderer;
     subs = new Subscription();
     _inputAttributes;
@@ -558,7 +569,7 @@ class SearchBarComponent {
             'aria-controls': this.ariaControls,
             'aria-activedescendant': this.activeDescendant,
             'aria-busy': this.isLoading,
-            'aria-invalid': this.formControl?.invalid
+            'aria-invalid': this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)
         };
     }
     get mutableAttributes() {
@@ -643,16 +654,16 @@ class SearchBarComponent {
         }
     }
     setAriaAutocomplete() {
-        if (this.isFilterable) {
+        if (this.hasListAutocomplete) {
             this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'list');
         }
         if (this.isSuggestable) {
             this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'inline');
         }
-        if (this.isFilterable && this.isSuggestable) {
+        if (this.hasListAutocomplete && this.isSuggestable) {
             this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'both');
         }
-        if (!this.isFilterable && !this.isSuggestable) {
+        if (!this.hasListAutocomplete && !this.isSuggestable) {
             this.renderer.removeAttribute(this.input.nativeElement, 'aria-autocomplete');
         }
     }
@@ -702,10 +713,10 @@ class SearchBarComponent {
     }
     setInputAttributes() {
         const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
-        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
+        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", hasListAutocomplete: "hasListAutocomplete", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
@@ -724,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], isSuggestable: [{
                 type: Input
-            }], isFilterable: [{
+            }], hasListAutocomplete: [{
                 type: Input
             }], userInput: [{
                 type: Input
@@ -1058,9 +1069,7 @@ class DataService {
      * Used to determine if the component received grouped data.
      */
     isGrouped(data) {
-        // GroupResult { aggregates: AggregateResult, field: string, items: object[], value: any }
-        // https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
-        return (isPresent(data) && data.length !== 0) && isPresent(data[0]) && hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
+        return isGroupedData(data);
     }
     /**
      * @hidden
@@ -1911,6 +1920,7 @@ class ListComponent {
     zone;
     renderer;
     localization;
+    injector;
     selected = [];
     focused = -1;
     textField;
@@ -1927,10 +1937,12 @@ class ListComponent {
     type = 'list';
     checkboxes = { enabled: false };
     ariaLive;
+    ariaLabel;
     isMultiselect;
     isActionSheetExpanded;
     showStickyHeader;
     rowWidth;
+    columnsWidths;
     customItemTemplate;
     text;
     allowCustom;
@@ -1955,12 +1967,12 @@ class ListComponent {
     }
     set size(size) {
         if (this.type === 'list') {
-            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this._size));
             if (size) {
                 this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
             }
-            this._size = size;
         }
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -2022,7 +2034,7 @@ class ListComponent {
         return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
     }
     /* tslint:disable:member-ordering */
-    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization) {
+    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization, injector) {
         this.dataService = dataService;
         this.wrapper = wrapper;
         this.selectionService = selectionService;
@@ -2031,6 +2043,7 @@ class ListComponent {
         this.zone = zone;
         this.renderer = renderer;
         this.localization = localization;
+        this.injector = injector;
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
@@ -2273,6 +2286,10 @@ class ListComponent {
     isItemSelected(index) {
         return this.selectionService.isSelected(index) || null;
     }
+    itemAriaSelected(index) {
+        const selected = this.isItemSelected(index);
+        return this.type === 'list' ? (selected ?? false) : selected;
+    }
     get isDisabledDefaultItem() {
         return this.disabledItemsService.isItemDisabled(this.defaultItem);
     }
@@ -2284,8 +2301,10 @@ class ListComponent {
      */
     setOverflow() {
         if (this.virtual) {
-            const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
-            this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
+            afterNextRender(() => {
+                const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
+                this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
+            }, { injector: this.injector });
         }
     }
     /**
@@ -2299,7 +2318,7 @@ class ListComponent {
     positionItems() {
         this.items.forEach((item, index) => {
             const offsetY = (index + this.startFrom) * this.virtual.itemHeight;
-            this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
+            this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px)`);
         });
     }
     setComponentClasses() {
@@ -2311,13 +2330,16 @@ class ListComponent {
         }
         if (this.type === 'dropdowngrid') {
             this.renderer.setStyle(this.wrapper.nativeElement, 'overflow-y', 'scroll');
+            if (this.size) {
+                this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            }
         }
         if (isPresent(this.virtual)) {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", ariaLabel: "ariaLabel", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", columnsWidths: "columnsWidths", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (defaultItem && !template) {
       <div
         class="k-list-optionlabel"
@@ -2387,11 +2409,12 @@ class ListComponent {
       [style.maxHeight.px]="height"
       unselectable="on"
       (scroll)="popupListScroll.emit($event)"
-      [attr.role]="dataService.grouped ? 'listbox' : null"
-      [attr.id]="dataService.grouped ? id : null"
-      [attr.aria-live]="dataService.grouped ? ariaLive : null"
-      [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
-      [attr.aria-hidden]="dataService.grouped ? !show : null"
+      [attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
+      [attr.id]="(dataService.grouped && type === 'list') ? id : null"
+      [attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
+      [attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
+      [attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
+      [attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
       >
       @if (!dataService.grouped) {
         <ul #list
@@ -2400,7 +2423,8 @@ class ListComponent {
           [attr.id]="id"
           [attr.aria-live]="ariaLive"
           [attr.aria-multiselectable]="isMultiselect"
-          [attr.aria-hidden]="!show">
+          [attr.aria-hidden]="!show ? true : null"
+          [attr.aria-label]="ariaLabel || null">
           @for (dataItem of data; track $index; let itemIndex = $index) {
             <li
               role="option"
@@ -2411,7 +2435,7 @@ class ListComponent {
               [multipleSelection]="multipleSelection"
               [attr.id]="optionPrefix + '-' + itemIndex"
               [attr.tabIndex]="-1"
-              [attr.aria-selected]="isItemSelected(itemIndex)"
+              [attr.aria-selected]="itemAriaSelected(itemIndex)"
               [class]="listItemClass"
                     [ngClass]="{
                         'k-disabled': isDisabled(itemIndex),
@@ -2452,7 +2476,7 @@ class ListComponent {
         </ul>
       }
 
-      @if (dataService.grouped) {
+      @if (dataService.grouped && type === 'list') {
         <ng-container #list>
           @for (dataItem of groupedData; track dataItem.groupIndex) {
             <ul
@@ -2499,7 +2523,7 @@ class ListComponent {
                   [attr.absolute-index]="item.index"
                   [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                   [attr.tabIndex]="-1"
-                  [attr.aria-selected]="isItemSelected(item.offsetIndex)"
+                  [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
                   [class]="listItemClass"
                     [ngClass]="{
                         'k-disabled': isDisabled(item.offsetIndex),
@@ -2529,14 +2553,96 @@ class ListComponent {
           }
         </ng-container>
       }
+
+      @if (dataService.grouped && type === 'dropdowngrid') {
+        <ul #list
+          [attr.role]="'listbox'"
+          [class]="listClass"
+          [attr.id]="id"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-label]="ariaLabel || null">
+          @if (columnsWidths?.length) {
+            <div
+              role="presentation"
+              aria-hidden="true"
+              [style.display]="'table-column-group'"
+              >
+              @for (columnWidth of columnsWidths; track $index) {
+                <div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
+              }
+            </div>
+          }
+          @for (dataItem of groupedData; track dataItem.groupIndex) {
+            @if (dataItem.header) {
+              <li
+                role="presentation"
+                [class]="listGroupItemClass"
+                [attr.group-index]="dataItem.index"
+                [style.width.px]="rowWidth ?? null"
+                >
+                <span [class]="listGroupItemTextClass">
+                  @if (groupTemplate) {
+                    <ng-template
+                          [templateContext]="{
+                              templateRef: groupTemplate.templateRef,
+                              $implicit: dataItem.value
+                      }">
+                    </ng-template>
+                  }
+                  @if (!groupTemplate) {
+                    {{ dataItem.value }}
+                  }
+                </span>
+              </li>
+            }
+            @for (item of dataItem.items; track item.offsetIndex) {
+              <li
+                role="option"
+                kendoDropDownsSelectable
+                [height]="virtual?.itemHeight"
+                [index]="item.offsetIndex"
+                [multipleSelection]="multipleSelection"
+                [attr.absolute-index]="item.index"
+                [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
+                [attr.tabIndex]="-1"
+                [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
+                [class]="listItemClass"
+                  [ngClass]="{
+                      'k-disabled': isDisabled(item.offsetIndex),
+                      'k-table-alt-row': isAltRow(item.index - 1)
+                  }"
+                [style.width.px]="rowWidth ?? null">
+                @if (template) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: template.templateRef,
+                          $implicit: item.value
+                      }">
+                  </ng-template>
+                }
+                @if (!template) {
+                  <span class="k-list-item-text">{{ getText(item.value) }}</span>
+                }
+              </li>
+            }
+          }
+          @if (!virtual) {
+            <kendo-resize-sensor
+              (resize)="listResize.emit()"
+              >
+            </kendo-resize-sensor>
+          }
+        </ul>
+      }
       @if (virtual) {
-        <div #virtualContainer class="k-height-container" role="presentation">
+        <div #virtualContainer class="k-height-container">
           <div [style.height.px]="scrollHeight">
             <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
           </div>
         </div>
       }
     </div>
+    <ng-content select=".k-no-data"></ng-content>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, decorators: [{
@@ -2613,11 +2719,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [style.maxHeight.px]="height"
       unselectable="on"
       (scroll)="popupListScroll.emit($event)"
-      [attr.role]="dataService.grouped ? 'listbox' : null"
-      [attr.id]="dataService.grouped ? id : null"
-      [attr.aria-live]="dataService.grouped ? ariaLive : null"
-      [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
-      [attr.aria-hidden]="dataService.grouped ? !show : null"
+      [attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
+      [attr.id]="(dataService.grouped && type === 'list') ? id : null"
+      [attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
+      [attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
+      [attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
+      [attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
       >
       @if (!dataService.grouped) {
         <ul #list
@@ -2626,7 +2733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [attr.id]="id"
           [attr.aria-live]="ariaLive"
           [attr.aria-multiselectable]="isMultiselect"
-          [attr.aria-hidden]="!show">
+          [attr.aria-hidden]="!show ? true : null"
+          [attr.aria-label]="ariaLabel || null">
           @for (dataItem of data; track $index; let itemIndex = $index) {
             <li
               role="option"
@@ -2637,7 +2745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [multipleSelection]="multipleSelection"
               [attr.id]="optionPrefix + '-' + itemIndex"
               [attr.tabIndex]="-1"
-              [attr.aria-selected]="isItemSelected(itemIndex)"
+              [attr.aria-selected]="itemAriaSelected(itemIndex)"
               [class]="listItemClass"
                     [ngClass]="{
                         'k-disabled': isDisabled(itemIndex),
@@ -2678,7 +2786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </ul>
       }
 
-      @if (dataService.grouped) {
+      @if (dataService.grouped && type === 'list') {
         <ng-container #list>
           @for (dataItem of groupedData; track dataItem.groupIndex) {
             <ul
@@ -2725,7 +2833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [attr.absolute-index]="item.index"
                   [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                   [attr.tabIndex]="-1"
-                  [attr.aria-selected]="isItemSelected(item.offsetIndex)"
+                  [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
                   [class]="listItemClass"
                     [ngClass]="{
                         'k-disabled': isDisabled(item.offsetIndex),
@@ -2755,19 +2863,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
         </ng-container>
       }
+
+      @if (dataService.grouped && type === 'dropdowngrid') {
+        <ul #list
+          [attr.role]="'listbox'"
+          [class]="listClass"
+          [attr.id]="id"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-label]="ariaLabel || null">
+          @if (columnsWidths?.length) {
+            <div
+              role="presentation"
+              aria-hidden="true"
+              [style.display]="'table-column-group'"
+              >
+              @for (columnWidth of columnsWidths; track $index) {
+                <div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
+              }
+            </div>
+          }
+          @for (dataItem of groupedData; track dataItem.groupIndex) {
+            @if (dataItem.header) {
+              <li
+                role="presentation"
+                [class]="listGroupItemClass"
+                [attr.group-index]="dataItem.index"
+                [style.width.px]="rowWidth ?? null"
+                >
+                <span [class]="listGroupItemTextClass">
+                  @if (groupTemplate) {
+                    <ng-template
+                          [templateContext]="{
+                              templateRef: groupTemplate.templateRef,
+                              $implicit: dataItem.value
+                      }">
+                    </ng-template>
+                  }
+                  @if (!groupTemplate) {
+                    {{ dataItem.value }}
+                  }
+                </span>
+              </li>
+            }
+            @for (item of dataItem.items; track item.offsetIndex) {
+              <li
+                role="option"
+                kendoDropDownsSelectable
+                [height]="virtual?.itemHeight"
+                [index]="item.offsetIndex"
+                [multipleSelection]="multipleSelection"
+                [attr.absolute-index]="item.index"
+                [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
+                [attr.tabIndex]="-1"
+                [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
+                [class]="listItemClass"
+                  [ngClass]="{
+                      'k-disabled': isDisabled(item.offsetIndex),
+                      'k-table-alt-row': isAltRow(item.index - 1)
+                  }"
+                [style.width.px]="rowWidth ?? null">
+                @if (template) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: template.templateRef,
+                          $implicit: item.value
+                      }">
+                  </ng-template>
+                }
+                @if (!template) {
+                  <span class="k-list-item-text">{{ getText(item.value) }}</span>
+                }
+              </li>
+            }
+          }
+          @if (!virtual) {
+            <kendo-resize-sensor
+              (resize)="listResize.emit()"
+              >
+            </kendo-resize-sensor>
+          }
+        </ul>
+      }
       @if (virtual) {
-        <div #virtualContainer class="k-height-container" role="presentation">
+        <div #virtualContainer class="k-height-container">
           <div [style.height.px]="scrollHeight">
             <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
           </div>
         </div>
       }
     </div>
+    <ng-content select=".k-no-data"></ng-content>
     `,
                     standalone: true,
                     imports: [NgStyle, TemplateContextDirective, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { selected: [{
+        }], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.Injector }], propDecorators: { selected: [{
                 type: Input
             }], focused: [{
                 type: Input
@@ -2799,6 +2989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], ariaLive: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], isMultiselect: [{
                 type: Input
             }], isActionSheetExpanded: [{
@@ -2807,6 +2999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], rowWidth: [{
                 type: Input
+            }], columnsWidths: [{
+                type: Input
             }], customItemTemplate: [{
                 type: Input
             }], text: [{
@@ -2878,6 +3072,7 @@ class AdaptiveRendererComponent {
     placeholder;
     searchBarValue;
     filterable;
+    showListContainer = true;
     closePopup = new EventEmitter();
     textInputChange = new EventEmitter();
     navigate = new EventEmitter();
@@ -2890,6 +3085,7 @@ class AdaptiveRendererComponent {
     }
     animationDuration = animationDuration;
     checkIcon = checkIcon;
+    searchIcon = searchIcon;
     expanded = false;
     messageFor(key) {
         return this.localization.get(key);
@@ -2915,7 +3111,7 @@ class AdaptiveRendererComponent {
         return this.adaptiveService.size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable", showListContainer: "showListContainer" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
           #actionSheet
           [animation]="{ duration: animationDuration }"
@@ -2934,7 +3130,7 @@ class AdaptiveRendererComponent {
           (collapse)="closePopup.emit()"
           >
           <ng-template kendoActionSheetTemplate>
-            <div class="k-text-center k-actionsheet-titlebar">
+            <div class="k-actionsheet-titlebar">
               <div class="k-actionsheet-titlebar-group">
                 <div class="k-actionsheet-title">
                   @if (title) {
@@ -2950,6 +3146,7 @@ class AdaptiveRendererComponent {
                     icon="check"
                     type="button"
                     [attr.title]="messageFor('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"
@@ -2967,13 +3164,13 @@ class AdaptiveRendererComponent {
                     [value]="searchBarValue || ''"
                     size="large"
                     [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
-                    class="k-searchbox"
+                    [inputAttributes]="{'aria-label': title}"
                     autocomplete="off"
                     (valueChange)="onValueChange($event)"
                     >
                     @if (filterable) {
                       <ng-template kendoTextBoxPrefixTemplate>
-                        <kendo-icon name="search"></kendo-icon>
+                        <kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
                       </ng-template>
                     }
                   </kendo-textbox>
@@ -2981,13 +3178,17 @@ class AdaptiveRendererComponent {
               }
             </div>
             <div class="k-actionsheet-content">
+              @if (showListContainer) {
               <div class="k-list-container">
                 <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
               </div>
+              } @else {
+                <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+              }
             </div>
           </ng-template>
         </kendo-actionsheet>
-        `, isInline: true, dependencies: [{ 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: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ 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: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -3012,7 +3213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           (collapse)="closePopup.emit()"
           >
           <ng-template kendoActionSheetTemplate>
-            <div class="k-text-center k-actionsheet-titlebar">
+            <div class="k-actionsheet-titlebar">
               <div class="k-actionsheet-titlebar-group">
                 <div class="k-actionsheet-title">
                   @if (title) {
@@ -3028,6 +3229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     icon="check"
                     type="button"
                     [attr.title]="messageFor('adaptiveCloseButtonTitle')"
+                    [attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
                     [svgIcon]="checkIcon"
                     fillMode="flat"
                     themeColor="primary"
@@ -3045,13 +3247,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     [value]="searchBarValue || ''"
                     size="large"
                     [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
-                    class="k-searchbox"
+                    [inputAttributes]="{'aria-label': title}"
                     autocomplete="off"
                     (valueChange)="onValueChange($event)"
                     >
                     @if (filterable) {
                       <ng-template kendoTextBoxPrefixTemplate>
-                        <kendo-icon name="search"></kendo-icon>
+                        <kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
                       </ng-template>
                     }
                   </kendo-textbox>
@@ -3059,15 +3261,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               }
             </div>
             <div class="k-actionsheet-content">
+              @if (showListContainer) {
               <div class="k-list-container">
                 <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
               </div>
+              } @else {
+                <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+              }
             </div>
           </ng-template>
         </kendo-actionsheet>
         `,
                     standalone: true,
-                    imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
+                    imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { title: [{
                 type: Input
@@ -3085,6 +3291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], filterable: [{
                 type: Input
+            }], showListContainer: [{
+                type: Input
             }], closePopup: [{
                 type: Output
             }], textInputChange: [{
@@ -3219,15 +3427,15 @@ class Messages extends ComponentMessages {
      */
     clearTitle;
     /**
-     * The text displayed for the check-all checkbox.
+      * The text displayed for the check-all checkbox. Available for MultiSelectTree.
      */
     checkAllText;
     /**
-     * The text set as aria-label on the select button.
+      * The text set as aria-label on the select button. Available for DropDownList, ComboBox, MultiColumnComboBox, and DropDownTree.
      */
     selectButtonText;
     /**
-     * The text set as aria-label on the list filter input.
+      * The text set as aria-label on the list filter input. Available for DropDownList, DropDownTree, and MultiSelectTree.
      */
     filterInputLabel;
     /**
@@ -3239,11 +3447,15 @@ class Messages extends ComponentMessages {
      */
     adaptiveCloseButtonTitle;
     /**
-     * The text for the input's placeholder when filtering is enabled.
+      * The text for the input's placeholder when filtering is enabled. Available for DropDownTree and MultiSelectTree.
      */
     filterInputPlaceholder;
     /**
-     * The text displayed when the user types a custom value that is not in the list of options.
+      * The accessible label of the tag list element that contains the selected items. Available for MultiSelect and MultiSelectTree.
+     */
+    chipListLabel;
+    /**
+      * The text displayed when the user types a custom value that is not in the list of options. Available for ComboBox and MultiSelect.
      *
      * The text includes a localizable string and the custom value.
      * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
@@ -3252,8 +3464,16 @@ class Messages extends ComponentMessages {
      * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
      */
     useCustomValueText;
+    /**
+    * The accessible label of the listbox that contains the list of options. Available for DropDownList, ComboBox, MultiColumnComboBox, AutoComplete, and MultiSelect.
+     */
+    listboxLabel;
+    /**
+    * The accessible label of the input element. Available for MultiSelectTree.
+     */
+    inputLabel;
     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, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", useCustomValueText: "useCustomValueText" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", chipListLabel: "chipListLabel", useCustomValueText: "useCustomValueText", listboxLabel: "listboxLabel", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
             type: Directive
@@ -3273,8 +3493,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], filterInputPlaceholder: [{
                 type: Input
+            }], chipListLabel: [{
+                type: Input
             }], useCustomValueText: [{
                 type: Input
+            }], listboxLabel: [{
+                type: Input
+            }], inputLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -3431,7 +3657,7 @@ class AutoCompleteComponent {
      * @hidden
      */
     get ariaControls() {
-        return this.isOpen ? this.listBoxId : undefined;
+        return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
     }
     /**
      * @hidden
@@ -4485,6 +4711,9 @@ class AutoCompleteComponent {
 
           i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
+          listboxLabel="Suggestions"
           >
         </ng-container>
 
@@ -4506,9 +4735,9 @@ class AutoCompleteComponent {
           }
           <input
             kendoSearchbar
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [isLoading]="isLoading"
             [ariaControls]="ariaControls"
             [id]="focusableId"
@@ -4604,24 +4833,25 @@ class AutoCompleteComponent {
             [show]="isOpen"
             [virtual]="virtual"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             >
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate?.templateRef
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate?.templateRef
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -4631,7 +4861,7 @@ class AutoCompleteComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -4672,6 +4902,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
+          listboxLabel="Suggestions"
           >
         </ng-container>
 
@@ -4693,9 +4926,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
           <input
             kendoSearchbar
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [isLoading]="isLoading"
             [ariaControls]="ariaControls"
             [id]="focusableId"
@@ -4791,24 +5024,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [show]="isOpen"
             [virtual]="virtual"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             >
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate?.templateRef
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate?.templateRef
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -5092,7 +5326,7 @@ class ComboBoxComponent extends MultiTabStop {
      * @hidden
      */
     get ariaControls() {
-        return this.isOpen ? this.listBoxId : undefined;
+        return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
     }
     /**
      * @hidden
@@ -5915,7 +6149,7 @@ class ComboBoxComponent extends MultiTabStop {
      * @hidden
      */
     get selectButtonClasses() {
-        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}`;
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.disabled ? 'k-disabled' : ''}`;
     }
     /**
      * @hidden
@@ -6182,7 +6416,7 @@ class ComboBoxComponent extends MultiTabStop {
                 this.zone.run(() => {
                     if (valueHasChanged) {
                         const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
-                        if (lowerCaseMatch || unresolvedSelection) {
+                        if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
                             this.selectionService.change(this.selectionService.focused);
                         }
                         else {
@@ -6315,6 +6549,9 @@ class ComboBoxComponent extends MultiTabStop {
         const itemText = getter(this.dataService.itemAt(focused), this.textField);
         return !isPresent(itemText) ? "" : itemText.toString();
     }
+    shouldResolveSuggestedItem(currentText) {
+        return !(this.allowCustom && this.suggest && this.focusedItemText !== currentText);
+    }
     /**
      * Focuses the first match when there's text in the input field, but no focused item.
      */
@@ -6503,7 +6740,7 @@ class ComboBoxComponent extends MultiTabStop {
             this.zone.run(() => {
                 if (valueHasChanged) {
                     const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
-                    if (lowerCaseMatch || unresolvedSelection) {
+                    if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
                         this.selectionService.change(this.selectionService.focused);
                     }
                     else {
@@ -6557,6 +6794,12 @@ class ComboBoxComponent extends MultiTabStop {
 
           i18n-adaptiveCloseButtonTitle="kendo.combobox.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-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
+
+          i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
           >
         </ng-container>
 
@@ -6578,12 +6821,12 @@ class ComboBoxComponent extends MultiTabStop {
           }
           <input
             kendoSearchbar
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [ariaControls]="ariaControls"
             [id]="focusableId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
@@ -6603,7 +6846,6 @@ class ComboBoxComponent extends MultiTabStop {
             <span
               class="k-clear-value"
               [style.visibility]="clearButtonVisibility"
-              aria-hidden="true"
               [attr.title]="messageFor('clearTitle')"
               (click)="clearValue($event)"
                 [kendoEventsOutsideAngular]="{
@@ -6698,24 +6940,27 @@ class ComboBoxComponent extends MultiTabStop {
             [show]="isOpen"
             [virtual]="virtual"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
+            [text]="text"
+            [allowCustom]="allowCustom"
             (pageChange)="pageChange($event)"
             >
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -6725,7 +6970,7 @@ class ComboBoxComponent extends MultiTabStop {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
@@ -6770,6 +7015,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-adaptiveCloseButtonTitle="kendo.combobox.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-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
+
+          i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
           >
         </ng-container>
 
@@ -6791,12 +7042,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
           <input
             kendoSearchbar
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [ariaControls]="ariaControls"
             [id]="focusableId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
@@ -6816,7 +7067,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <span
               class="k-clear-value"
               [style.visibility]="clearButtonVisibility"
-              aria-hidden="true"
               [attr.title]="messageFor('clearTitle')"
               (click)="clearValue($event)"
                 [kendoEventsOutsideAngular]="{
@@ -6911,24 +7161,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [show]="isOpen"
             [virtual]="virtual"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
+            [text]="text"
+            [allowCustom]="allowCustom"
             (pageChange)="pageChange($event)"
             >
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -7287,7 +7540,7 @@ class DropDownListComponent {
      * @hidden
      */
     get ariaLive() {
-        return this.filterable ? 'polite' : 'off';
+        return this.filterable ? 'polite' : null;
     }
     /**
      * Shows or hides the current group sticky header when using grouped data.
@@ -7676,7 +7929,7 @@ class DropDownListComponent {
     role = 'combobox';
     haspopup = 'listbox';
     get hostAriaInvalid() {
-        return this.formControl?.invalid ? true : null;
+        return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
     }
     /**
      * @hidden
@@ -8525,8 +8778,6 @@ class DropDownListComponent {
     }
     closeActionSheet() {
         this.actionSheet.toggle(false);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         if (this.filterable) {
             this.adaptiveRenderer.searchBarValue = '';
             this.filterChange.emit('');
@@ -8536,8 +8787,6 @@ class DropDownListComponent {
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
         if (!this.dataService.grouped) {
             setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         }
@@ -8589,6 +8838,9 @@ class DropDownListComponent {
 
           i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
           filterInputPlaceholder="Filter"
+
+          i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
           >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8653,7 +8905,6 @@ class DropDownListComponent {
                 class="k-searchbox k-input"
                 [ngClass]="filterInputClasses">
                 <kendo-icon-wrapper
-                  class="k-icon"
                   innerCssClass="k-input-icon"
                   name="search"
                   [svgIcon]="searchIcon">
@@ -8704,24 +8955,25 @@ class DropDownListComponent {
             [virtual]="virtual"
             [ariaLive]="ariaLive"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             [defaultItem]="defaultItem">
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -8731,7 +8983,7 @@ class DropDownListComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
@@ -8776,6 +9028,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
           filterInputPlaceholder="Filter"
+
+          i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
           >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8840,7 +9095,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 class="k-searchbox k-input"
                 [ngClass]="filterInputClasses">
                 <kendo-icon-wrapper
-                  class="k-icon"
                   innerCssClass="k-input-icon"
                   name="search"
                   [svgIcon]="searchIcon">
@@ -8891,24 +9145,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [virtual]="virtual"
             [ariaLive]="ariaLive"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             [defaultItem]="defaultItem">
+            <!--no-data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -9229,6 +9484,7 @@ class TagListComponent {
     disabled;
     tagPrefix;
     id;
+    ariaLabel;
     set size(size) {
         this.renderer.removeClass(this.hostElement.nativeElement, getSizeClass('chip-list', this.size));
         if (size) {
@@ -9251,7 +9507,11 @@ class TagListComponent {
         return this.id;
     }
     taglistRole = 'listbox';
+    get hostAriaLabel() {
+        return this.ariaLabel || null;
+    }
     multiselectable = true;
+    ariaOrientation = 'horizontal';
     _size;
     constructor(renderer, hostElement) {
         this.renderer = renderer;
@@ -9306,7 +9566,7 @@ class TagListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", ariaLabel: "ariaLabel", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: `
         @for (tag of tags; track $index; let index = $index) {
           <div
             [attr.id]="itemId(tag, index)"
@@ -9332,7 +9592,7 @@ class TagListComponent {
             >
             <span class="k-chip-content">
               @if (isGroupTag(tag)) {
-                <span class="k-chip-label k-text-ellipsis">
+                <span class="k-chip-label">
                   @if (groupTemplate) {
                     <ng-template
                             [templateContext]="{
@@ -9346,7 +9606,7 @@ class TagListComponent {
                   }
                 </span>
               } @else {
-                <span class="k-chip-label k-text-ellipsis">
+                <span class="k-chip-label">
                   @if (template) {
                     <ng-template
                             [templateContext]="{
@@ -9362,11 +9622,13 @@ class TagListComponent {
               }
             </span>
             <span class="k-chip-actions">
-              <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
+              <span class="k-chip-action k-chip-remove-action">
                 <kendo-icon-wrapper
+                  [attr.aria-hidden]="index !== focused"
                   (mousedown)="deleteTag($event, tag, index)"
                   name="x-circle"
                   [svgIcon]="xCircleIcon"
+                  size="small"
                   >
                 </kendo-icon-wrapper>
               </span>
@@ -9406,7 +9668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             >
             <span class="k-chip-content">
               @if (isGroupTag(tag)) {
-                <span class="k-chip-label k-text-ellipsis">
+                <span class="k-chip-label">
                   @if (groupTemplate) {
                     <ng-template
                             [templateContext]="{
@@ -9420,7 +9682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   }
                 </span>
               } @else {
-                <span class="k-chip-label k-text-ellipsis">
+                <span class="k-chip-label">
                   @if (template) {
                     <ng-template
                             [templateContext]="{
@@ -9436,11 +9698,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               }
             </span>
             <span class="k-chip-actions">
-              <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
+              <span class="k-chip-action k-chip-remove-action">
                 <kendo-icon-wrapper
+                  [attr.aria-hidden]="index !== focused"
                   (mousedown)="deleteTag($event, tag, index)"
                   name="x-circle"
                   [svgIcon]="xCircleIcon"
+                  size="small"
                   >
                 </kendo-icon-wrapper>
               </span>
@@ -9472,6 +9736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], id: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], size: [{
                 type: Input
             }], rounded: [{
@@ -9491,9 +9757,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], taglistRole: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], multiselectable: [{
                 type: HostBinding,
                 args: ['attr.aria-multiselectable']
+            }], ariaOrientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
             }] } });
 
 const MULTISELECT_VALUE_ACCESSOR = {
@@ -9581,7 +9853,7 @@ class MultiSelectComponent {
      * @hidden
      */
     get ariaControls() {
-        return this.isOpen ? this.listBoxId : undefined;
+        return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
     }
     /**
      * @hidden
@@ -11265,6 +11537,9 @@ class MultiSelectComponent {
           i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
           clearTitle="clear"
 
+          i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
+          chipListLabel="chip list"
+
           i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
           popupLabel="Options list"
 
@@ -11272,7 +11547,10 @@ class MultiSelectComponent {
           adaptiveCloseButtonTitle="Close"
 
           i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
-          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
+          useCustomValueText="Use &quot;[[customValue]]&quot;"
+
+          i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
           >
         </ng-container>
 
@@ -11307,17 +11585,18 @@ class MultiSelectComponent {
               [groupTemplate]="groupTagTemplate"
               [tagPrefix]="tagPrefix"
               [disabledIndices]="disabledIndices"
+              [ariaLabel]="messageFor('chipListLabel')"
               (removeTag)="handleRemoveTag($event)"
               >
             </kendo-taglist>
             <input
               kendoSearchbar
               [ariaControls]="ariaControls"
-              [ariaExpanded]="isOpen"
+              [ariaExpanded]="isAdaptive ? false : isOpen"
               [id]="focusableId"
               [tagListId]="tagListId"
               [isLoading]="loading"
-              [isFilterable]="filterable"
+              [hasListAutocomplete]="filterable"
               [activeDescendant]="activeDescendant"
               [userInput]="text"
               [disabled]="disabled"
@@ -11344,7 +11623,6 @@ class MultiSelectComponent {
               (mousedown)="clearAll($event)"
               >
               <kendo-icon-wrapper
-                class="k-icon"
                 name="x"
                 [svgIcon]="xIcon"
                 >
@@ -11422,23 +11700,24 @@ class MultiSelectComponent {
             [customItemTemplate]="customItemTemplate"
             [text]="text"
             [allowCustom]="allowCustom"
+            [ariaLabel]="messageFor('listboxLabel')"
             >
+            <!--no data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -11448,7 +11727,7 @@ class MultiSelectComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -11484,6 +11763,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
           clearTitle="clear"
 
+          i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
+          chipListLabel="chip list"
+
           i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
           popupLabel="Options list"
 
@@ -11491,7 +11773,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           adaptiveCloseButtonTitle="Close"
 
           i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
-          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
+          useCustomValueText="Use &quot;[[customValue]]&quot;"
+
+          i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
           >
         </ng-container>
 
@@ -11526,17 +11811,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [groupTemplate]="groupTagTemplate"
               [tagPrefix]="tagPrefix"
               [disabledIndices]="disabledIndices"
+              [ariaLabel]="messageFor('chipListLabel')"
               (removeTag)="handleRemoveTag($event)"
               >
             </kendo-taglist>
             <input
               kendoSearchbar
               [ariaControls]="ariaControls"
-              [ariaExpanded]="isOpen"
+              [ariaExpanded]="isAdaptive ? false : isOpen"
               [id]="focusableId"
               [tagListId]="tagListId"
               [isLoading]="loading"
-              [isFilterable]="filterable"
+              [hasListAutocomplete]="filterable"
               [activeDescendant]="activeDescendant"
               [userInput]="text"
               [disabled]="disabled"
@@ -11563,7 +11849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               (mousedown)="clearAll($event)"
               >
               <kendo-icon-wrapper
-                class="k-icon"
                 name="x"
                 [svgIcon]="xIcon"
                 >
@@ -11641,23 +11926,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [customItemTemplate]="customItemTemplate"
             [text]="text"
             [allowCustom]="allowCustom"
+            [ariaLabel]="messageFor('listboxLabel')"
             >
+            <!--no data template-->
+            @if (data.length === 0) {
+              <div class="k-no-data" [attr.aria-live]="'polite'">
+                @if (noDataTemplate) {
+                  <ng-template
+                      [templateContext]="{
+                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                      }">
+                  </ng-template>
+                }
+                @if (!noDataTemplate) {
+                  <div>{{ messageFor('noDataText') }}</div>
+                }
+              </div>
+            }
           </kendo-list>
-          <!--no data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data" [attr.aria-live]="'polite'">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
           <!--footer template-->
           @if (footerTemplate) {
             <ng-template
@@ -12113,6 +12399,17 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     totalColumnsWidth;
+    /**
+     * @hidden
+     */
+    get visibleColumnsWidths() {
+        return this.columns.reduce((widths, column, index) => {
+            if (!column.hidden && column.matchesMedia) {
+                widths.push(this.getColumnWidth(index));
+            }
+            return widths;
+        }, []);
+    }
     get popupWidth() {
         const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
         const min = `${wrapperOffsetWidth}px`;
@@ -12127,7 +12424,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     get tableSizeClass() {
-        return `${this.size ? getSizeClass('table', this.size) : ''}`;
+        const effectiveSize = this.isAdaptive ? 'large' : this.size;
+        return `${effectiveSize ? getSizeClass('table', effectiveSize) : ''}`;
     }
     /**
      * @hidden
@@ -12296,6 +12594,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
           popupLabel="Options list"
           i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.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-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
         ></ng-container>
 
         <ng-container
@@ -12317,11 +12617,11 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
           <input
             kendoSearchbar
             [ariaControls]="ariaControls"
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [id]="focusableId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
@@ -12425,7 +12725,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
             <!--grid header-->
             <div #header class="k-table-header">
               <div #headerWrap class="k-table-header-wrap">
-                <table #headerTable class="k-table" role="presentation">
+                <table #headerTable class="k-table">
                   <colgroup>
                   @for (column of columns; track column) {
                     @if (!column.hidden && column.matchesMedia) {
@@ -12509,7 +12809,9 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
             [virtual]="virtual"
             [type]="'dropdowngrid'"
             [rowWidth]="rowWidth"
+            [columnsWidths]="visibleColumnsWidths"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             (listResize)="updateHeaderPadding(header)"
             (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
@@ -12536,25 +12838,19 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
           <!--user-defined footer template-->
           @if (footerTemplate) {
             <div class="k-table-footer">
-              <table class="k-table">
-                <tfoot class="k-table-tfoot">
-                  <tr class="k-table-row">
-                    <td class="k-table-td">
-                      <ng-template
+              <span class="k-table-td">
+                <ng-template
                                             [templateContext]="{
                                                 templateRef: footerTemplate.templateRef
                                             }"
-                        >
-                      </ng-template>
-                    </td>
-                  </tr>
-                </tfoot>
-              </table>
+                  >
+                </ng-template>
+              </span>
             </div>
           }
         </div>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
@@ -12610,6 +12906,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           popupLabel="Options list"
           i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.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-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
+          listboxLabel="Options"
         ></ng-container>
 
         <ng-container
@@ -12631,11 +12929,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <input
             kendoSearchbar
             [ariaControls]="ariaControls"
-            [ariaExpanded]="isOpen"
+            [ariaExpanded]="isAdaptive ? false : isOpen"
             [id]="focusableId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
-            [isFilterable]="filterable"
+            [hasListAutocomplete]="filterable"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
@@ -12739,7 +13037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <!--grid header-->
             <div #header class="k-table-header">
               <div #headerWrap class="k-table-header-wrap">
-                <table #headerTable class="k-table" role="presentation">
+                <table #headerTable class="k-table">
                   <colgroup>
                   @for (column of columns; track column) {
                     @if (!column.hidden && column.matchesMedia) {
@@ -12823,7 +13121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [virtual]="virtual"
             [type]="'dropdowngrid'"
             [rowWidth]="rowWidth"
+            [columnsWidths]="visibleColumnsWidths"
             [showStickyHeader]="showStickyHeader"
+            [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
             (listResize)="updateHeaderPadding(header)"
             (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
@@ -12850,20 +13150,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <!--user-defined footer template-->
           @if (footerTemplate) {
             <div class="k-table-footer">
-              <table class="k-table">
-                <tfoot class="k-table-tfoot">
-                  <tr class="k-table-row">
-                    <td class="k-table-td">
-                      <ng-template
+              <span class="k-table-td">
+                <ng-template
                                             [templateContext]="{
                                                 templateRef: footerTemplate.templateRef
                                             }"
-                        >
-                      </ng-template>
-                    </td>
-                  </tr>
-                </tfoot>
-              </table>
+                  >
+                </ng-template>
+              </span>
             </div>
           }
         </div>
@@ -12993,7 +13287,7 @@ class DropDownTreeComponent {
         return this.readonly ? '' : null;
     }
     get hostAriaInvalid() {
-        return this.formControl?.invalid ? true : null;
+        return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
     }
     get isDisabled() {
         return this.disabled || null;
@@ -13005,7 +13299,7 @@ class DropDownTreeComponent {
         return this.loading ? 'true' : null;
     }
     get hostAriaControls() {
-        return this.isOpen ? this.treeViewId : null;
+        return (!this.isAdaptive && this.isOpen) ? this.treeViewId : null;
     }
     get id() {
         return this.focusableId;
@@ -13017,7 +13311,7 @@ class DropDownTreeComponent {
     role = 'combobox';
     ariaHasPopup = 'tree';
     get isAriaExpanded() {
-        return this.isOpen;
+        return this.isAdaptive ? false : this.isOpen;
     }
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
@@ -13037,6 +13331,7 @@ class DropDownTreeComponent {
             // the treeview animations are initially disabled (we don't want expand animations during popup opening)
             // re-enables the animations for user interaction
             treeview.animate = true;
+            treeview.loadMoreButtonRole = 'treeitem';
             this._treeview = treeview;
         }
     }
@@ -13337,7 +13632,12 @@ class DropDownTreeComponent {
     get isFilterActive() {
         return this.filterInput && document.activeElement === this.filterInput.nativeElement;
     }
-    popupRef;
+    set popupRef(value) {
+        this._popupRef.set(value);
+    }
+    get popupRef() {
+        return this._popupRef();
+    }
     /**
      * @hidden
      */
@@ -13492,6 +13792,7 @@ class DropDownTreeComponent {
     _size;
     _rounded;
     _fillMode;
+    _popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
     _searchableNodes = [];
     _typedValue = '';
     printableCharacters = new Subject();
@@ -13736,7 +14037,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     get popupContainerClasses() {
-        const containerClasses = ['k-dropdowntree-popup'];
+        const containerClasses = ['k-list-container', 'k-dropdowntree-popup'];
         if (!this.popupSettings.popupClass) {
             return containerClasses;
         }
@@ -14314,6 +14615,7 @@ class DropDownTreeComponent {
           [title]="adaptiveTitle"
           [showTextInput]="filterable"
           [subtitle]="adaptiveSubtitle"
+          [showListContainer]="false"
           (closePopup)="togglePopup(false)"
           (textInputChange)="handleFilterInputChange($event)"
           [placeholder]="placeholder"
@@ -14330,14 +14632,14 @@ class DropDownTreeComponent {
                 class="k-textbox k-input"
                 [ngClass]="filterInputClasses"
                 >
-                <span class="k-input-prefix">
+                <span class="k-input-prefix k-input-prefix-horizontal">
                   <kendo-icon-wrapper
-                    class="k-icon"
                     name="search"
                     [svgIcon]="searchIcon"
                     >
                   </kendo-icon-wrapper>
                 </span>
+                <kendo-separator></kendo-separator>
                 <input
                   #filterInput
                   (input)="handleFilterInputChange($event.target)"
@@ -14369,7 +14671,7 @@ class DropDownTreeComponent {
             <kendo-treeview
               #treeview
               [attr.id]="treeViewId"
-              [size]="windowSize !== 'large' ? 'large' : size"
+              [size]="isAdaptive ? 'large' : size"
               [nodes]="data"
               [style.maxHeight.px]="listHeight"
               [animate]="false"
@@ -14422,7 +14724,7 @@ class DropDownTreeComponent {
         @if (isOpen || isAdaptiveModeEnabled) {
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
@@ -14549,6 +14851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [title]="adaptiveTitle"
           [showTextInput]="filterable"
           [subtitle]="adaptiveSubtitle"
+          [showListContainer]="false"
           (closePopup)="togglePopup(false)"
           (textInputChange)="handleFilterInputChange($event)"
           [placeholder]="placeholder"
@@ -14565,14 +14868,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 class="k-textbox k-input"
                 [ngClass]="filterInputClasses"
                 >
-                <span class="k-input-prefix">
+                <span class="k-input-prefix k-input-prefix-horizontal">
                   <kendo-icon-wrapper
-                    class="k-icon"
                     name="search"
                     [svgIcon]="searchIcon"
                     >
                   </kendo-icon-wrapper>
                 </span>
+                <kendo-separator></kendo-separator>
                 <input
                   #filterInput
                   (input)="handleFilterInputChange($event.target)"
@@ -14604,7 +14907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <kendo-treeview
               #treeview
               [attr.id]="treeViewId"
-              [size]="windowSize !== 'large' ? 'large' : size"
+              [size]="isAdaptive ? 'large' : size"
               [nodes]="data"
               [style.maxHeight.px]="listHeight"
               [animate]="false"
@@ -14660,7 +14963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent, SeparatorComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { icon: [{
                 type: Input
@@ -15364,14 +15667,11 @@ class MultiSelectTreeComponent {
         return this.disabled || null;
     }
     treeViewId = `k-${guid()}`;
-    get hostAriaAutocomplete() {
-        return this.filterable ? 'list' : null;
-    }
     get isLoading() {
         return this.loading;
     }
     get hostAriaInvalid() {
-        return this.formControl?.invalid ? true : null;
+        return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
     }
     get isBusy() {
         return this.loading ? 'true' : null;
@@ -15383,14 +15683,9 @@ class MultiSelectTreeComponent {
     get hostTabIndex() {
         return this.tabindex;
     }
-    role = 'combobox';
-    ariaHasPopup = 'tree';
     get isReadonly() {
         return this.readonly ? '' : null;
     }
-    get ariaDescribedBy() {
-        return this.tagListId;
-    }
     get ariaActiveDescendant() {
         return this.focusedTagId;
     }
@@ -16085,7 +16380,6 @@ class MultiSelectTreeComponent {
             this._typedValue = '';
         }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -16539,9 +16833,7 @@ class MultiSelectTreeComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
@@ -16562,8 +16854,6 @@ class MultiSelectTreeComponent {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
             this.clearFilter();
         }
     }
@@ -16877,8 +17167,6 @@ class MultiSelectTreeComponent {
     closeActionSheet() {
         this.wrapper.nativeElement.focus();
         this.actionSheet.toggle(false);
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
         this.clearFilter();
         this.closed.emit();
     }
@@ -16886,13 +17174,11 @@ class MultiSelectTreeComponent {
         this.actionSheet.toggle(true);
         this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.cdr.detectChanges();
         this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
             LocalizationService,
             NavigationService,
             DataService,
@@ -16928,6 +17214,9 @@ class MultiSelectTreeComponent {
           i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
           clearTitle="clear"
 
+          i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
+          chipListLabel="chip list"
+
           i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
           checkAllText="Check all"
 
@@ -16942,6 +17231,9 @@ class MultiSelectTreeComponent {
 
           i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
           filterInputPlaceholder="Filter"
+
+          i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
+          inputLabel="Select items"
           >
         </ng-container>
         <kendo-taglist
@@ -16960,10 +17252,19 @@ class MultiSelectTreeComponent {
           [template]="tagTemplate"
           [groupTemplate]="groupTagTemplate"
           [disabledIndices]="disabledIndices"
+          [ariaLabel]="messageFor('chipListLabel')"
           (removeTag)="handleRemoveTag($event)"
           >
         </kendo-taglist>
-        <span class="k-input-inner">
+        <span class="k-input-inner"
+          role="combobox"
+          aria-haspopup="tree"
+          [attr.aria-expanded]="isOpen"
+          [attr.aria-autocomplete]="filterable ? 'list' : null"
+          [attr.aria-controls]="isOpen ? treeViewId : null"
+          [attr.aria-describedby]="tags?.length ? tagListId : null"
+          [attr.aria-disabled]="disabled || null"
+          [attr.aria-label]="messageFor('inputLabel')">
           @if (!tags || !tags.length) {
             <span
               class="k-input-value-text"
@@ -16981,7 +17282,6 @@ class MultiSelectTreeComponent {
             (click)="clearAll($event)"
             >
             <kendo-icon-wrapper
-              class="k-icon"
               name="x"
               [svgIcon]="xIcon"
               >
@@ -17004,6 +17304,7 @@ class MultiSelectTreeComponent {
           [title]="adaptiveTitle"
           [showTextInput]="filterable"
           [subtitle]="adaptiveSubtitle"
+          [showListContainer]="false"
           (closePopup)="togglePopup(false)"
           (textInputChange)="onFilterChange($event)"
           [searchBarValue]="filter"
@@ -17020,7 +17321,7 @@ class MultiSelectTreeComponent {
                 class="k-textbox k-input"
                 [ngClass]="filterInputClasses"
                 >
-                <span class="k-input-prefix">
+                <span class="k-input-prefix k-input-prefix-horizontal">
                   <kendo-icon-wrapper
                     class="k-icon"
                     name="search"
@@ -17028,6 +17329,7 @@ class MultiSelectTreeComponent {
                     >
                   </kendo-icon-wrapper>
                 </span>
+                <kendo-separator></kendo-separator>
                 <input
                   #filterInput
                   (input)="handleFilterInputChange($event.target)"
@@ -17151,7 +17453,7 @@ class MultiSelectTreeComponent {
         @if (isOpen || isAdaptiveModeEnabled) {
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
@@ -17195,6 +17497,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
           clearTitle="clear"
 
+          i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
+          chipListLabel="chip list"
+
           i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
           checkAllText="Check all"
 
@@ -17209,6 +17514,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
           filterInputPlaceholder="Filter"
+
+          i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
+          inputLabel="Select items"
           >
         </ng-container>
         <kendo-taglist
@@ -17227,10 +17535,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [template]="tagTemplate"
           [groupTemplate]="groupTagTemplate"
           [disabledIndices]="disabledIndices"
+          [ariaLabel]="messageFor('chipListLabel')"
           (removeTag)="handleRemoveTag($event)"
           >
         </kendo-taglist>
-        <span class="k-input-inner">
+        <span class="k-input-inner"
+          role="combobox"
+          aria-haspopup="tree"
+          [attr.aria-expanded]="isOpen"
+          [attr.aria-autocomplete]="filterable ? 'list' : null"
+          [attr.aria-controls]="isOpen ? treeViewId : null"
+          [attr.aria-describedby]="tags?.length ? tagListId : null"
+          [attr.aria-disabled]="disabled || null"
+          [attr.aria-label]="messageFor('inputLabel')">
           @if (!tags || !tags.length) {
             <span
               class="k-input-value-text"
@@ -17248,7 +17565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             (click)="clearAll($event)"
             >
             <kendo-icon-wrapper
-              class="k-icon"
               name="x"
               [svgIcon]="xIcon"
               >
@@ -17271,6 +17587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [title]="adaptiveTitle"
           [showTextInput]="filterable"
           [subtitle]="adaptiveSubtitle"
+          [showListContainer]="false"
           (closePopup)="togglePopup(false)"
           (textInputChange)="onFilterChange($event)"
           [searchBarValue]="filter"
@@ -17287,7 +17604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 class="k-textbox k-input"
                 [ngClass]="filterInputClasses"
                 >
-                <span class="k-input-prefix">
+                <span class="k-input-prefix k-input-prefix-horizontal">
                   <kendo-icon-wrapper
                     class="k-icon"
                     name="search"
@@ -17295,6 +17612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     >
                   </kendo-icon-wrapper>
                 </span>
+                <kendo-separator></kendo-separator>
                 <input
                   #filterInput
                   (input)="handleFilterInputChange($event.target)"
@@ -17420,17 +17738,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent, SeparatorComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: i7.AdaptiveService }], propDecorators: { isDisabled: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], hostAriaAutocomplete: [{
-                type: HostBinding,
-                args: ['attr.aria-autocomplete']
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
@@ -17449,18 +17761,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], hostTabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], ariaHasPopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }], ariaDescribedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
@@ -17881,7 +18184,6 @@ const DEFAULT_FILTER_SETTINGS = {
 /**
  * Implements an event handler for the `filterChange` event of a DropDowns component
  * which performs simple data filtering.
- * Currently, the built-in filtering does not work with [grouped data](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupby).
  *
  * @example
  * ```ts
@@ -17941,7 +18243,14 @@ class FilterDirective {
         }
     }
     handleFilterChange(query) {
-        this.component.data = this.data.filter(item => this.matchesAnyField(item, query));
+        if (isGroupedData(this.data)) {
+            this.component.data = this.data
+                .map(group => ({ ...group, items: group.items.filter(item => this.matchesAnyField(item, query)) }))
+                .filter(group => group.items.length > 0);
+        }
+        else {
+            this.component.data = this.data.filter(item => this.matchesAnyField(item, query));
+        }
     }
     matchesAnyField(item, query) {
         const normalizedQuery = this.normalizeValue(query);
@@ -18018,7 +18327,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * <kendo-combobox>
  *   <kendo-combobox-messages
  *     noDataText="No items found"
- *     filterInputPlaceholder="Search items">
+ *     filterInputPlaceholder="Search items"
+ *     clearTitle="Clear selection">
  *   </kendo-combobox-messages>
  * </kendo-combobox>
  *
@@ -18032,7 +18342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * <kendo-autocomplete>
  *   <kendo-autocomplete-messages
  *     noDataText="No items found"
- *     filterInputPlaceholder="Type to search">
+ *     filterInputPlaceholder="Type to search"
+ *     clearTitle="Clear input">
  *   </kendo-autocomplete-messages>
  * </kendo-autocomplete>
  *