@progress/kendo-vue-inputs 3.5.2 → 3.5.4-dev.202209071223

package/dist/es/checkbox/Checkbox.js

@@ -206,7 +206,7 @@ var CheckboxVue2 = {
     });
     var inputClasses = classNames((_a = {
       'k-checkbox': true
-    }, _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
+    }, _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-disabled'] = disabled, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
       return h("input", {

package/dist/es/colors/ColorGradient.js

@@ -387,7 +387,11 @@ var ColorGradientVue2 = {
     },
     onGradientWrapperClick: function onGradientWrapperClick(event) {
       this.firstFocusable = getRef(this, 'draghandle');
-      this.firstFocusable.focus();
+
+      if (this.firstFocusable) {
+        this.firstFocusable.focus();
+      }
+
       this.changePosition(event);
     },
     move: function move(e, prop, d) {

package/dist/es/colors/ColorInput.js

@@ -105,12 +105,12 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'arrows-kpi'
+        icon: 'caret-alt-expand'
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
-      icon: 'arrows-kpi',
+      icon: 'caret-alt-expand',
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/es/colors/ColorPicker.js

@@ -313,7 +313,7 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'arrow-s'
+        icon: 'caret-alt-down'
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -325,7 +325,7 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'arrow-s'
+      icon: 'caret-alt-down'
     }), // @ts-ignore function children
     h(Picker, {
       dir: dir,

package/dist/es/colors/FlatColorPicker.js

@@ -382,10 +382,10 @@ var FlatColorPickerVue2 = {
       onClick: this.handleResetColor
     }, this.v3 ? function () {
       return [h("span", {
-        "class": "k-icon k-i-reset-color"
+        "class": "k-icon k-i-droplet-slash"
       })];
     } : [h("span", {
-      "class": "k-icon k-i-reset-color"
+      "class": "k-icon k-i-droplet-slash"
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {
@@ -439,9 +439,9 @@ var FlatColorPickerVue2 = {
       onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
         "keydown": this.handleButtonKeydown,
-        "click": this.handleApplyBtnClick
+        "click": this.triggerChange
       },
-      onClick: this.handleApplyBtnClick
+      onClick: this.triggerChange
     }, this.v3 ? function () {
       return [applyMessage];
     } : [applyMessage])]), footer]);
@@ -469,14 +469,26 @@ var FlatColorPickerVue2 = {
     },
     handleResetColor: function handleResetColor() {
       this.colorValue = null;
+
+      if (!this.showButtons) {
+        this.triggerChange();
+      }
     },
     handleColorChange: function handleColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
     handlePaletteColorChange: function handlePaletteColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
-    handleApplyBtnClick: function handleApplyBtnClick(event) {
+    triggerChange: function triggerChange(event) {
       var rgbaValue = parseColor(this.colorValue, 'rgba');
       this.currentPrevColor = this.colorValue;
       this.$emit('changemodel', this.colorValue);
@@ -490,14 +502,14 @@ var FlatColorPickerVue2 = {
     },
     innerKeyDown: function innerKeyDown(event) {
       if (event.keyCode === Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     gradientKeyDown: function gradientKeyDown(event) {
       event.stopPropagation();
 
       if (!this.showButtons && event.keyCode === Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     handleButtonKeydown: function handleButtonKeydown(e) {

package/dist/es/numerictextbox/NumericTextBox.js

@@ -620,13 +620,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-n',
+        icon: 'caret-alt-up',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
         title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       "class": "k-spinner-increase",
+      rounded: null,
       "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       onClick: this.increase,
@@ -639,13 +641,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-s',
+        icon: 'caret-alt-down',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
         title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])
       },
       tabIndex: -1,
       "class": "k-spinner-decrease",
-      icon: 'arrow-s',
+      icon: 'caret-alt-down',
+      rounded: null,
       "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       onClick: this.decrease,

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662110325,
+    publishDate: 1662552758,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/slider/Slider.js

@@ -191,12 +191,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+        icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
       style: {
         position: 'relative'
       },
@@ -278,12 +278,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+        icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/es/switch/Switch.js

@@ -235,11 +235,11 @@ var SwitchVue2 = {
       "class": 'k-switch-label-on'
     }, [onLabel]), h("span", {
       "class": 'k-switch-label-off'
-    }, [offLabel]), h("span", {
+    }, [offLabel])]), h("span", {
       "class": 'k-switch-thumb-wrap'
     }, [h("span", {
       "class": this.switchThumbClass
-    })])])]);
+    })])]);
   },
   methods: {
     focus: function focus() {

package/dist/esm/checkbox/Checkbox.js

@@ -206,7 +206,7 @@ var CheckboxVue2 = {
     });
     var inputClasses = classNames((_a = {
       'k-checkbox': true
-    }, _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
+    }, _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-disabled'] = disabled, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
       return h("input", {

package/dist/esm/colors/ColorGradient.js

@@ -387,7 +387,11 @@ var ColorGradientVue2 = {
     },
     onGradientWrapperClick: function onGradientWrapperClick(event) {
       this.firstFocusable = getRef(this, 'draghandle');
-      this.firstFocusable.focus();
+
+      if (this.firstFocusable) {
+        this.firstFocusable.focus();
+      }
+
       this.changePosition(event);
     },
     move: function move(e, prop, d) {

package/dist/esm/colors/ColorInput.js

@@ -105,12 +105,12 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'arrows-kpi'
+        icon: 'caret-alt-expand'
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
-      icon: 'arrows-kpi',
+      icon: 'caret-alt-expand',
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/esm/colors/ColorPicker.js

@@ -313,7 +313,7 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'arrow-s'
+        icon: 'caret-alt-down'
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -325,7 +325,7 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'arrow-s'
+      icon: 'caret-alt-down'
     }), // @ts-ignore function children
     h(Picker, {
       dir: dir,

package/dist/esm/colors/FlatColorPicker.js

@@ -382,10 +382,10 @@ var FlatColorPickerVue2 = {
       onClick: this.handleResetColor
     }, this.v3 ? function () {
       return [h("span", {
-        "class": "k-icon k-i-reset-color"
+        "class": "k-icon k-i-droplet-slash"
       })];
     } : [h("span", {
-      "class": "k-icon k-i-reset-color"
+      "class": "k-icon k-i-droplet-slash"
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {
@@ -439,9 +439,9 @@ var FlatColorPickerVue2 = {
       onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
         "keydown": this.handleButtonKeydown,
-        "click": this.handleApplyBtnClick
+        "click": this.triggerChange
       },
-      onClick: this.handleApplyBtnClick
+      onClick: this.triggerChange
     }, this.v3 ? function () {
       return [applyMessage];
     } : [applyMessage])]), footer]);
@@ -469,14 +469,26 @@ var FlatColorPickerVue2 = {
     },
     handleResetColor: function handleResetColor() {
       this.colorValue = null;
+
+      if (!this.showButtons) {
+        this.triggerChange();
+      }
     },
     handleColorChange: function handleColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
     handlePaletteColorChange: function handlePaletteColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
-    handleApplyBtnClick: function handleApplyBtnClick(event) {
+    triggerChange: function triggerChange(event) {
       var rgbaValue = parseColor(this.colorValue, 'rgba');
       this.currentPrevColor = this.colorValue;
       this.$emit('changemodel', this.colorValue);
@@ -490,14 +502,14 @@ var FlatColorPickerVue2 = {
     },
     innerKeyDown: function innerKeyDown(event) {
       if (event.keyCode === Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     gradientKeyDown: function gradientKeyDown(event) {
       event.stopPropagation();
 
       if (!this.showButtons && event.keyCode === Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     handleButtonKeydown: function handleButtonKeydown(e) {

package/dist/esm/numerictextbox/NumericTextBox.js

@@ -620,13 +620,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-n',
+        icon: 'caret-alt-up',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
         title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       "class": "k-spinner-increase",
+      rounded: null,
       "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       onClick: this.increase,
@@ -639,13 +641,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-s',
+        icon: 'caret-alt-down',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
         title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])
       },
       tabIndex: -1,
       "class": "k-spinner-decrease",
-      icon: 'arrow-s',
+      icon: 'caret-alt-down',
+      rounded: null,
       "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       onClick: this.decrease,

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662110325,
+    publishDate: 1662552758,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/slider/Slider.js

@@ -191,12 +191,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+        icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
       style: {
         position: 'relative'
       },
@@ -278,12 +278,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+        icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/esm/switch/Switch.js

@@ -235,11 +235,11 @@ var SwitchVue2 = {
       "class": 'k-switch-label-on'
     }, [onLabel]), h("span", {
       "class": 'k-switch-label-off'
-    }, [offLabel]), h("span", {
+    }, [offLabel])]), h("span", {
       "class": 'k-switch-thumb-wrap'
     }, [h("span", {
       "class": this.switchThumbClass
-    })])])]);
+    })])]);
   },
   methods: {
     focus: function focus() {

package/dist/npm/checkbox/Checkbox.js

@@ -218,7 +218,7 @@ var CheckboxVue2 = {
     });
     var inputClasses = (0, kendo_vue_common_1.classNames)((_a = {
       'k-checkbox': true
-    }, _a["k-checkbox-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
+    }, _a["k-checkbox-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-disabled'] = disabled, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
       return h("input", {

package/dist/npm/colors/ColorGradient.js

@@ -407,7 +407,11 @@ var ColorGradientVue2 = {
     },
     onGradientWrapperClick: function onGradientWrapperClick(event) {
       this.firstFocusable = (0, kendo_vue_common_1.getRef)(this, 'draghandle');
-      this.firstFocusable.focus();
+
+      if (this.firstFocusable) {
+        this.firstFocusable.focus();
+      }
+
       this.changePosition(event);
     },
     move: function move(e, prop, d) {

package/dist/npm/colors/ColorInput.js

@@ -120,12 +120,12 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'arrows-kpi'
+        icon: 'caret-alt-expand'
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
-      icon: 'arrows-kpi',
+      icon: 'caret-alt-expand',
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/npm/colors/ColorPicker.js

@@ -326,7 +326,7 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'arrow-s'
+        icon: 'caret-alt-down'
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -338,7 +338,7 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'arrow-s'
+      icon: 'caret-alt-down'
     }), // @ts-ignore function children
     h(Picker_1.Picker, {
       dir: dir,

package/dist/npm/colors/FlatColorPicker.js

@@ -399,10 +399,10 @@ var FlatColorPickerVue2 = {
       onClick: this.handleResetColor
     }, this.v3 ? function () {
       return [h("span", {
-        "class": "k-icon k-i-reset-color"
+        "class": "k-icon k-i-droplet-slash"
       })];
     } : [h("span", {
-      "class": "k-icon k-i-reset-color"
+      "class": "k-icon k-i-droplet-slash"
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {
@@ -456,9 +456,9 @@ var FlatColorPickerVue2 = {
       onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
         "keydown": this.handleButtonKeydown,
-        "click": this.handleApplyBtnClick
+        "click": this.triggerChange
       },
-      onClick: this.handleApplyBtnClick
+      onClick: this.triggerChange
     }, this.v3 ? function () {
       return [applyMessage];
     } : [applyMessage])]), footer]);
@@ -486,14 +486,26 @@ var FlatColorPickerVue2 = {
     },
     handleResetColor: function handleResetColor() {
       this.colorValue = null;
+
+      if (!this.showButtons) {
+        this.triggerChange();
+      }
     },
     handleColorChange: function handleColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
     handlePaletteColorChange: function handlePaletteColorChange(event) {
       this.colorValue = event.value;
+
+      if (!this.showButtons) {
+        this.triggerChange(event);
+      }
     },
-    handleApplyBtnClick: function handleApplyBtnClick(event) {
+    triggerChange: function triggerChange(event) {
       var rgbaValue = (0, color_parser_1.parseColor)(this.colorValue, 'rgba');
       this.currentPrevColor = this.colorValue;
       this.$emit('changemodel', this.colorValue);
@@ -507,14 +519,14 @@ var FlatColorPickerVue2 = {
     },
     innerKeyDown: function innerKeyDown(event) {
       if (event.keyCode === kendo_vue_common_1.Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     gradientKeyDown: function gradientKeyDown(event) {
       event.stopPropagation();
 
       if (!this.showButtons && event.keyCode === kendo_vue_common_1.Keys.enter) {
-        this.handleApplyBtnClick(event);
+        this.triggerChange(event);
       }
     },
     handleButtonKeydown: function handleButtonKeydown(e) {

package/dist/npm/numerictextbox/NumericTextBox.js

@@ -635,13 +635,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-n',
+        icon: 'caret-alt-up',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(main_1.numericIncreaseValue, main_1.messages[main_1.numericIncreaseValue]),
         title: localizationService.toLanguageString(main_1.numericIncreaseValue, main_1.messages[main_1.numericIncreaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       "class": "k-spinner-increase",
+      rounded: null,
       "aria-label": localizationService.toLanguageString(main_1.numericIncreaseValue, main_1.messages[main_1.numericIncreaseValue]),
       title: localizationService.toLanguageString(main_1.numericIncreaseValue, main_1.messages[main_1.numericIncreaseValue]),
       onClick: this.increase,
@@ -654,13 +656,15 @@ var NumericTextBoxVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-s',
+        icon: 'caret-alt-down',
+        rounded: null,
         "aria-label": localizationService.toLanguageString(main_1.numericDecreaseValue, main_1.messages[main_1.numericDecreaseValue]),
         title: localizationService.toLanguageString(main_1.numericDecreaseValue, main_1.messages[main_1.numericDecreaseValue])
       },
       tabIndex: -1,
       "class": "k-spinner-decrease",
-      icon: 'arrow-s',
+      icon: 'caret-alt-down',
+      rounded: null,
       "aria-label": localizationService.toLanguageString(main_1.numericDecreaseValue, main_1.messages[main_1.numericDecreaseValue]),
       title: localizationService.toLanguageString(main_1.numericDecreaseValue, main_1.messages[main_1.numericDecreaseValue]),
       onClick: this.decrease,

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662110325,
+    publishDate: 1662552758,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/slider/Slider.js

@@ -205,12 +205,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+        icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
         rounded: 'full',
         title: lS.toLanguageString(main_1.sliderDecreaseValue, main_1.messages[main_1.sliderDecreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
       style: {
         position: 'relative'
       },
@@ -292,12 +292,12 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+        icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
         rounded: 'full',
         title: lS.toLanguageString(main_1.sliderIncreaseValue, main_1.messages[main_1.sliderIncreaseValue])
       },
       tabIndex: -1,
-      icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
       rounded: 'full',
       style: {
         position: 'relative'