wave-ui 3.21.1 → 3.23.0

package/dist/wave-ui.es.js

@@ -5,7 +5,7 @@ var Ce = (e) => {
 var Ye = (e, t, i) => t in e ? Xe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
 var G = (e, t, i) => Ye(e, typeof t != "symbol" ? t + "" : t, i), Se = (e, t, i) => t.has(e) || Ce("Cannot " + i);
 var ie = (e, t, i) => (Se(e, t, "read from private field"), i ? i.call(e) : t.get(e)), ue = (e, t, i) => t.has(e) ? Ce("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), he = (e, t, i, s) => (Se(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
-import { reactive as ae, resolveComponent as V, createBlock as b, openBlock as o, Teleport as Ge, createVNode as L, TransitionGroup as fe, normalizeClass as m, withCtx as f, createElementBlock as u, Fragment as v, renderList as O, createCommentVNode as p, mergeProps as $, createElementVNode as k, h as Je, render as Qe, inject as Ze, withKeys as N, renderSlot as c, withModifiers as A, createTextVNode as _, toDisplayString as S, normalizeStyle as x, toHandlers as ge, Transition as P, resolveDynamicComponent as R, normalizeProps as ce, resolveDirective as xe, withDirectives as F, createSlots as ne, vShow as be, vModelText as Oe, vModelDynamic as et, ref as D, computed as H, onMounted as tt, onBeforeUnmount as it, KeepAlive as lt } from "vue";
+import { reactive as ae, resolveComponent as V, createBlock as b, openBlock as o, Teleport as Ge, createVNode as L, TransitionGroup as me, normalizeClass as f, withCtx as m, createElementBlock as u, Fragment as v, renderList as O, createCommentVNode as p, mergeProps as $, createElementVNode as k, h as Je, render as Qe, inject as Ze, withKeys as N, renderSlot as c, withModifiers as A, createTextVNode as _, toDisplayString as S, normalizeStyle as x, toHandlers as ge, Transition as P, resolveDynamicComponent as R, normalizeProps as ce, resolveDirective as xe, withDirectives as F, createSlots as ne, vShow as be, vModelText as Oe, vModelDynamic as et, ref as D, computed as H, onMounted as tt, onBeforeUnmount as it, KeepAlive as lt } from "vue";
 const st = ae({
   on: "#app",
   // Sets the Wave UI root node. If not found, will default to `body`.
@@ -511,7 +511,7 @@ const pt = (e, t) => {
   return Object.entries(s).forEach(([I, E]) => {
     g += `--w-${I}-color: ${E};`;
   }), `:root{${g}}${i}`;
-}, mt = (e, t) => {
+}, ft = (e, t) => {
   let i = "";
   const { cssScope: s } = Q;
   return e.forEach(({ min: n, label: l }) => {
@@ -525,7 +525,7 @@ const pt = (e, t) => {
       i += "}";
     }
   }), i;
-}, ft = (e) => {
+}, mt = (e) => {
   let t = "";
   const { cssScope: i, baseIncrement: s } = Q, n = [
     "show{display:block}",
@@ -610,28 +610,27 @@ const pt = (e, t) => {
   }), s = getComputedStyle(document.documentElement);
   Q.cssScope = s.getPropertyValue("--w-css-scope"), Q.baseIncrement = parseInt(s.getPropertyValue("--w-base-increment"));
   let n = "";
-  return n += mt(i, e.css.grid), e.css.breakpointLayoutClasses && (n += ft(i)), n;
+  return n += ft(i, e.css.grid), e.css.breakpointLayoutClasses && (n += mt(i)), n;
 }, wt = ["innerHTML"];
 function kt(e, t, i, s, n, l) {
   const a = V("w-alert");
   return o(), b(Ge, { to: ".w-app" }, [
-    L(fe, {
-      class: m(["w-notification-manager", { "w-notification-manager--left": l.conf.align === "left" }]),
+    L(me, {
+      class: f(["w-notification-manager", { "w-notification-manager--left": l.conf.align === "left" }]),
       tag: "div",
       name: l.transition,
       appear: ""
     }, {
-      default: f(() => [
+      default: m(() => [
         (o(!0), u(v, null, O(l.notifications, (r) => (o(), u(v, null, [
           r._value ? (o(), b(a, $({
             class: "white--bg",
             key: r._uid,
             modelValue: r._value,
             "onUpdate:modelValue": (d) => r._value = d,
-            onClose: r.dismiss,
-            ref_for: !0
-          }, l.notifProps(r)), {
-            default: f(() => [
+            onClose: r.dismiss
+          }, { ref_for: !0 }, l.notifProps(r)), {
+            default: m(() => [
               k("div", {
                 innerHTML: r.message
               }, null, 8, wt)
@@ -711,7 +710,7 @@ const U = class U {
   }
 };
 Y = new WeakMap(), ue(U, Y);
-let me = U;
+let fe = U;
 const St = (e) => {
   const t = document.createElement("div");
   document.body.appendChild(t);
@@ -794,7 +793,7 @@ const q = class q {
       }
     });
     if (ie(q, ee)) return;
-    if (this.$waveui._notificationManager = new me(), i.theme || (i.theme = "light"), i.colors) {
+    if (this.$waveui._notificationManager = new fe(), i.theme || (i.theme = "light"), i.colors) {
       const a = { ...i.colors };
       i.colors.light || (i.colors.light = a), i.colors.dark || (i.colors.dark = a), i.colors = { light: i.colors.light, dark: i.colors.dark };
     }
@@ -839,11 +838,11 @@ const z = (e = {}) => (typeof e == "string" ? e = { [e]: !0 } : Array.isArray(e)
 function Lt(e, t, i, s, n, l) {
   const a = V("w-button"), r = V("w-transition-expand");
   return o(), u("div", {
-    class: m(["w-accordion__item", l.itemClasses]),
+    class: f(["w-accordion__item", l.itemClasses]),
     "aria-expanded": l.accordionItem._expanded ? "true" : "false"
   }, [
     k("div", {
-      class: m(["w-accordion__item-title", l.titleClasses]),
+      class: f(["w-accordion__item-title", l.titleClasses]),
       onClick: t[4] || (t[4] = (d) => !l.accordionItem._disabled && l.toggleItem(l.accordionItem, d)),
       onFocus: t[5] || (t[5] = (d) => e.$emit("focus", l.accordionItem)),
       onKeypress: t[6] || (t[6] = N((d) => !l.accordionItem._disabled && l.toggleItem(l.accordionItem, d), ["enter"])),
@@ -851,7 +850,7 @@ function Lt(e, t, i, s, n, l) {
     }, [
       l.options.expandIcon && !l.options.expandIconRight ? (o(), b(a, {
         key: 0,
-        class: m(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": l.accordionItem._expanded, "w-accordion__expand-icon--rotate90": l.options.expandIconRotate90 }]),
+        class: f(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": l.accordionItem._expanded, "w-accordion__expand-icon--rotate90": l.options.expandIconRotate90 }]),
         icon: l.accordionItem._expanded && l.options.collapseIcon || l.options.expandIcon,
         "icon-props": l.options.expandIconProps,
         disabled: l.accordionItem._disabled || null,
@@ -873,7 +872,7 @@ function Lt(e, t, i, s, n, l) {
       ]),
       l.options.expandIcon && l.options.expandIconRight ? (o(), b(a, {
         key: 1,
-        class: m(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": l.accordionItem._expanded, "w-accordion__expand-icon--rotate90": l.options.expandIconRotate90 }]),
+        class: f(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": l.accordionItem._expanded, "w-accordion__expand-icon--rotate90": l.options.expandIconRotate90 }]),
         icon: l.accordionItem._expanded && l.options.collapseIcon || l.options.expandIcon,
         text: "",
         onKeypress: t[2] || (t[2] = A(() => {
@@ -886,10 +885,10 @@ function Lt(e, t, i, s, n, l) {
       onAfterLeave: t[7] || (t[7] = (d) => l.onEndOfCollapse(l.accordionItem)),
       duration: l.options.duration
     }, {
-      default: f(() => [
+      default: m(() => [
         l.accordionItem._expanded ? (o(), u("div", {
           key: 0,
-          class: m(["w-accordion__item-content", l.contentClasses])
+          class: f(["w-accordion__item-content", l.contentClasses])
         }, [
           c(e.$slots, "content", {
             item: l.getOriginalItem(l.accordionItem),
@@ -964,18 +963,18 @@ const Rt = {
 function xt(e, t, i, s, n, l) {
   const a = V("w-accordion-item");
   return o(), u("div", {
-    class: m(["w-accordion", l.accordionClasses])
+    class: f(["w-accordion", l.accordionClasses])
   }, [
     l.accordionItemsProvided ? c(e.$slots, "default", { key: 0 }) : (i.items || []).length ? (o(!0), u(v, { key: 1 }, O(i.items.length ? i.items : e.accordionItems, (r, d) => (o(), b(a, {
       key: d,
-      class: m(l.itemClasses),
+      class: f(l.itemClasses),
       title: r.title,
       content: r.content,
       expanded: r.expanded || r._expanded,
       disabled: r.disabled || r._disabled,
       onFocus: t[0] || (t[0] = (h) => e.$emit("focus", h))
     }, {
-      title: f(({ item: h, expanded: y, index: w }) => [
+      title: m(({ item: h, expanded: y, index: w }) => [
         e.$slots[`item-title.${h.id || w}`] ? c(e.$slots, `item-title.${h.id || w}`, {
           key: 0,
           item: h,
@@ -988,7 +987,7 @@ function xt(e, t, i, s, n, l) {
           index: w
         })
       ]),
-      content: f(({ item: h, expanded: y, index: w }) => [
+      content: m(({ item: h, expanded: y, index: w }) => [
         e.$slots[`item-content.${h.id || w}`] ? c(e.$slots, `item-content.${h.id || w}`, {
           key: 0,
           item: h,
@@ -1137,14 +1136,14 @@ function Et(e, t, i, s, n, l) {
   const a = V("w-icon"), r = V("w-button");
   return n.show ? (o(), u("div", {
     key: 0,
-    class: m(["w-alert", l.classes])
+    class: f(["w-alert", l.classes])
   }, [
     l.type || i.icon || i.dismiss ? (o(), u(v, { key: 0 }, [
       l.type || i.icon ? (o(), b(a, {
         key: 0,
         class: "w-alert__icon"
       }, {
-        default: f(() => [
+        default: m(() => [
           _(S(l.type ? l.typeIcon : i.icon), 1)
         ]),
         _: 1
@@ -1252,7 +1251,7 @@ const Mt = {
 function Ut(e, t, i, s, n, l) {
   const a = V("w-button"), r = V("w-transition-slide-fade");
   return o(), u("div", {
-    class: m(["w-autocomplete", l.classes]),
+    class: f(["w-autocomplete", l.classes]),
     onClick: t[5] || (t[5] = (...d) => l.onClick && l.onClick(...d)),
     style: x(e.$attrs.style)
   }, [
@@ -1284,7 +1283,7 @@ function Ut(e, t, i, s, n, l) {
       value: e.keywords
     }, ge(l.inputEventListeners, !0), l.inputAttrs), null, 16, Dt),
     L(r, null, {
-      default: f(() => [
+      default: m(() => [
         e.menuOpen ? (o(), u("ul", {
           key: 0,
           class: "w-autocomplete__menu",
@@ -1297,7 +1296,7 @@ function Ut(e, t, i, s, n, l) {
           (o(!0), u(v, null, O(l.filteredItems, (d, h) => (o(), u("li", {
             key: h,
             onClick: A((y) => (l.selectItem(d), e.$emit("item-click", d)), ["stop"]),
-            class: m({ highlighted: e.highlightedItem === d.uid })
+            class: f({ highlighted: e.highlightedItem === d.uid })
           }, [
             c(e.$slots, "item", {
               item: d,
@@ -1310,7 +1309,7 @@ function Ut(e, t, i, s, n, l) {
           ], 10, Ht))), 128)),
           l.filteredItems.length ? p("", !0) : (o(), u("li", {
             key: 0,
-            class: m(["w-autocomplete__no-match", { "w-autocomplete__no-match--default": !e.$slots.noMatch }])
+            class: f(["w-autocomplete__no-match", { "w-autocomplete__no-match--default": !e.$slots.noMatch }])
           }, [
             c(e.$slots, "no-match", {}, () => [
               k("div", {
@@ -1321,7 +1320,7 @@ function Ut(e, t, i, s, n, l) {
           ], 2)),
           e.$slots["extra-item"] ? (o(), u("li", {
             key: 1,
-            class: m(["w-autocomplete__extra-item", { highlighted: e.highlightedItem === "extra-item" }]),
+            class: f(["w-autocomplete__extra-item", { highlighted: e.highlightedItem === "extra-item" }]),
             onClick: t[0] || (t[0] = (...d) => l.selectExtraItem && l.selectExtraItem(...d))
           }, [
             c(e.$slots, "extra-item")
@@ -1544,10 +1543,10 @@ function ei(e, t, i, s, n, l) {
     L(P, {
       name: `${i.transition}`
     }, {
-      default: f(() => [
+      default: m(() => [
         i.modelValue ? (o(), u("div", {
           key: 0,
-          class: m(["w-badge", l.classes]),
+          class: f(["w-badge", l.classes]),
           style: x(l.styles),
           "aria-atomic": "true",
           "aria-label": "Badge",
@@ -1631,31 +1630,31 @@ const ti = {
 function si(e, t, i, s, n, l) {
   const a = V("w-icon");
   return o(), u("div", {
-    class: m(["w-breadcrumbs", l.classes])
+    class: f(["w-breadcrumbs", l.classes])
   }, [
     (o(!0), u(v, null, O(i.items, (r, d) => (o(), u(v, null, [
       d && e.$slots.separator ? (o(), u("span", {
-        class: m(["w-breadcrumbs__separator", i.separatorColor]),
+        class: f(["w-breadcrumbs__separator", i.separatorColor]),
         key: `${d}a`
       }, [
         c(e.$slots, "separator", { index: d })
       ], 2)) : d ? (o(), b(a, {
-        class: m(["w-breadcrumbs__separator", i.separatorColor]),
+        class: f(["w-breadcrumbs__separator", i.separatorColor]),
         key: `${d}b`
       }, {
-        default: f(() => [
+        default: m(() => [
           _(S(i.icon), 1)
         ]),
         _: 2
       }, 1032, ["class"])) : p("", !0),
       r[i.itemRouteKey] && (d < i.items.length - 1 || i.linkLastItem) ? (o(), u(v, { key: 2 }, [
         e.$slots.item ? (o(), b(R(l.hasRouter ? "router-link" : "a"), {
-          class: m(["w-breadcrumbs__item", i.color || null]),
+          class: f(["w-breadcrumbs__item", i.color || null]),
           key: `${d}c`,
           to: l.hasRouter && r[i.itemRouteKey],
           href: r[i.itemRouteKey]
         }, {
-          default: f(() => [
+          default: m(() => [
             c(e.$slots, "item", {
               item: r,
               index: d + 1,
@@ -1664,7 +1663,7 @@ function si(e, t, i, s, n, l) {
           ]),
           _: 2
         }, 1032, ["to", "href", "class"])) : (o(), b(R(l.hasRouter ? "router-link" : "a"), {
-          class: m(["w-breadcrumbs__item", i.color || null]),
+          class: f(["w-breadcrumbs__item", i.color || null]),
           key: `${d}d`,
           to: l.hasRouter && r[i.itemRouteKey],
           href: r[i.itemRouteKey],
@@ -1725,15 +1724,15 @@ function ri(e, t, i, s, n, l) {
     href: !i.disabled && i.route && (l.externalLink ? i.route : l.resolvedRoute) || null,
     disabled: !!i.disabled || null
   }, l.attrs, { style: l.styles }), {
-    default: f(() => [
+    default: m(() => [
       i.icon ? (o(), b(a, ce($({ key: 0 }, i.iconProps || {})), {
-        default: f(() => [
+        default: m(() => [
           _(S(i.icon), 1)
         ]),
         _: 1
       }, 16)) : c(e.$slots, "default", { key: 1 }),
       L(P, { name: "scale-fade" }, {
-        default: f(() => [
+        default: m(() => [
           i.loading ? (o(), u("div", ni, [
             c(e.$slots, "loading", {}, () => [
               t[0] || (t[0] = k("svg", { viewBox: "0 0 40 40" }, [
@@ -1861,23 +1860,23 @@ const di = {
 function ci(e, t, i, s, n, l) {
   const a = V("button-partial");
   return i.tooltip ? (o(), b(R("w-tooltip"), ce($({ key: 0 }, i.tooltipProps)), {
-    activator: f(({ on: r }) => [
+    activator: m(({ on: r }) => [
       L(a, $(l.buttonProps, ge(r)), {
-        default: f(() => [
+        default: m(() => [
           c(e.$slots, "default")
         ]),
         _: 2
       }, 1040)
     ]),
-    default: f(() => [
+    default: m(() => [
       k("div", { innerHTML: i.tooltip }, null, 8, hi)
     ]),
     _: 3
   }, 16)) : (o(), b(a, ce($({ key: 1 }, l.buttonProps)), {
-    loading: f(() => [
+    loading: m(() => [
       c(e.$slots, "loading")
     ]),
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -1934,40 +1933,40 @@ const pi = {
       return { ...i, ...this.$attrs };
     }
   }
-}, mi = /* @__PURE__ */ C(pi, [["render", ci]]), fi = ["innerHTML"];
+}, fi = /* @__PURE__ */ C(pi, [["render", ci]]), mi = ["innerHTML"];
 function gi(e, t, i, s, n, l) {
   const a = V("w-image");
   return o(), u("div", {
-    class: m(["w-card", l.classes])
+    class: f(["w-card", l.classes])
   }, [
     e.$slots.title ? (o(), u("div", {
       key: 0,
-      class: m(["w-card__title", { "w-card__title--has-toolbar": e.$slots.title && l.titleHasToolbar, ...l.titleClasses }])
+      class: f(["w-card__title", { "w-card__title--has-toolbar": e.$slots.title && l.titleHasToolbar, ...l.titleClasses }])
     }, [
       c(e.$slots, "title")
     ], 2)) : i.title ? (o(), u("div", {
       key: 1,
-      class: m(["w-card__title", { "w-card__title--has-toolbar": e.$slots.title && l.titleHasToolbar, ...l.titleClasses }]),
+      class: f(["w-card__title", { "w-card__title--has-toolbar": e.$slots.title && l.titleHasToolbar, ...l.titleClasses }]),
       innerHTML: i.title
-    }, null, 10, fi)) : p("", !0),
+    }, null, 10, mi)) : p("", !0),
     i.image ? (o(), b(a, $({
       key: 2,
       class: "w-card__image",
       src: i.image
     }, l.imgProps), {
-      default: f(() => [
+      default: m(() => [
         c(e.$slots, "image-content")
       ]),
       _: 3
     }, 16, ["src"])) : p("", !0),
     k("div", {
-      class: m(["w-card__content", l.contentClasses])
+      class: f(["w-card__content", l.contentClasses])
     }, [
       c(e.$slots, "default")
     ], 2),
     e.$slots.actions ? (o(), u("div", {
       key: 3,
-      class: m(["w-card__actions", { "w-card__actions--has-toolbar": l.actionsHasToolbar }])
+      class: f(["w-card__actions", { "w-card__actions--has-toolbar": l.actionsHasToolbar }])
     }, [
       c(e.$slots, "actions")
     ], 2)) : p("", !0)
@@ -2083,7 +2082,7 @@ function Bi(e, t, i, s, n, l) {
     }),
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       k("input", {
         ref: "input",
         id: `w-checkbox--${e._.uid}`,
@@ -2103,7 +2102,7 @@ function Bi(e, t, i, s, n, l) {
       l.hasLabel && i.labelOnLeft ? (o(), u(v, { key: 0 }, [
         e.$slots.default ? (o(), u("label", {
           key: 0,
-          class: m(["w-checkbox__label w-form-el-shakable pr2", e.labelClasses]),
+          class: f(["w-checkbox__label w-form-el-shakable pr2", e.labelClasses]),
           for: `w-checkbox--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -2111,13 +2110,13 @@ function Bi(e, t, i, s, n, l) {
           ])
         ], 10, ki)) : i.label ? (o(), u("label", {
           key: 1,
-          class: m(["w-checkbox__label w-form-el-shakable pr2", e.labelClasses]),
+          class: f(["w-checkbox__label w-form-el-shakable pr2", e.labelClasses]),
           for: `w-checkbox--${e._.uid}`,
           innerHTML: i.label
         }, null, 10, vi)) : p("", !0)
       ], 64)) : p("", !0),
       k("div", {
-        class: m(["w-checkbox__input", this.color]),
+        class: f(["w-checkbox__input", this.color]),
         onClick: t[4] || (t[4] = (a) => {
           e.$refs.input.focus(), e.$refs.input.click();
         })
@@ -2129,7 +2128,7 @@ function Bi(e, t, i, s, n, l) {
       l.hasLabel && !i.labelOnLeft ? (o(), u(v, { key: 1 }, [
         e.$slots.default ? (o(), u("label", {
           key: 0,
-          class: m(["w-checkbox__label w-form-el-shakable pl2", e.labelClasses]),
+          class: f(["w-checkbox__label w-form-el-shakable pl2", e.labelClasses]),
           for: `w-checkbox--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -2137,7 +2136,7 @@ function Bi(e, t, i, s, n, l) {
           ])
         ], 10, Ci)) : i.label ? (o(), u("label", {
           key: 1,
-          class: m(["w-checkbox__label w-form-el-shakable pl2", e.labelClasses]),
+          class: f(["w-checkbox__label w-form-el-shakable pl2", e.labelClasses]),
           for: `w-checkbox--${e._.uid}`,
           innerHTML: i.label
         }, null, 10, Si)) : p("", !0)
@@ -2224,20 +2223,19 @@ function Vi(e, t, i, s, n, l) {
     wrap: i.inline,
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       (o(!0), u(v, null, O(l.checkboxItems, (r, d) => (o(), b(a, $({
         key: d,
         "model-value": r._isChecked,
         "onUpdate:modelValue": (h) => l.toggleCheck(r, h),
         onFocus: t[0] || (t[0] = (h) => e.$emit("focus", h)),
-        name: `${e.inputName}[]`,
-        ref_for: !0
-      }, { label: r.label, color: r.color, labelOnLeft: i.labelOnLeft, labelColor: i.labelColor, round: i.round }, {
+        name: `${e.inputName}[]`
+      }, { ref_for: !0 }, { label: r.label, color: r.color, labelOnLeft: i.labelOnLeft, labelColor: i.labelColor, round: i.round }, {
         disabled: e.isDisabled || null,
         readonly: e.isReadonly || null,
         class: { mt1: !i.inline && d }
       }), {
-        default: f(() => [
+        default: m(() => [
           e.$slots[`item.${d + 1}`] || e.$slots.item ? c(e.$slots, e.$slots[`item.${d + 1}`] ? `item.${d + 1}` : "item", {
             key: 0,
             item: l.getOriginalItem(r),
@@ -2326,27 +2324,27 @@ function Ri(e, t, i, s, n, l) {
     modelValue: e.showPopup,
     "onUpdate:modelValue": t[2] || (t[2] = (y) => e.showPopup = y)
   }, l.wMenuProps), {
-    activator: f(({ on: y }) => [
+    activator: m(({ on: y }) => [
       L(a, $({ class: "w-confirm" }, { ...e.$attrs, ...l.buttonProps }, ge(i.disablePrompt ? {} : { ...y })), {
-        default: f(() => [
+        default: m(() => [
           c(e.$slots, "default")
         ]),
         _: 2
       }, 1040)
     ]),
-    default: f(() => [
+    default: m(() => [
       L(r, {
         column: !i.inline,
         "align-center": ""
       }, {
-        default: f(() => [
+        default: m(() => [
           k("div", null, [
             c(e.$slots, "question", {}, () => [
               _(S(i.question), 1)
             ])
           ]),
           k("div", {
-            class: m(["w-flex justify-end", i.inline ? "ml2" : "mt2"])
+            class: f(["w-flex justify-end", i.inline ? "ml2" : "mt2"])
           }, [
             i.cancel !== !1 ? (o(), b(a, $({
               key: 0,
@@ -2356,7 +2354,7 @@ function Ri(e, t, i, s, n, l) {
               onKeyup: t[0] || (t[0] = N((y) => !i.persistent && l.onCancel(), ["escape"])),
               onClick: l.onCancel
             }), {
-              default: f(() => [
+              default: m(() => [
                 c(e.$slots, "cancel", {}, () => [
                   _(S(l.cancelButton.label), 1)
                 ])
@@ -2368,7 +2366,7 @@ function Ri(e, t, i, s, n, l) {
               onKeyup: t[1] || (t[1] = N((y) => !i.persistent && l.onCancel(), ["escape"])),
               onClick: l.onConfirm
             }), {
-              default: f(() => [
+              default: m(() => [
                 c(e.$slots, "confirm", {}, () => [
                   _(S(l.confirmButton.label), 1)
                 ])
@@ -2501,7 +2499,7 @@ const xi = {
 }, Oi = /* @__PURE__ */ C(xi, [["render", Ri]]);
 function Pi(e, t, i, s, n, l) {
   return o(), u("div", {
-    class: m(["w-date-picker", l.classes]),
+    class: f(["w-date-picker", l.classes]),
     style: x(l.styles)
   }, [
     c(e.$slots, "default")
@@ -2529,7 +2527,7 @@ const zi = {
 function Mi(e, t, i, s, n, l) {
   const a = V("w-card"), r = V("w-overlay");
   return o(), b(r, {
-    class: m(["w-dialog", l.classes]),
+    class: f(["w-dialog", l.classes]),
     "model-value": n.showWrapper,
     persistent: i.persistent,
     "persistent-no-animation": i.persistentNoAnimation,
@@ -2538,15 +2536,15 @@ function Mi(e, t, i, s, n, l) {
     "bg-color": i.overlayColor,
     opacity: i.overlayOpacity
   }, {
-    default: f(() => [
+    default: m(() => [
       L(P, {
         name: i.transition,
         appear: "",
         onAfterLeave: l.onBeforeClose
       }, {
-        default: f(() => [
+        default: m(() => [
           F(L(a, {
-            class: m(["w-dialog__content", i.dialogClass]),
+            class: f(["w-dialog__content", i.dialogClass]),
             ref: "dialog",
             "no-border": "",
             color: i.color,
@@ -2556,21 +2554,21 @@ function Mi(e, t, i, s, n, l) {
             title: i.title || void 0,
             style: x(l.contentStyles)
           }, ne({
-            default: f(() => [
+            default: m(() => [
               c(e.$slots, "default")
             ]),
             _: 2
           }, [
             e.$slots.title ? {
               name: "title",
-              fn: f(() => [
+              fn: m(() => [
                 c(e.$slots, "title")
               ]),
               key: "0"
             } : void 0,
             e.$slots.actions ? {
               name: "actions",
-              fn: f(() => [
+              fn: m(() => [
                 c(e.$slots, "actions")
               ]),
               key: "1"
@@ -2667,7 +2665,7 @@ const Ai = {
 }, Wi = /* @__PURE__ */ C(Ai, [["render", Mi]]), Ki = ["role", "aria-orientation"];
 function Ni(e, t, i, s, n, l) {
   return o(), u("div", {
-    class: m(["w-divider", l.classes]),
+    class: f(["w-divider", l.classes]),
     role: e.$slots.default ? null : "presentation",
     "aria-orientation": i.vertical ? "vertical" : "horizontal"
   }, [
@@ -2699,7 +2697,7 @@ function ji(e, t, i, s, n, l) {
   const a = V("w-overlay");
   return n.showWrapper || i.pushContent ? (o(), u("div", {
     key: 0,
-    class: m(["w-drawer-wrap", l.wrapperClasses])
+    class: f(["w-drawer-wrap", l.wrapperClasses])
   }, [
     i.pushContent ? (o(), u("div", {
       key: 0,
@@ -2724,14 +2722,14 @@ function ji(e, t, i, s, n, l) {
         onBeforeLeave: l.onBeforeClose,
         onAfterLeave: l.onClose
       }, {
-        default: f(() => [
+        default: m(() => [
           n.showDrawer ? (o(), b(R(i.tag || "aside"), {
             key: 0,
-            class: m(["w-drawer", l.drawerClasses]),
+            class: f(["w-drawer", l.drawerClasses]),
             ref: "drawer",
             style: x(l.styles)
           }, {
-            default: f(() => [
+            default: m(() => [
               c(e.$slots, "default")
             ]),
             _: 3
@@ -2756,14 +2754,14 @@ function ji(e, t, i, s, n, l) {
         onBeforeLeave: l.onBeforeClose,
         onAfterLeave: l.onClose
       }, {
-        default: f(() => [
+        default: m(() => [
           n.showDrawer ? (o(), b(R(i.tag || "aside"), {
             key: 0,
-            class: m(["w-drawer", l.drawerClasses]),
+            class: f(["w-drawer", l.drawerClasses]),
             ref: "drawer",
             style: x(l.styles)
           }, {
-            default: f(() => [
+            default: m(() => [
               c(e.$slots, "default")
             ]),
             _: 3
@@ -2890,9 +2888,9 @@ const Ui = { left: "right", right: "left", top: "down", bottom: "up" }, qi = {
 }, Xi = /* @__PURE__ */ C(qi, [["render", ji]]);
 function Yi(e, t, i, s, n, l) {
   return o(), b(R(i.tag), {
-    class: m(["w-flex", l.classes])
+    class: f(["w-flex", l.classes])
   }, {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -2948,7 +2946,7 @@ const Gi = {
 }, Ji = /* @__PURE__ */ C(Gi, [["render", Yi]]);
 function Qi(e, t, i, s, n, l) {
   return o(), u("form", {
-    class: m(["w-form", l.classes]),
+    class: f(["w-form", l.classes]),
     onSubmit: t[0] || (t[0] = (...a) => l.onSubmit && l.onSubmit(...a)),
     onReset: t[1] || (t[1] = (...a) => l.reset && l.reset(...a)),
     novalidate: ""
@@ -3070,18 +3068,18 @@ const Zi = async (e, t) => {
 function il(e, t, i, s, n, l) {
   const a = V("w-transition-expand");
   return o(), u("div", {
-    class: m(l.classes)
+    class: f(l.classes)
   }, [
     k("div", {
-      class: m(["w-flex grow", [i.column ? "column" : "align-center", i.wrap ? "wrap" : ""]])
+      class: f(["w-flex grow", [i.column ? "column" : "align-center", i.wrap ? "wrap" : ""]])
     }, [
       c(e.$slots, "default")
     ], 2),
     L(a, { y: "" }, {
-      default: f(() => [
+      default: m(() => [
         e.Validation.message ? (o(), u("div", {
           key: 0,
-          class: m(["w-form-el__error", l.formProps.validationColor])
+          class: f(["w-form-el__error", l.formProps.validationColor])
         }, [
           c(e.$slots, "error-message", {
             message: e.Validation.message
@@ -3170,9 +3168,9 @@ const ll = {
 }, sl = /* @__PURE__ */ C(ll, [["render", il]]);
 function ol(e, t, i, s, n, l) {
   return o(), b(R(i.tag), {
-    class: m(["w-grid", l.classes])
+    class: f(["w-grid", l.classes])
   }, {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -3225,12 +3223,12 @@ const al = {
 }, nl = /* @__PURE__ */ C(al, [["render", ol]]);
 function rl(e, t, i, s, n, l) {
   return o(), b(R(i.tag || "i"), {
-    class: m(["w-icon", l.classes]),
+    class: f(["w-icon", l.classes]),
     role: "icon",
     "aria-hidden": "true",
     style: x(l.readIcon() && l.styles)
   }, {
-    default: f(() => [
+    default: m(() => [
       l.hasLigature ? (o(), u(v, { key: 0 }, [
         _(S(e.icon), 1)
       ], 64)) : p("", !0)
@@ -3315,18 +3313,18 @@ const dl = {
 function pl(e, t, i, s, n, l) {
   const a = V("w-progress");
   return o(), b(R(l.wrapperTag), {
-    class: m(["w-image", l.wrapperClasses]),
+    class: f(["w-image", l.wrapperClasses]),
     style: x(l.wrapperStyles)
   }, {
-    default: f(() => [
+    default: m(() => [
       L(P, {
         name: i.transition,
         appear: ""
       }, {
-        default: f(() => [
+        default: m(() => [
           n.loaded ? (o(), b(R(l.normalized.tag), {
             key: 0,
-            class: m(["w-image__image", l.imageClasses]),
+            class: f(["w-image__image", l.imageClasses]),
             style: x(l.imageStyles),
             src: l.normalized.tag === "img" ? n.computedImg.src : null
           }, null, 8, ["class", "style", "src"])) : p("", !0)
@@ -3342,28 +3340,28 @@ function pl(e, t, i, s, n, l) {
       ])) : p("", !0),
       e.$slots.default ? (o(), b(R(l.wrapperTag), {
         key: 1,
-        class: m(["w-image__content", i.contentClass])
+        class: f(["w-image__content", i.contentClass])
       }, {
-        default: f(() => [
+        default: m(() => [
           c(e.$slots, "default")
         ]),
         _: 3
       }, 8, ["class"])) : p("", !0),
       e.$slots.caption ? (o(), u("figcaption", {
         key: 2,
-        class: m(["w-image__caption caption", i.captionClass])
+        class: f(["w-image__caption caption", i.captionClass])
       }, [
         c(e.$slots, "caption")
       ], 2)) : i.caption ? (o(), u("figcaption", {
         key: 3,
-        class: m(["w-image__caption caption", i.captionClass]),
+        class: f(["w-image__caption caption", i.captionClass]),
         innerHTML: i.caption
       }, null, 10, cl)) : p("", !0)
     ]),
     _: 3
   }, 8, ["class", "style"]);
 }
-const ml = {
+const fl = {
   name: "w-image",
   props: {
     tag: { type: String, default: "span" },
@@ -3473,7 +3471,7 @@ const ml = {
       this.loadImage();
     }
   }
-}, fl = /* @__PURE__ */ C(ml, [["render", pl]]), gl = ["name"], bl = ["for"], yl = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"], wl = ["id", "name", "multiple", "disabled", "data-progress"], kl = {
+}, ml = /* @__PURE__ */ C(fl, [["render", pl]]), gl = ["name"], bl = ["for"], yl = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"], wl = ["id", "name", "multiple", "disabled", "data-progress"], kl = {
   class: "w-input__no-file",
   key: "no-file"
 }, vl = ["for"], Cl = ["src"], Sl = ["for"];
@@ -3489,7 +3487,7 @@ function Bl(e, t, i, s, n, l) {
     class: l.classes,
     style: e.$attrs.style
   }), {
-    default: f(() => [
+    default: m(() => [
       i.type === "hidden" ? F((o(), u("input", {
         key: 0,
         type: "hidden",
@@ -3501,7 +3499,7 @@ function Bl(e, t, i, s, n, l) {
         i.labelPosition === "left" ? (o(), u(v, { key: 0 }, [
           e.$slots.default || i.label ? (o(), u("label", {
             key: 0,
-            class: m(["w-input__label w-input__label--left w-form-el-shakable", e.labelClasses]),
+            class: f(["w-input__label w-input__label--left w-form-el-shakable", e.labelClasses]),
             for: `w-input--${e._.uid}`
           }, [
             c(e.$slots, "default", {}, () => [
@@ -3510,7 +3508,7 @@ function Bl(e, t, i, s, n, l) {
           ], 10, bl)) : p("", !0)
         ], 64)) : p("", !0),
         k("div", {
-          class: m(["w-input__input-wrap", l.inputWrapClasses])
+          class: f(["w-input__input-wrap", l.inputWrapClasses])
         }, [
           c(e.$slots, "icon-left", {
             inputId: `w-input--${e._.uid}`
@@ -3522,7 +3520,7 @@ function Bl(e, t, i, s, n, l) {
               for: `w-input--${e._.uid}`,
               onClick: t[1] || (t[1] = (d) => e.$emit("click:inner-icon-left", d))
             }, {
-              default: f(() => [
+              default: m(() => [
                 _(S(i.innerIconLeft), 1)
               ]),
               _: 1
@@ -3550,7 +3548,7 @@ function Bl(e, t, i, s, n, l) {
             disabled: e.isDisabled || null,
             required: e.required || null,
             tabindex: e.tabindex || null
-          }, l.attrs), null, 16, yl)), [
+          }, l.attrs, { class: i.inputClass }), null, 16, yl)), [
             [et, n.inputValue]
           ]) : (o(), u(v, { key: 1 }, [
             k("input", $({
@@ -3567,13 +3565,13 @@ function Bl(e, t, i, s, n, l) {
               "data-progress": l.overallFilesProgress
               /* Needed to emit the overallProgress. */
             }), null, 16, wl),
-            L(fe, {
+            L(me, {
               class: "w-input__input w-input__input--file",
               tag: "label",
               name: "fade",
               for: `w-input--${e._.uid}`
             }, {
-              default: f(() => [
+              default: m(() => [
                 !n.inputFiles.length && n.isFocused ? (o(), u("span", kl, [
                   c(e.$slots, "no-file", {}, () => [
                     e.$slots["no-file"] === void 0 ? (o(), u(v, { key: 0 }, [
@@ -3598,7 +3596,7 @@ function Bl(e, t, i, s, n, l) {
           i.labelPosition === "inside" && l.showLabelInside ? (o(), u(v, { key: 2 }, [
             e.$slots.default || i.label ? (o(), u("label", {
               key: 0,
-              class: m(["w-input__label w-input__label--inside w-form-el-shakable", e.labelClasses])
+              class: f(["w-input__label w-input__label--inside w-form-el-shakable", e.labelClasses])
             }, [
               c(e.$slots, "default", {}, () => [
                 _(S(i.label), 1)
@@ -3615,7 +3613,7 @@ function Bl(e, t, i, s, n, l) {
               for: `w-input--${e._.uid}`,
               onClick: t[9] || (t[9] = (d) => e.$emit("click:inner-icon-right", d))
             }, {
-              default: f(() => [
+              default: m(() => [
                 _(S(i.innerIconRight), 1)
               ]),
               _: 1
@@ -3644,7 +3642,7 @@ function Bl(e, t, i, s, n, l) {
               src: d.preview,
               alt: ""
             }, null, 8, Cl)) : (o(), u("i", {
-              class: m(["w-icon w-input__file-preview primary size--md", i.preview && typeof i.preview == "string" ? i.preview : "wi-file"]),
+              class: f(["w-icon w-input__file-preview primary size--md", i.preview && typeof i.preview == "string" ? i.preview : "wi-file"]),
               key: `${h}c`
             }, null, 2))
           ], 64))), 256))
@@ -3652,7 +3650,7 @@ function Bl(e, t, i, s, n, l) {
         i.labelPosition === "right" ? (o(), u(v, { key: 2 }, [
           e.$slots.default || i.label ? (o(), u("label", {
             key: 0,
-            class: m(["w-input__label w-input__label--right w-form-el-shakable", e.labelClasses]),
+            class: f(["w-input__label w-input__label--right w-form-el-shakable", e.labelClasses]),
             for: `w-input--${e._.uid}`
           }, [
             c(e.$slots, "default", {}, () => [
@@ -3705,7 +3703,9 @@ const _l = {
     // https://stackoverflow.com/questions/16365668/pre-populate-html-form-file-input
     files: { type: Array },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    inputClass: { type: String }
+    // Additional classes for the input element.
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -3856,27 +3856,26 @@ const _l = {
 function Il(e, t, i, s, n, l) {
   const a = V("w-icon"), r = V("w-list", !0);
   return o(), u("ul", {
-    class: m(["w-list", l.classes])
+    class: f(["w-list", l.classes])
   }, [
     (o(!0), u(v, null, O(e.listItems, (d, h) => (o(), u("li", {
-      class: m(["w-list__item", { "w-list__item--parent": (d.children || []).length }]),
+      class: f(["w-list__item", { "w-list__item--parent": (d.children || []).length }]),
       key: h
     }, [
       i.icon ? (o(), b(a, {
         key: 0,
         class: "w-list__item-bullet"
       }, {
-        default: f(() => [
+        default: m(() => [
           _(S(i.icon), 1)
         ]),
         _: 1
       })) : p("", !0),
       e.$slots[`item.${h + 1}`] || e.$slots.item || e.$slots.default ? (o(), b(R(i.checklist ? "w-checkbox" : i.nav && !d.disabled && d.route ? l.hasRouter ? "router-link" : "a" : "div"), $({
         key: 1,
-        class: "w-list__item-label",
-        ref_for: !0
-      }, l.liLabelProps(d, h, d._selected)), {
-        default: f(() => [
+        class: "w-list__item-label"
+      }, { ref_for: !0 }, l.liLabelProps(d, h, d._selected)), {
+        default: m(() => [
           e.$slots[`item.${h + 1}`] ? c(e.$slots, `item.${h + 1}`, {
             key: 0,
             item: l.cleanLi(d),
@@ -3899,9 +3898,8 @@ function Il(e, t, i, s, n, l) {
         _: 2
       }, 1040)) : (o(), b(R(i.checklist ? "w-checkbox" : i.nav && !d.disabled && d.route ? l.hasRouter ? "router-link" : "a" : "div"), $({
         key: 2,
-        class: "w-list__item-label",
-        ref_for: !0
-      }, l.liLabelProps(d, h, d._selected)), null, 16)),
+        class: "w-list__item-label"
+      }, { ref_for: !0 }, l.liLabelProps(d, h, d._selected)), null, 16)),
       (d.children || []).length ? (o(), b(r, $({
         key: 3,
         ref_for: !0
@@ -3915,7 +3913,7 @@ function Il(e, t, i, s, n, l) {
       }), ne({ _: 2 }, [
         e.$slots.item ? {
           name: "item",
-          fn: f(({ item: y, index: w, selected: g }) => [
+          fn: m(({ item: y, index: w, selected: g }) => [
             c(e.$slots, "item", {
               item: l.cleanLi(y),
               index: w,
@@ -3925,7 +3923,7 @@ function Il(e, t, i, s, n, l) {
           key: "0"
         } : {
           name: "default",
-          fn: f(({ item: y, index: w, selected: g }) => [
+          fn: m(({ item: y, index: w, selected: g }) => [
             c(e.$slots, "default", {
               item: l.cleanLi(y),
               index: w,
@@ -4320,7 +4318,7 @@ function Ll(e, t, i, s, n, l) {
       name: l.transitionName,
       appear: ""
     }, {
-      default: f(() => [
+      default: m(() => [
         i.custom && e.detachableVisible ? (o(), u("div", $({
           key: 0,
           class: "w-menu",
@@ -4349,21 +4347,21 @@ function Ll(e, t, i, s, n, l) {
           class: l.classes,
           style: l.styles
         }), ne({
-          default: f(() => [
+          default: m(() => [
             c(e.$slots, "default")
           ]),
           _: 2
         }, [
           e.$slots.title ? {
             name: "title",
-            fn: f(() => [
+            fn: m(() => [
               c(e.$slots, "title")
             ]),
             key: "0"
           } : void 0,
           e.$slots.actions ? {
             name: "actions",
-            fn: f(() => [
+            fn: m(() => [
               c(e.$slots, "actions")
             ]),
             key: "1"
@@ -4564,10 +4562,10 @@ function Ol(e, t, i, s, n, l) {
     name: l.transitionName,
     appear: ""
   }, {
-    default: f(() => [
+    default: m(() => [
       n.show ? (o(), u("div", {
         key: 0,
-        class: m(["w-notification", l.classes]),
+        class: f(["w-notification", l.classes]),
         style: x(l.styles)
       }, [
         L(a, $(l.alertProps, {
@@ -4576,7 +4574,7 @@ function Ol(e, t, i, s, n, l) {
             e.$emit("update:modelValue", !1), e.$emit("input", !1);
           })
         }), {
-          default: f(() => [
+          default: m(() => [
             c(e.$slots, "default")
           ]),
           _: 3
@@ -4717,10 +4715,10 @@ function El(e, t, i, s, n, l) {
     appear: "",
     onAfterLeave: l.onClose
   }, {
-    default: f(() => [
+    default: m(() => [
       i.modelValue ? F((o(), u("div", {
         key: 0,
-        class: m(["w-overlay", l.classes]),
+        class: f(["w-overlay", l.classes]),
         ref: "overlay",
         style: x(i.modelValue && l.styles || null),
         onKeydown: t[0] || (t[0] = N(A((...r) => l.onClick && l.onClick(...r), ["stop"]), ["escape"])),
@@ -4806,7 +4804,7 @@ const Nl = {
 }, Dl = /* @__PURE__ */ C(Nl, [["render", Kl]]), Hl = ["viewBox"], Fl = ["cx", "cy", "r", "stroke-dasharray", "stroke-width"], jl = ["cx", "cy", "r", "stroke-width", "stroke-linecap", "stroke-dasharray"];
 function Ul(e, t, i, s, n, l) {
   return o(), u("div", {
-    class: m(["w-progress", l.classes]),
+    class: f(["w-progress", l.classes]),
     style: x(l.styles)
   }, [
     i.circle ? (o(), u("svg", {
@@ -4815,7 +4813,7 @@ function Ul(e, t, i, s, n, l) {
     }, [
       i.bgColor || this.progressValue > -1 ? (o(), u("circle", {
         key: 0,
-        class: m(["bg", i.bgColor || null]),
+        class: f(["bg", i.bgColor || null]),
         cx: l.circleCenter,
         cy: l.circleCenter,
         r: e.circleRadius,
@@ -4836,12 +4834,12 @@ function Ul(e, t, i, s, n, l) {
       }, null, 12, jl)
     ], 8, Hl)) : (o(), u("div", {
       key: 0,
-      class: m(["w-progress__progress", { full: l.progressValue === 100 }]),
+      class: f(["w-progress__progress", { full: l.progressValue === 100 }]),
       style: x(`width: ${l.progressValue}%`)
     }, null, 6)),
     i.label || e.$slots.default ? (o(), u("div", {
       key: 2,
-      class: m(["w-progress__label", i.labelColor || !1])
+      class: f(["w-progress__label", i.labelColor || !1])
     }, [
       c(e.$slots, "default", {}, () => [
         _(S(Math.round(l.progressValue)) + S(i.circle ? "" : "%"), 1)
@@ -4928,7 +4926,7 @@ function is(e, t, i, s, n, l) {
     }),
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       k("input", {
         ref: "input",
         id: `w-radio--${e._.uid}`,
@@ -4946,7 +4944,7 @@ function is(e, t, i, s, n, l) {
       l.hasLabel && i.labelOnLeft ? (o(), u(v, { key: 0 }, [
         e.$slots.default ? (o(), u("label", {
           key: 0,
-          class: m(["w-radio__label w-form-el-shakable pr2", e.labelClasses]),
+          class: f(["w-radio__label w-form-el-shakable pr2", e.labelClasses]),
           for: `w-radio--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -4954,13 +4952,13 @@ function is(e, t, i, s, n, l) {
           ])
         ], 10, Ql)) : i.label ? (o(), u("label", {
           key: 1,
-          class: m(["w-radio__label w-form-el-shakable pr2", e.labelClasses]),
+          class: f(["w-radio__label w-form-el-shakable pr2", e.labelClasses]),
           for: `w-radio--${e._.uid}`,
           innerHTML: i.label
         }, null, 10, Zl)) : p("", !0)
       ], 64)) : p("", !0),
       k("div", {
-        class: m(["w-radio__input", this.color]),
+        class: f(["w-radio__input", this.color]),
         onClick: t[2] || (t[2] = (a) => {
           e.$refs.input.focus(), e.$refs.input.click();
         })
@@ -4968,7 +4966,7 @@ function is(e, t, i, s, n, l) {
       l.hasLabel && !i.labelOnLeft ? (o(), u(v, { key: 1 }, [
         e.$slots.default ? (o(), u("label", {
           key: 0,
-          class: m(["w-radio__label w-form-el-shakable pl2", e.labelClasses]),
+          class: f(["w-radio__label w-form-el-shakable pl2", e.labelClasses]),
           for: `w-radio--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -4976,7 +4974,7 @@ function is(e, t, i, s, n, l) {
           ])
         ], 10, es)) : i.label ? (o(), u("label", {
           key: 1,
-          class: m(["w-radio__label w-form-el-shakable pl2", e.labelClasses]),
+          class: f(["w-radio__label w-form-el-shakable pl2", e.labelClasses]),
           for: `w-radio--${e._.uid}`,
           innerHTML: i.label
         }, null, 10, ts)) : p("", !0)
@@ -5063,20 +5061,19 @@ function as(e, t, i, s, n, l) {
     wrap: i.inline,
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       (o(!0), u(v, null, O(l.radioItems, (r, d) => (o(), b(a, $({
         key: d,
         "model-value": r.value === i.modelValue,
         "onUpdate:modelValue": (h) => l.onInput(r),
         onFocus: t[0] || (t[0] = (h) => e.$emit("focus", h)),
-        name: e.inputName,
-        ref_for: !0
-      }, { label: r.label, color: r.color, labelOnLeft: i.labelOnLeft, labelColor: i.labelColor }, {
+        name: e.inputName
+      }, { ref_for: !0 }, { label: r.label, color: r.color, labelOnLeft: i.labelOnLeft, labelColor: i.labelColor }, {
         disabled: e.isDisabled || null,
         readonly: e.isReadonly || null,
         class: { mt1: !i.inline && d }
       }), {
-        default: f(() => [
+        default: m(() => [
           e.$slots[`item.${d + 1}`] || e.$slots.item ? c(e.$slots, e.$slots[`item.${d + 1}`] ? `item.${d + 1}` : "item", {
             key: 0,
             item: l.getOriginalItem(r),
@@ -5157,7 +5154,7 @@ function hs(e, t, i, s, n, l) {
     }),
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       k("input", {
         id: e.inputName,
         name: e.inputName,
@@ -5170,7 +5167,7 @@ function hs(e, t, i, s, n, l) {
           index: a + 1
         }) : p("", !0),
         k("button", {
-          class: m(["w-rating__button", l.buttonClasses(a)]),
+          class: f(["w-rating__button", l.buttonClasses(a)]),
           disabled: e.isDisabled || e.isReadonly,
           onMouseenter: (r) => n.hover = a,
           onMouseleave: t[0] || (t[0] = (r) => n.hover = 0),
@@ -5183,7 +5180,7 @@ function hs(e, t, i, s, n, l) {
         }, [
           a - 1 === ~~n.rating && n.rating - ~~n.rating ? (o(), u("i", {
             key: 0,
-            class: m(["w-icon", `${i.icon} ${i.color}`]),
+            class: f(["w-icon", `${i.icon} ${i.color}`]),
             role: "icon",
             "aria-hidden": "true",
             style: x(l.halfStarStyle)
@@ -5288,7 +5285,7 @@ const cs = {
       this.rating = parseFloat(e);
     }
   }
-}, ps = /* @__PURE__ */ C(cs, [["render", hs]]), ms = /* @__PURE__ */ Object.assign({ name: "WScrollable" }, {
+}, ps = /* @__PURE__ */ C(cs, [["render", hs]]), fs = /* @__PURE__ */ Object.assign({ name: "WScrollable" }, {
   __name: "w-scrollable",
   props: {
     color: { type: String, default: "primary" },
@@ -5399,7 +5396,7 @@ const cs = {
         c(T.$slots, "default")
       ], 512),
       k("div", {
-        class: m(["w-scrollable__scrollbar", E.value]),
+        class: f(["w-scrollable__scrollbar", E.value]),
         ref_key: "trackEl",
         ref: r,
         onMousedown: Ke
@@ -5413,7 +5410,7 @@ const cs = {
       ], 34)
     ], 16));
   }
-}), fs = ["aria-expanded", "aria-owns", "aria-activedescendant"], gs = {
+}), ms = ["aria-expanded", "aria-owns", "aria-activedescendant"], gs = {
   key: 0,
   class: "w-select__selection-slot"
 }, bs = ["innerHTML"], ys = ["value", "name"];
@@ -5426,11 +5423,11 @@ function ws(e, t, i, s, n, l) {
     wrap: l.hasLabel && i.labelPosition !== "inside",
     class: l.classes
   }), {
-    default: f(() => [
+    default: m(() => [
       i.labelPosition === "left" ? (o(), u(v, { key: 0 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-select__label w-select__label--left w-form-el-shakable", e.labelClasses]),
+          class: f(["w-select__label w-select__label--left w-form-el-shakable", e.labelClasses]),
           onClick: t[0] || (t[0] = (h) => e.$refs["selection-input"].click())
         }, [
           c(e.$slots, "default", {}, () => [
@@ -5449,9 +5446,9 @@ function ws(e, t, i, s, n, l) {
         custom: "",
         "min-width": "activator"
       }, i.menuProps || {}), {
-        activator: f(() => [
+        activator: m(() => [
           k("div", {
-            class: m(["w-select__selection-wrap", l.inputWrapClasses]),
+            class: f(["w-select__selection-wrap", l.inputWrapClasses]),
             onClick: t[6] || (t[6] = (h) => !e.isDisabled && !e.isReadonly && l.onInputFieldClick()),
             role: "button",
             "aria-haspopup": "listbox",
@@ -5466,7 +5463,7 @@ function ws(e, t, i, s, n, l) {
                 tag: "label",
                 onClick: t[1] || (t[1] = (h) => e.$emit("click:inner-icon-left", h))
               }, {
-                default: f(() => [
+                default: m(() => [
                   _(S(i.innerIconLeft), 1)
                 ]),
                 _: 1
@@ -5493,7 +5490,7 @@ function ws(e, t, i, s, n, l) {
             i.labelPosition === "inside" && l.showLabelInside ? (o(), u(v, { key: 1 }, [
               e.$slots.default || i.label ? (o(), u("label", {
                 key: 0,
-                class: m(["w-select__label w-select__label--inside w-form-el-shakable", e.labelClasses])
+                class: f(["w-select__label w-select__label--inside w-form-el-shakable", e.labelClasses])
               }, [
                 c(e.$slots, "default", {}, () => [
                   _(S(i.label), 1)
@@ -5507,15 +5504,15 @@ function ws(e, t, i, s, n, l) {
                 tag: "label",
                 onClick: t[5] || (t[5] = (h) => e.$emit("click:inner-icon-right", h))
               }, {
-                default: f(() => [
+                default: m(() => [
                   _(S(i.innerIconRight), 1)
                 ]),
                 _: 1
               })) : p("", !0)
             ])
-          ], 10, fs)
+          ], 10, ms)
         ]),
-        default: f(() => [
+        default: m(() => [
           L(r, {
             ref: "w-list",
             "model-value": e.inputValue,
@@ -5538,7 +5535,7 @@ function ws(e, t, i, s, n, l) {
           }, ne({ _: 2 }, [
             O(i.items.length, (h) => ({
               name: `item.${h}`,
-              fn: f(({ item: y, selected: w, index: g }) => [
+              fn: m(({ item: y, selected: w, index: g }) => [
                 e.$slots[`item.${h}`] && e.$slots[`item.${h}`](y, w, g) ? c(e.$slots, `item.${h}`, {
                   key: 0,
                   item: y,
@@ -5563,7 +5560,7 @@ function ws(e, t, i, s, n, l) {
       i.labelPosition === "right" ? (o(), u(v, { key: 1 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-select__label w-select__label--right w-form-el-shakable", e.labelClasses]),
+          class: f(["w-select__label w-select__label--right w-form-el-shakable", e.labelClasses]),
           onClick: t[11] || (t[11] = (h) => e.$refs["selection-input"].click())
         }, [
           c(e.$slots, "default", {}, () => [
@@ -5819,22 +5816,22 @@ function Os(e, t, i, s, n, l) {
     wrap: e.formRegister || null,
     class: l.wrapperClasses
   }), {
-    default: f(() => [
+    default: m(() => [
       e.$slots["label-left"] ? (o(), u("label", {
         key: 0,
-        class: m(["w-slider__label w-slider__label--left w-form-el-shakable", e.labelClasses]),
+        class: f(["w-slider__label w-slider__label--left w-form-el-shakable", e.labelClasses]),
         for: `button--${e._.uid}`
       }, [
         c(e.$slots, "label-left")
       ], 10, Cs)) : i.labelLeft ? (o(), u("label", {
         key: 1,
-        class: m(["w-slider__label w-slider__label--left w-form-el-shakable", e.labelClasses]),
+        class: f(["w-slider__label w-slider__label--left w-form-el-shakable", e.labelClasses]),
         for: `button--${e._.uid}`,
         innerHTML: i.labelLeft
       }, null, 10, Ss)) : p("", !0),
       k("div", Bs, [
         k("div", {
-          class: m(["w-slider__track", l.trackClasses]),
+          class: f(["w-slider__track", l.trackClasses]),
           ref: "track",
           onMousedown: t[4] || (t[4] = (...a) => l.onTrackMouseDown && l.onTrackMouseDown(...a)),
           onTouchstart: t[5] || (t[5] = (...a) => l.onTrackMouseDown && l.onTrackMouseDown(...a)),
@@ -5847,7 +5844,7 @@ function Os(e, t, i, s, n, l) {
           "aria-orientation": "horizontal"
         }, [
           k("div", {
-            class: m(["w-slider__range", l.rangeClasses]),
+            class: f(["w-slider__range", l.rangeClasses]),
             style: x(l.rangeStyles)
           }, null, 6),
           k("div", {
@@ -5855,7 +5852,7 @@ function Os(e, t, i, s, n, l) {
             style: x(l.thumbStyles)
           }, [
             k("button", {
-              class: m(["w-slider__thumb-button", [i.color]]),
+              class: f(["w-slider__thumb-button", [i.color]]),
               ref: "thumb",
               id: `button--${e._.uid}`,
               name: e.inputName,
@@ -5874,7 +5871,7 @@ function Os(e, t, i, s, n, l) {
             }, null, 42, $s),
             i.thumbLabel ? (o(), u("label", {
               key: 0,
-              class: m(["w-slider__thumb-label", l.thumbClasses]),
+              class: f(["w-slider__thumb-label", l.thumbClasses]),
               for: `button--${e._.uid}`
             }, [
               i.thumbLabel === "droplet" ? (o(), u("div", Vs, [
@@ -5911,13 +5908,13 @@ function Os(e, t, i, s, n, l) {
       ]),
       e.$slots["label-right"] ? (o(), u("label", {
         key: 2,
-        class: m(["w-slider__label w-slider__label--right w-form-el-shakable", e.labelClasses]),
+        class: f(["w-slider__label w-slider__label--right w-form-el-shakable", e.labelClasses]),
         for: `button--${e._.uid}`
       }, [
         c(e.$slots, "label-right")
       ], 10, Rs)) : i.labelRight ? (o(), u("label", {
         key: 3,
-        class: m(["w-slider__label w-slider__label--right w-form-el-shakable", e.labelClasses]),
+        class: f(["w-slider__label w-slider__label--right w-form-el-shakable", e.labelClasses]),
         for: `button--${e._.uid}`,
         innerHTML: i.labelRight
       }, null, 10, xs)) : p("", !0)
@@ -6066,7 +6063,7 @@ const Ps = {
 function Ms(e, t, i, s, n, l) {
   return i.modelValue || i.modelValue === void 0 ? (o(), u("div", {
     key: 0,
-    class: m(["w-spinner", l.classes]),
+    class: f(["w-spinner", l.classes]),
     style: x(l.styles)
   }, [
     l.isThreeDots ? (o(), u("span", Es)) : p("", !0)
@@ -6113,7 +6110,7 @@ const As = {
 }, Ws = /* @__PURE__ */ C(As, [["render", Ms]]);
 function Ks(e, t, i, s, n, l) {
   return o(), u("div", {
-    class: m(["w-steps", l.classes])
+    class: f(["w-steps", l.classes])
   }, null, 2);
 }
 const Ns = {
@@ -6150,7 +6147,7 @@ function Xs(e, t, i, s, n, l) {
     class: l.classes,
     style: e.$attrs.style
   }), {
-    default: f(() => [
+    default: m(() => [
       k("input", $({
         ref: "input",
         id: `w-switch--${e._.uid}`,
@@ -6171,7 +6168,7 @@ function Xs(e, t, i, s, n, l) {
       l.hasLabel && i.labelOnLeft ? (o(), u(v, { key: 0 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-switch__label w-switch__label--left w-form-el-shakable", e.labelClasses]),
+          class: f(["w-switch__label w-switch__label--left w-form-el-shakable", e.labelClasses]),
           for: `w-switch--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -6180,7 +6177,7 @@ function Xs(e, t, i, s, n, l) {
         ], 10, Fs)) : p("", !0)
       ], 64)) : p("", !0),
       k("div", {
-        class: m(["w-switch__input", l.inputClasses]),
+        class: f(["w-switch__input", l.inputClasses]),
         onClick: t[2] || (t[2] = (r) => {
           e.$refs.input.focus(), e.$refs.input.click();
         })
@@ -6199,7 +6196,7 @@ function Xs(e, t, i, s, n, l) {
       l.hasLabel && !i.labelOnLeft ? (o(), u(v, { key: 1 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-switch__label w-switch__label--right w-form-el-shakable", e.labelClasses]),
+          class: f(["w-switch__label w-switch__label--right w-form-el-shakable", e.labelClasses]),
           for: `w-switch--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -6307,14 +6304,14 @@ const Zs = {
 function no(e, t, i, s, n, l) {
   const a = V("tab-content");
   return o(), u("div", {
-    class: m(["w-tabs", l.tabsClasses])
+    class: f(["w-tabs", l.tabsClasses])
   }, [
     k("div", {
-      class: m(["w-tabs__bar", l.tabsBarClasses]),
+      class: f(["w-tabs__bar", l.tabsBarClasses]),
       ref: "tabs-bar"
     }, [
       (o(!0), u(v, null, O(e.tabs, (r, d) => (o(), u("div", {
-        class: m(["w-tabs__bar-item", l.barItemClasses(r)]),
+        class: f(["w-tabs__bar-item", l.barItemClasses(r)]),
         key: d,
         onClick: (h) => !r._disabled && r._uid !== e.activeTabUid && l.openTab(r._uid),
         onFocus: (h) => e.$emit("focus", l.getOriginalItem(r)),
@@ -6344,22 +6341,22 @@ function no(e, t, i, s, n, l) {
       ])) : p("", !0),
       !i.noSlider && !i.card ? (o(), u("div", {
         key: 1,
-        class: m(["w-tabs__slider", i.sliderColor]),
+        class: f(["w-tabs__slider", i.sliderColor]),
         style: x(l.sliderStyles)
       }, null, 6)) : p("", !0)
     ], 2),
     e.tabs.length ? (o(), u("div", so, [
-      i.keepInDom ? (o(), b(fe, {
+      i.keepInDom ? (o(), b(me, {
         key: 0,
         name: l.transitionName
       }, {
-        default: f(() => [
+        default: m(() => [
           (o(!0), u(v, null, O(e.tabs, (r, d) => F((o(), b(a, {
             key: r._uid,
             item: r,
-            class: m(l.contentClasses)
+            class: f(l.contentClasses)
           }, {
-            default: f(() => [
+            default: m(() => [
               e.$slots[`item-content.${r._index + 1}`] ? c(e.$slots, `item-content.${r._index + 1}`, {
                 key: 0,
                 item: l.getOriginalItem(r),
@@ -6388,16 +6385,16 @@ function no(e, t, i, s, n, l) {
         name: l.transitionName,
         mode: l.transitionMode
       }, {
-        default: f(() => [
+        default: m(() => [
           (o(), b(lt, {
             exclude: i.keepAlive ? "" : "tab-content"
           }, [
             (o(), b(a, {
               key: e.activeTabUid,
               item: l.activeTab,
-              class: m(i.contentClass)
+              class: f(i.contentClass)
             }, {
-              default: f(({ item: r }) => [
+              default: m(({ item: r }) => [
                 r ? (o(), u(v, { key: 0 }, [
                   e.$slots[`item-content.${r._index + 1}`] ? c(e.$slots, `item-content.${r._index + 1}`, {
                     key: 0,
@@ -6606,7 +6603,7 @@ const ro = {
       e ? window.removeEventListener("resize", this.onResize) : (this.updateSlider(), window.addEventListener("resize", this.onResize));
     }
   }
-}, uo = /* @__PURE__ */ C(ro, [["render", no]]), ho = { class: "w-table__scroll-wrap" }, co = { ref: "colgroup" }, po = ["width"], mo = { key: 0 }, fo = ["onClick"], go = ["innerHTML"], bo = {
+}, uo = /* @__PURE__ */ C(ro, [["render", no]]), ho = { class: "w-table__scroll-wrap" }, co = { ref: "colgroup" }, po = ["width"], fo = { key: 0 }, mo = ["onClick"], go = ["innerHTML"], bo = {
   key: 0,
   class: "w-table__progress-bar"
 }, yo = ["colspan"], wo = {
@@ -6634,7 +6631,7 @@ const ro = {
 function Ao(e, t, i, s, n, l) {
   const a = V("w-icon"), r = V("w-progress"), d = V("w-transition-fade"), h = V("w-transition-expand"), y = V("w-select"), w = V("w-button");
   return o(), u("div", {
-    class: m(["w-table w-table--wrap", l.classes])
+    class: f(["w-table w-table--wrap", l.classes])
   }, [
     k("div", ho, [
       k("table", {
@@ -6645,26 +6642,27 @@ function Ao(e, t, i, s, n, l) {
       }, [
         k("colgroup", co, [
           (o(!0), u(v, null, O(i.headers, (g, B) => (o(), u("col", {
-            class: m(["w-table__col", l.colClasses[B]]),
+            class: f(["w-table__col", l.colClasses[B]]),
             key: B,
             width: g.width || null
           }, null, 10, po))), 128))
         ], 512),
-        i.noHeaders ? p("", !0) : (o(), u("thead", mo, [
+        i.noHeaders ? p("", !0) : (o(), u("thead", fo, [
           k("tr", null, [
             (o(!0), u(v, null, O(i.headers, (g, B) => (o(), u("th", {
-              class: m(["w-table__header", l.headerClasses(g)]),
+              class: f(["w-table__header", l.headerClasses(g)]),
               key: B,
               onClick: (I) => !e.colResizing.dragging && g.sortable !== !1 && l.sortTable(g)
             }, [
               g.sortable !== !1 && g.align === "right" ? (o(), b(a, {
                 key: 0,
-                class: m(["w-table__header-sort", l.headerSortClasses(g)])
+                class: f(["w-table__header-sort", l.headerSortClasses(g)])
               }, {
-                default: f(() => t[8] || (t[8] = [
+                default: m(() => t[8] || (t[8] = [
                   _("wi-arrow-down")
                 ])),
-                _: 2
+                _: 2,
+                __: [8]
               }, 1032, ["class"])) : p("", !0),
               g.label ? (o(), u(v, { key: 1 }, [
                 e.$slots["header-label"] ? c(e.$slots, "header-label", {
@@ -6681,23 +6679,24 @@ function Ao(e, t, i, s, n, l) {
               ], 64)) : p("", !0),
               g.sortable !== !1 && g.align !== "right" ? (o(), b(a, {
                 key: 2,
-                class: m(["w-table__header-sort", l.headerSortClasses(g)])
+                class: f(["w-table__header-sort", l.headerSortClasses(g)])
               }, {
-                default: f(() => t[9] || (t[9] = [
+                default: m(() => t[9] || (t[9] = [
                   _("wi-arrow-down")
                 ])),
-                _: 2
+                _: 2,
+                __: [9]
               }, 1032, ["class"])) : p("", !0),
               B < i.headers.length - 1 && i.resizableColumns ? (o(), u("span", {
                 key: 3,
-                class: m(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === B, "w-table__col-resizer--active": e.colResizing.columnIndex === B }]),
+                class: f(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === B, "w-table__col-resizer--active": e.colResizing.columnIndex === B }]),
                 onClick: t[0] || (t[0] = A(() => {
                 }, ["stop"]))
               }, null, 2)) : p("", !0)
-            ], 10, fo))), 128))
+            ], 10, mo))), 128))
           ]),
           L(d, null, {
-            default: f(() => [
+            default: m(() => [
               i.loading === "header" ? (o(), u("tr", bo, [
                 k("td", {
                   colspan: i.headers.length
@@ -6740,12 +6739,12 @@ function Ao(e, t, i, s, n, l) {
               classes: { "w-table__row": !0, "w-table__row--selected": l.selectedRowsByUid[g._uid] !== void 0, "w-table__row--expanded": l.expandedRowsByUid[g._uid] !== void 0 }
             }) : (o(), u("tr", {
               key: 1,
-              class: m(["w-table__row", { "w-table__row--selected": l.selectedRowsByUid[g._uid] !== void 0, "w-table__row--expanded": l.expandedRowsByUid[g._uid] !== void 0 }]),
+              class: f(["w-table__row", { "w-table__row--selected": l.selectedRowsByUid[g._uid] !== void 0, "w-table__row--expanded": l.expandedRowsByUid[g._uid] !== void 0, [g.class]: g.class }]),
               onClick: (I) => l.doSelectRow(g, B)
             }, [
               (o(!0), u(v, null, O(i.headers, (I, E) => (o(), u(v, null, [
                 e.$slots[`item-cell.${I.key}`] || e.$slots[`item-cell.${E + 1}`] || e.$slots["item-cell"] ? (o(), u("td", {
-                  class: m(["w-table__cell", { [`text-${I.align || "left"}`]: !0, "w-table__cell--sticky": I.sticky }]),
+                  class: f(["w-table__cell", { [`text-${I.align || "left"}`]: !0, "w-table__cell--sticky": I.sticky }]),
                   key: `${E}-a`,
                   "data-label": I.label
                 }, [
@@ -6770,10 +6769,10 @@ function Ao(e, t, i, s, n, l) {
                   }) : p("", !0),
                   E < i.headers.length - 1 && i.resizableColumns ? (o(), u("span", {
                     key: 3,
-                    class: m(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === E, "w-table__col-resizer--active": e.colResizing.columnIndex === E }])
+                    class: f(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === E, "w-table__col-resizer--active": e.colResizing.columnIndex === E }])
                   }, null, 2)) : p("", !0)
                 ], 10, _o)) : (o(), u("td", {
-                  class: m(["w-table__cell", { [`text-${I.align || "left"}`]: !0, "w-table__cell--sticky": I.sticky }]),
+                  class: f(["w-table__cell", { [`text-${I.align || "left"}`]: !0, "w-table__cell--sticky": I.sticky }]),
                   key: `${E}-b`,
                   "data-label": I.label
                 }, [
@@ -6782,7 +6781,7 @@ function Ao(e, t, i, s, n, l) {
                   }, null, 8, Io),
                   E < i.headers.length - 1 && i.resizableColumns ? (o(), u("span", {
                     key: 0,
-                    class: m(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === E, "w-table__col-resizer--active": e.colResizing.columnIndex === E }])
+                    class: f(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === E, "w-table__col-resizer--active": e.colResizing.columnIndex === E }])
                   }, null, 2)) : p("", !0)
                 ], 10, $o))
               ], 64))), 256))
@@ -6793,7 +6792,7 @@ function Ao(e, t, i, s, n, l) {
                 colspan: i.headers.length
               }, [
                 L(h, { y: "" }, {
-                  default: f(() => [
+                  default: m(() => [
                     l.expandedRowsByUid[g._uid] ? (o(), u("div", Lo, [
                       c(e.$slots, "row-expansion", {
                         item: g,
@@ -6802,7 +6801,7 @@ function Ao(e, t, i, s, n, l) {
                     ])) : p("", !0),
                     B < i.headers.length - 1 && i.resizableColumns ? (o(), u("span", {
                       key: 1,
-                      class: m(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === B, "w-table__col-resizer--active": e.colResizing.columnIndex === e.j }])
+                      class: f(["w-table__col-resizer", { "w-table__col-resizer--hover": e.colResizing.hover === B, "w-table__col-resizer--active": e.colResizing.columnIndex === e.j }])
                     }, null, 2)) : p("", !0)
                   ]),
                   _: 2
@@ -6857,35 +6856,36 @@ function Ao(e, t, i, s, n, l) {
           e.paginationConfig.pagesCount > 7 ? (o(!0), u(v, { key: 0 }, O(e.paginationConfig.pagesCount, (g) => (o(), u(v, { key: g }, [
             [1, e.paginationConfig.pagesCount, e.paginationConfig.page - 1, e.paginationConfig.page, e.paginationConfig.page + 1].includes(g) ? (o(), b(w, {
               key: 0,
-              class: m(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
+              class: f(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
               onClick: (B) => g !== e.paginationConfig.page && l.goToPage(g),
               round: "",
               lg: ""
             }, {
-              default: f(() => [
+              default: m(() => [
                 _(S(g), 1)
               ]),
               _: 2
             }, 1032, ["onClick", "class"])) : [1, e.paginationConfig.pagesCount, e.paginationConfig.page - 1, e.paginationConfig.page, e.paginationConfig.page + 1].includes(g - 1) ? (o(), b(w, {
               key: 1,
-              class: m(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
+              class: f(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
               onClick: (B) => g !== e.paginationConfig.page && l.goToPage(g),
               round: "",
               lg: ""
             }, {
-              default: f(() => t[12] || (t[12] = [
+              default: m(() => t[12] || (t[12] = [
                 _("...")
               ])),
-              _: 2
+              _: 2,
+              __: [12]
             }, 1032, ["onClick", "class"])) : p("", !0)
           ], 64))), 128)) : (o(!0), u(v, { key: 1 }, O(e.paginationConfig.pagesCount, (g) => (o(), b(w, {
-            class: m(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
+            class: f(["w-pagination__page", { "w-pagination__page--active": g === e.paginationConfig.page }]),
             key: g,
             onClick: (B) => g !== e.paginationConfig.page && l.goToPage(g),
             round: "",
             lg: ""
           }, {
-            default: f(() => [
+            default: m(() => [
               _(S(g), 1)
             ]),
             _: 2
@@ -7230,7 +7230,7 @@ const Re = 15, Wo = {
 }, Ko = /* @__PURE__ */ C(Wo, [["render", Ao]]), No = ["role", "aria-pressed", "tabindex"];
 function Do(e, t, i, s, n, l) {
   return o(), u("span", {
-    class: m(["w-tag", l.classes]),
+    class: f(["w-tag", l.classes]),
     onClick: t[1] || (t[1] = (a) => {
       e.$emit("update:modelValue", !i.modelValue), e.$emit("input", !i.modelValue);
     }),
@@ -7316,11 +7316,11 @@ function Xo(e, t, i, s, n, l) {
     class: l.classes,
     style: e.$attrs.style
   }), {
-    default: f(() => [
+    default: m(() => [
       i.labelPosition === "left" ? (o(), u(v, { key: 0 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-textarea__label w-textarea__label--left w-form-el-shakable", e.labelClasses]),
+          class: f(["w-textarea__label w-textarea__label--left w-form-el-shakable", e.labelClasses]),
           for: `w-textarea--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -7329,7 +7329,7 @@ function Xo(e, t, i, s, n, l) {
         ], 10, jo)) : p("", !0)
       ], 64)) : p("", !0),
       k("div", {
-        class: m(["w-textarea__textarea-wrap", l.inputWrapClasses])
+        class: f(["w-textarea__textarea-wrap", l.inputWrapClasses])
       }, [
         c(e.$slots, "icon-left", {
           inputId: `w-textarea--${e._.uid}`
@@ -7341,7 +7341,7 @@ function Xo(e, t, i, s, n, l) {
             for: `w-textarea--${e._.uid}`,
             onClick: t[0] || (t[0] = (r) => e.$emit("click:inner-icon-left", r))
           }, {
-            default: f(() => [
+            default: m(() => [
               _(S(i.innerIconLeft), 1)
             ]),
             _: 1
@@ -7371,7 +7371,7 @@ function Xo(e, t, i, s, n, l) {
         i.labelPosition === "inside" && l.showLabelInside ? (o(), u(v, { key: 0 }, [
           e.$slots.default || i.label ? (o(), u("label", {
             key: 0,
-            class: m(["w-textarea__label w-textarea__label--inside w-form-el-shakable", e.labelClasses])
+            class: f(["w-textarea__label w-textarea__label--inside w-form-el-shakable", e.labelClasses])
           }, [
             c(e.$slots, "default", {}, () => [
               _(S(i.label), 1)
@@ -7388,7 +7388,7 @@ function Xo(e, t, i, s, n, l) {
             for: `w-textarea--${e._.uid}`,
             onClick: t[5] || (t[5] = (r) => e.$emit("click:inner-icon-right", r))
           }, {
-            default: f(() => [
+            default: m(() => [
               _(S(i.innerIconRight), 1)
             ]),
             _: 1
@@ -7398,7 +7398,7 @@ function Xo(e, t, i, s, n, l) {
       i.labelPosition === "right" ? (o(), u(v, { key: 1 }, [
         e.$slots.default || i.label ? (o(), u("label", {
           key: 0,
-          class: m(["w-textarea__label w-textarea__label--right w-form-el-shakable", e.labelClasses]),
+          class: f(["w-textarea__label w-textarea__label--right w-form-el-shakable", e.labelClasses]),
           for: `w-textarea--${e._.uid}`
         }, [
           c(e.$slots, "default", {}, () => [
@@ -7539,16 +7539,16 @@ const Yo = {
 }, Go = /* @__PURE__ */ C(Yo, [["render", Xo]]), Jo = ["innerHTML"], Qo = ["innerHTML"];
 function Zo(e, t, i, s, n, l) {
   return o(), u("ul", {
-    class: m(["w-timeline", l.classes])
+    class: f(["w-timeline", l.classes])
   }, [
     (o(!0), u(v, null, O(i.items, (a, r) => (o(), u("li", {
       class: "w-timeline-item",
       key: r
     }, [
       (o(), b(R(a[i.itemIconKey] || i.icon ? "w-icon" : "div"), {
-        class: m(["w-timeline-item__bullet", { [a[i.itemColorKey] || i.color]: a[i.itemColorKey] || i.color }])
+        class: f(["w-timeline-item__bullet", { [a[i.itemColorKey] || i.color]: a[i.itemColorKey] || i.color }])
       }, {
-        default: f(() => [
+        default: m(() => [
           _(S(a[i.itemIconKey] || i.icon), 1)
         ]),
         _: 2
@@ -7563,7 +7563,7 @@ function Zo(e, t, i, s, n, l) {
         index: r + 1
       }, () => [
         k("div", {
-          class: m(["w-timeline-item__title", { [a[i.itemColorKey] || i.color]: a[i.itemColorKey] || i.color }]),
+          class: f(["w-timeline-item__title", { [a[i.itemColorKey] || i.color]: a[i.itemColorKey] || i.color }]),
           innerHTML: a[i.itemTitleKey]
         }, null, 10, Jo),
         k("div", {
@@ -7599,7 +7599,7 @@ const ea = {
 }, ta = /* @__PURE__ */ C(ea, [["render", Zo]]);
 function ia(e, t, i, s, n, l) {
   return o(), u("div", {
-    class: m(["w-toolbar", l.classes]),
+    class: f(["w-toolbar", l.classes]),
     style: x(l.styles)
   }, [
     c(e.$slots, "default")
@@ -7664,9 +7664,9 @@ function oa(e, t, i, s, n, l) {
       name: l.transitionName,
       appear: ""
     }, {
-      default: f(() => [
+      default: m(() => [
         e.detachableVisible ? (o(), u("div", {
-          class: m(["w-tooltip", l.classes]),
+          class: f(["w-tooltip", l.classes]),
           ref: "detachable",
           key: e._.uid,
           style: x(l.styles)
@@ -7817,7 +7817,7 @@ const aa = {
 }, na = /* @__PURE__ */ C(aa, [["render", oa]]);
 function ra(e, t, i, s, n, l) {
   return o(), b(P, $({ name: "bounce" }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -7845,7 +7845,7 @@ function ha(e, t, i, s, n, l) {
     onLeave: l.leave,
     onAfterLeave: l.afterLeave
   }, {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -7942,24 +7942,24 @@ const ca = {
     }
   }
 }, pa = /* @__PURE__ */ C(ca, [["render", ha]]);
-function ma(e, t, i, s, n, l) {
+function fa(e, t, i, s, n, l) {
   return o(), b(P, $({ name: "fade" }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
   }, 16);
 }
-const fa = {
+const ma = {
   name: "w-transition-fade",
   props: {
     appear: { type: Boolean },
     duration: { type: [Number, String] }
   }
-}, ga = /* @__PURE__ */ C(fa, [["render", ma]]);
+}, ga = /* @__PURE__ */ C(ma, [["render", fa]]);
 function ba(e, t, i, s, n, l) {
   return o(), b(P, $({ name: "scale" }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -7974,7 +7974,7 @@ const ya = {
 }, wa = /* @__PURE__ */ C(ya, [["render", ba]]);
 function ka(e, t, i, s, n, l) {
   return o(), b(P, $({ name: "scale-fade" }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -7989,7 +7989,7 @@ const va = {
 }, Ca = /* @__PURE__ */ C(va, [["render", ka]]);
 function Sa(e, t, i, s, n, l) {
   return o(), b(P, $({ name: l.transitionName }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -8016,7 +8016,7 @@ const Ba = {
 }, _a = /* @__PURE__ */ C(Ba, [["render", Sa]]);
 function $a(e, t, i, s, n, l) {
   return o(), b(P, $({ name: l.transitionName }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -8043,7 +8043,7 @@ const Ia = {
 }, Va = /* @__PURE__ */ C(Ia, [["render", $a]]);
 function Ta(e, t, i, s, n, l) {
   return o(), b(P, $({ name: "twist" }, e.$props), {
-    default: f(() => [
+    default: m(() => [
       c(e.$slots, "default")
     ]),
     _: 3
@@ -8062,21 +8062,18 @@ const La = {
 function Pa(e, t, i, s, n, l) {
   const a = V("w-button"), r = V("w-icon"), d = V("w-tree", !0);
   return o(), u("ul", {
-    class: m(["w-tree", l.classes])
+    class: f(["w-tree", l.classes])
   }, [
     (o(!0), u(v, null, O(e.currentDepthItems, (h, y) => (o(), u("li", {
-      class: m(["w-tree__item", l.itemClasses(h)]),
+      class: f(["w-tree__item", l.itemClasses(h)]),
       key: y
     }, [
-      (o(), b(R(l.getTreeItemComponent(h)), $({
-        class: "w-tree__item-label",
-        ref_for: !0
-      }, h.route && { [!e.$router || l.hasExternalLink(h) ? "href" : "to"]: h.route }, {
+      (o(), b(R(l.getTreeItemComponent(h)), $({ class: "w-tree__item-label" }, { ref_for: !0 }, h.route && { [!e.$router || l.hasExternalLink(h) ? "href" : "to"]: h.route }, {
         onClick: (w) => !i.disabled && !h.disabled && l.onLabelClick(h, w),
         onKeydown: (w) => !i.disabled && !h.disabled && l.onLabelKeydown(h, w),
         tabindex: l.getTreeItemTabindex(h)
       }), {
-        default: f(() => [
+        default: m(() => [
           (h.children || h.branch) && (i.expandOpenIcon && h.open || i.expandIcon) && !(i.unexpandableEmpty && !h.children) ? (o(), b(a, {
             key: 0,
             class: "w-tree__item-expand",
@@ -8102,7 +8099,7 @@ function Pa(e, t, i, s, n, l) {
                 class: "w-tree__item-icon",
                 color: h.originalItem[i.itemIconColorKey] || i.iconColor
               }, {
-                default: f(() => [
+                default: m(() => [
                   _(S(l.itemIcon(h)), 1)
                 ]),
                 _: 2
@@ -8121,7 +8118,7 @@ function Pa(e, t, i, s, n, l) {
         onAfterEnter: (w) => e.$emit("open", l.emitPayload(h)),
         onAfterLeave: (w) => e.$emit("close", l.emitPayload(h))
       }, {
-        default: f(() => [
+        default: m(() => [
           h.children && h.open ? (o(), b(d, $({
             key: 0,
             ref_for: !0
@@ -8137,7 +8134,7 @@ function Pa(e, t, i, s, n, l) {
             onSelect: t[5] || (t[5] = (w) => e.$emit("select", w)),
             "onUpdate:modelValue": t[6] || (t[6] = (w) => e.$emit("update:model-value", w))
           }), {
-            item: f(({ item: w, depth: g, path: B, open: I }) => [
+            item: m(({ item: w, depth: g, path: B, open: I }) => [
               c(e.$slots, "item", {
                 item: w,
                 depth: g,
@@ -8360,7 +8357,7 @@ const za = {
   WAutocomplete: Xt,
   WBadge: ii,
   WBreadcrumbs: ai,
-  WButton: mi,
+  WButton: fi,
   WCard: yi,
   WCheckbox: $i,
   WCheckboxes: Li,
@@ -8374,7 +8371,7 @@ const za = {
   WFormElement: sl,
   WGrid: nl,
   WIcon: ul,
-  WImage: fl,
+  WImage: ml,
   WInput: $l,
   WList: Tl,
   WMenu: xl,
@@ -8385,7 +8382,7 @@ const za = {
   WRadio: ss,
   WRadios: rs,
   WRating: ps,
-  WScrollable: ms,
+  WScrollable: fs,
   WSelect: vs,
   WSlider: zs,
   WSpinner: Ws,