@lumx/vue 4.3.2-alpha.31 → 4.3.2-alpha.33

package/index.js

@@ -1,7 +1,7 @@
 import { ColorVariant as Sa, Theme as ka, AspectRatio as Pa, Size as Ta } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as l, mergeProps as h, defineComponent as y, useAttrs as k, isVNode as ee, inject as It, computed as T, unref as kt, provide as Vr, getCurrentScope as $a, onScopeDispose as Ca, watch as W, toValue as Et, shallowRef as _a, getCurrentInstance as Wr, onMounted as xa, ref as ie, useSlots as Lt, Fragment as G, useTemplateRef as wa, toRefs as Ia, reactive as Ea, createTextVNode as pe, onBeforeUnmount as La, nextTick as Oa, toRef as X } from "vue";
+import { createVNode as c, mergeProps as h, defineComponent as y, useAttrs as k, isVNode as ee, inject as It, computed as T, unref as kt, provide as Vr, getCurrentScope as $a, onScopeDispose as Ca, watch as W, toValue as Et, shallowRef as _a, getCurrentInstance as Wr, onMounted as xa, ref as ie, useSlots as Lt, Fragment as G, useTemplateRef as wa, toRefs as Ia, reactive as Ea, createTextVNode as pe, onBeforeUnmount as La, nextTick as Oa, toRef as X } from "vue";
 import { getDisabledState as Ba } from "@lumx/core/js/utils/disabledState";
 import { mdiAlertCircle as Ur } from "@lumx/icons/esm/alert-circle.js";
 import { classNames as Z } from "@lumx/core/js/utils";
@@ -156,7 +156,7 @@ const Xa = "Badge", Jr = "lumx-badge", {
     ref: n,
     ...o
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: n
   }, o, {
     className: A(r, Qa({
@@ -174,7 +174,7 @@ const S = () => (...e) => e.reduce(
   slots: t
 }) => {
   const r = k();
-  return () => l(Ae, h(e, r, {
+  return () => c(Ae, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -194,18 +194,18 @@ const S = () => (...e) => e.reduce(
     ref: n,
     ...o
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: n
   }, o, {
     className: A(a, en())
-  }), [r, t && l("div", {
+  }), [r, t && c("div", {
     className: tn("badge")
   }, [t])]);
 }, hi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(rn, h(e, r, {
+  return () => c(rn, h(e, r, {
     className: e.class,
     badge: e.badge || t.badge?.(),
     children: t.default?.()
@@ -289,11 +289,11 @@ function sn() {
     var i = r.call(s, n), u = s[n];
     try {
       s[n] = void 0;
-      var c = !0;
+      var l = !0;
     } catch {
     }
     var d = a.call(s);
-    return c && (i ? s[n] = u : delete s[n]), d;
+    return l && (i ? s[n] = u : delete s[n]), d;
   }
   return Re = o, Re;
 }
@@ -384,8 +384,8 @@ var Ve, ir;
 function dn() {
   if (ir) return Ve;
   ir = 1;
-  var e = ta(), t = un(), r = jt(), a = ra(), n = /[\\^$.*+?()[\]{}|]/g, o = /^\[object .+?Constructor\]$/, s = Function.prototype, i = Object.prototype, u = s.toString, c = i.hasOwnProperty, d = RegExp(
-    "^" + u.call(c).replace(n, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+  var e = ta(), t = un(), r = jt(), a = ra(), n = /[\\^$.*+?()[\]{}|]/g, o = /^\[object .+?Constructor\]$/, s = Function.prototype, i = Object.prototype, u = s.toString, l = i.hasOwnProperty, d = RegExp(
+    "^" + u.call(l).replace(n, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
   );
   function f(m) {
     if (!r(m) || t(m))
@@ -454,8 +454,8 @@ var Ze, pr;
 function vn() {
   if (pr) return Ze;
   pr = 1;
-  var e = mn(), t = hn(), r = pn(), a = bn(), n = gn(), o = le(), s = ra(), i = "[object Map]", u = "[object Object]", c = "[object Promise]", d = "[object Set]", f = "[object WeakMap]", m = "[object DataView]", p = s(e), g = s(t), b = s(r), v = s(a), C = s(n), P = o;
-  return (e && P(new e(new ArrayBuffer(1))) != m || t && P(new t()) != i || r && P(r.resolve()) != c || a && P(new a()) != d || n && P(new n()) != f) && (P = function(_) {
+  var e = mn(), t = hn(), r = pn(), a = bn(), n = gn(), o = le(), s = ra(), i = "[object Map]", u = "[object Object]", l = "[object Promise]", d = "[object Set]", f = "[object WeakMap]", m = "[object DataView]", p = s(e), g = s(t), b = s(r), v = s(a), C = s(n), P = o;
+  return (e && P(new e(new ArrayBuffer(1))) != m || t && P(new t()) != i || r && P(r.resolve()) != l || a && P(new a()) != d || n && P(new n()) != f) && (P = function(_) {
     var O = o(_), L = O == u ? _.constructor : void 0, B = L ? s(L) : "";
     if (B)
       switch (B) {
@@ -464,7 +464,7 @@ function vn() {
         case g:
           return i;
         case b:
-          return c;
+          return l;
         case v:
           return d;
         case C:
@@ -543,16 +543,16 @@ ne.exports;
 var kr;
 function kn() {
   return kr || (kr = 1, (function(e, t) {
-    var r = F(), a = Sn(), n = t && !t.nodeType && t, o = n && !0 && e && !e.nodeType && e, s = o && o.exports === n, i = s ? r.Buffer : void 0, u = i ? i.isBuffer : void 0, c = u || a;
-    e.exports = c;
+    var r = F(), a = Sn(), n = t && !t.nodeType && t, o = n && !0 && e && !e.nodeType && e, s = o && o.exports === n, i = s ? r.Buffer : void 0, u = i ? i.isBuffer : void 0, l = u || a;
+    e.exports = l;
   })(ne, ne.exports)), ne.exports;
 }
 var it, Pr;
 function Pn() {
   if (Pr) return it;
   Pr = 1;
-  var e = le(), t = na(), r = Se(), a = "[object Arguments]", n = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", u = "[object Function]", c = "[object Map]", d = "[object Number]", f = "[object Object]", m = "[object RegExp]", p = "[object Set]", g = "[object String]", b = "[object WeakMap]", v = "[object ArrayBuffer]", C = "[object DataView]", P = "[object Float32Array]", _ = "[object Float64Array]", O = "[object Int8Array]", L = "[object Int16Array]", B = "[object Int32Array]", me = "[object Uint8Array]", Y = "[object Uint8ClampedArray]", he = "[object Uint16Array]", te = "[object Uint32Array]", N = {};
-  N[P] = N[_] = N[O] = N[L] = N[B] = N[me] = N[Y] = N[he] = N[te] = !0, N[a] = N[n] = N[v] = N[o] = N[C] = N[s] = N[i] = N[u] = N[c] = N[d] = N[f] = N[m] = N[p] = N[g] = N[b] = !1;
+  var e = le(), t = na(), r = Se(), a = "[object Arguments]", n = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", u = "[object Function]", l = "[object Map]", d = "[object Number]", f = "[object Object]", m = "[object RegExp]", p = "[object Set]", g = "[object String]", b = "[object WeakMap]", v = "[object ArrayBuffer]", C = "[object DataView]", P = "[object Float32Array]", _ = "[object Float64Array]", O = "[object Int8Array]", L = "[object Int16Array]", B = "[object Int32Array]", me = "[object Uint8Array]", Y = "[object Uint8ClampedArray]", he = "[object Uint16Array]", te = "[object Uint32Array]", N = {};
+  N[P] = N[_] = N[O] = N[L] = N[B] = N[me] = N[Y] = N[he] = N[te] = !0, N[a] = N[n] = N[v] = N[o] = N[C] = N[s] = N[i] = N[u] = N[l] = N[d] = N[f] = N[m] = N[p] = N[g] = N[b] = !1;
   function J(j) {
     return r(j) && t(j.length) && !!N[e(j)];
   }
@@ -595,14 +595,14 @@ var ut, _r;
 function _n() {
   if (_r) return ut;
   _r = 1;
-  var e = on(), t = vn(), r = Nn(), a = aa(), n = An(), o = kn(), s = Qr(), i = Cn(), u = "[object Map]", c = "[object Set]", d = Object.prototype, f = d.hasOwnProperty;
+  var e = on(), t = vn(), r = Nn(), a = aa(), n = An(), o = kn(), s = Qr(), i = Cn(), u = "[object Map]", l = "[object Set]", d = Object.prototype, f = d.hasOwnProperty;
   function m(p) {
     if (p == null)
       return !0;
     if (n(p) && (a(p) || typeof p == "string" || typeof p.splice == "function" || o(p) || i(p) || r(p)))
       return !p.length;
     var g = t(p);
-    if (g == u || g == c)
+    if (g == u || g == l)
       return !p.size;
     if (s(p))
       return !e(p).length;
@@ -627,14 +627,14 @@ const oa = (e) => {
     "aria-disabled": o,
     as: s,
     ...i
-  } = e, u = n || o === "true" || o === !0, c = s;
+  } = e, u = n || o === "true" || o === !0, l = s;
   let d;
-  return c === "button" ? d = {
+  return l === "button" ? d = {
     type: i.type || "button",
     disabled: n
   } : d = {
     tabIndex: n ? "-1" : i.tabIndex
-  }, l(c, h({
+  }, c(l, h({
     "aria-disabled": u || void 0
   }, i, d, {
     onClick: (f) => {
@@ -665,7 +665,7 @@ const oa = (e) => {
     ...e,
     hasBackground: !1
   };
-  return l("div", {
+  return c("div", {
     className: s
   }, [ue(i)]);
 }, ue = (e) => {
@@ -678,7 +678,7 @@ const oa = (e) => {
     emphasis: s,
     hasBackground: i,
     isSelected: u,
-    isActive: c,
+    isActive: l,
     isFocused: d,
     isHovered: f,
     linkAs: m,
@@ -701,7 +701,7 @@ const oa = (e) => {
     [`emphasis-${s}`]: !!s,
     "is-selected": u,
     "is-disabled": !!(e.isDisabled || e["aria-disabled"]),
-    "is-active": c,
+    "is-active": l,
     "is-focused": d,
     "is-hovered": f,
     [`size-${p}`]: !!p,
@@ -772,7 +772,7 @@ function H(e) {
       disabled: s,
       isDisabled: i,
       "aria-disabled": u,
-      ariaDisabled: c,
+      ariaDisabled: l,
       onClick: d,
       onChange: f,
       onKeyPress: m,
@@ -799,7 +799,7 @@ const wr = y({
     size: s,
     ref: i,
     theme: u,
-    alt: c,
+    alt: l,
     verticalAlign: d,
     ...f
   } = e, [m, p] = Ot(r, a);
@@ -808,7 +808,7 @@ const wr = y({
   let b = p;
   !b && n && g === x.dark && (b = "L2");
   let v = s;
-  return s && n ? s === E.xxs || s === E.xs ? v = E.s : s === E.xxl && (v = E.xl) : n && (v = E.m), l("i", h({
+  return s && n ? s === E.xxs || s === E.xs ? v = E.s : s === E.xxl && (v = E.xl) : n && (v = E.m), c("i", h({
     ref: i
   }, f, {
     className: A(t, zn({
@@ -822,10 +822,10 @@ const wr = y({
       path: !0,
       "vertical-align-middle": d === "middle"
     }))
-  }), [l("svg", {
-    "aria-hidden": c ? void 0 : "true",
-    role: c ? "img" : void 0,
-    "aria-label": c,
+  }), [c("svg", {
+    "aria-hidden": l ? void 0 : "true",
+    role: l ? "img" : void 0,
+    "aria-label": l,
     height: "1em",
     preserveAspectRatio: "xMidYMid meet",
     style: {
@@ -833,7 +833,7 @@ const wr = y({
     },
     viewBox: "0 0 24 24",
     width: "1em"
-  }, [l("path", {
+  }, [c("path", {
     d: o,
     fill: "currentColor"
   }, null)])]);
@@ -845,7 +845,7 @@ const Tt = /* @__PURE__ */ y((e) => {
   const t = k(), r = w({
     defaultTheme: void 0
   });
-  return () => l(I, h(e, t, {
+  return () => c(I, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -866,9 +866,9 @@ const Tt = /* @__PURE__ */ y((e) => {
     truncate: s,
     whiteSpace: i,
     style: u
-  } = e, c = typeof s == "object" && s.lines > 1 && {
+  } = e, l = typeof s == "object" && s.lines > 1 && {
     "--lumx-text-truncate-lines": s.lines
-  }, d = !!c, f = !!s, m = !n && !(f && !d) && i && {
+  }, d = !!l, f = !!s, m = !n && !(f && !d) && i && {
     "--lumx-text-white-space": i
   };
   return {
@@ -878,7 +878,7 @@ const Tt = /* @__PURE__ */ y((e) => {
       "no-wrap": n
     }), o && Bt(o), r && Ja(r, a)),
     style: {
-      ...c,
+      ...l,
       ...m,
       ...u
     }
@@ -924,13 +924,13 @@ function Qn(e, t, r = {}) {
   }, {
     immediate: !0,
     flush: "post"
-  }), c = () => o?.takeRecords(), d = () => {
+  }), l = () => o?.takeRecords(), d = () => {
     u(), i();
   };
   return la(d), {
     isSupported: s,
     stop: d,
-    takeRecords: c
+    takeRecords: l
   };
 }
 function Zn(e, t, r = {}) {
@@ -949,12 +949,12 @@ function Zn(e, t, r = {}) {
   }, {
     immediate: !0,
     flush: "post"
-  }), c = () => {
+  }), l = () => {
     i(), u();
   };
-  return la(c), {
+  return la(l), {
     isSupported: s,
-    stop: c
+    stop: l
   };
 }
 function eo(e) {
@@ -995,7 +995,7 @@ function Ct(e) {
     }
     if (typeof r.type == "string" && Array.isArray(r.children)) {
       const a = Ct(r.children), n = { ...r.props || {} };
-      r.key != null && (n.key = r.key), r.ref != null && (n.ref = r.ref), t.push(l(r.type, n, a));
+      r.key != null && (n.key = r.key), r.ref != null && (n.ref = r.ref), t.push(c(r.type, n, a));
       continue;
     }
     t.push(r);
@@ -1016,16 +1016,16 @@ const Rt = /* @__PURE__ */ y((e, {
   })), i = T(() => {
     const {
       children: u,
-      ...c
+      ...l
     } = r;
     return {
-      ...c,
+      ...l,
       ...s.value
     };
   });
   return () => {
-    const u = e.as || "div", c = a() || t.default?.(), d = c ? Ct(c) : null;
-    return l(u, h({
+    const u = e.as || "div", l = a() || t.default?.(), d = l ? Ct(l) : null;
+    return c(u, h({
       ref: "tooltip-label"
     }, i.value, {
       class: i.value.className,
@@ -1054,24 +1054,25 @@ const Rt = /* @__PURE__ */ y((e, {
     ...a
   }))), u = (d) => {
     o.value || (d.stopImmediatePropagation(), t("click", d));
-  }, c = () => {
+  }, l = () => {
     const d = r.default?.();
-    return !d || d.length === 0 ? null : d.length === 1 && d[0].type === Rt ? d[0] : l("span", null, [d]);
+    return !d || d.length === 0 ? null : d.length === 1 && d[0].type === Rt ? d[0] : c("span", null, [d]);
   };
   return () => {
-    const d = l(G, null, [e.leftIcon && !xr(e.leftIcon) && l(wr, null, {
-      default: () => [l(Tt, {
+    const d = c(G, null, [e.leftIcon && !xr(e.leftIcon) && c(wr, null, {
+      default: () => [c(Tt, {
         icon: e.leftIcon
       }, null)]
-    }), c(), e.rightIcon && !xr(e.rightIcon) && l(wr, null, {
-      default: () => [l(Tt, {
+    }), l(), e.rightIcon && !xr(e.rightIcon) && c(wr, null, {
+      default: () => [c(Tt, {
         icon: e.rightIcon
       }, null)]
     })]);
-    return l(ke, h(i.value, s.value, {
+    return c(ke, h(i.value, s.value, {
+      onClick: u
+    }, {
       className: e.class,
       theme: e.theme || n.value,
-      onClick: u,
       children: d
     }), null);
   };
@@ -1092,7 +1093,7 @@ const Rt = /* @__PURE__ */ y((e, {
     label: n,
     size: o = _t.size,
     ...s
-  } = e, i = r ? l("img", {
+  } = e, i = r ? c("img", {
     alt: "",
     src: r
   }, null) : I({
@@ -1125,12 +1126,13 @@ const so = {
   }))), i = (u) => {
     n.value || (u.stopImmediatePropagation(), t("click", u));
   };
-  return () => l(de, h(s.value, o.value, {
+  return () => c(de, h(s.value, o.value, {
+    onClick: i
+  }, {
     className: e.class,
     theme: e.theme || a.value,
     title: e.label,
-    label: e.label,
-    onClick: i
+    label: e.label
   }), null);
 }, {
   name: "IconButton",
@@ -1144,7 +1146,7 @@ const so = {
     className: r,
     ...a
   } = e;
-  return l("div", h(a, {
+  return c("div", h(a, {
     className: A(r, da)
   }), [t]);
 };
@@ -1155,7 +1157,7 @@ const gi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(Pe, h(e, r, {
+  return () => c(Pe, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -1178,7 +1180,7 @@ function U(e) {
     ref: i,
     ...u
   } = e;
-  return l("label", h({
+  return c("label", h({
     ref: i
   }, u, {
     htmlFor: a,
@@ -1212,7 +1214,7 @@ function K(e) {
   } = e, {
     color: i
   } = ho[a] || {};
-  return l("p", h({
+  return c("p", h({
     ref: o
   }, s, {
     className: A(r, go({
@@ -1237,7 +1239,7 @@ const pa = "intermediate", vo = "lumx-checkbox", {
     isChecked: s = t,
     label: i,
     name: u,
-    ref: c,
+    ref: l,
     onChange: d,
     theme: f,
     value: m,
@@ -1248,8 +1250,8 @@ const pa = "intermediate", vo = "lumx-checkbox", {
   } = e, C = s === pa, P = (_) => {
     d && d(!s, m, u, _);
   };
-  return l("div", h({
-    ref: c
+  return c("div", h({
+    ref: l
   }, v, {
     className: A(r, yo({
       // Whether state is intermediate class name will "-checked"
@@ -1258,9 +1260,9 @@ const pa = "intermediate", vo = "lumx-checkbox", {
       "is-unchecked": !s,
       [`theme-${f}`]: !!f
     }))
-  }), [l("div", {
+  }), [c("div", {
     className: R("input-wrapper")
-  }, [l("input", h({
+  }, [c("input", h({
     ref: o,
     type: "checkbox",
     id: b,
@@ -1273,15 +1275,15 @@ const pa = "intermediate", vo = "lumx-checkbox", {
     "aria-checked": C ? "mixed" : !!s
   }, p?.readOnly ? {
     readOnly: p.readOnly
-  } : {}, p), null), l("div", {
+  } : {}, p), null), c("div", {
     className: R("input-placeholder")
-  }, [l("div", {
+  }, [c("div", {
     className: R("input-background")
-  }, null), l("div", {
+  }, null), c("div", {
     className: R("input-indicator")
   }, [I({
     icon: C ? Ra : ja
-  })])])]), l("div", {
+  })])])]), c("div", {
     className: R("content")
   }, [i && U({
     htmlFor: b,
@@ -1307,7 +1309,7 @@ const Ao = {
   const r = k(), a = w(), n = Mt(), o = T(() => e.id || n), s = ie(null), {
     isAnyDisabled: i,
     disabledStateProps: u,
-    otherProps: c
+    otherProps: l
   } = H(T(() => ({
     ...e,
     ...r
@@ -1320,13 +1322,14 @@ const Ao = {
   const f = (m, p, g, b) => {
     i.value || (b?.stopImmediatePropagation?.(), t("change", m, p, g, b));
   };
-  return () => l(No, h(c.value, {
+  return () => c(No, h(l.value, {
+    onChange: f
+  }, {
     className: e.class,
     theme: e.theme || a.value,
     inputId: o.value,
     inputRef: s,
     isDisabled: i.value,
-    onChange: f,
     label: e.label,
     inputProps: {
       ...e.inputProps,
@@ -1349,7 +1352,7 @@ const Ao = {
     ref: a,
     ...n
   } = e;
-  return l("hr", h({
+  return c("hr", h({
     ref: a
   }, n, {
     className: A(t, ko({
@@ -1358,7 +1361,7 @@ const Ao = {
   }), null);
 }, yi = /* @__PURE__ */ y((e) => {
   const t = k(), r = w();
-  return () => l(Po, h(t, e, {
+  return () => c(Po, h(t, e, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -1384,17 +1387,17 @@ const $o = "lumx-flag", {
     truncate: s,
     Text: i,
     ...u
-  } = e, c = a || (o === ve.light ? x.dark : x.light), d = !!s;
-  return l("div", h(u, {
+  } = e, l = a || (o === ve.light ? x.dark : x.light), d = !!s;
+  return c("div", h(u, {
     className: A(n, Co({
-      [`color-${c}`]: !!c,
+      [`color-${l}`]: !!l,
       "is-truncated": d
     }))
   }), [r && I({
     icon: r,
     size: E.xxs,
     className: Er("icon")
-  }), l(i, {
+  }), c(i, {
     as: "span",
     truncate: !!s,
     typography: "overline",
@@ -1406,7 +1409,7 @@ const $o = "lumx-flag", {
   slots: t
 }) => {
   const r = k(), a = w();
-  return () => l(_o, h(e, r, {
+  return () => c(_o, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.(),
@@ -1445,9 +1448,9 @@ function Oo(e) {
     noShrink: s,
     vAlign: i,
     wrap: u,
-    orientation: c,
+    orientation: l,
     ...d
-  } = e, f = c ?? (u || n || i ? Va.horizontal : null);
+  } = e, f = l ?? (u || n || i ? Va.horizontal : null);
   return {
     ...d,
     className: A(t, Lo({
@@ -1472,7 +1475,7 @@ const Ai = /* @__PURE__ */ y((e, {
       ...r,
       className: e.class
     });
-    return l(a, n, {
+    return c(a, n, {
       default: () => [t.default?.()]
     });
   };
@@ -1519,20 +1522,20 @@ function Mo() {
   if (Rr) return pt;
   Rr = 1;
   var e = jo(), t = jt(), r = Ro(), a = NaN, n = /^[-+]0x[0-9a-f]+$/i, o = /^0b[01]+$/i, s = /^0o[0-7]+$/i, i = parseInt;
-  function u(c) {
-    if (typeof c == "number")
-      return c;
-    if (r(c))
+  function u(l) {
+    if (typeof l == "number")
+      return l;
+    if (r(l))
       return a;
-    if (t(c)) {
-      var d = typeof c.valueOf == "function" ? c.valueOf() : c;
-      c = t(d) ? d + "" : d;
+    if (t(l)) {
+      var d = typeof l.valueOf == "function" ? l.valueOf() : l;
+      l = t(d) ? d + "" : d;
     }
-    if (typeof c != "string")
-      return c === 0 ? c : +c;
-    c = e(c);
-    var f = o.test(c);
-    return f || s.test(c) ? i(c.slice(2), f ? 2 : 8) : n.test(c) ? a : +c;
+    if (typeof l != "string")
+      return l === 0 ? l : +l;
+    l = e(l);
+    var f = o.test(l);
+    return f || s.test(l) ? i(l.slice(2), f ? 2 : 8) : n.test(l) ? a : +l;
   }
   return pt = u, pt;
 }
@@ -1588,9 +1591,9 @@ const Vo = "GridColumn", ba = "lumx-grid-column", Wo = {}, Te = (e) => {
     className: s,
     style: i = {},
     ref: u,
-    ...c
+    ...l
   } = e;
-  return l(t, h(c, {
+  return c(t, h(l, {
     ref: u,
     className: A(s, ba),
     style: {
@@ -1610,7 +1613,7 @@ const Si = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(Te, h(e, r, {
+  return () => c(Te, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -1650,7 +1653,7 @@ const Si = /* @__PURE__ */ y((e, {
       class: o
     };
   });
-  return () => l(Rt, n.value, {
+  return () => c(Rt, n.value, {
     default: () => [t.default?.()]
   });
 }, {
@@ -1678,7 +1681,7 @@ const Si = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k(), a = w();
-  return () => l(K, h(e, r, {
+  return () => c(K, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.()
@@ -1692,7 +1695,7 @@ const Si = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k(), a = w();
-  return () => l(U, h(e, r, {
+  return () => c(U, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.()
@@ -1719,7 +1722,7 @@ const Zo = "lumx-link", {
     rightIcon: s,
     typography: i,
     as: u,
-    ref: c,
+    ref: l,
     isDisabled: d,
     theme: f,
     href: m,
@@ -1732,22 +1735,22 @@ const Zo = "lumx-link", {
     [`color-${v}`]: !!v,
     [`color-variant-${C}`]: !!C,
     "has-typography": !!i
-  }), i && Bt(i)), L = l(G, null, [o && l(G, null, [pe(" "), I({
+  }), i && Bt(i)), L = c(G, null, [o && c(G, null, [pe(" "), I({
     icon: o,
     className: yt("left-icon")
-  }), pe(" ")]), t && l("span", {
+  }), pe(" ")]), t && c("span", {
     className: yt("content")
-  }, [t]), s && l(G, null, [pe(" "), I({
+  }, [t]), s && c(G, null, [pe(" "), I({
     icon: s,
     className: yt("right-icon")
   }), pe(" ")])]), B = {
-    ref: c,
+    ref: l,
     className: O,
     onClick: d ? void 0 : g,
     ...b,
     ..._
   };
-  return m && (B.href = m), p && (B.target = p), l(P, B, Qo(L) ? L : {
+  return m && (B.href = m), p && (B.target = p), c(P, B, Qo(L) ? L : {
     default: () => [L]
   });
 }, rs = {
@@ -1761,7 +1764,7 @@ const Zo = "lumx-link", {
   } = e, {
     isAnyDisabled: i,
     disabledStateProps: u,
-    otherProps: c
+    otherProps: l
   } = H(T(() => ({
     ...s,
     ...r
@@ -1769,12 +1772,13 @@ const Zo = "lumx-link", {
     i.value || (f?.stopImmediatePropagation?.(), t("click", f));
   };
   return () => {
-    const m = a.default?.() || c.value.label;
-    return l(ts, h(c.value, u.value, {
+    const m = a.default?.() || l.value.label;
+    return c(ts, h(l.value, u.value, {
+      onClick: d
+    }, {
       className: o,
       theme: e.theme || n.value,
       isDisabled: i.value,
-      onClick: d,
       label: m
     }), null);
   };
@@ -1783,7 +1787,12 @@ const Zo = "lumx-link", {
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
   props: S()("as", "class", "color", "colorVariant", "disabled", "href", "isDisabled", "leftIcon", "rightIcon", "target", "theme", "typography", "aria-disabled"),
-  emits: rs
+  emits: rs,
+  // Enable compatibility with @vue/compat for event listeners
+  compatConfig: {
+    MODE: 3
+    // Use Vue 3 behavior for this component
+  }
 }), as = "Message", ya = "lumx-message", {
   block: ns,
   element: Nt
@@ -1815,24 +1824,24 @@ const Zo = "lumx-link", {
     ref: i,
     ...u
   } = e, {
-    color: c,
+    color: l,
     icon: d
   } = os[n] || {}, {
     onClick: f,
     label: m
   } = s || {}, p = a && n === "info" && f && m;
-  return l("div", h(u, {
+  return c("div", h(u, {
     ref: i,
     className: A(r, ns({
-      [`color-${c}`]: !!c,
+      [`color-${l}`]: !!l,
       "has-background": a
     }))
   }), [(o || d) && I({
     className: Nt("icon"),
     icon: o || d,
     size: E.xs,
-    color: c
-  }), l("div", {
+    color: l
+  }), c("div", {
     className: Nt("text")
   }, [t]), p && de({
     className: Nt("close-button"),
@@ -1851,7 +1860,7 @@ const _i = /* @__PURE__ */ y((e, {
   const a = k(), {
     closeButtonLabel: n
   } = e;
-  return () => l(qt, h(e, a, {
+  return () => c(qt, h(e, a, {
     className: e.class,
     children: t.default?.(),
     closeButtonProps: n ? {
@@ -1878,7 +1887,7 @@ const _i = /* @__PURE__ */ y((e, {
     isChecked: s = t,
     label: i,
     name: u,
-    ref: c,
+    ref: l,
     onChange: d,
     theme: f,
     value: m,
@@ -1889,8 +1898,8 @@ const _i = /* @__PURE__ */ y((e, {
   } = e, C = (P) => {
     d && d(m, u, P);
   };
-  return l("div", h({
-    ref: c
+  return c("div", h({
+    ref: l
   }, v, {
     className: A(r, is({
       "is-checked": s,
@@ -1898,9 +1907,9 @@ const _i = /* @__PURE__ */ y((e, {
       "is-unchecked": !s,
       [`theme-${f}`]: !!f
     }))
-  }), [l("div", {
+  }), [c("div", {
     className: M("input-wrapper")
-  }, [l("input", h({
+  }, [c("input", h({
     ref: o,
     className: M("input-native"),
     id: b,
@@ -1912,13 +1921,13 @@ const _i = /* @__PURE__ */ y((e, {
     "aria-describedby": a ? `${b}-helper` : void 0
   }, p?.readOnly ? {
     readOnly: p.readOnly
-  } : {}, p), null), l("div", {
+  } : {}, p), null), c("div", {
     className: M("input-placeholder")
-  }, [l("div", {
+  }, [c("div", {
     className: M("input-background")
-  }, null), l("div", {
+  }, null), c("div", {
     className: M("input-indicator")
-  }, null)])]), l("div", {
+  }, null)])]), c("div", {
     className: M("content")
   }, [i && U({
     htmlFor: b,
@@ -1943,15 +1952,16 @@ const _i = /* @__PURE__ */ y((e, {
   } = H(T(() => ({
     ...e,
     ...r
-  }))), c = (d, f, m) => {
+  }))), l = (d, f, m) => {
     s.value || (m?.stopImmediatePropagation?.(), t("change", d, f, m));
   };
-  return () => l(ls, h(u.value, {
+  return () => c(ls, h(u.value, {
+    onChange: l
+  }, {
     className: e.class,
     theme: e.theme || a.value,
     inputId: o.value,
     isDisabled: s.value,
-    onChange: c,
     label: e.label,
     inputProps: {
       ...e.inputProps,
@@ -1972,7 +1982,7 @@ const _i = /* @__PURE__ */ y((e, {
     ref: a,
     ...n
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: a
   }, n, {
     className: A(r, Na)
@@ -1985,7 +1995,7 @@ const wi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l($e, h(e, r, {
+  return () => c($e, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -2004,7 +2014,7 @@ const wi = /* @__PURE__ */ y((e, {
     ref: o,
     ...s
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: o
   }, s, {
     className: A(t, ms({
@@ -2032,11 +2042,11 @@ const wi = /* @__PURE__ */ y((e, {
     width: s,
     color: i,
     ref: u,
-    ...c
+    ...l
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: u
-  }, c, {
+  }, l, {
     className: A(r, gs({
       [`aspect-ratio-${t}`]: !!t,
       [`height-${a}`]: !!(!t && a),
@@ -2045,7 +2055,7 @@ const wi = /* @__PURE__ */ y((e, {
       [`width-${s}`]: !!s,
       [`color-${i}`]: !!i
     }))
-  }), [l("div", {
+  }), [c("div", {
     className: vs("inner")
   }, null)]);
 }, As = "lumx-skeleton-typography", {
@@ -2061,7 +2071,7 @@ const wi = /* @__PURE__ */ y((e, {
     ref: s,
     ...i
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: s
   }, i, {
     className: A(t, Ss({
@@ -2073,12 +2083,12 @@ const wi = /* @__PURE__ */ y((e, {
       ...i.style,
       width: n
     }
-  }), [l("div", {
+  }), [c("div", {
     className: ks("inner")
   }, null)]);
 }, Ii = /* @__PURE__ */ y((e) => {
   const t = k(), r = w();
-  return () => l(hs, h(e, t, {
+  return () => c(hs, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -2088,7 +2098,7 @@ const wi = /* @__PURE__ */ y((e, {
   props: S()("class", "size", "color", "theme")
 }), Ei = /* @__PURE__ */ y((e) => {
   const t = k(), r = w();
-  return () => l(Ns, h(e, t, {
+  return () => c(Ns, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -2098,7 +2108,7 @@ const wi = /* @__PURE__ */ y((e, {
   props: S()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
 }), Li = /* @__PURE__ */ y((e) => {
   const t = k(), r = w();
-  return () => l(Ps, h(e, t, {
+  return () => c(Ps, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -2121,7 +2131,7 @@ const wi = /* @__PURE__ */ y((e, {
     isChecked: s = t,
     label: i,
     name: u,
-    ref: c,
+    ref: l,
     onChange: d,
     theme: f,
     value: m,
@@ -2133,8 +2143,8 @@ const wi = /* @__PURE__ */ y((e, {
   } = e, P = (_) => {
     d && d(!s, m, u, _);
   };
-  return l("div", h({
-    ref: c
+  return c("div", h({
+    ref: l
   }, C, {
     className: A(r, $s({
       "is-checked": s,
@@ -2143,9 +2153,9 @@ const wi = /* @__PURE__ */ y((e, {
       [`position-${v}`]: !!v,
       [`theme-${f}`]: !!f
     }))
-  }), [l("div", {
+  }), [c("div", {
     className: q("input-wrapper")
-  }, [l("input", h({
+  }, [c("input", h({
     ref: o,
     type: "checkbox",
     role: "switch",
@@ -2159,13 +2169,13 @@ const wi = /* @__PURE__ */ y((e, {
     "aria-checked": !!s
   }, p?.readOnly ? {
     readOnly: p.readOnly
-  } : {}, p), null), l("div", {
+  } : {}, p), null), c("div", {
     className: q("input-placeholder")
-  }, [l("div", {
+  }, [c("div", {
     className: q("input-background")
-  }, null), l("div", {
+  }, null), c("div", {
     className: q("input-indicator")
-  }, null)])]), l("div", {
+  }, null)])]), c("div", {
     className: q("content")
   }, [i && U({
     htmlFor: b,
@@ -2187,19 +2197,20 @@ const wi = /* @__PURE__ */ y((e, {
   const a = k(), n = w(), o = Mt(), s = T(() => e.id || o), {
     isAnyDisabled: i,
     disabledStateProps: u,
-    otherProps: c
+    otherProps: l
   } = H(T(() => ({
     ...e,
     ...a
   }))), d = (f, m, p, g) => {
     i.value || (g.stopImmediatePropagation(), t("change", f, m, p, g));
   };
-  return () => l(_s, h(c.value, {
+  return () => c(_s, h(l.value, {
+    onChange: d
+  }, {
     className: e.class,
     theme: e.theme || n.value,
     inputId: s.value,
     isDisabled: i.value,
-    onChange: d,
     label: e.label || r.default?.(),
     inputProps: {
       ...e.inputProps,
@@ -2225,7 +2236,7 @@ const wi = /* @__PURE__ */ y((e, {
     theme: s,
     ...i
   } = e;
-  return l("table", h({
+  return c("table", h({
     ref: o
   }, i, {
     className: A(r, ws({
@@ -2238,7 +2249,7 @@ const wi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k(), a = w();
-  return () => l(Is, h(e, r, {
+  return () => c(Is, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.()
@@ -2254,7 +2265,7 @@ const wi = /* @__PURE__ */ y((e, {
     ref: a,
     ...n
   } = e;
-  return l("tbody", h({
+  return c("tbody", h({
     ref: a
   }, n, {
     className: A(r, Es)
@@ -2263,7 +2274,7 @@ const wi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(Ls, h(e, r, {
+  return () => c(Ls, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -2291,7 +2302,7 @@ const wi = /* @__PURE__ */ y((e, {
     ref: s,
     sortOrder: i,
     variant: u = Os.variant,
-    ...c
+    ...l
   } = e;
   console.log({
     onHeaderClick: o,
@@ -2302,16 +2313,16 @@ const wi = /* @__PURE__ */ y((e, {
     onClick: o
   } : void 0;
   let m;
-  return n && (m = "none", i === ge.asc && (m = "ascending"), i === ge.desc && (m = "descending")), l(G, null, [u === xt.head && l("th", h({
+  return n && (m = "none", i === ge.asc && (m = "ascending"), i === ge.desc && (m = "descending")), c(G, null, [u === xt.head && c("th", h({
     ref: s
-  }, c, {
+  }, l, {
     className: A(r, Hr({
       "is-sortable": n,
       "is-sorted": n && !!i,
       head: !0
     })),
     "aria-sort": m
-  }), [l(d, h({
+  }), [c(d, h({
     className: `${z}-wrapper`
   }, f), {
     default: () => [a && !n && I({
@@ -2326,16 +2337,16 @@ const wi = /* @__PURE__ */ y((e, {
       className: `${z}-icon`,
       icon: Ha,
       size: E.xxs
-    }), l("div", {
+    }), c("div", {
       className: `${z}-content`
     }, [t])]
-  })]), u === xt.body && l("td", h({
+  })]), u === xt.body && c("td", h({
     ref: s
-  }, c, {
+  }, l, {
     className: A(r, Hr({
       body: !0
     }))
-  }), [l("div", {
+  }), [c("div", {
     className: `${z}-content`
   }, [t])])]);
 }, wt = (e) => {
@@ -2359,10 +2370,17 @@ const wi = /* @__PURE__ */ y((e, {
     const {
       onHeaderClick: s,
       ...i
+    } = e, {
+      onHeaderClick: u,
+      ...l
     } = a;
-    return l(Bs, h(e, i, {
-      className: e.class,
+    return console.log({
       onHeaderClick: n,
+      isSortable: e.isSortable
+    }), c(Bs, h(i, l, {
+      onHeaderClick: o || e.isSortable ? n : void 0
+    }, {
+      className: e.class,
       children: r.default?.()
     }), null);
   };
@@ -2378,7 +2396,7 @@ const wi = /* @__PURE__ */ y((e, {
     ref: a,
     ...n
   } = e;
-  return l("thead", h({
+  return c("thead", h({
     ref: a
   }, n, {
     className: A(r, Rs)
@@ -2387,7 +2405,7 @@ const wi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(Ms, h(e, r, {
+  return () => c(Ms, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -2407,17 +2425,17 @@ const wi = /* @__PURE__ */ y((e, {
     tabIndex: s,
     "aria-disabled": i,
     ...u
-  } = e, c = !!i;
-  return l("tr", h({
+  } = e, l = !!i;
+  return c("tr", h({
     ref: o,
     "aria-disabled": i
   }, s !== void 0 ? {
     tabIndex: s
   } : {}, u, {
     className: A(r, Ds({
-      "is-clickable": a && !c,
-      "is-disabled": c,
-      "is-selected": n && !c
+      "is-clickable": a && !l,
+      "is-disabled": l,
+      "is-selected": n && !l
     }))
   }), [t]);
 }, Di = /* @__PURE__ */ y((e, {
@@ -2430,7 +2448,7 @@ const wi = /* @__PURE__ */ y((e, {
     ...e,
     ...r
   })));
-  return () => l(Fs, h(n.value, {
+  return () => c(Fs, h(n.value, {
     className: e.class,
     tabIndex: e.isClickable && !a.value ? 0 : -1,
     "aria-disabled": a.value,
@@ -2485,9 +2503,9 @@ function zs({
     return { visibility: "hidden" };
   if (!o || !n.height || !n.width)
     return {};
-  const s = n.height / o.height, i = n.width / o.width, u = Math.min(i, s), c = Math.abs((r?.y || 0) - 1) / 2, d = zr({
+  const s = n.height / o.height, i = n.width / o.width, u = Math.min(i, s), l = Math.abs((r?.y || 0) - 1) / 2, d = zr({
     scale: u,
-    focusPoint: c,
+    focusPoint: l,
     imageSize: n.height,
     containerSize: o.height
   }), f = Math.abs((r?.x || 0) + 1) / 2;
@@ -2514,7 +2532,7 @@ const Gs = "lumx-thumbnail", {
     crossOrigin: s,
     ref: i,
     fallback: u = Gr.fallback,
-    focusPointStyle: c,
+    focusPointStyle: l,
     fillHeight: d,
     image: f,
     imgProps: m,
@@ -2556,9 +2574,9 @@ const Gs = "lumx-thumbnail", {
     "fill-height": d
   })), ae = N && C?.current?.complete && C?.current || void 0, Aa = ae ? {
     backgroundImage: `url(${ae.src})`
-  } : void 0, zt = l(G, null, [l("span", {
+  } : void 0, zt = c(G, null, [c("span", {
     className: se("background")
-  }, [l("img", h({
+  }, [c("img", h({
     width: ae?.naturalWidth,
     height: ae?.naturalHeight
   }, m, {
@@ -2567,7 +2585,7 @@ const Gs = "lumx-thumbnail", {
       width: N ? m?.width || ae?.naturalWidth : void 0,
       ...m?.style,
       ...Ce,
-      ...c,
+      ...l,
       ...Aa
     },
     ref: p,
@@ -2579,7 +2597,7 @@ const Gs = "lumx-thumbnail", {
     src: f,
     alt: r,
     loading: v
-  }), null), !N && J && l("span", {
+  }), null), !N && J && c("span", {
     className: se("fallback")
   }, [j ? I({
     icon: u,
@@ -2591,7 +2609,7 @@ const Gs = "lumx-thumbnail", {
     ...re,
     className: Ht,
     children: zt
-  }) : l("div", h({
+  }) : c("div", h({
     ref: i
   }, re, {
     className: Ht
@@ -2630,11 +2648,11 @@ function Ks(e) {
       element: s.value,
       isLoaded: i.value
     })
-  ), c = ie(void 0), d = () => {
+  ), l = ie(void 0), d = () => {
     const m = s.value?.offsetWidth, p = s.value?.offsetHeight;
     if (m && p) {
-      const g = c.value;
-      (g?.width !== m || g?.height !== p) && (c.value = { width: m, height: p });
+      const g = l.value;
+      (g?.width !== m || g?.height !== p) && (l.value = { width: m, height: p });
     } else u.value && requestAnimationFrame(d);
   };
   return W(
@@ -2650,7 +2668,7 @@ function Ks(e) {
       focusPoint: a.value,
       element: s.value,
       imageSize: u.value,
-      containerSize: c.value
+      containerSize: l.value
     })
   );
 }
@@ -2663,7 +2681,7 @@ const Ys = {
 }) => {
   const a = k(), n = w(), o = ie(), s = wt("onClick"), i = wt("onKeyPress"), {
     isAnyDisabled: u,
-    disabledStateProps: c,
+    disabledStateProps: l,
     otherProps: d
   } = H(T(() => ({
     ...e,
@@ -2683,17 +2701,19 @@ const Ys = {
   };
   return () => {
     const v = r.badge?.(), C = r.fallback?.();
-    return l(Ws, h(d.value, {
+    return c(Ws, h(d.value, {
+      onClick: s ? g : void 0
+    }, {
+      onKeyPress: i ? b : void 0
+    }, {
       className: e.class,
       theme: e.theme || n.value,
       isAnyDisabled: u.value,
-      disabledStateProps: c.value,
+      disabledStateProps: l.value,
       focusPointStyle: p.value,
       loadingState: f.value,
       imgRef: o,
       image: e.image,
-      onClick: s ? g : void 0,
-      onKeyPress: i ? b : void 0,
       fallback: C,
       badge: v && (Array.isArray(v) ? v.map((P) => ({
         ...P,
@@ -2733,7 +2753,7 @@ const Ys = {
     ref: o,
     ...s
   } = e;
-  return l("div", h({
+  return c("div", h({
     ref: o
   }, s, {
     className: A(a, Xs({
@@ -2741,18 +2761,18 @@ const Ys = {
       "has-before": !!r,
       "has-label": !!n
     }))
-  }), [r && l("div", {
+  }), [r && c("div", {
     className: St("before")
-  }, [r]), n && l("div", {
+  }, [r]), n && c("div", {
     className: St("label")
-  }, [n]), t && l("div", {
+  }, [n]), t && c("div", {
     className: St("after")
   }, [t])]);
 }, Vi = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const r = k();
-  return () => l(Qs, h(e, r, {
+  return () => c(Qs, h(e, r, {
     className: e.class,
     label: t.default?.(),
     before: t.before?.(),