@progress/kendo-angular-inputs 20.1.0-develop.2 → 20.1.0-develop.4

package/colorpicker/color-gradient.component.d.ts

@@ -38,7 +38,7 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     get gradientId(): string;
     direction: string;
     get hostTabindex(): string;
-    ariaRole: string;
+    get ariaRole(): string;
     get isControlInvalid(): string;
     get isDisabled(): string | undefined;
     /**
@@ -157,6 +157,14 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
      * @default 2
      */
     gradientSliderSmallStep: number;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled: boolean;
     gradientDragHandle: ElementRef;
     inputs: ColorInputComponent;
     private alphaSlider;
@@ -295,5 +303,5 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     private unsubscribeChanges;
     private handleClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; "ariaAttributesEnabled": { "alias": "ariaAttributesEnabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }

package/esm2022/colorpicker/color-gradient.component.mjs

@@ -50,7 +50,7 @@ export class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.readonly;
+        return this.ariaAttributesEnabled ? this.readonly : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -62,9 +62,11 @@ export class ColorGradientComponent {
     get hostTabindex() {
         return this.tabindex?.toString() || '0';
     }
-    ariaRole = 'textbox';
+    get ariaRole() {
+        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+    }
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
     }
     get isDisabled() {
         return this.disabled?.toString() || undefined;
@@ -235,6 +237,14 @@ export class ColorGradientComponent {
      * @default 2
      */
     gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled = true;
     gradientDragHandle;
     inputs;
     alphaSlider;
@@ -557,6 +567,10 @@ export class ColorGradientComponent {
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
+        if (!this.ariaAttributesEnabled) {
+            this.renderer.removeAttribute(this.host.nativeElement, 'aria-label');
+            return;
+        }
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
@@ -628,7 +642,7 @@ export class ColorGradientComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1067,6 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], gradientSliderSmallStep: [{
                 type: Input
+            }], ariaAttributesEnabled: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
                 args: ['gradientDragHandle']

package/esm2022/colorpicker/flatcolorpicker.component.mjs

@@ -649,6 +649,7 @@ export class FlatColorPickerComponent {
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
@@ -674,7 +675,7 @@ export class FlatColorPickerComponent {
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
         </div>
-`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
@@ -780,6 +781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758187423,
-    version: '20.1.0-develop.2',
+    publishDate: 1758634883,
+    version: '20.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -550,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758187423,
-    version: '20.1.0-develop.2',
+    publishDate: 1758634883,
+    version: '20.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9408,7 +9408,7 @@ class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.readonly;
+        return this.ariaAttributesEnabled ? this.readonly : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -9420,9 +9420,11 @@ class ColorGradientComponent {
     get hostTabindex() {
         return this.tabindex?.toString() || '0';
     }
-    ariaRole = 'textbox';
+    get ariaRole() {
+        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+    }
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
     }
     get isDisabled() {
         return this.disabled?.toString() || undefined;
@@ -9593,6 +9595,14 @@ class ColorGradientComponent {
      * @default 2
      */
     gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled = true;
     gradientDragHandle;
     inputs;
     alphaSlider;
@@ -9915,6 +9925,10 @@ class ColorGradientComponent {
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
+        if (!this.ariaAttributesEnabled) {
+            this.renderer.removeAttribute(this.host.nativeElement, 'aria-label');
+            return;
+        }
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
@@ -9986,7 +10000,7 @@ class ColorGradientComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -10425,6 +10439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], gradientSliderSmallStep: [{
                 type: Input
+            }], ariaAttributesEnabled: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
                 args: ['gradientDragHandle']
@@ -12258,6 +12274,7 @@ class FlatColorPickerComponent {
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
@@ -12283,7 +12300,7 @@ class FlatColorPickerComponent {
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
         </div>
-`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
@@ -12389,6 +12406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "20.1.0-develop.2",
+  "version": "20.1.0-develop.4",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -28,7 +28,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1758187423,
+      "publishDate": 1758634883,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -40,20 +40,20 @@
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "20.1.0-develop.2",
-    "@progress/kendo-angular-common": "20.1.0-develop.2",
-    "@progress/kendo-angular-utils": "20.1.0-develop.2",
-    "@progress/kendo-angular-navigation": "20.1.0-develop.2",
-    "@progress/kendo-angular-dialog": "20.1.0-develop.2",
-    "@progress/kendo-angular-intl": "20.1.0-develop.2",
-    "@progress/kendo-angular-l10n": "20.1.0-develop.2",
-    "@progress/kendo-angular-popup": "20.1.0-develop.2",
-    "@progress/kendo-angular-icons": "20.1.0-develop.2",
+    "@progress/kendo-angular-buttons": "20.1.0-develop.4",
+    "@progress/kendo-angular-common": "20.1.0-develop.4",
+    "@progress/kendo-angular-utils": "20.1.0-develop.4",
+    "@progress/kendo-angular-navigation": "20.1.0-develop.4",
+    "@progress/kendo-angular-dialog": "20.1.0-develop.4",
+    "@progress/kendo-angular-intl": "20.1.0-develop.4",
+    "@progress/kendo-angular-l10n": "20.1.0-develop.4",
+    "@progress/kendo-angular-popup": "20.1.0-develop.4",
+    "@progress/kendo-angular-icons": "20.1.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.1.0-develop.2",
+    "@progress/kendo-angular-schematics": "20.1.0-develop.4",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"