@progress/kendo-angular-inputs 25.0.0-develop.6 → 25.0.0-develop.8

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

@@ -13,7 +13,7 @@ export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective }
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@progress/kendo-angular-intl';
@@ -583,8 +583,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1784041064,
-    version: '25.0.0-develop.6',
+    publishDate: 1784795854,
+    version: '25.0.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1176,6 +1176,12 @@ class SliderComponent extends SliderBase {
     get currentValue() {
         return isPresent(this.value) ? this.value.toString() : '';
     }
+    /**
+     * @hidden
+     */
+    get hostAriaLabel() {
+        return this.hostElement.nativeElement.getAttribute('aria-label');
+    }
     /**
      * @hidden
      */
@@ -1248,6 +1254,9 @@ class SliderComponent extends SliderBase {
         }
         this.attachElementEventHandlers();
         this.isSliderInvalid();
+        if (this.control) {
+            this.subscriptions.add(this.control.statusChanges.subscribe(() => this.isSliderInvalid()));
+        }
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -1449,9 +1458,13 @@ class SliderComponent extends SliderBase {
         };
     }
     isSliderInvalid() {
-        const sliderClasses = this.hostElement.nativeElement.classList;
-        this.isInvalid = sliderClasses.contains('ng-invalid') ? true : false;
-        this.renderer.setAttribute(this.draghandle.nativeElement, 'aria-invalid', `${this.isInvalid}`);
+        this.isInvalid = !!(this.control?.invalid && (this.control?.touched || this.control?.dirty));
+        if (this.isInvalid) {
+            this.renderer.setAttribute(this.draghandle.nativeElement, 'aria-invalid', 'true');
+        }
+        else {
+            this.renderer.removeAttribute(this.draghandle.nativeElement, 'aria-invalid');
+        }
     }
     attachElementEventHandlers() {
         const hostElement = this.hostElement.nativeElement;
@@ -1507,6 +1520,7 @@ class SliderComponent extends SliderBase {
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
             this.ngZone.run(() => {
                 this.ngTouched();
+                this.isSliderInvalid();
                 if (!this.focusChangedProgrammatically) {
                     this.onBlur.emit();
                 }
@@ -1595,10 +1609,10 @@ class SliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="currentValue"
-                [attr.aria-valuetext]="currentValue"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="hostAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
                 class="k-draghandle k-draghandle-end"
                 [title]="dragHandleMessage"
@@ -1690,10 +1704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="currentValue"
-                [attr.aria-valuetext]="currentValue"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="hostAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
                 class="k-draghandle k-draghandle-end"
                 [title]="dragHandleMessage"
@@ -1899,6 +1913,20 @@ class RangeSliderComponent extends SliderBase {
     activeHandle = 'startHandle';
     focusChangedProgrammatically = false;
     isInvalid;
+    /**
+     * @hidden
+     */
+    get startHandleAriaLabel() {
+        const hostLabel = this.hostElement?.nativeElement?.getAttribute('aria-label');
+        return hostLabel ? `${hostLabel} start` : null;
+    }
+    /**
+     * @hidden
+     */
+    get endHandleAriaLabel() {
+        const hostLabel = this.hostElement?.nativeElement?.getAttribute('aria-label');
+        return hostLabel ? `${hostLabel} end` : null;
+    }
     constructor(localization, injector, renderer, ngZone, changeDetector, hostElement) {
         super(localization, injector, renderer, ngZone, changeDetector, hostElement);
         this.localization = localization;
@@ -1956,6 +1984,9 @@ class RangeSliderComponent extends SliderBase {
         }
         this.isRangeSliderInvalid();
         this.attachElementEventHandlers();
+        if (this.control) {
+            this.subscriptions.add(this.control.statusChanges.subscribe(() => this.isRangeSliderInvalid()));
+        }
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -2213,10 +2244,15 @@ class RangeSliderComponent extends SliderBase {
         };
     }
     isRangeSliderInvalid() {
-        const rangeSliderClasses = this.hostElement.nativeElement.classList;
-        this.isInvalid = rangeSliderClasses.contains('ng-invalid') ? true : false;
-        this.renderer.setAttribute(this.draghandleStart.nativeElement, 'aria-invalid', `${this.isInvalid}`);
-        this.renderer.setAttribute(this.draghandleEnd.nativeElement, 'aria-invalid', `${this.isInvalid}`);
+        this.isInvalid = !!(this.control?.invalid && (this.control?.touched || this.control?.dirty));
+        if (this.isInvalid) {
+            this.renderer.setAttribute(this.draghandleStart.nativeElement, 'aria-invalid', 'true');
+            this.renderer.setAttribute(this.draghandleEnd.nativeElement, 'aria-invalid', 'true');
+        }
+        else {
+            this.renderer.removeAttribute(this.draghandleStart.nativeElement, 'aria-invalid');
+            this.renderer.removeAttribute(this.draghandleEnd.nativeElement, 'aria-invalid');
+        }
     }
     attachElementEventHandlers() {
         const hostElement = this.hostElement.nativeElement;
@@ -2272,6 +2308,7 @@ class RangeSliderComponent extends SliderBase {
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
             this.ngZone.run(() => {
                 this.ngTouched();
+                this.isRangeSliderInvalid();
                 if (!this.focusChangedProgrammatically) {
                     this.onBlur.emit();
                 }
@@ -2324,12 +2361,12 @@ class RangeSliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="startHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-start"
                 [title]="textFor('dragHandleStart')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2343,12 +2380,12 @@ class RangeSliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="endHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-end"
                 [title]="textFor('dragHandleEnd')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2411,12 +2448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="startHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-start"
                 [title]="textFor('dragHandleStart')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2430,12 +2467,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="endHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-end"
                 [title]="textFor('dragHandleEnd')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2661,7 +2698,7 @@ class SwitchComponent {
         return this.disabled ? true : undefined;
     }
     get ariaReadonly() {
-        return this.readonly;
+        return this.readonly || null;
     }
     hostClasses = true;
     get disabledClass() {
@@ -4899,11 +4936,11 @@ class NumericTextBoxComponent {
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
                 class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
+                [class.k-disabled]="disabled"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -4916,10 +4953,10 @@ class NumericTextBoxComponent {
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
+                [class.k-disabled]="disabled"
                 class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
@@ -5015,11 +5052,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
                 class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
+                [class.k-disabled]="disabled"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -5032,10 +5069,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
+                [class.k-disabled]="disabled"
                 class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
@@ -5815,6 +5852,9 @@ class MaskedTextBoxComponent {
     get hostDisabledClass() {
         return this.disabled;
     }
+    get hostInvalidClass() {
+        return this.isControlInvalid;
+    }
     /**
      * Returns the `ElementRef` of the visible `input` element.
      */
@@ -6245,7 +6285,7 @@ class MaskedTextBoxComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.hostDisabledClass", "class.k-invalid": "this.hostInvalidClass" } }, providers: [
             MaskingService,
             {
                 multi: true,
@@ -6457,6 +6497,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], hostDisabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
+            }], hostInvalidClass: [{
+                type: HostBinding,
+                args: ['class.k-invalid']
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -9031,7 +9074,7 @@ class ContrastValidationComponent {
     pass;
     value;
     checkIcon = checkIcon;
-    xCircleIcon = xCircleIcon;
+    xIcon = xIcon;
     constructor(localization) {
         this.localization = localization;
     }
@@ -9050,14 +9093,14 @@ class ContrastValidationComponent {
         <span>{{contrastText}}</span>
         @if (value) {
           @if (pass) {
-            <span class="k-contrast-validation k-text-success">
+            <span class="k-contrast-validation !k-text-success">
               {{passMessage}}
               <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
           } @else {
-            <span class="k-contrast-validation k-text-error">
+            <span class="k-contrast-validation !k-text-error">
               {{failMessage}}
-              <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
           }
         }
@@ -9071,14 +9114,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <span>{{contrastText}}</span>
         @if (value) {
           @if (pass) {
-            <span class="k-contrast-validation k-text-success">
+            <span class="k-contrast-validation !k-text-success">
               {{passMessage}}
               <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
           } @else {
-            <span class="k-contrast-validation k-text-error">
+            <span class="k-contrast-validation !k-text-error">
               {{failMessage}}
-              <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
           }
         }
@@ -9102,7 +9145,7 @@ class ContrastComponent {
     value;
     ratio;
     checkIcon = checkIcon;
-    xCircleIcon = xCircleIcon;
+    xIcon = xIcon;
     constructor(localization) {
         this.localization = localization;
     }
@@ -9128,15 +9171,15 @@ class ContrastComponent {
           <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
           @if (value) {
             @if (satisfiesAACondition) {
-              <span class="k-contrast-validation k-text-success">
+              <span class="k-contrast-validation !k-text-success">
                 <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 @if (satisfiesAAACondition) {
                   <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 }
               </span>
             } @else {
-              <span class="k-contrast-validation k-text-error">
-                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <span class="k-contrast-validation !k-text-error">
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
               </span>
             }
           }
@@ -9162,15 +9205,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
           @if (value) {
             @if (satisfiesAACondition) {
-              <span class="k-contrast-validation k-text-success">
+              <span class="k-contrast-validation !k-text-success">
                 <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 @if (satisfiesAAACondition) {
                   <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 }
               </span>
             } @else {
-              <span class="k-contrast-validation k-text-error">
-                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <span class="k-contrast-validation !k-text-error">
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
               </span>
             }
           }
@@ -9208,6 +9251,7 @@ class ColorContrastSvgComponent {
     oldH;
     oldA;
     metrics;
+    hsvaSub;
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -9215,7 +9259,7 @@ class ColorContrastSvgComponent {
         this.metrics = this.wrapper.getBoundingClientRect();
         this.oldA = this.hsva.value.a;
         this.oldH = this.hsva.value.h;
-        this.hsva.subscribe((value) => {
+        this.hsvaSub = this.hsva.subscribe((value) => {
             if (value.h !== this.oldH || value.a !== this.oldA) {
                 this.oldH = value.h;
                 this.oldA = value.a;
@@ -9228,6 +9272,9 @@ class ColorContrastSvgComponent {
             this.setPaths();
         }
     }
+    ngOnDestroy() {
+        this.hsvaSub?.unsubscribe();
+    }
     setPaths() {
         const bezierCommandCalc = bezierCommand(controlPoint(line));
         this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
@@ -9254,6 +9301,10 @@ class ColorContrastSvgComponent {
     }
     getPaths(contrast, stepCount, reversed = false) {
         const points = [];
+        const hasDimensionts = this.metrics.width && this.metrics.height;
+        if (!hasDimensionts) {
+            return points;
+        }
         for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
             const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
             if (value !== null) {
@@ -9540,7 +9591,7 @@ class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.ariaAttributesEnabled ? this.readonly : undefined;
+        return this.ariaAttributesEnabled ? (this.readonly || null) : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -9553,13 +9604,13 @@ class ColorGradientComponent {
         return this.tabindex?.toString() || '0';
     }
     get ariaRole() {
-        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+        return this.ariaAttributesEnabled ? 'textbox' : 'none';
     }
     get isControlInvalid() {
-        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
+        return this.ariaAttributesEnabled ? (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString() : undefined;
     }
     get isDisabled() {
-        return this.disabled?.toString() || undefined;
+        return this.disabled ? this.disabled.toString() : null;
     }
     /**
      * @hidden
@@ -9766,6 +9817,12 @@ class ColorGradientComponent {
     get hsvSliderValueText() {
         return `X: ${this.hsvHandleCoordinates.x} Y: ${this.hsvHandleCoordinates.y}`;
     }
+    /**
+     * @hidden
+     */
+    get hsvSliderValueNow() {
+        return Math.round((1 - this.hsva.value.v) * 100);
+    }
     /**
      * @hidden
      */
@@ -10213,7 +10270,9 @@ class ColorGradientComponent {
                 [attr.aria-readonly]="readonly ? readonly : undefined"
                 [attr.aria-disabled]="disabled ? disabled : undefined"
                 [attr.aria-orientation]="'undefined'"
-                [attr.aria-valuenow]="'0'"
+                [attr.aria-valuenow]="hsvSliderValueNow"
+                aria-valuemin="0"
+                aria-valuemax="100"
                 (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
               </div>
             </div>
@@ -10257,6 +10316,7 @@ class ColorGradientComponent {
               [style.height.px]="clearButton ? '140' : null"
               class="k-hue-slider k-colorgradient-slider"
               [dragHandleTitle]="hueSliderTitle"
+              [attr.aria-label]="hueSliderTitle"
               [tabindex]="innerTabIndex"
               [disabled]="disabled"
               [readonly]="readonly"
@@ -10279,6 +10339,7 @@ class ColorGradientComponent {
                 [style.height.px]="clearButton ? '140' : null"
                 class="k-alpha-slider k-colorgradient-slider"
                 [dragHandleTitle]="opacitySliderTitle"
+                [attr.aria-label]="opacitySliderTitle"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [showButtons]="false"
@@ -10404,7 +10465,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-readonly]="readonly ? readonly : undefined"
                 [attr.aria-disabled]="disabled ? disabled : undefined"
                 [attr.aria-orientation]="'undefined'"
-                [attr.aria-valuenow]="'0'"
+                [attr.aria-valuenow]="hsvSliderValueNow"
+                aria-valuemin="0"
+                aria-valuemax="100"
                 (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
               </div>
             </div>
@@ -10448,6 +10511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [style.height.px]="clearButton ? '140' : null"
               class="k-hue-slider k-colorgradient-slider"
               [dragHandleTitle]="hueSliderTitle"
+              [attr.aria-label]="hueSliderTitle"
               [tabindex]="innerTabIndex"
               [disabled]="disabled"
               [readonly]="readonly"
@@ -10470,6 +10534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [style.height.px]="clearButton ? '140' : null"
                 class="k-alpha-slider k-colorgradient-slider"
                 [dragHandleTitle]="opacitySliderTitle"
+                [attr.aria-label]="opacitySliderTitle"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [showButtons]="false"
@@ -10920,6 +10985,10 @@ class ColorPaletteComponent {
      * @hidden
      */
     hostClasses = true;
+    /**
+     * @hidden
+     */
+    get ariaDisabled() { return this.disabled || null; }
     /**
      * @hidden
      */
@@ -10927,7 +10996,7 @@ class ColorPaletteComponent {
     /**
      * @hidden
      */
-    get readonlyAttribute() { return this.readonly; }
+    get readonlyAttribute() { return this.readonly || null; }
     /**
      * @hidden
      */
@@ -11184,7 +11253,7 @@ class ColorPaletteComponent {
     notifyNgTouched = () => { };
     notifyNgChanged = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -11345,10 +11414,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpalette']
-            }], disabledClass: [{
+            }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }, {
+            }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
             }], readonlyAttribute: [{
@@ -11535,7 +11604,7 @@ class FlatColorPickerHeaderComponent {
               class="k-button-group k-button-group-flat"
               role="group"
               >
-              @for (view of views; track view; let i = $index) {
+              @for (view of views; track view; let i = $index; let isFirst = $first; let isLast = $last) {
                 <button
                   kendoButton
                   type="button"
@@ -11550,6 +11619,8 @@ class FlatColorPickerHeaderComponent {
                   [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-pressed]="activeView === view"
+                  [class.k-group-start]="isFirst"
+                  [class.k-group-end]="isLast"
                   [ngClass]="activeView === view ? 'k-selected' : ''">
                 </button>
               }
@@ -11568,7 +11639,6 @@ class FlatColorPickerHeaderComponent {
               fillMode="flat"
               icon="reset-color"
               [svgIcon]="dropletSlashIcon"
-              class="k-coloreditor-reset"
               [attr.aria-label]="getText('clearButton')"
               [attr.title]="getText('clearButton')"
               (click)="clearButtonClick.emit()">
@@ -11578,13 +11648,17 @@ class FlatColorPickerHeaderComponent {
             <div class="k-coloreditor-preview k-vstack" aria-hidden="true">
               <span
                 class="k-coloreditor-preview-color k-color-preview"
+                [class.k-no-color]="!selection"
                 [attr.title]="getText('previewColor')"
                 [style.background-color]="selection">
+                <span class="k-color-preview-mask" [style.background-color]="selection"></span>
               </span>
               <span class="k-coloreditor-current-color k-color-preview"
+                [class.k-no-color]="!value"
                 [style.background-color]="value"
                 [attr.title]="getText('revertSelection')"
                 (click)="valuePaneClick.emit($event)">
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
               </span>
             </div>
           }
@@ -11602,7 +11676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               class="k-button-group k-button-group-flat"
               role="group"
               >
-              @for (view of views; track view; let i = $index) {
+              @for (view of views; track view; let i = $index; let isFirst = $first; let isLast = $last) {
                 <button
                   kendoButton
                   type="button"
@@ -11617,6 +11691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-pressed]="activeView === view"
+                  [class.k-group-start]="isFirst"
+                  [class.k-group-end]="isLast"
                   [ngClass]="activeView === view ? 'k-selected' : ''">
                 </button>
               }
@@ -11635,7 +11711,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               fillMode="flat"
               icon="reset-color"
               [svgIcon]="dropletSlashIcon"
-              class="k-coloreditor-reset"
               [attr.aria-label]="getText('clearButton')"
               [attr.title]="getText('clearButton')"
               (click)="clearButtonClick.emit()">
@@ -11645,13 +11720,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <div class="k-coloreditor-preview k-vstack" aria-hidden="true">
               <span
                 class="k-coloreditor-preview-color k-color-preview"
+                [class.k-no-color]="!selection"
                 [attr.title]="getText('previewColor')"
                 [style.background-color]="selection">
+                <span class="k-color-preview-mask" [style.background-color]="selection"></span>
               </span>
               <span class="k-coloreditor-current-color k-color-preview"
+                [class.k-no-color]="!value"
                 [style.background-color]="value"
                 [attr.title]="getText('revertSelection')"
                 (click)="valuePaneClick.emit($event)">
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
               </span>
             </div>
           }
@@ -11826,8 +11905,11 @@ class FlatColorPickerComponent {
     get disabledClass() {
         return this.disabled;
     }
+    get ariaDisabled() {
+        return this.disabled || null;
+    }
     get ariaReadonly() {
-        return this.readonly;
+        return this.readonly || null;
     }
     direction;
     get hostTabindex() {
@@ -11835,10 +11917,7 @@ class FlatColorPickerComponent {
     }
     ariaRole = 'textbox';
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
-    }
-    get isDisabled() {
-        return this.disabled?.toString() || undefined;
+        return (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString();
     }
     /**
      * @hidden
@@ -12321,13 +12400,13 @@ class FlatColorPickerComponent {
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'blur', () => {
                 this.focused = false;
-                this.notifyNgTouched();
+                this.ngZone.run(() => this.notifyNgTouched());
             }));
         });
     }
     removeGradientAttributes() {
         if (this.gradientElement) {
-            this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
+            this.renderer.setAttribute(this.gradientElement.nativeElement, 'role', 'none');
             this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
         }
     }
@@ -12342,7 +12421,7 @@ class FlatColorPickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -12466,7 +12545,7 @@ class FlatColorPickerComponent {
             kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
             [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
+            [ngClass]="'k-actions-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
           </div>
@@ -12603,7 +12682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
             [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
+            [ngClass]="'k-actions-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
           </div>
@@ -12621,7 +12700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
+            }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
             }], ariaReadonly: [{
@@ -12639,9 +12718,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], isControlInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
             }], enterHandler: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
@@ -13008,12 +13084,12 @@ class ColorPickerComponent {
     get focusedClass() {
         return this.isFocused;
     }
-    get disabledClass() {
-        return this.disabled;
-    }
     get ariaDisabled() {
         return this.disabled || null;
     }
+    get disabledClass() {
+        return this.disabled;
+    }
     get ariaReadonly() {
         return this.readonly || null;
     }
@@ -13027,7 +13103,7 @@ class ColorPickerComponent {
     role = 'combobox';
     hasPopup = 'dialog';
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString();
     }
     /**
      * @hidden
@@ -13830,7 +13906,7 @@ class ColorPickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -14146,12 +14222,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], focusedClass: [{
                 type: HostBinding,
                 args: ['class.k-focus']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], ariaReadonly: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']
@@ -15358,6 +15434,9 @@ class RatingComponent {
      * @default false
      */
     disabled = false;
+    get ariaDisabled() {
+        return this.disabled ? true : undefined;
+    }
     /**
      * When `true`, sets the Rating to read-only ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/readonly)).
 
@@ -15365,6 +15444,9 @@ class RatingComponent {
      * @default false
      */
     readonly = false;
+    get ariaReadonly() {
+        return this.readonly ? true : undefined;
+    }
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
      *
@@ -15683,7 +15765,7 @@ class RatingComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: RatingComponent, isStandalone: true, selector: "kendo-rating", inputs: { disabled: "disabled", readonly: "readonly", tabindex: "tabindex", itemsCount: "itemsCount", value: "value", selection: "selection", precision: "precision", label: "label", icon: "icon", svgIcon: "svgIcon", svgIconOutline: "svgIconOutline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.aria-disabled": "this.disabled", "class.k-disabled": "this.disabled", "attr.aria-readonly": "this.readonly", "class.k-readonly": "this.readonly", "attr.tabindex": "this.tabindex", "class.k-rating": "this.hostClass", "attr.dir": "this.direction", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax", "attr.aria-valuenow": "this.valueNow", "attr.role": "this.ariaRole" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: RatingComponent, isStandalone: true, selector: "kendo-rating", inputs: { disabled: "disabled", readonly: "readonly", tabindex: "tabindex", itemsCount: "itemsCount", value: "value", selection: "selection", precision: "precision", label: "label", icon: "icon", svgIcon: "svgIcon", svgIconOutline: "svgIconOutline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-disabled": "this.disabled", "attr.aria-disabled": "this.ariaDisabled", "class.k-readonly": "this.readonly", "attr.aria-readonly": "this.ariaReadonly", "attr.tabindex": "this.tabindex", "class.k-rating": "this.hostClass", "attr.dir": "this.direction", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax", "attr.aria-valuenow": "this.valueNow", "attr.role": "this.ariaRole" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.rating' },
             {
@@ -16014,20 +16096,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: [RatingSelectedItemTemplateDirective]
             }], disabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
                 args: ['class.k-disabled']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
             }], readonly: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-readonly']
             }, {
                 type: HostBinding,
                 args: ['class.k-readonly']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
             }], tabindex: [{
                 type: Input
             }, {
@@ -16878,7 +16960,7 @@ class SignatureComponent {
         return this.localization.get(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height", "class.k-signature-maximized": "this.maximized" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.signature' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) },
@@ -17155,6 +17237,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], maximizable: [{
                 type: Input
             }], maximized: [{
+                type: HostBinding,
+                args: ['class.k-signature-maximized']
+            }, {
                 type: Input
             }], popupScale: [{
                 type: Input
@@ -17738,17 +17823,11 @@ class TextAreaComponent extends TextFieldsBase {
             maxlength: this.maxlength,
             rows: this.rows,
             cols: this.cols,
-            'aria-disabled': this.disabled ? true : undefined,
             'aria-readonly': this.readonly ? true : undefined,
             'aria-invalid': this.isControlInvalid,
             required: this.isControlRequired ? '' : null
         };
     }
-    get mutableAttributes() {
-        return {
-            'aria-multiline': 'true'
-        };
-    }
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         super(localizationService, ngZone, changeDetector, renderer, injector, hostElement);
         this.localizationService = localizationService;
@@ -18061,7 +18140,7 @@ class TextAreaComponent extends TextFieldsBase {
         this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
     }
     setInputAttributes() {
-        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        const attributesToRender = { ...this.parsedAttributes };
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -18091,8 +18170,6 @@ class TextAreaComponent extends TextFieldsBase {
           }
           <textarea #input
             class="k-input-inner !k-overflow-auto"
-            [attr.aria-multiline]="true"
-            [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
             [attr.aria-invalid]="isControlInvalid"
             [id]="focusableId"
@@ -18154,8 +18231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
           <textarea #input
             class="k-input-inner !k-overflow-auto"
-            [attr.aria-multiline]="true"
-            [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
             [attr.aria-invalid]="isControlInvalid"
             [id]="focusableId"
@@ -18366,13 +18441,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class OTPInputMessages extends ComponentMessages {
     /**
-     * The aria-label of the OTP Input. Follows the pattern **Input {currentInput} of {totalInputs}, current value {value}** by default.
-     * Тhe default label text when the current input is 1, and the total number of inputs is 4 will be
-     * **Input 1 of 4, current value null**.
+     * The aria-label of the OTP Input fields. Follows the pattern **Digit {currentInput} of {totalInputs}** by default.
+     * The default label text when the current input is 1 and the total number of inputs is 6 will be
+     * **Digit 1 of 6**.
      *
-     * The message consists of several parts - the current input number, the total number of inputs, the current value and a localizable string.
-     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input,
-     * total number of inputs and current value. The `{currentInput}`, `{totalInputs}` and `{currentValue}` placeholders will be
+     * The message consists of two parts — the current input number and the total number of inputs.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input
+     * and total number of inputs. The `{currentInput}` and `{totalInputs}` placeholders will be
      * replaced internally with the respective actual values.
      */
     ariaLabel;
@@ -18606,6 +18681,9 @@ class OTPInputComponent {
      */
     onBlur = new EventEmitter();
     wrapperClass = true;
+    get disabledClass() {
+        return this.disabled;
+    }
     get invalidClass() {
         return this.isControlInvalid;
     }
@@ -19125,7 +19203,7 @@ class OTPInputComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
             {
@@ -19137,7 +19215,7 @@ class OTPInputComponent {
         ], viewQueries: [{ propertyName: "inputFields", predicate: TextBoxComponent, descendants: true }, { propertyName: "inputGroups", predicate: ["inputGroup"], descendants: true }], exportAs: ["kendoOTPInput"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoOTPInputLocalizedMessages
           i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
-          ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+          ariaLabel="Digit [[currentInput]] of [[totalInputs]]"
         ></ng-container>
         <ng-container
           kendoInputSharedEvents
@@ -19214,7 +19292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     template: `
         <ng-container kendoOTPInputLocalizedMessages
           i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
-          ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+          ariaLabel="Digit [[currentInput]] of [[totalInputs]]"
         ></ng-container>
         <ng-container
           kendoInputSharedEvents
@@ -19312,6 +19390,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-otp']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], invalidClass: [{
                 type: HostBinding,
                 args: ['class.k-invalid']
@@ -19410,7 +19491,7 @@ class FormComponent {
      */
     licenseMessage;
     get formClass() {
-        return 'k-form k-form-md';
+        return 'k-form';
     }
     get horizontalClass() {
         return this.orientation === 'horizontal';

package/index.d.ts

@@ -275,6 +275,10 @@ declare class SliderComponent extends SliderBase implements AfterViewInit, Contr
      * @hidden
      */
     get currentValue(): string;
+    /**
+     * @hidden
+     */
+    get hostAriaLabel(): string;
     /**
      * @hidden
      */
@@ -428,6 +432,14 @@ declare class RangeSliderComponent extends SliderBase implements AfterViewInit,
     private activeHandle;
     private focusChangedProgrammatically;
     private isInvalid;
+    /**
+     * @hidden
+     */
+    get startHandleAriaLabel(): string | null;
+    /**
+     * @hidden
+     */
+    get endHandleAriaLabel(): string | null;
     constructor(localization: LocalizationService, injector: Injector, renderer: Renderer2, ngZone: NgZone, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
     /**
      * Focuses the RangeSlider.
@@ -668,7 +680,7 @@ declare class SwitchComponent implements ControlValueAccessor, OnInit, OnDestroy
     get ariaInvalid(): boolean;
     get hostTabIndex(): number;
     get ariaDisabled(): boolean;
-    get ariaReadonly(): boolean;
+    get ariaReadonly(): boolean | null;
     hostClasses: boolean;
     get disabledClass(): boolean;
     track: any;
@@ -1551,6 +1563,7 @@ declare class MaskedTextBoxComponent implements ControlValueAccessor, OnChanges,
     valueChange: EventEmitter<string>;
     direction: string;
     get hostDisabledClass(): boolean;
+    get hostInvalidClass(): boolean;
     /**
      * Returns the `ElementRef` of the visible `input` element.
      */
@@ -2512,7 +2525,6 @@ declare class TextAreaComponent extends TextFieldsBase implements ControlValueAc
     private _inputAttributes;
     private parsedAttributes;
     private get defaultAttributes();
-    private get mutableAttributes();
     constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
@@ -3583,6 +3595,7 @@ declare class RatingComponent implements OnInit, AfterViewInit, OnDestroy, Contr
      * @default false
      */
     disabled: boolean;
+    get ariaDisabled(): true | undefined;
     /**
      * When `true`, sets the Rating to read-only ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/readonly)).
 
@@ -3590,6 +3603,7 @@ declare class RatingComponent implements OnInit, AfterViewInit, OnDestroy, Contr
      * @default false
      */
     readonly: boolean;
+    get ariaReadonly(): true | undefined;
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
      *
@@ -4386,8 +4400,8 @@ declare class ColorPickerComponent implements OnInit, AfterViewInit, OnChanges,
     private adaptiveService;
     hostClasses: boolean;
     get focusedClass(): boolean;
-    get disabledClass(): boolean;
     get ariaDisabled(): boolean | null;
+    get disabledClass(): boolean;
     get ariaReadonly(): boolean | null;
     get ariaExpanded(): boolean;
     get hostTabindex(): number;
@@ -5065,14 +5079,14 @@ declare class ColorGradientComponent implements OnInit, OnChanges, OnDestroy, Co
     private localizationService;
     private injector;
     hostClasses: boolean;
-    get readonlyAttribute(): boolean;
+    get readonlyAttribute(): boolean | null;
     get disabledClass(): boolean;
     get gradientId(): string;
     direction: string;
     get hostTabindex(): string;
     get ariaRole(): string;
     get isControlInvalid(): string;
-    get isDisabled(): string | undefined;
+    get isDisabled(): string | null;
     /**
      * @hidden
      */
@@ -5225,6 +5239,10 @@ declare class ColorGradientComponent implements OnInit, OnChanges, OnDestroy, Co
      * @hidden
      */
     get hsvSliderValueText(): string;
+    /**
+     * @hidden
+     */
+    get hsvSliderValueNow(): number;
     /**
      * @hidden
      */
@@ -5472,6 +5490,10 @@ declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnDestroy,
      * @hidden
      */
     hostClasses: boolean;
+    /**
+     * @hidden
+     */
+    get ariaDisabled(): boolean | null;
     /**
      * @hidden
      */
@@ -5479,7 +5501,7 @@ declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnDestroy,
     /**
      * @hidden
      */
-    get readonlyAttribute(): boolean;
+    get readonlyAttribute(): boolean | null;
     /**
      * @hidden
      */
@@ -5650,12 +5672,12 @@ declare class FlatColorPickerComponent implements OnInit, AfterViewInit, OnDestr
     private injector;
     hostClasses: boolean;
     get disabledClass(): boolean;
-    get ariaReadonly(): boolean;
+    get ariaDisabled(): boolean | null;
+    get ariaReadonly(): boolean | null;
     direction: string;
     get hostTabindex(): string;
     ariaRole: string;
     get isControlInvalid(): string;
-    get isDisabled(): string | undefined;
     /**
      * @hidden
      */
@@ -6028,6 +6050,7 @@ declare class OTPInputComponent implements ControlValueAccessor, OnInit, AfterVi
      */
     onBlur: EventEmitter<any>;
     wrapperClass: boolean;
+    get disabledClass(): boolean;
     get invalidClass(): boolean;
     direction: string;
     role: string;
@@ -6188,13 +6211,13 @@ declare class OTPInputComponent implements ControlValueAccessor, OnInit, AfterVi
  */
 declare class OTPInputMessages extends ComponentMessages {
     /**
-     * The aria-label of the OTP Input. Follows the pattern **Input {currentInput} of {totalInputs}, current value {value}** by default.
-     * Тhe default label text when the current input is 1, and the total number of inputs is 4 will be
-     * **Input 1 of 4, current value null**.
+     * The aria-label of the OTP Input fields. Follows the pattern **Digit {currentInput} of {totalInputs}** by default.
+     * The default label text when the current input is 1 and the total number of inputs is 6 will be
+     * **Digit 1 of 6**.
      *
-     * The message consists of several parts - the current input number, the total number of inputs, the current value and a localizable string.
-     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input,
-     * total number of inputs and current value. The `{currentInput}`, `{totalInputs}` and `{currentValue}` placeholders will be
+     * The message consists of two parts — the current input number and the total number of inputs.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input
+     * and total number of inputs. The `{currentInput}` and `{totalInputs}` placeholders will be
      * replaced internally with the respective actual values.
      */
     ariaLabel: string;

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1784041064,
-  "version": "25.0.0-develop.6",
+  "publishDate": 1784795854,
+  "version": "25.0.0-develop.8",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "25.0.0-develop.6",
+  "version": "25.0.0-develop.8",
   "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",
@@ -55,7 +55,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1784041064,
+      "publishDate": 1784795854,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -67,20 +67,20 @@
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-drawing": "^1.25.0",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "25.0.0-develop.6",
-    "@progress/kendo-angular-common": "25.0.0-develop.6",
-    "@progress/kendo-angular-utils": "25.0.0-develop.6",
-    "@progress/kendo-angular-navigation": "25.0.0-develop.6",
-    "@progress/kendo-angular-dialog": "25.0.0-develop.6",
-    "@progress/kendo-angular-intl": "25.0.0-develop.6",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.6",
-    "@progress/kendo-angular-popup": "25.0.0-develop.6",
-    "@progress/kendo-angular-icons": "25.0.0-develop.6",
+    "@progress/kendo-angular-buttons": "25.0.0-develop.8",
+    "@progress/kendo-angular-common": "25.0.0-develop.8",
+    "@progress/kendo-angular-utils": "25.0.0-develop.8",
+    "@progress/kendo-angular-navigation": "25.0.0-develop.8",
+    "@progress/kendo-angular-dialog": "25.0.0-develop.8",
+    "@progress/kendo-angular-intl": "25.0.0-develop.8",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.8",
+    "@progress/kendo-angular-popup": "25.0.0-develop.8",
+    "@progress/kendo-angular-icons": "25.0.0-develop.8",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.6",
+    "@progress/kendo-angular-schematics": "25.0.0-develop.8",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"