@volverjs/ui-vue 0.0.10-beta.9 → 0.0.10

package/dist/components/VvInputText/VvInputText.es.js

@@ -1,13 +1,86 @@
-import { unref, computed, isRef, defineComponent, h, inject, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, onMounted, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, createTextVNode, createVNode, createSlots, withCtx } from "vue";
+import { unref, computed, isRef, defineComponent, h, useId, Fragment, provide, ref, toRefs, useAttrs, onMounted, watch, createElementBlock, openBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, vShow, nextTick, inject, createBlock, createTextVNode, toDisplayString, mergeDefaults, useSlots, withModifiers, createSlots, renderList } from "vue";
 import { useIMask } from "vue-imask";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
-import { useFocus, useElementVisibility } from "@vueuse/core";
+import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
+import mitt from "mitt";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
+const padTwoDigits = (num) => num.toString().padStart(2, "0");
+function isDateIsoString(dateString) {
+  if (typeof dateString !== "string") {
+    return false;
+  }
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?(?:Z|[+-]\d{2}:?\d{2})?$/.test(dateString)) {
+    return false;
+  }
+  const d = new Date(dateString);
+  return !Number.isNaN(d.getTime()) && d.toISOString() === dateString;
+}
+function getInputValueFromDate(date, typeOfInput = "date", withSeconds) {
+  if (typeof date === "string") {
+    if (!isDateIsoString(date)) {
+      return "";
+    }
+  }
+  const currentDate = new Date(date);
+  if (Number.isNaN(currentDate.getTime())) {
+    return "";
+  }
+  let toReturn = `${currentDate.getFullYear()}-${padTwoDigits(currentDate.getMonth() + 1)}`;
+  if (typeOfInput === "month") {
+    return toReturn;
+  }
+  toReturn += `-${padTwoDigits(currentDate.getDate())}`;
+  if (typeOfInput === "date") {
+    return toReturn;
+  }
+  const time = withSeconds ? `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}:${padTwoDigits(currentDate.getSeconds())}` : `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}`;
+  if (typeOfInput === "time") {
+    return time;
+  }
+  return `${toReturn}T${time}`;
+}
+function getDateFromInputValue(value, typeOfInput = "date") {
+  if (!value?.trim()) {
+    return null;
+  }
+  const today = /* @__PURE__ */ new Date();
+  const currentYear = today.getFullYear();
+  const currentMonth = today.getMonth();
+  const currentDate = today.getDate();
+  if (typeOfInput === "date") {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      throw new Error("Invalid date format. Expected: YYYY-MM-DD");
+    }
+    return /* @__PURE__ */ new Date(`${value}T00:00:00`);
+  }
+  if (typeOfInput === "month") {
+    if (!/^\d{4}-\d{2}$/.test(value)) {
+      throw new Error("Invalid month format. Expected: YYYY-MM");
+    }
+    return /* @__PURE__ */ new Date(`${value}-01T00:00:00`);
+  }
+  if (typeOfInput === "time") {
+    if (!/^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/.test(value)) {
+      throw new Error("Invalid time format. Expected: HH:mm or HH:mm:ss");
+    }
+    if (value.length === 8) {
+      return /* @__PURE__ */ new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}`);
+    }
+    return /* @__PURE__ */ new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}:00`);
+  }
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/.test(value)) {
+    throw new Error("Invalid datetime format. Expected: YYYY-MM-DDThh:mm or YYYY-MM-DDThh:mm:ss");
+  }
+  if (value.length === 16) {
+    return /* @__PURE__ */ new Date(`${value}:00`);
+  }
+  return /* @__PURE__ */ new Date(`${value}`);
+}
 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 isString(value) {
-  return typeof value === "string" || value instanceof String;
+  return typeof value === "string";
 }
 function joinLines(items) {
   if (Array.isArray(items)) {
@@ -71,7 +144,6 @@ function HintSlotFactory(propsOrRef, slots) {
       };
     },
     render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (this.isVisible) {
         let role;
         if (this.hasInvalidLabelOrSlot) {
@@ -86,7 +158,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+            this.$slots.loading?.() ?? this.loadingLabel
           );
         }
         if (this.hasInvalidLabelOrSlot) {
@@ -95,7 +167,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+            this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
           );
         }
         if (this.hasValidLabelOrSlot) {
@@ -104,7 +176,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+            this.$slots.valid?.() ?? this.validLabel
           );
         }
         return h(
@@ -112,7 +184,7 @@ function HintSlotFactory(propsOrRef, slots) {
           {
             role
           },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+          this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
         );
       }
       return null;
@@ -127,100 +199,11 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  provider: {
-    type: String
-  },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
-  },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
-};
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -262,188 +245,76 @@ var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
   ActionTag2["button"] = "button";
   return ActionTag2;
 })(ActionTag || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
+var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
+  DropdownItemRole2["option"] = "option";
+  DropdownItemRole2["presentation"] = "presentation";
+  return DropdownItemRole2;
+})(DropdownItemRole || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-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 __default__$1 = {
-  name: "VvIcon"
+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 ACTION_ICONS = {
+  showPassword: "eye-on",
+  hidePassword: "eye-off",
+  showDatePicker: "calendar",
+  showTimePicker: "time",
+  showColorPicker: "color",
+  clear: "close",
+  remove: "trash"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  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);
-    const bemCssClasses = useModifiers("vv-icon", modifiers);
-    const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
-    });
-    const icon = computed(() => {
-      const name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
-        return iconName;
-      }
-      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;
-      if (typeof window === "undefined") {
-        const { JSDOM } = require("jsdom");
-        dom = new JSDOM().window;
-      }
-      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
-      const svgDomString = domParser.parseFromString(svg, "text/html");
-      const svgEl = svgDomString.querySelector("svg");
-      return svgEl;
-    }
-    function addIconFromSvg(svg) {
-      const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
-      if (svgContentEl && svgContent) {
-        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
-          body: svgContent,
-          // Set height and width from svg content
-          height: svgContentEl.viewBox.baseVal.height,
-          width: svgContentEl.viewBox.baseVal.width
-        });
-      }
-    }
-    if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
-        show.value = false;
-        volver.fetchIcon(props.src).then((svg) => {
-          if (svg) {
-            addIconFromSvg(svg);
-            show.value = true;
-          }
-        }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
-    }
-    return (_ctx, _cache) => {
-      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
-        key: 0,
-        class: unref(bemCssClasses)
-      }, {
-        inline: _ctx.inline,
-        width: _ctx.width,
-        height: _ctx.height,
-        horizontalFlip: _ctx.horizontalFlip,
-        verticalFlip: _ctx.verticalFlip,
-        flip: _ctx.flip,
-        rotate: unref(hasRotate),
-        color: _ctx.color,
-        onLoad: _ctx.onLoad,
-        icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-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 VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
 const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -456,43 +327,55 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
-const CurrentProps = {
+const RequiredProps = {
   /**
-   * Whether the item is current
+   * Whether the form control is required
    */
-  current: Boolean
+  required: {
+    type: Boolean,
+    default: false
+  }
 };
-const PressedProps = {
+const SelectedProps = {
   /**
-   * Whether the item is pressed
+   * Whether the item is selected
    */
-  pressed: Boolean
+  selected: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -511,14 +394,20 @@ const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
-  debounce: [Number, String]
+  debounce: {
+    type: [Number, String],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -539,7 +428,16 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
+};
+const UnselectableProps = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: true }
 };
 const IdProps = {
   /**
@@ -548,7 +446,7 @@ const IdProps = {
    */
   id: [String, Number]
 };
-({
+const DropdownProps = {
   /**
    * Dropdown placement
    */
@@ -569,7 +467,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -637,9 +536,10 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
-});
+};
 const IdNameProps = {
   ...IdProps,
   /**
@@ -654,7 +554,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -686,82 +589,857 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: [String, Number],
+  minlength: { type: [String, Number], default: void 0 },
   /**
    * 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],
+  maxlength: { type: [String, Number], default: void 0 },
   /**
    * Input / Textarea placeholder
    * Text that appears in the form control when it has no value set
    * Available for input types: text, search, url, tel, email, password, number
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
    */
-  placeholder: String,
+  placeholder: {
+    type: String,
+    default: void 0
+  },
   /**
    * 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
+  ...RequiredProps
 };
 ({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
   /**
    * Button type
    */
   type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
-  },
-  /**
-   * Button aria-label
-   */
-  ariaLabel: {
-    type: String,
-    default: void 0
+    default: ButtonType.button
   },
   /**
    * Default tag for the action
    */
   defaultTag: {
-    type: String,
     default: ActionTag.button
   }
 });
-const INPUT_TYPES = {
-  TEXT: "text",
-  PASSWORD: "password",
-  NUMBER: "number",
-  EMAIL: "email",
-  TEL: "tel",
-  URL: "url",
-  COLOR: "color",
-  SEARCH: "search",
+const StorageProps = {
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+};
+const VvDropdownProps = {
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+};
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
+  },
+  selectHintLabel: {
+    type: String
+  },
+  selectedHintLabel: {
+    type: String
+  },
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+function useUniqueId(id) {
+  return computed(() => String(id?.value || useId()));
+}
+function useDropdownProvideTrigger({
+  reference,
+  id,
+  expanded,
+  aria
+}) {
+  const bus = mitt();
+  const component = defineComponent({
+    name: "VvDropdownTriggerProvider",
+    setup() {
+      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+        reference,
+        id,
+        expanded,
+        aria,
+        bus
+      });
+    },
+    render() {
+      return h(Fragment, {}, this.$slots.default?.());
+    }
+  });
+  return {
+    bus,
+    component
+  };
+}
+function useDropdownProvideItem({
+  role,
+  ...others
+}) {
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
+  );
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    ...others
+  });
+  return { itemRole };
+}
+function useDropdownProvideAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ref(ActionRoles.menuitem),
+    expanded
+  });
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : 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$2 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$4 = {
+  name: "VvDropdown",
+  inheritAttrs: false
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  props: VvDropdownProps,
+  emits: [
+    "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse",
+    "before-enter",
+    "after-leave",
+    "enter",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
+    "leave",
+    "leaveCancelled"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { id } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const attrs = useAttrs();
+    const maxWidth = ref("auto");
+    const maxHeight = ref("auto");
+    const localReferenceEl = ref();
+    const floatingEl = ref();
+    const arrowEl = ref();
+    const listEl = ref();
+    const referenceEl = computed({
+      get: () => props.reference ?? localReferenceEl.value,
+      set: (newValue) => {
+        localReferenceEl.value = newValue;
+      }
+    });
+    const hasCustomPosition = ref(false);
+    onMounted(() => {
+      useMutationObserver(
+        floatingEl.value,
+        () => {
+          hasCustomPosition.value = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")?.trim() === "true";
+        },
+        {
+          attributeFilter: ["style"],
+          window
+        }
+      );
+    });
+    const middleware = computed(() => {
+      const toReturn = [];
+      if (props.autoPlacement) {
+        if (typeof props.autoPlacement === "boolean") {
+          toReturn.push(autoPlacement());
+        } else {
+          toReturn.push(
+            autoPlacement(props.autoPlacement)
+          );
+        }
+      } else if (props.flip) {
+        if (typeof props.flip === "boolean") {
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
+        } else {
+          toReturn.push(flip(props.flip));
+        }
+      }
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
+        }) => {
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
+        };
+        if (typeof props.size === "boolean") {
+          toReturn.push(
+            size({
+              apply
+            })
+          );
+        } else {
+          toReturn.push(
+            size({
+              ...props.size,
+              apply
+            })
+          );
+        }
+      }
+      if (props.offset) {
+        toReturn.push(offset(Number(props.offset)));
+        if (["string", "number"].includes(typeof props.offset)) {
+          toReturn.push(offset(Number(props.offset)));
+        } else {
+          toReturn.push(offset(props.offset));
+        }
+      }
+      if (props.arrow) {
+        toReturn.push(
+          arrow({
+            element: arrowEl
+          })
+        );
+      }
+      return toReturn;
+    });
+    const { x, y, middlewareData, placement, strategy } = useFloating(
+      referenceEl,
+      floatingEl,
+      {
+        whileElementsMounted: (...args) => {
+          return autoUpdate(...args, {
+            animationFrame: props.strategy === Strategy.fixed
+          });
+        },
+        placement: computed(() => props.placement),
+        strategy: computed(() => props.strategy),
+        middleware
+      }
+    );
+    const dropdownPlacement = computed(() => {
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const width = props.triggerWidth && referenceEl.value ? `${referenceEl.value?.offsetWidth}px` : void 0;
+      return {
+        position: strategy.value,
+        top: `${y.value ?? 0}px`,
+        left: `${x.value ?? 0}px`,
+        maxWidth: width ? void 0 : maxWidth.value,
+        maxHeight: maxHeight.value,
+        width
+      };
+    });
+    const side = computed(
+      () => placement.value.split("-")[0]
+    );
+    const arrowPlacement = computed(() => {
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const staticSide = {
+        [Side.top]: Side.bottom,
+        [Side.right]: Side.left,
+        [Side.bottom]: Side.top,
+        [Side.left]: Side.right
+      }[side.value];
+      return {
+        left: middlewareData.value.arrow?.x !== void 0 ? `${middlewareData.value.arrow?.x}px` : void 0,
+        top: middlewareData.value.arrow?.y !== void 0 ? `${middlewareData.value.arrow?.y}px` : void 0,
+        [staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`
+      };
+    });
+    const modelValue = useVModel(props, "modelValue", emit);
+    const localModelValue = ref(false);
+    const expanded = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
+        }
+        modelValue.value = newValue;
+      }
+    });
+    function show() {
+      expanded.value = true;
+    }
+    function hide() {
+      expanded.value = false;
+    }
+    function toggle() {
+      expanded.value = !expanded.value;
+    }
+    function init(el) {
+      referenceEl.value = el;
+    }
+    onClickOutside(
+      floatingEl,
+      () => {
+        if (!props.keepOpen && expanded.value) {
+          expanded.value = false;
+        }
+      },
+      { ignore: [referenceEl] }
+    );
+    const hasAriaLabelledby = computed(() => {
+      return referenceEl.value?.getAttribute?.("id") ?? void 0;
+    });
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
+    });
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown",
+      modifiers,
+      computed(() => ({
+        arrow: props.arrow
+      }))
+    );
+    const { focused } = useFocusWithin(floatingEl);
+    function getKeyboardFocusableElements(element) {
+      if (!element) {
+        return [];
+      }
+      return [
+        ...element.querySelectorAll(
+          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
+    }
+    function focusFirst() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          floatingEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
+    function focusFirstListElement() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          listEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
+    function focusNext() {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[0].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    }
+    function focusPrev() {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[focusableElements.length - 1].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    }
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        focusFirst();
+      }
+    });
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      focusFirst,
+      focusFirstListElement,
+      focusNext,
+      focusPrev,
+      customPosition: hasCustomPosition
+    });
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useDropdownProvideItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
+    onKeyStroke("Escape", (e) => {
+      if (expanded.value) {
+        e.preventDefault();
+        hide();
+      }
+    });
+    onKeyStroke("ArrowDown", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusNext();
+      }
+    });
+    onKeyStroke("ArrowUp", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusPrev();
+      }
+    });
+    onKeyStroke([" ", "Enter"], (e) => {
+      const htmlEl = e.target;
+      if (expanded.value && focused.value && htmlEl) {
+        htmlEl?.click();
+      }
+    });
+    const dropdownTransitionHandlers = {
+      "before-enter": () => {
+        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+        emit("beforeEnter");
+      },
+      "after-leave": () => {
+        emit(expanded.value ? "afterExpand" : "afterCollapse");
+        emit("afterLeave");
+      },
+      "enter": () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("afterEnter");
+      },
+      "enter-cancelled": () => {
+        emit("enterCancelled");
+      },
+      "before-leave": () => {
+        emit("beforeLeave");
+      },
+      "leave": () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leaveCancelled");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1$2),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+const __default__$3 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: VvDropdownItemProps,
+  setup(__props) {
+    const props = __props;
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useDropdownProvideAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue && props.focusOnHover) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+const _hoisted_1$1 = ["title"];
+const __default__$2 = {
+  name: "VvDropdownOption"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvDropdownOptionProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown-option",
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
+      }))
+    );
+    const hintLabel = computed(() => {
+      if (props.selected) {
+        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
+      }
+      if (!props.disabled) {
+        return props.selectHintLabel;
+      }
+      return "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$3, {
+        class: normalizeClass(unref(bemCssClasses)),
+        tabindex: _ctx.disabled ? -1 : 0,
+        "aria-selected": _ctx.selected,
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("span", {
+            class: "vv-dropdown-option__hint",
+            title: unref(hintLabel)
+          }, [
+            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
+            ])
+          ], 8, _hoisted_1$1)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
+    };
+  }
+});
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER, void 0);
+}
+const __default__$1 = {
+  name: "VvIcon"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return Number.parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || volver?.iconsProvider;
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconLoaded(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver?.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconLoaded(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = svgContentEl?.innerHTML.trim() || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e?.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        icon: unref(icon)
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+const INPUT_TYPES = {
+  TEXT: "text",
+  PASSWORD: "password",
+  NUMBER: "number",
+  EMAIL: "email",
+  TEL: "tel",
+  URL: "url",
+  COLOR: "color",
+  SEARCH: "search",
   DATE: "date",
   TIME: "time",
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
 };
-const TYPES_ICON = {
-  PASSWORD_SHOW: "eye-on",
-  PASSWORD_HIDE: "eye-off",
-  DATE: "calendar",
-  TIME: "time",
-  COLOR: "color",
-  SEARCH: "close"
-};
 const VvInputTextEvents = [
   "update:modelValue",
   "update:masked",
@@ -773,19 +1451,23 @@ const VvInputTextEvents = [
   "complete:typed",
   "complete:masked",
   "complete:unmasked",
+  "suggestion:selected",
+  "suggestion:removed",
   "focus",
   "blur",
   "keyup",
   "keydown",
-  "keypress"
+  "keypress",
+  "clear"
 ];
 const VvInputTextProps = {
   ...InputTextareaProps,
+  ...StorageProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
    */
-  modelValue: [String, Number],
+  modelValue: [String, Number, Date],
   /**
    * Type of form control
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
@@ -827,27 +1509,35 @@ const VvInputTextProps = {
   multiple: Boolean,
   /**
    * VvIcon name for show password button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconShowPassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_SHOW
+    type: [String, Object],
+    default: ACTION_ICONS.showPassword
   },
   /**
    * VvIcon name for hide password button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconHidePassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_HIDE
+    type: [String, Object],
+    default: ACTION_ICONS.hidePassword
   },
   /**
    * VvIcon name for clear button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconClear: {
-    type: String,
-    default: TYPES_ICON.SEARCH
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * VvIcon name for remove suggestion button
+   * @see VvIcon
+   */
+  iconRemoveSuggestion: {
+    type: [String, Object],
+    default: ACTION_ICONS.remove
   },
   /**
    * Label for step up button
@@ -884,6 +1574,13 @@ const VvInputTextProps = {
     type: String,
     default: "Clear"
   },
+  /**
+   * Label for remove suggestion button
+   */
+  labelRemoveSuggestion: {
+    type: String,
+    default: "Remove suggestion"
+  },
   /**
    * iMask options
    * @see https://imask.js.org/guide.html
@@ -906,32 +1603,140 @@ const VvInputTextProps = {
     type: Boolean,
     default: false
   },
-  /**
-   * Hide type number, password and search actions
-   */
-  hideActions: {
-    type: Boolean,
-    default: false
+  /**
+   * Hide type number, password and search actions
+   */
+  hideActions: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Add unit label to input
+   */
+  unit: {
+    type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Maximum number of suggestions
+   */
+  maxSuggestions: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * The input mode to use for the input
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   */
+  inputMode: {
+    type: String,
+    default: "text"
+  }
+};
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof icon?.value === "string") {
+      return { name: icon?.value };
+    }
+    return icon?.value;
+  });
+  const hasIconBefore = computed(
+    () => iconPosition?.value === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => iconPosition?.value === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => iconPosition?.value === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => iconPosition?.value === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => iconPosition?.value === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
+  },
+  props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: [String, Object],
+      default: "close"
+    }
   },
-  /**
-   * Add unit label to input
-   */
-  unit: {
-    type: String
+  emits: ["clear"],
+  setup(props, { emit }) {
+    const { hasIcon } = useComponentIcon(computed(() => props.icon));
+    function onClick(e) {
+      e?.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
+    }
+    return {
+      hasIcon,
+      onClick
+    };
   },
-  /**
-   * Select input text on focus
-   */
-  selectOnFocus: {
-    type: Boolean,
-    default: false
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: `vv-${this.inputType}__icon`
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: `vv-${this.inputType}__action`,
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
   }
-};
+});
 const VvInputPasswordAction = defineComponent({
   components: {
     VvIcon: _sfc_main$1
   },
   props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -945,12 +1750,12 @@ const VvInputPasswordAction = defineComponent({
       default: "Hide password"
     },
     iconShow: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_SHOW
+      type: [String, Object],
+      default: ACTION_ICONS.showPassword
     },
     iconHide: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_HIDE
+      type: [String, Object],
+      default: ACTION_ICONS.hidePassword
     }
   },
   emits: ["toggle-password"],
@@ -959,8 +1764,9 @@ const VvInputPasswordAction = defineComponent({
     const activeIcon = computed(
       () => active.value ? props.iconHide : props.iconShow
     );
+    const { hasIcon } = useComponentIcon(activeIcon);
     function onClick(e) {
-      e == null ? void 0 : e.stopPropagation();
+      e?.stopPropagation();
       if (!props.disabled) {
         active.value = !active.value;
         emit("toggle-password", active.value);
@@ -969,19 +1775,20 @@ const VvInputPasswordAction = defineComponent({
     return {
       active,
       activeIcon,
+      hasIcon,
       onClick
     };
   },
   render() {
-    const icon = h(_sfc_main$1, {
-      name: this.activeIcon,
-      class: "vv-input-text__icon"
-    });
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: `vv-${this.inputType}__icon`
+    }) : void 0;
     return h(
       "button",
       {
         disabled: this.disabled,
-        class: "vv-input-text__action",
+        class: `vv-${this.inputType}__action`,
         ariaLabel: this.active ? this.labelHide : this.labelShow,
         type: "button",
         onClick: this.onClick
@@ -995,6 +1802,10 @@ const VvInputStepAction = defineComponent({
     VvIcon: _sfc_main$1
   },
   props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -1012,7 +1823,7 @@ const VvInputStepAction = defineComponent({
   setup(props, { emit }) {
     const isUp = computed(() => props.mode === "up");
     const onClick = (e) => {
-      e == null ? void 0 : e.stopPropagation();
+      e?.stopPropagation();
       if (!props.disabled) {
         emit(isUp.value ? "step-up" : "step-down");
       }
@@ -1025,8 +1836,9 @@ const VvInputStepAction = defineComponent({
   render() {
     return h("button", {
       class: [
-        "vv-input-text__action vv-input-text__action-chevron",
-        this.isUp && "vv-input-text__action-chevron-up"
+        `vv-${this.inputType}__action`,
+        `vv-${this.inputType}__action-chevron`,
+        this.isUp ? `vv-${this.inputType}__action-chevron-up` : void 0
       ],
       disabled: this.disabled,
       ariaLabel: this.label,
@@ -1035,55 +1847,7 @@ const VvInputStepAction = defineComponent({
     });
   }
 });
-const VvInputClearAction = defineComponent({
-  components: {
-    VvIcon: _sfc_main$1
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: "Clear"
-    },
-    icon: {
-      type: String,
-      default: "close"
-    }
-  },
-  emits: ["clear"],
-  setup(props, { emit }) {
-    function onClick(e) {
-      e == null ? void 0 : e.stopPropagation();
-      if (!props.disabled) {
-        emit("clear");
-      }
-    }
-    return {
-      onClick
-    };
-  },
-  render() {
-    const icon = h(_sfc_main$1, {
-      name: this.icon,
-      class: "vv-input-text__icon"
-    });
-    return h(
-      "button",
-      {
-        disabled: this.disabled,
-        class: "vv-input-text__action",
-        ariaLabel: this.label,
-        type: "button",
-        onClick: this.onClick
-      },
-      icon
-    );
-  }
-});
-function VvInputTextActionsFactory(type, parentProps) {
+function VvInputTextActionsFactory(type, parentProps, isDirty) {
   return {
     name: "VvInputTextActions",
     components: {
@@ -1097,6 +1861,7 @@ function VvInputTextActionsFactory(type, parentProps) {
         return parentProps.disabled || parentProps.readonly;
       });
       return {
+        isDirty,
         isDisabled,
         labelStepUp: parentProps.labelStepUp,
         labelStepDown: parentProps.labelStepDown,
@@ -1114,8 +1879,8 @@ function VvInputTextActionsFactory(type, parentProps) {
           const { onClear } = this.$attrs;
           actions = [
             h(VvInputClearAction, {
-              disabled: this.isDisabled,
-              label: this.labelShowPassword,
+              disabled: this.isDisabled || !this.isDirty,
+              label: this.labelClear,
               onClear
             })
           ];
@@ -1163,8 +1928,7 @@ function VvInputTextActionsFactory(type, parentProps) {
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
-    var _a;
-    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+    if (!volver || !volver.defaults.value?.[componentName]) {
       return void 0;
     }
     return volver.defaults.value[componentName];
@@ -1213,17 +1977,16 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 function useDebouncedInput(modelValue, emit, ms = 0, {
   getter = (value) => value,
   setter = (value) => value
 } = {}) {
   let timeout;
   if (typeof ms === "string") {
-    ms = parseInt(ms);
+    ms = Number.parseInt(ms);
   }
   return computed({
-    get: () => getter(modelValue == null ? void 0 : modelValue.value),
+    get: () => getter(modelValue?.value),
     set: (value) => {
       if (timeout) {
         clearTimeout(timeout);
@@ -1243,62 +2006,27 @@ function useComponentFocus(inputTemplateRef, emit) {
     focused
   };
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIconBefore = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
-  );
-  const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
-  );
-  const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
-  );
-  const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
-  );
-  const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
-  );
-  const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
-  );
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
 function useTextCount(text, options) {
   const length = computed(() => {
     return (unref(text) ?? "").length;
   });
   const gap = computed(() => {
-    if ((options == null ? void 0 : options.lowerLimit) !== void 0 && length.value < (options == null ? void 0 : options.lowerLimit)) {
+    if (options?.lowerLimit !== void 0 && length.value < options?.lowerLimit) {
       return length.value - options.lowerLimit;
     }
-    if ((options == null ? void 0 : options.upperLimit) !== void 0 && length.value < (options == null ? void 0 : options.upperLimit)) {
+    if (options?.upperLimit !== void 0 && length.value < options?.upperLimit) {
       return options.upperLimit - length.value;
     }
     return 0;
   });
   const formatted = computed(() => {
-    if ((options == null ? void 0 : options.mode) === false) {
+    if (options?.mode === false) {
       return "";
     }
-    if ((options == null ? void 0 : options.mode) === "limit" && (options == null ? void 0 : options.upperLimit)) {
+    if (options?.mode === "limit" && options?.upperLimit) {
       return `${length.value} / ${options.lowerLimit ? `${options.lowerLimit}-` : ""}${options.upperLimit}`;
     }
-    if ((options == null ? void 0 : options.mode) === "countdown") {
+    if (options?.mode === "countdown") {
       if (gap.value === 0) {
         return void 0;
       }
@@ -1312,26 +2040,88 @@ function useTextCount(text, options) {
     formatted
   };
 }
+function usePersistence(storageKey, storageType = StorageType.local, defaultValue) {
+  const localValue = ref();
+  if (defaultValue) {
+    localValue.value = defaultValue;
+  }
+  let storageValue;
+  onMounted(() => {
+    if (storageKey) {
+      watch(
+        storageKey,
+        (newKey, oldKey) => {
+          const storage = unref(storageType) === StorageType.session ? sessionStorage : localStorage;
+          if (oldKey && oldKey !== newKey) {
+            storage.removeItem(oldKey);
+          }
+          if (newKey) {
+            storageValue = useStorage(
+              newKey,
+              storageValue?.value ?? localValue.value,
+              storage
+            );
+            if (storageValue.value) {
+              localValue.value = storageValue.value;
+            }
+            return;
+          }
+          storageValue = void 0;
+        },
+        {
+          immediate: true
+        }
+      );
+    }
+    if (isRef(storageType)) {
+      watch(storageType, (newType, oldType) => {
+        if (storageKey?.value) {
+          if (newType) {
+            const storage = newType === StorageType.session ? sessionStorage : localStorage;
+            storageValue = useStorage(
+              storageKey.value,
+              storageValue?.value ?? localValue.value,
+              storage
+            );
+          }
+          if (oldType && oldType !== newType) {
+            const oldStorage = oldType === StorageType.session ? sessionStorage : localStorage;
+            oldStorage.removeItem(storageKey.value);
+          }
+        }
+      });
+    }
+  });
+  watch(localValue, (newValue) => {
+    if (storageValue) {
+      storageValue.value = newValue;
+    }
+  }, {
+    deep: true,
+    immediate: true
+  });
+  return localValue;
+}
 const _hoisted_1 = ["for"];
-const _hoisted_2 = { class: "vv-input-text__wrapper" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "vv-input-text__input-before"
 };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = ["id"];
-const _hoisted_6 = {
+const _hoisted_3 = ["id"];
+const _hoisted_4 = {
   key: 1,
   class: "vv-input-text__unit"
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   key: 5,
   class: "vv-input-text__input-after"
 };
-const _hoisted_8 = {
+const _hoisted_6 = {
   key: 6,
   class: "vv-input-text__limit"
 };
+const _hoisted_7 = { class: "flex-1" };
+const _hoisted_8 = ["title", "onClick"];
 const __default__ = {
   name: "VvInputText"
 };
@@ -1339,41 +2129,74 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
+    const volver = useVolver();
     const propsDefaults = useDefaults(
       "VvInputText",
       VvInputTextProps,
       props
     );
     const {
-      id,
+      count,
+      debounce,
       icon,
       iconPosition,
-      label,
-      modelValue,
-      count,
-      valid,
+      iconRemoveSuggestion,
+      id,
       invalid,
+      label,
       loading,
-      debounce,
       maxlength,
       minlength,
+      modelValue,
+      step,
+      storageType,
       type,
-      iMask,
-      step
+      valid
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const inputTextPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
+    const localModelValue = useDebouncedInput(
+      modelValue,
+      emit,
+      debounce?.value ?? 0
+    );
+    const hasSeconds = computed(() => {
+      const stepValue = typeof step.value === "number" ? step.value : Number.parseInt(step.value);
+      if (Number.isNaN(stepValue)) {
+        return false;
+      }
+      return stepValue % 60 !== 0;
+    });
+    const NEGATIVE_ZERO_REGEX = /^-0?[.,]?[0*]?$/;
     const maskReady = ref(false);
+    const modelValueDate = ref();
+    const modelValueDateIsoString = ref();
     const { el, mask, typed, masked, unmasked } = useIMask(
       computed(
-        () => (iMask == null ? void 0 : iMask.value) ?? {
-          mask: /./
+        () => {
+          if (!props.iMask) {
+            return {
+              mask: /./
+            };
+          }
+          if (props.iMask.mask === Number) {
+            const toReturn = { ...props.iMask };
+            if (props.min) {
+              toReturn.min = Number(props.min);
+            }
+            if (props.max) {
+              toReturn.max = Number(props.max);
+            }
+            return toReturn;
+          }
+          return props.iMask;
         }
       ),
       {
@@ -1384,13 +2207,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
           emit("update:masked", masked.value);
           if (type.value === INPUT_TYPES.NUMBER) {
-            if (masked.value === "") {
+            if (/^-$|^$/.test(unmasked.value)) {
               if (localModelValue.value === null || localModelValue.value === void 0) {
                 return;
               }
               localModelValue.value = void 0;
               return;
             }
+            if (NEGATIVE_ZERO_REGEX.test(unmasked.value)) {
+              localModelValue.value = 0;
+              return;
+            }
             if (typeof typed.value !== "number") {
               localModelValue.value = Number(typed.value);
               return;
@@ -1398,42 +2225,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             localModelValue.value = typed.value;
             return;
           }
-          if (type.value === INPUT_TYPES.DATE) {
-            if (el.value instanceof HTMLInputElement && el.value.type === "date") {
-              localModelValue.value = el.value.value;
-              return;
-            }
-            let date = typed.value;
-            if (date === null || date === "") {
+          if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.TIME || type.value === INPUT_TYPES.MONTH) {
+            if (!typed.value) {
               if (!localModelValue.value) {
                 return;
               }
+              if (modelValueDate.value) {
+                localModelValue.value = void 0;
+                return;
+              }
               localModelValue.value = "";
               return;
             }
-            if (!(date instanceof Date)) {
-              date = new Date(date);
-            }
-            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
-            return;
-          }
-          if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
-            if (el.value instanceof HTMLInputElement && el.value.type === "datetime-local") {
-              localModelValue.value = el.value.value;
+            if (!(typed.value instanceof Date) && !modelValueDate.value && !modelValueDateIsoString.value) {
+              localModelValue.value = typed.value;
               return;
             }
             let date = typed.value;
-            if (date === null || date === "") {
-              if (!localModelValue.value) {
+            if (!(date instanceof Date)) {
+              date = getDateFromInputValue(typed.value, type.value);
+            }
+            if (modelValueDate.value || modelValueDateIsoString.value) {
+              const toReturn = new Date(modelValueDate.value || modelValueDateIsoString.value);
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.MONTH) {
+                toReturn.setFullYear(date.getFullYear());
+                toReturn.setMonth(date.getMonth());
+              }
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE) {
+                toReturn.setDate(date.getDate());
+              }
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.TIME) {
+                toReturn.setHours(date.getHours());
+                toReturn.setMinutes(date.getMinutes());
+                toReturn.setSeconds(date.getSeconds());
+              }
+              if (modelValueDate.value instanceof Date) {
+                if (localModelValue.value?.getTime() === toReturn.getTime()) {
+                  return;
+                }
+                localModelValue.value = toReturn;
                 return;
               }
-              localModelValue.value = "";
+              localModelValue.value = toReturn.toISOString();
               return;
             }
-            if (!(typed.value instanceof Date)) {
-              date = new Date(date);
-            }
-            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}T${("0" + date.getHours()).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}`;
+            localModelValue.value = getInputValueFromDate(date, type.value, hasSeconds.value);
             return;
           }
           if (!localModelValue.value && !unmasked.value) {
@@ -1443,18 +2279,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    function updateMaskValue(newValue) {
+      if (newValue === void 0 || newValue === null) {
+        typed.value = "";
+        unmasked.value = "";
+        return;
+      }
+      if (props.iMask?.mask === Date) {
+        typed.value = newValue instanceof Date ? newValue : new Date(newValue);
+        return;
+      }
+      if (type.value === INPUT_TYPES.NUMBER && NEGATIVE_ZERO_REGEX.test(unmasked.value) && newValue === 0) {
+        return;
+      }
+      if (type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.MONTH || type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.TIME) {
+        if (newValue instanceof Date || isDateIsoString(newValue)) {
+          if (newValue instanceof Date) {
+            modelValueDate.value = newValue;
+            modelValueDateIsoString.value = void 0;
+          } else {
+            modelValueDateIsoString.value = newValue;
+            modelValueDate.value = void 0;
+          }
+          const newDate = new Date(newValue);
+          typed.value = getInputValueFromDate(newDate, type.value, hasSeconds.value);
+          unmasked.value = typed.value;
+          return;
+        }
+        modelValueDate.value = void 0;
+        modelValueDateIsoString.value = void 0;
+      }
+      typed.value = newValue;
+      unmasked.value = `${typed.value}`;
+    }
     onMounted(() => {
       if (mask.value) {
         maskReady.value = true;
-        typed.value = localModelValue.value ?? "";
+        updateMaskValue(props.modelValue);
       }
     });
     watch(
       () => props.modelValue,
       (newValue) => {
-        var _a;
         if (mask.value) {
-          typed.value = newValue && ((_a = iMask == null ? void 0 : iMask.value) == null ? void 0 : _a.mask) === Date ? new Date(newValue) : newValue ?? "";
+          updateMaskValue(newValue);
         }
       }
     );
@@ -1466,12 +2334,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const inputEl = el;
     const innerEl = ref();
+    const wrapperEl = ref();
+    const suggestionsDropdownEl = ref();
     __expose({ $inner: innerEl });
-    const localModelValue = useDebouncedInput(
-      modelValue,
-      emit,
-      (debounce == null ? void 0 : debounce.value) ?? 0
-    );
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
       () => focused.value && !props.disabled && !props.readonly
@@ -1480,6 +2345,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
         inputEl.value.select();
       }
+      if (newValue && suggestions.value?.size) {
+        suggestionsDropdownEl.value?.show();
+        return;
+      }
+      if (isDirty.value && suggestions.value) {
+        const suggestionsLimit = props.maxSuggestions;
+        if (suggestions.value.size >= suggestionsLimit && !suggestions.value.has(localModelValue.value)) {
+          suggestions.value = new Set(
+            [...suggestions.value].slice(
+              suggestions.value.size - suggestionsLimit + 1
+            )
+          );
+        }
+        suggestions.value.add(localModelValue.value);
+      }
     });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
@@ -1489,65 +2369,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const showPassword = ref(false);
     const isPassword = computed(() => props.type === INPUT_TYPES.PASSWORD);
-    const onTogglePassword = () => {
+    function onTogglePassword() {
       showPassword.value = !showPassword.value;
-    };
+    }
     const isDateTime = computed(
       () => props.type === INPUT_TYPES.TIME || props.type === INPUT_TYPES.DATETIME_LOCAL || props.type === INPUT_TYPES.DATE || props.type === INPUT_TYPES.WEEK || props.type === INPUT_TYPES.MONTH
     );
     const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER);
-    const onStepUp = () => {
-      if (isClickable.value) {
-        if (iMask == null ? void 0 : iMask.value) {
-          typed.value = typed.value + Number((step == null ? void 0 : step.value) ?? 1);
+    function onStepUp() {
+      if (!isDisabledOrReadonly.value) {
+        if (props.iMask) {
+          typed.value = Number(typed.value) + Number(step?.value ?? 1);
           return;
         }
         inputEl.value.stepUp();
         localModelValue.value = Number(unref(inputEl).value);
       }
-    };
-    const onStepDown = () => {
-      if (isClickable.value) {
-        if (iMask == null ? void 0 : iMask.value) {
-          typed.value = typed.value - Number((step == null ? void 0 : step.value) ?? 1);
+    }
+    function onStepDown() {
+      if (!isDisabledOrReadonly.value) {
+        if (props.iMask) {
+          typed.value = Number(typed.value) - Number(step?.value ?? 1);
           return;
         }
         inputEl.value.stepDown();
         localModelValue.value = Number(unref(inputEl).value);
       }
-    };
+    }
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
-    const onClear = () => {
+    function onClear() {
       localModelValue.value = "";
-    };
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const defaultAfterIcon = computed(() => {
+      emit("clear");
+    }
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const iconAfter = computed(() => {
+      if (hasIconAfter.value !== void 0) {
+        return hasIconAfter.value;
+      }
       switch (props.type) {
         case INPUT_TYPES.COLOR:
-          return { name: TYPES_ICON.COLOR };
+          return { name: ACTION_ICONS.showColorPicker };
         case INPUT_TYPES.DATE:
         case INPUT_TYPES.DATETIME_LOCAL:
         case INPUT_TYPES.WEEK:
         case INPUT_TYPES.MONTH:
-          return { name: TYPES_ICON.DATE };
+          return { name: ACTION_ICONS.showDatePicker };
         case INPUT_TYPES.TIME:
-          return { name: TYPES_ICON.TIME };
-        default:
-          return "";
+          return { name: ACTION_ICONS.showTimePicker };
       }
+      return void 0;
     });
+    const { hasIcon: hasIconRemoveSuggestion } = useComponentIcon(iconRemoveSuggestion);
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: count.value,
-      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
-      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
+      upperLimit: Number(maxlength?.value),
+      lowerLimit: Number(minlength?.value)
+    });
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
     });
-    const isClickable = computed(() => !props.disabled && !props.readonly);
-    const hasTabindex = computed(
-      () => isClickable.value ? props.tabindex : -1
-    );
     const isDirty = computed(() => !isEmpty(modelValue));
     const isInvalid = computed(() => {
       if (invalid.value === true) {
@@ -1558,21 +2439,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return void 0;
     });
+    const storageKey = computed(() => props.storageKey ?? (volver?.experimentalFeatures.forceInputSuggestions ? props.name : void 0));
+    const suggestions = usePersistence(
+      storageKey,
+      storageType,
+      /* @__PURE__ */ new Set()
+    );
+    const filteredSuggestions = computed(() => {
+      if (!suggestions.value) {
+        return [];
+      }
+      return [...suggestions.value].filter(
+        (suggestion) => isEmpty(localModelValue.value) || `${suggestion}`.toLowerCase().includes(`${localModelValue.value}`.toLowerCase()) && suggestion !== localModelValue.value
+      ).reverse();
+    });
+    const hasSuggestions = computed(
+      () => storageKey?.value && suggestions.value && suggestions.value.size > 0
+    );
+    function onSuggestionSelect(suggestion) {
+      localModelValue.value = suggestion;
+      suggestionsDropdownEl.value?.hide();
+      emit("suggestion:selected", suggestion);
+    }
+    function onSuggestionRemove(suggestion) {
+      suggestions.value?.delete(suggestion);
+      emit("suggestion:removed", suggestion);
+    }
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers(
       "vv-input-text",
       modifiers,
       computed(() => ({
-        valid: valid.value,
-        invalid: invalid.value,
-        loading: loading.value,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value || !isEmpty(defaultAfterIcon),
-        floating: props.floating && !isEmpty(props.label),
-        dirty: isDirty.value,
-        focus: isFocused.value,
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "loading": loading.value,
+        "disabled": props.disabled,
+        "required": props.required,
+        "readonly": props.readonly,
+        "icon-before": !!hasIconBefore.value,
+        "icon-after": !!iconAfter.value,
+        "floating": props.floating && !isEmpty(props.label),
+        "dirty": isDirty.value,
+        "focus": isFocused.value && !isDisabledOrReadonly.value,
         "auto-width": props.autoWidth
       }))
     );
@@ -1584,26 +2492,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (isDateTime.value && !isDirty.value && !focused.value) {
           return INPUT_TYPES.TEXT;
         }
-        if (iMask == null ? void 0 : iMask.value) {
+        if (props.iMask) {
           return INPUT_TYPES.TEXT;
         }
         return props.type;
       })();
       const toReturn = {
         type: type2,
-        name: props.name,
-        tabindex: hasTabindex.value,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        required: props.required,
-        autocomplete: props.autocomplete,
+        "name": props.name,
+        "tabindex": hasTabindex.value,
+        "disabled": props.disabled,
+        "readonly": props.readonly,
+        "required": props.required,
+        "autocomplete": props.autocomplete,
         "aria-invalid": isInvalid.value,
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
-        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0,
+        "inputMode": props.inputMode
       };
       if (type2 === INPUT_TYPES.DATE || type2 === INPUT_TYPES.MONTH || type2 === INPUT_TYPES.WEEK || type2 === INPUT_TYPES.TIME || type2 === INPUT_TYPES.DATETIME_LOCAL || type2 === INPUT_TYPES.NUMBER) {
+        let max = props.max;
+        if (type2 === INPUT_TYPES.DATE && !max) {
+          max = "9999-12-31";
+        }
         toReturn.step = props.step;
-        toReturn.max = props.max !== void 0 ? String(props.max) : void 0;
+        toReturn.max = max !== void 0 ? String(max) : void 0;
         toReturn.min = props.min !== void 0 ? String(props.min) : void 0;
       }
       if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD || type2 === INPUT_TYPES.NUMBER) {
@@ -1636,21 +2549,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = HintSlotFactory(propsDefaults, slots);
     const PasswordInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.PASSWORD,
-      props
+      props,
+      isDirty
     );
     const NumberInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.NUMBER,
-      props
+      props,
+      isDirty
     );
     const SearchInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.SEARCH,
-      props
+      props,
+      isDirty
     );
-    const onClickInner = () => {
-      if (isClickable.value) {
+    function onClickInner() {
+      if (!isDisabledOrReadonly.value) {
         focused.value = true;
       }
-    };
+    }
     const hasStyle = computed(() => {
       if (!props.autoWidth) {
         return void 0;
@@ -1659,7 +2575,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         width: localModelValue.value !== void 0 ? `${String(localModelValue.value).length + 1}ch` : void 0
       };
     });
-    const onKeyDown = (event) => {
+    function onKeyDown(event) {
       switch (event.code) {
         case "ArrowUp":
           if (isNumber.value) {
@@ -1675,7 +2591,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           break;
       }
       emit("keydown", event);
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1688,79 +2604,89 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             for: unref(hasId),
             class: "vv-input-text__label"
           }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2, [
-            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              ref_key: "innerEl",
-              ref: innerEl,
-              class: "vv-input-text__inner",
-              onClick: withModifiers(onClickInner, ["stop"])
-            }, [
-              unref(hasIconBefore) ? (openBlock(), createBlock(
+          createElementVNode(
+            "div",
+            {
+              ref_key: "wrapperEl",
+              ref: wrapperEl,
+              class: "vv-input-text__wrapper"
+            },
+            [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  ref_key: "innerEl",
+                  ref: innerEl,
+                  class: "vv-input-text__inner",
+                  onClick: withModifiers(onClickInner, ["stop"])
+                },
+                [
+                  unref(hasIconBefore) ? (openBlock(), createBlock(
+                    _sfc_main$1,
+                    mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("input", mergeProps({
+                    id: unref(hasId),
+                    ref_key: "inputEl",
+                    ref: inputEl
+                  }, unref(hasAttrs), {
+                    style: unref(hasStyle),
+                    onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+                    onKeydown: onKeyDown,
+                    onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+                  }), null, 16, _hoisted_3),
+                  (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "unit", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.unit),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ])) : createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              ),
+              unref(iconAfter) ? (openBlock(), createBlock(
                 _sfc_main$1,
-                mergeProps({
-                  key: 0,
-                  class: "vv-input-text__icon"
-                }, unref(hasIcon)),
+                mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
-              )) : createCommentVNode("v-if", true),
-              createElementVNode("input", mergeProps({
-                id: unref(hasId),
-                ref_key: "inputEl",
-                ref: inputEl
-              }, unref(hasAttrs), {
-                style: unref(hasStyle),
-                onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
-                onKeydown: onKeyDown,
-                onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
-              }), null, 16, _hoisted_5),
-              (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+              )) : unref(isPassword) && !_ctx.hideActions && !unref(isDisabledOrReadonly) ? (openBlock(), createBlock(unref(PasswordInputActions), {
+                key: 2,
+                onTogglePassword
+              })) : unref(isNumber) && !_ctx.hideActions && !unref(isDisabledOrReadonly) ? (openBlock(), createBlock(unref(NumberInputActions), {
+                key: 3,
+                onStepUp,
+                onStepDown
+              })) : unref(isSearch) && !_ctx.hideActions && !unref(isDisabledOrReadonly) ? (openBlock(), createBlock(unref(SearchInputActions), {
+                key: 4,
+                onClear
+              })) : createCommentVNode("v-if", true),
+              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              unref(count) ? (openBlock(), createElementBlock("span", _hoisted_6, [
+                renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                   createTextVNode(
-                    toDisplayString(_ctx.unit),
+                    toDisplayString(unref(countFormatted)),
                     1
                     /* TEXT */
                   )
                 ])
               ])) : createCommentVNode("v-if", true)
-            ], 8, _hoisted_4),
-            unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(
-              _sfc_main$1,
-              mergeProps({
-                key: 1,
-                class: "vv-input-text__icon vv-input-text__icon-after"
-              }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)),
-              null,
-              16
-              /* FULL_PROPS */
-            )) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
-              key: 2,
-              onTogglePassword
-            })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
-              key: 3,
-              onStepUp,
-              onStepDown
-            })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
-              key: 4,
-              onClear
-            })) : createCommentVNode("v-if", true),
-            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_7, [
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_8, [
-              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-                createTextVNode(
-                  toDisplayString(unref(countFormatted)),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ])) : createCommentVNode("v-if", true)
-          ]),
+            ],
+            512
+            /* NEED_PATCH */
+          ),
           createVNode(unref(HintSlot), {
             id: unref(hasHintId),
             class: "vv-input-text__hint"
@@ -1796,7 +2722,62 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["id"])
+          ]), 1032, ["id"]),
+          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$4, {
+            key: 1,
+            ref_key: "suggestionsDropdownEl",
+            ref: suggestionsDropdownEl,
+            reference: unref(wrapperEl),
+            "autofocus-first": false,
+            "trigger-width": true
+          }, {
+            items: withCtx(() => [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(unref(filteredSuggestions), (value) => {
+                  return openBlock(), createBlock(_sfc_main$2, {
+                    key: value,
+                    onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_7, [
+                        renderSlot(_ctx.$slots, "suggestion", mergeProps({ ref_for: true }, { value }), () => [
+                          createTextVNode(
+                            toDisplayString(value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      unref(suggestions) && unref(hasIconRemoveSuggestion) ? (openBlock(), createElementBlock("button", {
+                        key: 0,
+                        type: "button",
+                        tabindex: "-1",
+                        class: "cursor-pointer",
+                        title: _ctx.labelRemoveSuggestion,
+                        onClick: withModifiers(($event) => onSuggestionRemove(value), ["stop"])
+                      }, [
+                        createVNode(
+                          _sfc_main$1,
+                          mergeProps({ ref_for: true }, unref(hasIconRemoveSuggestion)),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        )
+                      ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["onClick"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["reference"])) : createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */