wave-ui 2.32.3 → 2.35.0

package/dist/wave-ui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, withKeys, createBlock, withModifiers, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, toHandlers, createTextVNode, toDisplayString, TransitionGroup, Transition, normalizeStyle, resolveDynamicComponent, createSlots, withDirectives, vModelText, vModelDynamic, resolveDirective, KeepAlive } from "vue";
+import { reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, withKeys, createBlock, withModifiers, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, toHandlers, createTextVNode, toDisplayString, TransitionGroup, Transition, normalizeStyle, resolveDynamicComponent, withDirectives, createSlots, vShow, vModelText, vModelDynamic, resolveDirective, KeepAlive } from "vue";
 const config = reactive({
   breakpoints: {
     xs: 600,
@@ -655,13 +655,6 @@ const _sfc_main$P = {
         [item[this.itemColorKey]]: item[this.itemColorKey]
       };
     }
-  },
-  watch: {
-    modelValue(array) {
-      this.accordionItems.forEach((item, i) => {
-        item.expanded = Array.isArray(array) && array[i] || false;
-      });
-    }
   }
 };
 var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", render$P]]);
@@ -1379,8 +1372,7 @@ 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]),
-    style: normalizeStyle($options.styles)
+    class: normalizeClass(["w-card", $options.classes])
   }, [
     _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
       key: 0,
@@ -1413,7 +1405,7 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       renderSlot(_ctx.$slots, "actions")
     ], 2)) : createCommentVNode("", true)
-  ], 6);
+  ], 2);
 }
 var wCard_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$I = {
@@ -1460,9 +1452,6 @@ const _sfc_main$I = {
         "w-card--tile": this.tile,
         "w-card--shadow": this.shadow
       };
-    },
-    styles() {
-      return false;
     }
   }
 };
@@ -1513,8 +1502,8 @@ const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("svg", {
 const _hoisted_5$8 = [
   _hoisted_4$9
 ];
-const _hoisted_6$5 = ["for"];
-const _hoisted_7$5 = ["for", "innerHTML"];
+const _hoisted_6$6 = ["for"];
+const _hoisted_7$6 = ["for", "innerHTML"];
 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,
@@ -1570,12 +1559,12 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-checkbox--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6$5)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_6$6)) : $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)
+        }, null, 8, _hoisted_7$6)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -1943,6 +1932,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")),
     "bg-color": $props.overlayColor,
     opacity: $props.overlayOpacity
   }, {
@@ -1953,8 +1943,7 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
         onAfterLeave: $options.onClose
       }, {
         default: withCtx(() => [
-          $data.showContent ? (openBlock(), createBlock(_component_w_card, {
-            key: 0,
+          withDirectives(createVNode(_component_w_card, {
             class: normalizeClass(["w-dialog__content", $props.dialogClass]),
             "no-border": "",
             color: $props.color,
@@ -1981,7 +1970,9 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
                 renderSlot(_ctx.$slots, "actions")
               ])
             } : void 0
-          ]), 1032, ["color", "bg-color", "class", "title-class", "content-class", "title", "style"])) : createCommentVNode("", true)
+          ]), 1032, ["color", "bg-color", "class", "title-class", "content-class", "title", "style"]), [
+            [vShow, $data.showContent]
+          ])
         ]),
         _: 3
       }, 8, ["name", "onAfterLeave"])
@@ -2009,7 +2000,7 @@ const _sfc_main$D = {
     bgColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] }
   },
-  emits: ["input", "update:modelValue", "close"],
+  emits: ["input", "update:modelValue", "close", "closed"],
   data() {
     return {
       showWrapper: this.modelValue,
@@ -2046,7 +2037,7 @@ const _sfc_main$D = {
       this.showWrapper = false;
       this.$emit("update:modelValue", false);
       this.$emit("input", false);
-      this.$emit("close", false);
+      this.$emit("close");
     }
   },
   watch: {
@@ -2077,7 +2068,7 @@ const _sfc_main$C = {
     classes() {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
-        "w-divider--vertical": this.vertical,
+        [`w-divider--${this.vertical ? "vertical" : "horizontal"}`]: true,
         "w-divider--has-content": this.$slots.default
       };
     }
@@ -2643,16 +2634,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
@@ -2685,14 +2675,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);
@@ -2702,7 +2690,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,
@@ -2716,19 +2705,20 @@ 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;
+    }
   }
 };
 var wIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", render$w]]);
@@ -2909,11 +2899,11 @@ 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_6$5 = {
   class: "w-input__no-file",
   key: "no-file"
 };
-const _hoisted_7$4 = /* @__PURE__ */ createTextVNode("No file");
+const _hoisted_7$5 = /* @__PURE__ */ createTextVNode("No file");
 const _hoisted_8$3 = ["for"];
 const _hoisted_9$3 = ["for", "innerHTML"];
 const _hoisted_10$3 = ["for"];
@@ -3016,10 +3006,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_6$5, [
                   renderSlot(_ctx.$slots, "no-file", {}, () => [
                     _ctx.$slots["no-file"] === void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _hoisted_7$4
+                      _hoisted_7$5
                     ], 64)) : createCommentVNode("", true)
                   ])
                 ])) : createCommentVNode("", true),
@@ -3663,10 +3653,10 @@ var DetachableMixin = {
     alignRight: { type: Boolean },
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
-    activator: { type: String }
+    activator: { type: [String, Object, HTMLElement] }
   },
   data: () => ({
-    docAEventListenersHandlers: []
+    docEventListenersHandlers: []
   }),
   computed: {
     appendToTarget() {
@@ -3697,12 +3687,22 @@ var DetachableMixin = {
       return this.appendToTarget;
     },
     hasSeparateActivator() {
-      return !this.$slots.activator && typeof this.activator === "string";
+      var _a;
+      if (this.$slots.activator)
+        return false;
+      const activatorIsString = typeof this.activator === "string";
+      const activatorIsDomEl = (((_a = this.activator) == null ? void 0 : _a.$el) || this.activator) instanceof HTMLElement;
+      return activatorIsString || activatorIsDomEl;
     },
     activatorEl: {
       get() {
-        if (this.hasSeparateActivator)
+        var _a;
+        if (this.hasSeparateActivator) {
+          const activator = ((_a = this.activator) == null ? void 0 : _a.$el) || this.activator;
+          if (activator instanceof HTMLElement)
+            return activator;
           return document.querySelector(this.activator);
+        }
         return this.$el.firstElementChild;
       },
       set() {
@@ -3716,8 +3716,29 @@ var DetachableMixin = {
     }
   },
   methods: {
-    getActivatorCoordinates(e) {
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
+    async open(e) {
+      if (this.delay)
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      this.detachableVisible = true;
+      if (this.activator)
+        this.activatorEl = e.target;
+      await this.insertInDOM();
+      if (this.minWidth === "activator")
+        this.activatorWidth = this.activatorEl.offsetWidth;
+      if (!this.noPosition)
+        this.computeDetachableCoords();
+      this.timeoutId = setTimeout(() => {
+        this.$emit("update:modelValue", true);
+        this.$emit("input", true);
+        this.$emit("open");
+      }, 0);
+      if (!this.persistent)
+        document.addEventListener("mousedown", this.onOutsideMousedown);
+      if (!this.noPosition)
+        window.addEventListener("resize", this.onResize);
+    },
+    getActivatorCoordinates() {
+      const { top, left, width, height } = this.activatorEl.getBoundingClientRect();
       let coords = { top, left, width, height };
       if (!this.fixed) {
         const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
@@ -3729,8 +3750,8 @@ var DetachableMixin = {
       }
       return coords;
     },
-    computeDetachableCoords(e) {
-      let { top, left, width, height } = this.getActivatorCoordinates(e);
+    computeDetachableCoords() {
+      let { top, left, width, height } = this.getActivatorCoordinates();
       this.detachableEl.style.visibility = "hidden";
       this.detachableEl.style.display = "flex";
       const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
@@ -3807,6 +3828,21 @@ var DetachableMixin = {
         this.detachableEl.remove();
         this.detachableEl = null;
       }
+    },
+    bindActivatorEvents() {
+      const activatorIsString = typeof this.activator === "string";
+      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
+        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
+        const handlerWrap = (e) => {
+          var _a;
+          if (activatorIsString && ((_a = e.target) == null ? void 0 : _a.matches) && e.target.matches(this.activator))
+            handler(e);
+          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target))
+            handler(e);
+        };
+        document.addEventListener(eventName, handlerWrap);
+        this.docEventListenersHandlers.push({ eventName, handler: handlerWrap });
+      });
     }
   },
   mounted() {
@@ -3814,31 +3850,28 @@ var DetachableMixin = {
     const wrapper = this.$el;
     if (this.$slots.activator)
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    else if (this.activator) {
-      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
-        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
-        const handlerWrap = (e) => {
-          var _a2;
-          if (((_a2 = e.target) == null ? void 0 : _a2.matches) && e.target.matches(this.activator))
-            handler(e);
-        };
-        document.addEventListener(eventName, handlerWrap);
-        this.docAEventListenersHandlers.push({ eventName, handler: handlerWrap });
+    else if (this.activator)
+      this.bindActivatorEvents();
+    else {
+      this.$nextTick(() => {
+        this.activator && this.bindActivatorEvents();
+        if (this.modelValue)
+          this.toggle({ type: "click", target: this.activatorEl });
       });
     }
     if (this.overlay) {
       this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
     }
-    if (this.modelValue)
-      this.toggleMenu({ type: "click", target: this.activatorEl });
+    if (this.modelValue && this.activator)
+      this.toggle({ type: "click", target: this.activatorEl });
   },
   beforeUnmount() {
     var _a;
     this.close();
     this.removeFromDOM();
-    if (this.docAEventListenersHandlers.length) {
-      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+    if (this.docEventListenersHandlers.length) {
+      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
         document.removeEventListener(eventName, handler);
       });
     }
@@ -3873,20 +3906,23 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
       appear: ""
     }, {
       default: withCtx(() => [
-        $props.custom && _ctx.detachableVisible ? (openBlock(), createElementBlock("div", {
+        $props.custom && _ctx.detachableVisible ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
-          class: normalizeClass(["w-menu", $options.classes]),
-          ref: "detachable",
+          class: "w-menu",
+          ref: "detachable"
+        }, _ctx.$attrs, {
           onClick: _cache[0] || (_cache[0] = ($event) => $props.hideOnMenuClick && $options.close(true)),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = true)),
           onMouseleave: _cache[2] || (_cache[2] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.close())),
-          style: normalizeStyle($options.styles)
-        }, [
+          class: $options.classes,
+          style: $options.styles
+        }), [
           renderSlot(_ctx.$slots, "default")
-        ], 38)) : _ctx.detachableVisible ? (openBlock(), createBlock(_component_w_card, {
+        ], 16)) : _ctx.detachableVisible ? (openBlock(), createBlock(_component_w_card, mergeProps({
           key: 1,
-          class: normalizeClass(["w-menu", $options.classes]),
-          ref: "detachable",
+          class: "w-menu",
+          ref: "detachable"
+        }, _ctx.$attrs, {
           onClick: _cache[3] || (_cache[3] = ($event) => $props.hideOnMenuClick && $options.close(true)),
           onMouseenter: _cache[4] || (_cache[4] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = true)),
           onMouseleave: _cache[5] || (_cache[5] = ($event) => $props.showOnHover && (_ctx.hoveringMenu = false, $options.close())),
@@ -3895,8 +3931,9 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
           "content-class": $options.contentClasses,
           shadow: $props.shadow,
           "no-border": $props.noBorder,
-          style: normalizeStyle($options.styles)
-        }, createSlots({
+          class: $options.classes,
+          style: $options.styles
+        }), createSlots({
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -3914,7 +3951,7 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
               renderSlot(_ctx.$slots, "actions")
             ])
           } : void 0
-        ]), 1032, ["tile", "title-class", "content-class", "shadow", "no-border", "class", "style"])) : createCommentVNode("", true)
+        ]), 1040, ["tile", "title-class", "content-class", "shadow", "no-border", "class", "style"])) : createCommentVNode("", true)
       ]),
       _: 3
     }, 8, ["name"]),
@@ -3990,7 +4027,9 @@ const _sfc_main$s = {
       return objectifyClasses(this.contentClass);
     },
     overlayClasses() {
-      return objectifyClasses(this.overlayClass);
+      return __spreadProps(__spreadValues({}, objectifyClasses(this.overlayClass)), {
+        "w-overlay--no-pointer-event": this.showOnHover
+      });
     },
     classes() {
       return __spreadProps(__spreadValues({
@@ -4045,7 +4084,7 @@ const _sfc_main$s = {
   methods: {
     toggle(e) {
       let shouldShowMenu = this.detachableVisible;
-      if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
+      if (typeof window !== "undefined" && "ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
         shouldShowMenu = !shouldShowMenu;
@@ -4062,27 +4101,6 @@ const _sfc_main$s = {
       else
         this.close();
     },
-    async open(e) {
-      if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      this.detachableVisible = true;
-      if (this.activator)
-        this.activatorEl = e.target;
-      await this.insertInDOM();
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      if (!this.noPosition)
-        this.computeDetachableCoords(e);
-      this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", true);
-        this.$emit("input", true);
-        this.$emit("open");
-      }, 0);
-      if (!this.persistent)
-        document.addEventListener("mousedown", this.onOutsideMousedown);
-      if (!this.noPosition)
-        window.addEventListener("resize", this.onResize);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;
@@ -4265,11 +4283,11 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_focus = resolveDirective("focus");
   return openBlock(), createBlock(Transition, {
     name: "fade",
-    mode: "out-in",
-    appear: ""
+    appear: "",
+    onAfterLeave: $options.onClosed
   }, {
     default: withCtx(() => [
-      $props.modelValue ? withDirectives((openBlock(), createElementBlock("div", {
+      _ctx.showOverlay ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["w-overlay", $options.classes]),
         style: normalizeStyle($props.modelValue && $options.styles || null),
@@ -4279,11 +4297,12 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 38)), [
+        [vShow, $props.modelValue],
         [_directive_focus]
       ]) : createCommentVNode("", true)
     ]),
     _: 3
-  });
+  }, 8, ["onAfterLeave"]);
 }
 var wOverlay_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$q = {
@@ -4296,9 +4315,10 @@ const _sfc_main$q = {
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
   },
-  emits: ["input", "update:modelValue", "click", "close"],
+  emits: ["input", "update:modelValue", "click", "close", "closed"],
   data: () => ({
-    persistentAnimate: false
+    persistentAnimate: false,
+    showOverlay: false
   }),
   computed: {
     backgroundColor() {
@@ -4326,9 +4346,22 @@ const _sfc_main$q = {
       } else if (!this.persistent) {
         this.$emit("update:modelValue", false);
         this.$emit("input", false);
-        this.$emit("close", false);
+        this.$emit("close");
       }
       this.$emit("click", e);
+    },
+    onClosed() {
+      this.showOverlay = false;
+      this.$emit("closed");
+    }
+  },
+  created() {
+    this.showOverlay = this.modelValue;
+  },
+  watch: {
+    modelValue(bool) {
+      if (bool)
+        this.showOverlay = true;
     }
   }
 };
@@ -4878,8 +4911,8 @@ const _hoisted_4$5 = {
   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_6$4 = ["value", "name"];
+const _hoisted_7$4 = ["for"];
 const _hoisted_8$2 = ["for", "innerHTML"];
 const _hoisted_9$2 = ["for"];
 const _hoisted_10$2 = ["for", "innerHTML"];
@@ -4889,7 +4922,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   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[9] || (_cache[9] = ($event) => _ctx.valid = $event),
+    "onUpdate:valid": _cache[11] || (_cache[11] = ($event) => _ctx.valid = $event),
     onReset: $options.onReset,
     wrap: $options.hasLabel && $props.labelPosition !== "inside",
     class: $options.classes
@@ -4917,12 +4950,13 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
         "append-to": ($props.menuProps || {}).appendTo !== void 0 ? ($props.menuProps || {}).appendTo : ".w-app",
         "align-left": "",
         custom: "",
-        "min-width": "activator"
+        "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))
       }, $props.menuProps || {}), {
         activator: withCtx(({ on }) => [
           createElementVNode("div", {
             class: normalizeClass(["w-select__selection-wrap", $options.inputWrapClasses]),
-            ref: "selection-wrap",
             onClick: _cache[5] || (_cache[5] = ($event) => !_ctx.isDisabled && !_ctx.isReadonly && (_ctx.showMenu ? $options.closeMenu : $options.openMenu)()),
             role: "button",
             "aria-haspopup": "listbox",
@@ -4969,7 +5003,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
                 type: "hidden",
                 value: val.value || "",
                 name: _ctx.inputName + ($props.multiple ? "[]" : "")
-              }, null, 8, _hoisted_6$3);
+              }, null, 8, _hoisted_6$4);
             }), 128)),
             $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
@@ -4978,7 +5012,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
                 for: `w-select--${_ctx._.uid}`
               }, [
                 renderSlot(_ctx.$slots, "default")
-              ], 10, _hoisted_7$3)) : $props.label ? (openBlock(), createElementBlock("label", {
+              ], 10, _hoisted_7$4)) : $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}`,
@@ -5098,7 +5132,9 @@ const _sfc_main$k = {
     inputValue: [],
     showMenu: false,
     menuMinWidth: 0,
-    isFocused: false
+    isFocused: false,
+    selectingItem: false,
+    selectionWrapRef: void 0
   }),
   computed: {
     selectItems() {
@@ -5127,7 +5163,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.isReadonly,
+        "w-select--focused": (this.isFocused || this.selectingItem) && !this.isReadonly,
         "w-select--dark": this.dark,
         "w-select--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
         "w-select--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -5245,8 +5281,8 @@ 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_6$3 = ["for"];
+const _hoisted_7$3 = { key: 0 };
 const _hoisted_8$1 = {
   key: 0,
   class: "w-slider__step-labels"
@@ -5322,7 +5358,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               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$3, [
                 renderSlot(_ctx.$slots, "label", { value: _ctx.rangeValueScaled }, () => [
                   createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
                 ])
@@ -5332,7 +5368,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
               ])
-            ], 10, _hoisted_6$2)) : createCommentVNode("", true)
+            ], 10, _hoisted_6$3)) : createCommentVNode("", true)
           ], 4)
         ], 42, _hoisted_4$4),
         $props.stepLabels && $props.step ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
@@ -5593,8 +5629,16 @@ 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_2$4 = ["for"];
 const _hoisted_3$4 = ["for", "innerHTML"];
-const _hoisted_4$3 = ["for"];
-const _hoisted_5$3 = ["for", "innerHTML"];
+const _hoisted_4$3 = {
+  key: 0,
+  class: "w-switch__track"
+};
+const _hoisted_5$3 = {
+  key: 1,
+  class: "w-switch__thumb"
+};
+const _hoisted_6$2 = ["for"];
+const _hoisted_7$2 = ["for", "innerHTML"];
 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,
@@ -5642,7 +5686,14 @@ 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_4$3, [
+          renderSlot(_ctx.$slots, "track")
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.thumb ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
+          renderSlot(_ctx.$slots, "thumb")
+        ])) : createCommentVNode("", true)
+      ], 16),
       $options.hasLabel && !$props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -5650,12 +5701,12 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-switch--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_4$3)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_6$2)) : $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)
+        }, null, 8, _hoisted_7$2)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -5695,6 +5746,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
       };
     },
@@ -5852,6 +5905,7 @@ const _sfc_main$e = {
     titleClass: { type: String },
     activeClass: { type: String, default: "primary" },
     noSlider: { type: Boolean },
+    pillSlider: { type: Boolean },
     sliderColor: { type: String, default: "primary" },
     contentClass: { type: String },
     transition: { type: [String, Boolean], default: "" },
@@ -5898,6 +5952,7 @@ const _sfc_main$e = {
       return {
         "w-tabs--card": this.card,
         "w-tabs--no-slider": this.noSlider,
+        "w-tabs--pill-slider": this.pillSlider,
         "w-tabs--fill-bar": this.fillBar,
         "w-tabs--init": this.init
       };
@@ -6883,6 +6938,10 @@ const _sfc_main$9 = {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -6893,19 +6952,27 @@ const _sfc_main$9 = {
       const h = this.height;
       return h && parseInt(h) == h ? h + "px" : h;
     },
+    toolbarWidth() {
+      const w = this.width;
+      return w && parseInt(w) == w ? w + "px" : w;
+    },
     classes() {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         "w-toolbar--absolute": !!this.absolute,
         "w-toolbar--fixed": !!this.fixed,
-        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: true,
+        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? "right" : "left"}`]: this.vertical,
         "w-toolbar--no-border": this.noBorder,
         "w-toolbar--shadow": !!this.shadow
       };
     },
     styles() {
-      return this.height ? `height: ${this.toolbarHeight}` : false;
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      };
     }
   }
 };
@@ -7033,27 +7100,6 @@ const _sfc_main$8 = {
       else
         this.close();
     },
-    async open(e) {
-      if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      this.detachableVisible = true;
-      if (this.activator)
-        this.activatorEl = e.target;
-      await this.insertInDOM();
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      if (!this.noPosition)
-        this.computeDetachableCoords(e);
-      this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", true);
-        this.$emit("input", true);
-        this.$emit("open");
-      }, 0);
-      if (!this.persistent)
-        document.addEventListener("mousedown", this.onOutsideMousedown);
-      if (!this.noPosition)
-        window.addEventListener("resize", this.onResize);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;