@volverjs/ui-vue 0.0.9-beta.2 → 0.0.9-beta.4

package/dist/components/index.es.js

@@ -79,6 +79,9 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
+const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+  "alertGroup"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -484,6 +487,13 @@ const ActionProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 };
 function equals(obj1, obj2, field) {
@@ -723,14 +733,14 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const _hoisted_1$f = ["id", "open"];
-const _hoisted_2$c = ["aria-controls", "aria-expanded"];
-const _hoisted_3$6 = ["aria-hidden"];
-const __default__$m = {
+const _hoisted_1$i = ["id", "open"];
+const _hoisted_2$d = ["aria-controls", "aria-expanded"];
+const _hoisted_3$7 = ["aria-hidden"];
+const __default__$n = {
   name: "VvAccordion"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
   setup(__props, { emit }) {
@@ -812,7 +822,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(toDisplayString(unref(title)), 1)
           ])
-        ], 8, _hoisted_2$c),
+        ], 8, _hoisted_2$d),
         createElementVNode("div", {
           "aria-hidden": !unref(isOpen),
           class: "vv-accordion__content"
@@ -820,8 +830,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
             createTextVNode(toDisplayString(unref(content)), 1)
           ])
-        ], 8, _hoisted_3$6)
-      ], 10, _hoisted_1$f);
+        ], 8, _hoisted_3$7)
+      ], 10, _hoisted_1$i);
     };
   }
 });
@@ -874,11 +884,11 @@ function useProvideGroupState(groupState) {
     computed(() => groupState)
   );
 }
-const __default__$l = {
+const __default__$m = {
   name: "VvAccordionGroup"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
   setup(__props, { emit }) {
@@ -945,7 +955,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$m, mergeProps({
+            return openBlock(), createBlock(_sfc_main$q, mergeProps({
               key: item.title
             }, {
               name: item.name,
@@ -966,88 +976,128 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvBadgeProps = {
-  ...ModifiersProps,
-  value: [String, Number]
-};
-const __default__$k = {
-  name: "VvBadge"
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$l = {
+  name: "VvAction"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
-  props: VvBadgeProps,
-  setup(__props) {
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit }) {
     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)
-        ])
-      ], 2);
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return ActionTag.button;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        default:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
     };
-  }
-});
-const VvBreadcrumbProps = {
-  ...ModifiersProps,
-  routes: Array
-};
-const _hoisted_1$e = { class: "vv-breadcrumb__list" };
-const _hoisted_2$b = ["content"];
-const __default__$j = {
-  name: "VvBreadcrumb"
-};
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
-  props: VvBreadcrumbProps,
-  setup(__props) {
-    const props = __props;
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(unref(bemCssClasses)),
-        "aria-label": "breadcrumbs"
-      }, [
-        createElementVNode("ol", _hoisted_1$e, [
-          (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
-              }),
-              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);
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
     };
   }
 });
@@ -1145,14 +1195,11 @@ const VvIconProps = {
     type: [String, Array]
   }
 };
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-const __default__$i = {
+const __default__$k = {
   name: "VvIcon"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -1244,124 +1291,306 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvActionEvents = ["click", "mouseover", "mouseleave"];
-const VvActionProps = ActionProps;
-function useInjectedDropdownTrigger() {
-  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-function useInjectedDropdownItem() {
-  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
-}
-function useInjectedDropdownAction() {
-  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
-}
-const __default__$h = {
-  name: "VvAction"
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const VvAlertProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...IconProps,
+  /**
+   * The alert is dismissable
+   * @default false
+   * @type boolean
+   */
+  dismissable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * The alert auto close after the specified time in milliseconds
+   * @default 0
+   * @type number
+   */
+  autoClose: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * The alert close label
+   * @default 'Close'
+   * @type string
+   */
+  closeLabel: {
+    type: String,
+    default: "Close"
+  },
+  /**
+   * The alert title
+   * @default ''
+   * @type string
+   */
+  title: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert content
+   * @default ''
+   * @type string
+   */
+  content: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert footer
+   * @default ''
+   * @type string
+   */
+  footer: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert role
+   * @default 'alert'
+   * @type string
+   * @values 'alert', 'alertdialog'
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
+   */
+  role: {
+    type: String,
+    default: "alert"
+  }
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
-  props: VvActionProps,
-  emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
-    const props = __props;
-    const volver = useVolver();
-    const element = ref(null);
-    __expose({ $el: element });
-    const {
-      reference: dropdownTriggerReference,
-      bus: dropdownEventBus,
-      aria: dropdownAria,
-      expanded: dropdownExpanded
-    } = useInjectedDropdownTrigger();
-    watch(
-      () => element.value,
-      (newValue) => {
-        if (dropdownTriggerReference) {
-          dropdownTriggerReference.value = newValue;
-        }
-      }
-    );
-    const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
-    });
-    const { role } = useInjectedDropdownAction();
-    const hasTag = computed(() => {
-      switch (true) {
-        case props.disabled:
-          return ActionTag.button;
-        case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
-        case props.href !== void 0:
-          return ActionTag.a;
-        default:
-          return ActionTag.button;
-      }
-    });
-    const hasProps = computed(() => {
-      const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
-        "aria-pressed": pressed.value ? true : void 0,
-        role: role == null ? void 0 : role.value
-      };
-      switch (hasTag.value) {
-        case ActionTag.a:
-          return {
-            ...toReturn,
-            href: props.href,
-            target: props.target,
-            rel: props.rel
-          };
-        case ActionTag.routerLink:
-        case ActionTag.nuxtLink:
-          return {
-            ...toReturn,
-            to: props.to,
-            target: props.target
-          };
-        default:
-          return {
-            ...toReturn,
-            type: props.type,
-            disabled: props.disabled
-          };
-      }
-    });
-    const onClick = (e) => {
-      if (props.disabled) {
-        e.preventDefault();
+const VvAlertEvents = ["close"];
+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 hasClass = useModifiers(
+    "vv-alert",
+    computed(() => props.modifiers),
+    computed(() => ({
+      dismissable: props.autoClose > 0 || props.dismissable,
+      "auto-close": props.autoClose > 0,
+      hover: isMouseover.value
+    }))
+  );
+  const hasStyle = computed(() => ({
+    "--alert-duration": `${props.autoClose}ms`
+  }));
+  const close = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    emit("close", hasId.value);
+    bus == null ? void 0 : bus.emit("close", hasId.value);
+  };
+  let timeout;
+  watch(
+    () => props.autoClose,
+    (value) => {
+      if (value > 0) {
+        timeout = setTimeout(close, value);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-      emit("click", e);
-    };
-    const onMouseover = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-      emit("mouseover", e);
-    };
-    const onMouseleave = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-      emit("mouseleave", e);
-    };
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const isMouseover = ref(false);
+  const onMouseover = withModifiers(() => {
+    isMouseover.value = true;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  }, ["passive"]);
+  const onMouseleave = withModifiers(() => {
+    isMouseover.value = false;
+    if (props.autoClose > 0) {
+      timeout = setTimeout(close, props.autoClose);
+    }
+  }, ["passive"]);
+  return {
+    close,
+    hasIcon,
+    hasTitleId,
+    hasProps: computed(() => ({
+      onMouseover,
+      onMouseleave,
+      class: hasClass.value,
+      style: hasStyle.value,
+      role: props.role,
+      "aria-labelledby": hasTitleId.value
+    }))
+  };
+};
+const _hoisted_1$h = {
+  key: 0,
+  class: "vv-alert__header"
+};
+const _hoisted_2$c = ["id"];
+const _hoisted_3$6 = ["aria-label"];
+const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_5$4 = [
+  _hoisted_4$4
+];
+const _hoisted_6$4 = {
+  key: 1,
+  class: "vv-alert__content"
+};
+const _hoisted_7$4 = {
+  key: 2,
+  class: "vv-alert__footer"
+};
+const __default__$j = {
+  name: "VvAlert"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
+  props: VvAlertProps,
+  emits: VvAlertEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
+    __expose({ close });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
-        ref_key: "element",
-        ref: element,
-        class: {
-          active: _ctx.active,
-          pressed: unref(pressed),
-          disabled: _ctx.disabled
-        },
-        onClickPassive: onClick,
-        onMouseoverPassive: onMouseover,
-        onMouseleavePassive: onMouseleave
-      }), {
-        default: withCtx(() => [
+      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"),
+            createElementVNode("strong", {
+              id: unref(hasTitleId),
+              class: "vv-alert__title"
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(_ctx.title), 1)
+              ])
+            ], 8, _hoisted_2$c),
+            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.label), 1)
+            createTextVNode(toDisplayString(_ctx.content), 1)
           ])
-        ]),
-        _: 3
-      }, 16, ["class"]);
+        ])) : 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);
+    };
+  }
+});
+const VvBadgeProps = {
+  ...ModifiersProps,
+  value: [String, Number]
+};
+const __default__$i = {
+  name: "VvBadge"
+};
+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", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "status"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
+const VvBreadcrumbProps = {
+  ...ModifiersProps,
+  routes: Array
+};
+const _hoisted_1$g = { class: "vv-breadcrumb__list" };
+const _hoisted_2$b = ["content"];
+const __default__$h = {
+  name: "VvBreadcrumb"
+};
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
+  props: VvBreadcrumbProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
+    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
+              }),
+              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);
     };
   }
 });
@@ -1469,8 +1698,7 @@ function useGroupProps$2(props, emit) {
     label
   };
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
-const _hoisted_1$d = {
+const _hoisted_1$f = {
   key: 1,
   class: "vv-button__label"
 };
@@ -1481,7 +1709,7 @@ const _hoisted_2$a = {
 const __default__$g = {
   name: "VvButton"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...__default__$g,
   props: VvButtonProps,
   emits: VvButtonEvents,
@@ -1560,7 +1788,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, mergeProps({
+      return openBlock(), createBlock(_sfc_main$o, mergeProps({
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -1568,7 +1796,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         to: _ctx.to,
         href: _ctx.href,
         target: _ctx.target,
-        rel: _ctx.rel
+        rel: _ctx.rel,
+        ariaLabel: _ctx.ariaLabel
       }, {
         id: unref(hasId),
         ref_key: "element",
@@ -1579,15 +1808,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$i, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$n, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
               }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$d, toDisplayString(_ctx.loadingLabel), 1)) : 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$i, mergeProps({
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                 key: 0,
                 class: "vv-button__icon"
               }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
@@ -1627,7 +1856,7 @@ const VvButtonGroupEvents = ["update:modelValue"];
 const __default__$f = {
   name: "VvButtonGroup"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...__default__$f,
   props: VvButtonGroupProps,
   emits: VvButtonGroupEvents,
@@ -1686,7 +1915,7 @@ const VvCardProps = {
   ...ModifiersProps,
   title: String
 };
-const _hoisted_1$c = {
+const _hoisted_1$e = {
   key: 0,
   class: "vv-card__header"
 };
@@ -1701,7 +1930,7 @@ const _hoisted_3$5 = {
 const __default__$e = {
   name: "VvCard"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...__default__$e,
   props: VvCardProps,
   setup(__props) {
@@ -1712,7 +1941,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("article", {
         class: normalizeClass(unref(bemCssClasses))
       }, [
-        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$c, [
+        _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
@@ -1888,12 +2117,12 @@ function HintSlotFactory(props, slots) {
     HintSlot
   };
 }
-const _hoisted_1$b = ["for"];
+const _hoisted_1$d = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$d = {
   name: "VvCheckbox"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...__default__$d,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
@@ -2071,7 +2300,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$b);
+      ], 10, _hoisted_1$d);
     };
   }
 });
@@ -2109,12 +2338,12 @@ function useOptions(props) {
     getOptionGrouped
   };
 }
-const _hoisted_1$a = ["textContent"];
+const _hoisted_1$c = ["textContent"];
 const _hoisted_2$7 = { class: "vv-checkbox-group__wrapper" };
 const __default__$c = {
   name: "VvCheckboxGroup"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...__default__$c,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
@@ -2159,10 +2388,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$a)) : createCommentVNode("", true),
+        }, 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$d, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            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 }, [
@@ -2406,12 +2635,12 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$9 = ["id", "tabindex", "role", "aria-labelledby"];
+const _hoisted_1$b = ["id", "tabindex", "role", "aria-labelledby"];
 const __default__$b = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: VvDropdownProps,
   emits: [
@@ -2528,7 +2757,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       referenceEl,
       floatingEl,
       {
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: (...args) => {
+          return autoUpdate(...args, {
+            animationFrame: props.strategy === "fixed"
+          });
+        },
         placement: computed(() => props.placement),
         strategy: computed(() => props.strategy),
         middleware
@@ -2615,7 +2848,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (!props.keepOpen) {
+        if (!props.keepOpen && expanded.value) {
           expanded.value = false;
         }
       },
@@ -2795,7 +3028,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                   role: unref(itemRole)
                 })))
-              ], 16, _hoisted_1$9),
+              ], 16, _hoisted_1$b),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
             ], 6), [
               [vShow, unref(expanded)]
@@ -2810,7 +3043,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
 const __default__$a = {
   name: "VvDropdownItem"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...__default__$a,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
@@ -2835,11 +3068,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["title"];
+const _hoisted_1$a = ["title"];
 const __default__$9 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...__default__$9,
   props: {
     ...DisabledProps,
@@ -2877,7 +3110,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$d, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -2892,14 +3125,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
               createTextVNode(toDisplayString(unref(hintLabel)), 1)
             ])
-          ], 8, _hoisted_1$8)
+          ], 8, _hoisted_1$a)
         ]),
         _: 3
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$9 = {
   class: "vv-dropdown-optgroup",
   role: "presentation",
   tabindex: "-1"
@@ -2907,7 +3140,7 @@ const _hoisted_1$7 = {
 const __default__$8 = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   props: {
     ...LabelProps
@@ -2915,7 +3148,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$7, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock("li", _hoisted_1$9, toDisplayString(props.label), 1);
     };
   }
 });
@@ -3012,7 +3245,7 @@ function useComponentIcon(icon, iconPosition) {
     hasIconAfter
   };
 }
-const _hoisted_1$6 = ["for"];
+const _hoisted_1$8 = ["for"];
 const _hoisted_2$6 = { class: "vv-select__wrapper" };
 const _hoisted_3$4 = {
   key: 0,
@@ -3031,7 +3264,7 @@ const _hoisted_10 = {
 const __default__$7 = {
   name: "VvSelect"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...__default__$7,
   props: VvSelectProps,
   emits: VvSelectEmits,
@@ -3150,13 +3383,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: unref(hasId)
-        }, toDisplayString(_ctx.label), 9, _hoisted_1$6)) : createCommentVNode("", true),
+        }, 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$3, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3196,7 +3429,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ], 16, _hoisted_5$3), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3295,7 +3528,7 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const _hoisted_1$5 = ["id"];
+const _hoisted_1$7 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
 const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
 const _hoisted_4$2 = {
@@ -3316,13 +3549,13 @@ const _hoisted_9 = {
 const __default__$6 = {
   name: "VvCombobox",
   components: {
-    VvDropdown: _sfc_main$b,
-    VvDropdownOption: _sfc_main$9,
-    VvDropdownOptgroup: _sfc_main$8,
-    VvButton: _sfc_main$g
+    VvDropdown: _sfc_main$e,
+    VvDropdownOption: _sfc_main$c,
+    VvDropdownOptgroup: _sfc_main$b,
+    VvButton: _sfc_main$j
   }
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
   props: VvComboboxProps,
   emits: VvComboboxEvents,
@@ -3602,7 +3835,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$b, mergeProps({
+          createVNode(_sfc_main$e, mergeProps({
             ref_key: "dropdownEl",
             ref: dropdownEl,
             modelValue: unref(expanded),
@@ -3617,7 +3850,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -3637,7 +3870,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   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$k, {
+                        return openBlock(), createBlock(_sfc_main$l, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
                           class: "vv-select__badge"
@@ -3649,7 +3882,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                               "aria-label": unref(propsDefaults).deselectActionLabel,
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$i, { name: "close" })
+                              createVNode(_sfc_main$n, { name: "close" })
                             ], 8, _hoisted_8$1)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -3660,7 +3893,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6$2),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -3673,13 +3906,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               unref(filteredOptions).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$8, {
+                    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$9, mergeProps({
+                      return openBlock(), createBlock(_sfc_main$c, mergeProps({
                         disabled: unref(getOptionDisabled)(item),
                         selected: getOptionSelected(item),
                         unselectable: _ctx.unselectable,
@@ -3704,7 +3937,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                         _: 2
                       }, 1040, ["onClickPassive"]);
                     }), 128))
-                  ], 64)) : (openBlock(), createBlock(_sfc_main$9, mergeProps({ key: 1 }, {
+                  ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
                     disabled: unref(getOptionDisabled)(option),
                     selected: getOptionSelected(option),
                     unselectable: _ctx.unselectable,
@@ -3728,7 +3961,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1040, ["onClickPassive"]))
                 ], 64);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$9, {
+              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
                 key: 1,
                 modifiers: "inert"
               }, {
@@ -3738,7 +3971,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              })) : (openBlock(), createBlock(_sfc_main$9, {
+              })) : (openBlock(), createBlock(_sfc_main$c, {
                 key: 2,
                 modifiers: "inert"
               }, {
@@ -3754,7 +3987,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$g, {
+                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$j, {
                     key: 0,
                     label: "Close",
                     modifiers: "secondary",
@@ -3824,7 +4057,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$5)) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, unref(selectProps), {
+      ], 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));
     };
@@ -3869,7 +4102,7 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$4 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "vv-dialog__header"
 };
@@ -3881,23 +4114,23 @@ const _hoisted_3$2 = {
 const __default__$5 = {
   name: "VvDialog"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: VvDialogProps,
   emits: VvDialogEvents,
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const dialogEl = ref();
+    const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
-    const modelValue = computed({
-      get() {
-        return props.modelValue ?? localModelValue.value;
-      },
-      set(value) {
-        if (props.modelValue === void 0) {
-          localModelValue.value = value;
+    const opened = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
         }
-        emit("update:modelValue", value);
+        modelValue.value = newValue;
       }
     });
     const modalWrapper = ref(null);
@@ -3947,19 +4180,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     onClickOutside(modalWrapper, () => {
-      if (!props.keepOpen) {
-        modelValue.value = false;
+      if (!props.keepOpen && opened.value) {
+        opened.value = false;
       }
     });
     function close() {
-      modelValue.value = false;
+      opened.value = false;
     }
     function open() {
-      modelValue.value = true;
+      opened.value = true;
     }
     __expose({ close, open });
     onKeyStroke("Escape", (e) => {
-      if (modelValue.value) {
+      if (opened.value) {
         e.preventDefault();
         close();
       }
@@ -3977,7 +4210,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ref: modalWrapper,
               class: "vv-dialog__wrapper"
             }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$4, [
+              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$6, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
                   createTextVNode(toDisplayString(_ctx.title) + " ", 1),
                   createElementVNode("button", {
@@ -3986,7 +4219,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     class: "vv-dialog__close",
                     onClickPassive: close
                   }, [
-                    createVNode(_sfc_main$i, { name: "close" })
+                    createVNode(_sfc_main$n, { name: "close" })
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
@@ -3998,7 +4231,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true)
             ], 512)
           ], 16), [
-            [vShow, unref(modelValue)]
+            [vShow, unref(opened)]
           ])
         ]),
         _: 3
@@ -4198,7 +4431,7 @@ const VvInputTextProps = {
 };
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4242,7 +4475,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$i, {
+    const icon = h(_sfc_main$n, {
       name: this.activeIcon,
       class: "vv-input-text__icon"
     });
@@ -4261,7 +4494,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4306,7 +4539,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$i
+    VvIcon: _sfc_main$n
   },
   props: {
     disabled: {
@@ -4335,7 +4568,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = h(_sfc_main$i, {
+    const icon = h(_sfc_main$n, {
       name: this.icon,
       class: "vv-input-text__icon"
     });
@@ -4356,7 +4589,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$i,
+      VvIcon: _sfc_main$n,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -4483,7 +4716,7 @@ function useTextCount(text, options) {
     formatted
   };
 }
-const _hoisted_1$3 = ["for"];
+const _hoisted_1$5 = ["for"];
 const _hoisted_2$3 = { class: "vv-input-text__wrapper" };
 const _hoisted_3$1 = {
   key: 0,
@@ -4506,7 +4739,7 @@ const _hoisted_8 = {
 const __default__$4 = {
   name: "VvInputText"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
@@ -4758,7 +4991,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           key: 0,
           for: unref(hasId),
           class: "vv-input-text__label"
-        }, toDisplayString(unref(label)), 9, _hoisted_1$3)) : createCommentVNode("", true),
+        }, 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))))
@@ -4769,7 +5002,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: "vv-input-text__inner",
             onClick: withModifiers(onClickInner, ["stop"])
           }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -4790,7 +5023,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true)
           ], 8, _hoisted_4$1),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+          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), {
@@ -4850,6 +5083,79 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvNavProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvNavEvents = ["click"];
+const _hoisted_1$4 = {
+  class: "vv-nav__menu",
+  role: "menu",
+  "aria-busy": "true"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VvNav",
+  props: VvNavProps,
+  emits: VvNavEvents,
+  setup(__props, { 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) {
+        emit("click", item);
+        activeItem.value = item.id;
+      }
+    }
+    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);
+    };
+  }
+});
 const VvProgressProps = {
   ...ModifiersProps,
   /**
@@ -4883,7 +5189,7 @@ const VvProgressProps = {
 const __default__$3 = {
   name: "VvProgress"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$3,
   props: VvProgressProps,
   setup(__props) {
@@ -4939,12 +5245,12 @@ function useGroupProps(props, emit) {
     disabled
   };
 }
-const _hoisted_1$2 = ["for"];
+const _hoisted_1$3 = ["for"];
 const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$2 = {
   name: "VvRadio"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: VvRadioProps,
   emits: VvRadioEvents,
@@ -5060,18 +5366,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1$2);
+      ], 10, _hoisted_1$3);
     };
   }
 });
 const VvRadioGroupProps = CheckboxRadioGroupProps;
 const VvRadioGroupEvents = ["update:modelValue", "change"];
-const _hoisted_1$1 = ["textContent"];
+const _hoisted_1$2 = ["textContent"];
 const _hoisted_2$1 = { class: "vv-radio-group__wrapper" };
 const __default__$1 = {
   name: "VvRadioGroup"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvRadioGroupProps,
   emits: VvRadioGroupEvents,
@@ -5116,10 +5422,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("legend", {
           key: 0,
           textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1$1)) : createCommentVNode("", true),
+        }, 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$2, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
+            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 }, [
@@ -5156,6 +5462,61 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvTabProps = {
+  ...ModifiersProps,
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+};
+const VvTabEvents = ["click"];
+const _hoisted_1$1 = ["id"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VvTab",
+  props: VvTabProps,
+  emits: VvTabEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    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}`
+        };
+      });
+    });
+    function onClick(item) {
+      if (!item.disabled) {
+        emit("click", item);
+        activeTab.value = item.id;
+      }
+    }
+    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);
+    };
+  }
+});
 const WRAP = {
   hard: "hard",
   soft: "soft"
@@ -5217,7 +5578,7 @@ const _hoisted_7 = {
 const __default__ = {
   name: "VvTextarea"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvTextareaProps,
   emits: VvTextareaEvents,
@@ -5342,7 +5703,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-textarea__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -5356,7 +5717,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), null, 16, _hoisted_5), [
               [vModelText, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 1,
               class: "vv-textarea__icon vv-textarea__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -5407,24 +5768,69 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvTooltipProps = {
+  ...ModifiersProps,
+  /**
+   * Define the tooltip position
+   * @default Side.bottom
+   */
+  position: {
+    type: String,
+    default: Side.bottom
+  },
+  value: {
+    type: String
+  }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvTooltip",
+  props: VvTooltipProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-tooltip",
+      modifiers,
+      computed(() => ({
+        [props.position]: true
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "tooltip",
+        inert: ""
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
 export {
-  _sfc_main$m as VvAccordion,
-  _sfc_main$l as VvAccordionGroup,
-  _sfc_main$k as VvBadge,
-  _sfc_main$j as VvBreadcrumb,
-  _sfc_main$g as VvButton,
-  _sfc_main$f as VvButtonGroup,
-  _sfc_main$e as VvCard,
-  _sfc_main$d as VvCheckbox,
-  _sfc_main$c as VvCheckboxGroup,
-  _sfc_main$6 as VvCombobox,
-  _sfc_main$5 as VvDialog,
-  _sfc_main$b as VvDropdown,
-  _sfc_main$i as VvIcon,
-  _sfc_main$4 as VvInputText,
-  _sfc_main$3 as VvProgress,
-  _sfc_main$2 as VvRadio,
-  _sfc_main$1 as VvRadioGroup,
-  _sfc_main$7 as VvSelect,
-  _sfc_main as VvTextarea
+  _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
 };