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

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1,8 +1,8 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, h, Fragment, provide, useAttrs, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, isRef, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, h, Fragment, useAttrs, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, isRef, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { nanoid } from "nanoid";
-import { useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, toReactive, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
 import mitt from "mitt";
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
@@ -57,9 +57,15 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   return AnchorTarget2;
 })(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-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 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.
@@ -303,11 +309,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
@@ -479,11 +485,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 VvIconProps = {
   /**
@@ -613,6 +625,12 @@ const _sfc_main$7 = /* @__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);
@@ -621,25 +639,24 @@ const _sfc_main$7 = /* @__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;
@@ -670,12 +687,13 @@ const _sfc_main$7 = /* @__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,
@@ -687,7 +705,7 @@ const _sfc_main$7 = /* @__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)
@@ -732,19 +750,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;
@@ -773,7 +786,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -785,8 +798,14 @@ const __default__$6 = {
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
   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);
@@ -931,7 +950,7 @@ const _sfc_main$6 = /* @__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(() => {
@@ -947,7 +966,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -1056,6 +1075,12 @@ const _sfc_main$6 = /* @__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, {
@@ -1064,7 +1089,10 @@ const _sfc_main$6 = /* @__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",
@@ -1080,7 +1108,7 @@ const _sfc_main$6 = /* @__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,
@@ -1099,7 +1127,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["name"])
+        }, 16, ["name"])
       ], 64);
     };
   }
@@ -1125,7 +1153,7 @@ const _sfc_main$5 = /* @__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) }]
@@ -1324,111 +1352,114 @@ function removeFromList(value, list) {
 function isString(value) {
   return typeof value === "string" || value instanceof String;
 }
-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(
+            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 VvSelectProps = {
@@ -1529,7 +1560,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)
@@ -1581,7 +1614,12 @@ const _sfc_main$2 = /* @__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,
@@ -1596,7 +1634,7 @@ const _sfc_main$2 = /* @__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) => {
@@ -1649,8 +1687,8 @@ const _sfc_main$2 = /* @__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(() => ({
@@ -1743,9 +1781,38 @@ const _sfc_main$2 = /* @__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);
     };
   }
@@ -1831,13 +1898,13 @@ function useDefaults(componentName, propsDefinition, props) {
 }
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "for"];
-const _hoisted_3 = ["id", "aria-controls", "aria-labelledby", "aria-describedby", "placeholder"];
+const _hoisted_3 = ["id", "aria-controls", "placeholder"];
 const _hoisted_4 = {
   key: 0,
   class: "vv-select__input-before"
 };
 const _hoisted_5 = { class: "vv-select__inner" };
-const _hoisted_6 = ["aria-labelledby", "tabindex"];
+const _hoisted_6 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
 const _hoisted_7 = ["aria-label", "onClick"];
 const _hoisted_8 = {
   key: 1,
@@ -1865,7 +1932,12 @@ const _sfc_main = /* @__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);
@@ -1913,19 +1985,18 @@ const _sfc_main = /* @__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,
@@ -2014,11 +2085,6 @@ const _sfc_main = /* @__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();
     };
@@ -2042,7 +2108,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           toReturn = [value];
         }
       } else {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           collapse();
         }
         if (props.unselectable && value === props.modelValue) {
@@ -2088,7 +2154,6 @@ const _sfc_main = /* @__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
@@ -2128,7 +2193,9 @@ const _sfc_main = /* @__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, [
@@ -2143,9 +2210,12 @@ const _sfc_main = /* @__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
                 }), [
@@ -2281,8 +2351,6 @@ const _sfc_main = /* @__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",
@@ -2307,7 +2375,36 @@ const _sfc_main = /* @__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)) : (openBlock(), createBlock(_sfc_main$2, mergeProps({ key: 1 }, unref(selectProps), {
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
       }), null, 16));