@volverjs/ui-vue 0.0.6-beta.5 → 0.0.6-beta.7

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";
@@ -916,6 +916,7 @@ const CheckboxRadioProps = {
   ...ReadonlyProps,
   ...ModifiersProps,
   ...LabelProps,
+  ...LoadingProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -935,6 +936,7 @@ const CheckboxRadioGroupProps = {
   ...ReadonlyProps,
   ...ModifiersProps,
   ...LabelProps,
+  ...LoadingProps,
   /**
    * Input value
    */
@@ -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)
@@ -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 hasValid = computed(
-    () => !!(validLabel && validLabel.value || validSlot)
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
   );
-  const hasLoading = computed(
-    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.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(
-            "small",
+            this.tag,
             {
-              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
+              role
             },
-            this.hintContent
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
           );
         }
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_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);
     };
   }
@@ -2332,7 +2411,13 @@ const __default__$b = {
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: VvDropdownProps,
-  emits: ["update:modelValue"],
+  emits: [
+    "update:modelValue",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse"
+  ],
   setup(__props, { expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
@@ -2603,6 +2688,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 +2702,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",
@@ -2646,7 +2740,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["name"])
+        }, 16, ["name"])
       ], 64);
     };
   }
@@ -2883,7 +2977,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 +2997,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 +3050,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 +3144,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 +3235,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 +3269,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 +3322,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,
@@ -3404,7 +3536,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 +3553,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 +3694,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 +3718,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));
@@ -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);
     };
   }