wave-ui 2.26.0 → 2.29.0

package/dist/wave-ui.es.js

@@ -4,8 +4,6 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __reflectGet = Reflect.get;
-var __reflectSet = Reflect.set;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -35,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, vShow, resolveDirective, KeepAlive } 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, vShow } from "vue";
 const config = reactive({
   breakpoints: {
     xs: 600,
@@ -502,11 +500,11 @@ let WaveUI = _WaveUI;
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-const _hoisted_1$r = ["aria-expanded"];
-const _hoisted_2$e = ["onClick", "onFocus", "onKeypress", "tabindex"];
-const _hoisted_3$b = ["innerHTML"];
-const _hoisted_4$a = ["innerHTML"];
-function render$N(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$s = ["aria-expanded"];
+const _hoisted_2$f = ["onClick", "onFocus", "onKeypress", "tabindex"];
+const _hoisted_3$c = ["innerHTML"];
+const _hoisted_4$b = ["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");
   return openBlock(), createElementBlock("div", {
@@ -527,7 +525,7 @@ function render$N(_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,
@@ -535,7 +533,7 @@ function render$N(_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),
@@ -550,18 +548,18 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("div", {
               class: "grow",
               innerHTML: item[$props.itemTitleKey]
-            }, null, 8, _hoisted_3$b)
+            }, null, 8, _hoisted_3$c)
           ]),
           $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$e),
+          }, null, 8, ["icon", "onClick", "class"])) : createCommentVNode("", true)
+        ], 42, _hoisted_2$f),
         createVNode(_component_w_transition_expand, { y: "" }, {
           default: withCtx(() => [
             item._expanded ? (openBlock(), createElementBlock("div", {
@@ -581,24 +579,25 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createElementVNode("div", {
                   innerHTML: item[$props.itemContentKey]
-                }, null, 8, _hoisted_4$a)
+                }, null, 8, _hoisted_4$b)
               ])
             ], 2)) : createCommentVNode("", true)
           ]),
           _: 2
         }, 1024)
-      ], 10, _hoisted_1$r);
+      ], 10, _hoisted_1$s);
     }), 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$N = {
+const _sfc_main$O = {
   name: "w-accordion",
   props: {
     modelValue: { type: Array },
@@ -670,9 +669,9 @@ const _sfc_main$N = {
     }
   }
 };
-var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
-const _hoisted_1$q = { class: "w-alert__content" };
-function render$M(_ctx, _cache, $props, $setup, $data, $options) {
+var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
+const _hoisted_1$r = { 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");
   return $data.show ? (openBlock(), createElementBlock("div", mergeProps({
@@ -689,7 +688,7 @@ function render$M(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       })) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_1$q, [
+      createElementVNode("div", _hoisted_1$r, [
         renderSlot(_ctx.$slots, "default")
       ]),
       $props.dismiss ? (openBlock(), createBlock(_component_w_button, {
@@ -709,7 +708,7 @@ function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16)) : createCommentVNode("", true);
 }
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$M = {
+const _sfc_main$N = {
   name: "w-alert",
   props: {
     modelValue: { default: true },
@@ -785,8 +784,8 @@ const _sfc_main$M = {
     }
   }
 };
-var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", render$M]]);
-function render$L(_ctx, _cache, $props, $setup, $data, $options) {
+var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
+function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_alert = resolveComponent("w-alert");
   return openBlock(), createBlock(TransitionGroup, {
     class: normalizeClass(["w-notification-manager", { "w-notification-manager--left": $options.conf.align === "left" }]),
@@ -817,7 +816,7 @@ function render$L(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["class", "name"]);
 }
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$L = {
+const _sfc_main$M = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -842,7 +841,7 @@ const _sfc_main$L = {
     delete this.notifManager;
   }
 };
-var NotificationManager = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", render$L]]);
+var NotificationManager = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", render$M]]);
 const { css: cssConfig } = config;
 const entries = Object.entries(config.breakpoints);
 const breakpoints = entries.map(([label, max], i) => {
@@ -956,10 +955,10 @@ var DynamicCSS = () => {
     styles += genBreakpointLayoutClasses();
   return styles;
 };
-function render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function render$L(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_notification_manager = resolveComponent("notification-manager");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["w-app", { "theme--dark": $props.dark, "d-block": $props.block }])
+    class: normalizeClass(["w-app", $options.classes])
   }, [
     renderSlot(_ctx.$slots, "default"),
     createVNode(_component_notification_manager)
@@ -968,17 +967,45 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
 var wApp_vue_vue_type_style_index_0_lang = "";
 const breakpointsNames = Object.keys(config.breakpoints);
 const breakpointsValues = Object.values(config.breakpoints);
-const _sfc_main$K = {
+const _sfc_main$L = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
-    block: { type: Boolean }
+    block: { type: Boolean },
+    row: { type: Boolean },
+    alignCenter: { type: Boolean },
+    alignEnd: { type: Boolean },
+    justifyCenter: { type: Boolean },
+    justifyEnd: { type: Boolean },
+    justifySpaceBetween: { type: Boolean },
+    justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
+    textCenter: { type: Boolean },
+    textRight: { type: Boolean }
   },
   components: { NotificationManager },
   data: () => ({
     currentBreakpoint: null,
     notifManager: null
   }),
+  computed: {
+    classes() {
+      return {
+        "d-block": this.block,
+        row: this.row,
+        "align-center": this.alignCenter,
+        "align-end": this.alignEnd,
+        "justify-center": this.justifyCenter,
+        "justify-end": this.justifyEnd,
+        "justify-space-between": this.justifySpaceBetween,
+        "justify-space-around": this.justifySpaceAround,
+        "justify-space-evenly": this.justifySpaceEvenly,
+        "text-center": this.textCenter,
+        "text-right": this.textRight,
+        "theme--dark": this.dark
+      };
+    }
+  },
   methods: {
     getBreakpoint() {
       const width = window.innerWidth;
@@ -1018,8 +1045,8 @@ const _sfc_main$K = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-var wApp = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
-function render$J(_ctx, _cache, $props, $setup, $data, $options) {
+var wApp = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", render$L]]);
+function render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({ class: "w-badge-wrap" }, toHandlers(_ctx.$attrs)), [
     renderSlot(_ctx.$slots, "default"),
     createVNode(Transition, {
@@ -1045,7 +1072,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16);
 }
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$J = {
+const _sfc_main$K = {
   name: "w-badge",
   props: {
     modelValue: { default: true },
@@ -1107,9 +1134,9 @@ const _sfc_main$J = {
     }
   }
 };
-var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", render$J]]);
-const _hoisted_1$p = ["innerHTML"];
-function render$I(_ctx, _cache, $props, $setup, $data, $options) {
+var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
+const _hoisted_1$q = ["innerHTML"];
+function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-breadcrumbs", $options.classes])
@@ -1160,13 +1187,13 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
         }) : (openBlock(), createElementBlock("span", {
           key: `${i}f`,
           innerHTML: item[$props.itemLabelKey]
-        }, null, 8, _hoisted_1$p))
+        }, null, 8, _hoisted_1$q))
       ], 64);
     }), 256))
   ], 2);
 }
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$I = {
+const _sfc_main$J = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1197,12 +1224,12 @@ const _sfc_main$I = {
     }
   }
 };
-var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
-const _hoisted_1$o = {
+var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", render$J]]);
+const _hoisted_1$p = {
   key: 0,
   class: "w-button__loader"
 };
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
+const _hoisted_2$e = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
   /* @__PURE__ */ createElementVNode("circle", {
     cx: "20",
     cy: "20",
@@ -1213,7 +1240,7 @@ const _hoisted_2$d = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 4
     "stroke-linecap": "round"
   })
 ], -1);
-function render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createBlock(resolveDynamicComponent($props.route ? "a" : "button"), mergeProps({
     class: ["w-button", $options.classes],
@@ -1230,9 +1257,9 @@ function render$H(_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$o, [
+          $props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
             renderSlot(_ctx.$slots, "loading", {}, () => [
-              _hoisted_2$d
+              _hoisted_2$e
             ])
           ])) : createCommentVNode("", true)
         ]),
@@ -1243,7 +1270,7 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["type", "href", "class", "disabled", "style"]);
 }
 var wButton_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$H = {
+const _sfc_main$I = {
   name: "w-button",
   props: {
     color: { type: String },
@@ -1335,7 +1362,106 @@ const _sfc_main$H = {
     }
   }
 };
-var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", render$H]]);
+var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
+const objectifyClasses = (classes = {}) => {
+  if (typeof classes === "string")
+    classes = { [classes]: true };
+  else if (Array.isArray(classes))
+    classes = { [classes.join(" ")]: true };
+  return classes;
+};
+const _hoisted_1$o = ["innerHTML"];
+function render$H(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_w_image = resolveComponent("w-image");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["w-card", $options.classes]),
+    style: normalizeStyle($options.styles)
+  }, [
+    _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(["w-card__title", __spreadValues({ "w-card__title--has-toolbar": $options.titleHasToolbar }, $options.titleClasses)])
+    }, [
+      renderSlot(_ctx.$slots, "title")
+    ], 2)) : $props.title ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(["w-card__title", $options.titleClasses]),
+      innerHTML: $props.title
+    }, null, 10, _hoisted_1$o)) : createCommentVNode("", true),
+    $props.image ? (openBlock(), createBlock(_component_w_image, mergeProps({
+      key: 2,
+      class: "w-card__image",
+      src: $props.image
+    }, $options.imgProps), {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "image-content")
+      ]),
+      _: 3
+    }, 16, ["src"])) : createCommentVNode("", true),
+    createElementVNode("div", {
+      class: normalizeClass(["w-card__content", $options.contentClasses])
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 2),
+    _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+      key: 3,
+      class: normalizeClass(["w-card__actions", { "w-card__actions--has-toolbar": $options.actionsHasToolbar }])
+    }, [
+      renderSlot(_ctx.$slots, "actions")
+    ], 2)) : createCommentVNode("", true)
+  ], 6);
+}
+var wCard_vue_vue_type_style_index_0_lang = "";
+const _sfc_main$H = {
+  name: "w-card",
+  props: {
+    color: { type: String },
+    bgColor: { type: String },
+    shadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    tile: { type: Boolean },
+    title: { type: String },
+    image: { type: String },
+    imageProps: { type: Object },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] }
+  },
+  emits: [],
+  computed: {
+    titleClasses() {
+      return objectifyClasses(this.titleClass);
+    },
+    contentClasses() {
+      return objectifyClasses(this.contentClass);
+    },
+    titleHasToolbar() {
+      const { title } = this.$slots;
+      return title && title().map((vnode) => vnode.type.name).join("").includes("w-toolbar");
+    },
+    actionsHasToolbar() {
+      const { actions } = this.$slots;
+      return actions && actions().map((vnode) => vnode.type.name).join("").includes("w-toolbar");
+    },
+    imgProps() {
+      return __spreadValues({
+        tag: "div",
+        ratio: 1 / 2
+      }, this.imageProps);
+    },
+    classes() {
+      return {
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor,
+        "w-card--no-border": this.noBorder,
+        "w-card--tile": this.tile,
+        "w-card--shadow": this.shadow
+      };
+    },
+    styles() {
+      return false;
+    }
+  }
+};
+var wCard = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", render$H]]);
 var FormElementMixin = {
   inject: {
     formRegister: { default: null },
@@ -1370,9 +1496,9 @@ var FormElementMixin = {
   }
 };
 const _hoisted_1$n = ["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", {
+const _hoisted_2$d = ["for"];
+const _hoisted_3$b = ["for", "innerHTML"];
+const _hoisted_4$a = /* @__PURE__ */ createElementVNode("svg", {
   width: "11px",
   height: "9px",
   viewbox: "0 0 12 9"
@@ -1380,7 +1506,7 @@ const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("svg", {
   /* @__PURE__ */ createElementVNode("polyline", { points: "1 5 4 8 10 2" })
 ], -1);
 const _hoisted_5$8 = [
-  _hoisted_4$9
+  _hoisted_4$a
 ];
 const _hoisted_6$5 = ["for"];
 const _hoisted_7$5 = ["for", "innerHTML"];
@@ -1418,12 +1544,12 @@ function render$G(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-checkbox--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_2$c)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_2$d)) : $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$a)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_3$b)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", {
         class: normalizeClass(["w-checkbox__input", this.color]),
@@ -1629,92 +1755,140 @@ const _sfc_main$F = {
   }
 };
 var wCheckboxes = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", render$F]]);
-const _hoisted_1$l = ["innerHTML"];
+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");
 function render$E(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_w_image = resolveComponent("w-image");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["w-card", $options.classes]),
-    style: normalizeStyle($options.styles)
-  }, [
-    _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(["w-card__title", { "w-card__title--has-toolbar": $options.titleHasToolbar, [$props.titleClass]: $props.titleClass || false }])
-    }, [
-      renderSlot(_ctx.$slots, "title")
-    ], 2)) : $props.title ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass(["w-card__title", $props.titleClass || false]),
-      innerHTML: $props.title
-    }, null, 10, _hoisted_1$l)) : createCommentVNode("", true),
-    $props.image ? (openBlock(), createBlock(_component_w_image, mergeProps({
-      key: 2,
-      class: "w-card__image",
-      src: $props.image
-    }, $options.imgProps), {
+  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, [
+    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), {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 2
+        }, 1040)
+      ]),
       default: withCtx(() => [
-        renderSlot(_ctx.$slots, "image-content")
+        createVNode(_component_w_flex, {
+          column: !$props.inline,
+          "align-center": ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", null, [
+              renderSlot(_ctx.$slots, "question", {}, () => [
+                _hoisted_2$c
+              ])
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["w-flex justify-end", $props.inline ? "ml2" : "mt2"])
+            }, [
+              !$props.noCancel ? (openBlock(), createBlock(_component_w_button, mergeProps({
+                key: 0,
+                class: "mr2"
+              }, $props.cancelButton, {
+                "bg-color": ($props.cancelButton || {}).bgColor || "error",
+                onClick: $options.onCancel
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "cancel", {}, () => [
+                    _hoisted_3$a
+                  ])
+                ]),
+                _: 3
+              }, 16, ["bg-color", "onClick"])) : createCommentVNode("", true),
+              createVNode(_component_w_button, mergeProps($props.confirmButton, {
+                "bg-color": ($props.confirmButton || {}).bgColor || "success",
+                onClick: $options.onConfirm
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "confirm", {}, () => [
+                    _hoisted_4$9
+                  ])
+                ]),
+                _: 3
+              }, 16, ["bg-color", "onClick"])
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["column"])
       ]),
       _: 3
-    }, 16, ["src"])) : createCommentVNode("", true),
-    createElementVNode("div", {
-      class: normalizeClass(["w-card__content", $props.contentClass || false])
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 2),
-    _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
-      key: 3,
-      class: normalizeClass(["w-card__actions", { "w-card__actions--has-toolbar": $options.actionsHasToolbar }])
-    }, [
-      renderSlot(_ctx.$slots, "actions")
-    ], 2)) : createCommentVNode("", true)
-  ], 6);
+    }, 16, ["modelValue"])
+  ]);
 }
-var wCard_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$E = {
-  name: "w-card",
+  name: "w-confirm",
   props: {
-    color: { type: String },
     bgColor: { type: String },
-    shadow: { type: Boolean },
-    noBorder: { type: Boolean },
-    tile: { type: Boolean },
-    title: { type: String },
-    image: { type: String },
-    imageProps: { type: Object },
-    titleClass: { type: String },
-    contentClass: { type: String }
+    color: { type: String },
+    icon: { type: String },
+    mainButton: { type: Object },
+    noCancel: { type: Boolean },
+    cancelButton: { type: [Boolean, Object] },
+    confirmButton: { type: Object },
+    inline: { type: Boolean },
+    menu: { type: Object },
+    noArrow: { 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 },
+    persistent: { type: Boolean },
+    transition: { type: String }
   },
-  emits: [],
+  emits: ["cancel", "confirm"],
+  data: () => ({
+    showPopup: false,
+    props: []
+  }),
   computed: {
-    titleHasToolbar() {
-      const { title } = this.$slots;
-      return title && title().map((vnode) => vnode.type.name).join("").includes("w-toolbar");
-    },
-    actionsHasToolbar() {
-      const { actions } = this.$slots;
-      return actions && actions().map((vnode) => vnode.type.name).join("").includes("w-toolbar");
-    },
-    imgProps() {
+    wMenuProps() {
       return __spreadValues({
-        tag: "div",
-        ratio: 1 / 2
-      }, this.imageProps);
-    },
-    classes() {
-      return {
-        [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor,
-        "w-card--no-border": this.noBorder,
-        "w-card--tile": this.tile,
-        "w-card--shadow": this.shadow
-      };
+        top: this.top,
+        bottom: this.bottom,
+        left: this.left,
+        right: this.right,
+        arrow: !this.noArrow,
+        alignTop: this.alignTop,
+        alignBottom: this.alignBottom,
+        alignLeft: this.alignLeft,
+        alignRight: this.alignRight,
+        persistent: this.persistent,
+        transition: this.transition
+      }, this.menu);
+    },
+    buttonProps() {
+      return __spreadValues({
+        bgColor: this.bgColor,
+        color: this.color,
+        icon: this.icon
+      }, this.mainButton);
+    }
+  },
+  methods: {
+    onCancel() {
+      this.$emit("cancel");
+      this.showPopup = false;
     },
-    styles() {
-      return false;
+    onConfirm() {
+      this.$emit("confirm");
+      this.showPopup = false;
     }
   }
 };
-var wCard = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", render$E]]);
+var wConfirm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", render$E]]);
 function render$D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-date-picker", $options.classes]),
@@ -2110,6 +2284,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 }
   },
@@ -2131,6 +2306,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
       };
@@ -2716,6 +2892,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)),
@@ -2737,9 +2914,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,
@@ -2777,7 +2954,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 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,
@@ -2889,7 +3066,8 @@ const _sfc_main$u = {
       inputNumberError: false,
       isFocused: false,
       inputFiles: [],
-      fileReader: null
+      fileReader: null,
+      isAutofilled: false
     };
   },
   computed: {
@@ -2906,7 +3084,7 @@ 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;
+      return this.inputValue || this.inputValue === 0 || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
     },
     hasLabel() {
       return this.label || this.$slots.default;
@@ -2920,7 +3098,7 @@ const _sfc_main$u = {
         "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,
@@ -2991,9 +3169,17 @@ const _sfc_main$u = {
       reader.readAsDataURL(original);
     }
   },
+  mounted() {
+    setTimeout(() => {
+      if (this.$refs.input.matches(":-webkit-autofill"))
+        this.isAutofilled = true;
+    }, 400);
+  },
   watch: {
     modelValue(value) {
       this.inputValue = value;
+      if (!value && value !== 0)
+        this.isAutofilled = false;
     }
   }
 };
@@ -3330,18 +3516,18 @@ const _sfc_main$t = {
   }
 };
 var wList = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", render$t]]);
-const _hoisted_1$g = {
-  class: "w-menu-wrap",
-  ref: "wrapper"
-};
+const _hoisted_1$g = { 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, [
     renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
-    createVNode(Transition, { name: $options.transitionName }, {
+    createVNode(Transition, {
+      name: $options.transitionName,
+      appear: ""
+    }, {
       default: withCtx(() => [
-        $props.custom ? withDirectives((openBlock(), createElementBlock("div", {
+        $props.custom && _ctx.menuVisible ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["w-menu", $options.classes]),
           ref: "menu",
@@ -3351,9 +3537,7 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
           style: normalizeStyle($options.styles)
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 38)), [
-          [vShow, _ctx.showMenu]
-        ]) : withDirectives((openBlock(), createBlock(_component_w_card, {
+        ], 38)) : _ctx.menuVisible ? (openBlock(), createBlock(_component_w_card, {
           key: 1,
           class: normalizeClass(["w-menu", $options.classes]),
           ref: "menu",
@@ -3361,8 +3545,8 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
           onMouseenter: _cache[4] || (_cache[4] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = true)),
           onMouseleave: _cache[5] || (_cache[5] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.closeMenu())),
           tile: $props.tile,
-          "title-class": $props.titleClass,
-          "content-class": $props.contentClass,
+          "title-class": $options.titleClasses,
+          "content-class": $options.contentClasses,
           shadow: $props.shadow,
           "no-border": $props.noBorder,
           style: normalizeStyle($options.styles)
@@ -3384,23 +3568,21 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
               renderSlot(_ctx.$slots, "actions")
             ])
           } : void 0
-        ]), 1032, ["tile", "title-class", "content-class", "shadow", "no-border", "class", "style"])), [
-          [vShow, _ctx.showMenu]
-        ])
+        ]), 1032, ["tile", "title-class", "content-class", "shadow", "no-border", "class", "style"])) : createCommentVNode("", true)
       ]),
       _: 3
     }, 8, ["name"]),
     $props.overlay ? (openBlock(), createBlock(_component_w_overlay, mergeProps({
       key: 0,
       ref: "overlay",
-      "model-value": _ctx.showMenu,
+      "model-value": _ctx.menuVisible,
       persistent: $props.persistent,
-      class: $props.overlayClass || null
+      class: $options.overlayClasses
     }, $props.overlayProps, {
       "z-index": ($props.zIndex || 200) - 1,
-      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.showMenu = false)
+      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.menuVisible = false)
     }), null, 16, ["model-value", "persistent", "class", "z-index"])) : createCommentVNode("", true)
-  ], 512);
+  ]);
 }
 var wMenu_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$s = {
@@ -3417,9 +3599,10 @@ const _sfc_main$s = {
     round: { type: Boolean },
     noBorder: { type: Boolean },
     transition: { type: String },
-    menuClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    menuClass: { type: [String, Object, Array] },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] },
+    arrow: { type: Boolean },
     detachTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -3433,14 +3616,14 @@ const _sfc_main$s = {
     zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] },
     overlay: { type: Boolean },
-    overlayClass: { type: String },
+    overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
     persistent: { type: Boolean },
     noPosition: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    showMenu: false,
+    menuVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
     menuCoordinates: {
@@ -3457,20 +3640,21 @@ const _sfc_main$s = {
       return this.transition || "scale-fade";
     },
     detachToTarget() {
-      let target = this.detachTo || ".w-app";
+      const defaultTarget = ".w-app";
+      let target = this.detachTo || defaultTarget;
       if (target === true)
-        target = ".w-app";
+        target = defaultTarget;
       else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
+        target = defaultTarget;
       else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
+        target = defaultTarget;
         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");
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
       }
       return target;
     },
@@ -3489,26 +3673,40 @@ const _sfc_main$s = {
     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);
+    },
+    titleClasses() {
+      return objectifyClasses(this.titleClass);
+    },
+    contentClasses() {
+      return objectifyClasses(this.contentClass);
+    },
+    overlayClasses() {
+      return objectifyClasses(this.overlayClass);
+    },
     classes() {
-      return {
+      return __spreadProps(__spreadValues({
         [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor,
-        [this.menuClass]: this.menuClass,
-        [`w-menu--${this.position}`]: true,
-        [`w-menu--align-${this.alignment}`]: this.alignment,
+        [`${this.bgColor}--bg`]: this.bgColor
+      }, this.menuClasses), {
+        [`w-menu--${this.position}`]: !this.noPosition,
+        [`w-menu--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-menu--tile": this.tile,
         "w-menu--card": !this.custom,
         "w-menu--round": this.round,
+        "w-menu--arrow": this.arrow,
         "w-menu--shadow": this.shadow,
         "w-menu--fixed": this.fixed
-      };
+      });
     },
     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,
-        minWidth: this.minWidth && this.menuMinWidth || null
+        minWidth: this.minWidth && this.menuMinWidth || null,
+        "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
       };
     },
     activatorEventHandlers() {
@@ -3529,8 +3727,9 @@ const _sfc_main$s = {
             }, 10);
           }
         };
-        if ("ontouchstart" in window)
+        if (typeof window !== "undefined" && "ontouchstart" in window) {
           handlers.click = this.toggleMenu;
+        }
       } else
         handlers = { click: this.toggleMenu };
       return handlers;
@@ -3538,7 +3737,7 @@ const _sfc_main$s = {
   },
   methods: {
     toggleMenu(e) {
-      let shouldShowMenu = this.showMenu;
+      let shouldShowMenu = this.menuVisible;
       if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
@@ -3551,35 +3750,40 @@ const _sfc_main$s = {
         shouldShowMenu = false;
       }
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowMenu)
+      if (shouldShowMenu) {
+        this.$emit("update:modelValue", this.menuVisible = true);
+        this.$emit("input", true);
+        this.$emit("open");
         this.openMenu(e);
-      else
+      } else
         this.closeMenu();
     },
-    openMenu(e) {
+    async openMenu(e) {
+      this.menuVisible = true;
+      await this.insertMenu();
       if (this.minWidth === "activator")
         this.activatorWidth = this.activatorEl.offsetWidth;
       if (!this.noPosition)
         this.computeMenuPosition(e);
       this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", this.showMenu = true);
+        this.$emit("update:modelValue", true);
         this.$emit("input", true);
         this.$emit("open");
-      }, 10);
+      }, 0);
       if (!this.persistent)
         document.addEventListener("mousedown", this.onOutsideMousedown);
       if (!this.noPosition)
         window.addEventListener("resize", this.onResize);
     },
     async closeMenu(force = false) {
-      if (!this.showMenu)
+      if (!this.menuVisible)
         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.showMenu = false);
+      this.$emit("update:modelValue", this.menuVisible = false);
       this.$emit("input", false);
       this.$emit("close");
       document.removeEventListener("mousedown", this.onOutsideMousedown);
@@ -3587,7 +3791,7 @@ const _sfc_main$s = {
     },
     onOutsideMousedown(e) {
       if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit("update:modelValue", this.showMenu = false);
+        this.$emit("update:modelValue", this.menuVisible = false);
         this.$emit("input", false);
         this.$emit("close");
         document.removeEventListener("mousedown", this.onOutsideMousedown);
@@ -3653,40 +3857,47 @@ const _sfc_main$s = {
         }
       }
       this.menuEl.style.visibility = null;
-      if (!this.showMenu)
+      if (!this.menuVisible)
         this.menuEl.style.display = "none";
       this.menuCoordinates = { top, left };
     },
     insertMenu() {
-      const wrapper = this.$refs.wrapper;
-      this.menuEl = this.$refs.menu.$el || this.$refs.menu;
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-      if (this.overlay)
-        wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
-      this.detachToTarget.appendChild(this.menuEl);
+      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.parentNode.removeChild(this.menuEl);
+        this.menuEl.remove();
     }
   },
   mounted() {
-    this.activatorEl = this.$refs.wrapper.firstElementChild;
-    this.overlayEl = this.overlay ? this.$refs.overlay.$el : null;
-    this.insertMenu();
+    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.parentNode.removeChild(this.overlayEl);
+      this.overlayEl.remove();
     if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.parentNode.removeChild(this.activatorEl);
+      this.activatorEl.remove();
   },
   watch: {
     modelValue(bool) {
-      if (!!bool !== this.showMenu)
+      if (!!bool !== this.menuVisible)
         this.toggleMenu({ type: "click", target: this.activatorEl });
     },
     detachTo() {
@@ -5399,7 +5610,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         default: withCtx(() => [
           (openBlock(), createBlock(KeepAlive, null, [
-            createVNode(_component_tab_content, {
+            (openBlock(), createBlock(_component_tab_content, {
               key: $options.activeTab._index,
               class: normalizeClass($props.contentClass)
             }, {
@@ -5421,7 +5632,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               _: 3
-            }, 8, ["class"])
+            }, 8, ["class"]))
           ], 1024))
         ]),
         _: 3
@@ -5529,7 +5740,8 @@ const _sfc_main$e = {
     },
     updateSlider(domLookup = true) {
       if (domLookup) {
-        this.activeTabEl = this.$refs["tabs-bar"].querySelector(".w-tabs__bar-item--active");
+        const ref = this.$refs["tabs-bar"];
+        this.activeTabEl = ref && ref.querySelector(".w-tabs__bar-item--active");
       }
       if (!this.fillBar && this.activeTabEl) {
         const { left, width } = this.activeTabEl.getBoundingClientRect();
@@ -5588,38 +5800,40 @@ const _sfc_main$e = {
   }
 };
 var index = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", render$e]]);
-const _hoisted_1$3 = ["width"];
-const _hoisted_2$2 = { key: 0 };
-const _hoisted_3$2 = ["onClick"];
-const _hoisted_4$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
-const _hoisted_5$1 = ["innerHTML"];
-const _hoisted_6$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
-const _hoisted_7$1 = {
+const _hoisted_1$3 = { ref: "colgroup" };
+const _hoisted_2$2 = ["width"];
+const _hoisted_3$2 = { key: 0 };
+const _hoisted_4$1 = ["onClick"];
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
+const _hoisted_6$1 = ["innerHTML"];
+const _hoisted_7$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
+const _hoisted_8 = {
   key: 0,
   class: "w-table__progress-bar"
 };
-const _hoisted_8 = ["colspan"];
-const _hoisted_9 = { class: "w-table__loading-text" };
-const _hoisted_10 = /* @__PURE__ */ createTextVNode("Loading...");
-const _hoisted_11 = {
+const _hoisted_9 = ["colspan"];
+const _hoisted_10 = { class: "w-table__loading-text" };
+const _hoisted_11 = /* @__PURE__ */ createTextVNode("Loading...");
+const _hoisted_12 = {
   key: 1,
   class: "no-data"
 };
-const _hoisted_12 = ["colspan"];
-const _hoisted_13 = /* @__PURE__ */ createTextVNode("No data to show.");
-const _hoisted_14 = ["onClick"];
-const _hoisted_15 = ["data-label"];
+const _hoisted_13 = ["colspan"];
+const _hoisted_14 = /* @__PURE__ */ createTextVNode("No data to show.");
+const _hoisted_15 = ["onClick"];
 const _hoisted_16 = ["data-label"];
-const _hoisted_17 = ["innerHTML"];
-const _hoisted_18 = {
+const _hoisted_17 = ["data-label"];
+const _hoisted_18 = ["innerHTML"];
+const _hoisted_19 = {
   key: 2,
-  class: "w-table__row w-table__row--expanded"
+  class: "w-table__row w-table__row--expansion"
 };
-const _hoisted_19 = ["colspan"];
-const _hoisted_20 = { key: 0 };
+const _hoisted_20 = ["colspan"];
+const _hoisted_21 = { key: 0 };
 function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_progress = resolveComponent("w-progress");
+  const _component_w_transition_expand = resolveComponent("w-transition-expand");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-table-wrap", $options.wrapClasses])
   }, [
@@ -5629,29 +5843,29 @@ 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", null, [
+      createElementVNode("colgroup", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, i) => {
           return openBlock(), createElementBlock("col", {
             class: "w-table__col",
             key: i,
             width: header.width || null
-          }, null, 8, _hoisted_1$3);
+          }, null, 8, _hoisted_2$2);
         }), 128))
-      ]),
-      !$props.noHeaders ? (openBlock(), createElementBlock("thead", _hoisted_2$2, [
+      ], 512),
+      !$props.noHeaders ? (openBlock(), createElementBlock("thead", _hoisted_3$2, [
         createElementVNode("tr", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, i) => {
             return openBlock(), createElementBlock("th", {
               class: normalizeClass(["w-table__header", $options.headerClasses(header)]),
               key: i,
-              onClick: ($event) => header.sortable !== false && $options.sortTable(header)
+              onClick: ($event) => !_ctx.colResizing.dragging && header.sortable !== false && $options.sortTable(header)
             }, [
               header.sortable !== false && header.align === "right" ? (openBlock(), createBlock(_component_w_icon, {
                 key: 0,
                 class: normalizeClass(["w-table__header-sort", $options.headerSortClasses(header)])
               }, {
                 default: withCtx(() => [
-                  _hoisted_4$1
+                  _hoisted_5$1
                 ]),
                 _: 2
               }, 1032, ["class"])) : createCommentVNode("", true),
@@ -5666,14 +5880,14 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                 ]) : (openBlock(), createElementBlock("span", {
                   key: 1,
                   innerHTML: header.label || ""
-                }, null, 8, _hoisted_5$1))
+                }, null, 8, _hoisted_6$1))
               ], 64)) : createCommentVNode("", true),
               header.sortable !== false && header.align !== "right" ? (openBlock(), createBlock(_component_w_icon, {
                 key: 2,
                 class: normalizeClass(["w-table__header-sort", $options.headerSortClasses(header)])
               }, {
                 default: withCtx(() => [
-                  _hoisted_6$1
+                  _hoisted_7$1
                 ]),
                 _: 2
               }, 1032, ["class"])) : createCommentVNode("", true),
@@ -5683,32 +5897,31 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                 onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["stop"]))
               }, null, 2)) : createCommentVNode("", true)
-            ], 10, _hoisted_3$2);
+            ], 10, _hoisted_4$1);
           }), 128))
         ])
       ])) : createCommentVNode("", true),
       createElementVNode("tbody", null, [
-        $props.loading ? (openBlock(), createElementBlock("tr", _hoisted_7$1, [
+        $props.loading ? (openBlock(), createElementBlock("tr", _hoisted_8, [
           createElementVNode("td", {
             colspan: $props.headers.length
           }, [
             createVNode(_component_w_progress, { tile: "" }),
-            createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_10, [
               renderSlot(_ctx.$slots, "loading", {}, () => [
-                _hoisted_10
+                _hoisted_11
               ])
             ])
-          ], 8, _hoisted_8)
-        ])) : createCommentVNode("", true),
-        !$options.tableItems.length ? (openBlock(), createElementBlock("tr", _hoisted_11, [
+          ], 8, _hoisted_9)
+        ])) : !$options.tableItems.length ? (openBlock(), createElementBlock("tr", _hoisted_12, [
           createElementVNode("td", {
             class: "w-table__cell text-center",
             colspan: $props.headers.length
           }, [
             renderSlot(_ctx.$slots, "no-data", {}, () => [
-              _hoisted_13
+              _hoisted_14
             ])
-          ], 8, _hoisted_12)
+          ], 8, _hoisted_13)
         ])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList($options.sortedItems, (item, i) => {
           return openBlock(), createElementBlock(Fragment, { key: i }, [
             _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
@@ -5716,10 +5929,10 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
               item,
               index: i + 1,
               select: () => $options.doSelectRow(item, i),
-              classes: { "w-table__row": true, "w-table__row--selected": $options.selectedRowsByUid[item._uid] !== void 0, "w-table__row--has-expanded": $options.expandedRowsByUid[item._uid] !== void 0 }
+              classes: { "w-table__row": true, "w-table__row--selected": $options.selectedRowsByUid[item._uid] !== void 0, "w-table__row--expanded": $options.expandedRowsByUid[item._uid] !== void 0 }
             }) : (openBlock(), createElementBlock("tr", {
               key: 1,
-              class: normalizeClass(["w-table__row", { "w-table__row--selected": $options.selectedRowsByUid[item._uid] !== void 0, "w-table__row--has-expanded": $options.expandedRowsByUid[item._uid] !== void 0 }]),
+              class: normalizeClass(["w-table__row", { "w-table__row--selected": $options.selectedRowsByUid[item._uid] !== void 0, "w-table__row--expanded": $options.expandedRowsByUid[item._uid] !== void 0 }]),
               onClick: ($event) => $options.doSelectRow(item, i)
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, j) => {
@@ -5752,38 +5965,43 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                       key: 3,
                       class: normalizeClass(["w-table__col-resizer", { "w-table__col-resizer--hover": _ctx.colResizing.hover === j, "w-table__col-resizer--active": _ctx.colResizing.columnIndex === j }])
                     }, null, 2)) : createCommentVNode("", true)
-                  ], 10, _hoisted_15)) : (openBlock(), createElementBlock("td", {
+                  ], 10, _hoisted_16)) : (openBlock(), createElementBlock("td", {
                     class: normalizeClass(["w-table__cell", `text-${header.align || "left"}`]),
                     key: `${j}-b`,
                     "data-label": header.label
                   }, [
                     createElementVNode("div", {
                       innerHTML: item[header.key] || ""
-                    }, null, 8, _hoisted_17),
+                    }, null, 8, _hoisted_18),
                     j < $props.headers.length - 1 && $props.resizableColumns ? (openBlock(), createElementBlock("span", {
                       key: 0,
                       class: normalizeClass(["w-table__col-resizer", { "w-table__col-resizer--hover": _ctx.colResizing.hover === j, "w-table__col-resizer--active": _ctx.colResizing.columnIndex === j }])
                     }, null, 2)) : createCommentVNode("", true)
-                  ], 10, _hoisted_16))
+                  ], 10, _hoisted_17))
                 ], 64);
               }), 256))
-            ], 10, _hoisted_14)),
-            $options.expandedRowsByUid[item._uid] ? (openBlock(), createElementBlock("tr", _hoisted_18, [
+            ], 10, _hoisted_15)),
+            $options.expandedRowsByUid[item._uid] ? (openBlock(), createElementBlock("tr", _hoisted_19, [
               createElementVNode("td", {
                 class: "w-table__cell",
                 colspan: $props.headers.length
               }, [
-                $options.expandedRowsByUid[item._uid] ? (openBlock(), createElementBlock("div", _hoisted_20, [
-                  renderSlot(_ctx.$slots, "expanded-row", {
-                    item,
-                    index: i + 1
-                  })
-                ])) : createCommentVNode("", true),
-                _ctx.j < $props.headers.length - 1 && $props.resizableColumns ? (openBlock(), createElementBlock("span", {
-                  key: 1,
-                  class: normalizeClass(["w-table__col-resizer", { "w-table__col-resizer--hover": _ctx.colResizing.hover === _ctx.j, "w-table__col-resizer--active": _ctx.colResizing.columnIndex === _ctx.j }])
-                }, null, 2)) : createCommentVNode("", true)
-              ], 8, _hoisted_19)
+                createVNode(_component_w_transition_expand, { y: "" }, {
+                  default: withCtx(() => [
+                    $options.expandedRowsByUid[item._uid] ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                      renderSlot(_ctx.$slots, "row-expansion", {
+                        item,
+                        index: i + 1
+                      })
+                    ])) : createCommentVNode("", true),
+                    i < $props.headers.length - 1 && $props.resizableColumns ? (openBlock(), createElementBlock("span", {
+                      key: 1,
+                      class: normalizeClass(["w-table__col-resizer", { "w-table__col-resizer--hover": _ctx.colResizing.hover === i, "w-table__col-resizer--active": _ctx.colResizing.columnIndex === _ctx.j }])
+                    }, null, 2)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1024)
+              ], 8, _hoisted_20)
             ])) : createCommentVNode("", true)
           ], 64);
         }), 128))
@@ -5792,6 +6010,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var wTable_vue_vue_type_style_index_0_lang = "";
+const minColumnWidth = 15;
 const _sfc_main$d = {
   name: "w-table",
   props: {
@@ -5825,7 +6044,7 @@ const _sfc_main$d = {
     mobileBreakpoint: { type: Number, default: 0 },
     resizableColumns: { type: Boolean }
   },
-  emits: ["row-select", "row-expand", "row-click", "update:sort", "update:selected-rows", "update:expanded-rows"],
+  emits: ["row-select", "row-expand", "row-click", "update:sort", "update:selected-rows", "update:expanded-rows", "column-resize"],
   data: () => ({
     activeSorting: [],
     selectedRowsInternal: [],
@@ -5849,9 +6068,7 @@ const _sfc_main$d = {
       });
     },
     filteredItems() {
-      if (typeof this.filter === "function")
-        return this.tableItems.filter(this.filter);
-      return this.tableItems;
+      return typeof this.filter === "function" ? this.tableItems.filter(this.filter) : this.tableItems;
     },
     sortedItems() {
       if (!this.activeSorting.length)
@@ -5996,26 +6213,34 @@ const _sfc_main$d = {
       const newNextColWidth = nextColWidth - deltaX;
       columnEl.style.width = colWidth + deltaX + "px";
       nextColumnEl.style.width = nextColWidth - deltaX + "px";
-      const minWidthReached = deltaX < 0 && columnEl.offsetWidth > newColWidth;
+      const minWidthReached = deltaX < 0 && columnEl.offsetWidth > newColWidth || columnEl.offsetWidth <= minColumnWidth;
       const maxWidthReached = deltaX > 0 && nextColumnEl.offsetWidth > newNextColWidth;
       if (minWidthReached) {
-        columnEl.style.width = columnEl.offsetWidth + "px";
-        nextColumnEl.style.width = maxWidth - columnEl.offsetWidth + "px";
+        const newWidth = Math.max(columnEl.offsetWidth, minColumnWidth);
+        columnEl.style.width = newWidth + "px";
+        nextColumnEl.style.width = maxWidth - newWidth + "px";
       } else if (maxWidthReached) {
         columnEl.style.width = maxWidth - nextColumnEl.offsetWidth + "px";
         nextColumnEl.style.width = nextColumnEl.offsetWidth + "px";
       }
     },
-    onResizerMouseUp(e) {
+    onResizerMouseUp() {
       document.removeEventListener("mousemove", this.onResizerMouseMove);
       document.removeEventListener("mouseup", this.onResizerMouseUp);
-      this.colResizing.dragging = false;
-      this.colResizing.columnIndex = null;
-      this.colResizing.startCursorX = null;
-      this.colResizing.columnEl = null;
-      this.colResizing.nextColumnEl = null;
-      this.colResizing.colWidth = null;
-      this.colResizing.nextColWidth = null;
+      setTimeout(() => {
+        const widths = [...this.$refs.colgroup.childNodes].map((column) => {
+          var _a;
+          return ((_a = column.style) == null ? void 0 : _a.width) || column.offsetWidth;
+        });
+        this.$emit("column-resize", { index: this.colResizing.columnIndex, widths });
+        this.colResizing.dragging = false;
+        this.colResizing.columnIndex = null;
+        this.colResizing.startCursorX = null;
+        this.colResizing.columnEl = null;
+        this.colResizing.nextColumnEl = null;
+        this.colResizing.colWidth = null;
+        this.colResizing.nextColWidth = null;
+      }, 0);
     }
   },
   created() {
@@ -6290,7 +6515,7 @@ const _sfc_main$b = {
       return listeners;
     },
     hasValue() {
-      return this.inputValue;
+      return this.inputValue || this.inputValue === 0;
     },
     hasLabel() {
       return this.label || this.$slots.default;
@@ -6488,11 +6713,13 @@ const _sfc_main$9 = {
 var wToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$9]]);
 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"
+    class: normalizeClass(["w-tooltip-wrap", { "w-tooltip-wrap--attached": !$props.detachTo }])
   }, [
     renderSlot(_ctx.$slots, "activator", { on: $options.eventHandlers }),
-    createVNode(Transition, { name: $options.transitionName }, {
+    createVNode(Transition, {
+      name: $options.transitionName,
+      appear: ""
+    }, {
       default: withCtx(() => [
         withDirectives((openBlock(), createElementBlock("div", {
           class: normalizeClass(["w-tooltip", $options.classes]),
@@ -6500,12 +6727,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           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 })
+          renderSlot(_ctx.$slots, "default")
         ], 6)), [
           [vShow, _ctx.showTooltip]
         ])
@@ -6527,8 +6749,8 @@ const _sfc_main$8 = {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
-    transition: { type: String, default: "" },
-    tooltipClass: { type: String },
+    transition: { type: String },
+    tooltipClass: { type: [String, Object, Array] },
     detachTo: {},
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -6551,30 +6773,34 @@ const _sfc_main$8 = {
     timeoutId: null
   }),
   computed: {
+    tooltipClasses() {
+      return objectifyClasses(this.tooltipClass);
+    },
     transitionName() {
       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";
+      const defaultTarget = ".w-app";
+      let target = this.detachTo || defaultTarget;
       if (target === true)
-        target = ".w-app";
+        target = defaultTarget;
       else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
+        target = defaultTarget;
       else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
+        target = defaultTarget;
         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");
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
       }
       return target;
     },
     tooltipParentEl() {
-      return this.detachTo ? this.detachToTarget : this.$refs.wrapper;
+      return this.detachTo ? this.detachToTarget : this.$el;
     },
     position() {
       return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
@@ -6607,10 +6833,10 @@ const _sfc_main$8 = {
       return coords;
     },
     classes() {
-      return {
-        [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
-        [this.tooltipClass]: this.tooltipClass,
+      return __spreadProps(__spreadValues({
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor
+      }, this.tooltipClasses), {
         [`w-tooltip--${this.position}`]: true,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
@@ -6619,13 +6845,14 @@ const _sfc_main$8 = {
         "w-tooltip--active": this.showTooltip,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
         "w-tooltip--custom-transition": this.transition
-      };
+      });
     },
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: `${~~this.tooltipCoordinates.top}px`,
-        left: `${~~this.tooltipCoordinates.left}px`
+        top: this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px` || null,
+        left: this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px` || null,
+        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
     eventHandlers() {
@@ -6639,7 +6866,7 @@ const _sfc_main$8 = {
           mouseenter: this.toggle,
           mouseleave: this.toggle
         };
-        if ("ontouchstart" in window)
+        if (typeof window !== "undefined" && "ontouchstart" in window)
           handlers.click = this.toggle;
       }
       return handlers;
@@ -6648,7 +6875,7 @@ const _sfc_main$8 = {
   methods: {
     toggle(e) {
       let shouldShowTooltip = this.showTooltip;
-      if ("ontouchstart" in window) {
+      if (typeof window !== "undefined" && "ontouchstart" in window) {
         if (e.type === "click")
           shouldShowTooltip = !shouldShowTooltip;
       } else if (e.type === "click" && this.showOnClick)
@@ -6712,17 +6939,17 @@ const _sfc_main$8 = {
       return coords;
     },
     insertTooltip() {
-      const wrapper = this.$refs.wrapper;
+      const wrapper = this.$el;
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
       this.detachToTarget.appendChild(this.tooltipEl);
     },
     removeTooltip() {
       if (this.tooltipEl && this.tooltipEl.parentNode)
-        this.tooltipEl.parentNode.removeChild(this.tooltipEl);
+        this.tooltipEl.remove();
     }
   },
   mounted() {
-    this.activatorEl = this.$refs.wrapper.firstElementChild;
+    this.activatorEl = this.$el.firstElementChild;
     if (this.detachTo)
       this.insertTooltip();
     if (this.modelValue)
@@ -6731,7 +6958,7 @@ const _sfc_main$8 = {
   beforeUnmount() {
     this.removeTooltip();
     if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.parentNode.removeChild(this.activatorEl);
+      this.activatorEl.remove();
   },
   watch: {
     modelValue(bool) {
@@ -7082,9 +7309,10 @@ var components = /* @__PURE__ */ Object.freeze({
   WBadge: wBadge,
   WBreadcrumbs: wBreadcrumbs,
   WButton: wButton,
+  WCard: wCard,
   WCheckbox: wCheckbox,
   WCheckboxes: wCheckboxes,
-  WCard: wCard,
+  WConfirm: wConfirm,
   WDatePicker: wDatePicker,
   WDialog: wDialog,
   WDivider: wDivider,