@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -1,251 +1,1044 @@
-import { defineComponent as J, openBlock as f, createElementBlock as P, unref as t, normalizeClass as te, createElementVNode as O, toDisplayString as A, createCommentVNode as B, Fragment as oe, renderList as ce, withModifiers as _e, createTextVNode as pe, createBlock as L, mergeProps as N, renderSlot as U, normalizeProps as ie, withDirectives as me, isRef as fe, vModelSelect as Ie, createVNode as ee, withKeys as ue, vModelText as Be } from "vue";
-import { nanoid as le } from "nanoid";
-import { iconExists as z, Icon as Ce, addIcon as ke } from "@iconify/vue";
-const ve = {
+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]
-}, be = {
+}, dt = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, he = {
+}, ct = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, ne = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, Ae = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, ge = {
+}, 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
-}, se = {
+}, Ve = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, ye = {
+}, vt = {
   hintLabel: { type: String, default: "" }
-}, ae = {
+}, pt = {
+  /**
+   * List of options, can be string[] or object[]
+   */
   options: {
     type: Array,
     default: () => []
   },
+  /**
+   * Used when options are objects: key to use for option label
+   */
   labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, de = {
-  LEFT: "left",
-  RIGHT: "right"
-}, Ve = {
+  /**
+   * Used when options are objects: key to use for option label
+   */
+  valueKey: { type: [String, Function], default: "value" },
+  /**
+   * Used when options are objects: key to use for option disabled
+   */
+  disabledKey: { type: [String, Function], default: "disabled" }
+}, mt = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (y) => Object.values(de).includes(y),
-    default: de.RIGHT
+    default: he.before,
+    validation: (t) => Object.values(he).includes(t)
   }
-}, Se = {
+}, bt = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, $e = {
+}, yt = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Pe = {
+}, We = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, re = {
-  id: [String, Number],
+}, gt = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+}, Fe = {
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: de.bottom,
+    validator: (t) => Object.values(de).includes(t) || Object.values(at).includes(t)
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: !1
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: !1
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+}, 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 }
-}, Ne = {
+}, el = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, Oe = {
+}, tl = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Ae = {
-  ...re,
-  ...ae,
-  ...ne,
-  ...se,
+};
+({
+  ...Ae,
+  ...Re,
+  ...Zt,
+  ...Xt,
+  ...Gt,
+  /**
+   * Button type
+   */
+  type: je.button
+});
+const ll = [
+  "update:modelValue",
+  "change:search",
+  "focus",
+  "blur"
+], ol = {
+  ...ht,
+  ...bt,
+  ...ut,
+  ...dt,
+  ...vt,
+  ...ct,
+  ...Ae,
+  ...ft,
+  ...Ve,
+  ...pt,
+  ...mt,
+  ...yt,
+  ...We,
+  ...Fe,
+  ...Re,
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
   modelValue: {
-    type: [String, Number, Boolean, Object, Array]
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  /**
+   * Label for no search results
+   */
+  noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for no options	available
+   */
+  noOptionsLabel: { type: String, default: "No options available" },
+  /**
+   * Label for selected option hint
+   */
+  selectedHintLabel: { type: String, default: "Selected" },
+  /**
+   * Label for deselect action button
+   */
+  deselectActionLabel: { type: String, default: "Deselect" },
+  /**
+   * Label for select option hint
+   */
+  selectHintLabel: { type: String, default: "Press enter to select" },
+  /**
+   * Label for deselected option hint
+   */
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Select input placeholder
+   */
+  placeholder: String,
+  /**
+   * Use input text to search on options
+   */
+  searchable: Boolean,
+  /**
+   * On searchable select is the input search placeholder
+   */
+  searchPlaceholder: {
+    type: String,
+    default: "Search..."
+  },
+  /**
+   * The input search debounce time in ms
+   */
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
   },
-  labelNoResults: { type: String, default: "No results" },
+  /**
+   * Manage modelValue as string[] or object[]
+   */
   multiple: Boolean,
+  /**
+   * The max number of selected values
+   */
   maxValues: [Number, String],
-  unselectable: { type: Boolean, default: !0 }
-}, De = ["id"], Re = {
-  key: 0,
-  role: "option"
-}, Fe = ["aria-selected"], Le = ["for", "onClick"], Ee = ["id", "type", "value", "checked", "disabled", "name"], Ke = {
-  name: "VvDropdown"
-}, Me = /* @__PURE__ */ J({
-  ...Ke,
-  props: Ae,
-  emits: ["update:modelValue"],
-  setup(y, { emit: r }) {
-    const e = y, V = computed(() => String(e.id || le())), { modifiers: d, disabled: p } = toRefs(e), { getOptionLabel: s, getOptionValue: S } = useOptions(e), { bemCssClasses: g } = useBemModifiers("vv-dropdown", {
-      modifiers: d,
-      disabled: p
-    });
-    function c(n) {
-      return Array.isArray(e.modelValue) ? contains(n, e.modelValue) || contains(S(n), e.modelValue) : equals(n, e.modelValue) || equals(S(n), e.modelValue);
-    }
-    function o(n) {
-      return typeof n == "string" || n.disabled === void 0 ? p.value : n.disabled;
-    }
-    function l(n) {
-      var v;
-      if (e.disabled)
-        return;
-      let i = n;
-      if (e.multiple)
-        if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((v = e.modelValue) == null ? void 0 : v.length) >= e.maxValues && !contains(n, e.modelValue))
-            return;
-          i = contains(n, e.modelValue) ? removeFromList(n, e.modelValue) : [...e.modelValue, n];
-        } else
-          i = [n];
-      else
-        e.unselectable && n === e.modelValue && (i = void 0);
-      r("update:modelValue", i);
-    }
-    return (n, i) => {
-      var v;
-      return f(), P("ul", {
-        id: t(V),
-        class: te(t(g)),
-        role: "listbox"
-      }, [
-        (v = n.options) != null && v.length ? B("", !0) : (f(), P("li", Re, [
-          O("label", null, A(n.labelNoResults), 1)
-        ])),
-        (f(!0), P(oe, null, ce(n.options, (m, $) => (f(), P("li", {
-          key: $,
-          role: "option",
-          "aria-selected": c(m)
-        }, [
-          O("label", {
-            for: `dropdown-${$}-${t(V)}`,
-            onClick: _e((_) => l(t(S)(m)), ["prevent"])
-          }, [
-            O("input", {
-              id: `dropdown-${$}-${t(V)}`,
-              type: n.multiple ? "checkbox" : "radio",
-              value: t(S)(m),
-              checked: c(m),
-              disabled: o(m),
-              name: n.name,
-              tabindex: "-1",
-              "aria-hidden": "true"
-            }, null, 8, Ee),
-            pe(" " + A(t(s)(m)), 1)
-          ], 8, Le)
-        ], 8, Fe))), 128))
-      ], 10, De);
-    };
-  }
-}), Te = "ds", He = {
+  /**
+   * The select label separator visible to the user
+   */
+  separator: { type: String, default: ", " },
+  /**
+   * Show native select
+   */
+  native: Boolean,
+  /**
+   * Show badges
+   */
+  badges: Boolean,
+  /**
+   * Badge modifiers
+   */
+  badgeModifiers: {
+    type: [String, Array],
+    default: "action sm"
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    ...Fe.triggerWidth,
+    default: !0
+  },
+  /**
+   * Dropdown modifiers
+   */
+  dropdownModifiers: {
+    type: [String, Array]
+  },
+  /**
+   * Open dropdown on focus
+   */
+  autoOpen: Boolean,
+  /**
+   * Close dropdown on select (not multiple)
+   */
+  autoClose: Boolean
+}, nl = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, je = {
+};
+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"
-}, G = /* @__PURE__ */ J({
-  ...je,
-  props: He,
-  setup(y) {
-    const r = y, e = ref(!0), { modifiers: V } = toRefs(r), d = inject(Te), { bemCssClasses: p } = useBemModifiers("vv-icon", {
-      modifiers: V
-    }), s = computed(() => r.provider || (d == null ? void 0 : d.provider)), S = computed(() => {
-      const o = r.name ?? "", l = `@${s.value}:${r.prefix}:${r.name}`;
-      return z(o) ? o : z(l) ? l : (d == null ? void 0 : d.iconsCollections.find((n) => {
-        const i = `@${s.value}:${n.prefix}:${o}`;
-        if (z(i))
-          return i;
-      })) || o;
+}, 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;
     });
-    function g(o) {
-      let l = null;
+    function v(u) {
+      let c = null;
       if (typeof window > "u") {
-        const { JSDOM: m } = require("jsdom");
-        l = new m().window;
+        const { JSDOM: B } = require("jsdom");
+        c = new B().window;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(u, "text/html").querySelector("svg");
     }
-    function c(o) {
-      const l = g(o), n = (l == null ? void 0 : l.innerHTML.trim()) || "";
-      l && n && ke(`@${s.value}:${r.prefix}:${r.name}`, {
-        body: n,
-        height: l.viewBox.baseVal.height,
-        width: l.viewBox.baseVal.width
+    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
       });
     }
-    return d && (r.src && !z(`@${s.value}:${r.prefix}:${r.name}`) ? (e.value = !1, d.fetchIcon(r.src).then((o) => {
-      o && (c(o), e.value = !0);
-    }).catch((o) => {
-      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
-    })) : r.svg && c(r.svg)), (o, l) => t(e) ? (f(), L(t(Ce), 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(p)
+      class: o(f)
     }, {
-      inline: o.inline,
-      width: o.width,
-      height: o.height,
-      horizontalFlip: o.horizontalFlip,
-      verticalFlip: o.verticalFlip,
-      flip: o.flip,
-      rotate: o.rotate,
-      color: o.color,
-      onLoad: o.onLoad,
-      icon: t(S)
-    }), null, 16, ["class"])) : B("", !0);
+      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);
+  }
+}), rl = {
+  ...gt,
+  ...Ve,
+  ...Fe,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: Se.menu,
+    validator: (t) => Object.values(Se).includes(t)
+  }
+}, 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
+}, St = /* @__PURE__ */ ne({
+  ...fl,
+  props: rl,
+  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;
+      }
+    }), 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
+        }) => {
+          d.value = `${W}px`, b.value = `${ie}px`;
+        };
+        typeof e.size == "boolean" ? a.push(
+          Xe({
+            apply: _
+          })
+        ) : a.push(
+          Xe({
+            ...e.size,
+            apply: _
+          })
+        );
+      }
+      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,
+      {
+        whileElementsMounted: Ft,
+        placement: e.placement,
+        middleware: V
+      }
+    ), 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(
+      () => ({
+        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`
+      };
+    }), 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;
+        }
+        q.value = a;
+      }
+    }), U = () => {
+      h.value = !0;
+    }, N = () => {
+      h.value = !1;
+    }, ae = () => {
+      h.value = !h.value;
+    }, ce = (a) => {
+      m.value = a;
+    };
+    Y(h, (a) => {
+      a && e.autofocusFirst && Ee(() => {
+        const _ = I(
+          y.value
+        );
+        _.length > 0 && _[0].focus();
+      });
+    }), Mt(
+      y,
+      () => {
+        e.autoClose && (h.value = !1);
+      },
+      { ignore: [m] }
+    );
+    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
+    });
+    ve.on("click", ae);
+    const { role: re, modifiers: be } = Q(e), { itemRole: le } = ul({ role: re, expanded: h }), S = me(
+      "vv-dropdown",
+      be,
+      i(() => ({
+        arrow: e.arrow
+      }))
+    ), { focused: L } = Me(y);
+    function I(a) {
+      return a ? [
+        ...a.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (_) => !_.hasAttribute("disabled") && !_.getAttribute("aria-hidden")
+      ) : [];
+    }
+    const oe = () => {
+      Ee(() => {
+        if (L.value) {
+          const a = I(
+            y.value
+          );
+          if (a.length === 0 || !document.activeElement)
+            return;
+          const _ = a.indexOf(
+            document.activeElement
+          );
+          _ < a.length - 1 ? a[_ + 1].focus() : a[0].focus();
+        }
+      });
+    }, we = () => {
+      Ee(() => {
+        if (L.value) {
+          const a = I(
+            y.value
+          );
+          if (a.length === 0 || !document.activeElement)
+            return;
+          const _ = a.indexOf(
+            document.activeElement
+          );
+          _ > 0 ? a[_ - 1].focus() : a[a.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));
   }
 });
-function x(y) {
-  return Array.isArray(y) ? y.filter((r) => isString(r)).join(" ") : y;
+function vl() {
+  return Ze(it, {});
+}
+const pl = {
+  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));
+  }
+}), 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 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 we(y, r) {
+function Sl(t) {
+  return typeof t == "string" || t instanceof String;
+}
+function ke(t) {
+  return Array.isArray(t) ? t.filter((l) => Sl(l)).join(" ") : t;
+}
+function _t(t, l) {
   const {
     invalid: e,
-    valid: V,
-    hint: d,
-    loading: p
-  } = r, {
-    hintLabel: s,
-    modelValue: S,
-    valid: g,
-    validLabel: c,
-    invalid: o,
-    invalidLabel: l,
-    ...n
-  } = toRefs(y), i = resolveFieldData(n, "loading"), v = resolveFieldData(n, "loadingLabel"), m = computed(() => o.value ? !!(o.value && e || l != null && l.value && Array.isArray(l.value) && l.value.length > 0 || l != null && l.value && !isEmpty(l)) : !1), $ = computed(
-    () => !!(s && s.value || d)
-  ), _ = computed(
-    () => !!(c && c.value || V)
-  ), I = computed(
-    () => !!(i != null && i.value && p || i != null && i.value && (v != null && v.value))
-  ), C = computed(
-    () => $.value || _.value || m.value || I.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: m,
-    hasHint: $,
-    hasValid: _,
-    hasLoading: I,
+    hasInvalid: B,
+    hasHint: X,
+    hasValid: R,
+    hasLoading: Z,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -254,34 +1047,34 @@ function we(y, r) {
           default: () => ({})
         }
       },
-      setup(D) {
-        const R = computed(() => {
-          const w = toReactive({
-            hintLabel: s,
-            modelValue: S,
-            valid: g,
-            validLabel: c,
-            invalid: o,
-            invalidLabel: l,
-            loading: i,
-            loadingLabel: v,
-            ...D.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 o != null && o.value ? (e == null ? void 0 : e(w)) || x(l == null ? void 0 : l.value) || (s == null ? void 0 : s.value) : g != null && g.value ? (V == null ? void 0 : V(w)) || x(c == null ? void 0 : c.value) || (s == null ? void 0 : s.value) : i != null && i.value ? (p == null ? void 0 : p(w)) || x(v == null ? void 0 : v.value) || (s == null ? void 0 : s.value) : (d == null ? void 0 : d(w)) || x(s == null ? void 0 : s.value) || (s == null ? void 0 : s.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: C,
-          hasInvalid: m,
-          hasValid: _,
-          hintContent: R
+          isVisible: z,
+          hasInvalid: B,
+          hasValid: R,
+          hintContent: A
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return et(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -289,259 +1082,370 @@ function we(y, r) {
     }
   };
 }
-const qe = {
-  ...re,
-  ...Ne,
-  ...Oe,
-  ...Se,
-  ...ve,
-  ...be,
-  ...ye,
-  ...he,
-  ...ne,
-  ...ge,
-  ...se,
-  ...ae,
+const _l = {
+  ...ht,
+  ...el,
+  ...tl,
+  ...bt,
+  ...ut,
+  ...dt,
+  ...vt,
+  ...ct,
+  ...Ae,
+  ...ft,
   ...Ve,
-  ...$e,
-  ...Pe,
+  ...pt,
+  ...mt,
+  ...yt,
+  ...We,
+  ...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.
+   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+   */
   multiple: Boolean,
+  /**
+   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+   */
   required: Boolean,
+  /**
+   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+   * this attribute represents the number of rows in the list that should be visible at one time.
+   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+   */
   size: [String, Number],
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
-  label: String,
+  /**
+   * Select placeholder
+   */
   placeholder: String
-}, ze = ["update:modelValue", "focus", "blur"], xe = ["for"], Ue = { class: "vv-select__wrapper" }, Ge = ["id"], Je = ["disabled", "hidden"], Xe = ["disabled", "value"], Qe = {
+}, 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"
+}, kl = { class: "vv-select__inner" }, El = ["id"], Pl = ["disabled", "hidden"], Il = ["disabled", "value"], Bl = {
+  key: 1,
+  class: "vv-select__input-after"
+}, Al = {
   name: "VvSelect"
-}, We = /* @__PURE__ */ J({
-  ...Qe,
-  props: qe,
-  emits: ze,
-  setup(y, { emit: r }) {
-    const e = y, V = useSlots(), d = ref(), { HintSlot: p, hasHint: s, hasInvalid: S } = we(e, V), {
-      modifiers: g,
-      disabled: c,
-      readonly: o,
-      loading: l,
-      icon: n,
-      iconPosition: i,
-      invalid: v,
-      valid: m,
-      floating: $,
-      multiple: _
-    } = toRefs(e), I = computed(() => String(e.id || le())), C = computed(() => `${I.value}-hint`), { focused: D } = useComponentFocus(d, r), R = useElementVisibility(d);
-    watch(R, (u) => {
-      u && e.autofocus && (D.value = !0);
+}, 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 { hasIcon: w, hasIconLeft: E, hasIconRight: M } = useComponentIcon(
-      n,
-      i
-    ), T = computed(() => !isEmpty(e.modelValue)), H = computed(() => e.disabled || e.readonly), j = computed(() => H.value ? -1 : e.tabindex), q = 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;
-    }), { bemCssClasses: X } = useBemModifiers("vv-select", {
-      modifiers: g,
-      valid: m,
-      invalid: v,
-      loading: l,
-      disabled: c,
-      readonly: o,
-      iconLeft: E,
-      iconRight: M,
-      dirty: T,
-      focus: D,
-      floating: $,
-      multiple: _
-    }), Q = computed(() => ({
+    }), fe = me(
+      "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
+      }))
+    ), te = i(() => ({
       name: e.name,
-      tabindex: j.value,
-      disabled: H.value,
+      tabindex: ae.value,
+      disabled: N.value,
       required: e.required,
       size: e.size,
       autocomplete: e.autocomplete,
       multiple: e.multiple,
-      "aria-invalid": q.value,
-      "aria-describedby": !S.value && s.value ? C.value : void 0,
-      "aria-errormessage": S.value ? C.value : void 0
-    })), { getOptionLabel: W, getOptionValue: Y } = useOptions(e);
-    function Z(u) {
-      return typeof u == "string" || u.disabled === void 0 ? c.value : u.disabled;
-    }
-    const K = 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: ve, getOptionValue: re, getOptionDisabled: be } = $t(e), le = i({
       get: () => e.modelValue,
-      set: (u) => {
-        Array.isArray(u) && (u = u.filter((F) => F !== void 0)), r("update:modelValue", u);
+      set: (S) => {
+        Array.isArray(S) && (S = S.filter((L) => L !== void 0)), l("update:modelValue", S);
       }
     });
-    return (u, F) => (f(), P("div", {
-      class: te(t(X))
+    return (S, L) => (p(), g("div", {
+      class: _e(o(fe))
     }, [
-      u.label ? (f(), P("label", {
+      S.label ? (p(), g("label", {
         key: 0,
-        for: t(I)
-      }, A(u.label), 9, xe)) : B("", !0),
-      O("div", Ue, [
-        U(u.$slots, "before", {}, () => [
-          t(E) ? (f(), L(G, ie(N({ key: 0 }, t(w))), null, 16)) : B("", !0)
-        ]),
-        me(O("select", N({
-          id: t(I),
-          ref_key: "select",
-          ref: d,
-          "onUpdate:modelValue": F[0] || (F[0] = (a) => fe(K) ? K.value = a : null)
-        }, t(Q)), [
-          u.placeholder ? (f(), P("option", {
+        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,
-            value: void 0,
-            disabled: !u.unselectable,
-            hidden: !u.unselectable
-          }, A(u.placeholder), 9, Je)) : B("", !0),
-          (f(!0), P(oe, null, ce(u.options, (a, b) => (f(), P("option", {
-            key: b,
-            disabled: Z(a),
-            value: t(Y)(a)
-          }, A(t(W)(a)), 9, Xe))), 128))
-        ], 16, Ge), [
-          [Ie, t(K)]
+            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", {
+              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)]
+          ]),
+          o(h) ? (p(), x(ge, j({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, o(q)), null, 16)) : k("", !0)
         ]),
-        U(u.$slots, "after", {}, () => [
-          t(M) ? (f(), L(G, ie(N({ key: 0 }, t(w))), null, 16)) : B("", !0)
-        ])
+        S.$slots.after ? (p(), g("div", Bl, [
+          O(S.$slots, "after", T(M(o(se))))
+        ])) : k("", !0)
       ]),
-      ee(t(p), {
-        id: t(C),
+      pe(o(f), {
+        id: o(C),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Ye = [
-  "update:modelValue",
-  "change:search",
-  "focus",
-  "blur"
-], Ze = {
-  ...re,
-  ...Se,
-  ...ve,
-  ...be,
-  ...ye,
-  ...he,
-  ...ne,
-  ...ge,
-  ...se,
-  ...ae,
+}), Cl = {
   ...Ve,
-  ...$e,
-  ...Pe,
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  label: String,
-  labelNoResults: { type: String, default: "No results" },
-  placeholder: String,
-  searchable: Boolean,
-  searchPlaceholder: String,
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  multiple: Boolean,
-  maxValues: [Number, String],
-  separator: { type: String, default: ", " },
-  native: Boolean
-}, et = ["id"], tt = ["id", "for"], ot = ["tabindex"], lt = ["id", "placeholder"], nt = {
-  name: "VvCombobox"
-}, it = /* @__PURE__ */ J({
-  ...nt,
-  props: Ze,
-  emits: Ye,
-  setup(y, { emit: r }) {
-    const e = y, V = useSlots(), { HintSlot: d } = we(e, V), p = ref(), s = ref(), { focused: S } = useComponentFocus(p, r), g = computed(() => String(e.id || le())), c = ref(""), o = refDebounced(
-      c,
+  value: [String, Number]
+}, Nl = {
+  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));
+  }
+}), jl = ["id"], Hl = ["id", "for"], Fl = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], xl = {
+  key: 0,
+  class: "vv-select__input-before"
+}, Tl = { class: "vv-select__inner" }, Ml = ["aria-labelledby", "tabindex"], Rl = ["aria-label", "onClick"], Wl = {
+  key: 1,
+  class: "vv-select__input-after"
+}, Kl = {
+  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();
+      }
+    }), Y(y, (r) => {
+      !v.value && !r && m.value && B();
+    });
+    const u = P(""), c = zt(
+      u,
       Number(e.debounceSearch)
-    ), l = ref(!1), {
-      icon: n,
-      iconPosition: i,
-      modifiers: v,
-      disabled: m,
-      readonly: $,
-      loading: _,
-      valid: I,
-      invalid: C,
-      floating: D
-    } = toRefs(e);
-    watch(
-      o,
-      () => r("change:search", o.value)
     );
-    const { hasIcon: R, hasIconLeft: w, hasIconRight: E } = useComponentIcon(
-      n,
-      i
-    ), M = computed(() => !isEmpty(e.modelValue)), T = computed(() => m.value || $.value ? -1 : e.tabindex), { bemCssClasses: H } = useBemModifiers("vv-select", {
-      modifiers: v,
-      disabled: m,
-      loading: _,
-      readonly: $,
-      iconLeft: w,
-      iconRight: E,
-      valid: I,
-      invalid: C,
-      dirty: M,
-      focus: S,
-      floating: D
-    }), j = computed(
-      () => e.searchable ? Q.value : e.options
-    ), { getOptionLabel: q, getOptionValue: X } = useOptions(e), Q = computed(() => {
-      var a;
-      return (a = e.options) == null ? void 0 : a.filter((b) => q(b).toLowerCase().includes(o.value.toLowerCase().trim()));
-    }), W = computed(() => {
-      let a = [];
-      return Array.isArray(e.modelValue) ? a = e.modelValue : e.modelValue && (a = [e.modelValue]), e.options.filter(
-        (b) => a.includes(X(b))
-      );
-    }), Y = computed(() => W.value.map((a) => q(a)).join(e.separator));
-    onClickOutside(p, () => {
-      p.value.open = !1;
+    Y(
+      c,
+      () => l("change:search", c.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);
+    };
+    Y(m, (r) => {
+      U.value && Ee(() => {
+        if (r) {
+          d.value && d.value.focus();
+          return;
+        }
+        u.value = "";
+      });
     });
-    function Z(a) {
-      const b = a.target;
-      l.value = b.open;
-    }
-    function K(a) {
-      p.value && !e.multiple && (p.value.open = !1), r("update:modelValue", a);
+    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(
+      "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
+      }))
+    ), 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 _(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 u = computed(() => ({
-      name: e.name,
-      options: j.value,
-      labelKey: e.labelKey,
-      valueKey: e.valueKey,
-      disabled: e.disabled,
-      labelNoResults: e.labelNoResults,
-      multiple: e.multiple,
-      maxValues: e.maxValues,
-      modelValue: e.modelValue,
-      unselectable: e.unselectable
-    })), F = computed(() => ({
-      id: g.value,
+    const W = i(() => {
+      let r = [];
+      return Array.isArray(e.modelValue) ? r = e.modelValue : e.modelValue && (r = [e.modelValue]), e.options.filter(
+        ($) => r.includes(oe($))
+      );
+    }), 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)
+        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: T.value,
-      valid: I.value,
+      tabindex: le.value,
+      valid: q.value,
       validLabel: e.validLabel,
-      invalid: C.value,
+      invalid: ee.value,
       invalidLabel: e.invalidLabel,
       hintLabel: e.hintLabel,
-      loading: _.value,
+      loading: H.value,
       loadingLabel: e.loadingLabel,
-      disabled: m.value,
-      readonly: $.value,
+      disabled: C.value,
+      readonly: A.value,
       modifiers: e.modifiers,
-      options: j.value,
+      options: L.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -552,67 +1456,194 @@ const qe = {
       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
     }));
-    return (a, b) => a.native ? (f(), L(We, N({ key: 1 }, t(F), {
-      "onUpdate:modelValue": b[4] || (b[4] = (k) => r("update:modelValue", k))
-    }), null, 16)) : (f(), P("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(g),
-      class: te(t(H))
+      id: o(N),
+      class: _e(o(S))
     }, [
-      a.label ? (f(), P("label", {
+      r.label ? (p(), g("label", {
         key: 0,
-        id: `${t(g)}-label`,
-        for: a.searchable && t(l) ? `${t(g)}-input` : void 0
-      }, A(a.label), 9, tt)) : B("", !0),
-      O("details", {
-        ref_key: "dropdown",
-        ref: p,
-        class: "vv-select__wrapper",
-        onClick: b[2] || (b[2] = (k) => t(m) || t($) ? k.preventDefault() : null),
-        onKeyup: b[3] || (b[3] = ue((k) => t(p).open = !1, ["esc"])),
-        onToggle: Z
+        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"
       }, [
-        O("summary", {
-          class: "vv-select__input",
-          tabindex: t(T),
-          onKeyup: b[1] || (b[1] = ue((k) => a.searchable ? k.preventDefault() : null, ["space"]))
-        }, [
-          U(a.$slots, "before", {}, () => [
-            t(w) ? (f(), L(G, N({
-              key: 0,
-              class: "vv-select__icon-left"
-            }, t(R)), null, 16)) : B("", !0)
+        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)
+                    ], 64))
+                  ], 64)) : (p(), g(K, { key: 1 }, [
+                    J(D(r.placeholder), 1)
+                  ], 64))
+                ])
+              ], 16, Ml),
+              o(re) ? (p(), x(ge, j({
+                key: 1,
+                class: "vv-select__icon vv-select__icon-after"
+              }, o(se)), null, 16)) : k("", !0)
+            ]),
+            r.$slots.after ? (p(), g("div", Wl, [
+              O(r.$slots, "after", T(M(o(qe))))
+            ])) : k("", !0)
           ]),
-          a.searchable && t(l) ? me((f(), P("input", {
-            key: 0,
-            id: `${t(g)}-input`,
-            ref_key: "inputSearch",
-            ref: s,
-            "onUpdate:modelValue": b[0] || (b[0] = (k) => fe(c) ? c.value = k : null),
-            role: "combobox",
-            type: "search",
-            placeholder: a.searchPlaceholder
-          }, null, 8, lt)), [
-            [Be, t(c)]
-          ]) : (f(), P(oe, { key: 1 }, [
-            pe(A(t(Y) || a.placeholder), 1)
-          ], 64)),
-          U(a.$slots, "after", {}, () => [
-            t(E) ? (f(), L(G, N({
-              key: 0,
-              class: "vv-select__icon-right"
-            }, t(R)), null, 16)) : B("", !0)
-          ])
-        ], 40, ot),
-        ee(Me, N({
-          id: `${t(g)}-dropdown`
-        }, t(u), { "onUpdate:modelValue": K }), null, 16, ["id"])
-      ], 544),
-      ee(t(d), { class: "vv-select__hint" })
-    ], 10, et));
+          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
+            }, 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
+        }, [
+          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));
   }
 });
 export {
-  it as default
+  Xl as default
 };