wave-ui 2.34.0 → 2.36.1

package/dist/wave-ui.es.js

@@ -495,17 +495,17 @@ let WaveUI = _WaveUI;
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-const _hoisted_1$u = ["aria-expanded"];
-const _hoisted_2$e = ["onClick", "onFocus", "onKeypress", "tabindex"];
+const _hoisted_1$r = ["aria-expanded"];
+const _hoisted_2$d = ["onClick", "onFocus", "onKeypress", "tabindex"];
 const _hoisted_3$b = ["innerHTML"];
-const _hoisted_4$a = ["innerHTML"];
+const _hoisted_4$9 = ["innerHTML"];
 function render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_transition_expand = resolveComponent("w-transition-expand");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-accordion", $options.accordionClasses])
   }, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList($options.accordionItems, (item, i) => {
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.accordionItems, (item, i) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["w-accordion__item", $options.itemClasses(item)]),
         key: i,
@@ -554,8 +554,12 @@ function render$P(_ctx, _cache, $props, $setup, $data, $options) {
             }, ["stop"])),
             onClick: withModifiers(($event) => !item._disabled && $options.toggleItem(item, $event), ["stop"])
           }, null, 8, ["icon", "onClick", "class"])) : createCommentVNode("", true)
-        ], 42, _hoisted_2$e),
-        createVNode(_component_w_transition_expand, { y: "" }, {
+        ], 42, _hoisted_2$d),
+        createVNode(_component_w_transition_expand, {
+          y: "",
+          onAfterLeave: ($event) => $options.onEndOfCollapse(item),
+          duration: $props.duration
+        }, {
           default: withCtx(() => [
             item._expanded ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -574,13 +578,13 @@ function render$P(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createElementVNode("div", {
                   innerHTML: item[$props.itemContentKey]
-                }, null, 8, _hoisted_4$a)
+                }, null, 8, _hoisted_4$9)
               ])
             ], 2)) : createCommentVNode("", true)
           ]),
           _: 2
-        }, 1024)
-      ], 10, _hoisted_1$u);
+        }, 1032, ["onAfterLeave", "duration"])
+      ], 10, _hoisted_1$r);
     }), 128))
   ], 2);
 }
@@ -609,18 +613,14 @@ const _sfc_main$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:modelValue", "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) => reactive(__spreadProps(__spreadValues({}, item), {
-        _index,
-        _expanded: this.modelValue && this.modelValue[_index],
-        _disabled: !!item.disabled
-      })));
-    },
     accordionClasses() {
       return {
         [this.color]: this.color,
@@ -644,6 +644,9 @@ const _sfc_main$P = {
       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];
     },
@@ -654,11 +657,33 @@ const _sfc_main$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.accordionItems = items.map((item, _index) => __spreadProps(__spreadValues({}, item), {
+        _index,
+        _expanded: this.modelValue && this.modelValue[_index],
+        _disabled: !!item.disabled
+      }));
+    }
+  },
+  created() {
+    this.updateItems();
+  },
+  watch: {
+    modelValue() {
+      this.updateItems();
+    },
+    items: {
+      handler() {
+        this.updateItems();
+      },
+      deep: true
     }
   }
 };
 var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", render$P]]);
-const _hoisted_1$t = { class: "w-alert__content" };
+const _hoisted_1$q = { class: "w-alert__content" };
 function render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_button = resolveComponent("w-button");
@@ -676,7 +701,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       })) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_1$t, [
+      createElementVNode("div", _hoisted_1$q, [
         renderSlot(_ctx.$slots, "default")
       ]),
       $props.dismiss ? (openBlock(), createBlock(_component_w_button, {
@@ -773,7 +798,7 @@ const _sfc_main$O = {
   }
 };
 var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
-const _hoisted_1$s = ["innerHTML"];
+const _hoisted_1$p = ["innerHTML"];
 function render$N(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_alert = resolveComponent("w-alert");
   return openBlock(), createBlock(TransitionGroup, {
@@ -796,7 +821,7 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createElementVNode("div", {
                 innerHTML: notif.message
-              }, null, 8, _hoisted_1$s)
+              }, null, 8, _hoisted_1$p)
             ]),
             _: 2
           }, 1040, ["modelValue", "onUpdate:modelValue", "onClose"])) : createCommentVNode("", true)
@@ -1133,7 +1158,7 @@ const _sfc_main$L = {
   }
 };
 var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", render$L]]);
-const _hoisted_1$r = ["innerHTML"];
+const _hoisted_1$o = ["innerHTML"];
 function render$K(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createElementBlock("div", {
@@ -1185,7 +1210,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
         }) : (openBlock(), createElementBlock("span", {
           key: `${i}f`,
           innerHTML: item[$props.itemLabelKey]
-        }, null, 8, _hoisted_1$r))
+        }, null, 8, _hoisted_1$o))
       ], 64);
     }), 256))
   ], 2);
@@ -1223,11 +1248,11 @@ const _sfc_main$K = {
   }
 };
 var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
-const _hoisted_1$q = {
+const _hoisted_1$n = {
   key: 0,
   class: "w-button__loader"
 };
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
+const _hoisted_2$c = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 40 40" }, [
   /* @__PURE__ */ createElementVNode("circle", {
     cx: "20",
     cy: "20",
@@ -1255,9 +1280,9 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
       })) : renderSlot(_ctx.$slots, "default", { key: 1 }),
       createVNode(Transition, { name: "scale-fade" }, {
         default: withCtx(() => [
-          $props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$q, [
+          $props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
             renderSlot(_ctx.$slots, "loading", {}, () => [
-              _hoisted_2$d
+              _hoisted_2$c
             ])
           ])) : createCommentVNode("", true)
         ]),
@@ -1368,24 +1393,21 @@ const objectifyClasses = (classes = {}) => {
     classes = { [classes.join(" ")]: true };
   return classes;
 };
-const _hoisted_1$p = ["innerHTML"];
 function render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_image = resolveComponent("w-image");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-card", $options.classes])
   }, [
-    _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+    _ctx.$slots.title || $props.title ? (openBlock(), createElementBlock("div", {
       key: 0,
-      class: normalizeClass(["w-card__title", __spreadValues({ "w-card__title--has-toolbar": $options.titleHasToolbar }, $options.titleClasses)])
+      class: normalizeClass(["w-card__title", __spreadValues({ "w-card__title--has-toolbar": _ctx.$slots.title && $options.titleHasToolbar }, $options.titleClasses)])
     }, [
-      renderSlot(_ctx.$slots, "title")
-    ], 2)) : $props.title ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass(["w-card__title", $options.titleClasses]),
-      innerHTML: $props.title
-    }, null, 10, _hoisted_1$p)) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "title", {}, () => [
+        createTextVNode(toDisplayString($props.title), 1)
+      ])
+    ], 2)) : createCommentVNode("", true),
     $props.image ? (openBlock(), createBlock(_component_w_image, mergeProps({
-      key: 2,
+      key: 1,
       class: "w-card__image",
       src: $props.image
     }, $options.imgProps), {
@@ -1400,7 +1422,7 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default")
     ], 2),
     _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
-      key: 3,
+      key: 2,
       class: normalizeClass(["w-card__actions", { "w-card__actions--has-toolbar": $options.actionsHasToolbar }])
     }, [
       renderSlot(_ctx.$slots, "actions")
@@ -1481,6 +1503,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: {
@@ -1489,21 +1520,19 @@ var FormElementMixin = {
     }
   }
 };
-const _hoisted_1$o = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
-const _hoisted_2$c = ["for"];
-const _hoisted_3$a = ["for", "innerHTML"];
-const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_1$m = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
+const _hoisted_2$b = ["for"];
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode("svg", {
   width: "11px",
   height: "9px",
   viewbox: "0 0 12 9"
 }, [
   /* @__PURE__ */ createElementVNode("polyline", { points: "1 5 4 8 10 2" })
 ], -1);
-const _hoisted_5$8 = [
-  _hoisted_4$9
+const _hoisted_4$8 = [
+  _hoisted_3$a
 ];
-const _hoisted_6$5 = ["for"];
-const _hoisted_7$5 = ["for", "innerHTML"];
+const _hoisted_5$6 = ["for"];
 function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister && !$options.wCheckboxes ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.isChecked, disabled: _ctx.isDisabled }, {
     valid: _ctx.valid,
@@ -1530,20 +1559,17 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
         onKeypress: _cache[3] || (_cache[3] = withKeys((...args) => $options.onInput && $options.onInput(...args), ["enter"])),
         "aria-checked": $data.isChecked || "false",
         role: "checkbox"
-      }, null, 40, _hoisted_1$o),
+      }, null, 40, _hoisted_1$m),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-checkbox__label w-form-el-shakable pr2",
+          class: normalizeClass(["w-checkbox__label w-form-el-shakable pr2", _ctx.labelClasses]),
           for: `w-checkbox--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_2$c)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-checkbox__label w-form-el-shakable pr2",
-          for: `w-checkbox--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_3$a)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_2$b)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", {
         class: normalizeClass(["w-checkbox__input", this.color]),
@@ -1551,20 +1577,17 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.$refs.input.focus();
           _ctx.$refs.input.click();
         })
-      }, _hoisted_5$8, 2),
+      }, _hoisted_4$8, 2),
       $options.hasLabel && !$props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-checkbox__label w-form-el-shakable pl2",
+          class: normalizeClass(["w-checkbox__label w-form-el-shakable pl2", _ctx.labelClasses]),
           for: `w-checkbox--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6$5)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-checkbox__label w-form-el-shakable pl2",
-          for: `w-checkbox--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_7$5)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_5$6)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -1583,6 +1606,7 @@ const _sfc_main$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 }
@@ -1640,7 +1664,7 @@ const _sfc_main$H = {
   }
 };
 var wCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", render$H]]);
-const _hoisted_1$n = ["innerHTML"];
+const _hoisted_1$l = ["innerHTML"];
 function render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_checkbox = resolveComponent("w-checkbox");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $options.checkboxItems.some((item) => item._isChecked), disabled: _ctx.isDisabled }, {
@@ -1653,40 +1677,31 @@ function render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }), {
     default: withCtx(() => [
       (openBlock(true), createElementBlock(Fragment, null, renderList($options.checkboxItems, (item, i) => {
-        return openBlock(), createBlock(_component_w_checkbox, {
+        return openBlock(), createBlock(_component_w_checkbox, mergeProps({
           key: i,
           "model-value": item._isChecked,
-          name: `${_ctx.name || `w-checkboxes--${_ctx._.uid}`}[]`,
-          label: item.label,
-          "label-on-left": $props.labelOnLeft,
-          color: item.color,
-          round: $props.round,
           "onUpdate:modelValue": ($event) => $options.toggleCheck(item, $event),
+          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus", $event)),
+          name: `${_ctx.inputName}[]`
+        }, { label: item.label, color: item.color, labelOnLeft: $props.labelOnLeft, labelColor: $props.labelColor, round: $props.round }, {
           disabled: _ctx.isDisabled || null,
           readonly: _ctx.isReadonly || null,
-          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus", $event)),
-          class: normalizeClass({ mt1: !$props.inline && i })
-        }, {
+          class: { mt1: !$props.inline && i }
+        }), {
           default: withCtx(() => [
-            _ctx.$slots[`item.${i + 1}`] ? renderSlot(_ctx.$slots, `item.${i + 1}`, {
+            _ctx.$slots[`item.${i + 1}`] || _ctx.$slots.item ? renderSlot(_ctx.$slots, _ctx.$slots[`item.${i + 1}`] ? `item.${i + 1}` : "item", {
               key: 0,
               item: $options.getOriginalItem(item),
               checked: !!item._isChecked,
               index: i + 1,
               innerHTML: item.label
-            }) : _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
-              key: 1,
-              item: $options.getOriginalItem(item),
-              checked: !!item._isChecked,
-              index: i + 1,
-              innerHTML: item.label
             }) : item.label ? (openBlock(), createElementBlock("div", {
-              key: 2,
+              key: 1,
               innerHTML: item.label
-            }, null, 8, _hoisted_1$n)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_1$l)) : createCommentVNode("", true)
           ]),
           _: 2
-        }, 1032, ["model-value", "name", "label", "label-on-left", "color", "round", "onUpdate:modelValue", "disabled", "readonly", "class"]);
+        }, 1040, ["model-value", "onUpdate:modelValue", "name", "disabled", "readonly", "class"]);
       }), 128))
     ]),
     _: 3
@@ -1705,7 +1720,8 @@ const _sfc_main$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() {
@@ -1749,12 +1765,12 @@ const _sfc_main$G = {
   }
 };
 var wCheckboxes = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", render$G]]);
-const _hoisted_1$m = { class: "w-confirm" };
+const _hoisted_1$k = { class: "w-confirm" };
 function render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_flex = resolveComponent("w-flex");
   const _component_w_menu = resolveComponent("w-menu");
-  return openBlock(), createElementBlock("div", _hoisted_1$m, [
+  return openBlock(), createElementBlock("div", _hoisted_1$k, [
     createVNode(_component_w_menu, mergeProps({
       modelValue: _ctx.showPopup,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event)
@@ -1932,7 +1948,7 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
     persistent: $props.persistent,
     "persistent-no-animation": $props.persistentNoAnimation,
     onClick: $options.onOutsideClick,
-    onClosed: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("closed")),
+    onClose: $options.onClose,
     "bg-color": $props.overlayColor,
     opacity: $props.overlayOpacity
   }, {
@@ -1940,11 +1956,12 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(Transition, {
         name: $props.transition,
         appear: "",
-        onAfterLeave: $options.onClose
+        onAfterLeave: $options.onBeforeClose
       }, {
         default: withCtx(() => [
           withDirectives(createVNode(_component_w_card, {
             class: normalizeClass(["w-dialog__content", $props.dialogClass]),
+            ref: "dialog",
             "no-border": "",
             color: $props.color,
             "bg-color": $props.bgColor,
@@ -1978,7 +1995,7 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["name", "onAfterLeave"])
     ]),
     _: 3
-  }, 8, ["model-value", "persistent", "persistent-no-animation", "onClick", "bg-color", "opacity", "class"]);
+  }, 8, ["model-value", "persistent", "persistent-no-animation", "onClick", "onClose", "bg-color", "opacity", "class"]);
 }
 var wDialog_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$D = {
@@ -2000,7 +2017,12 @@ const _sfc_main$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.modelValue,
@@ -2030,11 +2052,14 @@ const _sfc_main$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");
@@ -2042,19 +2067,21 @@ const _sfc_main$D = {
   },
   watch: {
     modelValue(value) {
-      if (value)
-        this.showWrapper = value;
+      this.showWrapper = value;
       this.showContent = value;
     }
   }
 };
 var wDialog = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", render$D]]);
+const _hoisted_1$j = ["aria-orientation"];
 function render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["w-divider", $options.classes])
+    class: normalizeClass(["w-divider", $options.classes]),
+    role: "presentation",
+    "aria-orientation": $props.vertical ? "vertical" : "horizontal"
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 2);
+  ], 10, _hoisted_1$j);
 }
 var wDivider_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$C = {
@@ -2075,7 +2102,7 @@ const _sfc_main$C = {
   }
 };
 var wDivider = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", render$C]]);
-const _hoisted_1$l = { class: "w-drawer-wrap__pushable" };
+const _hoisted_1$i = { class: "w-drawer-wrap__pushable" };
 function render$B(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_overlay = resolveComponent("w-overlay");
   return $data.showWrapper || $props.pushContent ? (openBlock(), createElementBlock("div", {
@@ -2087,7 +2114,7 @@ function render$B(_ctx, _cache, $props, $setup, $data, $options) {
       class: "w-drawer-wrap__track",
       style: normalizeStyle($options.trackStyles)
     }, [
-      createElementVNode("div", _hoisted_1$l, [
+      createElementVNode("div", _hoisted_1$i, [
         !$props.noOverlay ? (openBlock(), createBlock(_component_w_overlay, {
           key: 0,
           modelValue: $data.showDrawer,
@@ -2095,23 +2122,31 @@ function render$B(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: $options.onOutsideClick,
           persistent: $props.persistent,
           "persistent-no-animation": "",
-          "bg-color": $props.overlayColor,
+          "bg-color": $props.overlayColor || "transparent",
           opacity: $props.overlayOpacity
         }, null, 8, ["modelValue", "onClick", "persistent", "bg-color", "opacity"])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "pushable")
       ]),
-      createVNode(Transition, { name: "fade" }, {
+      createVNode(Transition, {
+        name: "fade",
+        onBeforeLeave: $options.onBeforeClose,
+        onAfterLeave: $options.onClose
+      }, {
         default: withCtx(() => [
-          !$options.unmountDrawer ? (openBlock(), createElementBlock("div", {
+          $data.showDrawer ? (openBlock(), createBlock(resolveDynamicComponent($props.tag || "aside"), {
             key: 0,
             class: normalizeClass(["w-drawer", $options.drawerClasses]),
+            ref: "drawer",
             style: normalizeStyle($options.styles)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 6)) : createCommentVNode("", true)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style"])) : createCommentVNode("", true)
         ]),
         _: 3
-      })
+      }, 8, ["onBeforeLeave", "onAfterLeave"])
     ], 4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
       !$props.noOverlay ? (openBlock(), createBlock(_component_w_overlay, {
         key: 0,
@@ -2126,12 +2161,14 @@ function render$B(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(Transition, {
         name: $options.transitionName,
         appear: "",
-        onAfterLeave: $options.close
+        onBeforeLeave: $options.onBeforeClose,
+        onAfterLeave: $options.onClose
       }, {
         default: withCtx(() => [
           $data.showDrawer ? (openBlock(), createBlock(resolveDynamicComponent($props.tag || "aside"), {
             key: 0,
             class: normalizeClass(["w-drawer", $options.drawerClasses]),
+            ref: "drawer",
             style: normalizeStyle($options.styles)
           }, {
             default: withCtx(() => [
@@ -2141,7 +2178,7 @@ function render$B(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["class", "style"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["name", "onAfterLeave"])
+      }, 8, ["name", "onBeforeLeave", "onAfterLeave"])
     ], 64))
   ], 2)) : createCommentVNode("", true);
 }
@@ -2170,7 +2207,12 @@ const _sfc_main$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.modelValue,
@@ -2211,7 +2253,7 @@ const _sfc_main$B = {
     },
     trackStyles() {
       return this.pushContent && this.showDrawer && {
-        transform: `translateX(${this.position === "left" ? "" : "-"}${this.size})`
+        transform: `translateX(${this.position === "left" ? "" : "-"}${this.size || "200px"})`
       };
     },
     styles() {
@@ -2228,17 +2270,18 @@ const _sfc_main$B = {
     }
   },
   methods: {
-    close() {
+    onBeforeClose() {
+      this.$emit("before-close");
+    },
+    onClose() {
       this.showWrapper = false;
       this.$emit("update:modelValue", false);
       this.$emit("input", false);
-      this.$emit("close", false);
+      this.$emit("close");
     },
     onOutsideClick() {
       if (!this.persistent) {
         this.showDrawer = false;
-        if (this.pushContent)
-          this.close();
       } else if (!this.persistentNoAnimation) {
         this.persistentAnimate = true;
         setTimeout(() => this.persistentAnimate = false, 200);
@@ -2333,23 +2376,24 @@ const asyncSome = async (array, predicate) => {
 };
 const _sfc_main$z = {
   name: "w-form",
-  provide() {
-    return {
-      formRegister: this.register,
-      formUnregister: this.unregister,
-      validateElement: this.validateElement,
-      formProps: this.$props
-    };
-  },
   props: {
     modelValue: {},
     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",
@@ -2454,11 +2498,6 @@ const _sfc_main$z = {
   }
 };
 var wForm = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", render$z]]);
-const _hoisted_1$k = {
-  key: 0,
-  class: "w-form-el__error error w-form-el__error w-form-el__error"
-};
-const _hoisted_2$b = ["innerHTML"];
 function render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_transition_expand = resolveComponent("w-transition-expand");
   return openBlock(), createElementBlock("div", {
@@ -2471,17 +2510,16 @@ function render$y(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2),
     createVNode(_component_w_transition_expand, { y: "" }, {
       default: withCtx(() => [
-        _ctx.Validation.message ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _ctx.$slots["error-message"] ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
-            renderSlot(_ctx.$slots, "error-message", {
-              message: _ctx.Validation.message
-            })
-          ])) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: "w-form-el__error error w-form-el__error w-form-el__error",
-            innerHTML: _ctx.Validation.message
-          }, null, 8, _hoisted_2$b))
-        ], 64)) : createCommentVNode("", true)
+        _ctx.Validation.message ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["w-form-el__error", $options.formProps.validationColor])
+        }, [
+          renderSlot(_ctx.$slots, "error-message", {
+            message: _ctx.Validation.message
+          }, () => [
+            createTextVNode(toDisplayString(_ctx.Validation.message), 1)
+          ])
+        ], 2)) : createCommentVNode("", true)
       ]),
       _: 3
     })
@@ -2490,6 +2528,16 @@ function render$y(_ctx, _cache, $props, $setup, $data, $options) {
 var wFormElement_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$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 },
@@ -2498,21 +2546,12 @@ const _sfc_main$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: {
@@ -2634,16 +2673,15 @@ const _sfc_main$x = {
 };
 var wGrid = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", render$x]]);
 function render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(resolveDynamicComponent($props.tag || "i"), mergeProps({
-    class: ["w-icon", $options.classes]
-  }, toHandlers(_ctx.$attrs), {
+  return openBlock(), createBlock(resolveDynamicComponent($props.tag || "i"), mergeProps({ class: "w-icon" }, toHandlers(_ctx.$attrs), {
+    class: $options.classes,
     role: "icon",
     "aria-hidden": "true",
-    style: $options.styles
+    style: $options.readIcon() && $options.styles
   }), {
     default: withCtx(() => [
-      $options.ligature ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createTextVNode(toDisplayString($options.ligature.icon), 1)
+      $options.hasLigature ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createTextVNode(toDisplayString(_ctx.icon), 1)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 1
@@ -2676,14 +2714,12 @@ const _sfc_main$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);
@@ -2693,7 +2729,8 @@ const _sfc_main$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,
@@ -2707,25 +2744,27 @@ const _sfc_main$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 && this.$slots.default()[0].children;
-  },
-  updated() {
-    this.icon = this.$slots.default && this.$slots.default()[0].children;
+  methods: {
+    readIcon() {
+      const { default: slot } = this.$slots;
+      const [fontName = "", icon = ""] = typeof slot === "function" && slot()[0].children.trim().split(" ") || [];
+      this.fontName = fontName;
+      this.icon = icon;
+      return true;
+    }
   }
 };
 var wIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", render$w]]);
 const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
 const consoleError = (message) => console.error(`Wave UI: ${message}`);
-const _hoisted_1$j = {
+const _hoisted_1$h = {
   key: 0,
   class: "w-image__loader"
 };
@@ -2750,7 +2789,7 @@ function render$v(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["name"]),
-      !$props.noSpinner && $data.loading ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
+      !$props.noSpinner && $data.loading ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
         _ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(_component_w_progress, {
           key: 1,
           circle: "",
@@ -2895,22 +2934,19 @@ const _sfc_main$v = {
   }
 };
 var wImage = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", render$v]]);
-const _hoisted_1$i = ["name"];
+const _hoisted_1$g = ["name"];
 const _hoisted_2$a = ["for"];
-const _hoisted_3$9 = ["for", "innerHTML"];
-const _hoisted_4$8 = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
-const _hoisted_5$7 = ["id", "name", "multiple", "data-progress"];
-const _hoisted_6$4 = {
+const _hoisted_3$9 = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
+const _hoisted_4$7 = ["id", "name", "multiple", "data-progress"];
+const _hoisted_5$5 = {
   class: "w-input__no-file",
   key: "no-file"
 };
-const _hoisted_7$4 = /* @__PURE__ */ createTextVNode("No file");
-const _hoisted_8$3 = ["for"];
-const _hoisted_9$3 = ["for", "innerHTML"];
-const _hoisted_10$3 = ["for"];
-const _hoisted_11$2 = ["src"];
-const _hoisted_12$1 = ["for"];
-const _hoisted_13$1 = ["for", "innerHTML"];
+const _hoisted_6$3 = /* @__PURE__ */ createTextVNode("No file");
+const _hoisted_7$3 = ["for"];
+const _hoisted_8$2 = ["for"];
+const _hoisted_9$2 = ["src"];
+const _hoisted_10$2 = ["for"];
 function render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_progress = resolveComponent("w-progress");
@@ -2930,22 +2966,19 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
         type: "hidden",
         name: _ctx.name || null,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.inputValue = $event)
-      }, null, 8, _hoisted_1$i)), [
+      }, null, 8, _hoisted_1$g)), [
         [vModelText, $data.inputValue]
       ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         $props.labelPosition === "left" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+          _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
+            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", _ctx.labelClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 10, _hoisted_2$a)) : $props.label ? (openBlock(), createElementBlock("label", {
-            key: 1,
-            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
-            for: `w-input--${_ctx._.uid}`,
-            innerHTML: $props.label
-          }, null, 10, _hoisted_3$9)) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString($props.label), 1)
+            ])
+          ], 10, _hoisted_2$a)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["w-input__input-wrap", $options.inputWrapClasses])
@@ -2985,7 +3018,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
             disabled: _ctx.isDisabled || null,
             required: _ctx.required || null,
             tabindex: _ctx.tabindex || null
-          }, $options.attrs), null, 16, _hoisted_4$8)), [
+          }, $options.attrs), null, 16, _hoisted_3$9)), [
             [vModelDynamic, $data.inputValue]
           ]) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             createElementVNode("input", mergeProps({
@@ -2999,7 +3032,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               multiple: $props.multiple || null
             }, $options.attrs, {
               "data-progress": $options.overallFilesProgress
-            }), null, 16, _hoisted_5$7),
+            }), null, 16, _hoisted_4$7),
             createVNode(TransitionGroup, {
               class: "w-input__input w-input__input--file",
               tag: "label",
@@ -3007,10 +3040,10 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               for: `w-input--${_ctx._.uid}`
             }, {
               default: withCtx(() => [
-                !$data.inputFiles.length && $data.isFocused ? (openBlock(), createElementBlock("span", _hoisted_6$4, [
+                !$data.inputFiles.length && $data.isFocused ? (openBlock(), createElementBlock("span", _hoisted_5$5, [
                   renderSlot(_ctx.$slots, "no-file", {}, () => [
                     _ctx.$slots["no-file"] === void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _hoisted_7$4
+                      _hoisted_6$3
                     ], 64)) : createCommentVNode("", true)
                   ])
                 ])) : createCommentVNode("", true),
@@ -3031,18 +3064,15 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
             }, 8, ["for"])
           ], 64)),
           $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+            _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
               key: 0,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
+              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", _ctx.labelClasses]),
               for: `w-input--${_ctx._.uid}`
             }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_8$3)) : $props.label ? (openBlock(), createElementBlock("label", {
-              key: 1,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
-              for: `w-input--${_ctx._.uid}`,
-              innerHTML: $props.label
-            }, null, 10, _hoisted_9$3)) : createCommentVNode("", true)
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString($props.label), 1)
+              ])
+            ], 10, _hoisted_7$3)) : createCommentVNode("", true)
           ], 64)) : createCommentVNode("", true),
           $props.innerIconRight ? (openBlock(), createBlock(_component_w_icon, {
             key: 4,
@@ -3079,26 +3109,23 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
                 key: `${i}b`,
                 src: file.preview,
                 alt: ""
-              }, null, 8, _hoisted_11$2)) : (openBlock(), createElementBlock("i", {
+              }, null, 8, _hoisted_9$2)) : (openBlock(), createElementBlock("i", {
                 class: normalizeClass(["w-icon w-input__file-preview primary size--md", $props.preview && typeof $props.preview === "string" ? $props.preview : "wi-file"]),
                 key: `${i}c`
               }, null, 2))
             ], 64);
           }), 256))
-        ], 8, _hoisted_10$3)) : createCommentVNode("", true),
+        ], 8, _hoisted_8$2)) : createCommentVNode("", true),
         $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+          _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
+            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", _ctx.labelClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 10, _hoisted_12$1)) : $props.label ? (openBlock(), createElementBlock("label", {
-            key: 1,
-            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
-            for: `w-input--${_ctx._.uid}`,
-            innerHTML: $props.label
-          }, null, 10, _hoisted_13$1)) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString($props.label), 1)
+            ])
+          ], 10, _hoisted_10$2)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true)
       ], 64))
     ]),
@@ -3119,8 +3146,9 @@ const _sfc_main$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] },
@@ -3193,7 +3221,7 @@ const _sfc_main$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;
@@ -3220,14 +3248,9 @@ const _sfc_main$u = {
         "w-input--inner-icon-right": this.innerIconRight
       };
     },
-    validationClasses() {
-      return this.isFocused && {
-        [this.valid === false ? "error" : this.color]: this.color || this.valid === false
-      };
-    },
     inputWrapClasses() {
       return {
-        [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
+        [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,
@@ -3641,7 +3664,6 @@ const _sfc_main$t = {
 var wList = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", render$t]]);
 var DetachableMixin = {
   props: {
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
     appendTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -3656,16 +3678,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")
@@ -3704,7 +3729,7 @@ var DetachableMixin = {
             return activator;
           return document.querySelector(this.activator);
         }
-        return this.$el.firstElementChild;
+        return this.$el.nextElementSibling;
       },
       set() {
       }
@@ -3753,6 +3778,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);
@@ -3848,27 +3875,22 @@ var DetachableMixin = {
   },
   mounted() {
     var _a;
-    const wrapper = this.$el;
-    if (this.$slots.activator)
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    else if (this.activator)
+    if (this.activator)
       this.bindActivatorEvents();
     else {
       this.$nextTick(() => {
-        this.activator && this.bindActivatorEvents();
+        if (this.activator)
+          this.bindActivatorEvents();
         if (this.modelValue)
           this.toggle({ type: "click", target: this.activatorEl });
       });
     }
-    if (this.overlay) {
+    if (this.overlay)
       this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
-      wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
-    }
     if (this.modelValue && this.activator)
       this.toggle({ type: "click", target: this.activatorEl });
   },
-  beforeUnmount() {
-    var _a;
+  unmounted() {
     this.close();
     this.removeFromDOM();
     if (this.docEventListenersHandlers.length) {
@@ -3876,31 +3898,22 @@ var DetachableMixin = {
         document.removeEventListener(eventName, handler);
       });
     }
-    if (this.overlay && this.overlayEl.parentNode)
-      this.overlayEl.remove();
-    if (((_a = this.activatorEl) == null ? void 0 : _a.parentNode) && this.$slots.activator)
-      this.activatorEl.remove();
   },
   watch: {
     modelValue(bool) {
       if (!!bool !== this.detachableVisible)
         this.toggle({ type: "click", target: this.activatorEl });
     },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
     appendTo() {
       this.removeFromDOM();
       this.insertInDOM();
     }
   }
 };
-const _hoisted_1$h = { class: "w-menu-wrap" };
 function render$s(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_card = resolveComponent("w-card");
   const _component_w_overlay = resolveComponent("w-overlay");
-  return openBlock(), createElementBlock("div", _hoisted_1$h, [
+  return openBlock(), createElementBlock(Fragment, null, [
     renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
     createVNode(Transition, {
       name: $options.transitionName,
@@ -3966,7 +3979,7 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
       "z-index": (_ctx.zIndex || 200) - 1,
       "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.detachableVisible = false)
     }), null, 16, ["model-value", "persistent", "class", "z-index"])) : createCommentVNode("", true)
-  ]);
+  ], 64);
 }
 var wMenu_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$s = {
@@ -3995,6 +4008,14 @@ const _sfc_main$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,
@@ -4285,12 +4306,13 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
     name: "fade",
     appear: "",
-    onAfterLeave: $options.onClosed
+    onAfterLeave: $options.onClose
   }, {
     default: withCtx(() => [
-      _ctx.showOverlay ? withDirectives((openBlock(), createElementBlock("div", {
+      $props.modelValue ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["w-overlay", $options.classes]),
+        ref: "overlay",
         style: normalizeStyle($props.modelValue && $options.styles || null),
         onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => $options.onClick && $options.onClick(...args), ["stop"]), ["escape"])),
         onClick: _cache[1] || (_cache[1] = (...args) => $options.onClick && $options.onClick(...args)),
@@ -4298,7 +4320,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 38)), [
-        [vShow, $props.modelValue],
+        [vShow, _ctx.showOverlay],
         [_directive_focus]
       ]) : createCommentVNode("", true)
     ]),
@@ -4316,7 +4338,12 @@ const _sfc_main$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
@@ -4345,15 +4372,16 @@ const _sfc_main$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);
+      if (!this.modelValue)
+        this.$emit("close");
     }
   },
   created() {
@@ -4367,9 +4395,9 @@ const _sfc_main$q = {
   }
 };
 var wOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", render$q]]);
-const _hoisted_1$g = { class: "w-parallax" };
+const _hoisted_1$f = { class: "w-parallax" };
 function render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g);
+  return openBlock(), createElementBlock("div", _hoisted_1$f);
 }
 var wParallax_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$p = {
@@ -4379,10 +4407,10 @@ const _sfc_main$p = {
   data: () => ({})
 };
 var wParallax = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", render$p]]);
-const _hoisted_1$f = ["viewBox"];
+const _hoisted_1$e = ["viewBox"];
 const _hoisted_2$9 = ["cx", "cy", "r", "stroke-dasharray", "stroke-width"];
 const _hoisted_3$8 = ["viewBox"];
-const _hoisted_4$7 = ["cx", "cy", "r", "stroke-width", "stroke-linecap", "stroke-dasharray"];
+const _hoisted_4$6 = ["cx", "cy", "r", "stroke-width", "stroke-linecap", "stroke-dasharray"];
 function render$o(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-progress", $options.classes]),
@@ -4406,7 +4434,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
           "stroke-dasharray": _ctx.circleCircumference,
           "stroke-width": $props.stroke
         }, null, 10, _hoisted_2$9)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$f)),
+      ], 8, _hoisted_1$e)),
       (openBlock(), createElementBlock("svg", {
         class: "w-progress__progress",
         viewBox: `${$options.circleCenter / 2} ${$options.circleCenter / 2} ${$options.circleCenter} ${$options.circleCenter}`,
@@ -4420,7 +4448,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
           "stroke-width": $props.stroke,
           "stroke-linecap": $props.roundCap && "round",
           "stroke-dasharray": _ctx.circleCircumference
-        }, null, 8, _hoisted_4$7)
+        }, null, 8, _hoisted_4$6)
       ], 12, _hoisted_3$8))
     ], 64)),
     $props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
@@ -4505,11 +4533,9 @@ const _sfc_main$o = {
   }
 };
 var wProgress = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", render$o]]);
-const _hoisted_1$e = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
+const _hoisted_1$d = ["id", "name", "checked", "disabled", "required", "tabindex", "aria-checked"];
 const _hoisted_2$8 = ["for"];
-const _hoisted_3$7 = ["for", "innerHTML"];
-const _hoisted_4$6 = ["for"];
-const _hoisted_5$6 = ["for", "innerHTML"];
+const _hoisted_3$7 = ["for"];
 function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister && !$options.wRadios ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: _ctx.inputValue, disabled: _ctx.isDisabled }, {
     valid: _ctx.valid,
@@ -4534,20 +4560,17 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
         onChange: _cache[1] || (_cache[1] = ($event) => $options.onInput($event)),
         "aria-checked": _ctx.inputValue || "false",
         role: "radio"
-      }, null, 40, _hoisted_1$e),
+      }, null, 40, _hoisted_1$d),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-radio__label w-form-el-shakable pr2",
+          class: normalizeClass(["w-radio__label w-form-el-shakable pr2", _ctx.labelClasses]),
           for: `w-radio--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_2$8)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-radio__label w-form-el-shakable pr2",
-          for: `w-radio--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_3$7)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_2$8)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", {
         class: normalizeClass(["w-radio__input", this.color]),
@@ -4557,18 +4580,15 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
         })
       }, null, 2),
       $options.hasLabel && !$props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-radio__label w-form-el-shakable pl2",
+          class: normalizeClass(["w-radio__label w-form-el-shakable pl2", _ctx.labelClasses]),
           for: `w-radio--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_4$6)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-radio__label w-form-el-shakable pl2",
-          for: `w-radio--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_5$6)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_3$7)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -4585,6 +4605,7 @@ const _sfc_main$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"],
@@ -4644,7 +4665,7 @@ const _sfc_main$n = {
   }
 };
 var wRadio = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", render$n]]);
-const _hoisted_1$d = ["innerHTML"];
+const _hoisted_1$c = ["innerHTML"];
 function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_radio = resolveComponent("w-radio");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: _ctx.inputValue, disabled: _ctx.isDisabled }, {
@@ -4660,39 +4681,31 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   }), {
     default: withCtx(() => [
       (openBlock(true), createElementBlock(Fragment, null, renderList($options.radioItems, (item, i) => {
-        return openBlock(), createBlock(_component_w_radio, {
+        return openBlock(), createBlock(_component_w_radio, mergeProps({
           key: i,
           "model-value": item.value === $props.modelValue,
           "onUpdate:modelValue": ($event) => $options.onInput(item),
           onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus", $event)),
-          name: _ctx.inputName,
-          label: item.label,
-          "label-on-left": $props.labelOnLeft,
-          color: item.color,
+          name: _ctx.inputName
+        }, { label: item.label, color: item.color, labelOnLeft: $props.labelOnLeft, labelColor: $props.labelColor }, {
           disabled: _ctx.isDisabled || null,
           readonly: _ctx.isReadonly || null,
-          class: normalizeClass({ mt1: !$props.inline && i })
-        }, {
+          class: { mt1: !$props.inline && i }
+        }), {
           default: withCtx(() => [
-            _ctx.$slots[`item.${i + 1}`] ? renderSlot(_ctx.$slots, `item.${i + 1}`, {
+            _ctx.$slots[`item.${i + 1}`] || _ctx.$slots.item ? renderSlot(_ctx.$slots, _ctx.$slots[`item.${i + 1}`] ? `item.${i + 1}` : "item", {
               key: 0,
               item: $options.getOriginalItem(item),
               index: i + 1,
               checked: item.value === $props.modelValue,
               innerHTML: item.label
-            }) : _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
-              key: 1,
-              item: $options.getOriginalItem(item),
-              index: i + 1,
-              checked: item.value === $props.modelValue,
-              innerHTML: item.label
             }) : item.label ? (openBlock(), createElementBlock("div", {
-              key: 2,
+              key: 1,
               innerHTML: item.label
-            }, null, 8, _hoisted_1$d)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_1$c)) : createCommentVNode("", true)
           ]),
           _: 2
-        }, 1032, ["model-value", "onUpdate:modelValue", "name", "label", "label-on-left", "color", "disabled", "readonly", "class"]);
+        }, 1040, ["model-value", "onUpdate:modelValue", "name", "disabled", "readonly", "class"]);
       }), 128))
     ]),
     _: 3
@@ -4710,7 +4723,8 @@ const _sfc_main$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() {
@@ -4747,7 +4761,7 @@ const _sfc_main$m = {
   }
 };
 var wRadios = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", render$m]]);
-const _hoisted_1$c = ["id", "name", "value"];
+const _hoisted_1$b = ["id", "name", "value"];
 const _hoisted_2$7 = ["disabled", "onMouseenter", "onClick", "tabindex"];
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.rating, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
@@ -4765,7 +4779,7 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.inputName,
         type: "hidden",
         value: $data.rating
-      }, null, 8, _hoisted_1$c),
+      }, null, 8, _hoisted_1$b),
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.max, (i) => {
         return openBlock(), createElementBlock(Fragment, { key: i }, [
           _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
@@ -4904,56 +4918,48 @@ const _sfc_main$l = {
   }
 };
 var wRating = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", render$l]]);
-const _hoisted_1$b = ["for"];
-const _hoisted_2$6 = ["for", "innerHTML"];
-const _hoisted_3$6 = ["aria-expanded", "aria-owns", "aria-activedescendant"];
-const _hoisted_4$5 = {
+const _hoisted_1$a = ["for"];
+const _hoisted_2$6 = ["aria-expanded", "aria-owns", "aria-activedescendant"];
+const _hoisted_3$6 = {
   key: 1,
   class: "w-select__selection-slot"
 };
-const _hoisted_5$5 = ["value", "id", "placeholder", "disabled", "required", "tabindex"];
-const _hoisted_6$3 = ["value", "name"];
-const _hoisted_7$3 = ["for"];
-const _hoisted_8$2 = ["for", "innerHTML"];
-const _hoisted_9$2 = ["for"];
-const _hoisted_10$2 = ["for", "innerHTML"];
+const _hoisted_4$5 = ["value", "id", "placeholder", "disabled", "required", "tabindex"];
+const _hoisted_5$4 = ["value", "name"];
+const _hoisted_6$2 = ["for"];
+const _hoisted_7$2 = ["for"];
 function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_list = resolveComponent("w-list");
   const _component_w_menu = resolveComponent("w-menu");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $options.selectionString, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
     valid: _ctx.valid,
-    "onUpdate:valid": _cache[11] || (_cache[11] = ($event) => _ctx.valid = $event),
+    "onUpdate:valid": _cache[9] || (_cache[9] = ($event) => _ctx.valid = $event),
     onReset: $options.onReset,
     wrap: $options.hasLabel && $props.labelPosition !== "inside",
     class: $options.classes
   }), {
     default: withCtx(() => [
       $props.labelPosition === "left" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-select__label w-select__label--left w-form-el-shakable",
+          class: normalizeClass(["w-select__label w-select__label--left w-form-el-shakable", _ctx.labelClasses]),
           for: `w-select--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_1$b)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-select__label w-select__label--left w-form-el-shakable",
-          for: `w-select--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_2$6)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_1$a)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createVNode(_component_w_menu, mergeProps({
         modelValue: _ctx.showMenu,
         "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => _ctx.showMenu = $event),
         "menu-class": `w-select__menu ${$props.menuClass || ""}`,
         transition: "slide-fade-down",
-        "append-to": ($props.menuProps || {}).appendTo !== void 0 ? ($props.menuProps || {}).appendTo : ".w-app",
+        "append-to": ($props.menuProps || {}).appendTo !== void 0 ? ($props.menuProps || {}).appendTo : void 0,
         "align-left": "",
         custom: "",
-        "min-width": "activator",
-        onMousedown: _cache[9] || (_cache[9] = ($event) => (_ctx.isFocused = true, _ctx.selectingItem = true)),
-        onMouseup: _cache[10] || (_cache[10] = ($event) => (_ctx.isFocused = true, _ctx.selectingItem = false))
+        "min-width": "activator"
       }, $props.menuProps || {}), {
         activator: withCtx(({ on }) => [
           createElementVNode("div", {
@@ -4976,7 +4982,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            _ctx.$slots.selection ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+            _ctx.$slots.selection ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
               renderSlot(_ctx.$slots, "selection", {
                 item: $props.multiple ? _ctx.inputValue : _ctx.inputValue[0]
               })
@@ -4997,28 +5003,25 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
               required: _ctx.required || null,
               tabindex: _ctx.tabindex || null,
               autocomplete: "off"
-            }, null, 40, _hoisted_5$5),
+            }, null, 40, _hoisted_4$5),
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.inputValue.length ? _ctx.inputValue : [{}], (val, i) => {
               return openBlock(), createElementBlock("input", {
                 key: i,
                 type: "hidden",
                 value: val.value || "",
                 name: _ctx.inputName + ($props.multiple ? "[]" : "")
-              }, null, 8, _hoisted_6$3);
+              }, null, 8, _hoisted_5$4);
             }), 128)),
             $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-              _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+              _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
                 key: 0,
-                class: normalizeClass(["w-select__label w-select__label--inside w-form-el-shakable", _ctx.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
+                class: normalizeClass(["w-select__label w-select__label--inside w-form-el-shakable", _ctx.labelClasses]),
                 for: `w-select--${_ctx._.uid}`
               }, [
-                renderSlot(_ctx.$slots, "default")
-              ], 10, _hoisted_7$3)) : $props.label ? (openBlock(), createElementBlock("label", {
-                key: 1,
-                class: normalizeClass(["w-select__label w-select__label--inside w-form-el-shakable", _ctx.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
-                for: `w-select--${_ctx._.uid}`,
-                innerHTML: $props.label
-              }, null, 10, _hoisted_8$2)) : createCommentVNode("", true)
+                renderSlot(_ctx.$slots, "default", {}, () => [
+                  createTextVNode(toDisplayString($props.label), 1)
+                ])
+              ], 10, _hoisted_6$2)) : createCommentVNode("", true)
             ], 64)) : createCommentVNode("", true),
             $props.innerIconRight ? (openBlock(), createBlock(_component_w_icon, {
               key: 3,
@@ -5031,7 +5034,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })) : createCommentVNode("", true)
-          ], 10, _hoisted_3$6)
+          ], 10, _hoisted_2$6)
         ]),
         default: withCtx(() => [
           createVNode(_component_w_list, {
@@ -5080,18 +5083,15 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
         _: 3
       }, 16, ["modelValue", "menu-class", "append-to"]),
       $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-select__label w-select__label--right w-form-el-shakable",
+          class: normalizeClass(["w-select__label w-select__label--right w-form-el-shakable", _ctx.labelClasses]),
           for: `w-select--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_9$2)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-select__label w-select__label--right w-form-el-shakable",
-          for: `w-select--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_10$2)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_7$2)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -5117,8 +5117,9 @@ const _sfc_main$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 },
@@ -5134,7 +5135,6 @@ const _sfc_main$k = {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectingItem: false,
     selectionWrapRef: void 0
   }),
   computed: {
@@ -5164,7 +5164,7 @@ const _sfc_main$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,
@@ -5277,13 +5277,13 @@ const _sfc_main$k = {
   }
 };
 var wSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", render$k]]);
-const _hoisted_1$a = ["for"];
+const _hoisted_1$9 = ["for"];
 const _hoisted_2$5 = ["for", "innerHTML"];
 const _hoisted_3$5 = { class: "w-slider__track-wrap" };
 const _hoisted_4$4 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-readonly"];
-const _hoisted_5$4 = ["id", "name", "model-value", "disabled", "readonly", "aria-readonly"];
-const _hoisted_6$2 = ["for"];
-const _hoisted_7$2 = { key: 0 };
+const _hoisted_5$3 = ["id", "name", "model-value", "disabled", "readonly", "aria-readonly", "tabindex"];
+const _hoisted_6$1 = ["for"];
+const _hoisted_7$1 = { key: 0 };
 const _hoisted_8$1 = {
   key: 0,
   class: "w-slider__step-labels"
@@ -5299,22 +5299,22 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.rangeValuePercent = 0;
       $options.updateRangeValueScaled();
     }),
-    wrap: "",
+    wrap: _ctx.formRegister || null,
     class: $options.wrapperClasses
   }), {
     default: withCtx(() => [
       _ctx.$slots["label-left"] ? (openBlock(), createElementBlock("label", {
         key: 0,
-        class: "w-slider__label w-slider__label--left w-form-el-shakable",
+        class: normalizeClass(["w-slider__label w-slider__label--left w-form-el-shakable", _ctx.labelClasses]),
         for: `button--${_ctx._.uid}`
       }, [
         renderSlot(_ctx.$slots, "label-left")
-      ], 8, _hoisted_1$a)) : $props.labelLeft ? (openBlock(), createElementBlock("label", {
+      ], 10, _hoisted_1$9)) : $props.labelLeft ? (openBlock(), createElementBlock("label", {
         key: 1,
-        class: "w-slider__label w-slider__label--left w-form-el-shakable",
+        class: normalizeClass(["w-slider__label w-slider__label--left w-form-el-shakable", _ctx.labelClasses]),
         for: `button--${_ctx._.uid}`,
         innerHTML: $props.labelLeft
-      }, null, 8, _hoisted_2$5)) : createCommentVNode("", true),
+      }, null, 10, _hoisted_2$5)) : createCommentVNode("", true),
       createElementVNode("div", _hoisted_3$5, [
         createElementVNode("div", {
           class: normalizeClass(["w-slider__track", $options.trackClasses]),
@@ -5346,6 +5346,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: _ctx.isDisabled || null,
               readonly: _ctx.isReadonly || null,
               "aria-readonly": _ctx.isReadonly ? "true" : "false",
+              tabindex: _ctx.isDisabled || _ctx.isReadonly ? -1 : null,
               onKeydown: [
                 _cache[0] || (_cache[0] = withKeys(($event) => $options.onKeyDown($event, -1), ["left"])),
                 _cache[1] || (_cache[1] = withKeys(($event) => $options.onKeyDown($event, 1), ["right"]))
@@ -5353,13 +5354,13 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus", $event)),
               onClick: _cache[3] || (_cache[3] = withModifiers(() => {
               }, ["prevent"]))
-            }, null, 42, _hoisted_5$4),
+            }, null, 42, _hoisted_5$3),
             $props.thumbLabel ? (openBlock(), createElementBlock("label", {
               key: 0,
               class: normalizeClass(["w-slider__thumb-label", $options.thumbClasses]),
               for: `button--${_ctx._.uid}`
             }, [
-              $props.thumbLabel === "droplet" ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+              $props.thumbLabel === "droplet" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
                 renderSlot(_ctx.$slots, "label", { value: _ctx.rangeValueScaled }, () => [
                   createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
                 ])
@@ -5369,7 +5370,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
               ])
-            ], 10, _hoisted_6$2)) : createCommentVNode("", true)
+            ], 10, _hoisted_6$1)) : createCommentVNode("", true)
           ], 4)
         ], 42, _hoisted_4$4),
         $props.stepLabels && $props.step ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
@@ -5395,19 +5396,19 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _ctx.$slots["label-right"] ? (openBlock(), createElementBlock("label", {
         key: 2,
-        class: "w-slider__label w-slider__label--right w-form-el-shakable",
+        class: normalizeClass(["w-slider__label w-slider__label--right w-form-el-shakable", _ctx.labelClasses]),
         for: `button--${_ctx._.uid}`
       }, [
         renderSlot(_ctx.$slots, "label-right")
-      ], 8, _hoisted_10$1)) : $props.labelRight ? (openBlock(), createElementBlock("label", {
+      ], 10, _hoisted_10$1)) : $props.labelRight ? (openBlock(), createElementBlock("label", {
         key: 3,
-        class: "w-slider__label w-slider__label--right w-form-el-shakable",
+        class: normalizeClass(["w-slider__label w-slider__label--right w-form-el-shakable", _ctx.labelClasses]),
         for: `button--${_ctx._.uid}`,
         innerHTML: $props.labelRight
-      }, null, 8, _hoisted_11$1)) : createCommentVNode("", true)
+      }, null, 10, _hoisted_11$1)) : createCommentVNode("", true)
     ]),
     _: 3
-  }, 16, ["valid", "class"]);
+  }, 16, ["valid", "wrap", "class"]);
 }
 var wSlider_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$j = {
@@ -5417,6 +5418,7 @@ const _sfc_main$j = {
     modelValue: { 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 },
@@ -5564,14 +5566,14 @@ const _sfc_main$j = {
   }
 };
 var wSlider = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", render$j]]);
-const _hoisted_1$9 = { key: 0 };
+const _hoisted_1$8 = { key: 0 };
 function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return $props.modelValue || $props.modelValue === void 0 ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(["w-spinner", $options.classes]),
     style: normalizeStyle($options.styles)
   }, [
-    $options.isThreeDots ? (openBlock(), createElementBlock("span", _hoisted_1$9)) : createCommentVNode("", true)
+    $options.isThreeDots ? (openBlock(), createElementBlock("span", _hoisted_1$8)) : createCommentVNode("", true)
   ], 6)) : createCommentVNode("", true);
 }
 var wSpinner_vue_vue_type_style_index_0_lang = "";
@@ -5615,9 +5617,9 @@ const _sfc_main$i = {
   }
 };
 var wSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$i]]);
-const _hoisted_1$8 = { class: "w-steps" };
+const _hoisted_1$7 = { class: "w-steps" };
 function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$8);
+  return openBlock(), createElementBlock("div", _hoisted_1$7);
 }
 var wSteps_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$h = {
@@ -5627,11 +5629,17 @@ const _sfc_main$h = {
   data: () => ({})
 };
 var wSteps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$h]]);
-const _hoisted_1$7 = ["id", "name", "checked", "disabled", "readonly", "aria-readonly", "required", "tabindex", "aria-checked"];
+const _hoisted_1$6 = ["id", "name", "checked", "disabled", "readonly", "aria-readonly", "required", "tabindex", "aria-checked"];
 const _hoisted_2$4 = ["for"];
-const _hoisted_3$4 = ["for", "innerHTML"];
-const _hoisted_4$3 = ["for"];
-const _hoisted_5$3 = ["for", "innerHTML"];
+const _hoisted_3$4 = {
+  key: 0,
+  class: "w-switch__track"
+};
+const _hoisted_4$3 = {
+  key: 1,
+  class: "w-switch__thumb"
+};
+const _hoisted_5$2 = ["for"];
 function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.isOn, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
     valid: _ctx.valid,
@@ -5658,20 +5666,17 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
         onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("focus", $event)),
         "aria-checked": $data.isOn || "false",
         role: "switch"
-      }, null, 40, _hoisted_1$7),
+      }, null, 40, _hoisted_1$6),
       $options.hasLabel && $props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-switch__label w-form-el-shakable",
+          class: normalizeClass(["w-switch__label w-switch__label--left w-form-el-shakable", _ctx.labelClasses]),
           for: `w-switch--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_2$4)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-switch__label w-form-el-shakable",
-          for: `w-switch--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_3$4)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_2$4)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", mergeProps({
         class: "w-switch__input",
@@ -5679,20 +5684,24 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.$refs.input.focus();
           _ctx.$refs.input.click();
         })
-      }, toHandlers(_ctx.$attrs), { class: $options.inputClasses }), null, 16),
+      }, toHandlers(_ctx.$attrs), { class: $options.inputClasses }), [
+        _ctx.$slots.track ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+          renderSlot(_ctx.$slots, "track")
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.thumb ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          renderSlot(_ctx.$slots, "thumb")
+        ])) : createCommentVNode("", true)
+      ], 16),
       $options.hasLabel && !$props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-switch__label w-form-el-shakable",
+          class: normalizeClass(["w-switch__label w-switch__label--right w-form-el-shakable", _ctx.labelClasses]),
           for: `w-switch--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_4$3)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-switch__label w-form-el-shakable",
-          for: `w-switch--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_5$3)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_5$2)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -5707,6 +5716,7 @@ const _sfc_main$g = {
     label: { type: String, default: "" },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: "primary" },
+    labelColor: { type: String, default: "primary" },
     thin: { type: Boolean },
     noRipple: { type: Boolean }
   },
@@ -5732,6 +5742,8 @@ const _sfc_main$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
       };
     },
@@ -5770,9 +5782,9 @@ const _sfc_main$g = {
   }
 };
 var wSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$g]]);
-const _hoisted_1$6 = { class: "w-tabs__content" };
+const _hoisted_1$5 = { class: "w-tabs__content" };
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$5, [
     renderSlot(_ctx.$slots, "default", { item: $props.item })
   ]);
 }
@@ -5780,7 +5792,7 @@ const _sfc_main$f = {
   props: { item: Object }
 };
 var TabContent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$f]]);
-const _hoisted_1$5 = ["onClick", "onFocus", "tabindex", "onKeypress", "aria-selected"];
+const _hoisted_1$4 = ["onClick", "onFocus", "tabindex", "onKeypress", "aria-selected"];
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 0,
@@ -5790,7 +5802,7 @@ const _hoisted_4$2 = {
   key: 0,
   class: "w-tabs__content-wrap"
 };
-const _hoisted_5$2 = ["innerHTML"];
+const _hoisted_5$1 = ["innerHTML"];
 function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tab_content = resolveComponent("tab-content");
   return openBlock(), createElementBlock("div", {
@@ -5826,7 +5838,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
               innerHTML: item[$props.itemTitleKey]
             }, null, 8, _hoisted_2$3)
           ])
-        ], 42, _hoisted_1$5);
+        ], 42, _hoisted_1$4);
       }), 128)),
       _ctx.$slots["tabs-bar-extra"] ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
         renderSlot(_ctx.$slots, "tabs-bar-extra")
@@ -5864,7 +5876,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
                   item[$props.itemContentKey] ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     innerHTML: item[$props.itemContentKey]
-                  }, null, 8, _hoisted_5$2)) : createCommentVNode("", true)
+                  }, null, 8, _hoisted_5$1)) : createCommentVNode("", true)
                 ])
               ]),
               _: 3
@@ -6038,13 +6050,13 @@ const _sfc_main$e = {
   }
 };
 var index = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", render$e]]);
-const _hoisted_1$4 = { ref: "colgroup" };
+const _hoisted_1$3 = { ref: "colgroup" };
 const _hoisted_2$2 = ["width"];
 const _hoisted_3$2 = { key: 0 };
 const _hoisted_4$1 = ["onClick"];
-const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
-const _hoisted_6$1 = ["innerHTML"];
-const _hoisted_7$1 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
+const _hoisted_5 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
+const _hoisted_6 = ["innerHTML"];
+const _hoisted_7 = /* @__PURE__ */ createTextVNode("wi-arrow-down");
 const _hoisted_8 = {
   key: 0,
   class: "w-table__progress-bar"
@@ -6081,7 +6093,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
       onMouseover: _cache[2] || (_cache[2] = (...args) => $options.onMouseOver && $options.onMouseOver(...args)),
       onMouseout: _cache[3] || (_cache[3] = (...args) => $options.onMouseOut && $options.onMouseOut(...args))
     }, [
-      createElementVNode("colgroup", _hoisted_1$4, [
+      createElementVNode("colgroup", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, i) => {
           return openBlock(), createElementBlock("col", {
             class: "w-table__col",
@@ -6103,7 +6115,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                 class: normalizeClass(["w-table__header-sort", $options.headerSortClasses(header)])
               }, {
                 default: withCtx(() => [
-                  _hoisted_5$1
+                  _hoisted_5
                 ]),
                 _: 2
               }, 1032, ["class"])) : createCommentVNode("", true),
@@ -6118,14 +6130,14 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                 ]) : (openBlock(), createElementBlock("span", {
                   key: 1,
                   innerHTML: header.label || ""
-                }, null, 8, _hoisted_6$1))
+                }, null, 8, _hoisted_6))
               ], 64)) : createCommentVNode("", true),
               header.sortable !== false && header.align !== "right" ? (openBlock(), createBlock(_component_w_icon, {
                 key: 2,
                 class: normalizeClass(["w-table__header-sort", $options.headerSortClasses(header)])
               }, {
                 default: withCtx(() => [
-                  _hoisted_7$1
+                  _hoisted_7
                 ]),
                 _: 2
               }, 1032, ["class"])) : createCommentVNode("", true),
@@ -6519,7 +6531,7 @@ const _sfc_main$d = {
   }
 };
 var wTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", render$d]]);
-const _hoisted_1$3 = ["role", "aria-pressed", "tabindex"];
+const _hoisted_1$2 = ["role", "aria-pressed", "tabindex"];
 function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps({ class: "w-tag" }, toHandlers(_ctx.$attrs), {
     onClick: _cache[1] || (_cache[1] = ($event) => {
@@ -6547,7 +6559,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
       role: "icon",
       "aria-hidden": "true"
     })) : createCommentVNode("", true)
-  ], 16, _hoisted_1$3);
+  ], 16, _hoisted_1$2);
 }
 var wTag_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$c = {
@@ -6599,13 +6611,10 @@ const _sfc_main$c = {
   }
 };
 var wTag = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", render$c]]);
-const _hoisted_1$2 = ["for"];
-const _hoisted_2$1 = ["for", "innerHTML"];
-const _hoisted_3$1 = ["id", "name", "placeholder", "rows", "cols", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
+const _hoisted_1$1 = ["for"];
+const _hoisted_2$1 = ["id", "name", "placeholder", "rows", "cols", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
+const _hoisted_3$1 = ["for"];
 const _hoisted_4 = ["for"];
-const _hoisted_5 = ["for", "innerHTML"];
-const _hoisted_6 = ["for"];
-const _hoisted_7 = ["for", "innerHTML"];
 function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.inputValue, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly, isFocused: $data.isFocused }, {
@@ -6620,18 +6629,15 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   }), {
     default: withCtx(() => [
       $props.labelPosition === "left" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-textarea__label w-textarea__label--left w-form-el-shakable",
+          class: normalizeClass(["w-textarea__label w-textarea__label--left w-form-el-shakable", _ctx.labelClasses]),
           for: `w-textarea--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_1$2)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-textarea__label w-textarea__label--left w-form-el-shakable",
-          for: `w-textarea--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_1$1)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       createElementVNode("div", {
         class: normalizeClass(["w-textarea__textarea-wrap", $options.inputWrapClasses])
@@ -6666,22 +6672,19 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           disabled: _ctx.isDisabled || null,
           required: _ctx.required || null,
           tabindex: _ctx.tabindex || null
-        }), null, 16, _hoisted_3$1), [
+        }), null, 16, _hoisted_2$1), [
           [vModelText, $data.inputValue]
         ]),
         $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+          _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: normalizeClass(["w-textarea__label w-textarea__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : this.color]: this.color || _ctx.valid === false }]),
+            class: normalizeClass(["w-textarea__label w-textarea__label--inside w-form-el-shakable", _ctx.labelClasses]),
             for: `w-textarea--${_ctx._.uid}`
           }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 10, _hoisted_4)) : $props.label ? (openBlock(), createElementBlock("label", {
-            key: 1,
-            class: normalizeClass(["w-textarea__label w-textarea__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
-            for: `w-textarea--${_ctx._.uid}`,
-            innerHTML: $props.label
-          }, null, 10, _hoisted_5)) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString($props.label), 1)
+            ])
+          ], 10, _hoisted_3$1)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
         $props.innerIconRight ? (openBlock(), createBlock(_component_w_icon, {
           key: 2,
@@ -6697,18 +6700,15 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
         }, 8, ["for"])) : createCommentVNode("", true)
       ], 2),
       $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+        _ctx.$slots.default || $props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
-          class: "w-textarea__label w-textarea__label--right w-form-el-shakable",
+          class: normalizeClass(["w-textarea__label w-textarea__label--right w-form-el-shakable", _ctx.labelClasses]),
           for: `w-textarea--${_ctx._.uid}`
         }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6)) : $props.label ? (openBlock(), createElementBlock("label", {
-          key: 1,
-          class: "w-textarea__label w-textarea__label--right w-form-el-shakable",
-          for: `w-textarea--${_ctx._.uid}`,
-          innerHTML: $props.label
-        }, null, 8, _hoisted_7)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.label), 1)
+          ])
+        ], 10, _hoisted_4)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -6728,6 +6728,7 @@ const _sfc_main$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 },
@@ -6779,7 +6780,7 @@ const _sfc_main$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,
@@ -6850,11 +6851,11 @@ const _sfc_main$b = {
   }
 };
 var wTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", render$b]]);
-const _hoisted_1$1 = { class: "w-timeline" };
+const _hoisted_1 = { class: "w-timeline" };
 const _hoisted_2 = ["innerHTML"];
 const _hoisted_3 = ["innerHTML"];
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("ul", _hoisted_1$1, [
+  return openBlock(), createElementBlock("ul", _hoisted_1, [
     (openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item, i) => {
       return openBlock(), createElementBlock("li", {
         class: "w-timeline-item",
@@ -6961,9 +6962,8 @@ const _sfc_main$9 = {
   }
 };
 var wToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$9]]);
-const _hoisted_1 = { class: "w-tooltip-wrap" };
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+  return openBlock(), createElementBlock(Fragment, null, [
     renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
     createVNode(Transition, {
       name: $options.transitionName,
@@ -6981,7 +6981,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     }, 8, ["name"])
-  ]);
+  ], 64);
 }
 var wTooltip_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$8 = {
@@ -7118,10 +7118,9 @@ const _sfc_main$7 = {
 };
 var wTransitionBounce = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", render$7]]);
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Transition, mergeProps({
+  return openBlock(), createBlock(Transition, {
     name: "expand",
-    mode: "out-in"
-  }, _ctx.$props, {
+    mode: "out-in",
     css: false,
     onBeforeAppear: $options.beforeAppear,
     onAppear: $options.appear,
@@ -7132,19 +7131,19 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     onBeforeLeave: $options.beforeLeave,
     onLeave: $options.leave,
     onAfterLeave: $options.afterLeave
-  }), {
+  }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16, ["onBeforeAppear", "onAppear", "onAfterAppear", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+  }, 8, ["onBeforeAppear", "onAppear", "onAfterAppear", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
 const _sfc_main$6 = {
   name: "w-transition-expand",
   props: {
     x: { type: Boolean },
     y: { type: Boolean },
-    duration: { type: Number, default: 200 }
+    duration: { type: Number, default: 250 }
   },
   data: () => ({
     el: {
@@ -7179,53 +7178,44 @@ const _sfc_main$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) {
@@ -7429,9 +7419,8 @@ const _sfc_main = {
   }
 };
 var wTransitionTwist = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", render]]);
-var components = /* @__PURE__ */ Object.freeze({
+var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  [Symbol.toStringTag]: "Module",
   WAccordion: wAccordion,
   WAlert: wAlert,
   WApp: wApp,
@@ -7482,7 +7471,7 @@ var components = /* @__PURE__ */ Object.freeze({
   WTransitionSlide: wTransitionSlide,
   WTransitionSlideFade: wTransitionSlideFade,
   WTransitionTwist: wTransitionTwist
-});
+}, Symbol.toStringTag, { value: "Module" }));
 const install = WaveUI.install;
 WaveUI.install = (app, options = {}) => install.call(WaveUI, app, __spreadValues({ components }, options));
 export { WaveUI as default };