@volverjs/ui-vue 0.0.10-beta.47 → 0.0.10-beta.48

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1,14 +1,9 @@
-import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, h, Fragment, useAttrs, onMounted, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, isRef, useSlots, renderList, vModelSelect, createSlots, getCurrentInstance, resolveDynamicComponent, toRef, withModifiers, vModelText } from "vue";
+import { computed, isRef, defineComponent, h, unref, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, inject, toRef, getCurrentInstance, ref, watch, createBlock, resolveDynamicComponent, mergeProps, withCtx, mergeDefaults, createCommentVNode, useId, useAttrs, useSlots, Fragment, provide, useTemplateRef, onMounted, nextTick, createVNode, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, vShow, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { uid } from "uid";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { get } from "ts-dot-prop";
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -84,145 +79,6 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-function useModifiers(prefix, modifiers, others) {
-  return computed(() => {
-    const toReturn = {
-      [prefix]: true
-    };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
-    if (modifiersArray) {
-      if (Array.isArray(modifiersArray)) {
-        modifiersArray.forEach((modifier) => {
-          if (modifier) {
-            toReturn[`${prefix}--${modifier}`] = true;
-          }
-        });
-      }
-    }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
-    return toReturn;
-  });
-}
-const __default__$9 = {
-  name: "VvIcon"
-};
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
-  props: /* @__PURE__ */ mergeDefaults({
-    name: {},
-    color: {},
-    width: {},
-    height: {},
-    provider: {},
-    prefix: {},
-    src: {},
-    horizontalFlip: { type: Boolean },
-    verticalFlip: { type: Boolean },
-    flip: {},
-    mode: {},
-    inline: { type: Boolean },
-    rotate: {},
-    onLoad: { type: Function },
-    svg: {},
-    modifiers: {}
-  }, VvIconPropsDefaults),
-  setup(__props) {
-    const props = __props;
-    const hasRotate = computed(() => {
-      if (typeof props.rotate === "string") {
-        return Number.parseFloat(props.rotate);
-      }
-      return props.rotate;
-    });
-    const show = ref(true);
-    const volver = useVolver();
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-icon", modifiers);
-    const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
-    });
-    const icon = computed(() => {
-      const name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
-        return iconName;
-      }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
-        (iconsCollection2) => {
-          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
-        }
-      );
-      if (iconsCollection) {
-        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
-      }
-      return name;
-    });
-    function getSvgContent(svg) {
-      let dom;
-      if (typeof window === "undefined") {
-        const { JSDOM } = require("jsdom");
-        dom = new JSDOM().window;
-      }
-      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
-      const svgDomString = domParser.parseFromString(svg, "text/html");
-      const svgEl = svgDomString.querySelector("svg");
-      return svgEl;
-    }
-    function addIconFromSvg(svg) {
-      const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
-      if (svgContentEl && svgContent) {
-        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
-          body: svgContent,
-          // Set height and width from svg content
-          height: svgContentEl.viewBox.baseVal.height,
-          width: svgContentEl.viewBox.baseVal.width
-        });
-      }
-    }
-    if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
-        show.value = false;
-        volver.fetchIcon(props.src).then((svg) => {
-          if (svg) {
-            addIconFromSvg(svg);
-            show.value = true;
-          }
-        }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
-    }
-    return (_ctx, _cache) => {
-      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
-        key: 0,
-        class: unref(bemCssClasses)
-      }, {
-        inline: _ctx.inline,
-        width: _ctx.width,
-        height: _ctx.height,
-        horizontalFlip: _ctx.horizontalFlip,
-        verticalFlip: _ctx.verticalFlip,
-        flip: _ctx.flip,
-        rotate: unref(hasRotate),
-        color: _ctx.color,
-        onLoad: _ctx.onLoad,
-        icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -587,1667 +443,864 @@ const ActionProps = {
   },
   storageKey: String
 });
-const VvDropdownProps = {
-  ...IdProps,
-  ...DropdownProps,
+const VvComboboxProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
   ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...DropdownProps,
+  ...LabelProps,
   /**
-   * Show / hide dropdown programmatically
+   * 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
    */
   modelValue: {
-    type: Boolean,
+    type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
   /**
-   * Dropdown trigger element
+   * Label for no search results
    */
-  reference: {
-    type: Object,
-    default: null
+  noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for no options	available
+   */
+  noOptionsLabel: { type: String, default: "No options available" },
+  /**
+   * Label for selected option hint
+   */
+  selectedHintLabel: { type: String, default: "Selected" },
+  /**
+   * Label for deselect action button
+   */
+  deselectActionLabel: { type: String, default: "Deselect" },
+  /**
+   * Label for select option hint
+   */
+  selectHintLabel: { type: String, default: "Press enter to select" },
+  /**
+   * Label for deselected option hint
+   */
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Label close button
+   */
+  closeLabel: { type: String, default: "Close" },
+  /**
+   * Select input placeholder
+   */
+  placeholder: String,
+  /**
+   * Use input text to search on options
+   */
+  searchable: Boolean,
+  /**
+   * Search function to filter options
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
   },
   /**
-   * Dropdown role
+   * On searchable select is the input search placeholder
    */
-  role: {
+  searchPlaceholder: {
     type: String,
-    default: DropdownRole.menu,
-    validator: (value) => Object.values(DropdownRole).includes(value)
-  }
-};
-const VvDropdownItemProps = {
-  focusOnHover: {
-    type: Boolean,
-    default: false
-  }
-};
-const VvDropdownOptionProps = {
-  ...DisabledProps,
-  ...SelectedProps,
-  ...UnselectableProps,
-  ...ModifiersProps,
-  deselectHintLabel: {
-    type: String
-  },
-  selectHintLabel: {
-    type: String
+    default: "Search..."
   },
-  selectedHintLabel: {
-    type: String
+  /**
+   * The input search debounce time in ms
+   */
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
   },
-  focusOnHover: {
-    type: Boolean,
-    default: false
-  }
-};
-function useUniqueId(id) {
-  return computed(() => String((id == null ? void 0 : id.value) || uid()));
-}
-function useProvideDropdownTrigger({
-  reference,
-  id,
-  expanded,
-  aria
-}) {
-  const bus = mitt();
-  const component = defineComponent({
-    name: "VvDropdownTriggerProvider",
-    setup() {
-      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
-        reference,
-        id,
-        expanded,
-        aria,
-        bus
-      });
+  /**
+   * Manage modelValue as string[] or object[]
+   */
+  multiple: Boolean,
+  /**
+   * The min number of selected values
+   */
+  minValues: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * The max number of selected values
+   */
+  maxValues: [Number, String],
+  /**
+   * If true the input will be unselectable
+   * @deprecated use minValues instead
+   */
+  unselectable: { type: Boolean, default: true },
+  /**
+   * The select label separator visible to the user
+   */
+  separator: { type: String, default: ", " },
+  /**
+   * Show native select
+   */
+  native: Boolean,
+  /**
+   * Show badges
+   */
+  badges: Boolean,
+  /**
+   * Badge modifiers
+   */
+  badgeModifiers: {
+    type: [String, Array],
+    default: "action sm"
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    ...DropdownProps.triggerWidth,
+    default: true
+  },
+  /**
+   * Dropdown modifiers
+   */
+  dropdownModifiers: {
+    type: [String, Array],
+    default: "mobile"
+  },
+  /**
+   * Open dropdown on focus
+   */
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on single select
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  }
+};
+function useVvComboboxProps() {
+  return {
+    ...VvComboboxProps,
+    options: {
+      ...VvComboboxProps.options,
+      type: Array
     },
-    render() {
-      var _a, _b;
-      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+    searchFunction: {
+      ...VvComboboxProps.searchFunction,
+      type: Function
     }
-  });
-  return {
-    bus,
-    component
   };
 }
-function useProvideDropdownItem({
-  role,
-  ...others
-}) {
-  const itemRole = computed(
-    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
-  );
-  provide(INJECTION_KEY_DROPDOWN_ITEM, {
-    role: itemRole,
-    ...others
-  });
-  return { itemRole };
-}
-function useProvideDropdownAction({
-  expanded
-}) {
-  provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ref(ActionRoles.menuitem),
-    expanded
-  });
+function equals(obj1, obj2, field) {
+  return deepEquals(obj1, obj2);
 }
-const _hoisted_1$5 = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$8 = {
-  name: "VvDropdown",
-  inheritAttrs: false
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
-  props: VvDropdownProps,
-  emits: [
-    "update:modelValue",
-    "beforeEnter",
-    "afterLeave",
-    "beforeExpand",
-    "beforeCollapse",
-    "afterExpand",
-    "afterCollapse",
-    "before-enter",
-    "after-leave",
-    "enter",
-    "afterEnter",
-    "enterCancelled",
-    "beforeLeave",
-    "leave",
-    "leaveCancelled"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { id } = toRefs(props);
-    const hasId = useUniqueId(id);
-    const attrs = useAttrs();
-    const maxWidth = ref("auto");
-    const maxHeight = ref("auto");
-    const localReferenceEl = ref(null);
-    const floatingEl = ref();
-    const arrowEl = ref(null);
-    const listEl = ref(null);
-    const referenceEl = computed({
-      get: () => props.reference ?? localReferenceEl.value,
-      set: (newValue) => {
-        localReferenceEl.value = newValue;
-      }
-    });
-    const hasCustomPosition = ref(false);
-    onMounted(() => {
-      useMutationObserver(
-        floatingEl.value,
-        () => {
-          var _a;
-          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
-        },
-        {
-          attributeFilter: ["style"],
-          window
-        }
-      );
-    });
-    const middleware = computed(() => {
-      const toReturn = [];
-      if (props.autoPlacement) {
-        if (typeof props.autoPlacement === "boolean") {
-          toReturn.push(autoPlacement());
-        } else {
-          toReturn.push(
-            autoPlacement(props.autoPlacement)
-          );
-        }
-      } else if (props.flip) {
-        if (typeof props.flip === "boolean") {
-          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
-        } else {
-          toReturn.push(flip(props.flip));
-        }
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length !== b.length)
+        return false;
+      for (i = length; i-- !== 0; ) {
+        if (!deepEquals(a[i], b[i]))
+          return false;
       }
-      if (props.shift) {
-        if (typeof props.shift === "boolean") {
-          toReturn.push(shift());
-        } else {
-          toReturn.push(shift(props.shift));
-        }
+      return true;
+    }
+    if (arrA !== arrB)
+      return false;
+    const dateA = a instanceof Date;
+    const dateB = b instanceof Date;
+    if (dateA !== dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() === b.getTime();
+    const regexpA = a instanceof RegExp;
+    const regexpB = b instanceof RegExp;
+    if (regexpA !== regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() === b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; ) {
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    }
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return Number.isNaN(a) && Number.isNaN(b);
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
       }
-      if (props.size) {
-        const apply = ({
-          availableWidth,
-          availableHeight
-        }) => {
-          maxWidth.value = `${availableWidth}px`;
-          maxHeight.value = `${availableHeight}px`;
-        };
-        if (typeof props.size === "boolean") {
-          toReturn.push(
-            size({
-              apply
-            })
+    }
+  }
+  return false;
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
+  }
+  return items;
+}
+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.value.loading && (slots.loading || loadingLabel.value))
+  );
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
+  );
+  const hasValidLabelOrSlot = computed(
+    () => !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)
+  );
+  const isVisible = computed(
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
+  );
+  const hintSlotScope = computed(() => ({
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
+        }
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
           );
-        } else {
-          toReturn.push(
-            size({
-              ...props.size,
-              apply
-            })
+        }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
           );
         }
-      }
-      if (props.offset) {
-        toReturn.push(offset(Number(props.offset)));
-        if (["string", "number"].includes(typeof props.offset)) {
-          toReturn.push(offset(Number(props.offset)));
-        } else {
-          toReturn.push(offset(props.offset));
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+          );
         }
-      }
-      if (props.arrow) {
-        toReturn.push(
-          arrow({
-            element: arrowEl
-          })
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
         );
       }
-      return toReturn;
-    });
-    const { x, y, middlewareData, placement, strategy } = useFloating(
-      referenceEl,
-      floatingEl,
-      {
-        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: width ? void 0 : maxWidth.value,
-        maxHeight: maxHeight.value,
-        width
-      };
-    });
-    const side = computed(
-      () => placement.value.split("-")[0]
-    );
-    const arrowPlacement = computed(() => {
-      var _a, _b, _c, _d, _e;
-      if (hasCustomPosition.value) {
-        return void 0;
-      }
-      const staticSide = {
-        [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,
-        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
-        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
-      };
-    });
-    const modelValue = useVModel(props, "modelValue", emit);
-    const localModelValue = ref(false);
-    const expanded = computed({
-      get: () => modelValue.value ?? localModelValue.value,
-      set: (newValue) => {
-        if (modelValue.value === void 0) {
-          localModelValue.value = newValue;
-          return;
-        }
-        modelValue.value = newValue;
-      }
-    });
-    function show() {
-      expanded.value = true;
-    }
-    function hide() {
-      expanded.value = false;
-    }
-    function toggle() {
-      expanded.value = !expanded.value;
-    }
-    function init(el) {
-      referenceEl.value = el;
+      return null;
     }
-    __expose({
-      toggle,
-      show,
-      hide,
-      init,
-      customPosition: hasCustomPosition
-    });
-    watch(expanded, (newValue) => {
-      if (newValue && props.autofocusFirst) {
-        nextTick(() => {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length > 0) {
-            focusableElements[0].focus({
-              preventScroll: true
-            });
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
+  };
+}
+const VvBadgeProps = {
+  ...ModifiersProps,
+  value: [String, Number]
+};
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
           }
         });
       }
-    });
-    onClickOutside(
-      floatingEl,
-      () => {
-        if (!props.keepOpen && expanded.value) {
-          expanded.value = false;
-        }
-      },
-      { ignore: [referenceEl] }
-    );
-    const hasAriaLabelledby = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
-    });
-    const referenceAria = computed(() => ({
-      "aria-controls": hasId.value,
-      "aria-haspopup": true,
-      "aria-expanded": expanded.value
-    }));
-    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
-      reference: referenceEl,
-      id: hasId,
-      expanded,
-      aria: referenceAria
-    });
-    bus.on("click", toggle);
-    const { role, modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers(
-      "vv-dropdown",
-      modifiers,
-      computed(() => ({
-        arrow: props.arrow
-      }))
-    );
-    const { focused } = useFocusWithin(floatingEl);
-    function getKeyboardFocusableElements(element) {
-      if (!element) {
-        return [];
-      }
-      return [
-        ...element.querySelectorAll(
-          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-        )
-      ].filter(
-        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
-      );
-    }
-    function focusNext() {
-      nextTick(() => {
-        if (focused.value) {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length === 0 || !document.activeElement) {
-            return;
-          }
-          const activeElementIndex = focusableElements.indexOf(
-            document.activeElement
-          );
-          if (activeElementIndex < focusableElements.length - 1) {
-            focusableElements[activeElementIndex + 1].focus({
-              preventScroll: true
-            });
-          } else {
-            focusableElements[0].focus({
-              preventScroll: true
-            });
-          }
-        }
-      });
     }
-    function focusPrev() {
-      nextTick(() => {
-        if (focused.value) {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length === 0 || !document.activeElement) {
-            return;
-          }
-          const activeElementIndex = focusableElements.indexOf(
-            document.activeElement
-          );
-          if (activeElementIndex > 0) {
-            focusableElements[activeElementIndex - 1].focus({
-              preventScroll: true
-            });
-          } else {
-            focusableElements[focusableElements.length - 1].focus({
-              preventScroll: true
-            });
-          }
-        }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
       });
     }
-    const hovered = useElementHover(floatingEl);
-    const { itemRole } = useProvideDropdownItem({
-      role,
-      expanded,
-      focused,
-      hovered
-    });
-    onKeyStroke("Escape", (e) => {
-      if (expanded.value) {
-        e.preventDefault();
-        hide();
-      }
-    });
-    onKeyStroke("ArrowDown", (e) => {
-      if (expanded.value && focused.value) {
-        e.preventDefault();
-        focusNext();
-      }
-    });
-    onKeyStroke("ArrowUp", (e) => {
-      if (expanded.value && focused.value) {
-        e.preventDefault();
-        focusPrev();
-      }
-    });
-    onKeyStroke([" ", "Enter"], (e) => {
-      const htmlEl = e.target;
-      if (expanded.value && focused.value && htmlEl) {
-        htmlEl == null ? void 0 : htmlEl.click();
-      }
-    });
-    const dropdownTransitionHandlers = {
-      "before-enter": () => {
-        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("beforeEnter");
-      },
-      "after-leave": () => {
-        emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("afterLeave");
-      },
-      "enter": () => {
-        emit("enter");
-      },
-      "after-enter": () => {
-        emit("afterEnter");
-      },
-      "enter-cancelled": () => {
-        emit("enterCancelled");
-      },
-      "before-leave": () => {
-        emit("beforeLeave");
-      },
-      "leave": () => {
-        emit("leave");
-      },
-      "leave-cancelled": () => {
-        emit("leaveCancelled");
-      }
-    };
+    return toReturn;
+  });
+}
+const __default__$9 = {
+  name: "VvBadge"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
+  props: VvBadgeProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-badge", modifiers);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
-        Fragment,
-        null,
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
         [
-          createVNode(unref(VvDropdownTriggerProvider), null, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
-            ]),
-            _: 3
-            /* FORWARDED */
-          }),
-          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
-            default: withCtx(() => [
-              withDirectives(createElementVNode(
-                "div",
-                {
-                  ref_key: "floatingEl",
-                  ref: floatingEl,
-                  style: normalizeStyle(unref(dropdownPlacement)),
-                  class: normalizeClass(unref(bemCssClasses))
-                },
-                [
-                  props.arrow ? (openBlock(), createElementBlock(
-                    "div",
-                    {
-                      key: 0,
-                      ref_key: "arrowEl",
-                      ref: arrowEl,
-                      style: normalizeStyle(unref(arrowPlacement)),
-                      class: "vv-dropdown__arrow"
-                    },
-                    null,
-                    4
-                    /* STYLE */
-                  )) : createCommentVNode("v-if", true),
-                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-                  createElementVNode("div", mergeProps(unref(attrs), {
-                    id: unref(hasId),
-                    ref_key: "listEl",
-                    ref: listEl,
-                    tabindex: !unref(expanded) ? -1 : void 0,
-                    role: unref(role),
-                    "aria-labelledby": unref(hasAriaLabelledby),
-                    class: "vv-dropdown__list"
-                  }), [
-                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
-                      role: unref(itemRole)
-                    })))
-                  ], 16, _hoisted_1$5),
-                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
-                ],
-                6
-                /* CLASS, STYLE */
-              ), [
-                [vShow, unref(expanded)]
-              ])
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 16, ["name"])
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
         ],
-        64
-        /* STABLE_FRAGMENT */
+        2
+        /* CLASS */
       );
     };
   }
 });
-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__$7 = {
-  name: "VvDropdownItem"
-};
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
-  props: VvDropdownItemProps,
-  setup(__props) {
-    const props = __props;
-    const { role, expanded } = useInjectedDropdownItem();
-    const element = ref(null);
-    useProvideDropdownAction({ expanded });
-    const hovered = useElementHover(element);
-    const { focused } = useFocus(element);
-    const { focused: focusedWithin } = useFocusWithin(element);
-    watch(hovered, (newValue) => {
-      if (newValue && props.focusOnHover) {
-        focused.value = true;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        mergeProps({ role: unref(role) }, {
-          ref_key: "element",
-          ref: element,
-          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
-        }),
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        16
-        /* FULL_PROPS */
-      );
-    };
-  }
-});
-const _hoisted_1$4 = ["title"];
-const __default__$6 = {
-  name: "VvDropdownOption"
-};
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
-  props: VvDropdownOptionProps,
-  setup(__props) {
-    const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers(
-      "vv-dropdown-option",
-      modifiers,
-      computed(() => ({
-        disabled: props.disabled,
-        selected: props.selected,
-        unselectable: props.unselectable && props.selected
-      }))
-    );
-    const hintLabel = computed(() => {
-      if (props.selected) {
-        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
-      }
-      if (!props.disabled) {
-        return props.selectHintLabel;
+function useGroupStateInject(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => group !== void 0);
+  function getGroupOrLocalRef(propName, props, emit) {
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
+      return computed({
+        get() {
+          return groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit) {
+          emit(`update:${propName}`, value);
+        }
       }
-      return "";
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$7, {
-        class: normalizeClass(unref(bemCssClasses)),
-        tabindex: _ctx.disabled ? -1 : 0,
-        "aria-selected": _ctx.selected,
-        "aria-disabled": _ctx.disabled,
-        "focus-on-hover": _ctx.focusOnHover
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default"),
-          createElementVNode("span", {
-            class: "vv-dropdown-option__hint",
-            title: unref(hintLabel)
-          }, [
-            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
-              createTextVNode(
-                toDisplayString(unref(hintLabel)),
-                1
-                /* TEXT */
-              )
-            ])
-          ], 8, _hoisted_1$4)
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
-    };
   }
-});
-const _hoisted_1$3 = {
-  class: "vv-dropdown-optgroup",
-  role: "presentation",
-  tabindex: "-1"
-};
-const __default__$5 = {
-  name: "VvDropdownOptgroup"
-};
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
-  props: {
-    ...LabelProps
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvButtonEvents = ["update:modelValue"];
+const VvButtonProps = {
+  ...ActionProps,
+  ...IdProps,
+  ...ModifiersProps,
+  ...UnselectableProps,
+  ...LoadingProps,
+  ...IconProps,
+  /**
+   * Button icon position
+   */
+  iconPosition: {
+    type: String,
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
   },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "li",
-        _hoisted_1$3,
-        toDisplayString(props.label),
-        1
-        /* TEXT */
-      );
-    };
+  /**
+   * Loading icon
+   */
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Enable button toggle
+   */
+  toggle: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Button toggle value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Value associated with the unchecked state
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Button toggle model value
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
   }
-});
-function equals(obj1, obj2, field) {
-  return deepEquals(obj1, obj2);
-}
-function deepEquals(a, b) {
-  if (a === b)
-    return true;
-  if (a && b && typeof a == "object" && typeof b == "object") {
-    const arrA = Array.isArray(a);
-    const arrB = Array.isArray(b);
-    let i, length, key;
-    if (arrA && arrB) {
-      length = a.length;
-      if (length !== b.length)
-        return false;
-      for (i = length; i-- !== 0; ) {
-        if (!deepEquals(a[i], b[i]))
-          return false;
+};
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useGroupStateInject(INJECTION_KEY_BUTTON_GROUP);
+  const { id, iconPosition, icon, label, pressed } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const toggle = getGroupOrLocalRef("toggle", props);
+  const unselectable = getGroupOrLocalRef("unselectable", props);
+  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
       }
-      return true;
-    }
-    if (arrA !== arrB)
-      return false;
-    const dateA = a instanceof Date;
-    const dateB = b instanceof Date;
-    if (dateA !== dateB)
-      return false;
-    if (dateA && dateB)
-      return a.getTime() === b.getTime();
-    const regexpA = a instanceof RegExp;
-    const regexpB = b instanceof RegExp;
-    if (regexpA !== regexpB)
-      return false;
-    if (regexpA && regexpB)
-      return a.toString() === b.toString();
-    const keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length)
-      return false;
-    for (i = length; i-- !== 0; ) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-        return false;
-    }
-    for (i = length; i-- !== 0; ) {
-      key = keys[i];
-      if (!deepEquals(a[key], b[key]))
-        return false;
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
     }
-    return true;
-  }
-  return Number.isNaN(a) && Number.isNaN(b);
-}
-function contains(value, list) {
-  if (value != null && list && list.length) {
-    for (const val of list) {
-      if (equals(value, val)) {
-        return true;
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
       }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
     }
-  }
-  return false;
-}
-function isString(value) {
-  return typeof value === "string" || value instanceof String;
-}
-function joinLines(items) {
-  if (Array.isArray(items)) {
-    return items.filter((item) => isString(item)).join(" ");
-  }
-  return items;
-}
-function HintSlotFactory(propsOrRef, slots) {
-  const props = computed(() => {
-    if (isRef(propsOrRef)) {
-      return propsOrRef.value;
-    }
-    return propsOrRef;
+    return Array.from(toReturn);
   });
-  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.value.loading && (slots.loading || loadingLabel.value))
-  );
-  const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(
-      props.value.invalid && (slots.invalid || invalidLabel.value)
-    )
-  );
-  const hasValidLabelOrSlot = computed(
-    () => !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)
-  );
-  const isVisible = computed(
-    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
+  const disabled = computed(
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
   );
-  const hintSlotScope = computed(() => ({
-    modelValue: props.value.modelValue,
-    valid: props.value.valid,
-    invalid: props.value.invalid,
-    loading: props.value.loading
-  }));
-  const HintSlot = defineComponent({
-    name: "HintSlot",
-    props: {
-      tag: {
-        type: String,
-        default: "small"
-      }
-    },
-    setup() {
-      return {
-        isVisible,
-        invalidLabel,
-        validLabel,
-        loadingLabel,
-        hintLabel,
-        hasInvalidLabelOrSlot,
-        hasValidLabelOrSlot,
-        hasLoadingLabelOrSlot,
-        hasHintLabelOrSlot
-      };
-    },
-    render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if (this.isVisible) {
-        let role;
-        if (this.hasInvalidLabelOrSlot) {
-          role = "alert";
-        }
-        if (this.hasValidLabelOrSlot) {
-          role = "status";
-        }
-        if (this.hasLoadingLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
-          );
-        }
-        if (this.hasInvalidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
-          );
-        }
-        if (this.hasValidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
-          );
-        }
-        return h(
-          this.tag,
-          {
-            role
-          },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
-        );
-      }
-      return null;
-    }
-  });
   return {
-    hasInvalidLabelOrSlot,
-    hasHintLabelOrSlot,
-    hasValidLabelOrSlot,
-    hasLoadingLabelOrSlot,
-    hintSlotScope,
-    HintSlot
+    // group props
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
+    // local props
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
   };
 }
-const VvSelectProps = {
-  ...IdNameProps,
-  ...AutofocusProps,
-  ...AutocompleteProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...UnselectableProps,
-  ...LabelProps,
-  /**
-   * This Boolean attribute indicates that multiple options can be selected in the list.
-   * If it is not specified, then only one option can be selected at a time.
-   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-   */
-  multiple: Boolean,
-  /**
-   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-   */
-  required: Boolean,
-  /**
-   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-   * this attribute represents the number of rows in the list that should be visible at one time.
-   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-   */
-  size: [String, Number],
-  /**
-   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  /**
-   * Select first option automatically
-   */
-  autoselectFirst: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Select placeholder
-   */
-  placeholder: String
-};
-function useVvSelectProps() {
-  return {
-    ...VvSelectProps,
-    options: {
-      ...VvSelectProps.options,
-      type: Array,
-      default: () => []
-    }
-  };
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-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;
-    }, {});
-  });
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
 }
-function useComponentFocus(inputTemplateRef, emit) {
-  const { focused } = useFocus(inputTemplateRef);
-  watch(focused, (newValue) => {
-    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
-  });
-  return {
-    focused
-  };
-}
-function useComponentIcon(icon, iconPosition) {
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-function useOptions(props) {
-  const { options, labelKey, valueKey, disabledKey } = toRefs(props);
-  const getOptionLabel = (option) => {
-    if (typeof option === "string") {
-      return option;
-    }
-    if (typeof labelKey.value === "function") {
-      return labelKey.value(option);
-    }
-    return String(
-      labelKey.value ? get(option, labelKey.value) : option
-    );
-  };
-  const getOptionValue = (option) => {
-    if (typeof option === "string") {
-      return option;
-    }
-    if (typeof valueKey.value === "function") {
-      return valueKey.value(option);
-    }
-    return valueKey.value ? get(option, valueKey.value) : option;
-  };
-  const isOptionDisabled = (option) => {
-    if (typeof option === "string") {
-      return false;
-    }
-    if (typeof disabledKey.value === "function") {
-      return disabledKey.value(option);
-    }
-    return disabledKey.value ? get(option, disabledKey.value) : false;
-  };
-  const getOptionGrouped = (option) => {
-    if (typeof option == "string") {
-      return [];
-    }
-    if (typeof option === "object" && option && "options" in option) {
-      return option.options;
-    }
-    return [];
-  };
-  return {
-    options,
-    getOptionLabel,
-    getOptionValue,
-    isOptionDisabled,
-    getOptionGrouped
-  };
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const _hoisted_1$2 = ["for"];
-const _hoisted_2$2 = { class: "vv-select__wrapper" };
-const _hoisted_3$1 = {
-  key: 0,
-  class: "vv-select__input-before"
-};
-const _hoisted_4$1 = { class: "vv-select__inner" };
-const _hoisted_5$1 = ["id"];
-const _hoisted_6$1 = ["disabled", "hidden"];
-const _hoisted_7$1 = ["disabled", "value"];
-const _hoisted_8$1 = ["disabled", "label"];
-const _hoisted_9$1 = ["disabled", "value"];
-const _hoisted_10 = {
-  key: 1,
-  class: "vv-select__input-after"
-};
-const __default__$4 = {
-  name: "VvSelect"
+const __default__$8 = {
+  name: "VvAction"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
-  props: useVvSelectProps(),
-  emits: ["update:modelValue", "focus", "blur"],
-  setup(__props, { emit: __emit }) {
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
-    const VvSelectProps2 = useVvSelectProps();
-    const propsDefaults = useDefaults(
-      "VvSelect",
-      VvSelectProps2,
-      props
-    );
-    const selectEl = ref();
-    const {
-      HintSlot,
-      hasHintLabelOrSlot,
-      hasInvalidLabelOrSlot,
-      hintSlotScope
-    } = HintSlotFactory(propsDefaults, slots);
-    const { focused } = useComponentFocus(selectEl, emit);
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
+    const instance = getCurrentInstance();
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
     const {
-      id,
-      modifiers,
-      disabled,
-      readonly,
-      loading,
-      icon,
-      iconPosition,
-      invalid,
-      valid,
-      floating,
-      multiple
-    } = toRefs(props);
-    const hasId = useUniqueId(id);
-    const hasHintId = computed(() => `${hasId.value}-hint`);
-    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabledOrReadonly.value ? -1 : props.tabindex;
-    });
-    const localModelValue = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (newValue) => {
-        if (Array.isArray(newValue)) {
-          newValue = newValue.filter((item) => item !== void 0);
-          if (newValue.length === 0 && !props.unselectable) {
-            selectEl.value.value = props.modelValue;
-            return;
-          }
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
         }
-        emit("update:modelValue", newValue);
       }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
     });
-    const isDirty = computed(() => {
-      if (Array.isArray(localModelValue.value)) {
-        return localModelValue.value.length > 0;
+    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 props.defaultTag;
       }
-      return localModelValue.value !== void 0 && localModelValue.value !== null;
     });
-    const isVisible = useElementVisibility(selectEl);
-    watch(isVisible, (newValue) => {
-      if (newValue && props.autofocus) {
-        focused.value = true;
+    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
+          };
+        case ActionTag.button:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+        default:
+          return toReturn;
       }
     });
-    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isInvalid = computed(() => {
-      if (props.invalid === true) {
-        return true;
+    function onClick(e) {
+      var _a;
+      if (props.disabled) {
+        e.preventDefault();
+        return;
       }
-      if (props.valid === true) {
-        return false;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
+        emit("click", e);
+        return;
       }
-      return void 0;
-    });
-    const bemCssClasses = useModifiers(
-      "vv-select",
-      modifiers,
-      computed(() => ({
-        "valid": valid.value,
-        "invalid": invalid.value,
-        "loading": loading.value,
-        "disabled": disabled.value,
-        "readonly": readonly.value,
-        "icon-before": hasIconBefore.value !== void 0,
-        "icon-after": hasIconAfter.value !== void 0,
-        "dirty": isDirty.value,
-        "focus": focused.value,
-        "floating": floating.value,
-        "multiple": multiple.value
-      }))
-    );
-    const {
-      getOptionLabel,
-      getOptionValue,
-      isOptionDisabled,
-      getOptionGrouped
-    } = useOptions(props);
-    watch(
-      () => props.options,
-      (newValue) => {
-        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
-          const firstOptionValue = getOptionValue(newValue[0]);
-          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
-        }
-      },
-      { immediate: true }
-    );
-    const hasAttrs = computed(() => {
-      return {
-        "name": props.name,
-        "tabindex": hasTabindex.value,
-        "disabled": isDisabledOrReadonly.value,
-        "required": props.required,
-        "size": props.size,
-        "autocomplete": props.autocomplete,
-        "multiple": props.multiple,
-        "aria-invalid": isInvalid.value,
-        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
-        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
-      };
-    });
-    const slotProps = computed(() => ({
-      valid: props.valid,
-      invalid: props.invalid,
-      modelValue: props.modelValue
-    }));
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(bemCssClasses))
-        },
-        [
-          _ctx.label ? (openBlock(), createElementBlock("label", {
-            key: 0,
-            for: unref(hasId)
-          }, toDisplayString(_ctx.label), 9, _hoisted_1$2)) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2$2, [
-            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode("div", _hoisted_4$1, [
-              unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$9,
-                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
-                null,
-                16
-                /* FULL_PROPS */
-              )) : createCommentVNode("v-if", true),
-              withDirectives(createElementVNode("select", mergeProps({
-                id: unref(hasId),
-                ref_key: "selectEl",
-                ref: selectEl
-              }, unref(hasAttrs), {
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }), [
-                _ctx.placeholder ? (openBlock(), createElementBlock("option", {
-                  key: 0,
-                  value: void 0,
-                  disabled: !_ctx.unselectable,
-                  hidden: !_ctx.unselectable
-                }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("v-if", true),
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(_ctx.options, (option, index) => {
-                    return openBlock(), createElementBlock(
-                      Fragment,
-                      null,
-                      [
-                        !isGroup(option) ? (openBlock(), createElementBlock("option", {
-                          key: index,
-                          disabled: unref(isOptionDisabled)(option),
-                          value: unref(getOptionValue)(option)
-                        }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1)) : (openBlock(), createElementBlock("optgroup", {
-                          key: `group-${index}`,
-                          disabled: unref(isOptionDisabled)(option),
-                          label: unref(getOptionLabel)(option)
-                        }, [
-                          (openBlock(true), createElementBlock(
-                            Fragment,
-                            null,
-                            renderList(unref(getOptionGrouped)(option), (item, i) => {
-                              return openBlock(), createElementBlock("option", {
-                                key: `group-${index}-item-${i}`,
-                                disabled: unref(isOptionDisabled)(item),
-                                value: unref(getOptionValue)(item)
-                              }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
-                            }),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ], 8, _hoisted_8$1))
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    );
-                  }),
-                  256
-                  /* UNKEYED_FRAGMENT */
-                ))
-              ], 16, _hoisted_5$1), [
-                [vModelSelect, unref(localModelValue)]
-              ]),
-              unref(hasIconAfter) ? (openBlock(), createBlock(
-                _sfc_main$9,
-                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
-                null,
-                16
-                /* FULL_PROPS */
-              )) : createCommentVNode("v-if", true)
-            ]),
-            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true)
-          ]),
-          createVNode(unref(HintSlot), {
-            id: unref(hasHintId),
-            class: "vv-select__hint"
-          }, createSlots({
-            _: 2
-            /* DYNAMIC */
-          }, [
-            _ctx.$slots.hint ? {
-              name: "hint",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-              ]),
-              key: "0"
-            } : void 0,
-            _ctx.$slots.loading ? {
-              name: "loading",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-              ]),
-              key: "1"
-            } : void 0,
-            _ctx.$slots.valid ? {
-              name: "valid",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-              ]),
-              key: "2"
-            } : void 0,
-            _ctx.$slots.invalid ? {
-              name: "invalid",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-              ]),
-              key: "3"
-            } : void 0
-          ]), 1032, ["id"])
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-const VvBadgeProps = {
-  ...ModifiersProps,
-  value: [String, Number]
-};
-const __default__$3 = {
-  name: "VvBadge"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
-  props: VvBadgeProps,
-  setup(__props) {
-    const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-badge", modifiers);
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+    }
+    function onMouseover(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
+        emit("mouseover", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+    }
+    function onMouseleave(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
+        emit("mouseleave", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "span",
-        {
-          class: normalizeClass(unref(bemCssClasses))
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled,
+          current: _ctx.current
         },
-        [
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(
-              toDisplayString(_ctx.value),
+              toDisplayString(_ctx.label),
               1
               /* TEXT */
             )
           ])
-        ],
-        2
-        /* CLASS */
-      );
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
     };
   }
 });
-const VvActionEvents = ["click", "mouseover", "mouseleave"];
-const VvActionProps = ActionProps;
-const __default__$2 = {
-  name: "VvAction"
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
-  props: VvActionProps,
-  emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const instance = getCurrentInstance();
-    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 __default__$7 = {
+  name: "VvIcon"
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return Number.parseFloat(props.rotate);
       }
-    );
-    const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+      return props.rotate;
     });
-    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 props.defaultTag;
-      }
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
-    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
-          };
-        case ActionTag.button:
-          return {
-            ...toReturn,
-            type: props.type,
-            disabled: props.disabled
-          };
-        default:
-          return toReturn;
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
+        return iconName;
       }
-    });
-    function onClick(e) {
-      var _a;
-      if (props.disabled) {
-        e.preventDefault();
-        return;
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
       }
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
-        emit("click", e);
-        return;
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function onMouseover(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
-        emit("mouseover", e);
-        return;
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
     }
-    function onMouseleave(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
-        emit("mouseleave", e);
-        return;
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+        });
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
     }
     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,
-          current: _ctx.current
-        },
-        onClickPassive: onClick,
-        onMouseoverPassive: onMouseover,
-        onMouseleavePassive: onMouseleave
-      }), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(
-              toDisplayString(_ctx.label),
-              1
-              /* TEXT */
-            )
-          ])
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 16, ["class"]);
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
-function useInjectedGroupState(groupKey) {
-  const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => group !== void 0);
-  function getGroupOrLocalRef(propName, props, emit) {
-    const groupPropValue = group == null ? void 0 : group[propName];
-    if (groupPropValue) {
-      return computed({
-        get() {
-          return groupPropValue.value;
-        },
-        set(value) {
-          groupPropValue.value = value;
-        }
-      });
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
+}
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
     }
-    const propRef = toRef(props, propName);
-    return computed({
-      get() {
-        return propRef.value;
-      },
-      set(value) {
-        if (emit) {
-          emit(`update:${propName}`, value);
-        }
-      }
-    });
-  }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
   return {
-    group,
-    isInGroup,
-    getGroupOrLocalRef
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-const VvButtonEvents = ["update:modelValue"];
-const VvButtonProps = {
-  ...ActionProps,
-  ...IdProps,
-  ...ModifiersProps,
-  ...UnselectableProps,
-  ...LoadingProps,
-  ...IconProps,
-  /**
-   * Button icon position
-   */
-  iconPosition: {
-    type: String,
-    default: Side.left,
-    validator: (value) => Object.values(Side).includes(value)
-  },
-  /**
-   * Loading icon
-   */
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
-  /**
-   * Enable button toggle
-   */
-  toggle: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Button toggle value
-   */
-  value: {
-    type: [String, Number, Boolean],
-    default: void 0
-  },
-  /**
-   * Value associated with the unchecked state
-   */
-  uncheckedValue: {
-    type: [String, Number, Boolean],
-    default: void 0
-  },
-  /**
-   * Button toggle model value
-   */
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: void 0
-  }
-};
-function useGroupProps(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
-  const { id, iconPosition, icon, label, pressed } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const toggle = getGroupOrLocalRef("toggle", props);
-  const unselectable = getGroupOrLocalRef("unselectable", props);
-  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
-  const modifiers = computed(() => {
-    let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.modifiers.value;
-    const toReturn = /* @__PURE__ */ new Set();
-    if (localModifiers) {
-      if (!Array.isArray(localModifiers)) {
-        localModifiers = localModifiers.split(" ");
-      }
-      localModifiers.forEach((modifier) => toReturn.add(modifier));
-    }
-    if (groupModifiers) {
-      if (!Array.isArray(groupModifiers)) {
-        groupModifiers = groupModifiers.split(" ");
-      }
-      groupModifiers.forEach((modifier) => toReturn.add(modifier));
-    }
-    return Array.from(toReturn);
-  });
-  const disabled = computed(
-    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
-  );
-  return {
-    // group props
-    group,
-    isInGroup,
-    modelValue,
-    toggle,
-    unselectable,
-    multiple,
-    modifiers,
-    disabled,
-    // local props
-    id,
-    pressed,
-    iconPosition,
-    icon,
-    label
-  };
-}
-const _hoisted_1$1 = {
+const _hoisted_1$5 = {
   key: 1,
   class: "vv-button__label"
 };
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 1,
   class: "vv-button__label"
 };
-const __default__$1 = {
+const __default__$6 = {
   name: "VvButton",
   inheritAttrs: false
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   props: VvButtonProps,
   emits: VvButtonEvents,
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2332,7 +1385,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+      return openBlock(), createBlock(_sfc_main$8, mergeProps({
         ...unref(attrs),
         ...unref(hasListeners),
         disabled: unref(disabled),
@@ -2353,14 +1406,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$9, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$7, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
               }, null, 8, ["name"])) : createCommentVNode("v-if", true),
               _ctx.loadingLabel ? (openBlock(), createElementBlock(
                 "span",
-                _hoisted_1$1,
+                _hoisted_1$5,
                 toDisplayString(_ctx.loadingLabel),
                 1
                 /* TEXT */
@@ -2371,13 +1424,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               [
                 renderSlot(_ctx.$slots, "before"),
                 unref(hasIcon) ? (openBlock(), createBlock(
-                  _sfc_main$9,
+                  _sfc_main$7,
                   mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
                   /* FULL_PROPS */
                 )) : createCommentVNode("v-if", true),
-                unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+                unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$2, [
                   renderSlot(_ctx.$slots, "label", {}, () => [
                     createTextVNode(
                       toDisplayString(unref(label)),
@@ -2399,180 +1452,1126 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvComboboxProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
+const VvDropdownProps = {
+  ...IdProps,
   ...DropdownProps,
-  ...LabelProps,
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String,
-    default: "vv-dropdown--mobile-fade-block"
-  },
+  ...ModifiersProps,
   /**
-   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   * Show / hide dropdown programmatically
    */
   modelValue: {
-    type: [String, Number, Boolean, Object, Array],
+    type: Boolean,
     default: void 0
   },
   /**
-   * Label for no search results
-   */
-  noResultsLabel: { type: String, default: "No results" },
-  /**
-   * Label for no options	available
-   */
-  noOptionsLabel: { type: String, default: "No options available" },
-  /**
-   * Label for selected option hint
-   */
-  selectedHintLabel: { type: String, default: "Selected" },
-  /**
-   * Label for deselect action button
-   */
-  deselectActionLabel: { type: String, default: "Deselect" },
-  /**
-   * Label for select option hint
-   */
-  selectHintLabel: { type: String, default: "Press enter to select" },
-  /**
-   * Label for deselected option hint
-   */
-  deselectHintLabel: { type: String, default: "Press enter to remove" },
-  /**
-   * Label close button
-   */
-  closeLabel: { type: String, default: "Close" },
-  /**
-   * Select input placeholder
-   */
-  placeholder: String,
-  /**
-   * Use input text to search on options
-   */
-  searchable: Boolean,
-  /**
-   * Search function to filter options
+   * Dropdown trigger element
    */
-  searchFunction: {
-    type: Function,
-    default: void 0
+  reference: {
+    type: Object,
+    default: null
   },
   /**
-   * On searchable select is the input search placeholder
+   * Dropdown role
    */
-  searchPlaceholder: {
+  role: {
     type: String,
-    default: "Search..."
-  },
-  /**
-   * The input search debounce time in ms
-   */
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  /**
-   * Manage modelValue as string[] or object[]
-   */
-  multiple: Boolean,
-  /**
-   * The min number of selected values
-   */
-  minValues: {
-    type: [Number, String],
-    default: 0
-  },
-  /**
-   * The max number of selected values
-   */
-  maxValues: [Number, String],
-  /**
-   * If true the input will be unselectable
-   * @deprecated use minValues instead
-   */
-  unselectable: { type: Boolean, default: true },
-  /**
-   * The select label separator visible to the user
-   */
-  separator: { type: String, default: ", " },
-  /**
-   * Show native select
-   */
-  native: Boolean,
-  /**
-   * Show badges
-   */
-  badges: Boolean,
-  /**
-   * Badge modifiers
-   */
-  badgeModifiers: {
-    type: [String, Array],
-    default: "action sm"
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    ...DropdownProps.triggerWidth,
-    default: true
-  },
-  /**
-   * Dropdown modifiers
-   */
-  dropdownModifiers: {
-    type: [String, Array],
-    default: "mobile"
-  },
-  /**
-   * Open dropdown on focus
-   */
-  autoOpen: {
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+};
+const VvDropdownItemProps = {
+  focusOnHover: {
     type: Boolean,
     default: false
+  }
+};
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
   },
-  /**
-   * Select first option automatically
-   */
-  autoselectFirst: {
-    type: Boolean,
-    default: false
+  selectHintLabel: {
+    type: String
   },
-  /**
-   * Keep open dropdown on single select
-   */
-  keepOpen: {
+  selectedHintLabel: {
+    type: String
+  },
+  focusOnHover: {
     type: Boolean,
     default: false
   }
 };
-function useVvComboboxProps() {
-  return {
-    ...VvComboboxProps,
-    options: {
-      ...VvComboboxProps.options,
-      type: Array
+function useDropdownProvideTrigger({
+  reference,
+  id,
+  expanded,
+  aria
+}) {
+  const bus = mitt();
+  const component = defineComponent({
+    name: "VvDropdownTriggerProvider",
+    setup() {
+      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+        reference,
+        id,
+        expanded,
+        aria,
+        bus
+      });
     },
-    searchFunction: {
-      ...VvComboboxProps.searchFunction,
-      type: Function
+    render() {
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
     }
+  });
+  return {
+    bus,
+    component
   };
 }
+function useDropdownProvideItem({
+  role,
+  ...others
+}) {
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
+  );
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    ...others
+  });
+  return { itemRole };
+}
+function useDropdownProvideAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ref(ActionRoles.menuitem),
+    expanded
+  });
+}
+const _hoisted_1$4 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$5 = {
+  name: "VvDropdown",
+  inheritAttrs: false
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
+  props: VvDropdownProps,
+  emits: [
+    "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse",
+    "before-enter",
+    "after-leave",
+    "enter",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
+    "leave",
+    "leaveCancelled"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { id } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const attrs = useAttrs();
+    const maxWidth = ref("auto");
+    const maxHeight = ref("auto");
+    const localReferenceEl = ref();
+    const floatingEl = ref();
+    const arrowEl = useTemplateRef("arrowEl");
+    const listEl = useTemplateRef("listEl");
+    const referenceEl = computed({
+      get: () => props.reference ?? localReferenceEl.value,
+      set: (newValue) => {
+        localReferenceEl.value = newValue;
+      }
+    });
+    const hasCustomPosition = ref(false);
+    onMounted(() => {
+      useMutationObserver(
+        floatingEl.value,
+        () => {
+          var _a;
+          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+        },
+        {
+          attributeFilter: ["style"],
+          window
+        }
+      );
+    });
+    const middleware = computed(() => {
+      const toReturn = [];
+      if (props.autoPlacement) {
+        if (typeof props.autoPlacement === "boolean") {
+          toReturn.push(autoPlacement());
+        } else {
+          toReturn.push(
+            autoPlacement(props.autoPlacement)
+          );
+        }
+      } else if (props.flip) {
+        if (typeof props.flip === "boolean") {
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
+        } else {
+          toReturn.push(flip(props.flip));
+        }
+      }
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
+        }) => {
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
+        };
+        if (typeof props.size === "boolean") {
+          toReturn.push(
+            size({
+              apply
+            })
+          );
+        } else {
+          toReturn.push(
+            size({
+              ...props.size,
+              apply
+            })
+          );
+        }
+      }
+      if (props.offset) {
+        toReturn.push(offset(Number(props.offset)));
+        if (["string", "number"].includes(typeof props.offset)) {
+          toReturn.push(offset(Number(props.offset)));
+        } else {
+          toReturn.push(offset(props.offset));
+        }
+      }
+      if (props.arrow) {
+        toReturn.push(
+          arrow({
+            element: arrowEl
+          })
+        );
+      }
+      return toReturn;
+    });
+    const { x, y, middlewareData, placement, strategy } = useFloating(
+      referenceEl,
+      floatingEl,
+      {
+        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: width ? void 0 : maxWidth.value,
+        maxHeight: maxHeight.value,
+        width
+      };
+    });
+    const side = computed(
+      () => placement.value.split("-")[0]
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const staticSide = {
+        [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,
+        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
+        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
+      };
+    });
+    const modelValue = useVModel(props, "modelValue", emit);
+    const localModelValue = ref(false);
+    const expanded = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
+        }
+        modelValue.value = newValue;
+      }
+    });
+    function show() {
+      expanded.value = true;
+    }
+    function hide() {
+      expanded.value = false;
+    }
+    function toggle() {
+      expanded.value = !expanded.value;
+    }
+    function init(el) {
+      referenceEl.value = el;
+    }
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      customPosition: hasCustomPosition
+    });
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        nextTick(() => {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus({
+              preventScroll: true
+            });
+          }
+        });
+      }
+    });
+    onClickOutside(
+      floatingEl,
+      () => {
+        if (!props.keepOpen && expanded.value) {
+          expanded.value = false;
+        }
+      },
+      { ignore: [referenceEl] }
+    );
+    const hasAriaLabelledby = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+    });
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
+    });
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown",
+      modifiers,
+      computed(() => ({
+        arrow: props.arrow
+      }))
+    );
+    const { focused } = useFocusWithin(floatingEl);
+    function getKeyboardFocusableElements(element) {
+      if (!element) {
+        return [];
+      }
+      return [
+        ...element.querySelectorAll(
+          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
+    }
+    function focusNext() {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[0].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    }
+    function focusPrev() {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[focusableElements.length - 1].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    }
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useDropdownProvideItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
+    onKeyStroke("Escape", (e) => {
+      if (expanded.value) {
+        e.preventDefault();
+        hide();
+      }
+    });
+    onKeyStroke("ArrowDown", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusNext();
+      }
+    });
+    onKeyStroke("ArrowUp", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusPrev();
+      }
+    });
+    onKeyStroke([" ", "Enter"], (e) => {
+      const htmlEl = e.target;
+      if (expanded.value && focused.value && htmlEl) {
+        htmlEl == null ? void 0 : htmlEl.click();
+      }
+    });
+    const dropdownTransitionHandlers = {
+      "before-enter": () => {
+        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+        emit("beforeEnter");
+      },
+      "after-leave": () => {
+        emit(expanded.value ? "afterExpand" : "afterCollapse");
+        emit("afterLeave");
+      },
+      "enter": () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("afterEnter");
+      },
+      "enter-cancelled": () => {
+        emit("enterCancelled");
+      },
+      "before-leave": () => {
+        emit("beforeLeave");
+      },
+      "leave": () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leaveCancelled");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1$4),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+const _hoisted_1$3 = {
+  class: "vv-dropdown-optgroup",
+  role: "presentation",
+  tabindex: "-1"
+};
+const __default__$4 = {
+  name: "VvDropdownOptgroup"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  props: {
+    ...LabelProps
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "li",
+        _hoisted_1$3,
+        toDisplayString(props.label),
+        1
+        /* TEXT */
+      );
+    };
+  }
+});
+const __default__$3 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: VvDropdownItemProps,
+  setup(__props) {
+    const props = __props;
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useDropdownProvideAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue && props.focusOnHover) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+const _hoisted_1$2 = ["title"];
+const __default__$2 = {
+  name: "VvDropdownOption"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvDropdownOptionProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown-option",
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
+      }))
+    );
+    const hintLabel = computed(() => {
+      if (props.selected) {
+        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
+      }
+      if (!props.disabled) {
+        return props.selectHintLabel;
+      }
+      return "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$3, {
+        class: normalizeClass(unref(bemCssClasses)),
+        tabindex: _ctx.disabled ? -1 : 0,
+        "aria-selected": _ctx.selected,
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("span", {
+            class: "vv-dropdown-option__hint",
+            title: unref(hintLabel)
+          }, [
+            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
+            ])
+          ], 8, _hoisted_1$2)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
+    };
+  }
+});
+const VvSelectProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...LabelProps,
+  /**
+   * This Boolean attribute indicates that multiple options can be selected in the list.
+   * If it is not specified, then only one option can be selected at a time.
+   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+   */
+  multiple: Boolean,
+  /**
+   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+   */
+  required: Boolean,
+  /**
+   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+   * this attribute represents the number of rows in the list that should be visible at one time.
+   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+   */
+  size: [String, Number],
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Select placeholder
+   */
+  placeholder: String
+};
+function useVvSelectProps() {
+  return {
+    ...VvSelectProps,
+    options: {
+      ...VvSelectProps.options,
+      type: Array,
+      default: () => []
+    }
+  };
+}
+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;
+    }, {});
+  });
+}
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
+  };
+}
+function useOptions(props) {
+  const { options, labelKey, valueKey, disabledKey } = toRefs(props);
+  const getOptionLabel = (option) => {
+    if (typeof option === "string") {
+      return option;
+    }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
+    return String(
+      labelKey.value ? get(option, labelKey.value) : option
+    );
+  };
+  const getOptionValue = (option) => {
+    if (typeof option === "string") {
+      return option;
+    }
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
+  };
+  const isOptionDisabled = (option) => {
+    if (typeof option === "string") {
+      return false;
+    }
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
+  };
+  const getOptionGrouped = (option) => {
+    if (typeof option == "string") {
+      return [];
+    }
+    if (typeof option === "object" && option && "options" in option) {
+      return option.options;
+    }
+    return [];
+  };
+  return {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    isOptionDisabled,
+    getOptionGrouped
+  };
+}
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = { class: "vv-select__wrapper" };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "vv-select__input-before"
+};
+const _hoisted_4$1 = { class: "vv-select__inner" };
+const _hoisted_5$1 = ["id"];
+const _hoisted_6$1 = ["disabled", "hidden"];
+const _hoisted_7$1 = ["disabled", "value"];
+const _hoisted_8$1 = ["disabled", "label"];
+const _hoisted_9$1 = ["disabled", "value"];
+const _hoisted_10 = {
+  key: 1,
+  class: "vv-select__input-after"
+};
+const __default__$1 = {
+  name: "VvSelect"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: useVvSelectProps(),
+  emits: ["update:modelValue", "focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const VvSelectProps2 = useVvSelectProps();
+    const propsDefaults = useDefaults(
+      "VvSelect",
+      VvSelectProps2,
+      props
+    );
+    const selectEl = useTemplateRef("selectEl");
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(propsDefaults, slots);
+    const { focused } = useComponentFocus(selectEl, emit);
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
+    const {
+      id,
+      modifiers,
+      disabled,
+      readonly,
+      loading,
+      icon,
+      iconPosition,
+      invalid,
+      valid,
+      floating,
+      multiple
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+          if (newValue.length === 0 && !props.unselectable && selectEl.value) {
+            selectEl.value.value = String(props.modelValue);
+            return;
+          }
+        }
+        emit("update:modelValue", newValue);
+      }
+    });
+    const isDirty = computed(() => {
+      if (Array.isArray(localModelValue.value)) {
+        return localModelValue.value.length > 0;
+      }
+      return localModelValue.value !== void 0 && localModelValue.value !== null;
+    });
+    const isVisible = useElementVisibility(selectEl);
+    watch(isVisible, (newValue) => {
+      if (newValue && props.autofocus) {
+        focused.value = true;
+      }
+    });
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const isInvalid = computed(() => {
+      if (props.invalid === true) {
+        return true;
+      }
+      if (props.valid === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const bemCssClasses = useModifiers(
+      "vv-select",
+      modifiers,
+      computed(() => ({
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "loading": loading.value,
+        "disabled": disabled.value,
+        "readonly": readonly.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
+        "dirty": isDirty.value,
+        "focus": focused.value,
+        "floating": floating.value,
+        "multiple": multiple.value
+      }))
+    );
+    const {
+      getOptionLabel,
+      getOptionValue,
+      isOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          const firstOptionValue = getOptionValue(newValue[0]);
+          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
+        }
+      },
+      { immediate: true }
+    );
+    const hasAttrs = computed(() => {
+      return {
+        "name": props.name,
+        "tabindex": hasTabindex.value,
+        "disabled": isDisabledOrReadonly.value,
+        "required": props.required,
+        "size": props.size,
+        "autocomplete": props.autocomplete,
+        "multiple": props.multiple,
+        "aria-invalid": isInvalid.value,
+        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
+      };
+    });
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId)
+          }, toDisplayString(_ctx.label), 9, _hoisted_1$1)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$1, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_4$1, [
+              unref(hasIconBefore) ? (openBlock(), createBlock(
+                _sfc_main$7,
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true),
+              withDirectives(createElementVNode("select", mergeProps({
+                id: unref(hasId),
+                ref_key: "selectEl",
+                ref: selectEl
+              }, unref(hasAttrs), {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              }), [
+                _ctx.placeholder ? (openBlock(), createElementBlock("option", {
+                  key: 0,
+                  value: void 0,
+                  disabled: !_ctx.unselectable,
+                  hidden: !_ctx.unselectable
+                }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("v-if", true),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.options, (option, index) => {
+                    return openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      [
+                        !isGroup(option) ? (openBlock(), createElementBlock("option", {
+                          key: index,
+                          disabled: unref(isOptionDisabled)(option),
+                          value: unref(getOptionValue)(option)
+                        }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1)) : (openBlock(), createElementBlock("optgroup", {
+                          key: `group-${index}`,
+                          disabled: unref(isOptionDisabled)(option),
+                          label: unref(getOptionLabel)(option)
+                        }, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(unref(getOptionGrouped)(option), (item, i) => {
+                              return openBlock(), createElementBlock("option", {
+                                key: `group-${index}-item-${i}`,
+                                disabled: unref(isOptionDisabled)(item),
+                                value: unref(getOptionValue)(item)
+                              }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ], 8, _hoisted_8$1))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    );
+                  }),
+                  256
+                  /* UNKEYED_FRAGMENT */
+                ))
+              ], 16, _hoisted_5$1), [
+                [vModelSelect, unref(localModelValue)]
+              ]),
+              unref(hasIconAfter) ? (openBlock(), createBlock(
+                _sfc_main$7,
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true)
+            ]),
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true)
+          ]),
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-select__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "for"];
 const _hoisted_3 = ["id", "aria-controls", "placeholder"];
@@ -2594,10 +2593,10 @@ const _hoisted_9 = {
 const __default__ = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$8,
-    VvDropdownOption: _sfc_main$6,
-    VvDropdownOptgroup: _sfc_main$5,
-    VvButton: _sfc_main$1
+    VvDropdown: _sfc_main$5,
+    VvDropdownOption: _sfc_main$2,
+    VvDropdownOptgroup: _sfc_main$4,
+    VvButton: _sfc_main$6
   }
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -2617,7 +2616,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputEl = ref(null);
     const inputSearchEl = ref(null);
     const wrapperEl = ref(null);
-    const dropdownEl = ref(null);
+    const dropdownEl = useTemplateRef("dropdownEl");
     const {
       HintSlot,
       hasHintLabelOrSlot,
@@ -2937,7 +2936,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "vv-select__wrapper"
           },
           [
-            createVNode(_sfc_main$8, mergeProps({
+            createVNode(_sfc_main$5, mergeProps({
               ref_key: "dropdownEl",
               ref: dropdownEl,
               modelValue: unref(expanded),
@@ -2953,7 +2952,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("v-if", true),
                 createElementVNode("div", _hoisted_5, [
                   unref(hasIconBefore) ? (openBlock(), createBlock(
-                    _sfc_main$9,
+                    _sfc_main$7,
                     mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                     null,
                     16
@@ -2988,7 +2987,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 1 },
                             renderList(unref(selectedOptions), (option, index) => {
-                              return openBlock(), createBlock(_sfc_main$3, {
+                              return openBlock(), createBlock(_sfc_main$9, {
                                 key: index,
                                 modifiers: _ctx.badgeModifiers,
                                 class: "vv-select__badge"
@@ -3005,7 +3004,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     type: "button",
                                     onClick: withModifiers(($event) => onInput(option), ["stop"])
                                   }, [
-                                    createVNode(_sfc_main$9, { name: "close" })
+                                    createVNode(_sfc_main$7, { name: "close" })
                                   ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
                                 ]),
                                 _: 2
@@ -3034,7 +3033,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   ], 16, _hoisted_6),
                   unref(hasIconAfter) ? (openBlock(), createBlock(
-                    _sfc_main$9,
+                    _sfc_main$7,
                     mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                     null,
                     16
@@ -3060,7 +3059,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 0 },
                             [
-                              createVNode(_sfc_main$5, {
+                              createVNode(_sfc_main$4, {
                                 label: unref(getOptionLabel)(option)
                               }, null, 8, ["label"]),
                               (openBlock(true), createElementBlock(
@@ -3069,7 +3068,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 renderList(unref(getOptionGrouped)(
                                   option
                                 ), (item, i) => {
-                                  return openBlock(), createBlock(_sfc_main$6, mergeProps({ ref_for: true }, {
+                                  return openBlock(), createBlock(_sfc_main$2, mergeProps({ ref_for: true }, {
                                     selected: isOptionSelected(item),
                                     disabled: isOptionDisabledOrNotSelectable(item),
                                     unselectable: unref(isUnselectable),
@@ -3106,7 +3105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ],
                             64
                             /* STABLE_FRAGMENT */
-                          )) : (openBlock(), createBlock(_sfc_main$6, mergeProps({
+                          )) : (openBlock(), createBlock(_sfc_main$2, mergeProps({
                             key: 1,
                             ref_for: true
                           }, {
@@ -3145,7 +3144,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }),
                     128
                     /* KEYED_FRAGMENT */
-                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
+                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$2, {
                     key: 1,
                     modifiers: "inert"
                   }, {
@@ -3160,7 +3159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 3
                     /* FORWARDED */
-                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
+                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$2, {
                     key: 2,
                     modifiers: "inert"
                   }, {
@@ -3182,7 +3181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                   var _a;
                   return [
-                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$1, {
+                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$6, {
                       key: 0,
                       label: unref(propsDefaults).closeLabel,
                       modifiers: "secondary",
@@ -3259,7 +3258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           } : void 0
         ]), 1032, ["id"])
       ], 10, _hoisted_1)) : (openBlock(), createBlock(
-        _sfc_main$4,
+        _sfc_main$1,
         mergeProps({ key: 1 }, unref(selectProps), {
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
         }),