@volverjs/ui-vue 0.0.3 → 0.0.4

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

@@ -1,34 +1,104 @@
-import { defineComponent as ce, unref as t, openBlock as u, createBlock as Y, mergeProps as N, createCommentVNode as k, createElementBlock as v, Fragment as q, createVNode as de, withCtx as ne, renderSlot as A, normalizeProps as T, guardReactiveProps as R, Transition as tt, withDirectives as ke, createElementVNode as H, normalizeStyle as Be, normalizeClass as ve, vShow as xe, toDisplayString as F, isRef as _e, renderList as Se, vModelSelect as ot, createTextVNode as se, createSlots as lt, withModifiers as at, vModelText as st } from "vue";
-import { iconExists as me, Icon as nt, addIcon as rt } from "@iconify/vue";
-import { autoPlacement as De, flip as Ie, shift as Oe, size as Ce, offset as ge, arrow as it, useFloating as ut, autoUpdate as dt } from "@floating-ui/vue";
-var we = /* @__PURE__ */ ((s) => (s.left = "left", s.right = "right", s.top = "top", s.bottom = "bottom", s))(we || {}), Fe = /* @__PURE__ */ ((s) => (s.topStart = "top-start", s.topEnd = "top-end", s.bottomStart = "bottom-start", s.bottomEnd = "bottom-end", s.leftStart = "left-start", s.leftEnd = "left-end", s.rightStart = "right-start", s.rightEnd = "right-end", s))(Fe || {}), Ve = /* @__PURE__ */ ((s) => (s.before = "before", s.after = "after", s))(Ve || {});
-const Ne = {
+import { inject 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 = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (t) => Object.values(rt).includes(t)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, ut = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, Le = {
+}, dt = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, Me = {
+}, ct = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, Te = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, Ae = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
+}, Qt = {
+  /**
+   * Whether the item is selected
+   */
+  selected: Boolean
+}, Xt = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Zt = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
 }, Re = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, ft = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, he = {
+}, Ve = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, je = {
+}, vt = {
   hintLabel: { type: String, default: "" }
-}, We = {
+}, pt = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -48,7 +118,7 @@ const Ne = {
    * Used when options are objects: key to use for option disabled
    */
   disabledKey: { type: [String, Function], default: "disabled" }
-}, ze = {
+}, mt = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -59,39 +129,39 @@ const Ne = {
    */
   iconPosition: {
     type: String,
-    default: Ve.before,
-    validation: (s) => Object.values(Ve).includes(s)
+    default: he.before,
+    validation: (t) => Object.values(he).includes(t)
   }
-}, qe = {
+}, bt = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, He = {
+}, yt = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, Ke = {
+}, We = {
   /**
    * If true the input will be unselectable
    */
   unselectable: { type: Boolean, default: !0 }
-}, Ue = {
+}, gt = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
-}, $e = {
+}, Fe = {
   /**
    * Dropdown placement
    */
   placement: {
     type: String,
-    default: we.bottom,
-    validator: (s) => Object.values(we).includes(s) || Object.values(Fe).includes(s)
+    default: de.bottom,
+    validator: (t) => Object.values(de).includes(t) || Object.values(at).includes(t)
   },
   /**
    * Dropdown show / hide transition name
@@ -167,46 +237,59 @@ const Ne = {
   triggerWidth: {
     type: Boolean
   }
-}, Je = {
-  ...Ue,
+}, ht = {
+  ...gt,
   /**
    * Input / Textarea name
    * Name of the form control. Submitted with the form as part of a name/value pair
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
    */
   name: { type: String, required: !0 }
-}, ct = {
+}, el = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, ft = {
+}, tl = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, pt = [
+};
+({
+  ...Ae,
+  ...Re,
+  ...Zt,
+  ...Xt,
+  ...Gt,
+  /**
+   * Button type
+   */
+  type: je.button
+});
+const ll = [
   "update:modelValue",
   "change:search",
   "focus",
   "blur"
-], vt = {
-  ...Je,
-  ...qe,
-  ...Ne,
-  ...Le,
-  ...je,
-  ...Me,
-  ...Te,
-  ...Re,
-  ...he,
+], ol = {
+  ...ht,
+  ...bt,
+  ...ut,
+  ...dt,
+  ...vt,
+  ...ct,
+  ...Ae,
+  ...ft,
+  ...Ve,
+  ...pt,
+  ...mt,
+  ...yt,
   ...We,
-  ...ze,
-  ...He,
-  ...Ke,
-  ...$e,
+  ...Fe,
+  ...Re,
   /**
    * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
    */
@@ -214,30 +297,30 @@ const Ne = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  /**
-   * Select input label
-   */
-  label: String,
   /**
    * Label for no search results
    */
   noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for no options	available
+   */
+  noOptionsLabel: { type: String, default: "No options available" },
   /**
    * Label for selected option hint
    */
-  selectedLabel: { type: String, default: "Selected" },
+  selectedHintLabel: { type: String, default: "Selected" },
   /**
-   * Label for deselect button
+   * Label for deselect action button
    */
-  deselectLabel: { type: String, default: "Deselect" },
+  deselectActionLabel: { type: String, default: "Deselect" },
   /**
    * Label for select option hint
    */
-  pressToSelectLabel: { type: String, default: "Press enter to select" },
+  selectHintLabel: { type: String, default: "Press enter to select" },
   /**
    * Label for deselected option hint
    */
-  pressToDeselectLabel: { type: String, default: "Press enter to remove" },
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
   /**
    * Select input placeholder
    */
@@ -291,7 +374,7 @@ const Ne = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    ...$e.triggerWidth,
+    ...Fe.triggerWidth,
     default: !0
   },
   /**
@@ -308,7 +391,7 @@ const Ne = {
    * Close dropdown on select (not multiple)
    */
   autoClose: Boolean
-}, mt = {
+}, nl = {
   /**
    * Color
    */
@@ -401,63 +484,79 @@ const Ne = {
   modifiers: {
     type: [String, Array]
   }
-}, bt = {
+};
+function al() {
+  return Ze(Ut);
+}
+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;
+  });
+}
+const sl = {
   name: "VvIcon"
-}, pe = /* @__PURE__ */ ce({
-  ...bt,
-  props: mt,
-  setup(s) {
-    const d = s, e = ref(!0), c = useVolver(), { modifiers: g } = toRefs(d), w = useBemModifiers("vv-icon", g), r = computed(() => d.provider || (c == null ? void 0 : c.provider)), V = computed(() => {
-      const a = d.name ?? "", n = `@${r.value}:${d.prefix}:${d.name}`;
-      return me(a) ? a : me(n) ? n : (c == null ? void 0 : c.iconsCollections.find(
-        (i) => {
-          const _ = `@${r.value}:${i.prefix}:${a}`;
-          if (me(_))
-            return _;
+}, 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;
         }
-      )) || a;
+      )) || u;
     });
-    function $(a) {
-      let n = null;
+    function v(u) {
+      let c = null;
       if (typeof window > "u") {
         const { JSDOM: B } = require("jsdom");
-        n = new B().window;
+        c = new B().window;
       }
-      return (n ? new n.DOMParser() : new window.DOMParser()).parseFromString(a, "text/html").querySelector("svg");
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(u, "text/html").querySelector("svg");
     }
-    function b(a) {
-      const n = $(a), i = (n == null ? void 0 : n.innerHTML.trim()) || "";
-      n && i && rt(`@${r.value}:${d.prefix}:${d.name}`, {
-        body: i,
+    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: n.viewBox.baseVal.height,
-        width: n.viewBox.baseVal.width
+        height: c.viewBox.baseVal.height,
+        width: c.viewBox.baseVal.width
       });
     }
-    return c && (d.src && !me(`@${r.value}:${d.prefix}:${d.name}`) ? (e.value = !1, c.fetchIcon(d.src).then((a) => {
-      a && (b(a), e.value = !0);
-    }).catch((a) => {
-      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
-    })) : d.svg && b(d.svg)), (a, n) => t(e) ? (u(), Y(t(nt), N({
+    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: t(w)
+      class: o(f)
     }, {
-      inline: a.inline,
-      width: a.width,
-      height: a.height,
-      horizontalFlip: a.horizontalFlip,
-      verticalFlip: a.verticalFlip,
-      flip: a.flip,
-      rotate: a.rotate,
-      color: a.color,
-      onLoad: a.onLoad,
-      icon: t(V)
+      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);
   }
-}), Ae = ["listbox", "menu"], ht = {
-  ...Ue,
-  ...he,
-  ...$e,
+}), rl = {
+  ...gt,
+  ...Ve,
+  ...Fe,
   /**
    * Show / hide dropdown programmatically
    */
@@ -477,274 +576,469 @@ const Ne = {
    */
   role: {
     type: String,
-    default: Ae[1],
-    validator: (s) => Ae.includes(s)
+    default: Se.menu,
+    validator: (t) => Object.values(Se).includes(t)
   }
-}, yt = ["id", "tabindex", "role", "aria-labelledby"], gt = {
+}, Ke = (t) => i(() => String((t == null ? void 0 : t.value) || xt()));
+function il({
+  reference: t,
+  id: l,
+  expanded: e,
+  aria: s
+}) {
+  const n = qt(), f = ne({
+    name: "VvDropdownTriggerProvider",
+    provide() {
+      return {
+        [Jt]: {
+          reference: t,
+          id: l,
+          expanded: e,
+          aria: s,
+          bus: n
+        }
+      };
+    },
+    setup() {
+      return {};
+    },
+    render() {
+      var d, b;
+      return et(K, {}, (b = (d = this.$slots).default) == null ? void 0 : b.call(d));
+    }
+  });
+  return {
+    bus: n,
+    component: f
+  };
+}
+function ul({
+  role: t,
+  expanded: l
+}) {
+  const e = i(
+    () => t.value === Se.listbox ? He.option : He.presentation
+  );
+  return tt(it, {
+    role: e,
+    expanded: l
+  }), { itemRole: e };
+}
+function dl({
+  expanded: t
+}) {
+  tt(Yt, {
+    role: st.menuitem,
+    expanded: t
+  });
+}
+const cl = ["id", "tabindex", "role", "aria-labelledby"], fl = {
   name: "VvDropdown",
   inheritAttrs: !1
-}, Ge = /* @__PURE__ */ ce({
-  ...gt,
-  props: ht,
+}, St = /* @__PURE__ */ ne({
+  ...fl,
+  props: rl,
   emits: ["update:modelValue"],
-  setup(s, { emit: d }) {
-    const e = s, { id: c } = toRefs(e), g = useUniqueId(c), w = useAttrs(), r = ref("auto"), V = ref("auto"), $ = ref(null), b = ref(null), a = ref(null), n = ref(null), i = computed({
-      get: () => e.reference ?? $.value,
-      set: (o) => {
-        $.value = o;
+  setup(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;
       }
-    }), _ = computed(() => {
-      const o = [];
-      if (e.autoPlacement ? typeof e.autoPlacement == "boolean" ? o.push(De()) : o.push(
-        De(e.autoPlacement)
-      ) : e.flip && (typeof e.flip == "boolean" ? o.push(Ie()) : o.push(Ie(e.flip))), e.shift && (typeof e.shift == "boolean" ? o.push(Oe()) : o.push(Oe(e.shift))), e.size) {
-        const p = ({
-          availableWidth: M,
-          availableHeight: le
+    }), 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
         }) => {
-          r.value = `${M}px`, V.value = `${le}px`;
+          d.value = `${W}px`, b.value = `${ie}px`;
         };
-        typeof e.size == "boolean" ? o.push(
-          Ce({
-            apply: p
+        typeof e.size == "boolean" ? a.push(
+          Xe({
+            apply: _
           })
-        ) : o.push(
-          Ce({
+        ) : a.push(
+          Xe({
             ...e.size,
-            apply: p
+            apply: _
           })
         );
       }
-      return e.offset && (o.push(ge(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? o.push(ge(Number(e.offset))) : o.push(ge(e.offset))), e.arrow && o.push(
-        it({
-          element: a
+      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
         })
-      ), o;
-    }), { x: P, y: B, strategy: K, middlewareData: L, placement: U } = ut(
-      i,
-      b,
+      ), a;
+    }), { x: E, y: B, strategy: X, middlewareData: R, placement: Z } = Ht(
+      m,
+      y,
       {
-        whileElementsMounted: dt,
+        whileElementsMounted: Ft,
         placement: e.placement,
-        middleware: _
+        middleware: V
       }
-    ), j = computed(() => ({
-      position: K.value,
+    ), z = i(() => ({
+      position: X.value,
       top: `${B.value ?? 0}px`,
-      left: `${P.value ?? 0}px`,
-      maxWidth: r.value,
-      maxHeight: V.value,
-      width: e.triggerWidth && i.value ? `${i.value.offsetWidth}px` : void 0
-    })), I = computed(() => U.value.split("-")[0]), D = computed(
+      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(
       () => ({
         top: "bottom",
         right: "left",
         bottom: "top",
         left: "right"
-      })[I.value] ?? "bottom"
-    ), x = computed(() => {
-      var o, p, M, le;
-      return ["bottom", "top"].includes(D.value) ? {
-        right: `${((o = L.value.arrow) == null ? void 0 : o.x) ?? 0}px`,
-        [D.value]: `${-(((p = a.value) == null ? void 0 : p.offsetWidth) ?? 0) / 2}px`
+      })[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: `${((M = L.value.arrow) == null ? void 0 : M.y) ?? 0}px`,
-        [D.value]: `${-(((le = a.value) == null ? void 0 : le.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`
       };
-    }), W = useVModel(e, "modelValue", d), J = ref(!1), m = computed({
-      get: () => W.value ?? J.value,
-      set: (o) => {
-        if (W.value === void 0) {
-          J.value = o;
+    }), 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;
           return;
         }
-        W.value = o;
+        q.value = a;
       }
-    }), z = () => {
-      m.value = !0;
-    }, O = () => {
-      m.value = !1;
-    }, Z = () => {
-      m.value = !m.value;
-    }, re = (o) => {
-      i.value = o;
+    }), U = () => {
+      h.value = !0;
+    }, N = () => {
+      h.value = !1;
+    }, ae = () => {
+      h.value = !h.value;
+    }, ce = (a) => {
+      m.value = a;
     };
-    watch(m, (o) => {
-      o && e.autofocusFirst && nextTick(() => {
-        const p = E(
-          b.value
+    Y(h, (a) => {
+      a && e.autofocusFirst && Ee(() => {
+        const _ = I(
+          y.value
         );
-        p.length > 0 && p[0].focus();
+        _.length > 0 && _[0].focus();
       });
-    }), onClickOutside(
-      b,
+    }), Mt(
+      y,
       () => {
-        e.autoClose && (m.value = !1);
+        e.autoClose && (h.value = !1);
       },
-      { ignore: [i] }
+      { ignore: [m] }
     );
-    const ie = computed(() => {
-      var o;
-      return ((o = i.value) == null ? void 0 : o.getAttribute("id")) ?? void 0;
-    }), G = computed(() => ({
-      "aria-controls": g.value,
+    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": m.value
-    })), { component: ee, bus: ue } = useProvideDropdownTrigger({
-      reference: i,
-      id: g,
-      expanded: m,
-      aria: G
+      "aria-expanded": h.value
+    })), { component: se, bus: ve } = il({
+      reference: m,
+      id: n,
+      expanded: h,
+      aria: te
     });
-    ue.on("click", Z);
-    const { role: te, modifiers: fe } = toRefs(e), { itemRole: Q } = useProvideDropdownItem({ role: te, expanded: m }), y = useBemModifiers(
+    ve.on("click", ae);
+    const { role: re, modifiers: be } = Q(e), { itemRole: le } = ul({ role: re, expanded: h }), S = me(
       "vv-dropdown",
-      fe,
-      computed(() => ({
+      be,
+      i(() => ({
         arrow: e.arrow
       }))
-    ), { focused: C } = useFocusWithin(b);
-    function E(o) {
-      return o ? [
-        ...o.querySelectorAll(
+    ), { focused: L } = Me(y);
+    function I(a) {
+      return a ? [
+        ...a.querySelectorAll(
           'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
         )
       ].filter(
-        (p) => !p.hasAttribute("disabled") && !p.getAttribute("aria-hidden")
+        (_) => !_.hasAttribute("disabled") && !_.getAttribute("aria-hidden")
       ) : [];
     }
-    const X = () => {
-      nextTick(() => {
-        if (C.value) {
-          const o = E(
-            b.value
+    const oe = () => {
+      Ee(() => {
+        if (L.value) {
+          const a = I(
+            y.value
           );
-          if (o.length === 0 || !document.activeElement)
+          if (a.length === 0 || !document.activeElement)
             return;
-          const p = o.indexOf(
+          const _ = a.indexOf(
             document.activeElement
           );
-          p < o.length - 1 ? o[p + 1].focus() : o[0].focus();
+          _ < a.length - 1 ? a[_ + 1].focus() : a[0].focus();
         }
       });
-    }, oe = () => {
-      nextTick(() => {
-        if (C.value) {
-          const o = E(
-            b.value
+    }, we = () => {
+      Ee(() => {
+        if (L.value) {
+          const a = I(
+            y.value
           );
-          if (o.length === 0 || !document.activeElement)
+          if (a.length === 0 || !document.activeElement)
             return;
-          const p = o.indexOf(
+          const _ = a.indexOf(
             document.activeElement
           );
-          p > 0 ? o[p - 1].focus() : o[o.length - 1].focus();
+          _ > 0 ? a[_ - 1].focus() : a[a.length - 1].focus();
         }
       });
     };
-    return onKeyStroke("Escape", (o) => {
-      m.value && (o.preventDefault(), O());
-    }), onKeyStroke("ArrowDown", (o) => {
-      m.value && C.value && (o.preventDefault(), X());
-    }), onKeyStroke("ArrowUp", (o) => {
-      m.value && C.value && (o.preventDefault(), oe());
-    }), onKeyStroke([" ", "Enter"], (o) => {
-      m.value && C.value && (o.preventDefault(), document.activeElement.click());
-    }), (o, p) => (u(), v(q, null, [
-      de(t(ee), null, {
-        default: ne(() => [
-          A(o.$slots, "default", T(R({ init: re, show: z, hide: O, toggle: Z, expanded: t(m), aria: t(G) })))
+    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
       }),
-      de(tt, { name: o.transitionName }, {
-        default: ne(() => [
-          ke(H("div", {
+      pe(It, { name: a.transitionName }, {
+        default: F(() => [
+          Te(G("div", {
             ref_key: "floatingEl",
-            ref: b,
-            style: Be(t(j)),
-            class: ve(t(y))
+            ref: y,
+            style: Je(o(z)),
+            class: _e(o(S))
           }, [
-            e.arrow ? (u(), v("div", {
+            e.arrow ? (p(), g("div", {
               key: 0,
               ref_key: "arrowEl",
-              ref: a,
-              style: Be(t(x)),
+              ref: u,
+              style: Je(o(H)),
               class: "vv-dropdown__arrow"
             }, null, 4)) : k("", !0),
-            A(o.$slots, "before", T(R({ expanded: t(m) }))),
-            H("ul", N(t(w), {
-              id: t(g),
+            O(a.$slots, "before", T(M({ expanded: o(h) }))),
+            G("ul", j(o(f), {
+              id: o(n),
               ref_key: "listEl",
-              ref: n,
-              tabindex: t(m) ? void 0 : -1,
-              role: t(te),
-              "aria-labelledby": t(ie),
+              ref: c,
+              tabindex: o(h) ? void 0 : -1,
+              role: o(re),
+              "aria-labelledby": o(fe),
               class: "vv-dropdown__list"
             }), [
-              A(o.$slots, "items", T(R({
-                role: t(Q)
+              O(a.$slots, "items", T(M({
+                role: o(le)
               })))
-            ], 16, yt),
-            A(o.$slots, "after", T(R({ expanded: t(m) })))
+            ], 16, cl),
+            O(a.$slots, "after", T(M({ expanded: o(h) })))
           ], 6), [
-            [xe, t(m)]
+            [lt, o(h)]
           ])
         ]),
         _: 3
       }, 8, ["name"])
     ], 64));
   }
-}), _t = {
+});
+function vl() {
+  return Ze(it, {});
+}
+const pl = {
   name: "VvDropdownItem"
-}, Qe = /* @__PURE__ */ ce({
-  ..._t,
-  setup(s) {
-    const { role: d, expanded: e } = useInjectedDropdownItem(), c = ref(null);
-    useProvideDropdownAction({ expanded: e });
-    const g = useElementHover(c), { focused: w } = useFocus(c), { focused: r } = useFocusWithin(c);
-    return watch(g, (V) => {
-      V && (w.value = !0);
-    }), (V, $) => (u(), v("li", N({ role: t(d) }, {
+}, 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: c,
-      class: ["vv-dropdown__item", { "focus-visible": t(w) || t(r) }]
+      ref: s,
+      class: ["vv-dropdown__item", { "focus-visible": o(f) || o(d) }]
     }), [
-      A(V.$slots, "default")
+      O(b.$slots, "default")
     ], 16));
   }
+}), bl = { class: "vv-dropdown-option__hint" }, yl = {
+  name: "VvDropdownOption"
+}, Pe = /* @__PURE__ */ ne({
+  ...yl,
+  props: {
+    ...Ae,
+    ...Qt,
+    ...We,
+    ...Ve,
+    deselectHintLabel: {
+      type: String
+    },
+    selectHintLabel: {
+      type: String
+    },
+    selectedHintLabel: {
+      type: String
+    }
+  },
+  setup(t) {
+    const l = t, { modifiers: e } = Q(l), s = me(
+      "vv-dropdown-option",
+      e,
+      i(() => ({
+        disabled: l.disabled,
+        selected: l.selected,
+        unselectable: l.unselectable && l.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"]));
+  }
 });
-function be(s) {
-  return Array.isArray(s) ? s.filter((d) => isString(d)).join(" ") : s;
+function Ie(t, l, e) {
+  return e ? Be(t, e) === Be(l, e) : xe(t, l);
+}
+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;
+    }
+    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 t !== t && l !== l;
+}
+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)
+          return null;
+        s = s[e[n]];
+      }
+      return s;
+    }
+  } 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;
+        break;
+      }
+  }
+  return e;
+}
+function Oe(t, l) {
+  if (t != null && l && l.length) {
+    for (const e of l)
+      if (Ie(t, e))
+        return !0;
+  }
+  return !1;
+}
+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 hl(t, l) {
+  const e = gl(t, l);
+  return e > -1 ? l.filter((s, n) => n !== e) : l;
+}
+function Sl(t) {
+  return typeof t == "string" || t instanceof String;
 }
-function Xe(s, d) {
+function ke(t) {
+  return Array.isArray(t) ? t.filter((l) => Sl(l)).join(" ") : t;
+}
+function _t(t, l) {
   const {
     invalid: e,
-    valid: c,
-    hint: g,
-    loading: w
-  } = d, {
-    hintLabel: r,
-    modelValue: V,
-    valid: $,
-    validLabel: b,
-    invalid: a,
-    invalidLabel: n,
-    ...i
-  } = toRefs(s), _ = resolveFieldData(i, "loading"), P = resolveFieldData(i, "loadingLabel"), B = computed(() => a.value ? !!(a.value && e || n != null && n.value && Array.isArray(n.value) && n.value.length > 0 || n != null && n.value && !isEmpty(n)) : !1), K = computed(
-    () => !!(r && r.value || g)
-  ), L = computed(
-    () => !!(b && b.value || c)
-  ), U = computed(
-    () => !!(_ != null && _.value && w || _ != null && _.value && (P != null && P.value))
-  ), j = computed(
-    () => K.value || L.value || B.value || U.value
+    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
   );
   return {
     hasInvalid: B,
-    hasHint: K,
-    hasValid: L,
-    hasLoading: U,
+    hasHint: X,
+    hasValid: R,
+    hasLoading: Z,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -753,31 +1047,31 @@ function Xe(s, d) {
           default: () => ({})
         }
       },
-      setup(I) {
-        const D = computed(() => {
-          const x = toReactive({
-            hintLabel: r,
-            modelValue: V,
-            valid: $,
-            validLabel: b,
-            invalid: a,
-            invalidLabel: n,
-            loading: _,
-            loadingLabel: P,
-            ...I.params
+      setup(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
           });
-          return a != null && a.value ? (e == null ? void 0 : e(x)) || be(n == null ? void 0 : n.value) || (r == null ? void 0 : r.value) : $ != null && $.value ? (c == null ? void 0 : c(x)) || be(b == null ? void 0 : b.value) || (r == null ? void 0 : r.value) : _ != null && _.value ? (w == null ? void 0 : w(x)) || be(P == null ? void 0 : P.value) || (r == null ? void 0 : r.value) : (g == null ? void 0 : g(x)) || be(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
+          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);
         });
         return {
-          isVisible: j,
+          isVisible: z,
           hasInvalid: B,
-          hasValid: L,
-          hintContent: D
+          hasValid: R,
+          hintContent: A
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return et(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
@@ -788,22 +1082,23 @@ function Xe(s, d) {
     }
   };
 }
-const St = {
-  ...Je,
+const _l = {
+  ...ht,
+  ...el,
+  ...tl,
+  ...bt,
+  ...ut,
+  ...dt,
+  ...vt,
   ...ct,
+  ...Ae,
   ...ft,
-  ...qe,
-  ...Ne,
-  ...Le,
-  ...je,
-  ...Me,
-  ...Te,
-  ...Re,
-  ...he,
+  ...Ve,
+  ...pt,
+  ...mt,
+  ...yt,
   ...We,
-  ...ze,
-  ...He,
-  ...Ke,
+  ...Re,
   /**
    * This Boolean attribute indicates that multiple options can be selected in the list.
    * If it is not specified, then only one option can be selected at a time.
@@ -830,289 +1125,327 @@ const St = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  /**
-   * <label> value for the select
-   */
-  label: String,
   /**
    * Select placeholder
    */
   placeholder: String
-}, wt = ["update:modelValue", "focus", "blur"], Vt = ["for"], $t = { class: "vv-select__wrapper" }, kt = {
+}, 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
+  };
+}
+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)
+  );
+  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
+  };
+}
+function $t(t) {
+  const { options: l, labelKey: e, valueKey: s, disabledKey: n } = Q(t);
+  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]
+  };
+}
+const wl = ["for"], $l = { class: "vv-select__wrapper" }, Ol = {
   key: 0,
   class: "vv-select__input-before"
-}, Pt = { class: "vv-select__inner" }, Et = ["id"], Bt = ["disabled", "hidden"], Dt = ["disabled", "value"], It = {
+}, kl = { class: "vv-select__inner" }, El = ["id"], Pl = ["disabled", "hidden"], Il = ["disabled", "value"], Bl = {
   key: 1,
   class: "vv-select__input-after"
-}, Ot = {
+}, Al = {
   name: "VvSelect"
-}, Ct = /* @__PURE__ */ ce({
-  ...Ot,
-  props: St,
-  emits: wt,
-  setup(s, { emit: d }) {
-    const e = s, c = useSlots(), g = ref(), { HintSlot: w, hasHint: r, hasInvalid: V } = Xe(e, c), {
-      id: $,
-      modifiers: b,
-      disabled: a,
-      readonly: n,
-      loading: i,
-      icon: _,
-      iconPosition: P,
+}, 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: K,
-      floating: L,
-      multiple: U
-    } = toRefs(e), j = useUniqueId($), I = computed(() => `${j.value}-hint`), { focused: D } = useComponentFocus(g, d), x = useElementVisibility(g);
-    watch(x, (y) => {
-      y && e.autofocus && (D.value = !0);
+      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 { hasIcon: W, hasIconBefore: J, hasIconAfter: m } = useComponentIcon(
-      _,
-      P
-    ), z = computed(() => !isEmpty(e.modelValue)), O = computed(() => e.disabled || e.readonly), Z = computed(() => O.value ? -1 : e.tabindex), re = computed(() => {
+    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;
-    }), ie = useBemModifiers(
+    }), fe = me(
       "vv-select",
-      b,
-      computed(() => ({
-        valid: K.value,
+      y,
+      i(() => ({
+        valid: X.value,
         invalid: B.value,
-        loading: i.value,
-        disabled: a.value,
-        readonly: n.value,
-        "icon-before": J.value,
-        "icon-after": m.value,
-        dirty: z.value,
-        focus: D.value,
-        floating: L.value,
-        multiple: U.value
+        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
       }))
-    ), G = computed(() => ({
+    ), te = i(() => ({
       name: e.name,
-      tabindex: Z.value,
-      disabled: O.value,
+      tabindex: ae.value,
+      disabled: N.value,
       required: e.required,
       size: e.size,
       autocomplete: e.autocomplete,
       multiple: e.multiple,
-      "aria-invalid": re.value,
-      "aria-describedby": !V.value && r.value ? I.value : void 0,
-      "aria-errormessage": V.value ? I.value : void 0
-    })), ee = computed(() => ({
+      "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: ue, getOptionValue: te, getOptionDisabled: fe } = useOptions(e), Q = computed({
+    })), { getOptionLabel: ve, getOptionValue: re, getOptionDisabled: be } = $t(e), le = i({
       get: () => e.modelValue,
-      set: (y) => {
-        Array.isArray(y) && (y = y.filter((C) => C !== void 0)), d("update:modelValue", y);
+      set: (S) => {
+        Array.isArray(S) && (S = S.filter((L) => L !== void 0)), l("update:modelValue", S);
       }
     });
-    return (y, C) => (u(), v("div", {
-      class: ve(t(ie))
+    return (S, L) => (p(), g("div", {
+      class: _e(o(fe))
     }, [
-      y.label ? (u(), v("label", {
+      S.label ? (p(), g("label", {
         key: 0,
-        for: t(j)
-      }, F(y.label), 9, Vt)) : k("", !0),
-      H("div", $t, [
-        y.$slots.before ? (u(), v("div", kt, [
-          A(y.$slots, "before", T(R(t(ee))))
+        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),
-        H("div", Pt, [
-          t(J) ? (u(), Y(pe, N({
+        G("div", kl, [
+          o(ee) ? (p(), x(ge, j({
             key: 0,
             class: "vv-select__icon"
-          }, t(W)), null, 16)) : k("", !0),
-          ke(H("select", N({
-            id: t(j),
+          }, o(q)), null, 16)) : k("", !0),
+          Te(G("select", j({
+            id: o(z),
             ref_key: "select",
-            ref: g,
-            "onUpdate:modelValue": C[0] || (C[0] = (E) => _e(Q) ? Q.value = E : null)
-          }, t(G)), [
-            y.placeholder ? (u(), v("option", {
+            ref: n,
+            "onUpdate:modelValue": L[0] || (L[0] = (I) => Ne(le) ? le.value = I : null)
+          }, o(te)), [
+            S.placeholder ? (p(), g("option", {
               key: 0,
               value: void 0,
-              disabled: !y.unselectable,
-              hidden: !y.unselectable
-            }, F(y.placeholder), 9, Bt)) : k("", !0),
-            (u(!0), v(q, null, Se(y.options, (E, X) => (u(), v("option", {
-              key: X,
-              disabled: t(fe)(E),
-              value: t(te)(E)
-            }, F(t(ue)(E)), 9, Dt))), 128))
-          ], 16, Et), [
-            [ot, t(Q)]
+              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)]
           ]),
-          t(m) ? (u(), Y(pe, N({
+          o(h) ? (p(), x(ge, j({
             key: 1,
             class: "vv-select__icon vv-select__icon-after"
-          }, t(W)), null, 16)) : k("", !0)
+          }, o(q)), null, 16)) : k("", !0)
         ]),
-        y.$slots.after ? (u(), v("div", It, [
-          A(y.$slots, "after", T(R(t(ee))))
+        S.$slots.after ? (p(), g("div", Bl, [
+          O(S.$slots, "after", T(M(o(se))))
         ])) : k("", !0)
       ]),
-      de(t(w), {
-        id: t(I),
+      pe(o(f), {
+        id: o(C),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), At = {
-  ...he,
+}), Cl = {
+  ...Ve,
   value: [String, Number]
-}, xt = {
+}, Nl = {
   name: "VvBadge"
-}, Ft = /* @__PURE__ */ ce({
-  ...xt,
-  props: At,
-  setup(s) {
-    const d = s, { modifiers: e } = toRefs(d), c = useBemModifiers("vv-badge", e);
-    return (g, w) => (u(), v("span", {
-      class: ve(t(c)),
+}, 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"
     }, [
-      A(g.$slots, "default", {}, () => [
-        se(F(g.value), 1)
+      O(n.$slots, "default", {}, () => [
+        J(D(n.value), 1)
       ])
     ], 2));
   }
-}), Nt = ["id"], Lt = ["id", "for"], Mt = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], Tt = {
+}), jl = ["id"], Hl = ["id", "for"], Fl = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], xl = {
   key: 0,
   class: "vv-select__input-before"
-}, Rt = { class: "vv-select__inner" }, jt = ["aria-labelledby", "tabindex"], Wt = ["aria-label", "onClick"], zt = {
+}, Tl = { class: "vv-select__inner" }, Ml = ["aria-labelledby", "tabindex"], Rl = ["aria-label", "onClick"], Wl = {
   key: 1,
   class: "vv-select__input-after"
-}, qt = { class: "vv-dropdown-action__hint" }, Ht = {
+}, Kl = {
   name: "VvCombobox",
-  components: { VvDropdown: Ge, VvDropdownItem: Qe }
-}, Qt = /* @__PURE__ */ ce({
-  ...Ht,
-  props: vt,
-  emits: pt,
-  setup(s, { emit: d }) {
-    const e = s, c = useSlots(), { HintSlot: g } = Xe(e, c), w = ref(null), r = ref(null), V = ref(null), { focused: $ } = useComponentFocus(w, d), { focused: b } = useFocusWithin(V);
-    watch($, (l) => {
+  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 (l && !i.value) {
-          P();
+        if (r && !m.value) {
+          E();
           return;
         }
-        !l && i.value && !b.value && B();
+        !r && m.value && !y.value && B();
       }
-    }), watch(b, (l) => {
-      !$.value && !l && i.value && B();
+    }), Y(y, (r) => {
+      !v.value && !r && m.value && B();
     });
-    const a = ref(""), n = refDebounced(
-      a,
+    const u = P(""), c = zt(
+      u,
       Number(e.debounceSearch)
     );
-    watch(
-      n,
-      () => d("change:search", n.value)
+    Y(
+      c,
+      () => l("change:search", c.value)
     );
-    const i = ref(!1), _ = () => {
-      e.disabled || e.readonly || (i.value = !i.value);
-    }, P = () => {
-      e.disabled || e.readonly || i.value || (i.value = !0);
+    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 || !i.value || (i.value = !1);
+      e.disabled || e.readonly || !m.value || (m.value = !1);
     };
-    watch(i, (l) => {
-      z.value && nextTick(() => {
-        if (l) {
-          r.value && r.value.focus();
+    Y(m, (r) => {
+      U.value && Ee(() => {
+        if (r) {
+          d.value && d.value.focus();
           return;
         }
-        a.value = "";
+        u.value = "";
       });
     });
     const {
-      id: K,
-      icon: L,
-      iconPosition: U,
-      modifiers: j,
-      disabled: I,
-      readonly: D,
-      loading: x,
-      valid: W,
-      invalid: J,
-      floating: m,
-      searchable: z
-    } = toRefs(e), O = useUniqueId(K), Z = computed(() => `${O.value}-hint`), re = computed(() => `${O.value}-dropdown`), ie = computed(() => `${O.value}-search`), G = computed(() => `${O.value}-label`), { hasIcon: ee, hasIconBefore: ue, hasIconAfter: te } = useComponentIcon(
-      L,
-      U
-    ), fe = computed(() => !isEmpty(e.modelValue)), Q = computed(() => I.value || D.value ? -1 : e.tabindex), y = useBemModifiers(
+      id: 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(
       "vv-select",
-      j,
-      computed(() => ({
-        disabled: I.value,
-        loading: x.value,
-        readonly: D.value,
-        "icon-before": Boolean(ue.value),
-        "icon-after": Boolean(te.value),
-        valid: W.value,
-        invalid: J.value,
-        dirty: fe.value,
-        focus: $.value,
-        floating: m.value
+      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
       }))
-    ), C = computed(
-      () => e.searchable ? o.value : e.options
-    ), { getOptionLabel: E, getOptionValue: X, getOptionDisabled: oe } = useOptions(e), o = computed(() => {
-      var l;
-      return (l = e.options) == null ? void 0 : l.filter((S) => E(S).toLowerCase().includes(n.value.toLowerCase().trim()));
+    ), 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()));
     });
-    function p(l) {
-      return Array.isArray(e.modelValue) ? contains(l, e.modelValue) || contains(X(l), e.modelValue) : equals(l, e.modelValue) || equals(X(l), e.modelValue);
+    function _(r) {
+      return Array.isArray(e.modelValue) ? Oe(r, e.modelValue) || Oe(oe(r), e.modelValue) : Ie(r, e.modelValue) || Ie(oe(r), e.modelValue);
     }
-    const M = computed(() => {
-      let l = [];
-      return Array.isArray(e.modelValue) ? l = e.modelValue : e.modelValue && (l = [e.modelValue]), e.options.filter(
-        (S) => l.includes(X(S))
+    const W = i(() => {
+      let r = [];
+      return Array.isArray(e.modelValue) ? r = e.modelValue : e.modelValue && (r = [e.modelValue]), e.options.filter(
+        ($) => r.includes(oe($))
       );
-    }), le = computed(() => M.value.map((l) => E(l)).join(e.separator));
-    watch(M, () => {
+    }), ie = i(() => W.value.map((r) => I(r)).join(e.separator));
+    Y(W, () => {
       !e.multiple && e.autoClose && B();
     });
-    const Ye = () => {
-      e.autoOpen ? P() : _();
-    }, ye = (l) => {
-      var ae;
+    const Ot = () => {
+      e.autoOpen ? E() : V();
+    }, De = (r) => {
+      var ue;
       if (e.disabled || e.readonly)
         return;
-      const S = X(l);
-      let f = S;
+      const $ = oe(r);
+      let w = $;
       if (e.multiple)
         if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((ae = e.modelValue) == null ? void 0 : ae.length) >= e.maxValues && !contains(S, e.modelValue))
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((ue = e.modelValue) == null ? void 0 : ue.length) >= e.maxValues && !Oe($, e.modelValue))
             return;
-          f = contains(S, e.modelValue) ? removeFromList(S, e.modelValue) : [...e.modelValue, S];
+          w = Oe($, e.modelValue) ? hl($, e.modelValue) : [...e.modelValue, $];
         } else
-          f = [S];
+          w = [$];
       else
-        e.unselectable && S === e.modelValue && (f = void 0);
-      d("update:modelValue", f);
-    }, Ze = computed(() => ({
-      id: O.value,
+        e.unselectable && $ === e.modelValue && (w = void 0);
+      l("update:modelValue", w);
+    }, kt = i(() => ({
+      id: N.value,
       name: e.name,
-      tabindex: Q.value,
-      valid: W.value,
+      tabindex: le.value,
+      valid: q.value,
       validLabel: e.validLabel,
-      invalid: J.value,
+      invalid: ee.value,
       invalidLabel: e.invalidLabel,
       hintLabel: e.hintLabel,
-      loading: x.value,
+      loading: H.value,
       loadingLabel: e.loadingLabel,
-      disabled: I.value,
-      readonly: D.value,
+      disabled: C.value,
+      readonly: A.value,
       modifiers: e.modifiers,
-      options: C.value,
+      options: L.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -1123,9 +1456,9 @@ const St = {
       label: e.label,
       placeholder: e.placeholder,
       modelValue: e.modelValue
-    })), et = computed(() => ({
-      id: re.value,
-      reference: V.value,
+    })), Et = i(() => ({
+      id: ce.value,
+      reference: b.value,
       placement: e.placement,
       transitionName: e.transitionName,
       offset: e.offset,
@@ -1134,160 +1467,183 @@ const St = {
       autoPlacement: e.autoPlacement,
       arrow: e.arrow,
       autoClose: e.autoClose,
-      autofocusFirst: z.value ? !1 : e.autofocusFirst,
+      autofocusFirst: U.value ? !1 : e.autofocusFirst,
       triggerWidth: e.triggerWidth,
       modifiers: e.dropdownModifiers
-    })), Pe = computed(() => ({
+    })), qe = i(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue
     }));
-    return onKeyStroke([" ", "Enter"], (l) => {
-      e.autoOpen || !i.value && $.value && (l.preventDefault(), l.stopImmediatePropagation(), _());
-    }), (l, S) => l.native ? (u(), Y(Ct, N({ key: 1 }, t(Ze), {
-      "onUpdate:modelValue": S[2] || (S[2] = (f) => d("update:modelValue", f))
-    }), null, 16)) : (u(), v("div", {
+    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: t(O),
-      class: ve(t(y))
+      id: o(N),
+      class: _e(o(S))
     }, [
-      l.label ? (u(), v("label", {
+      r.label ? (p(), g("label", {
         key: 0,
-        id: t(G),
-        for: t(z) ? t(ie) : void 0
-      }, F(l.label), 9, Lt)) : k("", !0),
-      H("div", {
+        id: o(te),
+        for: o(U) ? o(fe) : void 0
+      }, D(r.label), 9, Hl)) : k("", !0),
+      G("div", {
         ref_key: "wrapperEl",
-        ref: V,
+        ref: b,
         class: "vv-select__wrapper"
       }, [
-        de(Ge, N({
-          modelValue: t(i),
-          "onUpdate:modelValue": S[1] || (S[1] = (f) => _e(i) ? i.value = f : null)
-        }, t(et), { role: "listbox" }), lt({
-          default: ne(({ aria: f }) => [
-            l.$slots.before ? (u(), v("div", Tt, [
-              A(l.$slots, "before", T(R(t(Pe))))
+        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),
-            H("div", Rt, [
-              t(ue) ? (u(), Y(pe, N({
+            G("div", Tl, [
+              o(ve) ? (p(), x(ge, j({
                 key: 0,
                 class: "vv-select__icon"
-              }, t(ee)), null, 16)) : k("", !0),
-              H("div", N({
+              }, o(se)), null, 16)) : k("", !0),
+              G("div", j({
                 ref_key: "inputEl",
-                ref: w
-              }, f, {
-                "aria-labelledby": t(G),
+                ref: f
+              }, w, {
+                "aria-labelledby": o(te),
                 class: "vv-select__input",
                 role: "combobox",
-                tabindex: t(Q),
-                onClickPassive: Ye
+                tabindex: o(le),
+                onClickPassive: Ot
               }), [
-                A(l.$slots, "value", T(R({ selectedOptions: t(M), onInput: ye })), () => [
-                  t(le) ? (u(), v(q, { key: 0 }, [
-                    l.badges ? (u(!0), v(q, { key: 1 }, Se(t(M), (ae, Ee) => (u(), Y(Ft, {
-                      key: Ee,
-                      modifiers: l.badgeModifiers,
+                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: ne(() => [
-                        se(F(t(E)(ae)) + " ", 1),
-                        l.unselectable && !t(D) && !t(I) ? (u(), v("button", {
+                      default: F(() => [
+                        J(D(o(I)(ue)) + " ", 1),
+                        r.unselectable && !o(A) && !o(C) ? (p(), g("button", {
                           key: 0,
-                          "aria-label": l.deselectLabel,
-                          onClick: at((Kt) => ye(ae), ["stop"])
+                          "aria-label": r.deselectActionLabel,
+                          onClick: Dt((zl) => De(ue), ["stop"])
                         }, [
-                          de(pe, { name: "close" })
-                        ], 8, Wt)) : k("", !0)
+                          pe(ge, { name: "close" })
+                        ], 8, Rl)) : k("", !0)
                       ]),
                       _: 2
-                    }, 1032, ["modifiers"]))), 128)) : (u(), v(q, { key: 0 }, [
-                      se(F(t(le)), 1)
+                    }, 1032, ["modifiers"]))), 128)) : (p(), g(K, { key: 0 }, [
+                      J(D(o(ie)), 1)
                     ], 64))
-                  ], 64)) : (u(), v(q, { key: 1 }, [
-                    se(F(l.placeholder), 1)
+                  ], 64)) : (p(), g(K, { key: 1 }, [
+                    J(D(r.placeholder), 1)
                   ], 64))
                 ])
-              ], 16, jt),
-              t(te) ? (u(), Y(pe, N({
+              ], 16, Ml),
+              o(re) ? (p(), x(ge, j({
                 key: 1,
                 class: "vv-select__icon vv-select__icon-after"
-              }, t(ee)), null, 16)) : k("", !0)
+              }, o(se)), null, 16)) : k("", !0)
             ]),
-            l.$slots.after ? (u(), v("div", zt, [
-              A(l.$slots, "after", T(R(t(Pe))))
+            r.$slots.after ? (p(), g("div", Wl, [
+              O(r.$slots, "after", T(M(o(qe))))
             ])) : k("", !0)
           ]),
-          items: ne(() => [
-            (u(!0), v(q, null, Se(t(o), (f, ae) => (u(), Y(Qe, {
-              key: ae,
-              class: ve(["vv-dropdown-action", {
-                disabled: t(oe)(f),
-                selected: p(f),
-                "vv-dropdown-action--unselectable": l.unselectable && p(f)
-              }]),
-              tabindex: t(oe)(f) ? -1 : 0,
-              "aria-selected": p(f),
-              "aria-disabled": t(oe)(f),
-              onClickPassive: (Ee) => ye(f)
+          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
             }, {
-              default: ne(() => [
-                A(l.$slots, "option", T(R({
-                  option: f,
-                  selectedOptions: t(M),
-                  selected: p(f),
-                  disabled: t(oe)(f)
+              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)
                 })), () => [
-                  se(F(t(E)(f)) + " ", 1),
-                  H("span", qt, [
-                    p(f) ? (u(), v(q, { key: 0 }, [
-                      se(F(l.unselectable ? l.pressToDeselectLabel : l.selectedLabel), 1)
-                    ], 64)) : t(oe)(f) ? k("", !0) : (u(), v(q, { key: 1 }, [
-                      se(F(l.pressToSelectLabel), 1)
-                    ], 64))
-                  ])
+                  J(D(o(I)(w)), 1)
                 ])
               ]),
               _: 2
-            }, 1032, ["tabindex", "class", "aria-selected", "aria-disabled", "onClickPassive"]))), 128))
+            }, 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)
+                ])
+              ]),
+              _: 3
+            })) : (p(), x(Pe, {
+              key: 1,
+              modifiers: "inert"
+            }, {
+              default: F(() => [
+                O(r.$slots, "no-options", {}, () => [
+                  J(D(r.noOptionsLabel), 1)
+                ])
+              ]),
+              _: 3
+            }))
           ]),
           _: 2
         }, [
-          t(z) ? {
+          o(U) || r.$slots["dropdown::before"] ? {
             name: "before",
-            fn: ne(() => [
-              t(z) ? ke((u(), v("input", {
+            fn: F(() => [
+              O(r.$slots, "dropdown::before"),
+              o(U) ? Te((p(), g("input", {
                 key: 0,
-                id: t(ie),
+                id: o(fe),
                 ref_key: "inputSearchEl",
-                ref: r,
-                "onUpdate:modelValue": S[0] || (S[0] = (f) => _e(a) ? a.value = f : null),
+                ref: d,
+                "onUpdate:modelValue": $[0] || ($[0] = (w) => Ne(u) ? u.value = w : null),
                 "aria-autocomplete": "list",
-                "aria-controls": t(re),
-                "aria-labelledby": t(G),
-                "aria-describedby": t(Z),
+                "aria-controls": o(ce),
+                "aria-labelledby": o(te),
+                "aria-describedby": o(ae),
                 autocomplete: "off",
                 spellcheck: "false",
                 type: "search",
                 class: "vv-dropdown__search",
-                placeholder: l.searchPlaceholder
-              }, null, 8, Mt)), [
-                [xe, t(i)],
-                [st, t(a)]
+                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"])
+        ]), 1040, ["modelValue", "role"])
       ], 512),
-      de(t(g), {
-        id: t(Z),
+      pe(o(n), {
+        id: o(ae),
         class: "vv-select__hint"
       }, null, 8, ["id"])
-    ], 10, Nt));
+    ], 10, jl));
   }
 });
 export {
-  Qt as default
+  Xl as default
 };