@progress/kendo-vue-buttons 9.3.0-develop.3 → 9.3.0-develop.5

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"),p=require("@progress/kendo-svg-icons"),i=require("./focus-reducer.js"),y=require("./data-reducer.js"),n=require("./selection-reducer.js"),$=require("../package-metadata.js"),S=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 p.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return p.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($.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:n.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:y.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:i.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:n.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:i.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:i.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:n.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:i.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:o,themeColor:r,fillMode:l,avatar:s,icon:c,svgIcon:d,selectedIcon:h,selectedSvgIcon:u,removeIcon:m,removeSvgIcon:v}=this.$props,f=t.templateRendering.call(this,s,t.getListeners.call(this)),g=s?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${s.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:s.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:s.imageUrl,alt:s.imageAlt},null)])]):null,k=t.getTemplate.call(this,{h:a.h,template:f});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[o]||o}`]:o,[`k-chip-${r}`]:r,[`k-chip-${l}`]:l}),"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&&(h||u)&&a.createVNode(t.Icon,{name:t.getIconName(h),icon:u,size:"small"},null),(c||d)&&a.createVNode(t.Icon,{name:t.getIconName(c),icon:d,size:"small"},null),s?s.imageUrl?g:k: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(m),icon:v,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=S;
+"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

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as S, createVNode as t, h as D, ref as I } from "vue";
-import { noop as o, templateRendering as F, getListeners as C, kendoThemeMaps as n, getTemplate as w, classNames as x, getTabIndex as M, setRef as O, Icon as l, getIconName as c, Keys as a, getRef as R, validatePackage as T } from "@progress/kendo-vue-common";
-import { checkIcon as A, xCircleIcon as B } from "@progress/kendo-svg-icons";
-import { FOCUS_ACTION as s } from "./focus-reducer.mjs";
-import { DATA_ACTION as N } from "./data-reducer.mjs";
-import { SELECTION_ACTION as d } from "./selection-reducer.mjs";
-import { packageMetadata as j } from "../package-metadata.mjs";
-const V = /* @__PURE__ */ S({
+import { defineComponent as D, createVNode as t, h as I, ref as F } from "vue";
+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";
+import { SELECTION_ACTION as p } from "./selection-reducer.mjs";
+import { packageMetadata as z } from "../package-metadata.mjs";
+const q = /* @__PURE__ */ D({
   name: "KendoVueChip",
   props: {
     id: String,
@@ -42,7 +42,7 @@ const V = /* @__PURE__ */ S({
     removeSvgIcon: {
       type: Object,
       default: function() {
-        return B;
+        return N;
       }
     },
     disabled: {
@@ -60,7 +60,7 @@ const V = /* @__PURE__ */ S({
     selectedSvgIcon: {
       type: Object,
       default: function() {
-        return A;
+        return B;
       }
     },
     size: String,
@@ -85,6 +85,7 @@ const V = /* @__PURE__ */ S({
       default: "button"
     },
     tabIndex: Number,
+    ariaLabel: String,
     onMousedown: Function
   },
   emits: {
@@ -109,20 +110,20 @@ const V = /* @__PURE__ */ S({
       default: null
     },
     handleDispatchDataItems: {
-      default: o
+      default: r
     },
     handleDispatchSelection: {
-      default: o
+      default: r
     },
     handleDispatchFocus: {
-      default: o
+      default: r
     }
   },
   created() {
-    this.currentDir = void 0, T(j);
+    this.currentDir = void 0, A(z);
   },
   mounted() {
-    this.chip = R(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
+    this.chip = T(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();
@@ -146,7 +147,7 @@ const V = /* @__PURE__ */ S({
     },
     handleClick(e) {
       this.handleDispatchSelection && this.handleDispatchSelection({
-        type: d.toggle,
+        type: p.toggle,
         payload: this.$props.value,
         event: e
       }), this.$emit("click", {
@@ -156,15 +157,15 @@ const V = /* @__PURE__ */ S({
     },
     handleRemove(e) {
       e.stopPropagation(), this.$props.removable && (this.handleDispatchFocus && (this.handleDispatchDataItems({
-        type: N.remove,
+        type: j.remove,
         payload: this.$props.value,
         event: e
       }), this.handleDispatchFocus({
-        type: s.reset,
+        type: o.reset,
         payload: this.$props.value,
         event: e
       }), this.handleDispatchSelection({
-        type: d.remove,
+        type: p.remove,
         payload: this.$props.value,
         event: e
       })), this.$emit("remove", {
@@ -174,28 +175,28 @@ const V = /* @__PURE__ */ S({
     },
     handleKeyDown(e) {
       switch (e.keyCode) {
-        case a.left:
+        case s.left:
           this.handleDispatchFocus && this.handleDispatchFocus({
-            type: s.prev,
+            type: o.prev,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.right:
+        case s.right:
           this.handleDispatchFocus && this.handleDispatchFocus({
-            type: s.next,
+            type: o.next,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.enter:
+        case s.enter:
           this.handleDispatchFocus && this.handleDispatchSelection({
-            type: d.toggle,
+            type: p.toggle,
             payload: this.$props.value,
             event: e
           });
           break;
-        case a.delete:
+        case s.delete:
           this.handleRemove(e);
           break;
       }
@@ -207,7 +208,7 @@ const V = /* @__PURE__ */ S({
     handleFocus(e) {
       this.handleDispatchFocus && this.handleDispatchFocus({
         payload: this.$props.value,
-        type: s.current,
+        type: o.current,
         event: e
       }), this.$emit("focus", {
         target: this.target,
@@ -223,84 +224,88 @@ const V = /* @__PURE__ */ S({
   },
   setup() {
     return {
-      chipRef: I(null)
+      chipRef: F(null)
     };
   },
   render() {
     const {
       size: e,
-      rounded: r,
-      themeColor: h,
-      fillMode: p,
+      rounded: l,
+      themeColor: u,
+      fillMode: n,
+      look: a,
       avatar: i,
-      icon: u,
-      svgIcon: m,
-      selectedIcon: f,
-      selectedSvgIcon: v,
-      removeIcon: g,
-      removeSvgIcon: k
-    } = this.$props, $ = F.call(this, i, C.call(this)), y = i ? t("div", {
-      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${n.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
+      icon: m,
+      svgIcon: f,
+      selectedIcon: v,
+      selectedSvgIcon: g,
+      removeIcon: k,
+      removeSvgIcon: $
+    } = this.$props, y = C.call(this, i, w.call(this)), b = i ? t("div", {
+      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${c.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
       style: i.style
     }, [t("span", {
       class: "k-avatar-image"
     }, [t("img", {
       src: i.imageUrl,
       alt: i.imageAlt
-    }, null)])]) : null, b = w.call(this, {
-      h: D,
-      template: $
+    }, null)])]) : null, S = x.call(this, {
+      h: I,
+      template: y
     });
     return t("div", {
       role: this.$props.role,
       id: this.$props.value,
-      ref: O(this, "chip"),
+      ref: R(this, "chip"),
       dir: this.currentDir,
-      tabindex: M(this.$props.tabIndex, this.$props.disabled, void 0),
-      class: x("k-chip", {
+      tabindex: O(this.$props.tabIndex, this.$props.disabled, void 0),
+      class: M("k-chip", {
         "k-rtl": this.currentDir === "rtl",
         "k-disabled": this.$props.disabled,
         "k-selected": this.currentSelected,
         "k-focus": this.computedFocused(),
-        [`k-chip-${n.sizeMap[e] || e}`]: e,
-        [`k-rounded-${n.roundedMap[r] || r}`]: r,
-        [`k-chip-${h}`]: h,
-        [`k-chip-${p}`]: p
+        [`k-chip-${c.sizeMap[e] || e}`]: e,
+        [`k-rounded-${c.roundedMap[l] || l}`]: l,
+        [`k-chip-${n}`]: n,
+        [`k-chip-${u}`]: u,
+        "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,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown,
       onMousedown: this.handleMouseDown
-    }, [this.currentSelected && (f || v) && t(l, {
-      name: c(f),
-      icon: v,
+    }, [this.currentSelected && (v || g) && t(d, {
+      name: h(v),
+      icon: g,
       size: "small"
-    }, null), (u || m) && t(l, {
-      name: c(u),
-      icon: m,
-      size: "small"
-    }, null), i ? i.imageUrl ? y : b : null, t("span", {
+    }, null), (m || f) && t(d, {
+      name: h(m),
+      icon: f,
+      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"
     }, [t("span", {
       class: "k-chip-action k-chip-remove-action"
-    }, [t(l, {
-      name: c(g),
-      icon: k,
+    }, [t(d, {
+      name: h(k),
+      icon: $,
       size: "small",
       onClick: this.handleRemove
     }, null)])])]);
   }
 });
 export {
-  V as Chip
+  q as Chip
 };

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>;
@@ -143,9 +145,9 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
     onItemclick?: (event: FloatingActionButtonItemEvent) => any;
 }>, {
     disabled: boolean;
+    positionMode: FloatingActionButtonPositionMode;
     opened: boolean;
     align: FloatingActionButtonAlign;
-    positionMode: FloatingActionButtonPositionMode;
     popupSettings: import('..').FloatingActionButtonPopupSettings;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { FloatingActionButton };

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"),d=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&&d.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){d.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,t)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){const t=this.computedOpened;this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),t&&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(a,l){return n.createVNode(I.FloatingActionButtonItem,{key:l,index:l,id:`${this.listId}-${l}`,disabled:t||a.disabled,focused:this.focusedIndex===l,dataItem:a,item:k,class:s.classNames(a.className,d.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:a=>{this.kendoAnchorRef=a},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||d.getAnchorAlign(e,this.isRtl),popupAlign:c.popupAlign||d.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,9 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 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 B } from "./FloatingActionButtonItem.mjs";
-import { packageMetadata as E } from "../package-metadata.mjs";
+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";
 import { Popup as j } from "@progress/kendo-vue-popup";
 const G = /* @__PURE__ */ w({
@@ -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(E), 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: {
@@ -135,7 +132,7 @@ const G = /* @__PURE__ */ w({
           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, t);
+          this.currentOpened = t, this.currentFocused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, !this.computedOpened);
         }
     },
     handleFocus(e) {
@@ -144,10 +141,9 @@ const G = /* @__PURE__ */ w({
       });
     },
     handleBlur(e) {
-      const t = this.computedOpened;
       this.currentFocused = !1, this.currentOpened = !1, this.focusedIndex = -1, this.$emit("blur", {
         event: e
-      }), t && this.dispatchPopupEvent(e, !1);
+      }), this.computedOpened && this.dispatchPopupEvent(e, !1);
     },
     handleMouseDown(e) {
       e.preventDefault(), this.$emit("mousedown", e);
@@ -208,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) {
-        return o(B, {
-          key: u,
-          index: u,
-          id: `${this.listId}-${u}`,
-          disabled: t || d.disabled,
-          focused: this.focusedIndex === u,
-          dataItem: d,
+    } = 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: 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,
@@ -257,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: {
@@ -278,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"
         }),

package/ListButton/ButtonItem.d.ts

@@ -19,6 +19,8 @@ export interface ButtonItemProps {
     id?: string;
     textField?: string;
     role?: string;
+    first?: boolean;
+    last?: boolean;
 }
 /**
  * @hidden
@@ -32,6 +34,8 @@ declare const ButtonItem: import('vue').DefineComponent<import('vue').ExtractPro
     id: PropType<string>;
     textField: PropType<string>;
     role: PropType<string>;
+    first: PropType<boolean>;
+    last: PropType<boolean>;
 }>, {}, {}, {
     wrapperClass(): object;
     innerClass(): object;
@@ -50,6 +54,8 @@ declare const ButtonItem: import('vue').DefineComponent<import('vue').ExtractPro
     id: PropType<string>;
     textField: PropType<string>;
     role: PropType<string>;
+    first: PropType<boolean>;
+    last: PropType<boolean>;
 }>> & Readonly<{
     onClick?: (event: any, index: number) => any;
     onDown?: (event: any, index: number) => any;

package/ListButton/ButtonItem.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 t=require("vue"),o=require("@progress/kendo-vue-common"),l=t.defineComponent({name:"KendoButtonItem",emits:{click:(e,n)=>!0,down:(e,n)=>!0},props:{focused:Boolean,index:Number,item:Object,render:[String,Object,Function],dataItem:[String,Object],id:String,textField:String,role:String},computed:{wrapperClass(){return{"k-item":!0,"k-focus":this.$props.focused}},innerClass(){const{dataItem:e}=this.$props;return{"k-link k-menu-link":!0,"k-selected":e.selected,"k-disabled":e.disabled}}},methods:{onClick(e){this.$emit("click",e,this.$props.index)},onDown(e){this.$emit("down",e,this.$props.index)}},render(){const{dataItem:e,id:n,render:r}=this.$props,d=function(){const{textField:i,index:a}=this.$props,s=e.text!==void 0?e.text:i?e[i]:e,c=t.createVNode("span",{tabindex:-1,class:this.innerClass,key:"icon"},[e.icon||e.svgIcon?t.createVNode(o.Icon,{name:e.icon,icon:e.svgIcon,class:e.iconClass},null):e.iconClass&&t.createVNode("span",{class:e.iconClass,role:"presentation"},null),e.imageUrl&&t.createVNode("img",{class:"k-icon",alt:"",src:e.imageUrl,role:"presentation",key:"image"},null),s&&t.createVNode("span",{class:"k-menu-link-text"},[s])]);return o.getTemplate.call(this,{h:t.h,template:this.$props.dataItem.render||r,defaultRendering:c,additionalProps:{item:e,itemIndex:a,innerClass:this.innerClass,focused:this.focused}})};return t.createVNode("li",{id:n,class:this.wrapperClass,onClick:this.onClick,onMousedown:this.onDown,onPointerdown:this.onDown,role:"menuitem","aria-disabled":e.disabled||void 0},[d.call(this)])}});exports.ButtonItem=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),c=t.defineComponent({name:"KendoButtonItem",emits:{click:(e,n)=>!0,down:(e,n)=>!0},props:{focused:Boolean,index:Number,item:Object,render:[String,Object,Function],dataItem:[String,Object],id:String,textField:String,role:String,first:Boolean,last:Boolean},computed:{wrapperClass(){return{"k-item":!0,"k-menu-item":!0,"k-first":this.$props.first,"k-last":this.$props.last,"k-focus":this.$props.focused}},innerClass(){const{dataItem:e}=this.$props;return{"k-link k-menu-link":!0,"k-selected":e.selected,"k-disabled":e.disabled}}},methods:{onClick(e){this.$emit("click",e,this.$props.index)},onDown(e){this.$emit("down",e,this.$props.index)}},render(){const{dataItem:e,id:n,render:r}=this.$props,a=function(){const{textField:s,index:l}=this.$props,i=e.text!==void 0?e.text:s?e[s]:e,d=t.createVNode("span",{tabindex:-1,class:this.innerClass,key:"icon"},[e.icon||e.svgIcon?t.createVNode(o.Icon,{name:e.icon,icon:e.svgIcon,class:e.iconClass},null):e.iconClass&&t.createVNode("span",{class:e.iconClass,role:"presentation"},null),e.imageUrl&&t.createVNode("img",{class:"k-icon",alt:"",src:e.imageUrl,role:"presentation",key:"image"},null),i&&t.createVNode("span",{class:"k-menu-link-text"},[i])]);return o.getTemplate.call(this,{h:t.h,template:this.$props.dataItem.render||r,defaultRendering:d,additionalProps:{item:e,itemIndex:l,innerClass:this.innerClass,focused:this.focused}})};return t.createVNode("li",{id:n,class:this.wrapperClass,onClick:this.onClick,onMousedown:this.onDown,onPointerdown:this.onDown,role:"menuitem","aria-disabled":e.disabled||void 0},[a.call(this)])}});exports.ButtonItem=c;