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

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

@@ -1,11 +1,66 @@
-import { inject as Ze, computed as i, unref as o, defineComponent as ne, ref as P, toRefs as Q, openBlock as p, createBlock as x, mergeProps as j, createCommentVNode as k, h as et, Fragment as K, provide as tt, useAttrs as Pt, watch as Y, nextTick as Ee, createElementBlock as g, createVNode as pe, withCtx as F, renderSlot as O, normalizeProps as T, guardReactiveProps as M, Transition as It, withDirectives as Te, createElementVNode as G, normalizeStyle as Je, normalizeClass as _e, vShow as lt, createTextVNode as J, toDisplayString as D, useSlots as ot, isRef as Ne, renderList as Le, vModelSelect as Bt, createSlots as At, withModifiers as Dt, vModelText as Ct } from "vue";
-import { iconExists as $e, Icon as Nt, addIcon as Lt } from "@iconify/vue";
-import { autoPlacement as Ye, flip as Ge, shift as Qe, size as Xe, offset as Ce, arrow as jt, useFloating as Ht, autoUpdate as Ft } from "@floating-ui/vue";
-import { nanoid as xt } from "nanoid";
-import { useVModel as Tt, onClickOutside as Mt, useFocusWithin as Me, onKeyStroke as ye, useElementHover as Rt, useFocus as nt, toReactive as Wt, useElementVisibility as Kt, refDebounced as zt } from "@vueuse/core";
-import qt from "mitt";
-var de = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(de || {}), at = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(at || {}), he = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(he || {}), je = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(je || {}), st = /* @__PURE__ */ ((t) => (t.button = "button", t.link = "link", t.menuitem = "menuitem", t))(st || {}), Se = /* @__PURE__ */ ((t) => (t.listbox = "listbox", t.menu = "menu", t))(Se || {}), He = /* @__PURE__ */ ((t) => (t.option = "option", t.presentation = "presentation", t))(He || {}), rt = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(rt || {});
-const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol.for("dropdownItem"), Yt = Symbol.for("dropdownAction"), Gt = {
+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/)
@@ -22,7 +77,7 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   target: {
     type: String,
-    validator: (t) => Object.values(rt).includes(t)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -31,7 +86,8 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
     type: String,
     default: "noopener noreferrer"
   }
-}, ut = {
+};
+const ValidProps = {
   /**
    * Valid status
    */
@@ -40,7 +96,8 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    * Valid label
    */
   validLabel: [String, Array]
-}, dt = {
+};
+const InvalidProps = {
   /**
    * Invalid status
    */
@@ -49,7 +106,8 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    * Invalid label
    */
   invalidLabel: [String, Array]
-}, ct = {
+};
+const LoadingProps = {
   /**
    * Loading status
    */
@@ -61,44 +119,53 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
     type: String,
     default: "Loading..."
   }
-}, Ae = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Qt = {
+};
+const SelectedProps = {
   /**
    * Whether the item is selected
    */
   selected: Boolean
-}, Xt = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, Zt = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, Re = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, ft = {
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, Ve = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, vt = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, pt = {
+};
+const OptionsProps = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -118,7 +185,8 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    * Used when options are objects: key to use for option disabled
    */
   disabledKey: { type: [String, Function], default: "disabled" }
-}, mt = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -129,39 +197,46 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   iconPosition: {
     type: String,
-    default: he.before,
-    validation: (t) => Object.values(he).includes(t)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, bt = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, yt = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, We = {
+};
+const UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
-}, gt = {
+  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]
-}, Fe = {
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: de.bottom,
-    validator: (t) => Object.values(de).includes(t) || Object.values(at).includes(t)
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
   },
   /**
    * Dropdown show / hide transition name
@@ -183,7 +258,7 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   shift: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Flip dropdown position if there is no space in the default position
@@ -191,7 +266,7 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   flip: {
     type: [Boolean, Object],
-    default: !0
+    default: true
   },
   /**
    * Size of the dropdown
@@ -207,7 +282,7 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   autoPlacement: {
     type: [Boolean, Object],
-    default: !1
+    default: false
   },
   /**
    * Add arrow to the dropdown
@@ -215,21 +290,21 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
    */
   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
@@ -237,21 +312,24 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
   triggerWidth: {
     type: Boolean
   }
-}, ht = {
-  ...gt,
+};
+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 }
-}, el = {
+  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
-}, tl = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
@@ -259,37 +337,42 @@ const Ut = Symbol.for("volver"), Jt = Symbol.for("dropdownTrigger"), it = Symbol
   autocomplete: { type: String, default: "off" }
 };
 ({
-  ...Ae,
-  ...Re,
-  ...Zt,
-  ...Xt,
-  ...Gt,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: je.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const ll = [
+const VvComboboxEvents = [
   "update:modelValue",
   "change:search",
   "focus",
   "blur"
-], ol = {
-  ...ht,
-  ...bt,
-  ...ut,
-  ...dt,
-  ...vt,
-  ...ct,
-  ...Ae,
-  ...ft,
-  ...Ve,
-  ...pt,
-  ...mt,
-  ...yt,
-  ...We,
-  ...Fe,
-  ...Re,
+];
+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
    */
@@ -374,8 +457,8 @@ const ll = [
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    ...Fe.triggerWidth,
-    default: !0
+    ...DropdownProps.triggerWidth,
+    default: true
   },
   /**
    * Dropdown modifiers
@@ -391,7 +474,8 @@ const ll = [
    * Close dropdown on select (not multiple)
    */
   autoClose: Boolean
-}, nl = {
+};
+const VvIconProps = {
   /**
    * Color
    */
@@ -415,7 +499,7 @@ const ll = [
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -485,78 +569,126 @@ const ll = [
     type: [String, Array]
   }
 };
-function al() {
-  return Ze(Ut);
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-function me(t, l, e) {
-  return i(() => {
-    const s = {
-      [t]: !0
-    }, n = typeof (l == null ? void 0 : l.value) == "string" ? l.value.split(" ") : l == null ? void 0 : l.value;
-    return n && Array.isArray(n) && n.forEach((f) => {
-      s[`${t}--${f}`] = !0;
-    }), e && Object.keys(e.value).forEach((f) => {
-      s[`${t}--${f}`] = o(e.value[f]);
-    }), s;
+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 sl = {
+const __default__$6 = {
   name: "VvIcon"
-}, ge = /* @__PURE__ */ ne({
-  ...sl,
-  props: nl,
-  setup(t) {
-    const l = t, e = P(!0), s = al(), { modifiers: n } = Q(l), f = me("vv-icon", n), d = i(() => l.provider || (s == null ? void 0 : s.provider)), b = i(() => {
-      const u = l.name ?? "", c = `@${d.value}:${l.prefix}:${l.name}`;
-      return $e(u) ? u : $e(c) ? c : (s == null ? void 0 : s.iconsCollections.find(
-        (m) => {
-          const V = `@${d.value}:${m.prefix}:${u}`;
-          if ($e(V))
-            return V;
-        }
-      )) || u;
+};
+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 v(u) {
-      let c = null;
-      if (typeof window > "u") {
-        const { JSDOM: B } = require("jsdom");
-        c = new B().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(u, "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 y(u) {
-      const c = v(u), m = (c == null ? void 0 : c.innerHTML.trim()) || "";
-      c && m && Lt(`@${d.value}:${l.prefix}:${l.name}`, {
-        body: m,
-        // Set height and width from svg content
-        height: c.viewBox.baseVal.height,
-        width: c.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
+        });
+      }
+    }
+    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 s && (l.src && !$e(`@${d.value}:${l.prefix}:${l.name}`) ? (e.value = !1, s.fetchIcon(l.src).then((u) => {
-      u && (y(u), e.value = !0);
-    }).catch((u) => {
-      throw new Error(`During fetch icon: ${u == null ? void 0 : u.message}`);
-    })) : l.svg && y(l.svg)), (u, c) => o(e) ? (p(), x(o(Nt), j({
-      key: 0,
-      class: o(f)
-    }, {
-      inline: u.inline,
-      width: u.width,
-      height: u.height,
-      horizontalFlip: u.horizontalFlip,
-      verticalFlip: u.verticalFlip,
-      flip: u.flip,
-      rotate: u.rotate,
-      color: u.color,
-      onLoad: u.onLoad,
-      icon: o(b)
-    }), null, 16, ["class"])) : k("", !0);
+    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);
+    };
   }
-}), rl = {
-  ...gt,
-  ...Ve,
-  ...Fe,
+});
+const VvDropdownProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...DropdownProps,
   /**
    * Show / hide dropdown programmatically
    */
@@ -576,26 +708,28 @@ const sl = {
    */
   role: {
     type: String,
-    default: Se.menu,
-    validator: (t) => Object.values(Se).includes(t)
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
   }
-}, Ke = (t) => i(() => String((t == null ? void 0 : t.value) || xt()));
-function il({
-  reference: t,
-  id: l,
-  expanded: e,
-  aria: s
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useProvideDropdownTrigger({
+  reference,
+  id,
+  expanded,
+  aria
 }) {
-  const n = qt(), f = ne({
+  const bus = mitt();
+  const component = defineComponent({
     name: "VvDropdownTriggerProvider",
     provide() {
       return {
-        [Jt]: {
-          reference: t,
-          id: l,
-          expanded: e,
-          aria: s,
-          bus: n
+        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
+          reference,
+          id,
+          expanded,
+          aria,
+          bus
         }
       };
     },
@@ -603,281 +737,403 @@ function il({
       return {};
     },
     render() {
-      var d, b;
-      return et(K, {}, (b = (d = this.$slots).default) == null ? void 0 : b.call(d));
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
     }
   });
   return {
-    bus: n,
-    component: f
+    bus,
+    component
   };
 }
-function ul({
-  role: t,
-  expanded: l
+function useProvideDropdownItem({
+  role,
+  expanded
 }) {
-  const e = i(
-    () => t.value === Se.listbox ? He.option : He.presentation
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
-  return tt(it, {
-    role: e,
-    expanded: l
-  }), { itemRole: e };
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    expanded
+  });
+  return { itemRole };
 }
-function dl({
-  expanded: t
+function useProvideDropdownAction({
+  expanded
 }) {
-  tt(Yt, {
-    role: st.menuitem,
-    expanded: t
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
   });
 }
-const cl = ["id", "tabindex", "role", "aria-labelledby"], fl = {
+const _hoisted_1$3 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$5 = {
   name: "VvDropdown",
-  inheritAttrs: !1
-}, St = /* @__PURE__ */ ne({
-  ...fl,
-  props: rl,
+  inheritAttrs: false
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
+  props: VvDropdownProps,
   emits: ["update:modelValue"],
-  setup(t, { emit: l }) {
-    const e = t, { id: s } = Q(e), n = Ke(s), f = Pt(), d = P("auto"), b = P("auto"), v = P(null), y = P(null), u = P(null), c = P(null), m = i({
-      get: () => e.reference ?? v.value,
-      set: (a) => {
-        v.value = a;
+  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;
       }
-    }), V = i(() => {
-      const a = [];
-      if (e.autoPlacement ? typeof e.autoPlacement == "boolean" ? a.push(Ye()) : a.push(
-        Ye(e.autoPlacement)
-      ) : e.flip && (typeof e.flip == "boolean" ? a.push(Ge()) : a.push(Ge(e.flip))), e.shift && (typeof e.shift == "boolean" ? a.push(Qe()) : a.push(Qe(e.shift))), e.size) {
-        const _ = ({
-          availableWidth: W,
-          availableHeight: ie
+    });
+    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));
+        }
+      }
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
         }) => {
-          d.value = `${W}px`, b.value = `${ie}px`;
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
         };
-        typeof e.size == "boolean" ? a.push(
-          Xe({
-            apply: _
-          })
-        ) : a.push(
-          Xe({
-            ...e.size,
-            apply: _
+        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 && (a.push(Ce(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? a.push(Ce(Number(e.offset))) : a.push(Ce(e.offset))), e.arrow && a.push(
-        jt({
-          element: u
-        })
-      ), a;
-    }), { x: E, y: B, strategy: X, middlewareData: R, placement: Z } = Ht(
-      m,
-      y,
+      return toReturn;
+    });
+    const { x, y, strategy, middlewareData, placement } = useFloating(
+      referenceEl,
+      floatingEl,
       {
-        whileElementsMounted: Ft,
-        placement: e.placement,
-        middleware: V
+        whileElementsMounted: autoUpdate,
+        placement: props.placement,
+        middleware
       }
-    ), z = i(() => ({
-      position: X.value,
-      top: `${B.value ?? 0}px`,
-      left: `${E.value ?? 0}px`,
-      maxWidth: d.value,
-      maxHeight: b.value,
-      width: e.triggerWidth && m.value ? `${m.value.offsetWidth}px` : void 0
-    })), C = i(() => Z.value.split("-")[0]), A = i(
+    );
+    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"
-      })[C.value] ?? "bottom"
-    ), H = i(() => {
-      var a, _, W, ie;
-      return ["bottom", "top"].includes(A.value) ? {
-        right: `${((a = R.value.arrow) == null ? void 0 : a.x) ?? 0}px`,
-        [A.value]: `${-(((_ = u.value) == null ? void 0 : _.offsetWidth) ?? 0) / 2}px`
-      } : {
-        top: `${((W = R.value.arrow) == null ? void 0 : W.y) ?? 0}px`,
-        [A.value]: `${-(((ie = u.value) == null ? void 0 : ie.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`
       };
-    }), q = Tt(e, "modelValue", l), ee = P(!1), h = i({
-      get: () => q.value ?? ee.value,
-      set: (a) => {
-        if (q.value === void 0) {
-          ee.value = a;
+    });
+    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;
         }
-        q.value = a;
+        modelValue.value = newValue;
       }
-    }), U = () => {
-      h.value = !0;
-    }, N = () => {
-      h.value = !1;
-    }, ae = () => {
-      h.value = !h.value;
-    }, ce = (a) => {
-      m.value = a;
+    });
+    const show = () => {
+      expanded.value = true;
     };
-    Y(h, (a) => {
-      a && e.autofocusFirst && Ee(() => {
-        const _ = I(
-          y.value
-        );
-        _.length > 0 && _[0].focus();
-      });
-    }), Mt(
-      y,
+    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 && (h.value = !1);
+        if (props.autoClose) {
+          expanded.value = false;
+        }
       },
-      { ignore: [m] }
+      { ignore: [referenceEl] }
     );
-    const fe = i(() => {
-      var a;
-      return ((a = m.value) == null ? void 0 : a.getAttribute("id")) ?? void 0;
-    }), te = i(() => ({
-      "aria-controls": n.value,
-      "aria-haspopup": !0,
-      "aria-expanded": h.value
-    })), { component: se, bus: ve } = il({
-      reference: m,
-      id: n,
-      expanded: h,
-      aria: te
+    const hasAriaLabelledby = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+    });
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
     });
-    ve.on("click", ae);
-    const { role: re, modifiers: be } = Q(e), { itemRole: le } = ul({ role: re, expanded: h }), S = me(
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const { itemRole } = useProvideDropdownItem({ role, expanded });
+    const bemCssClasses = useModifiers(
       "vv-dropdown",
-      be,
-      i(() => ({
-        arrow: e.arrow
+      modifiers,
+      computed(() => ({
+        arrow: props.arrow
       }))
-    ), { focused: L } = Me(y);
-    function I(a) {
-      return a ? [
-        ...a.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(
-        (_) => !_.hasAttribute("disabled") && !_.getAttribute("aria-hidden")
-      ) : [];
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
     }
-    const oe = () => {
-      Ee(() => {
-        if (L.value) {
-          const a = I(
-            y.value
+    const focusNext = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (a.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const _ = a.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          _ < a.length - 1 ? a[_ + 1].focus() : a[0].focus();
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus();
+          } else {
+            focusableElements[0].focus();
+          }
         }
       });
-    }, we = () => {
-      Ee(() => {
-        if (L.value) {
-          const a = I(
-            y.value
+    };
+    const focusPrev = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
           );
-          if (a.length === 0 || !document.activeElement)
+          if (focusableElements.length === 0 || !document.activeElement) {
             return;
-          const _ = a.indexOf(
+          }
+          const activeElementIndex = focusableElements.indexOf(
             document.activeElement
           );
-          _ > 0 ? a[_ - 1].focus() : a[a.length - 1].focus();
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus();
+          } else {
+            focusableElements[focusableElements.length - 1].focus();
+          }
         }
       });
     };
-    return ye("Escape", (a) => {
-      h.value && (a.preventDefault(), N());
-    }), ye("ArrowDown", (a) => {
-      h.value && L.value && (a.preventDefault(), oe());
-    }), ye("ArrowUp", (a) => {
-      h.value && L.value && (a.preventDefault(), we());
-    }), ye([" ", "Enter"], (a) => {
-      h.value && L.value && (a.preventDefault(), document.activeElement.click());
-    }), (a, _) => (p(), g(K, null, [
-      pe(o(se), null, {
-        default: F(() => [
-          O(a.$slots, "default", T(M({ init: ce, show: U, hide: N, toggle: ae, expanded: o(h), aria: o(te) })))
-        ]),
-        _: 3
-      }),
-      pe(It, { name: a.transitionName }, {
-        default: F(() => [
-          Te(G("div", {
-            ref_key: "floatingEl",
-            ref: y,
-            style: Je(o(z)),
-            class: _e(o(S))
-          }, [
-            e.arrow ? (p(), g("div", {
-              key: 0,
-              ref_key: "arrowEl",
-              ref: u,
-              style: Je(o(H)),
-              class: "vv-dropdown__arrow"
-            }, null, 4)) : k("", !0),
-            O(a.$slots, "before", T(M({ expanded: o(h) }))),
-            G("ul", j(o(f), {
-              id: o(n),
-              ref_key: "listEl",
-              ref: c,
-              tabindex: o(h) ? void 0 : -1,
-              role: o(re),
-              "aria-labelledby": o(fe),
-              class: "vv-dropdown__list"
-            }), [
-              O(a.$slots, "items", T(M({
-                role: o(le)
-              })))
-            ], 16, cl),
-            O(a.$slots, "after", T(M({ expanded: o(h) })))
-          ], 6), [
-            [lt, o(h)]
-          ])
-        ]),
-        _: 3
-      }, 8, ["name"])
-    ], 64));
+    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 vl() {
-  return Ze(it, {});
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-const pl = {
+const __default__$4 = {
   name: "VvDropdownItem"
-}, ml = /* @__PURE__ */ ne({
-  ...pl,
-  setup(t) {
-    const { role: l, expanded: e } = vl(), s = P(null);
-    dl({ expanded: e });
-    const n = Rt(s), { focused: f } = nt(s), { focused: d } = Me(s);
-    return Y(n, (b) => {
-      b && (f.value = !0);
-    }), (b, v) => (p(), g("li", j({ role: o(l) }, {
-      ref_key: "element",
-      ref: s,
-      class: ["vv-dropdown__item", { "focus-visible": o(f) || o(d) }]
-    }), [
-      O(b.$slots, "default")
-    ], 16));
+};
+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);
+    };
   }
-}), bl = { class: "vv-dropdown-option__hint" }, yl = {
+});
+const _hoisted_1$2 = ["title"];
+const __default__$3 = {
   name: "VvDropdownOption"
-}, Pe = /* @__PURE__ */ ne({
-  ...yl,
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   props: {
-    ...Ae,
-    ...Qt,
-    ...We,
-    ...Ve,
+    ...DisabledProps,
+    ...SelectedProps,
+    ...UnselectableProps,
+    ...ModifiersProps,
     deselectHintLabel: {
       type: String
     },
@@ -888,157 +1144,210 @@ const pl = {
       type: String
     }
   },
-  setup(t) {
-    const l = t, { modifiers: e } = Q(l), s = me(
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
       "vv-dropdown-option",
-      e,
-      i(() => ({
-        disabled: l.disabled,
-        selected: l.selected,
-        unselectable: l.unselectable && l.selected
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
       }))
     );
-    return (n, f) => (p(), x(ml, {
-      class: _e(o(s)),
-      tabindex: n.disabled ? -1 : 0,
-      "aria-selected": n.selected,
-      "aria-disabled": n.disabled
-    }, {
-      default: F(() => [
-        O(n.$slots, "default"),
-        G("span", bl, [
-          O(n.$slots, "hint", T(M({ disabled: n.disabled, selected: n.selected, unselectable: n.unselectable })), () => [
-            n.selected ? (p(), g(K, { key: 0 }, [
-              J(D(n.unselectable ? t.deselectHintLabel : t.selectedHintLabel), 1)
-            ], 64)) : n.disabled ? k("", !0) : (p(), g(K, { key: 1 }, [
-              J(D(t.selectHintLabel), 1)
-            ], 64))
-          ])
-        ])
-      ]),
-      _: 3
-    }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]));
+    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)
+          }, [
+            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, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+    };
   }
 });
-function Ie(t, l, e) {
-  return e ? Be(t, e) === Be(l, e) : xe(t, l);
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
 }
-function xe(t, l) {
-  if (t === l)
-    return !0;
-  if (t && l && typeof t == "object" && typeof l == "object") {
-    const e = Array.isArray(t), s = Array.isArray(l);
-    let n, f, d;
-    if (e && s) {
-      if (f = t.length, f != l.length)
-        return !1;
-      for (n = f; n-- !== 0; )
-        if (!xe(t[n], l[n]))
-          return !1;
-      return !0;
+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;
     }
-    if (e != s)
-      return !1;
-    const b = t instanceof Date, v = l instanceof Date;
-    if (b != v)
-      return !1;
-    if (b && v)
-      return t.getTime() == l.getTime();
-    const y = t instanceof RegExp, u = l instanceof RegExp;
-    if (y != u)
-      return !1;
-    if (y && u)
-      return t.toString() == l.toString();
-    const c = Object.keys(t);
-    if (f = c.length, f !== Object.keys(l).length)
-      return !1;
-    for (n = f; n-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(l, c[n]))
-        return !1;
-    for (n = f; n-- !== 0; )
-      if (d = c[n], !xe(t[d], l[d]))
-        return !1;
-    return !0;
+    return true;
   }
-  return t !== t && l !== l;
+  return a !== a && b !== b;
 }
-function Be(t, l) {
-  if (t && Object.keys(t).length && l) {
-    if (l.indexOf(".") === -1)
-      return t[l];
-    {
-      const e = l.split(".");
-      let s = t;
-      for (let n = 0, f = e.length; n < f; ++n) {
-        if (t == null)
+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;
-        s = s[e[n]];
+        }
+        value = value[fields[i]];
       }
-      return s;
+      return value;
     }
-  } else
+  } else {
     return null;
+  }
 }
-function gl(t, l) {
-  let e = -1;
-  if (l) {
-    for (let s = 0; s < l.length; s++)
-      if (Ie(l[s], t)) {
-        e = s;
+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 e;
+  return index;
 }
-function Oe(t, l) {
-  if (t != null && l && l.length) {
-    for (const e of l)
-      if (Ie(t, e))
-        return !0;
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
   }
-  return !1;
+  return false;
 }
-function ze(t) {
-  return ((l) => l == null || l === "" || Array.isArray(l) && l.length === 0 || !(l instanceof Date) && typeof l == "object" && Object.keys(l).length === 0)(o(t));
+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 hl(t, l) {
-  const e = gl(t, l);
-  return e > -1 ? l.filter((s, n) => n !== e) : l;
+function removeFromList(value, list) {
+  const indexElToRemove = findIndexInList(value, list);
+  if (indexElToRemove > -1) {
+    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
+  } else {
+    return list;
+  }
 }
-function Sl(t) {
-  return typeof t == "string" || t instanceof String;
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
 }
-function ke(t) {
-  return Array.isArray(t) ? t.filter((l) => Sl(l)).join(" ") : t;
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function _t(t, l) {
+function HintSlotFactory(parentProps, parentSlots) {
   const {
-    invalid: e,
-    valid: s,
-    hint: n,
-    loading: f
-  } = l, {
-    hintLabel: d,
-    modelValue: b,
-    valid: v,
-    validLabel: y,
-    invalid: u,
-    invalidLabel: c,
-    ...m
-  } = Q(t), V = Be(m, "loading"), E = Be(m, "loadingLabel"), B = i(() => u.value ? !!(u.value && e || c != null && c.value && Array.isArray(c.value) && c.value.length > 0 || c != null && c.value && !ze(c)) : !1), X = i(
-    () => !!(d && d.value || n)
-  ), R = i(
-    () => !!(y && y.value || s)
-  ), Z = i(
-    () => !!(V != null && V.value && f || V != null && V.value && (E != null && E.value))
-  ), z = i(
-    () => X.value || R.value || B.value || Z.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: X,
-    hasValid: R,
-    hasLoading: Z,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -1047,58 +1356,66 @@ function _t(t, l) {
           default: () => ({})
         }
       },
-      setup(C) {
-        const A = i(() => {
-          const H = Wt({
-            hintLabel: d,
-            modelValue: b,
-            valid: v,
-            validLabel: y,
-            invalid: u,
-            invalidLabel: c,
-            loading: V,
-            loadingLabel: E,
-            ...C.params
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          return u != null && u.value ? (e == null ? void 0 : e(H)) || ke(c == null ? void 0 : c.value) || (d == null ? void 0 : d.value) : v != null && v.value ? (s == null ? void 0 : s(H)) || ke(y == null ? void 0 : y.value) || (d == null ? void 0 : d.value) : V != null && V.value ? (f == null ? void 0 : f(H)) || ke(E == null ? void 0 : E.value) || (d == null ? void 0 : d.value) : (n == null ? void 0 : n(H)) || ke(d == null ? void 0 : d.value) || (d == null ? void 0 : d.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: z,
-          hasInvalid: B,
-          hasValid: R,
-          hintContent: A
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
-          return et(
+        if (this.isVisible) {
+          return h(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const _l = {
-  ...ht,
-  ...el,
-  ...tl,
-  ...bt,
-  ...ut,
-  ...dt,
-  ...vt,
-  ...ct,
-  ...Ae,
-  ...ft,
-  ...Ve,
-  ...pt,
-  ...mt,
-  ...yt,
-  ...We,
-  ...Re,
+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.
@@ -1129,521 +1446,753 @@ const _l = {
    * Select placeholder
    */
   placeholder: String
-}, Vl = ["update:modelValue", "focus", "blur"];
-function Vt(t, l) {
-  const { focused: e } = nt(t);
-  return Y(e, (s) => {
-    l(s ? "focus" : "blur", o(t));
-  }), {
-    focused: e
+};
+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 wt(t, l) {
-  const e = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === he.before)
-  ), s = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === he.after)
-  ), n = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === de.left)
-  ), f = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === de.right)
-  ), d = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === de.top)
-  ), b = i(
-    () => Boolean((t == null ? void 0 : t.value) && l.value === de.bottom)
+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: i(() => typeof (t == null ? void 0 : t.value) == "string" ? { name: t == null ? void 0 : t.value } : t == null ? void 0 : t.value),
-    hasIconLeft: n,
-    hasIconRight: f,
-    hasIconTop: d,
-    hasIconBottom: b,
-    hasIconBefore: e,
-    hasIconAfter: s
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-function $t(t) {
-  const { options: l, labelKey: e, valueKey: s, disabledKey: n } = Q(t);
+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: l,
-    getOptionLabel: (v) => typeof v != "object" && v !== null ? v : typeof e.value == "function" ? e.value(v) : v[e.value],
-    getOptionValue: (v) => typeof v != "object" && v !== null ? v : typeof s.value == "function" ? s.value(v) : v[s.value],
-    getOptionDisabled: (v) => typeof v != "object" && v !== null ? !1 : typeof n.value == "function" ? n.value(v) : v[n.value]
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled
   };
 }
-const wl = ["for"], $l = { class: "vv-select__wrapper" }, Ol = {
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = { class: "vv-select__wrapper" };
+const _hoisted_3$1 = {
   key: 0,
   class: "vv-select__input-before"
-}, kl = { class: "vv-select__inner" }, El = ["id"], Pl = ["disabled", "hidden"], Il = ["disabled", "value"], Bl = {
+};
+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"
-}, Al = {
+};
+const __default__$2 = {
   name: "VvSelect"
-}, Dl = /* @__PURE__ */ ne({
-  ...Al,
-  props: _l,
-  emits: Vl,
-  setup(t, { emit: l }) {
-    const e = t, s = ot(), n = P(), { HintSlot: f, hasHint: d, hasInvalid: b } = _t(e, s), {
-      id: v,
-      modifiers: y,
-      disabled: u,
-      readonly: c,
-      loading: m,
-      icon: V,
-      iconPosition: E,
-      invalid: B,
-      valid: X,
-      floating: R,
-      multiple: Z
-    } = Q(e), z = Ke(v), C = i(() => `${z.value}-hint`), { focused: A } = Vt(n, l), H = Kt(n);
-    Y(H, (S) => {
-      S && e.autofocus && (A.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: q, hasIconBefore: ee, hasIconAfter: h } = wt(
-      V,
-      E
-    ), U = i(() => !ze(e.modelValue)), N = i(() => e.disabled || e.readonly), ae = i(() => N.value ? -1 : e.tabindex), ce = i(() => {
-      if (e.invalid === !0)
-        return !0;
-      if (e.valid === !0)
-        return !1;
-    }), fe = me(
+    const isInvalid = computed(() => {
+      if (props.invalid === true) {
+        return true;
+      }
+      if (props.valid === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const bemCssClasses = useModifiers(
       "vv-select",
-      y,
-      i(() => ({
-        valid: X.value,
-        invalid: B.value,
-        loading: m.value,
-        disabled: u.value,
-        readonly: c.value,
-        "icon-before": ee.value,
-        "icon-after": h.value,
-        dirty: U.value,
-        focus: A.value,
-        floating: R.value,
-        multiple: Z.value
+      modifiers,
+      computed(() => ({
+        valid: valid.value,
+        invalid: invalid.value,
+        loading: loading.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        "icon-before": hasIconBefore.value,
+        "icon-after": hasIconAfter.value,
+        dirty: isDirty.value,
+        focus: focused.value,
+        floating: floating.value,
+        multiple: multiple.value
       }))
-    ), te = i(() => ({
-      name: e.name,
-      tabindex: ae.value,
-      disabled: N.value,
-      required: e.required,
-      size: e.size,
-      autocomplete: e.autocomplete,
-      multiple: e.multiple,
-      "aria-invalid": ce.value,
-      "aria-describedby": !b.value && d.value ? C.value : void 0,
-      "aria-errormessage": b.value ? C.value : void 0
-    })), se = i(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue
-    })), { getOptionLabel: ve, getOptionValue: re, getOptionDisabled: be } = $t(e), le = i({
-      get: () => e.modelValue,
-      set: (S) => {
-        Array.isArray(S) && (S = S.filter((L) => L !== void 0)), l("update:modelValue", S);
+    );
+    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 (S, L) => (p(), g("div", {
-      class: _e(o(fe))
-    }, [
-      S.label ? (p(), g("label", {
-        key: 0,
-        for: o(z)
-      }, D(S.label), 9, wl)) : k("", !0),
-      G("div", $l, [
-        S.$slots.before ? (p(), g("div", Ol, [
-          O(S.$slots, "before", T(M(o(se))))
-        ])) : k("", !0),
-        G("div", kl, [
-          o(ee) ? (p(), x(ge, j({
-            key: 0,
-            class: "vv-select__icon"
-          }, o(q)), null, 16)) : k("", !0),
-          Te(G("select", j({
-            id: o(z),
-            ref_key: "select",
-            ref: n,
-            "onUpdate:modelValue": L[0] || (L[0] = (I) => Ne(le) ? le.value = I : null)
-          }, o(te)), [
-            S.placeholder ? (p(), g("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: !S.unselectable,
-              hidden: !S.unselectable
-            }, D(S.placeholder), 9, Pl)) : k("", !0),
-            (p(!0), g(K, null, Le(S.options, (I, oe) => (p(), g("option", {
-              key: oe,
-              disabled: o(be)(I),
-              value: o(re)(I)
-            }, D(o(ve)(I)), 9, Il))), 128))
-          ], 16, El), [
-            [Bt, o(le)]
+              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)
           ]),
-          o(h) ? (p(), x(ge, j({
-            key: 1,
-            class: "vv-select__icon vv-select__icon-after"
-          }, o(q)), null, 16)) : k("", !0)
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true)
         ]),
-        S.$slots.after ? (p(), g("div", Bl, [
-          O(S.$slots, "after", T(M(o(se))))
-        ])) : k("", !0)
-      ]),
-      pe(o(f), {
-        id: o(C),
-        class: "vv-select__hint"
-      }, null, 8, ["id"])
-    ], 2));
+        createVNode(unref(HintSlot), {
+          id: unref(hasDescribedBy),
+          class: "vv-select__hint"
+        }, null, 8, ["id"])
+      ], 2);
+    };
   }
-}), Cl = {
-  ...Ve,
+});
+const VvBadgeProps = {
+  ...ModifiersProps,
   value: [String, Number]
-}, Nl = {
+};
+const __default__$1 = {
   name: "VvBadge"
-}, Ll = /* @__PURE__ */ ne({
-  ...Nl,
-  props: Cl,
-  setup(t) {
-    const l = t, { modifiers: e } = Q(l), s = me("vv-badge", e);
-    return (n, f) => (p(), g("span", {
-      class: _e(o(s)),
-      role: "status"
-    }, [
-      O(n.$slots, "default", {}, () => [
-        J(D(n.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);
+    };
   }
-}), jl = ["id"], Hl = ["id", "for"], Fl = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], xl = {
+});
+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"
-}, Tl = { class: "vv-select__inner" }, Ml = ["aria-labelledby", "tabindex"], Rl = ["aria-label", "onClick"], Wl = {
+};
+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"
-}, Kl = {
+};
+const __default__ = {
   name: "VvCombobox",
-  components: { VvDropdown: St, VvDropdownOption: Pe }
-}, Xl = /* @__PURE__ */ ne({
-  ...Kl,
-  props: ol,
-  emits: ll,
-  setup(t, { emit: l }) {
-    const e = t, s = ot(), { HintSlot: n } = _t(e, s), f = P(null), d = P(null), b = P(null), { focused: v } = Vt(f, l), { focused: y } = Me(b);
-    Y(v, (r) => {
-      if (e.autoOpen) {
-        if (r && !m.value) {
-          E();
-          return;
-        }
-        !r && m.value && !y.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();
       }
-    }), Y(y, (r) => {
-      !v.value && !r && m.value && B();
     });
-    const u = P(""), c = zt(
-      u,
-      Number(e.debounceSearch)
+    const searchText = ref("");
+    const debouncedSearchText = refDebounced(
+      searchText,
+      Number(props.debounceSearch)
     );
-    Y(
-      c,
-      () => l("change:search", c.value)
+    watch(
+      debouncedSearchText,
+      () => emit("change:search", debouncedSearchText.value)
     );
-    const m = P(!1), V = () => {
-      e.disabled || e.readonly || (m.value = !m.value);
-    }, E = () => {
-      e.disabled || e.readonly || m.value || (m.value = !0);
-    }, B = () => {
-      e.disabled || e.readonly || !m.value || (m.value = !1);
+    const expanded = ref(false);
+    const toggleExpanded = () => {
+      if (props.disabled || props.readonly)
+        return;
+      expanded.value = !expanded.value;
     };
-    Y(m, (r) => {
-      U.value && Ee(() => {
-        if (r) {
-          d.value && d.value.focus();
-          return;
-        }
-        u.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: X,
-      icon: R,
-      iconPosition: Z,
-      modifiers: z,
-      disabled: C,
-      readonly: A,
-      loading: H,
-      valid: q,
-      invalid: ee,
-      floating: h,
-      searchable: U
-    } = Q(e), N = Ke(X), ae = i(() => `${N.value}-hint`), ce = i(() => `${N.value}-dropdown`), fe = i(() => `${N.value}-search`), te = i(() => `${N.value}-label`), { hasIcon: se, hasIconBefore: ve, hasIconAfter: re } = wt(
-      R,
-      Z
-    ), be = i(() => !ze(e.modelValue)), le = i(() => C.value || A.value ? -1 : e.tabindex), S = me(
+      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",
-      z,
-      i(() => ({
-        disabled: C.value,
-        loading: H.value,
-        readonly: A.value,
-        "icon-before": Boolean(ve.value),
-        "icon-after": Boolean(re.value),
-        valid: q.value,
-        invalid: ee.value,
-        dirty: be.value,
-        focus: v.value,
-        floating: h.value
+      modifiers,
+      computed(() => ({
+        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
       }))
-    ), L = i(
-      () => e.searchable ? a.value : e.options
-    ), { getOptionLabel: I, getOptionValue: oe, getOptionDisabled: we } = $t(e), a = i(() => {
-      var r;
-      return (r = e.options) == null ? void 0 : r.filter(($) => I($).toLowerCase().includes(c.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 _(r) {
-      return Array.isArray(e.modelValue) ? Oe(r, e.modelValue) || Oe(oe(r), e.modelValue) : Ie(r, e.modelValue) || Ie(oe(r), 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 W = i(() => {
-      let r = [];
-      return Array.isArray(e.modelValue) ? r = e.modelValue : e.modelValue && (r = [e.modelValue]), e.options.filter(
-        ($) => r.includes(oe($))
+    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))
       );
-    }), ie = i(() => W.value.map((r) => I(r)).join(e.separator));
-    Y(W, () => {
-      !e.multiple && e.autoClose && B();
     });
-    const Ot = () => {
-      e.autoOpen ? E() : V();
-    }, De = (r) => {
-      var ue;
-      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 $ = oe(r);
-      let w = $;
-      if (e.multiple)
-        if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((ue = e.modelValue) == null ? void 0 : ue.length) >= e.maxValues && !Oe($, e.modelValue))
-            return;
-          w = Oe($, e.modelValue) ? hl($, e.modelValue) : [...e.modelValue, $];
-        } else
-          w = [$];
-      else
-        e.unselectable && $ === e.modelValue && (w = void 0);
-      l("update:modelValue", w);
-    }, kt = i(() => ({
-      id: N.value,
-      name: e.name,
-      tabindex: le.value,
-      valid: q.value,
-      validLabel: e.validLabel,
-      invalid: ee.value,
-      invalidLabel: e.invalidLabel,
-      hintLabel: e.hintLabel,
-      loading: H.value,
-      loadingLabel: e.loadingLabel,
-      disabled: C.value,
-      readonly: A.value,
-      modifiers: e.modifiers,
-      options: L.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 = i(() => ({
-      id: ce.value,
-      reference: b.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: U.value ? !1 : e.autofocusFirst,
-      triggerWidth: e.triggerWidth,
-      modifiers: e.dropdownModifiers
-    })), qe = i(() => ({
-      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 ye([" ", "Enter"], (r) => {
-      e.autoOpen || !m.value && v.value && (r.preventDefault(), r.stopImmediatePropagation(), V());
-    }), (r, $) => r.native ? (p(), x(Dl, j({ key: 1 }, o(kt), {
-      "onUpdate:modelValue": $[2] || ($[2] = (w) => l("update:modelValue", w))
-    }), null, 16)) : (p(), g("div", {
-      key: 0,
-      id: o(N),
-      class: _e(o(S))
-    }, [
-      r.label ? (p(), g("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: o(te),
-        for: o(U) ? o(fe) : void 0
-      }, D(r.label), 9, Hl)) : k("", !0),
-      G("div", {
-        ref_key: "wrapperEl",
-        ref: b,
-        class: "vv-select__wrapper"
+        id: unref(hasId),
+        class: normalizeClass(unref(bemCssClasses))
       }, [
-        pe(St, j({
-          modelValue: o(m),
-          "onUpdate:modelValue": $[1] || ($[1] = (w) => Ne(m) ? m.value = w : null)
-        }, o(Et), {
-          role: o(Se).listbox
-        }), At({
-          default: F(({ aria: w }) => [
-            r.$slots.before ? (p(), g("div", xl, [
-              O(r.$slots, "before", T(M(o(qe))))
-            ])) : k("", !0),
-            G("div", Tl, [
-              o(ve) ? (p(), x(ge, j({
-                key: 0,
-                class: "vv-select__icon"
-              }, o(se)), null, 16)) : k("", !0),
-              G("div", j({
-                ref_key: "inputEl",
-                ref: f
-              }, w, {
-                "aria-labelledby": o(te),
-                class: "vv-select__input",
-                role: "combobox",
-                tabindex: o(le),
-                onClickPassive: Ot
-              }), [
-                O(r.$slots, "value", T(M({ selectedOptions: o(W), onInput: De })), () => [
-                  o(ie) ? (p(), g(K, { key: 0 }, [
-                    r.badges ? (p(!0), g(K, { key: 1 }, Le(o(W), (ue, Ue) => (p(), x(Ll, {
-                      key: Ue,
-                      modifiers: r.badgeModifiers,
-                      class: "vv-select__badge"
-                    }, {
-                      default: F(() => [
-                        J(D(o(I)(ue)) + " ", 1),
-                        r.unselectable && !o(A) && !o(C) ? (p(), g("button", {
-                          key: 0,
-                          "aria-label": r.deselectActionLabel,
-                          onClick: Dt((zl) => De(ue), ["stop"])
-                        }, [
-                          pe(ge, { name: "close" })
-                        ], 8, Rl)) : k("", !0)
-                      ]),
-                      _: 2
-                    }, 1032, ["modifiers"]))), 128)) : (p(), g(K, { key: 0 }, [
-                      J(D(o(ie)), 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))
-                  ], 64)) : (p(), g(K, { key: 1 }, [
-                    J(D(r.placeholder), 1)
-                  ], 64))
-                ])
-              ], 16, Ml),
-              o(re) ? (p(), x(ge, j({
+                  ])
+                ], 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)
+              ]),
+              _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,
-                class: "vv-select__icon vv-select__icon-after"
-              }, o(se)), null, 16)) : k("", !0)
+                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
+              }))
             ]),
-            r.$slots.after ? (p(), g("div", Wl, [
-              O(r.$slots, "after", T(M(o(qe))))
-            ])) : k("", !0)
-          ]),
-          items: F(() => [
-            o(a).length ? (p(!0), g(K, { key: 0 }, Le(o(a), (w, ue) => (p(), x(Pe, j({
-              disabled: o(we)(w),
-              selected: _(w),
-              unselectable: r.unselectable,
-              deselectHintLabel: r.deselectHintLabel,
-              selectHintLabel: r.selectHintLabel,
-              selectedHintLabel: r.selectedHintLabel
-            }, {
-              key: ue,
-              class: "vv-dropdown-option",
-              onClickPassive: (Ue) => De(w)
-            }), {
-              default: F(() => [
-                O(r.$slots, "option", T(M({
-                  option: w,
-                  selectedOptions: o(W),
-                  selected: _(w),
-                  disabled: o(we)(w)
-                })), () => [
-                  J(D(o(I)(w)), 1)
-                ])
+            _: 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)
               ]),
-              _: 2
-            }, 1040, ["onClickPassive"]))), 128)) : r.options.length ? (p(), x(Pe, {
-              key: 2,
-              modifiers: "inert"
-            }, {
-              default: F(() => [
-                O(r.$slots, "no-results", {}, () => [
-                  J(D(r.noResultsLabel), 1)
-                ])
+              key: "0"
+            } : void 0,
+            _ctx.$slots["dropdown::after"] ? {
+              name: "after",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::after")
               ]),
-              _: 3
-            })) : (p(), x(Pe, {
-              key: 1,
-              modifiers: "inert"
-            }, {
-              default: F(() => [
-                O(r.$slots, "no-options", {}, () => [
-                  J(D(r.noOptionsLabel), 1)
-                ])
-              ]),
-              _: 3
-            }))
-          ]),
-          _: 2
-        }, [
-          o(U) || r.$slots["dropdown::before"] ? {
-            name: "before",
-            fn: F(() => [
-              O(r.$slots, "dropdown::before"),
-              o(U) ? Te((p(), g("input", {
-                key: 0,
-                id: o(fe),
-                ref_key: "inputSearchEl",
-                ref: d,
-                "onUpdate:modelValue": $[0] || ($[0] = (w) => Ne(u) ? u.value = w : null),
-                "aria-autocomplete": "list",
-                "aria-controls": o(ce),
-                "aria-labelledby": o(te),
-                "aria-describedby": o(ae),
-                autocomplete: "off",
-                spellcheck: "false",
-                type: "search",
-                class: "vv-dropdown__search",
-                placeholder: r.searchPlaceholder
-              }, null, 8, Fl)), [
-                [lt, o(m)],
-                [Ct, o(u)]
-              ]) : k("", !0)
-            ]),
-            key: "0"
-          } : void 0,
-          r.$slots["dropdown::after"] ? {
-            name: "after",
-            fn: F(() => [
-              O(r.$slots, "dropdown::after")
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1040, ["modelValue", "role"])
-      ], 512),
-      pe(o(n), {
-        id: o(ae),
-        class: "vv-select__hint"
-      }, null, 8, ["id"])
-    ], 10, jl));
+              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 {
-  Xl as default
+  _sfc_main as default
 };