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

package/dist/es/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';
 import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
 import { packageMetadata } from '../package-metadata';
+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/es/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/es/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';
+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/esm/colors/ColorContrastLabels.js

@@ -4,8 +4,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages/main.js';
 import { getContrastFromTwoRGBAs } from './utils/color-parser.js';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -47,14 +49,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(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: 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(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -64,14 +76,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(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
+    }), aaaPass && h(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
-    }, [h("span", {
-      "class": "k-icon k-i-close"
+    }, [h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/esm/colors/ColorGradient.js

@@ -14,7 +14,7 @@ import { ColorInput } from './ColorInput.js';
 import { ColorContrastLabels } from './ColorContrastLabels.js';
 import { ColorContrastSvg } from './ColorContrastSvg.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { colorGradientDragHandle, messages } from '../messages/main.js';
+import { colorGradientDragHandle, colorGradientHueSliderLabel, colorGradientAlphaSliderLabel, messages } from '../messages/main.js';
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /**
@@ -136,6 +136,10 @@ var ColorGradientVue2 = {
       'k-disabled': this.$props.disabled
     });
     var localizationService = provideLocalizationService(this);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientHueSliderLabelMessage = localizationService.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientAlphaSliderLabelMessage = localizationService.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]);
     var dragHandle = localizationService.toLanguageString(colorGradientDragHandle, messages[colorGradientDragHandle]);
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -151,11 +155,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), "%"),
@@ -258,7 +264,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,
@@ -271,7 +278,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(Slider, {
       tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
@@ -282,7 +290,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 100,
         step: 1,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientAlphaSliderLabelMessage
       },
       value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
@@ -296,6 +305,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/esm/colors/ColorInput.js

@@ -22,6 +22,7 @@ import { Label } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages/main.js';
 import { guid, Keys } from '@progress/kendo-vue-common';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -99,12 +100,14 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'caret-alt-expand'
+        icon: 'caret-alt-expand',
+        svgIcon: caretAltExpandIcon
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
       icon: 'caret-alt-expand',
+      svgIcon: caretAltExpandIcon,
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/esm/colors/ColorPicker.js

@@ -23,6 +23,9 @@ import { packageMetadata } from '../package-metadata.js';
 import { Picker } from './Picker.js';
 import { FlatColorPicker } from './FlatColorPicker.js';
 import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorPickerDropdownButtonAriaLabel } from '../messages/main.js';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -147,6 +150,11 @@ var ColorPickerVue2 = {
       default: undefined
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       focused: false,
@@ -167,10 +175,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,
@@ -207,6 +211,9 @@ var ColorPickerVue2 = {
     var _this2 = this;
     var _a;
     var _this = this;
+    var localizationService = provideLocalizationService(this);
+    // tslint:disable-next-line:max-line-length
+    var colorPickerLabelMessage = localizationService.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]);
     var h = gh || createElement;
     var _b = this.$props,
       disabled = _b.disabled,
@@ -254,18 +261,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: 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: getTabIndex(tabIndex, disabled),
       title: this.$props.title,
@@ -303,7 +318,9 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'caret-alt-down'
+        icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
+        "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -315,7 +332,9 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'caret-alt-down'
+      icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
+      "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children
     h(Picker, {

package/dist/esm/colors/FlatColorPicker.js

@@ -15,7 +15,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
+import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette.js';
 import { ColorGradient } from './ColorGradient.js';
@@ -250,11 +251,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'gradient');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-color-canvas"
+        return [h(Icon, {
+          name: "droplet-slider",
+          attrs: _this2.v3 ? undefined : {
+            name: "droplet-slider",
+            icon: dropletSliderIcon
+          },
+          icon: dropletSliderIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      } : [h(Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })]),
       // @ts-ignore  function children
       h(Button, {
@@ -283,11 +294,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'palette');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-palette"
+        return [h(Icon, {
+          name: "palette",
+          attrs: _this2.v3 ? undefined : {
+            name: "palette",
+            icon: paletteIcon
+          },
+          icon: paletteIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-palette"
+      } : [h(Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })])];
     } : [h(Button, {
       tabIndex: _this2.computedTabIndex,
@@ -315,11 +336,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'gradient');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      return [h(Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-color-canvas"
+    } : [h(Icon, {
+      name: "droplet-slider",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slider",
+        icon: dropletSliderIcon
+      },
+      icon: dropletSliderIcon
     })]), h(Button, {
       tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
@@ -346,11 +377,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'palette');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-palette"
+      return [h(Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-palette"
+    } : [h(Icon, {
+      name: "palette",
+      attrs: _this2.v3 ? undefined : {
+        name: "palette",
+        icon: paletteIcon
+      },
+      icon: paletteIcon
     })])])]), h("div", {
       "class": "k-spacer"
     }), h("div", {
@@ -375,11 +416,21 @@ var FlatColorPickerVue2 = {
       },
       onClick: this.handleResetColor
     }, this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-droplet-slash"
+      return [h(Icon, {
+        name: "droplet-slash",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slash",
+          icon: dropletSlashIcon
+        },
+        icon: dropletSlashIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-droplet-slash"
+    } : [h(Icon, {
+      name: "droplet-slash",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slash",
+        icon: dropletSlashIcon
+      },
+      icon: dropletSlashIcon
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {

package/dist/esm/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