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

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

@@ -1,251 +1,750 @@
-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 { 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 = {
   valid: Boolean,
   validLabel: [String, Array]
-}, be = {
+}, Le = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, he = {
+}, Me = {
   loading: Boolean,
   loadingLabel: String
-}, ne = {
+}, Te = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, ge = {
+}, Re = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, se = {
+}, he = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, ye = {
+}, je = {
   hintLabel: { type: String, default: "" }
-}, ae = {
+}, We = {
+  /**
+   * 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" }
+}, ze = {
+  /**
+   * 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: Ve.before,
+    validation: (s) => Object.values(Ve).includes(s)
   }
-}, Se = {
+}, qe = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, $e = {
+}, He = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Pe = {
+}, Ke = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, re = {
-  id: [String, Number],
+}, Ue = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+}, $e = {
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: we.bottom,
+    validator: (s) => Object.values(we).includes(s) || Object.values(Fe).includes(s)
+  },
+  /**
+   * 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
+  }
+}, Je = {
+  ...Ue,
+  /**
+   * 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 = {
+}, ct = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, Oe = {
+}, ft = {
+  /**
+   * 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,
+}, pt = [
+  "update:modelValue",
+  "change:search",
+  "focus",
+  "blur"
+], vt = {
+  ...Je,
+  ...qe,
+  ...Ne,
+  ...Le,
+  ...je,
+  ...Me,
+  ...Te,
+  ...Re,
+  ...he,
+  ...We,
+  ...ze,
+  ...He,
+  ...Ke,
+  ...$e,
+  /**
+   * 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
   },
-  labelNoResults: { type: String, default: "No results" },
+  /**
+   * Select input label
+   */
+  label: String,
+  /**
+   * Label for no search results
+   */
+  noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for selected option hint
+   */
+  selectedLabel: { type: String, default: "Selected" },
+  /**
+   * Label for deselect button
+   */
+  deselectLabel: { type: String, default: "Deselect" },
+  /**
+   * Label for select option hint
+   */
+  pressToSelectLabel: { type: String, default: "Press enter to select" },
+  /**
+   * Label for deselected option hint
+   */
+  pressToDeselectLabel: { 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
+  },
+  /**
+   * 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: {
+    ...$e.triggerWidth,
+    default: !0
+  },
+  /**
+   * Dropdown modifiers
+   */
+  dropdownModifiers: {
+    type: [String, Array]
+  },
+  /**
+   * Open dropdown on focus
+   */
+  autoOpen: Boolean,
+  /**
+   * Close dropdown on select (not multiple)
+   */
+  autoClose: Boolean
+}, mt = {
+  /**
+   * 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 = {
+}, bt = {
   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;
+}, pe = /* @__PURE__ */ ce({
+  ...bt,
+  props: mt,
+  setup(s) {
+    const d = s, e = ref(!0), c = useVolver(), { modifiers: g } = toRefs(d), w = useBemModifiers("vv-icon", g), r = computed(() => d.provider || (c == null ? void 0 : c.provider)), V = computed(() => {
+      const a = d.name ?? "", n = `@${r.value}:${d.prefix}:${d.name}`;
+      return me(a) ? a : me(n) ? n : (c == null ? void 0 : c.iconsCollections.find(
+        (i) => {
+          const _ = `@${r.value}:${i.prefix}:${a}`;
+          if (me(_))
+            return _;
+        }
+      )) || a;
     });
-    function g(o) {
-      let l = null;
+    function $(a) {
+      let n = null;
       if (typeof window > "u") {
-        const { JSDOM: m } = require("jsdom");
-        l = new m().window;
+        const { JSDOM: B } = require("jsdom");
+        n = new B().window;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+      return (n ? new n.DOMParser() : new window.DOMParser()).parseFromString(a, "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 b(a) {
+      const n = $(a), i = (n == null ? void 0 : n.innerHTML.trim()) || "";
+      n && i && rt(`@${r.value}:${d.prefix}:${d.name}`, {
+        body: i,
+        // Set height and width from svg content
+        height: n.viewBox.baseVal.height,
+        width: n.viewBox.baseVal.width
       });
     }
-    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 c && (d.src && !me(`@${r.value}:${d.prefix}:${d.name}`) ? (e.value = !1, c.fetchIcon(d.src).then((a) => {
+      a && (b(a), e.value = !0);
+    }).catch((a) => {
+      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
+    })) : d.svg && b(d.svg)), (a, n) => t(e) ? (u(), Y(t(nt), N({
       key: 0,
-      class: t(p)
+      class: t(w)
     }, {
-      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: a.inline,
+      width: a.width,
+      height: a.height,
+      horizontalFlip: a.horizontalFlip,
+      verticalFlip: a.verticalFlip,
+      flip: a.flip,
+      rotate: a.rotate,
+      color: a.color,
+      onLoad: a.onLoad,
+      icon: t(V)
+    }), null, 16, ["class"])) : k("", !0);
+  }
+}), Ae = ["listbox", "menu"], ht = {
+  ...Ue,
+  ...he,
+  ...$e,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: Ae[1],
+    validator: (s) => Ae.includes(s)
+  }
+}, yt = ["id", "tabindex", "role", "aria-labelledby"], gt = {
+  name: "VvDropdown",
+  inheritAttrs: !1
+}, Ge = /* @__PURE__ */ ce({
+  ...gt,
+  props: ht,
+  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;
+      }
+    }), _ = 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
+        }) => {
+          r.value = `${M}px`, V.value = `${le}px`;
+        };
+        typeof e.size == "boolean" ? o.push(
+          Ce({
+            apply: p
+          })
+        ) : o.push(
+          Ce({
+            ...e.size,
+            apply: p
+          })
+        );
+      }
+      return e.offset && (o.push(ge(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? o.push(ge(Number(e.offset))) : o.push(ge(e.offset))), e.arrow && o.push(
+        it({
+          element: a
+        })
+      ), o;
+    }), { x: P, y: B, strategy: K, middlewareData: L, placement: U } = ut(
+      i,
+      b,
+      {
+        whileElementsMounted: dt,
+        placement: e.placement,
+        middleware: _
+      }
+    ), j = computed(() => ({
+      position: K.value,
+      top: `${B.value ?? 0}px`,
+      left: `${P.value ?? 0}px`,
+      maxWidth: r.value,
+      maxHeight: V.value,
+      width: e.triggerWidth && i.value ? `${i.value.offsetWidth}px` : void 0
+    })), I = computed(() => U.value.split("-")[0]), D = computed(
+      () => ({
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      })[I.value] ?? "bottom"
+    ), x = computed(() => {
+      var o, p, M, le;
+      return ["bottom", "top"].includes(D.value) ? {
+        right: `${((o = L.value.arrow) == null ? void 0 : o.x) ?? 0}px`,
+        [D.value]: `${-(((p = a.value) == null ? void 0 : p.offsetWidth) ?? 0) / 2}px`
+      } : {
+        top: `${((M = L.value.arrow) == null ? void 0 : M.y) ?? 0}px`,
+        [D.value]: `${-(((le = a.value) == null ? void 0 : le.offsetWidth) ?? 0) / 2}px`
+      };
+    }), 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;
+          return;
+        }
+        W.value = o;
+      }
+    }), z = () => {
+      m.value = !0;
+    }, O = () => {
+      m.value = !1;
+    }, Z = () => {
+      m.value = !m.value;
+    }, re = (o) => {
+      i.value = o;
+    };
+    watch(m, (o) => {
+      o && e.autofocusFirst && nextTick(() => {
+        const p = E(
+          b.value
+        );
+        p.length > 0 && p[0].focus();
+      });
+    }), onClickOutside(
+      b,
+      () => {
+        e.autoClose && (m.value = !1);
+      },
+      { ignore: [i] }
+    );
+    const ie = computed(() => {
+      var o;
+      return ((o = i.value) == null ? void 0 : o.getAttribute("id")) ?? void 0;
+    }), G = computed(() => ({
+      "aria-controls": g.value,
+      "aria-haspopup": !0,
+      "aria-expanded": m.value
+    })), { component: ee, bus: ue } = useProvideDropdownTrigger({
+      reference: i,
+      id: g,
+      expanded: m,
+      aria: G
+    });
+    ue.on("click", Z);
+    const { role: te, modifiers: fe } = toRefs(e), { itemRole: Q } = useProvideDropdownItem({ role: te, expanded: m }), y = useBemModifiers(
+      "vv-dropdown",
+      fe,
+      computed(() => ({
+        arrow: e.arrow
+      }))
+    ), { focused: C } = useFocusWithin(b);
+    function E(o) {
+      return o ? [
+        ...o.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (p) => !p.hasAttribute("disabled") && !p.getAttribute("aria-hidden")
+      ) : [];
+    }
+    const X = () => {
+      nextTick(() => {
+        if (C.value) {
+          const o = E(
+            b.value
+          );
+          if (o.length === 0 || !document.activeElement)
+            return;
+          const p = o.indexOf(
+            document.activeElement
+          );
+          p < o.length - 1 ? o[p + 1].focus() : o[0].focus();
+        }
+      });
+    }, oe = () => {
+      nextTick(() => {
+        if (C.value) {
+          const o = E(
+            b.value
+          );
+          if (o.length === 0 || !document.activeElement)
+            return;
+          const p = o.indexOf(
+            document.activeElement
+          );
+          p > 0 ? o[p - 1].focus() : o[o.length - 1].focus();
+        }
+      });
+    };
+    return onKeyStroke("Escape", (o) => {
+      m.value && (o.preventDefault(), O());
+    }), onKeyStroke("ArrowDown", (o) => {
+      m.value && C.value && (o.preventDefault(), X());
+    }), onKeyStroke("ArrowUp", (o) => {
+      m.value && C.value && (o.preventDefault(), oe());
+    }), onKeyStroke([" ", "Enter"], (o) => {
+      m.value && C.value && (o.preventDefault(), document.activeElement.click());
+    }), (o, p) => (u(), v(q, null, [
+      de(t(ee), null, {
+        default: ne(() => [
+          A(o.$slots, "default", T(R({ init: re, show: z, hide: O, toggle: Z, expanded: t(m), aria: t(G) })))
+        ]),
+        _: 3
+      }),
+      de(tt, { name: o.transitionName }, {
+        default: ne(() => [
+          ke(H("div", {
+            ref_key: "floatingEl",
+            ref: b,
+            style: Be(t(j)),
+            class: ve(t(y))
+          }, [
+            e.arrow ? (u(), v("div", {
+              key: 0,
+              ref_key: "arrowEl",
+              ref: a,
+              style: Be(t(x)),
+              class: "vv-dropdown__arrow"
+            }, null, 4)) : k("", !0),
+            A(o.$slots, "before", T(R({ expanded: t(m) }))),
+            H("ul", N(t(w), {
+              id: t(g),
+              ref_key: "listEl",
+              ref: n,
+              tabindex: t(m) ? void 0 : -1,
+              role: t(te),
+              "aria-labelledby": t(ie),
+              class: "vv-dropdown__list"
+            }), [
+              A(o.$slots, "items", T(R({
+                role: t(Q)
+              })))
+            ], 16, yt),
+            A(o.$slots, "after", T(R({ expanded: t(m) })))
+          ], 6), [
+            [xe, t(m)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
+  }
+}), _t = {
+  name: "VvDropdownItem"
+}, Qe = /* @__PURE__ */ ce({
+  ..._t,
+  setup(s) {
+    const { role: d, expanded: e } = useInjectedDropdownItem(), c = ref(null);
+    useProvideDropdownAction({ expanded: e });
+    const g = useElementHover(c), { focused: w } = useFocus(c), { focused: r } = useFocusWithin(c);
+    return watch(g, (V) => {
+      V && (w.value = !0);
+    }), (V, $) => (u(), v("li", N({ role: t(d) }, {
+      ref_key: "element",
+      ref: c,
+      class: ["vv-dropdown__item", { "focus-visible": t(w) || t(r) }]
+    }), [
+      A(V.$slots, "default")
+    ], 16));
   }
 });
-function x(y) {
-  return Array.isArray(y) ? y.filter((r) => isString(r)).join(" ") : y;
+function be(s) {
+  return Array.isArray(s) ? s.filter((d) => isString(d)).join(" ") : s;
 }
-function we(y, r) {
+function Xe(s, d) {
   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: 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
   );
   return {
-    hasInvalid: m,
-    hasHint: $,
-    hasValid: _,
-    hasLoading: I,
+    hasInvalid: B,
+    hasHint: K,
+    hasValid: L,
+    hasLoading: U,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -254,26 +753,26 @@ 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(I) {
+        const D = computed(() => {
+          const x = toReactive({
+            hintLabel: r,
+            modelValue: V,
+            valid: $,
+            validLabel: b,
+            invalid: a,
+            invalidLabel: n,
+            loading: _,
+            loadingLabel: P,
+            ...I.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 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 {
-          isVisible: C,
-          hasInvalid: m,
-          hasValid: _,
-          hintContent: R
+          isVisible: j,
+          hasInvalid: B,
+          hasValid: L,
+          hintContent: D
         };
       },
       render() {
@@ -281,7 +780,7 @@ function we(y, r) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -289,259 +788,331 @@ function we(y, r) {
     }
   };
 }
-const qe = {
-  ...re,
+const St = {
+  ...Je,
+  ...ct,
+  ...ft,
+  ...qe,
   ...Ne,
-  ...Oe,
-  ...Se,
-  ...ve,
-  ...be,
-  ...ye,
+  ...Le,
+  ...je,
+  ...Me,
+  ...Te,
+  ...Re,
   ...he,
-  ...ne,
-  ...ge,
-  ...se,
-  ...ae,
-  ...Ve,
-  ...$e,
-  ...Pe,
+  ...We,
+  ...ze,
+  ...He,
+  ...Ke,
+  /**
+   * 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> value for the select
+   */
   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 = {
+}, wt = ["update:modelValue", "focus", "blur"], Vt = ["for"], $t = { class: "vv-select__wrapper" }, kt = {
+  key: 0,
+  class: "vv-select__input-before"
+}, Pt = { class: "vv-select__inner" }, Et = ["id"], Bt = ["disabled", "hidden"], Dt = ["disabled", "value"], It = {
+  key: 1,
+  class: "vv-select__input-after"
+}, Ot = {
   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);
+}, Ct = /* @__PURE__ */ ce({
+  ...Ot,
+  props: St,
+  emits: wt,
+  setup(s, { emit: d }) {
+    const e = s, c = useSlots(), g = ref(), { HintSlot: w, hasHint: r, hasInvalid: V } = Xe(e, c), {
+      id: $,
+      modifiers: b,
+      disabled: a,
+      readonly: n,
+      loading: i,
+      icon: _,
+      iconPosition: P,
+      invalid: B,
+      valid: K,
+      floating: L,
+      multiple: U
+    } = toRefs(e), j = useUniqueId($), I = computed(() => `${j.value}-hint`), { focused: D } = useComponentFocus(g, d), x = useElementVisibility(g);
+    watch(x, (y) => {
+      y && e.autofocus && (D.value = !0);
     });
-    const { 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: W, hasIconBefore: J, hasIconAfter: m } = useComponentIcon(
+      _,
+      P
+    ), z = computed(() => !isEmpty(e.modelValue)), O = computed(() => e.disabled || e.readonly), Z = computed(() => O.value ? -1 : e.tabindex), re = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { 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(() => ({
+    }), ie = useBemModifiers(
+      "vv-select",
+      b,
+      computed(() => ({
+        valid: K.value,
+        invalid: B.value,
+        loading: i.value,
+        disabled: a.value,
+        readonly: n.value,
+        "icon-before": J.value,
+        "icon-after": m.value,
+        dirty: z.value,
+        focus: D.value,
+        floating: L.value,
+        multiple: U.value
+      }))
+    ), G = computed(() => ({
       name: e.name,
-      tabindex: j.value,
-      disabled: H.value,
+      tabindex: Z.value,
+      disabled: O.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": re.value,
+      "aria-describedby": !V.value && r.value ? I.value : void 0,
+      "aria-errormessage": V.value ? I.value : void 0
+    })), ee = computed(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue
+    })), { getOptionLabel: ue, getOptionValue: te, getOptionDisabled: fe } = useOptions(e), Q = computed({
       get: () => e.modelValue,
-      set: (u) => {
-        Array.isArray(u) && (u = u.filter((F) => F !== void 0)), r("update:modelValue", u);
+      set: (y) => {
+        Array.isArray(y) && (y = y.filter((C) => C !== void 0)), d("update:modelValue", y);
       }
     });
-    return (u, F) => (f(), P("div", {
-      class: te(t(X))
+    return (y, C) => (u(), v("div", {
+      class: ve(t(ie))
     }, [
-      u.label ? (f(), P("label", {
+      y.label ? (u(), v("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: t(j)
+      }, F(y.label), 9, Vt)) : k("", !0),
+      H("div", $t, [
+        y.$slots.before ? (u(), v("div", kt, [
+          A(y.$slots, "before", T(R(t(ee))))
+        ])) : k("", !0),
+        H("div", Pt, [
+          t(J) ? (u(), Y(pe, N({
             key: 0,
-            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"
+          }, t(W)), null, 16)) : k("", !0),
+          ke(H("select", N({
+            id: t(j),
+            ref_key: "select",
+            ref: g,
+            "onUpdate:modelValue": C[0] || (C[0] = (E) => _e(Q) ? Q.value = E : null)
+          }, t(G)), [
+            y.placeholder ? (u(), v("option", {
+              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)]
+          ]),
+          t(m) ? (u(), Y(pe, N({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, t(W)), null, 16)) : k("", !0)
         ]),
-        U(u.$slots, "after", {}, () => [
-          t(M) ? (f(), L(G, ie(N({ key: 0 }, t(w))), null, 16)) : B("", !0)
-        ])
+        y.$slots.after ? (u(), v("div", It, [
+          A(y.$slots, "after", T(R(t(ee))))
+        ])) : k("", !0)
       ]),
-      ee(t(p), {
-        id: t(C),
+      de(t(w), {
+        id: t(I),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Ye = [
-  "update:modelValue",
-  "change:search",
-  "focus",
-  "blur"
-], Ze = {
-  ...re,
-  ...Se,
-  ...ve,
-  ...be,
-  ...ye,
+}), At = {
   ...he,
-  ...ne,
-  ...ge,
-  ...se,
-  ...ae,
-  ...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]
+}, xt = {
+  name: "VvBadge"
+}, Ft = /* @__PURE__ */ ce({
+  ...xt,
+  props: At,
+  setup(s) {
+    const d = s, { modifiers: e } = toRefs(d), c = useBemModifiers("vv-badge", e);
+    return (g, w) => (u(), v("span", {
+      class: ve(t(c)),
+      role: "status"
+    }, [
+      A(g.$slots, "default", {}, () => [
+        se(F(g.value), 1)
+      ])
+    ], 2));
+  }
+}), Nt = ["id"], Lt = ["id", "for"], Mt = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], Tt = {
+  key: 0,
+  class: "vv-select__input-before"
+}, Rt = { class: "vv-select__inner" }, jt = ["aria-labelledby", "tabindex"], Wt = ["aria-label", "onClick"], zt = {
+  key: 1,
+  class: "vv-select__input-after"
+}, qt = { class: "vv-dropdown-action__hint" }, Ht = {
+  name: "VvCombobox",
+  components: { VvDropdown: Ge, VvDropdownItem: Qe }
+}, Qt = /* @__PURE__ */ ce({
+  ...Ht,
+  props: vt,
+  emits: pt,
+  setup(s, { emit: d }) {
+    const e = s, c = useSlots(), { HintSlot: g } = Xe(e, c), w = ref(null), r = ref(null), V = ref(null), { focused: $ } = useComponentFocus(w, d), { focused: b } = useFocusWithin(V);
+    watch($, (l) => {
+      if (e.autoOpen) {
+        if (l && !i.value) {
+          P();
+          return;
+        }
+        !l && i.value && !b.value && B();
+      }
+    }), watch(b, (l) => {
+      !$.value && !l && i.value && B();
+    });
+    const a = ref(""), n = refDebounced(
+      a,
       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(
+    watch(
       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;
+      () => d("change:search", n.value)
+    );
+    const i = ref(!1), _ = () => {
+      e.disabled || e.readonly || (i.value = !i.value);
+    }, P = () => {
+      e.disabled || e.readonly || i.value || (i.value = !0);
+    }, B = () => {
+      e.disabled || e.readonly || !i.value || (i.value = !1);
+    };
+    watch(i, (l) => {
+      z.value && nextTick(() => {
+        if (l) {
+          r.value && r.value.focus();
+          return;
+        }
+        a.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: 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(
+      "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
+      }))
+    ), 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()));
+    });
+    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);
     }
-    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 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))
+      );
+    }), le = computed(() => M.value.map((l) => E(l)).join(e.separator));
+    watch(M, () => {
+      !e.multiple && e.autoClose && B();
+    });
+    const Ye = () => {
+      e.autoOpen ? P() : _();
+    }, ye = (l) => {
+      var ae;
+      if (e.disabled || e.readonly)
+        return;
+      const S = X(l);
+      let f = S;
+      if (e.multiple)
+        if (Array.isArray(e.modelValue)) {
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((ae = e.modelValue) == null ? void 0 : ae.length) >= e.maxValues && !contains(S, e.modelValue))
+            return;
+          f = contains(S, e.modelValue) ? removeFromList(S, e.modelValue) : [...e.modelValue, S];
+        } else
+          f = [S];
+      else
+        e.unselectable && S === e.modelValue && (f = void 0);
+      d("update:modelValue", f);
+    }, Ze = computed(() => ({
+      id: O.value,
       name: e.name,
-      tabindex: T.value,
-      valid: I.value,
+      tabindex: Q.value,
+      valid: W.value,
       validLabel: e.validLabel,
-      invalid: C.value,
+      invalid: J.value,
       invalidLabel: e.invalidLabel,
       hintLabel: e.hintLabel,
-      loading: _.value,
+      loading: x.value,
       loadingLabel: e.loadingLabel,
-      disabled: m.value,
-      readonly: $.value,
+      disabled: I.value,
+      readonly: D.value,
       modifiers: e.modifiers,
-      options: j.value,
+      options: C.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -552,67 +1123,171 @@ const qe = {
       label: e.label,
       placeholder: e.placeholder,
       modelValue: e.modelValue
+    })), et = computed(() => ({
+      id: re.value,
+      reference: V.value,
+      placement: e.placement,
+      transitionName: e.transitionName,
+      offset: e.offset,
+      shift: e.shift,
+      flip: e.flip,
+      autoPlacement: e.autoPlacement,
+      arrow: e.arrow,
+      autoClose: e.autoClose,
+      autofocusFirst: z.value ? !1 : e.autofocusFirst,
+      triggerWidth: e.triggerWidth,
+      modifiers: e.dropdownModifiers
+    })), Pe = computed(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue
     }));
-    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 onKeyStroke([" ", "Enter"], (l) => {
+      e.autoOpen || !i.value && $.value && (l.preventDefault(), l.stopImmediatePropagation(), _());
+    }), (l, S) => l.native ? (u(), Y(Ct, N({ key: 1 }, t(Ze), {
+      "onUpdate:modelValue": S[2] || (S[2] = (f) => d("update:modelValue", f))
+    }), null, 16)) : (u(), v("div", {
       key: 0,
-      id: t(g),
-      class: te(t(H))
+      id: t(O),
+      class: ve(t(y))
     }, [
-      a.label ? (f(), P("label", {
+      l.label ? (u(), v("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: t(G),
+        for: t(z) ? t(ie) : void 0
+      }, F(l.label), 9, Lt)) : k("", !0),
+      H("div", {
+        ref_key: "wrapperEl",
+        ref: V,
+        class: "vv-select__wrapper"
       }, [
-        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)
+        de(Ge, N({
+          modelValue: t(i),
+          "onUpdate:modelValue": S[1] || (S[1] = (f) => _e(i) ? i.value = f : null)
+        }, t(et), { role: "listbox" }), lt({
+          default: ne(({ aria: f }) => [
+            l.$slots.before ? (u(), v("div", Tt, [
+              A(l.$slots, "before", T(R(t(Pe))))
+            ])) : k("", !0),
+            H("div", Rt, [
+              t(ue) ? (u(), Y(pe, N({
+                key: 0,
+                class: "vv-select__icon"
+              }, t(ee)), null, 16)) : k("", !0),
+              H("div", N({
+                ref_key: "inputEl",
+                ref: w
+              }, f, {
+                "aria-labelledby": t(G),
+                class: "vv-select__input",
+                role: "combobox",
+                tabindex: t(Q),
+                onClickPassive: Ye
+              }), [
+                A(l.$slots, "value", T(R({ selectedOptions: t(M), onInput: ye })), () => [
+                  t(le) ? (u(), v(q, { key: 0 }, [
+                    l.badges ? (u(!0), v(q, { key: 1 }, Se(t(M), (ae, Ee) => (u(), Y(Ft, {
+                      key: Ee,
+                      modifiers: l.badgeModifiers,
+                      class: "vv-select__badge"
+                    }, {
+                      default: ne(() => [
+                        se(F(t(E)(ae)) + " ", 1),
+                        l.unselectable && !t(D) && !t(I) ? (u(), v("button", {
+                          key: 0,
+                          "aria-label": l.deselectLabel,
+                          onClick: at((Kt) => ye(ae), ["stop"])
+                        }, [
+                          de(pe, { name: "close" })
+                        ], 8, Wt)) : k("", !0)
+                      ]),
+                      _: 2
+                    }, 1032, ["modifiers"]))), 128)) : (u(), v(q, { key: 0 }, [
+                      se(F(t(le)), 1)
+                    ], 64))
+                  ], 64)) : (u(), v(q, { key: 1 }, [
+                    se(F(l.placeholder), 1)
+                  ], 64))
+                ])
+              ], 16, jt),
+              t(te) ? (u(), Y(pe, N({
+                key: 1,
+                class: "vv-select__icon vv-select__icon-after"
+              }, t(ee)), null, 16)) : k("", !0)
+            ]),
+            l.$slots.after ? (u(), v("div", zt, [
+              A(l.$slots, "after", T(R(t(Pe))))
+            ])) : k("", !0)
           ]),
-          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: ne(() => [
+            (u(!0), v(q, null, Se(t(o), (f, ae) => (u(), Y(Qe, {
+              key: ae,
+              class: ve(["vv-dropdown-action", {
+                disabled: t(oe)(f),
+                selected: p(f),
+                "vv-dropdown-action--unselectable": l.unselectable && p(f)
+              }]),
+              tabindex: t(oe)(f) ? -1 : 0,
+              "aria-selected": p(f),
+              "aria-disabled": t(oe)(f),
+              onClickPassive: (Ee) => ye(f)
+            }, {
+              default: ne(() => [
+                A(l.$slots, "option", T(R({
+                  option: f,
+                  selectedOptions: t(M),
+                  selected: p(f),
+                  disabled: t(oe)(f)
+                })), () => [
+                  se(F(t(E)(f)) + " ", 1),
+                  H("span", qt, [
+                    p(f) ? (u(), v(q, { key: 0 }, [
+                      se(F(l.unselectable ? l.pressToDeselectLabel : l.selectedLabel), 1)
+                    ], 64)) : t(oe)(f) ? k("", !0) : (u(), v(q, { key: 1 }, [
+                      se(F(l.pressToSelectLabel), 1)
+                    ], 64))
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["tabindex", "class", "aria-selected", "aria-disabled", "onClickPassive"]))), 128))
+          ]),
+          _: 2
+        }, [
+          t(z) ? {
+            name: "before",
+            fn: ne(() => [
+              t(z) ? ke((u(), v("input", {
+                key: 0,
+                id: t(ie),
+                ref_key: "inputSearchEl",
+                ref: r,
+                "onUpdate:modelValue": S[0] || (S[0] = (f) => _e(a) ? a.value = f : null),
+                "aria-autocomplete": "list",
+                "aria-controls": t(re),
+                "aria-labelledby": t(G),
+                "aria-describedby": t(Z),
+                autocomplete: "off",
+                spellcheck: "false",
+                type: "search",
+                class: "vv-dropdown__search",
+                placeholder: l.searchPlaceholder
+              }, null, 8, Mt)), [
+                [xe, t(i)],
+                [st, t(a)]
+              ]) : k("", !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["modelValue"])
+      ], 512),
+      de(t(g), {
+        id: t(Z),
+        class: "vv-select__hint"
+      }, null, 8, ["id"])
+    ], 10, Nt));
   }
 });
 export {
-  it as default
+  Qt as default
 };