@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.20

package/dist/components/index.es.js

@@ -1,10 +1,10 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
-import { nanoid } from "nanoid";
+import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio, onBeforeUnmount } from "vue";
+import { uid } from "uid";
 import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
+import mitt from "mitt";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import mitt from "mitt";
 import { useIMask } from "vue-imask";
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
@@ -104,6 +104,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -118,27 +119,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -151,43 +158,73 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const SelectedProps = {
   /**
    * Whether the item is selected
    */
-  selected: Boolean
+  selected: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
+};
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -227,14 +264,20 @@ const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
-  debounce: [Number, String]
+  debounce: {
+    type: [Number, String],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -255,7 +298,10 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
 };
 const UnselectableProps = {
   /**
@@ -291,7 +337,8 @@ const DropdownProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -359,7 +406,8 @@ const DropdownProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 };
 const IdNameProps = {
@@ -376,7 +424,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -408,28 +459,34 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: [String, Number],
+  minlength: { type: [String, Number], default: void 0 },
   /**
    * 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: [String, Number],
+  maxlength: { type: [String, Number], default: void 0 },
   /**
    * 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,
+  placeholder: {
+    type: String,
+    default: void 0
+  },
   /**
    * 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
+  required: {
+    type: Boolean,
+    default: false
+  }
 };
 const CheckboxRadioProps = {
   ...IdNameProps,
@@ -446,11 +503,17 @@ const CheckboxRadioProps = {
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
    */
-  value: [String, Number, Boolean],
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
   /**
    * Input value
    */
-  modelValue: [Object, Number, Boolean, String]
+  modelValue: {
+    type: [Object, Number, Boolean, String],
+    default: void 0
+  }
 };
 const CheckboxRadioGroupProps = {
   ...ValidProps,
@@ -465,7 +528,10 @@ const CheckboxRadioGroupProps = {
   /**
    * Input value
    */
-  modelValue: [String, Array, Boolean, Number, Symbol],
+  modelValue: {
+    type: [String, Array, Boolean, Number, Symbol],
+    default: void 0
+  },
   /**
    * Input name
    */
@@ -473,13 +539,17 @@ const CheckboxRadioGroupProps = {
   /**
    * If true, the group will be displayed in a vertical column
    */
-  vertical: Boolean
+  vertical: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -495,6 +565,19 @@ const ActionProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+};
+const NavProps = {
+  items: {
+    type: Array,
+    default: () => []
   }
 };
 function equals(obj1, obj2, field) {
@@ -734,21 +817,22 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const _hoisted_1$i = ["id", "open"];
-const _hoisted_2$d = ["aria-controls", "aria-expanded"];
-const _hoisted_3$7 = ["aria-hidden"];
-const __default__$n = {
+const _hoisted_1$l = ["id", "open"];
+const _hoisted_2$f = ["aria-controls", "aria-expanded"];
+const _hoisted_3$8 = ["aria-hidden"];
+const __default__$r = {
   name: "VvAccordion"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  ...__default__$r,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
     const attrs = useAttrs();
+    const emit = __emit;
     const accordionName = computed(
-      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
+      () => props.name || (attrs == null ? void 0 : attrs.id) || uid()
     );
     const {
       modifiers,
@@ -821,18 +905,26 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
         }, [
           renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(title)), 1)
+            createTextVNode(
+              toDisplayString(unref(title)),
+              1
+              /* TEXT */
+            )
           ])
-        ], 8, _hoisted_2$d),
+        ], 8, _hoisted_2$f),
         createElementVNode("div", {
           "aria-hidden": !unref(isOpen),
           class: "vv-accordion__content"
         }, [
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(content)), 1)
+            createTextVNode(
+              toDisplayString(unref(content)),
+              1
+              /* TEXT */
+            )
           ])
-        ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$i);
+        ], 8, _hoisted_3$8)
+      ], 10, _hoisted_1$l);
     };
   }
 });
@@ -885,15 +977,16 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$m = {
+const __default__$q = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
     watchEffect(() => {
       if (typeof props.modelValue === "string" && collapse.value) {
@@ -951,29 +1044,48 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }))
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$q, mergeProps({
-              key: item.title
-            }, {
-              name: item.name,
-              title: item.title,
-              content: item.content
-            }), {
-              header: withCtx((data) => [
-                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              details: withCtx((data) => [
-                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              _: 2
-            }, 1040);
-          }), 128))
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(items), (item) => {
+                return openBlock(), createBlock(
+                  _sfc_main$x,
+                  mergeProps({
+                    key: item.title
+                  }, {
+                    name: item.name,
+                    title: item.title,
+                    content: item.content
+                  }),
+                  {
+                    header: withCtx((data) => [
+                      renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                    ]),
+                    details: withCtx((data) => [
+                      renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -991,15 +1103,16 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$l = {
+const __default__$p = {
   name: "VvAction"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const volver = useVolver();
     const element = ref(null);
     __expose({ $el: element });
@@ -1030,7 +1143,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         case props.href !== void 0:
           return ActionTag.a;
         default:
-          return ActionTag.button;
+          return props.defaultTag;
       }
     });
     const hasProps = computed(() => {
@@ -1055,12 +1168,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             to: props.to,
             target: props.target
           };
-        default:
+        case ActionTag.button:
           return {
             ...toReturn,
             type: props.type,
             disabled: props.disabled
           };
+        default:
+          return toReturn;
       }
     });
     const onClick = (e) => {
@@ -1086,7 +1201,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: {
           active: _ctx.active,
           pressed: unref(pressed),
-          disabled: _ctx.disabled
+          disabled: _ctx.disabled,
+          current: _ctx.current
         },
         onClickPassive: onClick,
         onMouseoverPassive: onMouseover,
@@ -1094,114 +1210,46 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.label), 1)
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["class"]);
     };
   }
 });
-const VvIconProps = {
-  /**
-   * 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: true
-  },
-  /**
-   * 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 | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
-const __default__$k = {
+const __default__$o = {
   name: "VvIcon"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
-  props: VvIconProps,
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
   setup(__props) {
     const props = __props;
     const hasRotate = computed(() => {
@@ -1288,14 +1336,49 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
 function useInjectedAlertGroup() {
   return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
 const VvAlertProps = {
   ...IdProps,
   ...ModifiersProps,
@@ -1372,9 +1455,7 @@ const useVvAlert = (props, emit) => {
   const { bus } = useInjectedAlertGroup();
   const hasId = useUniqueId(computed(() => props.id));
   const hasTitleId = computed(() => `${hasId.value}-title`);
-  const hasIcon = computed(
-    () => typeof props.icon === "string" ? { name: props.icon } : props.icon
-  );
+  const { hasIcon } = useComponentIcon(computed(() => props.icon));
   const hasClass = useModifiers(
     "vv-alert",
     computed(() => props.modifiers),
@@ -1437,103 +1518,482 @@ const useVvAlert = (props, emit) => {
     }))
   };
 };
-const _hoisted_1$h = {
+const _hoisted_1$k = {
   key: 0,
   class: "vv-alert__header"
 };
-const _hoisted_2$c = ["id"];
-const _hoisted_3$6 = ["aria-label"];
-const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
-const _hoisted_5$4 = [
+const _hoisted_2$e = ["id"];
+const _hoisted_3$7 = ["aria-label"];
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode(
+  "div",
+  { class: "vv-alert__close-mask" },
+  null,
+  -1
+  /* HOISTED */
+);
+const _hoisted_5$5 = [
   _hoisted_4$5
 ];
-const _hoisted_6$4 = {
+const _hoisted_6$5 = {
   key: 1,
   class: "vv-alert__content"
 };
-const _hoisted_7$4 = {
+const _hoisted_7$5 = {
   key: 2,
   class: "vv-alert__footer"
 };
-const __default__$j = {
+const __default__$n = {
   name: "VvAlert"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: VvAlertProps,
   emits: VvAlertEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
     __expose({ close });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
-        _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
-          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "header", {}, () => [
-            renderSlot(_ctx.$slots, "title::before"),
-            _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
-              key: 0,
-              id: unref(hasTitleId),
-              class: "vv-alert__title"
-            }, [
-              renderSlot(_ctx.$slots, "title", {}, () => [
-                createTextVNode(toDisplayString(_ctx.title), 1)
-              ])
-            ], 8, _hoisted_2$c)) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "title::after")
-          ]),
-          renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
-            _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
-              key: 0,
-              class: "vv-alert__close",
-              type: "button",
-              "aria-label": _ctx.closeLabel,
-              onClick: _cache[0] || (_cache[0] = withModifiers(
-                //@ts-ignore
-                (...args) => unref(close) && unref(close)(...args),
-                ["stop"]
-              ))
-            }, _hoisted_5$4, 8, _hoisted_3$6)) : createCommentVNode("", true)
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.content), 1)
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
-          renderSlot(_ctx.$slots, "footer", {}, () => [
-            createTextVNode(toDisplayString(_ctx.footer), 1)
-          ])
-        ])) : createCommentVNode("", true)
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        normalizeProps(guardReactiveProps(unref(hasProps))),
+        [
+          _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
+            unref(hasIcon) ? (openBlock(), createBlock(
+              _sfc_main$u,
+              mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              renderSlot(_ctx.$slots, "title::before"),
+              _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
+                key: 0,
+                id: unref(hasTitleId),
+                class: "vv-alert__title"
+              }, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(
+                    toDisplayString(_ctx.title),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 8, _hoisted_2$e)) : createCommentVNode("v-if", true),
+              renderSlot(_ctx.$slots, "title::after")
+            ]),
+            renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
+              _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: "vv-alert__close",
+                type: "button",
+                "aria-label": _ctx.closeLabel,
+                onClick: _cache[0] || (_cache[0] = withModifiers(
+                  //@ts-ignore
+                  (...args) => unref(close) && unref(close)(...args),
+                  ["stop"]
+                ))
+              }, _hoisted_5$5, 8, _hoisted_3$7)) : createCommentVNode("v-if", true)
+            ])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(
+                toDisplayString(_ctx.content),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
+            renderSlot(_ctx.$slots, "footer", {}, () => [
+              createTextVNode(
+                toDisplayString(_ctx.footer),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });
-const VvBadgeProps = {
+function useProvideAlertGroup({
+  name
+}) {
+  const bus = mitt();
+  provide(INJECTION_KEY_ALERT_GROUP, {
+    name,
+    bus
+  });
+  return bus;
+}
+const VvAlertGroupProps = {
   ...ModifiersProps,
-  value: [String, Number]
-};
-const __default__$i = {
-  name: "VvBadge"
+  name: {
+    type: String,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  stack: {
+    type: Boolean,
+    default: false
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  inline: {
+    type: String,
+    default: void 0
+  },
+  block: {
+    type: String,
+    default: void 0
+  },
+  position: {
+    type: String,
+    default: void 0
+  },
+  transition: {
+    type: String,
+    default: void 0
+  }
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
-  props: VvBadgeProps,
-  setup(__props) {
-    const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-badge", modifiers);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
+const VvAlertGroupEvents = [
+  "close",
+  "before-enter",
+  "after-leave",
+  "enter",
+  "after-enter",
+  "enter-cancelled",
+  "before-leave",
+  "leave",
+  "leave-cancelled"
+];
+const useVvAlertGroup = (props, emit) => {
+  const bus = useProvideAlertGroup({ name: computed(() => props.name) });
+  if (props.block && !props.inline || !props.block && props.inline) {
+    console.warn(
+      `[VvAlertGroup]: block and inline props must coexist at the same time.`
+    );
+  }
+  const hasClass = computed(() => {
+    const toReturn = [
+      useModifiers(
+        "vv-alert-group",
+        computed(() => props.modifiers),
+        computed(() => ({
+          stack: props.stack,
+          reverse: props.reverse,
+          absolute: props.position === "absolute",
+          fixed: props.position === "fixed"
+        }))
+      ).value
+    ];
+    if (props.inline && props.block) {
+      toReturn.push(`vv-alert-group--${props.block}-${props.inline}`);
+    }
+    return toReturn;
+  });
+  const hasTransition = computed(() => {
+    if (props.transition) {
+      return props.transition;
+    }
+    if (!props.position) {
+      return "vv-alert--fade";
+    }
+    if (props.inline === "start") {
+      return "vv-alert--fade-inline-start";
+    }
+    if (props.inline === "end") {
+      return "vv-alert--fade-inline-end";
+    }
+    if (props.block === "top") {
+      return "vv-alert--fade-block-top";
+    }
+    if (props.block === "bottom") {
+      return "vv-alert--fade-block-bottom";
+    }
+    return "vv-alert--fade";
+  });
+  bus.on("close", (id) => {
+    emit("close", id);
+  });
+  return {
+    hasTransition,
+    hasProps: computed(() => ({
+      class: hasClass.value
+    }))
+  };
+};
+const __default__$m = {
+  name: "VvAlertGroup"
+};
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
+  props: VvAlertGroupProps,
+  emits: VvAlertGroupEvents,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { hasProps, hasTransition } = useVvAlertGroup(props, emit);
+    const alertGroupTransitionHandlers = {
+      "before-enter": () => {
+        emit("before-enter");
+      },
+      "after-leave": () => {
+        emit("after-leave");
+      },
+      enter: () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("after-enter");
+      },
+      "enter-cancelled": () => {
+        emit("enter-cancelled");
+      },
+      "before-leave": () => {
+        emit("before-leave");
+      },
+      leave: () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leave-cancelled");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        normalizeProps(guardReactiveProps(unref(hasProps))),
+        [
+          renderSlot(_ctx.$slots, "before"),
+          createVNode(TransitionGroup, mergeProps({
+            tag: "div",
+            role: "group",
+            name: unref(hasTransition),
+            class: "vv-alert-group__list"
+          }, toHandlers(alertGroupTransitionHandlers)), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.items, (item) => {
+                    return openBlock(), createBlock(
+                      _sfc_main$t,
+                      mergeProps(item, {
+                        key: item.id
+                      }),
+                      null,
+                      16
+                      /* FULL_PROPS */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"]),
+          renderSlot(_ctx.$slots, "after")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+const VvAvatarProps = {
+  ...ModifiersProps,
+  /**
+   * Image src for avatar
+   */
+  imgSrc: String
+};
+const _hoisted_1$j = ["role", "aria-label"];
+const _hoisted_2$d = ["src"];
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "VvAvatar",
+  props: VvAvatarProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-avatar", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
         class: normalizeClass(unref(bemCssClasses)),
-        role: "status"
+        role: _ctx.imgSrc ? void 0 : "img",
+        "aria-label": _ctx.imgSrc ? void 0 : "avatar"
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
+          _ctx.imgSrc ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: _ctx.imgSrc,
+            alt: "avatar"
+          }, null, 8, _hoisted_2$d)) : createCommentVNode("v-if", true)
         ])
-      ], 2);
+      ], 10, _hoisted_1$j);
+    };
+  }
+});
+const VvAvatarGroupProps = {
+  ...ModifiersProps,
+  /**
+   * avatar items
+   */
+  items: {
+    type: Array,
+    default: () => [],
+    required: true
+  },
+  toShow: {
+    type: Number,
+    default: 3
+  },
+  totalItems: {
+    type: Number
+  },
+  avatarModifiers: [String, Array]
+};
+const _hoisted_1$i = { key: 0 };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "VvAvatarGroup",
+  props: VvAvatarGroupProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers, items, toShow, totalItems, avatarModifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-avatar-group", modifiers);
+    const stringModifiers = computed(() => {
+      if ((avatarModifiers == null ? void 0 : avatarModifiers.value) && Array.isArray(avatarModifiers == null ? void 0 : avatarModifiers.value)) {
+        return avatarModifiers.value.join(" ");
+      }
+      return (avatarModifiers == null ? void 0 : avatarModifiers.value) || "";
+    });
+    const avatarItems = computed(() => {
+      return items.value.slice(0, toShow.value).map((item) => {
+        let modifiers2 = [];
+        let itemModifiers = [];
+        if (avatarModifiers == null ? void 0 : avatarModifiers.value) {
+          modifiers2 = Array.isArray(avatarModifiers == null ? void 0 : avatarModifiers.value) ? avatarModifiers == null ? void 0 : avatarModifiers.value : [avatarModifiers == null ? void 0 : avatarModifiers.value];
+        }
+        if (item.modifiers) {
+          itemModifiers = Array.isArray(item.modifiers) ? item.modifiers : [item.modifiers];
+        }
+        return {
+          ...item,
+          key: item.key || useUniqueId().value,
+          modifiers: [...modifiers2, ...itemModifiers]
+        };
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(avatarItems), (avatarItem) => {
+                return openBlock(), createBlock(
+                  _sfc_main$r,
+                  mergeProps({
+                    key: avatarItem.key
+                  }, {
+                    modifiers: avatarItem.modifiers,
+                    imgSrc: avatarItem.imgSrc
+                  }),
+                  {
+                    default: withCtx(() => [
+                      avatarItem.text ? (openBlock(), createElementBlock(
+                        "span",
+                        _hoisted_1$i,
+                        toDisplayString(avatarItem.text),
+                        1
+                        /* TEXT */
+                      )) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )),
+            (unref(totalItems) || unref(items).length) > unref(toShow) ? (openBlock(), createBlock(_sfc_main$r, {
+              key: 0,
+              modifiers: `${unref(stringModifiers)} surface bordered`
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(`+${(unref(totalItems) || unref(items).length) - unref(toShow)}`),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["modifiers"])) : createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+const VvBadgeProps = {
+  ...ModifiersProps,
+  value: [String, Number]
+};
+const __default__$l = {
+  name: "VvBadge"
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvBadgeProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-badge", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          role: "status"
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -1541,58 +2001,83 @@ const VvBreadcrumbProps = {
   ...ModifiersProps,
   routes: Array
 };
-const _hoisted_1$g = { class: "vv-breadcrumb__list" };
-const _hoisted_2$b = ["content"];
-const __default__$h = {
+const _hoisted_1$h = { class: "vv-breadcrumb__list" };
+const _hoisted_2$c = ["content"];
+const __default__$k = {
   name: "VvBreadcrumb"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvBreadcrumbProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
+    const length = computed(() => {
+      var _a;
+      return ((_a = props.routes) == null ? void 0 : _a.length) ?? 0;
+    });
+    const isLast = (index) => index === length.value - 1;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(unref(bemCssClasses)),
-        "aria-label": "breadcrumbs"
-      }, [
-        createElementVNode("ol", _hoisted_1$g, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
-            var _a, _b, _c, _d;
-            return openBlock(), createElementBlock("li", {
-              key: `${route.label}-${index}`,
-              class: normalizeClass({
-                "vv-breadcrumb__item": index < Number((_a = _ctx.routes) == null ? void 0 : _a.length) - 1,
-                "vv-breadcrumb__item-active": index === Number((_b = _ctx.routes) == null ? void 0 : _b.length) - 1
+      return openBlock(), createElementBlock(
+        "nav",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          "aria-label": "breadcrumbs"
+        },
+        [
+          createElementVNode("ol", _hoisted_1$h, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.routes, ({ label, ...route }, index) => {
+                return openBlock(), createElementBlock(
+                  "li",
+                  {
+                    key: `${label}-${index}`,
+                    class: normalizeClass(
+                      !isLast(index) ? "vv-breadcrumb__item" : "vv-breadcrumb__item-active"
+                    ),
+                    itemprop: "itemListElement",
+                    itemtype: "https://schema.org/ListItem",
+                    itemscope: ""
+                  },
+                  [
+                    createVNode(_sfc_main$v, mergeProps(route, {
+                      class: !isLast(index) ? "vv-breadcrumb__link" : "vv-breadcrumb__label",
+                      "aria-current": isLast(index) ? "page" : void 0,
+                      itemprop: "item",
+                      "default-tag": "span"
+                    }), {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
+                          createTextVNode(
+                            toDisplayString(label),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1040, ["class", "aria-current"]),
+                    createElementVNode("meta", {
+                      itemprop: "position",
+                      content: `${index + 1}`
+                    }, null, 8, _hoisted_2$c)
+                  ],
+                  2
+                  /* CLASS */
+                );
               }),
-              itemprop: "itemListElement",
-              itemtype: "https://schema.org/ListItem",
-              itemscope: ""
-            }, [
-              (openBlock(), createBlock(resolveDynamicComponent(route.to ? "router-link" : route.href ? "a" : "span"), mergeProps(route, {
-                class: {
-                  "vv-breadcrumb__link": index < Number((_c = _ctx.routes) == null ? void 0 : _c.length) - 1
-                },
-                "aria-current": index === Number((_d = _ctx.routes) == null ? void 0 : _d.length) - 1 ? "page" : void 0,
-                itemprop: "item"
-              }), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
-                    createTextVNode(toDisplayString(route.label), 1)
-                  ])
-                ]),
-                _: 2
-              }, 1040, ["class", "aria-current"])),
-              createElementVNode("meta", {
-                itemprop: "position",
-                content: `${index + 1}`
-              }, null, 8, _hoisted_2$b)
-            ], 2);
-          }), 128))
-        ])
-      ], 2);
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -1603,10 +2088,7 @@ const VvButtonProps = {
   ...ModifiersProps,
   ...UnselectableProps,
   ...LoadingProps,
-  /**
-   * Button icon
-   */
-  icon: [String, Object],
+  ...IconProps,
   /**
    * Button icon position
    */
@@ -1700,25 +2182,26 @@ function useGroupProps$2(props, emit) {
     label
   };
 }
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 1,
   class: "vv-button__label"
 };
-const _hoisted_2$a = {
+const _hoisted_2$b = {
   key: 1,
   class: "vv-button__label"
 };
-const __default__$g = {
+const __default__$j = {
   name: "VvButton"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: VvButtonProps,
   emits: VvButtonEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const attrs = useAttrs();
     const slots = useSlots();
+    const emit = __emit;
     const {
       id,
       modifiers,
@@ -1762,9 +2245,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         )
       }))
     );
-    const hasIconProps = computed(
-      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
-    );
+    const { hasIcon } = useComponentIcon(icon);
     const toggleValue = computed(() => {
       return props.value !== void 0 ? props.value : name.value;
     });
@@ -1790,7 +2271,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, mergeProps({
+      return openBlock(), createBlock(_sfc_main$v, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1810,28 +2291,48 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$n, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$u, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
-              }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
-            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-                key: 0,
-                class: "vv-button__icon"
-              }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
-              unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$a, [
-                renderSlot(_ctx.$slots, "label", {}, () => [
-                  createTextVNode(toDisplayString(unref(label)), 1)
-                ])
-              ])) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "after")
-            ], 64))
+              }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+              _ctx.loadingLabel ? (openBlock(), createElementBlock(
+                "span",
+                _hoisted_1$g,
+                toDisplayString(_ctx.loadingLabel),
+                1
+                /* TEXT */
+              )) : createCommentVNode("v-if", true)
+            ]) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                renderSlot(_ctx.$slots, "before"),
+                unref(hasIcon) ? (openBlock(), createBlock(
+                  _sfc_main$u,
+                  mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$b, [
+                  renderSlot(_ctx.$slots, "label", {}, () => [
+                    createTextVNode(
+                      toDisplayString(unref(label)),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true),
+                renderSlot(_ctx.$slots, "after")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["id", "class"]);
     };
   }
@@ -1855,14 +2356,15 @@ const VvButtonGroupProps = {
   }
 };
 const VvButtonGroupEvents = ["update:modelValue"];
-const __default__$f = {
+const __default__$i = {
   name: "VvButtonGroup"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const props = __props;
     const {
       disabled,
@@ -1904,12 +2406,18 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     });
     const bemCssClasses = useModifiers("vv-button-group", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "group"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          role: "group"
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -1917,45 +2425,55 @@ const VvCardProps = {
   ...ModifiersProps,
   title: String
 };
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   class: "vv-card__header"
 };
-const _hoisted_2$9 = {
+const _hoisted_2$a = {
   key: 1,
   class: "vv-card__content"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   key: 2,
   class: "vv-card__footer"
 };
-const __default__$e = {
+const __default__$h = {
   name: "VvCard"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   props: VvCardProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-card", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("article", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
-          renderSlot(_ctx.$slots, "header", {}, () => [
-            createTextVNode(toDisplayString(_ctx.title), 1)
-          ])
-        ])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default"),
-        _ctx.$slots.content ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
-          renderSlot(_ctx.$slots, "content")
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$5, [
-          renderSlot(_ctx.$slots, "footer")
-        ])) : createCommentVNode("", true)
-      ], 2);
+      return openBlock(), createElementBlock(
+        "article",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$f, [
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              createTextVNode(
+                toDisplayString(_ctx.title),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "default"),
+          _ctx.$slots.content ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+            renderSlot(_ctx.$slots, "content")
+          ])) : createCommentVNode("v-if", true),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$6, [
+            renderSlot(_ctx.$slots, "footer")
+          ])) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -2180,17 +2698,18 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const _hoisted_1$d = ["for"];
-const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
-const __default__$d = {
+const _hoisted_1$e = ["for"];
+const _hoisted_2$9 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
+const __default__$g = {
   name: "VvCheckbox"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCheckbox",
@@ -2329,16 +2848,23 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           "aria-invalid": unref(isInvalid),
           "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
           "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0
-        }, null, 8, _hoisted_2$8), [
+        }, null, 8, _hoisted_2$9), [
           [vModelCheckbox, unref(localModelValue)]
         ]),
         renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
-          createTextVNode(toDisplayString(_ctx.label), 1)
+          createTextVNode(
+            toDisplayString(_ctx.label),
+            1
+            /* TEXT */
+          )
         ]),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-checkbox__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [
@@ -2368,7 +2894,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$d);
+      ], 10, _hoisted_1$e);
     };
   }
 });
@@ -2406,17 +2932,18 @@ function useOptions(props) {
     getOptionGrouped
   };
 }
-const _hoisted_1$c = ["textContent"];
-const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
-const __default__$c = {
+const _hoisted_1$d = ["textContent"];
+const _hoisted_2$8 = { class: "vv-checkbox-group__wrapper" };
+const __default__$f = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCheckboxGroup",
@@ -2455,54 +2982,85 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
     const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.label ? (openBlock(), createElementBlock("legend", {
-          key: 0,
-          textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$c)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$7, [
-          _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$g, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
-          }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
-        ]),
-        createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+      return openBlock(), createElementBlock(
+        "fieldset",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("legend", {
+            key: 0,
+            textContent: toDisplayString(_ctx.label)
+          }, null, 8, _hoisted_1$d)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$8, [
+            _ctx.options.length > 0 ? (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 0 },
+              renderList(_ctx.options, (option, index) => {
+                return openBlock(), createBlock(
+                  _sfc_main$k,
+                  mergeProps({ key: index }, getOptionProps(option, index)),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          ]),
+          createVNode(
+            unref(HintSlot),
+            { class: "vv-checkbox-group__hint" },
+            createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.hint ? {
+                name: "hint",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.loading ? {
+                name: "loading",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.valid ? {
+                name: "valid",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.invalid ? {
+                name: "invalid",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "3"
+              } : void 0
             ]),
-            key: "3"
-          } : void 0
-        ]), 1024)
-      ], 2);
+            1024
+            /* DYNAMIC_SLOTS */
+          )
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
 const VvComboboxEvents = [
   "update:modelValue",
+  "update:search",
+  /**
+   * @deprecated change:search should not be used, use update:search instead
+   */
   "change:search",
   "focus",
   "blur"
@@ -2726,13 +3284,13 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$b = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$b = {
+const _hoisted_1$c = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$e = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
@@ -2749,8 +3307,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     "leave",
     "leave-cancelled"
   ],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
     const attrs = useAttrs();
@@ -3086,58 +3645,78 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(VvDropdownTriggerProvider), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
-          ]),
-          _: 3
-        }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", {
-              ref_key: "floatingEl",
-              ref: floatingEl,
-              style: normalizeStyle(unref(dropdownPlacement)),
-              class: normalizeClass(unref(bemCssClasses))
-            }, [
-              props.arrow ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "arrowEl",
-                ref: arrowEl,
-                style: normalizeStyle(unref(arrowPlacement)),
-                class: "vv-dropdown__arrow"
-              }, null, 4)) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-              createElementVNode("div", mergeProps(unref(attrs), {
-                id: unref(hasId),
-                ref_key: "listEl",
-                ref: listEl,
-                tabindex: !unref(expanded) ? -1 : void 0,
-                role: unref(role),
-                "aria-labelledby": unref(hasAriaLabelledby),
-                class: "vv-dropdown__list"
-              }), [
-                renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
-                  role: unref(itemRole)
-                })))
-              ], 16, _hoisted_1$b),
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
-            ], 6), [
-              [vShow, unref(expanded)]
-            ])
-          ]),
-          _: 3
-        }, 16, ["name"])
-      ], 64);
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1$c),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });
-const __default__$a = {
+const __default__$d = {
   name: "VvDropdownItem"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -3151,22 +3730,28 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
-        ref_key: "element",
-        ref: element,
-        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
-      }), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });
-const _hoisted_1$a = ["title"];
-const __default__$9 = {
+const _hoisted_1$b = ["title"];
+const __default__$c = {
   name: "VvDropdownOption"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -3203,7 +3788,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, {
+      return openBlock(), createBlock(_sfc_main$h, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -3216,32 +3801,43 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             title: unref(hintLabel)
           }, [
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
-              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
             ])
-          ], 8, _hoisted_1$a)
+          ], 8, _hoisted_1$b)
         ]),
         _: 3
+        /* FORWARDED */
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   class: "vv-dropdown-optgroup",
   role: "presentation",
   tabindex: "-1"
 };
-const __default__$8 = {
+const __default__$b = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   props: {
     ...LabelProps
   },
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$9, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock(
+        "li",
+        _hoisted_1$a,
+        toDisplayString(props.label),
+        1
+        /* TEXT */
+      );
     };
   }
 });
@@ -3303,66 +3899,32 @@ function useComponentFocus(inputTemplateRef, emit) {
     focused
   };
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIconBefore = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
-  );
-  const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
-  );
-  const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
-  );
-  const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
-  );
-  const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
-  );
-  const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
-  );
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
-const _hoisted_1$8 = ["for"];
-const _hoisted_2$6 = { class: "vv-select__wrapper" };
-const _hoisted_3$4 = {
+const _hoisted_1$9 = ["for"];
+const _hoisted_2$7 = { class: "vv-select__wrapper" };
+const _hoisted_3$5 = {
   key: 0,
   class: "vv-select__input-before"
 };
 const _hoisted_4$4 = { class: "vv-select__inner" };
-const _hoisted_5$3 = ["id"];
-const _hoisted_6$3 = ["disabled", "hidden"];
-const _hoisted_7$3 = ["disabled", "value"];
+const _hoisted_5$4 = ["id"];
+const _hoisted_6$4 = ["disabled", "hidden"];
+const _hoisted_7$4 = ["disabled", "value"];
 const _hoisted_8$2 = ["disabled", "label"];
-const _hoisted_9$1 = ["disabled", "value"];
-const _hoisted_10 = {
+const _hoisted_9$2 = ["disabled", "value"];
+const _hoisted_10$1 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$7 = {
+const __default__$a = {
   name: "VvSelect"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
   props: VvSelectProps,
   emits: VvSelectEmits,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvSelect",
@@ -3398,10 +3960,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         focused.value = true;
       }
     });
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isDirty = computed(() => !isEmpty(props.modelValue));
     const isDisabled = computed(() => props.disabled || props.readonly);
     const hasTabindex = computed(() => {
@@ -3425,8 +3984,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: disabled.value,
         readonly: readonly.value,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         dirty: isDirty.value,
         focus: focused.value,
         floating: floating.value,
@@ -3475,137 +4034,171 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return option && option.options && option.options.length > 0;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", {
-          key: 0,
-          for: unref(hasId)
-        }, toDisplayString(_ctx.label), 9, _hoisted_1$8)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$6, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-              key: 0,
-              class: "vv-select__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("select", mergeProps({
-              id: unref(hasId),
-              ref_key: "select",
-              ref: select,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-            }, unref(hasAttrs)), [
-              _ctx.placeholder ? (openBlock(), createElementBlock("option", {
-                key: 0,
-                value: void 0,
-                disabled: !_ctx.unselectable,
-                hidden: !_ctx.unselectable
-              }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$3)) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  !isGroup(option) ? (openBlock(), createElementBlock("option", {
-                    key: index,
-                    disabled: unref(isOptionDisabled)(option),
-                    value: unref(getOptionValue)(option)
-                  }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$3)) : (openBlock(), createElementBlock("optgroup", {
-                    key: `group-${index}`,
-                    disabled: unref(isOptionDisabled)(option),
-                    label: unref(getOptionLabel)(option)
-                  }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(option), (item, i) => {
-                      return openBlock(), createElementBlock("option", {
-                        key: `group-${index}-item-${i}`,
-                        disabled: unref(isOptionDisabled)(item),
-                        value: unref(getOptionValue)(item)
-                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
-                    }), 128))
-                  ], 8, _hoisted_8$2))
-                ], 64);
-              }), 256))
-            ], 16, _hoisted_5$3), [
-              [vModelSelect, unref(localModelValue)]
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId)
+          }, toDisplayString(_ctx.label), 9, _hoisted_1$9)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$7, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_4$4, [
+              unref(hasIconBefore) ? (openBlock(), createBlock(
+                _sfc_main$u,
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true),
+              withDirectives(createElementVNode("select", mergeProps({
+                id: unref(hasId),
+                ref_key: "select",
+                ref: select,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              }, unref(hasAttrs)), [
+                _ctx.placeholder ? (openBlock(), createElementBlock("option", {
+                  key: 0,
+                  value: void 0,
+                  disabled: !_ctx.unselectable,
+                  hidden: !_ctx.unselectable
+                }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$4)) : createCommentVNode("v-if", true),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.options, (option, index) => {
+                    return openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      [
+                        !isGroup(option) ? (openBlock(), createElementBlock("option", {
+                          key: index,
+                          disabled: unref(isOptionDisabled)(option),
+                          value: unref(getOptionValue)(option)
+                        }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$4)) : (openBlock(), createElementBlock("optgroup", {
+                          key: `group-${index}`,
+                          disabled: unref(isOptionDisabled)(option),
+                          label: unref(getOptionLabel)(option)
+                        }, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(unref(getOptionGrouped)(option), (item, i) => {
+                              return openBlock(), createElementBlock("option", {
+                                key: `group-${index}-item-${i}`,
+                                disabled: unref(isOptionDisabled)(item),
+                                value: unref(getOptionValue)(item)
+                              }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$2);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ], 8, _hoisted_8$2))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    );
+                  }),
+                  256
+                  /* UNKEYED_FRAGMENT */
+                ))
+              ], 16, _hoisted_5$4), [
+                [vModelSelect, unref(localModelValue)]
+              ]),
+              unref(hasIconAfter) ? (openBlock(), createBlock(
+                _sfc_main$u,
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true)
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-              key: 1,
-              class: "vv-select__icon vv-select__icon-after"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-select__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
-const _hoisted_1$7 = ["id"];
-const _hoisted_2$5 = ["id", "for"];
-const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
+const _hoisted_1$8 = ["id"];
+const _hoisted_2$6 = ["id", "for"];
+const _hoisted_3$4 = ["id", "aria-controls", "placeholder"];
 const _hoisted_4$3 = {
   key: 0,
   class: "vv-select__input-before"
 };
-const _hoisted_5$2 = { class: "vv-select__inner" };
-const _hoisted_6$2 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
-const _hoisted_7$2 = {
+const _hoisted_5$3 = { class: "vv-select__inner" };
+const _hoisted_6$3 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
+const _hoisted_7$3 = {
   key: 0,
   class: "vv-select__value"
 };
 const _hoisted_8$1 = ["aria-label", "onClick"];
-const _hoisted_9 = {
+const _hoisted_9$1 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$6 = {
+const __default__$9 = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$e,
-    VvDropdownOption: _sfc_main$c,
-    VvDropdownOptgroup: _sfc_main$b,
-    VvButton: _sfc_main$j
+    VvDropdown: _sfc_main$i,
+    VvDropdownOption: _sfc_main$g,
+    VvDropdownOptgroup: _sfc_main$f,
+    VvButton: _sfc_main$n
   }
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   props: VvComboboxProps,
   emits: VvComboboxEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCombobox",
@@ -3651,10 +4244,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       searchText,
       computed(() => Number(props.debounceSearch))
     );
-    watch(
-      debouncedSearchText,
-      () => emit("change:search", debouncedSearchText.value)
-    );
+    watch(debouncedSearchText, () => {
+      emit("update:search", debouncedSearchText.value);
+      emit("change:search", debouncedSearchText.value);
+    });
     const expanded = ref(false);
     const toggleExpanded = () => {
       if (props.disabled || props.readonly)
@@ -3705,10 +4298,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const localLoading = ref(false);
     const isLoading = computed(() => localLoading.value || loading.value);
     const dropdownEl = ref();
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isDirty = computed(() => !isEmpty(props.modelValue));
     const hasTabindex = computed(() => {
       return disabled.value || readonly.value ? -1 : props.tabindex;
@@ -3720,12 +4310,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         disabled: disabled.value,
         loading: isLoading.value,
         readonly: readonly.value,
-        "icon-before": Boolean(hasIconBefore.value),
-        "icon-after": Boolean(hasIconAfter.value),
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         valid: valid.value,
         invalid: invalid.value,
         dirty: isDirty.value,
-        focus: focused.value,
+        focus: focused.value || focusedWithin.value || expanded.value,
         floating: floating.value,
         badges: props.badges
       }))
@@ -3802,7 +4392,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         if (!props.keepOpen) {
           collapse();
         }
-        if (props.unselectable && value === props.modelValue) {
+        if (Array.isArray(props.modelValue)) {
+          if (props.unselectable && props.modelValue.includes(value)) {
+            toReturn = [];
+          } else {
+            toReturn = [value];
+          }
+        } else if (props.unselectable && value === props.modelValue) {
           toReturn = void 0;
         }
       }
@@ -3878,208 +4474,301 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           key: 0,
           id: unref(hasLabelId),
           for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
-        }, toDisplayString(_ctx.label), 9, _hoisted_2$5)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "wrapperEl",
-          ref: wrapperEl,
-          class: "vv-select__wrapper"
-        }, [
-          createVNode(_sfc_main$e, mergeProps({
-            ref_key: "dropdownEl",
-            ref: dropdownEl,
-            modelValue: unref(expanded),
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
-          }, unref(dropdownProps), {
-            role: unref(DropdownRole).listbox,
-            onAfterExpand,
-            onAfterCollapse
-          }), createSlots({
-            default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
-                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5$2, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-                  key: 0,
-                  class: "vv-select__icon"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-                createElementVNode("div", mergeProps({
-                  ref_key: "inputEl",
-                  ref: inputEl
-                }, aria, {
-                  class: "vv-select__input",
-                  role: "combobox",
-                  "aria-expanded": unref(expanded),
-                  "aria-labelledby": unref(hasLabelId),
-                  "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
-                  "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
-                  tabindex: unref(hasTabindex),
-                  onClickPassive: onClickInput
-                }), [
-                  renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
-                    unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$l, {
-                          key: index,
-                          modifiers: _ctx.badgeModifiers,
-                          class: "vv-select__badge"
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(option)) + " ", 1),
-                            _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
-                              key: 0,
-                              "aria-label": unref(propsDefaults).deselectActionLabel,
-                              type: "button",
-                              onClick: withModifiers(($event) => onInput(option), ["stop"])
-                            }, [
-                              createVNode(_sfc_main$n, { name: "close" })
-                            ], 8, _hoisted_8$1)) : createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["modifiers"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createTextVNode(toDisplayString(_ctx.placeholder), 1)
-                    ], 64))
-                  ])
-                ], 16, _hoisted_6$2),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-                  key: 1,
-                  class: "vv-select__icon vv-select__icon-after"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
-              ]),
-              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true)
-            ]),
-            items: withCtx(() => {
-              var _a;
-              return [
-                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                  return openBlock(), createElementBlock(Fragment, { key: index }, [
-                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createVNode(_sfc_main$b, {
-                        label: unref(getOptionLabel)(option)
-                      }, null, 8, ["label"]),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                        option
-                      ), (item, i) => {
-                        return openBlock(), createBlock(_sfc_main$c, mergeProps({
-                          selected: isOptionSelected(item),
-                          disabled: unref(isOptionDisabled)(item),
-                          unselectable: _ctx.unselectable,
-                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                          selectHintLabel: unref(propsDefaults).selectHintLabel,
-                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                        }, {
-                          key: i,
-                          class: "vv-dropdown-option",
-                          onClickPassive: ($event) => onInput(item)
-                        }), {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                              option,
-                              selectedOptions: unref(selectedOptions),
-                              selected: isOptionSelected(item),
-                              disabled: unref(isOptionDisabled)(item)
-                            })), () => [
-                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                            ])
-                          ]),
-                          _: 2
-                        }, 1040, ["onClickPassive"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
-                      selected: isOptionSelected(option),
-                      disabled: unref(isOptionDisabled)(option),
-                      unselectable: _ctx.unselectable,
-                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                      selectHintLabel: unref(propsDefaults).selectHintLabel,
-                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                    }, {
-                      class: "vv-dropdown-option",
-                      onClickPassive: ($event) => onInput(option)
-                    }), {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                          option,
-                          selectedOptions: unref(selectedOptions),
-                          selected: isOptionSelected(option),
-                          disabled: unref(isOptionDisabled)(option)
-                        })), () => [
-                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                        ])
-                      ]),
-                      _: 2
-                    }, 1040, ["onClickPassive"]))
-                  ], 64);
-                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
-                  key: 1,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-options", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                    ])
-                  ]),
-                  _: 3
-                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$c, {
-                  key: 2,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-results", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+        }, toDisplayString(_ctx.label), 9, _hoisted_2$6)) : createCommentVNode("v-if", true),
+        createElementVNode(
+          "div",
+          {
+            ref_key: "wrapperEl",
+            ref: wrapperEl,
+            class: "vv-select__wrapper"
+          },
+          [
+            createVNode(_sfc_main$i, mergeProps({
+              ref_key: "dropdownEl",
+              ref: dropdownEl,
+              modelValue: unref(expanded),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
+            }, unref(dropdownProps), {
+              role: unref(DropdownRole).listbox,
+              onAfterExpand,
+              onAfterCollapse
+            }), createSlots({
+              default: withCtx(({ aria }) => [
+                _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true),
+                createElementVNode("div", _hoisted_5$3, [
+                  unref(hasIconBefore) ? (openBlock(), createBlock(
+                    _sfc_main$u,
+                    mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("div", mergeProps({
+                    ref_key: "inputEl",
+                    ref: inputEl
+                  }, aria, {
+                    class: "vv-select__input",
+                    role: "combobox",
+                    "aria-expanded": unref(expanded),
+                    "aria-labelledby": unref(hasLabelId),
+                    "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+                    "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
+                    tabindex: unref(hasTabindex),
+                    onClickPassive: onClickInput
+                  }), [
+                    renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
+                      unref(hasValue) ? (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 0 },
+                        [
+                          !_ctx.badges ? (openBlock(), createElementBlock(
+                            "div",
+                            _hoisted_7$3,
+                            toDisplayString(unref(hasValue)),
+                            1
+                            /* TEXT */
+                          )) : (openBlock(true), createElementBlock(
+                            Fragment,
+                            { key: 1 },
+                            renderList(unref(selectedOptions), (option, index) => {
+                              return openBlock(), createBlock(_sfc_main$p, {
+                                key: index,
+                                modifiers: _ctx.badgeModifiers,
+                                class: "vv-select__badge"
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(
+                                    toDisplayString(unref(getOptionLabel)(option)) + " ",
+                                    1
+                                    /* TEXT */
+                                  ),
+                                  _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
+                                    key: 0,
+                                    "aria-label": unref(propsDefaults).deselectActionLabel,
+                                    type: "button",
+                                    onClick: withModifiers(($event) => onInput(option), ["stop"])
+                                  }, [
+                                    createVNode(_sfc_main$u, { name: "close" })
+                                  ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["modifiers"]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createTextVNode(
+                            toDisplayString(_ctx.placeholder),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
                     ])
-                  ]),
-                  _: 3
-                })) : createCommentVNode("", true)
-              ];
-            }),
-            after: withCtx(() => [
-              renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  ], 16, _hoisted_6$3),
+                  unref(hasIconAfter) ? (openBlock(), createBlock(
+                    _sfc_main$u,
+                    mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true)
+                ]),
+                _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true)
+              ]),
+              items: withCtx(() => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$j, {
-                    key: 0,
-                    label: unref(propsDefaults).closeLabel,
-                    modifiers: "secondary",
-                    onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
-                  }, null, 8, ["label"])) : createCommentVNode("", true)
+                  !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(
+                    Fragment,
+                    { key: 0 },
+                    renderList(unref(filteredOptions), (option, index) => {
+                      return openBlock(), createElementBlock(
+                        Fragment,
+                        { key: index },
+                        [
+                          isGroup(option) ? (openBlock(), createElementBlock(
+                            Fragment,
+                            { key: 0 },
+                            [
+                              createVNode(_sfc_main$f, {
+                                label: unref(getOptionLabel)(option)
+                              }, null, 8, ["label"]),
+                              (openBlock(true), createElementBlock(
+                                Fragment,
+                                null,
+                                renderList(unref(getOptionGrouped)(
+                                  option
+                                ), (item, i) => {
+                                  return openBlock(), createBlock(_sfc_main$g, mergeProps({
+                                    selected: isOptionSelected(item),
+                                    disabled: unref(isOptionDisabled)(item),
+                                    unselectable: _ctx.unselectable,
+                                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                                    selectHintLabel: unref(propsDefaults).selectHintLabel,
+                                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                                  }, {
+                                    key: i,
+                                    class: "vv-dropdown-option",
+                                    onClickPassive: ($event) => onInput(item)
+                                  }), {
+                                    default: withCtx(() => [
+                                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                                        option,
+                                        selectedOptions: unref(selectedOptions),
+                                        selected: isOptionSelected(item),
+                                        disabled: unref(isOptionDisabled)(item)
+                                      })), () => [
+                                        createTextVNode(
+                                          toDisplayString(unref(getOptionLabel)(item)),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ])
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1040, ["onClickPassive"]);
+                                }),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
+                            ],
+                            64
+                            /* STABLE_FRAGMENT */
+                          )) : (openBlock(), createBlock(_sfc_main$g, mergeProps({ key: 1 }, {
+                            selected: isOptionSelected(option),
+                            disabled: unref(isOptionDisabled)(option),
+                            unselectable: _ctx.unselectable,
+                            deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                            selectHintLabel: unref(propsDefaults).selectHintLabel,
+                            selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                          }, {
+                            class: "vv-dropdown-option",
+                            onClickPassive: ($event) => onInput(option)
+                          }), {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                                option,
+                                selectedOptions: unref(selectedOptions),
+                                selected: isOptionSelected(option),
+                                disabled: unref(isOptionDisabled)(option)
+                              })), () => [
+                                createTextVNode(
+                                  toDisplayString(unref(getOptionLabel)(option)),
+                                  1
+                                  /* TEXT */
+                                )
+                              ])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1040, ["onClickPassive"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$g, {
+                    key: 1,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-options", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noOptionsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$g, {
+                    key: 2,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-results", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noResultsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : createCommentVNode("v-if", true)
                 ];
-              })
-            ]),
-            _: 2
-          }, [
-            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
-              name: "before",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
-                  key: 0,
-                  id: unref(hasSearchId),
-                  ref_key: "inputSearchEl",
-                  ref: inputSearchEl,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
-                  "aria-autocomplete": "list",
-                  "aria-controls": unref(hasDropdownId),
-                  autocomplete: "off",
-                  spellcheck: "false",
-                  type: "search",
-                  class: "vv-dropdown__search",
-                  placeholder: unref(propsDefaults).searchPlaceholder
-                }, null, 8, _hoisted_3$3)), [
-                  [vModelText, unref(searchText)]
-                ]) : createCommentVNode("", true)
+              }),
+              after: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  var _a;
+                  return [
+                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$n, {
+                      key: 0,
+                      label: unref(propsDefaults).closeLabel,
+                      modifiers: "secondary",
+                      onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
+                    }, null, 8, ["label"])) : createCommentVNode("v-if", true)
+                  ];
+                })
               ]),
-              key: "0"
-            } : void 0
-          ]), 1040, ["modelValue", "role"])
-        ], 512),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
+                name: "before",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "dropdown::before"),
+                  unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
+                    key: 0,
+                    id: unref(hasSearchId),
+                    ref_key: "inputSearchEl",
+                    ref: inputSearchEl,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
+                    "aria-autocomplete": "list",
+                    "aria-controls": unref(hasDropdownId),
+                    autocomplete: "off",
+                    spellcheck: "false",
+                    type: "search",
+                    class: "vv-dropdown__search",
+                    placeholder: unref(propsDefaults).searchPlaceholder
+                  }, null, 8, _hoisted_3$4)), [
+                    [vModelText, unref(searchText)]
+                  ]) : createCommentVNode("v-if", true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["modelValue", "role"])
+          ],
+          512
+          /* NEED_PATCH */
+        ),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [
@@ -4109,9 +4798,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$7)) : (openBlock(), createBlock(_sfc_main$a, mergeProps({ key: 1 }, unref(selectProps), {
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
-      }), null, 16));
+      ], 10, _hoisted_1$8)) : (openBlock(), createBlock(
+        _sfc_main$e,
+        mergeProps({ key: 1 }, unref(selectProps), {
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
+        }),
+        null,
+        16
+        /* FULL_PROPS */
+      ));
     };
   }
 });
@@ -4154,25 +4849,25 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$6 = ["onCancel"];
-const _hoisted_2$4 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_3$2 = { class: "vv-dialog__content" };
-const _hoisted_4$2 = {
+const _hoisted_2$5 = { class: "vv-dialog__content" };
+const _hoisted_3$3 = {
   key: 1,
   class: "vv-dialog__footer"
 };
-const __default__$5 = {
+const __default__$8 = {
   name: "VvDialog"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: VvDialogProps,
   emits: VvDialogEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const dialogEl = ref();
     const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
@@ -4254,48 +4949,116 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
+      return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers), { persisted: "" }), {
         default: withCtx(() => [
-          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
-            ref_key: "dialogEl",
-            ref: dialogEl,
-            class: unref(dialogClass),
-            onCancel: withModifiers(onCancel, ["stop", "prevent"])
-          }), [
-            createElementVNode("article", {
-              ref_key: "modalWrapper",
-              ref: modalWrapper,
-              class: "vv-dialog__wrapper"
-            }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2$4, [
-                renderSlot(_ctx.$slots, "header", {}, () => [
-                  createTextVNode(toDisplayString(_ctx.title) + " ", 1),
-                  createElementVNode("button", {
-                    type: "button",
-                    "aria-label": "Close",
-                    class: "vv-dialog__close",
-                    onClickPassive: close
-                  }, [
-                    createVNode(_sfc_main$n, { name: "close" })
-                  ], 32)
-                ])
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_3$2, [
-                renderSlot(_ctx.$slots, "default")
-              ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$2, [
-                renderSlot(_ctx.$slots, "footer")
-              ])) : createCommentVNode("", true)
-            ], 512)
-          ], 16, _hoisted_1$6), [
+          withDirectives(createElementVNode(
+            "dialog",
+            mergeProps(unref(dialogAttrs), {
+              ref_key: "dialogEl",
+              ref: dialogEl,
+              class: unref(dialogClass),
+              onCancel: withModifiers(onCancel, ["stop", "prevent"])
+            }),
+            [
+              createElementVNode(
+                "article",
+                {
+                  ref_key: "modalWrapper",
+                  ref: modalWrapper,
+                  class: "vv-dialog__wrapper"
+                },
+                [
+                  _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$7, [
+                    renderSlot(_ctx.$slots, "header", {}, () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.title) + " ",
+                        1
+                        /* TEXT */
+                      ),
+                      createElementVNode(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Close",
+                          class: "vv-dialog__close",
+                          onClickPassive: close
+                        },
+                        [
+                          createVNode(_sfc_main$u, { name: "close" })
+                        ],
+                        32
+                        /* NEED_HYDRATION */
+                      )
+                    ])
+                  ])) : createCommentVNode("v-if", true),
+                  createElementVNode("div", _hoisted_2$5, [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$3, [
+                    renderSlot(_ctx.$slots, "footer")
+                  ])) : createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            16
+            /* FULL_PROPS */
+          ), [
             [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["name"]);
     };
   }
 });
+const __default__$7 = {
+  name: "VvDropdownAction"
+};
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
+  props: {
+    ...ActionProps,
+    ...ModifiersProps
+  },
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-dropdown-action", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$h, null, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$v, mergeProps({
+            disabled: _ctx.disabled,
+            pressed: _ctx.pressed,
+            active: _ctx.active,
+            type: _ctx.type,
+            to: _ctx.to,
+            href: _ctx.href,
+            target: _ctx.target,
+            rel: _ctx.rel
+          }, { class: unref(bemCssClasses) }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(
+                  toDisplayString(_ctx.label),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      });
+    };
+  }
+});
 const INPUT_TYPES = {
   TEXT: "text",
   PASSWORD: "password",
@@ -4486,7 +5249,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$u
   },
   props: {
     disabled: {
@@ -4530,7 +5293,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$n, {
+    const icon = h(_sfc_main$u, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -4549,7 +5312,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$u
   },
   props: {
     disabled: {
@@ -4594,7 +5357,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$n
+    VvIcon: _sfc_main$u
   },
   props: {
     disabled: {
@@ -4623,7 +5386,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$n, {
+    const icon = h(_sfc_main$u, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -4644,7 +5407,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$n,
+      VvIcon: _sfc_main$u,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4771,35 +5534,35 @@ function useTextCount(text, options) {
     formatted
   };
 }
-const _hoisted_1$5 = ["for"];
-const _hoisted_2$3 = { class: "vv-input-text__wrapper" };
-const _hoisted_3$1 = {
+const _hoisted_1$6 = ["for"];
+const _hoisted_2$4 = { class: "vv-input-text__wrapper" };
+const _hoisted_3$2 = {
   key: 0,
   class: "vv-input-text__input-before"
 };
-const _hoisted_4$1 = ["onClick"];
-const _hoisted_5$1 = ["id"];
-const _hoisted_6$1 = {
+const _hoisted_4$2 = ["id"];
+const _hoisted_5$2 = {
   key: 1,
   class: "vv-input-text__unit"
 };
-const _hoisted_7$1 = {
+const _hoisted_6$2 = {
   key: 5,
   class: "vv-input-text__input-after"
 };
-const _hoisted_8 = {
+const _hoisted_7$2 = {
   key: 6,
   class: "vv-input-text__limit"
 };
-const __default__$4 = {
+const __default__$6 = {
   name: "VvInputText"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvInputText",
@@ -4962,7 +5725,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return;
         }
         inputEl.value.stepUp();
-        localModelValue.value = unref(inputEl).value;
+        localModelValue.value = Number(unref(inputEl).value);
       }
     };
     const onStepDown = () => {
@@ -4972,18 +5735,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return;
         }
         inputEl.value.stepDown();
-        localModelValue.value = unref(inputEl).value;
+        localModelValue.value = Number(unref(inputEl).value);
       }
     };
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
     const onClear = () => {
       localModelValue.value = "";
     };
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const defaultAfterIcon = computed(() => {
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const iconAfter = computed(() => {
+      if (hasIconAfter.value !== void 0) {
+        return hasIconAfter.value;
+      }
       switch (props.type) {
         case INPUT_TYPES.COLOR:
           return { name: TYPES_ICON.COLOR };
@@ -4994,9 +5757,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return { name: TYPES_ICON.DATE };
         case INPUT_TYPES.TIME:
           return { name: TYPES_ICON.TIME };
-        default:
-          return "";
       }
+      return void 0;
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: count.value,
@@ -5027,8 +5789,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value || !isEmpty(defaultAfterIcon),
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": iconAfter.value !== void 0,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
         focus: isFocused.value,
@@ -5136,177 +5898,250 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       emit("keydown", event);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        unref(label) ? (openBlock(), createElementBlock("label", {
-          key: 0,
-          for: unref(hasId),
-          class: "vv-input-text__label"
-        }, toDisplayString(unref(label)), 9, _hoisted_1$5)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$3, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            ref_key: "innerEl",
-            ref: innerEl,
-            class: "vv-input-text__inner",
-            onClick: withModifiers(onClickInner, ["stop"])
-          }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-              key: 0,
-              class: "vv-input-text__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            createElementVNode("input", mergeProps({
-              id: unref(hasId),
-              ref_key: "inputEl",
-              ref: inputEl
-            }, unref(hasAttrs), {
-              style: unref(hasStyle),
-              onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
-              onKeydown: onKeyDown,
-              onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
-            }), null, 16, _hoisted_5$1),
-            (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
-              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-                createTextVNode(toDisplayString(_ctx.unit), 1)
-              ])
-            ])) : createCommentVNode("", true)
-          ], 8, _hoisted_4$1),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-            key: 1,
-            class: "vv-input-text__icon vv-input-text__icon-after"
-          }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
-            key: 2,
-            onTogglePassword
-          })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
-            key: 3,
-            onStepUp,
-            onStepDown
-          })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
-            key: 4,
-            onClear
-          })) : createCommentVNode("", true),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          unref(count) ? (openBlock(), createElementBlock("span", _hoisted_8, [
-            renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-              createTextVNode(toDisplayString(unref(countFormatted)), 1)
-            ])
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-input-text__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          unref(label) ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId),
+            class: "vv-input-text__label"
+          }, toDisplayString(unref(label)), 9, _hoisted_1$6)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$4, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "innerEl",
+                ref: innerEl,
+                class: "vv-input-text__inner",
+                onClick: withModifiers(onClickInner, ["stop"])
+              },
+              [
+                unref(hasIconBefore) ? (openBlock(), createBlock(
+                  _sfc_main$u,
+                  mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                createElementVNode("input", mergeProps({
+                  id: unref(hasId),
+                  ref_key: "inputEl",
+                  ref: inputEl
+                }, unref(hasAttrs), {
+                  style: unref(hasStyle),
+                  onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+                  onKeydown: onKeyDown,
+                  onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+                }), null, 16, _hoisted_4$2),
+                (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+                  renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                    createTextVNode(
+                      toDisplayString(_ctx.unit),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            unref(iconAfter) ? (openBlock(), createBlock(
+              _sfc_main$u,
+              mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
+              key: 2,
+              onTogglePassword
+            })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
+              key: 3,
+              onStepUp,
+              onStepDown
+            })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
+              key: 4,
+              onClear
+            })) : createCommentVNode("v-if", true),
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7$2, [
+              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                createTextVNode(
+                  toDisplayString(unref(countFormatted)),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])) : createCommentVNode("v-if", true)
+          ]),
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-input-text__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
 const VvNavProps = {
   ...ModifiersProps,
-  items: {
-    type: Array,
-    required: true,
-    default: () => []
-  }
+  ...NavProps
 };
 const VvNavEvents = ["click"];
-const _hoisted_1$4 = {
-  class: "vv-nav__menu",
-  role: "menu",
-  "aria-busy": "true"
+const _hoisted_1$5 = {
+  class: "vv-nav__item",
+  role: "presentation"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const __default__$5 = {
+  name: "VvNavItem",
+  inheritAttrs: false
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$5, [
+        createVNode(
+          _sfc_main$v,
+          mergeProps(_ctx.$attrs, { class: "vv-nav__item-label" }),
+          {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          16
+          /* FULL_PROPS */
+        )
+      ]);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VvNav",
   props: VvNavProps,
   emits: VvNavEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const { modifiers, items } = toRefs(props);
-    const activeItem = ref(null);
-    const bemCssClasses = useModifiers("vv-nav", modifiers);
-    const localItems = computed(() => {
-      return items.value.map((item, index) => {
-        return {
-          ...item,
-          id: item.id || `nav-item_${index}`
-        };
-      });
-    });
-    function onClick(item) {
-      if (!item.disabled) {
+    const { modifiers } = toRefs(props);
+    const emit = __emit;
+    const onClick = (event) => {
+      var _a;
+      const target = event.target;
+      if (target == null ? void 0 : target.dataset.index) {
+        const index = parseInt(target.dataset.index);
+        const item = (_a = props.items) == null ? void 0 : _a[index];
+        if (!item || (item == null ? void 0 : item.disabled)) {
+          return;
+        }
         emit("click", item);
-        activeItem.value = item.id;
       }
-    }
+    };
+    const bemCssClasses = useModifiers("vv-nav", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        createElementVNode("ul", _hoisted_1$4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (navItem) => {
-            return openBlock(), createElementBlock("li", {
-              key: navItem.id,
-              class: "vv-nav__item",
-              role: "presentation"
-            }, [
-              createVNode(_sfc_main$o, mergeProps({
-                disabled: navItem.disabled,
-                to: navItem.to,
-                href: navItem.href,
-                tabindex: 0
-              }, {
-                class: [{
-                  current: unref(activeItem) == navItem.id,
-                  disabled: navItem.disabled
-                }, "vv-nav__item-label"]
-              }, toHandlers(navItem.on), {
-                onClick: ($event) => onClick(navItem)
-              }), {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(navItem.title), 1)
-                ]),
-                _: 2
-              }, 1040, ["class", "onClick"])
-            ]);
-          }), 128))
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "nav",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          createElementVNode("ul", {
+            class: "vv-nav__menu",
+            role: "menu",
+            "aria-busy": "true",
+            onClick: withModifiers(onClick, ["stop"])
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.items, ({ on = {}, data, ...item }, index) => {
+                  return openBlock(), createBlock(_sfc_main$9, mergeProps({
+                    key: index,
+                    "data-index": index
+                  }, item, toHandlers(on)), {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, data, index })))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1040, ["data-index"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
+const _sfc_main$7 = {
+  name: "VvNavSeparator"
+};
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$4 = {
+  class: "vv-nav__separator",
+  role: "separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", _hoisted_1$4, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const VvNavSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render]]);
 const VvProgressProps = {
   ...ModifiersProps,
   /**
@@ -5337,11 +6172,11 @@ const VvProgressProps = {
     required: true
   }
 };
-const __default__$3 = {
+const __default__$4 = {
   name: "VvProgress"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   props: VvProgressProps,
   setup(__props) {
     const props = __props;
@@ -5354,12 +6189,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       computed(() => ({ indeterminate: indeterminate.value }))
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("progress", mergeProps({ role: "progressbar" }, {
-        class: unref(bemCssClasses),
-        ariaLabel: unref(ariaLabel),
-        max: unref(max),
-        value: unref(value)
-      }), null, 16);
+      return openBlock(), createElementBlock(
+        "progress",
+        mergeProps({ role: "progressbar" }, {
+          class: unref(bemCssClasses),
+          ariaLabel: unref(ariaLabel),
+          max: unref(max),
+          value: unref(value)
+        }),
+        null,
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });
@@ -5397,16 +6238,17 @@ function useGroupProps(props, emit) {
   };
 }
 const _hoisted_1$3 = ["for"];
-const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
-const __default__$2 = {
+const _hoisted_2$3 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
+const __default__$3 = {
   name: "VvRadio"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   props: VvRadioProps,
   emits: VvRadioEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvRadio",
@@ -5483,16 +6325,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           "aria-invalid": unref(isInvalid),
           "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
           "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0
-        }, null, 8, _hoisted_2$2), [
+        }, null, 8, _hoisted_2$3), [
           [vModelRadio, unref(localModelValue)]
         ]),
         renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
-          createTextVNode(toDisplayString(_ctx.label), 1)
+          createTextVNode(
+            toDisplayString(_ctx.label),
+            1
+            /* TEXT */
+          )
         ]),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-radio__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [
@@ -5529,16 +6378,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 const VvRadioGroupProps = CheckboxRadioGroupProps;
 const VvRadioGroupEvents = ["update:modelValue", "change"];
 const _hoisted_1$2 = ["textContent"];
-const _hoisted_2$1 = { class: "vv-radio-group__wrapper" };
-const __default__$1 = {
+const _hoisted_2$2 = { class: "vv-radio-group__wrapper" };
+const __default__$2 = {
   name: "VvRadioGroup"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
   props: VvRadioGroupProps,
   emits: VvRadioGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvRadioGroup",
@@ -5577,104 +6427,195 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.label ? (openBlock(), createElementBlock("legend", {
-          key: 0,
-          textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$1, [
-          _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$4, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
-          }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
-        ]),
-        createVNode(unref(HintSlot), { class: "vv-radio-group__hint" }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+      return openBlock(), createElementBlock(
+        "fieldset",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("legend", {
+            key: 0,
+            textContent: toDisplayString(_ctx.label)
+          }, null, 8, _hoisted_1$2)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$2, [
+            _ctx.options.length > 0 ? (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 0 },
+              renderList(_ctx.options, (option, index) => {
+                return openBlock(), createBlock(
+                  _sfc_main$5,
+                  mergeProps({ key: index }, getOptionProps(option, index)),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          ]),
+          createVNode(
+            unref(HintSlot),
+            { class: "vv-radio-group__hint" },
+            createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.hint ? {
+                name: "hint",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.loading ? {
+                name: "loading",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.valid ? {
+                name: "valid",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.invalid ? {
+                name: "invalid",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+                ]),
+                key: "3"
+              } : void 0
             ]),
-            key: "3"
-          } : void 0
-        ]), 1024)
-      ], 2);
+            1024
+            /* DYNAMIC_SLOTS */
+          )
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
 const VvTabProps = {
   ...ModifiersProps,
+  navModifiers: {
+    type: [String, Array]
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
   items: {
     type: Array,
-    required: true,
     default: () => []
   }
 };
-const VvTabEvents = ["click"];
-const _hoisted_1$1 = ["id"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const VvTabEvents = ["update:modelValue"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "VvTab",
   props: VvTabProps,
   emits: VvTabEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { modifiers, items } = toRefs(props);
-    const activeTab = ref(null);
-    const bemCssClasses = useModifiers("vv-tab", modifiers);
-    const localItems = computed(() => {
-      return items.value.map((item, index) => {
-        return {
-          ...item,
-          id: item.id || `tab-item_${index}`
-        };
-      });
+    const tabKeys = computed(() => {
+      return items.value.reduce((acc, item) => {
+        if (item.tab) {
+          acc.push(item.tab);
+        }
+        return acc;
+      }, []);
     });
-    function onClick(item) {
-      if (!item.disabled) {
-        emit("click", item);
-        activeTab.value = item.id;
+    const localModelValue = ref();
+    const activeTabKey = computed({
+      get: () => {
+        var _a;
+        return props.modelValue || localModelValue.value || ((_a = tabKeys.value) == null ? void 0 : _a[0]);
+      },
+      set: (newValue) => {
+        localModelValue.value = newValue;
+        emit("update:modelValue", newValue);
       }
-    }
+    });
+    const hasNavModifiers = computed(() => {
+      var _a;
+      return [
+        "tabs",
+        ...Array.isArray(props.navModifiers) ? props.navModifiers : ((_a = props.navModifiers) == null ? void 0 : _a.split(" ")) ?? []
+      ];
+    });
+    const onNavClick = (item) => {
+      if (item.tab) {
+        activeTabKey.value = item.tab;
+      }
+    };
+    const navItems = computed(
+      () => props.items.map((item) => ({
+        current: item.tab === activeTabKey.value,
+        ...item
+      }))
+    );
+    const bemCssClasses = useModifiers("vv-tab", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        createVNode(_sfc_main$6, {
-          items: unref(localItems),
-          modifiers: "tabs full",
-          onClick
-        }, null, 8, ["items"]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (item) => {
-          return openBlock(), createElementBlock("article", {
-            id: item.id,
-            key: item.id,
-            class: normalizeClass([{ target: unref(activeTab) === item.id }, "vv-tab__panel"])
-          }, [
-            renderSlot(_ctx.$slots, `${item.id}`)
-          ], 10, _hoisted_1$1);
-        }), 128))
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          createVNode(
+            _sfc_main$8,
+            mergeProps({
+              items: unref(navItems),
+              modifiers: unref(hasNavModifiers)
+            }, { onClick: onNavClick }),
+            {
+              item: withCtx(({ item, data, index }) => [
+                renderSlot(_ctx.$slots, "nav-item", normalizeProps(guardReactiveProps({ item, data, index })))
+              ]),
+              _: 3
+              /* FORWARDED */
+            },
+            16
+            /* FULL_PROPS */
+          ),
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(unref(items), (item, index) => {
+              return openBlock(), createElementBlock(
+                Fragment,
+                { key: index },
+                [
+                  item.tab ? (openBlock(), createElementBlock(
+                    "article",
+                    {
+                      key: 0,
+                      class: normalizeClass([{ target: unref(activeTabKey) === item.tab }, "vv-tab__panel"])
+                    },
+                    [
+                      renderSlot(_ctx.$slots, `panel::${item.tab}`)
+                    ],
+                    2
+                    /* CLASS */
+                  )) : createCommentVNode("v-if", true)
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -5720,31 +6661,32 @@ const VvTextareaProps = {
    */
   resizable: Boolean
 };
-const _hoisted_1 = ["for"];
-const _hoisted_2 = { class: "vv-textarea__wrapper" };
-const _hoisted_3 = {
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = { class: "vv-textarea__wrapper" };
+const _hoisted_3$1 = {
   key: 0,
   class: "vv-textarea__input-before"
 };
-const _hoisted_4 = { class: "vv-textarea__inner" };
-const _hoisted_5 = ["id"];
-const _hoisted_6 = {
+const _hoisted_4$1 = { class: "vv-textarea__inner" };
+const _hoisted_5$1 = ["id"];
+const _hoisted_6$1 = {
   key: 1,
   class: "vv-textarea__input-after"
 };
-const _hoisted_7 = {
+const _hoisted_7$1 = {
   key: 2,
   class: "vv-textarea__limit"
 };
-const __default__ = {
+const __default__$1 = {
   name: "VvTextarea"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   props: VvTextareaProps,
   emits: VvTextareaEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvTextarea",
@@ -5773,10 +6715,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
     const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const { focused } = useComponentFocus(textarea, emit);
     const isVisible = useElementVisibility(textarea);
     watch(isVisible, (newValue) => {
@@ -5818,11 +6757,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
-        focused: focused.value,
+        focus: focused.value,
         resizable: props.resizable
       }))
     );
@@ -5859,81 +6798,100 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       localModelValue.value = void 0;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        unref(label) ? (openBlock(), createElementBlock("label", {
-          key: 0,
-          for: unref(hasId),
-          class: "vv-textarea__label"
-        }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-              key: 0,
-              class: "vv-textarea__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("textarea", mergeProps({
-              id: unref(hasId),
-              ref_key: "textarea",
-              ref: textarea,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-            }, unref(hasAttrs), {
-              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
-            }), null, 16, _hoisted_5), [
-              [vModelText, unref(localModelValue)]
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          unref(label) ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId),
+            class: "vv-textarea__label"
+          }, toDisplayString(unref(label)), 9, _hoisted_1$1)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$1, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_4$1, [
+              unref(hasIconBefore) ? (openBlock(), createBlock(
+                _sfc_main$u,
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true),
+              withDirectives(createElementVNode("textarea", mergeProps({
+                id: unref(hasId),
+                ref_key: "textarea",
+                ref: textarea,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              }, unref(hasAttrs), {
+                onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
+              }), null, 16, _hoisted_5$1), [
+                [vModelText, unref(localModelValue)]
+              ]),
+              unref(hasIconAfter) ? (openBlock(), createBlock(
+                _sfc_main$u,
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true)
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
-              key: 1,
-              class: "vv-textarea__icon vv-textarea__icon-after"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7$1, [
+              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                createTextVNode(
+                  toDisplayString(unref(countFormatted)),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])) : createCommentVNode("v-if", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7, [
-            renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-              createTextVNode(toDisplayString(unref(countFormatted)), 1)
-            ])
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-textarea__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-textarea__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -5951,7 +6909,7 @@ const VvTooltipProps = {
     type: String
   }
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "VvTooltip",
   props: VvTooltipProps,
   setup(__props) {
@@ -5965,41 +6923,417 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "tooltip",
-        inert: ""
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          role: "tooltip",
+          inert: ""
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+const VvInputFileProps = {
+  ...ModifiersProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LabelProps,
+  ...LoadingProps,
+  ...ReadonlyProps,
+  name: { type: String },
+  id: { type: String },
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  max: [Number, String],
+  labelButton: { type: String, default: "Image" },
+  loading: Boolean,
+  accept: String,
+  placeholder: String,
+  multiple: Boolean,
+  iconLeft: String,
+  iconRight: String
+};
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { class: "vv-input-file__preview" };
+const _hoisted_3 = ["src", "alt"];
+const _hoisted_4 = { class: "vv-input-file__wrapper" };
+const _hoisted_5 = ["id", "readonly", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "name"];
+const _hoisted_6 = { class: "vv-input-file__list" };
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "vv-input-file__item-name cursor-pointer" };
+const _hoisted_10 = { class: "vv-input-file__item-info" };
+const _hoisted_11 = ["onClick"];
+const __default__ = {
+  name: "VvInputFile"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvInputFileProps,
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvInputFile",
+      VvInputFileProps,
+      props
+    );
+    const { modifiers, id, readonly } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
+    const bemCssClasses = useModifiers(
+      "vv-input-file",
+      modifiers,
+      computed(() => ({
+        dragging: isDragging.value,
+        loading: props.loading,
+        valid: props.valid === true,
+        invalid: props.invalid === true,
+        "icon-before": !!props.iconLeft,
+        "icon-after": !!props.iconRight
+      }))
+    );
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(propsDefaults, slots);
+    const localModelValue = useVModel(props, "modelValue", emit);
+    const files = computed(() => {
+      var _a;
+      if (!localModelValue.value || !Array.isArray(localModelValue.value) && !((_a = localModelValue.value) == null ? void 0 : _a.name)) {
+        return [];
+      }
+      return Array.isArray(localModelValue.value) ? localModelValue.value : [localModelValue.value];
+    });
+    const hasMax = computed(() => {
+      return typeof props.max === "string" ? parseInt(props.max) : props.max;
+    });
+    const hasDropArea = computed(() => {
+      var _a;
+      return (_a = modifiers == null ? void 0 : modifiers.value) == null ? void 0 : _a.includes("drop-area");
+    });
+    const isMultiple = computed(() => {
+      if (!props.multiple) {
+        return false;
+      }
+      if (!hasMax.value) {
+        return true;
+      }
+      return hasMax.value - files.value.length > 1;
+    });
+    const isDragging = ref(false);
+    const inputEl = ref();
+    const onDragenter = () => {
+      isDragging.value = true;
+    };
+    const onDragleave = () => {
+      isDragging.value = false;
+    };
+    const onDrop = (event) => {
+      var _a, _b;
+      if (!((_a = event.dataTransfer) == null ? void 0 : _a.files)) {
+        return;
+      }
+      isDragging.value = false;
+      addFiles((_b = event.dataTransfer) == null ? void 0 : _b.files);
+    };
+    const onChange = () => {
+      var _a;
+      if (!((_a = inputEl.value) == null ? void 0 : _a.files)) {
+        return;
+      }
+      addFiles(inputEl.value.files);
+      inputEl.value.value = "";
+    };
+    const addFiles = (uploadedFiles) => {
+      if (!props.multiple) {
+        if (Array.isArray(localModelValue.value)) {
+          localModelValue.value = [...uploadedFiles];
+          return;
+        }
+        localModelValue.value = uploadedFiles[0];
+        return;
+      }
+      let toReturn = [];
+      if (!Array.isArray(localModelValue.value) && localModelValue.value) {
+        toReturn = [localModelValue.value];
+      } else {
+        toReturn = localModelValue.value && Array.isArray(localModelValue.value) ? [...localModelValue.value] : toReturn;
+      }
+      for (const file of uploadedFiles) {
+        if (hasMax.value && toReturn.length >= hasMax.value) {
+          break;
+        }
+        toReturn.push(file);
+      }
+      localModelValue.value = toReturn;
+    };
+    const onClick = () => {
+      if (!inputEl.value) {
+        return;
+      }
+      if (!readonly.value) {
+        inputEl.value.click();
+      }
+    };
+    const onClickRemoveFile = (index) => {
+      if (!Array.isArray(localModelValue.value)) {
+        localModelValue.value = void 0;
+        return;
+      }
+      const toReturn = [...localModelValue.value];
+      toReturn.splice(index, 1);
+      localModelValue.value = toReturn;
+    };
+    const currentFileIndex = ref(0);
+    const previewSrc = computed(() => {
+      if (files.value.length === 0) {
+        return;
+      }
+      if (files.value[currentFileIndex.value] instanceof File) {
+        return URL.createObjectURL(
+          files.value[currentFileIndex.value]
+        );
+      }
+      return files.value[currentFileIndex.value].url;
+    });
+    onBeforeUnmount(() => {
+      if (previewSrc.value) {
+        URL.revokeObjectURL(previewSrc.value);
+      }
+    });
+    const sizeInKiB = (size2) => {
+      if (!size2) {
+        return;
+      }
+      return Math.floor(size2 / 1024);
+    };
+    const onClickDownloadFile = (file) => {
+      const link = document.createElement("a");
+      if (file instanceof File) {
+        link.href = URL.createObjectURL(file);
+      } else if (file.url) {
+        link.href = file.url;
+      }
+      link.setAttribute("download", file.name);
+      document.body.appendChild(link);
+      link.click();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId)
+          }, toDisplayString(_ctx.label), 9, _hoisted_1)) : createCommentVNode("v-if", true),
+          hasDropArea.value ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: "vv-input-file__drop-area",
+              onDragenter: withModifiers(onDragenter, ["prevent", "stop"]),
+              onDragleave: withModifiers(onDragleave, ["prevent", "stop"]),
+              onDrop: withModifiers(onDrop, ["prevent", "stop"]),
+              onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["prevent", "stop"])),
+              onClick: withModifiers(onClick, ["stop"])
+            },
+            [
+              renderSlot(_ctx.$slots, "drop-area", {}, () => [
+                !unref(readonly) ? (openBlock(), createBlock(_sfc_main$n, {
+                  key: 0,
+                  modifiers: "action",
+                  "aria-label": "upload",
+                  label: !previewSrc.value ? _ctx.labelButton : void 0,
+                  class: normalizeClass([{
+                    "absolute top-8 right-8": previewSrc.value
+                  }, "z-1"]),
+                  icon: !previewSrc.value ? "image" : isMultiple.value ? "add" : "edit",
+                  onClick: withModifiers(onClick, ["stop"])
+                }, null, 8, ["label", "class", "icon"])) : createCommentVNode("v-if", true),
+                createElementVNode("picture", _hoisted_2, [
+                  previewSrc.value ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    src: previewSrc.value,
+                    alt: files.value[currentFileIndex.value].name
+                  }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
+                ])
+              ])
+            ],
+            32
+            /* NEED_HYDRATION */
+          )) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_4, [
+            _ctx.iconLeft ? (openBlock(), createBlock(_sfc_main$u, {
+              key: 0,
+              name: _ctx.iconLeft
+            }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+            createElementVNode("input", {
+              id: unref(hasId),
+              ref_key: "inputEl",
+              ref: inputEl,
+              readonly: unref(readonly),
+              placeholder: _ctx.placeholder,
+              "aria-describedby": unref(hasHintLabelOrSlot) ? hasHintId.value : void 0,
+              "aria-invalid": _ctx.invalid,
+              "aria-errormessage": unref(hasInvalidLabelOrSlot) ? hasHintId.value : void 0,
+              multiple: isMultiple.value,
+              accept: _ctx.accept,
+              type: "file",
+              name: _ctx.name,
+              onChange
+            }, null, 40, _hoisted_5),
+            _ctx.iconRight ? (openBlock(), createBlock(_sfc_main$u, {
+              key: 1,
+              name: _ctx.iconRight
+            }, null, 8, ["name"])) : createCommentVNode("v-if", true)
+          ]),
+          createElementVNode("ul", _hoisted_6, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(files.value, (file, index) => {
+                return openBlock(), createElementBlock("li", {
+                  key: index,
+                  class: "vv-input-file__item",
+                  onClick: withModifiers(($event) => currentFileIndex.value = index, ["stop"])
+                }, [
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "vv-input-file__item-icon cursor-pointer",
+                    title: "Download",
+                    "aria-label": "download-file",
+                    onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
+                  }, [
+                    createVNode(_sfc_main$u, { name: "download" })
+                  ], 8, _hoisted_8),
+                  createElementVNode(
+                    "div",
+                    _hoisted_9,
+                    toDisplayString(file.name),
+                    1
+                    /* TEXT */
+                  ),
+                  createElementVNode(
+                    "small",
+                    _hoisted_10,
+                    toDisplayString(sizeInKiB(file.size)) + " KB ",
+                    1
+                    /* TEXT */
+                  ),
+                  !unref(readonly) ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    class: "vv-input-file__item-remove",
+                    title: "Remove",
+                    "aria-label": "remove-file",
+                    onClick: withModifiers(($event) => onClickRemoveFile(index), ["stop"])
+                  }, null, 8, _hoisted_11)) : createCommentVNode("v-if", true)
+                ], 8, _hoisted_7);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          createVNode(unref(HintSlot), {
+            id: hasHintId.value,
+            class: "vv-input-file__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
 export {
-  _sfc_main$q as VvAccordion,
-  _sfc_main$p as VvAccordionGroup,
-  _sfc_main$o as VvAction,
-  _sfc_main$m as VvAlert,
-  _sfc_main$l as VvBadge,
-  _sfc_main$k as VvBreadcrumb,
-  _sfc_main$j as VvButton,
-  _sfc_main$i as VvButtonGroup,
-  _sfc_main$h as VvCard,
-  _sfc_main$g as VvCheckbox,
-  _sfc_main$f as VvCheckboxGroup,
-  _sfc_main$9 as VvCombobox,
-  _sfc_main$8 as VvDialog,
-  _sfc_main$e as VvDropdown,
-  _sfc_main$n as VvIcon,
-  _sfc_main$7 as VvInputText,
-  _sfc_main$6 as VvNav,
-  _sfc_main$5 as VvProgress,
-  _sfc_main$4 as VvRadio,
-  _sfc_main$3 as VvRadioGroup,
-  _sfc_main$a as VvSelect,
-  _sfc_main$2 as VvTab,
-  _sfc_main$1 as VvTextarea,
-  _sfc_main as VvTooltip
+  _sfc_main$x as VvAccordion,
+  _sfc_main$w as VvAccordionGroup,
+  _sfc_main$v as VvAction,
+  _sfc_main$t as VvAlert,
+  _sfc_main$s as VvAlertGroup,
+  _sfc_main$r as VvAvatar,
+  _sfc_main$q as VvAvatarGroup,
+  _sfc_main$p as VvBadge,
+  _sfc_main$o as VvBreadcrumb,
+  _sfc_main$n as VvButton,
+  _sfc_main$m as VvButtonGroup,
+  _sfc_main$l as VvCard,
+  _sfc_main$k as VvCheckbox,
+  _sfc_main$j as VvCheckboxGroup,
+  _sfc_main$d as VvCombobox,
+  _sfc_main$c as VvDialog,
+  _sfc_main$i as VvDropdown,
+  _sfc_main$b as VvDropdownAction,
+  _sfc_main$h as VvDropdownItem,
+  _sfc_main$f as VvDropdownOptgroup,
+  _sfc_main$g as VvDropdownOption,
+  _sfc_main$u as VvIcon,
+  _sfc_main as VvInputFile,
+  _sfc_main$a as VvInputText,
+  _sfc_main$8 as VvNav,
+  _sfc_main$9 as VvNavItem,
+  VvNavSeparator,
+  _sfc_main$6 as VvProgress,
+  _sfc_main$5 as VvRadio,
+  _sfc_main$4 as VvRadioGroup,
+  _sfc_main$e as VvSelect,
+  _sfc_main$3 as VvTab,
+  _sfc_main$2 as VvTextarea,
+  _sfc_main$1 as VvTooltip
 };