wave-ui 1.51.1 → 1.53.1

package/dist/wave-ui.es.js

@@ -554,7 +554,9 @@ var render$P = function() {
     }, "click": function($event) {
       $event.stopPropagation();
       !item._disabled && _vm.toggleItem(item, $event);
-    } } }) : _vm._e()], 2), _c("w-transition-expand", { attrs: { "y": "" } }, [item._expanded ? _c("div", { staticClass: "w-accordion__item-content", class: _vm.contentClass }, [_vm.$scopedSlots["item-content." + (item.id || i + 1)] ? _vm._t("item-content." + (item.id || i + 1), null, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 }) : _vm._t("item-content", function() {
+    } } }) : _vm._e()], 2), _c("w-transition-expand", { attrs: { "y": "", "duration": _vm.duration }, on: { "after-leave": function($event) {
+      return _vm.onEndOfCollapse(item);
+    } } }, [item._expanded ? _c("div", { staticClass: "w-accordion__item-content", class: _vm.contentClass }, [_vm.$scopedSlots["item-content." + (item.id || i + 1)] ? _vm._t("item-content." + (item.id || i + 1), null, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 }) : _vm._t("item-content", function() {
       return [_c("div", { domProps: { "innerHTML": _vm._s(item[_vm.itemContentKey]) } })];
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
@@ -629,18 +631,14 @@ const __vue2_script$P = {
     expandIconRight: { type: Boolean },
     expandSingle: { type: Boolean },
     collapseIcon: { type: String },
-    shadow: { type: Boolean }
+    shadow: { type: Boolean },
+    duration: { type: Number, default: 250 }
   },
-  emits: ["input", "update:modelValue", "focus", "item-expand"],
+  emits: ["input", "update:value", "focus", "item-expand", "item-collapsed"],
+  data: () => ({
+    accordionItems: []
+  }),
   computed: {
-    accordionItems() {
-      const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items || [];
-      return items.map((item, _index) => new Vue.observable(__spreadProps(__spreadValues({}, item), {
-        _index,
-        _expanded: this.value && this.value[_index],
-        _disabled: !!item.disabled
-      })));
-    },
     accordionClasses() {
       return {
         [this.color]: this.color,
@@ -658,12 +656,15 @@ const __vue2_script$P = {
       if (this.expandSingle)
         this.accordionItems.forEach((obj) => obj._index !== item._index && (obj._expanded = false));
       const expandedItems = this.accordionItems.map((item2) => item2._expanded || false);
-      this.$emit("update:modelValue", expandedItems);
+      this.$emit("update:value", expandedItems);
       this.$emit("input", expandedItems);
       this.$emit("item-expand", { item, expanded: item._expanded });
       e.target.blur();
       setTimeout(() => e.target.focus(), 300);
     },
+    onEndOfCollapse(item) {
+      this.$emit("item-collapsed", { item, expanded: item._expanded });
+    },
     getOriginalItem(item) {
       return this.items[item._index];
     },
@@ -674,13 +675,28 @@ const __vue2_script$P = {
         "w-accordion__item--disabled": item._disabled,
         [item[this.itemColorKey]]: item[this.itemColorKey]
       };
+    },
+    updateItems() {
+      const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items || [];
+      this.$set(this, "accordionItems", items.map((item, _index) => __spreadProps(__spreadValues({}, item), {
+        _index,
+        _expanded: this.value && this.value[_index],
+        _disabled: !!item.disabled
+      })));
     }
   },
+  created() {
+    this.updateItems();
+  },
   watch: {
-    value(array) {
-      this.accordionItems.forEach((item, i) => {
-        this.$set(item, "expanded", Array.isArray(array) && array[i] || false);
-      });
+    value() {
+      this.updateItems();
+    },
+    items: {
+      handler() {
+        this.updateItems();
+      },
+      deep: true
     }
   }
 };
@@ -1315,7 +1331,7 @@ 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);
+  return _c("div", { staticClass: "w-card", class: _vm.classes }, [_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$I = [];
 var wCard_vue_vue_type_style_index_0_lang = "";
@@ -1363,9 +1379,6 @@ const __vue2_script$I = {
         "w-card--tile": this.tile,
         "w-card--shadow": this.shadow
       };
-    },
-    styles() {
-      return false;
     }
   }
 };
@@ -1404,6 +1417,15 @@ var FormElementMixin = {
     },
     isReadonly() {
       return this.readonly || this.formProps.readonly;
+    },
+    validationColor() {
+      return this.formProps.validationColor;
+    },
+    labelClasses() {
+      return {
+        [this.labelColor]: this.labelColor && this.valid !== false,
+        [this.validationColor]: this.valid === false
+      };
     }
   },
   methods: {
@@ -1432,10 +1454,14 @@ var render$H = function() {
       return null;
     }
     return _vm.onInput.apply(null, arguments);
-  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", attrs: { "for": "w-checkbox--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-checkbox__input", class: this.color, on: { "click": function($event) {
+  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-checkbox__input", class: this.color, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _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);
+  } } }, [_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 || _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$H = [];
 var wCheckbox_vue_vue_type_style_index_0_lang = "";
@@ -1449,6 +1475,7 @@ const __vue2_script$H = {
     label: { type: String },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" },
     noRipple: { type: Boolean },
     indeterminate: { type: Boolean },
     round: { type: Boolean }
@@ -1524,11 +1551,11 @@ var render$G = function() {
   }, "reset": _vm.reset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.checkboxItems.some(function(item) {
     return item._isChecked;
   }), disabled: _vm.isDisabled }, false), _vm._l(_vm.checkboxItems, function(item, i) {
-    return _c("w-checkbox", { key: i, class: { mt1: !_vm.inline && i }, attrs: { "name": (_vm.name || "w-checkboxes--" + _vm._uid) + "[]", "label": item.label, "label-on-left": _vm.labelOnLeft, "value": item._isChecked, "color": item.color, "round": _vm.round, "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null }, on: { "input": function($event) {
+    return _c("w-checkbox", _vm._b({ key: i, class: { mt1: !_vm.inline && i }, attrs: { "value": item._isChecked, "name": _vm.inputName + "[]", "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null }, on: { "input": function($event) {
       return _vm.toggleCheck(item, $event);
     }, "focus": function($event) {
       return _vm.$emit("focus", $event);
-    } } }, [_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);
+    } } }, "w-checkbox", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor, round: _vm.round }, false), [_vm.$slots["item." + (i + 1)] || _vm.$slots.item ? _vm._t(_vm.$slots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "checked": !!item._isChecked, "index": i + 1 }) : _vm._e()], 2);
   }), 1);
 };
 var staticRenderFns$G = [];
@@ -1545,7 +1572,8 @@ const __vue2_script$G = {
     itemColorKey: { type: String, default: "color" },
     inline: { type: Boolean },
     round: { type: Boolean },
-    color: { type: String, default: "primary" }
+    color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" }
   },
   emits: ["input", "update:modelValue", "focus"],
   provide() {
@@ -1745,9 +1773,7 @@ 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, "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 _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, "close": _vm.onClose } }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" }, on: { "after-leave": _vm.onBeforeClose } }, [_c("w-card", { directives: [{ name: "show", rawName: "v-show", value: _vm.showContent, expression: "showContent" }], ref: "dialog", 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")];
@@ -1774,7 +1800,12 @@ const __vue2_script$D = {
     bgColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] }
   },
-  emits: ["input", "update:modelValue", "close", "closed"],
+  provide() {
+    return {
+      detachableDefaultRoot: () => this.$refs.dialog.$el || null
+    };
+  },
+  emits: ["input", "update:modelValue", "before-close", "close"],
   data() {
     return {
       showWrapper: this.value,
@@ -1804,11 +1835,14 @@ const __vue2_script$D = {
       if (!this.persistent) {
         this.showContent = false;
         if (this.transition === "fade")
-          this.onClose();
+          this.onBeforeClose();
       }
     },
-    onClose() {
+    onBeforeClose() {
       this.showWrapper = false;
+      this.$emit("before-close");
+    },
+    onClose() {
       this.$emit("update:modelValue", false);
       this.$emit("input", false);
       this.$emit("close");
@@ -1816,8 +1850,7 @@ const __vue2_script$D = {
   },
   watch: {
     value(value) {
-      if (value)
-        this.showWrapper = value;
+      this.showWrapper = value;
       this.showContent = value;
     }
   }
@@ -1836,7 +1869,7 @@ 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);
+  return _c("div", { staticClass: "w-divider", class: _vm.classes, attrs: { "role": "presentation", "aria-orientation": _vm.vertical ? "vertical" : "horizontal" } }, [_vm._t("default")], 2);
 };
 var staticRenderFns$C = [];
 var wDivider_vue_vue_type_style_index_0_lang = "";
@@ -1851,7 +1884,7 @@ const __vue2_script$C = {
     classes() {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
-        "w-divider--vertical": this.vertical,
+        [`w-divider--${this.vertical ? "vertical" : "horizontal"}`]: true,
         "w-divider--has-content": this.$slots.default
       };
     }
@@ -1871,11 +1904,15 @@ var render$B = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.showWrapper || _vm.pushContent ? _c("div", { staticClass: "w-drawer-wrap", class: _vm.wrapperClasses }, [_vm.pushContent ? _c("div", { staticClass: "w-drawer-wrap__track", style: _vm.trackStyles }, [_c("div", { staticClass: "w-drawer-wrap__pushable" }, [!_vm.noOverlay ? _c("w-overlay", { attrs: { "persistent": _vm.persistent, "persistent-no-animation": "", "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick }, model: { value: _vm.showDrawer, callback: function($$v) {
+  return _vm.showWrapper || _vm.pushContent ? _c("div", { staticClass: "w-drawer-wrap", class: _vm.wrapperClasses }, [_vm.pushContent ? _c("div", { staticClass: "w-drawer-wrap__track", style: _vm.trackStyles }, [_c("div", { staticClass: "w-drawer-wrap__pushable" }, [!_vm.noOverlay ? _c("w-overlay", { attrs: { "persistent": _vm.persistent, "persistent-no-animation": "", "bg-color": _vm.overlayColor || "transparent", "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick, "before-close": _vm.onBeforeClose }, model: { value: _vm.showDrawer, callback: function($$v) {
     _vm.showDrawer = $$v;
-  }, expression: "showDrawer" } }) : _vm._e(), _vm._t("pushable")], 2), _c("transition", { attrs: { "name": "fade" } }, [!_vm.unmountDrawer ? _c("div", { staticClass: "w-drawer", class: _vm.drawerClasses, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()])], 1) : [!_vm.noOverlay ? _c("w-overlay", { attrs: { "persistent": _vm.persistent, "persistent-no-animation": "", "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick }, model: { value: _vm.showDrawer, callback: function($$v) {
+  }, expression: "showDrawer" } }) : _vm._e(), _vm._t("pushable")], 2), _c("transition", { attrs: { "name": "fade" }, on: { "before-leave": function($event) {
+    _vm.noOverlay && _vm.onBeforeClose();
+  }, "after-leave": _vm.onClose } }, [_vm.showDrawer ? _c(_vm.tag || "aside", { ref: "drawer", tag: "component", staticClass: "w-drawer", class: _vm.drawerClasses, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()], 1)], 1) : [!_vm.noOverlay ? _c("w-overlay", { attrs: { "persistent": _vm.persistent, "persistent-no-animation": "", "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick, "before-close": _vm.onBeforeClose }, model: { value: _vm.showDrawer, callback: function($$v) {
     _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();
+  }, expression: "showDrawer" } }) : _vm._e(), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" }, on: { "before-leave": function($event) {
+    _vm.noOverlay && _vm.onBeforeClose();
+  }, "after-leave": _vm.onClose } }, [_vm.showDrawer ? _c(_vm.tag || "aside", { ref: "drawer", tag: "component", staticClass: "w-drawer", class: _vm.drawerClasses, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()], 1)]], 2) : _vm._e();
 };
 var staticRenderFns$B = [];
 var wDrawer_vue_vue_type_style_index_0_lang = "";
@@ -1903,7 +1940,12 @@ const __vue2_script$B = {
     overlayOpacity: { type: [Number, String, Boolean] },
     tag: { type: String, default: "aside" }
   },
-  emits: ["input", "update:modelValue", "close"],
+  provide() {
+    return {
+      detachableDefaultRoot: () => this.$refs.drawer || null
+    };
+  },
+  emits: ["input", "update:modelValue", "before-close", "close"],
   data() {
     return {
       showWrapper: this.value,
@@ -1944,7 +1986,7 @@ const __vue2_script$B = {
     },
     trackStyles() {
       return this.pushContent && this.showDrawer && {
-        transform: `translateX(${this.position === "left" ? "" : "-"}${this.size})`
+        transform: `translateX(${this.position === "left" ? "" : "-"}${this.size || "200px"})`
       };
     },
     styles() {
@@ -1961,21 +2003,21 @@ const __vue2_script$B = {
     }
   },
   methods: {
-    close() {
-      this.showWrapper = false;
-      this.$emit("update:modelValue", false);
-      this.$emit("input", false);
-      this.$emit("close", false);
-    },
     onOutsideClick() {
-      if (!this.persistent) {
-        this.showDrawer = false;
-        if (this.pushContent)
-          this.close();
-      } else if (!this.persistentNoAnimation) {
+      if (this.persistent && !this.persistentNoAnimation) {
         this.persistentAnimate = true;
         setTimeout(() => this.persistentAnimate = false, 200);
       }
+    },
+    onBeforeClose() {
+      this.$emit("before-close");
+      this.showDrawer = false;
+    },
+    onClose() {
+      this.showWrapper = false;
+      this.$emit("update:modelValue", false);
+      this.$emit("input", false);
+      this.$emit("close");
     }
   },
   watch: {
@@ -2078,23 +2120,24 @@ const asyncSome = async (array, predicate) => {
 };
 const __vue2_script$z = {
   name: "w-form",
-  provide() {
-    return {
-      formRegister: this.register,
-      formUnregister: this.unregister,
-      validateElement: this.validateElement,
-      formProps: this.$props
-    };
-  },
   props: {
     value: {},
     allowSubmit: { type: Boolean },
     noKeyupValidation: { type: Boolean },
     noBlurValidation: { type: Boolean },
     errorPlaceholders: { type: Boolean },
+    validationColor: { type: String, default: "error" },
     disabled: { type: Boolean },
     readonly: { type: Boolean }
   },
+  provide() {
+    return {
+      formRegister: this.register,
+      formUnregister: this.unregister,
+      validateElement: this.validateElement,
+      formProps: this.$props
+    };
+  },
   emits: [
     "submit",
     "before-validate",
@@ -2212,12 +2255,22 @@ 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);
+  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", class: _vm.formProps.validationColor }, [_vm._t("error-message", null, { "message": _vm.Validation.message })], 2) : _c("div", { staticClass: "w-form-el__error error", class: _vm.formProps.validationColor, domProps: { "innerHTML": _vm._s(_vm.Validation.message) } })] : _vm._e()], 2)], 1);
 };
 var staticRenderFns$y = [];
 var wFormElement_vue_vue_type_style_index_0_lang = "";
 const __vue2_script$y = {
   name: "w-form-element",
+  props: {
+    valid: { required: true },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    inputValue: { required: true },
+    validators: { type: Array },
+    isFocused: { default: false },
+    column: { default: false },
+    wrap: { default: false }
+  },
   inject: {
     formRegister: { default: null },
     formUnregister: { default: null },
@@ -2226,21 +2279,12 @@ const __vue2_script$y = {
       default: () => ({
         noKeyupValidation: false,
         noBlurValidation: false,
+        validationColor: "error",
         disabled: false,
         readonly: false
       })
     }
   },
-  props: {
-    valid: { required: true },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    inputValue: { required: true },
-    validators: { type: Array },
-    isFocused: { default: false },
-    column: { default: false },
-    wrap: { default: false }
-  },
   emits: ["reset", "update:valid"],
   data: () => ({
     Validation: {
@@ -2380,7 +2424,7 @@ var render$w = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c(_vm.tag || "i", _vm._g({ tag: "component", staticClass: "w-icon", class: _vm.classes, style: _vm.styles, attrs: { "role": "icon", "aria-hidden": "true" } }, _vm.$listeners), [_vm.ligature ? [_vm._v(_vm._s(_vm.ligature.icon))] : _vm._e()], 2);
+  return _c(_vm.tag || "i", _vm._g({ tag: "component", staticClass: "w-icon", class: _vm.classes, style: _vm.readIcon() && _vm.styles, attrs: { "role": "icon", "aria-hidden": "true" } }, _vm.$listeners), [_vm.hasLigature ? [_vm._v(_vm._s(_vm.icon))] : _vm._e()], 2);
 };
 var staticRenderFns$w = [];
 var wIcon_vue_vue_type_style_index_0_lang = "";
@@ -2410,14 +2454,12 @@ const __vue2_script$w = {
   },
   emits: [],
   data: () => ({
-    icon: ""
+    icon: "",
+    fontName: ""
   }),
   computed: {
-    ligature() {
-      if (!config.iconsLigature)
-        return false;
-      const [fontName, icon] = this.icon.split(" ");
-      return fontName === config.iconsLigature && { fontName, icon };
+    hasLigature() {
+      return config.iconsLigature === this.fontName;
     },
     forcedSize() {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size);
@@ -2427,7 +2469,8 @@ const __vue2_script$w = {
     },
     classes() {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -2441,19 +2484,21 @@ const __vue2_script$w = {
         "w-icon--rotate-90": this.rotate90a,
         "w-icon--rotate-135": this.rotate135a,
         "w-icon--flip-x": this.flipX,
-        "w-icon--flip-y": this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        "w-icon--flip-y": this.flipY
       };
     },
     styles() {
       return this.forcedSize && `font-size: ${this.forcedSize}`;
     }
   },
-  created() {
-    this.icon = this.$slots.default[0].text.trim() || "";
-  },
-  beforeUpdate() {
-    this.icon = this.$slots.default[0].text.trim();
+  methods: {
+    readIcon() {
+      const { default: slot } = this.$slots;
+      const [fontName = "", icon = ""] = slot[0].text.trim().split(" ") || [];
+      this.fontName = fontName;
+      this.icon = icon;
+      return true;
+    }
   }
 };
 const __cssModules$w = {};
@@ -2621,7 +2666,9 @@ var render$u = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-left", $event);
   } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.type === "checkbox" && _vm.type !== "file" ? _c("input", _vm._g(_vm._b({ directives: [{ name: "model", rawName: "v-model", value: _vm.inputValue, expression: "inputValue" }], ref: "input", staticClass: "w-input__input", attrs: { "id": "w-input--" + _vm._uid, "name": _vm.inputName, "placeholder": _vm.placeholder || null, "step": _vm.step || null, "min": _vm.min || null, "max": _vm.max || null, "minlength": _vm.minlength || null, "maxlength": _vm.maxlength || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "disabled": _vm.isDisabled || null, "required": _vm.required || null, "tabindex": _vm.tabindex || null, "type": "checkbox" }, domProps: { "checked": Array.isArray(_vm.inputValue) ? _vm._i(_vm.inputValue, null) > -1 : _vm.inputValue }, on: { "input": _vm.onInput, "focus": _vm.onFocus, "blur": _vm.onBlur, "change": function($event) {
     var $$a = _vm.inputValue, $$el = $event.target, $$c = $$el.checked ? true : false;
@@ -2646,11 +2693,15 @@ var render$u = function() {
     return [_vm.$slots["no-file"] === void 0 ? [_vm._v("No file")] : _vm._e()];
   })], 2) : _vm._e(), _vm._l(_vm.inputFiles, function(file, i) {
     return _c("span", { key: file.lastModified }, [_vm._v(_vm._s(i ? ", " : "")), _c("span", { key: i + "b", staticClass: "filename" }, [_vm._v(_vm._s(file.base))]), _vm._v(_vm._s(file.extension ? "." + file.extension : ""))]);
-  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-right", $event);
   } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e(), _vm.hasLoading || _vm.showProgress && (_vm.uploadInProgress || _vm.uploadComplete) ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color, "value": _vm.showProgress ? (_vm.uploadInProgress || _vm.uploadComplete) && _vm.overallFilesProgress : _vm.loadingValue } }) : _vm._e()], 2), _vm.type === "file" && _vm.preview && _vm.inputFiles.length ? _c("label", { staticClass: "d-flex", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._l(_vm.inputFiles, function(file, i) {
     return [file.progress < 100 ? _c("i", { key: i, staticClass: "w-icon wi-spinner w-icon--spin size--sm w-input__file-preview primary" }) : file.preview ? _c("img", { key: i, staticClass: "w-input__file-preview", attrs: { "src": file.preview, "alt": "" } }) : _c("i", { key: i, staticClass: "w-icon w-input__file-preview primary size--md", class: _vm.preview && typeof _vm.preview === "string" ? _vm.preview : "wi-file" })];
-  })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()]], 2);
+  })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()]], 2);
 };
 var staticRenderFns$u = [];
 var wInput_vue_vue_type_style_index_0_lang = "";
@@ -2667,8 +2718,9 @@ const __vue2_script$u = {
     staticLabel: { type: Boolean },
     placeholder: { type: String },
     color: { type: String, default: "primary" },
-    progressColor: { type: String },
     bgColor: { type: String },
+    labelColor: { type: String, default: "primary" },
+    progressColor: { type: String },
     minlength: { type: [Number, String] },
     maxlength: { type: [Number, String] },
     step: { type: [Number, String] },
@@ -2737,7 +2789,7 @@ const __vue2_script$u = {
       return !this.staticLabel || !this.hasValue && !this.placeholder;
     },
     overallFilesProgress() {
-      const progress = this.inputFiles.reduce((total2, file) => total2 + file.progress, 0);
+      const progress = +this.inputFiles.reduce((total2, file) => total2 + file.progress, 0);
       const total = progress / this.inputFiles.length;
       this.$emit("update:overallProgress", this.inputFiles.length ? total : void 0);
       return total;
@@ -2764,14 +2816,9 @@ const __vue2_script$u = {
         "w-input--inner-icon-right": this.innerIconRight
       };
     },
-    validationClasses() {
-      return this.isFocused && {
-        [this.valid === false ? "error" : this.color]: this.color || this.valid === false
-      };
-    },
     inputWrapClasses() {
       return {
-        [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
+        [this.valid === false ? this.validationColor : this.color]: this.color || this.valid === false,
         [`${this.bgColor}--bg`]: this.bgColor,
         "w-input__input-wrap--file": this.type === "file",
         "w-input__input-wrap--round": this.round,
@@ -3157,7 +3204,6 @@ var wList = /* @__PURE__ */ function() {
 }();
 var DetachableMixin = {
   props: {
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
     appendTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -3172,16 +3218,19 @@ var DetachableMixin = {
     zIndex: { type: [Number, String, Boolean] },
     activator: { type: [String, Object, HTMLElement] }
   },
+  inject: {
+    detachableDefaultRoot: { default: null }
+  },
   data: () => ({
     docEventListenersHandlers: []
   }),
   computed: {
     appendToTarget() {
-      const defaultTarget = ".w-app";
-      if (this.detachTo && !this.appendTo) {
-        consoleWarn(`The ${this.$options.name} prop \`detach-to\` is deprecated. You can replace it with \`append-to\`.`);
+      let defaultTarget = ".w-app";
+      if (typeof this.detachableDefaultRoot === "function") {
+        defaultTarget = this.detachableDefaultRoot() || defaultTarget;
       }
-      let target = this.appendTo || this.detachTo || defaultTarget;
+      let target = this.appendTo || defaultTarget;
       if (target === true)
         target = defaultTarget;
       else if (this.appendTo === "activator")
@@ -3269,6 +3318,8 @@ var DetachableMixin = {
     },
     computeDetachableCoords() {
       let { top, left, width, height } = this.getActivatorCoordinates();
+      if (!this.detachableEl)
+        return;
       this.detachableEl.style.visibility = "hidden";
       this.detachableEl.style.display = "flex";
       const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
@@ -3371,7 +3422,8 @@ var DetachableMixin = {
       this.bindActivatorEvents();
     else {
       this.$nextTick(() => {
-        this.activator && this.bindActivatorEvents();
+        if (this.activator)
+          this.bindActivatorEvents();
         if (this.value)
           this.toggle({ type: "click", target: this.activatorEl });
       });
@@ -3402,10 +3454,6 @@ var DetachableMixin = {
       if (!!bool !== this.detachableVisible)
         this.toggle({ type: "click", target: this.activatorEl });
     },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
     appendTo() {
       this.removeFromDOM();
       this.insertInDOM();
@@ -3464,6 +3512,14 @@ const __vue2_script$s = {
     persistent: { type: Boolean },
     delay: { type: Number }
   },
+  provide() {
+    return {
+      detachableDefaultRoot: () => {
+        var _a;
+        return ((_a = this.$refs.detachable) == null ? void 0 : _a.$el) || this.$refs.detachable || null;
+      }
+    };
+  },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
     detachableVisible: false,
@@ -3753,7 +3809,7 @@ var render$q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("transition", { attrs: { "name": "fade", "appear": "" }, on: { "after-leave": _vm.onClosed } }, [_vm.showOverlay ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.value, expression: "value" }, { 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": _vm.onClose } }, [_vm.showOverlay ? _c("div", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "overlay", staticClass: "w-overlay", class: _vm.classes, style: _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;
     }
@@ -3773,7 +3829,12 @@ const __vue2_script$q = {
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
   },
-  emits: ["input", "update:modelValue", "click", "close", "closed"],
+  provide() {
+    return {
+      detachableDefaultRoot: () => this.$refs.overlay || null
+    };
+  },
+  emits: ["input", "update:modelValue", "click", "before-close", "close"],
   data: () => ({
     persistentAnimate: false,
     showOverlay: false
@@ -3802,15 +3863,15 @@ const __vue2_script$q = {
         this.persistentAnimate = true;
         setTimeout(() => this.persistentAnimate = false, 150);
       } else if (!this.persistent) {
-        this.$emit("update:modelValue", false);
-        this.$emit("input", false);
-        this.$emit("close");
+        this.showOverlay = false;
+        this.$emit("before-close");
       }
       this.$emit("click", e);
     },
-    onClosed() {
-      this.showOverlay = false;
-      this.$emit("closed");
+    onClose() {
+      this.$emit("update:modelValue", false);
+      this.$emit("input", false);
+      this.$emit("close");
     }
   },
   created() {
@@ -3818,8 +3879,8 @@ const __vue2_script$q = {
   },
   watch: {
     value(bool) {
-      if (bool)
-        this.showOverlay = true;
+      if (this.showOverlay !== bool)
+        this.showOverlay = bool;
     }
   }
 };
@@ -3960,10 +4021,14 @@ var render$n = function() {
     return _vm.$emit("focus", $event);
   }, "change": function($event) {
     _vm.onInput($event);
-  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", attrs: { "for": "w-radio--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-radio__input", class: this.color, on: { "click": function($event) {
+  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-radio__input", class: this.color, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _vm.$refs.input.click();
-  } } }), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", attrs: { "for": "w-radio--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
+  } } }), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$n = [];
 var wRadio_vue_vue_type_style_index_0_lang = "";
@@ -3977,6 +4042,7 @@ const __vue2_script$n = {
     label: { type: String },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" },
     noRipple: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "focus"],
@@ -4055,11 +4121,11 @@ var render$m = function() {
     _vm.$emit("update:modelValue", _vm.inputValue = null);
     _vm.$emit("input", null);
   } } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.inputValue, disabled: _vm.isDisabled }, false), _vm._l(_vm.radioItems, function(item, i) {
-    return _c("w-radio", { key: i, class: { mt1: !_vm.inline && i }, attrs: { "name": _vm.inputName, "value": item.value === _vm.value, "label": item.label, "label-on-left": _vm.labelOnLeft, "color": item.color, "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null }, on: { "input": function($event) {
+    return _c("w-radio", _vm._b({ key: i, class: { mt1: !_vm.inline && i }, attrs: { "name": _vm.inputName, "value": item.value === _vm.value, "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null }, on: { "input": function($event) {
       return _vm.onInput(item);
     }, "focus": function($event) {
       return _vm.$emit("focus", $event);
-    } } }, [_vm.$scopedSlots["item." + (i + 1)] ? _vm._t("item." + (i + 1), null, { "item": _vm.getOriginalItem(item), "index": i + 1, "checked": item.value === _vm.value }) : _vm.$scopedSlots.item ? _vm._t("item", null, { "item": _vm.getOriginalItem(item), "index": i + 1, "checked": item.value === _vm.value }) : _vm._e()], 2);
+    } } }, "w-radio", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor }, false), [_vm.$slots["item." + (i + 1)] || _vm.$slots.item ? _vm._t(_vm.$slots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "index": i + 1, "checked": item.value === _vm.value }) : _vm._e()], 2);
   }), 1);
 };
 var staticRenderFns$m = [];
@@ -4075,7 +4141,8 @@ const __vue2_script$m = {
     itemValueKey: { type: String, default: "value" },
     itemColorKey: { type: String, default: "color" },
     inline: { type: Boolean },
-    color: { type: String, default: "primary" }
+    color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" }
   },
   emits: ["input", "update:modelValue", "focus"],
   provide() {
@@ -4262,12 +4329,9 @@ 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" }, 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;
+  }, "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 || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _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 : void 0, "align-left": "", "custom": "", "min-width": "activator" }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     ref.on;
     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)();
@@ -4279,7 +4343,9 @@ var render$k = function() {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onKeydown($event);
     } } }), _vm._l(_vm.inputValue.length ? _vm.inputValue : [{}], function(val, i) {
       return _c("input", { key: i, attrs: { "type": "hidden", "name": _vm.inputName + (_vm.multiple ? "[]" : "") }, domProps: { "value": val.value || "" } });
-    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj = {}, _obj[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj), attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj$1 = {}, _obj$1[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj$1), attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-right", attrs: { "tag": "label" }, on: { "click": function($event) {
+    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+      return [_vm._v(_vm._s(_vm.label))];
+    })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-right", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-right", $event);
     } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()], 2)];
   } }], null, true), model: { value: _vm.showMenu, callback: function($$v) {
@@ -4304,7 +4370,9 @@ var render$k = function() {
     return [_vm._t("item", function() {
       return [_vm._v(_vm._s(item[_vm.itemLabelKey]))];
     }, { "item": item, "selected": selected, "index": index2 })];
-  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--right 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--right w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
+  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$k = [];
 var wSelect_vue_vue_type_style_index_0_lang = "";
@@ -4327,8 +4395,9 @@ const __vue2_script$k = {
     itemClass: { type: String },
     menuClass: { type: String },
     color: { type: String, default: "primary" },
-    selectionColor: { type: String, default: "primary" },
     bgColor: { type: String },
+    labelColor: { type: String, default: "primary" },
+    selectionColor: { type: String, default: "primary" },
     outline: { type: Boolean },
     round: { type: Boolean },
     shadow: { type: Boolean },
@@ -4344,7 +4413,6 @@ const __vue2_script$k = {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectingItem: false,
     selectionWrapRef: void 0
   }),
   computed: {
@@ -4374,7 +4442,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.selectingItem) && !this.isReadonly,
+        "w-select--focused": (this.isFocused || this.showMenu) && !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,
@@ -4500,12 +4568,12 @@ var render$j = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.wrapperClasses, attrs: { "valid": _vm.valid, "wrap": "" }, on: { "update:valid": function($event) {
+  return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.wrapperClasses, attrs: { "valid": _vm.valid, "wrap": _vm.formRegister || null }, on: { "update:valid": function($event) {
     _vm.valid = $event;
   }, "reset": function($event) {
     _vm.rangeValuePercent = 0;
     _vm.updateRangeValueScaled();
-  } } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.rangeValueScaled, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.$slots["label-left"] ? _c("label", { staticClass: "w-slider__label w-slider__label--left w-form-el-shakable", attrs: { "for": "button--" + _vm._uid } }, [_vm._t("label-left")], 2) : _vm.labelLeft ? _c("label", { staticClass: "w-slider__label w-slider__label--left w-form-el-shakable", attrs: { "for": "button--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.labelLeft) } }) : _vm._e(), _c("div", { staticClass: "w-slider__track-wrap" }, [_c("div", { ref: "track", staticClass: "w-slider__track", class: _vm.trackClasses, attrs: { "role": "slider", "aria-label": "Slider", "aria-valuemin": _vm.minVal, "aria-valuemax": _vm.maxVal, "aria-valuenow": _vm.rangeValueScaled, "aria-readonly": _vm.isReadonly ? "true" : "false", "aria-orientation": "horizontal" }, on: { "mousedown": _vm.onTrackMouseDown, "touchstart": _vm.onTrackMouseDown } }, [_c("div", { staticClass: "w-slider__range", class: _vm.rangeClasses, style: _vm.rangeStyles }), _c("div", { staticClass: "w-slider__thumb", style: _vm.thumbStyles }, [_c("button", { ref: "thumb", staticClass: "w-slider__thumb-button", class: [_vm.color], attrs: { "id": "button--" + _vm._uid, "name": _vm.inputName, "value": _vm.rangeValueScaled, "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false" }, on: { "keydown": [function($event) {
+  } } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.rangeValueScaled, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.$slots["label-left"] ? _c("label", { staticClass: "w-slider__label w-slider__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "button--" + _vm._uid } }, [_vm._t("label-left")], 2) : _vm.labelLeft ? _c("label", { staticClass: "w-slider__label w-slider__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "button--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.labelLeft) } }) : _vm._e(), _c("div", { staticClass: "w-slider__track-wrap" }, [_c("div", { ref: "track", staticClass: "w-slider__track", class: _vm.trackClasses, attrs: { "role": "slider", "aria-label": "Slider", "aria-valuemin": _vm.minVal, "aria-valuemax": _vm.maxVal, "aria-valuenow": _vm.rangeValueScaled, "aria-readonly": _vm.isReadonly ? "true" : "false", "aria-orientation": "horizontal" }, on: { "mousedown": _vm.onTrackMouseDown, "touchstart": _vm.onTrackMouseDown } }, [_c("div", { staticClass: "w-slider__range", class: _vm.rangeClasses, style: _vm.rangeStyles }), _c("div", { staticClass: "w-slider__thumb", style: _vm.thumbStyles }, [_c("button", { ref: "thumb", staticClass: "w-slider__thumb-button", class: [_vm.color], attrs: { "id": "button--" + _vm._uid, "name": _vm.inputName, "value": _vm.rangeValueScaled, "disabled": _vm.isDisabled || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "tabindex": _vm.isDisabled || _vm.isReadonly ? -1 : null }, on: { "keydown": [function($event) {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) {
       return null;
     }
@@ -4537,7 +4605,7 @@ var render$j = function() {
     } } }, [_vm._v(_vm._s(_vm.percentToScaled(currStep * (100 / _vm.numberOfSteps))))]);
   }), ~~_vm.numberOfSteps !== _vm.numberOfSteps ? _c("div", { staticClass: "w-slider__step-label", staticStyle: { "left": "100%" }, on: { "click": function($event) {
     return _vm.onStepLabelClick(100);
-  } } }, [_vm._v(_vm._s(this.maxVal))]) : _vm._e()], 2) : _vm._e()]), _vm.$slots["label-right"] ? _c("label", { staticClass: "w-slider__label w-slider__label--right w-form-el-shakable", attrs: { "for": "button--" + _vm._uid } }, [_vm._t("label-right")], 2) : _vm.labelRight ? _c("label", { staticClass: "w-slider__label w-slider__label--right w-form-el-shakable", attrs: { "for": "button--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.labelRight) } }) : _vm._e()]);
+  } } }, [_vm._v(_vm._s(this.maxVal))]) : _vm._e()], 2) : _vm._e()]), _vm.$slots["label-right"] ? _c("label", { staticClass: "w-slider__label w-slider__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "button--" + _vm._uid } }, [_vm._t("label-right")], 2) : _vm.labelRight ? _c("label", { staticClass: "w-slider__label w-slider__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "button--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.labelRight) } }) : _vm._e()]);
 };
 var staticRenderFns$j = [];
 var wSlider_vue_vue_type_style_index_0_lang = "";
@@ -4548,6 +4616,7 @@ const __vue2_script$j = {
     value: { type: Number, default: 0 },
     color: { type: String, default: "primary" },
     bgColor: { type: String },
+    labelColor: { type: String, default: "primary" },
     stepLabels: { type: [Boolean, Array] },
     thumbLabel: { type: [Boolean, String] },
     thumbLabelClass: { type: String },
@@ -4798,10 +4867,14 @@ var render$g = function() {
     _vm.onInput();
   }, "focus": function($event) {
     return _vm.$emit("focus", $event);
-  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-switch__label w-form-el-shakable", attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-switch__label w-form-el-shakable", attrs: { "for": "w-switch--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", _vm._g({ staticClass: "w-switch__input", class: _vm.inputClasses, on: { "click": function($event) {
+  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-switch__label w-switch__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _c("div", _vm._g({ staticClass: "w-switch__input", class: _vm.inputClasses, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _vm.$refs.input.click();
-  } } }, _vm.$listeners)), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-switch__label w-form-el-shakable", attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-switch__label w-form-el-shakable", attrs: { "for": "w-switch--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
+  } } }, _vm.$listeners), [_vm.$slots.track ? _c("div", { staticClass: "w-switch__track" }, [_vm._t("track")], 2) : _vm._e(), _vm.$slots.thumb ? _c("div", { staticClass: "w-switch__thumb" }, [_vm._t("thumb")], 2) : _vm._e()]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-switch__label w-switch__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$g = [];
 var wSwitch_vue_vue_type_style_index_0_lang = "";
@@ -4813,6 +4886,7 @@ const __vue2_script$g = {
     label: { type: String, default: "" },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" },
     thin: { type: Boolean },
     noRipple: { type: Boolean }
   },
@@ -4838,6 +4912,8 @@ const __vue2_script$g = {
         "w-switch--disabled": this.isDisabled,
         "w-switch--readonly": this.isReadonly,
         "w-switch--ripple": this.ripple.start,
+        "w-switch--custom-thumb": this.$slots.thumb,
+        "w-switch--custom-track": this.$slots.track,
         "w-switch--rippled": this.ripple.end
       };
     },
@@ -4938,6 +5014,7 @@ const __vue2_script$e = {
     titleClass: { type: String },
     activeClass: { type: String, default: "primary" },
     noSlider: { type: Boolean },
+    pillSlider: { type: Boolean },
     sliderColor: { type: String, default: "primary" },
     contentClass: { type: String },
     transition: { type: [String, Boolean], default: "" },
@@ -4984,6 +5061,7 @@ const __vue2_script$e = {
       return {
         "w-tabs--card": this.card,
         "w-tabs--no-slider": this.noSlider,
+        "w-tabs--pill-slider": this.pillSlider,
         "w-tabs--fill-bar": this.fillBar,
         "w-tabs--init": this.init
       };
@@ -5483,7 +5561,6 @@ var wTag = /* @__PURE__ */ function() {
   return __component__$c.exports;
 }();
 var render$b = function() {
-  var _obj, _obj$1;
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -5492,16 +5569,22 @@ var render$b = function() {
   }, "reset": function($event) {
     _vm.$emit("update:modelValue", _vm.inputValue = "");
     _vm.$emit("input", "");
-  } } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.inputValue, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-textarea__label w-textarea__label--left w-form-el-shakable", attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--left w-form-el-shakable", attrs: { "for": "w-textarea--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-textarea__textarea-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-textarea__icon w-textarea__icon--inner-left", attrs: { "tag": "label", "for": "w-textarea--" + _vm._uid }, on: { "click": function($event) {
+  } } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.inputValue, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-textarea__textarea-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-textarea__icon w-textarea__icon--inner-left", attrs: { "tag": "label", "for": "w-textarea--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-left", $event);
   } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _c("textarea", _vm._g({ directives: [{ name: "model", rawName: "v-model", value: _vm.inputValue, expression: "inputValue" }], ref: "textarea", staticClass: "w-textarea__textarea", attrs: { "id": "w-textarea--" + _vm._uid, "name": _vm.inputName, "placeholder": _vm.placeholder || null, "rows": _vm.rows || null, "cols": _vm.cols || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "disabled": _vm.isDisabled || null, "required": _vm.required || null, "tabindex": _vm.tabindex || null }, domProps: { "value": _vm.inputValue }, on: { "input": [function($event) {
     if ($event.target.composing) {
       return;
     }
     _vm.inputValue = $event.target.value;
-  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, _vm.listeners)), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-textarea__label w-textarea__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj = {}, _obj[_vm.valid === false ? "error" : this.color] = this.color || _vm.valid === false, _obj), attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj$1 = {}, _obj$1[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj$1), attrs: { "for": "w-textarea--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-textarea__icon w-textarea__icon--inner-right", attrs: { "tag": "label", "for": "w-textarea--" + _vm._uid }, on: { "click": function($event) {
+  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, _vm.listeners)), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-textarea__icon w-textarea__icon--inner-right", attrs: { "tag": "label", "for": "w-textarea--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-right", $event);
-  } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()], 2), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-textarea__label w-textarea__label--right w-form-el-shakable", attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--right w-form-el-shakable", attrs: { "for": "w-textarea--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
+  } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()], 2), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$b = [];
 var wTextarea_vue_vue_type_style_index_0_lang = "";
@@ -5518,6 +5601,7 @@ const __vue2_script$b = {
     placeholder: { type: String },
     color: { type: String, default: "primary" },
     bgColor: { type: String },
+    labelColor: { type: String, default: "primary" },
     dark: { type: Boolean },
     outline: { type: Boolean },
     shadow: { type: Boolean },
@@ -5569,7 +5653,7 @@ const __vue2_script$b = {
     },
     inputWrapClasses() {
       return {
-        [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
+        [this.valid === false ? this.validationColor : this.color]: this.color || this.valid === false,
         [`${this.bgColor}--bg`]: this.bgColor,
         "w-textarea__textarea-wrap--tile": this.tile,
         "w-textarea__textarea-wrap--box": this.outline || this.bgColor || this.shadow,
@@ -5606,6 +5690,7 @@ const __vue2_script$b = {
       const linesCount = (this.$refs.textarea.scrollHeight - this.paddingY) / this.lineHeight;
       const height = Math.max(linesCount, this.rows) * this.lineHeight + this.paddingY;
       this.$refs.textarea.style.height = height + "px";
+      console.log("recomputing height", height);
     },
     getLineHeight() {
       const computedStyles2 = window.getComputedStyle(this.$refs.textarea, null);
@@ -5623,7 +5708,7 @@ const __vue2_script$b = {
   watch: {
     value(value) {
       this.inputValue = value;
-      this.computeHeight();
+      this.$nextTick(this.computeHeight);
     },
     resizable(value) {
       if (value)
@@ -5655,7 +5740,7 @@ var render$a = function() {
   var _c = _vm._self._c || _h;
   return _c("ul", { staticClass: "w-timeline" }, _vm._l(_vm.items, function(item, i) {
     var _obj;
-    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "div", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$slots["item." + (i + 1)] ? _vm._t("item", function() {
+    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "component", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$slots["item." + (i + 1)] ? _vm._t("item", function() {
       var _obj2;
       return [_c("div", { staticClass: "w-timeline-item__title", class: (_obj2 = {}, _obj2[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj2), domProps: { "innerHTML": _vm._s(item[_vm.itemTitleKey]) } }), _c("div", { staticClass: "w-timeline-item__content", domProps: { "innerHTML": _vm._s(item[_vm.itemContentKey]) } })];
     }, { "item": item, "index": i + 1 }) : _vm._t("item." + (i + 1), null, { "item": item, "index": i + 1 })], 2);
@@ -5702,6 +5787,10 @@ const __vue2_script$9 = {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -5712,19 +5801,27 @@ const __vue2_script$9 = {
       const h = this.height;
       return h && parseInt(h) == h ? h + "px" : h;
     },
+    toolbarWidth() {
+      const w = this.width;
+      return w && parseInt(w) == w ? w + "px" : w;
+    },
     classes() {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         "w-toolbar--absolute": !!this.absolute,
         "w-toolbar--fixed": !!this.fixed,
-        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: true,
+        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? "right" : "left"}`]: this.vertical,
         "w-toolbar--no-border": this.noBorder,
         "w-toolbar--shadow": !!this.shadow
       };
     },
     styles() {
-      return this.height ? `height: ${this.toolbarHeight}` : false;
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      };
     }
   }
 };
@@ -5742,7 +5839,7 @@ var render$8 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-tooltip-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.detachableVisible ? _c("div", { ref: "detachable", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()])], 2);
+  return _c("div", { staticClass: "w-tooltip-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.detachableVisible ? _c("div", { key: _vm._uid, ref: "detachable", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()])], 2);
 };
 var staticRenderFns$8 = [];
 var wTooltip_vue_vue_type_style_index_0_lang = "";
@@ -5900,7 +5997,7 @@ var render$6 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("transition", _vm._b({ attrs: { "name": "expand", "mode": "out-in", "css": false }, on: { "before-appear": _vm.beforeAppear, "appear": _vm.appear, "after-appear": _vm.afterAppear, "before-enter": _vm.beforeEnter, "enter": _vm.enter, "after-enter": _vm.afterEnter, "before-leave": _vm.beforeLeave, "leave": _vm.leave, "after-leave": _vm.afterLeave } }, "transition", _vm.$props, false), [_vm._t("default")], 2);
+  return _c("transition", { attrs: { "name": "expand", "mode": "out-in", "css": false }, on: { "before-appear": _vm.beforeAppear, "appear": _vm.appear, "after-appear": _vm.afterAppear, "before-enter": _vm.beforeEnter, "enter": _vm.enter, "after-enter": _vm.afterEnter, "before-leave": _vm.beforeLeave, "leave": _vm.leave, "after-leave": _vm.afterLeave } }, [_vm._t("default")], 2);
 };
 var staticRenderFns$6 = [];
 const __vue2_script$6 = {
@@ -5908,7 +6005,7 @@ const __vue2_script$6 = {
   props: {
     x: { type: Boolean },
     y: { type: Boolean },
-    duration: { type: Number, default: 200 }
+    duration: { type: Number, default: 250 }
   },
   data: () => ({
     el: {
@@ -5943,53 +6040,44 @@ const __vue2_script$6 = {
       if (this.cleanTransitionCycle)
         this.saveOriginalStyles(el);
       this.cleanTransitionCycle = false;
-      this.$emit("before-appear");
     },
     appear(el, done) {
       this.show(el);
       setTimeout(done, this.duration);
       this.cleanTransitionCycle = false;
-      this.$emit("appear");
     },
     afterAppear(el) {
       this.applyOriginalStyles(el);
       el.style.cssText = el.style.cssText.replace("display: none;", "");
       this.cleanTransitionCycle = false;
-      this.$emit("after-appear");
     },
     beforeEnter(el) {
       if (this.cleanTransitionCycle)
         this.saveOriginalStyles(el);
       this.cleanTransitionCycle = false;
-      this.$emit("before-enter");
     },
     enter(el, done) {
       this.show(el);
       setTimeout(done, this.duration);
       this.cleanTransitionCycle = false;
-      this.$emit("enter");
     },
     afterEnter(el) {
       this.applyOriginalStyles(el);
       el.style.cssText = el.style.cssText.replace("display: none;", "");
       this.cleanTransitionCycle = false;
-      this.$emit("after-enter");
     },
     beforeLeave(el) {
       this.beforeHide(el);
       this.cleanTransitionCycle = false;
-      this.$emit("before-leave");
     },
     leave(el, done) {
       this.hide(el);
       setTimeout(done, this.duration);
       this.cleanTransitionCycle = false;
-      this.$emit("leave");
     },
     afterLeave(el) {
       this.applyOriginalStyles(el);
       this.cleanTransitionCycle = true;
-      this.$emit("after-leave");
     },
     applyHideStyles(el) {
       if (this.animX) {
@@ -6250,9 +6338,8 @@ function __vue2_injectStyles(context) {
 var wTransitionTwist = /* @__PURE__ */ function() {
   return __component__.exports;
 }();
-var components = /* @__PURE__ */ Object.freeze({
+var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  [Symbol.toStringTag]: "Module",
   WAccordion: wAccordion,
   WAlert: wAlert,
   WApp: wApp,
@@ -6303,7 +6390,7 @@ var components = /* @__PURE__ */ Object.freeze({
   WTransitionSlide: wTransitionSlide,
   WTransitionSlideFade: wTransitionSlideFade,
   WTransitionTwist: wTransitionTwist
-});
+}, Symbol.toStringTag, { value: "Module" }));
 const install = WaveUI.install;
 WaveUI.install = (Vue2, options = {}) => install.call(WaveUI, Vue2, __spreadValues({ components }, options));
 if (typeof window !== "undefined" && window.Vue)