@progress/kendo-vue-buttons 8.4.0-develop.2 → 8.4.0-develop.4

package/ListButton/SplitButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("../Button.js"),i=require("@progress/kendo-vue-common"),b=require("./ButtonItem.js"),y=require("./utils/navigation.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("@progress/kendo-svg-icons"),C=require("../package-metadata.js"),I=o.defineComponent({name:"KendoSplitButton",emits:{focus:e=>!0,blur:e=>!0,buttonclick:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","dark","error","info","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(C.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:s,disabled:r}=this.$props,l=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:u,textField:m}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(d,c){const g=typeof d!="string"?{...d,render:i.templateRendering.call(this,d.render,i.getListeners.call(this))}:d;return o.createVNode(b.ButtonItem,{class:"k-menu-item",role:"menuitem",dataItem:g,textField:m,focused:this.focusedIndex===c,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,u,i.getListeners.call(this)),item:n,key:c,index:c,id:`${this.guid}-${c}`},null)},this):null},f=function(){const{popupSettings:n={},size:u}=this.$props;return o.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||p.getAnchorAlign(e),popupAlign:n.popupAlign||p.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${i.kendoThemeMaps.sizeMap[u]||u}`,role:"menu",id:this.guid,"aria-labelledby":this._anchor},[h.call(this)])]})};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(a.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} splitbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,l]}),o.createVNode(a.Button,{svgIcon:$.caretAltDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"caret-alt-down",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",{event:e}),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",{event:e}):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){const s={event:e};this.$emit(t?"open":"close",s)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.SplitButton=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("../Button.js"),i=require("@progress/kendo-vue-common"),y=require("./ButtonItem.js"),C=require("./utils/navigation.js"),$=require("@progress/kendo-vue-popup"),l=require("./utils/popup.js"),k=require("@progress/kendo-svg-icons"),O=require("../package-metadata.js"),S=o.defineComponent({name:"KendoSplitButton",emits:{focus:e=>!0,blur:e=>!0,buttonclick:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","inverse","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(O.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:s,disabled:r}=this.$props,c=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:p,textField:g}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const b=typeof u!="string"?{...u,render:i.templateRendering.call(this,u.render,i.getListeners.call(this))}:u;return o.createVNode(y.ButtonItem,{role:"menuitem",dataItem:b,textField:g,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,p,i.getListeners.call(this)),item:n,key:d,index:d,id:`${this.guid}-${d}`},null)},this):null},f=function(){const{popupSettings:n={},size:p}=this.$props;return o.createVNode($.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||l.getAnchorAlign(e),popupAlign:n.popupAlign||l.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:"k-menu-group",role:"menu",id:this.guid},[h.call(this)])]})},m=this.$props.text||c?{default:()=>[this.$props.text,c]}:{};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(a.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r||void 0,"aria-label":this.$props.ariaLabel||(!this.$props.text&&!c&&(this.$props.svgIcon||this.$props.icon||this.$props.iconClass)?"Action":void 0)},m),o.createVNode(a.Button,{svgIcon:k.chevronDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"chevron-down",class:"k-split-button-arrow",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"Toggle dropdown","aria-expanded":this.computedOpened,"aria-controls":this.computedOpened?this.guid:void 0},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=C(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",{event:e}),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",{event:e}):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){const s={event:e};this.$emit(t?"open":"close",s)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.SplitButton=S;

package/ListButton/SplitButton.mjs

@@ -5,24 +5,24 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as C, createVNode as o, ref as k } from "vue";
-import { Button as a } from "../Button.mjs";
-import { canUseDOM as y, Keys as s, getDefaultSlots as I, guid as c, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as l, getListeners as h } from "@progress/kendo-vue-common";
-import { ButtonItem as D } from "./ButtonItem.mjs";
+import { defineComponent as k, createVNode as o, ref as y } from "vue";
+import { Button as l } from "../Button.mjs";
+import { canUseDOM as O, Keys as s, getDefaultSlots as I, guid as a, validatePackage as S, classNames as D, templateRendering as h, getListeners as f } from "@progress/kendo-vue-common";
+import { ButtonItem as x } from "./ButtonItem.mjs";
 import w from "./utils/navigation.mjs";
 import { Popup as v } from "@progress/kendo-vue-popup";
 import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
-import { caretAltDownIcon as E } from "@progress/kendo-svg-icons";
+import { chevronDownIcon as E } from "@progress/kendo-svg-icons";
 import { packageMetadata as K } from "../package-metadata.mjs";
-const N = /* @__PURE__ */ C({
+const L = /* @__PURE__ */ k({
   name: "KendoSplitButton",
   emits: {
-    focus: (e) => !0,
-    blur: (e) => !0,
-    buttonclick: (e) => !0,
-    itemclick: (e) => !0,
-    open: (e) => !0,
-    close: (e) => !0
+    focus: (t) => !0,
+    blur: (t) => !0,
+    buttonclick: (t) => !0,
+    itemclick: (t) => !0,
+    open: (t) => !0,
+    close: (t) => !0
   },
   props: {
     accessKey: String,
@@ -43,14 +43,14 @@ const N = /* @__PURE__ */ C({
     rounded: String,
     fillMode: {
       type: String,
-      validator: function(e) {
-        return ["flat", "link", "outline", "solid"].includes(e);
+      validator: function(t) {
+        return ["flat", "link", "outline", "solid"].includes(t);
       }
     },
     themeColor: {
       type: String,
-      validator: function(e) {
-        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
+      validator: function(t) {
+        return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(t);
       }
     },
     opened: {
@@ -74,7 +74,7 @@ const N = /* @__PURE__ */ C({
     };
   },
   created() {
-    this._blurTimeout = null, this._anchor = c(), this.mainButton = null, this.guid = c(), this.buttonsData = [], O(K);
+    this._blurTimeout = null, this._anchor = a(), this.mainButton = null, this.guid = a(), this.buttonsData = [], S(K);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -96,71 +96,71 @@ const N = /* @__PURE__ */ C({
   },
   setup() {
     return {
-      kendoAnchorRef: k(null)
+      kendoAnchorRef: y(null)
     };
   },
   render() {
     this.buttonsData = this.$props.items;
-    const e = this.isRtl(), t = e ? "rtl" : void 0, {
+    const t = this.isRtl(), e = t ? "rtl" : void 0, {
       tabIndex: i,
       disabled: r
-    } = this.$props, f = I(this), m = function() {
+    } = this.$props, p = I(this), m = function() {
       const {
         item: n,
-        itemRender: d,
-        textField: b
+        itemRender: c,
+        textField: C
       } = this.$props;
-      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, p) {
-        const $ = typeof u != "string" ? {
-          ...u,
-          render: l.call(this, u.render, h.call(this))
-        } : u;
-        return o(D, {
-          class: "k-menu-item",
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
+        const $ = typeof d != "string" ? {
+          ...d,
+          render: h.call(this, d.render, f.call(this))
+        } : d;
+        return o(x, {
           role: "menuitem",
           dataItem: $,
-          textField: b,
-          focused: this.focusedIndex === p,
+          textField: C,
+          focused: this.focusedIndex === u,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: l.call(this, d, h.call(this)),
+          render: h.call(this, c, f.call(this)),
           item: n,
-          key: p,
-          index: p,
-          id: `${this.guid}-${p}`
+          key: u,
+          index: u,
+          id: `${this.guid}-${u}`
         }, null);
       }, this) : null;
     }, g = function() {
       const {
         popupSettings: n = {},
-        size: d
+        size: c
       } = this.$props;
       return o(v, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
-        popupClass: S("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || B(e),
-        popupAlign: n.popupAlign || P(e),
-        style: e ? {
+        popupClass: D("k-menu-popup", n.popupClass),
+        anchorAlign: n.anchorAlign || B(t),
+        popupAlign: n.popupAlign || P(t),
+        style: t ? {
           direction: "rtl"
         } : void 0
       }, {
         default: () => [o("ul", {
-          class: `k-group k-menu-group k-reset k-menu-group-${x.sizeMap[d] || d}`,
+          class: "k-menu-group",
           role: "menu",
-          id: this.guid,
-          "aria-labelledby": this._anchor
+          id: this.guid
         }, [m.call(this)])]
       });
-    };
+    }, b = this.$props.text || p ? {
+      default: () => [this.$props.text, p]
+    } : {};
     return o("div", {
       class: this.wrapperClass,
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
-      dir: t
-    }, [o(a, {
+      dir: e
+    }, [o(l, {
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
@@ -174,108 +174,105 @@ const N = /* @__PURE__ */ C({
       svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       imageUrl: this.$props.imageUrl,
-      dir: t,
+      dir: e,
       id: this._anchor,
       ref: this._anchor,
       type: "button",
-      "aria-disabled": r,
-      "aria-haspopup": "menu",
-      "aria-expanded": this.computedOpened,
-      "aria-label": this.$props.ariaLabel || `${this.$props.text || ""} splitbutton`,
-      "aria-controls": this.guid,
-      "aria-activedescendant": this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
-    }, {
-      default: () => [this.$props.text, f]
-    }), o(a, {
+      "aria-disabled": r || void 0,
+      "aria-label": this.$props.ariaLabel || (!this.$props.text && !p && (this.$props.svgIcon || this.$props.icon || this.$props.iconClass) ? "Action" : void 0)
+    }, b), o(l, {
       svgIcon: E,
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
-      icon: "caret-alt-down",
+      icon: "chevron-down",
+      class: "k-split-button-arrow",
       disabled: r || void 0,
       tabIndex: -1,
       onClick: this.onSplitPartClick,
       onMousedown: this.onDownSplitPart,
       onPointerdown: this.onDownSplitPart,
-      dir: t,
-      "aria-label": "menu toggling button"
+      dir: e,
+      "aria-label": "Toggle dropdown",
+      "aria-expanded": this.computedOpened,
+      "aria-controls": this.computedOpened ? this.guid : void 0
     }, null), g.call(this)]);
   },
   methods: {
     element() {
       return this.mainButton;
     },
-    onKeyDown(e) {
-      if (e.altKey) {
-        !this.computedOpened && e.keyCode === s.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === s.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
+    onKeyDown(t) {
+      if (t.altKey) {
+        !this.computedOpened && t.keyCode === s.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === s.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
         return;
       }
-      let t;
-      if (e.keyCode === s.enter || e.keyCode === s.space ? (e.preventDefault(), this.dispatchClickEvent(e, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (t = {
+      let e;
+      if (t.keyCode === s.enter || t.keyCode === s.space ? (t.preventDefault(), this.dispatchClickEvent(t, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (e = {
         focusedIndex: this.computedOpened ? -1 : 0,
         currentOpened: !this.computedOpened
-      }, this.dispatchPopupEvent(e, t.currentOpened))) : this.computedOpened && e.keyCode === s.esc && (t = {
+      }, this.dispatchPopupEvent(t, e.currentOpened))) : this.computedOpened && t.keyCode === s.esc && (e = {
         focusedIndex: -1,
         currentOpened: !1
-      }, this.dispatchPopupEvent(e, t.currentOpened)), this.computedOpened) {
-        const i = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
-        i !== this.focusedIndex && (t = t || {}, t.focusedIndex = i);
-        const r = e.keyCode === s.up || e.keyCode === s.down || e.keyCode === s.left || e.keyCode === s.right;
-        !e.altKey && r && e.preventDefault();
+      }, this.dispatchPopupEvent(t, e.currentOpened)), this.computedOpened) {
+        const i = w(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
+        i !== this.focusedIndex && (e = e || {}, e.focusedIndex = i);
+        const r = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
+        !t.altKey && r && t.preventDefault();
       }
-      t && (this.focusedIndex = t.focusedIndex, this.focused = t.focused, t.currentOpened !== void 0 && (this.currentOpened = t.currentOpened));
+      e && (this.focusedIndex = e.focusedIndex, this.focused = e.focused, e.currentOpened !== void 0 && (this.currentOpened = e.currentOpened));
     },
-    onFocus(e) {
+    onFocus(t) {
       this.focused || (this.$emit("focus", {
-        event: e
+        event: t
       }), this.focused = !0), this.focusedIndex = -1, clearTimeout(this._blurTimeout);
     },
-    onItemClick(e, t) {
+    onItemClick(t, e) {
       const i = this.computedOpened;
-      i && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(e, t), i && this.dispatchPopupEvent(e, !1);
+      i && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(t, e), i && this.dispatchPopupEvent(t, !1);
     },
-    onBlur(e) {
-      clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
+    onBlur(t) {
+      clearTimeout(this._blurTimeout), this.createBlurTimeout(t);
     },
-    createBlurTimeout(e) {
-      const t = this;
+    createBlurTimeout(t) {
+      const e = this;
       this._blurTimeout = setTimeout(() => {
-        y && document.activeElement !== t.mainButton && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", {
-          event: e
-        }), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
+        O && document.activeElement !== e.mainButton && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
+          event: t
+        }), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
       }, 200);
     },
-    dispatchClickEvent(e, t) {
-      this.isItemDisabled(t) || (t === -1 ? this.$emit("buttonclick", {
-        event: e
+    dispatchClickEvent(t, e) {
+      this.isItemDisabled(e) || (e === -1 ? this.$emit("buttonclick", {
+        event: t
       }) : this.$emit("itemclick", {
-        event: e,
+        event: t,
         component: this,
-        item: this.buttonsData[t],
-        itemIndex: t
+        item: this.buttonsData[e],
+        itemIndex: e
       }));
     },
-    onSplitPartClick(e) {
+    onSplitPartClick(t) {
       if (this.buttonsData.length) {
-        const t = !this.computedOpened;
-        this.dispatchPopupEvent(e, t), this.focusedIndex = t ? 0 : -1, this.currentOpened = t, this.focused = !0;
+        const e = !this.computedOpened;
+        this.dispatchPopupEvent(t, e), this.focusedIndex = e ? 0 : -1, this.currentOpened = e, this.focused = !0;
       }
     },
-    onDownSplitPart(e) {
-      e.preventDefault(), this.element() && document.activeElement !== this.element() && this.element().focus();
+    onDownSplitPart(t) {
+      t.preventDefault(), this.element() && document.activeElement !== this.element() && this.element().focus();
     },
-    onItemDown(e) {
-      document.activeElement === this.element() && e.preventDefault();
+    onItemDown(t) {
+      document.activeElement === this.element() && t.preventDefault();
     },
-    dispatchPopupEvent(e, t) {
+    dispatchPopupEvent(t, e) {
       const i = {
-        event: e
+        event: t
       };
-      this.$emit(t ? "open" : "close", i);
+      this.$emit(e ? "open" : "close", i);
     },
-    isItemDisabled(e) {
-      return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;
+    isItemDisabled(t) {
+      return this.buttonsData[t] ? this.buttonsData[t].disabled : this.$props.disabled;
     },
     isRtl() {
       return this.$props.dir !== void 0 ? this.$props.dir === "rtl" : !!this.$el && getComputedStyle(this.$el).direction === "rtl";
@@ -283,5 +280,5 @@ const N = /* @__PURE__ */ C({
   }
 });
 export {
-  N as SplitButton
+  L as SplitButton
 };

package/ListButton/models/ListButtonProps.d.ts

@@ -83,13 +83,14 @@ export interface DropDownButtonProps {
      * Configures the `size` of the Button.
      *
      * The available options are:
+     * - xs
      * - small
      * - medium
      * - large
      *
      * @default `undefined`
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xs' | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -127,13 +128,12 @@ export interface DropDownButtonProps {
      * - info
      * - success
      * - warning
-     * - dark
-     * - light
+     * - error
      * - inverse
      *
      * @default `undefined`
      */
-    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
     /**
      * Fires when the component is focused ([see example]({% slug events_dropdownbutton %})).
      */
@@ -233,13 +233,14 @@ export interface SplitButtonProps {
      * Configures the `size` of the Button.
      *
      * The available options are:
+     * - xs
      * - small
      * - medium
      * - large
      *
      * @default `undefined`
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xs' | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -277,13 +278,12 @@ export interface SplitButtonProps {
      * - info
      * - success
      * - warning
-     * - dark
-     * - light
+     * - error
      * - inverse
      *
      * @default `undefined`
      */
-    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
     /**
      * Fires when the main button is clicked ([see example]({% slug events_splitbutton %})).
      */

package/SegmentedControl/SegmentedControl.d.ts

@@ -19,7 +19,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         type: PropType<SegmentedItemProps[]>;
         default: () => any[];
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;
@@ -49,7 +49,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         type: PropType<SegmentedItemProps[]>;
         default: () => any[];
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;

package/SegmentedControl/interfaces/SegmentedControlTypes.d.ts

@@ -119,6 +119,7 @@ export interface SegmentedControlProps {
      * to the corresponding CSS size class.
      *
      * The available options are:
+    * - `xs`
      * - `small`
      * - `medium`
      * - `large`

package/SmartPasteButton/SmartPasteButton.d.ts

@@ -25,14 +25,14 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: string;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: PropType<"small" | "medium" | "xs" | "large">;
         default: string;
     };
     svgIcon: {
         type: PropType<import('@progress/kendo-vue-common').SVGIcon>;
         default: () => import('@progress/kendo-svg-icons').SVGIcon;
     };
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     formFields: PropType<SmartPasteFormField[]>;
     togglable: {
         type: PropType<boolean>;
@@ -81,14 +81,14 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: string;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: PropType<"small" | "medium" | "xs" | "large">;
         default: string;
     };
     svgIcon: {
         type: PropType<import('@progress/kendo-vue-common').SVGIcon>;
         default: () => import('@progress/kendo-svg-icons').SVGIcon;
     };
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     formFields: PropType<SmartPasteFormField[]>;
     togglable: {
         type: PropType<boolean>;
@@ -118,11 +118,11 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
     onClick?: (event: SmartPasteClickEvent) => any;
 }>, {
     type: string;
-    size: "small" | "medium" | "large";
+    size: "small" | "medium" | "xs" | "large";
+    fillMode: "flat" | "link" | "solid" | "outline";
     rounded: "small" | "medium" | "large" | "full" | "none";
     selected: boolean;
     disabled: boolean;
-    fillMode: "flat" | "link" | "solid" | "outline";
     togglable: boolean;
     svgIcon: import('@progress/kendo-vue-common').SVGIcon;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/SpeechToText/SpeechToTextButton.d.ts

@@ -157,10 +157,10 @@ declare const SpeechToTextButton: import('vue').DefineComponent<import('vue').Ex
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     title: {
         type: PropType<string>;
         default: string;
@@ -216,10 +216,10 @@ declare const SpeechToTextButton: import('vue').DefineComponent<import('vue').Ex
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     title: {
         type: PropType<string>;
         default: string;

package/SpeechToText/SpeechToTextButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),E=require("@progress/kendo-webspeech-common"),k=require("../Button.js"),m=require("@progress/kendo-svg-icons");function T(e){return new E.KendoSpeechRecognition(e)}let f=(function(e){return e.WebSpeech="WebSpeech",e.None="None",e})({});const z=i.defineComponent({name:"KendoSpeechToTextButton",props:{lang:{type:String,default:"en-US"},continuous:{type:Boolean,default:!1},interimResults:{type:Boolean,default:!1},maxAlternatives:{type:Number,default:1},integrationMode:{type:String,default:f.WebSpeech},onStart:{type:Function},onResult:{type:Function},onEnd:{type:Function},onError:{type:Function},svgIcon:{type:Object,default:m.microphoneOutlineIcon},iconSize:{type:String},disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,title:{type:String,default:"Speech to Text Button"},ariaLabel:{type:String,default:"Start speech recognition"}},setup(e,{emit:c,expose:S}){const o=i.ref(null),n=i.ref(!1),g=()=>{var t;return(t=o.value)==null?void 0:t.isActive()},a=()=>e.integrationMode!==f.None,l=typeof window!="undefined"&&!("webkitSpeechRecognition"in window||"SpeechRecognition"in window)?(e.onError&&e.onError({errorMessage:"Speech Recognition API is not supported in this browser."}),!1):!0,u=()=>{var t;n.value||(a()&&((t=o.value)==null||t.start()),n.value=!0)},r=()=>{var t;n.value&&(a()&&((t=o.value)==null||t.stop()),n.value=!1)},v=()=>{var t;n.value&&a()&&((t=o.value)==null||t.abort(),n.value=!1)},h=()=>{l&&(n.value?b():d())},d=async()=>{n.value||(e.onStart&&await e.onStart(),u())},M=t=>{const s=t.results,B=s.length-1,R=s[B],x=Array.from(R).map(I=>({transcript:I.transcript,confidence:I.confidence})),w={isFinal:R.isFinal,alternatives:x};e.onResult&&e.onResult(w),c("result",w)},b=async()=>{n.value&&(e.onEnd&&await e.onEnd(),r())},A=t=>{n.value=!1;const s={errorMessage:t.error||t.errorMessage||"Unknown error"};e.onError&&e.onError(s),c("error",s)},p=()=>{var t;l&&e.integrationMode===f.WebSpeech&&((t=o.value)!=null&&t.isActive()&&r(),o.value=T({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives,events:{start:d,result:M,end:b,error:A}}))};return i.watch(()=>({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives}),()=>{p()},{deep:!0}),i.onMounted(()=>{p()}),i.onUnmounted(()=>{var t;(t=o.value)!=null&&t.isInActiveState&&r()}),S({start:u,stop:r,abort:v,isActive:g}),{clickHandler:h,isInActiveState:n}},render(){const{ariaLabel:e,svgIcon:c,fillMode:S,rounded:o,size:n,disabled:g,themeColor:a,iconSize:y,title:l}=this.$props,{className:u,style:r,id:v}=this.$attrs,h=i.computed(()=>["k-speech-to-text-button",u,{"k-listening":this.isInActiveState}]),d=i.computed(()=>this.isInActiveState?m.stopSmIcon:c||m.microphoneOutlineIcon);return i.createVNode(k.Button,{id:v,style:r,class:h.value,onClick:this.clickHandler,svgIcon:d.value,iconSize:y,fillMode:S,rounded:o,size:n,themeColor:a,"aria-label":e,disabled:g,title:l},null)}});exports.SpeechToTextButton=z;exports.SpeechToTextButtonMode=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),E=require("@progress/kendo-webspeech-common"),k=require("../Button.js"),m=require("@progress/kendo-svg-icons");function T(e){return new E.KendoSpeechRecognition(e)}let f=(function(e){return e.WebSpeech="WebSpeech",e.None="None",e})({});const z=i.defineComponent({name:"KendoSpeechToTextButton",props:{lang:{type:String,default:"en-US"},continuous:{type:Boolean,default:!1},interimResults:{type:Boolean,default:!1},maxAlternatives:{type:Number,default:1},integrationMode:{type:String,default:f.WebSpeech},onStart:{type:Function},onResult:{type:Function},onEnd:{type:Function},onError:{type:Function},svgIcon:{type:Object,default:m.microphoneIcon},iconSize:{type:String},disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,title:{type:String,default:"Speech to Text Button"},ariaLabel:{type:String,default:"Start speech recognition"}},setup(e,{emit:c,expose:S}){const o=i.ref(null),n=i.ref(!1),g=()=>{var t;return(t=o.value)==null?void 0:t.isActive()},a=()=>e.integrationMode!==f.None,l=typeof window!="undefined"&&!("webkitSpeechRecognition"in window||"SpeechRecognition"in window)?(e.onError&&e.onError({errorMessage:"Speech Recognition API is not supported in this browser."}),!1):!0,u=()=>{var t;n.value||(a()&&((t=o.value)==null||t.start()),n.value=!0)},r=()=>{var t;n.value&&(a()&&((t=o.value)==null||t.stop()),n.value=!1)},v=()=>{var t;n.value&&a()&&((t=o.value)==null||t.abort(),n.value=!1)},h=()=>{l&&(n.value?b():d())},d=async()=>{n.value||(e.onStart&&await e.onStart(),u())},M=t=>{const s=t.results,B=s.length-1,R=s[B],x=Array.from(R).map(I=>({transcript:I.transcript,confidence:I.confidence})),w={isFinal:R.isFinal,alternatives:x};e.onResult&&e.onResult(w),c("result",w)},b=async()=>{n.value&&(e.onEnd&&await e.onEnd(),r())},A=t=>{n.value=!1;const s={errorMessage:t.error||t.errorMessage||"Unknown error"};e.onError&&e.onError(s),c("error",s)},p=()=>{var t;l&&e.integrationMode===f.WebSpeech&&((t=o.value)!=null&&t.isActive()&&r(),o.value=T({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives,events:{start:d,result:M,end:b,error:A}}))};return i.watch(()=>({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives}),()=>{p()},{deep:!0}),i.onMounted(()=>{p()}),i.onUnmounted(()=>{var t;(t=o.value)!=null&&t.isInActiveState&&r()}),S({start:u,stop:r,abort:v,isActive:g}),{clickHandler:h,isInActiveState:n}},render(){const{ariaLabel:e,svgIcon:c,fillMode:S,rounded:o,size:n,disabled:g,themeColor:a,iconSize:y,title:l}=this.$props,{className:u,style:r,id:v}=this.$attrs,h=i.computed(()=>["k-speech-to-text-button",u,{"k-listening":this.isInActiveState}]),d=i.computed(()=>this.isInActiveState?m.stopIcon:c||m.microphoneIcon);return i.createVNode(k.Button,{id:v,style:r,class:h.value,onClick:this.clickHandler,svgIcon:d.value,iconSize:y,fillMode:S,rounded:o,size:n,themeColor:a,"aria-label":e,disabled:g,title:l},null)}});exports.SpeechToTextButton=z;exports.SpeechToTextButtonMode=f;