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

package/button/button.component.d.ts

@@ -128,7 +128,7 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
     click: EventEmitter<any>;
     element: HTMLElement;
     isDisabled: boolean;
-    caretAltDownIcon: SVGIcon;
+    chevronDownIcon: SVGIcon;
     private _size;
     private _rounded;
     private _fillMode;
@@ -143,7 +143,6 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
     set isFocused(isFocused: boolean);
     get isFocused(): boolean;
     get classButton(): boolean;
-    get isToggleable(): boolean;
     get iconButtonClass(): boolean;
     get classDisabled(): boolean;
     get classActive(): boolean;
@@ -156,14 +155,6 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
      * @hidden
      */
     onBlur(): void;
-    /**
-     * @hidden
-     */
-    set primary(value: boolean);
-    /**
-     * @hidden
-     */
-    set look(value: 'flat' | 'outline' | 'clear' | 'default');
     /**
      * Alias for ElementRef.nativeElement to workaround
      * ViewChild() selectors that used to return the host element before v11.
@@ -206,5 +197,5 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
     private handleClasses;
     private handleThemeColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
 }

package/chip/chip-list.component.d.ts

@@ -57,7 +57,6 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
      */
     remove: EventEmitter<ChipListRemoveEvent>;
     chips: QueryList<ChipComponent>;
-    get single(): boolean;
     get multiple(): boolean;
     /**
      * @hidden

package/chip/chip.component.d.ts

@@ -133,8 +133,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
     contentClick: EventEmitter<ChipContentClickEvent>;
     tabIndex: number;
     hostClass: boolean;
-    get hasIconClass(): boolean;
-    get disabledClass(): boolean;
+    get disabledClass(): boolean | null;
     get selectedClass(): boolean;
     get focusedClass(): boolean;
     /**

package/common/models/size.d.ts

@@ -5,8 +5,20 @@
 /**
  * Specifies the possible sizes for the buttons.
  */
-export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
 /**
  * Specifies the possible sizes for the Chip.
  */
 export type ChipSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the possible sizes for the SplitButton.
+ */
+export type SplitButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the possible sizes for the DropDownButton.
+ */
+export type DropDownButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the possible sizes for the FloatingActionButton.
+ */
+export type FloatingActionButtonSize = 'small' | 'medium' | 'large';

package/common/models/theme-color.d.ts

@@ -14,11 +14,9 @@
  * * `success`—Applies the `success` theme color.
  * * `warning`—Applies the `warning` theme color.
  * * `error`—Applies the `error` theme color.
- * * `dark`—Applies the `dark` theme color.
- * * `light`—Applies the `light` theme color.
  * * `inverse`—Applies the `inverse` theme color.
  */
-export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
 /**
  * Specifies the possible theme colors for the Chip.
  *
@@ -30,3 +28,13 @@ export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | '
  * * `error`—Applies the `error` theme color.
  */
 export type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * Specifies the possible theme colors for the FloatingActionButton component.
+ *
+ * The possible values are:
+ * * `base`—Applies the `base` theme color.
+ * * `primary`—Applies the `primary` theme color.
+ * * `secondary`—Applies the `secondary` theme color.
+ * * `tertiary`—Applies the `tertiary` theme color.
+ */
+export type FloatingActionButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary';

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -10,7 +10,7 @@ import { Direction } from '../direction';
 import { ListButton } from '../listbutton/list-button';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
-import { ArrowIconSettings, ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
+import { ArrowIconSettings, ButtonFillMode, ButtonRounded, ButtonThemeColor, DropDownButtonSize } from '../common/models';
 import { PopupContainerService } from '../listbutton/container.service';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
@@ -77,7 +77,7 @@ export declare class DropDownButtonComponent extends ListButton implements After
     /**
      * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#size). The default value is set by the Kendo theme.
      */
-    size: ButtonSize;
+    size: DropDownButtonSize;
     /**
      * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#roundness). The default value is set by the Kendo theme.
      */

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

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, isDevMode, EventEmitter, Input, HostListener, HostBinding, Output, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, isDevMode, EventEmitter, HostListener, HostBinding, Output, Input, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
 import * as i12 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
-import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon, pasteSparkleIcon } from '@progress/kendo-svg-icons';
+import { chevronDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon, pasteSparkleIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776936023,
-    version: '24.0.0-develop.2',
+    publishDate: 1778160888,
+    version: '24.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -94,6 +94,7 @@ function closest(element, selector) {
  * @hidden
  */
 const SIZES = {
+    xsmall: 'xs',
     small: 'sm',
     medium: 'md',
     large: 'lg'
@@ -353,7 +354,7 @@ class ButtonComponent {
     click = new EventEmitter();
     element;
     isDisabled = false;
-    caretAltDownIcon = caretAltDownIcon;
+    chevronDownIcon = chevronDownIcon;
     _size = undefined;
     _rounded = undefined;
     _fillMode = undefined;
@@ -375,9 +376,6 @@ class ButtonComponent {
     get classButton() {
         return true;
     }
-    get isToggleable() {
-        return this.toggleable;
-    }
     get iconButtonClass() {
         const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
         return hasIcon && !this.hasText;
@@ -403,18 +401,6 @@ class ButtonComponent {
     onBlur() {
         this.isFocused = false;
     }
-    /**
-     * @hidden
-     */
-    set primary(value) {
-        this.themeColor = value ? 'primary' : 'base';
-    }
-    /**
-     * @hidden
-     */
-    set look(value) {
-        this.fillMode = (value === 'default') ? 'solid' : value;
-    }
     /**
      * Alias for ElementRef.nativeElement to workaround
      * ViewChild() selectors that used to return the host element before v11.
@@ -553,7 +539,7 @@ class ButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -592,8 +578,8 @@ class ButtonComponent {
         @if (arrowIcon && !$any(arrowIcon).iconClass) {
             <span class="k-button-arrow">
                 <kendo-icon-wrapper
-                    [name]="$any(arrowIcon).icon || 'caret-alt-down'"
-                    [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
+                    [name]="$any(arrowIcon).icon || 'chevron-down'"
+                    [svgIcon]="$any(arrowIcon).svgIcon || chevronDownIcon">
                 </kendo-icon-wrapper>
             </span>
         }
@@ -645,8 +631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         @if (arrowIcon && !$any(arrowIcon).iconClass) {
             <span class="k-button-arrow">
                 <kendo-icon-wrapper
-                    [name]="$any(arrowIcon).icon || 'caret-alt-down'"
-                    [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
+                    [name]="$any(arrowIcon).icon || 'chevron-down'"
+                    [svgIcon]="$any(arrowIcon).svgIcon || chevronDownIcon">
                 </kendo-icon-wrapper>
             </span>
         }
@@ -694,9 +680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], classButton: [{
                 type: HostBinding,
                 args: ['class.k-button']
-            }], isToggleable: [{
-                type: HostBinding,
-                args: ['class.k-toggle-button']
             }], iconButtonClass: [{
                 type: HostBinding,
                 args: ['class.k-icon-button']
@@ -715,10 +698,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], onBlur: [{
                 type: HostListener,
                 args: ['blur']
-            }], primary: [{
-                type: Input
-            }], look: [{
-                type: Input
             }] } });
 
 /**
@@ -1215,11 +1194,8 @@ class ChipComponent {
     contentClick = new EventEmitter();
     tabIndex = 0;
     hostClass = true;
-    get hasIconClass() {
-        return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
-    }
     get disabledClass() {
-        return this.disabled;
+        return this.disabled || null;
     }
     get selectedClass() {
         return this.selected;
@@ -1261,6 +1237,7 @@ class ChipComponent {
         this.subs.add(this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
         this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
+        this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -1401,7 +1378,7 @@ class ChipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1424,7 +1401,7 @@ class ChipComponent {
         }
         @if (avatarSettings) {
           <span
-            class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
+            class="k-chip-avatar k-avatar"
             [ngStyle]="avatarSettings.cssStyle">
             @if (avatarSettings?.imageSrc) {
               <span class="k-avatar-image">
@@ -1495,7 +1472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }
         @if (avatarSettings) {
           <span
-            class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
+            class="k-chip-avatar k-avatar"
             [ngStyle]="avatarSettings.cssStyle">
             @if (avatarSettings?.imageSrc) {
               <span class="k-avatar-image">
@@ -1600,9 +1577,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-chip']
-            }], hasIconClass: [{
-                type: HostBinding,
-                args: ['class.k-chip-has-icon']
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
@@ -1674,9 +1648,6 @@ class ChipListComponent {
      */
     remove = new EventEmitter();
     chips;
-    get single() {
-        return this.selection === 'single';
-    }
     get multiple() {
         return this.selection === 'multiple' ? true : undefined;
     }
@@ -1861,11 +1832,11 @@ class ChipListComponent {
         this.chips.forEach((chip, idx) => {
             const chipEl = chip.element.nativeElement;
             this.renderer.removeAttribute(chipEl, 'aria-pressed');
-            if (this.selection !== 'none') {
-                this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
-            }
             if (this.role === 'listbox') {
                 this.renderer.setAttribute(chipEl, 'role', 'option');
+                if (this.selection !== 'none') {
+                    this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
+                }
             }
             if (!this.navigable) {
                 return;
@@ -1898,7 +1869,7 @@ class ChipListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "attr.aria-multiselectable": "this.multiple", "attr.role": "this.role" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1946,15 +1917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], chips: [{
                 type: ContentChildren,
                 args: [ChipComponent]
-            }], single: [{
-                type: HostBinding,
-                args: ['class.k-selection-single']
             }], multiple: [{
                 type: HostBinding,
                 args: ['attr.aria-multiselectable']
-            }, {
-                type: HostBinding,
-                args: ['class.k-selection-multiple']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -2286,14 +2251,16 @@ class ListComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
-        <ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
-          @for (dataItem of data; track dataItem; let index = $index) {
+        <ul class="k-menu-group" role="list" [ngClass]="sizeClass">
+          @for (dataItem of data; track dataItem; let index = $index; let isFirst = $first; let isLast = $last) {
             <li kendoButtonFocusable
               [index]="index"
               tabindex="-1"
               class="k-item k-menu-item"
+              [class.k-first]="isFirst"
+              [class.k-last]="isLast"
               role="listitem"
-              [attr.aria-disabled]="dataItem.disabled ? true : false"
+              [attr.aria-disabled]="dataItem.disabled || null"
               (click)="$event.stopImmediatePropagation(); onClick(index);"
               (blur)="onBlur()">
               @if (itemTemplate?.templateRef) {
@@ -2342,14 +2309,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{
                     selector: 'kendo-button-list',
                     template: `
-        <ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
-          @for (dataItem of data; track dataItem; let index = $index) {
+        <ul class="k-menu-group" role="list" [ngClass]="sizeClass">
+          @for (dataItem of data; track dataItem; let index = $index; let isFirst = $first; let isLast = $last) {
             <li kendoButtonFocusable
               [index]="index"
               tabindex="-1"
               class="k-item k-menu-item"
+              [class.k-first]="isFirst"
+              [class.k-last]="isLast"
               role="listitem"
-              [attr.aria-disabled]="dataItem.disabled ? true : false"
+              [attr.aria-disabled]="dataItem.disabled || null"
               (click)="$event.stopImmediatePropagation(); onClick(index);"
               (blur)="onBlur()">
               @if (itemTemplate?.templateRef) {
@@ -3151,7 +3120,7 @@ class DropDownButtonComponent extends ListButton {
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled || null"
             [attr.aria-expanded]="openState"
             [attr.aria-controls]="openState ? listId : null"
         >
@@ -3174,7 +3143,7 @@ class DropDownButtonComponent extends ListButton {
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
@@ -3213,7 +3182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled || null"
             [attr.aria-expanded]="openState"
             [attr.aria-controls]="openState ? listId : null"
         >
@@ -4378,7 +4347,7 @@ class FloatingActionButtonComponent {
             [class.k-disabled]="disabled"
             [ngClass]="buttonClass"
             [disabled]="disabled"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled || null"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
@@ -4456,7 +4425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [class.k-disabled]="disabled"
             [ngClass]="buttonClass"
             [disabled]="disabled"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled || null"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
@@ -4830,11 +4799,11 @@ class SplitButtonComponent extends ListButton {
     /**
      * Specifies the name of the font icon displayed on the button that opens the popup.
      */
-    arrowButtonIcon = 'caret-alt-down';
+    arrowButtonIcon = 'chevron-down';
     /**
      * Specifies the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) displayed on the button that opens the popup.
      */
-    arrowButtonSvgIcon = caretAltDownIcon;
+    arrowButtonSvgIcon = chevronDownIcon;
     /**
      * Sets attributes for the main button.
      */
@@ -5200,8 +5169,6 @@ class SplitButtonComponent extends ListButton {
           (blur)="onButtonBlur()"
           (mousedown)="toggleButtonActiveState(true)"
           (mouseup)="toggleButtonActiveState(false)"
-          [attr.aria-expanded]="openState"
-          [attr.aria-controls]="openState ? listId : null"
           [attr.aria-label]="ariaLabel"
           >
           @if (text) {
@@ -5222,6 +5189,8 @@ class SplitButtonComponent extends ListButton {
             [themeColor]="themeColor"
             [tabindex]="-1"
             [attr.aria-label]="messageFor('toggleButtonLabel')"
+            [attr.aria-expanded]="openState"
+            [attr.aria-controls]="openState ? listId : null"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -5241,7 +5210,7 @@ class SplitButtonComponent extends ListButton {
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
@@ -5291,8 +5260,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           (blur)="onButtonBlur()"
           (mousedown)="toggleButtonActiveState(true)"
           (mouseup)="toggleButtonActiveState(false)"
-          [attr.aria-expanded]="openState"
-          [attr.aria-controls]="openState ? listId : null"
           [attr.aria-label]="ariaLabel"
           >
           @if (text) {
@@ -5313,6 +5280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [themeColor]="themeColor"
             [tabindex]="-1"
             [attr.aria-label]="messageFor('toggleButtonLabel')"
+            [attr.aria-expanded]="openState"
+            [attr.aria-controls]="openState ? listId : null"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -5544,9 +5513,6 @@ class SpeechToTextButtonComponent {
     get getDirection() {
         return this.direction;
     }
-    get ariaPressed() {
-        return this.isListening;
-    }
     /**
      * @hidden
      */
@@ -5801,7 +5767,7 @@ class SpeechToTextButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-button": "this.classButton", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection", "attr.aria-pressed": "this.ariaPressed" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-button": "this.classButton", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -5887,9 +5853,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], getDirection: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], ariaPressed: [{
-                type: HostBinding,
-                args: ['attr.aria-pressed']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus']

package/floatingactionbutton/floatingactionbutton.component.d.ts

@@ -13,8 +13,8 @@ import { FabOffset } from './models/offset';
 import { DialItemAnimation } from './models/item-animation.interface';
 import { FabPositionMode } from './models/position-mode';
 import { DialItemClickEvent } from './models/item-click.event';
-import { ButtonSize } from '../common/models/size';
-import { ButtonThemeColor } from '../common/models/theme-color';
+import { FloatingActionButtonSize } from '../common/models/size';
+import { FloatingActionButtonThemeColor } from '../common/models/theme-color';
 import { PreventableEvent } from '../preventable-event';
 import { DialItemTemplateDirective } from './templates/dial-item-template.directive';
 import { FloatingActionButtonTemplateDirective } from './templates/fab-template.directive';
@@ -54,13 +54,13 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     /**
      * Specifies the theme color of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#theme-colors)). The default value is set by the Kendo theme.
      */
-    set themeColor(themeColor: ButtonThemeColor);
-    get themeColor(): ButtonThemeColor;
+    set themeColor(themeColor: FloatingActionButtonThemeColor);
+    get themeColor(): FloatingActionButtonThemeColor;
     /**
      * Specifies the size of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#size)). The default value is set by the Kendo theme.
      */
-    set size(size: ButtonSize);
-    get size(): ButtonSize;
+    set size(size: FloatingActionButtonSize);
+    get size(): FloatingActionButtonSize;
     /**
      * Specifies the border radius of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#roundness)). The default value is set by the Kendo theme.
      */

package/index.d.ts

@@ -49,8 +49,8 @@ export { SmartPasteButtonModule } from './smartpastebutton/smartpastebutton.modu
 export { SmartPasteFormField, SmartPasteType, SmartPasteAIRequestData, SmartPasteAIResponse, SmartPasteAIRequestOptions, SmartPasteRequestStartEvent, SmartPasteRequestEndEvent } from './smartpastebutton/models';
 export { SegmentedControlComponent } from './segmentedcontrol/segmented-control.component';
 export { SegmentedControlModule } from './segmentedcontrol/segmented-control.module';
-export { SegmentedItemSettings, SegmentedControlLayout } from './segmentedcontrol/models';
-export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings, ButtonIconPosition } from './common/models';
+export { SegmentedItemSettings, SegmentedControlLayout, SegmentedControlSize } from './segmentedcontrol/models';
+export { ButtonSize, SplitButtonSize, DropDownButtonSize, FloatingActionButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, FloatingActionButtonThemeColor, ArrowIconSettings, ButtonIconPosition } from './common/models';
 export { FocusableDirective } from './focusable/focusable.directive';
 export { PreventableEvent } from './preventable-event';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776936023,
-  "version": "24.0.0-develop.2",
+  "publishDate": 1778160888,
+  "version": "24.0.0-develop.21",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "24.0.0-develop.2",
+  "version": "24.0.0-develop.21",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -21,7 +21,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776936023,
+      "publishDate": 1778160888,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -31,15 +31,15 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.2",
-    "@progress/kendo-angular-popup": "24.0.0-develop.2",
-    "@progress/kendo-angular-icons": "24.0.0-develop.2",
+    "@progress/kendo-angular-common": "24.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.21",
+    "@progress/kendo-angular-popup": "24.0.0-develop.21",
+    "@progress/kendo-angular-icons": "24.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.21",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-webspeech-common": "1.0.1",
     "@progress/kendo-smartpaste-common": "1.0.0"