wave-ui 3.16.1 → 3.16.3

package/dist/wave-ui.es.js

@@ -5,8 +5,8 @@ var de = (e) => {
 var $e = (e, t, i) => t in e ? _e(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
 var H = (e, t, i) => $e(e, typeof t != "symbol" ? t + "" : t, i), ue = (e, t, i) => t.has(e) || de("Cannot " + i);
 var Y = (e, t, i) => (ue(e, t, "read from private field"), i ? i.call(e) : t.get(e)), te = (e, t, i) => t.has(e) ? de("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), ie = (e, t, i, s) => (ue(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
-import { reactive as Z, resolveComponent as $, openBlock as o, createBlock as b, Teleport as Ie, createVNode as T, TransitionGroup as ae, normalizeClass as f, withCtx as m, createElementBlock as u, Fragment as k, renderList as x, mergeProps as _, createElementVNode as w, createCommentVNode as p, createApp as Ve, defineComponent as Te, inject as Le, withKeys as E, withModifiers as O, renderSlot as c, createTextVNode as B, toDisplayString as C, normalizeStyle as R, toHandlers as ne, Transition as P, resolveDynamicComponent as L, normalizeProps as le, resolveDirective as ke, withDirectives as W, createSlots as ee, vShow as re, vModelText as ve, vModelDynamic as Re, KeepAlive as xe } from "vue";
-const Pe = Z({
+import { reactive as Z, resolveComponent as $, openBlock as o, createBlock as b, Teleport as Ie, createVNode as T, TransitionGroup as ae, normalizeClass as f, withCtx as m, createElementBlock as u, Fragment as k, renderList as x, mergeProps as _, createElementVNode as w, createCommentVNode as p, createApp as Ve, defineComponent as Te, inject as Le, withKeys as A, withModifiers as M, renderSlot as c, createTextVNode as B, toDisplayString as C, normalizeStyle as R, toHandlers as ne, Transition as O, resolveDynamicComponent as L, normalizeProps as le, resolveDirective as ke, withDirectives as W, createSlots as ee, vShow as re, vModelText as ve, vModelDynamic as Re, KeepAlive as xe } from "vue";
+const Oe = Z({
   on: "#app",
   // Sets the Wave UI root node. If not found, will default to `body`.
   breakpoints: {
@@ -66,7 +66,7 @@ const Pe = Z({
   },
   presets: {}
   // User presets for each component.
-}), Ce = (e, t = Pe) => {
+}), Ce = (e, t = Oe) => {
   if (!Object.keys(t).length) t = Object.assign(t, e);
   else
     for (const i in e) {
@@ -74,7 +74,7 @@ const Pe = Z({
       typeof s == "object" && typeof t[i] == "object" ? Ce(e[i], t[i]) : t[i] = s;
     }
   return t;
-}, j = (e) => console.warn(`Wave UI: ${e}`), F = (e) => console.error(`Wave UI: ${e}`), ze = (e) => {
+}, j = (e) => console.warn(`Wave UI: ${e}`), F = (e) => console.error(`Wave UI: ${e}`), Pe = (e) => {
   ["light", "dark"].forEach((t) => {
     var s, n, l;
     const i = e.colors[t];
@@ -108,7 +108,7 @@ function J(e) {
   const t = e.toString(16);
   return t.length === 1 && `0${t}` || t.length === 2 && t || F(`expected value from 0~255, got: ${e}`) || "";
 }
-function Oe(e) {
+function ze(e) {
   return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(e);
 }
 function Me(e) {
@@ -118,7 +118,7 @@ function Ee(e) {
   return `#${e.substring(1).split("").map((t) => `${t}${t}`).join("")}`;
 }
 function Ae(e) {
-  return Oe(e) && e || Me(e) && Ee(e) || F(`expected color hex string, got '${e}'`) || "";
+  return ze(e) && e || Me(e) && Ee(e) || F(`expected color hex string, got '${e}'`) || "";
 }
 function ce(e) {
   const t = Ae(e), i = parseInt(t.substring(1, 3), 16), s = parseInt(t.substring(3, 5), 16), n = parseInt(t.substring(5, 7), 16), l = t.length === 9 ? parseInt(t.substring(7, 9), 16) / 255 : 1;
@@ -790,7 +790,7 @@ const N = class N {
       i.colors.light || (i.colors.light = a), i.colors.dark || (i.colors.dark = a), i.colors = { light: i.colors.light, dark: i.colors.dark };
     }
     let { components: s, ...n } = i;
-    n = this.$waveui.config = Ce(n), n.css.colorShades && ze(n);
+    n = this.$waveui.config = Ce(n), n.css.colorShades && Pe(n);
     const l = Z(this.$waveui);
     t.config.globalProperties.$waveui = l, t.provide("$waveui", l), n.theme !== "auto" && (this.$waveui.colors = he(n.colors[n.theme], fe));
   }
@@ -826,7 +826,7 @@ const N = class N {
 };
 X = new WeakMap(), te(N, X, !1);
 let q = N;
-const et = ["aria-expanded"], tt = ["onClick", "onFocus", "onKeypress", "tabindex"], it = ["innerHTML"], lt = ["innerHTML"];
+const P = (e = {}) => (typeof e == "string" ? e = { [e]: !0 } : Array.isArray(e) && (e = { [e.join(" ")]: !0 }), e), et = ["aria-expanded"], tt = ["onClick", "onFocus", "onKeypress", "tabindex"], it = ["innerHTML"], lt = ["innerHTML"];
 function st(e, t, i, s, n, l) {
   const a = $("w-button"), r = $("w-transition-expand");
   return o(), u("div", {
@@ -838,10 +838,10 @@ function st(e, t, i, s, n, l) {
       "aria-expanded": d._expanded ? "true" : "false"
     }, [
       w("div", {
-        class: f(["w-accordion__item-title", i.titleClass]),
+        class: f(["w-accordion__item-title", l.titleClasses]),
         onClick: (y) => !d._disabled && l.toggleItem(d, y),
         onFocus: (y) => e.$emit("focus", l.getOriginalItem(d)),
-        onKeypress: E((y) => !d._disabled && l.toggleItem(d, y), ["enter"]),
+        onKeypress: A((y) => !d._disabled && l.toggleItem(d, y), ["enter"]),
         tabindex: !d._disabled && 0
       }, [
         i.expandIcon && !i.expandIconRight ? (o(), b(a, {
@@ -852,9 +852,9 @@ function st(e, t, i, s, n, l) {
           disabled: d._disabled || null,
           tabindex: -1,
           text: "",
-          onKeypress: t[0] || (t[0] = O(() => {
+          onKeypress: t[0] || (t[0] = M(() => {
           }, ["stop"])),
-          onClick: O((y) => !d._disabled && l.toggleItem(d, y), ["stop"])
+          onClick: M((y) => !d._disabled && l.toggleItem(d, y), ["stop"])
         }, null, 8, ["icon", "icon-props", "disabled", "onClick", "class"])) : p("", !0),
         e.$slots[`item-title.${d.id || h + 1}`] ? c(e.$slots, `item-title.${d.id || h + 1}`, {
           key: 1,
@@ -877,9 +877,9 @@ function st(e, t, i, s, n, l) {
           class: f(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": d._expanded, "w-accordion__expand-icon--rotate90": i.expandIconRotate90 }]),
           icon: d._expanded && i.collapseIcon || i.expandIcon,
           text: "",
-          onKeypress: t[1] || (t[1] = O(() => {
+          onKeypress: t[1] || (t[1] = M(() => {
           }, ["stop"])),
-          onClick: O((y) => !d._disabled && l.toggleItem(d, y), ["stop"])
+          onClick: M((y) => !d._disabled && l.toggleItem(d, y), ["stop"])
         }, null, 8, ["icon", "onClick", "class"])) : p("", !0)
       ], 42, tt),
       T(r, {
@@ -890,7 +890,7 @@ function st(e, t, i, s, n, l) {
         default: m(() => [
           d._expanded ? (o(), u("div", {
             key: 0,
-            class: f(["w-accordion__item-content", i.contentClass])
+            class: f(["w-accordion__item-content", l.contentClasses])
           }, [
             e.$slots[`item-content.${d.id || h + 1}`] ? c(e.$slots, `item-content.${d.id || h + 1}`, {
               key: 0,
@@ -925,9 +925,9 @@ const ot = {
     // Support a different color per item.
     itemTitleKey: { type: String, default: "title" },
     itemContentKey: { type: String, default: "content" },
-    itemClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    itemClass: { type: [String, Array, Object] },
+    titleClass: { type: [String, Array, Object] },
+    contentClass: { type: [String, Array, Object] },
     expandIcon: { type: [String, Boolean], default: "wi-triangle-down" },
     expandIconRight: { type: Boolean },
     expandIconRotate90: { type: Boolean },
@@ -955,6 +955,12 @@ const ot = {
         "w-accordion--icon-right": this.expandIcon && this.expandIconRight,
         "w-accordion--rotate-icon": this.expandIcon && !this.collapseIcon
       };
+    },
+    titleClasses() {
+      return P(this.titleClass);
+    },
+    contentClasses() {
+      return P(this.contentClass);
     }
   },
   methods: {
@@ -972,10 +978,10 @@ const ot = {
     },
     itemClasses(e) {
       return {
-        [this.itemClass]: this.itemClass || null,
         "w-accordion__item--expanded": e._expanded,
         "w-accordion__item--disabled": e._disabled,
-        [e[this.itemColorKey]]: e[this.itemColorKey]
+        [e[this.itemColorKey]]: e[this.itemColorKey],
+        ...P(this.itemClass)
       };
     },
     updateItems() {
@@ -1135,7 +1141,7 @@ function yt(e, t, i, s, n, l) {
           innerHTML: d[i.itemLabelKey]
         }, null, 8, ct),
         T(a, {
-          onClick: O((y) => l.unselectItem(h), ["stop"]),
+          onClick: M((y) => l.unselectItem(h), ["stop"]),
           icon: "wi-cross",
           xs: "",
           text: "",
@@ -1166,7 +1172,7 @@ function yt(e, t, i, s, n, l) {
         }, [
           (o(!0), u(k, null, x(l.filteredItems, (d, h) => (o(), u("li", {
             key: h,
-            onClick: O((y) => (l.selectItem(d), e.$emit("item-click", d)), ["stop"]),
+            onClick: M((y) => (l.selectItem(d), e.$emit("item-click", d)), ["stop"]),
             class: f({ highlighted: e.highlightedItem === d.uid })
           }, [
             c(e.$slots, "item", {
@@ -1411,7 +1417,7 @@ const St = {
 function $t(e, t, i, s, n, l) {
   return o(), u("div", _t, [
     c(e.$slots, "default"),
-    T(P, {
+    T(O, {
       name: `${i.transition}`
     }, {
       default: m(() => [
@@ -1582,11 +1588,11 @@ const Rt = {
       };
     }
   }
-}, xt = /* @__PURE__ */ v(Rt, [["render", Lt]]), Pt = {
+}, xt = /* @__PURE__ */ v(Rt, [["render", Lt]]), Ot = {
   key: 0,
   class: "w-button__loader"
 };
-function zt(e, t, i, s, n, l) {
+function Pt(e, t, i, s, n, l) {
   const a = $("w-icon");
   return o(), b(L(!i.disabled && i.route ? "a" : "button"), _({
     class: ["w-button", l.classes],
@@ -1601,9 +1607,9 @@ function zt(e, t, i, s, n, l) {
         ]),
         _: 1
       }, 16)) : c(e.$slots, "default", { key: 1 }),
-      T(P, { name: "scale-fade" }, {
+      T(O, { name: "scale-fade" }, {
         default: m(() => [
-          i.loading ? (o(), u("div", Pt, [
+          i.loading ? (o(), u("div", Ot, [
             c(e.$slots, "loading", {}, () => [
               t[0] || (t[0] = w("svg", { viewBox: "0 0 40 40" }, [
                 w("circle", {
@@ -1625,7 +1631,7 @@ function zt(e, t, i, s, n, l) {
     _: 3
   }, 16, ["type", "href", "class", "disabled", "style"]);
 }
-const Ot = {
+const zt = {
   // Fully handle the attrs and listeners manually for the case of a router link that has both a
   // route and onClick.
   inheritAttrs: !1,
@@ -1726,7 +1732,7 @@ const Ot = {
       };
     }
   }
-}, Mt = /* @__PURE__ */ v(Ot, [["render", zt]]), Et = ["innerHTML"];
+}, Mt = /* @__PURE__ */ v(zt, [["render", Pt]]), Et = ["innerHTML"];
 function At(e, t, i, s, n, l) {
   const a = $("button-partial");
   return i.tooltip ? (o(), b(L("w-tooltip"), le(_({ key: 0 }, i.tooltipProps)), {
@@ -1803,7 +1809,7 @@ const Wt = {
       return { ...i, ...this.$attrs };
     }
   }
-}, Kt = /* @__PURE__ */ v(Wt, [["render", At]]), A = (e = {}) => (typeof e == "string" ? e = { [e]: !0 } : Array.isArray(e) && (e = { [e.join(" ")]: !0 }), e), Nt = ["innerHTML"];
+}, Kt = /* @__PURE__ */ v(Wt, [["render", At]]), Nt = ["innerHTML"];
 function Dt(e, t, i, s, n, l) {
   const a = $("w-image");
   return o(), u("div", {
@@ -1861,10 +1867,10 @@ const Ht = {
   emits: [],
   computed: {
     titleClasses() {
-      return A(this.titleClass);
+      return P(this.titleClass);
     },
     contentClasses() {
-      return A(this.contentClass);
+      return P(this.contentClass);
     },
     titleHasToolbar() {
       const { title: e } = this.$slots;
@@ -1893,7 +1899,7 @@ const Ht = {
       };
     }
   }
-}, Ft = /* @__PURE__ */ v(Ht, [["render", Dt]]), M = {
+}, Ft = /* @__PURE__ */ v(Ht, [["render", Dt]]), E = {
   inject: {
     // Used in each form component to determine whether to use the w-form-element wrap or not.
     // So, if a form component is in a form, use the w-form-element wrap.
@@ -1963,7 +1969,7 @@ function Gt(e, t, i, s, n, l) {
         onFocus: t[0] || (t[0] = (a) => e.$emit("focus", a)),
         onBlur: t[1] || (t[1] = (a) => e.$emit("blur", a)),
         onChange: t[2] || (t[2] = (a) => l.onInput()),
-        onKeypress: t[3] || (t[3] = E((...a) => l.onInput && l.onInput(...a), ["enter"])),
+        onKeypress: t[3] || (t[3] = A((...a) => l.onInput && l.onInput(...a), ["enter"])),
         "aria-checked": n.isChecked || "false",
         role: "checkbox"
       }, null, 40, jt),
@@ -2015,7 +2021,7 @@ function Gt(e, t, i, s, n, l) {
 }
 const Jt = {
   name: "w-checkbox",
-  mixins: [M],
+  mixins: [E],
   inject: {
     wCheckboxes: { default: null }
   },
@@ -2124,7 +2130,7 @@ function ei(e, t, i, s, n, l) {
 }
 const ti = {
   name: "w-checkboxes",
-  mixins: [M],
+  mixins: [E],
   props: {
     items: { type: Array, required: !0 },
     // All the possible options.
@@ -2219,7 +2225,7 @@ function li(e, t, i, s, n, l) {
               class: "mr2"
             }, l.cancelButtonProps, {
               "bg-color": (l.cancelButton || {}).bgColor || "error",
-              onKeyup: t[0] || (t[0] = E((y) => !i.persistent && l.onCancel(), ["escape"])),
+              onKeyup: t[0] || (t[0] = A((y) => !i.persistent && l.onCancel(), ["escape"])),
               onClick: l.onCancel
             }), {
               default: m(() => [
@@ -2231,7 +2237,7 @@ function li(e, t, i, s, n, l) {
             }, 16, ["bg-color", "onClick"])) : p("", !0),
             W((o(), b(a, _(l.confirmButtonProps, {
               "bg-color": (l.confirmButton || {}).bgColor || "success",
-              onKeyup: t[1] || (t[1] = E((y) => !i.persistent && l.onCancel(), ["escape"])),
+              onKeyup: t[1] || (t[1] = A((y) => !i.persistent && l.onCancel(), ["escape"])),
               onClick: l.onConfirm
             }), {
               default: m(() => [
@@ -2405,7 +2411,7 @@ function di(e, t, i, s, n, l) {
     opacity: i.overlayOpacity
   }, {
     default: m(() => [
-      T(P, {
+      T(O, {
         name: i.transition,
         appear: "",
         onAfterLeave: l.onBeforeClose
@@ -2463,9 +2469,9 @@ const ui = {
     title: { type: String },
     transition: { type: String, default: "fade" },
     // @todo: validator.
-    titleClass: { type: String },
-    contentClass: { type: String },
-    dialogClass: { type: String },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] },
+    dialogClass: { type: [String, Object, Array] },
     overlayColor: { type: String },
     color: { type: String },
     bgColor: { type: String },
@@ -2488,9 +2494,18 @@ const ui = {
     };
   },
   computed: {
+    titleClasses() {
+      return P(this.titleClass);
+    },
+    contentClasses() {
+      return P(this.contentClass);
+    },
+    dialogClasses() {
+      return P(this.dialogClass);
+    },
     maxWidth() {
       let e = this.width;
-      return e && parseInt(e) == e && (e += "px"), e;
+      return e && parseInt(e) === +e && (e += "px"), e;
     },
     classes() {
       return {
@@ -2576,7 +2591,7 @@ function bi(e, t, i, s, n, l) {
         }, null, 8, ["modelValue", "onClick", "persistent", "bg-color", "opacity"])),
         c(e.$slots, "pushable")
       ]),
-      T(P, {
+      T(O, {
         name: "fade",
         onBeforeLeave: l.onBeforeClose,
         onAfterLeave: l.onClose
@@ -2607,7 +2622,7 @@ function bi(e, t, i, s, n, l) {
         "bg-color": i.overlayColor,
         opacity: i.overlayOpacity
       }, null, 8, ["modelValue", "onClick", "persistent", "bg-color", "opacity"])),
-      T(P, {
+      T(O, {
         name: l.transitionName,
         appear: "",
         onBeforeLeave: l.onBeforeClose,
@@ -3079,8 +3094,8 @@ const xi = {
       };
     }
   }
-}, Pi = /* @__PURE__ */ v(xi, [["render", Ri]]);
-function zi(e, t, i, s, n, l) {
+}, Oi = /* @__PURE__ */ v(xi, [["render", Ri]]);
+function Pi(e, t, i, s, n, l) {
   return o(), b(L(i.tag || "i"), {
     class: f(["w-icon", l.classes]),
     role: "icon",
@@ -3095,7 +3110,7 @@ function zi(e, t, i, s, n, l) {
     _: 1
   }, 8, ["class", "style"]);
 }
-const Oi = {
+const zi = {
   name: "w-icon",
   props: {
     tag: { type: String, default: "i" },
@@ -3164,7 +3179,7 @@ const Oi = {
       return this.fontName = t, this.icon = i, !0;
     }
   }
-}, Mi = /* @__PURE__ */ v(Oi, [["render", zi]]), Ei = {
+}, Mi = /* @__PURE__ */ v(zi, [["render", Pi]]), Ei = {
   key: 0,
   class: "w-image__loader"
 }, Ai = ["innerHTML"];
@@ -3175,7 +3190,7 @@ function Wi(e, t, i, s, n, l) {
     style: R(l.wrapperStyles)
   }, {
     default: m(() => [
-      T(P, {
+      T(O, {
         name: i.transition,
         appear: ""
       }, {
@@ -3522,7 +3537,7 @@ function Gi(e, t, i, s, n, l) {
 }
 const Ji = {
   name: "w-input",
-  mixins: [M],
+  mixins: [E],
   inheritAttrs: !1,
   // The attrs should only be added to the input not the wrapper.
   props: {
@@ -4168,7 +4183,7 @@ function il(e, t, i, s, n, l) {
   const a = $("w-card"), r = $("w-overlay");
   return o(), u(k, null, [
     c(e.$slots, "activator", { on: l.activatorEventHandlers }),
-    T(P, {
+    T(O, {
       name: l.transitionName,
       appear: ""
     }, {
@@ -4319,17 +4334,17 @@ const ll = {
       return this.maxWidth === "activator" ? this.activatorWidth ? `${this.activatorWidth}px` : 0 : isNaN(this.maxWidth) ? this.maxWidth : this.maxWidth ? `${this.maxWidth}px` : 0;
     },
     menuClasses() {
-      return A(this.menuClass);
+      return P(this.menuClass);
     },
     titleClasses() {
-      return A(this.titleClass);
+      return P(this.titleClass);
     },
     contentClasses() {
-      return A(this.contentClass);
+      return P(this.contentClass);
     },
     overlayClasses() {
       return {
-        ...A(this.overlayClass),
+        ...P(this.overlayClass),
         "w-overlay--no-pointer-event": this.showOnHover
       };
     },
@@ -4412,7 +4427,7 @@ const ll = {
 }, sl = /* @__PURE__ */ v(ll, [["render", il]]);
 function ol(e, t, i, s, n, l) {
   const a = $("w-alert");
-  return o(), b(P, {
+  return o(), b(O, {
     name: l.transitionName,
     appear: ""
   }, {
@@ -4564,7 +4579,7 @@ const al = {
 }, nl = /* @__PURE__ */ v(al, [["render", ol]]);
 function rl(e, t, i, s, n, l) {
   const a = ke("focus");
-  return o(), b(P, {
+  return o(), b(O, {
     name: "fade",
     appear: "",
     onAfterLeave: l.onClose
@@ -4575,7 +4590,7 @@ function rl(e, t, i, s, n, l) {
         class: f(["w-overlay", l.classes]),
         ref: "overlay",
         style: R(i.modelValue && l.styles || null),
-        onKeydown: t[0] || (t[0] = E(O((...r) => l.onClick && l.onClick(...r), ["stop"]), ["escape"])),
+        onKeydown: t[0] || (t[0] = A(M((...r) => l.onClick && l.onClick(...r), ["stop"]), ["escape"])),
         onClick: t[1] || (t[1] = (...r) => l.onClick && l.onClick(...r)),
         tabindex: "0"
       }, [
@@ -4839,7 +4854,7 @@ function Vl(e, t, i, s, n, l) {
 }
 const Tl = {
   name: "w-radio",
-  mixins: [M],
+  mixins: [E],
   inject: { wRadios: { default: null } },
   props: {
     modelValue: { default: !1 },
@@ -4946,9 +4961,9 @@ function xl(e, t, i, s, n, l) {
     _: 3
   }, 16, ["valid", "column", "wrap", "class"]);
 }
-const Pl = {
+const Ol = {
   name: "w-radios",
-  mixins: [M],
+  mixins: [E],
   props: {
     items: { type: Array, required: !0 },
     // All the possible options.
@@ -4999,7 +5014,7 @@ const Pl = {
       return this.items[e._index];
     }
   }
-}, zl = /* @__PURE__ */ v(Pl, [["render", xl]]), Ol = ["id", "name", "value"], Ml = ["disabled", "onMouseenter", "onClick", "tabindex"];
+}, Pl = /* @__PURE__ */ v(Ol, [["render", xl]]), zl = ["id", "name", "value"], Ml = ["disabled", "onMouseenter", "onClick", "tabindex"];
 function El(e, t, i, s, n, l) {
   return o(), b(L(e.formRegister ? "w-form-element" : "div"), _({ ref: "formEl" }, e.formRegister && { validators: e.validators, inputValue: n.rating, disabled: e.isDisabled, readonly: e.isReadonly }, {
     valid: e.valid,
@@ -5015,7 +5030,7 @@ function El(e, t, i, s, n, l) {
         name: e.inputName,
         type: "hidden",
         value: n.rating
-      }, null, 8, Ol),
+      }, null, 8, zl),
       (o(!0), u(k, null, x(i.max, (a) => (o(), u(k, { key: a }, [
         e.$slots.item ? c(e.$slots, "item", {
           key: 0,
@@ -5048,7 +5063,7 @@ function El(e, t, i, s, n, l) {
 }
 const Al = {
   name: "w-rating",
-  mixins: [M],
+  mixins: [E],
   props: {
     modelValue: {},
     max: { type: [Number, String], default: 5 },
@@ -5445,7 +5460,7 @@ function Xl(e, t, i, s, n, l) {
 }
 const Yl = {
   name: "w-select",
-  mixins: [M],
+  mixins: [E],
   props: {
     items: { type: Array, required: !0 },
     modelValue: {},
@@ -5733,11 +5748,11 @@ function rs(e, t, i, s, n, l) {
               "aria-readonly": e.isReadonly ? "true" : "false",
               tabindex: e.isDisabled || e.isReadonly ? -1 : null,
               onKeydown: [
-                t[0] || (t[0] = E((a) => l.onKeyDown(a, -1), ["left"])),
-                t[1] || (t[1] = E((a) => l.onKeyDown(a, 1), ["right"]))
+                t[0] || (t[0] = A((a) => l.onKeyDown(a, -1), ["left"])),
+                t[1] || (t[1] = A((a) => l.onKeyDown(a, 1), ["right"]))
               ],
               onFocus: t[2] || (t[2] = (a) => e.$emit("focus", a)),
-              onClick: t[3] || (t[3] = O(() => {
+              onClick: t[3] || (t[3] = M(() => {
               }, ["prevent"]))
             }, null, 42, ts),
             i.thumbLabel ? (o(), u("label", {
@@ -5795,7 +5810,7 @@ function rs(e, t, i, s, n, l) {
 }
 const ds = {
   name: "w-slider",
-  mixins: [M],
+  mixins: [E],
   props: {
     modelValue: { type: Number, default: 0 },
     color: { type: String, default: "primary" },
@@ -6081,7 +6096,7 @@ function Ss(e, t, i, s, n, l) {
 }
 const Bs = {
   name: "w-switch",
-  mixins: [M],
+  mixins: [E],
   inheritAttrs: !1,
   // The attrs should only be added to the input not the wrapper.
   props: {
@@ -6168,10 +6183,10 @@ const Vs = {
 }, Ts = /* @__PURE__ */ v(Vs, [["render", Is]]), Ls = ["onClick", "onFocus", "tabindex", "onKeypress", "aria-selected"], Rs = ["innerHTML"], xs = {
   key: 0,
   class: "w-tabs__bar-extra"
-}, Ps = {
+}, Os = {
   key: 0,
   class: "w-tabs__content-wrap"
-}, zs = ["innerHTML"], Os = ["innerHTML"];
+}, Ps = ["innerHTML"], zs = ["innerHTML"];
 function Ms(e, t, i, s, n, l) {
   const a = $("tab-content");
   return o(), u("div", {
@@ -6187,7 +6202,7 @@ function Ms(e, t, i, s, n, l) {
         onClick: (h) => !r._disabled && r._uid !== e.activeTabUid && l.openTab(r._uid),
         onFocus: (h) => e.$emit("focus", l.getOriginalItem(r)),
         tabindex: !r._disabled && 0,
-        onKeypress: E((h) => !r._disabled && l.openTab(r._uid), ["enter"]),
+        onKeypress: A((h) => !r._disabled && l.openTab(r._uid), ["enter"]),
         "aria-selected": r._uid === e.activeTabUid ? "true" : "false",
         role: "tab"
       }, [
@@ -6216,7 +6231,7 @@ function Ms(e, t, i, s, n, l) {
         style: R(l.sliderStyles)
       }, null, 6)) : p("", !0)
     ], 2),
-    e.tabs.length ? (o(), u("div", Ps, [
+    e.tabs.length ? (o(), u("div", Os, [
       i.keepInDom ? (o(), b(ae, {
         key: 0,
         name: l.transitionName
@@ -6225,7 +6240,7 @@ function Ms(e, t, i, s, n, l) {
           (o(!0), u(k, null, x(e.tabs, (r, d) => W((o(), b(a, {
             key: r._uid,
             item: r,
-            class: f(i.contentClass)
+            class: f(l.contentClasses)
           }, {
             default: m(() => [
               e.$slots[`item-content.${r._index + 1}`] ? c(e.$slots, `item-content.${r._index + 1}`, {
@@ -6242,7 +6257,7 @@ function Ms(e, t, i, s, n, l) {
                 r[i.itemContentKey] ? (o(), u("div", {
                   key: 0,
                   innerHTML: r[i.itemContentKey]
-                }, null, 8, zs)) : p("", !0)
+                }, null, 8, Ps)) : p("", !0)
               ])
             ]),
             _: 2
@@ -6251,7 +6266,7 @@ function Ms(e, t, i, s, n, l) {
           ])), 128))
         ]),
         _: 3
-      }, 8, ["name"])) : (o(), b(P, {
+      }, 8, ["name"])) : (o(), b(O, {
         key: 1,
         name: l.transitionName,
         mode: l.transitionMode
@@ -6281,7 +6296,7 @@ function Ms(e, t, i, s, n, l) {
                     r[i.itemContentKey] ? (o(), u("div", {
                       key: 0,
                       innerHTML: r[i.itemContentKey]
-                    }, null, 8, Os)) : p("", !0)
+                    }, null, 8, zs)) : p("", !0)
                   ])
                 ], 64)) : p("", !0)
               ]),
@@ -6305,12 +6320,12 @@ const Es = {
     itemIdKey: { type: String, default: "id" },
     itemTitleKey: { type: String, default: "title" },
     itemContentKey: { type: String, default: "content" },
-    titleClass: { type: String },
-    activeClass: { type: String, default: "primary" },
+    titleClass: { type: [String, Array, Object] },
+    activeClass: { type: [String, Array, Object], default: "primary" },
     noSlider: { type: Boolean },
     pillSlider: { type: Boolean },
     sliderColor: { type: String, default: "primary" },
-    contentClass: { type: String },
+    contentClass: { type: [String, Array, Object] },
     transition: { type: [String, Boolean], default: "" },
     fillBar: { type: Boolean },
     center: { type: Boolean },
@@ -6337,6 +6352,9 @@ const Es = {
     init: !0
   }),
   computed: {
+    contentClasses() {
+      return P(this.contentClass);
+    },
     transitionName() {
       return this.transition === !1 ? "" : this.transition || `w-tabs-slide-${this.direction}`;
     },
@@ -6410,9 +6428,10 @@ const Es = {
       return {
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.color]: this.color && !e._disabled && !(this.activeClass && t),
-        [`w-tabs__bar-item--active ${this.activeClass}`]: t,
+        "w-tabs__bar-item--active": t,
         "w-tabs__bar-item--disabled": e._disabled,
-        [this.titleClass]: this.titleClass
+        ...P(this.titleClass),
+        ...t ? P(this.activeClass) : {}
       };
     },
     // Switching tabs.
@@ -6555,7 +6574,7 @@ function po(e, t, i, s, n, l) {
               V < i.headers.length - 1 && i.resizableColumns ? (o(), u("span", {
                 key: 3,
                 class: f(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === V, "w-table__col-resizer--active": e.colResizing.columnIndex === V }]),
-                onClick: t[0] || (t[0] = O(() => {
+                onClick: t[0] || (t[0] = M(() => {
                 }, ["stop"]))
               }, null, 2)) : p("", !0)
             ], 10, Hs))), 128))
@@ -7104,7 +7123,7 @@ function bo(e, t, i, s, n, l) {
     onClick: t[1] || (t[1] = (a) => {
       e.$emit("update:modelValue", !i.modelValue), e.$emit("input", !i.modelValue);
     }),
-    onKeypress: t[2] || (t[2] = E((a) => {
+    onKeypress: t[2] || (t[2] = A((a) => {
       e.$emit("update:modelValue", !i.modelValue), e.$emit("input", !i.modelValue);
     }, ["enter"])),
     role: i.modelValue !== -1 && "button",
@@ -7116,7 +7135,7 @@ function bo(e, t, i, s, n, l) {
     i.closable && i.modelValue ? (o(), u("i", {
       key: 0,
       class: "w-icon w-tag__closable wi-cross",
-      onClick: t[0] || (t[0] = O((a) => {
+      onClick: t[0] || (t[0] = M((a) => {
         e.$emit("update:modelValue", !1), e.$emit("input", !1);
       }, ["stop"])),
       role: "icon",
@@ -7282,7 +7301,7 @@ function So(e, t, i, s, n, l) {
 }
 const Bo = {
   name: "w-textarea",
-  mixins: [M],
+  mixins: [E],
   inheritAttrs: !1,
   // The attrs should only be added to the textarea not the wrapper.
   props: {
@@ -7526,11 +7545,11 @@ const xo = {
       };
     }
   }
-}, Po = /* @__PURE__ */ v(xo, [["render", Ro]]);
-function zo(e, t, i, s, n, l) {
+}, Oo = /* @__PURE__ */ v(xo, [["render", Ro]]);
+function Po(e, t, i, s, n, l) {
   return o(), u(k, null, [
     c(e.$slots, "activator", { on: l.activatorEventHandlers }),
-    T(P, {
+    T(O, {
       name: l.transitionName,
       appear: ""
     }, {
@@ -7548,7 +7567,7 @@ function zo(e, t, i, s, n, l) {
     }, 8, ["name"])
   ], 64);
 }
-const Oo = {
+const zo = {
   name: "w-tooltip",
   mixins: [Be],
   props: {
@@ -7600,7 +7619,7 @@ const Oo = {
      * - `alignment`
      **/
     tooltipClasses() {
-      return A(this.tooltipClass);
+      return P(this.tooltipClass);
     },
     transitionName() {
       const e = this.position.replace(/top|bottom/, (t) => ({ top: "up", bottom: "down" })[t]);
@@ -7684,9 +7703,9 @@ const Oo = {
     }
   }
   // watch, mounted & beforeDestroy hooks are set in the detachable.js mixin.
-}, Mo = /* @__PURE__ */ v(Oo, [["render", zo]]);
+}, Mo = /* @__PURE__ */ v(zo, [["render", Po]]);
 function Eo(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: "bounce" }, e.$props), {
+  return o(), b(O, _({ name: "bounce" }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7701,7 +7720,7 @@ const Ao = {
   }
 }, Wo = /* @__PURE__ */ v(Ao, [["render", Eo]]);
 function Ko(e, t, i, s, n, l) {
-  return o(), b(P, {
+  return o(), b(O, {
     name: "expand",
     mode: "out-in",
     css: !1,
@@ -7813,7 +7832,7 @@ const No = {
   }
 }, Do = /* @__PURE__ */ v(No, [["render", Ko]]);
 function Ho(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: "fade" }, e.$props), {
+  return o(), b(O, _({ name: "fade" }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7828,7 +7847,7 @@ const Fo = {
   }
 }, jo = /* @__PURE__ */ v(Fo, [["render", Ho]]);
 function Uo(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: "scale" }, e.$props), {
+  return o(), b(O, _({ name: "scale" }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7843,7 +7862,7 @@ const qo = {
   }
 }, Xo = /* @__PURE__ */ v(qo, [["render", Uo]]);
 function Yo(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: "scale-fade" }, e.$props), {
+  return o(), b(O, _({ name: "scale-fade" }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7858,7 +7877,7 @@ const Go = {
   }
 }, Jo = /* @__PURE__ */ v(Go, [["render", Yo]]);
 function Qo(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: l.transitionName }, e.$props), {
+  return o(), b(O, _({ name: l.transitionName }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7885,7 +7904,7 @@ const Zo = {
   }
 }, ea = /* @__PURE__ */ v(Zo, [["render", Qo]]);
 function ta(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: l.transitionName }, e.$props), {
+  return o(), b(O, _({ name: l.transitionName }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7912,7 +7931,7 @@ const ia = {
   }
 }, la = /* @__PURE__ */ v(ia, [["render", ta]]);
 function sa(e, t, i, s, n, l) {
-  return o(), b(P, _({ name: "twist" }, e.$props), {
+  return o(), b(O, _({ name: "twist" }, e.$props), {
     default: m(() => [
       c(e.$slots, "default")
     ]),
@@ -7950,7 +7969,7 @@ function da(e, t, i, s, n, l) {
           (h.children || h.branch) && (i.expandOpenIcon && h.open || i.expandIcon) && !(i.unexpandableEmpty && !h.children) ? (o(), b(a, {
             key: 0,
             class: "w-tree__item-expand",
-            onClick: O((S) => !i.disabled && !h.disabled && l.onLabelClick(h, S), ["stop"]),
+            onClick: M((S) => !i.disabled && !h.disabled && l.onLabelClick(h, S), ["stop"]),
             color: "inherit",
             icon: h.open && i.expandOpenIcon || i.expandIcon,
             "icon-props": { rotate90a: !h.open },
@@ -8241,7 +8260,7 @@ const ua = {
   WFlex: Si,
   WForm: Ii,
   WFormElement: Li,
-  WGrid: Pi,
+  WGrid: Oi,
   WIcon: Mi,
   WImage: Ni,
   WInput: Qi,
@@ -8252,7 +8271,7 @@ const ua = {
   WParallax: fl,
   WProgress: Cl,
   WRadio: Ll,
-  WRadios: zl,
+  WRadios: Pl,
   WRating: Wl,
   WScrollable: Hl,
   WSelect: Gl,
@@ -8265,7 +8284,7 @@ const ua = {
   WTag: wo,
   WTextarea: _o,
   WTimeline: Lo,
-  WToolbar: Po,
+  WToolbar: Oo,
   WTooltip: Mo,
   WTransitionBounce: Wo,
   WTransitionExpand: Do,