@volverjs/ui-vue 0.0.9-beta.2 → 0.0.9-beta.21

package/dist/components/VvDropdown/index.d.ts

@@ -30,9 +30,9 @@ export declare const VvDropdownProps: {
         validator: (value: never) => boolean;
     };
     strategy: {
-        type: PropType<"fixed" | "absolute">;
-        default: string;
-        validator: (value: "fixed" | "absolute") => boolean;
+        type: PropType<"absolute" | "fixed">;
+        default: undefined;
+        validator: (value: import("../../constants").Strategy) => boolean;
     };
     transitionName: {
         type: StringConstructor;
@@ -42,33 +42,94 @@ export declare const VvDropdownProps: {
         default: number;
     };
     shift: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & {
-            rootBoundary: import("@floating-ui/core").RootBoundary;
-            elementContext: import("@floating-ui/core").ElementContext;
-            altBoundary: boolean;
-            padding: import("@floating-ui/core").Padding;
-            boundary: import("@floating-ui/dom").Boundary;
+        type: PropType<boolean | {
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            limiter?: {
+                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/core").Coords;
+                options?: any;
+            } | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            limiter?: {
+                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/core").Coords;
+                options?: any;
+            } | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
         }> | undefined>;
         default: boolean;
     };
     flip: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & {
-            rootBoundary: import("@floating-ui/core").RootBoundary;
-            elementContext: import("@floating-ui/core").ElementContext;
-            altBoundary: boolean;
-            padding: import("@floating-ui/core").Padding;
-            boundary: import("@floating-ui/dom").Boundary;
+        type: PropType<boolean | {
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            fallbackPlacements?: import("@floating-ui/core").Placement[] | undefined;
+            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
+            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
+            flipAlignment?: boolean | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            fallbackPlacements?: import("@floating-ui/core").Placement[] | undefined;
+            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
+            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
+            flipAlignment?: boolean | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
         }> | undefined>;
         default: boolean;
     };
     size: {
-        type: PropType<boolean | Partial<{
-            apply: (args: {
+        type: PropType<boolean | {
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+            apply?: ((args: {
                 x: number;
                 y: number;
+                initialPlacement: import("@floating-ui/core").Placement;
                 placement: import("@floating-ui/core").Placement;
                 strategy: import("@floating-ui/core").Strategy;
+                middlewareData: import("@floating-ui/core").MiddlewareData;
+                rects: import("@floating-ui/core").ElementRects;
+                platform: import("@floating-ui/core").Platform;
+                elements: import("@floating-ui/dom").Elements;
+            } & {
+                availableWidth: number;
+                availableHeight: number;
+            }) => void | Promise<void>) | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+            apply?: ((args: {
+                x: number;
+                y: number;
                 initialPlacement: import("@floating-ui/core").Placement;
+                placement: import("@floating-ui/core").Placement;
+                strategy: import("@floating-ui/core").Strategy;
                 middlewareData: import("@floating-ui/core").MiddlewareData;
                 rects: import("@floating-ui/core").ElementRects;
                 platform: import("@floating-ui/core").Platform;
@@ -76,25 +137,33 @@ export declare const VvDropdownProps: {
             } & {
                 availableWidth: number;
                 availableHeight: number;
-            }) => void | Promise<void>;
-        } & {
-            rootBoundary: import("@floating-ui/core").RootBoundary;
-            elementContext: import("@floating-ui/core").ElementContext;
-            altBoundary: boolean;
-            padding: import("@floating-ui/core").Padding;
-            boundary: import("@floating-ui/dom").Boundary;
+            }) => void | Promise<void>) | undefined;
         }> | undefined>;
         default: () => {
             padding: number;
         };
     };
     autoPlacement: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
-            rootBoundary: import("@floating-ui/core").RootBoundary;
-            elementContext: import("@floating-ui/core").ElementContext;
-            altBoundary: boolean;
-            padding: import("@floating-ui/core").Padding;
-            boundary: import("@floating-ui/dom").Boundary;
+        type: PropType<boolean | {
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            alignment?: import("@floating-ui/core").Alignment | null | undefined;
+            autoAlignment?: boolean | undefined;
+            allowedPlacements?: import("@floating-ui/core").Placement[] | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/core").Padding | undefined;
+            alignment?: import("@floating-ui/core").Alignment | null | undefined;
+            autoAlignment?: boolean | undefined;
+            allowedPlacements?: import("@floating-ui/core").Placement[] | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
         }> | undefined>;
         default: boolean;
     };

package/dist/components/VvDropdownAction/VvDropdownAction.es.js

@@ -1,6 +1,11 @@
 import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -139,19 +144,15 @@ const ModifiersProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -241,6 +242,13 @@ const ActionProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 };
 const VvActionEvents = ["click", "mouseover", "mouseleave"];
@@ -302,7 +310,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const hasProps = computed(() => {
       const toReturn = {
         ...dropdownAria == null ? void 0 : dropdownAria.value,
-        "aria-pressed": pressed.value ? true : void 0,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
         role: role == null ? void 0 : role.value
       };
       switch (hasTag.value) {

package/dist/components/VvDropdownAction/VvDropdownAction.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownAction=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),a=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(a||{}),i=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(i||{});const s=Symbol.for("volver"),d=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),f=Symbol.for("dropdownAction"),p={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(i).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:Boolean},m={active:Boolean},b={pressed:Boolean},y={label:[String,Number]},g={modifiers:[String,Array]};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const k={...v,...y,...b,...m,...p,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},h=k;const x=e.defineComponent({name:"VvAction",props:h,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=e.inject(s),a=e.ref(null);o({$el:a});const{reference:i,bus:c,aria:p,expanded:v}=e.inject(d,{});e.watch((()=>a.value),(e=>{i&&(i.value=e)}));const m=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(f,{}),y=e.computed((()=>{switch(!0){case n.disabled:return u.button;case void 0!==n.to:return(null==l?void 0:l.nuxt)?u.nuxtLink:u.routerLink;case void 0!==n.href:return u.a;default:return u.button}})),g=e.computed((()=>{const e={...null==p?void 0:p.value,"aria-pressed":!!m.value||void 0,role:null==b?void 0:b.value};switch(y.value){case u.a:return{...e,href:n.href,target:n.target,rel:n.rel};case u.routerLink:case u.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),k=e=>{n.disabled?e.preventDefault():(null==c||c.emit("click",e),r("click",e))},h=e=>{null==c||c.emit("mouseover",e),r("mouseover",e)},x=e=>{null==c||c.emit("mouseleave",e),r("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.mergeProps(e.unref(g),{ref_key:"element",ref:a,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:k,onMouseoverPassive:h,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const B=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:r,expanded:n}=e.inject(c,{}),l=e.ref(null);!function({expanded:t}){e.provide(f,{role:e.ref(a.menuitem),expanded:t})}({expanded:n});const u=o.useElementHover(l),{focused:i}=o.useFocus(l),{focused:s}=o.useFocusWithin(l);return e.watch(u,(e=>{e&&(i.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(i)||e.unref(s)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...k,...g},setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-dropdown-action",r);return(t,o)=>(e.openBlock(),e.createBlock(B,null,{default:e.withCtx((()=>[e.createVNode(x,e.mergeProps({disabled:t.disabled,pressed:t.pressed,active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{class:e.unref(n)}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"])])),_:3}))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownAction=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{}),u=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(u||{}),i=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(i||{});const s=Symbol.for("volver"),d=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),f=Symbol.for("dropdownAction"),p={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(i).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:Boolean},m={active:Boolean},b={pressed:Boolean},y={label:[String,Number]},g={modifiers:[String,Array]};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const k={...v,...y,...b,...m,...p,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)},ariaLabel:{type:String,default:void 0}},h=k;const x=e.defineComponent({name:"VvAction",props:h,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=e.inject(s),u=e.ref(null);o({$el:u});const{reference:i,bus:c,aria:p,expanded:v}=e.inject(d,{});e.watch((()=>u.value),(e=>{i&&(i.value=e)}));const m=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(f,{}),y=e.computed((()=>{switch(!0){case n.disabled:return a.button;case void 0!==n.to:return(null==l?void 0:l.nuxt)?a.nuxtLink:a.routerLink;case void 0!==n.href:return a.a;default:return a.button}})),g=e.computed((()=>{const e={...null==p?void 0:p.value,ariaPressed:!!m.value||void 0,ariaLabel:n.ariaLabel,role:null==b?void 0:b.value};switch(y.value){case a.a:return{...e,href:n.href,target:n.target,rel:n.rel};case a.routerLink:case a.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),k=e=>{n.disabled?e.preventDefault():(null==c||c.emit("click",e),r("click",e))},h=e=>{null==c||c.emit("mouseover",e),r("mouseover",e)},x=e=>{null==c||c.emit("mouseleave",e),r("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.mergeProps(e.unref(g),{ref_key:"element",ref:u,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:k,onMouseoverPassive:h,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const B=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:r,expanded:n}=e.inject(c,{}),l=e.ref(null);!function({expanded:t}){e.provide(f,{role:e.ref(u.menuitem),expanded:t})}({expanded:n});const a=o.useElementHover(l),{focused:i}=o.useFocus(l),{focused:s}=o.useFocusWithin(l);return e.watch(a,(e=>{e&&(i.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(i)||e.unref(s)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...k,...g},setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-dropdown-action",r);return(t,o)=>(e.openBlock(),e.createBlock(B,null,{default:e.withCtx((()=>[e.createVNode(x,e.mergeProps({disabled:t.disabled,pressed:t.pressed,active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{class:e.unref(n)}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"])])),_:3}))}})}));

package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js

@@ -1,4 +1,9 @@
 import { defineComponent, openBlock, createElementBlock, toDisplayString } from "vue";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -108,19 +113,15 @@ const LabelProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -210,6 +211,13 @@ const LabelProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 });
 const _hoisted_1 = {

package/dist/components/VvDropdownOption/VvDropdownOption.es.js

@@ -1,6 +1,11 @@
 import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -179,19 +184,15 @@ const UnselectableProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -281,6 +282,13 @@ const UnselectableProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 });
 function useModifiers(prefix, modifiers, others) {