wave-ui 1.49.3 → 1.51.0

package/dist/wave-ui.es.js

@@ -528,7 +528,7 @@ _notificationManager = new WeakMap();
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-var render$O = function() {
+var render$P = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -559,7 +559,7 @@ var render$O = function() {
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
 };
-var staticRenderFns$O = [];
+var staticRenderFns$P = [];
 var wAccordion_vue_vue_type_style_index_0_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -612,7 +612,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$O = {
+const __vue2_script$P = {
   name: "w-accordion",
   props: {
     value: { type: Array },
@@ -684,17 +684,17 @@ const __vue2_script$O = {
     }
   }
 };
-const __cssModules$O = {};
-var __component__$O = /* @__PURE__ */ normalizeComponent(__vue2_script$O, render$O, staticRenderFns$O, false, __vue2_injectStyles$O, null, null, null);
-function __vue2_injectStyles$O(context) {
-  for (let o in __cssModules$O) {
-    this[o] = __cssModules$O[o];
+const __cssModules$P = {};
+var __component__$P = /* @__PURE__ */ normalizeComponent(__vue2_script$P, render$P, staticRenderFns$P, false, __vue2_injectStyles$P, null, null, null);
+function __vue2_injectStyles$P(context) {
+  for (let o in __cssModules$P) {
+    this[o] = __cssModules$P[o];
   }
 }
 var wAccordion = /* @__PURE__ */ function() {
-  return __component__$O.exports;
+  return __component__$P.exports;
 }();
-var render$N = function() {
+var render$O = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -704,9 +704,9 @@ var render$N = function() {
     _vm.$emit("close", false);
   } } }) : _vm._e()] : _vm._t("default")], 2) : _vm._e();
 };
-var staticRenderFns$N = [];
+var staticRenderFns$O = [];
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$N = {
+const __vue2_script$O = {
   name: "w-alert",
   props: {
     value: { default: true },
@@ -782,17 +782,17 @@ const __vue2_script$N = {
     }
   }
 };
-const __cssModules$N = {};
-var __component__$N = /* @__PURE__ */ normalizeComponent(__vue2_script$N, render$N, staticRenderFns$N, false, __vue2_injectStyles$N, null, null, null);
-function __vue2_injectStyles$N(context) {
-  for (let o in __cssModules$N) {
-    this[o] = __cssModules$N[o];
+const __cssModules$O = {};
+var __component__$O = /* @__PURE__ */ normalizeComponent(__vue2_script$O, render$O, staticRenderFns$O, false, __vue2_injectStyles$O, null, null, null);
+function __vue2_injectStyles$O(context) {
+  for (let o in __cssModules$O) {
+    this[o] = __cssModules$O[o];
   }
 }
 var wAlert = /* @__PURE__ */ function() {
-  return __component__$N.exports;
+  return __component__$O.exports;
 }();
-var render$M = function() {
+var render$N = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -804,9 +804,9 @@ var render$M = function() {
     }, expression: "notif._value" } }, "w-alert", _vm.notifProps(notif), false), [_c("div", { domProps: { "innerHTML": _vm._s(notif.message) } })]) : _vm._e()];
   })], 2);
 };
-var staticRenderFns$M = [];
+var staticRenderFns$N = [];
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$M = {
+const __vue2_script$N = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -837,15 +837,15 @@ const __vue2_script$M = {
     delete this.notifManager;
   }
 };
-const __cssModules$M = {};
-var __component__$M = /* @__PURE__ */ normalizeComponent(__vue2_script$M, render$M, staticRenderFns$M, false, __vue2_injectStyles$M, null, null, null);
-function __vue2_injectStyles$M(context) {
-  for (let o in __cssModules$M) {
-    this[o] = __cssModules$M[o];
+const __cssModules$N = {};
+var __component__$N = /* @__PURE__ */ normalizeComponent(__vue2_script$N, render$N, staticRenderFns$N, false, __vue2_injectStyles$N, null, null, null);
+function __vue2_injectStyles$N(context) {
+  for (let o in __cssModules$N) {
+    this[o] = __cssModules$N[o];
   }
 }
 var NotificationManager = /* @__PURE__ */ function() {
-  return __component__$M.exports;
+  return __component__$N.exports;
 }();
 const { css: cssConfig } = config;
 const entries = Object.entries(config.breakpoints);
@@ -899,7 +899,7 @@ const generateBreakpoints = () => {
 };
 const genBreakpointLayoutClasses = () => {
   let styles = "";
-  const { cssScope } = cssVars;
+  const { cssScope, baseIncrement } = cssVars;
   const layoutClasses = [
     "show{display:block}",
     "hide{display:none}",
@@ -934,17 +934,18 @@ const genBreakpointLayoutClasses = () => {
     "justify-space-around{justify-content:space-around}",
     "justify-space-evenly{justify-content:space-evenly}"
   ];
+  const array12 = Array(12).fill();
   breakpoints.forEach(({ label, min }) => {
     if (label !== "xs") {
-      styles += `@media(min-width:${min}px){` + layoutClasses.map((rule) => `${cssScope} .${label}u-${rule}`).join("") + "}";
+      styles += `@media(min-width:${min}px){` + layoutClasses.map((rule) => `${cssScope} .${label}u-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}}`;
     }
   });
   breakpoints.forEach(({ label, min, max }) => {
-    styles += `@media (min-width:${min}px) and (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}-${rule}`).join("") + "}";
+    styles += `@media (min-width:${min}px) and (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}}`;
   });
   breakpoints.forEach(({ label, max }) => {
     if (label !== "xl") {
-      styles += `@media (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}d-${rule}`).join("") + "}";
+      styles += `@media (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}d-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}}`;
     }
   });
   return styles;
@@ -960,17 +961,17 @@ var DynamicCSS = () => {
     styles += genBreakpointLayoutClasses();
   return styles;
 };
-var render$L = function() {
+var render$M = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-app", class: _vm.classes }, [_vm._t("default"), _c("notification-manager")], 2);
 };
-var staticRenderFns$L = [];
+var staticRenderFns$M = [];
 var wApp_vue_vue_type_style_index_0_lang = "";
 const breakpointsNames = Object.keys(config.breakpoints);
 const breakpointsValues = Object.values(config.breakpoints);
-const __vue2_script$L = {
+const __vue2_script$M = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
@@ -1048,17 +1049,17 @@ const __vue2_script$L = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-const __cssModules$L = {};
-var __component__$L = /* @__PURE__ */ normalizeComponent(__vue2_script$L, render$L, staticRenderFns$L, false, __vue2_injectStyles$L, null, null, null);
-function __vue2_injectStyles$L(context) {
-  for (let o in __cssModules$L) {
-    this[o] = __cssModules$L[o];
+const __cssModules$M = {};
+var __component__$M = /* @__PURE__ */ normalizeComponent(__vue2_script$M, render$M, staticRenderFns$M, false, __vue2_injectStyles$M, null, null, null);
+function __vue2_injectStyles$M(context) {
+  for (let o in __cssModules$M) {
+    this[o] = __cssModules$M[o];
   }
 }
 var wApp = /* @__PURE__ */ function() {
-  return __component__$L.exports;
+  return __component__$M.exports;
 }();
-var render$K = function() {
+var render$L = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1066,9 +1067,9 @@ var render$K = function() {
     return [_vm._v(_vm._s(_vm.value === true ? "" : _vm.value || ""))];
   }) : _vm._e()], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$K = [];
+var staticRenderFns$L = [];
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$K = {
+const __vue2_script$L = {
   name: "w-badge",
   props: {
     value: { default: true },
@@ -1130,17 +1131,17 @@ const __vue2_script$K = {
     }
   }
 };
-const __cssModules$K = {};
-var __component__$K = /* @__PURE__ */ normalizeComponent(__vue2_script$K, render$K, staticRenderFns$K, false, __vue2_injectStyles$K, null, null, null);
-function __vue2_injectStyles$K(context) {
-  for (let o in __cssModules$K) {
-    this[o] = __cssModules$K[o];
+const __cssModules$L = {};
+var __component__$L = /* @__PURE__ */ normalizeComponent(__vue2_script$L, render$L, staticRenderFns$L, false, __vue2_injectStyles$L, null, null, null);
+function __vue2_injectStyles$L(context) {
+  for (let o in __cssModules$L) {
+    this[o] = __cssModules$L[o];
   }
 }
 var wBadge = /* @__PURE__ */ function() {
-  return __component__$K.exports;
+  return __component__$L.exports;
 }();
-var render$J = function() {
+var render$K = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1148,9 +1149,9 @@ var render$J = function() {
     return [i && _vm.$scopedSlots.separator ? _c("span", { key: i + "a", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._t("separator", null, { "index": i })], 2) : i ? _c("w-icon", { key: i + "b", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._v(_vm._s(_vm.icon))]) : _vm._e(), item[_vm.itemRouteKey] && (i < _vm.items.length - 1 || _vm.linkLastItem) ? [_vm.$scopedSlots.item ? _c(_vm.hasRouter ? "router-link" : "a", { key: i + "c", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] } }, [_vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 })], 2) : _c(_vm.hasRouter ? "router-link" : "a", { key: i + "d", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] }, domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })] : _vm.$scopedSlots.item ? _vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 }) : _c("span", { key: i + "f", domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })];
   })], 2);
 };
-var staticRenderFns$J = [];
+var staticRenderFns$K = [];
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$J = {
+const __vue2_script$K = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1181,17 +1182,17 @@ const __vue2_script$J = {
     }
   }
 };
-const __cssModules$J = {};
-var __component__$J = /* @__PURE__ */ normalizeComponent(__vue2_script$J, render$J, staticRenderFns$J, false, __vue2_injectStyles$J, null, null, null);
-function __vue2_injectStyles$J(context) {
-  for (let o in __cssModules$J) {
-    this[o] = __cssModules$J[o];
+const __cssModules$K = {};
+var __component__$K = /* @__PURE__ */ normalizeComponent(__vue2_script$K, render$K, staticRenderFns$K, false, __vue2_injectStyles$K, null, null, null);
+function __vue2_injectStyles$K(context) {
+  for (let o in __cssModules$K) {
+    this[o] = __cssModules$K[o];
   }
 }
 var wBreadcrumbs = /* @__PURE__ */ function() {
-  return __component__$J.exports;
+  return __component__$K.exports;
 }();
-var render$I = function() {
+var render$J = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1199,9 +1200,9 @@ var render$I = function() {
     return [_c("svg", { attrs: { "viewBox": "0 0 40 40" } }, [_c("circle", { attrs: { "cx": "20", "cy": "20", "r": "18", "fill": "transparent", "stroke": "currentColor", "stroke-width": "4", "stroke-linecap": "round" } })])];
   })], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$I = [];
+var staticRenderFns$J = [];
 var wButton_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$I = {
+const __vue2_script$J = {
   name: "w-button",
   props: {
     color: { type: String },
@@ -1293,15 +1294,15 @@ const __vue2_script$I = {
     }
   }
 };
-const __cssModules$I = {};
-var __component__$I = /* @__PURE__ */ normalizeComponent(__vue2_script$I, render$I, staticRenderFns$I, false, __vue2_injectStyles$I, null, null, null);
-function __vue2_injectStyles$I(context) {
-  for (let o in __cssModules$I) {
-    this[o] = __cssModules$I[o];
+const __cssModules$J = {};
+var __component__$J = /* @__PURE__ */ normalizeComponent(__vue2_script$J, render$J, staticRenderFns$J, false, __vue2_injectStyles$J, null, null, null);
+function __vue2_injectStyles$J(context) {
+  for (let o in __cssModules$J) {
+    this[o] = __cssModules$J[o];
   }
 }
 var wButton = /* @__PURE__ */ function() {
-  return __component__$I.exports;
+  return __component__$J.exports;
 }();
 const objectifyClasses = (classes = {}) => {
   if (typeof classes === "string")
@@ -1310,15 +1311,15 @@ const objectifyClasses = (classes = {}) => {
     classes = { [classes.join(" ")]: true };
   return classes;
 };
-var render$H = function() {
+var render$I = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-card", class: _vm.classes, style: _vm.styles }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClasses, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
 };
-var staticRenderFns$H = [];
+var staticRenderFns$I = [];
 var wCard_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$H = {
+const __vue2_script$I = {
   name: "w-card",
   props: {
     color: { type: String },
@@ -1368,15 +1369,15 @@ const __vue2_script$H = {
     }
   }
 };
-const __cssModules$H = {};
-var __component__$H = /* @__PURE__ */ normalizeComponent(__vue2_script$H, render$H, staticRenderFns$H, false, __vue2_injectStyles$H, null, null, null);
-function __vue2_injectStyles$H(context) {
-  for (let o in __cssModules$H) {
-    this[o] = __cssModules$H[o];
+const __cssModules$I = {};
+var __component__$I = /* @__PURE__ */ normalizeComponent(__vue2_script$I, render$I, staticRenderFns$I, false, __vue2_injectStyles$I, null, null, null);
+function __vue2_injectStyles$I(context) {
+  for (let o in __cssModules$I) {
+    this[o] = __cssModules$I[o];
   }
 }
 var wCard = /* @__PURE__ */ function() {
-  return __component__$H.exports;
+  return __component__$I.exports;
 }();
 var FormElementMixin = {
   inject: {
@@ -1411,7 +1412,7 @@ var FormElementMixin = {
     }
   }
 };
-var render$G = function() {
+var render$H = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1436,9 +1437,9 @@ var render$G = function() {
     _vm.$refs.input.click();
   } } }, [_c("svg", { attrs: { "width": "11px", "height": "9px", "viewbox": "0 0 12 9" } }, [_c("polyline", { attrs: { "points": "1 5 4 8 10 2" } })])]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", attrs: { "for": "w-checkbox--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
 };
-var staticRenderFns$G = [];
+var staticRenderFns$H = [];
 var wCheckbox_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$G = {
+const __vue2_script$H = {
   name: "w-checkbox",
   mixins: [FormElementMixin],
   inject: { wCheckboxes: { default: null } },
@@ -1504,17 +1505,17 @@ const __vue2_script$G = {
     }
   }
 };
-const __cssModules$G = {};
-var __component__$G = /* @__PURE__ */ normalizeComponent(__vue2_script$G, render$G, staticRenderFns$G, false, __vue2_injectStyles$G, null, null, null);
-function __vue2_injectStyles$G(context) {
-  for (let o in __cssModules$G) {
-    this[o] = __cssModules$G[o];
+const __cssModules$H = {};
+var __component__$H = /* @__PURE__ */ normalizeComponent(__vue2_script$H, render$H, staticRenderFns$H, false, __vue2_injectStyles$H, null, null, null);
+function __vue2_injectStyles$H(context) {
+  for (let o in __cssModules$H) {
+    this[o] = __cssModules$H[o];
   }
 }
 var wCheckbox = /* @__PURE__ */ function() {
-  return __component__$G.exports;
+  return __component__$H.exports;
 }();
-var render$F = function() {
+var render$G = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1530,9 +1531,9 @@ var render$F = function() {
     } } }, [_vm.$scopedSlots["item." + (i + 1)] ? _vm._t("item." + (i + 1), null, { "item": _vm.getOriginalItem(item), "checked": !!item._isChecked, "index": i + 1 }) : _vm.$scopedSlots.item ? _vm._t("item", null, { "item": _vm.getOriginalItem(item), "checked": !!item._isChecked, "index": i + 1 }) : _vm._e()], 2);
   }), 1);
 };
-var staticRenderFns$F = [];
+var staticRenderFns$G = [];
 var wCheckboxes_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$F = {
+const __vue2_script$G = {
   name: "w-checkboxes",
   mixins: [FormElementMixin],
   props: {
@@ -1587,17 +1588,17 @@ const __vue2_script$F = {
     }
   }
 };
-const __cssModules$F = {};
-var __component__$F = /* @__PURE__ */ normalizeComponent(__vue2_script$F, render$F, staticRenderFns$F, false, __vue2_injectStyles$F, null, null, null);
-function __vue2_injectStyles$F(context) {
-  for (let o in __cssModules$F) {
-    this[o] = __cssModules$F[o];
+const __cssModules$G = {};
+var __component__$G = /* @__PURE__ */ normalizeComponent(__vue2_script$G, render$G, staticRenderFns$G, false, __vue2_injectStyles$G, null, null, null);
+function __vue2_injectStyles$G(context) {
+  for (let o in __cssModules$G) {
+    this[o] = __cssModules$G[o];
   }
 }
 var wCheckboxes = /* @__PURE__ */ function() {
-  return __component__$F.exports;
+  return __component__$G.exports;
 }();
-var render$E = function() {
+var render$F = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1614,8 +1615,8 @@ var render$E = function() {
     return [_vm._v(_vm._s(_vm.confirmButton.label))];
   })], 2)], 1)])], 1)], 1);
 };
-var staticRenderFns$E = [];
-const __vue2_script$E = {
+var staticRenderFns$F = [];
+const __vue2_script$F = {
   name: "w-confirm",
   props: {
     bgColor: { type: String },
@@ -1699,25 +1700,25 @@ const __vue2_script$E = {
     }
   }
 };
-const __cssModules$E = {};
-var __component__$E = /* @__PURE__ */ normalizeComponent(__vue2_script$E, render$E, staticRenderFns$E, false, __vue2_injectStyles$E, null, null, null);
-function __vue2_injectStyles$E(context) {
-  for (let o in __cssModules$E) {
-    this[o] = __cssModules$E[o];
+const __cssModules$F = {};
+var __component__$F = /* @__PURE__ */ normalizeComponent(__vue2_script$F, render$F, staticRenderFns$F, false, __vue2_injectStyles$F, null, null, null);
+function __vue2_injectStyles$F(context) {
+  for (let o in __cssModules$F) {
+    this[o] = __cssModules$F[o];
   }
 }
 var wConfirm = /* @__PURE__ */ function() {
-  return __component__$E.exports;
+  return __component__$F.exports;
 }();
-var render$D = function() {
+var render$E = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-date-picker", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2);
 };
-var staticRenderFns$D = [];
+var staticRenderFns$E = [];
 var wDatePicker_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$D = {
+const __vue2_script$E = {
   name: "w-date-picker",
   props: {},
   emits: [],
@@ -1730,29 +1731,31 @@ const __vue2_script$D = {
     }
   }
 };
-const __cssModules$D = {};
-var __component__$D = /* @__PURE__ */ normalizeComponent(__vue2_script$D, render$D, staticRenderFns$D, false, __vue2_injectStyles$D, null, null, null);
-function __vue2_injectStyles$D(context) {
-  for (let o in __cssModules$D) {
-    this[o] = __cssModules$D[o];
+const __cssModules$E = {};
+var __component__$E = /* @__PURE__ */ normalizeComponent(__vue2_script$E, render$E, staticRenderFns$E, false, __vue2_injectStyles$E, null, null, null);
+function __vue2_injectStyles$E(context) {
+  for (let o in __cssModules$E) {
+    this[o] = __cssModules$E[o];
   }
 }
 var wDatePicker = /* @__PURE__ */ function() {
-  return __component__$D.exports;
+  return __component__$E.exports;
 }();
-var render$C = function() {
+var render$D = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("w-overlay", { staticClass: "w-dialog", class: _vm.classes, attrs: { "value": _vm.showWrapper, "persistent": _vm.persistent, "persistent-no-animation": _vm.persistentNoAnimation, "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick } }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" }, on: { "after-leave": _vm.onClose } }, [_vm.showContent ? _c("w-card", { staticClass: "w-dialog__content", class: _vm.dialogClass, style: _vm.contentStyles, attrs: { "no-border": "", "color": _vm.color, "bg-color": _vm.bgColor, "title-class": _vm.titleClass, "content-class": _vm.contentClass, "title": _vm.title || void 0 }, scopedSlots: _vm._u([_vm.$slots.title ? { key: "title", fn: function() {
+  return _c("w-overlay", { staticClass: "w-dialog", class: _vm.classes, attrs: { "value": _vm.showWrapper, "persistent": _vm.persistent, "persistent-no-animation": _vm.persistentNoAnimation, "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick, "closed": function($event) {
+    return _vm.$emit("closed");
+  } } }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" }, on: { "after-leave": _vm.onClose } }, [_c("w-card", { directives: [{ name: "show", rawName: "v-show", value: _vm.showContent, expression: "showContent" }], staticClass: "w-dialog__content", class: _vm.dialogClass, style: _vm.contentStyles, attrs: { "no-border": "", "color": _vm.color, "bg-color": _vm.bgColor, "title-class": _vm.titleClass, "content-class": _vm.contentClass, "title": _vm.title || void 0 }, scopedSlots: _vm._u([_vm.$slots.title ? { key: "title", fn: function() {
     return [_vm._t("title")];
   }, proxy: true } : null, _vm.$slots.actions ? { key: "actions", fn: function() {
     return [_vm._t("actions")];
-  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2) : _vm._e()], 1)], 1);
+  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2)], 1)], 1);
 };
-var staticRenderFns$C = [];
+var staticRenderFns$D = [];
 var wDialog_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$C = {
+const __vue2_script$D = {
   name: "w-dialog",
   props: {
     value: { default: true },
@@ -1771,7 +1774,7 @@ const __vue2_script$C = {
     bgColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] }
   },
-  emits: ["input", "update:modelValue", "close"],
+  emits: ["input", "update:modelValue", "close", "closed"],
   data() {
     return {
       showWrapper: this.value,
@@ -1808,7 +1811,7 @@ const __vue2_script$C = {
       this.showWrapper = false;
       this.$emit("update:modelValue", false);
       this.$emit("input", false);
-      this.$emit("close", false);
+      this.$emit("close");
     }
   },
   watch: {
@@ -1819,25 +1822,25 @@ const __vue2_script$C = {
     }
   }
 };
-const __cssModules$C = {};
-var __component__$C = /* @__PURE__ */ normalizeComponent(__vue2_script$C, render$C, staticRenderFns$C, false, __vue2_injectStyles$C, null, null, null);
-function __vue2_injectStyles$C(context) {
-  for (let o in __cssModules$C) {
-    this[o] = __cssModules$C[o];
+const __cssModules$D = {};
+var __component__$D = /* @__PURE__ */ normalizeComponent(__vue2_script$D, render$D, staticRenderFns$D, false, __vue2_injectStyles$D, null, null, null);
+function __vue2_injectStyles$D(context) {
+  for (let o in __cssModules$D) {
+    this[o] = __cssModules$D[o];
   }
 }
 var wDialog = /* @__PURE__ */ function() {
-  return __component__$C.exports;
+  return __component__$D.exports;
 }();
-var render$B = function() {
+var render$C = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-divider", class: _vm.classes }, [_vm._t("default")], 2);
 };
-var staticRenderFns$B = [];
+var staticRenderFns$C = [];
 var wDivider_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$B = {
+const __vue2_script$C = {
   name: "w-divider",
   props: {
     vertical: { type: Boolean },
@@ -1854,17 +1857,17 @@ const __vue2_script$B = {
     }
   }
 };
-const __cssModules$B = {};
-var __component__$B = /* @__PURE__ */ normalizeComponent(__vue2_script$B, render$B, staticRenderFns$B, false, __vue2_injectStyles$B, null, null, null);
-function __vue2_injectStyles$B(context) {
-  for (let o in __cssModules$B) {
-    this[o] = __cssModules$B[o];
+const __cssModules$C = {};
+var __component__$C = /* @__PURE__ */ normalizeComponent(__vue2_script$C, render$C, staticRenderFns$C, false, __vue2_injectStyles$C, null, null, null);
+function __vue2_injectStyles$C(context) {
+  for (let o in __cssModules$C) {
+    this[o] = __cssModules$C[o];
   }
 }
 var wDivider = /* @__PURE__ */ function() {
-  return __component__$B.exports;
+  return __component__$C.exports;
 }();
-var render$A = function() {
+var render$B = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1874,10 +1877,10 @@ var render$A = function() {
     _vm.showDrawer = $$v;
   }, expression: "showDrawer" } }) : _vm._e(), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" }, on: { "after-leave": _vm.close } }, [_vm.showDrawer ? _c(_vm.tag || "aside", { tag: "component", staticClass: "w-drawer", class: _vm.drawerClasses, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()], 1)]], 2) : _vm._e();
 };
-var staticRenderFns$A = [];
+var staticRenderFns$B = [];
 var wDrawer_vue_vue_type_style_index_0_lang = "";
 const oppositeSides = { left: "right", right: "left", top: "down", bottom: "up" };
-const __vue2_script$A = {
+const __vue2_script$B = {
   name: "w-drawer",
   props: {
     value: { default: true },
@@ -1983,25 +1986,25 @@ const __vue2_script$A = {
     }
   }
 };
-const __cssModules$A = {};
-var __component__$A = /* @__PURE__ */ normalizeComponent(__vue2_script$A, render$A, staticRenderFns$A, false, __vue2_injectStyles$A, null, null, null);
-function __vue2_injectStyles$A(context) {
-  for (let o in __cssModules$A) {
-    this[o] = __cssModules$A[o];
+const __cssModules$B = {};
+var __component__$B = /* @__PURE__ */ normalizeComponent(__vue2_script$B, render$B, staticRenderFns$B, false, __vue2_injectStyles$B, null, null, null);
+function __vue2_injectStyles$B(context) {
+  for (let o in __cssModules$B) {
+    this[o] = __cssModules$B[o];
   }
 }
 var wDrawer = /* @__PURE__ */ function() {
-  return __component__$A.exports;
+  return __component__$B.exports;
 }();
-var render$z = function() {
+var render$A = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.gap ? _c(_vm.tag, { tag: "component", staticClass: "w-flex-wrap" }, [_c("div", { staticClass: "w-flex", class: _vm.classes }, [_vm._t("default")], 2)]) : _c(_vm.tag, { tag: "component", staticClass: "w-flex", class: _vm.classes }, [_vm._t("default")], 2);
+  return _c(_vm.tag, { tag: "component", staticClass: "w-flex", class: _vm.classes }, [_vm._t("default")], 2);
 };
-var staticRenderFns$z = [];
+var staticRenderFns$A = [];
 var wFlex_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$z = {
+const __vue2_script$A = {
   name: "w-flex",
   props: {
     tag: { type: String, default: "div" },
@@ -2022,7 +2025,7 @@ const __vue2_script$z = {
     justifySpaceAround: { type: Boolean },
     justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
-    gap: { type: Number, default: 0 }
+    gap: { type: [Number, String], default: 0 }
   },
   computed: {
     classes() {
@@ -2044,28 +2047,28 @@ const __vue2_script$z = {
         "justify-space-around": this.justifySpaceAround,
         "justify-space-evenly": this.justifySpaceEvenly,
         "basis-zero": this.basisZero,
-        [`w-flex--gap${this.gap}`]: this.gap
+        [`gap${this.gap}`]: ~~this.gap
       };
     }
   }
 };
-const __cssModules$z = {};
-var __component__$z = /* @__PURE__ */ normalizeComponent(__vue2_script$z, render$z, staticRenderFns$z, false, __vue2_injectStyles$z, null, null, null);
-function __vue2_injectStyles$z(context) {
-  for (let o in __cssModules$z) {
-    this[o] = __cssModules$z[o];
+const __cssModules$A = {};
+var __component__$A = /* @__PURE__ */ normalizeComponent(__vue2_script$A, render$A, staticRenderFns$A, false, __vue2_injectStyles$A, null, null, null);
+function __vue2_injectStyles$A(context) {
+  for (let o in __cssModules$A) {
+    this[o] = __cssModules$A[o];
   }
 }
 var wFlex = /* @__PURE__ */ function() {
-  return __component__$z.exports;
+  return __component__$A.exports;
 }();
-var render$y = function() {
+var render$z = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("form", { staticClass: "w-form", class: _vm.classes, attrs: { "novalidate": "" }, on: { "submit": _vm.onSubmit, "reset": _vm.reset } }, [_vm._t("default")], 2);
 };
-var staticRenderFns$y = [];
+var staticRenderFns$z = [];
 const asyncSome = async (array, predicate) => {
   for (const item of array) {
     if (await predicate(item))
@@ -2073,7 +2076,7 @@ const asyncSome = async (array, predicate) => {
   }
   return false;
 };
-const __vue2_script$y = {
+const __vue2_script$z = {
   name: "w-form",
   provide() {
     return {
@@ -2195,25 +2198,25 @@ const __vue2_script$y = {
     }
   }
 };
-const __cssModules$y = {};
-var __component__$y = /* @__PURE__ */ normalizeComponent(__vue2_script$y, render$y, staticRenderFns$y, false, __vue2_injectStyles$y, null, null, null);
-function __vue2_injectStyles$y(context) {
-  for (let o in __cssModules$y) {
-    this[o] = __cssModules$y[o];
+const __cssModules$z = {};
+var __component__$z = /* @__PURE__ */ normalizeComponent(__vue2_script$z, render$z, staticRenderFns$z, false, __vue2_injectStyles$z, null, null, null);
+function __vue2_injectStyles$z(context) {
+  for (let o in __cssModules$z) {
+    this[o] = __cssModules$z[o];
   }
 }
 var wForm = /* @__PURE__ */ function() {
-  return __component__$y.exports;
+  return __component__$z.exports;
 }();
-var render$x = function() {
+var render$y = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { class: _vm.classes }, [_c("div", { staticClass: "w-flex grow", class: [_vm.column ? "column" : "align-center", _vm.wrap ? "wrap" : ""] }, [_vm._t("default")], 2), _c("w-transition-expand", { attrs: { "y": "" } }, [_vm.Validation.message ? [_vm.$slots["error-message"] ? _c("div", { staticClass: "w-form-el__error error w-form-el__error w-form-el__error" }, [_vm._t("error-message", null, { "message": _vm.Validation.message })], 2) : _c("div", { staticClass: "w-form-el__error error w-form-el__error w-form-el__error", domProps: { "innerHTML": _vm._s(_vm.Validation.message) } })] : _vm._e()], 2)], 1);
 };
-var staticRenderFns$x = [];
+var staticRenderFns$y = [];
 var wFormElement_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$x = {
+const __vue2_script$y = {
   name: "w-form-element",
   inject: {
     formRegister: { default: null },
@@ -2292,6 +2295,77 @@ const __vue2_script$x = {
       this.formUnregister(this);
   }
 };
+const __cssModules$y = {};
+var __component__$y = /* @__PURE__ */ normalizeComponent(__vue2_script$y, render$y, staticRenderFns$y, false, __vue2_injectStyles$y, null, null, null);
+function __vue2_injectStyles$y(context) {
+  for (let o in __cssModules$y) {
+    this[o] = __cssModules$y[o];
+  }
+}
+var wFormElement = /* @__PURE__ */ function() {
+  return __component__$y.exports;
+}();
+var render$x = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(_vm.tag, { tag: "component", staticClass: "w-grid", class: _vm.classes }, [_vm._t("default")], 2);
+};
+var staticRenderFns$x = [];
+var wGrid_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$x = {
+  name: "w-grid",
+  props: {
+    tag: { type: String, default: "div" },
+    columns: { type: [Number, Object, String] },
+    gap: { type: [Number, Object, String], default: 0 }
+  },
+  computed: {
+    breakpointsColumns() {
+      let columns = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+      switch (typeof this.columns) {
+        case "object":
+          columns = Object.assign(columns, this.columns);
+          break;
+        case "number":
+        case "string":
+          columns = Object.keys(columns).reduce((obj, breakpoint) => obj[breakpoint] = ~~this.columns, {});
+          break;
+      }
+      return columns;
+    },
+    breakpointsGap() {
+      let gap = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+      switch (typeof this.gap) {
+        case "object":
+          gap = Object.assign(gap, this.gap);
+          break;
+        case "number":
+        case "string":
+          gap = Object.keys(gap).reduce((obj, breakpoint) => obj[breakpoint] = ~~this.gap, {});
+          break;
+      }
+      return gap;
+    },
+    classes() {
+      let breakpointsColumns = null;
+      if (typeof this.columns === "object") {
+        breakpointsColumns = Object.entries(this.breakpointsColumns).reduce((obj, [breakpoint, columns]) => {
+          obj[`${breakpoint}-columns${columns}`] = true;
+          return obj;
+        }, {});
+      }
+      let breakpointsGap = null;
+      if (typeof this.gap === "object") {
+        breakpointsGap = Object.entries(this.breakpointsGap).reduce((obj, [breakpoint, gap]) => {
+          obj[`${breakpoint}-gap${gap}`] = true;
+          return obj;
+        }, {});
+      }
+      return __spreadValues(__spreadValues({}, breakpointsColumns || { [`columns${this.columns}`]: this.columns }), breakpointsGap || { [`gap${this.gap}`]: this.gap });
+    }
+  }
+};
 const __cssModules$x = {};
 var __component__$x = /* @__PURE__ */ normalizeComponent(__vue2_script$x, render$x, staticRenderFns$x, false, __vue2_injectStyles$x, null, null, null);
 function __vue2_injectStyles$x(context) {
@@ -2299,7 +2373,7 @@ function __vue2_injectStyles$x(context) {
     this[o] = __cssModules$x[o];
   }
 }
-var wFormElement = /* @__PURE__ */ function() {
+var wGrid = /* @__PURE__ */ function() {
   return __component__$x.exports;
 }();
 var render$w = function() {
@@ -3096,10 +3170,10 @@ var DetachableMixin = {
     alignRight: { type: Boolean },
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
-    activator: { type: String }
+    activator: { type: [String, Object, HTMLElement] }
   },
   data: () => ({
-    docAEventListenersHandlers: []
+    docEventListenersHandlers: []
   }),
   computed: {
     appendToTarget() {
@@ -3130,12 +3204,22 @@ var DetachableMixin = {
       return this.appendToTarget;
     },
     hasSeparateActivator() {
-      return !this.$scopedSlots.activator && typeof this.activator === "string";
+      var _a;
+      if (this.$scopedSlots.activator)
+        return false;
+      const activatorIsString = typeof this.activator === "string";
+      const activatorIsDomEl = (((_a = this.activator) == null ? void 0 : _a.$el) || this.activator) instanceof HTMLElement;
+      return activatorIsString || activatorIsDomEl;
     },
     activatorEl: {
       get() {
-        if (this.hasSeparateActivator)
+        var _a;
+        if (this.hasSeparateActivator) {
+          const activator = ((_a = this.activator) == null ? void 0 : _a.$el) || this.activator;
+          if (activator instanceof HTMLElement)
+            return activator;
           return document.querySelector(this.activator);
+        }
         return this.$el.firstElementChild;
       },
       set() {
@@ -3149,8 +3233,29 @@ var DetachableMixin = {
     }
   },
   methods: {
-    getActivatorCoordinates(e) {
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
+    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();
+      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);
+    },
+    getActivatorCoordinates() {
+      const { top, left, width, height } = this.activatorEl.getBoundingClientRect();
       let coords = { top, left, width, height };
       if (!this.fixed) {
         const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
@@ -3162,8 +3267,8 @@ var DetachableMixin = {
       }
       return coords;
     },
-    computeDetachableCoords(e) {
-      let { top, left, width, height } = this.getActivatorCoordinates(e);
+    computeDetachableCoords() {
+      let { top, left, width, height } = this.getActivatorCoordinates();
       this.detachableEl.style.visibility = "hidden";
       this.detachableEl.style.display = "flex";
       const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
@@ -3240,6 +3345,21 @@ var DetachableMixin = {
         this.detachableEl.remove();
         this.detachableEl = null;
       }
+    },
+    bindActivatorEvents() {
+      const activatorIsString = typeof this.activator === "string";
+      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
+        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
+        const handlerWrap = (e) => {
+          var _a;
+          if (activatorIsString && ((_a = e.target) == null ? void 0 : _a.matches) && e.target.matches(this.activator))
+            handler(e);
+          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target))
+            handler(e);
+        };
+        document.addEventListener(eventName, handlerWrap);
+        this.docEventListenersHandlers.push({ eventName, handler: handlerWrap });
+      });
     }
   },
   mounted() {
@@ -3247,31 +3367,28 @@ var DetachableMixin = {
     const wrapper = this.$el;
     if (this.$scopedSlots.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 });
+    else if (this.activator)
+      this.bindActivatorEvents();
+    else {
+      this.$nextTick(() => {
+        this.activator && this.bindActivatorEvents();
+        if (this.value)
+          this.toggle({ type: "click", target: this.activatorEl });
       });
     }
     if (this.overlay) {
       this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
     }
-    if (this.value)
-      this.toggleMenu({ type: "click", target: this.activatorEl });
+    if (this.value && this.activator)
+      this.toggle({ type: "click", target: this.activatorEl });
   },
-  beforeDestroy() {
+  destroy() {
     var _a;
     this.close();
     this.removeFromDOM();
-    if (this.docAEventListenersHandlers.length) {
-      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+    if (this.docEventListenersHandlers.length) {
+      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
         document.removeEventListener(eventName, handler);
       });
     }
@@ -3299,13 +3416,13 @@ var render$s = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.custom && _vm.detachableVisible ? _c("div", { ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
+  return _c("div", { staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.custom && _vm.detachableVisible ? _c("div", _vm._g({ ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
   }, "mouseleave": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = false, _vm.close());
-  } } }, [_vm._t("default")], 2) : _vm.detachableVisible ? _c("w-card", { ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClasses, "content-class": _vm.contentClasses, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
+  } } }, _vm.$listeners), [_vm._t("default")], 2) : _vm.detachableVisible ? _c("w-card", _vm._g({ ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClasses, "content-class": _vm.contentClasses, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
@@ -3315,7 +3432,7 @@ var render$s = function() {
     return [_vm._t("title")];
   }, proxy: true } : null, _vm.$slots.actions ? { key: "actions", fn: function() {
     return [_vm._t("actions")];
-  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2) : _vm._e()], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClasses, attrs: { "value": _vm.detachableVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
+  }, proxy: true } : null], null, true) }, _vm.$listeners), [_vm._t("default")], 2) : _vm._e()], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClasses, attrs: { "value": _vm.detachableVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
     _vm.detachableVisible = false;
   } } }, "w-overlay", _vm.overlayProps, false)) : _vm._e()], 2);
 };
@@ -3380,7 +3497,9 @@ const __vue2_script$s = {
       return objectifyClasses(this.contentClass);
     },
     overlayClasses() {
-      return objectifyClasses(this.overlayClass);
+      return __spreadProps(__spreadValues({}, objectifyClasses(this.overlayClass)), {
+        "w-overlay--no-pointer-event": this.showOnHover
+      });
     },
     classes() {
       return __spreadProps(__spreadValues({
@@ -3435,7 +3554,7 @@ const __vue2_script$s = {
   methods: {
     toggle(e) {
       let shouldShowMenu = this.detachableVisible;
-      if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
+      if (typeof window !== "undefined" && "ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
         shouldShowMenu = !shouldShowMenu;
@@ -3452,27 +3571,6 @@ const __vue2_script$s = {
       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);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;
@@ -3655,7 +3753,9 @@ var render$q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("transition", { attrs: { "name": "fade", "mode": "out-in", "appear": "" } }, [_vm.value ? _c("div", { directives: [{ name: "focus", rawName: "v-focus" }], staticClass: "w-overlay", class: _vm.classes, style: _vm.value && _vm.styles || null, attrs: { "tabindex": "0" }, on: { "keydown": function($event) {
+  return _c("transition", { attrs: { "name": "fade", "appear": "" }, on: { "after-leave": function($event) {
+    return _vm.$emit("closed");
+  } } }, [_vm.value ? _c("div", { directives: [{ name: "focus", rawName: "v-focus" }], staticClass: "w-overlay", class: _vm.classes, style: _vm.value && _vm.styles || null, attrs: { "tabindex": "0" }, on: { "keydown": function($event) {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0)) {
       return null;
     }
@@ -3675,7 +3775,7 @@ const __vue2_script$q = {
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
   },
-  emits: ["input", "update:modelValue", "click", "close"],
+  emits: ["input", "update:modelValue", "click", "close", "closed"],
   data: () => ({
     persistentAnimate: false
   }),
@@ -3705,7 +3805,7 @@ const __vue2_script$q = {
       } else if (!this.persistent) {
         this.$emit("update:modelValue", false);
         this.$emit("input", false);
-        this.$emit("close", false);
+        this.$emit("close");
       }
       this.$emit("click", e);
     }
@@ -4150,10 +4250,14 @@ var render$k = function() {
   var _c = _vm._self._c || _h;
   return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.classes, attrs: { "valid": _vm.valid, "wrap": _vm.hasLabel && _vm.labelPosition !== "inside" }, on: { "update:valid": function($event) {
     _vm.valid = $event;
-  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : ".w-app", "align-left": "", "custom": "", "min-width": "activator" }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : ".w-app", "align-left": "", "custom": "", "min-width": "activator" }, on: { "mousedown": function($event) {
+    _vm.isFocused = true, _vm.selectingItem = true;
+  }, "mouseup": function($event) {
+    _vm.isFocused = true, _vm.selectingItem = false;
+  } }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     var _obj, _obj$1;
     ref.on;
-    return [_c("div", { ref: "selection-wrap", staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
+    return [_c("div", { staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && (_vm.showMenu ? _vm.closeMenu : _vm.openMenu)();
     } } }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-left", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-left", $event);
@@ -4227,7 +4331,9 @@ const __vue2_script$k = {
     inputValue: [],
     showMenu: false,
     menuMinWidth: 0,
-    isFocused: false
+    isFocused: false,
+    selectingItem: false,
+    selectionWrapRef: void 0
   }),
   computed: {
     selectItems() {
@@ -4256,7 +4362,7 @@ const __vue2_script$k = {
         "w-select--disabled": this.isDisabled,
         "w-select--readonly": this.isReadonly,
         [`w-select--${this.hasValue ? "filled" : "empty"}`]: true,
-        "w-select--focused": this.isFocused && !this.isReadonly,
+        "w-select--focused": (this.isFocused || this.selectingItem) && !this.isReadonly,
         "w-select--dark": this.dark,
         "w-select--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
         "w-select--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -5728,27 +5834,6 @@ const __vue2_script$8 = {
       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);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;
@@ -6173,6 +6258,7 @@ var components = /* @__PURE__ */ Object.freeze({
   WFlex: wFlex,
   WForm: wForm,
   WFormElement: wFormElement,
+  WGrid: wGrid,
   WIcon: wIcon,
   WImage: wImage,
   WInput: wInput,