@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

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

@@ -1,10 +1,19 @@
-import { inject, computed, unref, defineComponent, 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, resolveDynamicComponent, toRef, withModifiers, vModelText } from "vue";
+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 { 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, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
+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";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -62,15 +71,10 @@ var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
   DropdownItemRole2["presentation"] = "presentation";
   return DropdownItemRole2;
 })(DropdownItemRole || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+  "buttonGroup"
+);
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
@@ -80,6 +84,145 @@ 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.
@@ -95,10 +238,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -111,27 +251,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -144,49 +290,73 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const SelectedProps = {
   /**
    * Whether the item is selected
    */
-  selected: Boolean
+  selected: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -217,7 +387,10 @@ const IconProps = {
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -238,7 +411,10 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
 };
 const UnselectableProps = {
   /**
@@ -274,7 +450,8 @@ const DropdownProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -342,7 +519,8 @@ const DropdownProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 };
 const IdNameProps = {
@@ -359,7 +537,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -389,401 +570,78 @@ const ActionProps = {
   ariaLabel: {
     type: String,
     default: void 0
-  }
-};
-const VvComboboxEvents = [
-  "update:modelValue",
-  "change:search",
-  "focus",
-  "blur"
-];
-const VvComboboxProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...UnselectableProps,
-  ...DropdownProps,
-  ...LabelProps,
+  },
   /**
-   * Dropdown show / hide transition name
+   * Default tag for the action
    */
-  transitionName: {
+  defaultTag: {
     type: String,
-    default: "vv-dropdown--mobile-fade-block"
+    default: ActionTag.button
+  }
+};
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
   },
+  storageKey: String
+});
+const VvDropdownProps = {
+  ...IdProps,
+  ...DropdownProps,
+  ...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 max number of selected values
-   */
-  maxValues: [Number, String],
-  /**
-   * 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
-  },
-  /**
-   * Keep open dropdown on single select
-   */
-  keepOpen: {
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+};
+const VvDropdownItemProps = {
+  focusOnHover: {
     type: Boolean,
     default: false
   }
 };
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  name: {
-    type: String,
-    required: true
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
   },
-  /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  provider: {
+  selectHintLabel: {
     type: String
   },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
+  selectedHintLabel: {
+    type: String
   },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
-};
-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: VvIconProps,
-  setup(__props) {
-    const props = __props;
-    const hasRotate = computed(() => {
-      if (typeof props.rotate === "string") {
-        return 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("", true);
-    };
-  }
-});
-const VvDropdownProps = {
-  ...IdProps,
-  ...DropdownProps,
-  ...ModifiersProps,
-  /**
-   * Show / hide dropdown programmatically
-   */
-  modelValue: {
+  focusOnHover: {
     type: Boolean,
-    default: void 0
-  },
-  /**
-   * Dropdown trigger element
-   */
-  reference: {
-    type: Object,
-    default: null
-  },
-  /**
-   * Dropdown role
-   */
-  role: {
-    type: String,
-    default: DropdownRole.menu,
-    validator: (value) => Object.values(DropdownRole).includes(value)
+    default: false
   }
 };
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+}
 function useProvideDropdownTrigger({
   reference,
   id,
@@ -814,14 +672,14 @@ function useProvideDropdownTrigger({
 }
 function useProvideDropdownItem({
   role,
-  expanded
+  ...others
 }) {
   const itemRole = computed(
     () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
   provide(INJECTION_KEY_DROPDOWN_ITEM, {
     role: itemRole,
-    expanded
+    ...others
   });
   return { itemRole };
 }
@@ -843,6 +701,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
@@ -850,14 +710,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     "before-enter",
     "after-leave",
     "enter",
-    "after-enter",
-    "enter-cancelled",
-    "before-leave",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
     "leave",
-    "leave-cancelled"
+    "leaveCancelled"
   ],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
     const attrs = useAttrs();
@@ -1012,18 +873,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         modelValue.value = newValue;
       }
     });
-    const show = () => {
+    function show() {
       expanded.value = true;
-    };
-    const hide = () => {
+    }
+    function hide() {
       expanded.value = false;
-    };
-    const toggle = () => {
+    }
+    function toggle() {
       expanded.value = !expanded.value;
-    };
-    const init = (el) => {
+    }
+    function init(el) {
       referenceEl.value = el;
-    };
+    }
     __expose({
       toggle,
       show,
@@ -1071,7 +932,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     });
     bus.on("click", toggle);
     const { role, modifiers } = toRefs(props);
-    const { itemRole } = useProvideDropdownItem({ role, expanded });
     const bemCssClasses = useModifiers(
       "vv-dropdown",
       modifiers,
@@ -1092,7 +952,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
       );
     }
-    const focusNext = () => {
+    function focusNext() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -1115,8 +975,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
-    const focusPrev = () => {
+    }
+    function focusPrev() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -1139,7 +999,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
+    }
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useProvideDropdownItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
     onKeyStroke("Escape", (e) => {
       if (expanded.value) {
         e.preventDefault();
@@ -1167,76 +1034,96 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const dropdownTransitionHandlers = {
       "before-enter": () => {
         emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
         emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("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
-        }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
-          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)) : createCommentVNode("", 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), [
-              [vShow, unref(expanded)]
-            ])
-          ]),
-          _: 3
-        }, 16, ["name"])
-      ], 64);
+      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$5),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });
@@ -1254,7 +1141,9 @@ const __default__$7 = {
 };
 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 });
@@ -1262,18 +1151,24 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (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);
+      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 */
+      );
     };
   }
 });
@@ -1283,21 +1178,7 @@ const __default__$6 = {
 };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
-  props: {
-    ...DisabledProps,
-    ...SelectedProps,
-    ...UnselectableProps,
-    ...ModifiersProps,
-    deselectHintLabel: {
-      type: String
-    },
-    selectHintLabel: {
-      type: String
-    },
-    selectedHintLabel: {
-      type: String
-    }
-  },
+  props: VvDropdownOptionProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
@@ -1317,13 +1198,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       if (!props.disabled) {
         return props.selectHintLabel;
       }
+      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
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
@@ -1332,12 +1215,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             title: unref(hintLabel)
           }, [
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
-              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
             ])
           ], 8, _hoisted_1$4)
         ]),
         _: 3
-      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+        /* FORWARDED */
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
     };
   }
 });
@@ -1357,7 +1245,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$3, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock(
+        "li",
+        _hoisted_1$3,
+        toDisplayString(props.label),
+        1
+        /* TEXT */
+      );
     };
   }
 });
@@ -1376,32 +1270,36 @@ function deepEquals(a, b) {
     let i, length, key;
     if (arrA && arrB) {
       length = a.length;
-      if (length != b.length)
+      if (length !== b.length)
         return false;
-      for (i = length; i-- !== 0; )
+      for (i = length; i-- !== 0; ) {
         if (!deepEquals(a[i], b[i]))
           return false;
+      }
       return true;
     }
-    if (arrA != arrB)
+    if (arrA !== arrB)
       return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
+    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, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
+      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();
+      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; )
+    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]))
@@ -1409,11 +1307,11 @@ function deepEquals(a, b) {
     }
     return true;
   }
-  return a !== a && b !== b;
+  return Number.isNaN(a) && Number.isNaN(b);
 }
 function resolveFieldData(data, field) {
   if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
+    if (!field.includes(".")) {
       return data[field];
     } else {
       const fields = field.split(".");
@@ -1430,18 +1328,6 @@ function resolveFieldData(data, field) {
     return null;
   }
 }
-function findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
 function contains(value, list) {
   if (value != null && list && list.length) {
     for (const val of list) {
@@ -1452,17 +1338,6 @@ function contains(value, list) {
   }
   return false;
 }
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
-}
-function removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
-  }
-}
 function isString(value) {
   return typeof value === "string" || value instanceof String;
 }
@@ -1627,12 +1502,28 @@ const VvSelectProps = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Select placeholder
    */
   placeholder: String
 };
-const VvSelectEmits = ["update:modelValue", "focus", "blur"];
+function useVvSelectProps() {
+  return {
+    ...VvSelectProps,
+    options: {
+      ...VvSelectProps.options,
+      type: Array,
+      default: () => []
+    }
+  };
+}
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -1696,30 +1587,30 @@ function useComponentFocus(inputTemplateRef, emit) {
   };
 }
 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(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
   );
   const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
   );
   const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
   );
   const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
   );
   const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
   );
   const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
   );
-  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;
-  });
   return {
     hasIcon,
     hasIconLeft,
@@ -1733,26 +1624,42 @@ function useComponentIcon(icon, iconPosition) {
 function useOptions(props) {
   const { options, labelKey, valueKey, disabledKey } = toRefs(props);
   const getOptionLabel = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
+    }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    }
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return false;
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    }
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option == "string") {
       return [];
-    return option.options || [];
+    }
+    if (typeof option === "object" && option && "options" in option) {
+      return option.options;
+    }
+    return [];
   };
   return {
     options,
@@ -1783,23 +1690,33 @@ const __default__$4 = {
 };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
-  props: VvSelectProps,
-  emits: VvSelectEmits,
-  setup(__props, { emit }) {
+  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",
-      VvSelectProps,
+      VvSelectProps2,
       props
     );
-    const select = ref();
+    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 {
       id,
       modifiers,
@@ -1815,22 +1732,38 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
-    const { focused } = useComponentFocus(select, emit);
-    const isVisible = useElementVisibility(select);
+    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;
+          }
+        }
+        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 { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const isDisabled = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabled.value ? -1 : props.tabindex;
-    });
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isInvalid = computed(() => {
       if (props.invalid === true) {
         return true;
@@ -1844,28 +1777,44 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       "vv-select",
       modifiers,
       computed(() => ({
-        valid: valid.value,
-        invalid: invalid.value,
-        loading: loading.value,
-        disabled: disabled.value,
-        readonly: readonly.value,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
-        dirty: isDirty.value,
-        focus: focused.value,
-        floating: floating.value,
-        multiple: multiple.value
+        "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: isDisabled.value,
-        required: props.required,
-        size: props.size,
-        autocomplete: props.autocomplete,
-        multiple: props.multiple,
+        "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
@@ -1876,124 +1825,136 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const {
-      getOptionLabel,
-      getOptionValue,
-      isOptionDisabled,
-      getOptionGrouped
-    } = useOptions(props);
-    const localModelValue = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (newValue) => {
-        if (Array.isArray(newValue)) {
-          newValue = newValue.filter((item) => item !== void 0);
-        }
-        emit("update:modelValue", newValue);
-      }
-    });
-    const isGroup = (option) => {
-      if (typeof option === "string")
-        return false;
-      return option && option.options && option.options.length > 0;
-    };
     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("", true),
-        createElementVNode("div", _hoisted_2$2, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$1, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-              key: 0,
-              class: "vv-select__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("select", mergeProps({
-              id: unref(hasId),
-              ref_key: "select",
-              ref: select,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-            }, unref(hasAttrs)), [
-              _ctx.placeholder ? (openBlock(), createElementBlock("option", {
-                key: 0,
-                value: void 0,
-                disabled: !_ctx.unselectable,
-                hidden: !_ctx.unselectable
-              }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("", 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))
-                  ], 8, _hoisted_8$1))
-                ], 64);
-              }), 256))
-            ], 16, _hoisted_5$1), [
-              [vModelSelect, unref(localModelValue)]
+      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)
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-              key: 1,
-              class: "vv-select__icon vv-select__icon-after"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
-          _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);
+          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 */
+      );
     };
   }
 });
@@ -2012,14 +1973,23 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-badge", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "status"
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -2032,8 +2002,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
+  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 });
@@ -2064,7 +2036,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         case props.href !== void 0:
           return ActionTag.a;
         default:
-          return ActionTag.button;
+          return props.defaultTag;
       }
     });
     const hasProps = computed(() => {
@@ -2089,30 +2061,44 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             to: props.to,
             target: props.target
           };
-        default:
+        case ActionTag.button:
           return {
             ...toReturn,
             type: props.type,
             disabled: props.disabled
           };
+        default:
+          return toReturn;
       }
     });
-    const onClick = (e) => {
+    function onClick(e) {
+      var _a;
       if (props.disabled) {
         e.preventDefault();
         return;
       }
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
+        emit("click", e);
+        return;
+      }
       dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-      emit("click", e);
-    };
-    const onMouseover = (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);
-      emit("mouseover", e);
-    };
-    const onMouseleave = (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);
-      emit("mouseleave", e);
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
         ref_key: "element",
@@ -2129,23 +2115,28 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.label), 1)
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["class"]);
     };
   }
 });
 function useInjectedGroupState(groupKey) {
   const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
+  const isInGroup = computed(() => group !== void 0);
   function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
       return computed({
         get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
+          return groupPropValue.value;
         },
         set(value) {
           groupPropValue.value = value;
@@ -2158,8 +2149,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -2176,10 +2168,7 @@ const VvButtonProps = {
   ...ModifiersProps,
   ...UnselectableProps,
   ...LoadingProps,
-  /**
-   * Button icon
-   */
-  icon: [String, Object],
+  ...IconProps,
   /**
    * Button icon position
    */
@@ -2226,14 +2215,11 @@ function useGroupProps(props, emit) {
   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.value.multiple.value) ?? false);
+  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.value.modifiers.value;
+    let groupModifiers = group == null ? void 0 : group.modifiers.value;
     const toReturn = /* @__PURE__ */ new Set();
     if (localModifiers) {
       if (!Array.isArray(localModifiers)) {
@@ -2250,10 +2236,7 @@ function useGroupProps(props, emit) {
     return Array.from(toReturn);
   });
   const disabled = computed(
-    () => {
-      var _a;
-      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
-    }
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
   );
   return {
     // group props
@@ -2282,14 +2265,16 @@ const _hoisted_2$1 = {
   class: "vv-button__label"
 };
 const __default__$1 = {
-  name: "VvButton"
+  name: "VvButton",
+  inheritAttrs: false
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvButtonProps,
   emits: VvButtonEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const attrs = useAttrs();
     const slots = useSlots();
     const {
@@ -2324,10 +2309,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       "vv-button",
       modifiers,
       computed(() => ({
-        reverse: [Side.right, Side.bottom].includes(
+        "reverse": [Side.right, Side.bottom].includes(
           iconPosition.value
         ),
-        column: [Side.top, Side.bottom].includes(
+        "column": [Side.top, Side.bottom].includes(
           iconPosition.value
         ),
         "icon-only": Boolean(
@@ -2335,13 +2320,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         )
       }))
     );
-    const hasIconProps = computed(
-      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
-    );
+    const { hasIcon } = useComponentIcon(icon);
     const toggleValue = computed(() => {
       return props.value !== void 0 ? props.value : name.value;
     });
-    const onClick = () => {
+    const hasListeners = computed(() => {
+      if (!toggle.value) {
+        return void 0;
+      }
+      return {
+        onClick
+      };
+    });
+    function onClick() {
       if (toggle.value) {
         if (Array.isArray(modelValue.value)) {
           if (contains(toggleValue.value, modelValue.value)) {
@@ -2361,9 +2352,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         modelValue.value = toggleValue.value;
       }
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$2, mergeProps({
+        ...unref(attrs),
+        ...unref(hasListeners),
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -2377,8 +2370,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         id: unref(hasId),
         ref_key: "element",
         ref: element,
-        class: unref(bemCssClasses),
-        onClick
+        class: unref(bemCssClasses)
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
@@ -2387,28 +2379,222 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
-              }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
-            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                key: 0,
-                class: "vv-button__icon"
-              }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
-              unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
-                renderSlot(_ctx.$slots, "label", {}, () => [
-                  createTextVNode(toDisplayString(unref(label)), 1)
-                ])
-              ])) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "after")
-            ], 64))
+              }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+              _ctx.loadingLabel ? (openBlock(), createElementBlock(
+                "span",
+                _hoisted_1$1,
+                toDisplayString(_ctx.loadingLabel),
+                1
+                /* TEXT */
+              )) : createCommentVNode("v-if", true)
+            ]) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                renderSlot(_ctx.$slots, "before"),
+                unref(hasIcon) ? (openBlock(), createBlock(
+                  _sfc_main$9,
+                  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, [
+                  renderSlot(_ctx.$slots, "label", {}, () => [
+                    createTextVNode(
+                      toDisplayString(unref(label)),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true),
+                renderSlot(_ctx.$slots, "after")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["id", "class"]);
     };
   }
 });
+const VvComboboxProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...DropdownProps,
+  ...LabelProps,
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: "vv-dropdown--mobile-fade-block"
+  },
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    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
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * On searchable select is the input search placeholder
+   */
+  searchPlaceholder: {
+    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: {
+    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
+    },
+    searchFunction: {
+      ...VvComboboxProps.searchFunction,
+      type: Function
+    }
+  };
+}
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "for"];
 const _hoisted_3 = ["id", "aria-controls", "placeholder"];
@@ -2417,7 +2603,7 @@ const _hoisted_4 = {
   class: "vv-select__input-before"
 };
 const _hoisted_5 = { class: "vv-select__inner" };
-const _hoisted_6 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
+const _hoisted_6 = ["aria-controls", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
 const _hoisted_7 = {
   key: 0,
   class: "vv-select__value"
@@ -2438,31 +2624,28 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: VvComboboxProps,
-  emits: VvComboboxEvents,
-  setup(__props, { emit }) {
+  props: useVvComboboxProps(),
+  emits: ["update:modelValue", "update:search", "change:search", "focus", "blur"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
+    const VvComboboxProps2 = useVvComboboxProps();
     const propsDefaults = useDefaults(
       "VvCombobox",
-      VvComboboxProps,
+      VvComboboxProps2,
       props
     );
-    const isGroup = (option) => {
-      if (typeof option === "string") {
-        return false;
-      }
-      return option.options && option.options.length > 0;
-    };
+    const inputEl = ref(null);
+    const inputSearchEl = ref(null);
+    const wrapperEl = ref(null);
+    const dropdownEl = ref(null);
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
-    const inputEl = ref(null);
-    const inputSearchEl = ref(null);
-    const wrapperEl = ref(null);
     const { focused } = useComponentFocus(inputEl, emit);
     const { focused: focusedWithin } = useFocusWithin(wrapperEl);
     watch(focused, (newValue) => {
@@ -2487,27 +2670,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       searchText,
       computed(() => Number(props.debounceSearch))
     );
-    watch(
-      debouncedSearchText,
-      () => emit("change:search", debouncedSearchText.value)
-    );
+    watch(debouncedSearchText, () => {
+      emit("update:search", debouncedSearchText.value);
+      emit("change:search", debouncedSearchText.value);
+    });
     const expanded = ref(false);
-    const toggleExpanded = () => {
-      if (props.disabled || props.readonly)
+    function toggleExpanded() {
+      if (isDisabledOrReadonly.value)
         return;
       expanded.value = !expanded.value;
-    };
-    const expand = () => {
-      if (props.disabled || props.readonly || expanded.value)
+    }
+    function expand() {
+      if (isDisabledOrReadonly.value || expanded.value)
         return;
       expanded.value = true;
-    };
-    const collapse = () => {
-      if (props.disabled || props.readonly || !expanded.value)
+    }
+    function collapse() {
+      if (isDisabledOrReadonly.value || !expanded.value)
         return;
       expanded.value = false;
-    };
-    const onAfterExpand = () => {
+    }
+    function onAfterExpand() {
       if (propsDefaults.value.searchable) {
         if (inputSearchEl.value) {
           inputSearchEl.value.focus({
@@ -2515,12 +2698,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           });
         }
       }
-    };
-    const onAfterCollapse = () => {
+    }
+    function onAfterCollapse() {
       if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
-    };
+    }
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       icon,
@@ -2538,32 +2728,68 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
-    const localLoading = ref(false);
-    const isLoading = computed(() => localLoading.value || loading.value);
-    const dropdownEl = ref();
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const isDirty = computed(() => !isEmpty(props.modelValue));
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
     const hasTabindex = computed(() => {
-      return disabled.value || readonly.value ? -1 : props.tabindex;
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        if (Array.isArray(props.modelValue)) {
+          return new Set(props.modelValue);
+        }
+        return props.modelValue !== void 0 && props.modelValue !== null ? /* @__PURE__ */ new Set([props.modelValue]) : /* @__PURE__ */ new Set();
+      },
+      set: (value) => {
+        emit("update:modelValue", props.multiple ? [...value] : [...value].pop());
+      }
+    });
+    const sizeOfModelValue = computed(() => localModelValue.value.size);
+    const isDirty = computed(() => sizeOfModelValue.value > 0);
+    const hasMaxValues = computed(() => {
+      if (!props.multiple) {
+        return 1;
+      }
+      if (props.maxValues === void 0) {
+        return Infinity;
+      }
+      return Number(props.maxValues);
+    });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      if (!props.unselectable) {
+        return false;
+      }
+      return sizeOfModelValue.value > Number(props.minValues);
+    });
+    const isSelectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      if (!props.multiple) {
+        return true;
+      }
+      return sizeOfModelValue.value < hasMaxValues.value;
     });
+    const localLoading = ref(false);
+    const isLoading = computed(() => localLoading.value || loading.value);
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const bemCssClasses = useModifiers(
       "vv-select",
       modifiers,
       computed(() => ({
-        disabled: disabled.value,
-        loading: isLoading.value,
-        readonly: readonly.value,
-        "icon-before": Boolean(hasIconBefore.value),
-        "icon-after": Boolean(hasIconAfter.value),
-        valid: valid.value,
-        invalid: invalid.value,
-        dirty: isDirty.value,
-        focus: focused.value,
-        floating: floating.value,
-        badges: props.badges
+        "disabled": disabled.value,
+        "loading": isLoading.value,
+        "readonly": readonly.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "dirty": isDirty.value,
+        "focus": focused.value || focusedWithin.value || expanded.value,
+        "floating": floating.value,
+        "badges": props.badges
       }))
     );
     const {
@@ -2572,6 +2798,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getOptionGrouped,
       isOptionDisabled
     } = useOptions(props);
+    function isOptionDisabledOrNotSelectable(option) {
+      return isOptionDisabled(option) || !isSelectable.value && !isOptionSelected(option);
+    }
     const filteredOptions = computedAsync(async () => {
       var _a;
       if (propsDefaults.value.searchFunction) {
@@ -2590,10 +2819,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     function isOptionSelected(option) {
-      if (Array.isArray(props.modelValue)) {
-        return contains(option, props.modelValue) || contains(getOptionValue(option), props.modelValue);
-      }
-      return equals(option, props.modelValue) || equals(getOptionValue(option), props.modelValue);
+      return localModelValue.value.has(getOptionValue(option));
     }
     const selectedOptions = computed(() => {
       const options = props.options.reduce(
@@ -2612,44 +2838,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasValue = computed(() => {
       return selectedOptions.value.map((option) => getOptionLabel(option)).join(props.separator);
     });
-    const onClickInput = () => {
+    function onClickInput() {
       props.autoOpen ? expand() : toggleExpanded();
-    };
-    const onInput = (option) => {
-      var _a;
-      if (props.disabled || props.readonly) {
-        return;
+    }
+    function onInput(option) {
+      const isSelected = isOptionSelected(option);
+      if (isSelected && isUnselectable.value) {
+        localModelValue.value.delete(getOptionValue(option));
+      } else if (!isSelected && isSelectable.value) {
+        localModelValue.value.add(getOptionValue(option));
       }
-      const value = getOptionValue(option);
-      let toReturn = value;
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue)) {
-          const maxValues = Number(props.maxValues);
-          if (props.maxValues !== void 0 && maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= maxValues) {
-            if (!contains(value, props.modelValue)) {
-              return;
-            }
-          }
-          toReturn = contains(value, props.modelValue) ? removeFromList(value, props.modelValue) : [...props.modelValue, value];
-        } else {
-          toReturn = [value];
-        }
-      } else {
-        if (!props.keepOpen) {
-          collapse();
-        }
-        if (Array.isArray(props.modelValue)) {
-          if (props.unselectable && props.modelValue.includes(value)) {
-            toReturn = [];
-          } else {
-            toReturn = [value];
-          }
-        } else if (props.unselectable && value === props.modelValue) {
-          toReturn = void 0;
-        }
+      localModelValue.value = new Set(localModelValue.value);
+      if (!props.multiple && !props.keepOpen) {
+        collapse();
       }
-      emit("update:modelValue", toReturn);
-    };
+    }
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          onInput(newValue[0]);
+        }
+      },
+      { immediate: true }
+    );
     const selectProps = computed(() => ({
       id: hasId.value,
       name: props.name,
@@ -2670,7 +2882,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       icon: propsDefaults.value.icon,
       iconPosition: propsDefaults.value.iconPosition,
       floating: propsDefaults.value.floating,
-      unselectable: propsDefaults.value.unselectable,
+      unselectable: isUnselectable.value,
+      autoselectFirst: propsDefaults.value.autoselectFirst,
       multiple: propsDefaults.value.multiple,
       label: propsDefaults.value.label,
       placeholder: propsDefaults.value.placeholder,
@@ -2720,208 +2933,307 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 0,
           id: unref(hasLabelId),
           for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
-        }, toDisplayString(_ctx.label), 9, _hoisted_2)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "wrapperEl",
-          ref: wrapperEl,
-          class: "vv-select__wrapper"
-        }, [
-          createVNode(_sfc_main$8, mergeProps({
-            ref_key: "dropdownEl",
-            ref: dropdownEl,
-            modelValue: unref(expanded),
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
-          }, unref(dropdownProps), {
-            role: unref(DropdownRole).listbox,
-            onAfterExpand,
-            onAfterCollapse
-          }), createSlots({
-            default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                  key: 0,
-                  class: "vv-select__icon"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-                createElementVNode("div", mergeProps({
-                  ref_key: "inputEl",
-                  ref: inputEl
-                }, aria, {
-                  class: "vv-select__input",
-                  role: "combobox",
-                  "aria-expanded": unref(expanded),
-                  "aria-labelledby": unref(hasLabelId),
-                  "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
-                  "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
-                  tabindex: unref(hasTabindex),
-                  onClickPassive: onClickInput
-                }), [
-                  renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
-                    unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$3, {
-                          key: index,
-                          modifiers: _ctx.badgeModifiers,
-                          class: "vv-select__badge"
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(option)) + " ", 1),
-                            _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
-                              key: 0,
-                              "aria-label": unref(propsDefaults).deselectActionLabel,
-                              type: "button",
-                              onClick: withModifiers(($event) => onInput(option), ["stop"])
-                            }, [
-                              createVNode(_sfc_main$9, { name: "close" })
-                            ], 8, _hoisted_8)) : createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["modifiers"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createTextVNode(toDisplayString(_ctx.placeholder), 1)
-                    ], 64))
-                  ])
-                ], 16, _hoisted_6),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                  key: 1,
-                  class: "vv-select__icon vv-select__icon-after"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
-              ]),
-              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true)
-            ]),
-            items: withCtx(() => {
-              var _a;
-              return [
-                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                  return openBlock(), createElementBlock(Fragment, { key: index }, [
-                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createVNode(_sfc_main$5, {
-                        label: unref(getOptionLabel)(option)
-                      }, null, 8, ["label"]),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                        option
-                      ), (item, i) => {
-                        return openBlock(), createBlock(_sfc_main$6, mergeProps({
-                          selected: isOptionSelected(item),
-                          disabled: unref(isOptionDisabled)(item),
-                          unselectable: _ctx.unselectable,
-                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                          selectHintLabel: unref(propsDefaults).selectHintLabel,
-                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                        }, {
-                          key: i,
-                          class: "vv-dropdown-option",
-                          onClickPassive: ($event) => onInput(item)
-                        }), {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                              option,
-                              selectedOptions: unref(selectedOptions),
-                              selected: isOptionSelected(item),
-                              disabled: unref(isOptionDisabled)(item)
-                            })), () => [
-                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                            ])
-                          ]),
-                          _: 2
-                        }, 1040, ["onClickPassive"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
-                      selected: isOptionSelected(option),
-                      disabled: unref(isOptionDisabled)(option),
-                      unselectable: _ctx.unselectable,
-                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                      selectHintLabel: unref(propsDefaults).selectHintLabel,
-                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                    }, {
-                      class: "vv-dropdown-option",
-                      onClickPassive: ($event) => onInput(option)
-                    }), {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                          option,
-                          selectedOptions: unref(selectedOptions),
-                          selected: isOptionSelected(option),
-                          disabled: unref(isOptionDisabled)(option)
-                        })), () => [
-                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                        ])
-                      ]),
-                      _: 2
-                    }, 1040, ["onClickPassive"]))
-                  ], 64);
-                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
-                  key: 1,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-options", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                    ])
-                  ]),
-                  _: 3
-                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
-                  key: 2,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-results", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+        }, toDisplayString(_ctx.label), 9, _hoisted_2)) : createCommentVNode("v-if", true),
+        createElementVNode(
+          "div",
+          {
+            ref_key: "wrapperEl",
+            ref: wrapperEl,
+            class: "vv-select__wrapper"
+          },
+          [
+            createVNode(_sfc_main$8, mergeProps({
+              ref_key: "dropdownEl",
+              ref: dropdownEl,
+              modelValue: unref(expanded),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
+            }, unref(dropdownProps), {
+              role: unref(DropdownRole).listbox,
+              onAfterExpand,
+              onAfterCollapse
+            }), createSlots({
+              default: withCtx(({ aria }) => [
+                _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true),
+                createElementVNode("div", _hoisted_5, [
+                  unref(hasIconBefore) ? (openBlock(), createBlock(
+                    _sfc_main$9,
+                    mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("div", mergeProps({
+                    ref_key: "inputEl",
+                    ref: inputEl
+                  }, aria, {
+                    class: "vv-select__input",
+                    role: "combobox",
+                    "aria-controls": unref(hasDropdownId),
+                    "aria-expanded": unref(expanded),
+                    "aria-labelledby": unref(hasLabelId),
+                    "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+                    "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
+                    tabindex: unref(hasTabindex),
+                    onClickPassive: onClickInput
+                  }), [
+                    renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
+                      unref(hasValue) ? (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 0 },
+                        [
+                          !_ctx.badges ? (openBlock(), createElementBlock(
+                            "div",
+                            _hoisted_7,
+                            toDisplayString(unref(hasValue)),
+                            1
+                            /* TEXT */
+                          )) : (openBlock(true), createElementBlock(
+                            Fragment,
+                            { key: 1 },
+                            renderList(unref(selectedOptions), (option, index) => {
+                              return openBlock(), createBlock(_sfc_main$3, {
+                                key: index,
+                                modifiers: _ctx.badgeModifiers,
+                                class: "vv-select__badge"
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(
+                                    toDisplayString(unref(getOptionLabel)(option)) + " ",
+                                    1
+                                    /* TEXT */
+                                  ),
+                                  unref(isUnselectable) ? (openBlock(), createElementBlock("button", {
+                                    key: 0,
+                                    "aria-label": unref(propsDefaults).deselectActionLabel,
+                                    type: "button",
+                                    onClick: withModifiers(($event) => onInput(option), ["stop"])
+                                  }, [
+                                    createVNode(_sfc_main$9, { name: "close" })
+                                  ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["modifiers"]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createTextVNode(
+                            toDisplayString(_ctx.placeholder),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
                     ])
-                  ]),
-                  _: 3
-                })) : createCommentVNode("", true)
-              ];
-            }),
-            after: withCtx(() => [
-              renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  ], 16, _hoisted_6),
+                  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_9, [
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true)
+              ]),
+              items: withCtx(() => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$1, {
-                    key: 0,
-                    label: unref(propsDefaults).closeLabel,
-                    modifiers: "secondary",
-                    onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
-                  }, null, 8, ["label"])) : createCommentVNode("", true)
+                  !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(
+                    Fragment,
+                    { key: 0 },
+                    renderList(unref(filteredOptions), (option, index) => {
+                      return openBlock(), createElementBlock(
+                        Fragment,
+                        { key: index },
+                        [
+                          isGroup(option) ? (openBlock(), createElementBlock(
+                            Fragment,
+                            { key: 0 },
+                            [
+                              createVNode(_sfc_main$5, {
+                                label: unref(getOptionLabel)(option)
+                              }, null, 8, ["label"]),
+                              (openBlock(true), createElementBlock(
+                                Fragment,
+                                null,
+                                renderList(unref(getOptionGrouped)(
+                                  option
+                                ), (item, i) => {
+                                  return openBlock(), createBlock(_sfc_main$6, mergeProps({ ref_for: true }, {
+                                    selected: isOptionSelected(item),
+                                    disabled: isOptionDisabledOrNotSelectable(item),
+                                    unselectable: unref(isUnselectable),
+                                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                                    selectHintLabel: unref(propsDefaults).selectHintLabel,
+                                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                                  }, {
+                                    key: i,
+                                    class: "vv-dropdown-option",
+                                    "focus-on-hover": "",
+                                    onClickPassive: ($event) => onInput(item)
+                                  }), {
+                                    default: withCtx(() => [
+                                      renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
+                                        option,
+                                        selectedOptions: unref(selectedOptions),
+                                        selected: isOptionSelected(item),
+                                        disabled: isOptionDisabledOrNotSelectable(item)
+                                      }), () => [
+                                        createTextVNode(
+                                          toDisplayString(unref(getOptionLabel)(item)),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ])
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1040, ["onClickPassive"]);
+                                }),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
+                            ],
+                            64
+                            /* STABLE_FRAGMENT */
+                          )) : (openBlock(), createBlock(_sfc_main$6, mergeProps({
+                            key: 1,
+                            ref_for: true
+                          }, {
+                            selected: isOptionSelected(option),
+                            disabled: isOptionDisabledOrNotSelectable(option),
+                            unselectable: unref(isUnselectable),
+                            deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                            selectHintLabel: unref(propsDefaults).selectHintLabel,
+                            selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                          }, {
+                            class: "vv-dropdown-option",
+                            "focus-on-hover": "",
+                            onClickPassive: ($event) => onInput(option)
+                          }), {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
+                                option,
+                                selectedOptions: unref(selectedOptions),
+                                selected: isOptionSelected(option),
+                                disabled: isOptionDisabledOrNotSelectable(option)
+                              }), () => [
+                                createTextVNode(
+                                  toDisplayString(unref(getOptionLabel)(option)),
+                                  1
+                                  /* TEXT */
+                                )
+                              ])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1040, ["onClickPassive"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 1,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-options", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noOptionsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 2,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-results", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noResultsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : createCommentVNode("v-if", true)
                 ];
-              })
-            ]),
-            _: 2
-          }, [
-            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
-              name: "before",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
-                  key: 0,
-                  id: unref(hasSearchId),
-                  ref_key: "inputSearchEl",
-                  ref: inputSearchEl,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
-                  "aria-autocomplete": "list",
-                  "aria-controls": unref(hasDropdownId),
-                  autocomplete: "off",
-                  spellcheck: "false",
-                  type: "search",
-                  class: "vv-dropdown__search",
-                  placeholder: unref(propsDefaults).searchPlaceholder
-                }, null, 8, _hoisted_3)), [
-                  [vModelText, unref(searchText)]
-                ]) : createCommentVNode("", true)
+              }),
+              after: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  var _a;
+                  return [
+                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 0,
+                      label: unref(propsDefaults).closeLabel,
+                      modifiers: "secondary",
+                      onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
+                    }, null, 8, ["label"])) : createCommentVNode("v-if", true)
+                  ];
+                })
               ]),
-              key: "0"
-            } : void 0
-          ]), 1040, ["modelValue", "role"])
-        ], 512),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
+                name: "before",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "dropdown::before"),
+                  unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
+                    key: 0,
+                    id: unref(hasSearchId),
+                    ref_key: "inputSearchEl",
+                    ref: inputSearchEl,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
+                    "aria-autocomplete": "list",
+                    "aria-controls": unref(hasDropdownId),
+                    autocomplete: "off",
+                    spellcheck: "false",
+                    type: "search",
+                    class: "vv-dropdown__search",
+                    placeholder: unref(propsDefaults).searchPlaceholder
+                  }, null, 8, _hoisted_3)), [
+                    [vModelText, unref(searchText)]
+                  ]) : createCommentVNode("v-if", true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["modelValue", "role"])
+          ],
+          512
+          /* NEED_PATCH */
+        ),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [
@@ -2951,9 +3263,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, unref(selectProps), {
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
-      }), null, 16));
+      ], 10, _hoisted_1)) : (openBlock(), createBlock(
+        _sfc_main$4,
+        mergeProps({ key: 1 }, unref(selectProps), {
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
+        }),
+        null,
+        16
+        /* FULL_PROPS */
+      ));
     };
   }
 });