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

package/Button.d.ts

@@ -19,13 +19,14 @@ export interface ButtonProps extends ButtonInterface {
      * 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.
      *
@@ -63,13 +64,12 @@ export interface ButtonProps extends ButtonInterface {
      * - 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';
     /**
      * Sets the `tabIndex` property of the Button.
      */
@@ -164,10 +164,10 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         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">;
     tabIndex: PropType<number>;
     accessKey: PropType<string>;
     id: PropType<string>;
@@ -242,10 +242,10 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         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">;
     tabIndex: PropType<number>;
     accessKey: PropType<string>;
     id: PropType<string>;

package/Button.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 n=require("vue"),t=require("@progress/kendo-vue-common"),v=require("./util.js"),k=require("./package-metadata.js"),y=v.default.styles,S=n.defineComponent({name:"KendoButton",emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,pointerdown:e=>!0,pointerup:e=>!0,focus:e=>!0,blur:e=>!0,keypress:e=>!0,keydown:e=>!0,contextmenu:e=>!0},props:{ariaLabel:String,ariaPressed:Boolean,title:String,dir:String,selected:{type:Boolean,default:void 0},togglable:{type:Boolean,default:!1},icon:{type:String,default:function(){}},svgIcon:Object,iconSize:{type:String},iconClass:{type:String,default:function(){}},imageUrl:{type:String,default:function(){}},imageAlt:String,disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,tabIndex:Number,accessKey:String,id:String,type:String,role:String},created(){t.validatePackage(k.packageMetadata),this.currentActive=this.$props.togglable===!0&&this.$props.selected===!0,this._activeTemp=void 0},data(){return{currentActive:null}},computed:{computedSelected(){return this._activeTemp!==void 0?this._activeTemp:this.$props.selected!==void 0?this.$props.selected:this.currentActive},buttonClasses(){const{disabled:e,icon:d,iconClass:l,imageUrl:i,dir:r,svgIcon:c,size:s,rounded:o,fillMode:a,themeColor:u}=this.$props,h=c!==void 0||d!==void 0||l!==void 0||i!==void 0,p=t.getDefaultSlots(this);return{[y.button]:!0,[`k-button-${t.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${t.kendoThemeMaps.roundedMap[o]||o}`]:o,"k-icon-button":!p&&h,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":r==="rtl",[`k-button-${a}`]:a,[`k-button-${u}`]:u}}},updated(){this.$props.togglable&&this.$props.selected!==void 0&&this.$props.selected!==this.currentActive&&(this.currentActive=this.$props.selected)},methods:{focus(e){this.$el.focus(e)},toggleIfApplicable(){if(!this.disabled&&this.$props.togglable&&this.$props.selected===void 0){const e=!this.currentActive;this._activeTemp=e,this.currentActive=e,this._activeTemp=void 0}},handleClick(e){this.toggleIfApplicable(),this.disabled||this.$emit("click",e)},handleMouseDown(e){this.disabled||this.$emit("mousedown",e)},handlePointerDown(e){this.disabled||this.$emit("pointerdown",e)},handleMouseUp(e){this.disabled||this.$emit("mouseup",e)},handlePointerUp(e){this.disabled||this.$emit("pointerup",e)},handleFocus(e){this.disabled||this.$emit("focus",{event:e})},handleBlur(e){this.disabled||this.$emit("blur",{event:e})},handleKeypress(e){this.disabled||this.$emit("keypress",e)},handleKeydown(e){this.disabled||this.$emit("keydown",e)},handleContextmenu(e){this.disabled||this.$emit("contextmenu",e)}},render(){const{togglable:e,icon:d,svgIcon:l,iconClass:i,imageUrl:r,imageAlt:c,accessKey:s,tabIndex:o,id:a,type:u,disabled:h,role:f,iconSize:p}=this.$props,m=t.getDefaultSlots(this),g=function(){if(r)return n.createVNode("img",{role:"presentation",class:"k-image",alt:c,src:r},null);if(d||l){const b=t.classNames("k-button-icon",i);return n.createVNode(t.Icon,{name:d,icon:l,class:b,size:p},null)}else if(i)return n.createVNode("span",{role:"presentation",class:i},null);return null};return n.createVNode("button",{class:this.buttonClasses,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onPointerdown:this.handlePointerDown,onPointerup:this.handlePointerUp,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeypress:this.handleKeypress,onKeydown:this.handleKeydown,onContextmenu:this.handleContextmenu,title:this.title,"aria-label":this.ariaLabel,"aria-disabled":h||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:s,tabindex:o,id:a,type:u,role:f},[g.call(this),m&&n.createVNode("span",{class:"k-button-text"},[m])])}});exports.Button=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),n=require("@progress/kendo-vue-common"),v=require("./util.js"),k=require("./package-metadata.js"),S=v.default.styles,$=s.defineComponent({name:"KendoButton",emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,pointerdown:e=>!0,pointerup:e=>!0,focus:e=>!0,blur:e=>!0,keypress:e=>!0,keydown:e=>!0,contextmenu:e=>!0},props:{ariaLabel:String,ariaPressed:Boolean,title:String,dir:String,selected:{type:Boolean,default:void 0},togglable:{type:Boolean,default:!1},icon:{type:String,default:function(){}},svgIcon:Object,iconSize:{type:String},iconClass:{type:String,default:function(){}},imageUrl:{type:String,default:function(){}},imageAlt:String,disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,tabIndex:Number,accessKey:String,id:String,type:String,role:String},created(){n.validatePackage(k.packageMetadata),this.currentActive=this.$props.togglable===!0&&this.$props.selected===!0,this._activeTemp=void 0},data(){return{currentActive:null}},computed:{computedSelected(){return this._activeTemp!==void 0?this._activeTemp:this.$props.selected!==void 0?this.$props.selected:this.currentActive},buttonClasses(){const{disabled:e,icon:o,iconClass:t,imageUrl:i,dir:d,svgIcon:c,size:l,rounded:a,fillMode:r,themeColor:u}=this.$props,h=c!==void 0||o!==void 0||t!==void 0||i!==void 0,p=n.getDefaultSlots(this);return{[S.button]:!0,[`k-button-${n.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-rounded-${n.kendoThemeMaps.roundedMap[a]||a}`]:a,"k-icon-button":!p&&h,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":d==="rtl",[`k-button-${r}`]:r,[`k-button-${u}`]:u}}},updated(){this.$props.togglable&&this.$props.selected!==void 0&&this.$props.selected!==this.currentActive&&(this.currentActive=this.$props.selected)},methods:{focus(e){this.$el.focus(e)},toggleIfApplicable(){if(!this.disabled&&this.$props.togglable&&this.$props.selected===void 0){const e=!this.currentActive;this._activeTemp=e,this.currentActive=e,this._activeTemp=void 0}},handleClick(e){this.toggleIfApplicable(),this.disabled||this.$emit("click",e)},handleMouseDown(e){this.disabled||this.$emit("mousedown",e)},handlePointerDown(e){this.disabled||this.$emit("pointerdown",e)},handleMouseUp(e){this.disabled||this.$emit("mouseup",e)},handlePointerUp(e){this.disabled||this.$emit("pointerup",e)},handleFocus(e){this.disabled||this.$emit("focus",{event:e})},handleBlur(e){this.disabled||this.$emit("blur",{event:e})},handleKeypress(e){this.disabled||this.$emit("keypress",e)},handleKeydown(e){this.disabled||this.$emit("keydown",e)},handleContextmenu(e){this.disabled||this.$emit("contextmenu",e)}},render(){const{togglable:e,icon:o,svgIcon:t,iconClass:i,imageUrl:d,imageAlt:c,accessKey:l,tabIndex:a,id:r,type:u,disabled:h,role:m,iconSize:p}=this.$props,f=n.getDefaultSlots(this),b=!f&&(t!==void 0||o!==void 0||i!==void 0||d!==void 0)&&(t!=null&&t.name)?t.name.charAt(0).toUpperCase()+t.name.slice(1):void 0,g=function(){if(d)return s.createVNode("img",{role:"presentation",class:"k-image",alt:c,src:d},null);if(o||t){const y=n.classNames("k-button-icon",i);return s.createVNode(n.Icon,{name:o,icon:t,class:y,size:p},null)}else if(i)return s.createVNode("span",{role:"presentation",class:i},null);return null};return s.createVNode("button",{class:this.buttonClasses,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onPointerdown:this.handlePointerDown,onPointerup:this.handlePointerUp,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeypress:this.handleKeypress,onKeydown:this.handleKeydown,onContextmenu:this.handleContextmenu,title:this.title,"aria-label":this.ariaLabel||b,"aria-disabled":h||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:l,tabindex:a,id:r,type:u,role:m},[g.call(this),f&&s.createVNode("span",{class:"k-button-text"},[f])])}});exports.Button=$;

package/Button.mjs

@@ -5,11 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $, createVNode as s } from "vue";
-import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as y, classNames as k, Icon as S } from "@progress/kendo-vue-common";
-import C from "./util.mjs";
-import { packageMetadata as w } from "./package-metadata.mjs";
-const A = C.styles, K = /* @__PURE__ */ $({
+import { defineComponent as v, createVNode as l } from "vue";
+import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as k, classNames as S, Icon as C } from "@progress/kendo-vue-common";
+import w from "./util.mjs";
+import { packageMetadata as A } from "./package-metadata.mjs";
+const M = w.styles, z = /* @__PURE__ */ v({
   name: "KendoButton",
   emits: {
     click: (e) => !0,
@@ -71,7 +71,7 @@ const A = C.styles, K = /* @__PURE__ */ $({
     role: String
   },
   created() {
-    y(w), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
+    k(A), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
   },
   data() {
     return {
@@ -85,24 +85,24 @@ const A = C.styles, K = /* @__PURE__ */ $({
     buttonClasses() {
       const {
         disabled: e,
-        icon: o,
-        iconClass: d,
-        imageUrl: t,
-        dir: l,
+        icon: i,
+        iconClass: t,
+        imageUrl: n,
+        dir: s,
         svgIcon: u,
-        size: i,
-        rounded: n,
+        size: o,
+        rounded: d,
         fillMode: r,
         themeColor: a
-      } = this.$props, c = u !== void 0 || o !== void 0 || d !== void 0 || t !== void 0, h = m(this);
+      } = this.$props, c = u !== void 0 || i !== void 0 || t !== void 0 || n !== void 0, h = m(this);
       return {
-        [A.button]: !0,
-        [`k-button-${b.sizeMap[i] || i}`]: i,
-        [`k-rounded-${b.roundedMap[n] || n}`]: n,
+        [M.button]: !0,
+        [`k-button-${b.sizeMap[o] || o}`]: o,
+        [`k-rounded-${b.roundedMap[d] || d}`]: d,
         "k-icon-button": !h && c,
         "k-disabled": e,
         "k-selected": this.computedSelected,
-        "k-rtl": l === "rtl",
+        "k-rtl": s === "rtl",
         [`k-button-${r}`]: r,
         [`k-button-${a}`]: a
       };
@@ -159,42 +159,42 @@ const A = C.styles, K = /* @__PURE__ */ $({
   render() {
     const {
       togglable: e,
-      icon: o,
-      svgIcon: d,
-      iconClass: t,
-      imageUrl: l,
+      icon: i,
+      svgIcon: t,
+      iconClass: n,
+      imageUrl: s,
       imageAlt: u,
-      accessKey: i,
-      tabIndex: n,
+      accessKey: o,
+      tabIndex: d,
       id: r,
       type: a,
       disabled: c,
-      role: p,
+      role: f,
       iconSize: h
-    } = this.$props, f = m(this), g = function() {
-      if (l)
-        return s("img", {
+    } = this.$props, p = m(this), g = !p && (t !== void 0 || i !== void 0 || n !== void 0 || s !== void 0) && (t != null && t.name) ? t.name.charAt(0).toUpperCase() + t.name.slice(1) : void 0, y = function() {
+      if (s)
+        return l("img", {
           role: "presentation",
           class: "k-image",
           alt: u,
-          src: l
+          src: s
         }, null);
-      if (o || d) {
-        const v = k("k-button-icon", t);
-        return s(S, {
-          name: o,
-          icon: d,
-          class: v,
+      if (i || t) {
+        const $ = S("k-button-icon", n);
+        return l(C, {
+          name: i,
+          icon: t,
+          class: $,
           size: h
         }, null);
-      } else if (t)
-        return s("span", {
+      } else if (n)
+        return l("span", {
           role: "presentation",
-          class: t
+          class: n
         }, null);
       return null;
     };
-    return s("button", {
+    return l("button", {
       class: this.buttonClasses,
       onClick: this.handleClick,
       onMousedown: this.handleMouseDown,
@@ -207,19 +207,19 @@ const A = C.styles, K = /* @__PURE__ */ $({
       onKeydown: this.handleKeydown,
       onContextmenu: this.handleContextmenu,
       title: this.title,
-      "aria-label": this.ariaLabel,
+      "aria-label": this.ariaLabel || g,
       "aria-disabled": c || void 0,
       "aria-pressed": e ? !!this.currentActive : void 0,
-      accesskey: i,
-      tabindex: n,
+      accesskey: o,
+      tabindex: d,
       id: r,
       type: a,
-      role: p
-    }, [g.call(this), f && s("span", {
+      role: f
+    }, [y.call(this), p && l("span", {
       class: "k-button-text"
-    }, [f])]);
+    }, [p])]);
   }
 });
 export {
-  K as Button
+  z as Button
 };

package/FloatingActionButton/FloatingActionButton.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 n=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),a=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=n.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:function(){return"fixed"}},popupSettings:{type:Object,default:function(){return{}}},rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},size:String,themeColor:String},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(y.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(this,"popup"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl",this.opened!==void 0&&a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,themeColor:t,fillMode:o,rounded:i}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${o}`]:o,[`k-fab-${t}`]:t,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!0}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){return s.classNames({"k-pos-absolute":this.$props.positionMode==="absolute","k-pos-fixed":this.$props.positionMode==="fixed"})}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)this.$emit("click",e,void 0);else{const t=!this.computedOpened;this.currentOpened=t,this.currentFocused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,!this.computedOpened)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),this.computedOpened&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,o=this.$props.items?this.$props.items.length-1:-1,i=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=o;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<o&&!i&&(this.focusedIndex=t+1),t>0&&i&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!i&&(this.focusedIndex=t-1),t<o&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=n.ref(null),t=n.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:o,svgIcon:i,iconClass:p,id:h,items:r,text:u,tabIndex:b,accessKey:g,popupSettings:c}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return r&&r.map(function(d,l){return n.createVNode(I.FloatingActionButtonItem,{key:l,index:l,id:`${this.listId}-${l}`,disabled:t||d.disabled,focused:this.focusedIndex===l,dataItem:d,item:k,class:s.classNames(d.className,a.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=o&&!u,m=(this.element?this.element.offsetWidth:0)/2-32/2;return n.createVNode("div",{class:this.rootClassNames},[n.createVNode("button",{ref:d=>{this.kendoAnchorRef=d},id:h||this.buttonId,role:r?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":r?this.computedOpened:void 0,"aria-haspopup":!!r,"aria-label":`${u||""} floatingactionbutton`,"aria-owns":r?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&r?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(b,t),accesskey:g,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[o||i?n.createVNode(s.Icon,{name:o,icon:i,class:"k-fab-icon"},null):p?n.createVNode(s.Icon,{class:p},null):null,u&&n.createVNode("span",{class:"k-fab-text"},[u])]),n.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:c.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",c.popupClass),anchorAlign:c.anchorAlign||a.getAnchorAlign(e,this.isRtl),popupAlign:c.popupAlign||a.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[n.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":h,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[$.call(this)])]})])}});exports.FloatingActionButton=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),y=require("./FloatingActionButtonItem.js"),x=require("../package-metadata.js"),a=require("./utils.js"),v=require("@progress/kendo-vue-popup"),O=n.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:function(){return"fixed"}},popupSettings:{type:Object,default:function(){return{}}},rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},size:String,themeColor:String},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(x.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(this,"popup"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl",this.opened!==void 0&&a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,themeColor:t,fillMode:o,rounded:i}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${o}`]:o,[`k-fab-${t}`]:t,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!0}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){return s.classNames({"k-pos-absolute":this.$props.positionMode==="absolute","k-pos-fixed":this.$props.positionMode==="fixed"})}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)this.$emit("click",e,void 0);else{const t=!this.computedOpened;this.currentOpened=t,this.currentFocused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,!this.computedOpened)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),this.computedOpened&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,o=this.$props.items?this.$props.items.length-1:-1,i=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=o;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<o&&!i&&(this.focusedIndex=t+1),t>0&&i&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!i&&(this.focusedIndex=t-1),t<o&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=n.ref(null),t=n.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){var b;const{align:e,disabled:t,icon:o,svgIcon:i,iconClass:p,id:h,items:d,text:u,tabIndex:g,accessKey:k,popupSettings:c}=this.$props,$=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),I=function(){return d&&d.map(function(r,l){return n.createVNode(y.FloatingActionButtonItem,{key:l,index:l,id:`${this.listId}-${l}`,disabled:t||r.disabled,focused:this.focusedIndex===l,dataItem:r,item:$,class:s.classNames(r.className,a.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=o&&!u,m=(this.element?this.element.offsetWidth:0)/2-32/2;return n.createVNode("div",{class:this.rootClassNames},[n.createVNode("button",{ref:r=>{this.kendoAnchorRef=r},id:h||this.buttonId,role:d?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":d?this.computedOpened:void 0,"aria-haspopup":!!d,"aria-label":`${u||""} floatingactionbutton`,"aria-owns":d?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&d?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:(b=s.getTabIndex(g,t))!=null?b:0,accesskey:k,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[o||i?n.createVNode(s.Icon,{name:o,icon:i,class:"k-fab-icon"},null):p?n.createVNode(s.Icon,{class:p},null):null,u&&n.createVNode("span",{class:"k-fab-text"},[u])]),n.createVNode(v.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:c.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",c.popupClass),anchorAlign:c.anchorAlign||a.getAnchorAlign(e,this.isRtl),popupAlign:c.popupAlign||a.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[n.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":h,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[I.call(this)])]})])}});exports.FloatingActionButton=O;

package/FloatingActionButton/FloatingActionButton.mjs

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as w, createVNode as o, ref as g } from "vue";
-import { templateRendering as M, getListeners as S, getTabIndex as A, Icon as $, classNames as p, setRef as k, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as c } from "@progress/kendo-vue-common";
-import { FloatingActionButtonItem as E } from "./FloatingActionButtonItem.mjs";
-import { packageMetadata as B } from "../package-metadata.mjs";
-import { getPopupAlign as N, getAnchorAlign as P, position as O, getTextDirectionClass as K } from "./utils.mjs";
-import { Popup as j } from "@progress/kendo-vue-popup";
-const G = /* @__PURE__ */ w({
+import { defineComponent as M, createVNode as o, ref as $ } from "vue";
+import { templateRendering as S, getListeners as A, getTabIndex as F, Icon as k, classNames as p, setRef as I, Keys as n, canUseDOM as R, kendoThemeMaps as x, getRef as O, validatePackage as E, guid as c } from "@progress/kendo-vue-common";
+import { FloatingActionButtonItem as B } from "./FloatingActionButtonItem.mjs";
+import { packageMetadata as N } from "../package-metadata.mjs";
+import { getPopupAlign as P, getAnchorAlign as K, position as v, getTextDirectionClass as j } from "./utils.mjs";
+import { Popup as z } from "@progress/kendo-vue-popup";
+const H = /* @__PURE__ */ M({
   name: "KendoVueFloatingActionButton",
   props: {
     id: String,
@@ -85,13 +85,13 @@ const G = /* @__PURE__ */ w({
     };
   },
   created() {
-    R(B), this.element = void 0, this._anchor = c(), this.listId = c(), this.buttonId = c();
+    E(N), this.element = void 0, this._anchor = c(), this.listId = c(), this.buttonId = c();
   },
   mounted() {
-    this.element = this.kendoAnchorRef, this.list = x(this, "list"), this.popup = x(this, "popup"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1, this.isRtl = this.currentDir === "rtl", this.opened !== void 0 && O(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl);
+    this.element = this.kendoAnchorRef, this.list = O(this, "list"), this.popup = O(this, "popup"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1, this.isRtl = this.currentDir === "rtl", this.opened !== void 0 && v(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl);
   },
   updated() {
-    O(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl), this.currentFocused && this.element && this.element.focus();
+    v(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl), this.currentFocused && this.element && this.element.focus();
   },
   computed: {
     buttonClassNames() {
@@ -103,8 +103,8 @@ const G = /* @__PURE__ */ w({
       } = this.$props;
       return {
         "k-fab": !0,
-        [`k-fab-${I.sizeMap[e] || e}`]: e,
-        [`k-rounded-${I.roundedMap[s] || s}`]: s,
+        [`k-fab-${x.sizeMap[e] || e}`]: e,
+        [`k-rounded-${x.roundedMap[s] || s}`]: s,
         [`k-fab-${i}`]: i,
         [`k-fab-${t}`]: t,
         "k-disabled": this.$props.disabled,
@@ -164,7 +164,7 @@ const G = /* @__PURE__ */ w({
       !e.target || !this.$props.items || (this.focusedIndex = t, this.currentOpened = !1, this.dispatchItemClickEvent(e, t), this.dispatchPopupEvent(e, !1));
     },
     handleItemDown(e) {
-      F && document.activeElement === this.element && e.preventDefault();
+      R && document.activeElement === this.element && e.preventDefault();
     },
     handleKeyDown(e) {
       const t = this.focusedIndex, i = this.$props.items ? this.$props.items.length - 1 : -1, s = this.$props.align.vertical === "bottom";
@@ -195,13 +195,14 @@ const G = /* @__PURE__ */ w({
     }
   },
   setup() {
-    const e = g(null), t = g(null);
+    const e = $(null), t = $(null);
     return {
       chipRef: e,
       kendoAnchorRef: t
     };
   },
   render() {
+    var g;
     const {
       align: e,
       disabled: t,
@@ -211,20 +212,20 @@ const G = /* @__PURE__ */ w({
       id: f,
       items: r,
       text: a,
-      tabIndex: v,
-      accessKey: C,
+      tabIndex: C,
+      accessKey: y,
       popupSettings: l
-    } = this.$props, y = M.call(this, this.$props.item, S.call(this)), D = function() {
+    } = this.$props, D = S.call(this, this.$props.item, A.call(this)), w = function() {
       return r && r.map(function(d, u) {
-        return o(E, {
+        return o(B, {
           key: u,
           index: u,
           id: `${this.listId}-${u}`,
           disabled: t || d.disabled,
           focused: this.focusedIndex === u,
           dataItem: d,
-          item: y,
-          class: p(d.className, K(this.currentDir || "ltr", e.horizontal)),
+          item: D,
+          class: p(d.className, j(this.currentDir || "ltr", e.horizontal)),
           onClick: this.handleItemClick,
           onDown: this.handleItemDown
         }, null);
@@ -245,8 +246,8 @@ const G = /* @__PURE__ */ w({
       "aria-label": `${a || ""} floatingactionbutton`,
       "aria-owns": r ? this.listId : void 0,
       "aria-activedescendant": this.focusedIndex >= 0 && r ? `${this.listId}-${this.focusedIndex}` : void 0,
-      tabindex: A(v, t),
-      accesskey: C,
+      tabindex: (g = F(C, t)) != null ? g : 0,
+      accesskey: y,
       dir: this.currentDir,
       disabled: t,
       class: this.buttonClassNames,
@@ -256,28 +257,28 @@ const G = /* @__PURE__ */ w({
       onFocusin: this.handleFocus,
       onBlur: this.handleBlur,
       onKeydown: this.handleKeyDown
-    }, [i || s ? o($, {
+    }, [i || s ? o(k, {
       name: i,
       icon: s,
       class: "k-fab-icon"
-    }, null) : h ? o($, {
+    }, null) : h ? o(k, {
       class: h
     }, null) : null, a && o("span", {
       class: "k-fab-text"
-    }, [a])]), o(j, {
-      ref: k(this, "popup"),
+    }, [a])]), o(z, {
+      ref: I(this, "popup"),
       show: this.computedOpened,
       anchor: this._anchor,
       animate: l.animate,
       popupClass: p("k-popup-transparent k-fab-popup", l.popupClass),
-      anchorAlign: l.anchorAlign || P(e, this.isRtl),
-      popupAlign: l.popupAlign || N(e, this.isRtl),
+      anchorAlign: l.anchorAlign || K(e, this.isRtl),
+      popupAlign: l.popupAlign || P(e, this.isRtl),
       style: {
         boxShadow: "none"
       }
     }, {
       default: () => [o("ul", {
-        ref: k(this, "list"),
+        ref: I(this, "list"),
         role: "menu",
         "aria-labelledby": f,
         id: this.listId,
@@ -289,10 +290,10 @@ const G = /* @__PURE__ */ w({
           paddingLeft: m ? b + "px" : void 0,
           paddingRight: m ? b + "px" : void 0
         }
-      }, [D.call(this)])]
+      }, [w.call(this)])]
     })]);
   }
 });
 export {
-  G as FloatingActionButton
+  H as FloatingActionButton
 };

package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -154,16 +154,10 @@ export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus
      * [see example]({% slug appearance_floatingactionbutton %}).
      *
      * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
+        * * `base` (Default)&mdash;Applies base coloring.
+        * * `primary`&mdash;Applies coloring based on the primary theme color.
      * * `secondary`&mdash;Applies coloring based on the secondary theme color.
      * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
-     * * `info`&mdash;Applies coloring based on the info theme color.
-     * * `success`&mdash; Applies coloring based on the success theme color.
-     * * `warning`&mdash; Applies coloring based on the warning theme color.
-     * * `error`&mdash; Applies coloring based on the error theme color.
-     * * `dark`&mdash; Applies coloring based on the dark theme color.
-     * * `light`&mdash; Applies coloring based on the light theme color.
-     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
      *
      */
     themeColor?: FloatingActionButtonThemeColor;

package/FloatingActionButton/models/theme-color.d.ts

@@ -9,16 +9,10 @@
  * Specifies the theme color of the Floating Action Button..
  *
  * The possible values are:
- * * `primary` (Default)—Applies coloring based on the primary theme color.
+ * * `base` (Default)—Applies base coloring.
+ * * `primary`—Applies coloring based on the primary theme color.
  * * `secondary`—Applies coloring based on the secondary theme color.
  * * `tertiary`— Applies coloring based on the tertiary theme color.
- * * `info`—Applies coloring based on the info theme color.
- * * `success`— Applies coloring based on the success theme color.
- * * `warning`— Applies coloring based on the warning theme color.
- * * `error`— Applies coloring based on the error theme color.
- * * `dark`— Applies coloring based on the dark theme color.
- * * `light`— Applies coloring based on the light theme color.
- * * `inverse`— Applies coloring based on the inverse theme color.
  *
  */
-export type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type FloatingActionButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary';

package/ListButton/DropDownButton.d.ts

@@ -73,14 +73,14 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
     popupSettings: PropType<import('..').ButtonsPopupSettings>;
     itemRender: PropType<any>;
     item: PropType<any>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {
@@ -139,14 +139,14 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
     popupSettings: PropType<import('..').ButtonsPopupSettings>;
     itemRender: PropType<any>;
     item: PropType<any>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {

package/ListButton/DropDownButton.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"),g=require("../Button.js"),s=require("@progress/kendo-vue-common"),y=require("./utils/navigation.js"),b=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),a=require("./utils/popup.js"),$=require("../package-metadata.js"),C=i.defineComponent({name:"KendoDropDownButton",emits:{focus:e=>!0,blur:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,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},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage($.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())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-dropdown-button":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:n,disabled:p}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const h=function(){const{item:o,itemRender:r,textField:f}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const m=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(b.ButtonItem,{class:"k-menu-item",dataItem:m,textField:f,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,r,s.getListeners.call(this)),item:o,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},l=function(){const{popupSettings:o={},size:r}=this.$props;return i.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:o.animate,popupClass:s.classNames("k-menu-popup",o.popupClass),anchorAlign:o.anchorAlign||a.getAnchorAlign(e),popupAlign:o.popupAlign||a.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${s.kendoThemeMaps.sizeMap[r]||r}`,role:"menu",id:this.guid},[h.call(this)])]})};return i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(g.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:p||void 0,tabIndex:n,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:this.$props.buttonClass,imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":p,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} dropdownbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,c]}),l.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const n=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&n&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",{event:e})),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){const n={event:e};this.$emit(t?"open":"close",n)},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.DropDownButton=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),g=require("../Button.js"),s=require("@progress/kendo-vue-common"),y=require("./utils/navigation.js"),b=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),c=require("./utils/popup.js"),$=require("../package-metadata.js"),C=i.defineComponent({name:"KendoDropDownButton",emits:{focus:e=>!0,blur:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,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},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage($.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())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-dropdown-button":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:n,disabled:p}=this.$props,a=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const h=function(){const{item:o,itemRender:r,textField:f}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const m=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(b.ButtonItem,{class:"k-menu-item",dataItem:m,textField:f,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,r,s.getListeners.call(this)),item:o,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},l=function(){const{popupSettings:o={},size:r}=this.$props;return i.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:o.animate,popupClass:s.classNames("k-menu-popup",o.popupClass),anchorAlign:o.anchorAlign||c.getAnchorAlign(e),popupAlign:o.popupAlign||c.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${s.kendoThemeMaps.sizeMap[r]||r}`,role:"menu",id:this.guid},[h.call(this)])]})};return i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(g.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:p||void 0,tabIndex:n,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:this.$props.buttonClass,imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":p,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} dropdownbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,a]}),l.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const n=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&n&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",{event:e})),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){const n={event:e};this.$emit(t?"open":"close",n)},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.DropDownButton=C;

package/ListButton/DropDownButton.mjs

@@ -53,7 +53,7 @@ const U = /* @__PURE__ */ $({
     themeColor: {
       type: String,
       validator: function(e) {
-        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
+        return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
       }
     },
     opened: {
@@ -107,23 +107,23 @@ const U = /* @__PURE__ */ $({
         itemRender: r,
         textField: g
       } = this.$props;
-      return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
-        const b = typeof d != "string" ? {
-          ...d,
-          render: c.call(this, d.render, h.call(this))
-        } : d;
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, d) {
+        const b = typeof u != "string" ? {
+          ...u,
+          render: c.call(this, u.render, h.call(this))
+        } : u;
         return o(S, {
           class: "k-menu-item",
           dataItem: b,
           textField: g,
-          focused: this.focusedIndex === u,
+          focused: this.focusedIndex === d,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
           render: c.call(this, r, h.call(this)),
           item: n,
-          index: u,
-          key: u,
-          id: `${this.guid}-${u}`
+          index: d,
+          key: d,
+          id: `${this.guid}-${d}`
         }, null);
       }, this) : null;
     }, m = function() {

package/ListButton/SplitButton.d.ts

@@ -69,14 +69,14 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
     disabled: PropType<boolean>;
     icon: PropType<string>;
     svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {
@@ -138,14 +138,14 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
     disabled: PropType<boolean>;
     icon: PropType<string>;
     svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {