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

package/dist/components/index.es.js

@@ -1,11 +1,16 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelDynamic, vModelRadio } from "vue";
+import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
 import { nanoid } from "nanoid";
-import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import mitt from "mitt";
-import { Mask } from "maska";
+import { useIMask } from "vue-imask";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -79,6 +84,9 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
+const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+  "alertGroup"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -269,19 +277,15 @@ const DropdownProps = {
   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
@@ -484,6 +488,13 @@ const ActionProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 };
 function equals(obj1, obj2, field) {
@@ -723,14 +734,14 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const _hoisted_1$f = ["id", "open"];
-const _hoisted_2$c = ["aria-controls", "aria-expanded"];
-const _hoisted_3$6 = ["aria-hidden"];
-const __default__$m = {
+const _hoisted_1$i = ["id", "open"];
+const _hoisted_2$d = ["aria-controls", "aria-expanded"];
+const _hoisted_3$7 = ["aria-hidden"];
+const __default__$n = {
   name: "VvAccordion"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
   setup(__props, { emit }) {
@@ -812,7 +823,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(toDisplayString(unref(title)), 1)
           ])
-        ], 8, _hoisted_2$c),
+        ], 8, _hoisted_2$d),
         createElementVNode("div", {
           "aria-hidden": !unref(isOpen),
           class: "vv-accordion__content"
@@ -820,8 +831,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(toDisplayString(unref(content)), 1)
           ])
-        ], 8, _hoisted_3$6)
-      ], 10, _hoisted_1$f);
+        ], 8, _hoisted_3$7)
+      ], 10, _hoisted_1$i);
     };
   }
 });
@@ -874,11 +885,11 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$l = {
+const __default__$m = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
   setup(__props, { emit }) {
@@ -945,7 +956,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$m, mergeProps({
+            return openBlock(), createBlock(_sfc_main$q, mergeProps({
               key: item.title
             }, {
               name: item.name,
@@ -966,88 +977,128 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvBadgeProps = {
-  ...ModifiersProps,
-  value: [String, Number]
-};
-const __default__$k = {
-  name: "VvBadge"
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$l = {
+  name: "VvAction"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
-  props: VvBadgeProps,
-  setup(__props) {
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-badge", modifiers);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "status"
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
-        ])
-      ], 2);
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return ActionTag.button;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        default:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
     };
-  }
-});
-const VvBreadcrumbProps = {
-  ...ModifiersProps,
-  routes: Array
-};
-const _hoisted_1$e = { class: "vv-breadcrumb__list" };
-const _hoisted_2$b = ["content"];
-const __default__$j = {
-  name: "VvBreadcrumb"
-};
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
-  props: VvBreadcrumbProps,
-  setup(__props) {
-    const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(unref(bemCssClasses)),
-        "aria-label": "breadcrumbs"
-      }, [
-        createElementVNode("ol", _hoisted_1$e, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
-            var _a, _b, _c, _d;
-            return openBlock(), createElementBlock("li", {
-              key: `${route.label}-${index}`,
-              class: normalizeClass({
-                "vv-breadcrumb__item": index < Number((_a = _ctx.routes) == null ? void 0 : _a.length) - 1,
-                "vv-breadcrumb__item-active": index === Number((_b = _ctx.routes) == null ? void 0 : _b.length) - 1
-              }),
-              itemprop: "itemListElement",
-              itemtype: "https://schema.org/ListItem",
-              itemscope: ""
-            }, [
-              (openBlock(), createBlock(resolveDynamicComponent(route.to ? "router-link" : route.href ? "a" : "span"), mergeProps(route, {
-                class: {
-                  "vv-breadcrumb__link": index < Number((_c = _ctx.routes) == null ? void 0 : _c.length) - 1
-                },
-                "aria-current": index === Number((_d = _ctx.routes) == null ? void 0 : _d.length) - 1 ? "page" : void 0,
-                itemprop: "item"
-              }), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
-                    createTextVNode(toDisplayString(route.label), 1)
-                  ])
-                ]),
-                _: 2
-              }, 1040, ["class", "aria-current"])),
-              createElementVNode("meta", {
-                itemprop: "position",
-                content: `${index + 1}`
-              }, null, 8, _hoisted_2$b)
-            ], 2);
-          }), 128))
-        ])
-      ], 2);
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
     };
   }
 });
@@ -1145,14 +1196,11 @@ const VvIconProps = {
     type: [String, Array]
   }
 };
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-const __default__$i = {
+const __default__$k = {
   name: "VvIcon"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -1244,124 +1292,307 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvActionEvents = ["click", "mouseover", "mouseleave"];
-const VvActionProps = ActionProps;
-function useInjectedDropdownTrigger() {
-  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
-}
-function useInjectedDropdownItem() {
-  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
-}
-function useInjectedDropdownAction() {
-  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-const __default__$h = {
-  name: "VvAction"
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const VvAlertProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...IconProps,
+  /**
+   * The alert is dismissable
+   * @default false
+   * @type boolean
+   */
+  dismissable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * The alert auto close after the specified time in milliseconds
+   * @default 0
+   * @type number
+   */
+  autoClose: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * The alert close label
+   * @default 'Close'
+   * @type string
+   */
+  closeLabel: {
+    type: String,
+    default: "Close"
+  },
+  /**
+   * The alert title
+   * @default ''
+   * @type string
+   */
+  title: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * The alert content
+   * @default ''
+   * @type string
+   */
+  content: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * The alert footer
+   * @default ''
+   * @type string
+   */
+  footer: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * The alert role
+   * @default 'alert'
+   * @type string
+   * @values 'alert', 'alertdialog'
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
+   */
+  role: {
+    type: String,
+    default: "alert"
+  }
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
-  props: VvActionProps,
-  emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
-    const props = __props;
-    const volver = useVolver();
-    const element = ref(null);
-    __expose({ $el: element });
-    const {
-      reference: dropdownTriggerReference,
-      bus: dropdownEventBus,
-      aria: dropdownAria,
-      expanded: dropdownExpanded
-    } = useInjectedDropdownTrigger();
-    watch(
-      () => element.value,
-      (newValue) => {
-        if (dropdownTriggerReference) {
-          dropdownTriggerReference.value = newValue;
-        }
-      }
-    );
-    const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
-    });
-    const { role } = useInjectedDropdownAction();
-    const hasTag = computed(() => {
-      switch (true) {
-        case props.disabled:
-          return ActionTag.button;
-        case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
-        case props.href !== void 0:
-          return ActionTag.a;
-        default:
-          return ActionTag.button;
-      }
-    });
-    const hasProps = computed(() => {
-      const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
-        "aria-pressed": pressed.value ? true : void 0,
-        role: role == null ? void 0 : role.value
-      };
-      switch (hasTag.value) {
-        case ActionTag.a:
-          return {
-            ...toReturn,
-            href: props.href,
-            target: props.target,
-            rel: props.rel
-          };
-        case ActionTag.routerLink:
-        case ActionTag.nuxtLink:
-          return {
-            ...toReturn,
-            to: props.to,
-            target: props.target
-          };
-        default:
-          return {
-            ...toReturn,
-            type: props.type,
-            disabled: props.disabled
-          };
-      }
-    });
-    const onClick = (e) => {
-      if (props.disabled) {
-        e.preventDefault();
+const VvAlertEvents = ["close"];
+const useVvAlert = (props, emit) => {
+  const { bus } = useInjectedAlertGroup();
+  const hasId = useUniqueId(computed(() => props.id));
+  const hasTitleId = computed(() => `${hasId.value}-title`);
+  const hasIcon = computed(
+    () => typeof props.icon === "string" ? { name: props.icon } : props.icon
+  );
+  const hasClass = useModifiers(
+    "vv-alert",
+    computed(() => props.modifiers),
+    computed(() => ({
+      dismissable: props.autoClose > 0 || props.dismissable,
+      "auto-close": props.autoClose > 0,
+      hover: isMouseover.value
+    }))
+  );
+  const hasStyle = computed(() => ({
+    "--alert-duration": `${props.autoClose}ms`
+  }));
+  const close = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    emit("close", hasId.value);
+    bus == null ? void 0 : bus.emit("close", hasId.value);
+  };
+  let timeout;
+  watch(
+    () => props.autoClose,
+    (value) => {
+      if (value > 0) {
+        timeout = setTimeout(close, value);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-      emit("click", e);
-    };
-    const onMouseover = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-      emit("mouseover", e);
-    };
-    const onMouseleave = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-      emit("mouseleave", e);
-    };
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const isMouseover = ref(false);
+  const onMouseover = withModifiers(() => {
+    isMouseover.value = true;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  }, ["passive"]);
+  const onMouseleave = withModifiers(() => {
+    isMouseover.value = false;
+    if (props.autoClose > 0) {
+      timeout = setTimeout(close, props.autoClose);
+    }
+  }, ["passive"]);
+  return {
+    close,
+    hasIcon,
+    hasTitleId,
+    hasProps: computed(() => ({
+      onMouseover,
+      onMouseleave,
+      class: hasClass.value,
+      style: hasStyle.value,
+      role: props.role,
+      "aria-labelledby": hasTitleId.value
+    }))
+  };
+};
+const _hoisted_1$h = {
+  key: 0,
+  class: "vv-alert__header"
+};
+const _hoisted_2$c = ["id"];
+const _hoisted_3$6 = ["aria-label"];
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_5$4 = [
+  _hoisted_4$5
+];
+const _hoisted_6$4 = {
+  key: 1,
+  class: "vv-alert__content"
+};
+const _hoisted_7$4 = {
+  key: 2,
+  class: "vv-alert__footer"
+};
+const __default__$j = {
+  name: "VvAlert"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
+  props: VvAlertProps,
+  emits: VvAlertEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
+    __expose({ close });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
-        ref_key: "element",
-        ref: element,
-        class: {
-          active: _ctx.active,
-          pressed: unref(pressed),
-          disabled: _ctx.disabled
-        },
-        onClickPassive: onClick,
-        onMouseoverPassive: onMouseover,
-        onMouseleavePassive: onMouseleave
-      }), {
-        default: withCtx(() => [
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
+        _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
+          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            renderSlot(_ctx.$slots, "title::before"),
+            _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
+              key: 0,
+              id: unref(hasTitleId),
+              class: "vv-alert__title"
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(_ctx.title), 1)
+              ])
+            ], 8, _hoisted_2$c)) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "title::after")
+          ]),
+          renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
+            _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: "vv-alert__close",
+              type: "button",
+              "aria-label": _ctx.closeLabel,
+              onClick: _cache[0] || (_cache[0] = withModifiers(
+                //@ts-ignore
+                (...args) => unref(close) && unref(close)(...args),
+                ["stop"]
+              ))
+            }, _hoisted_5$4, 8, _hoisted_3$6)) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.label), 1)
+            createTextVNode(toDisplayString(_ctx.content), 1)
           ])
-        ]),
-        _: 3
-      }, 16, ["class"]);
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
+          renderSlot(_ctx.$slots, "footer", {}, () => [
+            createTextVNode(toDisplayString(_ctx.footer), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const VvBadgeProps = {
+  ...ModifiersProps,
+  value: [String, Number]
+};
+const __default__$i = {
+  name: "VvBadge"
+};
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
+  props: VvBadgeProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-badge", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "status"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
+const VvBreadcrumbProps = {
+  ...ModifiersProps,
+  routes: Array
+};
+const _hoisted_1$g = { class: "vv-breadcrumb__list" };
+const _hoisted_2$b = ["content"];
+const __default__$h = {
+  name: "VvBreadcrumb"
+};
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
+  props: VvBreadcrumbProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(unref(bemCssClasses)),
+        "aria-label": "breadcrumbs"
+      }, [
+        createElementVNode("ol", _hoisted_1$g, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
+            var _a, _b, _c, _d;
+            return openBlock(), createElementBlock("li", {
+              key: `${route.label}-${index}`,
+              class: normalizeClass({
+                "vv-breadcrumb__item": index < Number((_a = _ctx.routes) == null ? void 0 : _a.length) - 1,
+                "vv-breadcrumb__item-active": index === Number((_b = _ctx.routes) == null ? void 0 : _b.length) - 1
+              }),
+              itemprop: "itemListElement",
+              itemtype: "https://schema.org/ListItem",
+              itemscope: ""
+            }, [
+              (openBlock(), createBlock(resolveDynamicComponent(route.to ? "router-link" : route.href ? "a" : "span"), mergeProps(route, {
+                class: {
+                  "vv-breadcrumb__link": index < Number((_c = _ctx.routes) == null ? void 0 : _c.length) - 1
+                },
+                "aria-current": index === Number((_d = _ctx.routes) == null ? void 0 : _d.length) - 1 ? "page" : void 0,
+                itemprop: "item"
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
+                    createTextVNode(toDisplayString(route.label), 1)
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class", "aria-current"])),
+              createElementVNode("meta", {
+                itemprop: "position",
+                content: `${index + 1}`
+              }, null, 8, _hoisted_2$b)
+            ], 2);
+          }), 128))
+        ])
+      ], 2);
     };
   }
 });
@@ -1469,8 +1700,7 @@ function useGroupProps$2(props, emit) {
     label
   };
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
-const _hoisted_1$d = {
+const _hoisted_1$f = {
   key: 1,
   class: "vv-button__label"
 };
@@ -1481,7 +1711,7 @@ const _hoisted_2$a = {
 const __default__$g = {
   name: "VvButton"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...__default__$g,
   props: VvButtonProps,
   emits: VvButtonEvents,
@@ -1560,7 +1790,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, mergeProps({
+      return openBlock(), createBlock(_sfc_main$o, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1568,7 +1798,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         to: _ctx.to,
         href: _ctx.href,
         target: _ctx.target,
-        rel: _ctx.rel
+        rel: _ctx.rel,
+        ariaLabel: _ctx.ariaLabel
       }, {
         id: unref(hasId),
         ref_key: "element",
@@ -1579,15 +1810,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$i, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$n, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
               }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$d, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
+              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
             ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                 key: 0,
                 class: "vv-button__icon"
               }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
@@ -1627,7 +1858,7 @@ const VvButtonGroupEvents = ["update:modelValue"];
 const __default__$f = {
   name: "VvButtonGroup"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...__default__$f,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
@@ -1686,7 +1917,7 @@ const VvCardProps = {
   ...ModifiersProps,
   title: String
 };
-const _hoisted_1$c = {
+const _hoisted_1$e = {
   key: 0,
   class: "vv-card__header"
 };
@@ -1701,7 +1932,7 @@ const _hoisted_3$5 = {
 const __default__$e = {
   name: "VvCard"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...__default__$e,
   props: VvCardProps,
   setup(__props) {
@@ -1712,7 +1943,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("article", {
         class: normalizeClass(unref(bemCssClasses))
       }, [
-        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$c, [
+        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
@@ -1784,19 +2015,27 @@ function joinLines(items) {
   }
   return items;
 }
-function HintSlotFactory(props, slots) {
-  const invalidLabel = computed(() => joinLines(props.invalidLabel));
-  const validLabel = computed(() => joinLines(props.validLabel));
-  const loadingLabel = computed(() => props.loadingLabel);
-  const hintLabel = computed(() => props.hintLabel);
+function HintSlotFactory(propsOrRef, slots) {
+  const props = computed(() => {
+    if (isRef(propsOrRef)) {
+      return propsOrRef.value;
+    }
+    return propsOrRef;
+  });
+  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
+  const validLabel = computed(() => joinLines(props.value.validLabel));
+  const loadingLabel = computed(() => props.value.loadingLabel);
+  const hintLabel = computed(() => props.value.hintLabel);
   const hasLoadingLabelOrSlot = computed(
-    () => Boolean(props.loading && (slots.loading || loadingLabel.value))
+    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
   );
   const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
   );
   const hasValidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
   );
   const hasHintLabelOrSlot = computed(
     () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
@@ -1805,10 +2044,10 @@ function HintSlotFactory(props, slots) {
     () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
   );
   const hintSlotScope = computed(() => ({
-    modelValue: props.modelValue,
-    valid: props.valid,
-    invalid: props.invalid,
-    loading: props.loading
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
   }));
   const HintSlot = defineComponent({
     name: "HintSlot",
@@ -1888,18 +2127,76 @@ function HintSlotFactory(props, slots) {
     HintSlot
   };
 }
-const _hoisted_1$b = ["for"];
+function useDefaults(componentName, propsDefinition, props) {
+  const volver = useVolver();
+  const volverComponentDefaults = computed(() => {
+    var _a;
+    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+      return void 0;
+    }
+    return volver.defaults.value[componentName];
+  });
+  return computed(() => {
+    if (volverComponentDefaults.value === void 0) {
+      return props;
+    }
+    const componentDefaults = volverComponentDefaults.value;
+    const simplifiedPropsDefinition = propsDefinition;
+    const simplifiedProps = props;
+    return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+      const propValue = simplifiedProps[key];
+      acc[key] = propValue;
+      if (key in componentDefaults) {
+        if (Array.isArray(simplifiedPropsDefinition[key])) {
+          const typeArray = simplifiedPropsDefinition[key];
+          if (typeArray.length) {
+            const typeFunction = typeArray[0];
+            if (typeFunction === propValue) {
+              acc[key] = componentDefaults[key];
+            }
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "function") {
+          const typeFunction = simplifiedPropsDefinition[key];
+          if (typeFunction() === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "object") {
+          let defaultValue = simplifiedPropsDefinition[key].default;
+          if (typeof defaultValue === "function") {
+            defaultValue = defaultValue();
+          }
+          if (typeof defaultValue === "object") {
+            if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
+              acc[key] = componentDefaults[key];
+            }
+          } else if (defaultValue === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+      }
+      return acc;
+    }, {});
+  });
+}
+const _hoisted_1$d = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$d = {
   name: "VvCheckbox"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...__default__$d,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvCheckbox",
+      VvCheckboxProps,
+      props
+    );
     const {
       id,
       disabled,
@@ -2012,7 +2309,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -2071,7 +2368,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$b);
+      ], 10, _hoisted_1$d);
     };
   }
 });
@@ -2109,18 +2406,23 @@ function useOptions(props) {
     getOptionGrouped
   };
 }
-const _hoisted_1$a = ["textContent"];
+const _hoisted_1$c = ["textContent"];
 const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
 const __default__$c = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...__default__$c,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvCheckboxGroup",
+      VvCheckboxGroupProps,
+      props
+    );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
     useProvideGroupState({
@@ -2151,7 +2453,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -2159,10 +2461,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$a)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$c)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$7, [
           _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$d, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            return openBlock(), createBlock(_sfc_main$g, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
         createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" }, createSlots({ _: 2 }, [
@@ -2221,6 +2523,13 @@ const VvComboboxProps = {
   ...UnselectableProps,
   ...DropdownProps,
   ...LabelProps,
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: "vv-dropdown--mobile-fade-block"
+  },
   /**
    * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
    */
@@ -2252,6 +2561,10 @@ const VvComboboxProps = {
    * Label for deselected option hint
    */
   deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Label close button
+   */
+  closeLabel: { type: String, default: "Close" },
   /**
    * Select input placeholder
    */
@@ -2260,6 +2573,13 @@ const VvComboboxProps = {
    * Use input text to search on options
    */
   searchable: Boolean,
+  /**
+   * Search function to filter options
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
+  },
   /**
    * On searchable select is the input search placeholder
    */
@@ -2406,12 +2726,12 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$9 = ["id", "tabindex", "role", "aria-labelledby"];
+const _hoisted_1$b = ["id", "tabindex", "role", "aria-labelledby"];
 const __default__$b = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: VvDropdownProps,
   emits: [
@@ -2472,7 +2792,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }
       } else if (props.flip) {
         if (typeof props.flip === "boolean") {
-          toReturn.push(flip());
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
         } else {
           toReturn.push(flip(props.flip));
         }
@@ -2524,27 +2844,33 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
       return toReturn;
     });
-    const { x, y, strategy, middlewareData, placement } = useFloating(
+    const { x, y, middlewareData, placement, strategy } = useFloating(
       referenceEl,
       floatingEl,
       {
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: (...args) => {
+          return autoUpdate(...args, {
+            animationFrame: props.strategy === Strategy.fixed
+          });
+        },
         placement: computed(() => props.placement),
         strategy: computed(() => props.strategy),
         middleware
       }
     );
     const dropdownPlacement = computed(() => {
+      var _a;
       if (hasCustomPosition.value) {
         return void 0;
       }
+      const width = props.triggerWidth && referenceEl.value ? `${(_a = referenceEl.value) == null ? void 0 : _a.offsetWidth}px` : void 0;
       return {
         position: strategy.value,
         top: `${y.value ?? 0}px`,
         left: `${x.value ?? 0}px`,
-        maxWidth: maxWidth.value,
+        maxWidth: width ? void 0 : maxWidth.value,
         maxHeight: maxHeight.value,
-        width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+        width
       };
     });
     const side = computed(
@@ -2556,10 +2882,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         return void 0;
       }
       const staticSide = {
-        top: "bottom",
-        right: "left",
-        bottom: "top",
-        left: "right"
+        [Side.top]: Side.bottom,
+        [Side.right]: Side.left,
+        [Side.bottom]: Side.top,
+        [Side.left]: Side.right
       }[side.value];
       return {
         left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
@@ -2615,7 +2941,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (!props.keepOpen) {
+        if (!props.keepOpen && expanded.value) {
           expanded.value = false;
         }
       },
@@ -2653,7 +2979,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
       return [
         ...element.querySelectorAll(
-          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
         )
       ].filter(
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
@@ -2795,7 +3121,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                   role: unref(itemRole)
                 })))
-              ], 16, _hoisted_1$9),
+              ], 16, _hoisted_1$b),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
             ], 6), [
               [vShow, unref(expanded)]
@@ -2810,7 +3136,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
 const __default__$a = {
   name: "VvDropdownItem"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...__default__$a,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
@@ -2835,11 +3161,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["title"];
+const _hoisted_1$a = ["title"];
 const __default__$9 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...__default__$9,
   props: {
     ...DisabledProps,
@@ -2877,7 +3203,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$d, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -2892,14 +3218,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
               createTextVNode(toDisplayString(unref(hintLabel)), 1)
             ])
-          ], 8, _hoisted_1$8)
+          ], 8, _hoisted_1$a)
         ]),
         _: 3
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$9 = {
   class: "vv-dropdown-optgroup",
   role: "presentation",
   tabindex: "-1"
@@ -2907,7 +3233,7 @@ const _hoisted_1$7 = {
 const __default__$8 = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   props: {
     ...LabelProps
@@ -2915,7 +3241,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$7, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock("li", _hoisted_1$9, toDisplayString(props.label), 1);
     };
   }
 });
@@ -3012,13 +3338,13 @@ function useComponentIcon(icon, iconPosition) {
     hasIconAfter
   };
 }
-const _hoisted_1$6 = ["for"];
+const _hoisted_1$8 = ["for"];
 const _hoisted_2$6 = { class: "vv-select__wrapper" };
 const _hoisted_3$4 = {
   key: 0,
   class: "vv-select__input-before"
 };
-const _hoisted_4$3 = { class: "vv-select__inner" };
+const _hoisted_4$4 = { class: "vv-select__inner" };
 const _hoisted_5$3 = ["id"];
 const _hoisted_6$3 = ["disabled", "hidden"];
 const _hoisted_7$3 = ["disabled", "value"];
@@ -3031,20 +3357,25 @@ const _hoisted_10 = {
 const __default__$7 = {
   name: "VvSelect"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...__default__$7,
   props: VvSelectProps,
   emits: VvSelectEmits,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvSelect",
+      VvSelectProps,
+      props
+    );
     const select = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const {
       id,
       modifiers,
@@ -3150,13 +3481,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: unref(hasId)
-        }, toDisplayString(_ctx.label), 9, _hoisted_1$6)) : createCommentVNode("", true),
+        }, toDisplayString(_ctx.label), 9, _hoisted_1$8)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$6, [
           _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$3, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+          createElementVNode("div", _hoisted_4$4, [
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3196,7 +3527,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ], 16, _hoisted_5$3), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3242,63 +3573,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function useDefaults(componentName, propsDefinition, props) {
-  const volver = useVolver();
-  const volverComponentDefaults = computed(() => {
-    var _a;
-    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
-      return void 0;
-    }
-    return volver.defaults.value[componentName];
-  });
-  return computed(() => {
-    if (volverComponentDefaults.value === void 0) {
-      return props;
-    }
-    const componentDefaults = volverComponentDefaults.value;
-    const simplifiedPropsDefinition = propsDefinition;
-    const simplifiedProps = props;
-    return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
-      const propValue = simplifiedProps[key];
-      acc[key] = propValue;
-      if (key in componentDefaults) {
-        if (Array.isArray(simplifiedPropsDefinition[key])) {
-          const typeArray = simplifiedPropsDefinition[key];
-          if (typeArray.length) {
-            const typeFunction = typeArray[0];
-            if (typeFunction === propValue) {
-              acc[key] = componentDefaults[key];
-            }
-          }
-        }
-        if (typeof simplifiedPropsDefinition[key] === "function") {
-          const typeFunction = simplifiedPropsDefinition[key];
-          if (typeFunction() === propValue) {
-            acc[key] = componentDefaults[key];
-          }
-        }
-        if (typeof simplifiedPropsDefinition[key] === "object") {
-          let defaultValue = simplifiedPropsDefinition[key].default;
-          if (typeof defaultValue === "function") {
-            defaultValue = defaultValue();
-          }
-          if (typeof defaultValue === "object") {
-            if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
-              acc[key] = componentDefaults[key];
-            }
-          } else if (defaultValue === propValue) {
-            acc[key] = componentDefaults[key];
-          }
-        }
-      }
-      return acc;
-    }, {});
-  });
-}
-const _hoisted_1$5 = ["id"];
+const _hoisted_1$7 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
 const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
-const _hoisted_4$2 = {
+const _hoisted_4$3 = {
   key: 0,
   class: "vv-select__input-before"
 };
@@ -3316,13 +3594,13 @@ const _hoisted_9 = {
 const __default__$6 = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$b,
-    VvDropdownOption: _sfc_main$9,
-    VvDropdownOptgroup: _sfc_main$8,
-    VvButton: _sfc_main$g
+    VvDropdown: _sfc_main$e,
+    VvDropdownOption: _sfc_main$c,
+    VvDropdownOptgroup: _sfc_main$b,
+    VvButton: _sfc_main$j
   }
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
   props: VvComboboxProps,
   emits: VvComboboxEvents,
@@ -3345,7 +3623,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const inputEl = ref(null);
     const inputSearchEl = ref(null);
     const wrapperEl = ref(null);
@@ -3371,7 +3649,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const searchText = ref("");
     const debouncedSearchText = refDebounced(
       searchText,
-      Number(props.debounceSearch)
+      computed(() => Number(props.debounceSearch))
     );
     watch(
       debouncedSearchText,
@@ -3394,7 +3672,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       expanded.value = false;
     };
     const onAfterExpand = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         if (inputSearchEl.value) {
           inputSearchEl.value.focus({
             preventScroll: true
@@ -3403,7 +3681,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     };
     const onAfterCollapse = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
     };
@@ -3417,14 +3695,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       loading,
       valid,
       invalid,
-      floating,
-      searchable
+      floating
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const localLoading = ref(false);
+    const isLoading = computed(() => localLoading.value || loading.value);
     const dropdownEl = ref();
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -3439,7 +3718,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       modifiers,
       computed(() => ({
         disabled: disabled.value,
-        loading: loading.value,
+        loading: isLoading.value,
         readonly: readonly.value,
         "icon-before": Boolean(hasIconBefore.value),
         "icon-after": Boolean(hasIconAfter.value),
@@ -3457,8 +3736,19 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       getOptionDisabled,
       getOptionGrouped
     } = useOptions(props);
-    const filteredOptions = computed(() => {
+    const filteredOptions = computedAsync(async () => {
       var _a;
+      if (propsDefaults.value.searchFunction) {
+        localLoading.value = true;
+        const toReturn = await Promise.resolve(
+          propsDefaults.value.searchFunction(
+            debouncedSearchText.value,
+            props.options
+          )
+        );
+        localLoading.value = false;
+        return toReturn;
+      }
       return (_a = props.options) == null ? void 0 : _a.filter((option) => {
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
@@ -3476,12 +3766,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       } else if (props.modelValue) {
         selectedValues = [props.modelValue];
       }
-      const options = props.options.reduce((acc, value) => {
-        if (isGroup(value)) {
-          return [...acc, ...getOptionGrouped(value)];
-        }
-        return [...acc, value];
-      }, []);
+      const options = props.options.reduce(
+        (acc, value) => {
+          if (isGroup(value)) {
+            return [...acc, ...getOptionGrouped(value)];
+          }
+          return [...acc, value];
+        },
+        []
+      );
       return options.filter((option) => {
         if (isGroup(option)) {
           return getOptionGrouped(option).some(
@@ -3535,7 +3828,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       invalid: invalid.value,
       invalidLabel: propsDefaults.value.invalidLabel,
       hintLabel: propsDefaults.value.hintLabel,
-      loading: loading.value,
+      loading: isLoading.value,
       loadingLabel: propsDefaults.value.loadingLabel,
       disabled: disabled.value,
       readonly: readonly.value,
@@ -3563,7 +3856,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       flip: propsDefaults.value.flip,
       autoPlacement: propsDefaults.value.autoPlacement,
       arrow: propsDefaults.value.arrow,
-      autofocusFirst: searchable.value ? false : propsDefaults.value.autofocusFirst,
+      autofocusFirst: propsDefaults.value.searchable ? true : propsDefaults.value.autofocusFirst,
       triggerWidth: propsDefaults.value.triggerWidth,
       modifiers: propsDefaults.value.dropdownModifiers
     }));
@@ -3595,14 +3888,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           id: unref(hasLabelId),
-          for: unref(searchable) ? unref(hasSearchId) : void 0
+          for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
         }, toDisplayString(_ctx.label), 9, _hoisted_2$5)) : createCommentVNode("", true),
         createElementVNode("div", {
           ref_key: "wrapperEl",
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$b, mergeProps({
+          createVNode(_sfc_main$e, mergeProps({
             ref_key: "dropdownEl",
             ref: dropdownEl,
             modelValue: unref(expanded),
@@ -3613,11 +3906,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             onAfterCollapse
           }), createSlots({
             default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3637,7 +3930,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
                     unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                       !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$k, {
+                        return openBlock(), createBlock(_sfc_main$l, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
                           class: "vv-select__badge"
@@ -3647,9 +3940,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                             _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
                               key: 0,
                               "aria-label": unref(propsDefaults).deselectActionLabel,
+                              type: "button",
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$i, { name: "close" })
+                              createVNode(_sfc_main$n, { name: "close" })
                             ], 8, _hoisted_8$1)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -3660,7 +3954,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6$2),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3669,107 +3963,110 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true)
             ]),
-            items: withCtx(() => [
-              unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createVNode(_sfc_main$8, {
-                      label: unref(getOptionLabel)(option)
-                    }, null, 8, ["label"]),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                      option
-                    ), (item, i) => {
-                      return openBlock(), createBlock(_sfc_main$9, mergeProps({
-                        disabled: unref(getOptionDisabled)(item),
-                        selected: getOptionSelected(item),
-                        unselectable: _ctx.unselectable,
-                        deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                        selectHintLabel: unref(propsDefaults).selectHintLabel,
-                        selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                      }, {
-                        key: i,
-                        class: "vv-dropdown-option",
-                        onClickPassive: ($event) => onInput(item)
-                      }), {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                            option,
-                            selectedOptions: unref(selectedOptions),
-                            selected: getOptionSelected(item),
-                            disabled: unref(getOptionDisabled)(item)
-                          })), () => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                          ])
-                        ]),
-                        _: 2
-                      }, 1040, ["onClickPassive"]);
-                    }), 128))
-                  ], 64)) : (openBlock(), createBlock(_sfc_main$9, mergeProps({ key: 1 }, {
-                    disabled: unref(getOptionDisabled)(option),
-                    selected: getOptionSelected(option),
-                    unselectable: _ctx.unselectable,
-                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                    selectHintLabel: unref(propsDefaults).selectHintLabel,
-                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                  }, {
-                    class: "vv-dropdown-option",
-                    onClickPassive: ($event) => onInput(option)
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                        option,
-                        selectedOptions: unref(selectedOptions),
-                        selected: getOptionSelected(option),
-                        disabled: unref(getOptionDisabled)(option)
-                      })), () => [
-                        createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1040, ["onClickPassive"]))
-                ], 64);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$9, {
-                key: 1,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-options", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              })) : (openBlock(), createBlock(_sfc_main$9, {
-                key: 2,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-results", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              }))
-            ]),
+            items: withCtx(() => {
+              var _a;
+              return [
+                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
+                  return openBlock(), createElementBlock(Fragment, { key: index }, [
+                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createVNode(_sfc_main$b, {
+                        label: unref(getOptionLabel)(option)
+                      }, null, 8, ["label"]),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
+                        option
+                      ), (item, i) => {
+                        return openBlock(), createBlock(_sfc_main$c, mergeProps({
+                          disabled: unref(getOptionDisabled)(item),
+                          selected: getOptionSelected(item),
+                          unselectable: _ctx.unselectable,
+                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                          selectHintLabel: unref(propsDefaults).selectHintLabel,
+                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                        }, {
+                          key: i,
+                          class: "vv-dropdown-option",
+                          onClickPassive: ($event) => onInput(item)
+                        }), {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                              option,
+                              selectedOptions: unref(selectedOptions),
+                              selected: getOptionSelected(item),
+                              disabled: unref(getOptionDisabled)(item)
+                            })), () => [
+                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
+                            ])
+                          ]),
+                          _: 2
+                        }, 1040, ["onClickPassive"]);
+                      }), 128))
+                    ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
+                      disabled: unref(getOptionDisabled)(option),
+                      selected: getOptionSelected(option),
+                      unselectable: _ctx.unselectable,
+                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                      selectHintLabel: unref(propsDefaults).selectHintLabel,
+                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                    }, {
+                      class: "vv-dropdown-option",
+                      onClickPassive: ($event) => onInput(option)
+                    }), {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                          option,
+                          selectedOptions: unref(selectedOptions),
+                          selected: getOptionSelected(option),
+                          disabled: unref(getOptionDisabled)(option)
+                        })), () => [
+                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1040, ["onClickPassive"]))
+                  ], 64);
+                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
+                  key: 1,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-options", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$c, {
+                  key: 2,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-results", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ];
+            }),
             after: withCtx(() => [
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$g, {
+                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$j, {
                     key: 0,
-                    label: "Close",
+                    label: unref(propsDefaults).closeLabel,
                     modifiers: "secondary",
                     onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
-                  })) : createCommentVNode("", true)
+                  }, null, 8, ["label"])) : createCommentVNode("", true)
                 ];
               })
             ]),
             _: 2
           }, [
-            unref(searchable) || _ctx.$slots["dropdown::before"] ? {
+            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
               name: "before",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(searchable) ? withDirectives((openBlock(), createElementBlock("input", {
+                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
                   key: 0,
                   id: unref(hasSearchId),
                   ref_key: "inputSearchEl",
@@ -3783,7 +4080,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   class: "vv-dropdown__search",
                   placeholder: unref(propsDefaults).searchPlaceholder
                 }, null, 8, _hoisted_3$3)), [
-                  [vShow, unref(expanded)],
                   [vModelText, unref(searchText)]
                 ]) : createCommentVNode("", true)
               ]),
@@ -3824,7 +4120,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$5)) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, unref(selectProps), {
+      ], 10, _hoisted_1$7)) : (openBlock(), createBlock(_sfc_main$a, mergeProps({ key: 1 }, unref(selectProps), {
         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
       }), null, 16));
     };
@@ -3869,35 +4165,36 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$4 = {
+const _hoisted_1$6 = ["onCancel"];
+const _hoisted_2$4 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_2$4 = { class: "vv-dialog__content" };
-const _hoisted_3$2 = {
+const _hoisted_3$2 = { class: "vv-dialog__content" };
+const _hoisted_4$2 = {
   key: 1,
   class: "vv-dialog__footer"
 };
 const __default__$5 = {
   name: "VvDialog"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: VvDialogProps,
   emits: VvDialogEvents,
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const dialogEl = ref();
+    const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
-    const modelValue = computed({
-      get() {
-        return props.modelValue ?? localModelValue.value;
-      },
-      set(value) {
-        if (props.modelValue === void 0) {
-          localModelValue.value = value;
+    const isOpened = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
         }
-        emit("update:modelValue", value);
+        modelValue.value = newValue;
       }
     });
     const modalWrapper = ref(null);
@@ -3916,14 +4213,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const transitioName = computed(() => `vv-dialog--${props.transition}`);
     const dialogTransitionHandlers = {
       "before-enter": () => {
-        var _a;
-        (_a = dialogEl.value) == null ? void 0 : _a.showModal();
+        var _a, _b;
+        if (!((_a = dialogEl.value) == null ? void 0 : _a.open)) {
+          (_b = dialogEl.value) == null ? void 0 : _b.showModal();
+        }
         emit("open");
         emit("before-enter");
       },
       "after-leave": () => {
-        var _a;
-        (_a = dialogEl.value) == null ? void 0 : _a.close();
+        var _a, _b;
+        if ((_a = dialogEl.value) == null ? void 0 : _a.open) {
+          (_b = dialogEl.value) == null ? void 0 : _b.close();
+        }
         emit("close");
         emit("after-leave");
       },
@@ -3948,36 +4249,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     onClickOutside(modalWrapper, () => {
       if (!props.keepOpen) {
-        modelValue.value = false;
+        close();
       }
     });
     function close() {
-      modelValue.value = false;
+      isOpened.value = false;
     }
     function open() {
-      modelValue.value = true;
+      isOpened.value = true;
     }
     __expose({ close, open });
-    onKeyStroke("Escape", (e) => {
-      if (modelValue.value) {
-        e.preventDefault();
+    const onCancel = () => {
+      if (!props.keepOpen) {
         close();
       }
-    });
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
           withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
             ref_key: "dialogEl",
             ref: dialogEl,
-            class: unref(dialogClass)
+            class: unref(dialogClass),
+            onCancel: withModifiers(onCancel, ["stop", "prevent"])
           }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,
               class: "vv-dialog__wrapper"
             }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$4, [
+              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2$4, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
                   createTextVNode(toDisplayString(_ctx.title) + " ", 1),
                   createElementVNode("button", {
@@ -3986,19 +4287,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     class: "vv-dialog__close",
                     onClickPassive: close
                   }, [
-                    createVNode(_sfc_main$i, { name: "close" })
+                    createVNode(_sfc_main$n, { name: "close" })
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("div", _hoisted_3$2, [
                 renderSlot(_ctx.$slots, "default")
               ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$2, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
             ], 512)
-          ], 16), [
-            [vShow, unref(modelValue)]
+          ], 16, _hoisted_1$6), [
+            [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
@@ -4029,7 +4330,23 @@ const TYPES_ICON = {
   COLOR: "color",
   SEARCH: "close"
 };
-const VvInputTextEvents = ["update:modelValue", "focus", "blur", "keyup"];
+const VvInputTextEvents = [
+  "update:modelValue",
+  "update:masked",
+  "accept",
+  "accept:typed",
+  "accept:masked",
+  "accept:unmasked",
+  "complete",
+  "complete:typed",
+  "complete:masked",
+  "complete:unmasked",
+  "focus",
+  "blur",
+  "keyup",
+  "keydown",
+  "keypress"
+];
 const VvInputTextProps = {
   ...InputTextareaProps,
   /**
@@ -4136,44 +4453,19 @@ const VvInputTextProps = {
     default: "Clear"
   },
   /**
-   * Input mask, only for text type
-   * @see https://beholdr.github.io/maska/
+   * iMask options
+   * @see https://imask.js.org/guide.html
    */
-  mask: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * Show mask before typing
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  maskEager: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Write values reverse (ex. for numbers)
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  maskReversed: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Add mask custom tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
-   */
-  maskTokens: {
+  iMask: {
     type: Object,
     default: void 0
   },
   /**
-   * Replace default tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+   * Masked value
    */
-  maskTokensReplace: {
-    type: Boolean,
-    default: false
+  masked: {
+    type: String,
+    default: void 0
   },
   /**
    * Adjust input width to content
@@ -4194,11 +4486,18 @@ const VvInputTextProps = {
    */
   unit: {
     type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
   }
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4242,7 +4541,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$i, {
+    const icon = h(_sfc_main$n, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -4261,7 +4560,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4306,7 +4605,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4335,7 +4634,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$i, {
+    const icon = h(_sfc_main$n, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -4356,7 +4655,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$i,
+      VvIcon: _sfc_main$n,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4483,7 +4782,7 @@ function useTextCount(text, options) {
     formatted
   };
 }
-const _hoisted_1$3 = ["for"];
+const _hoisted_1$5 = ["for"];
 const _hoisted_2$3 = { class: "vv-input-text__wrapper" };
 const _hoisted_3$1 = {
   key: 0,
@@ -4506,16 +4805,18 @@ const _hoisted_8 = {
 const __default__$4 = {
   name: "VvInputText"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const slots = useSlots();
-    const inputEl = ref();
-    const innerEl = ref();
-    __expose({ $inner: innerEl });
+    const propsDefaults = useDefaults(
+      "VvInputText",
+      VvInputTextProps,
+      props
+    );
     const {
       id,
       icon,
@@ -4525,39 +4826,131 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       count,
       valid,
       invalid,
-      loading
+      loading,
+      debounce,
+      maxlength,
+      minlength,
+      type,
+      iMask,
+      step
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const inputTextPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
-    const localModelValue = useDebouncedInput(
-      modelValue,
-      emit,
-      props.debounce,
+    const maskReady = ref(false);
+    const { el, mask, typed, masked, unmasked } = useIMask(
+      computed(
+        () => (iMask == null ? void 0 : iMask.value) ?? {
+          mask: /./
+        }
+      ),
       {
-        getter: (value) => {
-          if (mask.value) {
-            return mask.value.masked(value ?? "");
+        emit,
+        onAccept: () => {
+          if (!maskReady.value) {
+            return;
           }
-          return value;
-        },
-        setter: (value) => {
-          if (mask.value) {
-            value = mask.value.unmasked(value);
+          emit("update:masked", masked.value);
+          if (type.value === INPUT_TYPES.NUMBER) {
+            if (masked.value === "") {
+              if (localModelValue.value === null || localModelValue.value === void 0) {
+                return;
+              }
+              localModelValue.value = void 0;
+              return;
+            }
+            if (typeof typed.value !== "number") {
+              localModelValue.value = Number(typed.value);
+              return;
+            }
+            localModelValue.value = typed.value;
+            return;
+          }
+          if (type.value === INPUT_TYPES.DATE) {
+            if (el.value instanceof HTMLInputElement && el.value.type === "date") {
+              localModelValue.value = el.value.value;
+              return;
+            }
+            let date = typed.value;
+            if (date === null || date === "") {
+              if (!localModelValue.value) {
+                return;
+              }
+              localModelValue.value = "";
+              return;
+            }
+            if (!(date instanceof Date)) {
+              date = new Date(date);
+            }
+            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
+            return;
+          }
+          if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+            if (el.value instanceof HTMLInputElement && el.value.type === "datetime-local") {
+              localModelValue.value = el.value.value;
+              return;
+            }
+            let date = typed.value;
+            if (date === null || date === "") {
+              if (!localModelValue.value) {
+                return;
+              }
+              localModelValue.value = "";
+              return;
+            }
+            if (!(typed.value instanceof Date)) {
+              date = new Date(date);
+            }
+            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}T${("0" + date.getHours()).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}`;
+            return;
           }
-          if (props.type === INPUT_TYPES.NUMBER) {
-            return Number(value);
+          if (!localModelValue.value && !unmasked.value) {
+            return;
           }
-          return value;
+          localModelValue.value = unmasked.value;
+        }
+      }
+    );
+    onMounted(() => {
+      if (mask.value) {
+        maskReady.value = true;
+        typed.value = localModelValue.value ?? "";
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        var _a;
+        if (mask.value) {
+          typed.value = newValue && ((_a = iMask == null ? void 0 : iMask.value) == null ? void 0 : _a.mask) === Date ? new Date(newValue) : newValue ?? "";
         }
       }
     );
+    watch(
+      () => props.masked,
+      (newValue) => {
+        masked.value = newValue ?? "";
+      }
+    );
+    const inputEl = el;
+    const innerEl = ref();
+    __expose({ $inner: innerEl });
+    const localModelValue = useDebouncedInput(
+      modelValue,
+      emit,
+      (debounce == null ? void 0 : debounce.value) ?? 0
+    );
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
       () => focused.value && !props.disabled && !props.readonly
     );
+    watch(isFocused, (newValue) => {
+      if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
+        inputEl.value.select();
+      }
+    });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus && !props.disabled && !props.readonly) {
@@ -4575,19 +4968,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER);
     const onStepUp = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value + Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepUp();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const onStepDown = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value - Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepDown();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
     const onClear = () => {
-      localModelValue.value = void 0;
+      localModelValue.value = "";
     };
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -4609,9 +5010,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
-      mode: props.count,
-      upperLimit: Number(props.maxlength),
-      lowerLimit: Number(props.minlength)
+      mode: count.value,
+      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
+      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -4646,17 +5047,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }))
     );
     const hasAttrs = computed(() => {
-      const type = (() => {
+      const type2 = (() => {
         if (isPassword.value && showPassword.value) {
           return INPUT_TYPES.TEXT;
         }
         if (isDateTime.value && !isDirty.value && !focused.value) {
           return INPUT_TYPES.TEXT;
         }
+        if (iMask == null ? void 0 : iMask.value) {
+          return INPUT_TYPES.TEXT;
+        }
         return props.type;
       })();
       const toReturn = {
-        type,
+        type: type2,
         name: props.name,
         tabindex: hasTabindex.value,
         disabled: props.disabled,
@@ -4667,20 +5071,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       };
-      if (type === INPUT_TYPES.DATE || type === INPUT_TYPES.MONTH || type === INPUT_TYPES.WEEK || type === INPUT_TYPES.TIME || type === INPUT_TYPES.DATETIME_LOCAL || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.DATE || type2 === INPUT_TYPES.MONTH || type2 === INPUT_TYPES.WEEK || type2 === INPUT_TYPES.TIME || type2 === INPUT_TYPES.DATETIME_LOCAL || type2 === INPUT_TYPES.NUMBER) {
         toReturn.step = props.step;
         toReturn.max = props.max !== void 0 ? String(props.max) : void 0;
         toReturn.min = props.min !== void 0 ? String(props.min) : void 0;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD || type2 === INPUT_TYPES.NUMBER) {
         toReturn.placeholder = inputTextPlaceholder.value;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD) {
         toReturn.minlength = props.minlength;
         toReturn.maxlength = props.maxlength;
         toReturn.pattern = props.pattern;
       }
-      if (type === INPUT_TYPES.EMAIL) {
+      if (type2 === INPUT_TYPES.EMAIL) {
         toReturn.multiple = props.multiple;
       }
       return toReturn;
@@ -4699,7 +5103,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const PasswordInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.PASSWORD,
       props
@@ -4712,31 +5116,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       INPUT_TYPES.SEARCH,
       props
     );
-    const mask = ref();
-    watch(
-      [
-        () => props.mask,
-        () => props.type,
-        () => props.maskEager,
-        () => props.maskReversed,
-        () => props.maskTokens,
-        () => props.maskTokensReplace
-      ],
-      ([newMask, newType, eager, reversed, tokens, tokensReplace]) => {
-        if (newMask && newType === INPUT_TYPES.TEXT) {
-          mask.value = new Mask({
-            mask: newMask,
-            eager,
-            reversed,
-            tokens,
-            tokensReplace
-          });
-          return;
-        }
-        mask.value = void 0;
-      },
-      { immediate: true }
-    );
     const onClickInner = () => {
       if (isClickable.value) {
         focused.value = true;
@@ -4750,6 +5129,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         width: localModelValue.value !== void 0 ? `${String(localModelValue.value).length + 1}ch` : void 0
       };
     });
+    const onKeyDown = (event) => {
+      switch (event.code) {
+        case "ArrowUp":
+          if (isNumber.value) {
+            onStepUp();
+            event.preventDefault();
+          }
+          break;
+        case "ArrowDown":
+          if (isNumber.value) {
+            onStepDown();
+            event.preventDefault();
+          }
+          break;
+      }
+      emit("keydown", event);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
@@ -4758,7 +5154,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           key: 0,
           for: unref(hasId),
           class: "vv-input-text__label"
-        }, toDisplayString(unref(label)), 9, _hoisted_1$3)) : createCommentVNode("", true),
+        }, toDisplayString(unref(label)), 9, _hoisted_1$5)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$3, [
           _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
@@ -4769,28 +5165,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: "vv-input-text__inner",
             onClick: withModifiers(onClickInner, ["stop"])
           }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("input", mergeProps({
+            createElementVNode("input", mergeProps({
               id: unref(hasId),
               ref_key: "inputEl",
-              ref: inputEl,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              ref: inputEl
             }, unref(hasAttrs), {
               style: unref(hasStyle),
-              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
-            }), null, 16, _hoisted_5$1), [
-              [vModelDynamic, unref(localModelValue)]
-            ]),
+              onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+              onKeydown: onKeyDown,
+              onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+            }), null, 16, _hoisted_5$1),
             (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
               renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                 createTextVNode(toDisplayString(_ctx.unit), 1)
               ])
             ])) : createCommentVNode("", true)
           ], 8, _hoisted_4$1),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
             key: 1,
             class: "vv-input-text__icon vv-input-text__icon-after"
           }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
@@ -4850,6 +5245,79 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvNavProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvNavEvents = ["click"];
+const _hoisted_1$4 = {
+  class: "vv-nav__menu",
+  role: "menu",
+  "aria-busy": "true"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VvNav",
+  props: VvNavProps,
+  emits: VvNavEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { modifiers, items } = toRefs(props);
+    const activeItem = ref(null);
+    const bemCssClasses = useModifiers("vv-nav", modifiers);
+    const localItems = computed(() => {
+      return items.value.map((item, index) => {
+        return {
+          ...item,
+          id: item.id || `nav-item_${index}`
+        };
+      });
+    });
+    function onClick(item) {
+      if (!item.disabled) {
+        emit("click", item);
+        activeItem.value = item.id;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        createElementVNode("ul", _hoisted_1$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (navItem) => {
+            return openBlock(), createElementBlock("li", {
+              key: navItem.id,
+              class: "vv-nav__item",
+              role: "presentation"
+            }, [
+              createVNode(_sfc_main$o, mergeProps({
+                disabled: navItem.disabled,
+                to: navItem.to,
+                href: navItem.href,
+                tabindex: 0
+              }, {
+                class: [{
+                  current: unref(activeItem) == navItem.id,
+                  disabled: navItem.disabled
+                }, "vv-nav__item-label"]
+              }, toHandlers(navItem.on), {
+                onClick: ($event) => onClick(navItem)
+              }), {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(navItem.title), 1)
+                ]),
+                _: 2
+              }, 1040, ["class", "onClick"])
+            ]);
+          }), 128))
+        ])
+      ], 2);
+    };
+  }
+});
 const VvProgressProps = {
   ...ModifiersProps,
   /**
@@ -4883,7 +5351,7 @@ const VvProgressProps = {
 const __default__$3 = {
   name: "VvProgress"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$3,
   props: VvProgressProps,
   setup(__props) {
@@ -4939,18 +5407,23 @@ function useGroupProps(props, emit) {
     disabled
   };
 }
-const _hoisted_1$2 = ["for"];
+const _hoisted_1$3 = ["for"];
 const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$2 = {
   name: "VvRadio"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: VvRadioProps,
   emits: VvRadioEvents,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvRadio",
+      VvRadioProps,
+      props
+    );
     const { id, disabled, readonly, modelValue, valid, invalid } = useGroupProps(props, emit);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
@@ -5001,7 +5474,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -5060,24 +5533,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$2);
+      ], 10, _hoisted_1$3);
     };
   }
 });
 const VvRadioGroupProps = CheckboxRadioGroupProps;
 const VvRadioGroupEvents = ["update:modelValue", "change"];
-const _hoisted_1$1 = ["textContent"];
+const _hoisted_1$2 = ["textContent"];
 const _hoisted_2$1 = { class: "vv-radio-group__wrapper" };
 const __default__$1 = {
   name: "VvRadioGroup"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvRadioGroupProps,
   emits: VvRadioGroupEvents,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvRadioGroup",
+      VvRadioGroupProps,
+      props
+    );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
     useProvideGroupState({
@@ -5108,7 +5586,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -5116,10 +5594,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$1)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$2)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$1, [
           _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$2, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            return openBlock(), createBlock(_sfc_main$4, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
         createVNode(unref(HintSlot), { class: "vv-radio-group__hint" }, createSlots({ _: 2 }, [
@@ -5156,6 +5634,61 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvTabProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvTabEvents = ["click"];
+const _hoisted_1$1 = ["id"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VvTab",
+  props: VvTabProps,
+  emits: VvTabEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { modifiers, items } = toRefs(props);
+    const activeTab = ref(null);
+    const bemCssClasses = useModifiers("vv-tab", modifiers);
+    const localItems = computed(() => {
+      return items.value.map((item, index) => {
+        return {
+          ...item,
+          id: item.id || `tab-item_${index}`
+        };
+      });
+    });
+    function onClick(item) {
+      if (!item.disabled) {
+        emit("click", item);
+        activeTab.value = item.id;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        createVNode(_sfc_main$6, {
+          items: unref(localItems),
+          modifiers: "tabs full",
+          onClick
+        }, null, 8, ["items"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (item) => {
+          return openBlock(), createElementBlock("article", {
+            id: item.id,
+            key: item.id,
+            class: normalizeClass([{ target: unref(activeTab) === item.id }, "vv-tab__panel"])
+          }, [
+            renderSlot(_ctx.$slots, `${item.id}`)
+          ], 10, _hoisted_1$1);
+        }), 128))
+      ], 2);
+    };
+  }
+});
 const WRAP = {
   hard: "hard",
   soft: "soft"
@@ -5217,13 +5750,18 @@ const _hoisted_7 = {
 const __default__ = {
   name: "VvTextarea"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvTextareaProps,
   emits: VvTextareaEvents,
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvTextarea",
+      VvTextareaProps,
+      props
+    );
     const textarea = ref();
     const {
       id,
@@ -5235,14 +5773,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       valid,
       invalid,
       loading,
-      modifiers
+      modifiers,
+      debounce,
+      minlength,
+      maxlength
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
-    const localModelValue = useDebouncedInput(modelValue, emit, props.debounce);
+    const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
       iconPosition
@@ -5255,9 +5796,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
-      mode: props.count,
-      upperLimit: Number(props.maxlength),
-      lowerLimit: Number(props.minlength)
+      mode: count == null ? void 0 : count.value,
+      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
+      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -5278,7 +5819,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const bemCssClasses = useModifiers(
       "vv-textarea",
       modifiers,
@@ -5342,7 +5883,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-textarea__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -5356,7 +5897,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), null, 16, _hoisted_5), [
               [vModelText, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 1,
               class: "vv-textarea__icon vv-textarea__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -5407,24 +5948,69 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvTooltipProps = {
+  ...ModifiersProps,
+  /**
+   * Define the tooltip position
+   * @default Side.bottom
+   */
+  position: {
+    type: String,
+    default: Side.bottom
+  },
+  value: {
+    type: String
+  }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvTooltip",
+  props: VvTooltipProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-tooltip",
+      modifiers,
+      computed(() => ({
+        [props.position]: true
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "tooltip",
+        inert: ""
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
 export {
-  _sfc_main$m as VvAccordion,
-  _sfc_main$l as VvAccordionGroup,
-  _sfc_main$k as VvBadge,
-  _sfc_main$j as VvBreadcrumb,
-  _sfc_main$g as VvButton,
-  _sfc_main$f as VvButtonGroup,
-  _sfc_main$e as VvCard,
-  _sfc_main$d as VvCheckbox,
-  _sfc_main$c as VvCheckboxGroup,
-  _sfc_main$6 as VvCombobox,
-  _sfc_main$5 as VvDialog,
-  _sfc_main$b as VvDropdown,
-  _sfc_main$i as VvIcon,
-  _sfc_main$4 as VvInputText,
-  _sfc_main$3 as VvProgress,
-  _sfc_main$2 as VvRadio,
-  _sfc_main$1 as VvRadioGroup,
-  _sfc_main$7 as VvSelect,
-  _sfc_main as VvTextarea
+  _sfc_main$q as VvAccordion,
+  _sfc_main$p as VvAccordionGroup,
+  _sfc_main$o as VvAction,
+  _sfc_main$m as VvAlert,
+  _sfc_main$l as VvBadge,
+  _sfc_main$k as VvBreadcrumb,
+  _sfc_main$j as VvButton,
+  _sfc_main$i as VvButtonGroup,
+  _sfc_main$h as VvCard,
+  _sfc_main$g as VvCheckbox,
+  _sfc_main$f as VvCheckboxGroup,
+  _sfc_main$9 as VvCombobox,
+  _sfc_main$8 as VvDialog,
+  _sfc_main$e as VvDropdown,
+  _sfc_main$n as VvIcon,
+  _sfc_main$7 as VvInputText,
+  _sfc_main$6 as VvNav,
+  _sfc_main$5 as VvProgress,
+  _sfc_main$4 as VvRadio,
+  _sfc_main$3 as VvRadioGroup,
+  _sfc_main$a as VvSelect,
+  _sfc_main$2 as VvTab,
+  _sfc_main$1 as VvTextarea,
+  _sfc_main as VvTooltip
 };