@volverjs/ui-vue 0.0.10-beta.10 → 0.0.10-beta.11

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, createVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
+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, createVNode, TransitionGroup, toHandlers, useSlots, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } 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";
@@ -754,14 +754,14 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const _hoisted_1$i = ["id", "open"];
-const _hoisted_2$d = ["aria-controls", "aria-expanded"];
+const _hoisted_1$l = ["id", "open"];
+const _hoisted_2$e = ["aria-controls", "aria-expanded"];
 const _hoisted_3$7 = ["aria-hidden"];
-const __default__$o = {
+const __default__$q = {
   name: "VvAccordion"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$o,
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
   setup(__props, { emit }) {
@@ -847,7 +847,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               /* TEXT */
             )
           ])
-        ], 8, _hoisted_2$d),
+        ], 8, _hoisted_2$e),
         createElementVNode("div", {
           "aria-hidden": !unref(isOpen),
           class: "vv-accordion__content"
@@ -860,7 +860,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             )
           ])
         ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$l);
     };
   }
 });
@@ -913,11 +913,11 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$n = {
+const __default__$p = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
   setup(__props, { emit }) {
@@ -991,7 +991,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
               null,
               renderList(unref(items), (item) => {
                 return openBlock(), createBlock(
-                  _sfc_main$r,
+                  _sfc_main$w,
                   mergeProps({
                     key: item.title
                   }, {
@@ -1038,11 +1038,11 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$m = {
+const __default__$o = {
   name: "VvAction"
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
   props: VvActionProps,
   emits: VvActionEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1251,11 +1251,11 @@ const VvIconProps = {
     type: [String, Array]
   }
 };
-const __default__$l = {
+const __default__$n = {
   name: "VvIcon"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -1492,11 +1492,11 @@ 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_2$d = ["id"];
 const _hoisted_3$6 = ["aria-label"];
 const _hoisted_4$5 = /* @__PURE__ */ createElementVNode(
   "div",
@@ -1516,11 +1516,11 @@ const _hoisted_7$4 = {
   key: 2,
   class: "vv-alert__footer"
 };
-const __default__$k = {
+const __default__$m = {
   name: "VvAlert"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: VvAlertProps,
   emits: VvAlertEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1532,9 +1532,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         "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, [
+          _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$o,
+              _sfc_main$t,
               mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }),
               null,
               16
@@ -1554,7 +1554,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     /* TEXT */
                   )
                 ])
-              ], 8, _hoisted_2$c)) : createCommentVNode("v-if", true),
+              ], 8, _hoisted_2$d)) : createCommentVNode("v-if", true),
               renderSlot(_ctx.$slots, "title::after")
             ]),
             renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
@@ -1596,15 +1596,352 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function useProvideAlertGroup({
+  name
+}) {
+  const bus = mitt();
+  provide(INJECTION_KEY_ALERT_GROUP, {
+    name,
+    bus
+  });
+  return bus;
+}
+const VvAlertGroupProps = {
+  ...ModifiersProps,
+  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 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__$l = {
+  name: "VvAlertGroup"
+};
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvAlertGroupProps,
+  emits: VvAlertGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    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$s,
+                      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$c = ["src"];
+const _sfc_main$q = /* @__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: _ctx.imgSrc ? void 0 : "img",
+        "aria-label": _ctx.imgSrc ? void 0 : "avatar"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          _ctx.imgSrc ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: _ctx.imgSrc,
+            alt: "avatar"
+          }, null, 8, _hoisted_2$c)) : createCommentVNode("v-if", true)
+        ])
+      ], 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$p = /* @__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$q,
+                  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$q, {
+              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__$j = {
+const __default__$k = {
   name: "VvBadge"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvBadgeProps,
   setup(__props) {
     const props = __props;
@@ -1636,13 +1973,13 @@ const VvBreadcrumbProps = {
   ...ModifiersProps,
   routes: Array
 };
-const _hoisted_1$g = { class: "vv-breadcrumb__list" };
+const _hoisted_1$h = { class: "vv-breadcrumb__list" };
 const _hoisted_2$b = ["content"];
-const __default__$i = {
+const __default__$j = {
   name: "VvBreadcrumb"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: VvBreadcrumbProps,
   setup(__props) {
     const props = __props;
@@ -1661,7 +1998,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           "aria-label": "breadcrumbs"
         },
         [
-          createElementVNode("ol", _hoisted_1$g, [
+          createElementVNode("ol", _hoisted_1$h, [
             (openBlock(true), createElementBlock(
               Fragment,
               null,
@@ -1678,7 +2015,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                     itemscope: ""
                   },
                   [
-                    createVNode(_sfc_main$p, mergeProps(route, {
+                    createVNode(_sfc_main$u, mergeProps(route, {
                       class: !isLast(index) ? "vv-breadcrumb__link" : "vv-breadcrumb__label",
                       "aria-current": isLast(index) ? "page" : void 0,
                       itemprop: "item",
@@ -1820,7 +2157,7 @@ function useGroupProps$2(props, emit) {
     label
   };
 }
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 1,
   class: "vv-button__label"
 };
@@ -1828,11 +2165,11 @@ const _hoisted_2$a = {
   key: 1,
   class: "vv-button__label"
 };
-const __default__$h = {
+const __default__$i = {
   name: "VvButton"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: VvButtonProps,
   emits: VvButtonEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -1910,7 +2247,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$p, mergeProps({
+      return openBlock(), createBlock(_sfc_main$u, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1930,14 +2267,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$o, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$t, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
               }, null, 8, ["name"])) : createCommentVNode("v-if", true),
               _ctx.loadingLabel ? (openBlock(), createElementBlock(
                 "span",
-                _hoisted_1$f,
+                _hoisted_1$g,
                 toDisplayString(_ctx.loadingLabel),
                 1
                 /* TEXT */
@@ -1948,7 +2285,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               [
                 renderSlot(_ctx.$slots, "before"),
                 unref(icon) ? (openBlock(), createBlock(
-                  _sfc_main$o,
+                  _sfc_main$t,
                   mergeProps({
                     key: 0,
                     class: "vv-button__icon"
@@ -1998,11 +2335,11 @@ const VvButtonGroupProps = {
   }
 };
 const VvButtonGroupEvents = ["update:modelValue"];
-const __default__$g = {
+const __default__$h = {
   name: "VvButtonGroup"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
   setup(__props, { emit }) {
@@ -2066,7 +2403,7 @@ const VvCardProps = {
   ...ModifiersProps,
   title: String
 };
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   class: "vv-card__header"
 };
@@ -2078,11 +2415,11 @@ const _hoisted_3$5 = {
   key: 2,
   class: "vv-card__footer"
 };
-const __default__$f = {
+const __default__$g = {
   name: "VvCard"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
   props: VvCardProps,
   setup(__props) {
     const props = __props;
@@ -2095,7 +2432,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(bemCssClasses))
         },
         [
-          _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
+          _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$f, [
             renderSlot(_ctx.$slots, "header", {}, () => [
               createTextVNode(
                 toDisplayString(_ctx.title),
@@ -2339,13 +2676,13 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const _hoisted_1$d = ["for"];
+const _hoisted_1$e = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
-const __default__$e = {
+const __default__$f = {
   name: "VvCheckbox"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
   setup(__props, { emit }) {
@@ -2534,7 +2871,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$d);
+      ], 10, _hoisted_1$e);
     };
   }
 });
@@ -2572,13 +2909,13 @@ function useOptions(props) {
     getOptionGrouped
   };
 }
-const _hoisted_1$c = ["textContent"];
+const _hoisted_1$d = ["textContent"];
 const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
-const __default__$d = {
+const __default__$e = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
   setup(__props, { emit }) {
@@ -2630,14 +2967,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           _ctx.label ? (openBlock(), createElementBlock("legend", {
             key: 0,
             textContent: toDisplayString(_ctx.label)
-          }, null, 8, _hoisted_1$c)) : createCommentVNode("v-if", true),
+          }, null, 8, _hoisted_1$d)) : createCommentVNode("v-if", 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$h,
+                  _sfc_main$j,
                   mergeProps({ key: index }, getOptionProps(option, index)),
                   null,
                   16
@@ -2923,13 +3260,13 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$b = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$c = {
+const _hoisted_1$c = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$d = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
@@ -3331,7 +3668,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                       role: unref(itemRole)
                     })))
-                  ], 16, _hoisted_1$b),
+                  ], 16, _hoisted_1$c),
                   renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
                 ],
                 6
@@ -3350,11 +3687,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$b = {
+const __default__$c = {
   name: "VvDropdownItem"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -3384,12 +3721,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = ["title"];
-const __default__$a = {
+const _hoisted_1$b = ["title"];
+const __default__$b = {
   name: "VvDropdownOption"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -3426,7 +3763,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$e, {
+      return openBlock(), createBlock(_sfc_main$g, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -3445,7 +3782,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 /* TEXT */
               )
             ])
-          ], 8, _hoisted_1$a)
+          ], 8, _hoisted_1$b)
         ]),
         _: 3
         /* FORWARDED */
@@ -3453,16 +3790,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   class: "vv-dropdown-optgroup",
   role: "presentation",
   tabindex: "-1"
 };
-const __default__$9 = {
+const __default__$a = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
   props: {
     ...LabelProps
   },
@@ -3471,7 +3808,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "li",
-        _hoisted_1$9,
+        _hoisted_1$a,
         toDisplayString(props.label),
         1
         /* TEXT */
@@ -3572,7 +3909,7 @@ function useComponentIcon(icon, iconPosition) {
     hasIconAfter
   };
 }
-const _hoisted_1$8 = ["for"];
+const _hoisted_1$9 = ["for"];
 const _hoisted_2$6 = { class: "vv-select__wrapper" };
 const _hoisted_3$4 = {
   key: 0,
@@ -3588,11 +3925,11 @@ const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$8 = {
+const __default__$9 = {
   name: "VvSelect"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   props: VvSelectProps,
   emits: VvSelectEmits,
   setup(__props, { emit }) {
@@ -3718,14 +4055,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           _ctx.label ? (openBlock(), createElementBlock("label", {
             key: 0,
             for: unref(hasId)
-          }, toDisplayString(_ctx.label), 9, _hoisted_1$8)) : createCommentVNode("v-if", true),
+          }, toDisplayString(_ctx.label), 9, _hoisted_1$9)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$6, [
             _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true),
             createElementVNode("div", _hoisted_4$4, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$o,
+                _sfc_main$t,
                 mergeProps({
                   key: 0,
                   class: "vv-select__icon"
@@ -3789,7 +4126,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 [vModelSelect, unref(localModelValue)]
               ]),
               unref(hasIconAfter) ? (openBlock(), createBlock(
-                _sfc_main$o,
+                _sfc_main$t,
                 mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
@@ -3846,7 +4183,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["id"];
+const _hoisted_1$8 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
 const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
 const _hoisted_4$3 = {
@@ -3864,17 +4201,17 @@ const _hoisted_9 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$7 = {
+const __default__$8 = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$f,
-    VvDropdownOption: _sfc_main$d,
-    VvDropdownOptgroup: _sfc_main$c,
-    VvButton: _sfc_main$k
+    VvDropdown: _sfc_main$h,
+    VvDropdownOption: _sfc_main$f,
+    VvDropdownOptgroup: _sfc_main$e,
+    VvButton: _sfc_main$m
   }
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: VvComboboxProps,
   emits: VvComboboxEvents,
   setup(__props, { emit }) {
@@ -4166,7 +4503,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             class: "vv-select__wrapper"
           },
           [
-            createVNode(_sfc_main$f, mergeProps({
+            createVNode(_sfc_main$h, mergeProps({
               ref_key: "dropdownEl",
               ref: dropdownEl,
               modelValue: unref(expanded),
@@ -4182,7 +4519,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("v-if", true),
                 createElementVNode("div", _hoisted_5$2, [
                   unref(hasIconBefore) ? (openBlock(), createBlock(
-                    _sfc_main$o,
+                    _sfc_main$t,
                     mergeProps({
                       key: 0,
                       class: "vv-select__icon"
@@ -4219,7 +4556,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 1 },
                             renderList(unref(selectedOptions), (option, index) => {
-                              return openBlock(), createBlock(_sfc_main$m, {
+                              return openBlock(), createBlock(_sfc_main$o, {
                                 key: index,
                                 modifiers: _ctx.badgeModifiers,
                                 class: "vv-select__badge"
@@ -4236,7 +4573,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                                     type: "button",
                                     onClick: withModifiers(($event) => onInput(option), ["stop"])
                                   }, [
-                                    createVNode(_sfc_main$o, { name: "close" })
+                                    createVNode(_sfc_main$t, { name: "close" })
                                   ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
                                 ]),
                                 _: 2
@@ -4265,7 +4602,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     ])
                   ], 16, _hoisted_6$2),
                   unref(hasIconAfter) ? (openBlock(), createBlock(
-                    _sfc_main$o,
+                    _sfc_main$t,
                     mergeProps({
                       key: 1,
                       class: "vv-select__icon vv-select__icon-after"
@@ -4294,7 +4631,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 0 },
                             [
-                              createVNode(_sfc_main$c, {
+                              createVNode(_sfc_main$e, {
                                 label: unref(getOptionLabel)(option)
                               }, null, 8, ["label"]),
                               (openBlock(true), createElementBlock(
@@ -4303,7 +4640,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                                 renderList(unref(getOptionGrouped)(
                                   option
                                 ), (item, i) => {
-                                  return openBlock(), createBlock(_sfc_main$d, mergeProps({
+                                  return openBlock(), createBlock(_sfc_main$f, mergeProps({
                                     selected: isOptionSelected(item),
                                     disabled: unref(isOptionDisabled)(item),
                                     unselectable: _ctx.unselectable,
@@ -4339,7 +4676,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                             ],
                             64
                             /* STABLE_FRAGMENT */
-                          )) : (openBlock(), createBlock(_sfc_main$d, mergeProps({ key: 1 }, {
+                          )) : (openBlock(), createBlock(_sfc_main$f, mergeProps({ key: 1 }, {
                             selected: isOptionSelected(option),
                             disabled: unref(isOptionDisabled)(option),
                             unselectable: _ctx.unselectable,
@@ -4374,7 +4711,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     }),
                     128
                     /* KEYED_FRAGMENT */
-                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$d, {
+                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$f, {
                     key: 1,
                     modifiers: "inert"
                   }, {
@@ -4389,7 +4726,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 3
                     /* FORWARDED */
-                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$d, {
+                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$f, {
                     key: 2,
                     modifiers: "inert"
                   }, {
@@ -4411,7 +4748,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                   var _a;
                   return [
-                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$k, {
+                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$m, {
                       key: 0,
                       label: unref(propsDefaults).closeLabel,
                       modifiers: "secondary",
@@ -4487,8 +4824,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$7)) : (openBlock(), createBlock(
-        _sfc_main$b,
+      ], 10, _hoisted_1$8)) : (openBlock(), createBlock(
+        _sfc_main$d,
         mergeProps({ key: 1 }, unref(selectProps), {
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
         }),
@@ -4538,7 +4875,7 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$6 = ["onCancel"];
+const _hoisted_1$7 = ["onCancel"];
 const _hoisted_2$4 = {
   key: 0,
   class: "vv-dialog__header"
@@ -4548,11 +4885,11 @@ const _hoisted_4$2 = {
   key: 1,
   class: "vv-dialog__footer"
 };
-const __default__$6 = {
+const __default__$7 = {
   name: "VvDialog"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   props: VvDialogProps,
   emits: VvDialogEvents,
   setup(__props, { expose: __expose, emit }) {
@@ -4670,7 +5007,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         onClickPassive: close
                       },
                       [
-                        createVNode(_sfc_main$o, { name: "close" })
+                        createVNode(_sfc_main$t, { name: "close" })
                       ],
                       32
                       /* HYDRATE_EVENTS */
@@ -4687,7 +5024,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               512
               /* NEED_PATCH */
             )
-          ], 16, _hoisted_1$6), [
+          ], 16, _hoisted_1$7), [
             [vShow, unref(isOpened)]
           ])
         ]),
@@ -4697,6 +5034,51 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const __default__$6 = {
+  name: "VvDropdownAction"
+};
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
+  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$g, null, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$u, 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",
@@ -4887,7 +5269,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$o
+    VvIcon: _sfc_main$t
   },
   props: {
     disabled: {
@@ -4931,7 +5313,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$o, {
+    const icon = h(_sfc_main$t, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -4950,7 +5332,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$o
+    VvIcon: _sfc_main$t
   },
   props: {
     disabled: {
@@ -4995,7 +5377,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$o
+    VvIcon: _sfc_main$t
   },
   props: {
     disabled: {
@@ -5024,7 +5406,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$o, {
+    const icon = h(_sfc_main$t, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -5045,7 +5427,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$o,
+      VvIcon: _sfc_main$t,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -5172,7 +5554,7 @@ function useTextCount(text, options) {
     formatted
   };
 }
-const _hoisted_1$5 = ["for"];
+const _hoisted_1$6 = ["for"];
 const _hoisted_2$3 = { class: "vv-input-text__wrapper" };
 const _hoisted_3$1 = {
   key: 0,
@@ -5195,7 +5577,7 @@ const _hoisted_8 = {
 const __default__$5 = {
   name: "VvInputText"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
@@ -5547,7 +5929,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             key: 0,
             for: unref(hasId),
             class: "vv-input-text__label"
-          }, toDisplayString(unref(label)), 9, _hoisted_1$5)) : createCommentVNode("v-if", true),
+          }, toDisplayString(unref(label)), 9, _hoisted_1$6)) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_2$3, [
             _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
@@ -5559,7 +5941,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               onClick: withModifiers(onClickInner, ["stop"])
             }, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$o,
+                _sfc_main$t,
                 mergeProps({
                   key: 0,
                   class: "vv-input-text__icon"
@@ -5589,7 +5971,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("v-if", true)
             ], 8, _hoisted_4$1),
             unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(
-              _sfc_main$o,
+              _sfc_main$t,
               mergeProps({
                 key: 1,
                 class: "vv-input-text__icon vv-input-text__icon-after"
@@ -5669,7 +6051,7 @@ const VvNavProps = {
   ...NavProps
 };
 const VvNavEvents = ["click"];
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   class: "vv-nav__item",
   role: "presentation"
 };
@@ -5677,13 +6059,13 @@ const __default__$4 = {
   name: "VvNavItem",
   inheritAttrs: false
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$4, [
+      return openBlock(), createElementBlock("li", _hoisted_1$5, [
         createVNode(
-          _sfc_main$p,
+          _sfc_main$u,
           mergeProps(_ctx.$attrs, { class: "vv-nav__item-label" }),
           {
             default: withCtx(() => [
@@ -5699,8 +6081,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["onClick"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["onClick"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VvNav",
   props: VvNavProps,
   emits: VvNavEvents,
@@ -5737,13 +6119,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               (openBlock(true), createElementBlock(
                 Fragment,
                 null,
-                renderList(_ctx.items, ({ on = {}, ...item }, index) => {
-                  return openBlock(), createBlock(_sfc_main$7, mergeProps({
+                renderList(_ctx.items, ({ on = {}, data, ...item }, index) => {
+                  return openBlock(), createBlock(_sfc_main$8, mergeProps({
                     key: index,
                     "data-index": index
                   }, item, toHandlers(on)), {
                     default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, index })))
+                      renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, data, index })))
                     ]),
                     _: 2
                     /* DYNAMIC */
@@ -5753,7 +6135,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 /* KEYED_FRAGMENT */
               ))
             ])
-          ], 8, _hoisted_1$3)
+          ], 8, _hoisted_1$4)
         ],
         2
         /* CLASS */
@@ -5761,6 +6143,26 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$6 = {
+  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$3 = {
+  class: "vv-nav__separator",
+  role: "separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", _hoisted_1$3, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const VvNavSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
 const VvProgressProps = {
   ...ModifiersProps,
   /**
@@ -6185,7 +6587,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         },
         [
           createVNode(
-            _sfc_main$6,
+            _sfc_main$7,
             mergeProps({
               items: unref(navItems),
               modifiers: unref(hasNavModifiers)
@@ -6433,7 +6835,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("v-if", true),
             createElementVNode("div", _hoisted_4, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$o,
+                _sfc_main$t,
                 mergeProps({
                   key: 0,
                   class: "vv-textarea__icon"
@@ -6453,7 +6855,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 [vModelText, unref(localModelValue)]
               ]),
               unref(hasIconAfter) ? (openBlock(), createBlock(
-                _sfc_main$o,
+                _sfc_main$t,
                 mergeProps({
                   key: 1,
                   class: "vv-textarea__icon vv-textarea__icon-after"
@@ -6570,27 +6972,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$r as VvAccordion,
-  _sfc_main$q as VvAccordionGroup,
-  _sfc_main$p as VvAction,
-  _sfc_main$n as VvAlert,
-  _sfc_main$m as VvBadge,
-  _sfc_main$l as VvBreadcrumb,
-  _sfc_main$k as VvButton,
-  _sfc_main$j as VvButtonGroup,
-  _sfc_main$i as VvCard,
-  _sfc_main$h as VvCheckbox,
-  _sfc_main$g as VvCheckboxGroup,
-  _sfc_main$a as VvCombobox,
-  _sfc_main$9 as VvDialog,
-  _sfc_main$f as VvDropdown,
-  _sfc_main$o as VvIcon,
-  _sfc_main$8 as VvInputText,
-  _sfc_main$6 as VvNav,
+  _sfc_main$w as VvAccordion,
+  _sfc_main$v as VvAccordionGroup,
+  _sfc_main$u as VvAction,
+  _sfc_main$s as VvAlert,
+  _sfc_main$r as VvAlertGroup,
+  _sfc_main$q as VvAvatar,
+  _sfc_main$p as VvAvatarGroup,
+  _sfc_main$o as VvBadge,
+  _sfc_main$n as VvBreadcrumb,
+  _sfc_main$m as VvButton,
+  _sfc_main$l as VvButtonGroup,
+  _sfc_main$k as VvCard,
+  _sfc_main$j as VvCheckbox,
+  _sfc_main$i as VvCheckboxGroup,
+  _sfc_main$c as VvCombobox,
+  _sfc_main$b as VvDialog,
+  _sfc_main$h as VvDropdown,
+  _sfc_main$a as VvDropdownAction,
+  _sfc_main$g as VvDropdownItem,
+  _sfc_main$e as VvDropdownOptgroup,
+  _sfc_main$f as VvDropdownOption,
+  _sfc_main$t as VvIcon,
+  _sfc_main$9 as VvInputText,
+  _sfc_main$7 as VvNav,
+  _sfc_main$8 as VvNavItem,
+  VvNavSeparator,
   _sfc_main$5 as VvProgress,
   _sfc_main$4 as VvRadio,
   _sfc_main$3 as VvRadioGroup,
-  _sfc_main$b as VvSelect,
+  _sfc_main$d as VvSelect,
   _sfc_main$2 as VvTab,
   _sfc_main$1 as VvTextarea,
   _sfc_main as VvTooltip