@progress/kendo-vue-buttons 8.4.0-develop.1 → 8.4.0-develop.3

package/Button.d.ts

@@ -19,13 +19,14 @@ export interface ButtonProps extends ButtonInterface {
      * Configures the `size` of the Button.
      *
      * The available options are:
+     * - xsmall
      * - small
      * - medium
      * - large
      *
      * @default `undefined`
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -164,7 +165,7 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "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">;
@@ -242,7 +243,7 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "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">;

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/Chip/Chip.d.ts

@@ -171,6 +171,10 @@ export interface ChipProps {
      * For example these elements could contain error or hint message.
      */
     ariaDescribedBy?: string;
+    /**
+     * Identifies the accessible name for the Chip component.
+     */
+    ariaLabel?: string;
     /**
      * @hidden
      */
@@ -252,6 +256,7 @@ declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: string;
     };
     tabIndex: PropType<number>;
+    ariaLabel: PropType<string>;
     onMousedown: PropType<(event: any) => void>;
 }>, {
     chipRef: import('vue').Ref<any, any>;
@@ -330,6 +335,7 @@ declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: string;
     };
     tabIndex: PropType<number>;
+    ariaLabel: PropType<string>;
     onMousedown: PropType<(event: any) => void>;
 }>> & Readonly<{
     onClick?: (event: ChipMouseEvent) => any;

package/Chip/Chip.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 a=require("vue"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),o=require("./focus-reducer.js"),$=require("./data-reducer.js"),l=require("./selection-reducer.js"),S=require("../package-metadata.js"),b=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return m.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return m.checkIcon}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,onMousedown:Function},emits:{click:e=>!0,keydown:e=>!0,blur:e=>!0,focus:e=>!0,remove:e=>!0},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage(S.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",e)},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:$.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:o.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:l.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:o.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:n,themeColor:c,fillMode:r,look:s,avatar:i,icon:d,svgIcon:h,selectedIcon:u,selectedSvgIcon:p,removeIcon:v,removeSvgIcon:f}=this.$props,g=t.templateRendering.call(this,i,t.getListeners.call(this)),k=i?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${i.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:i.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:i.imageUrl,alt:i.imageAlt},null)])]):null,y=t.getTemplate.call(this,{h:a.h,template:g});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[n]||n}`]:n,[`k-chip-${r}`]:r,[`k-chip-${c}`]:c,"k-chip-outline":s==="outline"||s==="outlined","k-chip-solid":s==="solid"||s==="filled"||r==="solid"}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(u||p)&&a.createVNode(t.Icon,{name:t.getIconName(u),icon:p,size:"small"},null),(d||h)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:h,size:"small"},null),i?i.imageUrl?k:y:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{"aria-label":this.$props.text,class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(v),icon:f,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),o=require("./focus-reducer.js"),$=require("./data-reducer.js"),l=require("./selection-reducer.js"),S=require("../package-metadata.js"),b=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return m.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return m.checkIcon}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,ariaLabel:String,onMousedown:Function},emits:{click:e=>!0,keydown:e=>!0,blur:e=>!0,focus:e=>!0,remove:e=>!0},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage(S.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",e)},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:$.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:o.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:l.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:o.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:n,themeColor:c,fillMode:r,look:s,avatar:i,icon:d,svgIcon:h,selectedIcon:u,selectedSvgIcon:p,removeIcon:f,removeSvgIcon:v}=this.$props,g=t.templateRendering.call(this,i,t.getListeners.call(this)),k=i?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${i.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:i.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:i.imageUrl,alt:i.imageAlt},null)])]):null,y=t.getTemplate.call(this,{h:a.h,template:g});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[n]||n}`]:n,[`k-chip-${r}`]:r,[`k-chip-${c}`]:c,"k-chip-outline":s==="outline"||s==="outlined","k-chip-solid":s==="solid"||s==="filled"||r==="solid"}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled||void 0,"aria-label":this.$props.ariaLabel,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(u||p)&&a.createVNode(t.Icon,{name:t.getIconName(u),icon:p,size:"small"},null),(d||h)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:h,size:"small",class:"k-chip-icon"},null),i?i.imageUrl?k:y:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(f),icon:v,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;

package/Chip/Chip.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as D, createVNode as t, h as I, ref as F } from "vue";
-import { noop as n, templateRendering as C, getListeners as w, kendoThemeMaps as c, getTemplate as x, classNames as M, getTabIndex as O, setRef as R, Icon as d, getIconName as h, Keys as a, getRef as T, validatePackage as A } from "@progress/kendo-vue-common";
+import { noop as r, templateRendering as C, getListeners as w, kendoThemeMaps as c, getTemplate as x, classNames as M, getTabIndex as O, setRef as R, Icon as d, getIconName as h, Keys as s, getRef as T, validatePackage as A } from "@progress/kendo-vue-common";
 import { checkIcon as B, xCircleIcon as N } from "@progress/kendo-svg-icons";
 import { FOCUS_ACTION as o } from "./focus-reducer.mjs";
 import { DATA_ACTION as j } from "./data-reducer.mjs";
@@ -85,6 +85,7 @@ const q = /* @__PURE__ */ D({
       default: "button"
     },
     tabIndex: Number,
+    ariaLabel: String,
     onMousedown: Function
   },
   emits: {
@@ -109,13 +110,13 @@ const q = /* @__PURE__ */ D({
       default: null
     },
     handleDispatchDataItems: {
-      default: n
+      default: r
     },
     handleDispatchSelection: {
-      default: n
+      default: r
     },
     handleDispatchFocus: {
-      default: n
+      default: r
     }
   },
   created() {
@@ -174,28 +175,28 @@ const q = /* @__PURE__ */ D({
     },
     handleKeyDown(e) {
       switch (e.keyCode) {
-        case a.left:
+        case s.left:
           this.handleDispatchFocus && this.handleDispatchFocus({
             type: o.prev,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.right:
+        case s.right:
           this.handleDispatchFocus && this.handleDispatchFocus({
             type: o.next,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.enter:
+        case s.enter:
           this.handleDispatchFocus && this.handleDispatchSelection({
             type: p.toggle,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.delete:
+        case s.delete:
           this.handleRemove(e);
           break;
       }
@@ -231,8 +232,8 @@ const q = /* @__PURE__ */ D({
       size: e,
       rounded: l,
       themeColor: u,
-      fillMode: r,
-      look: s,
+      fillMode: n,
+      look: a,
       avatar: i,
       icon: m,
       svgIcon: f,
@@ -265,14 +266,15 @@ const q = /* @__PURE__ */ D({
         "k-focus": this.computedFocused(),
         [`k-chip-${c.sizeMap[e] || e}`]: e,
         [`k-rounded-${c.roundedMap[l] || l}`]: l,
-        [`k-chip-${r}`]: r,
+        [`k-chip-${n}`]: n,
         [`k-chip-${u}`]: u,
-        "k-chip-outline": s === "outline" || s === "outlined",
-        "k-chip-solid": s === "solid" || s === "filled" || r === "solid"
+        "k-chip-outline": a === "outline" || a === "outlined",
+        "k-chip-solid": a === "solid" || a === "filled" || n === "solid"
       }),
       "aria-pressed": this.$props.role === "button" ? this.currentSelected : void 0,
       "aria-selected": this.$props.role === "option" ? this.currentSelected : void 0,
-      "aria-disabled": this.$props.disabled,
+      "aria-disabled": this.$props.disabled || void 0,
+      "aria-label": this.$props.ariaLabel,
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
@@ -286,11 +288,11 @@ const q = /* @__PURE__ */ D({
     }, null), (m || f) && t(d, {
       name: h(m),
       icon: f,
-      size: "small"
+      size: "small",
+      class: "k-chip-icon"
     }, null), i ? i.imageUrl ? b : S : null, t("span", {
       class: "k-chip-content"
     }, [this.$props.text && t("span", {
-      "aria-label": this.$props.text,
       class: this.chipLabelClass
     }, [this.$props.text])]), this.$props.removable && t("span", {
       class: "k-chip-actions"

package/FloatingActionButton/FloatingActionButton.d.ts

@@ -40,7 +40,7 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
     };
     positionMode: {
         type: PropType<FloatingActionButtonPositionMode>;
-        default: () => FloatingActionButtonPositionMode;
+        default: any;
     };
     popupSettings: {
         type: PropType<import('..').FloatingActionButtonPopupSettings>;
@@ -68,9 +68,11 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
         'k-fab': boolean;
         'k-disabled': any;
         'k-focus': any;
+        'k-pos-absolute': boolean;
+        'k-pos-fixed': boolean;
     };
     computedOpened(): any;
-    rootClassNames(): string;
+    rootClassNames(): any;
 }, {
     dispatchPopupEvent(dispatchedEvent: any, isOpen?: boolean): void;
     handleClick(event: any): void;
@@ -118,7 +120,7 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
     };
     positionMode: {
         type: PropType<FloatingActionButtonPositionMode>;
-        default: () => FloatingActionButtonPositionMode;
+        default: any;
     };
     popupSettings: {
         type: PropType<import('..').FloatingActionButtonPopupSettings>;

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 o=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),u=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=o.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:void 0},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&&u.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){u.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:n,rounded:i,positionMode:d}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${n}`]:n,[`k-fab-${t}`]:t,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,"k-pos-absolute":d==="absolute","k-pos-fixed":d==="fixed",[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!!d}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){}},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,n=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=n;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<n&&!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<n&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=o.ref(null),t=o.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:n,svgIcon:i,iconClass:d,id:h,items:r,text:c,tabIndex:g,accessKey:b,popupSettings:l}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return r&&r.map(function(a,p){return o.createVNode(I.FloatingActionButtonItem,{key:p,index:p,id:`${this.listId}-${p}`,disabled:t||a.disabled,focused:this.focusedIndex===p,dataItem:a,item:k,class:s.classNames(a.className,u.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=n&&!c,m=(this.element?this.element.offsetWidth:0)/2-32/2;return o.createVNode("div",{class:this.rootClassNames},[o.createVNode("button",{ref:a=>{this.kendoAnchorRef=a},id:h||this.buttonId,role:r?"menubutton":void 0,type:"button","aria-disabled":t||void 0,"aria-expanded":r?this.computedOpened:void 0,"aria-haspopup":r?!0:void 0,"aria-label":!c&&(n||i||d)?"Action":void 0,"aria-owns":r?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&r?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(g,t),accesskey:b,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},[n||i?o.createVNode(s.Icon,{name:n,icon:i,class:"k-fab-icon"},null):d?o.createVNode(s.Icon,{class:d},null):null,c&&o.createVNode("span",{class:"k-fab-text"},[c])]),o.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:l.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",l.popupClass),anchorAlign:l.anchorAlign||u.getAnchorAlign(e,this.isRtl),popupAlign:l.popupAlign||u.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[o.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;

package/FloatingActionButton/FloatingActionButton.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 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 { templateRendering as A, getListeners as S, getTabIndex as M, Icon as k, classNames as c, setRef as $, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as h } 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";
@@ -44,9 +44,7 @@ const G = /* @__PURE__ */ w({
     },
     positionMode: {
       type: String,
-      default: function() {
-        return "fixed";
-      }
+      default: void 0
     },
     popupSettings: {
       type: Object,
@@ -85,7 +83,7 @@ const G = /* @__PURE__ */ w({
     };
   },
   created() {
-    R(B), this.element = void 0, this._anchor = c(), this.listId = c(), this.buttonId = c();
+    R(B), this.element = void 0, this._anchor = h(), this.listId = h(), this.buttonId = h();
   },
   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);
@@ -99,7 +97,8 @@ const G = /* @__PURE__ */ w({
         size: e,
         themeColor: t,
         fillMode: i,
-        rounded: s
+        rounded: s,
+        positionMode: d
       } = this.$props;
       return {
         "k-fab": !0,
@@ -109,17 +108,15 @@ const G = /* @__PURE__ */ w({
         [`k-fab-${t}`]: t,
         "k-disabled": this.$props.disabled,
         "k-focus": this.currentFocused,
-        [`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !0
+        "k-pos-absolute": d === "absolute",
+        "k-pos-fixed": d === "fixed",
+        [`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !!d
       };
     },
     computedOpened() {
       return this.$props.opened === void 0 ? this.currentOpened : this.$props.opened;
     },
     rootClassNames() {
-      return p({
-        "k-pos-absolute": this.$props.positionMode === "absolute",
-        "k-pos-fixed": this.$props.positionMode === "fixed"
-      });
     }
   },
   methods: {
@@ -207,45 +204,45 @@ const G = /* @__PURE__ */ w({
       disabled: t,
       icon: i,
       svgIcon: s,
-      iconClass: h,
+      iconClass: d,
       id: f,
       items: r,
-      text: a,
+      text: u,
       tabIndex: v,
       accessKey: C,
       popupSettings: l
-    } = this.$props, y = M.call(this, this.$props.item, S.call(this)), D = function() {
-      return r && r.map(function(d, u) {
+    } = this.$props, y = A.call(this, this.$props.item, S.call(this)), D = function() {
+      return r && r.map(function(a, p) {
         return o(E, {
-          key: u,
-          index: u,
-          id: `${this.listId}-${u}`,
-          disabled: t || d.disabled,
-          focused: this.focusedIndex === u,
-          dataItem: d,
+          key: p,
+          index: p,
+          id: `${this.listId}-${p}`,
+          disabled: t || a.disabled,
+          focused: this.focusedIndex === p,
+          dataItem: a,
           item: y,
-          class: p(d.className, K(this.currentDir || "ltr", e.horizontal)),
+          class: c(a.className, K(this.currentDir || "ltr", e.horizontal)),
           onClick: this.handleItemClick,
           onDown: this.handleItemDown
         }, null);
       }, this);
-    }, m = i && !a, b = (this.element ? this.element.offsetWidth : 0) / 2 - 32 / 2;
+    }, m = i && !u, b = (this.element ? this.element.offsetWidth : 0) / 2 - 32 / 2;
     return o("div", {
       class: this.rootClassNames
     }, [o("button", {
-      ref: (d) => {
-        this.kendoAnchorRef = d;
+      ref: (a) => {
+        this.kendoAnchorRef = a;
       },
       id: f || this.buttonId,
-      role: r ? "menubutton" : "button",
+      role: r ? "menubutton" : void 0,
       type: "button",
-      "aria-disabled": t,
+      "aria-disabled": t || void 0,
       "aria-expanded": r ? this.computedOpened : void 0,
-      "aria-haspopup": !!r,
-      "aria-label": `${a || ""} floatingactionbutton`,
+      "aria-haspopup": r ? !0 : void 0,
+      "aria-label": !u && (i || s || d) ? "Action" : void 0,
       "aria-owns": r ? this.listId : void 0,
       "aria-activedescendant": this.focusedIndex >= 0 && r ? `${this.listId}-${this.focusedIndex}` : void 0,
-      tabindex: A(v, t),
+      tabindex: M(v, t),
       accesskey: C,
       dir: this.currentDir,
       disabled: t,
@@ -256,20 +253,20 @@ 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($, {
-      class: h
-    }, null) : null, a && o("span", {
+    }, null) : d ? o(k, {
+      class: d
+    }, null) : null, u && o("span", {
       class: "k-fab-text"
-    }, [a])]), o(j, {
-      ref: k(this, "popup"),
+    }, [u])]), o(j, {
+      ref: $(this, "popup"),
       show: this.computedOpened,
       anchor: this._anchor,
       animate: l.animate,
-      popupClass: p("k-popup-transparent k-fab-popup", l.popupClass),
+      popupClass: c("k-popup-transparent k-fab-popup", l.popupClass),
       anchorAlign: l.anchorAlign || P(e, this.isRtl),
       popupAlign: l.popupAlign || N(e, this.isRtl),
       style: {
@@ -277,11 +274,11 @@ const G = /* @__PURE__ */ w({
       }
     }, {
       default: () => [o("ul", {
-        ref: k(this, "list"),
+        ref: $(this, "list"),
         role: "menu",
         "aria-labelledby": f,
         id: this.listId,
-        class: p("k-fab-items", {
+        class: c("k-fab-items", {
           "k-fab-items-bottom": e.vertical !== "bottom",
           "k-fab-items-top": e.vertical === "bottom"
         }),