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

package/dist/index.es.js

@@ -1,525 +1,936 @@
-var rt = Object.defineProperty;
-var it = (o, s, e) => s in o ? rt(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e;
-var he = (o, s, e) => (it(o, typeof s != "symbol" ? s + "" : s, e), e);
-import { addCollection as ut, addIcon as Ue, addAPIProvider as dt, iconExists as $e, Icon as ct } from "@iconify/vue";
-import { defineComponent as N, openBlock as m, createElementBlock as _, unref as t, normalizeClass as U, withModifiers as Be, createElementVNode as R, renderSlot as k, normalizeProps as F, guardReactiveProps as Y, createTextVNode as q, toDisplayString as B, Fragment as de, renderList as fe, createBlock as D, mergeProps as O, withCtx as ge, resolveDynamicComponent as Fe, createCommentVNode as I, withDirectives as ve, isRef as be, vModelCheckbox as pt, createVNode as Z, vModelSelect as vt, withKeys as Ne, vModelText as Ke, Transition as mt, toHandlers as ft, vShow as bt, vModelDynamic as ht, vModelRadio as gt } from "vue";
-import { nanoid as ne } from "nanoid";
-const Ae = "ds";
-class yt {
+var At = Object.defineProperty;
+var wt = (o, a, e) => a in o ? At(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var Ie = (o, a, e) => (wt(o, typeof a != "symbol" ? a + "" : a, e), e);
+import { addCollection as Et, addIcon as rt, addAPIProvider as It, iconExists as Re, Icon as Pt } from "@iconify/vue";
+import { defineComponent as q, openBlock as d, createElementBlock as y, normalizeClass as Z, unref as t, renderSlot as $, createTextVNode as X, toDisplayString as x, render as Ot, withModifiers as it, createElementVNode as N, normalizeProps as j, guardReactiveProps as F, Fragment as ne, renderList as ke, createBlock as W, mergeProps as G, withCtx as ve, resolveDynamicComponent as ut, createCommentVNode as w, withDirectives as Se, isRef as Ce, vModelCheckbox as Dt, createVNode as de, Transition as dt, normalizeStyle as Qe, vShow as qe, vModelSelect as Bt, createSlots as Rt, vModelText as ct, toHandlers as Tt, vModelDynamic as Mt, vModelRadio as xt } from "vue";
+import { nanoid as Nt } from "nanoid";
+import { autoPlacement as Ze, flip as et, shift as tt, size as ot, offset as Ge, arrow as Lt, useFloating as Ht, autoUpdate as Gt } from "@floating-ui/vue";
+const Ut = "vv";
+var be = /* @__PURE__ */ ((o) => (o.left = "left", o.right = "right", o.top = "top", o.bottom = "bottom", o))(be || {}), vt = /* @__PURE__ */ ((o) => (o.topStart = "top-start", o.topEnd = "top-end", o.bottomStart = "bottom-start", o.bottomEnd = "bottom-end", o.leftStart = "left-start", o.leftEnd = "left-end", o.rightStart = "right-start", o.rightEnd = "right-end", o))(vt || {}), je = /* @__PURE__ */ ((o) => (o.before = "before", o.after = "after", o))(je || {});
+const Wt = Symbol.for("volver"), pt = Symbol.for("buttonGroup"), ft = Symbol.for("radioGroup"), mt = Symbol.for("checkGroup"), bt = Symbol.for("accordionGroup"), Pe = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, Oe = {
+  invalid: Boolean,
+  invalidLabel: [String, Array]
+}, Ke = {
+  loading: Boolean,
+  loadingLabel: String
+}, Ae = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, De = {
+  /**
+   * The value is not editable
+   */
+  readonly: Boolean
+}, ce = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+}, Be = {
+  hintLabel: { type: String, default: "" }
+}, ze = {
+  /**
+   * 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" },
+  /**
+   * 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" }
+}, jt = {
+  /**
+   * Show character limit
+   */
+  count: {
+    type: [Boolean, String],
+    default: !1,
+    validator: (o) => [!0, !1, "limit", "countdown"].includes(o)
+  }
+}, Ft = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
+  debounce: [Number, String]
+}, Ye = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: je.before,
+    validation: (o) => Object.values(je).includes(o)
+  }
+}, Me = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
+  tabindex: { type: [String, Number], default: 0 }
+}, Je = {
+  /**
+   * If true the label will be floating
+   */
+  floating: Boolean
+}, xe = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: !0 }
+}, Ne = {
+  /**
+   * 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: be.bottom,
+    validator: (o) => Object.values(be).includes(o) || Object.values(vt).includes(o)
+  },
+  /**
+   * 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
+  }
+}, Le = {
+  ...Ne,
+  /**
+   * 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 }
+}, ht = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  autofocus: Boolean
+}, yt = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autocomplete: { type: String, default: "off" }
+}, gt = {
+  ...Le,
+  ...ht,
+  ...yt,
+  ...Me,
+  ...Ae,
+  ...De,
+  ...Pe,
+  ...Oe,
+  ...Be,
+  ...Ke,
+  ...ce,
+  ...jt,
+  ...Ft,
+  ...Ye,
+  ...Je,
+  /**
+   * Input / Textarea minlength
+   * Minimum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
+  minlength: Number,
+  /**
+   * Input / Textarea maxlength
+   * Maximum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
+  maxlength: Number,
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder: String,
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
+  required: Boolean,
+  /**
+   * <label> value for the Input / Textarea
+   */
+  label: String
+}, _t = {
+  ...Le,
+  ...Me,
+  ...Pe,
+  ...Oe,
+  ...Be,
+  ...Ae,
+  ...De,
+  ...ce,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
+  value: [String, Number, Boolean],
+  /**
+   * Input value
+   */
+  modelValue: [Object, Number, Boolean, String],
+  /**
+   * <label> for input
+   */
+  label: String
+}, St = {
+  ...Pe,
+  ...Oe,
+  ...ze,
+  ...Be,
+  ...Ae,
+  ...De,
+  ...ce,
+  /**
+   * Input value
+   */
+  modelValue: [String, Array],
+  /**
+   * Input label
+   */
+  label: String,
+  /**
+   * Input name
+   */
+  name: { type: String, required: !0 },
+  /**
+   * If true, the group will be displayed in a vertical column
+   */
+  vertical: Boolean
+}, qt = {
+  ...ce,
+  /**
+   * Define the tooltip position
+   * @default Side.bottom
+   */
+  position: {
+    type: String,
+    default: be.bottom
+  },
+  value: {
+    type: String
+  }
+}, Kt = /* @__PURE__ */ q({
+  __name: "VvTooltip",
+  props: qt,
+  setup(o) {
+    const a = o, { modifiers: e } = toRefs(a), s = useBemModifiers(
+      "vv-tooltip",
+      e,
+      computed(() => ({
+        [a.position]: !0
+      }))
+    );
+    return (l, i) => (d(), y("span", {
+      class: Z(t(s)),
+      role: "tooltip",
+      inert: ""
+    }, [
+      $(l.$slots, "default", {}, () => [
+        X(x(l.value), 1)
+      ])
+    ], 2));
+  }
+}), zt = {
+  beforeMount(o, a) {
+    const e = h(Kt, {
+      value: a.value,
+      position: a.arg
+    });
+    Ot(e, o);
+  }
+}, Yt = {
+  tooltip: zt
+};
+function at(o, a, e) {
+  const s = e || o.name;
+  if (!s)
+    return o;
+  const l = a == null ? void 0 : a[s], i = o.props;
+  return !l || !i ? { ...o, name: s } : {
+    ...o,
+    name: s,
+    props: Object.keys(i).reduce((u, c) => {
+      if (!(c in l))
+        return u[c] = i[c], u;
+      const p = l[c];
+      return typeof i[c] == "function" || Array.isArray(i[c]) ? (u[c] = {
+        type: i[c],
+        default: p
+      }, u) : (u[c] = {
+        ...i[c],
+        default: p
+      }, u);
+    }, {})
+  };
+}
+class Jt {
   constructor({
-    fetchWithCredentials: s = !1,
-    fetchOptions: e = {},
-    iconsCollections: n = [],
-    nuxt: l = !1
+    fetchWithCredentials: a,
+    fetchOptions: e,
+    provider: s,
+    nuxt: l,
+    iconsCollections: i
   } = {}) {
-    he(this, "fetchOptions");
-    he(this, "iconsCollections");
-    he(this, "provider");
-    he(this, "nuxt");
-    s && (e = { ...e, credentials: "include" }), this.provider = Ae, this.fetchOptions = e, this.iconsCollections = n, this.iconsCollections.forEach((i) => {
-      this.addCollection(i, this.provider);
-    }), this.nuxt = l;
+    Ie(this, "fetchOptions", {});
+    Ie(this, "nuxt", !1);
+    Ie(this, "iconsCollections", []);
+    Ie(this, "provider", Ut);
+    e && (this.fetchOptions = e), a && (this.fetchOptions = { ...this.fetchOptions, credentials: "include" }), s && (this.provider = s), l && (this.nuxt = l), i && Array.isArray(i) && i.forEach((u) => {
+      this.addCollection(u, this.provider);
+    });
   }
-  addCollection(s, e) {
-    return ut(s, e);
+  addCollection(a, e) {
+    return this.iconsCollections = [...this.iconsCollections, a], Et(a, e ?? this.provider);
   }
-  addIcon(s, e) {
-    return Ue(s, e);
+  addIcon(a, e) {
+    return rt(a, e);
   }
-  addAPIProvider(s, e) {
-    return dt(s, e);
+  addAPIProvider(a, e) {
+    return It(a, e);
   }
-  fetchIcon(s, e = { cache: "force-cache" }) {
-    return new Promise((n, l) => {
-      fetch(s, { ...this.fetchOptions, ...e }).catch((i) => l(i)).then((i) => i == null ? void 0 : i.text()).then((i) => n(i));
+  fetchIcon(a, e = { cache: "force-cache" }) {
+    return new Promise((s, l) => {
+      fetch(a, { ...this.fetchOptions, ...e }).catch((i) => l(i)).then((i) => i == null ? void 0 : i.text()).then((i) => s(i));
     });
   }
 }
-const As = {
-  install(o, s) {
-    const e = new yt(s);
-    o.config.globalProperties.$ds = e, o.provide(Ae, e);
+const pl = {
+  /**
+   * Vue.use() hook
+   * @param {App} Vue
+   * @param {Object} options
+   */
+  install(o, a) {
+    const e = new Jt(a);
+    o.config.globalProperties.$vv = e, a.components && Object.entries(a.components).forEach(([s, l]) => {
+      o.component(
+        s,
+        at(l, a.defaults)
+      );
+    }), a.aliases && Object.entries(a.aliases).forEach(([s, l]) => {
+      o.component(
+        s,
+        at(l, a.defaults, s)
+      );
+    }), Object.entries(Yt).forEach(([s, l]) => {
+      o.directive(s, l);
+    }), o.provide(Wt, e);
   }
-}, We = "VV_BUTTON_GROUP", qe = "VV_RADIO_GROUP", je = "VV_CHECK_GROUP", ze = "VV_ACCORDION_GROUP", _t = {
+}, Xt = {
+  /**
+   * Accordion name
+   */
   name: String,
+  /**
+   * Header title
+   */
   title: String,
+  /**
+   * Content text
+   */
   content: String,
+  /**
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   */
   modelValue: {
     type: Boolean,
     default: void 0
   },
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
   modifiers: [String, Array],
+  /**
+   * If true, the accordion will be disabled
+   */
   disabled: Boolean
-}, St = ["update:modelValue"];
-function Vt(o, s) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(ze), { title: i, content: r } = toRefs(o), f = l("modelValue", o, s), p = l("disabled", o), u = l("collapse", o), a = l("modifiers", o);
+}, Qt = ["update:modelValue"];
+function Zt(o, a) {
+  const { group: e, isInGroup: s, getGroupOrLocalRef: l } = useInjectedGroupState(
+    bt
+  ), { title: i, content: u } = toRefs(o), c = l("modelValue", o, a), p = l("disabled", o), v = l("collapse", o), n = l("modifiers", o);
   return {
-    modelValue: f,
+    // group props
+    modelValue: c,
     disabled: p,
-    isInGroup: n,
+    isInGroup: s,
     group: e,
-    collapse: u,
-    modifiers: a,
+    collapse: v,
+    modifiers: n,
+    // local props
     title: i,
-    content: r
+    content: u
   };
 }
-const Ct = ["id", "open"], $t = ["aria-controls", "aria-expanded"], kt = ["aria-hidden"], At = {
+const eo = ["id", "open"], to = ["aria-controls", "aria-expanded"], oo = ["aria-hidden"], ao = {
   name: "VvAccordion"
-}, Pt = /* @__PURE__ */ N({
-  ...At,
-  props: _t,
-  emits: St,
-  setup(o, { emit: s }) {
-    const e = o, n = useAttrs(), l = e.name || (n == null ? void 0 : n.id) || ne(), {
+}, lo = /* @__PURE__ */ q({
+  ...ao,
+  props: Xt,
+  emits: Qt,
+  setup(o, { emit: a }) {
+    const e = o, s = useAttrs(), l = computed(
+      () => e.name || (s == null ? void 0 : s.id) || Nt()
+    ), {
       modifiers: i,
-      title: r,
-      content: f,
+      title: u,
+      content: c,
       disabled: p,
-      collapse: u,
-      modelValue: a,
-      isInGroup: c
-    } = Vt(e, s), d = ref(!1), b = computed({
-      get: () => c.value ? u.value && Array.isArray(a.value) ? a.value.includes(l) : a.value === l : a.value === void 0 ? d.value : a.value,
-      set: (v) => {
-        if (c.value) {
-          if (u.value && Array.isArray(a.value)) {
-            if (v) {
-              a.value.push(l);
+      collapse: v,
+      modelValue: n,
+      isInGroup: r
+    } = Zt(e, a), f = ref(!1), g = computed({
+      get: () => r.value ? v.value && Array.isArray(n.value) ? n.value.includes(l.value) : n.value === l.value : n.value === void 0 ? f.value : n.value,
+      set: (b) => {
+        if (r.value) {
+          if (v.value && Array.isArray(n.value)) {
+            if (b) {
+              n.value.push(l.value);
               return;
             }
-            a.value = a.value.filter(
-              (V) => V !== l
+            n.value = n.value.filter(
+              (S) => S !== l.value
             );
             return;
           }
-          a.value = v ? l : null;
+          n.value = b ? l.value : null;
           return;
         }
-        if (a.value === void 0 && typeof v == "boolean") {
-          d.value = v;
+        if (n.value === void 0 && typeof b == "boolean") {
+          f.value = b;
           return;
         }
-        a.value = v;
+        n.value = b;
       }
-    }), { bemCssClasses: g } = useBemModifiers("vv-accordion", {
-      modifiers: i,
-      disabled: p
-    }), y = useToggle(b);
-    return (v, V) => (m(), _("details", {
+    }), k = useBemModifiers(
+      "vv-accordion",
+      i,
+      computed(() => ({
+        disabled: p.value
+      }))
+    ), A = useToggle(g);
+    return (b, S) => (d(), y("details", {
       id: t(l),
-      class: U(t(g)),
-      open: t(b),
-      onClick: V[0] || (V[0] = Be((w) => t(y)(), ["prevent"]))
+      class: Z(t(k)),
+      open: t(g),
+      onClick: S[0] || (S[0] = it((I) => t(A)(), ["prevent"]))
     }, [
-      R("summary", {
+      N("summary", {
         "aria-controls": t(l),
-        "aria-expanded": t(b),
+        "aria-expanded": t(g),
         class: "vv-collapse__summary"
       }, [
-        k(v.$slots, "summary", F(Y({ open: t(b) })), () => [
-          q(B(t(r)), 1)
+        $(b.$slots, "summary", j(F({ open: t(g) })), () => [
+          X(x(t(u)), 1)
         ])
-      ], 8, $t),
-      R("div", {
-        "aria-hidden": !t(b),
+      ], 8, to),
+      N("div", {
+        "aria-hidden": !t(g),
         class: "vv-collapse__content"
       }, [
-        k(v.$slots, "details", F(Y({ open: t(b) })), () => [
-          q(B(t(f)), 1)
+        $(b.$slots, "details", j(F({ open: t(g) })), () => [
+          X(x(t(c)), 1)
         ])
-      ], 8, kt)
-    ], 10, Ct));
+      ], 8, oo)
+    ], 10, eo));
   }
-}), wt = {
+}), so = {
+  /**
+   * VModel
+   */
   modelValue: [String, Array],
+  /**
+   * Accordion items
+   * @type VvAccordionGroupItem
+   */
   items: { type: Array, default: () => [] },
+  /**
+   * If true, accordion items stay open when another item is opened
+   */
   collapse: Boolean,
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
+   */
   modifiers: [String, Array],
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
   itemModifiers: {
     type: [String, Array],
     default: ""
   },
+  /**
+   * If true, the accordion items will be disabled
+   */
   disabled: Boolean
-}, It = ["update:modelValue"], Et = {
+}, no = ["update:modelValue"], ro = {
   name: "VvAccordionGroup"
-}, Ps = /* @__PURE__ */ N({
-  ...Et,
-  props: wt,
-  emits: It,
-  setup(o, { emit: s }) {
-    const e = o, { disabled: n, collapse: l, modifiers: i, itemModifiers: r, items: f } = toRefs(e);
+}, fl = /* @__PURE__ */ q({
+  ...ro,
+  props: so,
+  emits: no,
+  setup(o, { emit: a }) {
+    const e = o, { disabled: s, collapse: l, modifiers: i, itemModifiers: u, items: c } = toRefs(e);
     watchEffect(() => {
       typeof e.modelValue == "string" && l.value && console.warn(
         "[VvAccordionGroup]: modelValue is a string but collapse is true."
       );
     });
-    const p = ref([]), u = computed({
+    const p = ref([]), v = computed({
       get: () => {
-        var d;
-        return e.modelValue !== void 0 ? l.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : l.value ? p.value : (d = p.value) == null ? void 0 : d[0];
+        var r;
+        return e.modelValue !== void 0 ? l.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : l.value ? p.value : (r = p.value) == null ? void 0 : r[0];
       },
-      set: (d) => {
+      set: (r) => {
         if (e.modelValue !== void 0)
-          return (Array.isArray(e.modelValue) || l.value) && !Array.isArray(d) && (d = [d]), s("update:modelValue", d);
-        p.value = Array.isArray(d) ? d : [d];
+          return (Array.isArray(e.modelValue) || l.value) && !Array.isArray(r) && (r = [r]), a("update:modelValue", r);
+        p.value = Array.isArray(r) ? r : [r];
       }
-    }), a = {
-      key: ze,
-      modelValue: u,
-      disabled: n,
+    });
+    useProvideGroupState({
+      key: bt,
+      modelValue: v,
+      disabled: s,
       collapse: l,
-      modifiers: r
-    };
-    useProvideGroupState(a);
-    const { bemCssClasses: c } = useBemModifiers("vv-accordion-group", {
-      modifiers: i,
-      disabled: n
+      modifiers: u
     });
-    return (d, b) => (m(), _("div", {
-      class: U(t(c))
+    const n = useBemModifiers(
+      "vv-accordion-group",
+      i,
+      computed(() => ({
+        disabled: s.value
+      }))
+    );
+    return (r, f) => (d(), y("div", {
+      class: Z(t(n))
     }, [
-      k(d.$slots, "default", {}, () => [
-        (m(!0), _(de, null, fe(t(f), (g) => (m(), D(Pt, O({
+      $(r.$slots, "default", {}, () => [
+        (d(!0), y(ne, null, ke(t(c), (g) => (d(), W(lo, G({
           key: g.title
         }, {
           name: g.name,
           title: g.title,
           content: g.content
         }), {
-          header: ge((y) => [
-            k(d.$slots, `header::${g.name}`, F(Y(y)))
+          header: ve((k) => [
+            $(r.$slots, `header::${g.name}`, j(F(k)))
           ]),
-          details: ge((y) => [
-            k(d.$slots, `details::${g.name}`, F(Y(y)))
+          details: ve((k) => [
+            $(r.$slots, `details::${g.name}`, j(F(k)))
           ]),
           _: 2
         }, 1040))), 128))
       ])
     ], 2));
   }
-}), ye = {
-  valid: Boolean,
-  validLabel: [String, Array]
-}, _e = {
-  invalid: Boolean,
-  invalidLabel: [String, Array]
-}, De = {
-  loading: Boolean,
-  loadingLabel: String
-}, ce = {
-  disabled: Boolean
-}, Se = {
-  readonly: Boolean
-}, re = {
-  modifiers: [String, Array]
-}, Ve = {
-  hintLabel: { type: String, default: "" }
-}, Pe = {
-  options: {
-    type: Array,
-    default: () => []
-  },
-  labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, Rt = {
-  count: {
-    type: [Boolean, String],
-    default: !1,
-    validator: (o) => [!0, !1, "limit", "countdown"].includes(o)
-  }
-}, Ot = {
-  debounce: [Number, String]
-}, He = {
-  LEFT: "left",
-  RIGHT: "right"
-}, Te = {
-  icon: { type: [String, Object] },
-  iconPosition: {
-    type: String,
-    validation: (o) => Object.values(He).includes(o),
-    default: He.RIGHT
-  }
-}, we = {
-  tabindex: { type: [String, Number], default: 0 }
-}, Le = {
-  floating: Boolean
-}, Ie = {
-  unselectable: { type: Boolean, default: !0 }
-}, Ce = {
-  id: [String, Number],
-  name: { type: String, required: !0 }
-}, Xe = {
-  autofocus: Boolean
-}, Ye = {
-  autocomplete: { type: String, default: "off" }
-}, Je = {
-  ...Ce,
-  ...Xe,
-  ...Ye,
-  ...we,
-  ...ce,
-  ...Se,
-  ...ye,
-  ..._e,
-  ...Ve,
-  ...De,
-  ...re,
-  ...Rt,
-  ...Ot,
-  ...Te,
-  ...Le,
-  minlength: Number,
-  maxlength: Number,
-  placeholder: String,
-  required: Boolean,
-  label: String
-}, Qe = {
-  ...Ce,
-  ...we,
-  ...ye,
-  ..._e,
-  ...Ve,
-  ...ce,
-  ...Se,
-  value: [String, Number, Boolean],
-  modelValue: [Object, Number, Boolean, String],
-  label: String
-}, Ze = {
-  ...ye,
-  ..._e,
-  ...Pe,
-  ...Ve,
+}), io = {
   ...ce,
-  ...Se,
-  modelValue: [String, Array],
-  label: String,
-  name: { type: String, required: !0 },
-  vertical: Boolean
-}, Bt = {
-  ...re,
   value: [String, Number]
-}, Dt = {
+}, uo = {
   name: "VvBadge"
-}, ws = /* @__PURE__ */ N({
-  ...Dt,
-  props: Bt,
+}, co = /* @__PURE__ */ q({
+  ...uo,
+  props: io,
   setup(o) {
-    const s = o, { bemCssClasses: e } = useBemModifiers("vv-badge", {
-      modifiers: s.modifiers
-    });
-    return (n, l) => (m(), _("span", {
-      class: U(t(e)),
+    const a = o, { modifiers: e } = toRefs(a), s = useBemModifiers("vv-badge", e);
+    return (l, i) => (d(), y("span", {
+      class: Z(t(s)),
       role: "status"
     }, [
-      k(n.$slots, "default", {}, () => [
-        q(B(n.value), 1)
+      $(l.$slots, "default", {}, () => [
+        X(x(l.value), 1)
       ])
     ], 2));
   }
 });
-function Tt(o, s) {
-  const e = { [`${o}`]: !0 };
-  return {
-    bemCssClasses: computed(() => Object.keys(s).reduce((l, i) => {
-      const r = unref(s[i]) || !1;
-      if (!r)
-        return l;
-      if (i === "modifiers") {
-        const f = Array.isArray(r) ? r : r.split(" ");
-        return {
-          ...l,
-          ...f.reduce(
-            (p, u) => ({
-              ...p,
-              [`${o}--${kebabCase(u)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...l,
-          [`${o}--${kebabCase(i)}`]: r
-        };
-    }, e) || {})
-  };
+function vo(o, a, e) {
+  return computed(() => {
+    const s = {
+      [o]: !0
+    };
+    let l = unref(a);
+    return l && (!Array.isArray(l) && typeof l == "string" && (l = l.split(" ")), Array.isArray(l) && l.forEach((i) => {
+      s[`${o}--${i}`] = !0;
+    })), e && Object.keys(e.value).forEach((i) => {
+      s[`${o}--${i}`] = unref(e.value[i]);
+    }), s;
+  });
 }
-const Lt = {
-  ...re,
+const po = {
+  ...ce,
   routes: Array
-}, Mt = { class: "vv-breadcrumb__list" }, Nt = ["content"], Ht = {
+}, fo = { class: "vv-breadcrumb__list" }, mo = ["content"], bo = {
   name: "VvBreadcrumb"
-}, Is = /* @__PURE__ */ N({
-  ...Ht,
-  props: Lt,
+}, ml = /* @__PURE__ */ q({
+  ...bo,
+  props: po,
   setup(o) {
-    const s = o, { bemCssClasses: e } = Tt("vv-breadcrumb", {
-      modifiers: s.modifiers
-    });
-    return (n, l) => (m(), _("nav", {
-      class: U(t(e)),
+    const a = o, { modifiers: e } = toRefs(a), s = vo("vv-breadcrumb", e);
+    return (l, i) => (d(), y("nav", {
+      class: Z(t(s)),
       "aria-label": "breadcrumbs"
     }, [
-      R("ol", Mt, [
-        (m(!0), _(de, null, fe(n.routes, (i, r) => {
-          var f, p, u, a;
-          return m(), _("li", {
-            key: `${i.label}-${r}`,
-            class: U({
-              "vv-breadcrumb__item": r < Number((f = n.routes) == null ? void 0 : f.length) - 1,
-              "vv-breadcrumb__item-active": r === Number((p = n.routes) == null ? void 0 : p.length) - 1
+      N("ol", fo, [
+        (d(!0), y(ne, null, ke(l.routes, (u, c) => {
+          var p, v, n, r;
+          return d(), y("li", {
+            key: `${u.label}-${c}`,
+            class: Z({
+              "vv-breadcrumb__item": c < Number((p = l.routes) == null ? void 0 : p.length) - 1,
+              "vv-breadcrumb__item-active": c === Number((v = l.routes) == null ? void 0 : v.length) - 1
             }),
             itemprop: "itemListElement",
             itemtype: "https://schema.org/ListItem",
             itemscope: ""
           }, [
-            (m(), D(Fe(i.to ? "router-link" : i.href ? "a" : "span"), O(i, {
+            (d(), W(ut(u.to ? "router-link" : u.href ? "a" : "span"), G(u, {
               class: {
-                "vv-breadcrumb__link": r < Number((u = n.routes) == null ? void 0 : u.length) - 1
+                "vv-breadcrumb__link": c < Number((n = l.routes) == null ? void 0 : n.length) - 1
               },
-              "aria-current": r === Number((a = n.routes) == null ? void 0 : a.length) - 1 ? "page" : void 0,
+              "aria-current": c === Number((r = l.routes) == null ? void 0 : r.length) - 1 ? "page" : void 0,
               itemprop: "item"
             }), {
-              default: ge(() => [
-                k(n.$slots, "label", F(Y({ route: i, index: r })), () => [
-                  q(B(i.label), 1)
+              default: ve(() => [
+                $(l.$slots, "label", j(F({ route: u, index: c })), () => [
+                  X(x(u.label), 1)
                 ])
               ]),
               _: 2
             }, 1040, ["class", "aria-current"])),
-            R("meta", {
+            N("meta", {
               itemprop: "position",
-              content: `${r + 1}`
-            }, null, 8, Nt)
+              content: `${c + 1}`
+            }, null, 8, mo)
           ], 2);
         }), 128))
       ])
     ], 2));
   }
-}), xt = {
+}), ho = {
+  /**
+   * 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]
   }
-}, Gt = {
+}, yo = {
   name: "VvIcon"
-}, x = /* @__PURE__ */ N({
-  ...Gt,
-  props: xt,
+}, Q = /* @__PURE__ */ q({
+  ...yo,
+  props: ho,
   setup(o) {
-    const s = o, e = ref(!0), { modifiers: n } = toRefs(s), l = inject(Ae), { bemCssClasses: i } = useBemModifiers("vv-icon", {
-      modifiers: n
-    }), r = computed(() => s.provider || (l == null ? void 0 : l.provider)), f = computed(() => {
-      const a = s.name ?? "", c = `@${r.value}:${s.prefix}:${s.name}`;
-      return $e(a) ? a : $e(c) ? c : (l == null ? void 0 : l.iconsCollections.find((d) => {
-        const b = `@${r.value}:${d.prefix}:${a}`;
-        if ($e(b))
-          return b;
-      })) || a;
+    const a = o, e = ref(!0), s = useVolver(), { modifiers: l } = toRefs(a), i = useBemModifiers("vv-icon", l), u = computed(() => a.provider || (s == null ? void 0 : s.provider)), c = computed(() => {
+      const n = a.name ?? "", r = `@${u.value}:${a.prefix}:${a.name}`;
+      return Re(n) ? n : Re(r) ? r : (s == null ? void 0 : s.iconsCollections.find(
+        (f) => {
+          const g = `@${u.value}:${f.prefix}:${n}`;
+          if (Re(g))
+            return g;
+        }
+      )) || n;
     });
-    function p(a) {
-      let c = null;
+    function p(n) {
+      let r = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        c = new y().window;
+        const { JSDOM: A } = require("jsdom");
+        r = new A().window;
       }
-      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(a, "text/html").querySelector("svg");
+      return (r ? new r.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function u(a) {
-      const c = p(a), d = (c == null ? void 0 : c.innerHTML.trim()) || "";
-      c && d && Ue(`@${r.value}:${s.prefix}:${s.name}`, {
-        body: d,
-        height: c.viewBox.baseVal.height,
-        width: c.viewBox.baseVal.width
+    function v(n) {
+      const r = p(n), f = (r == null ? void 0 : r.innerHTML.trim()) || "";
+      r && f && rt(`@${u.value}:${a.prefix}:${a.name}`, {
+        body: f,
+        // Set height and width from svg content
+        height: r.viewBox.baseVal.height,
+        width: r.viewBox.baseVal.width
       });
     }
-    return l && (s.src && !$e(`@${r.value}:${s.prefix}:${s.name}`) ? (e.value = !1, l.fetchIcon(s.src).then((a) => {
-      a && (u(a), e.value = !0);
-    }).catch((a) => {
-      throw new Error(`During fetch icon: ${a == null ? void 0 : a.message}`);
-    })) : s.svg && u(s.svg)), (a, c) => t(e) ? (m(), D(t(ct), O({
+    return s && (a.src && !Re(`@${u.value}:${a.prefix}:${a.name}`) ? (e.value = !1, s.fetchIcon(a.src).then((n) => {
+      n && (v(n), e.value = !0);
+    }).catch((n) => {
+      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
+    })) : a.svg && v(a.svg)), (n, r) => t(e) ? (d(), W(t(Pt), G({
       key: 0,
       class: t(i)
     }, {
-      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(f)
-    }), null, 16, ["class"])) : I("", !0);
+      inline: n.inline,
+      width: n.width,
+      height: n.height,
+      horizontalFlip: n.horizontalFlip,
+      verticalFlip: n.verticalFlip,
+      flip: n.flip,
+      rotate: n.rotate,
+      color: n.color,
+      onLoad: n.onLoad,
+      icon: t(c)
+    }), null, 16, ["class"])) : w("", !0);
   }
 });
-var me = /* @__PURE__ */ ((o) => (o.left = "left", o.right = "right", o.top = "top", o.bottom = "bottom", o))(me || {}), et = /* @__PURE__ */ ((o) => (o.button = "button", o.submit = "submit", o.reset = "reset", o))(et || {}), ae = /* @__PURE__ */ ((o) => (o.nuxtLink = "nuxt-link", o.routerLink = "router-link", o.a = "a", o.button = "button", o))(ae || {}), tt = /* @__PURE__ */ ((o) => (o._blank = "_blank", o._self = "_self", o._parent = "_parent", o._top = "_top", o))(tt || {});
-const Ut = ["update:modelValue"], Ft = {
-  ...re,
+var Vt = /* @__PURE__ */ ((o) => (o.button = "button", o.submit = "submit", o.reset = "reset", o))(Vt || {}), ge = /* @__PURE__ */ ((o) => (o.nuxtLink = "nuxt-link", o.routerLink = "router-link", o.a = "a", o.button = "button", o))(ge || {}), $t = /* @__PURE__ */ ((o) => (o._blank = "_blank", o._self = "_self", o._parent = "_parent", o._top = "_top", o))($t || {});
+const go = ["update:modelValue"], _o = {
+  ...Ne,
   ...ce,
-  ...Ie,
-  icon: {
-    type: [String, Object],
-    default: ""
-  },
+  ...Ae,
+  ...xe,
+  /**
+   * Button icon
+   */
+  icon: [String, Object],
+  /**
+   * Button icon position
+   */
   iconPosition: {
     type: String,
-    default: "left",
-    validator: (o) => o in me
+    default: be.left,
+    validator: (o) => Object.values(be).includes(o)
   },
+  /**
+   * Button label
+   */
   label: [String, Number],
+  /**
+   * Loading status
+   */
   loading: Boolean,
+  /**
+   * Loading icon
+   */
   loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Loading label
+   */
   loadingLabel: {
     type: String,
     default: "Loading..."
   },
+  /**
+   * 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]
   },
+  /**
+   * Link href
+   */
   href: String,
+  /**
+   * Link target
+   */
   target: {
     type: String,
-    validator: (o) => o in tt
+    validator: (o) => Object.values($t).includes(o)
   },
   active: Boolean,
+  /**
+   * Button pressed mode
+   */
   pressed: Boolean,
+  /**
+   * Link rel
+   */
   rel: {
     type: String,
     default: "noopener noreferrer"
   },
+  /**
+   * Button type
+   */
   type: {
     type: String,
     default: "button",
-    validator: (o) => o in et
+    validator: (o) => Object.values(Vt).includes(o)
   },
   toggle: {
     type: Boolean,
@@ -527,306 +938,342 @@ const Ut = ["update:modelValue"], Ft = {
   },
   modelValue: String
 };
-function Kt(o, s) {
-  var v;
-  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(We), {
-    iconPosition: i,
-    icon: r,
-    label: f,
-    pressed: p,
-    modifiers: u
-  } = toRefs(o), a = l("modelValue", o, s), c = l("disabled", o), d = l("toggle", o), b = l(
+function So(o, a) {
+  var S;
+  const { group: e, isInGroup: s, getGroupOrLocalRef: l } = useInjectedGroupState(pt), {
+    id: i,
+    iconPosition: u,
+    icon: c,
+    label: p,
+    pressed: v,
+    modifiers: n
+  } = toRefs(o), r = l("modelValue", o, a), f = l("disabled", o), g = l("toggle", o), k = l(
     "unselectable",
     o
-  ), g = ((v = e == null ? void 0 : e.value) == null ? void 0 : v.multiple) ?? ref(!1), y = computed(() => {
-    var C;
-    const V = u != null && u.value ? Array.isArray(u.value) ? u.value : [u.value] : [], w = (C = e == null ? void 0 : e.value.itemModifiers) != null && C.value ? Array.isArray(e.value.itemModifiers.value) ? e.value.itemModifiers.value : [e.value.itemModifiers.value] : [];
-    return [...V, ...w];
+  ), A = ((S = e == null ? void 0 : e.value) == null ? void 0 : S.multiple) ?? ref(!1), b = computed(() => {
+    var E;
+    const I = n != null && n.value ? Array.isArray(n.value) ? n.value : [n.value] : [], B = (E = e == null ? void 0 : e.value.itemModifiers) != null && E.value ? Array.isArray(e.value.itemModifiers.value) ? e.value.itemModifiers.value : [e.value.itemModifiers.value] : [];
+    return [...I, ...B];
   });
   return {
+    // group props
     group: e,
-    isInGroup: n,
-    modelValue: a,
-    disabled: c,
-    toggle: d,
-    unselectable: b,
-    multiple: g,
-    modifiers: y,
-    pressed: p,
-    iconPosition: i,
-    icon: r,
-    label: f
+    isInGroup: s,
+    modelValue: r,
+    disabled: f,
+    toggle: g,
+    unselectable: k,
+    multiple: A,
+    // local props
+    id: i,
+    modifiers: b,
+    pressed: v,
+    iconPosition: u,
+    icon: c,
+    label: p
   };
 }
-const Wt = {
+const Vo = {
   key: 1,
   class: "vv-button__label"
-}, qt = {
+}, $o = {
   key: 1,
   class: "vv-button__label"
-}, jt = {
+}, ko = {
   name: "VvButton"
-}, Es = /* @__PURE__ */ N({
-  ...jt,
-  props: Ft,
-  emits: Ut,
-  setup(o, { emit: s }) {
-    const e = o, n = useAttrs(), l = useSlots(), i = (n == null ? void 0 : n.name) || ne(), {
-      modifiers: r,
-      iconPosition: f,
-      icon: p,
-      label: u,
-      modelValue: a,
-      disabled: c,
-      toggle: d,
-      unselectable: b
-    } = Kt(e, s), g = inject(Ae), y = computed(() => {
+}, bl = /* @__PURE__ */ q({
+  ...ko,
+  props: _o,
+  emits: go,
+  setup(o, { expose: a, emit: e }) {
+    const s = o, l = useAttrs(), i = useSlots(), {
+      id: u,
+      modifiers: c,
+      iconPosition: p,
+      icon: v,
+      label: n,
+      modelValue: r,
+      disabled: f,
+      toggle: g,
+      unselectable: k
+    } = So(s, e), A = useUniqueId(u), b = computed(() => (l == null ? void 0 : l.name) || A.value), S = useVolver(), I = ref(null);
+    a({ $el: I });
+    const {
+      reference: B,
+      bus: E,
+      aria: O
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => I.value,
+      (C) => {
+        B && (B.value = C);
+      }
+    );
+    const { role: L } = useInjectedDropdownAction(), K = computed(() => {
       switch (!0) {
-        case c.value:
-          return ae.button;
-        case e.to !== void 0:
-          return g != null && g.nuxt ? ae.nuxtLink : ae.routerLink;
-        case e.href !== void 0:
-          return ae.a;
+        case f.value:
+          return ge.button;
+        case s.to !== void 0:
+          return S != null && S.nuxt ? ge.nuxtLink : ge.routerLink;
+        case s.href !== void 0:
+          return ge.a;
         default:
-          return ae.button;
+          return ge.button;
       }
-    }), v = computed(() => d.value ? Array.isArray(a.value) ? contains(i, a.value) : equals(i, a.value) : e.pressed), { bemCssClasses: V } = useBemModifiers("vv-button", {
-      modifiers: r,
-      active: e.active,
-      pressed: v,
-      disabled: c,
-      reverse: computed(
-        () => [me.right, me.bottom].includes(
-          f.value
-        )
-      ),
-      column: computed(
-        () => [me.top, me.bottom].includes(
-          f.value
-        )
-      ),
-      iconOnly: computed(
-        () => (p == null ? void 0 : p.value) && !(u != null && u.value) && !l.default
-      )
-    }), w = computed(
-      () => typeof (p == null ? void 0 : p.value) == "string" ? { name: p == null ? void 0 : p.value } : p == null ? void 0 : p.value
-    ), C = computed(() => {
-      const $ = {
-        class: V.value,
-        "aria-pressed": v.value ? !0 : void 0
+    }), ee = computed(() => g.value ? Array.isArray(r.value) ? contains(b.value, r.value) : equals(b.value, r.value) : s.pressed), P = useBemModifiers(
+      "vv-button",
+      c,
+      computed(() => ({
+        active: s.active,
+        pressed: ee.value,
+        disabled: f.value,
+        reverse: [be.right, be.bottom].includes(p.value),
+        column: [be.top, be.bottom].includes(p.value),
+        iconOnly: Boolean((v == null ? void 0 : v.value) && !(n != null && n.value) && !i.default)
+      }))
+    ), T = computed(
+      () => typeof (v == null ? void 0 : v.value) == "string" ? { name: v == null ? void 0 : v.value } : v == null ? void 0 : v.value
+    ), U = computed(() => {
+      const C = {
+        ...O == null ? void 0 : O.value,
+        "aria-pressed": ee.value ? !0 : void 0,
+        class: P.value,
+        role: L
       };
-      switch (y.value) {
-        case ae.a:
+      switch (K.value) {
+        case ge.a:
           return {
-            ...$,
-            role: "button",
-            href: e.href,
-            target: e.target,
-            rel: e.rel
+            ...C,
+            role: C.role ?? "button",
+            href: s.href,
+            target: s.target,
+            rel: s.rel
           };
-        case ae.routerLink:
-        case ae.nuxtLink:
+        case ge.routerLink:
+        case ge.nuxtLink:
           return {
-            ...$,
-            role: "button",
-            to: e.to,
-            target: e.target
+            ...C,
+            role: C.role ?? "button",
+            to: s.to,
+            target: s.target
           };
         default:
           return {
-            ...$,
-            type: e.type,
-            disabled: c.value
+            ...C,
+            type: s.type,
+            disabled: f.value
           };
       }
-    }), M = () => {
-      if (d.value) {
-        if (Array.isArray(a.value)) {
-          if (contains(i, a.value)) {
-            b.value && (a.value = a.value.filter(
-              ($) => $ !== i
+    }), te = (C) => {
+      if (E == null || E.emit("click", C), g.value) {
+        if (Array.isArray(r.value)) {
+          if (contains(b.value, r.value)) {
+            k.value && (r.value = r.value.filter(
+              (oe) => oe !== b.value
             ));
             return;
           }
-          a.value.push(i);
+          r.value.push(b.value);
           return;
         }
-        if (equals(i, a.value) && b.value) {
-          a.value = void 0;
+        if (equals(b, r.value) && k.value) {
+          r.value = void 0;
           return;
         }
-        a.value = i;
+        r.value = b.value;
       }
+    }, re = (C) => {
+      E == null || E.emit("mouseover", C);
+    }, ie = (C) => {
+      E == null || E.emit("mouseleave", C);
     };
-    return ($, H) => (m(), D(Fe(t(y)), O(t(C), { onClickPassive: M }), {
-      default: ge(() => [
-        k($.$slots, "default", {}, () => [
-          $.loading ? k($.$slots, "loading", { key: 0 }, () => [
-            $.loadingIcon ? (m(), D(x, {
+    return (C, oe) => (d(), W(ut(t(K)), G(t(U), {
+      id: t(A),
+      ref_key: "$el",
+      ref: I,
+      onClickPassive: te,
+      onMouseoverPassive: re,
+      onMouseleavePassive: ie
+    }), {
+      default: ve(() => [
+        $(C.$slots, "default", {}, () => [
+          C.loading ? $(C.$slots, "loading", { key: 0 }, () => [
+            C.loadingIcon ? (d(), W(Q, {
               key: 0,
               class: "vv-button__loading-icon",
-              name: $.loadingIcon
-            }, null, 8, ["name"])) : I("", !0),
-            $.loadingLabel ? (m(), _("span", Wt, B($.loadingLabel), 1)) : I("", !0)
-          ]) : (m(), _(de, { key: 1 }, [
-            k($.$slots, "before"),
-            t(p) ? (m(), D(x, O({
+              name: C.loadingIcon
+            }, null, 8, ["name"])) : w("", !0),
+            C.loadingLabel ? (d(), y("span", Vo, x(C.loadingLabel), 1)) : w("", !0)
+          ]) : (d(), y(ne, { key: 1 }, [
+            $(C.$slots, "before"),
+            t(v) ? (d(), W(Q, G({
               key: 0,
               class: "vv-button__icon"
-            }, t(w)), null, 16)) : I("", !0),
-            t(u) ? (m(), _("span", qt, [
-              k($.$slots, "label", {}, () => [
-                q(B(t(u)), 1)
+            }, t(T)), null, 16)) : w("", !0),
+            t(n) ? (d(), y("span", $o, [
+              $(C.$slots, "label", {}, () => [
+                X(x(t(n)), 1)
               ])
-            ])) : I("", !0),
-            k($.$slots, "after")
+            ])) : w("", !0),
+            $(C.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
-    }, 16));
+    }, 16, ["id"]));
   }
-}), zt = {
-  ...re,
+}), Co = {
   ...ce,
-  ...Ie,
+  ...Ae,
+  ...xe,
+  /**
+   * String or String[] of css classes (modifiers) that will be provided to each button'
+   */
   itemModifiers: { type: [String, Array], default: void 0 },
   toggle: { type: Boolean, default: !1 },
   multiple: { type: Boolean, default: !1 },
   modelValue: { type: [String, Array], default: void 0 }
-}, Xt = ["update:modelValue"], Yt = {
+}, Ao = ["update:modelValue"], wo = {
   name: "VvButtonGroup"
-}, Rs = /* @__PURE__ */ N({
-  ...Yt,
-  props: zt,
-  emits: Xt,
-  setup(o, { emit: s }) {
+}, hl = /* @__PURE__ */ q({
+  ...wo,
+  props: Co,
+  emits: Ao,
+  setup(o, { emit: a }) {
     const e = o, {
-      disabled: n,
+      disabled: s,
       toggle: l,
       modifiers: i,
-      multiple: r,
-      unselectable: f,
+      multiple: u,
+      unselectable: c,
       itemModifiers: p
     } = toRefs(e);
     watchEffect(() => {
-      typeof e.modelValue == "string" && r.value && console.warn(
+      typeof e.modelValue == "string" && u.value && console.warn(
         "[VvButtonGroup]: modelValue is a string but multiple is true."
       );
     });
-    const u = computed({
-      get: () => r.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
-      set: (d) => (d !== void 0 && (Array.isArray(e.modelValue) || r.value) && !Array.isArray(d) && (d = [d]), s("update:modelValue", d))
-    }), a = {
-      key: We,
-      modelValue: u,
-      disabled: n,
+    const v = computed({
+      get: () => u.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
+      set: (r) => (r !== void 0 && (Array.isArray(e.modelValue) || u.value) && !Array.isArray(r) && (r = [r]), a("update:modelValue", r))
+    });
+    useProvideGroupState({
+      key: pt,
+      modelValue: v,
+      disabled: s,
       toggle: l,
-      multiple: r,
-      unselectable: f,
+      multiple: u,
+      unselectable: c,
       itemModifiers: p
-    };
-    useProvideGroupState(a);
-    const { bemCssClasses: c } = useBemModifiers("vv-button-group", {
-      modifiers: i
     });
-    return (d, b) => (m(), _("div", {
-      class: U(t(c)),
+    const n = useBemModifiers("vv-button-group", i);
+    return (r, f) => (d(), y("div", {
+      class: Z(t(n)),
       role: "group"
     }, [
-      k(d.$slots, "default")
+      $(r.$slots, "default")
     ], 2));
   }
-}), Jt = {
+}), Eo = {
   title: String,
   modifiers: [String, Array]
-}, Qt = {
+}, Io = {
   key: 0,
   class: "vv-card__header"
-}, Zt = {
+}, Po = {
   key: 1,
   class: "vv-card__content"
-}, eo = {
+}, Oo = {
   key: 2,
   class: "vv-card__footer"
-}, to = {
+}, Do = {
   name: "VvCard"
-}, Os = /* @__PURE__ */ N({
-  ...to,
-  props: Jt,
+}, yl = /* @__PURE__ */ q({
+  ...Do,
+  props: Eo,
   setup(o) {
-    const s = o, { bemCssClasses: e } = useBemModifiers("vv-card", {
-      modifiers: s.modifiers
-    });
-    return (n, l) => (m(), _("article", {
-      class: U(t(e))
+    const a = o, { modifiers: e } = toRefs(a), s = useBemModifiers("vv-card", e);
+    return (l, i) => (d(), y("article", {
+      class: Z(t(s))
     }, [
-      n.$slots.header || n.title ? (m(), _("header", Qt, [
-        k(n.$slots, "header", {}, () => [
-          q(B(n.title), 1)
+      l.$slots.header || l.title ? (d(), y("header", Io, [
+        $(l.$slots, "header", {}, () => [
+          X(x(l.title), 1)
         ])
-      ])) : I("", !0),
-      k(n.$slots, "default"),
-      n.$slots.content ? (m(), _("div", Zt, [
-        k(n.$slots, "content")
-      ])) : I("", !0),
-      n.$slots.footer ? (m(), _("footer", eo, [
-        k(n.$slots, "footer")
-      ])) : I("", !0)
+      ])) : w("", !0),
+      $(l.$slots, "default"),
+      l.$slots.content ? (d(), y("div", Po, [
+        $(l.$slots, "content")
+      ])) : w("", !0),
+      l.$slots.footer ? (d(), y("footer", Oo, [
+        $(l.$slots, "footer")
+      ])) : w("", !0)
     ], 2));
   }
-}), oo = {
-  ...Qe,
+}), Bo = {
+  ..._t,
+  ...ce,
+  /**
+   * If true, the input will be indeterminated
+   */
   indeterminate: Boolean,
+  /**
+   * Value associated with the unchecked state
+   */
   uncheckedValue: [String, Number, Boolean],
+  /**
+   * If true, the input will be displayed as a switch
+   */
   switch: Boolean
-}, so = ["click", "update:modelValue", "change", "blur"];
-function lo(o, s) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(je), { switch: i, indeterminate: r } = toRefs(o), f = l("modelValue", o, s), p = l("readonly", o), u = l("disabled", o), a = l("valid", o), c = l("invalid", o);
+}, Ro = ["click", "update:modelValue", "change", "blur"];
+function To(o, a) {
+  const { group: e, isInGroup: s, getGroupOrLocalRef: l } = useInjectedGroupState(mt), { id: i, switch: u, indeterminate: c } = toRefs(o), p = l("modelValue", o, a), v = l("readonly", o), n = l("disabled", o), r = l("valid", o), f = l("invalid", o);
   return {
-    propsSwitch: i,
-    indeterminate: r,
+    // local props
+    id: i,
+    propsSwitch: u,
+    indeterminate: c,
+    // global props
     group: e,
-    isInGroup: n,
-    modelValue: f,
-    readonly: p,
-    disabled: u,
-    valid: a,
-    invalid: c
+    isInGroup: s,
+    modelValue: p,
+    readonly: v,
+    disabled: n,
+    valid: r,
+    invalid: f
   };
 }
-function ke(o) {
-  return Array.isArray(o) ? o.filter((s) => isString(s)).join(" ") : o;
+function Te(o) {
+  return Array.isArray(o) ? o.filter((a) => isString(a)).join(" ") : o;
 }
-function pe(o, s) {
+function Ve(o, a) {
   const {
     invalid: e,
-    valid: n,
+    valid: s,
     hint: l,
     loading: i
-  } = s, {
-    hintLabel: r,
-    modelValue: f,
+  } = a, {
+    hintLabel: u,
+    modelValue: c,
     valid: p,
-    validLabel: u,
-    invalid: a,
-    invalidLabel: c,
-    ...d
-  } = toRefs(o), b = resolveFieldData(d, "loading"), g = resolveFieldData(d, "loadingLabel"), y = computed(() => a.value ? !!(a.value && e || c != null && c.value && Array.isArray(c.value) && c.value.length > 0 || c != null && c.value && !isEmpty(c)) : !1), v = computed(
-    () => !!(r && r.value || l)
-  ), V = computed(
-    () => !!(u && u.value || n)
-  ), w = computed(
-    () => !!(b != null && b.value && i || b != null && b.value && (g != null && g.value))
-  ), C = computed(
-    () => v.value || V.value || y.value || w.value
+    validLabel: v,
+    invalid: n,
+    invalidLabel: r,
+    ...f
+  } = toRefs(o), g = resolveFieldData(f, "loading"), k = resolveFieldData(f, "loadingLabel"), A = computed(() => n.value ? !!(n.value && e || r != null && r.value && Array.isArray(r.value) && r.value.length > 0 || r != null && r.value && !isEmpty(r)) : !1), b = computed(
+    () => !!(u && u.value || l)
+  ), S = computed(
+    () => !!(v && v.value || s)
+  ), I = computed(
+    () => !!(g != null && g.value && i || g != null && g.value && (k != null && k.value))
+  ), B = computed(
+    () => b.value || S.value || A.value || I.value
   );
   return {
-    hasInvalid: y,
-    hasHint: v,
-    hasValid: V,
-    hasLoading: w,
+    hasInvalid: A,
+    hasHint: b,
+    hasValid: S,
+    hasLoading: I,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -835,26 +1282,26 @@ function pe(o, s) {
           default: () => ({})
         }
       },
-      setup(M) {
-        const $ = computed(() => {
-          const H = toReactive({
-            hintLabel: r,
-            modelValue: f,
+      setup(E) {
+        const O = computed(() => {
+          const L = toReactive({
+            hintLabel: u,
+            modelValue: c,
             valid: p,
-            validLabel: u,
-            invalid: a,
-            invalidLabel: c,
-            loading: b,
-            loadingLabel: g,
-            ...M.params
+            validLabel: v,
+            invalid: n,
+            invalidLabel: r,
+            loading: g,
+            loadingLabel: k,
+            ...E.params
           });
-          return a != null && a.value ? (e == null ? void 0 : e(H)) || ke(c == null ? void 0 : c.value) || (r == null ? void 0 : r.value) : p != null && p.value ? (n == null ? void 0 : n(H)) || ke(u == null ? void 0 : u.value) || (r == null ? void 0 : r.value) : b != null && b.value ? (i == null ? void 0 : i(H)) || ke(g == null ? void 0 : g.value) || (r == null ? void 0 : r.value) : (l == null ? void 0 : l(H)) || ke(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
+          return n != null && n.value ? (e == null ? void 0 : e(L)) || Te(r == null ? void 0 : r.value) || (u == null ? void 0 : u.value) : p != null && p.value ? (s == null ? void 0 : s(L)) || Te(v == null ? void 0 : v.value) || (u == null ? void 0 : u.value) : g != null && g.value ? (i == null ? void 0 : i(L)) || Te(k == null ? void 0 : k.value) || (u == null ? void 0 : u.value) : (l == null ? void 0 : l(L)) || Te(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
         });
         return {
-          isVisible: C,
-          hasInvalid: y,
-          hasValid: V,
-          hintContent: $
+          isVisible: B,
+          hasInvalid: A,
+          hasValid: S,
+          hintContent: O
         };
       },
       render() {
@@ -862,7 +1309,7 @@ function pe(o, s) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -870,474 +1317,833 @@ function pe(o, s) {
     }
   };
 }
-const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ro = {
+const Mo = ["for"], xo = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], No = {
   name: "VvCheckbox"
-}, io = /* @__PURE__ */ N({
-  ...ro,
-  props: oo,
-  emits: so,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), {
-      disabled: l,
-      readonly: i,
-      valid: r,
-      invalid: f,
-      propsSwitch: p,
-      modelValue: u,
-      indeterminate: a,
-      isInGroup: c
-    } = lo(e, s), d = computed(() => String(e.id || ne())), b = computed(() => v.value ? -1 : e.tabindex), g = ref(), y = computed(
-      () => e.uncheckedValue !== void 0 && !c.value
-    ), v = computed(() => l.value || i.value), V = computed(() => {
-      if (f.value === !0)
+}, Lo = /* @__PURE__ */ q({
+  ...No,
+  props: Bo,
+  emits: Ro,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), {
+      id: l,
+      disabled: i,
+      readonly: u,
+      valid: c,
+      invalid: p,
+      propsSwitch: v,
+      modelValue: n,
+      indeterminate: r,
+      isInGroup: f
+    } = To(e, a), g = useUniqueId(l), k = computed(() => S.value ? -1 : e.tabindex), A = ref(), b = computed(
+      () => e.uncheckedValue !== void 0 && !f.value
+    ), S = computed(() => i.value || u.value), I = computed(() => {
+      if (p.value === !0)
         return !0;
-      if (r.value === !0)
+      if (c.value === !0)
         return !1;
-    }), w = computed(() => y.value ? u.value === e.value : Array.isArray(u.value) ? contains(e.value, u.value) : equals(e.value, u.value)), C = computed(() => !!(a.value || !w.value && y.value && e.uncheckedValue !== u.value)), M = computed(() => {
-      if (!y.value)
+    }), B = computed(() => b.value ? n.value === e.value : Array.isArray(n.value) ? contains(e.value, n.value) : equals(e.value, n.value)), E = computed(() => !!(r.value || !B.value && b.value && e.uncheckedValue !== n.value)), O = computed(() => {
+      if (!b.value)
         return ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0;
-    }), $ = computed({
+    }), L = computed({
       get() {
-        return w.value;
+        return B.value;
       },
       set(T) {
-        if (y.value)
-          u.value = T ? e.value : e.uncheckedValue;
-        else if (Array.isArray(u.value) || c.value) {
-          const G = new Set(
-            Array.isArray(u.value) ? u.value : u.value !== void 0 ? [u.value] : []
+        if (b.value)
+          n.value = T ? e.value : e.uncheckedValue;
+        else if (Array.isArray(n.value) || f.value) {
+          const U = new Set(
+            Array.isArray(n.value) ? n.value : n.value !== void 0 ? [n.value] : []
           );
-          T ? G.add(e.value) : G.delete(e.value), u.value = [...G];
+          T ? U.add(e.value) : U.delete(e.value), n.value = [...U];
         } else
-          u.value = T ? e.value : void 0;
-        s("change", T);
+          n.value = T ? e.value : void 0;
+        a("change", T);
       }
-    }), { bemCssClasses: H } = useBemModifiers("vv-checkbox", {
-      switch: p,
-      valid: r,
-      invalid: f,
-      disabled: l,
-      readonly: i,
-      indeterminate: a
-    });
+    }), { modifiers: K } = toRefs(e), ee = useBemModifiers(
+      "vv-checkbox",
+      K,
+      computed(() => ({
+        switch: v.value,
+        valid: c.value,
+        invalid: p.value,
+        disabled: i.value,
+        readonly: u.value,
+        indeterminate: r.value
+      }))
+    );
     watchEffect(() => {
-      y.value && Array.isArray(u.value) && console.warn(
+      b.value && Array.isArray(n.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
     }), watch(
-      () => C.value,
+      () => E.value,
       (T) => {
-        T ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
+        T ? A.value.indeterminate = !0 : A.value.indeterminate = !1;
       }
     ), onMounted(() => {
-      C.value && (g.value.indeterminate = !0);
+      E.value && (A.value.indeterminate = !0);
     });
-    const { HintSlot: X } = pe(e, n);
-    return (T, G) => (m(), _("label", {
-      class: U(t(H)),
-      for: t(d)
+    const { HintSlot: P } = Ve(e, s);
+    return (T, U) => (d(), y("label", {
+      class: Z(t(ee)),
+      for: t(g)
     }, [
-      ve(R("input", {
-        id: t(d),
+      Se(N("input", {
+        id: t(g),
         ref_key: "input",
-        ref: g,
-        "onUpdate:modelValue": G[0] || (G[0] = (J) => be($) ? $.value = J : null),
+        ref: A,
+        "onUpdate:modelValue": U[0] || (U[0] = (te) => Ce(L) ? L.value = te : null),
         type: "checkbox",
         class: "vv-checkbox__input",
         name: T.name,
-        disabled: t(v),
-        value: t(M),
-        tabindex: t(b),
-        "aria-invalid": t(V)
-      }, null, 8, no), [
-        [pt, t($)]
+        disabled: t(S),
+        value: t(O),
+        tabindex: t(k),
+        "aria-invalid": t(I)
+      }, null, 8, xo), [
+        [Dt, t(L)]
       ]),
-      k(T.$slots, "default", { value: t(u) }, () => [
-        q(B(T.label), 1)
+      $(T.$slots, "default", { value: t(n) }, () => [
+        X(x(T.label), 1)
       ]),
-      Z(t(X), {
+      de(t(P), {
         class: "vv-checkbox__hint",
-        params: { value: t(u) }
+        params: { value: t(n) }
       }, null, 8, ["params"])
-    ], 10, ao));
+    ], 10, Mo));
   }
-}), uo = Ze, co = ["update:modelValue", "change"], po = ["textContent"], vo = { class: "vv-checkbox-group__wrapper" }, mo = {
+}), Ho = St, Go = ["update:modelValue", "change"], Uo = ["textContent"], Wo = { class: "vv-checkbox-group__wrapper" }, jo = {
   name: "VvCheckboxGroup"
-}, Bs = /* @__PURE__ */ N({
-  ...mo,
-  props: uo,
-  emits: co,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), l = useVModel(e, "modelValue", s), { disabled: i, readonly: r, vertical: f, valid: p, invalid: u } = toRefs(e), a = {
-      key: je,
+}, gl = /* @__PURE__ */ q({
+  ...jo,
+  props: Ho,
+  emits: Go,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), l = useVModel(e, "modelValue", a), { disabled: i, readonly: u, vertical: c, valid: p, invalid: v, modifiers: n } = toRefs(e);
+    useProvideGroupState({
+      key: mt,
       modelValue: l,
       disabled: i,
-      readonly: r,
-      valid: p,
-      invalid: u
-    };
-    useProvideGroupState(a);
-    const { getOptionLabel: c, getOptionValue: d } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-checkbox-group", {
-      disabled: i,
-      readonly: r,
-      horizontal: computed(() => !f.value),
+      readonly: u,
       valid: p,
-      invalid: u
-    }), g = (v, V) => ({
-      id: `${e.name}_opt${V}`,
+      invalid: v
+    });
+    const { getOptionLabel: r, getOptionValue: f } = useOptions(e), g = useBemModifiers(
+      "vv-checkbox-group",
+      n,
+      computed(() => ({
+        disabled: i.value,
+        readonly: u.value,
+        horizontal: !c.value,
+        valid: p.value,
+        invalid: v.value
+      }))
+    ), k = (b, S) => ({
+      id: `${e.name}_opt${S}`,
       name: e.name,
-      label: c(v),
-      value: d(v)
-    }), { HintSlot: y } = pe(e, n);
-    return (v, V) => (m(), _("fieldset", {
-      class: U(t(b))
+      label: r(b),
+      value: f(b)
+    }), { HintSlot: A } = Ve(e, s);
+    return (b, S) => (d(), y("fieldset", {
+      class: Z(t(g))
     }, [
-      v.label ? (m(), _("legend", {
+      b.label ? (d(), y("legend", {
         key: 0,
-        textContent: B(v.label)
-      }, null, 8, po)) : I("", !0),
-      R("div", vo, [
-        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, C) => (m(), D(io, O({ key: C }, g(w, C)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
+        textContent: x(b.label)
+      }, null, 8, Uo)) : w("", !0),
+      N("div", Wo, [
+        b.options.length > 0 ? (d(!0), y(ne, { key: 0 }, ke(b.options, (I, B) => (d(), W(Lo, G({ key: B }, k(I, B)), null, 16))), 128)) : $(b.$slots, "default", { key: 1 })
       ]),
-      Z(t(y), { class: "vv-checkbox-group__hint" })
+      de(t(A), { class: "vv-checkbox-group__hint" })
     ], 2));
   }
-}), fo = {
-  ...Ce,
+}), Fo = [
+  "update:modelValue",
+  "change:search",
+  "focus",
+  "blur"
+], qo = {
+  ...Le,
+  ...Me,
   ...Pe,
+  ...Oe,
+  ...Be,
+  ...Ke,
+  ...Ae,
+  ...De,
   ...ce,
-  ...re,
+  ...ze,
+  ...Ye,
+  ...Je,
+  ...xe,
+  ...Fe,
+  /**
+   * 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 }
-}, bo = ["id"], ho = {
-  key: 0,
-  role: "option"
-}, go = ["aria-selected"], yo = ["for", "onClick"], _o = ["id", "type", "value", "checked", "disabled", "name"], So = {
-  name: "VvDropdown"
-}, Vo = /* @__PURE__ */ N({
-  ...So,
-  props: fo,
+  /**
+   * 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
+}, lt = ["listbox", "menu"], Ko = {
+  ...Ne,
+  ...ce,
+  ...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: lt[1],
+    validator: (o) => lt.includes(o)
+  }
+}, zo = ["id", "tabindex", "role", "aria-labelledby"], Yo = {
+  name: "VvDropdown",
+  inheritAttrs: !1
+}, kt = /* @__PURE__ */ q({
+  ...Yo,
+  props: Ko,
   emits: ["update:modelValue"],
-  setup(o, { emit: s }) {
-    const e = o, n = computed(() => String(e.id || ne())), { modifiers: l, disabled: i } = toRefs(e), { getOptionLabel: r, getOptionValue: f } = useOptions(e), { bemCssClasses: p } = useBemModifiers("vv-dropdown", {
-      modifiers: l,
-      disabled: i
+  setup(o, { emit: a }) {
+    const e = o, { id: s } = toRefs(e), l = useUniqueId(s), i = useAttrs(), u = ref("auto"), c = ref("auto"), p = ref(null), v = ref(null), n = ref(null), r = ref(null), f = computed({
+      get: () => e.reference ?? p.value,
+      set: (m) => {
+        p.value = m;
+      }
+    }), g = computed(() => {
+      const m = [];
+      if (e.autoPlacement ? typeof e.autoPlacement == "boolean" ? m.push(Ze()) : m.push(
+        Ze(e.autoPlacement)
+      ) : e.flip && (typeof e.flip == "boolean" ? m.push(et()) : m.push(et(e.flip))), e.shift && (typeof e.shift == "boolean" ? m.push(tt()) : m.push(tt(e.shift))), e.size) {
+        const M = ({
+          availableWidth: ue,
+          availableHeight: ye
+        }) => {
+          u.value = `${ue}px`, c.value = `${ye}px`;
+        };
+        typeof e.size == "boolean" ? m.push(
+          ot({
+            apply: M
+          })
+        ) : m.push(
+          ot({
+            ...e.size,
+            apply: M
+          })
+        );
+      }
+      return e.offset && (m.push(Ge(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? m.push(Ge(Number(e.offset))) : m.push(Ge(e.offset))), e.arrow && m.push(
+        Lt({
+          element: n
+        })
+      ), m;
+    }), { x: k, y: A, strategy: b, middlewareData: S, placement: I } = Ht(
+      f,
+      v,
+      {
+        whileElementsMounted: Gt,
+        placement: e.placement,
+        middleware: g
+      }
+    ), B = computed(() => ({
+      position: b.value,
+      top: `${A.value ?? 0}px`,
+      left: `${k.value ?? 0}px`,
+      maxWidth: u.value,
+      maxHeight: c.value,
+      width: e.triggerWidth && f.value ? `${f.value.offsetWidth}px` : void 0
+    })), E = computed(() => I.value.split("-")[0]), O = computed(
+      () => ({
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      })[E.value] ?? "bottom"
+    ), L = computed(() => {
+      var m, M, ue, ye;
+      return ["bottom", "top"].includes(O.value) ? {
+        right: `${((m = S.value.arrow) == null ? void 0 : m.x) ?? 0}px`,
+        [O.value]: `${-(((M = n.value) == null ? void 0 : M.offsetWidth) ?? 0) / 2}px`
+      } : {
+        top: `${((ue = S.value.arrow) == null ? void 0 : ue.y) ?? 0}px`,
+        [O.value]: `${-(((ye = n.value) == null ? void 0 : ye.offsetWidth) ?? 0) / 2}px`
+      };
+    }), K = useVModel(e, "modelValue", a), ee = ref(!1), P = computed({
+      get: () => K.value ?? ee.value,
+      set: (m) => {
+        if (K.value === void 0) {
+          ee.value = m;
+          return;
+        }
+        K.value = m;
+      }
+    }), T = () => {
+      P.value = !0;
+    }, U = () => {
+      P.value = !1;
+    }, te = () => {
+      P.value = !P.value;
+    }, re = (m) => {
+      f.value = m;
+    };
+    watch(P, (m) => {
+      m && e.autofocusFirst && nextTick(() => {
+        const M = ae(
+          v.value
+        );
+        M.length > 0 && M[0].focus();
+      });
+    }), onClickOutside(
+      v,
+      () => {
+        e.autoClose && (P.value = !1);
+      },
+      { ignore: [f] }
+    );
+    const ie = computed(() => {
+      var m;
+      return ((m = f.value) == null ? void 0 : m.getAttribute("id")) ?? void 0;
+    }), C = computed(() => ({
+      "aria-controls": l.value,
+      "aria-haspopup": !0,
+      "aria-expanded": P.value
+    })), { component: oe, bus: fe } = useProvideDropdownTrigger({
+      reference: f,
+      id: l,
+      expanded: P,
+      aria: C
     });
-    function u(d) {
-      return Array.isArray(e.modelValue) ? contains(d, e.modelValue) || contains(f(d), e.modelValue) : equals(d, e.modelValue) || equals(f(d), e.modelValue);
-    }
-    function a(d) {
-      return typeof d == "string" || d.disabled === void 0 ? i.value : d.disabled;
+    fe.on("click", te);
+    const { role: se, modifiers: he } = toRefs(e), { itemRole: z } = useProvideDropdownItem({ role: se, expanded: P }), R = useBemModifiers(
+      "vv-dropdown",
+      he,
+      computed(() => ({
+        arrow: e.arrow
+      }))
+    ), { focused: Y } = useFocusWithin(v);
+    function ae(m) {
+      return m ? [
+        ...m.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (M) => !M.hasAttribute("disabled") && !M.getAttribute("aria-hidden")
+      ) : [];
     }
-    function c(d) {
-      var g;
-      if (e.disabled)
-        return;
-      let b = d;
-      if (e.multiple)
-        if (Array.isArray(e.modelValue)) {
-          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((g = e.modelValue) == null ? void 0 : g.length) >= e.maxValues && !contains(d, e.modelValue))
+    const me = () => {
+      nextTick(() => {
+        if (Y.value) {
+          const m = ae(
+            v.value
+          );
+          if (m.length === 0 || !document.activeElement)
             return;
-          b = contains(d, e.modelValue) ? removeFromList(d, e.modelValue) : [...e.modelValue, d];
-        } else
-          b = [d];
-      else
-        e.unselectable && d === e.modelValue && (b = void 0);
-      s("update:modelValue", b);
-    }
-    return (d, b) => {
-      var g;
-      return m(), _("ul", {
-        id: t(n),
-        class: U(t(p)),
-        role: "listbox"
-      }, [
-        (g = d.options) != null && g.length ? I("", !0) : (m(), _("li", ho, [
-          R("label", null, B(d.labelNoResults), 1)
-        ])),
-        (m(!0), _(de, null, fe(d.options, (y, v) => (m(), _("li", {
-          key: v,
-          role: "option",
-          "aria-selected": u(y)
-        }, [
-          R("label", {
-            for: `dropdown-${v}-${t(n)}`,
-            onClick: Be((V) => c(t(f)(y)), ["prevent"])
-          }, [
-            R("input", {
-              id: `dropdown-${v}-${t(n)}`,
-              type: d.multiple ? "checkbox" : "radio",
-              value: t(f)(y),
-              checked: u(y),
-              disabled: a(y),
-              name: d.name,
-              tabindex: "-1",
-              "aria-hidden": "true"
-            }, null, 8, _o),
-            q(" " + B(t(r)(y)), 1)
-          ], 8, yo)
-        ], 8, go))), 128))
-      ], 10, bo);
+          const M = m.indexOf(
+            document.activeElement
+          );
+          M < m.length - 1 ? m[M + 1].focus() : m[0].focus();
+        }
+      });
+    }, pe = () => {
+      nextTick(() => {
+        if (Y.value) {
+          const m = ae(
+            v.value
+          );
+          if (m.length === 0 || !document.activeElement)
+            return;
+          const M = m.indexOf(
+            document.activeElement
+          );
+          M > 0 ? m[M - 1].focus() : m[m.length - 1].focus();
+        }
+      });
     };
+    return onKeyStroke("Escape", (m) => {
+      P.value && (m.preventDefault(), U());
+    }), onKeyStroke("ArrowDown", (m) => {
+      P.value && Y.value && (m.preventDefault(), me());
+    }), onKeyStroke("ArrowUp", (m) => {
+      P.value && Y.value && (m.preventDefault(), pe());
+    }), onKeyStroke([" ", "Enter"], (m) => {
+      P.value && Y.value && (m.preventDefault(), document.activeElement.click());
+    }), (m, M) => (d(), y(ne, null, [
+      de(t(oe), null, {
+        default: ve(() => [
+          $(m.$slots, "default", j(F({ init: re, show: T, hide: U, toggle: te, expanded: t(P), aria: t(C) })))
+        ]),
+        _: 3
+      }),
+      de(dt, { name: m.transitionName }, {
+        default: ve(() => [
+          Se(N("div", {
+            ref_key: "floatingEl",
+            ref: v,
+            style: Qe(t(B)),
+            class: Z(t(R))
+          }, [
+            e.arrow ? (d(), y("div", {
+              key: 0,
+              ref_key: "arrowEl",
+              ref: n,
+              style: Qe(t(L)),
+              class: "vv-dropdown__arrow"
+            }, null, 4)) : w("", !0),
+            $(m.$slots, "before", j(F({ expanded: t(P) }))),
+            N("ul", G(t(i), {
+              id: t(l),
+              ref_key: "listEl",
+              ref: r,
+              tabindex: t(P) ? void 0 : -1,
+              role: t(se),
+              "aria-labelledby": t(ie),
+              class: "vv-dropdown__list"
+            }), [
+              $(m.$slots, "items", j(F({
+                role: t(z)
+              })))
+            ], 16, zo),
+            $(m.$slots, "after", j(F({ expanded: t(P) })))
+          ], 6), [
+            [qe, t(P)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
   }
-}), Co = {
-  ...Ce,
-  ...Xe,
-  ...Ye,
-  ...we,
-  ...ye,
-  ..._e,
-  ...Ve,
+}), Jo = {
+  name: "VvDropdownItem"
+}, Ct = /* @__PURE__ */ q({
+  ...Jo,
+  setup(o) {
+    const { role: a, expanded: e } = useInjectedDropdownItem(), s = ref(null);
+    useProvideDropdownAction({ expanded: e });
+    const l = useElementHover(s), { focused: i } = useFocus(s), { focused: u } = useFocusWithin(s);
+    return watch(l, (c) => {
+      c && (i.value = !0);
+    }), (c, p) => (d(), y("li", G({ role: t(a) }, {
+      ref_key: "element",
+      ref: s,
+      class: ["vv-dropdown__item", { "focus-visible": t(i) || t(u) }]
+    }), [
+      $(c.$slots, "default")
+    ], 16));
+  }
+}), Xo = {
+  ...Le,
+  ...ht,
+  ...yt,
+  ...Me,
+  ...Pe,
+  ...Oe,
+  ...Be,
+  ...Ke,
+  ...Ae,
   ...De,
   ...ce,
-  ...Se,
-  ...re,
-  ...Pe,
-  ...Te,
-  ...Le,
-  ...Ie,
+  ...ze,
+  ...Ye,
+  ...Je,
+  ...xe,
+  /**
+   * 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
-}, $o = ["update:modelValue", "focus", "blur"], ko = ["for"], Ao = { class: "vv-select__wrapper" }, Po = ["id"], wo = ["disabled", "hidden"], Io = ["disabled", "value"], Eo = {
+}, Qo = ["update:modelValue", "focus", "blur"], Zo = ["for"], ea = { class: "vv-select__wrapper" }, ta = {
+  key: 0,
+  class: "vv-select__input-before"
+}, oa = { class: "vv-select__inner" }, aa = ["id"], la = ["disabled", "hidden"], sa = ["disabled", "value"], na = {
+  key: 1,
+  class: "vv-select__input-after"
+}, ra = {
   name: "VvSelect"
-}, Ro = /* @__PURE__ */ N({
-  ...Eo,
-  props: Co,
-  emits: $o,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), l = ref(), { HintSlot: i, hasHint: r, hasInvalid: f } = pe(e, n), {
-      modifiers: p,
-      disabled: u,
-      readonly: a,
-      loading: c,
-      icon: d,
-      iconPosition: b,
-      invalid: g,
-      valid: y,
-      floating: v,
-      multiple: V
-    } = toRefs(e), w = computed(() => String(e.id || ne())), C = computed(() => `${w.value}-hint`), { focused: M } = useComponentFocus(l, s), $ = useElementVisibility(l);
-    watch($, (P) => {
-      P && e.autofocus && (M.value = !0);
+}, ia = /* @__PURE__ */ q({
+  ...ra,
+  props: Xo,
+  emits: Qo,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), l = ref(), { HintSlot: i, hasHint: u, hasInvalid: c } = Ve(e, s), {
+      id: p,
+      modifiers: v,
+      disabled: n,
+      readonly: r,
+      loading: f,
+      icon: g,
+      iconPosition: k,
+      invalid: A,
+      valid: b,
+      floating: S,
+      multiple: I
+    } = toRefs(e), B = useUniqueId(p), E = computed(() => `${B.value}-hint`), { focused: O } = useComponentFocus(l, a), L = useElementVisibility(l);
+    watch(L, (R) => {
+      R && e.autofocus && (O.value = !0);
     });
-    const { hasIcon: H, hasIconLeft: X, hasIconRight: T } = useComponentIcon(
-      d,
-      b
-    ), G = computed(() => !isEmpty(e.modelValue)), J = computed(() => e.disabled || e.readonly), ee = computed(() => J.value ? -1 : e.tabindex), te = computed(() => {
+    const { hasIcon: K, hasIconBefore: ee, hasIconAfter: P } = useComponentIcon(
+      g,
+      k
+    ), T = computed(() => !isEmpty(e.modelValue)), U = computed(() => e.disabled || e.readonly), te = computed(() => U.value ? -1 : e.tabindex), re = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { bemCssClasses: Q } = useBemModifiers("vv-select", {
-      modifiers: p,
-      valid: y,
-      invalid: g,
-      loading: c,
-      disabled: u,
-      readonly: a,
-      iconLeft: X,
-      iconRight: T,
-      dirty: G,
-      focus: M,
-      floating: v,
-      multiple: V
-    }), ie = computed(() => ({
+    }), ie = useBemModifiers(
+      "vv-select",
+      v,
+      computed(() => ({
+        valid: b.value,
+        invalid: A.value,
+        loading: f.value,
+        disabled: n.value,
+        readonly: r.value,
+        "icon-before": ee.value,
+        "icon-after": P.value,
+        dirty: T.value,
+        focus: O.value,
+        floating: S.value,
+        multiple: I.value
+      }))
+    ), C = computed(() => ({
       name: e.name,
-      tabindex: ee.value,
-      disabled: J.value,
+      tabindex: te.value,
+      disabled: U.value,
       required: e.required,
       size: e.size,
       autocomplete: e.autocomplete,
       multiple: e.multiple,
-      "aria-invalid": te.value,
-      "aria-describedby": !f.value && r.value ? C.value : void 0,
-      "aria-errormessage": f.value ? C.value : void 0
-    })), { getOptionLabel: oe, getOptionValue: se } = useOptions(e);
-    function le(P) {
-      return typeof P == "string" || P.disabled === void 0 ? u.value : P.disabled;
-    }
-    const W = computed({
+      "aria-invalid": re.value,
+      "aria-describedby": !c.value && u.value ? E.value : void 0,
+      "aria-errormessage": c.value ? E.value : void 0
+    })), oe = computed(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue
+    })), { getOptionLabel: fe, getOptionValue: se, getOptionDisabled: he } = useOptions(e), z = computed({
       get: () => e.modelValue,
-      set: (P) => {
-        Array.isArray(P) && (P = P.filter((j) => j !== void 0)), s("update:modelValue", P);
+      set: (R) => {
+        Array.isArray(R) && (R = R.filter((Y) => Y !== void 0)), a("update:modelValue", R);
       }
     });
-    return (P, j) => (m(), _("div", {
-      class: U(t(Q))
+    return (R, Y) => (d(), y("div", {
+      class: Z(t(ie))
     }, [
-      P.label ? (m(), _("label", {
+      R.label ? (d(), y("label", {
         key: 0,
-        for: t(w)
-      }, B(P.label), 9, ko)) : I("", !0),
-      R("div", Ao, [
-        k(P.$slots, "before", {}, () => [
-          t(X) ? (m(), D(x, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
-        ]),
-        ve(R("select", O({
-          id: t(w),
-          ref_key: "select",
-          ref: l,
-          "onUpdate:modelValue": j[0] || (j[0] = (A) => be(W) ? W.value = A : null)
-        }, t(ie)), [
-          P.placeholder ? (m(), _("option", {
+        for: t(B)
+      }, x(R.label), 9, Zo)) : w("", !0),
+      N("div", ea, [
+        R.$slots.before ? (d(), y("div", ta, [
+          $(R.$slots, "before", j(F(t(oe))))
+        ])) : w("", !0),
+        N("div", oa, [
+          t(ee) ? (d(), W(Q, G({
             key: 0,
-            value: void 0,
-            disabled: !P.unselectable,
-            hidden: !P.unselectable
-          }, B(P.placeholder), 9, wo)) : I("", !0),
-          (m(!0), _(de, null, fe(P.options, (A, L) => (m(), _("option", {
-            key: L,
-            disabled: le(A),
-            value: t(se)(A)
-          }, B(t(oe)(A)), 9, Io))), 128))
-        ], 16, Po), [
-          [vt, t(W)]
+            class: "vv-select__icon"
+          }, t(K)), null, 16)) : w("", !0),
+          Se(N("select", G({
+            id: t(B),
+            ref_key: "select",
+            ref: l,
+            "onUpdate:modelValue": Y[0] || (Y[0] = (ae) => Ce(z) ? z.value = ae : null)
+          }, t(C)), [
+            R.placeholder ? (d(), y("option", {
+              key: 0,
+              value: void 0,
+              disabled: !R.unselectable,
+              hidden: !R.unselectable
+            }, x(R.placeholder), 9, la)) : w("", !0),
+            (d(!0), y(ne, null, ke(R.options, (ae, me) => (d(), y("option", {
+              key: me,
+              disabled: t(he)(ae),
+              value: t(se)(ae)
+            }, x(t(fe)(ae)), 9, sa))), 128))
+          ], 16, aa), [
+            [Bt, t(z)]
+          ]),
+          t(P) ? (d(), W(Q, G({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, t(K)), null, 16)) : w("", !0)
         ]),
-        k(P.$slots, "after", {}, () => [
-          t(T) ? (m(), D(x, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
-        ])
+        R.$slots.after ? (d(), y("div", na, [
+          $(R.$slots, "after", j(F(t(oe))))
+        ])) : w("", !0)
       ]),
-      Z(t(i), {
-        id: t(C),
+      de(t(i), {
+        id: t(E),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Oo = [
-  "update:modelValue",
-  "change:search",
-  "focus",
-  "blur"
-], Bo = {
-  ...Ce,
-  ...we,
-  ...ye,
-  ..._e,
-  ...Ve,
-  ...De,
-  ...ce,
-  ...Se,
-  ...re,
-  ...Pe,
-  ...Te,
-  ...Le,
-  ...Ie,
-  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
-}, Do = ["id"], To = ["id", "for"], Lo = ["tabindex"], Mo = ["id", "placeholder"], No = {
-  name: "VvCombobox"
-}, Ds = /* @__PURE__ */ N({
-  ...No,
-  props: Bo,
-  emits: Oo,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), { HintSlot: l } = pe(e, n), i = ref(), r = ref(), { focused: f } = useComponentFocus(i, s), p = computed(() => String(e.id || ne())), u = ref(""), a = refDebounced(
-      u,
+}), ua = ["id"], da = ["id", "for"], ca = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], va = {
+  key: 0,
+  class: "vv-select__input-before"
+}, pa = { class: "vv-select__inner" }, fa = ["aria-labelledby", "tabindex"], ma = ["aria-label", "onClick"], ba = {
+  key: 1,
+  class: "vv-select__input-after"
+}, ha = { class: "vv-dropdown-action__hint" }, ya = {
+  name: "VvCombobox",
+  components: { VvDropdown: kt, VvDropdownItem: Ct }
+}, _l = /* @__PURE__ */ q({
+  ...ya,
+  props: qo,
+  emits: Fo,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), { HintSlot: l } = Ve(e, s), i = ref(null), u = ref(null), c = ref(null), { focused: p } = useComponentFocus(i, a), { focused: v } = useFocusWithin(c);
+    watch(p, (_) => {
+      if (e.autoOpen) {
+        if (_ && !f.value) {
+          k();
+          return;
+        }
+        !_ && f.value && !v.value && A();
+      }
+    }), watch(v, (_) => {
+      !p.value && !_ && f.value && A();
+    });
+    const n = ref(""), r = refDebounced(
+      n,
       Number(e.debounceSearch)
-    ), c = ref(!1), {
-      icon: d,
-      iconPosition: b,
-      modifiers: g,
-      disabled: y,
-      readonly: v,
-      loading: V,
-      valid: w,
-      invalid: C,
-      floating: M
-    } = toRefs(e);
+    );
     watch(
-      a,
-      () => s("change:search", a.value)
+      r,
+      () => a("change:search", r.value)
     );
-    const { hasIcon: $, hasIconLeft: H, hasIconRight: X } = useComponentIcon(
-      d,
-      b
-    ), T = computed(() => !isEmpty(e.modelValue)), G = computed(() => y.value || v.value ? -1 : e.tabindex), { bemCssClasses: J } = useBemModifiers("vv-select", {
-      modifiers: g,
-      disabled: y,
-      loading: V,
-      readonly: v,
-      iconLeft: H,
-      iconRight: X,
-      valid: w,
-      invalid: C,
-      dirty: T,
-      focus: f,
-      floating: M
-    }), ee = computed(
-      () => e.searchable ? ie.value : e.options
-    ), { getOptionLabel: te, getOptionValue: Q } = useOptions(e), ie = computed(() => {
-      var A;
-      return (A = e.options) == null ? void 0 : A.filter((L) => te(L).toLowerCase().includes(a.value.toLowerCase().trim()));
-    }), oe = computed(() => {
-      let A = [];
-      return Array.isArray(e.modelValue) ? A = e.modelValue : e.modelValue && (A = [e.modelValue]), e.options.filter(
-        (L) => A.includes(Q(L))
-      );
-    }), se = computed(() => oe.value.map((A) => te(A)).join(e.separator));
-    onClickOutside(i, () => {
-      i.value.open = !1;
+    const f = ref(!1), g = () => {
+      e.disabled || e.readonly || (f.value = !f.value);
+    }, k = () => {
+      e.disabled || e.readonly || f.value || (f.value = !0);
+    }, A = () => {
+      e.disabled || e.readonly || !f.value || (f.value = !1);
+    };
+    watch(f, (_) => {
+      T.value && nextTick(() => {
+        if (_) {
+          u.value && u.value.focus();
+          return;
+        }
+        n.value = "";
+      });
     });
-    function le(A) {
-      const L = A.target;
-      c.value = L.open;
-    }
-    function W(A) {
-      i.value && !e.multiple && (i.value.open = !1), s("update:modelValue", A);
+    const {
+      id: b,
+      icon: S,
+      iconPosition: I,
+      modifiers: B,
+      disabled: E,
+      readonly: O,
+      loading: L,
+      valid: K,
+      invalid: ee,
+      floating: P,
+      searchable: T
+    } = toRefs(e), U = useUniqueId(b), te = computed(() => `${U.value}-hint`), re = computed(() => `${U.value}-dropdown`), ie = computed(() => `${U.value}-search`), C = computed(() => `${U.value}-label`), { hasIcon: oe, hasIconBefore: fe, hasIconAfter: se } = useComponentIcon(
+      S,
+      I
+    ), he = computed(() => !isEmpty(e.modelValue)), z = computed(() => E.value || O.value ? -1 : e.tabindex), R = useBemModifiers(
+      "vv-select",
+      B,
+      computed(() => ({
+        disabled: E.value,
+        loading: L.value,
+        readonly: O.value,
+        "icon-before": Boolean(fe.value),
+        "icon-after": Boolean(se.value),
+        valid: K.value,
+        invalid: ee.value,
+        dirty: he.value,
+        focus: p.value,
+        floating: P.value
+      }))
+    ), Y = computed(
+      () => e.searchable ? m.value : e.options
+    ), { getOptionLabel: ae, getOptionValue: me, getOptionDisabled: pe } = useOptions(e), m = computed(() => {
+      var _;
+      return (_ = e.options) == null ? void 0 : _.filter((J) => ae(J).toLowerCase().includes(r.value.toLowerCase().trim()));
+    });
+    function M(_) {
+      return Array.isArray(e.modelValue) ? contains(_, e.modelValue) || contains(me(_), e.modelValue) : equals(_, e.modelValue) || equals(me(_), e.modelValue);
     }
-    const P = computed(() => ({
-      name: e.name,
-      options: ee.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
-    })), j = computed(() => ({
-      id: p.value,
+    const ue = computed(() => {
+      let _ = [];
+      return Array.isArray(e.modelValue) ? _ = e.modelValue : e.modelValue && (_ = [e.modelValue]), e.options.filter(
+        (J) => _.includes(me(J))
+      );
+    }), ye = computed(() => ue.value.map((_) => ae(_)).join(e.separator));
+    watch(ue, () => {
+      !e.multiple && e.autoClose && A();
+    });
+    const He = () => {
+      e.autoOpen ? k() : g();
+    }, Ee = (_) => {
+      var $e;
+      if (e.disabled || e.readonly)
+        return;
+      const J = me(_);
+      let H = J;
+      if (e.multiple)
+        if (Array.isArray(e.modelValue)) {
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && (($e = e.modelValue) == null ? void 0 : $e.length) >= e.maxValues && !contains(J, e.modelValue))
+            return;
+          H = contains(J, e.modelValue) ? removeFromList(J, e.modelValue) : [...e.modelValue, J];
+        } else
+          H = [J];
+      else
+        e.unselectable && J === e.modelValue && (H = void 0);
+      a("update:modelValue", H);
+    }, D = computed(() => ({
+      id: U.value,
       name: e.name,
-      tabindex: G.value,
-      valid: w.value,
+      tabindex: z.value,
+      valid: K.value,
       validLabel: e.validLabel,
-      invalid: C.value,
+      invalid: ee.value,
       invalidLabel: e.invalidLabel,
       hintLabel: e.hintLabel,
-      loading: V.value,
+      loading: L.value,
       loadingLabel: e.loadingLabel,
-      disabled: y.value,
-      readonly: v.value,
+      disabled: E.value,
+      readonly: O.value,
       modifiers: e.modifiers,
-      options: ee.value,
+      options: Y.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -1348,142 +2154,263 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
       label: e.label,
       placeholder: e.placeholder,
       modelValue: e.modelValue
+    })), le = computed(() => ({
+      id: re.value,
+      reference: c.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: T.value ? !1 : e.autofocusFirst,
+      triggerWidth: e.triggerWidth,
+      modifiers: e.dropdownModifiers
+    })), we = computed(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue
     }));
-    return (A, L) => A.native ? (m(), D(Ro, O({ key: 1 }, t(j), {
-      "onUpdate:modelValue": L[4] || (L[4] = (z) => s("update:modelValue", z))
-    }), null, 16)) : (m(), _("div", {
+    return onKeyStroke([" ", "Enter"], (_) => {
+      e.autoOpen || !f.value && p.value && (_.preventDefault(), _.stopImmediatePropagation(), g());
+    }), (_, J) => _.native ? (d(), W(ia, G({ key: 1 }, t(D), {
+      "onUpdate:modelValue": J[2] || (J[2] = (H) => a("update:modelValue", H))
+    }), null, 16)) : (d(), y("div", {
       key: 0,
-      id: t(p),
-      class: U(t(J))
+      id: t(U),
+      class: Z(t(R))
     }, [
-      A.label ? (m(), _("label", {
+      _.label ? (d(), y("label", {
         key: 0,
-        id: `${t(p)}-label`,
-        for: A.searchable && t(c) ? `${t(p)}-input` : void 0
-      }, B(A.label), 9, To)) : I("", !0),
-      R("details", {
-        ref_key: "dropdown",
-        ref: i,
-        class: "vv-select__wrapper",
-        onClick: L[2] || (L[2] = (z) => t(y) || t(v) ? z.preventDefault() : null),
-        onKeyup: L[3] || (L[3] = Ne((z) => t(i).open = !1, ["esc"])),
-        onToggle: le
+        id: t(C),
+        for: t(T) ? t(ie) : void 0
+      }, x(_.label), 9, da)) : w("", !0),
+      N("div", {
+        ref_key: "wrapperEl",
+        ref: c,
+        class: "vv-select__wrapper"
       }, [
-        R("summary", {
-          class: "vv-select__input",
-          tabindex: t(G),
-          onKeyup: L[1] || (L[1] = Ne((z) => A.searchable ? z.preventDefault() : null, ["space"]))
-        }, [
-          k(A.$slots, "before", {}, () => [
-            t(H) ? (m(), D(x, O({
-              key: 0,
-              class: "vv-select__icon-left"
-            }, t($)), null, 16)) : I("", !0)
+        de(kt, G({
+          modelValue: t(f),
+          "onUpdate:modelValue": J[1] || (J[1] = (H) => Ce(f) ? f.value = H : null)
+        }, t(le), { role: "listbox" }), Rt({
+          default: ve(({ aria: H }) => [
+            _.$slots.before ? (d(), y("div", va, [
+              $(_.$slots, "before", j(F(t(we))))
+            ])) : w("", !0),
+            N("div", pa, [
+              t(fe) ? (d(), W(Q, G({
+                key: 0,
+                class: "vv-select__icon"
+              }, t(oe)), null, 16)) : w("", !0),
+              N("div", G({
+                ref_key: "inputEl",
+                ref: i
+              }, H, {
+                "aria-labelledby": t(C),
+                class: "vv-select__input",
+                role: "combobox",
+                tabindex: t(z),
+                onClickPassive: He
+              }), [
+                $(_.$slots, "value", j(F({ selectedOptions: t(ue), onInput: Ee })), () => [
+                  t(ye) ? (d(), y(ne, { key: 0 }, [
+                    _.badges ? (d(!0), y(ne, { key: 1 }, ke(t(ue), ($e, Xe) => (d(), W(co, {
+                      key: Xe,
+                      modifiers: _.badgeModifiers,
+                      class: "vv-select__badge"
+                    }, {
+                      default: ve(() => [
+                        X(x(t(ae)($e)) + " ", 1),
+                        _.unselectable && !t(O) && !t(E) ? (d(), y("button", {
+                          key: 0,
+                          "aria-label": _.deselectLabel,
+                          onClick: it((rl) => Ee($e), ["stop"])
+                        }, [
+                          de(Q, { name: "close" })
+                        ], 8, ma)) : w("", !0)
+                      ]),
+                      _: 2
+                    }, 1032, ["modifiers"]))), 128)) : (d(), y(ne, { key: 0 }, [
+                      X(x(t(ye)), 1)
+                    ], 64))
+                  ], 64)) : (d(), y(ne, { key: 1 }, [
+                    X(x(_.placeholder), 1)
+                  ], 64))
+                ])
+              ], 16, fa),
+              t(se) ? (d(), W(Q, G({
+                key: 1,
+                class: "vv-select__icon vv-select__icon-after"
+              }, t(oe)), null, 16)) : w("", !0)
+            ]),
+            _.$slots.after ? (d(), y("div", ba, [
+              $(_.$slots, "after", j(F(t(we))))
+            ])) : w("", !0)
           ]),
-          A.searchable && t(c) ? ve((m(), _("input", {
-            key: 0,
-            id: `${t(p)}-input`,
-            ref_key: "inputSearch",
-            ref: r,
-            "onUpdate:modelValue": L[0] || (L[0] = (z) => be(u) ? u.value = z : null),
-            role: "combobox",
-            type: "search",
-            placeholder: A.searchPlaceholder
-          }, null, 8, Mo)), [
-            [Ke, t(u)]
-          ]) : (m(), _(de, { key: 1 }, [
-            q(B(t(se) || A.placeholder), 1)
-          ], 64)),
-          k(A.$slots, "after", {}, () => [
-            t(X) ? (m(), D(x, O({
-              key: 0,
-              class: "vv-select__icon-right"
-            }, t($)), null, 16)) : I("", !0)
-          ])
-        ], 40, Lo),
-        Z(Vo, O({
-          id: `${t(p)}-dropdown`
-        }, t(P), { "onUpdate:modelValue": W }), null, 16, ["id"])
-      ], 544),
-      Z(t(l), { class: "vv-select__hint" })
-    ], 10, Do));
+          items: ve(() => [
+            (d(!0), y(ne, null, ke(t(m), (H, $e) => (d(), W(Ct, {
+              key: $e,
+              class: Z(["vv-dropdown-action", {
+                disabled: t(pe)(H),
+                selected: M(H),
+                "vv-dropdown-action--unselectable": _.unselectable && M(H)
+              }]),
+              tabindex: t(pe)(H) ? -1 : 0,
+              "aria-selected": M(H),
+              "aria-disabled": t(pe)(H),
+              onClickPassive: (Xe) => Ee(H)
+            }, {
+              default: ve(() => [
+                $(_.$slots, "option", j(F({
+                  option: H,
+                  selectedOptions: t(ue),
+                  selected: M(H),
+                  disabled: t(pe)(H)
+                })), () => [
+                  X(x(t(ae)(H)) + " ", 1),
+                  N("span", ha, [
+                    M(H) ? (d(), y(ne, { key: 0 }, [
+                      X(x(_.unselectable ? _.pressToDeselectLabel : _.selectedLabel), 1)
+                    ], 64)) : t(pe)(H) ? w("", !0) : (d(), y(ne, { key: 1 }, [
+                      X(x(_.pressToSelectLabel), 1)
+                    ], 64))
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["tabindex", "class", "aria-selected", "aria-disabled", "onClickPassive"]))), 128))
+          ]),
+          _: 2
+        }, [
+          t(T) ? {
+            name: "before",
+            fn: ve(() => [
+              t(T) ? Se((d(), y("input", {
+                key: 0,
+                id: t(ie),
+                ref_key: "inputSearchEl",
+                ref: u,
+                "onUpdate:modelValue": J[0] || (J[0] = (H) => Ce(n) ? n.value = H : null),
+                "aria-autocomplete": "list",
+                "aria-controls": t(re),
+                "aria-labelledby": t(C),
+                "aria-describedby": t(te),
+                autocomplete: "off",
+                spellcheck: "false",
+                type: "search",
+                class: "vv-dropdown__search",
+                placeholder: _.searchPlaceholder
+              }, null, 8, ca)), [
+                [qe, t(f)],
+                [ct, t(n)]
+              ]) : w("", !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["modelValue"])
+      ], 512),
+      de(t(l), {
+        id: t(te),
+        class: "vv-select__hint"
+      }, null, 8, ["id"])
+    ], 10, ua));
   }
-}), Ho = ["open", "close", "update:modelValue"], xo = {
-  id: { type: String, required: !0 },
+}), ga = ["open", "close", "update:modelValue"], _a = {
+  ...Ne,
+  /**
+   * Dialog title
+   */
   title: String,
+  /**
+   * Show / hide dialog programmatically
+   */
   modelValue: Boolean,
+  /**
+   * Dialog transition
+   */
   transition: { type: String, default: "fade-block" },
+  /**
+   * Dialog size
+   */
   size: String,
+  /**
+   * Close dialog on click outside
+   */
   autoClose: { type: Boolean, default: !0 }
-}, Go = {
+}, Sa = {
   key: 0,
   class: "vv-dialog__header"
-}, Uo = ["onClick"], Fo = { class: "vv-dialog__content" }, Ko = {
+}, Va = { class: "vv-dialog__content" }, $a = {
   key: 1,
   class: "vv-dialog__footer"
-}, Wo = {
+}, ka = {
   name: "VvDialog"
-}, Ts = /* @__PURE__ */ N({
-  ...Wo,
-  props: xo,
-  emits: Ho,
-  setup(o, { emit: s }) {
-    const e = o, n = useVModel(e, "modelValue", s), l = ref(!0), i = ref(null), r = computed(() => {
-      const { id: c } = e;
+}, Sl = /* @__PURE__ */ q({
+  ...ka,
+  props: _a,
+  emits: ga,
+  setup(o, { emit: a }) {
+    const e = o, s = useVModel(e, "modelValue", a), l = ref(!0), i = ref(null), u = computed(() => {
+      const { id: r } = e;
       return {
-        id: c,
+        id: r,
         open: l.value
       };
-    }), f = computed(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), p = computed(() => `vv-dialog--${e.transition}`), u = {
+    }), c = computed(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), p = computed(() => `vv-dialog--${e.transition}`), v = {
       "before-enter": () => {
-        l.value = !0, s("open");
+        l.value = !0, a("open");
       },
       "after-leave": () => {
-        l.value = !1, s("close");
+        l.value = !1, a("close");
       }
     };
     onClickOutside(i, () => {
-      e.autoClose && (n.value = !1);
+      e.autoClose && (s.value = !1);
     });
-    function a() {
-      n.value = !1;
+    function n() {
+      s.value = !1;
     }
-    return (c, d) => (m(), D(mt, O({ name: t(p) }, ft(u)), {
-      default: ge(() => [
-        ve(R("dialog", O(t(r), { class: t(f) }), [
-          R("article", {
+    return onKeyStroke("Escape", (r) => {
+      s.value && (r.preventDefault(), n());
+    }), (r, f) => (d(), W(dt, G({ name: t(p) }, Tt(v)), {
+      default: ve(() => [
+        Se(N("dialog", G(t(u), { class: t(c) }), [
+          N("article", {
             ref_key: "modalWrapper",
             ref: i,
             class: "vv-dialog__wrapper"
           }, [
-            c.$slots.header || c.title ? (m(), _("header", Go, [
-              k(c.$slots, "header", {}, () => [
-                q(B(c.title) + " ", 1),
-                R("button", {
+            r.$slots.header || r.title ? (d(), y("header", Sa, [
+              $(r.$slots, "header", {}, () => [
+                X(x(r.title) + " ", 1),
+                N("button", {
                   type: "button",
                   "aria-label": "Close",
                   class: "vv-dialog__close",
-                  onClick: Be(a, ["prevent"])
+                  onClickPassive: n
                 }, [
-                  Z(x, { name: "close" })
-                ], 8, Uo)
+                  de(Q, { name: "close" })
+                ], 32)
               ])
-            ])) : I("", !0),
-            R("div", Fo, [
-              k(c.$slots, "default")
+            ])) : w("", !0),
+            N("div", Va, [
+              $(r.$slots, "default")
             ]),
-            c.$slots.footer ? (m(), _("footer", Ko, [
-              k(c.$slots, "footer")
-            ])) : I("", !0)
+            r.$slots.footer ? (d(), y("footer", $a, [
+              $(r.$slots, "footer")
+            ])) : w("", !0)
           ], 512)
         ], 16), [
-          [bt, t(n)]
+          [qe, t(s)]
         ])
       ]),
       _: 3
     }, 16, ["name"]));
   }
-}), S = {
+}), V = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -1497,61 +2424,121 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, ue = {
+}, _e = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, qo = ["update:modelValue", "focus", "blur", "keyup"], jo = {
-  ...Je,
+}, Ca = ["update:modelValue", "focus", "blur", "keyup"], Aa = {
+  ...gt,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   modelValue: [String, Number],
+  /**
+   * Type of form control
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+   */
   type: {
     type: String,
-    default: S.TEXT,
-    validator: (o) => Object.values(S).includes(o)
+    default: V.TEXT,
+    validator: (o) => Object.values(V).includes(o)
   },
+  /**
+   * Minimum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
   min: [Number, Date, String],
+  /**
+   * Maximum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
   max: [Number, Date, String],
+  /**
+   * Incremental values that are valid
+   * Available for input types: date, month, week, time, datetime-local and number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+   */
   step: { type: [String, Number], default: 1 },
+  /**
+   * Pattern the value must match to be valid
+   * Available for input types: text, search, url, tel, email and password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
   pattern: String,
+  /**
+   * Whether to allow multiple values
+   * Available for input type email
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
   multiple: Boolean,
+  /**
+   * VvIcon name for show password button
+   * @see VVIcon
+   */
   iconShowPassword: {
     type: String,
-    default: ue.PASSWORD_SHOW
+    default: _e.PASSWORD_SHOW
   },
+  /**
+   * VvIcon name for hide password button
+   * @see VVIcon
+   */
   iconHidePassword: {
     type: String,
-    default: ue.PASSWORD_HIDE
+    default: _e.PASSWORD_HIDE
   },
+  /**
+   * VvIcon name for clear button
+   * @see VVIcon
+   */
   iconClear: {
     type: String,
-    default: ue.SEARCH
+    default: _e.SEARCH
   },
+  /**
+   * Label for step up button
+   */
   labelStepUp: {
     type: String,
     default: "Increase value"
   },
+  /**
+   * Label for step down button
+   */
   labelStepDown: {
     type: String,
     default: "Decrease value"
   },
+  /**
+   * Label for show password button
+   */
   labelShowPassword: {
     type: String,
     default: "Show password"
   },
+  /**
+   * Label for hide password button
+   */
   labelHidePassword: {
     type: String,
     default: "Hide password"
   },
+  /**
+   * Label for clear button
+   */
   labelClear: {
     type: String,
     default: "Clear"
   }
-}, xe = defineComponent({
+}, st = defineComponent({
   components: {
-    VvIcon: x
+    VvIcon: Q
   },
   props: {
     disabled: {
@@ -1568,29 +2555,29 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
     },
     iconShow: {
       type: String,
-      default: ue.PASSWORD_SHOW
+      default: _e.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: ue.PASSWORD_HIDE
+      default: _e.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(o, { emit: s }) {
-    const e = ref(!1), n = computed(
+  setup(o, { emit: a }) {
+    const e = ref(!1), s = computed(
       () => e.value ? o.iconHide : o.iconShow
     );
     function l(i) {
-      i == null || i.stopPropagation(), o.disabled || (e.value = !e.value, s("toggle-password", e.value));
+      i == null || i.stopPropagation(), o.disabled || (e.value = !e.value, a("toggle-password", e.value));
     }
     return {
       active: e,
-      activeIcon: n,
+      activeIcon: s,
       onClick: l
     };
   },
   render() {
-    const o = h(x, {
+    const o = h(Q, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
@@ -1606,9 +2593,9 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
       o
     );
   }
-}), Re = defineComponent({
+}), Ue = defineComponent({
   components: {
-    VvIcon: x
+    VvIcon: Q
   },
   props: {
     disabled: {
@@ -1625,12 +2612,12 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
     }
   },
   emits: ["step-up", "step-down"],
-  setup(o, { emit: s }) {
+  setup(o, { emit: a }) {
     const e = computed(() => o.mode === "up");
     return {
       isUp: e,
       onClick: (l) => {
-        l == null || l.stopPropagation(), o.disabled || s(e.value ? "step-up" : "step-down");
+        l == null || l.stopPropagation(), o.disabled || a(e.value ? "step-up" : "step-down");
       }
     };
   },
@@ -1645,9 +2632,9 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
       onClick: this.onClick
     });
   }
-}), Ge = defineComponent({
+}), nt = defineComponent({
   components: {
-    VvIcon: x
+    VvIcon: Q
   },
   props: {
     disabled: {
@@ -1664,16 +2651,16 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
     }
   },
   emits: ["clear"],
-  setup(o, { emit: s }) {
-    function e(n) {
-      n == null || n.stopPropagation(), o.disabled || s("clear");
+  setup(o, { emit: a }) {
+    function e(s) {
+      s == null || s.stopPropagation(), o.disabled || a("clear");
     }
     return {
       onClick: e
     };
   },
   render() {
-    const o = h(x, {
+    const o = h(Q, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
@@ -1690,47 +2677,47 @@ const ao = ["for"], no = ["id", "name", "disabled", "value", "tabindex", "aria-i
     );
   }
 });
-function Oe(o, s) {
+function We(o, a) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: x,
-      VvInputPasswordAction: xe,
-      VvInputStepAction: Re,
-      VvInputClearAction: Ge
+      VvIcon: Q,
+      VvInputPasswordAction: st,
+      VvInputStepAction: Ue,
+      VvInputClearAction: nt
     },
     setup() {
       return {
-        isDisabled: computed(() => s.disabled || s.readonly),
-        labelStepUp: s.labelStepUp,
-        labelStepDown: s.labelStepDown,
-        labelShowPassword: s.labelShowPassword,
-        labelHidePassword: s.labelHidePassword,
-        labelClear: s.labelClear,
-        iconShowPassword: s.iconShowPassword,
-        iconHidePassword: s.iconHidePassword
+        isDisabled: computed(() => a.disabled || a.readonly),
+        labelStepUp: a.labelStepUp,
+        labelStepDown: a.labelStepDown,
+        labelShowPassword: a.labelShowPassword,
+        labelHidePassword: a.labelHidePassword,
+        labelClear: a.labelClear,
+        iconShowPassword: a.iconShowPassword,
+        iconHidePassword: a.iconHidePassword
       };
     },
     render() {
       let e = null;
       switch (o) {
-        case S.SEARCH: {
-          const { onClear: n } = this.$attrs;
+        case V.SEARCH: {
+          const { onClear: s } = this.$attrs;
           e = [
-            h(Ge, {
+            h(nt, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: n
+              onClear: s
             })
           ];
           break;
         }
-        case S.PASSWORD: {
-          const { onTogglePassword: n } = this.$attrs;
+        case V.PASSWORD: {
+          const { onTogglePassword: s } = this.$attrs;
           e = [
-            h(xe, {
+            h(st, {
               disabled: this.isDisabled,
-              onTogglePassword: n,
+              onTogglePassword: s,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -1739,21 +2726,21 @@ function Oe(o, s) {
           ];
           break;
         }
-        case S.NUMBER: {
-          const { onStepUp: n, onStepDown: l } = this.$attrs;
+        case V.NUMBER: {
+          const { onStepUp: s, onStepDown: l } = this.$attrs;
           e = [
-            h(Re, {
+            h(Ue, {
               mode: "up",
-              disabled: this.isDisabled || s.max !== void 0 && s.modelValue === s.max,
+              disabled: this.isDisabled || a.max !== void 0 && a.modelValue === a.max,
               label: this.labelStepUp,
-              onStepUp: n,
+              onStepUp: s,
               onStepDown: l
             }),
-            h(Re, {
+            h(Ue, {
               mode: "down",
-              disabled: this.isDisabled || s.min !== void 0 && s.modelValue === s.min,
+              disabled: this.isDisabled || a.min !== void 0 && a.modelValue === a.min,
               label: this.labelStepDown,
-              onStepUp: n,
+              onStepUp: s,
               onStepDown: l
             })
           ];
@@ -1764,378 +2751,454 @@ function Oe(o, s) {
     }
   };
 }
-const zo = ["for"], Xo = { class: "vv-input-text__wrapper" }, Yo = ["id"], Jo = {
+const wa = ["for"], Ea = { class: "vv-input-text__wrapper" }, Ia = {
   key: 0,
+  class: "vv-input-text__input-before"
+}, Pa = { class: "vv-input-text__inner" }, Oa = ["id"], Da = {
+  key: 1,
+  class: "vv-input-text__input-after"
+}, Ba = {
+  key: 2,
   class: "vv-input-text__limit"
-}, Qo = {
+}, Ra = {
   name: "VvInputText"
-}, Ls = /* @__PURE__ */ N({
-  ...Qo,
-  props: jo,
-  emits: qo,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), l = ref(), {
-      icon: i,
-      iconPosition: r,
-      label: f,
-      modelValue: p,
-      count: u,
-      valid: a,
-      invalid: c,
-      loading: d
-    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+}, Vl = /* @__PURE__ */ q({
+  ...Ra,
+  props: Aa,
+  emits: Ca,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), l = ref(), {
+      id: i,
+      icon: u,
+      iconPosition: c,
+      label: p,
+      modelValue: v,
+      count: n,
+      valid: r,
+      invalid: f,
+      loading: g
+    } = toRefs(e), k = useUniqueId(i), A = computed(() => `${k.value}-hint`), b = computed(
       () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), v = useDebouncedInput(p, s, e.debounce), { focused: V } = useComponentFocus(l, s), w = useElementVisibility(l);
-    watch(w, (E) => {
-      E && e.autofocus && (V.value = !0);
+    ), S = useDebouncedInput(v, a, e.debounce), { focused: I } = useComponentFocus(l, a), B = useElementVisibility(l);
+    watch(B, (D) => {
+      D && e.autofocus && (I.value = !0);
     });
-    const C = ref(!1), M = computed(() => e.type === S.PASSWORD), $ = () => {
-      C.value = !C.value;
-    }, H = computed(
-      () => e.type === S.TIME || e.type === S.DATETIME_LOCAL || e.type === S.DATE || e.type === S.WEEK || e.type === S.MONTH
-    ), X = computed(() => e.type === S.NUMBER), T = () => {
-      le.value && (l.value.stepUp(), v.value = unref(l).value);
-    }, G = () => {
-      le.value && (l.value.stepDown(), v.value = unref(l).value);
-    }, J = computed(() => e.type === S.SEARCH), ee = () => {
-      v.value = void 0;
-    }, { hasIconLeft: te, hasIconRight: Q, hasIcon: ie } = useComponentIcon(
-      i,
-      r
+    const E = ref(!1), O = computed(() => e.type === V.PASSWORD), L = () => {
+      E.value = !E.value;
+    }, K = computed(
+      () => e.type === V.TIME || e.type === V.DATETIME_LOCAL || e.type === V.DATE || e.type === V.WEEK || e.type === V.MONTH
+    ), ee = computed(() => e.type === V.NUMBER), P = () => {
+      se.value && (l.value.stepUp(), S.value = unref(l).value);
+    }, T = () => {
+      se.value && (l.value.stepDown(), S.value = unref(l).value);
+    }, U = computed(() => e.type === V.SEARCH), te = () => {
+      S.value = void 0;
+    }, { hasIcon: re, hasIconBefore: ie, hasIconAfter: C } = useComponentIcon(
+      u,
+      c
     ), oe = computed(() => {
       switch (e.type) {
-        case S.COLOR:
-          return { name: ue.COLOR };
-        case S.DATE:
-        case S.DATETIME_LOCAL:
-        case S.WEEK:
-        case S.MONTH:
-          return { name: ue.DATE };
-        case S.TIME:
-          return { name: ue.TIME };
+        case V.COLOR:
+          return { name: _e.COLOR };
+        case V.DATE:
+        case V.DATETIME_LOCAL:
+        case V.WEEK:
+        case V.MONTH:
+          return { name: _e.DATE };
+        case V.TIME:
+          return { name: _e.TIME };
         default:
           return "";
       }
-    }), { formatted: se } = useTextCount(v, {
+    }), { formatted: fe } = useTextCount(S, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), le = computed(() => !e.disabled && !e.readonly), W = computed(
-      () => le.value ? e.tabindex : -1
-    ), P = computed(() => !isEmpty(p)), j = computed(() => {
-      if (c.value === !0)
+    }), se = computed(() => !e.disabled && !e.readonly), he = computed(
+      () => se.value ? e.tabindex : -1
+    ), z = computed(() => !isEmpty(v)), R = computed(() => {
+      if (f.value === !0)
         return !0;
-      if (a.value === !0)
+      if (r.value === !0)
         return !1;
-    }), { bemCssClasses: A } = useBemModifiers("vv-input-text", {
-      modifiers: e.modifiers,
-      valid: a,
-      invalid: c,
-      loading: d,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      iconLeft: te,
-      iconRight: Q.value || !isEmpty(oe),
-      floating: e.floating && !isEmpty(e.label),
-      dirty: P,
-      focus: V
-    }), L = computed(() => {
-      const E = (() => M.value && C.value || H.value && !P.value && !V.value ? S.TEXT : e.type)(), K = {
-        type: E,
+    }), { modifiers: Y } = toRefs(e), ae = useBemModifiers(
+      "vv-input-text",
+      Y,
+      computed(() => ({
+        valid: r.value,
+        invalid: f.value,
+        loading: g.value,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "icon-before": ie.value,
+        "icon-after": C.value || !isEmpty(oe),
+        floating: e.floating && !isEmpty(e.label),
+        dirty: z.value,
+        focus: I.value
+      }))
+    ), me = computed(() => {
+      const D = (() => O.value && E.value || K.value && !z.value && !I.value ? V.TEXT : e.type)(), le = {
+        type: D,
         name: e.name,
-        tabindex: W.value,
+        tabindex: he.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         autocomplete: e.autocomplete,
-        "aria-invalid": j.value,
-        "aria-describedby": !Me.value && st.value ? g.value : void 0,
-        "aria-errormessage": Me.value ? g.value : void 0
+        "aria-invalid": R.value,
+        "aria-describedby": !ue.value && M.value ? A.value : void 0,
+        "aria-errormessage": ue.value ? A.value : void 0
       };
-      return (E === S.DATE || E === S.MONTH || E === S.WEEK || E === S.TIME || E === S.DATETIME_LOCAL || E === S.NUMBER) && (K.step = e.step, K.max = String(e.max), K.min = String(e.min)), (E === S.TEXT || E === S.SEARCH || E === S.URL || E === S.TEL || E === S.EMAIL || E === S.PASSWORD || E === S.NUMBER) && (K.placeholder = y.value), (E === S.TEXT || E === S.SEARCH || E === S.URL || E === S.TEL || E === S.EMAIL || E === S.PASSWORD) && (K.minlength = e.minlength, K.maxlength = e.maxlength, K.pattern = e.pattern), E === S.EMAIL && (K.multiple = e.multiple), K;
-    }), z = computed(() => ({
+      return (D === V.DATE || D === V.MONTH || D === V.WEEK || D === V.TIME || D === V.DATETIME_LOCAL || D === V.NUMBER) && (le.step = e.step, le.max = String(e.max), le.min = String(e.min)), (D === V.TEXT || D === V.SEARCH || D === V.URL || D === V.TEL || D === V.EMAIL || D === V.PASSWORD || D === V.NUMBER) && (le.placeholder = b.value), (D === V.TEXT || D === V.SEARCH || D === V.URL || D === V.TEL || D === V.EMAIL || D === V.PASSWORD) && (le.minlength = e.minlength, le.maxlength = e.maxlength, le.pattern = e.pattern), D === V.EMAIL && (le.multiple = e.multiple), le;
+    }), pe = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
-      togglePassword: $,
-      stepUp: T,
-      stepDown: G,
-      clear: ee
-    })), { HintSlot: ot, hasHint: st, hasInvalid: Me } = pe(e, n), lt = Oe(
-      S.PASSWORD,
+      togglePassword: L,
+      stepUp: P,
+      stepDown: T,
+      clear: te
+    })), { HintSlot: m, hasHint: M, hasInvalid: ue } = Ve(e, s), ye = We(
+      V.PASSWORD,
       e
-    ), at = Oe(
-      S.NUMBER,
+    ), He = We(
+      V.NUMBER,
       e
-    ), nt = Oe(
-      S.SEARCH,
+    ), Ee = We(
+      V.SEARCH,
       e
     );
-    return (E, K) => (m(), _("div", {
-      class: U(t(A))
+    return (D, le) => (d(), y("div", {
+      class: Z(t(ae))
     }, [
-      t(f) ? (m(), _("label", {
+      t(p) ? (d(), y("label", {
         key: 0,
-        for: t(b),
+        for: t(k),
         class: "vv-input-text__label"
-      }, B(t(f)), 9, zo)) : I("", !0),
-      R("div", Xo, [
-        k(E.$slots, "before", F(Y(t(z))), () => [
-          t(te) ? (m(), D(x, O({
+      }, x(t(p)), 9, wa)) : w("", !0),
+      N("div", Ea, [
+        D.$slots.before ? (d(), y("div", Ia, [
+          $(D.$slots, "before", j(F(t(pe))))
+        ])) : w("", !0),
+        N("div", Pa, [
+          t(ie) ? (d(), W(Q, G({
             key: 0,
-            class: "vv-input-text__icon-left"
-          }, t(ie)), null, 16)) : I("", !0)
-        ]),
-        ve(R("input", O({
-          id: t(b),
-          ref_key: "input",
-          ref: l,
-          "onUpdate:modelValue": K[0] || (K[0] = (Ee) => be(v) ? v.value = Ee : null)
-        }, t(L), {
-          onKeyup: K[1] || (K[1] = (Ee) => s("keyup", Ee))
-        }), null, 16, Yo), [
-          [ht, t(v)]
-        ]),
-        k(E.$slots, "after", F(Y(t(z))), () => [
-          t(Q) || t(oe) ? (m(), D(x, F(O({ key: 0 }, t(Q) ? t(ie) : t(oe))), null, 16)) : t(M) ? (m(), D(t(lt), {
+            class: "vv-input-text__icon"
+          }, t(re)), null, 16)) : w("", !0),
+          Se(N("input", G({
+            id: t(k),
+            ref_key: "input",
+            ref: l,
+            "onUpdate:modelValue": le[0] || (le[0] = (we) => Ce(S) ? S.value = we : null)
+          }, t(me), {
+            onKeyup: le[1] || (le[1] = (we) => a("keyup", we))
+          }), null, 16, Oa), [
+            [Mt, t(S)]
+          ]),
+          t(C) || t(oe) ? (d(), W(Q, G({
             key: 1,
-            onTogglePassword: $
-          })) : t(X) ? (m(), D(t(at), {
+            class: "vv-input-text__icon vv-input-text__icon-after"
+          }, t(C) ? t(re) : t(oe)), null, 16)) : t(O) ? (d(), W(t(ye), {
             key: 2,
-            onStepUp: T,
-            onStepDown: G
-          })) : t(J) ? (m(), D(t(nt), {
+            onTogglePassword: L
+          })) : t(ee) ? (d(), W(t(He), {
             key: 3,
-            onClear: ee
-          })) : I("", !0)
+            onStepUp: P,
+            onStepDown: T
+          })) : t(U) ? (d(), W(t(Ee), {
+            key: 4,
+            onClear: te
+          })) : w("", !0)
         ]),
-        t(u) ? (m(), _("span", Jo, [
-          k(E.$slots, "count", F(Y(t(z))), () => [
-            q(B(t(se)), 1)
+        D.$slots.after ? (d(), y("div", Da, [
+          $(D.$slots, "after", j(F(t(pe))))
+        ])) : w("", !0),
+        t(n) ? (d(), y("span", Ba, [
+          $(D.$slots, "count", j(F(t(pe))), () => [
+            X(x(t(fe)), 1)
           ])
-        ])) : I("", !0)
+        ])) : w("", !0)
       ]),
-      Z(t(ot), {
-        id: t(g),
+      de(t(m), {
+        id: t(A),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Zo = {
-  ...re,
+}), Ta = {
+  ...ce,
+  /**
+   * Progress value
+   * This attribute specifies how much of the task that has been completed.
+   * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+   * If there is no value attribute, the progress bar is indeterminate.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+   */
   value: {
     type: [Number, String],
     default: void 0
   },
+  /**
+   * Progress max
+   * This attribute describes how much work the task indicated by the progress element requires.
+   * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+   */
   max: {
     type: [Number, String]
   },
+  /**
+   * Progress aria-label
+   */
   label: {
     type: String,
     required: !0
   }
-}, es = {
+}, Ma = {
   name: "VvProgress"
-}, Ms = /* @__PURE__ */ N({
-  ...es,
-  props: Zo,
+}, $l = /* @__PURE__ */ q({
+  ...Ma,
+  props: Ta,
   setup(o) {
-    const s = o, { value: e, max: n, label: l } = toRefs(s), i = computed(() => s.value === void 0), { bemCssClasses: r } = useBemModifiers("vv-progress", {
-      modifiers: s.modifiers,
-      indeterminate: i
-    });
-    return (f, p) => (m(), _("progress", O({ role: "progressbar" }, {
-      class: t(r),
+    const a = o, { value: e, max: s, label: l } = toRefs(a), i = computed(() => a.value === void 0), { modifiers: u } = toRefs(a), c = useBemModifiers(
+      "vv-progress",
+      u,
+      computed(() => ({ indeterminate: i.value }))
+    );
+    return (p, v) => (d(), y("progress", G({ role: "progressbar" }, {
+      class: t(c),
       ariaLabel: t(l),
-      max: t(n),
+      max: t(s),
       value: t(e)
     }), null, 16));
   }
-}), ts = Qe, os = ["click", "update:modelValue", "change", "blur"];
-function ss(o, s) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: l } = useInjectedGroupState(qe), i = l("modelValue", o, s), r = l("readonly", o), f = l("disabled", o), p = l("valid", o), u = l("invalid", o);
+}), xa = _t, Na = ["click", "update:modelValue", "change", "blur"];
+function La(o, a) {
+  const { id: e } = toRefs(o), { group: s, isInGroup: l, getGroupOrLocalRef: i } = useInjectedGroupState(ft), u = i("modelValue", o, a), c = i("readonly", o), p = i("disabled", o), v = i("valid", o), n = i("invalid", o);
   return {
-    group: e,
-    isInGroup: n,
-    modelValue: i,
-    readonly: r,
-    disabled: f,
-    valid: p,
-    invalid: u
+    // local props
+    id: e,
+    // global props
+    group: s,
+    isInGroup: l,
+    modelValue: u,
+    readonly: c,
+    disabled: p,
+    valid: v,
+    invalid: n
   };
 }
-const ls = ["for"], as = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ns = {
+const Ha = ["for"], Ga = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ua = {
   name: "VvRadio"
-}, rs = /* @__PURE__ */ N({
-  ...ns,
-  props: ts,
-  emits: os,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), { disabled: l, readonly: i, modelValue: r, valid: f, invalid: p } = ss(
-      e,
-      s
-    ), u = computed(() => String(e.id || ne())), a = computed(() => d.value ? -1 : e.tabindex), c = ref(), d = computed(() => l.value || i.value), b = computed(() => {
-      if (p.value === !0)
+}, Wa = /* @__PURE__ */ q({
+  ...Ua,
+  props: xa,
+  emits: Na,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), { id: l, disabled: i, readonly: u, modelValue: c, valid: p, invalid: v } = La(e, a), n = useUniqueId(l), r = computed(() => g.value ? -1 : e.tabindex), f = ref(), g = computed(() => i.value || u.value), k = computed(() => {
+      if (v.value === !0)
         return !0;
-      if (f.value === !0)
+      if (p.value === !0)
         return !1;
-    }), g = computed(
-      () => Array.isArray(r.value) ? contains(e.value, r.value) : equals(e.value, r.value)
-    ), y = computed(
+    }), A = computed(
+      () => Array.isArray(c.value) ? contains(e.value, c.value) : equals(e.value, c.value)
+    ), b = computed(
       () => ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0
-    ), v = computed({
+    ), S = computed({
       get() {
-        return g.value ? y.value : null;
+        return A.value ? b.value : null;
       },
-      set(C) {
-        Array.isArray(r.value) ? r.value = [e.value] : r.value = e.value, s("change", C);
+      set(O) {
+        Array.isArray(c.value) ? c.value = [e.value] : c.value = e.value, a("change", O);
       }
-    }), { bemCssClasses: V } = useBemModifiers("vv-radio", {
-      valid: f,
-      invalid: p,
-      disabled: l,
-      readonly: i
-    }), { HintSlot: w } = pe(e, n);
-    return (C, M) => (m(), _("label", {
-      class: U(t(V)),
-      for: t(u)
+    }), { modifiers: I } = toRefs(e), B = useBemModifiers(
+      "vv-radio",
+      I,
+      computed(() => ({
+        valid: p.value,
+        invalid: v.value,
+        disabled: i.value,
+        readonly: u.value
+      }))
+    ), { HintSlot: E } = Ve(e, s);
+    return (O, L) => (d(), y("label", {
+      class: Z(t(B)),
+      for: t(n)
     }, [
-      ve(R("input", {
-        id: t(u),
+      Se(N("input", {
+        id: t(n),
         ref_key: "input",
-        ref: c,
-        "onUpdate:modelValue": M[0] || (M[0] = ($) => be(v) ? v.value = $ : null),
+        ref: f,
+        "onUpdate:modelValue": L[0] || (L[0] = (K) => Ce(S) ? S.value = K : null),
         type: "radio",
         class: "vv-radio__input",
-        name: C.name,
-        disabled: t(d),
-        value: t(y),
-        tabindex: t(a),
-        "aria-invalid": t(b)
-      }, null, 8, as), [
-        [gt, t(v)]
+        name: O.name,
+        disabled: t(g),
+        value: t(b),
+        tabindex: t(r),
+        "aria-invalid": t(k)
+      }, null, 8, Ga), [
+        [xt, t(S)]
       ]),
-      k(C.$slots, "default", { value: t(r) }, () => [
-        q(B(C.label), 1)
+      $(O.$slots, "default", { value: t(c) }, () => [
+        X(x(O.label), 1)
       ]),
-      Z(t(w), {
+      de(t(E), {
         class: "vv-radio__hint",
-        params: { value: t(r) }
+        params: { value: t(c) }
       }, null, 8, ["params"])
-    ], 10, ls));
+    ], 10, Ha));
   }
-}), is = Ze, us = ["update:modelValue", "change"], ds = ["textContent"], cs = { class: "vv-radio-group__wrapper" }, ps = {
+}), ja = St, Fa = ["update:modelValue", "change"], qa = ["textContent"], Ka = { class: "vv-radio-group__wrapper" }, za = {
   name: "VvRadioGroup"
-}, Ns = /* @__PURE__ */ N({
-  ...ps,
-  props: is,
-  emits: us,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), l = useVModel(e, "modelValue", s), { disabled: i, readonly: r, vertical: f, valid: p, invalid: u } = toRefs(e), a = {
-      key: qe,
+}, kl = /* @__PURE__ */ q({
+  ...za,
+  props: ja,
+  emits: Fa,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), l = useVModel(e, "modelValue", a), { disabled: i, readonly: u, vertical: c, valid: p, invalid: v, modifiers: n } = toRefs(e);
+    useProvideGroupState({
+      key: ft,
       modelValue: l,
       disabled: i,
-      readonly: r,
+      readonly: u,
       valid: p,
-      invalid: u
-    };
-    useProvideGroupState(a);
-    const { getOptionLabel: c, getOptionValue: d } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-radio-group", {
-      disabled: i,
-      readonly: r,
-      horizontal: computed(() => !f.value),
-      valid: p,
-      invalid: u
-    }), g = (v, V) => ({
-      id: `${e.name}_opt${V}`,
+      invalid: v
+    });
+    const { getOptionLabel: r, getOptionValue: f } = useOptions(e), g = useBemModifiers(
+      "vv-radio-group",
+      n,
+      computed(() => ({
+        disabled: i.value,
+        readonly: u.value,
+        horizontal: !c.value,
+        valid: p.value,
+        invalid: v.value
+      }))
+    ), k = (b, S) => ({
+      id: `${e.name}_opt${S}`,
       name: e.name,
-      label: c(v),
-      value: d(v)
-    }), { HintSlot: y } = pe(e, n);
-    return (v, V) => (m(), _("fieldset", {
-      class: U(t(b))
+      label: r(b),
+      value: f(b)
+    }), { HintSlot: A } = Ve(e, s);
+    return (b, S) => (d(), y("fieldset", {
+      class: Z(t(g))
     }, [
-      v.label ? (m(), _("legend", {
+      b.label ? (d(), y("legend", {
         key: 0,
-        textContent: B(v.label)
-      }, null, 8, ds)) : I("", !0),
-      R("div", cs, [
-        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, C) => (m(), D(rs, O({ key: C }, g(w, C)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
+        textContent: x(b.label)
+      }, null, 8, qa)) : w("", !0),
+      N("div", Ka, [
+        b.options.length > 0 ? (d(!0), y(ne, { key: 0 }, ke(b.options, (I, B) => (d(), W(Wa, G({ key: B }, k(I, B)), null, 16))), 128)) : $(b.$slots, "default", { key: 1 })
       ]),
-      Z(t(y), { class: "vv-radio-group__hint" })
+      de(t(A), { class: "vv-radio-group__hint" })
     ], 2));
   }
-}), vs = {
+}), Ya = {
   hard: "hard",
   soft: "soft"
-}, ms = {
+}, Ja = {
   true: !0,
   false: !1,
   default: "default"
-}, fs = ["update:modelValue", "focus", "blur", "keyup"], bs = {
-  ...Je,
+}, Xa = ["update:modelValue", "focus", "blur", "keyup"], Qa = {
+  ...gt,
+  /**
+   * Textarea value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
+   */
   modelValue: String,
+  /**
+   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
+   */
   cols: { type: [String, Number], default: 20 },
+  /**
+   * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+   */
   rows: { type: [String, Number], default: 2 },
-  wrap: { type: String, default: vs.soft },
-  spellcheck: { type: [Boolean, String], default: ms.default },
+  /**
+   * Indicates how the control should wrap the value for form submission.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+   */
+  wrap: { type: String, default: Ya.soft },
+  /**
+   * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+   */
+  spellcheck: { type: [Boolean, String], default: Ja.default },
+  /**
+   * If true, the textarea will be resizable
+   */
   resizable: Boolean
-}, hs = ["for"], gs = { class: "vv-textarea__wrapper" }, ys = ["id"], _s = {
+}, Za = ["for"], el = { class: "vv-textarea__wrapper" }, tl = {
   key: 0,
+  class: "vv-textarea__input-before"
+}, ol = { class: "vv-textarea__inner" }, al = ["id"], ll = {
+  key: 1,
+  class: "vv-textarea__input-after"
+}, sl = {
+  key: 2,
   class: "vv-textarea__limit"
-}, Ss = {
+}, nl = {
   name: "VvTextarea"
-}, Hs = /* @__PURE__ */ N({
-  ...Ss,
-  props: bs,
-  emits: fs,
-  setup(o, { emit: s }) {
-    const e = o, n = useSlots(), l = ref(), {
-      icon: i,
-      iconPosition: r,
-      label: f,
-      modelValue: p,
-      count: u,
-      valid: a,
-      invalid: c,
-      loading: d
-    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+}, Cl = /* @__PURE__ */ q({
+  ...nl,
+  props: Qa,
+  emits: Xa,
+  setup(o, { emit: a }) {
+    const e = o, s = useSlots(), l = ref(), {
+      id: i,
+      icon: u,
+      iconPosition: c,
+      label: p,
+      modelValue: v,
+      count: n,
+      valid: r,
+      invalid: f,
+      loading: g,
+      modifiers: k
+    } = toRefs(e), A = useUniqueId(i), b = computed(() => `${A.value}-hint`), S = computed(
       () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), v = useDebouncedInput(p, s, e.debounce), { hasIcon: V, hasIconLeft: w, hasIconRight: C } = useComponentIcon(
-      i,
-      r
-    ), { focused: M } = useComponentFocus(l, s), $ = useElementVisibility(l);
-    watch($, (W) => {
-      W && e.autofocus && (M.value = !0);
+    ), I = useDebouncedInput(v, a, e.debounce), { hasIcon: B, hasIconBefore: E, hasIconAfter: O } = useComponentIcon(
+      u,
+      c
+    ), { focused: L } = useComponentFocus(l, a), K = useElementVisibility(l);
+    watch(K, (z) => {
+      z && e.autofocus && (L.value = !0);
     });
-    const { formatted: H } = useTextCount(v, {
+    const { formatted: ee } = useTextCount(I, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), X = computed(() => !e.disabled && !e.readonly), T = computed(
-      () => X.value ? e.tabindex : -1
-    ), G = computed(() => !isEmpty(p)), J = computed(() => {
+    }), P = computed(() => !e.disabled && !e.readonly), T = computed(
+      () => P.value ? e.tabindex : -1
+    ), U = computed(() => !isEmpty(v)), te = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.valid === !0)
         return !1;
-    }), { HintSlot: ee, hasHint: te, hasInvalid: Q } = pe(e, n), { bemCssClasses: ie } = useBemModifiers("vv-textarea", {
-      modifiers: e.modifiers,
-      valid: a,
-      invalid: c,
-      loading: d,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      iconLeft: w,
-      iconRight: C,
-      floating: e.floating && !isEmpty(e.label),
-      dirty: G,
-      focused: M,
-      resizable: e.resizable
-    }), oe = computed(
+    }), { HintSlot: re, hasHint: ie, hasInvalid: C } = Ve(e, s), oe = useBemModifiers(
+      "vv-textarea",
+      k,
+      computed(() => ({
+        valid: r.value,
+        invalid: f.value,
+        loading: g.value,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "icon-before": E.value,
+        "icon-after": O.value,
+        floating: e.floating && !isEmpty(e.label),
+        dirty: U.value,
+        focused: L.value,
+        resizable: e.resizable
+      }))
+    ), fe = computed(
       () => ({
         name: e.name,
-        placeholder: y.value,
+        placeholder: S.value,
         tabindex: T.value,
         disabled: e.disabled,
         readonly: e.readonly,
@@ -2147,9 +3210,9 @@ const ls = ["for"], as = ["id", "name", "disabled", "value", "tabindex", "aria-i
         rows: e.rows,
         wrap: e.wrap,
         spellcheck: e.spellcheck,
-        "aria-invalid": J.value,
-        "aria-describedby": !Q.value && te.value ? g.value : void 0,
-        "aria-errormessage": Q.value ? g.value : void 0
+        "aria-invalid": te.value,
+        "aria-describedby": !C.value && ie.value ? b.value : void 0,
+        "aria-errormessage": C.value ? b.value : void 0
       })
     ), se = computed(() => ({
       valid: e.valid,
@@ -2158,70 +3221,77 @@ const ls = ["for"], as = ["id", "name", "disabled", "value", "tabindex", "aria-i
       hintLabel: e.hintLabel,
       maxlength: e.maxlength,
       minlength: e.minlength,
-      clear: le
-    })), le = () => {
-      v.value = void 0;
+      clear: he
+    })), he = () => {
+      I.value = void 0;
     };
-    return (W, P) => (m(), _("div", {
-      class: U(t(ie))
+    return (z, R) => (d(), y("div", {
+      class: Z(t(oe))
     }, [
-      t(f) ? (m(), _("label", {
+      t(p) ? (d(), y("label", {
         key: 0,
-        for: t(b),
+        for: t(A),
         class: "vv-textarea__label"
-      }, B(t(f)), 9, hs)) : I("", !0),
-      R("div", gs, [
-        k(W.$slots, "before", F(Y(t(se))), () => [
-          t(w) ? (m(), D(x, O({
+      }, x(t(p)), 9, Za)) : w("", !0),
+      N("div", el, [
+        z.$slots.before ? (d(), y("div", tl, [
+          $(z.$slots, "before", j(F(t(se))))
+        ])) : w("", !0),
+        N("div", ol, [
+          t(E) ? (d(), W(Q, G({
             key: 0,
-            class: "vv-textarea__icon-left"
-          }, t(V)), null, 16)) : I("", !0)
-        ]),
-        ve(R("textarea", O({
-          id: t(b),
-          ref_key: "textarea",
-          ref: l,
-          "onUpdate:modelValue": P[0] || (P[0] = (j) => be(v) ? v.value = j : null)
-        }, t(oe), {
-          onKeyup: P[1] || (P[1] = (j) => s("keyup", j))
-        }), null, 16, ys), [
-          [Ke, t(v)]
-        ]),
-        k(W.$slots, "after", F(Y(t(se))), () => [
-          t(C) ? (m(), D(x, F(O({ key: 0 }, t(V))), null, 16)) : I("", !0)
+            class: "vv-textarea__icon"
+          }, t(B)), null, 16)) : w("", !0),
+          Se(N("textarea", G({
+            id: t(A),
+            ref_key: "textarea",
+            ref: l,
+            "onUpdate:modelValue": R[0] || (R[0] = (Y) => Ce(I) ? I.value = Y : null)
+          }, t(fe), {
+            onKeyup: R[1] || (R[1] = (Y) => a("keyup", Y))
+          }), null, 16, al), [
+            [ct, t(I)]
+          ]),
+          t(O) ? (d(), W(Q, G({
+            key: 1,
+            class: "vv-textarea__icon vv-textarea__icon-after"
+          }, t(B)), null, 16)) : w("", !0)
         ]),
-        t(u) ? (m(), _("span", _s, [
-          k(W.$slots, "count", F(Y(t(se))), () => [
-            q(B(t(H)), 1)
+        z.$slots.after ? (d(), y("div", ll, [
+          $(z.$slots, "after", j(F(t(se))))
+        ])) : w("", !0),
+        t(n) ? (d(), y("span", sl, [
+          $(z.$slots, "count", j(F(t(se))), () => [
+            X(x(t(ee)), 1)
           ])
-        ])) : I("", !0)
+        ])) : w("", !0)
       ]),
-      Z(t(ee), {
-        id: t(g),
+      de(t(re), {
+        id: t(b),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  As as VolverPlugin,
-  Pt as VvAccordion,
-  Ps as VvAccordionGroup,
-  ws as VvBadge,
-  Is as VvBreadcrumb,
-  Es as VvButton,
-  Rs as VvButtonGroup,
-  Os as VvCard,
-  io as VvCheckbox,
-  Bs as VvCheckboxGroup,
-  Ds as VvCombobox,
-  Ts as VvDialog,
-  Vo as VvDropdown,
-  x as VvIcon,
-  Ls as VvInputText,
-  Ms as VvProgress,
-  rs as VvRadio,
-  Ns as VvRadioGroup,
-  Ro as VvSelect,
-  Hs as VvTextarea
+  pl as VolverPlugin,
+  lo as VvAccordion,
+  fl as VvAccordionGroup,
+  co as VvBadge,
+  ml as VvBreadcrumb,
+  bl as VvButton,
+  hl as VvButtonGroup,
+  yl as VvCard,
+  Lo as VvCheckbox,
+  gl as VvCheckboxGroup,
+  _l as VvCombobox,
+  Sl as VvDialog,
+  kt as VvDropdown,
+  Q as VvIcon,
+  Vl as VvInputText,
+  $l as VvProgress,
+  Wa as VvRadio,
+  kl as VvRadioGroup,
+  ia as VvSelect,
+  Cl as VvTextarea
 };