@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/dist/components/index.es.js

@@ -1,6 +1,6 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, nextTick, Transition, normalizeStyle, vShow, vModelSelect, createSlots, vModelText, toHandlers, vModelDynamic, 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, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelDynamic, vModelRadio } from "vue";
 import { nanoid } from "nanoid";
-import { useToggle, useStorage, toReactive, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useToggle, useStorage, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import mitt from "mitt";
@@ -69,638 +69,178 @@ const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
 const INJECTION_KEY_RADIO_GROUP = Symbol.for("radioGroup");
 const INJECTION_KEY_CHECK_GROUP = Symbol.for("checkGroup");
 const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
-const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
-const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
-function equals(obj1, obj2, field) {
-  if (field)
-    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
-  else
-    return deepEquals(obj1, obj2);
-}
-function deepEquals(a, b) {
-  if (a === b)
-    return true;
-  if (a && b && typeof a == "object" && typeof b == "object") {
-    const arrA = Array.isArray(a);
-    const arrB = Array.isArray(b);
-    let i, length, key;
-    if (arrA && arrB) {
-      length = a.length;
-      if (length != b.length)
-        return false;
-      for (i = length; i-- !== 0; )
-        if (!deepEquals(a[i], b[i]))
-          return false;
-      return true;
-    }
-    if (arrA != arrB)
-      return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
-      return false;
-    if (dateA && dateB)
-      return a.getTime() == b.getTime();
-    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
-      return false;
-    if (regexpA && regexpB)
-      return a.toString() == b.toString();
-    const keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length)
-      return false;
-    for (i = length; i-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-        return false;
-    for (i = length; i-- !== 0; ) {
-      key = keys[i];
-      if (!deepEquals(a[key], b[key]))
-        return false;
-    }
-    return true;
-  }
-  return a !== a && b !== b;
-}
-function resolveFieldData(data, field) {
-  if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
-      return data[field];
-    } else {
-      const fields = field.split(".");
-      let value = data;
-      for (let i = 0, len = fields.length; i < len; ++i) {
-        if (data == null) {
-          return null;
-        }
-        value = value[fields[i]];
-      }
-      return value;
-    }
-  } else {
-    return null;
-  }
-}
-function findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
-function contains(value, list) {
-  if (value != null && list && list.length) {
-    for (const val of list) {
-      if (equals(value, val)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
-}
-function removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
   }
-}
-function isString(value) {
-  return typeof value === "string" || value instanceof String;
-}
-function useInjectedGroupState(groupKey) {
-  const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
-  function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
-      return computed({
-        get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
-        },
-        set(value) {
-          groupPropValue.value = value;
-        }
-      });
-    }
-    const propRef = toRef(props, propName);
-    return computed({
-      get() {
-        return propRef.value;
-      },
-      set(value) {
-        if (emit)
-          emit(`update:${propName}`, value);
-      }
-    });
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
+  valid: Boolean,
+  /**
+   * Valid label
+   */
+  validLabel: [String, Array]
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
+  invalid: Boolean,
+  /**
+   * Invalid label
+   */
+  invalidLabel: [String, Array]
+};
+const LoadingProps = {
+  /**
+   * Loading status
+   */
+  loading: Boolean,
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
   }
-  return {
-    group,
-    isInGroup,
-    getGroupOrLocalRef
-  };
-}
-const VvAccordionProps = {
+};
+const DisabledProps = {
   /**
-   * Accordion name
+   * Whether the form control is disabled
    */
-  name: String,
+  disabled: Boolean
+};
+const SelectedProps = {
   /**
-   * Header title
+   * Whether the item is selected
    */
-  title: String,
+  selected: Boolean
+};
+const ActiveProps = {
   /**
-   * Content text
+   * Whether the item is active
    */
-  content: String,
+  active: Boolean
+};
+const PressedProps = {
   /**
-   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   * Whether the item is pressed
    */
-  modelValue: {
-    type: Boolean,
-    default: void 0
-  },
+  pressed: Boolean
+};
+const LabelProps = {
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   * The item label
    */
-  modifiers: [String, Array],
+  label: [String, Number]
+};
+const ReadonlyProps = {
   /**
-   * If true, the accordion will be disabled
+   * The value is not editable
    */
-  disabled: Boolean,
+  readonly: Boolean
+};
+const ModifiersProps = {
   /**
-   * If true, the accordion will be opened by default
+   * Component BEM modifiers
    */
-  not: Boolean
+  modifiers: [String, Array]
 };
-const VvAccordionEvents = ["update:modelValue"];
-function useGroupProps$3(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
-    INJECTION_KEY_ACCORDION_GROUP
-  );
-  const { title, content } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const not = getGroupOrLocalRef("not", props);
-  const collapse = getGroupOrLocalRef("collapse", props);
-  const modifiers = getGroupOrLocalRef("modifiers", props);
-  const disabled = computed(
-    () => {
-      var _a;
-      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
-    }
-  );
-  return {
-    // group props
-    modelValue,
-    not,
-    isInGroup,
-    group,
-    collapse,
-    modifiers,
-    disabled,
-    // local props
-    title,
-    content
-  };
-}
-function useModifiers(prefix, modifiers, others) {
-  return computed(() => {
-    const toReturn = {
-      [prefix]: true
-    };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
-    if (modifiersArray) {
-      if (Array.isArray(modifiersArray)) {
-        modifiersArray.forEach((modifier) => {
-          if (modifier) {
-            toReturn[`${prefix}--${modifier}`] = true;
-          }
-        });
-      }
-    }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
-    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 = {
-  name: "VvAccordion"
+const HintProps = {
+  hintLabel: { type: String, default: "" }
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
-  props: VvAccordionProps,
-  emits: VvAccordionEvents,
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const accordionName = computed(
-      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
-    );
-    const {
-      modifiers,
-      title,
-      content,
-      disabled,
-      collapse,
-      modelValue,
-      isInGroup,
-      not
-    } = useGroupProps$3(props, emit);
-    const localModelValue = ref(false);
-    const isOpen = computed({
-      get: () => {
-        let toReturn = modelValue.value;
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            toReturn = modelValue.value.includes(accordionName.value);
-          } else {
-            toReturn = modelValue.value === accordionName.value;
-          }
-        } else if (modelValue.value === void 0) {
-          toReturn = localModelValue.value;
-        }
-        return not.value ? !toReturn : toReturn;
-      },
-      set: (newValue) => {
-        if (not.value) {
-          newValue = !newValue;
-        }
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            if (newValue) {
-              modelValue.value.push(accordionName.value);
-              return;
-            }
-            modelValue.value = modelValue.value.filter(
-              (name) => name !== accordionName.value
-            );
-            return;
-          }
-          modelValue.value = newValue ? accordionName.value : null;
-          return;
-        }
-        if (modelValue.value === void 0 && typeof newValue === "boolean") {
-          localModelValue.value = newValue;
-          return;
-        }
-        modelValue.value = newValue;
-      }
-    });
-    const bemCssClasses = useModifiers(
-      "vv-accordion",
-      modifiers,
-      computed(() => ({
-        disabled: disabled.value
-      }))
-    );
-    const onClick = useToggle(isOpen);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("details", {
-        id: unref(accordionName),
-        class: normalizeClass(unref(bemCssClasses)),
-        open: unref(isOpen)
-      }, [
-        createElementVNode("summary", {
-          "aria-controls": unref(accordionName),
-          "aria-expanded": unref(isOpen),
-          class: "vv-accordion__summary",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
-        }, [
-          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(title)), 1)
-          ])
-        ], 8, _hoisted_2$c),
-        createElementVNode("div", {
-          "aria-hidden": !unref(isOpen),
-          class: "vv-accordion__content"
-        }, [
-          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(content)), 1)
-          ])
-        ], 8, _hoisted_3$6)
-      ], 10, _hoisted_1$f);
-    };
-  }
-});
-const VvAccordionGroupProps = {
+const OptionsProps = {
   /**
-   * VModel
+   * List of options, can be string[] or object[]
    */
-  modelValue: [String, Array],
+  options: {
+    type: Array,
+    default: () => []
+  },
   /**
-   * Accordion items
-   * @type VvAccordionGroupItem
+   * Used when options are objects: key to use for option label
    */
-  items: { type: Array, default: () => [] },
+  labelKey: { type: [String, Function], default: "label" },
   /**
-   * If true, accordion items stay open when another item is opened
+   * Used when options are objects: key to use for option label
    */
-  collapse: Boolean,
+  valueKey: { type: [String, Function], default: "value" },
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
+   * Used when options are objects: key to use for option disabled
    */
-  modifiers: [String, Array],
+  disabledKey: { type: [String, Function], default: "disabled" }
+};
+const CountProps = {
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   * Show character limit
    */
-  itemModifiers: {
-    type: [String, Array],
-    default: ""
-  },
+  count: {
+    type: [Boolean, String],
+    default: false,
+    validator: (value) => [true, false, "limit", "countdown"].includes(value)
+  }
+};
+const DebounceProps = {
   /**
-   * If true, the accordion items will be disabled
+   * Milliseconds to wait before emitting the input event
    */
-  disabled: Boolean,
+  debounce: [Number, String]
+};
+const IconProps = {
   /**
-   * If true, the accordion items will be opened by default
+   * VvIcon name or props
+   * @see VVIcon
    */
-  not: Boolean,
+  icon: { type: [String, Object] },
   /**
-   * Enable local storage persistence
+   * VvIcon position
    */
-  storeKey: String
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
 };
-const VvAccordionGroupEvents = ["update:modelValue"];
-function useProvideGroupState(groupState) {
-  if (Object.keys(groupState).some(
-    (k) => k !== "key" && !isRef(groupState[k])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  provide(
-    groupState.key,
-    computed(() => groupState)
-  );
-}
-const __default__$l = {
-  name: "VvAccordionGroup"
-};
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
-  props: VvAccordionGroupProps,
-  emits: VvAccordionGroupEvents,
-  setup(__props, { emit }) {
-    const props = __props;
-    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
-    watchEffect(() => {
-      if (typeof props.modelValue === "string" && collapse.value) {
-        console.warn(
-          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
-        );
-      }
-    });
-    let localModelValue = ref([]);
-    watch(
-      () => props.storeKey,
-      (newKey) => {
-        if (newKey) {
-          localModelValue = useStorage(newKey, localModelValue.value);
-        } else {
-          localModelValue = ref([]);
-        }
-      },
-      { immediate: true }
-    );
-    const modelValue = computed({
-      get: () => {
-        var _a;
-        if (props.modelValue !== void 0) {
-          if (!collapse.value) {
-            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
-          }
-          return props.modelValue;
-        }
-        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
-      },
-      set: (newValue) => {
-        if (props.modelValue !== void 0) {
-          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
-            newValue = [newValue];
-          }
-          return emit("update:modelValue", newValue);
-        }
-        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
-      }
-    });
-    useProvideGroupState({
-      key: INJECTION_KEY_ACCORDION_GROUP,
-      modelValue,
-      disabled,
-      collapse,
-      modifiers: itemModifiers,
-      not
-    });
-    const bemCssClasses = useModifiers(
-      "vv-accordion-group",
-      modifiers,
-      computed(() => ({
-        disabled: disabled.value
-      }))
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$m, mergeProps({
-              key: item.title
-            }, {
-              name: item.name,
-              title: item.title,
-              content: item.content
-            }), {
-              header: withCtx((data) => [
-                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              details: withCtx((data) => [
-                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              _: 2
-            }, 1040);
-          }), 128))
-        ])
-      ], 2);
-    };
-  }
-});
-const LinkProps = {
-  /**
-   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-   */
-  to: {
-    type: [String, Object]
-  },
-  /**
-   * Anchor href
-   */
-  href: String,
-  /**
-   * Anchor target
-   */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
-const ValidProps = {
-  /**
-   * Valid status
-   */
-  valid: Boolean,
-  /**
-   * Valid label
-   */
-  validLabel: [String, Array]
-};
-const InvalidProps = {
-  /**
-   * Invalid status
-   */
-  invalid: Boolean,
-  /**
-   * Invalid label
-   */
-  invalidLabel: [String, Array]
-};
-const LoadingProps = {
-  /**
-   * Loading status
-   */
-  loading: Boolean,
-  /**
-   * Loading label
-   */
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
-  }
-};
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-};
-const SelectedProps = {
-  /**
-   * Whether the item is selected
-   */
-  selected: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
-};
-const ReadonlyProps = {
-  /**
-   * The value is not editable
-   */
-  readonly: Boolean
-};
-const ModifiersProps = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: [String, Array]
-};
-const HintProps = {
-  hintLabel: { type: String, default: "" }
-};
-const OptionsProps = {
-  /**
-   * List of options, can be string[] or object[]
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  labelKey: { type: [String, Function], default: "label" },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  valueKey: { type: [String, Function], default: "value" },
-  /**
-   * Used when options are objects: key to use for option disabled
-   */
-  disabledKey: { type: [String, Function], default: "disabled" }
-};
-const CountProps = {
-  /**
-   * Show character limit
-   */
-  count: {
-    type: [Boolean, String],
-    default: false,
-    validator: (value) => [true, false, "limit", "countdown"].includes(value)
-  }
-};
-const DebounceProps = {
-  /**
-   * Milliseconds to wait before emitting the input event
-   */
-  debounce: [Number, String]
-};
-const IconProps = {
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
-  /**
-   * VvIcon position
-   */
-  iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
-  }
-};
-const TabindexProps = {
-  /**
-   * Global attribute tabindex
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-   */
-  tabindex: { type: [String, Number], default: 0 }
+const TabindexProps = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
+  tabindex: { type: [String, Number], default: 0 }
 };
 const FloatingLabelProps = {
   /**
@@ -781,168 +321,650 @@ const DropdownProps = {
     default: () => ({ padding: 10 })
   },
   /**
-   * Automatically change the position of the dropdown
-   * @see https://floating-ui.com/docs/autoPlacement
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+};
+const IdNameProps = {
+  ...IdProps,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
+  name: { type: String, required: true }
+};
+const AutofocusProps = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  autofocus: Boolean
+};
+const AutocompleteProps = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autocomplete: { type: String, default: "off" }
+};
+const InputTextareaProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...ModifiersProps,
+  ...CountProps,
+  ...DebounceProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...LabelProps,
+  /**
+   * Input / Textarea minlength
+   * Minimum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
+  minlength: [String, Number],
+  /**
+   * Input / Textarea maxlength
+   * Maximum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
+  maxlength: [String, Number],
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder: String,
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
+  required: Boolean
+};
+const CheckboxRadioProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
+  ...LoadingProps,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
+  value: [String, Number, Boolean],
+  /**
+   * Input value
+   */
+  modelValue: [Object, Number, Boolean, String]
+};
+const CheckboxRadioGroupProps = {
+  ...ValidProps,
+  ...InvalidProps,
+  ...OptionsProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
+  ...LoadingProps,
+  /**
+   * Input value
+   */
+  modelValue: [String, Array, Boolean, Number, Symbol],
+  /**
+   * Input name
+   */
+  name: { type: String, required: true },
+  /**
+   * If true, the group will be displayed in a vertical column
+   */
+  vertical: Boolean
+};
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+};
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
+}
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() == b.getTime();
+    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function findIndexInList(value, list) {
+  let index = -1;
+  if (list) {
+    for (let i = 0; i < list.length; i++) {
+      if (equals(list[i], value)) {
+        index = i;
+        break;
+      }
+    }
+  }
+  return index;
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+}
+function removeFromList(value, list) {
+  const indexElToRemove = findIndexInList(value, list);
+  if (indexElToRemove > -1) {
+    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
+  } else {
+    return list;
+  }
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
+        get() {
+          return groupPropValue == null ? void 0 : groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvAccordionProps = {
+  ...ModifiersProps,
+  /**
+   * Accordion name
+   */
+  name: String,
+  /**
+   * Header title
+   */
+  title: String,
+  /**
+   * Content text
+   */
+  content: String,
+  /**
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * If true, the accordion will be disabled
+   */
+  disabled: Boolean,
+  /**
+   * If true, the accordion will be opened by default
+   */
+  not: Boolean
+};
+const VvAccordionEvents = ["update:modelValue"];
+function useGroupProps$3(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
+    INJECTION_KEY_ACCORDION_GROUP
+  );
+  const { title, content } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const not = getGroupOrLocalRef("not", props);
+  const collapse = getGroupOrLocalRef("collapse", props);
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
+  });
+  return {
+    // group props
+    modelValue,
+    not,
+    isInGroup,
+    group,
+    collapse,
+    modifiers,
+    disabled,
+    // local props
+    title,
+    content
+  };
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    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 = {
+  name: "VvAccordion"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
+  props: VvAccordionProps,
+  emits: VvAccordionEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const accordionName = computed(
+      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
+    );
+    const {
+      modifiers,
+      title,
+      content,
+      disabled,
+      collapse,
+      modelValue,
+      isInGroup,
+      not
+    } = useGroupProps$3(props, emit);
+    const localModelValue = ref(false);
+    const isOpen = computed({
+      get: () => {
+        let toReturn = modelValue.value;
+        if (isInGroup.value) {
+          if (collapse.value && Array.isArray(modelValue.value)) {
+            toReturn = modelValue.value.includes(accordionName.value);
+          } else {
+            toReturn = modelValue.value === accordionName.value;
+          }
+        } else if (modelValue.value === void 0) {
+          toReturn = localModelValue.value;
+        }
+        return not.value ? !toReturn : toReturn;
+      },
+      set: (newValue) => {
+        if (not.value) {
+          newValue = !newValue;
+        }
+        if (isInGroup.value) {
+          if (collapse.value && Array.isArray(modelValue.value)) {
+            if (newValue) {
+              modelValue.value.push(accordionName.value);
+              return;
+            }
+            modelValue.value = modelValue.value.filter(
+              (name) => name !== accordionName.value
+            );
+            return;
+          }
+          modelValue.value = newValue ? accordionName.value : null;
+          return;
+        }
+        if (modelValue.value === void 0 && typeof newValue === "boolean") {
+          localModelValue.value = newValue;
+          return;
+        }
+        modelValue.value = newValue;
+      }
+    });
+    const bemCssClasses = useModifiers(
+      "vv-accordion",
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
+      }))
+    );
+    const onClick = useToggle(isOpen);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("details", {
+        id: unref(accordionName),
+        class: normalizeClass(unref(bemCssClasses)),
+        open: unref(isOpen)
+      }, [
+        createElementVNode("summary", {
+          "aria-controls": unref(accordionName),
+          "aria-expanded": unref(isOpen),
+          class: "vv-accordion__summary",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
+        }, [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(title)), 1)
+          ])
+        ], 8, _hoisted_2$c),
+        createElementVNode("div", {
+          "aria-hidden": !unref(isOpen),
+          class: "vv-accordion__content"
+        }, [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(content)), 1)
+          ])
+        ], 8, _hoisted_3$6)
+      ], 10, _hoisted_1$f);
+    };
+  }
+});
+const VvAccordionGroupProps = {
+  ...ModifiersProps,
+  /**
+   * VModel
    */
-  autoPlacement: {
-    type: [Boolean, Object],
-    default: false
-  },
+  modelValue: [String, Array],
   /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
+   * Accordion items
+   * @type VvAccordionGroupItem
    */
-  arrow: {
-    type: Boolean,
-    default: false
+  items: {
+    type: Array,
+    default: () => []
   },
   /**
-   * Close dropdown on click outside
+   * If true, accordion items stay open when another item is opened
    */
-  autoClose: {
-    type: Boolean,
-    default: true
-  },
+  collapse: Boolean,
   /**
-   * Autofocus first item on dropdown open
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
    */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
   },
   /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean
-  }
-};
-const IdNameProps = {
-  ...IdProps,
-  /**
-   * Input / Textarea name
-   * Name of the form control. Submitted with the form as part of a name/value pair
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
-   */
-  name: { type: String, required: true }
-};
-const AutofocusProps = {
-  /**
-   * Global attribute autofocus
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-   */
-  autofocus: Boolean
-};
-const AutocompleteProps = {
-  /**
-   * Global attribute autocomplete
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-   */
-  autocomplete: { type: String, default: "off" }
-};
-const InputTextareaProps = {
-  ...IdNameProps,
-  ...AutofocusProps,
-  ...AutocompleteProps,
-  ...TabindexProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...ModifiersProps,
-  ...CountProps,
-  ...DebounceProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...LabelProps,
-  /**
-   * Input / Textarea minlength
-   * Minimum length (number of characters) of value
-   * Available for input types: text, search, url, tel, email, password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-   */
-  minlength: [String, Number],
-  /**
-   * Input / Textarea maxlength
-   * Maximum length (number of characters) of value
-   * Available for input types: text, search, url, tel, email, password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-   */
-  maxlength: [String, Number],
-  /**
-   * Input / Textarea placeholder
-   * Text that appears in the form control when it has no value set
-   * Available for input types: text, search, url, tel, email, password, number
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
-   */
-  placeholder: String,
-  /**
-   * Input / Textarea required
-   * A value is required or must be check for the form to be submittable
-   * Available for all input types except color
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   * If true, the accordion items will be disabled
    */
-  required: Boolean
-};
-const CheckboxRadioProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...LabelProps,
+  disabled: Boolean,
   /**
-   * Input value
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   * If true, the accordion items will be opened by default
    */
-  value: [String, Number, Boolean],
+  not: Boolean,
   /**
-   * Input value
+   * Enable local storage persistence
    */
-  modelValue: [Object, Number, Boolean, String]
+  storeKey: String
 };
-const CheckboxRadioGroupProps = {
-  ...ValidProps,
-  ...InvalidProps,
-  ...OptionsProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...LabelProps,
-  /**
-   * Input value
-   */
-  modelValue: [String, Array, Boolean, Number, Symbol],
-  /**
-   * Input name
-   */
-  name: { type: String, required: true },
-  /**
-   * If true, the group will be displayed in a vertical column
-   */
-  vertical: Boolean
+const VvAccordionGroupEvents = ["update:modelValue"];
+function useProvideGroupState(groupState) {
+  if (Object.keys(groupState).some(
+    (k) => k !== "key" && !isRef(groupState[k])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  provide(
+    groupState.key,
+    computed(() => groupState)
+  );
+}
+const __default__$l = {
+  name: "VvAccordionGroup"
 };
-const ActionProps = {
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...LinkProps,
-  /**
-   * Button type
-   */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvAccordionGroupProps,
+  emits: VvAccordionGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    watchEffect(() => {
+      if (typeof props.modelValue === "string" && collapse.value) {
+        console.warn(
+          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
+        );
+      }
+    });
+    let localModelValue = ref([]);
+    watch(
+      () => props.storeKey,
+      (newKey) => {
+        if (newKey) {
+          localModelValue = useStorage(newKey, localModelValue.value);
+        } else {
+          localModelValue = ref([]);
+        }
+      },
+      { immediate: true }
+    );
+    const modelValue = computed({
+      get: () => {
+        var _a;
+        if (props.modelValue !== void 0) {
+          if (!collapse.value) {
+            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
+          }
+          return props.modelValue;
+        }
+        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
+      },
+      set: (newValue) => {
+        if (props.modelValue !== void 0) {
+          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
+            newValue = [newValue];
+          }
+          return emit("update:modelValue", newValue);
+        }
+        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
+      }
+    });
+    useProvideGroupState({
+      key: INJECTION_KEY_ACCORDION_GROUP,
+      modelValue,
+      disabled,
+      collapse,
+      modifiers: itemModifiers,
+      not
+    });
+    const bemCssClasses = useModifiers(
+      "vv-accordion-group",
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
+            return openBlock(), createBlock(_sfc_main$m, mergeProps({
+              key: item.title
+            }, {
+              name: item.name,
+              title: item.title,
+              content: item.content
+            }), {
+              header: withCtx((data) => [
+                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
+              ]),
+              details: withCtx((data) => [
+                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
+              ]),
+              _: 2
+            }, 1040);
+          }), 128))
+        ])
+      ], 2);
+    };
   }
-};
+});
 const VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
@@ -1116,7 +1138,7 @@ const VvIconProps = {
   svg: String,
   /**
    * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | Array<string>
+   * @values string | string[]
    */
   modifiers: {
     type: [String, Array]
@@ -1133,6 +1155,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: VvIconProps,
   setup(__props) {
     const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
     const show = ref(true);
     const volver = useVolver();
     const { modifiers } = toRefs(props);
@@ -1141,25 +1169,24 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
     const icon = computed(() => {
-      const _name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
-      if (iconExists(_name)) {
-        return _name;
-      } else if (iconExists(iconName)) {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
         return iconName;
-      } else {
-        return (volver == null ? void 0 : volver.iconsCollections.find(
-          (iconsCollection) => {
-            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
-            if (iconExists(icon2)) {
-              return icon2;
-            }
-          }
-        )) || _name;
       }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
     });
     function getSvgContent(svg) {
-      let dom = null;
+      let dom;
       if (typeof window === "undefined") {
         const { JSDOM } = require("jsdom");
         dom = new JSDOM().window;
@@ -1190,12 +1217,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             show.value = true;
           }
         }).catch((e) => {
-          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
         });
-      } else if (props.svg) {
-        addIconFromSvg(props.svg);
       }
     }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
     return (_ctx, _cache) => {
       return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
         key: 0,
@@ -1207,7 +1235,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         horizontalFlip: _ctx.horizontalFlip,
         verticalFlip: _ctx.verticalFlip,
         flip: _ctx.flip,
-        rotate: _ctx.rotate,
+        rotate: unref(hasRotate),
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
@@ -1233,11 +1261,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...__default__$h,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const volver = useVolver();
     const element = ref(null);
-    expose({ $el: element });
+    __expose({ $el: element });
     const {
       reference: dropdownTriggerReference,
       bus: dropdownEventBus,
@@ -1272,7 +1300,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       const toReturn = {
         ...dropdownAria == null ? void 0 : dropdownAria.value,
         "aria-pressed": pressed.value ? true : void 0,
-        role
+        role: role == null ? void 0 : role.value
       };
       switch (hasTag.value) {
         case ActionTag.a:
@@ -1359,22 +1387,38 @@ const VvButtonProps = {
    * Loading icon
    */
   loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Enable button toggle
+   */
   toggle: {
     type: Boolean,
     default: false
   },
-  modelValue: String
+  /**
+   * Button toggle value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Value associated with the unchecked state
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Button toggle model value
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  }
 };
 function useGroupProps$2(props, emit) {
   const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
-  const {
-    id,
-    iconPosition,
-    icon,
-    label,
-    pressed,
-    modifiers: localModifiers
-  } = toRefs(props);
+  const { id, iconPosition, icon, label, pressed } = toRefs(props);
   const modelValue = getGroupOrLocalRef("modelValue", props, emit);
   const toggle = getGroupOrLocalRef("toggle", props);
   const unselectable = getGroupOrLocalRef(
@@ -1383,10 +1427,22 @@ function useGroupProps$2(props, emit) {
   );
   const multiple = computed(() => (group == null ? void 0 : group.value.multiple.value) ?? false);
   const modifiers = computed(() => {
-    var _a;
-    const localValue = (localModifiers == null ? void 0 : localModifiers.value) ? Array.isArray(localModifiers.value) ? localModifiers.value : localModifiers.value.split(" ") : [];
-    const groupValue = ((_a = group == null ? void 0 : group.value.itemModifiers) == null ? void 0 : _a.value) ? Array.isArray(group.value.itemModifiers.value) ? group.value.itemModifiers.value : group.value.itemModifiers.value.split(" ") : [];
-    return [...localValue, ...groupValue];
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
   });
   const disabled = computed(
     () => {
@@ -1428,7 +1484,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...__default__$g,
   props: VvButtonProps,
   emits: VvButtonEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const attrs = useAttrs();
     const slots = useSlots();
@@ -1450,7 +1506,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       var _a;
       return (_a = element.value) == null ? void 0 : _a.$el;
     });
-    expose({ $el });
+    __expose({ $el });
     const pressed = computed(() => {
       if (!toggle.value) {
         return props.pressed;
@@ -1478,25 +1534,28 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const hasIconProps = computed(
       () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
     );
+    const toggleValue = computed(() => {
+      return props.value !== void 0 ? props.value : name.value;
+    });
     const onClick = () => {
       if (toggle.value) {
         if (Array.isArray(modelValue.value)) {
-          if (contains(name.value, modelValue.value)) {
+          if (contains(toggleValue.value, modelValue.value)) {
             if (unselectable.value) {
               modelValue.value = modelValue.value.filter(
-                (n) => n !== name.value
+                (n) => n !== toggleValue.value
               );
             }
             return;
           }
-          modelValue.value.push(name.value);
+          modelValue.value.push(toggleValue.value);
           return;
         }
-        if (equals(name.value, modelValue.value) && unselectable.value) {
-          modelValue.value = void 0;
+        if (toggleValue.value === modelValue.value && unselectable.value) {
+          modelValue.value = props.uncheckedValue;
           return;
         }
-        modelValue.value = name.value;
+        modelValue.value = toggleValue.value;
       }
     };
     return (_ctx, _cache) => {
@@ -1552,10 +1611,16 @@ const VvButtonGroupProps = {
   /**
    * String or String[] of css classes (modifiers) that will be provided to each button'
    */
-  itemModifiers: { type: [String, Array], default: void 0 },
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
+  },
   toggle: { type: Boolean, default: false },
   multiple: { type: Boolean, default: false },
-  modelValue: { type: [String, Array], default: void 0 }
+  modelValue: {
+    type: [String, Number, Boolean, Array],
+    default: void 0
+  }
 };
 const VvButtonGroupEvents = ["update:modelValue"];
 const __default__$f = {
@@ -1591,7 +1656,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       },
       set: (newValue) => {
         if (newValue !== void 0 && (Array.isArray(props.modelValue) || multiple.value) && !Array.isArray(newValue)) {
-          newValue = [newValue];
+          return emit("update:modelValue", [newValue]);
         }
         return emit("update:modelValue", newValue);
       }
@@ -1603,7 +1668,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       toggle,
       multiple,
       unselectable,
-      itemModifiers
+      modifiers: itemModifiers
     });
     const bemCssClasses = useModifiers("vv-button-group", modifiers);
     return (_ctx, _cache) => {
@@ -1617,8 +1682,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const VvCardProps = {
-  title: String,
-  modifiers: [String, Array]
+  ...ModifiersProps,
+  title: String
 };
 const _hoisted_1$c = {
   key: 0,
@@ -1712,115 +1777,118 @@ function useGroupProps$1(props, emit) {
     disabled
   };
 }
-function joinLines(errors) {
-  if (Array.isArray(errors)) {
-    return errors.filter((e) => isString(e)).join(" ");
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
   }
-  return errors;
+  return items;
 }
-function HintSlotFactory(parentProps, parentSlots) {
-  const {
-    invalid: invalidSlot,
-    valid: validSlot,
-    hint: hintSlot,
-    loading: loadingSlot
-  } = parentSlots;
-  const {
-    hintLabel,
-    modelValue,
-    valid,
-    validLabel,
-    invalid,
-    invalidLabel,
-    ...otherProps
-  } = toRefs(parentProps);
-  const loading = resolveFieldData(otherProps, "loading");
-  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
-  const hasInvalid = computed(() => {
-    if (!invalid.value) {
-      return false;
-    }
-    if (invalid.value && invalidSlot) {
-      return true;
-    }
-    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
-      return true;
-    }
-    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
-      return true;
-    }
-    return false;
-  });
-  const hasHint = computed(
-    () => !!(hintLabel && hintLabel.value || hintSlot)
+function HintSlotFactory(props, slots) {
+  const invalidLabel = computed(() => joinLines(props.invalidLabel));
+  const validLabel = computed(() => joinLines(props.validLabel));
+  const loadingLabel = computed(() => props.loadingLabel);
+  const hintLabel = computed(() => props.hintLabel);
+  const hasLoadingLabelOrSlot = computed(
+    () => Boolean(props.loading && (slots.loading || loadingLabel.value))
+  );
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
   );
-  const hasValid = computed(
-    () => !!(validLabel && validLabel.value || validSlot)
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
   );
-  const hasLoading = computed(
-    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  const hasHintLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
   );
   const isVisible = computed(
-    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
   );
-  return {
-    hasInvalid,
-    hasHint,
-    hasValid,
-    hasLoading,
-    HintSlot: {
-      name: "HintSlot",
-      props: {
-        params: {
-          type: Object,
-          default: () => ({})
+  const hintSlotScope = computed(() => ({
+    modelValue: props.modelValue,
+    valid: props.valid,
+    invalid: props.invalid,
+    loading: props.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
         }
-      },
-      setup(props) {
-        const hintContent = computed(() => {
-          const slotProps = toReactive({
-            hintLabel,
-            modelValue,
-            valid,
-            validLabel,
-            invalid,
-            invalidLabel,
-            loading,
-            loadingLabel,
-            ...props.params
-          });
-          if (invalid == null ? void 0 : invalid.value) {
-            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          }
-          if (valid == null ? void 0 : valid.value)
-            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          if (loading == null ? void 0 : loading.value)
-            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-        });
-        return {
-          isVisible,
-          hasInvalid,
-          hasValid,
-          hintContent
-        };
-      },
-      render() {
-        if (this.isVisible) {
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+          );
+        }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+          );
+        }
+        if (this.hasValidLabelOrSlot) {
           return h(
-            "small",
+            this.tag,
             {
-              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
+              role
             },
-            this.hintContent
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
           );
         }
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+        );
       }
+      return null;
     }
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
   };
 }
 const _hoisted_1$b = ["for"];
-const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"];
+const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$d = {
   name: "VvCheckbox"
 };
@@ -1843,6 +1911,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       isInGroup
     } = useGroupProps$1(props, emit);
     const hasId = useUniqueId(id);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const tabindex = computed(() => isDisabled.value ? -1 : props.tabindex);
     const input = ref();
     const isBinary = computed(
@@ -1937,7 +2006,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         input.value.indeterminate = true;
       }
     });
-    const { HintSlot } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -1954,7 +2028,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           disabled: unref(isDisabled),
           value: unref(hasValue),
           tabindex: unref(tabindex),
-          "aria-invalid": unref(isInvalid)
+          "aria-invalid": unref(isInvalid),
+          "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+          "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0
         }, null, 8, _hoisted_2$8), [
           [vModelCheckbox, unref(localModelValue)]
         ]),
@@ -1962,9 +2038,38 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           createTextVNode(toDisplayString(_ctx.label), 1)
         ]),
         createVNode(unref(HintSlot), {
-          class: "vv-checkbox__hint",
-          params: { value: unref(modelValue) }
-        }, null, 8, ["params"])
+          id: unref(hasHintId),
+          class: "vv-checkbox__hint"
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 10, _hoisted_1$b);
     };
   }
@@ -1976,7 +2081,9 @@ function useOptions(props) {
   const getOptionLabel = (option) => {
     if (typeof option !== "object" && option !== null)
       return option;
-    return typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value];
+    return String(
+      typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value]
+    );
   };
   const getOptionValue = (option) => {
     if (typeof option !== "object" && option !== null)
@@ -2043,7 +2150,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -2057,7 +2164,36 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             return openBlock(), createBlock(_sfc_main$d, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
-        createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" })
+        createVNode(unref(HintSlot), { class: "vv-checkbox-group__hint" }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1024)
       ], 2);
     };
   }
@@ -2180,11 +2316,17 @@ const VvComboboxProps = {
   /**
    * Open dropdown on focus
    */
-  autoOpen: Boolean,
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
   /**
-   * Close dropdown on select (not multiple)
+   * Keep open dropdown on single select
    */
-  autoClose: Boolean
+  keepOpen: {
+    type: Boolean,
+    default: false
+  }
 };
 const VvDropdownProps = {
   ...IdProps,
@@ -2222,19 +2364,14 @@ function useProvideDropdownTrigger({
   const bus = mitt();
   const component = defineComponent({
     name: "VvDropdownTriggerProvider",
-    provide() {
-      return {
-        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
-          reference,
-          id,
-          expanded,
-          aria,
-          bus
-        }
-      };
-    },
     setup() {
-      return {};
+      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+        reference,
+        id,
+        expanded,
+        aria,
+        bus
+      });
     },
     render() {
       var _a, _b;
@@ -2263,7 +2400,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -2275,8 +2412,14 @@ const __default__$b = {
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: VvDropdownProps,
-  emits: ["update:modelValue"],
-  setup(__props, { expose, emit }) {
+  emits: [
+    "update:modelValue",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse"
+  ],
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -2421,7 +2564,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
-    expose({ toggle, show, hide, init });
+    __expose({ toggle, show, hide, init });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -2437,7 +2580,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -2546,6 +2689,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         activeElement.click();
       }
     });
+    const onTransitionBeforeEnter = () => {
+      emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+    };
+    const onTransitionAfterLeave = () => {
+      emit(expanded.value ? "afterExpand" : "afterCollapse");
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(VvDropdownTriggerProvider), null, {
@@ -2554,7 +2703,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        createVNode(Transition, { name: _ctx.transitionName }, {
+        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers({
+          beforeEnter: onTransitionBeforeEnter,
+          onAfterLeave: onTransitionAfterLeave
+        })), {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
               ref_key: "floatingEl",
@@ -2570,7 +2722,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 class: "vv-dropdown__arrow"
               }, null, 4)) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-              createElementVNode("ul", mergeProps(unref(attrs), {
+              createElementVNode("div", mergeProps(unref(attrs), {
                 id: unref(hasId),
                 ref_key: "listEl",
                 ref: listEl,
@@ -2589,7 +2741,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["name"])
+        }, 16, ["name"])
       ], 64);
     };
   }
@@ -2612,7 +2764,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
         ref_key: "element",
         ref: element,
         class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
@@ -2826,7 +2978,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const slots = useSlots();
     const select = ref();
-    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const {
       id,
       modifiers,
@@ -2841,7 +2998,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       multiple
     } = toRefs(props);
     const hasId = useUniqueId(id);
-    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const { focused } = useComponentFocus(select, emit);
     const isVisible = useElementVisibility(select);
     watch(isVisible, (newValue) => {
@@ -2894,8 +3051,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         autocomplete: props.autocomplete,
         multiple: props.multiple,
         "aria-invalid": isInvalid.value,
-        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
-        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       };
     });
     const slotProps = computed(() => ({
@@ -2988,9 +3145,38 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         createVNode(unref(HintSlot), {
-          id: unref(hasDescribedBy),
+          id: unref(hasHintId),
           class: "vv-select__hint"
-        }, null, 8, ["id"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 2);
     };
   }
@@ -3050,13 +3236,13 @@ function useDefaults(componentName, propsDefinition, props) {
 }
 const _hoisted_1$5 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
-const _hoisted_3$3 = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"];
+const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
 const _hoisted_4$2 = {
   key: 0,
   class: "vv-select__input-before"
 };
 const _hoisted_5$2 = { class: "vv-select__inner" };
-const _hoisted_6$2 = ["aria-labelledby", "tabindex"];
+const _hoisted_6$2 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
 const _hoisted_7$2 = ["aria-label", "onClick"];
 const _hoisted_8$1 = {
   key: 1,
@@ -3084,7 +3270,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
       return option.options && option.options.length > 0;
     };
-    const { HintSlot } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const inputEl = ref(null);
     const inputSearchEl = ref(null);
     const wrapperEl = ref(null);
@@ -3132,19 +3323,18 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         return;
       expanded.value = false;
     };
-    watch(expanded, (newValue) => {
+    const onAfterExpand = () => {
       if (searchable.value) {
-        nextTick(() => {
-          if (newValue) {
-            if (inputSearchEl.value) {
-              inputSearchEl.value.focus();
-            }
-            return;
-          }
-          searchText.value = "";
-        });
+        if (inputSearchEl.value) {
+          inputSearchEl.value.focus();
+        }
       }
-    });
+    };
+    const onAfterCollapse = () => {
+      if (searchable.value) {
+        searchText.value = "";
+      }
+    };
     const {
       id,
       icon,
@@ -3233,11 +3423,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const hasValue = computed(() => {
       return selectedOptions.value.map((option) => getOptionLabel(option)).join(props.separator);
     });
-    watch(selectedOptions, () => {
-      if (!props.multiple && props.autoClose) {
-        collapse();
-      }
-    });
     const onClickInput = () => {
       props.autoOpen ? expand() : toggleExpanded();
     };
@@ -3261,7 +3446,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           toReturn = [value];
         }
       } else {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           collapse();
         }
         if (props.unselectable && value === props.modelValue) {
@@ -3307,7 +3492,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       flip: props.flip,
       autoPlacement: props.autoPlacement,
       arrow: props.arrow,
-      autoClose: props.autoClose,
       autofocusFirst: searchable.value ? false : props.autofocusFirst,
       triggerWidth: props.triggerWidth,
       modifiers: props.dropdownModifiers
@@ -3347,7 +3531,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             modelValue: unref(expanded),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(expanded) ? expanded.value = $event : null)
           }, unref(dropdownProps), {
-            role: unref(DropdownRole).listbox
+            role: unref(DropdownRole).listbox,
+            onAfterExpand,
+            onAfterCollapse
           }), createSlots({
             default: withCtx(({ aria }) => [
               _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
@@ -3362,9 +3548,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ref_key: "inputEl",
                   ref: inputEl
                 }, aria, {
-                  "aria-labelledby": unref(hasLabelId),
                   class: "vv-select__input",
                   role: "combobox",
+                  "aria-expanded": unref(expanded),
+                  "aria-labelledby": unref(hasLabelId),
+                  "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+                  "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
                   tabindex: unref(hasTabindex),
                   onClickPassive: onClickInput
                 }), [
@@ -3500,8 +3689,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
                   "aria-autocomplete": "list",
                   "aria-controls": unref(hasDropdownId),
-                  "aria-labelledby": unref(hasLabelId),
-                  "aria-describedby": unref(hasHintId),
                   autocomplete: "off",
                   spellcheck: "false",
                   type: "search",
@@ -3526,7 +3713,36 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-select__hint"
-        }, null, 8, ["id"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 10, _hoisted_1$5)) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, unref(selectProps), {
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
       }), null, 16));
@@ -3556,9 +3772,9 @@ const VvDialogProps = {
    */
   size: String,
   /**
-   * Close dialog on click outside
+   * Keep open dialog on click outside
    */
-  autoClose: { type: Boolean, default: true }
+  keepOpen: { type: Boolean, default: false }
 };
 const _hoisted_1$4 = {
   key: 0,
@@ -3576,8 +3792,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: VvDialogProps,
   emits: VvDialogEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
+    const dialogEl = ref();
     const localModelValue = ref(false);
     const modelValue = computed({
       get() {
@@ -3590,13 +3807,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const htmlAttrIsOpen = ref(true);
     const modalWrapper = ref(null);
     const dialogAttrs = computed(() => {
       const { id } = props;
       return {
-        id,
-        open: htmlAttrIsOpen.value
+        id
       };
     });
     const dialogClass = computed(() => {
@@ -3608,16 +3823,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const transitioName = computed(() => `vv-dialog--${props.transition}`);
     const dialogTransitionHandlers = {
       "before-enter": () => {
-        htmlAttrIsOpen.value = true;
+        var _a;
+        (_a = dialogEl.value) == null ? void 0 : _a.showModal();
         emit("open");
       },
       "after-leave": () => {
-        htmlAttrIsOpen.value = false;
+        var _a;
+        (_a = dialogEl.value) == null ? void 0 : _a.close();
         emit("close");
       }
     };
     onClickOutside(modalWrapper, () => {
-      if (props.autoClose) {
+      if (!props.keepOpen) {
         modelValue.value = false;
       }
     });
@@ -3627,7 +3844,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     function open() {
       modelValue.value = true;
     }
-    expose({ close, open });
+    __expose({ close, open });
     onKeyStroke("Escape", (e) => {
       if (modelValue.value) {
         e.preventDefault();
@@ -3637,7 +3854,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
-          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), { class: unref(dialogClass) }), [
+          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
+            ref_key: "dialogEl",
+            ref: dialogEl,
+            class: unref(dialogClass)
+          }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,
@@ -4176,12 +4397,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const slots = useSlots();
     const inputEl = ref();
     const innerEl = ref();
-    expose({ $inner: innerEl });
+    __expose({ $inner: innerEl });
     const {
       id,
       icon,
@@ -4194,7 +4415,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       loading
     } = toRefs(props);
     const hasId = useUniqueId(id);
-    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const inputTextPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
@@ -4330,8 +4551,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         required: props.required,
         autocomplete: props.autocomplete,
         "aria-invalid": isInvalid.value,
-        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
-        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       };
       if (type === INPUT_TYPES.DATE || type === INPUT_TYPES.MONTH || type === INPUT_TYPES.WEEK || type === INPUT_TYPES.TIME || type === INPUT_TYPES.DATETIME_LOCAL || type === INPUT_TYPES.NUMBER) {
         toReturn.step = props.step;
@@ -4360,7 +4581,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       stepDown: onStepDown,
       clear: onClear
     }));
-    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const PasswordInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.PASSWORD,
       props
@@ -4475,9 +4701,38 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         createVNode(unref(HintSlot), {
-          id: unref(hasDescribedBy),
+          id: unref(hasHintId),
           class: "vv-input-text__hint"
-        }, null, 8, ["id"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 2);
     };
   }
@@ -4572,7 +4827,7 @@ function useGroupProps(props, emit) {
   };
 }
 const _hoisted_1$2 = ["for"];
-const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"];
+const _hoisted_2$2 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$2 = {
   name: "VvRadio"
 };
@@ -4585,6 +4840,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { id, disabled, readonly, modelValue, valid, invalid } = useGroupProps(props, emit);
     const hasId = useUniqueId(id);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const tabindex = computed(() => isDisabled.value ? -1 : props.tabindex);
     const input = ref();
     const isDisabled = computed(() => disabled.value || readonly.value);
@@ -4627,7 +4883,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         readonly: readonly.value
       }))
     );
-    const { HintSlot } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -4644,7 +4905,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           disabled: unref(isDisabled),
           value: unref(hasValue),
           tabindex: unref(tabindex),
-          "aria-invalid": unref(isInvalid)
+          "aria-invalid": unref(isInvalid),
+          "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+          "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0
         }, null, 8, _hoisted_2$2), [
           [vModelRadio, unref(localModelValue)]
         ]),
@@ -4652,9 +4915,38 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           createTextVNode(toDisplayString(_ctx.label), 1)
         ]),
         createVNode(unref(HintSlot), {
-          class: "vv-radio__hint",
-          params: { value: unref(modelValue) }
-        }, null, 8, ["params"])
+          id: unref(hasHintId),
+          class: "vv-radio__hint"
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 10, _hoisted_1$2);
     };
   }
@@ -4703,7 +4995,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -4717,7 +5009,36 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             return openBlock(), createBlock(_sfc_main$2, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
           }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
-        createVNode(unref(HintSlot), { class: "vv-radio-group__hint" })
+        createVNode(unref(HintSlot), { class: "vv-radio-group__hint" }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1024)
       ], 2);
     };
   }
@@ -4804,7 +5125,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       modifiers
     } = toRefs(props);
     const hasId = useUniqueId(id);
-    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
@@ -4839,7 +5160,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return void 0;
     });
-    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const bemCssClasses = useModifiers(
       "vv-textarea",
       modifiers,
@@ -4873,8 +5199,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         wrap: props.wrap,
         spellcheck: props.spellcheck,
         "aria-invalid": isInvalid.value,
-        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
-        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       })
     );
     const slotProps = computed(() => ({
@@ -4932,9 +5258,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         createVNode(unref(HintSlot), {
-          id: unref(hasDescribedBy),
+          id: unref(hasHintId),
           class: "vv-textarea__hint"
-        }, null, 8, ["id"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 2);
     };
   }