@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

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

@@ -1,34 +1,171 @@
-import { defineComponent as ce, unref as t, openBlock as u, createBlock as Y, mergeProps as N, createCommentVNode as k, createElementBlock as v, Fragment as q, createVNode as de, withCtx as ne, renderSlot as A, normalizeProps as T, guardReactiveProps as R, Transition as tt, withDirectives as ke, createElementVNode as H, normalizeStyle as Be, normalizeClass as ve, vShow as xe, toDisplayString as F, isRef as _e, renderList as Se, vModelSelect as ot, createTextVNode as se, createSlots as lt, withModifiers as at, vModelText as st } from "vue";
-import { iconExists as me, Icon as nt, addIcon as rt } from "@iconify/vue";
-import { autoPlacement as De, flip as Ie, shift as Oe, size as Ce, offset as ge, arrow as it, useFloating as ut, autoUpdate as dt } from "@floating-ui/vue";
-var we = /* @__PURE__ */ ((s) => (s.left = "left", s.right = "right", s.top = "top", s.bottom = "bottom", s))(we || {}), Fe = /* @__PURE__ */ ((s) => (s.topStart = "top-start", s.topEnd = "top-end", s.bottomStart = "bottom-start", s.bottomEnd = "bottom-end", s.leftStart = "left-start", s.leftEnd = "left-end", s.rightStart = "right-start", s.rightEnd = "right-end", s))(Fe || {}), Ve = /* @__PURE__ */ ((s) => (s.before = "before", s.after = "after", s))(Ve || {});
-const Ne = {
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, h, Fragment, provide, useAttrs, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, isRef, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
+import { nanoid } from "nanoid";
+import { useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, toReactive, useElementVisibility, refDebounced } from "@vueuse/core";
+import mitt from "mitt";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
+var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
+  DropdownItemRole2["option"] = "option";
+  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_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, Le = {
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, Me = {
+};
+const LoadingProps = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, Te = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Re = {
+};
+const SelectedProps = {
+  /**
+   * Whether the item is selected
+   */
+  selected: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, he = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, je = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, We = {
+};
+const OptionsProps = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -48,7 +185,8 @@ const Ne = {
    * Used when options are objects: key to use for option disabled
    */
   disabledKey: { type: [String, Function], default: "disabled" }
-}, ze = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -59,39 +197,46 @@ const Ne = {
    */
   iconPosition: {
     type: String,
-    default: Ve.before,
-    validation: (s) => Object.values(Ve).includes(s)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, qe = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, He = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, Ke = {
+};
+const UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
-}, Ue = {
+  unselectable: { type: Boolean, default: true }
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
-}, $e = {
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: we.bottom,
-    validator: (s) => Object.values(we).includes(s) || Object.values(Fe).includes(s)
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
   },
   /**
    * Dropdown show / hide transition name
@@ -113,7 +258,7 @@ const Ne = {
    */
   shift: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Flip dropdown position if there is no space in the default position
@@ -121,7 +266,7 @@ const Ne = {
    */
   flip: {
     type: [Boolean, Object],
-    default: !0
+    default: true
   },
   /**
    * Size of the dropdown
@@ -137,7 +282,7 @@ const Ne = {
    */
   autoPlacement: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Add arrow to the dropdown
@@ -145,21 +290,21 @@ const Ne = {
    */
   arrow: {
     type: Boolean,
-    default: !1
+    default: false
   },
   /**
    * Close dropdown on click outside
    */
   autoClose: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * Autofocus first item on dropdown open
    */
   autofocusFirst: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * Set dropdown width to the same as the trigger
@@ -167,46 +312,67 @@ const Ne = {
   triggerWidth: {
     type: Boolean
   }
-}, Je = {
-  ...Ue,
+};
+const IdNameProps = {
+  ...IdProps,
   /**
    * Input / Textarea name
    * Name of the form control. Submitted with the form as part of a name/value pair
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
    */
-  name: { type: String, required: !0 }
-}, ct = {
+  name: { type: String, required: true }
+};
+const AutofocusProps = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, ft = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, pt = [
+};
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+const VvComboboxEvents = [
   "update:modelValue",
   "change:search",
   "focus",
   "blur"
-], vt = {
-  ...Je,
-  ...qe,
-  ...Ne,
-  ...Le,
-  ...je,
-  ...Me,
-  ...Te,
-  ...Re,
-  ...he,
-  ...We,
-  ...ze,
-  ...He,
-  ...Ke,
-  ...$e,
+];
+const VvComboboxProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...DropdownProps,
+  ...LabelProps,
   /**
    * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
    */
@@ -214,30 +380,30 @@ const Ne = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  /**
-   * Select input label
-   */
-  label: String,
   /**
    * 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
    */
-  selectedLabel: { type: String, default: "Selected" },
+  selectedHintLabel: { type: String, default: "Selected" },
   /**
-   * Label for deselect button
+   * Label for deselect action button
    */
-  deselectLabel: { type: String, default: "Deselect" },
+  deselectActionLabel: { type: String, default: "Deselect" },
   /**
    * Label for select option hint
    */
-  pressToSelectLabel: { type: String, default: "Press enter to select" },
+  selectHintLabel: { type: String, default: "Press enter to select" },
   /**
    * Label for deselected option hint
    */
-  pressToDeselectLabel: { type: String, default: "Press enter to remove" },
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
   /**
    * Select input placeholder
    */
@@ -291,8 +457,8 @@ const Ne = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    ...$e.triggerWidth,
-    default: !0
+    ...DropdownProps.triggerWidth,
+    default: true
   },
   /**
    * Dropdown modifiers
@@ -308,7 +474,8 @@ const Ne = {
    * Close dropdown on select (not multiple)
    */
   autoClose: Boolean
-}, mt = {
+};
+const VvIconProps = {
   /**
    * Color
    */
@@ -332,7 +499,7 @@ const Ne = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -401,63 +568,127 @@ const Ne = {
   modifiers: {
     type: [String, Array]
   }
-}, bt = {
+};
+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__$6 = {
   name: "VvIcon"
-}, pe = /* @__PURE__ */ ce({
-  ...bt,
-  props: mt,
-  setup(s) {
-    const d = s, e = ref(!0), c = useVolver(), { modifiers: g } = toRefs(d), w = useBemModifiers("vv-icon", g), r = computed(() => d.provider || (c == null ? void 0 : c.provider)), V = computed(() => {
-      const a = d.name ?? "", n = `@${r.value}:${d.prefix}:${d.name}`;
-      return me(a) ? a : me(n) ? n : (c == null ? void 0 : c.iconsCollections.find(
-        (i) => {
-          const _ = `@${r.value}:${i.prefix}:${a}`;
-          if (me(_))
-            return _;
-        }
-      )) || a;
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    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}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
+      }
     });
-    function $(a) {
-      let n = null;
-      if (typeof window > "u") {
-        const { JSDOM: B } = require("jsdom");
-        n = new B().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (n ? new n.DOMParser() : new window.DOMParser()).parseFromString(a, "text/html").querySelector("svg");
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function b(a) {
-      const n = $(a), i = (n == null ? void 0 : n.innerHTML.trim()) || "";
-      n && i && rt(`@${r.value}:${d.prefix}:${d.name}`, {
-        body: i,
-        // Set height and width from svg content
-        height: n.viewBox.baseVal.height,
-        width: n.viewBox.baseVal.width
-      });
+    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
+        });
+      }
     }
-    return c && (d.src && !me(`@${r.value}:${d.prefix}:${d.name}`) ? (e.value = !1, c.fetchIcon(d.src).then((a) => {
-      a && (b(a), e.value = !0);
-    }).catch((a) => {
-      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
-    })) : d.svg && b(d.svg)), (a, n) => t(e) ? (u(), Y(t(nt), N({
-      key: 0,
-      class: t(w)
-    }, {
-      inline: a.inline,
-      width: a.width,
-      height: a.height,
-      horizontalFlip: a.horizontalFlip,
-      verticalFlip: a.verticalFlip,
-      flip: a.flip,
-      rotate: a.rotate,
-      color: a.color,
-      onLoad: a.onLoad,
-      icon: t(V)
-    }), null, 16, ["class"])) : k("", !0);
+    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(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else 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: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
-}), Ae = ["listbox", "menu"], ht = {
-  ...Ue,
-  ...he,
-  ...$e,
+});
+const VvDropdownProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...DropdownProps,
   /**
    * Show / hide dropdown programmatically
    */
@@ -477,274 +708,646 @@ const Ne = {
    */
   role: {
     type: String,
-    default: Ae[1],
-    validator: (s) => Ae.includes(s)
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
   }
-}, yt = ["id", "tabindex", "role", "aria-labelledby"], gt = {
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useProvideDropdownTrigger({
+  reference,
+  id,
+  expanded,
+  aria
+}) {
+  const bus = mitt();
+  const component = defineComponent({
+    name: "VvDropdownTriggerProvider",
+    provide() {
+      return {
+        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
+          reference,
+          id,
+          expanded,
+          aria,
+          bus
+        }
+      };
+    },
+    setup() {
+      return {};
+    },
+    render() {
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+    }
+  });
+  return {
+    bus,
+    component
+  };
+}
+function useProvideDropdownItem({
+  role,
+  expanded
+}) {
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
+  );
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    expanded
+  });
+  return { itemRole };
+}
+function useProvideDropdownAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
+  });
+}
+const _hoisted_1$3 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$5 = {
   name: "VvDropdown",
-  inheritAttrs: !1
-}, Ge = /* @__PURE__ */ ce({
-  ...gt,
-  props: ht,
+  inheritAttrs: false
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
+  props: VvDropdownProps,
   emits: ["update:modelValue"],
-  setup(s, { emit: d }) {
-    const e = s, { id: c } = toRefs(e), g = useUniqueId(c), w = useAttrs(), r = ref("auto"), V = ref("auto"), $ = ref(null), b = ref(null), a = ref(null), n = ref(null), i = computed({
-      get: () => e.reference ?? $.value,
-      set: (o) => {
-        $.value = o;
+  setup(__props, { emit }) {
+    const props = __props;
+    const { id } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const attrs = useAttrs();
+    const maxWidth = ref("auto");
+    const maxHeight = ref("auto");
+    const localReferenceEl = ref(null);
+    const floatingEl = ref(null);
+    const arrowEl = ref(null);
+    const listEl = ref(null);
+    const referenceEl = computed({
+      get: () => props.reference ?? localReferenceEl.value,
+      set: (newValue) => {
+        localReferenceEl.value = newValue;
+      }
+    });
+    const middleware = computed(() => {
+      const toReturn = [];
+      if (props.autoPlacement) {
+        if (typeof props.autoPlacement === "boolean") {
+          toReturn.push(autoPlacement());
+        } else {
+          toReturn.push(
+            autoPlacement(props.autoPlacement)
+          );
+        }
+      } else if (props.flip) {
+        if (typeof props.flip === "boolean") {
+          toReturn.push(flip());
+        } else {
+          toReturn.push(flip(props.flip));
+        }
       }
-    }), _ = computed(() => {
-      const o = [];
-      if (e.autoPlacement ? typeof e.autoPlacement == "boolean" ? o.push(De()) : o.push(
-        De(e.autoPlacement)
-      ) : e.flip && (typeof e.flip == "boolean" ? o.push(Ie()) : o.push(Ie(e.flip))), e.shift && (typeof e.shift == "boolean" ? o.push(Oe()) : o.push(Oe(e.shift))), e.size) {
-        const p = ({
-          availableWidth: M,
-          availableHeight: le
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
         }) => {
-          r.value = `${M}px`, V.value = `${le}px`;
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
         };
-        typeof e.size == "boolean" ? o.push(
-          Ce({
-            apply: p
-          })
-        ) : o.push(
-          Ce({
-            ...e.size,
-            apply: p
+        if (typeof props.size === "boolean") {
+          toReturn.push(
+            size({
+              apply
+            })
+          );
+        } else {
+          toReturn.push(
+            size({
+              ...props.size,
+              apply
+            })
+          );
+        }
+      }
+      if (props.offset) {
+        toReturn.push(offset(Number(props.offset)));
+        if (["string", "number"].includes(typeof props.offset)) {
+          toReturn.push(offset(Number(props.offset)));
+        } else {
+          toReturn.push(offset(props.offset));
+        }
+      }
+      if (props.arrow) {
+        toReturn.push(
+          arrow({
+            element: arrowEl
           })
         );
       }
-      return e.offset && (o.push(ge(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? o.push(ge(Number(e.offset))) : o.push(ge(e.offset))), e.arrow && o.push(
-        it({
-          element: a
-        })
-      ), o;
-    }), { x: P, y: B, strategy: K, middlewareData: L, placement: U } = ut(
-      i,
-      b,
+      return toReturn;
+    });
+    const { x, y, strategy, middlewareData, placement } = useFloating(
+      referenceEl,
+      floatingEl,
       {
-        whileElementsMounted: dt,
-        placement: e.placement,
-        middleware: _
+        whileElementsMounted: autoUpdate,
+        placement: props.placement,
+        middleware
       }
-    ), j = computed(() => ({
-      position: K.value,
-      top: `${B.value ?? 0}px`,
-      left: `${P.value ?? 0}px`,
-      maxWidth: r.value,
-      maxHeight: V.value,
-      width: e.triggerWidth && i.value ? `${i.value.offsetWidth}px` : void 0
-    })), I = computed(() => U.value.split("-")[0]), D = computed(
+    );
+    const dropdownPlacement = computed(() => ({
+      position: strategy.value,
+      top: `${y.value ?? 0}px`,
+      left: `${x.value ?? 0}px`,
+      maxWidth: maxWidth.value,
+      maxHeight: maxHeight.value,
+      width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+    }));
+    const side = computed(() => placement.value.split("-")[0]);
+    const staticSide = computed(
       () => ({
         top: "bottom",
         right: "left",
         bottom: "top",
         left: "right"
-      })[I.value] ?? "bottom"
-    ), x = computed(() => {
-      var o, p, M, le;
-      return ["bottom", "top"].includes(D.value) ? {
-        right: `${((o = L.value.arrow) == null ? void 0 : o.x) ?? 0}px`,
-        [D.value]: `${-(((p = a.value) == null ? void 0 : p.offsetWidth) ?? 0) / 2}px`
-      } : {
-        top: `${((M = L.value.arrow) == null ? void 0 : M.y) ?? 0}px`,
-        [D.value]: `${-(((le = a.value) == null ? void 0 : le.offsetWidth) ?? 0) / 2}px`
+      })[side.value] ?? "bottom"
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d;
+      if (["bottom", "top"].includes(staticSide.value)) {
+        return {
+          right: `${((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) ?? 0}px`,
+          [staticSide.value]: `${-(((_b = arrowEl.value) == null ? void 0 : _b.offsetWidth) ?? 0) / 2}px`
+        };
+      }
+      return {
+        top: `${((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) ?? 0}px`,
+        [staticSide.value]: `${-(((_d = arrowEl.value) == null ? void 0 : _d.offsetWidth) ?? 0) / 2}px`
       };
-    }), W = useVModel(e, "modelValue", d), J = ref(!1), m = computed({
-      get: () => W.value ?? J.value,
-      set: (o) => {
-        if (W.value === void 0) {
-          J.value = o;
+    });
+    const modelValue = useVModel(props, "modelValue", emit);
+    const localModelValue = ref(false);
+    const expanded = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
           return;
         }
-        W.value = o;
+        modelValue.value = newValue;
       }
-    }), z = () => {
-      m.value = !0;
-    }, O = () => {
-      m.value = !1;
-    }, Z = () => {
-      m.value = !m.value;
-    }, re = (o) => {
-      i.value = o;
+    });
+    const show = () => {
+      expanded.value = true;
     };
-    watch(m, (o) => {
-      o && e.autofocusFirst && nextTick(() => {
-        const p = E(
-          b.value
-        );
-        p.length > 0 && p[0].focus();
-      });
-    }), onClickOutside(
-      b,
+    const hide = () => {
+      expanded.value = false;
+    };
+    const toggle = () => {
+      expanded.value = !expanded.value;
+    };
+    const init = (el) => {
+      referenceEl.value = el;
+    };
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        nextTick(() => {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        });
+      }
+    });
+    onClickOutside(
+      floatingEl,
       () => {
-        e.autoClose && (m.value = !1);
+        if (props.autoClose) {
+          expanded.value = false;
+        }
       },
-      { ignore: [i] }
+      { ignore: [referenceEl] }
     );
-    const ie = computed(() => {
-      var o;
-      return ((o = i.value) == null ? void 0 : o.getAttribute("id")) ?? void 0;
-    }), G = computed(() => ({
-      "aria-controls": g.value,
-      "aria-haspopup": !0,
-      "aria-expanded": m.value
-    })), { component: ee, bus: ue } = useProvideDropdownTrigger({
-      reference: i,
-      id: g,
-      expanded: m,
-      aria: G
+    const hasAriaLabelledby = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
     });
-    ue.on("click", Z);
-    const { role: te, modifiers: fe } = toRefs(e), { itemRole: Q } = useProvideDropdownItem({ role: te, expanded: m }), y = useBemModifiers(
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
+    });
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const { itemRole } = useProvideDropdownItem({ role, expanded });
+    const bemCssClasses = useModifiers(
       "vv-dropdown",
-      fe,
+      modifiers,
       computed(() => ({
-        arrow: e.arrow
+        arrow: props.arrow
       }))
-    ), { focused: C } = useFocusWithin(b);
-    function E(o) {
-      return o ? [
-        ...o.querySelectorAll(
+    );
+    const { focused } = useFocusWithin(floatingEl);
+    function getKeyboardFocusableElements(element) {
+      if (!element) {
+        return [];
+      }
+      return [
+        ...element.querySelectorAll(
           'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
         )
       ].filter(
-        (p) => !p.hasAttribute("disabled") && !p.getAttribute("aria-hidden")
-      ) : [];
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
     }
-    const X = () => {
+    const focusNext = () => {
       nextTick(() => {
-        if (C.value) {
-          const o = E(
-            b.value
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (o.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const p = o.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          p < o.length - 1 ? o[p + 1].focus() : o[0].focus();
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus();
+          } else {
+            focusableElements[0].focus();
+          }
         }
       });
-    }, oe = () => {
+    };
+    const focusPrev = () => {
       nextTick(() => {
-        if (C.value) {
-          const o = E(
-            b.value
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (o.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const p = o.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          p > 0 ? o[p - 1].focus() : o[o.length - 1].focus();
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus();
+          } else {
+            focusableElements[focusableElements.length - 1].focus();
+          }
         }
       });
     };
-    return onKeyStroke("Escape", (o) => {
-      m.value && (o.preventDefault(), O());
-    }), onKeyStroke("ArrowDown", (o) => {
-      m.value && C.value && (o.preventDefault(), X());
-    }), onKeyStroke("ArrowUp", (o) => {
-      m.value && C.value && (o.preventDefault(), oe());
-    }), onKeyStroke([" ", "Enter"], (o) => {
-      m.value && C.value && (o.preventDefault(), document.activeElement.click());
-    }), (o, p) => (u(), v(q, null, [
-      de(t(ee), null, {
-        default: ne(() => [
-          A(o.$slots, "default", T(R({ init: re, show: z, hide: O, toggle: Z, expanded: t(m), aria: t(G) })))
-        ]),
-        _: 3
-      }),
-      de(tt, { name: o.transitionName }, {
-        default: ne(() => [
-          ke(H("div", {
-            ref_key: "floatingEl",
-            ref: b,
-            style: Be(t(j)),
-            class: ve(t(y))
+    onKeyStroke("Escape", (e) => {
+      if (expanded.value) {
+        e.preventDefault();
+        hide();
+      }
+    });
+    onKeyStroke("ArrowDown", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusNext();
+      }
+    });
+    onKeyStroke("ArrowUp", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusPrev();
+      }
+    });
+    onKeyStroke([" ", "Enter"], (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        const activeElement = document.activeElement;
+        activeElement.click();
+      }
+    });
+    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, { name: _ctx.transitionName }, {
+          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("ul", 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$3),
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+            ], 6), [
+              [vShow, unref(expanded)]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 64);
+    };
+  }
+});
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+const __default__$4 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  setup(__props) {
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+        ref_key: "element",
+        ref: element,
+        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$2 = ["title"];
+const __default__$3 = {
+  name: "VvDropdownOption"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: {
+    ...DisabledProps,
+    ...SelectedProps,
+    ...UnselectableProps,
+    ...ModifiersProps,
+    deselectHintLabel: {
+      type: String
+    },
+    selectHintLabel: {
+      type: String
+    },
+    selectedHintLabel: {
+      type: String
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown-option",
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
+      }))
+    );
+    const hintLabel = computed(() => {
+      if (props.selected) {
+        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
+      }
+      if (!props.disabled) {
+        return props.selectHintLabel;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$4, {
+        class: normalizeClass(unref(bemCssClasses)),
+        tabindex: _ctx.disabled ? -1 : 0,
+        "aria-selected": _ctx.selected,
+        "aria-disabled": _ctx.disabled
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("span", {
+            class: "vv-dropdown-option__hint",
+            title: unref(hintLabel)
           }, [
-            e.arrow ? (u(), v("div", {
-              key: 0,
-              ref_key: "arrowEl",
-              ref: a,
-              style: Be(t(x)),
-              class: "vv-dropdown__arrow"
-            }, null, 4)) : k("", !0),
-            A(o.$slots, "before", T(R({ expanded: t(m) }))),
-            H("ul", N(t(w), {
-              id: t(g),
-              ref_key: "listEl",
-              ref: n,
-              tabindex: t(m) ? void 0 : -1,
-              role: t(te),
-              "aria-labelledby": t(ie),
-              class: "vv-dropdown__list"
-            }), [
-              A(o.$slots, "items", T(R({
-                role: t(Q)
-              })))
-            ], 16, yt),
-            A(o.$slots, "after", T(R({ expanded: t(m) })))
-          ], 6), [
-            [xe, t(m)]
-          ])
+            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
+              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+            ])
+          ], 8, _hoisted_1$2)
         ]),
         _: 3
-      }, 8, ["name"])
-    ], 64));
-  }
-}), _t = {
-  name: "VvDropdownItem"
-}, Qe = /* @__PURE__ */ ce({
-  ..._t,
-  setup(s) {
-    const { role: d, expanded: e } = useInjectedDropdownItem(), c = ref(null);
-    useProvideDropdownAction({ expanded: e });
-    const g = useElementHover(c), { focused: w } = useFocus(c), { focused: r } = useFocusWithin(c);
-    return watch(g, (V) => {
-      V && (w.value = !0);
-    }), (V, $) => (u(), v("li", N({ role: t(d) }, {
-      ref_key: "element",
-      ref: c,
-      class: ["vv-dropdown__item", { "focus-visible": t(w) || t(r) }]
-    }), [
-      A(V.$slots, "default")
-    ], 16));
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+    };
   }
 });
-function be(s) {
-  return Array.isArray(s) ? s.filter((d) => isString(d)).join(" ") : s;
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
 }
-function Xe(s, d) {
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, 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 false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    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) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  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;
+}
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
+}
+function HintSlotFactory(parentProps, parentSlots) {
   const {
-    invalid: e,
-    valid: c,
-    hint: g,
-    loading: w
-  } = d, {
-    hintLabel: r,
-    modelValue: V,
-    valid: $,
-    validLabel: b,
-    invalid: a,
-    invalidLabel: n,
-    ...i
-  } = toRefs(s), _ = resolveFieldData(i, "loading"), P = resolveFieldData(i, "loadingLabel"), B = computed(() => a.value ? !!(a.value && e || n != null && n.value && Array.isArray(n.value) && n.value.length > 0 || n != null && n.value && !isEmpty(n)) : !1), K = computed(
-    () => !!(r && r.value || g)
-  ), L = computed(
-    () => !!(b && b.value || c)
-  ), U = computed(
-    () => !!(_ != null && _.value && w || _ != null && _.value && (P != null && P.value))
-  ), j = computed(
-    () => K.value || L.value || B.value || U.value
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
+  const {
+    hintLabel,
+    modelValue,
+    valid,
+    validLabel,
+    invalid,
+    invalidLabel,
+    ...otherProps
+  } = toRefs(parentProps);
+  const loading = resolveFieldData(otherProps, "loading");
+  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
+  const hasInvalid = computed(() => {
+    if (!invalid.value) {
+      return false;
+    }
+    if (invalid.value && invalidSlot) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
+      return true;
+    }
+    return false;
+  });
+  const hasHint = computed(
+    () => !!(hintLabel && hintLabel.value || hintSlot)
+  );
+  const hasValid = computed(
+    () => !!(validLabel && validLabel.value || validSlot)
+  );
+  const hasLoading = computed(
+    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  );
+  const isVisible = computed(
+    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
   );
   return {
-    hasInvalid: B,
-    hasHint: K,
-    hasValid: L,
-    hasLoading: U,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -753,30 +1356,37 @@ function Xe(s, d) {
           default: () => ({})
         }
       },
-      setup(I) {
-        const D = computed(() => {
-          const x = toReactive({
-            hintLabel: r,
-            modelValue: V,
-            valid: $,
-            validLabel: b,
-            invalid: a,
-            invalidLabel: n,
-            loading: _,
-            loadingLabel: P,
-            ...I.params
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          return a != null && a.value ? (e == null ? void 0 : e(x)) || be(n == null ? void 0 : n.value) || (r == null ? void 0 : r.value) : $ != null && $.value ? (c == null ? void 0 : c(x)) || be(b == null ? void 0 : b.value) || (r == null ? void 0 : r.value) : _ != null && _.value ? (w == null ? void 0 : w(x)) || be(P == null ? void 0 : P.value) || (r == null ? void 0 : r.value) : (g == null ? void 0 : g(x)) || be(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
+          if (invalid == null ? void 0 : invalid.value) {
+            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          }
+          if (valid == null ? void 0 : valid.value)
+            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          if (loading == null ? void 0 : loading.value)
+            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
         });
         return {
-          isVisible: j,
-          hasInvalid: B,
-          hasValid: L,
-          hintContent: D
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
+        if (this.isVisible) {
           return h(
             "small",
             {
@@ -784,26 +1394,28 @@ function Xe(s, d) {
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const St = {
-  ...Je,
-  ...ct,
-  ...ft,
-  ...qe,
-  ...Ne,
-  ...Le,
-  ...je,
-  ...Me,
-  ...Te,
-  ...Re,
-  ...he,
-  ...We,
-  ...ze,
-  ...He,
-  ...Ke,
+const VvSelectProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...LabelProps,
   /**
    * This Boolean attribute indicates that multiple options can be selected in the list.
    * If it is not specified, then only one option can be selected at a time.
@@ -830,464 +1442,757 @@ const St = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  /**
-   * <label> value for the select
-   */
-  label: String,
   /**
    * Select placeholder
    */
   placeholder: String
-}, wt = ["update:modelValue", "focus", "blur"], Vt = ["for"], $t = { class: "vv-select__wrapper" }, kt = {
+};
+const VvSelectEmits = ["update:modelValue", "focus", "blur"];
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
+  };
+}
+function useComponentIcon(icon, iconPosition) {
+  const hasIconBefore = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+  );
+  const hasIconAfter = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
+  );
+  const hasIconLeft = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
+  );
+  const hasIconRight = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+  );
+  const hasIconTop = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+  );
+  const hasIconBottom = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+  );
+  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,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+function useOptions(props) {
+  const { options, labelKey, valueKey, disabledKey } = toRefs(props);
+  const getOptionLabel = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value];
+  };
+  const getOptionValue = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return option;
+    return typeof valueKey.value === "function" ? valueKey.value(option) : option[valueKey.value];
+  };
+  const getOptionDisabled = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return false;
+    return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
+  };
+  return {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled
+  };
+}
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = { class: "vv-select__wrapper" };
+const _hoisted_3$1 = {
   key: 0,
   class: "vv-select__input-before"
-}, Pt = { class: "vv-select__inner" }, Et = ["id"], Bt = ["disabled", "hidden"], Dt = ["disabled", "value"], It = {
+};
+const _hoisted_4$1 = { class: "vv-select__inner" };
+const _hoisted_5$1 = ["id"];
+const _hoisted_6$1 = ["disabled", "hidden"];
+const _hoisted_7$1 = ["disabled", "value"];
+const _hoisted_8$1 = {
   key: 1,
   class: "vv-select__input-after"
-}, Ot = {
+};
+const __default__$2 = {
   name: "VvSelect"
-}, Ct = /* @__PURE__ */ ce({
-  ...Ot,
-  props: St,
-  emits: wt,
-  setup(s, { emit: d }) {
-    const e = s, c = useSlots(), g = ref(), { HintSlot: w, hasHint: r, hasInvalid: V } = Xe(e, c), {
-      id: $,
-      modifiers: b,
-      disabled: a,
-      readonly: n,
-      loading: i,
-      icon: _,
-      iconPosition: P,
-      invalid: B,
-      valid: K,
-      floating: L,
-      multiple: U
-    } = toRefs(e), j = useUniqueId($), I = computed(() => `${j.value}-hint`), { focused: D } = useComponentFocus(g, d), x = useElementVisibility(g);
-    watch(x, (y) => {
-      y && e.autofocus && (D.value = !0);
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvSelectProps,
+  emits: VvSelectEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const select = ref();
+    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      id,
+      modifiers,
+      disabled,
+      readonly,
+      loading,
+      icon,
+      iconPosition,
+      invalid,
+      valid,
+      floating,
+      multiple
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const { focused } = useComponentFocus(select, emit);
+    const isVisible = useElementVisibility(select);
+    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 { hasIcon: W, hasIconBefore: J, hasIconAfter: m } = useComponentIcon(
-      _,
-      P
-    ), z = computed(() => !isEmpty(e.modelValue)), O = computed(() => e.disabled || e.readonly), Z = computed(() => O.value ? -1 : e.tabindex), re = computed(() => {
-      if (e.invalid === !0)
-        return !0;
-      if (e.valid === !0)
-        return !1;
-    }), ie = useBemModifiers(
+    const isInvalid = computed(() => {
+      if (props.invalid === true) {
+        return true;
+      }
+      if (props.valid === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const bemCssClasses = useModifiers(
       "vv-select",
-      b,
+      modifiers,
       computed(() => ({
-        valid: K.value,
-        invalid: B.value,
-        loading: i.value,
-        disabled: a.value,
-        readonly: n.value,
-        "icon-before": J.value,
-        "icon-after": m.value,
-        dirty: z.value,
-        focus: D.value,
-        floating: L.value,
-        multiple: U.value
+        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
       }))
-    ), G = computed(() => ({
-      name: e.name,
-      tabindex: Z.value,
-      disabled: O.value,
-      required: e.required,
-      size: e.size,
-      autocomplete: e.autocomplete,
-      multiple: e.multiple,
-      "aria-invalid": re.value,
-      "aria-describedby": !V.value && r.value ? I.value : void 0,
-      "aria-errormessage": V.value ? I.value : void 0
-    })), ee = computed(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue
-    })), { getOptionLabel: ue, getOptionValue: te, getOptionDisabled: fe } = useOptions(e), Q = computed({
-      get: () => e.modelValue,
-      set: (y) => {
-        Array.isArray(y) && (y = y.filter((C) => C !== void 0)), d("update:modelValue", y);
+    );
+    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,
+        "aria-invalid": isInvalid.value,
+        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
+        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+      };
+    });
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue
+    }));
+    const { getOptionLabel, getOptionValue, getOptionDisabled } = 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);
       }
     });
-    return (y, C) => (u(), v("div", {
-      class: ve(t(ie))
-    }, [
-      y.label ? (u(), v("label", {
-        key: 0,
-        for: t(j)
-      }, F(y.label), 9, Vt)) : k("", !0),
-      H("div", $t, [
-        y.$slots.before ? (u(), v("div", kt, [
-          A(y.$slots, "before", T(R(t(ee))))
-        ])) : k("", !0),
-        H("div", Pt, [
-          t(J) ? (u(), Y(pe, N({
-            key: 0,
-            class: "vv-select__icon"
-          }, t(W)), null, 16)) : k("", !0),
-          ke(H("select", N({
-            id: t(j),
-            ref_key: "select",
-            ref: g,
-            "onUpdate:modelValue": C[0] || (C[0] = (E) => _e(Q) ? Q.value = E : null)
-          }, t(G)), [
-            y.placeholder ? (u(), v("option", {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: unref(hasId)
+        }, toDisplayString(_ctx.label), 9, _hoisted_1$1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$1, [
+          _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$6, mergeProps({
               key: 0,
-              value: void 0,
-              disabled: !y.unselectable,
-              hidden: !y.unselectable
-            }, F(y.placeholder), 9, Bt)) : k("", !0),
-            (u(!0), v(q, null, Se(y.options, (E, X) => (u(), v("option", {
-              key: X,
-              disabled: t(fe)(E),
-              value: t(te)(E)
-            }, F(t(ue)(E)), 9, Dt))), 128))
-          ], 16, Et), [
-            [ot, t(Q)]
+              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("option", {
+                  key: index,
+                  disabled: unref(getOptionDisabled)(option),
+                  value: unref(getOptionValue)(option)
+                }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1);
+              }), 128))
+            ], 16, _hoisted_5$1), [
+              [vModelSelect, unref(localModelValue)]
+            ]),
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$6, mergeProps({
+              key: 1,
+              class: "vv-select__icon vv-select__icon-after"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
           ]),
-          t(m) ? (u(), Y(pe, N({
-            key: 1,
-            class: "vv-select__icon vv-select__icon-after"
-          }, t(W)), null, 16)) : k("", !0)
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true)
         ]),
-        y.$slots.after ? (u(), v("div", It, [
-          A(y.$slots, "after", T(R(t(ee))))
-        ])) : k("", !0)
-      ]),
-      de(t(w), {
-        id: t(I),
-        class: "vv-select__hint"
-      }, null, 8, ["id"])
-    ], 2));
+        createVNode(unref(HintSlot), {
+          id: unref(hasDescribedBy),
+          class: "vv-select__hint"
+        }, null, 8, ["id"])
+      ], 2);
+    };
   }
-}), At = {
-  ...he,
+});
+const VvBadgeProps = {
+  ...ModifiersProps,
   value: [String, Number]
-}, xt = {
+};
+const __default__$1 = {
   name: "VvBadge"
-}, Ft = /* @__PURE__ */ ce({
-  ...xt,
-  props: At,
-  setup(s) {
-    const d = s, { modifiers: e } = toRefs(d), c = useBemModifiers("vv-badge", e);
-    return (g, w) => (u(), v("span", {
-      class: ve(t(c)),
-      role: "status"
-    }, [
-      A(g.$slots, "default", {}, () => [
-        se(F(g.value), 1)
-      ])
-    ], 2));
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvBadgeProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-badge", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "status"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
   }
-}), Nt = ["id"], Lt = ["id", "for"], Mt = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], Tt = {
+});
+function useDefaults(componentName, propsDefinition, props) {
+  const volver = useVolver();
+  const volverComponentDefaults = computed(() => {
+    var _a;
+    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+      return void 0;
+    }
+    return volver.defaults.value[componentName];
+  });
+  return computed(() => {
+    if (volverComponentDefaults.value === void 0) {
+      return props;
+    }
+    const componentDefaults = volverComponentDefaults.value;
+    const simplifiedPropsDefinition = propsDefinition;
+    const simplifiedProps = props;
+    return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+      const propValue = simplifiedProps[key];
+      acc[key] = propValue;
+      if (key in componentDefaults) {
+        if (Array.isArray(simplifiedPropsDefinition[key])) {
+          const typeArray = simplifiedPropsDefinition[key];
+          if (typeArray.length) {
+            const typeFunction = typeArray[0];
+            if (typeFunction === propValue) {
+              acc[key] = componentDefaults[key];
+            }
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "function") {
+          const typeFunction = simplifiedPropsDefinition[key];
+          if (typeFunction() === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "object") {
+          let defaultValue = simplifiedPropsDefinition[key].default;
+          if (typeof defaultValue === "function") {
+            defaultValue = defaultValue();
+          }
+          if (typeof defaultValue === "object") {
+            if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
+              acc[key] = componentDefaults[key];
+            }
+          } else if (defaultValue === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+      }
+      return acc;
+    }, {});
+  });
+}
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "for"];
+const _hoisted_3 = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"];
+const _hoisted_4 = {
   key: 0,
   class: "vv-select__input-before"
-}, Rt = { class: "vv-select__inner" }, jt = ["aria-labelledby", "tabindex"], Wt = ["aria-label", "onClick"], zt = {
+};
+const _hoisted_5 = { class: "vv-select__inner" };
+const _hoisted_6 = ["aria-labelledby", "tabindex"];
+const _hoisted_7 = ["aria-label", "onClick"];
+const _hoisted_8 = {
   key: 1,
   class: "vv-select__input-after"
-}, qt = { class: "vv-dropdown-action__hint" }, Ht = {
+};
+const __default__ = {
   name: "VvCombobox",
-  components: { VvDropdown: Ge, VvDropdownItem: Qe }
-}, Qt = /* @__PURE__ */ ce({
-  ...Ht,
-  props: vt,
-  emits: pt,
-  setup(s, { emit: d }) {
-    const e = s, c = useSlots(), { HintSlot: g } = Xe(e, c), w = ref(null), r = ref(null), V = ref(null), { focused: $ } = useComponentFocus(w, d), { focused: b } = useFocusWithin(V);
-    watch($, (l) => {
-      if (e.autoOpen) {
-        if (l && !i.value) {
-          P();
-          return;
-        }
-        !l && i.value && !b.value && B();
+  components: { VvDropdown: _sfc_main$5, VvDropdownOption: _sfc_main$3 }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvComboboxProps,
+  emits: VvComboboxEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvCombobox",
+      VvComboboxProps,
+      props
+    );
+    const { HintSlot } = HintSlotFactory(props, 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) => {
+      if (!props.autoOpen) {
+        return;
+      }
+      if (newValue && !expanded.value) {
+        expand();
+        return;
+      }
+      if (!newValue && expanded.value && !focusedWithin.value) {
+        collapse();
+      }
+    });
+    watch(focusedWithin, (newValue) => {
+      if (!focused.value && !newValue && expanded.value) {
+        collapse();
       }
-    }), watch(b, (l) => {
-      !$.value && !l && i.value && B();
     });
-    const a = ref(""), n = refDebounced(
-      a,
-      Number(e.debounceSearch)
+    const searchText = ref("");
+    const debouncedSearchText = refDebounced(
+      searchText,
+      Number(props.debounceSearch)
     );
     watch(
-      n,
-      () => d("change:search", n.value)
+      debouncedSearchText,
+      () => emit("change:search", debouncedSearchText.value)
     );
-    const i = ref(!1), _ = () => {
-      e.disabled || e.readonly || (i.value = !i.value);
-    }, P = () => {
-      e.disabled || e.readonly || i.value || (i.value = !0);
-    }, B = () => {
-      e.disabled || e.readonly || !i.value || (i.value = !1);
+    const expanded = ref(false);
+    const toggleExpanded = () => {
+      if (props.disabled || props.readonly)
+        return;
+      expanded.value = !expanded.value;
     };
-    watch(i, (l) => {
-      z.value && nextTick(() => {
-        if (l) {
-          r.value && r.value.focus();
-          return;
-        }
-        a.value = "";
-      });
+    const expand = () => {
+      if (props.disabled || props.readonly || expanded.value)
+        return;
+      expanded.value = true;
+    };
+    const collapse = () => {
+      if (props.disabled || props.readonly || !expanded.value)
+        return;
+      expanded.value = false;
+    };
+    watch(expanded, (newValue) => {
+      if (searchable.value) {
+        nextTick(() => {
+          if (newValue) {
+            if (inputSearchEl.value) {
+              inputSearchEl.value.focus();
+            }
+            return;
+          }
+          searchText.value = "";
+        });
+      }
     });
     const {
-      id: K,
-      icon: L,
-      iconPosition: U,
-      modifiers: j,
-      disabled: I,
-      readonly: D,
-      loading: x,
-      valid: W,
-      invalid: J,
-      floating: m,
-      searchable: z
-    } = toRefs(e), O = useUniqueId(K), Z = computed(() => `${O.value}-hint`), re = computed(() => `${O.value}-dropdown`), ie = computed(() => `${O.value}-search`), G = computed(() => `${O.value}-label`), { hasIcon: ee, hasIconBefore: ue, hasIconAfter: te } = useComponentIcon(
-      L,
-      U
-    ), fe = computed(() => !isEmpty(e.modelValue)), Q = computed(() => I.value || D.value ? -1 : e.tabindex), y = useBemModifiers(
+      id,
+      icon,
+      iconPosition,
+      modifiers,
+      disabled,
+      readonly,
+      loading,
+      valid,
+      invalid,
+      floating,
+      searchable
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
+    const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
+    const hasSearchId = computed(() => `${hasId.value}-search`);
+    const hasLabelId = computed(() => `${hasId.value}-label`);
+    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
+      icon,
+      iconPosition
+    );
+    const isDirty = computed(() => !isEmpty(props.modelValue));
+    const hasTabindex = computed(() => {
+      return disabled.value || readonly.value ? -1 : props.tabindex;
+    });
+    const bemCssClasses = useModifiers(
       "vv-select",
-      j,
+      modifiers,
       computed(() => ({
-        disabled: I.value,
-        loading: x.value,
-        readonly: D.value,
-        "icon-before": Boolean(ue.value),
-        "icon-after": Boolean(te.value),
-        valid: W.value,
-        invalid: J.value,
-        dirty: fe.value,
-        focus: $.value,
-        floating: m.value
+        disabled: disabled.value,
+        loading: loading.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
       }))
-    ), C = computed(
-      () => e.searchable ? o.value : e.options
-    ), { getOptionLabel: E, getOptionValue: X, getOptionDisabled: oe } = useOptions(e), o = computed(() => {
-      var l;
-      return (l = e.options) == null ? void 0 : l.filter((S) => E(S).toLowerCase().includes(n.value.toLowerCase().trim()));
+    );
+    const hasOptions = computed(
+      () => props.searchable ? filteredOptions.value : props.options
+    );
+    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const filteredOptions = computed(() => {
+      var _a;
+      return (_a = props.options) == null ? void 0 : _a.filter((option) => {
+        return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
+      });
     });
-    function p(l) {
-      return Array.isArray(e.modelValue) ? contains(l, e.modelValue) || contains(X(l), e.modelValue) : equals(l, e.modelValue) || equals(X(l), e.modelValue);
+    function getOptionSelected(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);
     }
-    const M = computed(() => {
-      let l = [];
-      return Array.isArray(e.modelValue) ? l = e.modelValue : e.modelValue && (l = [e.modelValue]), e.options.filter(
-        (S) => l.includes(X(S))
+    const selectedOptions = computed(() => {
+      let selectedValues = [];
+      if (Array.isArray(props.modelValue)) {
+        selectedValues = props.modelValue;
+      } else if (props.modelValue) {
+        selectedValues = [props.modelValue];
+      }
+      return props.options.filter(
+        (option) => selectedValues.includes(getOptionValue(option))
       );
-    }), le = computed(() => M.value.map((l) => E(l)).join(e.separator));
-    watch(M, () => {
-      !e.multiple && e.autoClose && B();
     });
-    const Ye = () => {
-      e.autoOpen ? P() : _();
-    }, ye = (l) => {
-      var ae;
-      if (e.disabled || e.readonly)
+    const hasValue = computed(() => {
+      return selectedOptions.value.map((option) => getOptionLabel(option)).join(props.separator);
+    });
+    watch(selectedOptions, () => {
+      if (!props.multiple && props.autoClose) {
+        collapse();
+      }
+    });
+    const onClickInput = () => {
+      props.autoOpen ? expand() : toggleExpanded();
+    };
+    const onInput = (option) => {
+      var _a;
+      if (props.disabled || props.readonly) {
         return;
-      const S = X(l);
-      let f = S;
-      if (e.multiple)
-        if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((ae = e.modelValue) == null ? void 0 : ae.length) >= e.maxValues && !contains(S, e.modelValue))
-            return;
-          f = contains(S, e.modelValue) ? removeFromList(S, e.modelValue) : [...e.modelValue, S];
-        } else
-          f = [S];
-      else
-        e.unselectable && S === e.modelValue && (f = void 0);
-      d("update:modelValue", f);
-    }, Ze = computed(() => ({
-      id: O.value,
-      name: e.name,
-      tabindex: Q.value,
-      valid: W.value,
-      validLabel: e.validLabel,
-      invalid: J.value,
-      invalidLabel: e.invalidLabel,
-      hintLabel: e.hintLabel,
-      loading: x.value,
-      loadingLabel: e.loadingLabel,
-      disabled: I.value,
-      readonly: D.value,
-      modifiers: e.modifiers,
-      options: C.value,
-      labelKey: e.labelKey,
-      valueKey: e.valueKey,
-      icon: e.icon,
-      iconPosition: e.iconPosition,
-      floating: e.floating,
-      unselectable: e.unselectable,
-      multiple: e.multiple,
-      label: e.label,
-      placeholder: e.placeholder,
-      modelValue: e.modelValue
-    })), et = computed(() => ({
-      id: re.value,
-      reference: V.value,
-      placement: e.placement,
-      transitionName: e.transitionName,
-      offset: e.offset,
-      shift: e.shift,
-      flip: e.flip,
-      autoPlacement: e.autoPlacement,
-      arrow: e.arrow,
-      autoClose: e.autoClose,
-      autofocusFirst: z.value ? !1 : e.autofocusFirst,
-      triggerWidth: e.triggerWidth,
-      modifiers: e.dropdownModifiers
-    })), Pe = computed(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue
+      }
+      const value = getOptionValue(option);
+      let toReturn = value;
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue)) {
+          if (props.maxValues !== void 0 && props.maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= props.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.autoClose) {
+          collapse();
+        }
+        if (props.unselectable && value === props.modelValue) {
+          toReturn = void 0;
+        }
+      }
+      emit("update:modelValue", toReturn);
+    };
+    const selectProps = computed(() => ({
+      id: hasId.value,
+      name: props.name,
+      tabindex: hasTabindex.value,
+      valid: valid.value,
+      validLabel: propsDefaults.value.validLabel,
+      invalid: invalid.value,
+      invalidLabel: propsDefaults.value.invalidLabel,
+      hintLabel: propsDefaults.value.hintLabel,
+      loading: loading.value,
+      loadingLabel: propsDefaults.value.loadingLabel,
+      disabled: disabled.value,
+      readonly: readonly.value,
+      modifiers: props.modifiers,
+      options: hasOptions.value,
+      labelKey: props.labelKey,
+      valueKey: props.valueKey,
+      icon: props.icon,
+      iconPosition: props.iconPosition,
+      floating: props.floating,
+      unselectable: props.unselectable,
+      multiple: props.multiple,
+      label: props.label,
+      placeholder: props.placeholder,
+      modelValue: props.modelValue
+    }));
+    const dropdownProps = computed(() => ({
+      id: hasDropdownId.value,
+      reference: wrapperEl.value,
+      placement: props.placement,
+      transitionName: props.transitionName,
+      offset: props.offset,
+      shift: props.shift,
+      flip: props.flip,
+      autoPlacement: props.autoPlacement,
+      arrow: props.arrow,
+      autoClose: props.autoClose,
+      autofocusFirst: searchable.value ? false : props.autofocusFirst,
+      triggerWidth: props.triggerWidth,
+      modifiers: props.dropdownModifiers
+    }));
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue
     }));
-    return onKeyStroke([" ", "Enter"], (l) => {
-      e.autoOpen || !i.value && $.value && (l.preventDefault(), l.stopImmediatePropagation(), _());
-    }), (l, S) => l.native ? (u(), Y(Ct, N({ key: 1 }, t(Ze), {
-      "onUpdate:modelValue": S[2] || (S[2] = (f) => d("update:modelValue", f))
-    }), null, 16)) : (u(), v("div", {
-      key: 0,
-      id: t(O),
-      class: ve(t(y))
-    }, [
-      l.label ? (u(), v("label", {
+    onKeyStroke([" ", "Enter"], (e) => {
+      if (props.autoOpen) {
+        return;
+      }
+      if (!expanded.value && focused.value) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        toggleExpanded();
+      }
+    });
+    return (_ctx, _cache) => {
+      return !_ctx.native ? (openBlock(), createElementBlock("div", {
         key: 0,
-        id: t(G),
-        for: t(z) ? t(ie) : void 0
-      }, F(l.label), 9, Lt)) : k("", !0),
-      H("div", {
-        ref_key: "wrapperEl",
-        ref: V,
-        class: "vv-select__wrapper"
+        id: unref(hasId),
+        class: normalizeClass(unref(bemCssClasses))
       }, [
-        de(Ge, N({
-          modelValue: t(i),
-          "onUpdate:modelValue": S[1] || (S[1] = (f) => _e(i) ? i.value = f : null)
-        }, t(et), { role: "listbox" }), lt({
-          default: ne(({ aria: f }) => [
-            l.$slots.before ? (u(), v("div", Tt, [
-              A(l.$slots, "before", T(R(t(Pe))))
-            ])) : k("", !0),
-            H("div", Rt, [
-              t(ue) ? (u(), Y(pe, N({
-                key: 0,
-                class: "vv-select__icon"
-              }, t(ee)), null, 16)) : k("", !0),
-              H("div", N({
-                ref_key: "inputEl",
-                ref: w
-              }, f, {
-                "aria-labelledby": t(G),
-                class: "vv-select__input",
-                role: "combobox",
-                tabindex: t(Q),
-                onClickPassive: Ye
-              }), [
-                A(l.$slots, "value", T(R({ selectedOptions: t(M), onInput: ye })), () => [
-                  t(le) ? (u(), v(q, { key: 0 }, [
-                    l.badges ? (u(!0), v(q, { key: 1 }, Se(t(M), (ae, Ee) => (u(), Y(Ft, {
-                      key: Ee,
-                      modifiers: l.badgeModifiers,
-                      class: "vv-select__badge"
-                    }, {
-                      default: ne(() => [
-                        se(F(t(E)(ae)) + " ", 1),
-                        l.unselectable && !t(D) && !t(I) ? (u(), v("button", {
-                          key: 0,
-                          "aria-label": l.deselectLabel,
-                          onClick: at((Kt) => ye(ae), ["stop"])
-                        }, [
-                          de(pe, { name: "close" })
-                        ], 8, Wt)) : k("", !0)
-                      ]),
-                      _: 2
-                    }, 1032, ["modifiers"]))), 128)) : (u(), v(q, { key: 0 }, [
-                      se(F(t(le)), 1)
-                    ], 64))
-                  ], 64)) : (u(), v(q, { key: 1 }, [
-                    se(F(l.placeholder), 1)
-                  ], 64))
-                ])
-              ], 16, jt),
-              t(te) ? (u(), Y(pe, N({
-                key: 1,
-                class: "vv-select__icon vv-select__icon-after"
-              }, t(ee)), null, 16)) : k("", !0)
-            ]),
-            l.$slots.after ? (u(), v("div", zt, [
-              A(l.$slots, "after", T(R(t(Pe))))
-            ])) : k("", !0)
-          ]),
-          items: ne(() => [
-            (u(!0), v(q, null, Se(t(o), (f, ae) => (u(), Y(Qe, {
-              key: ae,
-              class: ve(["vv-dropdown-action", {
-                disabled: t(oe)(f),
-                selected: p(f),
-                "vv-dropdown-action--unselectable": l.unselectable && p(f)
-              }]),
-              tabindex: t(oe)(f) ? -1 : 0,
-              "aria-selected": p(f),
-              "aria-disabled": t(oe)(f),
-              onClickPassive: (Ee) => ye(f)
-            }, {
-              default: ne(() => [
-                A(l.$slots, "option", T(R({
-                  option: f,
-                  selectedOptions: t(M),
-                  selected: p(f),
-                  disabled: t(oe)(f)
-                })), () => [
-                  se(F(t(E)(f)) + " ", 1),
-                  H("span", qt, [
-                    p(f) ? (u(), v(q, { key: 0 }, [
-                      se(F(l.unselectable ? l.pressToDeselectLabel : l.selectedLabel), 1)
-                    ], 64)) : t(oe)(f) ? k("", !0) : (u(), v(q, { key: 1 }, [
-                      se(F(l.pressToSelectLabel), 1)
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          id: unref(hasLabelId),
+          for: unref(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$5, mergeProps({
+            modelValue: unref(expanded),
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(expanded) ? expanded.value = $event : null)
+          }, unref(dropdownProps), {
+            role: unref(DropdownRole).listbox
+          }), 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$6, mergeProps({
+                  key: 0,
+                  class: "vv-select__icon"
+                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
+                createElementVNode("div", mergeProps({
+                  ref_key: "inputEl",
+                  ref: inputEl
+                }, aria, {
+                  "aria-labelledby": unref(hasLabelId),
+                  class: "vv-select__input",
+                  role: "combobox",
+                  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(Fragment, { key: 0 }, [
+                        createTextVNode(toDisplayString(unref(hasValue)), 1)
+                      ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
+                        return openBlock(), createBlock(_sfc_main$1, {
+                          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,
+                              onClick: withModifiers(($event) => onInput(option), ["stop"])
+                            }, [
+                              createVNode(_sfc_main$6, { name: "close" })
+                            ], 8, _hoisted_7)) : 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$6, mergeProps({
+                  key: 1,
+                  class: "vv-select__icon vv-select__icon-after"
+                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
               ]),
-              _: 2
-            }, 1032, ["tabindex", "class", "aria-selected", "aria-disabled", "onClickPassive"]))), 128))
-          ]),
-          _: 2
-        }, [
-          t(z) ? {
-            name: "before",
-            fn: ne(() => [
-              t(z) ? ke((u(), v("input", {
-                key: 0,
-                id: t(ie),
-                ref_key: "inputSearchEl",
-                ref: r,
-                "onUpdate:modelValue": S[0] || (S[0] = (f) => _e(a) ? a.value = f : null),
-                "aria-autocomplete": "list",
-                "aria-controls": t(re),
-                "aria-labelledby": t(G),
-                "aria-describedby": t(Z),
-                autocomplete: "off",
-                spellcheck: "false",
-                type: "search",
-                class: "vv-dropdown__search",
-                placeholder: l.searchPlaceholder
-              }, null, 8, Mt)), [
-                [xe, t(i)],
-                [st, t(a)]
-              ]) : k("", !0)
+              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("", true)
+            ]),
+            items: withCtx(() => [
+              unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
+                return openBlock(), createBlock(_sfc_main$3, mergeProps({
+                  disabled: unref(getOptionDisabled)(option),
+                  selected: getOptionSelected(option),
+                  unselectable: _ctx.unselectable,
+                  deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                  selectHintLabel: unref(propsDefaults).selectHintLabel,
+                  selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                }, {
+                  key: index,
+                  class: "vv-dropdown-option",
+                  onClickPassive: ($event) => onInput(option)
+                }), {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                      option,
+                      selectedOptions: unref(selectedOptions),
+                      selected: getOptionSelected(option),
+                      disabled: unref(getOptionDisabled)(option)
+                    })), () => [
+                      createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                    ])
+                  ]),
+                  _: 2
+                }, 1040, ["onClickPassive"]);
+              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 1,
+                modifiers: "inert"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "no-options", {}, () => [
+                    createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
+                  ])
+                ]),
+                _: 3
+              })) : (openBlock(), createBlock(_sfc_main$3, {
+                key: 2,
+                modifiers: "inert"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "no-results", {}, () => [
+                    createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+                  ])
+                ]),
+                _: 3
+              }))
             ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["modelValue"])
-      ], 512),
-      de(t(g), {
-        id: t(Z),
-        class: "vv-select__hint"
-      }, null, 8, ["id"])
-    ], 10, Nt));
+            _: 2
+          }, [
+            unref(searchable) || _ctx.$slots["dropdown::before"] ? {
+              name: "before",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::before"),
+                unref(searchable) ? 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),
+                  "aria-labelledby": unref(hasLabelId),
+                  "aria-describedby": unref(hasHintId),
+                  autocomplete: "off",
+                  spellcheck: "false",
+                  type: "search",
+                  class: "vv-dropdown__search",
+                  placeholder: unref(propsDefaults).searchPlaceholder
+                }, null, 8, _hoisted_3)), [
+                  [vShow, unref(expanded)],
+                  [vModelText, unref(searchText)]
+                ]) : createCommentVNode("", true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["dropdown::after"] ? {
+              name: "after",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::after")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["modelValue", "role"])
+        ], 512),
+        createVNode(unref(HintSlot), {
+          id: unref(hasHintId),
+          class: "vv-select__hint"
+        }, null, 8, ["id"])
+      ], 10, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$2, mergeProps({ key: 1 }, unref(selectProps), {
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
+      }), null, 16));
+    };
   }
 });
 export {
-  Qt as default
+  _sfc_main as default
 };