wave-ui 2.28.1 → 2.31.1

package/dist/wave-ui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, withKeys, createBlock, withModifiers, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, toHandlers, createTextVNode, toDisplayString, TransitionGroup, Transition, normalizeStyle, resolveDynamicComponent, createSlots, withDirectives, vModelText, vModelDynamic, resolveDirective, KeepAlive, vShow } from "vue";
+import { reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, withKeys, createBlock, withModifiers, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, toHandlers, createTextVNode, toDisplayString, TransitionGroup, Transition, normalizeStyle, resolveDynamicComponent, createSlots, withDirectives, vModelText, vModelDynamic, resolveDirective, KeepAlive } from "vue";
 const config = reactive({
   breakpoints: {
     xs: 600,
@@ -447,9 +447,6 @@ const _WaveUI = class {
         app.use(_WaveUI);
       notificationManager = reactive(new NotificationManager$1());
       mergeConfig(options);
-      if (config.disableColorShades) {
-        consoleWarn("WARNING - Since version 1.30 (Vue 2) & 2.17 (Vue 3), the option `disableColorShades` is replaced with `css.colorShades`.\nhttps://antoniandre.github.io/wave-ui/release-notes");
-      }
       if (config.css.colorShades) {
         config.colorShades = {};
         for (let color in config.colors) {
@@ -500,10 +497,10 @@ let WaveUI = _WaveUI;
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-const _hoisted_1$s = ["aria-expanded"];
-const _hoisted_2$f = ["onClick", "onFocus", "onKeypress", "tabindex"];
-const _hoisted_3$c = ["innerHTML"];
-const _hoisted_4$b = ["innerHTML"];
+const _hoisted_1$u = ["aria-expanded"];
+const _hoisted_2$e = ["onClick", "onFocus", "onKeypress", "tabindex"];
+const _hoisted_3$b = ["innerHTML"];
+const _hoisted_4$a = ["innerHTML"];
 function render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_transition_expand = resolveComponent("w-transition-expand");
@@ -525,7 +522,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           $props.expandIcon && !$props.expandIconRight ? (openBlock(), createBlock(_component_w_button, {
             key: 0,
-            class: "w-accordion__expand-icon",
+            class: normalizeClass(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": item._expanded }]),
             icon: item._expanded && $props.collapseIcon || $props.expandIcon,
             disabled: item._disabled || null,
             tabindex: -1,
@@ -533,7 +530,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
             onKeypress: _cache[0] || (_cache[0] = withModifiers(() => {
             }, ["stop"])),
             onClick: withModifiers(($event) => !item._disabled && $options.toggleItem(item, $event), ["stop"])
-          }, null, 8, ["icon", "disabled", "onClick"])) : createCommentVNode("", true),
+          }, null, 8, ["icon", "disabled", "onClick", "class"])) : createCommentVNode("", true),
           _ctx.$slots[`item-title.${item.id || i + 1}`] ? renderSlot(_ctx.$slots, `item-title.${item.id || i + 1}`, {
             key: 1,
             item: $options.getOriginalItem(item),
@@ -548,18 +545,18 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("div", {
               class: "grow",
               innerHTML: item[$props.itemTitleKey]
-            }, null, 8, _hoisted_3$c)
+            }, null, 8, _hoisted_3$b)
           ]),
           $props.expandIcon && $props.expandIconRight ? (openBlock(), createBlock(_component_w_button, {
             key: 3,
-            class: "w-accordion__expand-icon",
+            class: normalizeClass(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": item._expanded }]),
             icon: item._expanded && $props.collapseIcon || $props.expandIcon,
             text: "",
             onKeypress: _cache[1] || (_cache[1] = withModifiers(() => {
             }, ["stop"])),
             onClick: withModifiers(($event) => !item._disabled && $options.toggleItem(item, $event), ["stop"])
-          }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
-        ], 42, _hoisted_2$f),
+          }, null, 8, ["icon", "onClick", "class"])) : createCommentVNode("", true)
+        ], 42, _hoisted_2$e),
         createVNode(_component_w_transition_expand, { y: "" }, {
           default: withCtx(() => [
             item._expanded ? (openBlock(), createElementBlock("div", {
@@ -579,22 +576,23 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createElementVNode("div", {
                   innerHTML: item[$props.itemContentKey]
-                }, null, 8, _hoisted_4$b)
+                }, null, 8, _hoisted_4$a)
               ])
             ], 2)) : createCommentVNode("", true)
           ]),
           _: 2
         }, 1024)
-      ], 10, _hoisted_1$s);
+      ], 10, _hoisted_1$u);
     }), 128))
   ], 2);
 }
 var wAccordion_vue_vue_type_style_index_0_lang = "";
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
 const _sfc_main$O = {
   name: "w-accordion",
@@ -669,7 +667,7 @@ const _sfc_main$O = {
   }
 };
 var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
-const _hoisted_1$r = { class: "w-alert__content" };
+const _hoisted_1$t = { class: "w-alert__content" };
 function render$N(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_button = resolveComponent("w-button");
@@ -687,7 +685,7 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       })) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_1$r, [
+      createElementVNode("div", _hoisted_1$t, [
         renderSlot(_ctx.$slots, "default")
       ]),
       $props.dismiss ? (openBlock(), createBlock(_component_w_button, {
@@ -784,6 +782,7 @@ const _sfc_main$N = {
   }
 };
 var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
+const _hoisted_1$s = ["innerHTML"];
 function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_alert = resolveComponent("w-alert");
   return openBlock(), createBlock(TransitionGroup, {
@@ -802,9 +801,11 @@ function render$M(_ctx, _cache, $props, $setup, $data, $options) {
             modelValue: notif._value,
             "onUpdate:modelValue": ($event) => notif._value = $event,
             onClose: ($event) => _ctx.notifManager.dismiss(notif._uid)
-          }, notif), {
+          }, $options.notifProps(notif)), {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(notif.message), 1)
+              createElementVNode("div", {
+                innerHTML: notif.message
+              }, null, 8, _hoisted_1$s)
             ]),
             _: 2
           }, 1040, ["modelValue", "onUpdate:modelValue", "onClose"])) : createCommentVNode("", true)
@@ -832,6 +833,12 @@ const _sfc_main$M = {
       return this.conf.transition ? this.conf.transition.replace("default", `slide-${this.conf.align === "left" ? "right" : "left"}`) : "";
     }
   },
+  methods: {
+    notifProps(notif) {
+      const _a = notif, { _value, _uid, message, timeout } = _a, props = __objRest(_a, ["_value", "_uid", "message", "timeout"]);
+      return props;
+    }
+  },
   created() {
     this.notifManager = new NotificationManager$1();
   },
@@ -991,7 +998,7 @@ const _sfc_main$L = {
     classes() {
       return {
         "d-block": this.block,
-        "row": this.row,
+        row: this.row,
         "align-center": this.alignCenter,
         "align-end": this.alignEnd,
         "justify-center": this.justifyCenter,
@@ -1134,7 +1141,7 @@ const _sfc_main$K = {
   }
 };
 var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
-const _hoisted_1$q = ["innerHTML"];
+const _hoisted_1$r = ["innerHTML"];
 function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createElementBlock("div", {
@@ -1186,7 +1193,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
         }) : (openBlock(), createElementBlock("span", {
           key: `${i}f`,
           innerHTML: item[$props.itemLabelKey]
-        }, null, 8, _hoisted_1$q))
+        }, null, 8, _hoisted_1$r))
       ], 64);
     }), 256))
   ], 2);
@@ -1224,11 +1231,11 @@ const _sfc_main$J = {
   }
 };
 var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", render$J]]);
-const _hoisted_1$p = {
+const _hoisted_1$q = {
   key: 0,
   class: "w-button__loader"
 };
-const _hoisted_2$e = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
+const _hoisted_2$d = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
   /* @__PURE__ */ createElementVNode("circle", {
     cx: "20",
     cy: "20",
@@ -1256,9 +1263,9 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
       })) : renderSlot(_ctx.$slots, "default", { key: 1 }),
       createVNode(Transition, { name: "scale-fade" }, {
         default: withCtx(() => [
-          $props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
+          $props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$q, [
             renderSlot(_ctx.$slots, "loading", {}, () => [
-              _hoisted_2$e
+              _hoisted_2$d
             ])
           ])) : createCommentVNode("", true)
         ]),
@@ -1365,11 +1372,11 @@ var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
 const objectifyClasses = (classes = {}) => {
   if (typeof classes === "string")
     classes = { [classes]: true };
-  else if (typeof classes === "array")
+  else if (Array.isArray(classes))
     classes = { [classes.join(" ")]: true };
   return classes;
 };
-const _hoisted_1$o = ["innerHTML"];
+const _hoisted_1$p = ["innerHTML"];
 function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_image = resolveComponent("w-image");
   return openBlock(), createElementBlock("div", {
@@ -1385,7 +1392,7 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       class: normalizeClass(["w-card__title", $options.titleClasses]),
       innerHTML: $props.title
-    }, null, 10, _hoisted_1$o)) : createCommentVNode("", true),
+    }, null, 10, _hoisted_1$p)) : createCommentVNode("", true),
     $props.image ? (openBlock(), createBlock(_component_w_image, mergeProps({
       key: 2,
       class: "w-card__image",
@@ -1494,10 +1501,10 @@ var FormElementMixin = {
     }
   }
 };
-const _hoisted_1$n = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
-const _hoisted_2$d = ["for"];
-const _hoisted_3$b = ["for", "innerHTML"];
-const _hoisted_4$a = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_1$o = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
+const _hoisted_2$c = ["for"];
+const _hoisted_3$a = ["for", "innerHTML"];
+const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("svg", {
   width: "11px",
   height: "9px",
   viewbox: "0 0 12 9"
@@ -1505,7 +1512,7 @@ const _hoisted_4$a = /* @__PURE__ */ createElementVNode("svg", {
   /* @__PURE__ */ createElementVNode("polyline", { points: "1 5 4 8 10 2" })
 ], -1);
 const _hoisted_5$8 = [
-  _hoisted_4$a
+  _hoisted_4$9
 ];
 const _hoisted_6$5 = ["for"];
 const _hoisted_7$5 = ["for", "innerHTML"];
@@ -1535,7 +1542,7 @@ function render$G(_ctx, _cache, $props, $setup, $data, $options) {
         onKeypress: _cache[3] || (_cache[3] = withKeys((...args) => $options.onInput && $options.onInput(...args), ["enter"])),
         "aria-checked": $data.isChecked || "false",
         role: "checkbox"
-      }, null, 40, _hoisted_1$n),
+      }, null, 40, _hoisted_1$o),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -1543,12 +1550,12 @@ function render$G(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-checkbox--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_2$d)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_2$c)) : $props.label ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "w-checkbox__label w-form-el-shakable pr2",
           for: `w-checkbox--${_ctx._.uid}`,
           innerHTML: $props.label
-        }, null, 8, _hoisted_3$b)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_3$a)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", {
         class: normalizeClass(["w-checkbox__input", this.color]),
@@ -1645,7 +1652,7 @@ const _sfc_main$G = {
   }
 };
 var wCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", render$G]]);
-const _hoisted_1$m = ["innerHTML"];
+const _hoisted_1$n = ["innerHTML"];
 function render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_checkbox = resolveComponent("w-checkbox");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $options.checkboxItems.some((item) => item._isChecked), disabled: _ctx.isDisabled }, {
@@ -1688,7 +1695,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
             }) : item.label ? (openBlock(), createElementBlock("div", {
               key: 2,
               innerHTML: item.label
-            }, null, 8, _hoisted_1$m)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_1$n)) : createCommentVNode("", true)
           ]),
           _: 2
         }, 1032, ["model-value", "name", "label", "label-on-left", "color", "round", "onUpdate:modelValue", "disabled", "readonly", "class"]);
@@ -1754,21 +1761,18 @@ const _sfc_main$F = {
   }
 };
 var wCheckboxes = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", render$F]]);
-const _hoisted_1$l = { class: "w-confirm" };
-const _hoisted_2$c = /* @__PURE__ */ createTextVNode("Are you sure?");
-const _hoisted_3$a = /* @__PURE__ */ createTextVNode("Cancel");
-const _hoisted_4$9 = /* @__PURE__ */ createTextVNode("Confirm");
+const _hoisted_1$m = { class: "w-confirm" };
 function render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_flex = resolveComponent("w-flex");
   const _component_w_menu = resolveComponent("w-menu");
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$m, [
     createVNode(_component_w_menu, mergeProps({
       modelValue: _ctx.showPopup,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event)
     }, $options.wMenuProps), {
       activator: withCtx(({ on }) => [
-        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, toHandlers(on), $options.buttonProps), {
+        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, __spreadValues(__spreadValues(__spreadValues({}, _ctx.$attrs), $options.buttonProps), on)), {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -1783,33 +1787,33 @@ function render$E(_ctx, _cache, $props, $setup, $data, $options) {
           default: withCtx(() => [
             createElementVNode("div", null, [
               renderSlot(_ctx.$slots, "question", {}, () => [
-                _hoisted_2$c
+                createTextVNode(toDisplayString($props.question), 1)
               ])
             ]),
             createElementVNode("div", {
               class: normalizeClass(["w-flex justify-end", $props.inline ? "ml2" : "mt2"])
             }, [
-              !$props.noCancel ? (openBlock(), createBlock(_component_w_button, mergeProps({
+              $props.cancel !== false ? (openBlock(), createBlock(_component_w_button, mergeProps({
                 key: 0,
                 class: "mr2"
-              }, $props.cancelButton, {
-                "bg-color": ($props.cancelButton || {}).bgColor || "error",
+              }, $options.cancelButtonProps, {
+                "bg-color": ($options.cancelButton || {}).bgColor || "error",
                 onClick: $options.onCancel
               }), {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "cancel", {}, () => [
-                    _hoisted_3$a
+                    createTextVNode(toDisplayString($options.cancelButton.label), 1)
                   ])
                 ]),
                 _: 3
               }, 16, ["bg-color", "onClick"])) : createCommentVNode("", true),
-              createVNode(_component_w_button, mergeProps($props.confirmButton, {
-                "bg-color": ($props.confirmButton || {}).bgColor || "success",
+              createVNode(_component_w_button, mergeProps($options.confirmButtonProps, {
+                "bg-color": ($options.confirmButton || {}).bgColor || "success",
                 onClick: $options.onConfirm
               }), {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "confirm", {}, () => [
-                    _hoisted_4$9
+                    createTextVNode(toDisplayString($options.confirmButton.label), 1)
                   ])
                 ]),
                 _: 3
@@ -1830,9 +1834,9 @@ const _sfc_main$E = {
     color: { type: String },
     icon: { type: String },
     mainButton: { type: Object },
-    noCancel: { type: Boolean },
-    cancelButton: { type: [Boolean, Object] },
-    confirmButton: { type: Object },
+    question: { type: String, default: "Are you sure?" },
+    cancel: { type: [Boolean, Object, String], default: void 0 },
+    confirm: { type: [Object, String] },
     inline: { type: Boolean },
     menu: { type: Object },
     noArrow: { type: Boolean },
@@ -1853,6 +1857,26 @@ const _sfc_main$E = {
     props: []
   }),
   computed: {
+    cancelButton() {
+      let button = { label: typeof this.cancel === "string" ? this.cancel : "Cancel" };
+      if (typeof this.cancel === "object")
+        button = Object.assign({}, button, this.cancel);
+      return button;
+    },
+    cancelButtonProps() {
+      const _a = this.cancelButton, { label } = _a, props = __objRest(_a, ["label"]);
+      return props;
+    },
+    confirmButton() {
+      let button = { label: typeof this.confirm === "string" ? this.confirm : "Confirm" };
+      if (typeof this.confirm === "object")
+        button = Object.assign({}, button, this.confirm);
+      return button;
+    },
+    confirmButtonProps() {
+      const _a = this.confirmButton, { label } = _a, props = __objRest(_a, ["label"]);
+      return props;
+    },
     wMenuProps() {
       return __spreadValues({
         top: this.top,
@@ -2061,7 +2085,7 @@ const _sfc_main$B = {
   }
 };
 var wDivider = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", render$B]]);
-const _hoisted_1$k = { class: "w-drawer-wrap__pushable" };
+const _hoisted_1$l = { class: "w-drawer-wrap__pushable" };
 function render$A(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_overlay = resolveComponent("w-overlay");
   return $data.showWrapper || $props.pushContent ? (openBlock(), createElementBlock("div", {
@@ -2073,7 +2097,7 @@ function render$A(_ctx, _cache, $props, $setup, $data, $options) {
       class: "w-drawer-wrap__track",
       style: normalizeStyle($options.trackStyles)
     }, [
-      createElementVNode("div", _hoisted_1$k, [
+      createElementVNode("div", _hoisted_1$l, [
         !$props.noOverlay ? (openBlock(), createBlock(_component_w_overlay, {
           key: 0,
           modelValue: $data.showDrawer,
@@ -2283,6 +2307,7 @@ const _sfc_main$z = {
     justifyEnd: { type: Boolean },
     justifySpaceBetween: { type: Boolean },
     justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
     gap: { type: Number, default: 0 }
   },
@@ -2304,6 +2329,7 @@ const _sfc_main$z = {
         "justify-end": this.justifyEnd,
         "justify-space-between": this.justifySpaceBetween,
         "justify-space-around": this.justifySpaceAround,
+        "justify-space-evenly": this.justifySpaceEvenly,
         "basis-zero": this.basisZero,
         [`w-flex--gap${this.gap}`]: this.gap
       };
@@ -2451,7 +2477,7 @@ const _sfc_main$y = {
   }
 };
 var wForm = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", render$y]]);
-const _hoisted_1$j = {
+const _hoisted_1$k = {
   key: 0,
   class: "w-form-el__error error w-form-el__error w-form-el__error"
 };
@@ -2469,7 +2495,7 @@ function render$x(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_w_transition_expand, { y: "" }, {
       default: withCtx(() => [
         _ctx.Validation.message ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _ctx.$slots["error-message"] ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
+          _ctx.$slots["error-message"] ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
             renderSlot(_ctx.$slots, "error-message", {
               message: _ctx.Validation.message
             })
@@ -2649,7 +2675,7 @@ const _sfc_main$w = {
   }
 };
 var wIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", render$w]]);
-const _hoisted_1$i = {
+const _hoisted_1$j = {
   key: 0,
   class: "w-image__loader"
 };
@@ -2674,7 +2700,7 @@ function render$v(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["name"]),
-      !$props.noSpinner && $data.loading ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
+      !$props.noSpinner && $data.loading ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
         _ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(_component_w_progress, {
           key: 1,
           circle: "",
@@ -2819,11 +2845,11 @@ const _sfc_main$v = {
   }
 };
 var wImage = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", render$v]]);
-const _hoisted_1$h = ["name"];
+const _hoisted_1$i = ["name"];
 const _hoisted_2$a = ["for"];
 const _hoisted_3$9 = ["for", "innerHTML"];
 const _hoisted_4$8 = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
-const _hoisted_5$7 = ["id", "name", "multiple"];
+const _hoisted_5$7 = ["id", "name", "multiple", "data-progress"];
 const _hoisted_6$4 = {
   class: "w-input__no-file",
   key: "no-file"
@@ -2854,22 +2880,22 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
         type: "hidden",
         name: _ctx.name || null,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.inputValue = $event)
-      }, null, 8, _hoisted_1$h)), [
+      }, null, 8, _hoisted_1$i)), [
         [vModelText, $data.inputValue]
       ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         $props.labelPosition === "left" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: "w-input__label w-input__label--left w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_2$a)) : $props.label ? (openBlock(), createElementBlock("label", {
+          ], 10, _hoisted_2$a)) : $props.label ? (openBlock(), createElementBlock("label", {
             key: 1,
-            class: "w-input__label w-input__label--left w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`,
             innerHTML: $props.label
-          }, null, 8, _hoisted_3$9)) : createCommentVNode("", true)
+          }, null, 10, _hoisted_3$9)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["w-input__input-wrap", $options.inputWrapClasses])
@@ -2889,6 +2915,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
           $props.type !== "file" ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
             key: 1,
             class: "w-input__input",
+            ref: "input",
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.inputValue = $event)
           }, toHandlers($options.listeners), {
             onInput: _cache[3] || (_cache[3] = (...args) => $options.onInput && $options.onInput(...args)),
@@ -2910,9 +2937,9 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
             tabindex: _ctx.tabindex || null
           }, $options.attrs), null, 16, _hoisted_4$8)), [
             [vModelDynamic, $data.inputValue]
-          ]) : createCommentVNode("", true),
-          $props.type === "file" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          ]) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             createElementVNode("input", mergeProps({
+              ref: "input",
               id: `w-input--${_ctx._.uid}`,
               type: "file",
               name: _ctx.name || null,
@@ -2920,7 +2947,9 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               onBlur: _cache[7] || (_cache[7] = (...args) => $options.onBlur && $options.onBlur(...args)),
               onChange: _cache[8] || (_cache[8] = (...args) => $options.onFileChange && $options.onFileChange(...args)),
               multiple: $props.multiple || null
-            }, $options.attrs), null, 16, _hoisted_5$7),
+            }, $options.attrs, {
+              "data-progress": $options.overallFilesProgress
+            }), null, 16, _hoisted_5$7),
             createVNode(TransitionGroup, {
               class: "w-input__input w-input__input--file",
               tag: "label",
@@ -2944,23 +2973,23 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
                       class: "filename",
                       key: `${i}b`
                     }, toDisplayString(file.base), 1)),
-                    createTextVNode(toDisplayString(file.extension), 1)
+                    createTextVNode(toDisplayString(file.extension ? `.${file.extension}` : ""), 1)
                   ]);
                 }), 128))
               ]),
               _: 3
             }, 8, ["for"])
-          ], 64)) : createCommentVNode("", true),
+          ], 64)),
           $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
               key: 0,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
+              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
               for: `w-input--${_ctx._.uid}`
             }, [
               renderSlot(_ctx.$slots, "default")
             ], 10, _hoisted_8$3)) : $props.label ? (openBlock(), createElementBlock("label", {
               key: 1,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
+              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
               for: `w-input--${_ctx._.uid}`,
               innerHTML: $props.label
             }, null, 10, _hoisted_9$3)) : createCommentVNode("", true)
@@ -2976,9 +3005,16 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               createTextVNode(toDisplayString($props.innerIconRight), 1)
             ]),
             _: 1
-          }, 8, ["for"])) : createCommentVNode("", true)
+          }, 8, ["for"])) : createCommentVNode("", true),
+          $options.hasLoading || $props.showProgress && ($options.uploadInProgress || $options.uploadComplete) ? (openBlock(), createBlock(_component_w_progress, {
+            key: 5,
+            class: "fill-width",
+            size: "2",
+            color: $props.progressColor || $props.color,
+            "model-value": $props.showProgress ? ($options.uploadInProgress || $options.uploadComplete) && $options.overallFilesProgress : $options.loadingValue
+          }, null, 8, ["color", "model-value"])) : createCommentVNode("", true)
         ], 2),
-        $props.type === "file" && $data.inputFiles.length ? (openBlock(), createElementBlock("label", {
+        $props.type === "file" && $props.preview && $data.inputFiles.length ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "d-flex",
           for: `w-input--${_ctx._.uid}`
@@ -2994,32 +3030,26 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
                 src: file.preview,
                 alt: ""
               }, null, 8, _hoisted_11$2)) : (openBlock(), createElementBlock("i", {
-                class: "w-icon wi-file w-input__file-preview primary",
+                class: normalizeClass(["w-icon w-input__file-preview primary size--md", $props.preview && typeof $props.preview === "string" ? $props.preview : "wi-file"]),
                 key: `${i}c`
-              }))
+              }, null, 2))
             ], 64);
           }), 256))
         ], 8, _hoisted_10$3)) : createCommentVNode("", true),
         $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: "w-input__label w-input__label--right w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_12$1)) : $props.label ? (openBlock(), createElementBlock("label", {
+          ], 10, _hoisted_12$1)) : $props.label ? (openBlock(), createElementBlock("label", {
             key: 1,
-            class: "w-input__label w-input__label--right w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`,
             innerHTML: $props.label
-          }, null, 8, _hoisted_13$1)) : createCommentVNode("", true)
-        ], 64)) : createCommentVNode("", true),
-        $props.loading ? (openBlock(), createBlock(_component_w_progress, {
-          key: 3,
-          class: "fill-width",
-          size: "2",
-          color: $props.progressColor || $props.color
-        }, null, 8, ["color"])) : createCommentVNode("", true)
+          }, null, 10, _hoisted_13$1)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
       ], 64))
     ]),
     _: 3
@@ -3052,17 +3082,20 @@ const _sfc_main$u = {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     multiple: { type: Boolean },
-    preview: { type: Boolean },
-    loading: { type: Boolean }
+    preview: { type: [Boolean, String], default: true },
+    loading: { type: [Boolean, Number], default: false },
+    showProgress: { type: [Boolean] },
+    files: { type: Array }
   },
-  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right"],
+  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right", "update:overallProgress"],
   data() {
     return {
       inputValue: this.modelValue,
       inputNumberError: false,
       isFocused: false,
       inputFiles: [],
-      fileReader: null
+      fileReader: null,
+      isAutofilled: false
     };
   },
   computed: {
@@ -3079,21 +3112,55 @@ const _sfc_main$u = {
       return htmlAttrs;
     },
     hasValue() {
-      return this.inputValue || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
+      switch (this.type) {
+        case "file":
+          return !!this.inputFiles.length;
+        case "number":
+          return this.inputValue || this.inputValue === 0 || this.inputNumberError;
+        case "date":
+        case "time":
+          return true;
+        default:
+          return this.inputValue || this.inputValue === 0;
+      }
     },
     hasLabel() {
       return this.label || this.$slots.default;
     },
+    hasLoading() {
+      return ![void 0, false].includes(this.loading);
+    },
+    loadingValue() {
+      let value;
+      if (typeof this.loading === "number")
+        value = this.loading;
+      else if (this.loading) {
+        value = this.type === "file" && this.overallFilesProgress ? this.overallFilesProgress : void 0;
+      }
+      return value;
+    },
     showLabelInside() {
       return !this.staticLabel || !this.hasValue && !this.placeholder;
     },
+    overallFilesProgress() {
+      const progress = this.inputFiles.reduce((total2, file) => total2 + file.progress, 0);
+      const total = progress / this.inputFiles.length;
+      this.$emit("update:overallProgress", this.inputFiles.length ? total : void 0);
+      return total;
+    },
+    uploadInProgress() {
+      return this.overallFilesProgress > 0 && this.overallFilesProgress < 100;
+    },
+    uploadComplete() {
+      return this.overallFilesProgress === 100;
+    },
     classes() {
       return {
         "w-input": true,
         "w-input--file": this.type === "file",
         "w-input--disabled": this.isDisabled,
         "w-input--readonly": this.isReadonly,
-        [`w-input--${this.hasValue ? "filled" : "empty"}`]: true,
+        [`w-input--${this.hasValue || this.isAutofilled ? "filled" : "empty"}`]: true,
         "w-input--focused": this.isFocused && !this.isReadonly,
         "w-input--dark": this.dark,
         "w-input--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
@@ -3103,6 +3170,11 @@ const _sfc_main$u = {
         "w-input--inner-icon-right": this.innerIconRight
       };
     },
+    validationClasses() {
+      return this.isFocused && {
+        [this.valid === false ? "error" : this.color]: this.color || this.valid === false
+      };
+    },
     inputWrapClasses() {
       return {
         [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
@@ -3114,7 +3186,8 @@ const _sfc_main$u = {
         "w-input__input-wrap--underline": !this.outline,
         "w-input__input-wrap--shadow": this.shadow,
         "w-input__input-wrap--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
-        "w-input__input-wrap--loading": this.loading
+        "w-input__input-wrap--loading": this.loading || this.showProgress && this.uploadInProgress,
+        "w-input__input-wrap--upload-complete": this.uploadComplete
       };
     }
   },
@@ -3134,29 +3207,34 @@ const _sfc_main$u = {
     },
     onFileChange(e) {
       this.inputFiles = [...e.target.files].map((original) => {
-        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/);
+        const [, base = "", extension = "", full = ""] = original.name.match(/^(.*?)\.([^.]*)$|(.*)/);
         const file = reactive({
           name: original.name,
-          base,
+          base: base || full,
           extension,
           type: original.type,
           size: original.size,
           lastModified: original.lastModified,
           preview: null,
-          progress: 0
+          progress: 0,
+          file: original
         });
-        this.filePreview(original, file);
+        this.readFile(original, file);
         return file;
       });
       this.$emit("update:modelValue", this.inputFiles);
+      this.$emit("input", this.inputFiles);
     },
-    filePreview(original, file) {
+    readFile(original, file) {
       const reader = new FileReader();
-      if (original.type && original.type.startsWith("image/")) {
+      const isPreviewAnIcon = typeof this.preview === "string";
+      const isFileAnImage = original.type && original.type.startsWith("image/");
+      if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener("load", (e) => {
           file.preview = e.target.result;
         });
-      }
+      } else
+        delete file.preview;
       reader.addEventListener("progress", (e) => {
         if (e.loaded && e.total)
           file.progress = e.loaded * 100 / e.total;
@@ -3164,9 +3242,17 @@ const _sfc_main$u = {
       reader.readAsDataURL(original);
     }
   },
+  mounted() {
+    setTimeout(() => {
+      if (this.$refs.input && this.$refs.input.matches(":-webkit-autofill"))
+        this.isAutofilled = true;
+    }, 400);
+  },
   watch: {
     modelValue(value) {
       this.inputValue = value;
+      if (!value && value !== 0)
+        this.isAutofilled = false;
     }
   }
 };
@@ -3503,34 +3589,248 @@ const _sfc_main$t = {
   }
 };
 var wList = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", render$t]]);
-const _hoisted_1$g = { class: "w-menu-wrap" };
+var DetachableMixin = {
+  props: {
+    detachTo: { type: [String, Boolean, Object], deprecated: true },
+    appendTo: { type: [String, Boolean, Object] },
+    fixed: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    noPosition: { type: Boolean },
+    zIndex: { type: [Number, String, Boolean] },
+    activator: { type: String }
+  },
+  data: () => ({
+    docAEventListenersHandlers: []
+  }),
+  computed: {
+    appendToTarget() {
+      const defaultTarget = ".w-app";
+      if (this.detachTo && !this.appendTo) {
+        consoleWarn(`The ${this.$options.name} prop \`detach-to\` is deprecated. You can replace it with \`append-to\`.`);
+      }
+      let target = this.appendTo || this.detachTo || defaultTarget;
+      if (target === true)
+        target = defaultTarget;
+      else if (this.appendTo === "activator")
+        target = this.$el.previousElementSibling;
+      else if (target && !["object", "string"].includes(typeof target))
+        target = defaultTarget;
+      else if (typeof target === "object" && !target.nodeType) {
+        target = defaultTarget;
+        consoleWarn(`Invalid node provided in ${this.$options.name} \`append-to\`. Falling back to .w-app.`);
+      }
+      if (typeof target === "string")
+        target = document.querySelector(target);
+      if (!target) {
+        consoleWarn(`Unable to locate ${this.appendTo ? `target ${this.appendTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
+      }
+      return target;
+    },
+    detachableParentEl() {
+      return this.appendToTarget;
+    },
+    hasSeparateActivator() {
+      return !this.$slots.activator && typeof this.activator === "string";
+    },
+    activatorEl: {
+      get() {
+        if (this.hasSeparateActivator)
+          return document.querySelector(this.activator);
+        return this.$el.firstElementChild;
+      },
+      set() {
+      }
+    },
+    position() {
+      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
+    },
+    alignment() {
+      return ["top", "bottom"].includes(this.position) && this.alignLeft && "left" || ["top", "bottom"].includes(this.position) && this.alignRight && "right" || ["left", "right"].includes(this.position) && this.alignTop && "top" || ["left", "right"].includes(this.position) && this.alignBottom && "bottom" || "";
+    }
+  },
+  methods: {
+    getActivatorCoordinates(e) {
+      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
+      let coords = { top, left, width, height };
+      if (!this.fixed) {
+        const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
+        const computedStyles2 = window.getComputedStyle(this.detachableParentEl, null);
+        coords = __spreadProps(__spreadValues({}, coords), {
+          top: top - targetTop + this.detachableParentEl.scrollTop - parseInt(computedStyles2.getPropertyValue("border-top-width")),
+          left: left - targetLeft + this.detachableParentEl.scrollLeft - parseInt(computedStyles2.getPropertyValue("border-left-width"))
+        });
+      }
+      return coords;
+    },
+    computeDetachableCoords(e) {
+      let { top, left, width, height } = this.getActivatorCoordinates(e);
+      this.detachableEl.style.visibility = "hidden";
+      this.detachableEl.style.display = "flex";
+      const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
+      switch (this.position) {
+        case "top": {
+          top -= this.detachableEl.offsetHeight;
+          if (this.alignRight) {
+            left += width - this.detachableEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
+          } else if (!this.alignLeft)
+            left += (width - this.detachableEl.offsetWidth) / 2;
+          break;
+        }
+        case "bottom": {
+          top += height;
+          if (this.alignRight) {
+            left += width - this.detachableEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
+          } else if (!this.alignLeft)
+            left += (width - this.detachableEl.offsetWidth) / 2;
+          break;
+        }
+        case "left": {
+          left -= this.detachableEl.offsetWidth;
+          if (this.alignBottom)
+            top += height - this.detachableEl.offsetHeight;
+          else if (!this.alignTop)
+            top += (height - this.detachableEl.offsetHeight) / 2;
+          break;
+        }
+        case "right": {
+          left += width;
+          if (this.alignBottom) {
+            top += height - this.detachableEl.offsetHeight + parseInt(computedStyles2.getPropertyValue("margin-top"));
+          } else if (!this.alignTop) {
+            top += (height - this.detachableEl.offsetHeight) / 2 + parseInt(computedStyles2.getPropertyValue("margin-top"));
+          }
+          break;
+        }
+      }
+      this.detachableEl.style.visibility = null;
+      if (!this.detachableVisible)
+        this.detachableEl.style.display = "none";
+      this.detachableCoords = { top, left };
+    },
+    onResize() {
+      if (this.minWidth === "activator")
+        this.activatorWidth = this.activatorEl.offsetWidth;
+      this.computeDetachableCoords();
+    },
+    onOutsideMousedown(e) {
+      if (!this.detachableEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
+        this.$emit("update:modelValue", this.detachableVisible = false);
+        this.$emit("input", false);
+        this.$emit("close");
+        document.removeEventListener("mousedown", this.onOutsideMousedown);
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    insertInDOM() {
+      return new Promise((resolve) => {
+        this.$nextTick(() => {
+          var _a;
+          this.detachableEl = ((_a = this.$refs.detachable) == null ? void 0 : _a.$el) || this.$refs.detachable;
+          if (this.detachableEl)
+            this.appendToTarget.appendChild(this.detachableEl);
+          resolve();
+        });
+      });
+    },
+    removeFromDOM() {
+      document.removeEventListener("mousedown", this.onOutsideMousedown);
+      window.removeEventListener("resize", this.onResize);
+      if (this.detachableEl && this.detachableEl.parentNode) {
+        this.detachableVisible = false;
+        this.detachableEl.remove();
+        this.detachableEl = null;
+      }
+    }
+  },
+  mounted() {
+    var _a;
+    const wrapper = this.$el;
+    if (this.$slots.activator)
+      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
+    else if (this.activator) {
+      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
+        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
+        const handlerWrap = (e) => {
+          var _a2;
+          if (((_a2 = e.target) == null ? void 0 : _a2.matches) && e.target.matches(this.activator))
+            handler(e);
+        };
+        document.addEventListener(eventName, handlerWrap);
+        this.docAEventListenersHandlers.push({ eventName, handler: handlerWrap });
+      });
+    }
+    if (this.overlay) {
+      this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
+      wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
+    }
+    if (this.modelValue)
+      this.toggleMenu({ type: "click", target: this.activatorEl });
+  },
+  beforeUnmount() {
+    var _a;
+    this.close();
+    this.removeFromDOM();
+    if (this.docAEventListenersHandlers.length) {
+      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+        document.removeEventListener(eventName, handler);
+      });
+    }
+    if (this.overlay && this.overlayEl.parentNode)
+      this.overlayEl.remove();
+    if (((_a = this.activatorEl) == null ? void 0 : _a.parentNode) && this.$slots.activator)
+      this.activatorEl.remove();
+  },
+  watch: {
+    modelValue(bool) {
+      if (!!bool !== this.detachableVisible)
+        this.toggle({ type: "click", target: this.activatorEl });
+    },
+    detachTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
+    },
+    appendTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
+    }
+  }
+};
+const _hoisted_1$h = { class: "w-menu-wrap" };
 function render$s(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_card = resolveComponent("w-card");
   const _component_w_overlay = resolveComponent("w-overlay");
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return openBlock(), createElementBlock("div", _hoisted_1$h, [
     renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
     createVNode(Transition, {
       name: $options.transitionName,
       appear: ""
     }, {
       default: withCtx(() => [
-        $props.custom && _ctx.menuVisible ? (openBlock(), createElementBlock("div", {
+        $props.custom && _ctx.detachableVisible ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["w-menu", $options.classes]),
-          ref: "menu",
-          onClick: _cache[0] || (_cache[0] = ($event) => $props.hideOnMenuClick && $options.closeMenu(true)),
+          ref: "detachable",
+          onClick: _cache[0] || (_cache[0] = ($event) => $props.hideOnMenuClick && $options.close(true)),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = true)),
-          onMouseleave: _cache[2] || (_cache[2] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.closeMenu())),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.close())),
           style: normalizeStyle($options.styles)
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 38)) : _ctx.menuVisible ? (openBlock(), createBlock(_component_w_card, {
+        ], 38)) : _ctx.detachableVisible ? (openBlock(), createBlock(_component_w_card, {
           key: 1,
           class: normalizeClass(["w-menu", $options.classes]),
-          ref: "menu",
-          onClick: _cache[3] || (_cache[3] = ($event) => $props.hideOnMenuClick && $options.closeMenu(true)),
+          ref: "detachable",
+          onClick: _cache[3] || (_cache[3] = ($event) => $props.hideOnMenuClick && $options.close(true)),
           onMouseenter: _cache[4] || (_cache[4] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = true)),
-          onMouseleave: _cache[5] || (_cache[5] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.closeMenu())),
+          onMouseleave: _cache[5] || (_cache[5] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.close())),
           tile: $props.tile,
           "title-class": $options.titleClasses,
           "content-class": $options.contentClasses,
@@ -3562,18 +3862,19 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
     $props.overlay ? (openBlock(), createBlock(_component_w_overlay, mergeProps({
       key: 0,
       ref: "overlay",
-      "model-value": _ctx.menuVisible,
+      "model-value": _ctx.detachableVisible,
       persistent: $props.persistent,
       class: $options.overlayClasses
     }, $props.overlayProps, {
-      "z-index": ($props.zIndex || 200) - 1,
-      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.menuVisible = false)
+      "z-index": (_ctx.zIndex || 200) - 1,
+      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.detachableVisible = false)
     }), null, 16, ["model-value", "persistent", "class", "z-index"])) : createCommentVNode("", true)
   ]);
 }
 var wMenu_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$s = {
   name: "w-menu",
+  mixins: [DetachableMixin],
   props: {
     modelValue: {},
     showOnHover: { type: Boolean },
@@ -3590,75 +3891,36 @@ const _sfc_main$s = {
     titleClass: { type: [String, Object, Array] },
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean },
-    detachTo: { type: [String, Boolean, Object] },
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    alignTop: { type: Boolean },
-    alignBottom: { type: Boolean },
-    alignLeft: { type: Boolean },
-    alignRight: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] },
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
     persistent: { type: Boolean },
-    noPosition: { type: Boolean }
+    delay: { type: Number }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    menuVisible: false,
+    detachableVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
-    menuCoordinates: {
+    detachableCoords: {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
-    menuEl: null,
+    detachableEl: null,
     timeoutId: null
   }),
   computed: {
     transitionName() {
       return this.transition || "scale-fade";
     },
-    detachToTarget() {
-      let target = this.detachTo || ".w-app";
-      if (target === true)
-        target = ".w-app";
-      else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
-      else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
-        consoleWarn("Invalid node provided in w-menu `detach-to`. Falling back to .w-app.");
-      }
-      if (typeof target === "string")
-        target = document.querySelector(target);
-      if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : ".w-app"}`);
-        target = document.querySelector(".w-app");
-      }
-      return target;
-    },
-    menuParentEl() {
-      return this.detachToTarget;
-    },
-    position() {
-      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
-    },
     menuMinWidth() {
       if (this.minWidth === "activator")
         return this.activatorWidth ? `${this.activatorWidth}px` : 0;
       else
         return isNaN(this.minWidth) ? this.minWidth : this.minWidth ? `${this.minWidth}px` : 0;
     },
-    alignment() {
-      return (this.top || this.bottom) && this.alignLeft && "left" || (this.top || this.bottom) && this.alignRight && "right" || (this.left || this.right) && this.alignTop && "top" || (this.left || this.right) && this.alignBottom && "bottom" || "";
-    },
     menuClasses() {
       return objectifyClasses(this.menuClass);
     },
@@ -3689,8 +3951,8 @@ const _sfc_main$s = {
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || this.overlay && !this.zIndex && 200 || null,
-        top: this.menuCoordinates.top && `${~~this.menuCoordinates.top}px` || null,
-        left: this.menuCoordinates.left && `${~~this.menuCoordinates.left}px` || null,
+        top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
+        left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
         minWidth: this.minWidth && this.menuMinWidth || null,
         "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
       };
@@ -3699,30 +3961,31 @@ const _sfc_main$s = {
       let handlers = {};
       if (this.showOnHover) {
         handlers = {
-          focus: this.toggleMenu,
-          blur: this.toggleMenu,
+          focus: this.toggle,
+          blur: this.toggle,
           mouseenter: (e) => {
             this.hoveringActivator = true;
-            this.openMenu(e);
+            this.open(e);
           },
           mouseleave: (e) => {
             this.hoveringActivator = false;
             setTimeout(() => {
               if (!this.hoveringMenu)
-                this.closeMenu();
+                this.close();
             }, 10);
           }
         };
-        if ("ontouchstart" in window)
-          handlers.click = this.toggleMenu;
+        if (typeof window !== "undefined" && "ontouchstart" in window) {
+          handlers.click = this.toggle;
+        }
       } else
-        handlers = { click: this.toggleMenu };
+        handlers = { click: this.toggle };
       return handlers;
     }
   },
   methods: {
-    toggleMenu(e) {
-      let shouldShowMenu = this.menuVisible;
+    toggle(e) {
+      let shouldShowMenu = this.detachableVisible;
       if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
@@ -3735,21 +3998,22 @@ const _sfc_main$s = {
         shouldShowMenu = false;
       }
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowMenu) {
-        this.$emit("update:modelValue", this.menuVisible = true);
-        this.$emit("input", true);
-        this.$emit("open");
-        this.openMenu(e);
-      } else
-        this.closeMenu();
-    },
-    async openMenu(e) {
-      this.menuVisible = true;
-      await this.insertMenu();
+      if (shouldShowMenu)
+        this.open(e);
+      else
+        this.close();
+    },
+    async open(e) {
+      if (this.delay)
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      this.detachableVisible = true;
+      if (this.activator)
+        this.activatorEl = e.target;
+      await this.insertInDOM();
       if (this.minWidth === "activator")
         this.activatorWidth = this.activatorEl.offsetWidth;
       if (!this.noPosition)
-        this.computeMenuPosition(e);
+        this.computeDetachableCoords(e);
       this.timeoutId = setTimeout(() => {
         this.$emit("update:modelValue", true);
         this.$emit("input", true);
@@ -3760,134 +4024,19 @@ const _sfc_main$s = {
       if (!this.noPosition)
         window.addEventListener("resize", this.onResize);
     },
-    async closeMenu(force = false) {
-      if (!this.menuVisible)
+    async close(force = false) {
+      if (!this.detachableVisible)
         return;
       if (this.showOnHover && !force) {
         await new Promise((resolve) => setTimeout(resolve, 10));
         if (this.showOnHover && (this.hoveringMenu || this.hoveringActivator))
           return;
       }
-      this.$emit("update:modelValue", this.menuVisible = false);
+      this.$emit("update:modelValue", this.detachableVisible = false);
       this.$emit("input", false);
       this.$emit("close");
       document.removeEventListener("mousedown", this.onOutsideMousedown);
       window.removeEventListener("resize", this.onResize);
-    },
-    onOutsideMousedown(e) {
-      if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit("update:modelValue", this.menuVisible = false);
-        this.$emit("input", false);
-        this.$emit("close");
-        document.removeEventListener("mousedown", this.onOutsideMousedown);
-        window.removeEventListener("resize", this.onResize);
-      }
-    },
-    onResize() {
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      this.computeMenuPosition();
-    },
-    getCoordinates(e) {
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
-      let coords = { top, left, width, height };
-      if (!this.fixed) {
-        const { top: targetTop, left: targetLeft } = this.menuParentEl.getBoundingClientRect();
-        const computedStyles2 = window.getComputedStyle(this.menuParentEl, null);
-        coords = __spreadProps(__spreadValues({}, coords), {
-          top: top - targetTop + this.menuParentEl.scrollTop - parseInt(computedStyles2.getPropertyValue("border-top-width")),
-          left: left - targetLeft + this.menuParentEl.scrollLeft - parseInt(computedStyles2.getPropertyValue("border-left-width"))
-        });
-      }
-      return coords;
-    },
-    computeMenuPosition(e) {
-      let { top, left, width, height } = this.getCoordinates(e);
-      this.menuEl.style.visibility = "hidden";
-      this.menuEl.style.display = "flex";
-      const computedStyles2 = window.getComputedStyle(this.menuEl, null);
-      switch (this.position) {
-        case "top": {
-          top -= this.menuEl.offsetHeight;
-          if (this.alignRight) {
-            left += width - this.menuEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
-          } else if (!this.alignLeft)
-            left += (width - this.menuEl.offsetWidth) / 2;
-          break;
-        }
-        case "bottom": {
-          top += height;
-          if (this.alignRight) {
-            left += width - this.menuEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
-          } else if (!this.alignLeft)
-            left += (width - this.menuEl.offsetWidth) / 2;
-          break;
-        }
-        case "left": {
-          left -= this.menuEl.offsetWidth;
-          if (this.alignBottom)
-            top += height - this.menuEl.offsetHeight;
-          else if (!this.alignTop)
-            top += (height - this.menuEl.offsetHeight) / 2;
-          break;
-        }
-        case "right": {
-          left += width;
-          if (this.alignBottom) {
-            top += height - this.menuEl.offsetHeight + parseInt(computedStyles2.getPropertyValue("margin-top"));
-          } else if (!this.alignTop) {
-            top += (height - this.menuEl.offsetHeight) / 2 + parseInt(computedStyles2.getPropertyValue("margin-top"));
-          }
-          break;
-        }
-      }
-      this.menuEl.style.visibility = null;
-      if (!this.menuVisible)
-        this.menuEl.style.display = "none";
-      this.menuCoordinates = { top, left };
-    },
-    insertMenu() {
-      return new Promise((resolve) => {
-        this.$nextTick(() => {
-          var _a;
-          this.menuEl = ((_a = this.$refs.menu) == null ? void 0 : _a.$el) || this.$refs.menu;
-          this.detachToTarget.appendChild(this.menuEl);
-          resolve();
-        });
-      });
-    },
-    removeMenu() {
-      if (this.menuEl && this.menuEl.parentNode)
-        this.menuEl.remove();
-    }
-  },
-  mounted() {
-    var _a;
-    const wrapper = this.$el;
-    this.activatorEl = wrapper.firstElementChild;
-    wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    if (this.overlay) {
-      this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
-      wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
-    }
-    if (this.modelValue)
-      this.toggleMenu({ type: "click", target: this.activatorEl });
-  },
-  beforeUnmount() {
-    this.removeMenu();
-    if (this.overlay && this.overlayEl.parentNode)
-      this.overlayEl.remove();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    modelValue(bool) {
-      if (!!bool !== this.menuVisible)
-        this.toggleMenu({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeMenu();
-      this.insertMenu();
     }
   }
 };
@@ -4125,9 +4274,9 @@ const _sfc_main$q = {
   }
 };
 var wOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", render$q]]);
-const _hoisted_1$f = { class: "w-parallax" };
+const _hoisted_1$g = { class: "w-parallax" };
 function render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$f);
+  return openBlock(), createElementBlock("div", _hoisted_1$g);
 }
 var wParallax_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$p = {
@@ -4137,7 +4286,7 @@ const _sfc_main$p = {
   data: () => ({})
 };
 var wParallax = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", render$p]]);
-const _hoisted_1$e = ["viewBox"];
+const _hoisted_1$f = ["viewBox"];
 const _hoisted_2$9 = ["cx", "cy", "r", "stroke-dasharray", "stroke-width"];
 const _hoisted_3$8 = ["viewBox"];
 const _hoisted_4$7 = ["cx", "cy", "r", "stroke-width", "stroke-linecap", "stroke-dasharray"];
@@ -4164,7 +4313,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
           "stroke-dasharray": _ctx.circleCircumference,
           "stroke-width": $props.stroke
         }, null, 10, _hoisted_2$9)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$e)),
+      ], 8, _hoisted_1$f)),
       (openBlock(), createElementBlock("svg", {
         class: "w-progress__progress",
         viewBox: `${$options.circleCenter / 2} ${$options.circleCenter / 2} ${$options.circleCenter} ${$options.circleCenter}`,
@@ -4263,7 +4412,7 @@ const _sfc_main$o = {
   }
 };
 var wProgress = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", render$o]]);
-const _hoisted_1$d = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
+const _hoisted_1$e = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
 const _hoisted_2$8 = ["for"];
 const _hoisted_3$7 = ["for", "innerHTML"];
 const _hoisted_4$6 = ["for"];
@@ -4292,7 +4441,7 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
         onChange: _cache[1] || (_cache[1] = ($event) => $options.onInput($event)),
         "aria-checked": _ctx.inputValue || "false",
         role: "radio"
-      }, null, 40, _hoisted_1$d),
+      }, null, 40, _hoisted_1$e),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -4402,7 +4551,7 @@ const _sfc_main$n = {
   }
 };
 var wRadio = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", render$n]]);
-const _hoisted_1$c = ["innerHTML"];
+const _hoisted_1$d = ["innerHTML"];
 function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_radio = resolveComponent("w-radio");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: _ctx.inputValue, disabled: _ctx.isDisabled }, {
@@ -4447,7 +4596,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
             }) : item.label ? (openBlock(), createElementBlock("div", {
               key: 2,
               innerHTML: item.label
-            }, null, 8, _hoisted_1$c)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_1$d)) : createCommentVNode("", true)
           ]),
           _: 2
         }, 1032, ["model-value", "onUpdate:modelValue", "name", "label", "label-on-left", "color", "disabled", "readonly", "class"]);
@@ -4505,12 +4654,13 @@ const _sfc_main$m = {
   }
 };
 var wRadios = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", render$m]]);
-const _hoisted_1$b = ["id", "name", "value"];
+const _hoisted_1$c = ["id", "name", "value"];
 const _hoisted_2$7 = ["disabled", "onMouseenter", "onClick", "tabindex"];
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.rating, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
     valid: _ctx.valid,
-    onReset: _cache[4] || (_cache[4] = ($event) => {
+    "onUpdate:valid": _cache[4] || (_cache[4] = ($event) => _ctx.valid = $event),
+    onReset: _cache[5] || (_cache[5] = ($event) => {
       _ctx.$emit("update:modelValue", $data.rating = null);
       _ctx.$emit("input", null);
     }),
@@ -4522,7 +4672,7 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.inputName,
         type: "hidden",
         value: $data.rating
-      }, null, 8, _hoisted_1$b),
+      }, null, 8, _hoisted_1$c),
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.max, (i) => {
         return openBlock(), createElementBlock(Fragment, { key: i }, [
           _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
@@ -4661,7 +4811,7 @@ const _sfc_main$l = {
   }
 };
 var wRating = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", render$l]]);
-const _hoisted_1$a = ["for"];
+const _hoisted_1$b = ["for"];
 const _hoisted_2$6 = ["for", "innerHTML"];
 const _hoisted_3$6 = ["aria-expanded", "aria-owns", "aria-activedescendant"];
 const _hoisted_4$5 = {
@@ -4693,7 +4843,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-select--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_1$a)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_1$b)) : $props.label ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "w-select__label w-select__label--left w-form-el-shakable",
           for: `w-select--${_ctx._.uid}`,
@@ -4705,7 +4855,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
         "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => _ctx.showMenu = $event),
         "menu-class": `w-select__menu ${$props.menuClass || ""}`,
         transition: "slide-fade-down",
-        "detach-to": ($props.menuProps || {}).detachTo !== void 0 ? ($props.menuProps || {}).detachTo : ".w-app",
+        "append-to": ($props.menuProps || {}).appendTo !== void 0 ? ($props.menuProps || {}).appendTo : ".w-app",
         "align-left": "",
         custom: "",
         "min-width": "activator"
@@ -4834,7 +4984,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
           ]), 1032, ["model-value", "onUpdate:modelValue", "onItemSelect", "onKeydown:escape", "items", "multiple", "add-ids", "no-unselect", "selection-color", "item-color-key"])
         ]),
         _: 3
-      }, 16, ["modelValue", "menu-class", "detach-to"]),
+      }, 16, ["modelValue", "menu-class", "append-to"]),
       $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -5005,8 +5155,9 @@ const _sfc_main$k = {
     openMenu() {
       this.showMenu = true;
       setTimeout(() => {
+        var _a;
         const itemIndex = this.inputValue.length ? this.inputValue[0].index : 0;
-        this.$refs["w-list"].$el.querySelector(`#w-select-menu--${this._.uid}_item-${itemIndex + 1}`).focus();
+        (_a = this.$refs["w-list"].$el.querySelector(`#w-select-menu--${this._.uid}_item-${itemIndex + 1}`)) == null ? void 0 : _a.focus();
       }, 100);
     },
     closeMenu() {
@@ -5030,7 +5181,7 @@ const _sfc_main$k = {
   }
 };
 var wSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", render$k]]);
-const _hoisted_1$9 = ["for"];
+const _hoisted_1$a = ["for"];
 const _hoisted_2$5 = ["for", "innerHTML"];
 const _hoisted_3$5 = { class: "w-slider__track-wrap" };
 const _hoisted_4$4 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-readonly"];
@@ -5062,7 +5213,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
         for: `button--${_ctx._.uid}`
       }, [
         renderSlot(_ctx.$slots, "label-left")
-      ], 8, _hoisted_1$9)) : $props.labelLeft ? (openBlock(), createElementBlock("label", {
+      ], 8, _hoisted_1$a)) : $props.labelLeft ? (openBlock(), createElementBlock("label", {
         key: 1,
         class: "w-slider__label w-slider__label--left w-form-el-shakable",
         for: `button--${_ctx._.uid}`,
@@ -5317,21 +5468,21 @@ const _sfc_main$j = {
   }
 };
 var wSlider = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", render$j]]);
-const _hoisted_1$8 = { key: 0 };
+const _hoisted_1$9 = { key: 0 };
 function render$i(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.value || $props.value === void 0 ? (openBlock(), createElementBlock("div", {
+  return $props.modelValue || $props.modelValue === void 0 ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(["w-spinner", $options.classes]),
     style: normalizeStyle($options.styles)
   }, [
-    $options.isThreeDots ? (openBlock(), createElementBlock("span", _hoisted_1$8)) : createCommentVNode("", true)
+    $options.isThreeDots ? (openBlock(), createElementBlock("span", _hoisted_1$9)) : createCommentVNode("", true)
   ], 6)) : createCommentVNode("", true);
 }
 var wSpinner_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$i = {
   name: "w-spinner",
   props: {
-    value: {},
+    modelValue: {},
     color: { type: String, default: "primary" },
     xs: { type: Boolean },
     sm: { type: Boolean },
@@ -5368,9 +5519,9 @@ const _sfc_main$i = {
   }
 };
 var wSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$i]]);
-const _hoisted_1$7 = { class: "w-steps" };
+const _hoisted_1$8 = { class: "w-steps" };
 function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$7);
+  return openBlock(), createElementBlock("div", _hoisted_1$8);
 }
 var wSteps_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$h = {
@@ -5380,7 +5531,7 @@ const _sfc_main$h = {
   data: () => ({})
 };
 var wSteps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$h]]);
-const _hoisted_1$6 = ["id", "name", "checked", "disabled", "readonly", "aria-readonly", "required", "tabindex", "aria-checked"];
+const _hoisted_1$7 = ["id", "name", "checked", "disabled", "readonly", "aria-readonly", "required", "tabindex", "aria-checked"];
 const _hoisted_2$4 = ["for"];
 const _hoisted_3$4 = ["for", "innerHTML"];
 const _hoisted_4$3 = ["for"];
@@ -5411,7 +5562,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
         onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("focus", $event)),
         "aria-checked": $data.isOn || "false",
         role: "switch"
-      }, null, 40, _hoisted_1$6),
+      }, null, 40, _hoisted_1$7),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -5523,15 +5674,15 @@ const _sfc_main$g = {
   }
 };
 var wSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$g]]);
-const _hoisted_1$5 = { class: "w-tabs__content" };
+const _hoisted_1$6 = { class: "w-tabs__content" };
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
 const _sfc_main$f = {};
 var TabContent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$f]]);
-const _hoisted_1$4 = ["onClick", "onFocus", "tabindex", "onKeypress", "aria-selected"];
+const _hoisted_1$5 = ["onClick", "onFocus", "tabindex", "onKeypress", "aria-selected"];
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 0,
@@ -5577,7 +5728,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
               innerHTML: item[$props.itemTitleKey]
             }, null, 8, _hoisted_2$3)
           ])
-        ], 42, _hoisted_1$4);
+        ], 42, _hoisted_1$5);
       }), 128)),
       _ctx.$slots["tabs-bar-extra"] ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
         renderSlot(_ctx.$slots, "tabs-bar-extra")
@@ -5785,7 +5936,7 @@ const _sfc_main$e = {
   }
 };
 var index = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", render$e]]);
-const _hoisted_1$3 = { ref: "colgroup" };
+const _hoisted_1$4 = { ref: "colgroup" };
 const _hoisted_2$2 = ["width"];
 const _hoisted_3$2 = { key: 0 };
 const _hoisted_4$1 = ["onClick"];
@@ -5828,7 +5979,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
       onMouseover: _cache[2] || (_cache[2] = (...args) => $options.onMouseOver && $options.onMouseOver(...args)),
       onMouseout: _cache[3] || (_cache[3] = (...args) => $options.onMouseOut && $options.onMouseOut(...args))
     }, [
-      createElementVNode("colgroup", _hoisted_1$3, [
+      createElementVNode("colgroup", _hoisted_1$4, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, i) => {
           return openBlock(), createElementBlock("col", {
             class: "w-table__col",
@@ -6266,7 +6417,7 @@ const _sfc_main$d = {
   }
 };
 var wTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", render$d]]);
-const _hoisted_1$2 = ["role", "aria-pressed", "tabindex"];
+const _hoisted_1$3 = ["role", "aria-pressed", "tabindex"];
 function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps({ class: "w-tag" }, toHandlers(_ctx.$attrs), {
     onClick: _cache[1] || (_cache[1] = ($event) => {
@@ -6294,7 +6445,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
       role: "icon",
       "aria-hidden": "true"
     })) : createCommentVNode("", true)
-  ], 16, _hoisted_1$2);
+  ], 16, _hoisted_1$3);
 }
 var wTag_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$c = {
@@ -6346,7 +6497,7 @@ const _sfc_main$c = {
   }
 };
 var wTag = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", render$c]]);
-const _hoisted_1$1 = ["for"];
+const _hoisted_1$2 = ["for"];
 const _hoisted_2$1 = ["for", "innerHTML"];
 const _hoisted_3$1 = ["id", "name", "placeholder", "rows", "cols", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
 const _hoisted_4 = ["for"];
@@ -6373,7 +6524,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-textarea--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_1$1)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_1$2)) : $props.label ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "w-textarea__label w-textarea__label--left w-form-el-shakable",
           for: `w-textarea--${_ctx._.uid}`,
@@ -6500,7 +6651,7 @@ const _sfc_main$b = {
       return listeners;
     },
     hasValue() {
-      return this.inputValue;
+      return this.inputValue || this.inputValue === 0;
     },
     hasLabel() {
       return this.label || this.$slots.default;
@@ -6597,11 +6748,11 @@ const _sfc_main$b = {
   }
 };
 var wTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", render$b]]);
-const _hoisted_1 = { class: "w-timeline" };
+const _hoisted_1$1 = { class: "w-timeline" };
 const _hoisted_2 = ["innerHTML"];
 const _hoisted_3 = ["innerHTML"];
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("ul", _hoisted_1, [
+  return openBlock(), createElementBlock("ul", _hoisted_1$1, [
     (openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item, i) => {
       return openBlock(), createElementBlock("li", {
         class: "w-timeline-item",
@@ -6696,41 +6847,32 @@ const _sfc_main$9 = {
   }
 };
 var wToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$9]]);
+const _hoisted_1 = { class: "w-tooltip-wrap" };
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["w-tooltip-wrap", { "w-tooltip-wrap--attached": !$props.detachTo }]),
-    ref: "wrapper"
-  }, [
-    renderSlot(_ctx.$slots, "activator", { on: $options.eventHandlers }),
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
     createVNode(Transition, {
       name: $options.transitionName,
       appear: ""
     }, {
       default: withCtx(() => [
-        withDirectives((openBlock(), createElementBlock("div", {
+        _ctx.detachableVisible ? (openBlock(), createElementBlock("div", {
           class: normalizeClass(["w-tooltip", $options.classes]),
-          ref: (el) => _ctx.tooltipEl = el,
+          ref: "detachable",
           key: _ctx._.uid,
           style: normalizeStyle($options.styles)
         }, [
-          $props.bgColor ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass($props.color)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)) : renderSlot(_ctx.$slots, "default", { key: 1 })
-        ], 6)), [
-          [vShow, _ctx.showTooltip]
-        ])
+          renderSlot(_ctx.$slots, "default")
+        ], 6)) : createCommentVNode("", true)
       ]),
       _: 3
     }, 8, ["name"])
-  ], 2);
+  ]);
 }
 var wTooltip_vue_vue_type_style_index_0_lang = "";
-const marginFromWindowSide = 4;
 const _sfc_main$8 = {
   name: "w-tooltip",
+  mixins: [DetachableMixin],
   props: {
     modelValue: {},
     showOnClick: { type: Boolean },
@@ -6742,25 +6884,18 @@ const _sfc_main$8 = {
     round: { type: Boolean },
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
-    detachTo: {},
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] }
+    persistent: { type: Boolean },
+    delay: { type: Number }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    showTooltip: false,
-    coordinates: {
+    detachableVisible: false,
+    hoveringActivator: false,
+    detachableCoords: {
       top: 0,
-      left: 0,
-      width: 0,
-      height: 0
+      left: 0
     },
-    activatorEl: null,
-    tooltipEl: null,
+    detachableEl: null,
     timeoutId: null
   }),
   computed: {
@@ -6771,68 +6906,17 @@ const _sfc_main$8 = {
       const direction = this.position.replace(/top|bottom/, (m) => ({ top: "up", bottom: "down" })[m]);
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
-    detachToTarget() {
-      let target = this.detachTo || ".w-app";
-      if (target === true)
-        target = ".w-app";
-      else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
-      else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
-        consoleWarn("Invalid node provided in w-tooltip `attach-to`. Falling back to .w-app.");
-      }
-      if (typeof target === "string")
-        target = document.querySelector(target);
-      if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : ".w-app"}`);
-        target = document.querySelector(".w-app");
-      }
-      return target;
-    },
-    tooltipParentEl() {
-      return this.detachTo ? this.detachToTarget : this.$refs.wrapper;
-    },
-    position() {
-      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
-    },
-    tooltipCoordinates() {
-      const coords = {};
-      const { top, left, width, height } = this.coordinates;
-      switch (this.position) {
-        case "top": {
-          coords.top = top;
-          coords.left = left + width / 2;
-          break;
-        }
-        case "bottom": {
-          coords.top = top + height;
-          coords.left = left + width / 2;
-          break;
-        }
-        case "left": {
-          coords.top = top + height / 2;
-          coords.left = left;
-          break;
-        }
-        case "right": {
-          coords.top = top + height / 2;
-          coords.left = left + width;
-          break;
-        }
-      }
-      return coords;
-    },
     classes() {
       return __spreadProps(__spreadValues({
-        [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor
       }, this.tooltipClasses), {
-        [`w-tooltip--${this.position}`]: true,
+        [`w-tooltip--${this.position}`]: !this.noPosition,
+        [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
         "w-tooltip--shadow": this.shadow,
         "w-tooltip--fixed": this.fixed,
-        "w-tooltip--active": this.showTooltip,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
         "w-tooltip--custom-transition": this.transition
       });
@@ -6840,11 +6924,12 @@ const _sfc_main$8 = {
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: `${~~this.tooltipCoordinates.top}px`,
-        left: `${~~this.tooltipCoordinates.left}px`
+        top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
+        left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
+        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
-    eventHandlers() {
+    activatorEventHandlers() {
       let handlers = {};
       if (this.showOnClick)
         handlers = { click: this.toggle };
@@ -6852,10 +6937,16 @@ const _sfc_main$8 = {
         handlers = {
           focus: this.toggle,
           blur: this.toggle,
-          mouseenter: this.toggle,
-          mouseleave: this.toggle
+          mouseenter: (e) => {
+            this.hoveringActivator = true;
+            this.open(e);
+          },
+          mouseleave: (e) => {
+            this.hoveringActivator = false;
+            this.close();
+          }
         };
-        if ("ontouchstart" in window)
+        if (typeof window !== "undefined" && "ontouchstart" in window)
           handlers.click = this.toggle;
       }
       return handlers;
@@ -6863,8 +6954,8 @@ const _sfc_main$8 = {
   },
   methods: {
     toggle(e) {
-      let shouldShowTooltip = this.showTooltip;
-      if ("ontouchstart" in window) {
+      let shouldShowTooltip = this.detachableVisible;
+      if (typeof window !== "undefined" && "ontouchstart" in window) {
         if (e.type === "click")
           shouldShowTooltip = !shouldShowTooltip;
       } else if (e.type === "click" && this.showOnClick)
@@ -6874,89 +6965,45 @@ const _sfc_main$8 = {
       else if (["mouseleave", "blur"].includes(e.type) && !this.showOnClick)
         shouldShowTooltip = false;
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowTooltip) {
-        this.coordinates = this.getCoordinates(e);
-        this.timeoutId = setTimeout(() => {
-          this.showTooltip = true;
-          this.$emit("update:modelValue", true);
-          this.$emit("input", true);
-          this.$emit("open");
-        }, 10);
-      } else {
-        this.showTooltip = false;
-        this.$emit("update:modelValue", false);
-        this.$emit("input", false);
-        this.$emit("close");
-      }
+      if (shouldShowTooltip)
+        this.open(e);
+      else
+        this.close();
+    },
+    async open(e) {
+      if (this.delay)
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      this.detachableVisible = true;
+      if (this.activator)
+        this.activatorEl = e.target;
+      await this.insertInDOM();
+      if (this.minWidth === "activator")
+        this.activatorWidth = this.activatorEl.offsetWidth;
+      if (!this.noPosition)
+        this.computeDetachableCoords(e);
+      this.timeoutId = setTimeout(() => {
+        this.$emit("update:modelValue", true);
+        this.$emit("input", true);
+        this.$emit("open");
+      }, 0);
+      if (!this.persistent)
+        document.addEventListener("mousedown", this.onOutsideMousedown);
+      if (!this.noPosition)
+        window.addEventListener("resize", this.onResize);
     },
-    getCoordinates() {
-      const { top, left, width, height } = this.activatorEl.getBoundingClientRect();
-      let coords = { top, left, width, height };
-      if (!this.fixed) {
-        const { top: targetTop, left: targetLeft } = this.tooltipParentEl.getBoundingClientRect();
-        coords = __spreadProps(__spreadValues({}, coords), { top: top - targetTop, left: left - targetLeft });
-      }
-      const tooltip = this.tooltipEl;
-      tooltip.style.visibility = "hidden";
-      tooltip.style.display = "table";
-      const computedStyles2 = window.getComputedStyle(tooltip, null);
-      if (this.position === "top" && top - tooltip.offsetHeight < 0) {
-        const margin = -parseInt(computedStyles2.getPropertyValue("margin-top"));
-        coords.top -= top - tooltip.offsetHeight - margin - marginFromWindowSide;
-      } else if (this.position === "left" && left - tooltip.offsetWidth < 0) {
-        const margin = -parseInt(computedStyles2.getPropertyValue("margin-left"));
-        coords.left -= left - tooltip.offsetWidth - margin - marginFromWindowSide;
-      } else if (this.position === "right" && left + width + tooltip.offsetWidth > window.innerWidth) {
-        const margin = parseInt(computedStyles2.getPropertyValue("margin-left"));
-        coords.left -= left + width + tooltip.offsetWidth - window.innerWidth + margin + marginFromWindowSide;
-      } else if (this.position === "bottom" && top + height + tooltip.offsetHeight > window.innerHeight) {
-        const margin = parseInt(computedStyles2.getPropertyValue("margin-top"));
-        coords.top -= top + height + tooltip.offsetHeight - window.innerHeight + margin + marginFromWindowSide;
-      }
-      if (this.transition) {
-        if (["top", "bottom"].includes(this.position))
-          coords.left -= tooltip.offsetWidth / 2;
-        if (["left", "right"].includes(this.position))
-          coords.top -= tooltip.offsetHeight / 2;
-        if (this.position === "left")
-          coords.left -= tooltip.offsetWidth;
-        if (this.position === "top")
-          coords.top -= tooltip.offsetHeight;
+    async close(force = false) {
+      if (!this.detachableVisible)
+        return;
+      if (this.showOnHover && !force) {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        if (this.showOnHover && this.hoveringActivator)
+          return;
       }
-      tooltip.style.visibility = null;
-      tooltip.style.display = "none";
-      return coords;
-    },
-    insertTooltip() {
-      const wrapper = this.$refs.wrapper;
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-      this.detachToTarget.appendChild(this.tooltipEl);
-    },
-    removeTooltip() {
-      if (this.tooltipEl && this.tooltipEl.parentNode)
-        this.tooltipEl.remove();
-    }
-  },
-  mounted() {
-    this.activatorEl = this.$refs.wrapper.firstElementChild;
-    if (this.detachTo)
-      this.insertTooltip();
-    if (this.modelValue)
-      this.toggle({ type: "click", target: this.activatorEl });
-  },
-  beforeUnmount() {
-    this.removeTooltip();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    modelValue(bool) {
-      if (bool !== this.showTooltip)
-        this.toggle({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeTooltip();
-      this.insertTooltip();
+      this.$emit("update:modelValue", this.detachableVisible = false);
+      this.$emit("input", false);
+      this.$emit("close");
+      document.removeEventListener("mousedown", this.onOutsideMousedown);
+      window.removeEventListener("resize", this.onResize);
     }
   }
 };