@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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,495 +69,15 @@ 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;
-  }
-}
-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 = {
-  /**
-   * Accordion name
-   */
-  name: String,
-  /**
-   * Header title
-   */
-  title: String,
-  /**
-   * Content text
-   */
-  content: String,
-  /**
-   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
-   */
-  modelValue: {
-    type: Boolean,
-    default: void 0
-  },
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-   */
-  modifiers: [String, Array],
-  /**
-   * If true, the accordion will be disabled
-   */
-  disabled: Boolean,
-  /**
-   * 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 = {
-  /**
-   * VModel
-   */
-  modelValue: [String, Array],
-  /**
-   * Accordion items
-   * @type VvAccordionGroupItem
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * If true, accordion items stay open when another item is opened
-   */
-  collapse: Boolean,
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
-   */
-  modifiers: [String, Array],
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-   */
-  itemModifiers: {
-    type: [String, Array],
-    default: ""
-  },
-  /**
-   * If true, the accordion items will be disabled
-   */
-  disabled: Boolean,
-  /**
-   * If true, the accordion items will be opened by default
-   */
-  not: Boolean,
-  /**
-   * Enable local storage persistence
-   */
-  storeKey: String
-};
-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 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.
@@ -817,11 +337,11 @@ const DropdownProps = {
     default: false
   },
   /**
-   * Close dropdown on click outside
+   * Keep open dropdown on click outside
    */
-  autoClose: {
+  keepOpen: {
     type: Boolean,
-    default: true
+    default: false
   },
   /**
    * Autofocus first item on dropdown open
@@ -883,86 +403,568 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: [String, Number],
+  minlength: [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,
   /**
-   * 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
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
    */
-  maxlength: [String, Number],
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
   /**
-   * Input / Textarea placeholder
-   * Text that appears in the form control when it has no value set
-   * Available for input types: text, search, url, tel, email, password, number
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   * If true, the accordion will be disabled
    */
-  placeholder: String,
+  disabled: Boolean,
   /**
-   * 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 will be opened by default
    */
-  required: Boolean
+  not: Boolean
 };
-const CheckboxRadioProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
+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,
-  ...LabelProps,
   /**
-   * Input value
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   * VModel
    */
-  value: [String, Number, Boolean],
+  modelValue: [String, Array],
   /**
-   * Input value
+   * Accordion items
+   * @type VvAccordionGroupItem
    */
-  modelValue: [Object, Number, Boolean, String]
-};
-const CheckboxRadioGroupProps = {
-  ...ValidProps,
-  ...InvalidProps,
-  ...OptionsProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...LabelProps,
+  items: {
+    type: Array,
+    default: () => []
+  },
   /**
-   * Input value
+   * If true, accordion items stay open when another item is opened
    */
-  modelValue: [String, Array, Boolean, Number, Symbol],
+  collapse: Boolean,
   /**
-   * Input name
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
    */
-  name: { type: String, required: true },
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
+  },
   /**
-   * If true, the group will be displayed in a vertical column
-   */
-  vertical: Boolean
-};
-const ActionProps = {
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...LinkProps,
+   * If true, the accordion items will be disabled
+   */
+  disabled: Boolean,
   /**
-   * Button type
+   * If true, the accordion items will be opened by default
    */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
-  }
+  not: Boolean,
+  /**
+   * Enable local storage persistence
+   */
+  storeKey: String
+};
+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 VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
@@ -1153,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);
@@ -1161,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;
@@ -1210,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,
@@ -1227,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)
@@ -1253,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,
@@ -1292,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:
@@ -1476,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();
@@ -1498,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;
@@ -1674,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,
@@ -1769,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"
 };
@@ -1900,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(
@@ -1994,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)),
@@ -2011,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)]
         ]),
@@ -2019,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);
     };
   }
@@ -2033,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)
@@ -2100,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))
@@ -2114,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);
     };
   }
@@ -2237,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,
@@ -2279,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;
@@ -2320,7 +2400,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -2332,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);
@@ -2478,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(() => {
@@ -2494,7 +2580,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -2603,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, {
@@ -2611,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",
@@ -2627,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,
@@ -2646,7 +2741,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["name"])
+        }, 16, ["name"])
       ], 64);
     };
   }
@@ -2669,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) }]
@@ -2883,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,
@@ -2898,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) => {
@@ -2951,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(() => ({
@@ -3045,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);
     };
   }
@@ -3107,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,
@@ -3141,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);
@@ -3189,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,
@@ -3290,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();
     };
@@ -3318,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) {
@@ -3364,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
@@ -3404,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, [
@@ -3419,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
                 }), [
@@ -3557,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",
@@ -3583,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));
@@ -3613,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,
@@ -3633,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() {
@@ -3647,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(() => {
@@ -3665,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;
       }
     });
@@ -3684,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();
@@ -3694,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,
@@ -4233,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,
@@ -4251,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
     );
@@ -4387,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;
@@ -4417,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
@@ -4532,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);
     };
   }
@@ -4629,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"
 };
@@ -4642,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);
@@ -4684,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)),
@@ -4701,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)]
         ]),
@@ -4709,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);
     };
   }
@@ -4760,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))
@@ -4774,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);
     };
   }
@@ -4861,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
     );
@@ -4896,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,
@@ -4930,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(() => ({
@@ -4989,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);
     };
   }