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

package/dist/components/index.es.js

@@ -1,433 +1,724 @@
-import { defineComponent as N, openBlock as m, createElementBlock as _, unref as t, normalizeClass as U, withModifiers as Re, 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 he, resolveDynamicComponent as Ge, createCommentVNode as I, withDirectives as ve, isRef as be, vModelCheckbox as lt, createVNode as Z, vModelSelect as nt, withKeys as Le, vModelText as xe, Transition as rt, toHandlers as it, vShow as ut, vModelDynamic as dt, vModelRadio as ct } from "vue";
-import { nanoid as ne } from "nanoid";
-import { iconExists as $e, Icon as pt, addIcon as vt } from "@iconify/vue";
-const Ue = "VV_BUTTON_GROUP", Fe = "VV_RADIO_GROUP", Ke = "VV_CHECK_GROUP", We = "VV_ACCORDION_GROUP", mt = {
+import { defineComponent as K, openBlock as i, createElementBlock as y, unref as t, normalizeClass as ee, withModifiers as st, createElementVNode as M, renderSlot as $, normalizeProps as F, guardReactiveProps as j, createTextVNode as Z, toDisplayString as H, Fragment as ne, renderList as ke, createBlock as W, mergeProps as G, withCtx as ce, resolveDynamicComponent as nt, createCommentVNode as w, withDirectives as Se, isRef as Ae, vModelCheckbox as $t, createVNode as de, Transition as rt, normalizeStyle as Je, vShow as je, vModelSelect as kt, createSlots as At, vModelText as it, toHandlers as Ct, vModelDynamic as wt, vModelRadio as Et } from "vue";
+import { nanoid as It } from "nanoid";
+import { iconExists as Be, Icon as Pt, addIcon as Ot } from "@iconify/vue";
+import { autoPlacement as Qe, flip as Ze, shift as et, size as tt, offset as He, arrow as Dt, useFloating as Bt, autoUpdate as Rt } from "@floating-ui/vue";
+var ge = /* @__PURE__ */ ((o) => (o.left = "left", o.right = "right", o.top = "top", o.bottom = "bottom", o))(ge || {}), ut = /* @__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))(ut || {}), We = /* @__PURE__ */ ((o) => (o.before = "before", o.after = "after", o))(We || {});
+const dt = Symbol.for("buttonGroup"), ct = Symbol.for("radioGroup"), vt = Symbol.for("checkGroup"), pt = Symbol.for("accordionGroup"), Tt = {
+  /**
+   * 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
-}, ft = ["update:modelValue"];
-function bt(o, a) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: s } = useInjectedGroupState(We), { title: d, content: r } = toRefs(o), f = s("modelValue", o, a), p = s("disabled", o), i = s("collapse", o), l = s("modifiers", o);
+}, xt = ["update:modelValue"];
+function Mt(o, n) {
+  const { group: e, isInGroup: r, getGroupOrLocalRef: a } = useInjectedGroupState(
+    pt
+  ), { title: c, content: u } = toRefs(o), v = a("modelValue", o, n), m = a("disabled", o), d = a("collapse", o), l = a("modifiers", o);
   return {
-    modelValue: f,
-    disabled: p,
-    isInGroup: n,
+    // group props
+    modelValue: v,
+    disabled: m,
+    isInGroup: r,
     group: e,
-    collapse: i,
+    collapse: d,
     modifiers: l,
-    title: d,
-    content: r
+    // local props
+    title: c,
+    content: u
   };
 }
-const ht = ["id", "open"], gt = ["aria-controls", "aria-expanded"], yt = ["aria-hidden"], _t = {
+const Lt = ["id", "open"], Nt = ["aria-controls", "aria-expanded"], Ht = ["aria-hidden"], Gt = {
   name: "VvAccordion"
-}, St = /* @__PURE__ */ N({
-  ..._t,
-  props: mt,
-  emits: ft,
-  setup(o, { emit: a }) {
-    const e = o, n = useAttrs(), s = e.name || (n == null ? void 0 : n.id) || ne(), {
-      modifiers: d,
-      title: r,
-      content: f,
-      disabled: p,
-      collapse: i,
+}, Ut = /* @__PURE__ */ K({
+  ...Gt,
+  props: Tt,
+  emits: xt,
+  setup(o, { emit: n }) {
+    const e = o, r = useAttrs(), a = computed(
+      () => e.name || (r == null ? void 0 : r.id) || It()
+    ), {
+      modifiers: c,
+      title: u,
+      content: v,
+      disabled: m,
+      collapse: d,
       modelValue: l,
-      isInGroup: c
-    } = bt(e, a), u = ref(!1), b = computed({
-      get: () => c.value ? i.value && Array.isArray(l.value) ? l.value.includes(s) : l.value === s : l.value === void 0 ? u.value : l.value,
-      set: (v) => {
-        if (c.value) {
-          if (i.value && Array.isArray(l.value)) {
-            if (v) {
-              l.value.push(s);
+      isInGroup: s
+    } = Mt(e, n), p = ref(!1), g = computed({
+      get: () => s.value ? d.value && Array.isArray(l.value) ? l.value.includes(a.value) : l.value === a.value : l.value === void 0 ? p.value : l.value,
+      set: (b) => {
+        if (s.value) {
+          if (d.value && Array.isArray(l.value)) {
+            if (b) {
+              l.value.push(a.value);
               return;
             }
             l.value = l.value.filter(
-              (V) => V !== s
+              (S) => S !== a.value
             );
             return;
           }
-          l.value = v ? s : null;
+          l.value = b ? a.value : null;
           return;
         }
-        if (l.value === void 0 && typeof v == "boolean") {
-          u.value = v;
+        if (l.value === void 0 && typeof b == "boolean") {
+          p.value = b;
           return;
         }
-        l.value = v;
+        l.value = b;
       }
-    }), { bemCssClasses: g } = useBemModifiers("vv-accordion", {
-      modifiers: d,
-      disabled: p
-    }), y = useToggle(b);
-    return (v, V) => (m(), _("details", {
-      id: t(s),
-      class: U(t(g)),
-      open: t(b),
-      onClick: V[0] || (V[0] = Re((w) => t(y)(), ["prevent"]))
+    }), k = useBemModifiers(
+      "vv-accordion",
+      c,
+      computed(() => ({
+        disabled: m.value
+      }))
+    ), C = useToggle(g);
+    return (b, S) => (i(), y("details", {
+      id: t(a),
+      class: ee(t(k)),
+      open: t(g),
+      onClick: S[0] || (S[0] = st((I) => t(C)(), ["prevent"]))
     }, [
-      R("summary", {
-        "aria-controls": t(s),
-        "aria-expanded": t(b),
+      M("summary", {
+        "aria-controls": t(a),
+        "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", F(j({ open: t(g) })), () => [
+          Z(H(t(u)), 1)
         ])
-      ], 8, gt),
-      R("div", {
-        "aria-hidden": !t(b),
+      ], 8, Nt),
+      M("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", F(j({ open: t(g) })), () => [
+          Z(H(t(v)), 1)
         ])
-      ], 8, yt)
-    ], 10, ht));
+      ], 8, Ht)
+    ], 10, Lt));
   }
-}), Vt = {
+}), Wt = {
+  /**
+   * 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
-}, $t = ["update:modelValue"], Ct = {
+}, Ft = ["update:modelValue"], jt = {
   name: "VvAccordionGroup"
-}, ys = /* @__PURE__ */ N({
-  ...Ct,
-  props: Vt,
-  emits: $t,
-  setup(o, { emit: a }) {
-    const e = o, { disabled: n, collapse: s, modifiers: d, itemModifiers: r, items: f } = toRefs(e);
+}, Qa = /* @__PURE__ */ K({
+  ...jt,
+  props: Wt,
+  emits: Ft,
+  setup(o, { emit: n }) {
+    const e = o, { disabled: r, collapse: a, modifiers: c, itemModifiers: u, items: v } = toRefs(e);
     watchEffect(() => {
-      typeof e.modelValue == "string" && s.value && console.warn(
+      typeof e.modelValue == "string" && a.value && console.warn(
         "[VvAccordionGroup]: modelValue is a string but collapse is true."
       );
     });
-    const p = ref([]), i = computed({
+    const m = ref([]), d = computed({
       get: () => {
-        var u;
-        return e.modelValue !== void 0 ? s.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : s.value ? p.value : (u = p.value) == null ? void 0 : u[0];
+        var s;
+        return e.modelValue !== void 0 ? a.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue : a.value ? m.value : (s = m.value) == null ? void 0 : s[0];
       },
-      set: (u) => {
+      set: (s) => {
         if (e.modelValue !== void 0)
-          return (Array.isArray(e.modelValue) || s.value) && !Array.isArray(u) && (u = [u]), a("update:modelValue", u);
-        p.value = Array.isArray(u) ? u : [u];
+          return (Array.isArray(e.modelValue) || a.value) && !Array.isArray(s) && (s = [s]), n("update:modelValue", s);
+        m.value = Array.isArray(s) ? s : [s];
       }
-    }), l = {
-      key: We,
-      modelValue: i,
-      disabled: n,
-      collapse: s,
-      modifiers: r
-    };
-    useProvideGroupState(l);
-    const { bemCssClasses: c } = useBemModifiers("vv-accordion-group", {
-      modifiers: d,
-      disabled: n
     });
-    return (u, b) => (m(), _("div", {
-      class: U(t(c))
+    useProvideGroupState({
+      key: pt,
+      modelValue: d,
+      disabled: r,
+      collapse: a,
+      modifiers: u
+    });
+    const l = useBemModifiers(
+      "vv-accordion-group",
+      c,
+      computed(() => ({
+        disabled: r.value
+      }))
+    );
+    return (s, p) => (i(), y("div", {
+      class: ee(t(l))
     }, [
-      k(u.$slots, "default", {}, () => [
-        (m(!0), _(de, null, fe(t(f), (g) => (m(), D(St, O({
+      $(s.$slots, "default", {}, () => [
+        (i(!0), y(ne, null, ke(t(v), (g) => (i(), W(Ut, G({
           key: g.title
         }, {
           name: g.name,
           title: g.title,
           content: g.content
         }), {
-          header: he((y) => [
-            k(u.$slots, `header::${g.name}`, F(Y(y)))
+          header: ce((k) => [
+            $(s.$slots, `header::${g.name}`, F(j(k)))
           ]),
-          details: he((y) => [
-            k(u.$slots, `details::${g.name}`, F(Y(y)))
+          details: ce((k) => [
+            $(s.$slots, `details::${g.name}`, F(j(k)))
           ]),
           _: 2
         }, 1040))), 128))
       ])
     ], 2));
   }
-}), ge = {
+}), Ie = {
   valid: Boolean,
   validLabel: [String, Array]
-}, ye = {
+}, Pe = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, Oe = {
+}, qe = {
   loading: Boolean,
   loadingLabel: String
-}, ce = {
+}, Ce = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, _e = {
+}, Oe = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, re = {
+}, ve = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Se = {
+}, De = {
   hintLabel: { type: String, default: "" }
-}, ke = {
+}, Ke = {
+  /**
+   * List of options, can be string[] or object[]
+   */
   options: {
     type: Array,
     default: () => []
   },
+  /**
+   * Used when options are objects: key to use for option label
+   */
   labelKey: { type: [String, Function], default: "label" },
-  valueKey: { type: [String, Function], default: "value" }
-}, kt = {
+  /**
+   * 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" }
+}, qt = {
+  /**
+   * Show character limit
+   */
   count: {
     type: [Boolean, String],
     default: !1,
     validator: (o) => [!0, !1, "limit", "countdown"].includes(o)
   }
-}, At = {
+}, Kt = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
   debounce: [Number, String]
-}, Me = {
-  LEFT: "left",
-  RIGHT: "right"
-}, Be = {
+}, ze = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (o) => Object.values(Me).includes(o),
-    default: Me.RIGHT
+    default: We.before,
+    validation: (o) => Object.values(We).includes(o)
   }
-}, Ae = {
+}, Te = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, De = {
+}, Xe = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Pe = {
+}, xe = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, Ve = {
-  id: [String, Number],
+}, Me = {
+  /**
+   * 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: ge.bottom,
+    validator: (o) => Object.values(ge).includes(o) || Object.values(ut).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 = {
+  ...Me,
+  /**
+   * 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 }
-}, qe = {
+}, ft = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, je = {
+}, mt = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, ze = {
-  ...Ve,
-  ...qe,
-  ...je,
-  ...Ae,
-  ...ce,
-  ..._e,
-  ...ge,
-  ...ye,
-  ...Se,
+}, bt = {
+  ...Le,
+  ...ft,
+  ...mt,
+  ...Te,
+  ...Ce,
   ...Oe,
-  ...re,
-  ...kt,
-  ...At,
-  ...Be,
+  ...Ie,
+  ...Pe,
   ...De,
+  ...qe,
+  ...ve,
+  ...qt,
+  ...Kt,
+  ...ze,
+  ...Xe,
+  /**
+   * 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
-}, Xe = {
-  ...Ve,
-  ...Ae,
-  ...ge,
-  ...ye,
-  ...Se,
-  ...ce,
-  ..._e,
+}, ht = {
+  ...Le,
+  ...Te,
+  ...Ie,
+  ...Pe,
+  ...De,
+  ...Ce,
+  ...Oe,
+  ...ve,
+  /**
+   * 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
-}, Ye = {
-  ...ge,
-  ...ye,
-  ...ke,
-  ...Se,
-  ...ce,
-  ..._e,
+}, yt = {
+  ...Ie,
+  ...Pe,
+  ...Ke,
+  ...De,
+  ...Ce,
+  ...Oe,
+  ...ve,
+  /**
+   * 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
-}, Pt = {
-  ...re,
+}, zt = {
+  ...ve,
   value: [String, Number]
-}, wt = {
+}, Xt = {
   name: "VvBadge"
-}, _s = /* @__PURE__ */ N({
-  ...wt,
-  props: Pt,
+}, Yt = /* @__PURE__ */ K({
+  ...Xt,
+  props: zt,
   setup(o) {
-    const a = o, { bemCssClasses: e } = useBemModifiers("vv-badge", {
-      modifiers: a.modifiers
-    });
-    return (n, s) => (m(), _("span", {
-      class: U(t(e)),
+    const n = o, { modifiers: e } = toRefs(n), r = useBemModifiers("vv-badge", e);
+    return (a, c) => (i(), y("span", {
+      class: ee(t(r)),
       role: "status"
     }, [
-      k(n.$slots, "default", {}, () => [
-        q(B(n.value), 1)
+      $(a.$slots, "default", {}, () => [
+        Z(H(a.value), 1)
       ])
     ], 2));
   }
 });
-function It(o, a) {
-  const e = { [`${o}`]: !0 };
-  return {
-    bemCssClasses: computed(() => Object.keys(a).reduce((s, d) => {
-      const r = unref(a[d]) || !1;
-      if (!r)
-        return s;
-      if (d === "modifiers") {
-        const f = Array.isArray(r) ? r : r.split(" ");
-        return {
-          ...s,
-          ...f.reduce(
-            (p, i) => ({
-              ...p,
-              [`${o}--${kebabCase(i)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...s,
-          [`${o}--${kebabCase(d)}`]: r
-        };
-    }, e) || {})
-  };
+function Jt(o, n, e) {
+  return computed(() => {
+    const r = {
+      [o]: !0
+    };
+    let a = unref(n);
+    return a && (!Array.isArray(a) && typeof a == "string" && (a = a.split(" ")), Array.isArray(a) && a.forEach((c) => {
+      r[`${o}--${c}`] = !0;
+    })), e && Object.keys(e.value).forEach((c) => {
+      r[`${o}--${c}`] = unref(e.value[c]);
+    }), r;
+  });
 }
-const Et = {
-  ...re,
+const Qt = {
+  ...ve,
   routes: Array
-}, Rt = { class: "vv-breadcrumb__list" }, Ot = ["content"], Bt = {
+}, Zt = { class: "vv-breadcrumb__list" }, eo = ["content"], to = {
   name: "VvBreadcrumb"
-}, Ss = /* @__PURE__ */ N({
-  ...Bt,
-  props: Et,
+}, Za = /* @__PURE__ */ K({
+  ...to,
+  props: Qt,
   setup(o) {
-    const a = o, { bemCssClasses: e } = It("vv-breadcrumb", {
-      modifiers: a.modifiers
-    });
-    return (n, s) => (m(), _("nav", {
-      class: U(t(e)),
+    const n = o, { modifiers: e } = toRefs(n), r = Jt("vv-breadcrumb", e);
+    return (a, c) => (i(), y("nav", {
+      class: ee(t(r)),
       "aria-label": "breadcrumbs"
     }, [
-      R("ol", Rt, [
-        (m(!0), _(de, null, fe(n.routes, (d, r) => {
-          var f, p, i, l;
-          return m(), _("li", {
-            key: `${d.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
+      M("ol", Zt, [
+        (i(!0), y(ne, null, ke(a.routes, (u, v) => {
+          var m, d, l, s;
+          return i(), y("li", {
+            key: `${u.label}-${v}`,
+            class: ee({
+              "vv-breadcrumb__item": v < Number((m = a.routes) == null ? void 0 : m.length) - 1,
+              "vv-breadcrumb__item-active": v === Number((d = a.routes) == null ? void 0 : d.length) - 1
             }),
             itemprop: "itemListElement",
             itemtype: "https://schema.org/ListItem",
             itemscope: ""
           }, [
-            (m(), D(Ge(d.to ? "router-link" : d.href ? "a" : "span"), O(d, {
+            (i(), W(nt(u.to ? "router-link" : u.href ? "a" : "span"), G(u, {
               class: {
-                "vv-breadcrumb__link": r < Number((i = n.routes) == null ? void 0 : i.length) - 1
+                "vv-breadcrumb__link": v < Number((l = a.routes) == null ? void 0 : l.length) - 1
               },
-              "aria-current": r === Number((l = n.routes) == null ? void 0 : l.length) - 1 ? "page" : void 0,
+              "aria-current": v === Number((s = a.routes) == null ? void 0 : s.length) - 1 ? "page" : void 0,
               itemprop: "item"
             }), {
-              default: he(() => [
-                k(n.$slots, "label", F(Y({ route: d, index: r })), () => [
-                  q(B(d.label), 1)
+              default: ce(() => [
+                $(a.$slots, "label", F(j({ route: u, index: v })), () => [
+                  Z(H(u.label), 1)
                 ])
               ]),
               _: 2
             }, 1040, ["class", "aria-current"])),
-            R("meta", {
+            M("meta", {
               itemprop: "position",
-              content: `${r + 1}`
-            }, null, 8, Ot)
+              content: `${v + 1}`
+            }, null, 8, eo)
           ], 2);
         }), 128))
       ])
     ], 2));
   }
-}), Je = "ds", Dt = {
+}), oo = {
+  /**
+   * 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]
   }
-}, Tt = {
+}, ao = {
   name: "VvIcon"
-}, G = /* @__PURE__ */ N({
-  ...Tt,
-  props: Dt,
+}, J = /* @__PURE__ */ K({
+  ...ao,
+  props: oo,
   setup(o) {
-    const a = o, e = ref(!0), { modifiers: n } = toRefs(a), s = inject(Je), { bemCssClasses: d } = useBemModifiers("vv-icon", {
-      modifiers: n
-    }), r = computed(() => a.provider || (s == null ? void 0 : s.provider)), f = computed(() => {
-      const l = a.name ?? "", c = `@${r.value}:${a.prefix}:${a.name}`;
-      return $e(l) ? l : $e(c) ? c : (s == null ? void 0 : s.iconsCollections.find((u) => {
-        const b = `@${r.value}:${u.prefix}:${l}`;
-        if ($e(b))
-          return b;
-      })) || l;
+    const n = o, e = ref(!0), r = useVolver(), { modifiers: a } = toRefs(n), c = useBemModifiers("vv-icon", a), u = computed(() => n.provider || (r == null ? void 0 : r.provider)), v = computed(() => {
+      const l = n.name ?? "", s = `@${u.value}:${n.prefix}:${n.name}`;
+      return Be(l) ? l : Be(s) ? s : (r == null ? void 0 : r.iconsCollections.find(
+        (p) => {
+          const g = `@${u.value}:${p.prefix}:${l}`;
+          if (Be(g))
+            return g;
+        }
+      )) || l;
     });
-    function p(l) {
-      let c = null;
+    function m(l) {
+      let s = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        c = new y().window;
+        const { JSDOM: C } = require("jsdom");
+        s = new C().window;
       }
-      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(l, "text/html").querySelector("svg");
+      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(l, "text/html").querySelector("svg");
     }
-    function i(l) {
-      const c = p(l), u = (c == null ? void 0 : c.innerHTML.trim()) || "";
-      c && u && vt(`@${r.value}:${a.prefix}:${a.name}`, {
-        body: u,
-        height: c.viewBox.baseVal.height,
-        width: c.viewBox.baseVal.width
+    function d(l) {
+      const s = m(l), p = (s == null ? void 0 : s.innerHTML.trim()) || "";
+      s && p && Ot(`@${u.value}:${n.prefix}:${n.name}`, {
+        body: p,
+        // Set height and width from svg content
+        height: s.viewBox.baseVal.height,
+        width: s.viewBox.baseVal.width
       });
     }
-    return s && (a.src && !$e(`@${r.value}:${a.prefix}:${a.name}`) ? (e.value = !1, s.fetchIcon(a.src).then((l) => {
-      l && (i(l), e.value = !0);
+    return r && (n.src && !Be(`@${u.value}:${n.prefix}:${n.name}`) ? (e.value = !1, r.fetchIcon(n.src).then((l) => {
+      l && (d(l), e.value = !0);
     }).catch((l) => {
       throw new Error(`During fetch icon: ${l == null ? void 0 : l.message}`);
-    })) : a.svg && i(a.svg)), (l, c) => t(e) ? (m(), D(t(pt), O({
+    })) : n.svg && d(n.svg)), (l, s) => t(e) ? (i(), W(t(Pt), G({
       key: 0,
-      class: t(d)
+      class: t(c)
     }, {
       inline: l.inline,
       width: l.width,
@@ -438,49 +729,84 @@ const Et = {
       rotate: l.rotate,
       color: l.color,
       onLoad: l.onLoad,
-      icon: t(f)
-    }), null, 16, ["class"])) : I("", !0);
+      icon: t(v)
+    }), null, 16, ["class"])) : w("", !0);
   }
 });
-var me = /* @__PURE__ */ ((o) => (o.left = "left", o.right = "right", o.top = "top", o.bottom = "bottom", o))(me || {}), Qe = /* @__PURE__ */ ((o) => (o.button = "button", o.submit = "submit", o.reset = "reset", o))(Qe || {}), le = /* @__PURE__ */ ((o) => (o.nuxtLink = "nuxt-link", o.routerLink = "router-link", o.a = "a", o.button = "button", o))(le || {}), Ze = /* @__PURE__ */ ((o) => (o._blank = "_blank", o._self = "_self", o._parent = "_parent", o._top = "_top", o))(Ze || {});
-const Lt = ["update:modelValue"], Mt = {
-  ...re,
-  ...ce,
-  ...Pe,
-  icon: {
-    type: [String, Object],
-    default: ""
-  },
+var gt = /* @__PURE__ */ ((o) => (o.button = "button", o.submit = "submit", o.reset = "reset", o))(gt || {}), ye = /* @__PURE__ */ ((o) => (o.nuxtLink = "nuxt-link", o.routerLink = "router-link", o.a = "a", o.button = "button", o))(ye || {}), _t = /* @__PURE__ */ ((o) => (o._blank = "_blank", o._self = "_self", o._parent = "_parent", o._top = "_top", o))(_t || {});
+const lo = ["update:modelValue"], so = {
+  ...Me,
+  ...ve,
+  ...Ce,
+  ...xe,
+  /**
+   * Button icon
+   */
+  icon: [String, Object],
+  /**
+   * Button icon position
+   */
   iconPosition: {
     type: String,
-    default: "left",
-    validator: (o) => o in me
+    default: ge.left,
+    validator: (o) => Object.values(ge).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 Ze
+    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 Qe
+    validator: (o) => Object.values(gt).includes(o)
   },
   toggle: {
     type: Boolean,
@@ -488,306 +814,342 @@ const Lt = ["update:modelValue"], Mt = {
   },
   modelValue: String
 };
-function Nt(o, a) {
-  var v;
-  const { group: e, isInGroup: n, getGroupOrLocalRef: s } = useInjectedGroupState(Ue), {
-    iconPosition: d,
-    icon: r,
-    label: f,
-    pressed: p,
-    modifiers: i
-  } = toRefs(o), l = s("modelValue", o, a), c = s("disabled", o), u = s("toggle", o), b = s(
+function no(o, n) {
+  var S;
+  const { group: e, isInGroup: r, getGroupOrLocalRef: a } = useInjectedGroupState(dt), {
+    id: c,
+    iconPosition: u,
+    icon: v,
+    label: m,
+    pressed: d,
+    modifiers: l
+  } = toRefs(o), s = a("modelValue", o, n), p = a("disabled", o), g = a("toggle", o), k = a(
     "unselectable",
     o
-  ), g = ((v = e == null ? void 0 : e.value) == null ? void 0 : v.multiple) ?? ref(!1), y = computed(() => {
-    var $;
-    const V = i != null && i.value ? Array.isArray(i.value) ? i.value : [i.value] : [], w = ($ = e == null ? void 0 : e.value.itemModifiers) != null && $.value ? Array.isArray(e.value.itemModifiers.value) ? e.value.itemModifiers.value : [e.value.itemModifiers.value] : [];
-    return [...V, ...w];
+  ), C = ((S = e == null ? void 0 : e.value) == null ? void 0 : S.multiple) ?? ref(!1), b = computed(() => {
+    var E;
+    const I = l != null && l.value ? Array.isArray(l.value) ? l.value : [l.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: l,
-    disabled: c,
-    toggle: u,
-    unselectable: b,
-    multiple: g,
-    modifiers: y,
-    pressed: p,
-    iconPosition: d,
-    icon: r,
-    label: f
+    isInGroup: r,
+    modelValue: s,
+    disabled: p,
+    toggle: g,
+    unselectable: k,
+    multiple: C,
+    // local props
+    id: c,
+    modifiers: b,
+    pressed: d,
+    iconPosition: u,
+    icon: v,
+    label: m
   };
 }
-const Ht = {
+const ro = {
   key: 1,
   class: "vv-button__label"
-}, Gt = {
+}, io = {
   key: 1,
   class: "vv-button__label"
-}, xt = {
+}, uo = {
   name: "VvButton"
-}, Vs = /* @__PURE__ */ N({
-  ...xt,
-  props: Mt,
-  emits: Lt,
-  setup(o, { emit: a }) {
-    const e = o, n = useAttrs(), s = useSlots(), d = (n == null ? void 0 : n.name) || ne(), {
-      modifiers: r,
-      iconPosition: f,
-      icon: p,
-      label: i,
-      modelValue: l,
-      disabled: c,
-      toggle: u,
-      unselectable: b
-    } = Nt(e, a), g = inject(Je), y = computed(() => {
+}, el = /* @__PURE__ */ K({
+  ...uo,
+  props: so,
+  emits: lo,
+  setup(o, { expose: n, emit: e }) {
+    const r = o, a = useAttrs(), c = useSlots(), {
+      id: u,
+      modifiers: v,
+      iconPosition: m,
+      icon: d,
+      label: l,
+      modelValue: s,
+      disabled: p,
+      toggle: g,
+      unselectable: k
+    } = no(r, e), C = useUniqueId(u), b = computed(() => (a == null ? void 0 : a.name) || C.value), S = useVolver(), I = ref(null);
+    n({ $el: I });
+    const {
+      reference: B,
+      bus: E,
+      aria: O
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => I.value,
+      (A) => {
+        B && (B.value = A);
+      }
+    );
+    const { role: L } = useInjectedDropdownAction(), q = computed(() => {
       switch (!0) {
-        case c.value:
-          return le.button;
-        case e.to !== void 0:
-          return g != null && g.nuxt ? le.nuxtLink : le.routerLink;
-        case e.href !== void 0:
-          return le.a;
+        case p.value:
+          return ye.button;
+        case r.to !== void 0:
+          return S != null && S.nuxt ? ye.nuxtLink : ye.routerLink;
+        case r.href !== void 0:
+          return ye.a;
         default:
-          return le.button;
+          return ye.button;
       }
-    }), v = computed(() => u.value ? Array.isArray(l.value) ? contains(d, l.value) : equals(d, l.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) && !(i != null && i.value) && !s.default
-      )
-    }), w = computed(
-      () => typeof (p == null ? void 0 : p.value) == "string" ? { name: p == null ? void 0 : p.value } : p == null ? void 0 : p.value
-    ), $ = computed(() => {
-      const C = {
-        class: V.value,
-        "aria-pressed": v.value ? !0 : void 0
+    }), Q = computed(() => g.value ? Array.isArray(s.value) ? contains(b.value, s.value) : equals(b.value, s.value) : r.pressed), P = useBemModifiers(
+      "vv-button",
+      v,
+      computed(() => ({
+        active: r.active,
+        pressed: Q.value,
+        disabled: p.value,
+        reverse: [ge.right, ge.bottom].includes(m.value),
+        column: [ge.top, ge.bottom].includes(m.value),
+        iconOnly: Boolean((d == null ? void 0 : d.value) && !(l != null && l.value) && !c.default)
+      }))
+    ), T = computed(
+      () => typeof (d == null ? void 0 : d.value) == "string" ? { name: d == null ? void 0 : d.value } : d == null ? void 0 : d.value
+    ), U = computed(() => {
+      const A = {
+        ...O == null ? void 0 : O.value,
+        "aria-pressed": Q.value ? !0 : void 0,
+        class: P.value,
+        role: L
       };
-      switch (y.value) {
-        case le.a:
+      switch (q.value) {
+        case ye.a:
           return {
-            ...C,
-            role: "button",
-            href: e.href,
-            target: e.target,
-            rel: e.rel
+            ...A,
+            role: A.role ?? "button",
+            href: r.href,
+            target: r.target,
+            rel: r.rel
           };
-        case le.routerLink:
-        case le.nuxtLink:
+        case ye.routerLink:
+        case ye.nuxtLink:
           return {
-            ...C,
-            role: "button",
-            to: e.to,
-            target: e.target
+            ...A,
+            role: A.role ?? "button",
+            to: r.to,
+            target: r.target
           };
         default:
           return {
-            ...C,
-            type: e.type,
-            disabled: c.value
+            ...A,
+            type: r.type,
+            disabled: p.value
           };
       }
-    }), M = () => {
-      if (u.value) {
-        if (Array.isArray(l.value)) {
-          if (contains(d, l.value)) {
-            b.value && (l.value = l.value.filter(
-              (C) => C !== d
+    }), te = (A) => {
+      if (E == null || E.emit("click", A), g.value) {
+        if (Array.isArray(s.value)) {
+          if (contains(b.value, s.value)) {
+            k.value && (s.value = s.value.filter(
+              (oe) => oe !== b.value
             ));
             return;
           }
-          l.value.push(d);
+          s.value.push(b.value);
           return;
         }
-        if (equals(d, l.value) && b.value) {
-          l.value = void 0;
+        if (equals(b, s.value) && k.value) {
+          s.value = void 0;
           return;
         }
-        l.value = d;
+        s.value = b.value;
       }
+    }, re = (A) => {
+      E == null || E.emit("mouseover", A);
+    }, ie = (A) => {
+      E == null || E.emit("mouseleave", A);
     };
-    return (C, H) => (m(), D(Ge(t(y)), O(t($), { onClickPassive: M }), {
-      default: he(() => [
-        k(C.$slots, "default", {}, () => [
-          C.loading ? k(C.$slots, "loading", { key: 0 }, () => [
-            C.loadingIcon ? (m(), D(G, {
+    return (A, oe) => (i(), W(nt(t(q)), G(t(U), {
+      id: t(C),
+      ref_key: "$el",
+      ref: I,
+      onClickPassive: te,
+      onMouseoverPassive: re,
+      onMouseleavePassive: ie
+    }), {
+      default: ce(() => [
+        $(A.$slots, "default", {}, () => [
+          A.loading ? $(A.$slots, "loading", { key: 0 }, () => [
+            A.loadingIcon ? (i(), W(J, {
               key: 0,
               class: "vv-button__loading-icon",
-              name: C.loadingIcon
-            }, null, 8, ["name"])) : I("", !0),
-            C.loadingLabel ? (m(), _("span", Ht, B(C.loadingLabel), 1)) : I("", !0)
-          ]) : (m(), _(de, { key: 1 }, [
-            k(C.$slots, "before"),
-            t(p) ? (m(), D(G, O({
+              name: A.loadingIcon
+            }, null, 8, ["name"])) : w("", !0),
+            A.loadingLabel ? (i(), y("span", ro, H(A.loadingLabel), 1)) : w("", !0)
+          ]) : (i(), y(ne, { key: 1 }, [
+            $(A.$slots, "before"),
+            t(d) ? (i(), W(J, G({
               key: 0,
               class: "vv-button__icon"
-            }, t(w)), null, 16)) : I("", !0),
-            t(i) ? (m(), _("span", Gt, [
-              k(C.$slots, "label", {}, () => [
-                q(B(t(i)), 1)
+            }, t(T)), null, 16)) : w("", !0),
+            t(l) ? (i(), y("span", io, [
+              $(A.$slots, "label", {}, () => [
+                Z(H(t(l)), 1)
               ])
-            ])) : I("", !0),
-            k(C.$slots, "after")
+            ])) : w("", !0),
+            $(A.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
-    }, 16));
+    }, 16, ["id"]));
   }
-}), Ut = {
-  ...re,
-  ...ce,
-  ...Pe,
+}), co = {
+  ...ve,
+  ...Ce,
+  ...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 }
-}, Ft = ["update:modelValue"], Kt = {
+}, vo = ["update:modelValue"], po = {
   name: "VvButtonGroup"
-}, $s = /* @__PURE__ */ N({
-  ...Kt,
-  props: Ut,
-  emits: Ft,
-  setup(o, { emit: a }) {
+}, tl = /* @__PURE__ */ K({
+  ...po,
+  props: co,
+  emits: vo,
+  setup(o, { emit: n }) {
     const e = o, {
-      disabled: n,
-      toggle: s,
-      modifiers: d,
-      multiple: r,
-      unselectable: f,
-      itemModifiers: p
+      disabled: r,
+      toggle: a,
+      modifiers: c,
+      multiple: u,
+      unselectable: v,
+      itemModifiers: m
     } = 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 i = computed({
-      get: () => r.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
-      set: (u) => (u !== void 0 && (Array.isArray(e.modelValue) || r.value) && !Array.isArray(u) && (u = [u]), a("update:modelValue", u))
-    }), l = {
-      key: Ue,
-      modelValue: i,
-      disabled: n,
-      toggle: s,
-      multiple: r,
-      unselectable: f,
-      itemModifiers: p
-    };
-    useProvideGroupState(l);
-    const { bemCssClasses: c } = useBemModifiers("vv-button-group", {
-      modifiers: d
+    const d = computed({
+      get: () => u.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
+      set: (s) => (s !== void 0 && (Array.isArray(e.modelValue) || u.value) && !Array.isArray(s) && (s = [s]), n("update:modelValue", s))
     });
-    return (u, b) => (m(), _("div", {
-      class: U(t(c)),
+    useProvideGroupState({
+      key: dt,
+      modelValue: d,
+      disabled: r,
+      toggle: a,
+      multiple: u,
+      unselectable: v,
+      itemModifiers: m
+    });
+    const l = useBemModifiers("vv-button-group", c);
+    return (s, p) => (i(), y("div", {
+      class: ee(t(l)),
       role: "group"
     }, [
-      k(u.$slots, "default")
+      $(s.$slots, "default")
     ], 2));
   }
-}), Wt = {
+}), fo = {
   title: String,
   modifiers: [String, Array]
-}, qt = {
+}, mo = {
   key: 0,
   class: "vv-card__header"
-}, jt = {
+}, bo = {
   key: 1,
   class: "vv-card__content"
-}, zt = {
+}, ho = {
   key: 2,
   class: "vv-card__footer"
-}, Xt = {
+}, yo = {
   name: "VvCard"
-}, Cs = /* @__PURE__ */ N({
-  ...Xt,
-  props: Wt,
+}, ol = /* @__PURE__ */ K({
+  ...yo,
+  props: fo,
   setup(o) {
-    const a = o, { bemCssClasses: e } = useBemModifiers("vv-card", {
-      modifiers: a.modifiers
-    });
-    return (n, s) => (m(), _("article", {
-      class: U(t(e))
+    const n = o, { modifiers: e } = toRefs(n), r = useBemModifiers("vv-card", e);
+    return (a, c) => (i(), y("article", {
+      class: ee(t(r))
     }, [
-      n.$slots.header || n.title ? (m(), _("header", qt, [
-        k(n.$slots, "header", {}, () => [
-          q(B(n.title), 1)
+      a.$slots.header || a.title ? (i(), y("header", mo, [
+        $(a.$slots, "header", {}, () => [
+          Z(H(a.title), 1)
         ])
-      ])) : I("", !0),
-      k(n.$slots, "default"),
-      n.$slots.content ? (m(), _("div", jt, [
-        k(n.$slots, "content")
-      ])) : I("", !0),
-      n.$slots.footer ? (m(), _("footer", zt, [
-        k(n.$slots, "footer")
-      ])) : I("", !0)
+      ])) : w("", !0),
+      $(a.$slots, "default"),
+      a.$slots.content ? (i(), y("div", bo, [
+        $(a.$slots, "content")
+      ])) : w("", !0),
+      a.$slots.footer ? (i(), y("footer", ho, [
+        $(a.$slots, "footer")
+      ])) : w("", !0)
     ], 2));
   }
-}), Yt = {
-  ...Xe,
+}), go = {
+  ...ht,
+  ...ve,
+  /**
+   * 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
-}, Jt = ["click", "update:modelValue", "change", "blur"];
-function Qt(o, a) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: s } = useInjectedGroupState(Ke), { switch: d, indeterminate: r } = toRefs(o), f = s("modelValue", o, a), p = s("readonly", o), i = s("disabled", o), l = s("valid", o), c = s("invalid", o);
+}, _o = ["click", "update:modelValue", "change", "blur"];
+function So(o, n) {
+  const { group: e, isInGroup: r, getGroupOrLocalRef: a } = useInjectedGroupState(vt), { id: c, switch: u, indeterminate: v } = toRefs(o), m = a("modelValue", o, n), d = a("readonly", o), l = a("disabled", o), s = a("valid", o), p = a("invalid", o);
   return {
-    propsSwitch: d,
-    indeterminate: r,
+    // local props
+    id: c,
+    propsSwitch: u,
+    indeterminate: v,
+    // global props
     group: e,
-    isInGroup: n,
-    modelValue: f,
-    readonly: p,
-    disabled: i,
-    valid: l,
-    invalid: c
+    isInGroup: r,
+    modelValue: m,
+    readonly: d,
+    disabled: l,
+    valid: s,
+    invalid: p
   };
 }
-function Ce(o) {
-  return Array.isArray(o) ? o.filter((a) => isString(a)).join(" ") : o;
+function Re(o) {
+  return Array.isArray(o) ? o.filter((n) => isString(n)).join(" ") : o;
 }
-function pe(o, a) {
+function Ve(o, n) {
   const {
     invalid: e,
-    valid: n,
-    hint: s,
-    loading: d
-  } = a, {
-    hintLabel: r,
-    modelValue: f,
-    valid: p,
-    validLabel: i,
+    valid: r,
+    hint: a,
+    loading: c
+  } = n, {
+    hintLabel: u,
+    modelValue: v,
+    valid: m,
+    validLabel: d,
     invalid: l,
-    invalidLabel: c,
-    ...u
-  } = toRefs(o), b = resolveFieldData(u, "loading"), g = resolveFieldData(u, "loadingLabel"), y = computed(() => l.value ? !!(l.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 || s)
-  ), V = computed(
-    () => !!(i && i.value || n)
-  ), w = computed(
-    () => !!(b != null && b.value && d || b != null && b.value && (g != null && g.value))
-  ), $ = computed(
-    () => v.value || V.value || y.value || w.value
+    invalidLabel: s,
+    ...p
+  } = toRefs(o), g = resolveFieldData(p, "loading"), k = resolveFieldData(p, "loadingLabel"), C = computed(() => l.value ? !!(l.value && e || s != null && s.value && Array.isArray(s.value) && s.value.length > 0 || s != null && s.value && !isEmpty(s)) : !1), b = computed(
+    () => !!(u && u.value || a)
+  ), S = computed(
+    () => !!(d && d.value || r)
+  ), I = computed(
+    () => !!(g != null && g.value && c || g != null && g.value && (k != null && k.value))
+  ), B = computed(
+    () => b.value || S.value || C.value || I.value
   );
   return {
-    hasInvalid: y,
-    hasHint: v,
-    hasValid: V,
-    hasLoading: w,
+    hasInvalid: C,
+    hasHint: b,
+    hasValid: S,
+    hasLoading: I,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -796,26 +1158,26 @@ function pe(o, a) {
           default: () => ({})
         }
       },
-      setup(M) {
-        const C = computed(() => {
-          const H = toReactive({
-            hintLabel: r,
-            modelValue: f,
-            valid: p,
-            validLabel: i,
+      setup(E) {
+        const O = computed(() => {
+          const L = toReactive({
+            hintLabel: u,
+            modelValue: v,
+            valid: m,
+            validLabel: d,
             invalid: l,
-            invalidLabel: c,
-            loading: b,
-            loadingLabel: g,
-            ...M.params
+            invalidLabel: s,
+            loading: g,
+            loadingLabel: k,
+            ...E.params
           });
-          return l != null && l.value ? (e == null ? void 0 : e(H)) || Ce(c == null ? void 0 : c.value) || (r == null ? void 0 : r.value) : p != null && p.value ? (n == null ? void 0 : n(H)) || Ce(i == null ? void 0 : i.value) || (r == null ? void 0 : r.value) : b != null && b.value ? (d == null ? void 0 : d(H)) || Ce(g == null ? void 0 : g.value) || (r == null ? void 0 : r.value) : (s == null ? void 0 : s(H)) || Ce(r == null ? void 0 : r.value) || (r == null ? void 0 : r.value);
+          return l != null && l.value ? (e == null ? void 0 : e(L)) || Re(s == null ? void 0 : s.value) || (u == null ? void 0 : u.value) : m != null && m.value ? (r == null ? void 0 : r(L)) || Re(d == null ? void 0 : d.value) || (u == null ? void 0 : u.value) : g != null && g.value ? (c == null ? void 0 : c(L)) || Re(k == null ? void 0 : k.value) || (u == null ? void 0 : u.value) : (a == null ? void 0 : a(L)) || Re(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
         });
         return {
-          isVisible: $,
-          hasInvalid: y,
-          hasValid: V,
-          hintContent: C
+          isVisible: B,
+          hasInvalid: C,
+          hasValid: S,
+          hintContent: O
         };
       },
       render() {
@@ -823,7 +1185,7 @@ function pe(o, a) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -831,474 +1193,833 @@ function pe(o, a) {
     }
   };
 }
-const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], to = {
+const Vo = ["for"], $o = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ko = {
   name: "VvCheckbox"
-}, oo = /* @__PURE__ */ N({
-  ...to,
-  props: Yt,
-  emits: Jt,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), {
-      disabled: s,
-      readonly: d,
-      valid: r,
-      invalid: f,
-      propsSwitch: p,
-      modelValue: i,
-      indeterminate: l,
-      isInGroup: c
-    } = Qt(e, a), u = computed(() => String(e.id || ne())), b = computed(() => v.value ? -1 : e.tabindex), g = ref(), y = computed(
-      () => e.uncheckedValue !== void 0 && !c.value
-    ), v = computed(() => s.value || d.value), V = computed(() => {
-      if (f.value === !0)
+}, Ao = /* @__PURE__ */ K({
+  ...ko,
+  props: go,
+  emits: _o,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), {
+      id: a,
+      disabled: c,
+      readonly: u,
+      valid: v,
+      invalid: m,
+      propsSwitch: d,
+      modelValue: l,
+      indeterminate: s,
+      isInGroup: p
+    } = So(e, n), g = useUniqueId(a), k = computed(() => S.value ? -1 : e.tabindex), C = ref(), b = computed(
+      () => e.uncheckedValue !== void 0 && !p.value
+    ), S = computed(() => c.value || u.value), I = computed(() => {
+      if (m.value === !0)
         return !0;
-      if (r.value === !0)
+      if (v.value === !0)
         return !1;
-    }), w = computed(() => y.value ? i.value === e.value : Array.isArray(i.value) ? contains(e.value, i.value) : equals(e.value, i.value)), $ = computed(() => !!(l.value || !w.value && y.value && e.uncheckedValue !== i.value)), M = computed(() => {
-      if (!y.value)
+    }), B = computed(() => b.value ? l.value === e.value : Array.isArray(l.value) ? contains(e.value, l.value) : equals(e.value, l.value)), E = computed(() => !!(s.value || !B.value && b.value && e.uncheckedValue !== l.value)), O = computed(() => {
+      if (!b.value)
         return ["string", "number", "boolean"].includes(typeof e.value) ? e.value : !0;
-    }), C = computed({
+    }), L = computed({
       get() {
-        return w.value;
+        return B.value;
       },
       set(T) {
-        if (y.value)
-          i.value = T ? e.value : e.uncheckedValue;
-        else if (Array.isArray(i.value) || c.value) {
-          const x = new Set(
-            Array.isArray(i.value) ? i.value : i.value !== void 0 ? [i.value] : []
+        if (b.value)
+          l.value = T ? e.value : e.uncheckedValue;
+        else if (Array.isArray(l.value) || p.value) {
+          const U = new Set(
+            Array.isArray(l.value) ? l.value : l.value !== void 0 ? [l.value] : []
           );
-          T ? x.add(e.value) : x.delete(e.value), i.value = [...x];
+          T ? U.add(e.value) : U.delete(e.value), l.value = [...U];
         } else
-          i.value = T ? e.value : void 0;
-        a("change", T);
+          l.value = T ? e.value : void 0;
+        n("change", T);
       }
-    }), { bemCssClasses: H } = useBemModifiers("vv-checkbox", {
-      switch: p,
-      valid: r,
-      invalid: f,
-      disabled: s,
-      readonly: d,
-      indeterminate: l
-    });
+    }), { modifiers: q } = toRefs(e), Q = useBemModifiers(
+      "vv-checkbox",
+      q,
+      computed(() => ({
+        switch: d.value,
+        valid: v.value,
+        invalid: m.value,
+        disabled: c.value,
+        readonly: u.value,
+        indeterminate: s.value
+      }))
+    );
     watchEffect(() => {
-      y.value && Array.isArray(i.value) && console.warn(
+      b.value && Array.isArray(l.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
     }), watch(
-      () => $.value,
+      () => E.value,
       (T) => {
-        T ? g.value.indeterminate = !0 : g.value.indeterminate = !1;
+        T ? C.value.indeterminate = !0 : C.value.indeterminate = !1;
       }
     ), onMounted(() => {
-      $.value && (g.value.indeterminate = !0);
+      E.value && (C.value.indeterminate = !0);
     });
-    const { HintSlot: X } = pe(e, n);
-    return (T, x) => (m(), _("label", {
-      class: U(t(H)),
-      for: t(u)
+    const { HintSlot: P } = Ve(e, r);
+    return (T, U) => (i(), y("label", {
+      class: ee(t(Q)),
+      for: t(g)
     }, [
-      ve(R("input", {
-        id: t(u),
+      Se(M("input", {
+        id: t(g),
         ref_key: "input",
-        ref: g,
-        "onUpdate:modelValue": x[0] || (x[0] = (J) => be(C) ? C.value = J : null),
+        ref: C,
+        "onUpdate:modelValue": U[0] || (U[0] = (te) => Ae(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, eo), [
-        [lt, t(C)]
+        disabled: t(S),
+        value: t(O),
+        tabindex: t(k),
+        "aria-invalid": t(I)
+      }, null, 8, $o), [
+        [$t, t(L)]
       ]),
-      k(T.$slots, "default", { value: t(i) }, () => [
-        q(B(T.label), 1)
+      $(T.$slots, "default", { value: t(l) }, () => [
+        Z(H(T.label), 1)
       ]),
-      Z(t(X), {
+      de(t(P), {
         class: "vv-checkbox__hint",
-        params: { value: t(i) }
+        params: { value: t(l) }
       }, null, 8, ["params"])
-    ], 10, Zt));
+    ], 10, Vo));
   }
-}), so = Ye, ao = ["update:modelValue", "change"], lo = ["textContent"], no = { class: "vv-checkbox-group__wrapper" }, ro = {
+}), Co = yt, wo = ["update:modelValue", "change"], Eo = ["textContent"], Io = { class: "vv-checkbox-group__wrapper" }, Po = {
   name: "VvCheckboxGroup"
-}, ks = /* @__PURE__ */ N({
-  ...ro,
-  props: so,
-  emits: ao,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), s = useVModel(e, "modelValue", a), { disabled: d, readonly: r, vertical: f, valid: p, invalid: i } = toRefs(e), l = {
-      key: Ke,
-      modelValue: s,
-      disabled: d,
-      readonly: r,
-      valid: p,
-      invalid: i
-    };
-    useProvideGroupState(l);
-    const { getOptionLabel: c, getOptionValue: u } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-checkbox-group", {
-      disabled: d,
-      readonly: r,
-      horizontal: computed(() => !f.value),
-      valid: p,
-      invalid: i
-    }), g = (v, V) => ({
-      id: `${e.name}_opt${V}`,
+}, al = /* @__PURE__ */ K({
+  ...Po,
+  props: Co,
+  emits: wo,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), a = useVModel(e, "modelValue", n), { disabled: c, readonly: u, vertical: v, valid: m, invalid: d, modifiers: l } = toRefs(e);
+    useProvideGroupState({
+      key: vt,
+      modelValue: a,
+      disabled: c,
+      readonly: u,
+      valid: m,
+      invalid: d
+    });
+    const { getOptionLabel: s, getOptionValue: p } = useOptions(e), g = useBemModifiers(
+      "vv-checkbox-group",
+      l,
+      computed(() => ({
+        disabled: c.value,
+        readonly: u.value,
+        horizontal: !v.value,
+        valid: m.value,
+        invalid: d.value
+      }))
+    ), k = (b, S) => ({
+      id: `${e.name}_opt${S}`,
       name: e.name,
-      label: c(v),
-      value: u(v)
-    }), { HintSlot: y } = pe(e, n);
-    return (v, V) => (m(), _("fieldset", {
-      class: U(t(b))
+      label: s(b),
+      value: p(b)
+    }), { HintSlot: C } = Ve(e, r);
+    return (b, S) => (i(), y("fieldset", {
+      class: ee(t(g))
     }, [
-      v.label ? (m(), _("legend", {
+      b.label ? (i(), y("legend", {
         key: 0,
-        textContent: B(v.label)
-      }, null, 8, lo)) : I("", !0),
-      R("div", no, [
-        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, $) => (m(), D(oo, O({ key: $ }, g(w, $)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
+        textContent: H(b.label)
+      }, null, 8, Eo)) : w("", !0),
+      M("div", Io, [
+        b.options.length > 0 ? (i(!0), y(ne, { key: 0 }, ke(b.options, (I, B) => (i(), W(Ao, G({ key: B }, k(I, B)), null, 16))), 128)) : $(b.$slots, "default", { key: 1 })
       ]),
-      Z(t(y), { class: "vv-checkbox-group__hint" })
+      de(t(C), { class: "vv-checkbox-group__hint" })
     ], 2));
   }
-}), io = {
-  ...Ve,
-  ...ke,
-  ...ce,
-  ...re,
+}), Oo = [
+  "update:modelValue",
+  "change:search",
+  "focus",
+  "blur"
+], Do = {
+  ...Le,
+  ...Te,
+  ...Ie,
+  ...Pe,
+  ...De,
+  ...qe,
+  ...Ce,
+  ...Oe,
+  ...ve,
+  ...Ke,
+  ...ze,
+  ...Xe,
+  ...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
+  },
+  /**
+   * 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
   },
-  labelNoResults: { type: String, default: "No results" },
+  /**
+   * Manage modelValue as string[] or object[]
+   */
   multiple: Boolean,
+  /**
+   * The max number of selected values
+   */
   maxValues: [Number, String],
-  unselectable: { type: Boolean, default: !0 }
-}, uo = ["id"], co = {
-  key: 0,
-  role: "option"
-}, po = ["aria-selected"], vo = ["for", "onClick"], mo = ["id", "type", "value", "checked", "disabled", "name"], fo = {
-  name: "VvDropdown"
-}, bo = /* @__PURE__ */ N({
-  ...fo,
-  props: io,
+  /**
+   * 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
+}, ot = ["listbox", "menu"], Bo = {
+  ...Me,
+  ...ve,
+  ...Fe,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: ot[1],
+    validator: (o) => ot.includes(o)
+  }
+}, Ro = ["id", "tabindex", "role", "aria-labelledby"], To = {
+  name: "VvDropdown",
+  inheritAttrs: !1
+}, St = /* @__PURE__ */ K({
+  ...To,
+  props: Bo,
   emits: ["update:modelValue"],
-  setup(o, { emit: a }) {
-    const e = o, n = computed(() => String(e.id || ne())), { modifiers: s, disabled: d } = toRefs(e), { getOptionLabel: r, getOptionValue: f } = useOptions(e), { bemCssClasses: p } = useBemModifiers("vv-dropdown", {
-      modifiers: s,
-      disabled: d
+  setup(o, { emit: n }) {
+    const e = o, { id: r } = toRefs(e), a = useUniqueId(r), c = useAttrs(), u = ref("auto"), v = ref("auto"), m = ref(null), d = ref(null), l = ref(null), s = ref(null), p = computed({
+      get: () => e.reference ?? m.value,
+      set: (f) => {
+        m.value = f;
+      }
+    }), g = computed(() => {
+      const f = [];
+      if (e.autoPlacement ? typeof e.autoPlacement == "boolean" ? f.push(Qe()) : f.push(
+        Qe(e.autoPlacement)
+      ) : e.flip && (typeof e.flip == "boolean" ? f.push(Ze()) : f.push(Ze(e.flip))), e.shift && (typeof e.shift == "boolean" ? f.push(et()) : f.push(et(e.shift))), e.size) {
+        const x = ({
+          availableWidth: ue,
+          availableHeight: he
+        }) => {
+          u.value = `${ue}px`, v.value = `${he}px`;
+        };
+        typeof e.size == "boolean" ? f.push(
+          tt({
+            apply: x
+          })
+        ) : f.push(
+          tt({
+            ...e.size,
+            apply: x
+          })
+        );
+      }
+      return e.offset && (f.push(He(Number(e.offset))), ["string", "number"].includes(typeof e.offset) ? f.push(He(Number(e.offset))) : f.push(He(e.offset))), e.arrow && f.push(
+        Dt({
+          element: l
+        })
+      ), f;
+    }), { x: k, y: C, strategy: b, middlewareData: S, placement: I } = Bt(
+      p,
+      d,
+      {
+        whileElementsMounted: Rt,
+        placement: e.placement,
+        middleware: g
+      }
+    ), B = computed(() => ({
+      position: b.value,
+      top: `${C.value ?? 0}px`,
+      left: `${k.value ?? 0}px`,
+      maxWidth: u.value,
+      maxHeight: v.value,
+      width: e.triggerWidth && p.value ? `${p.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 f, x, ue, he;
+      return ["bottom", "top"].includes(O.value) ? {
+        right: `${((f = S.value.arrow) == null ? void 0 : f.x) ?? 0}px`,
+        [O.value]: `${-(((x = l.value) == null ? void 0 : x.offsetWidth) ?? 0) / 2}px`
+      } : {
+        top: `${((ue = S.value.arrow) == null ? void 0 : ue.y) ?? 0}px`,
+        [O.value]: `${-(((he = l.value) == null ? void 0 : he.offsetWidth) ?? 0) / 2}px`
+      };
+    }), q = useVModel(e, "modelValue", n), Q = ref(!1), P = computed({
+      get: () => q.value ?? Q.value,
+      set: (f) => {
+        if (q.value === void 0) {
+          Q.value = f;
+          return;
+        }
+        q.value = f;
+      }
+    }), T = () => {
+      P.value = !0;
+    }, U = () => {
+      P.value = !1;
+    }, te = () => {
+      P.value = !P.value;
+    }, re = (f) => {
+      p.value = f;
+    };
+    watch(P, (f) => {
+      f && e.autofocusFirst && nextTick(() => {
+        const x = ae(
+          d.value
+        );
+        x.length > 0 && x[0].focus();
+      });
+    }), onClickOutside(
+      d,
+      () => {
+        e.autoClose && (P.value = !1);
+      },
+      { ignore: [p] }
+    );
+    const ie = computed(() => {
+      var f;
+      return ((f = p.value) == null ? void 0 : f.getAttribute("id")) ?? void 0;
+    }), A = computed(() => ({
+      "aria-controls": a.value,
+      "aria-haspopup": !0,
+      "aria-expanded": P.value
+    })), { component: oe, bus: fe } = useProvideDropdownTrigger({
+      reference: p,
+      id: a,
+      expanded: P,
+      aria: A
     });
-    function i(u) {
-      return Array.isArray(e.modelValue) ? contains(u, e.modelValue) || contains(f(u), e.modelValue) : equals(u, e.modelValue) || equals(f(u), e.modelValue);
-    }
-    function l(u) {
-      return typeof u == "string" || u.disabled === void 0 ? d.value : u.disabled;
+    fe.on("click", te);
+    const { role: se, modifiers: be } = toRefs(e), { itemRole: z } = useProvideDropdownItem({ role: se, expanded: P }), R = useBemModifiers(
+      "vv-dropdown",
+      be,
+      computed(() => ({
+        arrow: e.arrow
+      }))
+    ), { focused: X } = useFocusWithin(d);
+    function ae(f) {
+      return f ? [
+        ...f.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (x) => !x.hasAttribute("disabled") && !x.getAttribute("aria-hidden")
+      ) : [];
     }
-    function c(u) {
-      var g;
-      if (e.disabled)
-        return;
-      let b = u;
-      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(u, e.modelValue))
+    const me = () => {
+      nextTick(() => {
+        if (X.value) {
+          const f = ae(
+            d.value
+          );
+          if (f.length === 0 || !document.activeElement)
             return;
-          b = contains(u, e.modelValue) ? removeFromList(u, e.modelValue) : [...e.modelValue, u];
-        } else
-          b = [u];
-      else
-        e.unselectable && u === e.modelValue && (b = void 0);
-      a("update:modelValue", b);
-    }
-    return (u, b) => {
-      var g;
-      return m(), _("ul", {
-        id: t(n),
-        class: U(t(p)),
-        role: "listbox"
-      }, [
-        (g = u.options) != null && g.length ? I("", !0) : (m(), _("li", co, [
-          R("label", null, B(u.labelNoResults), 1)
-        ])),
-        (m(!0), _(de, null, fe(u.options, (y, v) => (m(), _("li", {
-          key: v,
-          role: "option",
-          "aria-selected": i(y)
-        }, [
-          R("label", {
-            for: `dropdown-${v}-${t(n)}`,
-            onClick: Re((V) => c(t(f)(y)), ["prevent"])
-          }, [
-            R("input", {
-              id: `dropdown-${v}-${t(n)}`,
-              type: u.multiple ? "checkbox" : "radio",
-              value: t(f)(y),
-              checked: i(y),
-              disabled: l(y),
-              name: u.name,
-              tabindex: "-1",
-              "aria-hidden": "true"
-            }, null, 8, mo),
-            q(" " + B(t(r)(y)), 1)
-          ], 8, vo)
-        ], 8, po))), 128))
-      ], 10, uo);
+          const x = f.indexOf(
+            document.activeElement
+          );
+          x < f.length - 1 ? f[x + 1].focus() : f[0].focus();
+        }
+      });
+    }, pe = () => {
+      nextTick(() => {
+        if (X.value) {
+          const f = ae(
+            d.value
+          );
+          if (f.length === 0 || !document.activeElement)
+            return;
+          const x = f.indexOf(
+            document.activeElement
+          );
+          x > 0 ? f[x - 1].focus() : f[f.length - 1].focus();
+        }
+      });
     };
+    return onKeyStroke("Escape", (f) => {
+      P.value && (f.preventDefault(), U());
+    }), onKeyStroke("ArrowDown", (f) => {
+      P.value && X.value && (f.preventDefault(), me());
+    }), onKeyStroke("ArrowUp", (f) => {
+      P.value && X.value && (f.preventDefault(), pe());
+    }), onKeyStroke([" ", "Enter"], (f) => {
+      P.value && X.value && (f.preventDefault(), document.activeElement.click());
+    }), (f, x) => (i(), y(ne, null, [
+      de(t(oe), null, {
+        default: ce(() => [
+          $(f.$slots, "default", F(j({ init: re, show: T, hide: U, toggle: te, expanded: t(P), aria: t(A) })))
+        ]),
+        _: 3
+      }),
+      de(rt, { name: f.transitionName }, {
+        default: ce(() => [
+          Se(M("div", {
+            ref_key: "floatingEl",
+            ref: d,
+            style: Je(t(B)),
+            class: ee(t(R))
+          }, [
+            e.arrow ? (i(), y("div", {
+              key: 0,
+              ref_key: "arrowEl",
+              ref: l,
+              style: Je(t(L)),
+              class: "vv-dropdown__arrow"
+            }, null, 4)) : w("", !0),
+            $(f.$slots, "before", F(j({ expanded: t(P) }))),
+            M("ul", G(t(c), {
+              id: t(a),
+              ref_key: "listEl",
+              ref: s,
+              tabindex: t(P) ? void 0 : -1,
+              role: t(se),
+              "aria-labelledby": t(ie),
+              class: "vv-dropdown__list"
+            }), [
+              $(f.$slots, "items", F(j({
+                role: t(z)
+              })))
+            ], 16, Ro),
+            $(f.$slots, "after", F(j({ expanded: t(P) })))
+          ], 6), [
+            [je, t(P)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
   }
-}), ho = {
-  ...Ve,
+}), xo = {
+  name: "VvDropdownItem"
+}, Vt = /* @__PURE__ */ K({
+  ...xo,
+  setup(o) {
+    const { role: n, expanded: e } = useInjectedDropdownItem(), r = ref(null);
+    useProvideDropdownAction({ expanded: e });
+    const a = useElementHover(r), { focused: c } = useFocus(r), { focused: u } = useFocusWithin(r);
+    return watch(a, (v) => {
+      v && (c.value = !0);
+    }), (v, m) => (i(), y("li", G({ role: t(n) }, {
+      ref_key: "element",
+      ref: r,
+      class: ["vv-dropdown__item", { "focus-visible": t(c) || t(u) }]
+    }), [
+      $(v.$slots, "default")
+    ], 16));
+  }
+}), Mo = {
+  ...Le,
+  ...ft,
+  ...mt,
+  ...Te,
+  ...Ie,
+  ...Pe,
+  ...De,
   ...qe,
-  ...je,
-  ...Ae,
-  ...ge,
-  ...ye,
-  ...Se,
+  ...Ce,
   ...Oe,
-  ...ce,
-  ..._e,
-  ...re,
-  ...ke,
-  ...Be,
-  ...De,
-  ...Pe,
+  ...ve,
+  ...Ke,
+  ...ze,
+  ...Xe,
+  ...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
-}, go = ["update:modelValue", "focus", "blur"], yo = ["for"], _o = { class: "vv-select__wrapper" }, So = ["id"], Vo = ["disabled", "hidden"], $o = ["disabled", "value"], Co = {
+}, Lo = ["update:modelValue", "focus", "blur"], No = ["for"], Ho = { class: "vv-select__wrapper" }, Go = {
+  key: 0,
+  class: "vv-select__input-before"
+}, Uo = { class: "vv-select__inner" }, Wo = ["id"], Fo = ["disabled", "hidden"], jo = ["disabled", "value"], qo = {
+  key: 1,
+  class: "vv-select__input-after"
+}, Ko = {
   name: "VvSelect"
-}, ko = /* @__PURE__ */ N({
-  ...Co,
-  props: ho,
-  emits: go,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), s = ref(), { HintSlot: d, hasHint: r, hasInvalid: f } = pe(e, n), {
-      modifiers: p,
-      disabled: i,
-      readonly: l,
-      loading: c,
-      icon: u,
-      iconPosition: b,
-      invalid: g,
-      valid: y,
-      floating: v,
-      multiple: V
-    } = toRefs(e), w = computed(() => String(e.id || ne())), $ = computed(() => `${w.value}-hint`), { focused: M } = useComponentFocus(s, a), C = useElementVisibility(s);
-    watch(C, (P) => {
-      P && e.autofocus && (M.value = !0);
+}, zo = /* @__PURE__ */ K({
+  ...Ko,
+  props: Mo,
+  emits: Lo,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), a = ref(), { HintSlot: c, hasHint: u, hasInvalid: v } = Ve(e, r), {
+      id: m,
+      modifiers: d,
+      disabled: l,
+      readonly: s,
+      loading: p,
+      icon: g,
+      iconPosition: k,
+      invalid: C,
+      valid: b,
+      floating: S,
+      multiple: I
+    } = toRefs(e), B = useUniqueId(m), E = computed(() => `${B.value}-hint`), { focused: O } = useComponentFocus(a, n), L = useElementVisibility(a);
+    watch(L, (R) => {
+      R && e.autofocus && (O.value = !0);
     });
-    const { hasIcon: H, hasIconLeft: X, hasIconRight: T } = useComponentIcon(
-      u,
-      b
-    ), x = computed(() => !isEmpty(e.modelValue)), J = computed(() => e.disabled || e.readonly), ee = computed(() => J.value ? -1 : e.tabindex), te = computed(() => {
+    const { hasIcon: q, hasIconBefore: Q, 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: i,
-      readonly: l,
-      iconLeft: X,
-      iconRight: T,
-      dirty: x,
-      focus: M,
-      floating: v,
-      multiple: V
-    }), ie = computed(() => ({
+    }), ie = useBemModifiers(
+      "vv-select",
+      d,
+      computed(() => ({
+        valid: b.value,
+        invalid: C.value,
+        loading: p.value,
+        disabled: l.value,
+        readonly: s.value,
+        "icon-before": Q.value,
+        "icon-after": P.value,
+        dirty: T.value,
+        focus: O.value,
+        floating: S.value,
+        multiple: I.value
+      }))
+    ), A = 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 ? $.value : void 0,
-      "aria-errormessage": f.value ? $.value : void 0
-    })), { getOptionLabel: oe, getOptionValue: se } = useOptions(e);
-    function ae(P) {
-      return typeof P == "string" || P.disabled === void 0 ? i.value : P.disabled;
-    }
-    const W = computed({
+      "aria-invalid": re.value,
+      "aria-describedby": !v.value && u.value ? E.value : void 0,
+      "aria-errormessage": v.value ? E.value : void 0
+    })), oe = computed(() => ({
+      valid: e.valid,
+      invalid: e.invalid,
+      modelValue: e.modelValue
+    })), { getOptionLabel: fe, getOptionValue: se, getOptionDisabled: be } = useOptions(e), z = computed({
       get: () => e.modelValue,
-      set: (P) => {
-        Array.isArray(P) && (P = P.filter((j) => j !== void 0)), a("update:modelValue", P);
+      set: (R) => {
+        Array.isArray(R) && (R = R.filter((X) => X !== void 0)), n("update:modelValue", R);
       }
     });
-    return (P, j) => (m(), _("div", {
-      class: U(t(Q))
+    return (R, X) => (i(), y("div", {
+      class: ee(t(ie))
     }, [
-      P.label ? (m(), _("label", {
+      R.label ? (i(), y("label", {
         key: 0,
-        for: t(w)
-      }, B(P.label), 9, yo)) : I("", !0),
-      R("div", _o, [
-        k(P.$slots, "before", {}, () => [
-          t(X) ? (m(), D(G, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
-        ]),
-        ve(R("select", O({
-          id: t(w),
-          ref_key: "select",
-          ref: s,
-          "onUpdate:modelValue": j[0] || (j[0] = (A) => be(W) ? W.value = A : null)
-        }, t(ie)), [
-          P.placeholder ? (m(), _("option", {
+        for: t(B)
+      }, H(R.label), 9, No)) : w("", !0),
+      M("div", Ho, [
+        R.$slots.before ? (i(), y("div", Go, [
+          $(R.$slots, "before", F(j(t(oe))))
+        ])) : w("", !0),
+        M("div", Uo, [
+          t(Q) ? (i(), W(J, G({
             key: 0,
-            value: void 0,
-            disabled: !P.unselectable,
-            hidden: !P.unselectable
-          }, B(P.placeholder), 9, Vo)) : I("", !0),
-          (m(!0), _(de, null, fe(P.options, (A, L) => (m(), _("option", {
-            key: L,
-            disabled: ae(A),
-            value: t(se)(A)
-          }, B(t(oe)(A)), 9, $o))), 128))
-        ], 16, So), [
-          [nt, t(W)]
+            class: "vv-select__icon"
+          }, t(q)), null, 16)) : w("", !0),
+          Se(M("select", G({
+            id: t(B),
+            ref_key: "select",
+            ref: a,
+            "onUpdate:modelValue": X[0] || (X[0] = (ae) => Ae(z) ? z.value = ae : null)
+          }, t(A)), [
+            R.placeholder ? (i(), y("option", {
+              key: 0,
+              value: void 0,
+              disabled: !R.unselectable,
+              hidden: !R.unselectable
+            }, H(R.placeholder), 9, Fo)) : w("", !0),
+            (i(!0), y(ne, null, ke(R.options, (ae, me) => (i(), y("option", {
+              key: me,
+              disabled: t(be)(ae),
+              value: t(se)(ae)
+            }, H(t(fe)(ae)), 9, jo))), 128))
+          ], 16, Wo), [
+            [kt, t(z)]
+          ]),
+          t(P) ? (i(), W(J, G({
+            key: 1,
+            class: "vv-select__icon vv-select__icon-after"
+          }, t(q)), null, 16)) : w("", !0)
         ]),
-        k(P.$slots, "after", {}, () => [
-          t(T) ? (m(), D(G, F(O({ key: 0 }, t(H))), null, 16)) : I("", !0)
-        ])
+        R.$slots.after ? (i(), y("div", qo, [
+          $(R.$slots, "after", F(j(t(oe))))
+        ])) : w("", !0)
       ]),
-      Z(t(d), {
-        id: t($),
+      de(t(c), {
+        id: t(E),
         class: "vv-select__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), Ao = [
-  "update:modelValue",
-  "change:search",
-  "focus",
-  "blur"
-], Po = {
-  ...Ve,
-  ...Ae,
-  ...ge,
-  ...ye,
-  ...Se,
-  ...Oe,
-  ...ce,
-  ..._e,
-  ...re,
-  ...ke,
-  ...Be,
-  ...De,
-  ...Pe,
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  label: String,
-  labelNoResults: { type: String, default: "No results" },
-  placeholder: String,
-  searchable: Boolean,
-  searchPlaceholder: String,
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  multiple: Boolean,
-  maxValues: [Number, String],
-  separator: { type: String, default: ", " },
-  native: Boolean
-}, wo = ["id"], Io = ["id", "for"], Eo = ["tabindex"], Ro = ["id", "placeholder"], Oo = {
-  name: "VvCombobox"
-}, As = /* @__PURE__ */ N({
-  ...Oo,
-  props: Po,
-  emits: Ao,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), { HintSlot: s } = pe(e, n), d = ref(), r = ref(), { focused: f } = useComponentFocus(d, a), p = computed(() => String(e.id || ne())), i = ref(""), l = refDebounced(
-      i,
+}), Xo = ["id"], Yo = ["id", "for"], Jo = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"], Qo = {
+  key: 0,
+  class: "vv-select__input-before"
+}, Zo = { class: "vv-select__inner" }, ea = ["aria-labelledby", "tabindex"], ta = ["aria-label", "onClick"], oa = {
+  key: 1,
+  class: "vv-select__input-after"
+}, aa = { class: "vv-dropdown-action__hint" }, la = {
+  name: "VvCombobox",
+  components: { VvDropdown: St, VvDropdownItem: Vt }
+}, ll = /* @__PURE__ */ K({
+  ...la,
+  props: Do,
+  emits: Oo,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), { HintSlot: a } = Ve(e, r), c = ref(null), u = ref(null), v = ref(null), { focused: m } = useComponentFocus(c, n), { focused: d } = useFocusWithin(v);
+    watch(m, (_) => {
+      if (e.autoOpen) {
+        if (_ && !p.value) {
+          k();
+          return;
+        }
+        !_ && p.value && !d.value && C();
+      }
+    }), watch(d, (_) => {
+      !m.value && !_ && p.value && C();
+    });
+    const l = ref(""), s = refDebounced(
+      l,
       Number(e.debounceSearch)
-    ), c = ref(!1), {
-      icon: u,
-      iconPosition: b,
-      modifiers: g,
-      disabled: y,
-      readonly: v,
-      loading: V,
-      valid: w,
-      invalid: $,
-      floating: M
-    } = toRefs(e);
+    );
     watch(
-      l,
-      () => a("change:search", l.value)
+      s,
+      () => n("change:search", s.value)
     );
-    const { hasIcon: C, hasIconLeft: H, hasIconRight: X } = useComponentIcon(
-      u,
-      b
-    ), T = computed(() => !isEmpty(e.modelValue)), x = 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: $,
-      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(l.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(d, () => {
-      d.value.open = !1;
+    const p = ref(!1), g = () => {
+      e.disabled || e.readonly || (p.value = !p.value);
+    }, k = () => {
+      e.disabled || e.readonly || p.value || (p.value = !0);
+    }, C = () => {
+      e.disabled || e.readonly || !p.value || (p.value = !1);
+    };
+    watch(p, (_) => {
+      T.value && nextTick(() => {
+        if (_) {
+          u.value && u.value.focus();
+          return;
+        }
+        l.value = "";
+      });
     });
-    function ae(A) {
-      const L = A.target;
-      c.value = L.open;
-    }
-    function W(A) {
-      d.value && !e.multiple && (d.value.open = !1), a("update:modelValue", A);
+    const {
+      id: b,
+      icon: S,
+      iconPosition: I,
+      modifiers: B,
+      disabled: E,
+      readonly: O,
+      loading: L,
+      valid: q,
+      invalid: Q,
+      floating: P,
+      searchable: T
+    } = toRefs(e), U = useUniqueId(b), te = computed(() => `${U.value}-hint`), re = computed(() => `${U.value}-dropdown`), ie = computed(() => `${U.value}-search`), A = computed(() => `${U.value}-label`), { hasIcon: oe, hasIconBefore: fe, hasIconAfter: se } = useComponentIcon(
+      S,
+      I
+    ), be = 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: q.value,
+        invalid: Q.value,
+        dirty: be.value,
+        focus: m.value,
+        floating: P.value
+      }))
+    ), X = computed(
+      () => e.searchable ? f.value : e.options
+    ), { getOptionLabel: ae, getOptionValue: me, getOptionDisabled: pe } = useOptions(e), f = computed(() => {
+      var _;
+      return (_ = e.options) == null ? void 0 : _.filter((Y) => ae(Y).toLowerCase().includes(s.value.toLowerCase().trim()));
+    });
+    function x(_) {
+      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(
+        (Y) => _.includes(me(Y))
+      );
+    }), he = computed(() => ue.value.map((_) => ae(_)).join(e.separator));
+    watch(ue, () => {
+      !e.multiple && e.autoClose && C();
+    });
+    const Ne = () => {
+      e.autoOpen ? k() : g();
+    }, Ee = (_) => {
+      var $e;
+      if (e.disabled || e.readonly)
+        return;
+      const Y = me(_);
+      let N = Y;
+      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(Y, e.modelValue))
+            return;
+          N = contains(Y, e.modelValue) ? removeFromList(Y, e.modelValue) : [...e.modelValue, Y];
+        } else
+          N = [Y];
+      else
+        e.unselectable && Y === e.modelValue && (N = void 0);
+      n("update:modelValue", N);
+    }, D = computed(() => ({
+      id: U.value,
       name: e.name,
-      tabindex: x.value,
-      valid: w.value,
+      tabindex: z.value,
+      valid: q.value,
       validLabel: e.validLabel,
-      invalid: $.value,
+      invalid: Q.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: X.value,
       labelKey: e.labelKey,
       valueKey: e.valueKey,
       icon: e.icon,
@@ -1309,142 +2030,263 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
       label: e.label,
       placeholder: e.placeholder,
       modelValue: e.modelValue
+    })), le = computed(() => ({
+      id: re.value,
+      reference: v.value,
+      placement: e.placement,
+      transitionName: e.transitionName,
+      offset: e.offset,
+      shift: e.shift,
+      flip: e.flip,
+      autoPlacement: e.autoPlacement,
+      arrow: e.arrow,
+      autoClose: e.autoClose,
+      autofocusFirst: 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(ko, O({ key: 1 }, t(j), {
-      "onUpdate:modelValue": L[4] || (L[4] = (z) => a("update:modelValue", z))
-    }), null, 16)) : (m(), _("div", {
+    return onKeyStroke([" ", "Enter"], (_) => {
+      e.autoOpen || !p.value && m.value && (_.preventDefault(), _.stopImmediatePropagation(), g());
+    }), (_, Y) => _.native ? (i(), W(zo, G({ key: 1 }, t(D), {
+      "onUpdate:modelValue": Y[2] || (Y[2] = (N) => n("update:modelValue", N))
+    }), null, 16)) : (i(), y("div", {
       key: 0,
-      id: t(p),
-      class: U(t(J))
+      id: t(U),
+      class: ee(t(R))
     }, [
-      A.label ? (m(), _("label", {
+      _.label ? (i(), y("label", {
         key: 0,
-        id: `${t(p)}-label`,
-        for: A.searchable && t(c) ? `${t(p)}-input` : void 0
-      }, B(A.label), 9, Io)) : I("", !0),
-      R("details", {
-        ref_key: "dropdown",
-        ref: d,
-        class: "vv-select__wrapper",
-        onClick: L[2] || (L[2] = (z) => t(y) || t(v) ? z.preventDefault() : null),
-        onKeyup: L[3] || (L[3] = Le((z) => t(d).open = !1, ["esc"])),
-        onToggle: ae
+        id: t(A),
+        for: t(T) ? t(ie) : void 0
+      }, H(_.label), 9, Yo)) : w("", !0),
+      M("div", {
+        ref_key: "wrapperEl",
+        ref: v,
+        class: "vv-select__wrapper"
       }, [
-        R("summary", {
-          class: "vv-select__input",
-          tabindex: t(x),
-          onKeyup: L[1] || (L[1] = Le((z) => A.searchable ? z.preventDefault() : null, ["space"]))
-        }, [
-          k(A.$slots, "before", {}, () => [
-            t(H) ? (m(), D(G, O({
-              key: 0,
-              class: "vv-select__icon-left"
-            }, t(C)), null, 16)) : I("", !0)
+        de(St, G({
+          modelValue: t(p),
+          "onUpdate:modelValue": Y[1] || (Y[1] = (N) => Ae(p) ? p.value = N : null)
+        }, t(le), { role: "listbox" }), At({
+          default: ce(({ aria: N }) => [
+            _.$slots.before ? (i(), y("div", Qo, [
+              $(_.$slots, "before", F(j(t(we))))
+            ])) : w("", !0),
+            M("div", Zo, [
+              t(fe) ? (i(), W(J, G({
+                key: 0,
+                class: "vv-select__icon"
+              }, t(oe)), null, 16)) : w("", !0),
+              M("div", G({
+                ref_key: "inputEl",
+                ref: c
+              }, N, {
+                "aria-labelledby": t(A),
+                class: "vv-select__input",
+                role: "combobox",
+                tabindex: t(z),
+                onClickPassive: Ne
+              }), [
+                $(_.$slots, "value", F(j({ selectedOptions: t(ue), onInput: Ee })), () => [
+                  t(he) ? (i(), y(ne, { key: 0 }, [
+                    _.badges ? (i(!0), y(ne, { key: 1 }, ke(t(ue), ($e, Ye) => (i(), W(Yt, {
+                      key: Ye,
+                      modifiers: _.badgeModifiers,
+                      class: "vv-select__badge"
+                    }, {
+                      default: ce(() => [
+                        Z(H(t(ae)($e)) + " ", 1),
+                        _.unselectable && !t(O) && !t(E) ? (i(), y("button", {
+                          key: 0,
+                          "aria-label": _.deselectLabel,
+                          onClick: st((Ka) => Ee($e), ["stop"])
+                        }, [
+                          de(J, { name: "close" })
+                        ], 8, ta)) : w("", !0)
+                      ]),
+                      _: 2
+                    }, 1032, ["modifiers"]))), 128)) : (i(), y(ne, { key: 0 }, [
+                      Z(H(t(he)), 1)
+                    ], 64))
+                  ], 64)) : (i(), y(ne, { key: 1 }, [
+                    Z(H(_.placeholder), 1)
+                  ], 64))
+                ])
+              ], 16, ea),
+              t(se) ? (i(), W(J, G({
+                key: 1,
+                class: "vv-select__icon vv-select__icon-after"
+              }, t(oe)), null, 16)) : w("", !0)
+            ]),
+            _.$slots.after ? (i(), y("div", oa, [
+              $(_.$slots, "after", F(j(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(i) ? i.value = z : null),
-            role: "combobox",
-            type: "search",
-            placeholder: A.searchPlaceholder
-          }, null, 8, Ro)), [
-            [xe, t(i)]
-          ]) : (m(), _(de, { key: 1 }, [
-            q(B(t(se) || A.placeholder), 1)
-          ], 64)),
-          k(A.$slots, "after", {}, () => [
-            t(X) ? (m(), D(G, O({
-              key: 0,
-              class: "vv-select__icon-right"
-            }, t(C)), null, 16)) : I("", !0)
-          ])
-        ], 40, Eo),
-        Z(bo, O({
-          id: `${t(p)}-dropdown`
-        }, t(P), { "onUpdate:modelValue": W }), null, 16, ["id"])
-      ], 544),
-      Z(t(s), { class: "vv-select__hint" })
-    ], 10, wo));
+          items: ce(() => [
+            (i(!0), y(ne, null, ke(t(f), (N, $e) => (i(), W(Vt, {
+              key: $e,
+              class: ee(["vv-dropdown-action", {
+                disabled: t(pe)(N),
+                selected: x(N),
+                "vv-dropdown-action--unselectable": _.unselectable && x(N)
+              }]),
+              tabindex: t(pe)(N) ? -1 : 0,
+              "aria-selected": x(N),
+              "aria-disabled": t(pe)(N),
+              onClickPassive: (Ye) => Ee(N)
+            }, {
+              default: ce(() => [
+                $(_.$slots, "option", F(j({
+                  option: N,
+                  selectedOptions: t(ue),
+                  selected: x(N),
+                  disabled: t(pe)(N)
+                })), () => [
+                  Z(H(t(ae)(N)) + " ", 1),
+                  M("span", aa, [
+                    x(N) ? (i(), y(ne, { key: 0 }, [
+                      Z(H(_.unselectable ? _.pressToDeselectLabel : _.selectedLabel), 1)
+                    ], 64)) : t(pe)(N) ? w("", !0) : (i(), y(ne, { key: 1 }, [
+                      Z(H(_.pressToSelectLabel), 1)
+                    ], 64))
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["tabindex", "class", "aria-selected", "aria-disabled", "onClickPassive"]))), 128))
+          ]),
+          _: 2
+        }, [
+          t(T) ? {
+            name: "before",
+            fn: ce(() => [
+              t(T) ? Se((i(), y("input", {
+                key: 0,
+                id: t(ie),
+                ref_key: "inputSearchEl",
+                ref: u,
+                "onUpdate:modelValue": Y[0] || (Y[0] = (N) => Ae(l) ? l.value = N : null),
+                "aria-autocomplete": "list",
+                "aria-controls": t(re),
+                "aria-labelledby": t(A),
+                "aria-describedby": t(te),
+                autocomplete: "off",
+                spellcheck: "false",
+                type: "search",
+                class: "vv-dropdown__search",
+                placeholder: _.searchPlaceholder
+              }, null, 8, Jo)), [
+                [je, t(p)],
+                [it, t(l)]
+              ]) : w("", !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["modelValue"])
+      ], 512),
+      de(t(a), {
+        id: t(te),
+        class: "vv-select__hint"
+      }, null, 8, ["id"])
+    ], 10, Xo));
   }
-}), Bo = ["open", "close", "update:modelValue"], Do = {
-  id: { type: String, required: !0 },
+}), sa = ["open", "close", "update:modelValue"], na = {
+  ...Me,
+  /**
+   * 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 }
-}, To = {
+}, ra = {
   key: 0,
   class: "vv-dialog__header"
-}, Lo = ["onClick"], Mo = { class: "vv-dialog__content" }, No = {
+}, ia = { class: "vv-dialog__content" }, ua = {
   key: 1,
   class: "vv-dialog__footer"
-}, Ho = {
+}, da = {
   name: "VvDialog"
-}, Ps = /* @__PURE__ */ N({
-  ...Ho,
-  props: Do,
-  emits: Bo,
-  setup(o, { emit: a }) {
-    const e = o, n = useVModel(e, "modelValue", a), s = ref(!0), d = ref(null), r = computed(() => {
-      const { id: c } = e;
+}, sl = /* @__PURE__ */ K({
+  ...da,
+  props: na,
+  emits: sa,
+  setup(o, { emit: n }) {
+    const e = o, r = useVModel(e, "modelValue", n), a = ref(!0), c = ref(null), u = computed(() => {
+      const { id: s } = e;
       return {
-        id: c,
-        open: s.value
+        id: s,
+        open: a.value
       };
-    }), f = computed(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), p = computed(() => `vv-dialog--${e.transition}`), i = {
+    }), v = computed(() => e.size ? ["vv-dialog", `vv-dialog--${e.size}`] : "vv-dialog"), m = computed(() => `vv-dialog--${e.transition}`), d = {
       "before-enter": () => {
-        s.value = !0, a("open");
+        a.value = !0, n("open");
       },
       "after-leave": () => {
-        s.value = !1, a("close");
+        a.value = !1, n("close");
       }
     };
-    onClickOutside(d, () => {
-      e.autoClose && (n.value = !1);
+    onClickOutside(c, () => {
+      e.autoClose && (r.value = !1);
     });
     function l() {
-      n.value = !1;
+      r.value = !1;
     }
-    return (c, u) => (m(), D(rt, O({ name: t(p) }, it(i)), {
-      default: he(() => [
-        ve(R("dialog", O(t(r), { class: t(f) }), [
-          R("article", {
+    return onKeyStroke("Escape", (s) => {
+      r.value && (s.preventDefault(), l());
+    }), (s, p) => (i(), W(rt, G({ name: t(m) }, Ct(d)), {
+      default: ce(() => [
+        Se(M("dialog", G(t(u), { class: t(v) }), [
+          M("article", {
             ref_key: "modalWrapper",
-            ref: d,
+            ref: c,
             class: "vv-dialog__wrapper"
           }, [
-            c.$slots.header || c.title ? (m(), _("header", To, [
-              k(c.$slots, "header", {}, () => [
-                q(B(c.title) + " ", 1),
-                R("button", {
+            s.$slots.header || s.title ? (i(), y("header", ra, [
+              $(s.$slots, "header", {}, () => [
+                Z(H(s.title) + " ", 1),
+                M("button", {
                   type: "button",
                   "aria-label": "Close",
                   class: "vv-dialog__close",
-                  onClick: Re(l, ["prevent"])
+                  onClickPassive: l
                 }, [
-                  Z(G, { name: "close" })
-                ], 8, Lo)
+                  de(J, { name: "close" })
+                ], 32)
               ])
-            ])) : I("", !0),
-            R("div", Mo, [
-              k(c.$slots, "default")
+            ])) : w("", !0),
+            M("div", ia, [
+              $(s.$slots, "default")
             ]),
-            c.$slots.footer ? (m(), _("footer", No, [
-              k(c.$slots, "footer")
-            ])) : I("", !0)
+            s.$slots.footer ? (i(), y("footer", ua, [
+              $(s.$slots, "footer")
+            ])) : w("", !0)
           ], 512)
         ], 16), [
-          [ut, t(n)]
+          [je, t(r)]
         ])
       ]),
       _: 3
     }, 16, ["name"]));
   }
-}), S = {
+}), V = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -1458,61 +2300,121 @@ const Zt = ["for"], eo = ["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"
-}, Go = ["update:modelValue", "focus", "blur", "keyup"], xo = {
-  ...ze,
+}, ca = ["update:modelValue", "focus", "blur", "keyup"], va = {
+  ...bt,
+  /**
+   * 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"
   }
-}, Ne = defineComponent({
+}, at = defineComponent({
   components: {
-    VvIcon: G
+    VvIcon: J
   },
   props: {
     disabled: {
@@ -1529,29 +2431,29 @@ const Zt = ["for"], eo = ["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: a }) {
-    const e = ref(!1), n = computed(
+  setup(o, { emit: n }) {
+    const e = ref(!1), r = computed(
       () => e.value ? o.iconHide : o.iconShow
     );
-    function s(d) {
-      d == null || d.stopPropagation(), o.disabled || (e.value = !e.value, a("toggle-password", e.value));
+    function a(c) {
+      c == null || c.stopPropagation(), o.disabled || (e.value = !e.value, n("toggle-password", e.value));
     }
     return {
       active: e,
-      activeIcon: n,
-      onClick: s
+      activeIcon: r,
+      onClick: a
     };
   },
   render() {
-    const o = h(G, {
+    const o = h(J, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
@@ -1567,9 +2469,9 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
       o
     );
   }
-}), Ie = defineComponent({
+}), Ge = defineComponent({
   components: {
-    VvIcon: G
+    VvIcon: J
   },
   props: {
     disabled: {
@@ -1586,12 +2488,12 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
     }
   },
   emits: ["step-up", "step-down"],
-  setup(o, { emit: a }) {
+  setup(o, { emit: n }) {
     const e = computed(() => o.mode === "up");
     return {
       isUp: e,
-      onClick: (s) => {
-        s == null || s.stopPropagation(), o.disabled || a(e.value ? "step-up" : "step-down");
+      onClick: (a) => {
+        a == null || a.stopPropagation(), o.disabled || n(e.value ? "step-up" : "step-down");
       }
     };
   },
@@ -1606,9 +2508,9 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
       onClick: this.onClick
     });
   }
-}), He = defineComponent({
+}), lt = defineComponent({
   components: {
-    VvIcon: G
+    VvIcon: J
   },
   props: {
     disabled: {
@@ -1625,16 +2527,16 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
     }
   },
   emits: ["clear"],
-  setup(o, { emit: a }) {
-    function e(n) {
-      n == null || n.stopPropagation(), o.disabled || a("clear");
+  setup(o, { emit: n }) {
+    function e(r) {
+      r == null || r.stopPropagation(), o.disabled || n("clear");
     }
     return {
       onClick: e
     };
   },
   render() {
-    const o = h(G, {
+    const o = h(J, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
@@ -1651,47 +2553,47 @@ const Zt = ["for"], eo = ["id", "name", "disabled", "value", "tabindex", "aria-i
     );
   }
 });
-function Ee(o, a) {
+function Ue(o, n) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: G,
-      VvInputPasswordAction: Ne,
-      VvInputStepAction: Ie,
-      VvInputClearAction: He
+      VvIcon: J,
+      VvInputPasswordAction: at,
+      VvInputStepAction: Ge,
+      VvInputClearAction: lt
     },
     setup() {
       return {
-        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
+        isDisabled: computed(() => n.disabled || n.readonly),
+        labelStepUp: n.labelStepUp,
+        labelStepDown: n.labelStepDown,
+        labelShowPassword: n.labelShowPassword,
+        labelHidePassword: n.labelHidePassword,
+        labelClear: n.labelClear,
+        iconShowPassword: n.iconShowPassword,
+        iconHidePassword: n.iconHidePassword
       };
     },
     render() {
       let e = null;
       switch (o) {
-        case S.SEARCH: {
-          const { onClear: n } = this.$attrs;
+        case V.SEARCH: {
+          const { onClear: r } = this.$attrs;
           e = [
-            h(He, {
+            h(lt, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: n
+              onClear: r
             })
           ];
           break;
         }
-        case S.PASSWORD: {
-          const { onTogglePassword: n } = this.$attrs;
+        case V.PASSWORD: {
+          const { onTogglePassword: r } = this.$attrs;
           e = [
-            h(Ne, {
+            h(at, {
               disabled: this.isDisabled,
-              onTogglePassword: n,
+              onTogglePassword: r,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -1700,22 +2602,22 @@ function Ee(o, a) {
           ];
           break;
         }
-        case S.NUMBER: {
-          const { onStepUp: n, onStepDown: s } = this.$attrs;
+        case V.NUMBER: {
+          const { onStepUp: r, onStepDown: a } = this.$attrs;
           e = [
-            h(Ie, {
+            h(Ge, {
               mode: "up",
-              disabled: this.isDisabled || a.max !== void 0 && a.modelValue === a.max,
+              disabled: this.isDisabled || n.max !== void 0 && n.modelValue === n.max,
               label: this.labelStepUp,
-              onStepUp: n,
-              onStepDown: s
+              onStepUp: r,
+              onStepDown: a
             }),
-            h(Ie, {
+            h(Ge, {
               mode: "down",
-              disabled: this.isDisabled || a.min !== void 0 && a.modelValue === a.min,
+              disabled: this.isDisabled || n.min !== void 0 && n.modelValue === n.min,
               label: this.labelStepDown,
-              onStepUp: n,
-              onStepDown: s
+              onStepUp: r,
+              onStepDown: a
             })
           ];
           break;
@@ -1725,378 +2627,454 @@ function Ee(o, a) {
     }
   };
 }
-const Uo = ["for"], Fo = { class: "vv-input-text__wrapper" }, Ko = ["id"], Wo = {
+const pa = ["for"], fa = { class: "vv-input-text__wrapper" }, ma = {
   key: 0,
+  class: "vv-input-text__input-before"
+}, ba = { class: "vv-input-text__inner" }, ha = ["id"], ya = {
+  key: 1,
+  class: "vv-input-text__input-after"
+}, ga = {
+  key: 2,
   class: "vv-input-text__limit"
-}, qo = {
+}, _a = {
   name: "VvInputText"
-}, ws = /* @__PURE__ */ N({
-  ...qo,
-  props: xo,
-  emits: Go,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), s = ref(), {
-      icon: d,
-      iconPosition: r,
-      label: f,
-      modelValue: p,
-      count: i,
-      valid: l,
-      invalid: c,
-      loading: u
-    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+}, nl = /* @__PURE__ */ K({
+  ..._a,
+  props: va,
+  emits: ca,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), a = ref(), {
+      id: c,
+      icon: u,
+      iconPosition: v,
+      label: m,
+      modelValue: d,
+      count: l,
+      valid: s,
+      invalid: p,
+      loading: g
+    } = toRefs(e), k = useUniqueId(c), C = computed(() => `${k.value}-hint`), b = computed(
       () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), v = useDebouncedInput(p, a, e.debounce), { focused: V } = useComponentFocus(s, a), w = useElementVisibility(s);
-    watch(w, (E) => {
-      E && e.autofocus && (V.value = !0);
+    ), S = useDebouncedInput(d, n, e.debounce), { focused: I } = useComponentFocus(a, n), B = useElementVisibility(a);
+    watch(B, (D) => {
+      D && e.autofocus && (I.value = !0);
     });
-    const $ = ref(!1), M = computed(() => e.type === S.PASSWORD), C = () => {
-      $.value = !$.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 = () => {
-      ae.value && (s.value.stepUp(), v.value = unref(s).value);
-    }, x = () => {
-      ae.value && (s.value.stepDown(), v.value = unref(s).value);
-    }, J = computed(() => e.type === S.SEARCH), ee = () => {
-      v.value = void 0;
-    }, { hasIconLeft: te, hasIconRight: Q, hasIcon: ie } = useComponentIcon(
-      d,
-      r
+    const E = ref(!1), O = computed(() => e.type === V.PASSWORD), L = () => {
+      E.value = !E.value;
+    }, q = computed(
+      () => e.type === V.TIME || e.type === V.DATETIME_LOCAL || e.type === V.DATE || e.type === V.WEEK || e.type === V.MONTH
+    ), Q = computed(() => e.type === V.NUMBER), P = () => {
+      se.value && (a.value.stepUp(), S.value = unref(a).value);
+    }, T = () => {
+      se.value && (a.value.stepDown(), S.value = unref(a).value);
+    }, U = computed(() => e.type === V.SEARCH), te = () => {
+      S.value = void 0;
+    }, { hasIcon: re, hasIconBefore: ie, hasIconAfter: A } = useComponentIcon(
+      u,
+      v
     ), 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
-    }), ae = computed(() => !e.disabled && !e.readonly), W = computed(
-      () => ae.value ? e.tabindex : -1
-    ), P = computed(() => !isEmpty(p)), j = computed(() => {
-      if (c.value === !0)
+    }), se = computed(() => !e.disabled && !e.readonly), be = computed(
+      () => se.value ? e.tabindex : -1
+    ), z = computed(() => !isEmpty(d)), R = computed(() => {
+      if (p.value === !0)
         return !0;
-      if (l.value === !0)
+      if (s.value === !0)
         return !1;
-    }), { bemCssClasses: A } = useBemModifiers("vv-input-text", {
-      modifiers: e.modifiers,
-      valid: l,
-      invalid: c,
-      loading: u,
-      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 && $.value || H.value && !P.value && !V.value ? S.TEXT : e.type)(), K = {
-        type: E,
+    }), { modifiers: X } = toRefs(e), ae = useBemModifiers(
+      "vv-input-text",
+      X,
+      computed(() => ({
+        valid: s.value,
+        invalid: p.value,
+        loading: g.value,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "icon-before": ie.value,
+        "icon-after": A.value || !isEmpty(oe),
+        floating: e.floating && !isEmpty(e.label),
+        dirty: z.value,
+        focus: I.value
+      }))
+    ), me = computed(() => {
+      const D = (() => O.value && E.value || q.value && !z.value && !I.value ? V.TEXT : e.type)(), le = {
+        type: D,
         name: e.name,
-        tabindex: W.value,
+        tabindex: be.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         autocomplete: e.autocomplete,
-        "aria-invalid": j.value,
-        "aria-describedby": !Te.value && tt.value ? g.value : void 0,
-        "aria-errormessage": Te.value ? g.value : void 0
+        "aria-invalid": R.value,
+        "aria-describedby": !ue.value && x.value ? C.value : void 0,
+        "aria-errormessage": ue.value ? C.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: C,
-      stepUp: T,
-      stepDown: x,
-      clear: ee
-    })), { HintSlot: et, hasHint: tt, hasInvalid: Te } = pe(e, n), ot = Ee(
-      S.PASSWORD,
+      togglePassword: L,
+      stepUp: P,
+      stepDown: T,
+      clear: te
+    })), { HintSlot: f, hasHint: x, hasInvalid: ue } = Ve(e, r), he = Ue(
+      V.PASSWORD,
       e
-    ), st = Ee(
-      S.NUMBER,
+    ), Ne = Ue(
+      V.NUMBER,
       e
-    ), at = Ee(
-      S.SEARCH,
+    ), Ee = Ue(
+      V.SEARCH,
       e
     );
-    return (E, K) => (m(), _("div", {
-      class: U(t(A))
+    return (D, le) => (i(), y("div", {
+      class: ee(t(ae))
     }, [
-      t(f) ? (m(), _("label", {
+      t(m) ? (i(), y("label", {
         key: 0,
-        for: t(b),
+        for: t(k),
         class: "vv-input-text__label"
-      }, B(t(f)), 9, Uo)) : I("", !0),
-      R("div", Fo, [
-        k(E.$slots, "before", F(Y(t(z))), () => [
-          t(te) ? (m(), D(G, O({
+      }, H(t(m)), 9, pa)) : w("", !0),
+      M("div", fa, [
+        D.$slots.before ? (i(), y("div", ma, [
+          $(D.$slots, "before", F(j(t(pe))))
+        ])) : w("", !0),
+        M("div", ba, [
+          t(ie) ? (i(), W(J, 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: s,
-          "onUpdate:modelValue": K[0] || (K[0] = (we) => be(v) ? v.value = we : null)
-        }, t(L), {
-          onKeyup: K[1] || (K[1] = (we) => a("keyup", we))
-        }), null, 16, Ko), [
-          [dt, t(v)]
-        ]),
-        k(E.$slots, "after", F(Y(t(z))), () => [
-          t(Q) || t(oe) ? (m(), D(G, F(O({ key: 0 }, t(Q) ? t(ie) : t(oe))), null, 16)) : t(M) ? (m(), D(t(ot), {
+            class: "vv-input-text__icon"
+          }, t(re)), null, 16)) : w("", !0),
+          Se(M("input", G({
+            id: t(k),
+            ref_key: "input",
+            ref: a,
+            "onUpdate:modelValue": le[0] || (le[0] = (we) => Ae(S) ? S.value = we : null)
+          }, t(me), {
+            onKeyup: le[1] || (le[1] = (we) => n("keyup", we))
+          }), null, 16, ha), [
+            [wt, t(S)]
+          ]),
+          t(A) || t(oe) ? (i(), W(J, G({
             key: 1,
-            onTogglePassword: C
-          })) : t(X) ? (m(), D(t(st), {
+            class: "vv-input-text__icon vv-input-text__icon-after"
+          }, t(A) ? t(re) : t(oe)), null, 16)) : t(O) ? (i(), W(t(he), {
             key: 2,
-            onStepUp: T,
-            onStepDown: x
-          })) : t(J) ? (m(), D(t(at), {
+            onTogglePassword: L
+          })) : t(Q) ? (i(), W(t(Ne), {
             key: 3,
-            onClear: ee
-          })) : I("", !0)
+            onStepUp: P,
+            onStepDown: T
+          })) : t(U) ? (i(), W(t(Ee), {
+            key: 4,
+            onClear: te
+          })) : w("", !0)
         ]),
-        t(i) ? (m(), _("span", Wo, [
-          k(E.$slots, "count", F(Y(t(z))), () => [
-            q(B(t(se)), 1)
+        D.$slots.after ? (i(), y("div", ya, [
+          $(D.$slots, "after", F(j(t(pe))))
+        ])) : w("", !0),
+        t(l) ? (i(), y("span", ga, [
+          $(D.$slots, "count", F(j(t(pe))), () => [
+            Z(H(t(fe)), 1)
           ])
-        ])) : I("", !0)
+        ])) : w("", !0)
       ]),
-      Z(t(et), {
-        id: t(g),
+      de(t(f), {
+        id: t(C),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
-}), jo = {
-  ...re,
+}), Sa = {
+  ...ve,
+  /**
+   * 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
   }
-}, zo = {
+}, Va = {
   name: "VvProgress"
-}, Is = /* @__PURE__ */ N({
-  ...zo,
-  props: jo,
+}, rl = /* @__PURE__ */ K({
+  ...Va,
+  props: Sa,
   setup(o) {
-    const a = o, { value: e, max: n, label: s } = toRefs(a), d = computed(() => a.value === void 0), { bemCssClasses: r } = useBemModifiers("vv-progress", {
-      modifiers: a.modifiers,
-      indeterminate: d
-    });
-    return (f, p) => (m(), _("progress", O({ role: "progressbar" }, {
-      class: t(r),
-      ariaLabel: t(s),
-      max: t(n),
+    const n = o, { value: e, max: r, label: a } = toRefs(n), c = computed(() => n.value === void 0), { modifiers: u } = toRefs(n), v = useBemModifiers(
+      "vv-progress",
+      u,
+      computed(() => ({ indeterminate: c.value }))
+    );
+    return (m, d) => (i(), y("progress", G({ role: "progressbar" }, {
+      class: t(v),
+      ariaLabel: t(a),
+      max: t(r),
       value: t(e)
     }), null, 16));
   }
-}), Xo = Xe, Yo = ["click", "update:modelValue", "change", "blur"];
-function Jo(o, a) {
-  const { group: e, isInGroup: n, getGroupOrLocalRef: s } = useInjectedGroupState(Fe), d = s("modelValue", o, a), r = s("readonly", o), f = s("disabled", o), p = s("valid", o), i = s("invalid", o);
+}), $a = ht, ka = ["click", "update:modelValue", "change", "blur"];
+function Aa(o, n) {
+  const { id: e } = toRefs(o), { group: r, isInGroup: a, getGroupOrLocalRef: c } = useInjectedGroupState(ct), u = c("modelValue", o, n), v = c("readonly", o), m = c("disabled", o), d = c("valid", o), l = c("invalid", o);
   return {
-    group: e,
-    isInGroup: n,
-    modelValue: d,
-    readonly: r,
-    disabled: f,
-    valid: p,
-    invalid: i
+    // local props
+    id: e,
+    // global props
+    group: r,
+    isInGroup: a,
+    modelValue: u,
+    readonly: v,
+    disabled: m,
+    valid: d,
+    invalid: l
   };
 }
-const Qo = ["for"], Zo = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], es = {
+const Ca = ["for"], wa = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Ea = {
   name: "VvRadio"
-}, ts = /* @__PURE__ */ N({
-  ...es,
-  props: Xo,
-  emits: Yo,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), { disabled: s, readonly: d, modelValue: r, valid: f, invalid: p } = Jo(
-      e,
-      a
-    ), i = computed(() => String(e.id || ne())), l = computed(() => u.value ? -1 : e.tabindex), c = ref(), u = computed(() => s.value || d.value), b = computed(() => {
-      if (p.value === !0)
+}, Ia = /* @__PURE__ */ K({
+  ...Ea,
+  props: $a,
+  emits: ka,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), { id: a, disabled: c, readonly: u, modelValue: v, valid: m, invalid: d } = Aa(e, n), l = useUniqueId(a), s = computed(() => g.value ? -1 : e.tabindex), p = ref(), g = computed(() => c.value || u.value), k = computed(() => {
+      if (d.value === !0)
         return !0;
-      if (f.value === !0)
+      if (m.value === !0)
         return !1;
-    }), g = computed(
-      () => Array.isArray(r.value) ? contains(e.value, r.value) : equals(e.value, r.value)
-    ), y = computed(
+    }), C = computed(
+      () => Array.isArray(v.value) ? contains(e.value, v.value) : equals(e.value, v.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 C.value ? b.value : null;
       },
-      set($) {
-        Array.isArray(r.value) ? r.value = [e.value] : r.value = e.value, a("change", $);
+      set(O) {
+        Array.isArray(v.value) ? v.value = [e.value] : v.value = e.value, n("change", O);
       }
-    }), { bemCssClasses: V } = useBemModifiers("vv-radio", {
-      valid: f,
-      invalid: p,
-      disabled: s,
-      readonly: d
-    }), { HintSlot: w } = pe(e, n);
-    return ($, M) => (m(), _("label", {
-      class: U(t(V)),
-      for: t(i)
+    }), { modifiers: I } = toRefs(e), B = useBemModifiers(
+      "vv-radio",
+      I,
+      computed(() => ({
+        valid: m.value,
+        invalid: d.value,
+        disabled: c.value,
+        readonly: u.value
+      }))
+    ), { HintSlot: E } = Ve(e, r);
+    return (O, L) => (i(), y("label", {
+      class: ee(t(B)),
+      for: t(l)
     }, [
-      ve(R("input", {
-        id: t(i),
+      Se(M("input", {
+        id: t(l),
         ref_key: "input",
-        ref: c,
-        "onUpdate:modelValue": M[0] || (M[0] = (C) => be(v) ? v.value = C : null),
+        ref: p,
+        "onUpdate:modelValue": L[0] || (L[0] = (q) => Ae(S) ? S.value = q : null),
         type: "radio",
         class: "vv-radio__input",
-        name: $.name,
-        disabled: t(u),
-        value: t(y),
-        tabindex: t(l),
-        "aria-invalid": t(b)
-      }, null, 8, Zo), [
-        [ct, t(v)]
+        name: O.name,
+        disabled: t(g),
+        value: t(b),
+        tabindex: t(s),
+        "aria-invalid": t(k)
+      }, null, 8, wa), [
+        [Et, t(S)]
       ]),
-      k($.$slots, "default", { value: t(r) }, () => [
-        q(B($.label), 1)
+      $(O.$slots, "default", { value: t(v) }, () => [
+        Z(H(O.label), 1)
       ]),
-      Z(t(w), {
+      de(t(E), {
         class: "vv-radio__hint",
-        params: { value: t(r) }
+        params: { value: t(v) }
       }, null, 8, ["params"])
-    ], 10, Qo));
+    ], 10, Ca));
   }
-}), os = Ye, ss = ["update:modelValue", "change"], as = ["textContent"], ls = { class: "vv-radio-group__wrapper" }, ns = {
+}), Pa = yt, Oa = ["update:modelValue", "change"], Da = ["textContent"], Ba = { class: "vv-radio-group__wrapper" }, Ra = {
   name: "VvRadioGroup"
-}, Es = /* @__PURE__ */ N({
-  ...ns,
-  props: os,
-  emits: ss,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), s = useVModel(e, "modelValue", a), { disabled: d, readonly: r, vertical: f, valid: p, invalid: i } = toRefs(e), l = {
-      key: Fe,
-      modelValue: s,
-      disabled: d,
-      readonly: r,
-      valid: p,
-      invalid: i
-    };
-    useProvideGroupState(l);
-    const { getOptionLabel: c, getOptionValue: u } = useOptions(e), { bemCssClasses: b } = useBemModifiers("vv-radio-group", {
-      disabled: d,
-      readonly: r,
-      horizontal: computed(() => !f.value),
-      valid: p,
-      invalid: i
-    }), g = (v, V) => ({
-      id: `${e.name}_opt${V}`,
+}, il = /* @__PURE__ */ K({
+  ...Ra,
+  props: Pa,
+  emits: Oa,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), a = useVModel(e, "modelValue", n), { disabled: c, readonly: u, vertical: v, valid: m, invalid: d, modifiers: l } = toRefs(e);
+    useProvideGroupState({
+      key: ct,
+      modelValue: a,
+      disabled: c,
+      readonly: u,
+      valid: m,
+      invalid: d
+    });
+    const { getOptionLabel: s, getOptionValue: p } = useOptions(e), g = useBemModifiers(
+      "vv-radio-group",
+      l,
+      computed(() => ({
+        disabled: c.value,
+        readonly: u.value,
+        horizontal: !v.value,
+        valid: m.value,
+        invalid: d.value
+      }))
+    ), k = (b, S) => ({
+      id: `${e.name}_opt${S}`,
       name: e.name,
-      label: c(v),
-      value: u(v)
-    }), { HintSlot: y } = pe(e, n);
-    return (v, V) => (m(), _("fieldset", {
-      class: U(t(b))
+      label: s(b),
+      value: p(b)
+    }), { HintSlot: C } = Ve(e, r);
+    return (b, S) => (i(), y("fieldset", {
+      class: ee(t(g))
     }, [
-      v.label ? (m(), _("legend", {
+      b.label ? (i(), y("legend", {
         key: 0,
-        textContent: B(v.label)
-      }, null, 8, as)) : I("", !0),
-      R("div", ls, [
-        v.options.length > 0 ? (m(!0), _(de, { key: 0 }, fe(v.options, (w, $) => (m(), D(ts, O({ key: $ }, g(w, $)), null, 16))), 128)) : k(v.$slots, "default", { key: 1 })
+        textContent: H(b.label)
+      }, null, 8, Da)) : w("", !0),
+      M("div", Ba, [
+        b.options.length > 0 ? (i(!0), y(ne, { key: 0 }, ke(b.options, (I, B) => (i(), W(Ia, G({ key: B }, k(I, B)), null, 16))), 128)) : $(b.$slots, "default", { key: 1 })
       ]),
-      Z(t(y), { class: "vv-radio-group__hint" })
+      de(t(C), { class: "vv-radio-group__hint" })
     ], 2));
   }
-}), rs = {
+}), Ta = {
   hard: "hard",
   soft: "soft"
-}, is = {
+}, xa = {
   true: !0,
   false: !1,
   default: "default"
-}, us = ["update:modelValue", "focus", "blur", "keyup"], ds = {
-  ...ze,
+}, Ma = ["update:modelValue", "focus", "blur", "keyup"], La = {
+  ...bt,
+  /**
+   * 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: rs.soft },
-  spellcheck: { type: [Boolean, String], default: is.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: Ta.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: xa.default },
+  /**
+   * If true, the textarea will be resizable
+   */
   resizable: Boolean
-}, cs = ["for"], ps = { class: "vv-textarea__wrapper" }, vs = ["id"], ms = {
+}, Na = ["for"], Ha = { class: "vv-textarea__wrapper" }, Ga = {
   key: 0,
+  class: "vv-textarea__input-before"
+}, Ua = { class: "vv-textarea__inner" }, Wa = ["id"], Fa = {
+  key: 1,
+  class: "vv-textarea__input-after"
+}, ja = {
+  key: 2,
   class: "vv-textarea__limit"
-}, fs = {
+}, qa = {
   name: "VvTextarea"
-}, Rs = /* @__PURE__ */ N({
-  ...fs,
-  props: ds,
-  emits: us,
-  setup(o, { emit: a }) {
-    const e = o, n = useSlots(), s = ref(), {
-      icon: d,
-      iconPosition: r,
-      label: f,
-      modelValue: p,
-      count: i,
-      valid: l,
-      invalid: c,
-      loading: u
-    } = toRefs(e), b = computed(() => String(e.id || ne())), g = computed(() => `${b.value}-hint`), y = computed(
+}, ul = /* @__PURE__ */ K({
+  ...qa,
+  props: La,
+  emits: Ma,
+  setup(o, { emit: n }) {
+    const e = o, r = useSlots(), a = ref(), {
+      id: c,
+      icon: u,
+      iconPosition: v,
+      label: m,
+      modelValue: d,
+      count: l,
+      valid: s,
+      invalid: p,
+      loading: g,
+      modifiers: k
+    } = toRefs(e), C = useUniqueId(c), b = computed(() => `${C.value}-hint`), S = computed(
       () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), v = useDebouncedInput(p, a, e.debounce), { hasIcon: V, hasIconLeft: w, hasIconRight: $ } = useComponentIcon(
-      d,
-      r
-    ), { focused: M } = useComponentFocus(s, a), C = useElementVisibility(s);
-    watch(C, (W) => {
-      W && e.autofocus && (M.value = !0);
+    ), I = useDebouncedInput(d, n, e.debounce), { hasIcon: B, hasIconBefore: E, hasIconAfter: O } = useComponentIcon(
+      u,
+      v
+    ), { focused: L } = useComponentFocus(a, n), q = useElementVisibility(a);
+    watch(q, (z) => {
+      z && e.autofocus && (L.value = !0);
     });
-    const { formatted: H } = useTextCount(v, {
+    const { formatted: Q } = useTextCount(I, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), X = computed(() => !e.disabled && !e.readonly), T = computed(
-      () => X.value ? e.tabindex : -1
-    ), x = computed(() => !isEmpty(p)), J = computed(() => {
+    }), P = computed(() => !e.disabled && !e.readonly), T = computed(
+      () => P.value ? e.tabindex : -1
+    ), U = computed(() => !isEmpty(d)), 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: l,
-      invalid: c,
-      loading: u,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      iconLeft: w,
-      iconRight: $,
-      floating: e.floating && !isEmpty(e.label),
-      dirty: x,
-      focused: M,
-      resizable: e.resizable
-    }), oe = computed(
+    }), { HintSlot: re, hasHint: ie, hasInvalid: A } = Ve(e, r), oe = useBemModifiers(
+      "vv-textarea",
+      k,
+      computed(() => ({
+        valid: s.value,
+        invalid: p.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,
@@ -2108,9 +3086,9 @@ const Qo = ["for"], Zo = ["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": !A.value && ie.value ? b.value : void 0,
+        "aria-errormessage": A.value ? b.value : void 0
       })
     ), se = computed(() => ({
       valid: e.valid,
@@ -2119,69 +3097,76 @@ const Qo = ["for"], Zo = ["id", "name", "disabled", "value", "tabindex", "aria-i
       hintLabel: e.hintLabel,
       maxlength: e.maxlength,
       minlength: e.minlength,
-      clear: ae
-    })), ae = () => {
-      v.value = void 0;
+      clear: be
+    })), be = () => {
+      I.value = void 0;
     };
-    return (W, P) => (m(), _("div", {
-      class: U(t(ie))
+    return (z, R) => (i(), y("div", {
+      class: ee(t(oe))
     }, [
-      t(f) ? (m(), _("label", {
+      t(m) ? (i(), y("label", {
         key: 0,
-        for: t(b),
+        for: t(C),
         class: "vv-textarea__label"
-      }, B(t(f)), 9, cs)) : I("", !0),
-      R("div", ps, [
-        k(W.$slots, "before", F(Y(t(se))), () => [
-          t(w) ? (m(), D(G, O({
+      }, H(t(m)), 9, Na)) : w("", !0),
+      M("div", Ha, [
+        z.$slots.before ? (i(), y("div", Ga, [
+          $(z.$slots, "before", F(j(t(se))))
+        ])) : w("", !0),
+        M("div", Ua, [
+          t(E) ? (i(), W(J, 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: s,
-          "onUpdate:modelValue": P[0] || (P[0] = (j) => be(v) ? v.value = j : null)
-        }, t(oe), {
-          onKeyup: P[1] || (P[1] = (j) => a("keyup", j))
-        }), null, 16, vs), [
-          [xe, t(v)]
-        ]),
-        k(W.$slots, "after", F(Y(t(se))), () => [
-          t($) ? (m(), D(G, F(O({ key: 0 }, t(V))), null, 16)) : I("", !0)
+            class: "vv-textarea__icon"
+          }, t(B)), null, 16)) : w("", !0),
+          Se(M("textarea", G({
+            id: t(C),
+            ref_key: "textarea",
+            ref: a,
+            "onUpdate:modelValue": R[0] || (R[0] = (X) => Ae(I) ? I.value = X : null)
+          }, t(fe), {
+            onKeyup: R[1] || (R[1] = (X) => n("keyup", X))
+          }), null, 16, Wa), [
+            [it, t(I)]
+          ]),
+          t(O) ? (i(), W(J, G({
+            key: 1,
+            class: "vv-textarea__icon vv-textarea__icon-after"
+          }, t(B)), null, 16)) : w("", !0)
         ]),
-        t(i) ? (m(), _("span", ms, [
-          k(W.$slots, "count", F(Y(t(se))), () => [
-            q(B(t(H)), 1)
+        z.$slots.after ? (i(), y("div", Fa, [
+          $(z.$slots, "after", F(j(t(se))))
+        ])) : w("", !0),
+        t(l) ? (i(), y("span", ja, [
+          $(z.$slots, "count", F(j(t(se))), () => [
+            Z(H(t(Q)), 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 {
-  St as VvAccordion,
-  ys as VvAccordionGroup,
-  _s as VvBadge,
-  Ss as VvBreadcrumb,
-  Vs as VvButton,
-  $s as VvButtonGroup,
-  Cs as VvCard,
-  oo as VvCheckbox,
-  ks as VvCheckboxGroup,
-  As as VvCombobox,
-  Ps as VvDialog,
-  bo as VvDropdown,
-  G as VvIcon,
-  ws as VvInputText,
-  Is as VvProgress,
-  ts as VvRadio,
-  Es as VvRadioGroup,
-  ko as VvSelect,
-  Rs as VvTextarea
+  Ut as VvAccordion,
+  Qa as VvAccordionGroup,
+  Yt as VvBadge,
+  Za as VvBreadcrumb,
+  el as VvButton,
+  tl as VvButtonGroup,
+  ol as VvCard,
+  Ao as VvCheckbox,
+  al as VvCheckboxGroup,
+  ll as VvCombobox,
+  sl as VvDialog,
+  St as VvDropdown,
+  J as VvIcon,
+  nl as VvInputText,
+  rl as VvProgress,
+  Ia as VvRadio,
+  il as VvRadioGroup,
+  zo as VvSelect,
+  ul as VvTextarea
 };