@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

package/dist/components/index.es.js

@@ -69,658 +69,178 @@ const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
 const INJECTION_KEY_RADIO_GROUP = Symbol.for("radioGroup");
 const INJECTION_KEY_CHECK_GROUP = Symbol.for("checkGroup");
 const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
-const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
-const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
-function equals(obj1, obj2, field) {
-  if (field)
-    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
-  else
-    return deepEquals(obj1, obj2);
-}
-function deepEquals(a, b) {
-  if (a === b)
-    return true;
-  if (a && b && typeof a == "object" && typeof b == "object") {
-    const arrA = Array.isArray(a);
-    const arrB = Array.isArray(b);
-    let i, length, key;
-    if (arrA && arrB) {
-      length = a.length;
-      if (length != b.length)
-        return false;
-      for (i = length; i-- !== 0; )
-        if (!deepEquals(a[i], b[i]))
-          return false;
-      return true;
-    }
-    if (arrA != arrB)
-      return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
-      return false;
-    if (dateA && dateB)
-      return a.getTime() == b.getTime();
-    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
-      return false;
-    if (regexpA && regexpB)
-      return a.toString() == b.toString();
-    const keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length)
-      return false;
-    for (i = length; i-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-        return false;
-    for (i = length; i-- !== 0; ) {
-      key = keys[i];
-      if (!deepEquals(a[key], b[key]))
-        return false;
-    }
-    return true;
-  }
-  return a !== a && b !== b;
-}
-function resolveFieldData(data, field) {
-  if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
-      return data[field];
-    } else {
-      const fields = field.split(".");
-      let value = data;
-      for (let i = 0, len = fields.length; i < len; ++i) {
-        if (data == null) {
-          return null;
-        }
-        value = value[fields[i]];
-      }
-      return value;
-    }
-  } else {
-    return null;
-  }
-}
-function findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
-function contains(value, list) {
-  if (value != null && list && list.length) {
-    for (const val of list) {
-      if (equals(value, val)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
-}
-function removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
   }
-}
-function isString(value) {
-  return typeof value === "string" || value instanceof String;
-}
-function useInjectedGroupState(groupKey) {
-  const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
-  function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
-      return computed({
-        get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
-        },
-        set(value) {
-          groupPropValue.value = value;
-        }
-      });
-    }
-    const propRef = toRef(props, propName);
-    return computed({
-      get() {
-        return propRef.value;
-      },
-      set(value) {
-        if (emit)
-          emit(`update:${propName}`, value);
-      }
-    });
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
+  valid: Boolean,
+  /**
+   * Valid label
+   */
+  validLabel: [String, Array]
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
+  invalid: Boolean,
+  /**
+   * Invalid label
+   */
+  invalidLabel: [String, Array]
+};
+const LoadingProps = {
+  /**
+   * Loading status
+   */
+  loading: Boolean,
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
   }
-  return {
-    group,
-    isInGroup,
-    getGroupOrLocalRef
-  };
-}
-const VvAccordionProps = {
+};
+const DisabledProps = {
   /**
-   * Accordion name
+   * Whether the form control is disabled
    */
-  name: String,
+  disabled: Boolean
+};
+const SelectedProps = {
   /**
-   * Header title
+   * Whether the item is selected
    */
-  title: String,
+  selected: Boolean
+};
+const ActiveProps = {
   /**
-   * Content text
+   * Whether the item is active
    */
-  content: String,
+  active: Boolean
+};
+const PressedProps = {
   /**
-   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   * Whether the item is pressed
    */
-  modelValue: {
-    type: Boolean,
-    default: void 0
-  },
+  pressed: Boolean
+};
+const LabelProps = {
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   * The item label
    */
-  modifiers: [String, Array],
+  label: [String, Number]
+};
+const ReadonlyProps = {
   /**
-   * If true, the accordion will be disabled
+   * The value is not editable
    */
-  disabled: Boolean,
+  readonly: Boolean
+};
+const ModifiersProps = {
   /**
-   * If true, the accordion will be opened by default
+   * Component BEM modifiers
    */
-  not: Boolean
+  modifiers: [String, Array]
 };
-const VvAccordionEvents = ["update:modelValue"];
-function useGroupProps$3(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
-    INJECTION_KEY_ACCORDION_GROUP
-  );
-  const { title, content } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const not = getGroupOrLocalRef("not", props);
-  const collapse = getGroupOrLocalRef("collapse", props);
-  const 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 HintProps = {
+  hintLabel: { type: String, default: "" }
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
-  props: VvAccordionProps,
-  emits: VvAccordionEvents,
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const accordionName = computed(
-      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
-    );
-    const {
-      modifiers,
-      title,
-      content,
-      disabled,
-      collapse,
-      modelValue,
-      isInGroup,
-      not
-    } = useGroupProps$3(props, emit);
-    const localModelValue = ref(false);
-    const isOpen = computed({
-      get: () => {
-        let toReturn = modelValue.value;
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            toReturn = modelValue.value.includes(accordionName.value);
-          } else {
-            toReturn = modelValue.value === accordionName.value;
-          }
-        } else if (modelValue.value === void 0) {
-          toReturn = localModelValue.value;
-        }
-        return not.value ? !toReturn : toReturn;
-      },
-      set: (newValue) => {
-        if (not.value) {
-          newValue = !newValue;
-        }
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            if (newValue) {
-              modelValue.value.push(accordionName.value);
-              return;
-            }
-            modelValue.value = modelValue.value.filter(
-              (name) => name !== accordionName.value
-            );
-            return;
-          }
-          modelValue.value = newValue ? accordionName.value : null;
-          return;
-        }
-        if (modelValue.value === void 0 && typeof newValue === "boolean") {
-          localModelValue.value = newValue;
-          return;
-        }
-        modelValue.value = newValue;
-      }
-    });
-    const bemCssClasses = useModifiers(
-      "vv-accordion",
-      modifiers,
-      computed(() => ({
-        disabled: disabled.value
-      }))
-    );
-    const onClick = useToggle(isOpen);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("details", {
-        id: unref(accordionName),
-        class: normalizeClass(unref(bemCssClasses)),
-        open: unref(isOpen)
-      }, [
-        createElementVNode("summary", {
-          "aria-controls": unref(accordionName),
-          "aria-expanded": unref(isOpen),
-          class: "vv-accordion__summary",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
-        }, [
-          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(title)), 1)
-          ])
-        ], 8, _hoisted_2$c),
-        createElementVNode("div", {
-          "aria-hidden": !unref(isOpen),
-          class: "vv-accordion__content"
-        }, [
-          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(content)), 1)
-          ])
-        ], 8, _hoisted_3$6)
-      ], 10, _hoisted_1$f);
-    };
-  }
-});
-const VvAccordionGroupProps = {
-  /**
-   * VModel
-   */
-  modelValue: [String, Array],
+const OptionsProps = {
   /**
-   * Accordion items
-   * @type VvAccordionGroupItem
+   * List of options, can be string[] or object[]
    */
-  items: {
+  options: {
     type: Array,
     default: () => []
   },
   /**
-   * If true, accordion items stay open when another item is opened
+   * Used when options are objects: key to use for option label
    */
-  collapse: Boolean,
+  labelKey: { type: [String, Function], default: "label" },
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
+   * Used when options are objects: key to use for option label
    */
-  modifiers: [String, Array],
+  valueKey: { type: [String, Function], default: "value" },
   /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   * Used when options are objects: key to use for option disabled
    */
-  itemModifiers: {
-    type: [String, Array],
-    default: ""
-  },
+  disabledKey: { type: [String, Function], default: "disabled" }
+};
+const CountProps = {
   /**
-   * If true, the accordion items will be disabled
+   * Show character limit
    */
-  disabled: Boolean,
+  count: {
+    type: [Boolean, String],
+    default: false,
+    validator: (value) => [true, false, "limit", "countdown"].includes(value)
+  }
+};
+const DebounceProps = {
   /**
-   * If true, the accordion items will be opened by default
+   * Milliseconds to wait before emitting the input event
    */
-  not: Boolean,
+  debounce: [Number, String]
+};
+const IconProps = {
   /**
-   * Enable local storage persistence
+   * VvIcon name or props
+   * @see VVIcon
    */
-  storeKey: String
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
 };
-const VvAccordionGroupEvents = ["update:modelValue"];
-function useProvideGroupState(groupState) {
-  if (Object.keys(groupState).some(
-    (k) => k !== "key" && !isRef(groupState[k])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  provide(
-    groupState.key,
-    computed(() => groupState)
-  );
-}
-const __default__$l = {
-  name: "VvAccordionGroup"
-};
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
-  props: VvAccordionGroupProps,
-  emits: VvAccordionGroupEvents,
-  setup(__props, { emit }) {
-    const props = __props;
-    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
-    watchEffect(() => {
-      if (typeof props.modelValue === "string" && collapse.value) {
-        console.warn(
-          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
-        );
-      }
-    });
-    let localModelValue = ref([]);
-    watch(
-      () => props.storeKey,
-      (newKey) => {
-        if (newKey) {
-          localModelValue = useStorage(newKey, localModelValue.value);
-        } else {
-          localModelValue = ref([]);
-        }
-      },
-      { immediate: true }
-    );
-    const modelValue = computed({
-      get: () => {
-        var _a;
-        if (props.modelValue !== void 0) {
-          if (!collapse.value) {
-            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
-          }
-          return props.modelValue;
-        }
-        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
-      },
-      set: (newValue) => {
-        if (props.modelValue !== void 0) {
-          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
-            newValue = [newValue];
-          }
-          return emit("update:modelValue", newValue);
-        }
-        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
-      }
-    });
-    useProvideGroupState({
-      key: INJECTION_KEY_ACCORDION_GROUP,
-      modelValue,
-      disabled,
-      collapse,
-      modifiers: itemModifiers,
-      not
-    });
-    const bemCssClasses = useModifiers(
-      "vv-accordion-group",
-      modifiers,
-      computed(() => ({
-        disabled: disabled.value
-      }))
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$m, mergeProps({
-              key: item.title
-            }, {
-              name: item.name,
-              title: item.title,
-              content: item.content
-            }), {
-              header: withCtx((data) => [
-                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              details: withCtx((data) => [
-                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              _: 2
-            }, 1040);
-          }), 128))
-        ])
-      ], 2);
-    };
-  }
-});
-const LinkProps = {
-  /**
-   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-   */
-  to: {
-    type: [String, Object]
-  },
-  /**
-   * Anchor href
-   */
-  href: String,
-  /**
-   * Anchor target
-   */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
-const ValidProps = {
-  /**
-   * Valid status
-   */
-  valid: Boolean,
-  /**
-   * Valid label
-   */
-  validLabel: [String, Array]
-};
-const InvalidProps = {
-  /**
-   * Invalid status
-   */
-  invalid: Boolean,
-  /**
-   * Invalid label
-   */
-  invalidLabel: [String, Array]
-};
-const LoadingProps = {
-  /**
-   * Loading status
-   */
-  loading: Boolean,
-  /**
-   * Loading label
-   */
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
-  }
-};
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-};
-const SelectedProps = {
-  /**
-   * Whether the item is selected
-   */
-  selected: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
-};
-const ReadonlyProps = {
-  /**
-   * The value is not editable
-   */
-  readonly: Boolean
-};
-const ModifiersProps = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: [String, Array]
-};
-const HintProps = {
-  hintLabel: { type: String, default: "" }
-};
-const OptionsProps = {
-  /**
-   * List of options, can be string[] or object[]
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  labelKey: { type: [String, Function], default: "label" },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  valueKey: { type: [String, Function], default: "value" },
-  /**
-   * Used when options are objects: key to use for option disabled
-   */
-  disabledKey: { type: [String, Function], default: "disabled" }
-};
-const CountProps = {
-  /**
-   * Show character limit
-   */
-  count: {
-    type: [Boolean, String],
-    default: false,
-    validator: (value) => [true, false, "limit", "countdown"].includes(value)
-  }
-};
-const DebounceProps = {
-  /**
-   * Milliseconds to wait before emitting the input event
-   */
-  debounce: [Number, String]
-};
-const IconProps = {
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
-  /**
-   * VvIcon position
-   */
-  iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
-  }
-};
-const TabindexProps = {
-  /**
-   * Global attribute tabindex
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-   */
-  tabindex: { type: [String, Number], default: 0 }
+const TabindexProps = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
+  tabindex: { type: [String, Number], default: 0 }
 };
 const FloatingLabelProps = {
   /**
@@ -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
@@ -872,99 +392,579 @@ const InputTextareaProps = {
   ...HintProps,
   ...LoadingProps,
   ...ModifiersProps,
-  ...CountProps,
-  ...DebounceProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...LabelProps,
-  /**
-   * Input / Textarea minlength
-   * Minimum length (number of characters) of value
-   * Available for input types: text, search, url, tel, email, password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-   */
-  minlength: [String, Number],
-  /**
-   * Input / Textarea maxlength
-   * Maximum length (number of characters) of value
-   * Available for input types: text, search, url, tel, email, password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-   */
-  maxlength: [String, Number],
+  ...CountProps,
+  ...DebounceProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...LabelProps,
+  /**
+   * Input / Textarea minlength
+   * Minimum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
+  minlength: [String, Number],
+  /**
+   * Input / Textarea maxlength
+   * Maximum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
+  maxlength: [String, Number],
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder: String,
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
+  required: Boolean
+};
+const CheckboxRadioProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
+  ...LoadingProps,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
+  value: [String, Number, Boolean],
+  /**
+   * Input value
+   */
+  modelValue: [Object, Number, Boolean, String]
+};
+const CheckboxRadioGroupProps = {
+  ...ValidProps,
+  ...InvalidProps,
+  ...OptionsProps,
+  ...HintProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...LabelProps,
+  ...LoadingProps,
+  /**
+   * Input value
+   */
+  modelValue: [String, Array, Boolean, Number, Symbol],
+  /**
+   * Input name
+   */
+  name: { type: String, required: true },
+  /**
+   * If true, the group will be displayed in a vertical column
+   */
+  vertical: Boolean
+};
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+};
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
+}
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() == b.getTime();
+    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function findIndexInList(value, list) {
+  let index = -1;
+  if (list) {
+    for (let i = 0; i < list.length; i++) {
+      if (equals(list[i], value)) {
+        index = i;
+        break;
+      }
+    }
+  }
+  return index;
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+}
+function removeFromList(value, list) {
+  const indexElToRemove = findIndexInList(value, list);
+  if (indexElToRemove > -1) {
+    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
+  } else {
+    return list;
+  }
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
+        get() {
+          return groupPropValue == null ? void 0 : groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvAccordionProps = {
+  ...ModifiersProps,
+  /**
+   * Accordion name
+   */
+  name: String,
+  /**
+   * Header title
+   */
+  title: String,
+  /**
+   * Content text
+   */
+  content: String,
+  /**
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * If true, the accordion will be disabled
+   */
+  disabled: Boolean,
+  /**
+   * If true, the accordion will be opened by default
+   */
+  not: Boolean
+};
+const VvAccordionEvents = ["update:modelValue"];
+function useGroupProps$3(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
+    INJECTION_KEY_ACCORDION_GROUP
+  );
+  const { title, content } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const not = getGroupOrLocalRef("not", props);
+  const collapse = getGroupOrLocalRef("collapse", props);
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
+  });
+  return {
+    // group props
+    modelValue,
+    not,
+    isInGroup,
+    group,
+    collapse,
+    modifiers,
+    disabled,
+    // local props
+    title,
+    content
+  };
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const _hoisted_1$f = ["id", "open"];
+const _hoisted_2$c = ["aria-controls", "aria-expanded"];
+const _hoisted_3$6 = ["aria-hidden"];
+const __default__$m = {
+  name: "VvAccordion"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
+  props: VvAccordionProps,
+  emits: VvAccordionEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const accordionName = computed(
+      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
+    );
+    const {
+      modifiers,
+      title,
+      content,
+      disabled,
+      collapse,
+      modelValue,
+      isInGroup,
+      not
+    } = useGroupProps$3(props, emit);
+    const localModelValue = ref(false);
+    const isOpen = computed({
+      get: () => {
+        let toReturn = modelValue.value;
+        if (isInGroup.value) {
+          if (collapse.value && Array.isArray(modelValue.value)) {
+            toReturn = modelValue.value.includes(accordionName.value);
+          } else {
+            toReturn = modelValue.value === accordionName.value;
+          }
+        } else if (modelValue.value === void 0) {
+          toReturn = localModelValue.value;
+        }
+        return not.value ? !toReturn : toReturn;
+      },
+      set: (newValue) => {
+        if (not.value) {
+          newValue = !newValue;
+        }
+        if (isInGroup.value) {
+          if (collapse.value && Array.isArray(modelValue.value)) {
+            if (newValue) {
+              modelValue.value.push(accordionName.value);
+              return;
+            }
+            modelValue.value = modelValue.value.filter(
+              (name) => name !== accordionName.value
+            );
+            return;
+          }
+          modelValue.value = newValue ? accordionName.value : null;
+          return;
+        }
+        if (modelValue.value === void 0 && typeof newValue === "boolean") {
+          localModelValue.value = newValue;
+          return;
+        }
+        modelValue.value = newValue;
+      }
+    });
+    const bemCssClasses = useModifiers(
+      "vv-accordion",
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
+      }))
+    );
+    const onClick = useToggle(isOpen);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("details", {
+        id: unref(accordionName),
+        class: normalizeClass(unref(bemCssClasses)),
+        open: unref(isOpen)
+      }, [
+        createElementVNode("summary", {
+          "aria-controls": unref(accordionName),
+          "aria-expanded": unref(isOpen),
+          class: "vv-accordion__summary",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
+        }, [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(title)), 1)
+          ])
+        ], 8, _hoisted_2$c),
+        createElementVNode("div", {
+          "aria-hidden": !unref(isOpen),
+          class: "vv-accordion__content"
+        }, [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(content)), 1)
+          ])
+        ], 8, _hoisted_3$6)
+      ], 10, _hoisted_1$f);
+    };
+  }
+});
+const VvAccordionGroupProps = {
+  ...ModifiersProps,
   /**
-   * 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
+   * VModel
    */
-  placeholder: String,
+  modelValue: [String, Array],
   /**
-   * 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
+   * Accordion items
+   * @type VvAccordionGroupItem
    */
-  required: Boolean
-};
-const CheckboxRadioProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...LabelProps,
-  ...LoadingProps,
+  items: {
+    type: Array,
+    default: () => []
+  },
   /**
-   * Input value
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   * If true, accordion items stay open when another item is opened
    */
-  value: [String, Number, Boolean],
+  collapse: Boolean,
   /**
-   * Input value
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
    */
-  modelValue: [Object, Number, Boolean, String]
-};
-const CheckboxRadioGroupProps = {
-  ...ValidProps,
-  ...InvalidProps,
-  ...OptionsProps,
-  ...HintProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...LabelProps,
-  ...LoadingProps,
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
+  },
   /**
-   * Input value
+   * If true, the accordion items will be disabled
    */
-  modelValue: [String, Array, Boolean, Number, Symbol],
+  disabled: Boolean,
   /**
-   * Input name
+   * If true, the accordion items will be opened by default
    */
-  name: { type: String, required: true },
+  not: Boolean,
   /**
-   * If true, the group will be displayed in a vertical column
+   * Enable local storage persistence
    */
-  vertical: Boolean
+  storeKey: String
 };
-const ActionProps = {
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...LinkProps,
-  /**
-   * Button type
-   */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
-  }
+const VvAccordionGroupEvents = ["update:modelValue"];
+function useProvideGroupState(groupState) {
+  if (Object.keys(groupState).some(
+    (k) => k !== "key" && !isRef(groupState[k])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  provide(
+    groupState.key,
+    computed(() => groupState)
+  );
+}
+const __default__$l = {
+  name: "VvAccordionGroup"
 };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: VvAccordionGroupProps,
+  emits: VvAccordionGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    watchEffect(() => {
+      if (typeof props.modelValue === "string" && collapse.value) {
+        console.warn(
+          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
+        );
+      }
+    });
+    let localModelValue = ref([]);
+    watch(
+      () => props.storeKey,
+      (newKey) => {
+        if (newKey) {
+          localModelValue = useStorage(newKey, localModelValue.value);
+        } else {
+          localModelValue = ref([]);
+        }
+      },
+      { immediate: true }
+    );
+    const modelValue = computed({
+      get: () => {
+        var _a;
+        if (props.modelValue !== void 0) {
+          if (!collapse.value) {
+            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
+          }
+          return props.modelValue;
+        }
+        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
+      },
+      set: (newValue) => {
+        if (props.modelValue !== void 0) {
+          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
+            newValue = [newValue];
+          }
+          return emit("update:modelValue", newValue);
+        }
+        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
+      }
+    });
+    useProvideGroupState({
+      key: INJECTION_KEY_ACCORDION_GROUP,
+      modelValue,
+      disabled,
+      collapse,
+      modifiers: itemModifiers,
+      not
+    });
+    const bemCssClasses = useModifiers(
+      "vv-accordion-group",
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
+            return openBlock(), createBlock(_sfc_main$m, mergeProps({
+              key: item.title
+            }, {
+              name: item.name,
+              title: item.title,
+              content: item.content
+            }), {
+              header: withCtx((data) => [
+                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
+              ]),
+              details: withCtx((data) => [
+                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
+              ]),
+              _: 2
+            }, 1040);
+          }), 128))
+        ])
+      ], 2);
+    };
+  }
+});
 const VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
@@ -1261,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,
@@ -1300,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:
@@ -1484,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();
@@ -1506,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;
@@ -1682,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,
@@ -2316,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,
@@ -2358,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;
@@ -2399,7 +2400,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -2418,7 +2419,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     "afterExpand",
     "afterCollapse"
   ],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -2563,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(() => {
@@ -2579,7 +2580,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -2682,7 +2683,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
     });
     onKeyStroke([" ", "Enter"], (e) => {
-      if (expanded.value && focused.value) {
+      if (expanded.value && focused.value && e.target !== document.activeElement) {
         e.preventDefault();
         const activeElement = document.activeElement;
         activeElement.click();
@@ -2721,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,
@@ -2763,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) }]
@@ -2961,7 +2962,7 @@ const _hoisted_5$3 = ["id"];
 const _hoisted_6$3 = ["disabled", "hidden"];
 const _hoisted_7$3 = ["disabled", "value"];
 const _hoisted_8$2 = ["disabled", "label"];
-const _hoisted_9 = ["disabled", "value"];
+const _hoisted_9$1 = ["disabled", "value"];
 const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
@@ -3126,7 +3127,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                         key: `group-${index}-item-${i}`,
                         disabled: unref(getOptionDisabled)(item),
                         value: unref(getOptionValue)(item)
-                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9);
+                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
                     }), 128))
                   ], 8, _hoisted_8$2))
                 ], 64);
@@ -3242,8 +3243,12 @@ const _hoisted_4$2 = {
 };
 const _hoisted_5$2 = { class: "vv-select__inner" };
 const _hoisted_6$2 = ["aria-expanded", "aria-labelledby", "aria-describedby", "aria-errormessage", "tabindex"];
-const _hoisted_7$2 = ["aria-label", "onClick"];
-const _hoisted_8$1 = {
+const _hoisted_7$2 = {
+  key: 0,
+  class: "vv-select__value"
+};
+const _hoisted_8$1 = ["aria-label", "onClick"];
+const _hoisted_9 = {
   key: 1,
   class: "vv-select__input-after"
 };
@@ -3373,12 +3378,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         invalid: invalid.value,
         dirty: isDirty.value,
         focus: focused.value,
-        floating: floating.value
+        floating: floating.value,
+        badges: props.badges
       }))
     );
-    const hasOptions = computed(
-      () => props.searchable ? filteredOptions.value : props.options
-    );
     const {
       getOptionLabel,
       getOptionValue,
@@ -3422,11 +3425,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();
     };
@@ -3450,7 +3448,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           toReturn = [value];
         }
       } else {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           collapse();
         }
         if (props.unselectable && value === props.modelValue) {
@@ -3473,7 +3471,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       disabled: disabled.value,
       readonly: readonly.value,
       modifiers: props.modifiers,
-      options: hasOptions.value,
+      options: props.options,
       labelKey: props.labelKey,
       valueKey: props.valueKey,
       icon: props.icon,
@@ -3496,7 +3494,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
@@ -3506,16 +3503,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    onKeyStroke([" ", "Enter"], (e) => {
-      if (props.autoOpen) {
-        return;
-      }
-      if (!expanded.value && focused.value) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        toggleExpanded();
-      }
-    });
+    onKeyStroke(
+      [" ", "Enter"],
+      (e) => {
+        if (props.autoOpen) {
+          return;
+        }
+        if (!expanded.value && focused.value) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          toggleExpanded();
+        }
+      },
+      { target: inputEl }
+    );
     return (_ctx, _cache) => {
       return !_ctx.native ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -3564,9 +3565,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 }), [
                   renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
                     unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      !_ctx.badges ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString(unref(hasValue)), 1)
-                      ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
+                      !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
                         return openBlock(), createBlock(_sfc_main$k, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
@@ -3580,7 +3579,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
                               createVNode(_sfc_main$i, { name: "close" })
-                            ], 8, _hoisted_7$2)) : createCommentVNode("", true)
+                            ], 8, _hoisted_8$1)) : createCommentVNode("", true)
                           ]),
                           _: 2
                         }, 1032, ["modifiers"]);
@@ -3595,7 +3594,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
               ]),
-              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9, [
                 renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true)
             ]),
@@ -3777,9 +3776,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,
@@ -3797,8 +3796,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() {
@@ -3811,13 +3811,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(() => {
@@ -3829,16 +3827,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;
       }
     });
@@ -3848,7 +3848,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();
@@ -3858,7 +3858,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,
@@ -4397,12 +4401,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,