@progress/kendo-vue-inputs 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/esm/slider/Slider.js

@@ -6,11 +6,12 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
-import { Keys, classNames, Draggable, getTabIndex, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { Keys, classNames, Draggable, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from '../messages/main.js';
 import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel.js';
 import { packageMetadata } from '../package-metadata.js';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -138,29 +139,13 @@ var SliderVue2 = {
     var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "aria-valuemin": this.$props.min,
+      dir: this.currentDir,
       attrs: this.v3 ? undefined : {
-        "aria-valuemin": this.$props.min,
-        "aria-valuemax": this.$props.max,
-        "aria-valuenow": this.computedValue,
-        "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
         dir: this.currentDir,
-        role: "slider",
-        id: this.$props.id,
-        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
+        id: this.$props.id
       },
-      "aria-valuemax": this.$props.max,
-      "aria-valuenow": this.computedValue,
-      "aria-disabled": this.$props.disabled ? 'true' : undefined,
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
-      dir: this.currentDir,
-      role: "slider",
       id: this.$props.id,
       style: this.$props.style,
-      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       onFocus: this.onFocus,
       on: this.v3 ? undefined : {
         "focus": this.onFocus,
@@ -183,13 +168,15 @@ var SliderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabIndex: -1,
+        tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
+        svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
-      tabIndex: -1,
+      tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
+      svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
       style: {
         position: 'relative'
       },
@@ -230,10 +217,24 @@ var SliderVue2 = {
         }
       }), h("a", {
         "class": "k-draghandle",
-        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+        role: "slider",
         attrs: _this.v3 ? undefined : {
+          role: "slider",
+          tabIndex: "0",
+          "aria-valuenow": _this.computedValue,
+          "aria-valuemin": _this.$props.min,
+          "aria-valuemax": _this.$props.max,
+          "aria-valuetext": _this.computedValue.toString(),
+          "aria-disabled": _this.$props.disabled ? 'true' : undefined,
           title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
         },
+        tabIndex: "0",
+        "aria-valuenow": _this.computedValue,
+        "aria-valuemin": _this.$props.min,
+        "aria-valuemax": _this.$props.max,
+        "aria-valuetext": _this.computedValue.toString(),
+        "aria-disabled": _this.$props.disabled ? 'true' : undefined,
+        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
         style: _this.$props.vertical ? {
           bottom: percentValue + '%',
           zIndex: 1
@@ -258,10 +259,24 @@ var SliderVue2 = {
       }
     }), h("a", {
       "class": "k-draghandle",
-      title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+      role: "slider",
       attrs: _this.v3 ? undefined : {
+        role: "slider",
+        tabIndex: "0",
+        "aria-valuenow": _this.computedValue,
+        "aria-valuemin": _this.$props.min,
+        "aria-valuemax": _this.$props.max,
+        "aria-valuetext": _this.computedValue.toString(),
+        "aria-disabled": _this.$props.disabled ? 'true' : undefined,
         title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
       },
+      tabIndex: "0",
+      "aria-valuenow": _this.computedValue,
+      "aria-valuemin": _this.$props.min,
+      "aria-valuemax": _this.$props.max,
+      "aria-valuetext": _this.computedValue.toString(),
+      "aria-disabled": _this.$props.disabled ? 'true' : undefined,
+      title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
       style: _this.$props.vertical ? {
         bottom: percentValue + '%',
         zIndex: 1
@@ -272,13 +287,15 @@ var SliderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabIndex: -1,
+        tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
+        svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
-      tabIndex: -1,
+      tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
+      svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/esm/switch/Switch.js

@@ -160,10 +160,16 @@ var SwitchVue2 = {
       required = _a.required;
     return h("span", {
       "class": this.switchClassName,
-      dir: this.currentDir,
+      role: 'switch',
       attrs: this.v3 ? undefined : {
+        role: 'switch',
+        "aria-checked": this.computedValue,
+        "aria-disabled": disabled || undefined,
         dir: this.currentDir
       },
+      "aria-checked": this.computedValue,
+      "aria-disabled": disabled || undefined,
+      dir: this.currentDir,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
         "keydown": this.handleKeyDown,
@@ -179,17 +185,11 @@ var SwitchVue2 = {
       id: id || this._id,
       attrs: this.v3 ? undefined : {
         id: id || this._id,
-        role: 'switch',
-        "aria-checked": this.computedValue,
-        "aria-disabled": disabled || undefined,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabindex: getTabIndex(tabIndex, disabled, undefined),
         accesskey: this.$props.accessKey
       },
-      role: 'switch',
-      "aria-checked": this.computedValue,
-      "aria-disabled": disabled || undefined,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       ref: setRef(this, 'element'),

package/dist/esm/textarea/TextArea.js

@@ -15,10 +15,11 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate
+import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, Icon
 // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
+import { exclamationCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -287,16 +288,30 @@ var TextAreaVue2 = {
       "class": "k-hstack k-flex"
     }, [iconName && h("span", {
       "class": "k-flex-wrap"
-    }, [h("span", {
-      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    }, [h(Icon, {
+      name: iconName,
+      attrs: this.v3 ? undefined : {
+        name: iconName
+      },
+      "class": "k-input-icon"
     })]), textarea, showValidationIcon && this.isValid && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-validation-icon k-icon k-i-check"
+    }, [h(Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check'
+      },
+      "class": "k-input-validation-icon"
     })]), showValidationIcon && !this.isValid && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-validation-icon k-icon k-i-warning"
+    }, [h(Icon, {
+      name: 'exclamation-circle',
+      attrs: this.v3 ? undefined : {
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
+      },
+      icon: exclamationCircleIcon,
+      "class": "k-input-validation-icon"
     })]), showLoadingIcon && h("span", {
       "class": this.suffixIconWrapClass
     }, [h("span", {
@@ -309,8 +324,11 @@ var TextAreaVue2 = {
         "click": this.clearClick
       },
       "class": "k-clear-value"
-    }, [h("span", {
-      "class": "k-icon k-i-x"
+    }, [h(Icon, {
+      name: 'x',
+      attrs: this.v3 ? undefined : {
+        name: 'x'
+      }
     })])])]), this.$props.inputSuffix && h("span", {
       "class": this.suffixRenderClass
     }, [inputSuffix])]);

package/dist/npm/colors/ColorContrastLabels.js

@@ -10,8 +10,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var main_1 = require("../messages/main");
 var color_parser_1 = require("./utils/color-parser");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -53,14 +55,24 @@ var ColorContrastLabelsVue2 = {
     var success = h("span", {
       key: 1,
       "class": "k-contrast-validation k-text-success"
-    }, [passMessage, " ", h("span", {
-      "class": "k-icon k-i-check"
+    }, [passMessage, " ", h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: kendo_svg_icons_1.checkIcon
+      },
+      icon: kendo_svg_icons_1.checkIcon
     })]);
     var error = h("span", {
       key: 2,
       "class": "k-contrast-validation k-text-error"
-    }, [failMessage, " ", h("span", {
-      "class": "k-icon k-i-close"
+    }, [failMessage, " ", h(kendo_vue_common_1.Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: kendo_svg_icons_1.xIcon
+      },
+      icon: kendo_svg_icons_1.xIcon
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -70,14 +82,29 @@ var ColorContrastLabelsVue2 = {
       "class": "k-contrast-ratio-text"
     }, [contrastText]), aaPass ? h("span", {
       "class": "k-contrast-validation k-text-success"
-    }, [h("span", {
-      "class": "k-icon k-i-check"
-    }), aaaPass && h("span", {
-      "class": "k-icon k-i-check"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: kendo_svg_icons_1.checkIcon
+      },
+      icon: kendo_svg_icons_1.checkIcon
+    }), aaaPass && h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: kendo_svg_icons_1.checkIcon
+      },
+      icon: kendo_svg_icons_1.checkIcon
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
-    }, [h("span", {
-      "class": "k-icon k-i-close"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: kendo_svg_icons_1.xIcon
+      },
+      icon: kendo_svg_icons_1.xIcon
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/npm/colors/ColorGradient.js

@@ -142,6 +142,10 @@ var ColorGradientVue2 = {
       'k-disabled': this.$props.disabled
     });
     var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientHueSliderLabelMessage = localizationService.toLanguageString(main_2.colorGradientHueSliderLabel, main_2.messages[main_2.colorGradientHueSliderLabel]);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientAlphaSliderLabelMessage = localizationService.toLanguageString(main_2.colorGradientAlphaSliderLabel, main_2.messages[main_2.colorGradientAlphaSliderLabel]);
     var dragHandle = localizationService.toLanguageString(main_2.colorGradientDragHandle, main_2.messages[main_2.colorGradientDragHandle]);
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -157,11 +161,13 @@ var ColorGradientVue2 = {
         role: "slider",
         attrs: this.v3 ? undefined : {
           role: "slider",
+          "aria-orientation": 'undefined',
           "aria-label": dragHandle + "".concat(this.value || 'none'),
           "aria-valuenow": Math.round(this.hsva.s * 100),
           "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
           tabindex: this.computedTabIndex
         },
+        "aria-orientation": 'undefined',
         "aria-label": dragHandle + "".concat(this.value || 'none'),
         "aria-valuenow": Math.round(this.hsva.s * 100),
         "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
@@ -264,7 +270,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 360,
         step: 5,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientHueSliderLabelMessage
       },
       value: this.hsva.h,
       buttons: false,
@@ -277,7 +284,8 @@ var ColorGradientVue2 = {
         "change": this.onHueSliderChange
       },
       "class": "k-hue-slider k-colorgradient-slider",
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ariaLabel: colorGradientHueSliderLabelMessage
     }), this.$props.opacity && h(main_1.Slider, {
       tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
@@ -288,7 +296,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 100,
         step: 1,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientAlphaSliderLabelMessage
       },
       value: (0, misc_1.isPresent)(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
@@ -302,6 +311,7 @@ var ColorGradientVue2 = {
       },
       "class": "k-alpha-slider k-colorgradient-slider",
       disabled: this.$props.disabled,
+      ariaLabel: colorGradientAlphaSliderLabelMessage,
       ref: this.v3 ? function (el) {
         _this.alphaSliderRef = el;
       } : 'alphaSlider'

package/dist/npm/colors/ColorInput.js

@@ -28,6 +28,7 @@ var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_2 = require("../messages/main");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -105,12 +106,14 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'caret-alt-expand'
+        icon: 'caret-alt-expand',
+        svgIcon: kendo_svg_icons_1.caretAltExpandIcon
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
       icon: 'caret-alt-expand',
+      svgIcon: kendo_svg_icons_1.caretAltExpandIcon,
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/npm/colors/ColorPicker.js

@@ -27,6 +27,9 @@ var package_metadata_1 = require("../package-metadata");
 var Picker_1 = require("./Picker");
 var FlatColorPicker_1 = require("./FlatColorPicker");
 var color_cache_1 = require("./utils/color-cache");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -151,6 +154,11 @@ var ColorPickerVue2 = {
       default: undefined
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       focused: false,
@@ -171,10 +179,6 @@ var ColorPickerVue2 = {
     computedOpen: function computedOpen() {
       return this.isOpenControlled ? this.$props.open : this.currentOpen;
     },
-    computedIconClassName: function computedIconClassName() {
-      var icon = this.$props.icon;
-      return this.$props.iconClassName || icon && "k-icon k-i-".concat(icon);
-    },
     wrapperClassName: function wrapperClassName() {
       var _a;
       var _b = this.$props,
@@ -211,6 +215,9 @@ var ColorPickerVue2 = {
     var _this2 = this;
     var _a;
     var _this = this;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    // tslint:disable-next-line:max-line-length
+    var colorPickerLabelMessage = localizationService.toLanguageString(main_1.colorPickerDropdownButtonAriaLabel, main_1.messages[main_1.colorPickerDropdownButtonAriaLabel]);
     var h = gh || createElement;
     var _b = this.$props,
       disabled = _b.disabled,
@@ -258,18 +265,26 @@ var ColorPickerVue2 = {
     // const dir = useDir(focusableElementGuid, props.dir);
     return h("span", {
       "class": this.wrapperClassName,
-      dir: dir,
+      role: 'combobox',
       attrs: this.v3 ? undefined : {
+        role: 'combobox',
         dir: dir,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-disabled": this.$props.disabled,
+        "aria-haspopup": 'dialog',
+        "aria-expanded": this.computedOpen,
         tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
         title: this.$props.title
       },
+      dir: dir,
       id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-disabled": this.$props.disabled,
+      "aria-haspopup": 'dialog',
+      "aria-expanded": this.computedOpen,
       ref: this.focusableElementGuid,
       tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
       title: this.$props.title,
@@ -307,7 +322,9 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'caret-alt-down'
+        icon: 'caret-alt-down',
+        svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+        "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -319,7 +336,9 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'caret-alt-down'
+      icon: 'caret-alt-down',
+      svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+      "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children
     h(Picker_1.Picker, {

package/dist/npm/colors/FlatColorPicker.js

@@ -21,6 +21,7 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var ColorPalette_1 = require("./ColorPalette");
@@ -256,11 +257,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'gradient');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-color-canvas"
+        return [h(kendo_vue_common_1.Icon, {
+          name: "droplet-slider",
+          attrs: _this2.v3 ? undefined : {
+            name: "droplet-slider",
+            icon: kendo_svg_icons_1.dropletSliderIcon
+          },
+          icon: kendo_svg_icons_1.dropletSliderIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      } : [h(kendo_vue_common_1.Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: kendo_svg_icons_1.dropletSliderIcon
+        },
+        icon: kendo_svg_icons_1.dropletSliderIcon
       })]),
       // @ts-ignore  function children
       h(kendo_vue_buttons_1.Button, {
@@ -289,11 +300,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'palette');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-palette"
+        return [h(kendo_vue_common_1.Icon, {
+          name: "palette",
+          attrs: _this2.v3 ? undefined : {
+            name: "palette",
+            icon: kendo_svg_icons_1.paletteIcon
+          },
+          icon: kendo_svg_icons_1.paletteIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-palette"
+      } : [h(kendo_vue_common_1.Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: kendo_svg_icons_1.paletteIcon
+        },
+        icon: kendo_svg_icons_1.paletteIcon
       })])];
     } : [h(kendo_vue_buttons_1.Button, {
       tabIndex: _this2.computedTabIndex,
@@ -321,11 +342,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'gradient');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: kendo_svg_icons_1.dropletSliderIcon
+        },
+        icon: kendo_svg_icons_1.dropletSliderIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-color-canvas"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "droplet-slider",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slider",
+        icon: kendo_svg_icons_1.dropletSliderIcon
+      },
+      icon: kendo_svg_icons_1.dropletSliderIcon
     })]), h(kendo_vue_buttons_1.Button, {
       tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
@@ -352,11 +383,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'palette');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-palette"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: kendo_svg_icons_1.paletteIcon
+        },
+        icon: kendo_svg_icons_1.paletteIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-palette"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "palette",
+      attrs: _this2.v3 ? undefined : {
+        name: "palette",
+        icon: kendo_svg_icons_1.paletteIcon
+      },
+      icon: kendo_svg_icons_1.paletteIcon
     })])])]), h("div", {
       "class": "k-spacer"
     }), h("div", {
@@ -381,11 +422,21 @@ var FlatColorPickerVue2 = {
       },
       onClick: this.handleResetColor
     }, this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-droplet-slash"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "droplet-slash",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slash",
+          icon: kendo_svg_icons_1.dropletSlashIcon
+        },
+        icon: kendo_svg_icons_1.dropletSlashIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-droplet-slash"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "droplet-slash",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slash",
+        icon: kendo_svg_icons_1.dropletSlashIcon
+      },
+      icon: kendo_svg_icons_1.dropletSlashIcon
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {

package/dist/npm/input/Input.d.ts

@@ -125,6 +125,15 @@ export interface InputProps extends FormComponentProps {
      * Defines additional class to the input element.
      */
     inputClass?: String;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
 }
 /**
  * @hidden