@progress/kendo-angular-layout 24.0.0-develop.13 → 24.0.0-develop.15

package/expansionpanel/expansionpanel.component.d.ts

@@ -111,6 +111,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     header: ElementRef;
     hostClass: boolean;
     get expandedClass(): boolean;
+    get disabledClass(): boolean;
     direction: string;
     /**
      * @hidden

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

@@ -16,10 +16,10 @@ import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, ca
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
-import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
+import { ProgressBarComponent, ProgressBarCustomMessagesComponent } from '@progress/kendo-angular-progressbar';
 import { Draggable } from '@progress/kendo-draggable';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DatePipe } from '@progress/kendo-angular-intl';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 
 /**
  * @hidden
@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777479372,
-    version: '24.0.0-develop.13',
+    publishDate: 1777541275,
+    version: '24.0.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -428,7 +428,7 @@ class PanelBarItemComponent {
         return (this.hasChildItems || this.hasContent) ? !this.disabled && this.expanded : null;
     }
     get ariaSelected() {
-        return !this.disabled && this.selected;
+        return !this.disabled && (this.selected || this.expanded);
     }
     get ariaDisabled() {
         return this.disabled ? true : null;
@@ -669,8 +669,8 @@ class PanelBarItemComponent {
                 <div
                   #contentWrapper
                   [@toggle]="state"
-                  [attr.role]="'group'"
-                  [attr.aria-hidden]="!disabled && !expanded"
+                  [attr.role]="hasChildItems ? 'group' : null"
+                  [attr.aria-hidden]="(!disabled && !expanded) || null"
                   >
                 @if (hasChildItems && !items?.length) {
                   <div
@@ -843,8 +843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 <div
                   #contentWrapper
                   [@toggle]="state"
-                  [attr.role]="'group'"
-                  [attr.aria-hidden]="!disabled && !expanded"
+                  [attr.role]="hasChildItems ? 'group' : null"
+                  [attr.aria-hidden]="(!disabled && !expanded) || null"
                   >
                 @if (hasChildItems && !items?.length) {
                   <div
@@ -1236,7 +1236,7 @@ class PanelBarComponent {
     hostClasses = true;
     tabIndex = 0;
     role = 'tree';
-    activeDescendant = '';
+    activeDescendant = null;
     get hostHeight() {
         return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
     }
@@ -1369,7 +1369,7 @@ class PanelBarComponent {
     onComponentBlur() {
         this.eventService.onBlur();
         this.focused = false;
-        this.activeDescendant = '';
+        this.activeDescendant = null;
     }
     /**
      * @hidden
@@ -1455,7 +1455,7 @@ class PanelBarComponent {
                 if (currentItem.selected !== selectedState || currentItem.focused !== focusedState) {
                     currentItem.selected = selectedState;
                     currentItem.focused = focusedState;
-                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    this.activeDescendant = focusedState ? currentItem.itemId : null;
                     modifiedItems.push(currentItem);
                 }
             });
@@ -1466,7 +1466,7 @@ class PanelBarComponent {
                 const focusedState = currentItem === item;
                 if (currentItem.focused !== focusedState) {
                     currentItem.focused = focusedState;
-                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    this.activeDescendant = focusedState ? currentItem.itemId : null;
                     modifiedItems.push(currentItem);
                 }
             });
@@ -2377,8 +2377,9 @@ class SplitterBarComponent {
     ariaLabel = 'Splitter pane';
     focused = false;
     get hostOrientation() {
-        return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        return this.orientation === 'horizontal' ? 'vertical' : null;
     }
+    ariaKeyShortcuts = 'ArrowLeft ArrowRight ArrowUp ArrowDown';
     get tabIndex() {
         return this.splitterService.isStatic(this.index) ? -1 : 0;
     }
@@ -2587,7 +2588,7 @@ class SplitterBarComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         @if (shouldShowIcon('prev')) {
           <div class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
@@ -2597,7 +2598,7 @@ class SplitterBarComponent {
             ></kendo-icon-wrapper>
           </div>
         }
-        <div class="k-resize-handle"></div>
+        <div class="k-resize-handle" aria-hidden="true"></div>
         @if (shouldShowIcon('next')) {
           <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
@@ -2623,7 +2624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             ></kendo-icon-wrapper>
           </div>
         }
-        <div class="k-resize-handle"></div>
+        <div class="k-resize-handle" aria-hidden="true"></div>
         @if (shouldShowIcon('next')) {
           <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
@@ -2651,6 +2652,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], hostOrientation: [{
                 type: HostBinding,
                 args: ['attr.aria-orientation']
+            }], ariaKeyShortcuts: [{
+                type: HostBinding,
+                args: ['attr.aria-keyshortcuts']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -3878,7 +3882,7 @@ class TabComponent {
         return this.tab.selected;
     }
     get disabledClass() {
-        return this.tab.disabled;
+        return this.tab.disabled || null;
     }
     get focusedClass() {
         return this.tab.focused;
@@ -4657,7 +4661,7 @@ class TabStripComponent {
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : null"
               >
               @for (tab of tabs; track tab; let i = $index) {
                 <li
@@ -4728,9 +4732,9 @@ class TabStripComponent {
                             [tabIndex]="0"
                             role="tabpanel"
                             [id]="getTabPanelId(i)"
-                            [attr.aria-hidden]="!tab.selected"
+                            [attr.aria-hidden]="!tab.selected || null"
                             [attr.aria-labelledby]="getTabId(i)"
-                            [attr.aria-disabled]="tab.disabled"
+                            [attr.aria-disabled]="tab.disabled || null"
                         >
                             <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
                         </div>
@@ -4850,7 +4854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : null"
               >
               @for (tab of tabs; track tab; let i = $index) {
                 <li
@@ -4921,9 +4925,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             [tabIndex]="0"
                             role="tabpanel"
                             [id]="getTabPanelId(i)"
-                            [attr.aria-hidden]="!tab.selected"
+                            [attr.aria-hidden]="!tab.selected || null"
                             [attr.aria-labelledby]="getTabId(i)"
-                            [attr.aria-disabled]="tab.disabled"
+                            [attr.aria-disabled]="tab.disabled || null"
                         >
                             <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
                         </div>
@@ -6956,6 +6960,7 @@ class StepperStepComponent {
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
           [attr.title]='step.label'
+          [attr.aria-label]='step.label'
           [attr.aria-disabled]='step.disabled'
           [attr.aria-current]='index === current ? "step" : null'
           (focus)='onFocus()'
@@ -6971,7 +6976,6 @@ class StepperStepComponent {
             @if (showIndicator) {
               <span
                 class='k-step-indicator'
-                aria-hidden='true'
                 [style.transition-duration.ms]='transitionDuration'
                 >
                 @if (indicatorTemplate) {
@@ -7035,6 +7039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
           [attr.title]='step.label'
+          [attr.aria-label]='step.label'
           [attr.aria-disabled]='step.disabled'
           [attr.aria-current]='index === current ? "step" : null'
           (focus)='onFocus()'
@@ -7050,7 +7055,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             @if (showIndicator) {
               <span
                 class='k-step-indicator'
-                aria-hidden='true'
                 [style.transition-duration.ms]='transitionDuration'
                 >
                 @if (indicatorTemplate) {
@@ -7661,9 +7665,10 @@ class StepperComponent {
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
+            <kendo-progressbar-messages progressBarLabel="progress"></kendo-progressbar-messages>
           </kendo-progressbar>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -7716,11 +7721,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
+            <kendo-progressbar-messages progressBarLabel="progress"></kendo-progressbar-messages>
           </kendo-progressbar>
         }
         `,
                     standalone: true,
-                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent]
+                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent, ProgressBarCustomMessagesComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: StepperService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -9041,6 +9047,9 @@ class ExpansionPanelComponent {
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
+    get disabledClass() {
+        return this.disabled;
+    }
     direction;
     /**
      * @hidden
@@ -9246,7 +9255,7 @@ class ExpansionPanelComponent {
         this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -9256,8 +9265,7 @@ class ExpansionPanelComponent {
         <div
           #header
           [class.k-expander-header]="true"
-          [class.k-disabled]="disabled"
-          [attr.aria-disabled]="disabled"
+          [attr.aria-disabled]="disabled || null"
           [attr.aria-expanded]="expanded && !disabled"
           role="button"
           tabindex="0"
@@ -9290,7 +9298,7 @@ class ExpansionPanelComponent {
           </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+          <div class="k-expander-content">
             <ng-content></ng-content>
           </div>
         </div>
@@ -9312,8 +9320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         <div
           #header
           [class.k-expander-header]="true"
-          [class.k-disabled]="disabled"
-          [attr.aria-disabled]="disabled"
+          [attr.aria-disabled]="disabled || null"
           [attr.aria-expanded]="expanded && !disabled"
           role="button"
           tabindex="0"
@@ -9346,7 +9353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+          <div class="k-expander-content">
             <ng-content></ng-content>
           </div>
         </div>
@@ -9395,6 +9402,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], expandedClass: [{
                 type: HostBinding,
                 args: ['class.k-expanded']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -10415,18 +10425,12 @@ class TileLayoutItemComponent {
     resizable = true;
     itemClass = true;
     hostRole = 'listitem';
-    get hostDropEffect() {
-        return this.isResizable || this.isReorderable ? 'execute' : undefined;
-    }
     get hostTabindex() {
         return this.isNavigable ? '0' : undefined;
     }
     get ariaKeyShortcuts() {
         return this.isNavigable ? 'Enter' : undefined;
     }
-    get hostGrabbed() {
-        return this.isResizable || this.isReorderable;
-    }
     get hostLabelledBy() {
         return this.title ? this.titleId : undefined;
     }
@@ -10552,7 +10556,7 @@ class TileLayoutItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
         @if (title) {
           <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
@@ -10621,18 +10625,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], hostDropEffect: [{
-                type: HostBinding,
-                args: ['attr.aria-dropeffect']
             }], hostTabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
             }], ariaKeyShortcuts: [{
                 type: HostBinding,
                 args: ['attr.aria-keyshortcuts']
-            }], hostGrabbed: [{
-                type: HostBinding,
-                args: ['attr.aria-grabbed']
             }], hostLabelledBy: [{
                 type: HostBinding,
                 args: ['attr.aria-labelledby']
@@ -11832,13 +11830,19 @@ class TimelineCardComponent {
         }
     }
     get role() {
-        return this.orientation === 'vertical' ? 'button' : 'tabpanel';
+        if (this.orientation === 'vertical') {
+            return 'button';
+        }
+        return this.event ? 'tabpanel' : null;
+    }
+    get ariaCardLabel() {
+        return this.orientation === 'horizontal' && this.event ? this.event.subtitle : null;
     }
     get ariaLive() {
         return this.orientation === 'vertical' ? 'polite' : null;
     }
     get ariaExpanded() {
-        return this.orientation === 'vertical' ? this.expanded : null;
+        return this.orientation === 'vertical' && this.collapsible ? this.expanded : null;
     }
     calloutSvgIcon = chevronRightIcon;
     calloutFontIcon = 'arrow-chevron-right';
@@ -11912,6 +11916,7 @@ class TimelineCardComponent {
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
+          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -11940,16 +11945,13 @@ class TimelineCardComponent {
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <button
-                        kendoButton
-                        [icon]="calloutFontIcon"
-                        [svgIcon]="calloutSvgIcon"
-                        class="k-event-collapse"
-                        fillMode="flat"
-                        [attr.aria-hidden]="true"
-                        tabindex="-1"
-                        type="button"
-                      ></button>
+                      <span class="k-event-collapse k-button k-button-flat k-icon-button">
+                        <kendo-icon-wrapper
+                          [name]="calloutFontIcon"
+                          [svgIcon]="calloutSvgIcon"
+                          innerCssClass="k-button-icon">
+                        </kendo-icon-wrapper>
+                      </span>
                     }
                   </div>
                 }
@@ -12016,7 +12018,7 @@ class TimelineCardComponent {
             </div>
           }
         </kendo-card>
-        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
             trigger('toggle', [
                 state('collapsed', style({
                     height: '0',
@@ -12064,6 +12066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
+          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -12092,16 +12095,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <button
-                        kendoButton
-                        [icon]="calloutFontIcon"
-                        [svgIcon]="calloutSvgIcon"
-                        class="k-event-collapse"
-                        fillMode="flat"
-                        [attr.aria-hidden]="true"
-                        tabindex="-1"
-                        type="button"
-                      ></button>
+                      <span class="k-event-collapse k-button k-button-flat k-icon-button">
+                        <kendo-icon-wrapper
+                          [name]="calloutFontIcon"
+                          [svgIcon]="calloutSvgIcon"
+                          innerCssClass="k-button-icon">
+                        </kendo-icon-wrapper>
+                      </span>
                     }
                   </div>
                 }
@@ -12170,7 +12170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </kendo-card>
         `,
                     standalone: true,
-                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
+                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, IconWrapperComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimelineService }, { type: i0.Renderer2 }], propDecorators: { event: [{
                 type: Input
@@ -12552,9 +12552,10 @@ class TimelineHorizontalComponent {
         });
     }
     assignAriaLabel(cardElement, dateElement) {
-        const dateLabelId = `k-${guid()}`;
-        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
-        this.renderer.setAttribute(cardElement, 'aria-label', dateLabelId);
+        const dateSpan = dateElement.querySelector('.k-timeline-date');
+        if (dateSpan) {
+            this.renderer.setAttribute(cardElement, 'aria-label', dateSpan.textContent.trim());
+        }
     }
     assignAriaDescribedBy(cardElement, dateElement) {
         const cardId = `k-${guid()}`;
@@ -12681,6 +12682,7 @@ class TimelineHorizontalComponent {
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
+            [attr.aria-hidden]="true"
             (click)="previousClick()"
             [disabled]="isFirstRange"
             tabindex="-1"
@@ -12693,6 +12695,7 @@ class TimelineHorizontalComponent {
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"
+            [attr.aria-hidden]="true"
             (click)="nextClick()"
             [disabled]="isLastRange"
             tabindex="-1"
@@ -12835,6 +12838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
+            [attr.aria-hidden]="true"
             (click)="previousClick()"
             [disabled]="isFirstRange"
             tabindex="-1"
@@ -12847,6 +12851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"
+            [attr.aria-hidden]="true"
             (click)="nextClick()"
             [disabled]="isLastRange"
             tabindex="-1"

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1777479372,
-  "version": "24.0.0-develop.13",
+  "publishDate": 1777541275,
+  "version": "24.0.0-develop.15",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "24.0.0-develop.13",
+  "version": "24.0.0-develop.15",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -63,7 +63,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1777479372,
+      "publishDate": 1777541275,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
     }
   },
@@ -73,17 +73,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.13",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.13",
-    "@progress/kendo-angular-progressbar": "24.0.0-develop.13",
-    "@progress/kendo-angular-icons": "24.0.0-develop.13",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.13",
-    "@progress/kendo-angular-intl": "24.0.0-develop.13",
+    "@progress/kendo-angular-common": "24.0.0-develop.15",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.15",
+    "@progress/kendo-angular-progressbar": "24.0.0-develop.15",
+    "@progress/kendo-angular-icons": "24.0.0-develop.15",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.15",
+    "@progress/kendo-angular-intl": "24.0.0-develop.15",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.13",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.15",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/splitter/splitter-bar.component.d.ts

@@ -23,6 +23,7 @@ export declare class SplitterBarComponent implements OnInit, OnDestroy {
     ariaLabel: string;
     focused: boolean;
     get hostOrientation(): string;
+    ariaKeyShortcuts: string;
     get tabIndex(): number;
     get hostClasses(): string;
     get order(): number;

package/tabstrip/rendering/tab.component.d.ts

@@ -22,7 +22,7 @@ export declare class TabComponent {
     tabClose: EventEmitter<TabCloseEvent>;
     hostClasses: boolean;
     get activeClass(): boolean;
-    get disabledClass(): boolean;
+    get disabledClass(): boolean | null;
     get focusedClass(): boolean;
     get tabIndex(): number;
     constructor(localization: LocalizationService);

package/tilelayout/tilelayout-item.component.d.ts

@@ -69,10 +69,8 @@ export declare class TileLayoutItemComponent implements AfterViewInit, OnDestroy
     resizable: boolean;
     itemClass: boolean;
     hostRole: string;
-    get hostDropEffect(): string;
     get hostTabindex(): string;
     get ariaKeyShortcuts(): string;
-    get hostGrabbed(): boolean;
     get hostLabelledBy(): string;
     get colEnd(): string;
     get rowEnd(): string;

package/timeline/timeline-card.component.d.ts

@@ -38,6 +38,7 @@ export declare class TimelineCardComponent implements OnChanges, AfterViewInit {
     get collapsedClass(): boolean;
     onComponentKeyDown(event: any): void;
     get role(): string;
+    get ariaCardLabel(): string;
     get ariaLive(): any;
     get ariaExpanded(): any;
     calloutSvgIcon: SVGIcon;