@lumx/vue 4.17.1-alpha.0 → 4.17.1-alpha.2

package/index.js

@@ -1,7 +1,7 @@
 import { ColorVariant as ld, Size as rt, VISUALLY_HIDDEN as cd, DIALOG_TRANSITION_DURATION as ac, AspectRatio as oc, IS_BROWSER as Yr, ColorPalette as ud } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as m, mergeProps as S, Fragment as ne, isVNode as K, useAttrs as D, computed as C, toValue as Re, getCurrentScope as rc, onScopeDispose as mr, toRef as Q, readonly as dd, customRef as fd, ref as M, shallowRef as Me, watch as X, getCurrentInstance as sc, onMounted as Ke, inject as qe, defineComponent as E, toRefs as hd, reactive as ic, provide as je, watchEffect as Xe, isRef as lt, onUnmounted as He, watchPostEffect as md, onBeforeUnmount as en, Comment as pr, unref as Pt, useSlots as ke, useTemplateRef as pd, toRaw as Ye, Text as lc, nextTick as cc, shallowReadonly as nt, h as Zr, cloneVNode as vd, onWatcherCleanup as gd, createTextVNode as bd, withDirectives as yd, resolveDirective as Ad } from "vue";
+import { createVNode as m, mergeProps as S, Fragment as ne, isVNode as K, useAttrs as D, computed as C, toValue as Me, getCurrentScope as rc, onScopeDispose as mr, toRef as Q, readonly as dd, customRef as fd, ref as R, shallowRef as Re, watch as X, getCurrentInstance as sc, onMounted as Ke, inject as qe, defineComponent as E, toRefs as hd, reactive as ic, provide as je, watchEffect as Xe, isRef as lt, onUnmounted as He, watchPostEffect as md, onBeforeUnmount as en, Comment as pr, unref as Pt, useSlots as ke, useTemplateRef as pd, toRaw as Ye, Text as lc, nextTick as cc, shallowReadonly as nt, h as Zr, cloneVNode as vd, onWatcherCleanup as gd, createTextVNode as bd, withDirectives as yd, resolveDirective as Ad } from "vue";
 import { classNames as fe } from "@lumx/core/js/utils";
 import { k as $, u as U, T as vr, P as tn, C as gr, I as uc } from "./_internal/CHaqSUjw.js";
 import { getDisabledState as Sd } from "@lumx/core/js/utils/disabledState";
@@ -90,7 +90,7 @@ const Jr = {
 }, es = {
   N: "N"
 }, Ed = typeof window < "u" && !window.navigator.userAgent.includes("jsdom");
-var Mt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+var Rt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Te(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -128,8 +128,8 @@ function $d() {
     })();
   })(In)), In.exports;
 }
-var Rd = $d();
-const L = /* @__PURE__ */ Te(Rd);
+var Md = $d();
+const L = /* @__PURE__ */ Te(Md);
 function pc(e, t) {
   const n = [];
   for (const [a, o] of Object.entries(t))
@@ -147,12 +147,12 @@ function Sr(e, t, n) {
     a ? pc(e, a) : null
   );
 }
-const vc = "lumx-action-area", Md = `${vc}__action`, Dd = Object.assign(
+const vc = "lumx-action-area", Rd = `${vc}__action`, Dd = Object.assign(
   /** Action area container class. Sets `position: relative`. */
   () => vc,
   {
     /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
-    action: (e) => Sr(Md, e)
+    action: (e) => Sr(Rd, e)
   }
 );
 function Nr(e, t) {
@@ -265,11 +265,11 @@ const Wd = {
     ...A
   } = e, {
     color: N,
-    icon: x
-  } = Wd[i] || {}, w = `${t}-title`, P = `${t}-description`, {
-    label: O,
+    icon: P
+  } = Wd[i] || {}, w = `${t}-title`, k = `${t}-description`, {
+    label: x,
     onClick: T,
-    ...k
+    ...O
   } = r, {
     label: _,
     onClick: q,
@@ -283,7 +283,7 @@ const Wd = {
       id: t,
       role: "alertdialog",
       "aria-labelledby": w,
-      "aria-describedby": P,
+      "aria-describedby": k,
       ...c
     },
     className: L(a, Kd({
@@ -293,7 +293,7 @@ const Wd = {
     default: () => [m("header", null, [m(b, {
       className: "lumx-spacing-margin-horizontal",
       before: m(y, {
-        icon: x,
+        icon: P,
         size: H.s,
         color: N
       }, null),
@@ -302,7 +302,7 @@ const Wd = {
         className: "lumx-typography-title"
       }, [n])
     }, null)]), d && m(u, {
-      id: P,
+      id: k,
       className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
     }, Ln(d) ? d : {
       default: () => [d]
@@ -314,13 +314,13 @@ const Wd = {
         onClick: q
       }), Ln(_) ? _ : {
         default: () => [_]
-      }), m(g, S(k, {
+      }), m(g, S(O, {
         ref: h,
         color: N,
         className: "lumx-spacing-margin-left-regular",
         onClick: T
-      }), Ln(O) ? O : {
-        default: () => [O]
+      }), Ln(x) ? x : {
+        default: () => [x]
       })])
     }, null)])]
   });
@@ -332,11 +332,11 @@ function re() {
 function yc(e, t, n) {
   const a = D();
   return C(() => {
-    const o = Re(e), r = a[t];
+    const o = Me(e), r = a[t];
     return n ? n(o, r) : o ?? r;
   });
 }
-function R(e) {
+function M(e) {
   return yc(
     e,
     "className",
@@ -356,7 +356,7 @@ function Zd(...e) {
   return typeof t == "function" ? dd(fd(() => ({
     get: t,
     set: Vt
-  }))) : M(t);
+  }))) : R(t);
 }
 function Sc(e) {
   return Array.isArray(e) ? e : [e];
@@ -364,12 +364,12 @@ function Sc(e) {
 const xr = Yd ? window : void 0;
 function st(e) {
   var t;
-  const n = Re(e);
+  const n = Me(e);
   return (t = n?.$el) !== null && t !== void 0 ? t : n;
 }
 // @__NO_SIDE_EFFECTS__
 function Jd() {
-  const e = Me(!1), t = sc();
+  const e = Re(!1), t = sc();
   return t && Ke(() => {
     e.value = !0;
   }, t), e;
@@ -385,7 +385,7 @@ function Qd(e, t, n = {}) {
   const s = /* @__PURE__ */ Pr(() => a && "MutationObserver" in a), i = () => {
     r && (r.disconnect(), r = void 0);
   }, l = X(C(() => {
-    const u = Sc(Re(e)).map(st).filter(Ac);
+    const u = Sc(Me(e)).map(st).filter(Ac);
     return new Set(u);
   }), (u) => {
     i(), s.value && u.size && (r = new MutationObserver(t), u.forEach((f) => r.observe(f, o)));
@@ -407,7 +407,7 @@ function ef(e, t, n = {}) {
   const s = /* @__PURE__ */ Pr(() => a && "ResizeObserver" in a), i = () => {
     r && (r.disconnect(), r = void 0);
   }, l = X(C(() => {
-    const d = Re(e);
+    const d = Me(e);
     return Array.isArray(d) ? d.map((u) => st(u)) : [st(d)];
   }), (d) => {
     if (i(), s.value && a) {
@@ -426,9 +426,9 @@ function ef(e, t, n = {}) {
   };
 }
 function rs(e, t, n = {}) {
-  const { root: a, rootMargin: o = "0px", threshold: r = 0, window: s = xr, immediate: i = !0 } = n, l = /* @__PURE__ */ Pr(() => s && "IntersectionObserver" in s), c = C(() => Sc(Re(e)).map(st).filter(Ac));
+  const { root: a, rootMargin: o = "0px", threshold: r = 0, window: s = xr, immediate: i = !0 } = n, l = /* @__PURE__ */ Pr(() => s && "IntersectionObserver" in s), c = C(() => Sc(Me(e)).map(st).filter(Ac));
   let d = Vt;
-  const u = Me(i), f = l.value ? X(() => [
+  const u = Re(i), f = l.value ? X(() => [
     c.value,
     st(a),
     u.value
@@ -465,10 +465,10 @@ function En(e) {
 }
 const $n = /* @__PURE__ */ new WeakMap();
 function tf(e, t = !1) {
-  const n = Me(t);
+  const n = Re(t);
   let a = "";
   X(Zd(e), (s) => {
-    const i = En(Re(s));
+    const i = En(Me(s));
     if (i) {
       const l = i;
       if ($n.get(l) || $n.set(l, l.style.overflow), l.style.overflow !== "hidden" && (a = l.style.overflow), l.style.overflow === "hidden") return n.value = !0;
@@ -476,10 +476,10 @@ function tf(e, t = !1) {
     }
   }, { immediate: !0 });
   const o = () => {
-    const s = En(Re(e));
+    const s = En(Me(e));
     !s || n.value || (s.style.overflow = "hidden", n.value = !0);
   }, r = () => {
-    const s = En(Re(e));
+    const s = En(Me(e));
     !s || !n.value || (s.style.overflow = a, $n.delete(s), n.value = !1);
   };
   return on(r), C({
@@ -518,12 +518,12 @@ const nf = "lumx-dialog", {
     ThemeProvider: y,
     ClickAwayProvider: A,
     shouldPreventCloseOnClickAway: N,
-    clickAwayRefs: x,
+    clickAwayRefs: P,
     rootRef: w,
-    wrapperRef: P,
-    hasTopIntersection: O,
+    wrapperRef: k,
+    hasTopIntersection: x,
     headerChildProps: T,
-    setSentinelTop: k,
+    setSentinelTop: O,
     content: _,
     setSentinelBottom: q,
     footerChildContent: j,
@@ -559,15 +559,15 @@ const nf = "lumx-dialog", {
           "aria-modal": "true"
         }, h), [m(A, {
           callback: !N && c,
-          childrenRefs: x,
+          childrenRefs: P,
           parentRef: w
         }, {
           default: () => [m("section", {
             className: Pe("wrapper"),
-            ref: P
+            ref: k
           }, [(a || v) && m("header", S(T, {
             className: L(Pe("header", {
-              "has-divider": !!(r || O)
+              "has-divider": !!(r || x)
             }), T?.className)
           }), [a, v]), m("div", {
             ref: d,
@@ -576,7 +576,7 @@ const nf = "lumx-dialog", {
             className: Pe("sentinel", {
               top: !0
             }),
-            ref: k
+            ref: O
           }, null), _, m("div", {
             className: Pe("sentinel", {
               bottom: !0
@@ -656,7 +656,7 @@ const nf = "lumx-dialog", {
     }), null)])]
   });
 }, ff = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(df, S(e, t, {
     className: a.value,
     theme: e.theme || n.value,
@@ -673,26 +673,26 @@ const nf = "lumx-dialog", {
   inheritAttrs: !1,
   props: $()("class", "size", "display", "theme")
 });
-var Rn, ls;
+var Mn, ls;
 function hf() {
-  if (ls) return Rn;
+  if (ls) return Mn;
   ls = 1;
   function e(t) {
     var n = t == null ? 0 : t.length;
     return n ? t[n - 1] : void 0;
   }
-  return Rn = e, Rn;
+  return Mn = e, Mn;
 }
 var mf = hf();
 const cs = /* @__PURE__ */ Te(mf);
-var Mn, us;
+var Rn, us;
 function wc() {
-  if (us) return Mn;
+  if (us) return Rn;
   us = 1;
   function e(t) {
     return t;
   }
-  return Mn = e, Mn;
+  return Rn = e, Rn;
 }
 var Dn, ds;
 function pf() {
@@ -745,7 +745,7 @@ var qn, ms;
 function Oc() {
   if (ms) return qn;
   ms = 1;
-  var e = typeof Mt == "object" && Mt && Mt.Object === Object && Mt;
+  var e = typeof Rt == "object" && Rt && Rt.Object === Object && Rt;
   return qn = e, qn;
 }
 var jn, ps;
@@ -983,19 +983,19 @@ function Cf() {
   }
   return sa = e, sa;
 }
-var ia, Rs;
+var ia, Ms;
 function Of() {
-  if (Rs) return ia;
-  Rs = 1;
+  if (Ms) return ia;
+  Ms = 1;
   function e(t) {
     return t !== t;
   }
   return ia = e, ia;
 }
-var la, Ms;
+var la, Rs;
 function kf() {
-  if (Ms) return la;
-  Ms = 1;
+  if (Rs) return la;
+  Rs = 1;
   function e(t, n, a) {
     for (var o = a - 1, r = t.length; ++o < r; )
       if (t[o] === n)
@@ -1080,8 +1080,8 @@ function $f() {
   var e = wf(), t = Ef(), n = e(t);
   return pa = n, pa;
 }
-var Rf = $f();
-const Mf = /* @__PURE__ */ Te(Rf);
+var Mf = $f();
+const Rf = /* @__PURE__ */ Te(Mf);
 function $c() {
   const e = [];
   return {
@@ -1089,7 +1089,7 @@ function $c() {
       cs(e)?.disable(), e.push(t), t.enable();
     },
     unregister(t) {
-      t.disable(), Mf(e, t), cs(e)?.enable();
+      t.disable(), Rf(e, t), cs(e)?.enable();
     }
   };
 }
@@ -1110,9 +1110,9 @@ function ln(e, t = !0) {
     n && (va.unregister(n), n = void 0);
   });
 }
-const Rc = 'a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]', Mc = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"])', Df = (e) => !e.matches(Mc);
+const Mc = 'a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]', Rc = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"])', Df = (e) => !e.matches(Rc);
 function Bf(e) {
-  return Array.from(e.querySelectorAll(Rc)).filter(Df);
+  return Array.from(e.querySelectorAll(Mc)).filter(Df);
 }
 function Qo(e) {
   const t = Bf(e), n = t[0], a = t[t.length - 1];
@@ -1203,7 +1203,7 @@ function Or(e, t, n, a, o) {
   });
 }
 function Dc(e, t, n) {
-  const a = M(e.value);
+  const a = R(e.value);
   let o;
   X(
     e,
@@ -1240,29 +1240,29 @@ const qf = {
   slots: n,
   attrs: a
 }) => {
-  const o = R(() => e.class), r = M(null), s = M(null), i = M(null), l = M(null), c = M(null), d = (w) => {
+  const o = M(() => e.class), r = R(null), s = R(null), i = R(null), l = R(null), c = R(null), d = (w) => {
     l.value = w;
   }, u = (w) => {
     c.value = w;
-  }, f = M(null), h = M(null);
+  }, f = R(null), h = R(null);
   rs(l, (w) => {
-    const P = w[0];
-    f.value = P ? !P.isIntersecting : null;
+    const k = w[0];
+    f.value = k ? !k.isIntersecting : null;
   }), rs(c, (w) => {
-    const P = w[0];
-    h.value = P ? !P.isIntersecting : null;
+    const k = w[0];
+    h.value = k ? !k.isIntersecting : null;
   });
   const v = C(() => e.preventAutoClose || e.preventCloseOnEscape), p = () => t("close");
   ln(p, C(() => !!(e.isOpen && !v.value)));
   const b = C(() => e.isOpen && s.value || !1);
   Cr(b, C(() => e.focusElement)), Or(C(() => !0), C(() => {
   }), C(() => e.parentElement), s, C(() => !!e.isOpen)), Bc(C(() => e.disableBodyScroll !== !1 && !!e.isOpen));
-  const g = Dc(C(() => !!e.isOpen), ac, C(() => (w) => t("visibilityChange", w))), y = C(() => e.isOpen || g.value || e.closeMode === "hide"), A = C(() => [s]), N = C(() => e.preventAutoClose || e.preventCloseOnClick), x = (w) => {
+  const g = Dc(C(() => !!e.isOpen), ac, C(() => (w) => t("visibilityChange", w))), y = C(() => e.isOpen || g.value || e.closeMode === "hide"), A = C(() => [s]), N = C(() => e.preventAutoClose || e.preventCloseOnClick), P = (w) => {
     i.value = w, e.contentRef && (e.contentRef.value = w);
   };
   return () => {
     if (!y.value) return null;
-    const w = n.default?.() ?? [], P = w.find((_) => _.type === "header"), O = w.find((_) => _.type === "footer"), k = !!(P || O) ? w.filter((_) => _.type !== "header" && _.type !== "footer" && _.type !== pr) : w;
+    const w = n.default?.() ?? [], k = w.find((_) => _.type === "header"), x = w.find((_) => _.type === "footer"), O = !!(k || x) ? w.filter((_) => _.type !== "header" && _.type !== "footer" && _.type !== pr) : w;
     return of({
       ...a,
       ClickAwayProvider: gr,
@@ -1272,11 +1272,11 @@ const qf = {
       ProgressCircular: ff,
       className: o.value,
       clickAwayRefs: A,
-      content: k.length ? k : void 0,
-      contentRef: x,
+      content: O.length ? O : void 0,
+      contentRef: P,
       dialogProps: e.dialogProps,
       footer: void 0,
-      footerChildContent: n.footer?.() ?? O?.children,
+      footerChildContent: n.footer?.() ?? x?.children,
       footerChildProps: void 0,
       forceFooterDivider: e.forceFooterDivider,
       forceHeaderDivider: e.forceHeaderDivider,
@@ -1284,7 +1284,7 @@ const qf = {
       hasBottomIntersection: h.value,
       hasTopIntersection: f.value,
       header: void 0,
-      headerChildContent: n.header?.() ?? P?.children,
+      headerChildContent: n.header?.() ?? k?.children,
       headerChildProps: void 0,
       isLoading: e.isLoading,
       isOpen: e.isOpen,
@@ -1390,7 +1390,7 @@ function Xf() {
   ei = 1;
   var e = Wf(), t = qc(), n = Uf(), a = Gf(), o = Kf(), r = Tt(), s = Tc(), i = "[object Map]", l = "[object Object]", c = "[object Promise]", d = "[object Set]", u = "[object WeakMap]", f = "[object DataView]", h = s(e), v = s(t), p = s(n), b = s(a), g = s(o), y = r;
   return (e && y(new e(new ArrayBuffer(1))) != f || t && y(new t()) != i || n && y(n.resolve()) != c || a && y(new a()) != d || o && y(new o()) != u) && (y = function(A) {
-    var N = r(A), x = N == l ? A.constructor : void 0, w = x ? s(x) : "";
+    var N = r(A), P = N == l ? A.constructor : void 0, w = P ? s(P) : "";
     if (w)
       switch (w) {
         case h:
@@ -1485,8 +1485,8 @@ var $a, ci;
 function eh() {
   if (ci) return $a;
   ci = 1;
-  var e = Tt(), t = Tr(), n = cn(), a = "[object Arguments]", o = "[object Array]", r = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", c = "[object Map]", d = "[object Number]", u = "[object Object]", f = "[object RegExp]", h = "[object Set]", v = "[object String]", p = "[object WeakMap]", b = "[object ArrayBuffer]", g = "[object DataView]", y = "[object Float32Array]", A = "[object Float64Array]", N = "[object Int8Array]", x = "[object Int16Array]", w = "[object Int32Array]", P = "[object Uint8Array]", O = "[object Uint8ClampedArray]", T = "[object Uint16Array]", k = "[object Uint32Array]", _ = {};
-  _[y] = _[A] = _[N] = _[x] = _[w] = _[P] = _[O] = _[T] = _[k] = !0, _[a] = _[o] = _[b] = _[r] = _[g] = _[s] = _[i] = _[l] = _[c] = _[d] = _[u] = _[f] = _[h] = _[v] = _[p] = !1;
+  var e = Tt(), t = Tr(), n = cn(), a = "[object Arguments]", o = "[object Array]", r = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", c = "[object Map]", d = "[object Number]", u = "[object Object]", f = "[object RegExp]", h = "[object Set]", v = "[object String]", p = "[object WeakMap]", b = "[object ArrayBuffer]", g = "[object DataView]", y = "[object Float32Array]", A = "[object Float64Array]", N = "[object Int8Array]", P = "[object Int16Array]", w = "[object Int32Array]", k = "[object Uint8Array]", x = "[object Uint8ClampedArray]", T = "[object Uint16Array]", O = "[object Uint32Array]", _ = {};
+  _[y] = _[A] = _[N] = _[P] = _[w] = _[k] = _[x] = _[T] = _[O] = !0, _[a] = _[o] = _[b] = _[r] = _[g] = _[s] = _[i] = _[l] = _[c] = _[d] = _[u] = _[f] = _[h] = _[v] = _[p] = !1;
   function q(j) {
     return n(j) && t(j.length) && !!_[e(j)];
   }
@@ -1507,16 +1507,16 @@ function th() {
     e.exports = i;
   })(St, St.exports)), St.exports;
 }
-var Ra, di;
+var Ma, di;
 function nh() {
-  if (di) return Ra;
+  if (di) return Ma;
   di = 1;
   var e = eh(), t = Ec(), n = th(), a = n && n.isTypedArray, o = a ? t(a) : e;
-  return Ra = o, Ra;
+  return Ma = o, Ma;
 }
-var Ma, fi;
+var Ra, fi;
 function ah() {
-  if (fi) return Ma;
+  if (fi) return Ra;
   fi = 1;
   var e = Vf(), t = Xf(), n = kr(), a = Je(), o = Zf(), r = Qf(), s = Fc(), i = nh(), l = "[object Map]", c = "[object Set]", d = Object.prototype, u = d.hasOwnProperty;
   function f(h) {
@@ -1534,7 +1534,7 @@ function ah() {
         return !1;
     return !0;
   }
-  return Ma = f, Ma;
+  return Ra = f, Ra;
 }
 var oh = ah();
 const Kt = /* @__PURE__ */ Te(oh);
@@ -1756,7 +1756,7 @@ ee.defaultProps = yh;
 const De = /* @__PURE__ */ E((e) => {
   const t = D(), n = U({
     defaultTheme: void 0
-  }), a = R(() => e.class);
+  }), a = M(() => e.class);
   return () => m(ee, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -1803,7 +1803,7 @@ function Ph() {
   return qe(Vc, void 0);
 }
 function wh(e) {
-  const t = M(void 0);
+  const t = R(void 0);
   if (Ph())
     return { tooltipLabel: t };
   const a = () => {
@@ -1858,7 +1858,7 @@ const me = /* @__PURE__ */ E((e, {
 }) => {
   const n = D(), a = Wc(), o = pd("tooltip-label"), {
     tooltipLabel: r
-  } = wh(o), s = R(() => e.class), i = C(() => zc({
+  } = wh(o), s = M(() => e.class), i = C(() => zc({
     ...e,
     className: s.value
   })), l = C(() => {
@@ -1893,7 +1893,7 @@ const me = /* @__PURE__ */ E((e, {
 }, It = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = ke(), a = D(), o = U(), r = R(() => e.class), {
+  const n = ke(), a = D(), o = U(), r = M(() => e.class), {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
@@ -1964,7 +1964,7 @@ const me = /* @__PURE__ */ E((e, {
 }, Ih = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(_h, S(e, n, {
     className: a.value,
     label: t.default?.() ?? n.label,
@@ -1981,7 +1981,7 @@ const me = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = R(() => e.class), r = re(), s = C(() => e.id || r), i = Me(void 0), l = Me(void 0);
+  const a = D(), o = M(() => e.class), r = re(), s = C(() => e.id || r), i = Re(void 0), l = Re(void 0);
   return () => {
     const c = n.default?.(), u = c?.length === 1 && c[0].type === lc ? "p" : "div", f = {
       isOpen: e.isOpen,
@@ -2034,7 +2034,7 @@ const me = /* @__PURE__ */ E((e, {
   element: nr
 } = B(Eh), Uc = {
   size: H.m
-}, Rh = (e) => {
+}, Mh = (e) => {
   const {
     actions: t,
     badge: n,
@@ -2061,7 +2061,7 @@ const me = /* @__PURE__ */ E((e, {
 function Ba(e, t) {
   return t?.type === "error" || e?.complete && !e.getAttribute("src") ? "hasError" : !e || !e.complete ? "isLoading" : "isLoaded";
 }
-function Mh({
+function Rh({
   image: e,
   aspectRatio: t,
   focusPoint: n,
@@ -2143,28 +2143,28 @@ const Bh = "lumx-thumbnail", {
     isAnyDisabled: y,
     disabledStateProps: A,
     size: N,
-    theme: x,
+    theme: P,
     loadingState: w,
-    variant: P,
-    linkProps: O,
+    variant: k,
+    linkProps: x,
     linkAs: T,
-    handleClick: k,
+    handleClick: O,
     handleKeyPress: _,
     ...q
   } = e, j = v || w === "isLoading", I = w === "hasError", F = I && typeof l == "string", V = I && !F, W = {};
   F ? W.visibility = "hidden" : V && (W.display = "none");
-  const z = !!(O?.href || T), Y = !y && !!(z || k || _), ae = {
+  const z = !!(x?.href || T), Y = !y && !!(z || O || _), ae = {
     ...q
   };
   Y && (Object.assign(ae, {
-    as: T || (O?.href ? "a" : "button")
-  }, A), z ? Object.assign(ae, O) : ae["aria-label"] = q["aria-label"] || n);
-  const Z = fe.join(O?.className, r, Fh({
+    as: T || (x?.href ? "a" : "button")
+  }, A), z ? Object.assign(ae, x) : ae["aria-label"] = q["aria-label"] || n);
+  const Z = fe.join(x?.className, r, Fh({
     [`align-${t}`]: !!t,
     [`aspect-ratio-${a}`]: !!a,
     [`size-${N}`]: !!N,
-    [`theme-${x}`]: !!x,
-    [`variant-${P}`]: !!P,
+    [`theme-${P}`]: !!P,
+    [`variant-${k}`]: !!k,
     "is-clickable": Y,
     "has-error": I,
     "has-icon-error-fallback": F,
@@ -2203,14 +2203,14 @@ const Bh = "lumx-thumbnail", {
   }, [F ? ee({
     icon: l,
     size: rt.xxs,
-    theme: x
+    theme: P
   }) : l])]), o]);
   return Y ? ft({
     ref: i,
     ...ae,
     className: Z,
     children: Xr,
-    handleClick: k,
+    handleClick: O,
     handleKeyPress: _
   }) : m("div", S({
     ref: i
@@ -2219,7 +2219,7 @@ const Bh = "lumx-thumbnail", {
   }), [Xr]);
 }, oe = (e) => sc()?.vnode.props?.[e] !== void 0;
 function jh(e, t) {
-  const n = M(Ba(t.value));
+  const n = R(Ba(t.value));
   X(
     [e, t],
     () => {
@@ -2242,7 +2242,7 @@ function jh(e, t) {
 }
 function Hh(e) {
   const { image: t, aspectRatio: n, focusPoint: a, width: o, height: r, element: s, isLoaded: i } = e, l = C(
-    () => Mh({
+    () => Rh({
       image: t.value,
       aspectRatio: n.value,
       focusPoint: a.value,
@@ -2251,7 +2251,7 @@ function Hh(e) {
       element: s.value,
       isLoaded: i.value
     })
-  ), c = M(void 0), d = () => {
+  ), c = R(void 0), d = () => {
     const f = s.value?.offsetWidth, h = s.value?.offsetHeight;
     if (f && h) {
       const v = c.value;
@@ -2282,7 +2282,7 @@ const zh = {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = M(), i = oe("onClick"), l = oe("onKeyPress"), {
+  const a = D(), o = U(), r = M(() => e.class), s = R(), i = oe("onClick"), l = oe("onKeyPress"), {
     isAnyDisabled: c,
     disabledStateProps: d,
     otherProps: u
@@ -2320,11 +2320,11 @@ const zh = {
       handleClick: i ? p : void 0,
       handleKeyPress: l ? b : void 0,
       fallback: y,
-      badge: g && (Array.isArray(g) ? g.map((x) => ({
-        ...x,
+      badge: g && (Array.isArray(g) ? g.map((P) => ({
+        ...P,
         props: {
-          ...x.props,
-          class: fe.join(Nt("badge"), x.props?.class)
+          ...P.props,
+          class: fe.join(Nt("badge"), P.props?.class)
         }
       })) : {
         ...g,
@@ -2355,7 +2355,7 @@ const zh = {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = (l) => t("click", l), i = (l) => t("keypress", l);
+  const a = D(), o = U(), r = M(() => e.class), s = (l) => t("click", l), i = (l) => t("keypress", l);
   return () => {
     const {
       image: l,
@@ -2366,7 +2366,7 @@ const zh = {
       linkAs: h,
       thumbnailProps: v
     } = e, p = u || o.value, b = n.actions?.(), g = n.badge?.();
-    return m(Rh, S(a, {
+    return m(Mh, S(a, {
       className: r.value,
       theme: p,
       size: d,
@@ -2507,33 +2507,33 @@ function _r(e, t, n) {
   }
   const h = Kc(n);
   function v(N) {
-    const x = N > 0, w = Math.abs(N), P = l(), O = d(), T = x ? () => O.nextNode() : () => O.previousNode();
-    let k = null, _ = w;
-    if (P)
-      O.currentNode = P;
-    else if (!x) {
-      if (k = O.lastChild(), !k) return null;
+    const P = N > 0, w = Math.abs(N), k = l(), x = d(), T = P ? () => x.nextNode() : () => x.previousNode();
+    let O = null, _ = w;
+    if (k)
+      x.currentNode = k;
+    else if (!P) {
+      if (O = x.lastChild(), !O) return null;
       _ -= 1;
     }
     for (let q = 0; q < _; q++) {
       const j = T();
       if (j)
-        k = j;
-      else if (P && s) {
-        const I = x ? u() : f();
-        if (!I || I === P) break;
-        k = I, O.currentNode = I;
+        O = j;
+      else if (k && s) {
+        const I = P ? u() : f();
+        if (!I || I === k) break;
+        O = I, x.currentNode = I;
       } else
         break;
     }
-    return k;
+    return O;
   }
   function p(N) {
-    const x = d(!1);
-    let w = x.nextNode();
+    const P = d(!1);
+    let w = P.nextNode();
     for (; w; ) {
       if (N(w)) return w;
-      w = x.nextNode();
+      w = P.nextNode();
     }
     return null;
   }
@@ -2557,24 +2557,24 @@ function _r(e, t, n) {
       if (!a.contains(N)) return u();
       if (N instanceof HTMLElement && N.matches(c))
         return N;
-      const x = d();
-      x.currentNode = N;
-      const w = x.nextNode();
-      return w instanceof HTMLElement ? w : (x.currentNode = N, x.previousNode());
+      const P = d();
+      P.currentNode = N;
+      const w = P.nextNode();
+      return w instanceof HTMLElement ? w : (P.currentNode = N, P.previousNode());
     }
   };
   function y(N) {
-    const x = N(g);
-    if (x && x.matches(o) && a.contains(x)) {
+    const P = N(g);
+    if (P && P.matches(o) && a.contains(P)) {
       const w = l();
-      return w !== x && (w && t.onDeactivate(w), t.onActivate(x)), h.clear(), !0;
+      return w !== P && (w && t.onDeactivate(w), t.onActivate(P)), h.clear(), !0;
     }
     return h.defer(() => y(N)), !1;
   }
   function A(N) {
     if (N === 0) return l() !== null;
-    const x = v(N);
-    return x ? y(() => x) : !1;
+    const P = v(N);
+    return P ? y(() => P) : !1;
   }
   return {
     type: "list",
@@ -2624,76 +2624,76 @@ function _e(e) {
   return n ? null : t;
 }
 function Qh(e, t, n) {
-  const { container: a, rowSelector: o, cellSelector: r, wrap: s = !1 } = e, i = Zh(t, n), l = (O) => O.querySelector(r) !== null, c = (O) => O.querySelector(r), d = (O) => Array.from(O.querySelectorAll(r));
-  function* u(O = "first", T = "next", k) {
+  const { container: a, rowSelector: o, cellSelector: r, wrap: s = !1 } = e, i = Zh(t, n), l = (x) => x.querySelector(r) !== null, c = (x) => x.querySelector(r), d = (x) => Array.from(x.querySelectorAll(r));
+  function* u(x = "first", T = "next", O) {
     const _ = Lt(a, o);
-    O instanceof HTMLElement ? _.currentNode = O : O === "last" && (_.currentNode = Jh(a));
+    x instanceof HTMLElement ? _.currentNode = x : x === "last" && (_.currentNode = Jh(a));
     let q;
     do
       if (q = T === "next" ? _.nextNode() : _.previousNode(), q && l(q)) {
-        const j = k ? k(q) : q;
+        const j = O ? O(q) : q;
         j && (yield j);
       }
     while (q);
   }
   const f = () => _e(u()), h = () => _e(u("last", "prev"));
-  function v(O) {
-    const T = O.closest(o);
+  function v(x) {
+    const T = x.closest(o);
     return T && a.contains(T) ? T : null;
   }
   const p = Kc(n);
   let b = 0;
-  function g(O, T) {
-    const k = d(O);
-    if (k.length === 0) return !1;
-    const _ = Math.min(T, k.length - 1);
-    return i.setActive(k[_]), !0;
-  }
-  function y(O) {
-    const T = v(O);
+  function g(x, T) {
+    const O = d(x);
+    if (O.length === 0) return !1;
+    const _ = Math.min(T, O.length - 1);
+    return i.setActive(O[_]), !0;
+  }
+  function y(x) {
+    const T = v(x);
     if (!T) return !1;
-    const _ = d(T).indexOf(O);
-    return _ === -1 ? !1 : (b = _, i.setActive(O), !0);
+    const _ = d(T).indexOf(x);
+    return _ === -1 ? !1 : (b = _, i.setActive(x), !0);
   }
   function A() {
-    const O = f();
-    return O ? (b = 0, g(O, 0)) : !1;
+    const x = f();
+    return x ? (b = 0, g(x, 0)) : !1;
   }
   function N() {
-    const O = h();
-    return O ? (b = 0, g(O, 0)) : !1;
+    const x = h();
+    return x ? (b = 0, g(x, 0)) : !1;
   }
-  function x(O) {
+  function P(x) {
     if (!i.active) return !1;
     const T = v(i.active);
     if (!T) return !1;
-    const k = d(T), _ = k.indexOf(i.active);
+    const O = d(T), _ = O.indexOf(i.active);
     if (_ === -1) return !1;
-    const q = _ + O;
-    if (q >= 0 && q < k.length)
-      return b = q, i.setActive(k[q]), !0;
+    const q = _ + x;
+    if (q >= 0 && q < O.length)
+      return b = q, i.setActive(O[q]), !0;
     if (!s) return !1;
-    const j = O > 0 ? "next" : "prev", F = _e(u(T, j)) ?? (O > 0 ? f() : h());
+    const j = x > 0 ? "next" : "prev", F = _e(u(T, j)) ?? (x > 0 ? f() : h());
     if (!F) return !1;
     const V = d(F);
     if (V.length === 0) return !1;
-    const W = O > 0 ? 0 : V.length - 1;
+    const W = x > 0 ? 0 : V.length - 1;
     return b = W, i.setActive(V[W]), !0;
   }
-  function w(O) {
+  function w(x) {
     if (!i.active)
-      return O === "next" ? A() : N();
+      return x === "next" ? A() : N();
     const T = v(i.active);
     if (!T) return !1;
-    const k = _e(u(T, O));
-    if (k) return g(k, b);
+    const O = _e(u(T, x));
+    if (O) return g(O, b);
     if (s) {
-      const _ = O === "next" ? f() : h();
+      const _ = x === "next" ? f() : h();
       if (_) return g(_, b);
     }
     return !1;
   }
-  const P = {
+  const k = {
     get activeItem() {
       return i.active;
     },
@@ -2705,32 +2705,32 @@ function Qh(e, t, n) {
     // First cell in last row
     getLast: () => _e(u("last", "prev", c)),
     // First cell matching predicate
-    getMatching: (O) => _e(u("first", "next", (T) => d(T).find(O)))
+    getMatching: (x) => _e(u("first", "next", (T) => d(T).find(x)))
   };
   return {
     type: "grid",
-    selectors: P,
-    goToOffset(O) {
-      if (O === 0) return i.active !== null;
+    selectors: k,
+    goToOffset(x) {
+      if (x === 0) return i.active !== null;
       const T = Array.from(u());
       if (T.length === 0) return !1;
       if (!i.active) {
-        const j = O > 0 ? 0 : T.length - 1, I = O > 0 ? O - 1 : O + 1, F = Math.max(0, Math.min(j + I, T.length - 1));
+        const j = x > 0 ? 0 : T.length - 1, I = x > 0 ? x - 1 : x + 1, F = Math.max(0, Math.min(j + I, T.length - 1));
         return g(T[F], b);
       }
-      const k = v(i.active);
-      if (!k) return !1;
-      const _ = T.indexOf(k);
+      const O = v(i.active);
+      if (!O) return !1;
+      const _ = T.indexOf(O);
       if (_ === -1) return !1;
-      const q = Math.max(0, Math.min(_ + O, T.length - 1));
+      const q = Math.max(0, Math.min(_ + x, T.length - 1));
       return q === _ ? !1 : g(T[q], b);
     },
     clear() {
       i.clear(), p.clear();
     },
-    goTo(O) {
-      const T = O(P);
-      return T && y(T) ? (p.clear(), !0) : (p.defer(() => this.goTo(O)), !1);
+    goTo(x) {
+      const T = x(k);
+      return T && y(T) ? (p.clear(), !0) : (p.defer(() => this.goTo(x)), !1);
     },
     flushPendingNavigation() {
       p.flush();
@@ -2742,10 +2742,10 @@ function Qh(e, t, n) {
       return w("next");
     },
     goLeft() {
-      return x(-1);
+      return P(-1);
     },
     goRight() {
-      return x(1);
+      return P(1);
     }
   };
 }
@@ -2837,42 +2837,42 @@ function tm(e, t) {
   v();
   const b = new MutationObserver((g) => {
     let y = null, A = null, N = null;
-    const x = [], w = [];
-    for (const P of g) {
-      if (P.type === "childList") {
+    const P = [], w = [];
+    for (const k of g) {
+      if (k.type === "childList") {
         if (!y)
-          for (const T of P.removedNodes) {
-            const { value: k } = gi(T, l).next();
-            if (k) {
-              y = k, A = P.nextSibling ?? P.previousSibling ?? null;
+          for (const T of k.removedNodes) {
+            const { value: O } = gi(T, l).next();
+            if (O) {
+              y = O, A = k.nextSibling ?? k.previousSibling ?? null;
               break;
             }
           }
-        for (const T of P.addedNodes)
-          for (const k of gi(T, a))
-            w.push(k);
+        for (const T of k.addedNodes)
+          for (const O of gi(T, a))
+            w.push(O);
       }
-      const O = P.target;
-      P.type === "attributes" && O.matches(a) && (P.attributeName === s && O.getAttribute(s) === "true" ? N = O : r && O.matches(r) && x.push(O));
+      const x = k.target;
+      k.type === "attributes" && x.matches(a) && (k.attributeName === s && x.getAttribute(s) === "true" ? N = x : r && x.matches(r) && P.push(x));
     }
     if (y) {
-      const P = d.hasFocus;
-      d.reset(), p(P, A);
+      const k = d.hasFocus;
+      d.reset(), p(k, A);
     }
     if (w.length > 0) {
-      const P = n.querySelector(l) !== null;
-      h(w, P);
+      const k = n.querySelector(l) !== null;
+      h(w, k);
     }
-    if (x.length > 0) {
-      const P = u.selectors.activeItem;
-      for (const k of x)
-        f(k, "-1");
-      const T = !!(P && x.includes(P) && d.hasFocus);
+    if (P.length > 0) {
+      const k = u.selectors.activeItem;
+      for (const O of P)
+        f(O, "-1");
+      const T = !!(k && P.includes(k) && d.hasFocus);
       p(T);
     }
     if (N) {
-      const P = n.querySelector(l);
-      P && P !== N && f(P, "-1"), f(N, "0");
+      const k = n.querySelector(l);
+      k && k !== N && f(k, "-1"), f(N, "0");
     }
   });
   return b.observe(n, {
@@ -3006,18 +3006,18 @@ function Xc(e, t, n) {
     const I = y(), F = o?.value ?? "";
     (I !== f || I === 0 && F !== h) && (f = I, h = F, g("optionsChange", { optionsLength: I, inputValue: F })), i && o?.setAttribute("aria-expanded", String(A()));
   }
-  const x = 500;
-  let w, P = !1;
-  function O() {
+  const P = 500;
+  let w, k = !1;
+  function x() {
     clearTimeout(w), p > 0 && i && (w = setTimeout(() => {
-      p > 0 && i && (P = !0, g("loadingAnnouncement", !0));
-    }, x));
+      p > 0 && i && (k = !0, g("loadingAnnouncement", !0));
+    }, P));
   }
   function T() {
     const I = p > 0;
-    v = I, g("loadingChange", I), I ? O() : (clearTimeout(w), P && (P = !1, g("loadingAnnouncement", !1)));
+    v = I, g("loadingChange", I), I ? x() : (clearTimeout(w), k && (k = !1, g("loadingAnnouncement", !1)));
   }
-  let k;
+  let O;
   function _() {
     u?.abort(), u = null, s = null;
   }
@@ -3028,30 +3028,30 @@ function Xc(e, t, n) {
         return;
       }
       let Y = !1;
-      const { altKey: ae } = z, Z = k.focusNav;
+      const { altKey: ae } = z, Z = O.focusNav;
       switch (z.key) {
         case "Enter":
-          if (k.isOpen && Z?.selectors.activeItem) {
+          if (O.isOpen && Z?.selectors.activeItem) {
             const { activeItem: J } = Z.selectors;
             Gc(J) || J.click(), Y = !0;
-          } else k.isOpen && !k.isMultiSelect && k.setIsOpen(!1);
+          } else O.isOpen && !O.isMultiSelect && O.setIsOpen(!1);
           break;
         // Open if closed, else move focus within listbox (wrap if enabled).
         case "ArrowDown":
-          k.isOpen ? Z?.selectors.hasNavigableItems && !ae && (Z.selectors.activeItem ? Z.goDown() : Z.goTo((J) => J.getMatching(Bt) ?? J.getFirst())) : (k.setIsOpen(!0), ae || Z?.goTo((J) => J.getMatching(Bt) ?? J.getFirst())), Y = !0;
+          O.isOpen ? Z?.selectors.hasNavigableItems && !ae && (Z.selectors.activeItem ? Z.goDown() : Z.goTo((J) => J.getMatching(Bt) ?? J.getFirst())) : (O.setIsOpen(!0), ae || Z?.goTo((J) => J.getMatching(Bt) ?? J.getFirst())), Y = !0;
           break;
         // Open if closed, else move focus within listbox (wrap if enabled).
         case "ArrowUp":
-          !k.isOpen && !ae ? (k.setIsOpen(!0), Z?.goTo((J) => J.getMatching(Bt) ?? J.getLast())) : k.isOpen && Z?.selectors.hasNavigableItems && (Z.selectors.activeItem ? Z.goUp() : ae || Z.goTo((J) => J.getMatching(Bt) ?? J.getLast())), Y = !0;
+          !O.isOpen && !ae ? (O.setIsOpen(!0), Z?.goTo((J) => J.getMatching(Bt) ?? J.getLast())) : O.isOpen && Z?.selectors.hasNavigableItems && (Z.selectors.activeItem ? Z.goUp() : ae || Z.goTo((J) => J.getMatching(Bt) ?? J.getLast())), Y = !0;
           break;
         case "Escape":
-          k.isOpen ? k.setIsOpen(!1) : k.select(null), Y = !0;
+          O.isOpen ? O.setIsOpen(!1) : O.select(null), Y = !0;
           break;
         case "PageUp":
-          k.isOpen && Z?.selectors.activeItem && Z.goToOffset(-10), Y = !0;
+          O.isOpen && Z?.selectors.activeItem && Z.goToOffset(-10), Y = !0;
           break;
         case "PageDown":
-          k.isOpen && Z?.selectors.activeItem && Z.goToOffset(10), Y = !0;
+          O.isOpen && Z?.selectors.activeItem && Z.goToOffset(10), Y = !0;
           break;
       }
       Y && (z.stopPropagation(), z.preventDefault());
@@ -3062,18 +3062,18 @@ function Xc(e, t, n) {
     if (!o) return;
     const I = !u;
     if (u || (u = new AbortController()), o.getAttribute("aria-activedescendant") || o.setAttribute("aria-activedescendant", ""), o.setAttribute("aria-expanded", String(i)), I) {
-      const F = n?.(k, u.signal) || void 0;
+      const F = n?.(O, u.signal) || void 0;
       q(o, u.signal, F), o.addEventListener(
         "focusout",
         () => {
-          k.setIsOpen(!1);
+          O.setIsOpen(!1);
         },
         { signal: u.signal }
       );
     }
-    r && !s && (s = bi(k, u.signal, g, { wrapNavigation: a }));
+    r && !s && (s = bi(O, u.signal, g, { wrapNavigation: a }));
   }
-  return k = {
+  return O = {
     get trigger() {
       return o;
     },
@@ -3093,11 +3093,11 @@ function Xc(e, t, n) {
       return p > 0;
     },
     setIsOpen(I) {
-      i !== I && (i = I, I ? p > 0 && O() : (s?.clear(), clearTimeout(w), P && (P = !1, g("loadingAnnouncement", !1))), o?.setAttribute("aria-expanded", String(I && A())), g("open", I));
+      i !== I && (i = I, I ? p > 0 && x() : (s?.clear(), clearTimeout(w), k && (k = !1, g("loadingAnnouncement", !1))), o?.setAttribute("aria-expanded", String(I && A())), g("open", I));
     },
     select(I) {
-      e.onSelect?.({ value: I ? Dt(I) : "" }), I && !k.isMultiSelect && (k.focusNav?.clear(), requestAnimationFrame(() => {
-        k.setIsOpen(!1);
+      e.onSelect?.({ value: I ? Dt(I) : "" }), I && !O.isMultiSelect && (O.focusNav?.clear(), requestAnimationFrame(() => {
+        O.setIsOpen(!1);
       }));
     },
     flushPendingNavigation() {
@@ -3144,7 +3144,7 @@ function Xc(e, t, n) {
       if (r === I) return () => {
       };
       const F = !!r;
-      return r = I, o && u && (F ? (_(), j()) : s = bi(k, u.signal, g, { wrapNavigation: a })), () => {
+      return r = I, o && u && (F ? (_(), j()) : s = bi(O, u.signal, g, { wrapNavigation: a })), () => {
         r === I && (r = null, s = null);
       };
     },
@@ -3154,11 +3154,11 @@ function Xc(e, t, n) {
       };
     },
     destroy() {
-      _(), o = null, r = null, l = "", f = 0, h = "", v = !1, c.clear(), d.clear(), p = 0, clearTimeout(w), P = !1;
+      _(), o = null, r = null, l = "", f = 0, h = "", v = !1, c.clear(), d.clear(), p = 0, clearTimeout(w), k = !1;
       for (const I of Object.values(b))
         I.clear();
     }
-  }, k;
+  }, O;
 }
 const nm = 500;
 function Yc(e, t, n) {
@@ -3456,17 +3456,17 @@ async function vm(e, t) {
   } : {
     x: 1,
     y: 1
-  }, x = Jt(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
+  }, P = Jt(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: i,
     rect: y,
     offsetParent: A,
     strategy: l
   }) : y);
   return {
-    top: (g.top - x.top + v.top) / N.y,
-    bottom: (x.bottom - g.bottom + v.bottom) / N.y,
-    left: (g.left - x.left + v.left) / N.x,
-    right: (x.right - g.right + v.right) / N.x
+    top: (g.top - P.top + v.top) / N.y,
+    bottom: (P.bottom - g.bottom + v.bottom) / N.y,
+    left: (g.left - P.left + v.left) / N.x,
+    right: (P.right - g.right + v.right) / N.x
   };
 }
 const gm = async (e, t, n) => {
@@ -3492,7 +3492,7 @@ const gm = async (e, t, n) => {
     } = i[b], {
       x: A,
       y: N,
-      data: x,
+      data: P,
       reset: w
     } = await y({
       x: d,
@@ -3515,7 +3515,7 @@ const gm = async (e, t, n) => {
       ...h,
       [g]: {
         ...h[g],
-        ...x
+        ...P
       }
     }, w && v <= 50 && (v++, typeof w == "object" && (w.placement && (f = w.placement), w.rects && (c = w.rects === !0 ? await s.getElementRects({
       reference: e,
@@ -3554,10 +3554,10 @@ const gm = async (e, t, n) => {
     const u = Qc(d), f = {
       x: n,
       y: a
-    }, h = Lr(o), v = Ir(h), p = await s.getDimensions(c), b = h === "y", g = b ? "top" : "left", y = b ? "bottom" : "right", A = b ? "clientHeight" : "clientWidth", N = r.reference[v] + r.reference[h] - f[h] - r.floating[v], x = f[h] - r.reference[h], w = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
-    let P = w ? w[A] : 0;
-    (!P || !await (s.isElement == null ? void 0 : s.isElement(w))) && (P = i.floating[A] || r.floating[v]);
-    const O = N / 2 - x / 2, T = P / 2 - p[v] / 2 - 1, k = Be(u[g], T), _ = Be(u[y], T), q = k, j = P - p[v] - _, I = P / 2 - p[v] / 2 + O, F = rr(q, I, j), V = !l.arrow && de(o) != null && I !== F && r.reference[v] / 2 - (I < q ? k : _) - p[v] / 2 < 0, W = V ? I < q ? I - q : I - j : 0;
+    }, h = Lr(o), v = Ir(h), p = await s.getDimensions(c), b = h === "y", g = b ? "top" : "left", y = b ? "bottom" : "right", A = b ? "clientHeight" : "clientWidth", N = r.reference[v] + r.reference[h] - f[h] - r.floating[v], P = f[h] - r.reference[h], w = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
+    let k = w ? w[A] : 0;
+    (!k || !await (s.isElement == null ? void 0 : s.isElement(w))) && (k = i.floating[A] || r.floating[v]);
+    const x = N / 2 - P / 2, T = k / 2 - p[v] / 2 - 1, O = Be(u[g], T), _ = Be(u[y], T), q = O, j = k - p[v] - _, I = k / 2 - p[v] / 2 + x, F = rr(q, I, j), V = !l.arrow && de(o) != null && I !== F && r.reference[v] / 2 - (I < q ? O : _) - p[v] / 2 < 0, W = V ? I < q ? I - q : I - j : 0;
     return {
       [h]: f[h] + W,
       data: {
@@ -3602,7 +3602,7 @@ const Am = function(e) {
             placement: p[0]
           }
         };
-      const N = [b[Ae(y)], b[A[0]], b[A[1]]], x = [...((a = s.autoPlacement) == null ? void 0 : a.overflows) || [], {
+      const N = [b[Ae(y)], b[A[0]], b[A[1]]], P = [...((a = s.autoPlacement) == null ? void 0 : a.overflows) || [], {
         placement: y,
         overflows: N
       }], w = p[g + 1];
@@ -3610,31 +3610,31 @@ const Am = function(e) {
         return {
           data: {
             index: g + 1,
-            overflows: x
+            overflows: P
           },
           reset: {
             placement: w
           }
         };
-      const P = x.map((k) => {
-        const _ = de(k.placement);
-        return [k.placement, _ && d ? (
+      const k = P.map((O) => {
+        const _ = de(O.placement);
+        return [O.placement, _ && d ? (
           // Check along the mainAxis and main crossAxis side.
-          k.overflows.slice(0, 2).reduce((q, j) => q + j, 0)
+          O.overflows.slice(0, 2).reduce((q, j) => q + j, 0)
         ) : (
           // Check only the mainAxis.
-          k.overflows[0]
-        ), k.overflows];
-      }).sort((k, _) => k[1] - _[1]), T = ((o = P.filter((k) => k[2].slice(
+          O.overflows[0]
+        ), O.overflows];
+      }).sort((O, _) => O[1] - _[1]), T = ((o = k.filter((O) => O[2].slice(
         0,
         // Aligned placements should not check their opposite crossAxis
         // side.
-        de(k[0]) ? 2 : 3
-      ).every((_) => _ <= 0))[0]) == null ? void 0 : o[0]) || P[0][0];
+        de(O[0]) ? 2 : 3
+      ).every((_) => _ <= 0))[0]) == null ? void 0 : o[0]) || k[0][0];
       return T !== i ? {
         data: {
           index: g + 1,
-          overflows: x
+          overflows: P
         },
         reset: {
           placement: T
@@ -3666,38 +3666,38 @@ const Am = function(e) {
       } = Qe(e, t);
       if ((n = r.arrow) != null && n.alignmentOffset)
         return {};
-      const g = Ae(o), y = Ce(i), A = Ae(i) === i, N = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), x = f || (A || !p ? [Zt(i)] : um(i)), w = v !== "none";
-      !f && w && x.push(...mm(i, p, v, N));
-      const P = [i, ...x], O = await l.detectOverflow(t, b), T = [];
-      let k = ((a = r.flip) == null ? void 0 : a.overflows) || [];
-      if (d && T.push(O[g]), u) {
+      const g = Ae(o), y = Ce(i), A = Ae(i) === i, N = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), P = f || (A || !p ? [Zt(i)] : um(i)), w = v !== "none";
+      !f && w && P.push(...mm(i, p, v, N));
+      const k = [i, ...P], x = await l.detectOverflow(t, b), T = [];
+      let O = ((a = r.flip) == null ? void 0 : a.overflows) || [];
+      if (d && T.push(x[g]), u) {
         const I = Jc(o, s, N);
-        T.push(O[I[0]], O[I[1]]);
+        T.push(x[I[0]], x[I[1]]);
       }
-      if (k = [...k, {
+      if (O = [...O, {
         placement: o,
         overflows: T
       }], !T.every((I) => I <= 0)) {
         var _, q;
-        const I = (((_ = r.flip) == null ? void 0 : _.index) || 0) + 1, F = P[I];
+        const I = (((_ = r.flip) == null ? void 0 : _.index) || 0) + 1, F = k[I];
         if (F && (!(u === "alignment" ? y !== Ce(F) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        k.every((z) => Ce(z.placement) === y ? z.overflows[0] > 0 : !0)))
+        O.every((z) => Ce(z.placement) === y ? z.overflows[0] > 0 : !0)))
           return {
             data: {
               index: I,
-              overflows: k
+              overflows: O
             },
             reset: {
               placement: F
             }
           };
-        let V = (q = k.filter((W) => W.overflows[0] <= 0).sort((W, z) => W.overflows[1] - z.overflows[1])[0]) == null ? void 0 : q.placement;
+        let V = (q = O.filter((W) => W.overflows[0] <= 0).sort((W, z) => W.overflows[1] - z.overflows[1])[0]) == null ? void 0 : q.placement;
         if (!V)
           switch (h) {
             case "bestFit": {
               var j;
-              const W = (j = k.filter((z) => {
+              const W = (j = O.filter((z) => {
                 if (w) {
                   const Y = Ce(z.placement);
                   return Y === y || // Create a bias to the `y` side axis due to horizontal
@@ -3851,16 +3851,16 @@ const Pm = function(e) {
       } = r.floating;
       let b, g;
       u === "top" || u === "bottom" ? (b = u, g = f === (await (s.isRTL == null ? void 0 : s.isRTL(i.floating)) ? "start" : "end") ? "left" : "right") : (g = u, b = f === "end" ? "top" : "bottom");
-      const y = p - d.top - d.bottom, A = v - d.left - d.right, N = Be(p - d[b], y), x = Be(v - d[g], A), w = !t.middlewareData.shift;
-      let P = N, O = x;
-      if ((n = t.middlewareData.shift) != null && n.enabled.x && (O = A), (a = t.middlewareData.shift) != null && a.enabled.y && (P = y), w && !f) {
-        const k = le(d.left, 0), _ = le(d.right, 0), q = le(d.top, 0), j = le(d.bottom, 0);
-        h ? O = v - 2 * (k !== 0 || _ !== 0 ? k + _ : le(d.left, d.right)) : P = p - 2 * (q !== 0 || j !== 0 ? q + j : le(d.top, d.bottom));
+      const y = p - d.top - d.bottom, A = v - d.left - d.right, N = Be(p - d[b], y), P = Be(v - d[g], A), w = !t.middlewareData.shift;
+      let k = N, x = P;
+      if ((n = t.middlewareData.shift) != null && n.enabled.x && (x = A), (a = t.middlewareData.shift) != null && a.enabled.y && (k = y), w && !f) {
+        const O = le(d.left, 0), _ = le(d.right, 0), q = le(d.top, 0), j = le(d.bottom, 0);
+        h ? x = v - 2 * (O !== 0 || _ !== 0 ? O + _ : le(d.left, d.right)) : k = p - 2 * (q !== 0 || j !== 0 ? q + j : le(d.top, d.bottom));
       }
       await l({
         ...t,
-        availableWidth: O,
-        availableHeight: P
+        availableWidth: x,
+        availableHeight: k
       });
       const T = await s.getDimensions(i.floating);
       return v !== T.width || p !== T.height ? {
@@ -3923,7 +3923,7 @@ function hn(e) {
 }
 const Im = ["transform", "translate", "scale", "rotate", "perspective"], Lm = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Em = ["paint", "layout", "strict", "content"];
 function $r(e) {
-  const t = Rr(), n = pe(e) ? ve(e) : e;
+  const t = Mr(), n = pe(e) ? ve(e) : e;
   return Im.some((a) => n[a] ? n[a] !== "none" : !1) || (n.containerType ? n.containerType !== "normal" : !1) || !t && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !t && (n.filter ? n.filter !== "none" : !1) || Lm.some((a) => (n.willChange || "").includes(a)) || Em.some((a) => (n.contain || "").includes(a));
 }
 function $m(e) {
@@ -3937,12 +3937,12 @@ function $m(e) {
   }
   return null;
 }
-function Rr() {
+function Mr() {
   return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
 }
-const Rm = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+const Mm = /* @__PURE__ */ new Set(["html", "body", "#document"]);
 function ut(e) {
-  return Rm.has(et(e));
+  return Mm.has(et(e));
 }
 function ve(e) {
   return ce(e).getComputedStyle(e);
@@ -3995,11 +3995,11 @@ function tu(e) {
     $: i
   };
 }
-function Mr(e) {
+function Rr(e) {
   return pe(e) ? e : e.contextElement;
 }
 function it(e) {
-  const t = Mr(e);
+  const t = Rr(e);
   if (!Se(t))
     return be(1);
   const n = t.getBoundingClientRect(), {
@@ -4013,10 +4013,10 @@ function it(e) {
     y: i
   };
 }
-const Mm = /* @__PURE__ */ be(0);
+const Rm = /* @__PURE__ */ be(0);
 function nu(e) {
   const t = ce(e);
-  return !Rr() || !t.visualViewport ? Mm : {
+  return !Mr() || !t.visualViewport ? Rm : {
     x: t.visualViewport.offsetLeft,
     y: t.visualViewport.offsetTop
   };
@@ -4026,7 +4026,7 @@ function Dm(e, t, n) {
 }
 function Ge(e, t, n, a) {
   t === void 0 && (t = !1), n === void 0 && (n = !1);
-  const o = e.getBoundingClientRect(), r = Mr(e);
+  const o = e.getBoundingClientRect(), r = Rr(e);
   let s = be(1);
   t && (a ? pe(a) && (s = it(a)) : s = it(e));
   const i = Dm(r, n, a) ? nu(r) : be(0);
@@ -4104,7 +4104,7 @@ function jm(e, t) {
   let r = a.clientWidth, s = a.clientHeight, i = 0, l = 0;
   if (o) {
     r = o.width, s = o.height;
-    const d = Rr();
+    const d = Mr();
     (!d || d && t === "fixed") && (i = o.offsetLeft, l = o.offsetTop);
   }
   const c = pn(a);
@@ -4298,25 +4298,25 @@ function Zm(e, t) {
       threshold: le(0, Be(1, l)) || 1
     };
     let N = !0;
-    function x(w) {
-      const P = w[0].intersectionRatio;
-      if (P !== l) {
+    function P(w) {
+      const k = w[0].intersectionRatio;
+      if (k !== l) {
         if (!N)
           return s();
-        P ? s(!1, P) : a = setTimeout(() => {
+        k ? s(!1, k) : a = setTimeout(() => {
           s(!1, 1e-7);
         }, 1e3);
       }
-      P === 1 && !su(c, e.getBoundingClientRect()) && s(), N = !1;
+      k === 1 && !su(c, e.getBoundingClientRect()) && s(), N = !1;
     }
     try {
-      n = new IntersectionObserver(x, {
+      n = new IntersectionObserver(P, {
         ...A,
         // Handle <iframe>s
         root: o.ownerDocument
       });
     } catch {
-      n = new IntersectionObserver(x, A);
+      n = new IntersectionObserver(P, A);
     }
     n.observe(e);
   }
@@ -4330,7 +4330,7 @@ function iu(e, t, n, a) {
     elementResize: s = typeof ResizeObserver == "function",
     layoutShift: i = typeof IntersectionObserver == "function",
     animationFrame: l = !1
-  } = a, c = Mr(e), d = o || r ? [...c ? Ct(c) : [], ...Ct(t)] : [];
+  } = a, c = Rr(e), d = o || r ? [...c ? Ct(c) : [], ...Ct(t)] : [];
   d.forEach((g) => {
     o && g.addEventListener("scroll", n, {
       passive: !0
@@ -4394,35 +4394,35 @@ function Ti(e, t) {
 function uu(e, t, n) {
   n === void 0 && (n = {});
   const a = n.whileElementsMounted, o = C(() => {
-    var P;
-    return (P = gt(n.open)) != null ? P : !0;
+    var k;
+    return (k = gt(n.open)) != null ? k : !0;
   }), r = C(() => gt(n.middleware)), s = C(() => {
-    var P;
-    return (P = gt(n.placement)) != null ? P : "bottom";
+    var k;
+    return (k = gt(n.placement)) != null ? k : "bottom";
   }), i = C(() => {
-    var P;
-    return (P = gt(n.strategy)) != null ? P : "absolute";
+    var k;
+    return (k = gt(n.strategy)) != null ? k : "absolute";
   }), l = C(() => {
-    var P;
-    return (P = gt(n.transform)) != null ? P : !0;
-  }), c = C(() => ki(e.value)), d = C(() => ki(t.value)), u = M(0), f = M(0), h = M(i.value), v = M(s.value), p = Me({}), b = M(!1), g = C(() => {
-    const P = {
+    var k;
+    return (k = gt(n.transform)) != null ? k : !0;
+  }), c = C(() => ki(e.value)), d = C(() => ki(t.value)), u = R(0), f = R(0), h = R(i.value), v = R(s.value), p = Re({}), b = R(!1), g = C(() => {
+    const k = {
       position: h.value,
       left: "0",
       top: "0"
     };
     if (!d.value)
-      return P;
-    const O = Ti(d.value, u.value), T = Ti(d.value, f.value);
+      return k;
+    const x = Ti(d.value, u.value), T = Ti(d.value, f.value);
     return l.value ? {
-      ...P,
-      transform: "translate(" + O + "px, " + T + "px)",
+      ...k,
+      transform: "translate(" + x + "px, " + T + "px)",
       ...cu(d.value) >= 1.5 && {
         willChange: "transform"
       }
     } : {
       position: h.value,
-      left: O + "px",
+      left: x + "px",
       top: T + "px"
     };
   });
@@ -4430,19 +4430,19 @@ function uu(e, t, n) {
   function A() {
     if (c.value == null || d.value == null)
       return;
-    const P = o.value;
+    const k = o.value;
     ap(c.value, d.value, {
       middleware: r.value,
       placement: s.value,
       strategy: i.value
-    }).then((O) => {
-      u.value = O.x, f.value = O.y, h.value = O.strategy, v.value = O.placement, p.value = O.middlewareData, b.value = P !== !1;
+    }).then((x) => {
+      u.value = x.x, f.value = x.y, h.value = x.strategy, v.value = x.placement, p.value = x.middlewareData, b.value = k !== !1;
     });
   }
   function N() {
     typeof y == "function" && (y(), y = void 0);
   }
-  function x() {
+  function P() {
     if (N(), a === void 0) {
       A();
       return;
@@ -4457,7 +4457,7 @@ function uu(e, t, n) {
   }
   return X([r, s, i, o], A, {
     flush: "sync"
-  }), X([c, d], x, {
+  }), X([c, d], P, {
     flush: "sync"
   }), X(o, w, {
     flush: "sync"
@@ -4571,7 +4571,7 @@ function up(e) {
   };
 }
 function dp(e, t) {
-  const n = M(!1), a = Me();
+  const n = R(!1), a = Re();
   return Xe((r) => {
     const s = t.value;
     if (!s) return;
@@ -4620,7 +4620,7 @@ function mp(e) {
 const vn = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = re(), a = R(() => e.class), o = M(null), r = M(null), s = C(() => e.placement || qt.placement), i = C(() => e.closeMode || qt.closeMode), l = C(() => e.ariaLinkMode || qt.ariaLinkMode), c = C(() => e.zIndex || qt.zIndex), {
+  const n = re(), a = M(() => e.class), o = R(null), r = R(null), s = C(() => e.placement || qt.placement), i = C(() => e.closeMode || qt.closeMode), l = C(() => e.ariaLinkMode || qt.ariaLinkMode), c = C(() => e.zIndex || qt.zIndex), {
     floatingStyles: d,
     placement: u
   } = uu(o, r, {
@@ -4636,8 +4636,8 @@ const vn = /* @__PURE__ */ E((e, {
     let y;
     const A = u.value ?? s.value, N = hp({
       slotContent: t.default?.(),
-      setAnchorElement: (x) => {
-        o.value = x?.$el || x;
+      setAnchorElement: (P) => {
+        o.value = P?.$el || P;
       },
       isMounted: b.value,
       id: n,
@@ -4645,8 +4645,8 @@ const vn = /* @__PURE__ */ E((e, {
       ariaLinkMode: l.value
     });
     return m(ne, null, [N, b.value && m(tn, null, mp(y = Dr({
-      ref: (x) => {
-        const w = x?.$el || x;
+      ref: (P) => {
+        const w = P?.$el || P;
         r.value = w, h(w);
       },
       id: n,
@@ -4670,7 +4670,7 @@ const vn = /* @__PURE__ */ E((e, {
   emit: t,
   expose: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = yc(() => a.tabindex, "tabIndex"), {
+  const a = D(), o = U(), r = M(() => e.class), s = yc(() => a.tabindex, "tabIndex"), {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
@@ -4679,7 +4679,7 @@ const vn = /* @__PURE__ */ E((e, {
     ...a
   }))), d = (h) => {
     i.value || t("click", h);
-  }, u = M(null), f = (h) => {
+  }, u = R(null), f = (h) => {
     u.value = h?.$el ?? h;
   };
   return n({
@@ -4732,7 +4732,7 @@ gn.defaultProps = gp;
 const yN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(gn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -4772,7 +4772,7 @@ function mt(e, t, n = { immediate: !0 }) {
   };
 }
 function ye(e, t) {
-  const { handle: n } = xe(), a = M(t);
+  const { handle: n } = xe(), a = R(t);
   return mt(n, (o) => {
     if (o)
       return o.subscribe(e, (r) => {
@@ -4787,7 +4787,7 @@ function Br() {
 const yp = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = R(() => e.class), {
+  const n = D(), a = M(() => e.class), {
     listboxId: o,
     anchorRef: r,
     setHandle: s,
@@ -4796,7 +4796,7 @@ const yp = /* @__PURE__ */ E((e, {
     isOpen: l
   } = Br(), c = ye("optionsChange", {
     optionsLength: 0
-  }), d = ye("loadingChange", !1), u = M(null);
+  }), d = ye("loadingChange", !1), u = R(null);
   return X(u, (f) => {
     f && (s(am(f, {
       onSelect(h) {
@@ -4987,7 +4987,7 @@ const vu = "lumx-text-field", gu = `${vu}__input-native`, {
 }, Op = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = (c, d, u) => {
+  const n = D(), a = U(), o = M(() => e.class), r = (c, d, u) => {
     u?.stopImmediatePropagation(), t("change", c, d, u);
   }, s = (c, d, u) => {
     t("input", c, d, u);
@@ -5050,7 +5050,7 @@ const vu = "lumx-text-field", gu = `${vu}__input-native`, {
   }), null);
 };
 function _p(e, t, n) {
-  const a = M(e.value);
+  const a = R(e.value);
   return Xe(
     () => {
       const o = t.value;
@@ -5081,7 +5081,7 @@ const Ip = {
 }, Lp = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = M(null), s = _p(C(() => e.rows ?? bu.rows), r, C(() => e.value)), i = (u, f, h) => {
+  const n = D(), a = U(), o = M(() => e.class), r = R(null), s = _p(C(() => e.rows ?? bu.rows), r, C(() => e.value)), i = (u, f, h) => {
     h?.stopImmediatePropagation(), t("change", u, f, h);
   }, l = (u, f, h) => {
     t("input", u, f, h);
@@ -5111,8 +5111,8 @@ const Ip = {
 function Ep(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
-const $p = "InputLabel", Rp = "lumx-input-label", yu = Rp, {
-  block: Mp
+const $p = "InputLabel", Mp = "lumx-input-label", yu = Mp, {
+  block: Rp
 } = B(yu), Dp = {};
 function Ve(e) {
   const {
@@ -5130,7 +5130,7 @@ function Ve(e) {
     ref: l
   }, c, {
     htmlFor: a,
-    className: L(n, Mp({
+    className: L(n, Rp({
       "is-required": o,
       [`theme-${r}`]: !!r,
       "has-custom-typography": !!i
@@ -5209,15 +5209,15 @@ const Vp = (e) => {
     textFieldRef: y,
     helperId: A,
     errorId: N,
-    labelId: x,
+    labelId: P,
     theme: w,
-    value: P,
-    afterElement: O,
+    value: k,
+    afterElement: x,
     input: T,
-    isFocus: k,
+    isFocus: O,
     IconButton: _,
     ref: q
-  } = e, j = (P || "").length, I = j > 0;
+  } = e, j = (k || "").length, I = j > 0;
   return m("div", {
     ref: q,
     className: L(n, Hp({
@@ -5229,9 +5229,9 @@ const Vp = (e) => {
       "has-label": !!f,
       "has-placeholder": !!g,
       "has-textarea": b,
-      "has-value": !!P,
+      "has-value": !!k,
       "is-disabled": v,
-      "is-focus": k || r,
+      "is-focus": O || r,
       "is-valid": u,
       [`theme-${w}`]: !!w
     }))
@@ -5239,7 +5239,7 @@ const Vp = (e) => {
     className: ue("header")
   }, [f && Ve({
     ...h,
-    id: x,
+    id: P,
     htmlFor: c,
     className: ue("label"),
     isRequired: d,
@@ -5268,7 +5268,7 @@ const Vp = (e) => {
     icon: u ? br : wt,
     size: H.xxs
   }), a && I && !v && m(_, S({
-    "aria-describedby": x
+    "aria-describedby": P
   }, a, {
     className: ue("input-clear"),
     icon: Nd,
@@ -5276,9 +5276,9 @@ const Vp = (e) => {
     size: H.s,
     theme: w,
     type: "button"
-  }), null), O && m("div", {
+  }), null), x && m("div", {
     className: ue("after-element")
-  }, [O])]), s && o && Oe({
+  }, [x])]), s && o && Oe({
     children: o,
     className: ue("helper"),
     kind: ie.error,
@@ -5304,13 +5304,13 @@ const Vp = (e) => {
 }, Up = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = Wc("chips"), o = U(), r = R(() => e.class), s = re(), i = C(() => e.id || s), l = M(!1), {
+  const n = D(), a = Wc("chips"), o = U(), r = M(() => e.class), s = re(), i = C(() => e.id || s), l = R(!1), {
     isAnyDisabled: c,
     disabledStateProps: d
   } = te(C(() => ({
     ...e,
     ...n
-  }))), u = M(null);
+  }))), u = R(null);
   X(u, (y) => {
     const A = y?.$el ?? y ?? null;
     e.inputRef?.(A);
@@ -5332,13 +5332,13 @@ const Vp = (e) => {
     const y = e.theme || o.value, {
       helperId: A,
       errorId: N,
-      describedById: x,
+      describedById: P,
       labelId: w
     } = f.value, {
-      class: P,
-      className: O,
+      class: k,
+      className: x,
       "aria-describedby": T,
-      disabled: k,
+      disabled: O,
       isDisabled: _,
       "aria-disabled": q,
       ariaDisabled: j,
@@ -5356,7 +5356,7 @@ const Vp = (e) => {
       placeholder: e.placeholder,
       theme: y,
       "aria-invalid": e.hasError || void 0,
-      "aria-describedby": x,
+      "aria-describedby": P,
       ...d.value,
       readOnly: !!Y.readOnly || !!d.value["aria-disabled"],
       onChange: h,
@@ -5414,7 +5414,7 @@ const Vp = (e) => {
   emit: t,
   attrs: n
 }) => {
-  const a = R(() => e.class), {
+  const a = M(() => e.class), {
     listboxId: o,
     anchorRef: r,
     setHandle: s,
@@ -5422,13 +5422,14 @@ const Vp = (e) => {
   } = xe(), {
     isOpen: l,
     setIsOpen: c
-  } = Br(), d = M(null);
+  } = Br(), d = R(null);
   Ke(() => {
     const v = d.value;
     v && s(Np(v, {
       onSelect(p) {
-        t("change", p.value), e.onSelect?.(p), t("select", p);
+        e.onSelect?.(p), t("select", p), e.selectionMode === "keep" || (e.selectionMode === "clear" ? t("change", "") : t("change", p.value));
       },
+      selectionMode: e.selectionMode,
       filter: e.filter,
       openOnFocus: e.openOnFocus
     }));
@@ -5446,31 +5447,32 @@ const Vp = (e) => {
       onSelect: p,
       filter: b,
       openOnFocus: g,
-      class: y,
-      ...A
-    } = e, N = {
-      onChange: (P, O, T) => t("change", P, O, T),
-      onInput: (P) => t("change", P),
-      onFocus: (P) => t("focus", P),
-      onBlur: (P) => t("blur", P),
-      onClear: (P) => t("clear", P)
+      selectionMode: y,
+      class: A,
+      ...N
+    } = e, P = {
+      onChange: (x, T, O) => t("change", x, T, O),
+      onInput: (x) => t("change", x),
+      onFocus: (x) => t("focus", x),
+      onBlur: (x) => t("blur", x),
+      onClear: (x) => t("clear", x)
     }, {
-      ariaDisabled: x,
-      ...w
-    } = A;
+      ariaDisabled: w,
+      ...k
+    } = N;
     return Sp({
       ...n,
-      ...w,
-      "aria-disabled": x ?? n.ariaDisabled,
-      ...N,
+      ...k,
+      "aria-disabled": w ?? n.ariaDisabled,
+      ...P,
       listboxId: o,
       isOpen: l.value && (!!u.value?.optionsLength || f.value),
       filter: b,
-      textFieldRef: (P) => {
-        r.value = P, e.textFieldRef?.(P);
+      textFieldRef: (x) => {
+        r.value = x, e.textFieldRef?.(x);
       },
-      inputRef: (P) => {
-        d.value = P, e.inputRef?.(P);
+      inputRef: (x) => {
+        d.value = x, e.inputRef?.(x);
       },
       toggleButtonProps: v,
       handleToggle: h,
@@ -5483,7 +5485,7 @@ const Vp = (e) => {
 }, {
   name: "LumxComboboxInput",
   inheritAttrs: !1,
-  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "aria-disabled", "multiline", "placeholder", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef", "toggleButtonProps", "onSelect", "filter", "openOnFocus"),
+  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "aria-disabled", "multiline", "placeholder", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef", "toggleButtonProps", "onSelect", "filter", "openOnFocus", "selectionMode"),
   emits: {
     select: (e) => !!e,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5547,10 +5549,10 @@ function tv() {
 const nv = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class), {
+  const n = D(), a = M(() => e.class), {
     listboxId: o,
     handle: r
-  } = xe(), s = M(null);
+  } = xe(), s = R(null);
   ev({
     type: e.type || "listbox"
   }), mt([r, s], ([d, u]) => {
@@ -5684,7 +5686,7 @@ const sv = "lumx-combobox-option", {
   } = e;
   let A, N;
   l || (A = u ? "gridcell" : "option", N = u ? "row" : "none");
-  const x = Fr({
+  const P = Fr({
     as: "button",
     ...v,
     id: c,
@@ -5696,9 +5698,9 @@ const sv = "lumx-combobox-option", {
     "aria-disabled": d ? "true" : void 0,
     role: A,
     children: o
-  }), w = t && b && !l ? m(t, b, rv(x) ? x : {
-    default: () => [x]
-  }) : x;
+  }), w = t && b && !l ? m(t, b, rv(P) ? P : {
+    default: () => [P]
+  }) : P;
   return tt({
     ref: p,
     size: "tiny",
@@ -5732,11 +5734,11 @@ const dv = {
   slots: t,
   emit: n
 }) => {
-  const a = D(), o = R(() => e.class), {
+  const a = D(), o = M(() => e.class), {
     type: r
   } = tv(), {
     handle: s
-  } = xe(), i = r === "grid", l = re(), c = re(), d = M(null), u = M(!1);
+  } = xe(), i = r === "grid", l = re(), c = re(), d = R(null), u = R(!1);
   cv({
     optionId: l
   }), mt([s, d], ([p, b]) => {
@@ -5808,7 +5810,7 @@ const dv = {
   slots: t,
   attrs: n
 }) => {
-  const a = re(), o = R(() => e.class), {
+  const a = re(), o = M(() => e.class), {
     disabledStateProps: r,
     otherProps: s
   } = te(e);
@@ -5933,12 +5935,12 @@ const Pv = "lumx-popover", {
     clickAwayRefs: A,
     unmountSentinel: N,
     // Forwarded props
-    ...x
-  } = e, w = !d && i === "hide", P = d || i === "hide", O = o, T = Math.min(l || 0, 5);
-  return P ? m(t, {
+    ...P
+  } = e, w = !d && i === "hide", k = d || i === "hide", x = o, T = Math.min(l || 0, 5);
+  return k ? m(t, {
     enabled: g
   }, {
-    default: () => [m(O, S(x, {
+    default: () => [m(x, S(P, {
       ref: p,
       className: L(s, wv({
         [`theme-${v}`]: !!v,
@@ -6001,17 +6003,17 @@ function Iv(e) {
     boundary: u,
     parsedPlacement: f,
     arrowElement: h
-  } = e, v = ot(r), p = ot(s), b = ot(i), g = ot(l), y = ot(c), A = ot(d), N = [], x = (t?.away ?? 0) + (n ? qa : 0), w = t?.along ?? 0;
-  return N.push(lu({ mainAxis: x, crossAxis: w })), f.isAuto ? N.push(
+  } = e, v = ot(r), p = ot(s), b = ot(i), g = ot(l), y = ot(c), A = ot(d), N = [], P = (t?.away ?? 0) + (n ? qa : 0), w = t?.along ?? 0;
+  return N.push(lu({ mainAxis: P, crossAxis: w })), f.isAuto ? N.push(
     Jm({ ...u ? { boundary: u } : {}, alignment: f.autoAlignment })
   ) : (N.push(ep(u ? { boundary: u } : {})), N.push(Qm(u ? { boundary: u } : {}))), (a || o || v || p || b || g || y || A) && N.push(
     tp({
       ...u ? { boundary: u } : {},
-      apply({ availableHeight: O, rects: T, elements: k }) {
+      apply({ availableHeight: x, rects: T, elements: O }) {
         const _ = `${T.reference.width}px`;
-        k.floating.style.width = v || (a === "width" ? _ : ""), k.floating.style.minWidth = _v(p, a === "minWidth" ? _ : ""), k.floating.style.maxWidth = Li(b, a === "maxWidth" ? _ : ""), k.floating.style.height = g || "", k.floating.style.minHeight = y || "";
-        const q = `${Math.max(0, O - qa)}px`;
-        k.floating.style.maxHeight = Li(
+        O.floating.style.width = v || (a === "width" ? _ : ""), O.floating.style.minWidth = _v(p, a === "minWidth" ? _ : ""), O.floating.style.maxWidth = Li(b, a === "maxWidth" ? _ : ""), O.floating.style.height = g || "", O.floating.style.minHeight = y || "";
+        const q = `${Math.max(0, x - qa)}px`;
+        O.floating.style.maxHeight = Li(
           A,
           o ? q : ""
         );
@@ -6030,7 +6032,7 @@ function Ev(e) {
   return e.isAuto ? void 0 : e.floatingPlacement;
 }
 function $v(e) {
-  const t = M(), n = M(), a = C(() => kv(e.placement?.value)), o = C(() => Tv(e.fitToAnchorWidth?.value)), r = C(
+  const t = R(), n = R(), a = C(() => kv(e.placement?.value)), o = C(() => Tv(e.fitToAnchorWidth?.value)), r = C(
     () => Iv({
       offset: e.offset?.value,
       hasArrow: e.hasArrow?.value,
@@ -6070,21 +6072,21 @@ function $v(e) {
     arrowRef: n
   };
 }
-function Rv(e, t = !0) {
-  const n = M(!1);
+function Mv(e, t = !0) {
+  const n = R(!1);
   Xe(() => {
     const a = lt(e) ? e.value : e, o = lt(t) ? t.value : t;
     o && !n.value && a && (a.focus(), n.value = !0), o || (n.value = !1);
   });
 }
-const Mv = {
+const Rv = {
   close: () => !0
 }, bn = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n,
   attrs: a
 }) => {
-  const o = R(() => e.class), r = C(() => Pt(e.anchorRef)), s = Q(e, "focusElement"), {
+  const o = M(() => e.class), r = C(() => Pt(e.anchorRef)), s = Q(e, "focusElement"), {
     styles: i,
     isPositioned: l,
     position: c,
@@ -6114,7 +6116,7 @@ const Mv = {
   };
   ln(C(() => f), C(() => !!(e.isOpen && e.closeOnEscape)));
   const h = C(() => !e.withFocusTrap && !!e.isOpen && l.value);
-  Rv(s, h);
+  Mv(s, h);
   const v = C(() => !e.withFocusTrap || !e.isOpen ? !1 : e.focusTrapZoneElement || d.value || !1);
   Cr(v, s);
   const p = C(() => [d, r]);
@@ -6145,7 +6147,7 @@ const Mv = {
   name: "LumxPopover",
   inheritAttrs: !1,
   props: $()("anchorRef", "as", "boundaryRef", "closeMode", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "focusAnchorOnClose", "hasArrow", "isOpen", "offset", "parentElement", "placement", "usePortal", "focusTrapZoneElement", "zIndex", "withFocusTrap", "theme", "class"),
-  emits: Mv
+  emits: Rv
 });
 function Dv(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
@@ -6153,7 +6155,7 @@ function Dv(e) {
 const ku = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = R(() => e.class), a = M(null), o = C(() => a.value?.$el ?? void 0), r = M(!1), {
+  const n = M(() => e.class), a = R(null), o = C(() => a.value?.$el ?? void 0), r = R(!1), {
     optionId: s
   } = uv(), i = ye("activeDescendantChange", null), l = `${s}-more-info`;
   function c(u) {
@@ -6274,7 +6276,7 @@ const ku = /* @__PURE__ */ E((e, {
   slots: t,
   attrs: n
 }) => {
-  const a = R(() => e.class), {
+  const a = M(() => e.class), {
     handle: o
   } = xe();
   return mt(o, (r) => r?.registerSkeleton()), () => {
@@ -6383,7 +6385,7 @@ function Qv(e) {
 const yn = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => {
     const o = e.as || "div", r = Qv({
       ...e,
@@ -6404,7 +6406,7 @@ const yn = /* @__PURE__ */ E((e, {
 }), eg = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = R(() => e.class), {
+  const n = M(() => e.class), {
     anchorRef: a
   } = xe(), {
     isOpen: o,
@@ -6435,7 +6437,7 @@ const yn = /* @__PURE__ */ E((e, {
   slots: t,
   emit: n
 }) => {
-  const a = D(), o = re(), r = M(null), s = Me(null);
+  const a = D(), o = re(), r = R(null), s = Re(null);
   return bp({
     handle: s,
     setHandle: (l) => {
@@ -6486,7 +6488,7 @@ const ag = "lumx-combobox-section", og = (e, {
 }, AN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(pt, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -6512,7 +6514,7 @@ An.displayName = rg;
 An.className = _u;
 An.defaultProps = sg;
 const Iu = /* @__PURE__ */ E((e) => {
-  const t = D(), n = R(() => e.class);
+  const t = D(), n = M(() => e.class);
   return () => m(An, S(t, {
     className: n.value
   }), null);
@@ -6526,7 +6528,7 @@ const Iu = /* @__PURE__ */ E((e) => {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = R(() => e.class), {
+  const a = D(), o = M(() => e.class), {
     isAnyDisabled: r,
     disabledStateProps: s,
     otherProps: i
@@ -6560,7 +6562,7 @@ const Iu = /* @__PURE__ */ E((e) => {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = R(() => e.class), r = oe("onClick"), {
+  const a = D(), o = M(() => e.class), r = oe("onClick"), {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
@@ -6632,7 +6634,7 @@ Sn.defaultProps = hg;
 const mg = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = re(), o = R(() => e.class);
+  const n = D(), a = re(), o = M(() => e.class);
   return () => m(Sn, S(e, n, {
     className: o.value,
     id: a,
@@ -6646,9 +6648,9 @@ const mg = /* @__PURE__ */ E((e, {
 }), Eu = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = R(() => e.class), {
+  const n = M(() => e.class), {
     handle: a
-  } = xe(), o = M(null), r = ic({
+  } = xe(), o = R(null), r = ic({
     hidden: !1,
     "aria-hidden": !1
   });
@@ -6760,7 +6762,7 @@ function Ha(e) {
 const Ag = "lumx-generic-block", {
   block: Sg,
   element: za
-} = B(Ag), Ri = {
+} = B(Ag), Mi = {
   gap: H.big,
   orientation: ct.horizontal
 }, Ng = (e) => {
@@ -6771,10 +6773,10 @@ const Ag = "lumx-generic-block", {
     children: o,
     actions: r,
     actionsProps: s,
-    gap: i = Ri.gap,
+    gap: i = Mi.gap,
     ref: l,
     content: c,
-    orientation: d = Ri.orientation,
+    orientation: d = Mi.orientation,
     contentProps: u,
     FlexBox: f,
     ...h
@@ -6805,7 +6807,7 @@ const Ag = "lumx-generic-block", {
 }, xg = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => {
     const o = t.figure?.(), r = t.default?.(), s = t.actions?.(), i = {
       verticalAlign: e.verticalAlign,
@@ -6839,10 +6841,10 @@ const Ag = "lumx-generic-block", {
   inheritAttrs: !1,
   props: $()("as", "orientation", "verticalAlign", "horizontalAlign", "gap", "fillSpace", "wrap", "marginAuto", "noShrink", "figureProps", "contentProps", "actionsProps", "class")
 });
-var Va, Mi;
+var Va, Ri;
 function Nn() {
-  if (Mi) return Va;
-  Mi = 1;
+  if (Ri) return Va;
+  Ri = 1;
   var e = Tt(), t = cn(), n = "[object Symbol]";
   function a(o) {
     return typeof o == "symbol" || t(o) && e(o) == n;
@@ -7007,7 +7009,7 @@ function $g() {
   return oo = t, oo;
 }
 var ro, Zi;
-function Rg() {
+function Mg() {
   if (Zi) return ro;
   Zi = 1;
   var e = Pn();
@@ -7018,10 +7020,10 @@ function Rg() {
   return ro = t, ro;
 }
 var so, Ji;
-function Mg() {
+function Rg() {
   if (Ji) return so;
   Ji = 1;
-  var e = Ig(), t = Lg(), n = Eg(), a = $g(), o = Rg();
+  var e = Ig(), t = Lg(), n = Eg(), a = $g(), o = Mg();
   function r(s) {
     var i = -1, l = s == null ? 0 : s.length;
     for (this.clear(); ++i < l; ) {
@@ -7035,7 +7037,7 @@ var io, Qi;
 function Dg() {
   if (Qi) return io;
   Qi = 1;
-  var e = _g(), t = Mg(), n = qc();
+  var e = _g(), t = Rg(), n = qc();
   function a() {
     this.size = 0, this.__data__ = {
       hash: new e(),
@@ -7256,7 +7258,7 @@ function Zg() {
   return wo = o, wo;
 }
 var Co, gl;
-function Ru() {
+function Mu() {
   if (gl) return Co;
   gl = 1;
   var e = 9007199254740991, t = /^(?:0|[1-9]\d*)$/;
@@ -7267,10 +7269,10 @@ function Ru() {
   return Co = n, Co;
 }
 var Oo, bl;
-function Mu() {
+function Ru() {
   if (bl) return Oo;
   bl = 1;
-  var e = Zg(), t = Cn(), n = Ru(), a = sn(), o = jr();
+  var e = Zg(), t = Cn(), n = Mu(), a = sn(), o = jr();
   function r(s, i, l, c) {
     if (!a(s))
       return s;
@@ -7293,7 +7295,7 @@ var ko, yl;
 function Jg() {
   if (yl) return ko;
   yl = 1;
-  var e = Xg(), t = Mu(), n = Cn();
+  var e = Xg(), t = Ru(), n = Cn();
   function a(o, r, s) {
     for (var i = -1, l = r.length, c = {}; ++i < l; ) {
       var d = r[i], u = e(o, d);
@@ -7316,7 +7318,7 @@ var _o, Sl;
 function eb() {
   if (Sl) return _o;
   Sl = 1;
-  var e = Cn(), t = kr(), n = Je(), a = Ru(), o = Tr(), r = jr();
+  var e = Cn(), t = kr(), n = Je(), a = Mu(), o = Tr(), r = jr();
   function s(i, l, c) {
     l = e(l, i);
     for (var d = -1, u = l.length, f = !1; ++d < u; ) {
@@ -7372,9 +7374,9 @@ function ob() {
   }
   return $o = o, $o;
 }
-var Ro, Cl;
+var Mo, Cl;
 function rb() {
-  if (Cl) return Ro;
+  if (Cl) return Mo;
   Cl = 1;
   var e = ab(), t = ob();
   function n(a, o, r, s, i) {
@@ -7385,18 +7387,18 @@ function rb() {
     }
     return i;
   }
-  return Ro = n, Ro;
+  return Mo = n, Mo;
 }
-var Mo, Ol;
+var Ro, Ol;
 function sb() {
-  if (Ol) return Mo;
+  if (Ol) return Ro;
   Ol = 1;
   var e = rb();
   function t(n) {
     var a = n == null ? 0 : n.length;
     return a ? e(n, 1) : [];
   }
-  return Mo = t, Mo;
+  return Ro = t, Ro;
 }
 var Do, kl;
 function ib() {
@@ -7421,7 +7423,7 @@ var cb = lb();
 const ub = /* @__PURE__ */ Te(cb), NN = ub(H, ["tiny", "regular", "medium", "big", "huge"]), db = /* @__PURE__ */ E((e) => {
   const {
     handle: t
-  } = xe(), n = ye("optionsChange", void 0), a = M(!1), o = M(!1), r = M(!1);
+  } = xe(), n = ye("optionsChange", void 0), a = R(!1), o = R(!1), r = R(!1);
   return mt(t, (s) => {
     if (s)
       return yg(s, {
@@ -7508,7 +7510,7 @@ On.defaultProps = Fu;
 const xN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(On, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -7539,7 +7541,7 @@ const xN = /* @__PURE__ */ E((e, {
 }, PN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(gb, S(e, n, {
     className: a.value,
     badge: e.badge || t.badge?.(),
@@ -7624,7 +7626,7 @@ const xN = /* @__PURE__ */ E((e, {
 }, wN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = re(), s = C(() => e.id || r), i = M(null), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.id || r), i = R(null), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
@@ -7687,27 +7689,27 @@ const xN = /* @__PURE__ */ E((e, {
     href: y,
     handleKeyDown: A,
     disabledStateProps: N,
-    isAnyDisabled: x,
+    isAnyDisabled: P,
     keyDownProp: w = "onKeyDown",
-    tabIndexProp: P = "tabIndex",
-    ...O
-  } = e, T = v && !y, k = !!v || !!y || s, _ = r || (b === he.light ? G.dark : G.light), q = (I) => {
+    tabIndexProp: k = "tabIndex",
+    ...x
+  } = e, T = v && !y, O = !!v || !!y || s, _ = r || (b === he.light ? G.dark : G.light), q = (I) => {
     A?.(I), v && u && Hd(u)(I);
   }, j = {
     [w]: q,
-    [P]: k && !N.disabled ? 0 : void 0
+    [k]: O && !N.disabled ? 0 : void 0
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     m("a", S({
       role: T ? "button" : void 0
-    }, j, O, {
+    }, j, x, {
       href: N.disabled ? void 0 : y,
       ref: g,
       className: L(o, Nb({
-        "is-clickable": k,
+        "is-clickable": O,
         [`color-${_}`]: !!_,
-        "is-disabled": x,
+        "is-disabled": P,
         "has-after": !!t,
         "has-before": !!n,
         "is-highlighted": !!i,
@@ -7715,7 +7717,7 @@ const xN = /* @__PURE__ */ E((e, {
         [`size-${p}`]: !!p,
         "is-unselected": !l
       })),
-      "aria-disabled": k && x || void 0,
+      "aria-disabled": O && P || void 0,
       onClick: v ? u : void 0
     }), [n && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     m("div", {
@@ -7741,7 +7743,7 @@ const xN = /* @__PURE__ */ E((e, {
 }, lr = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = ke(), a = D(), o = U(), r = R(() => e.class), s = oe("onClick"), i = oe("onAfterClick"), l = oe("onBeforeClick"), {
+  const n = ke(), a = D(), o = U(), r = M(() => e.class), s = oe("onClick"), i = oe("onAfterClick"), l = oe("onBeforeClick"), {
     isAnyDisabled: c,
     disabledStateProps: d,
     otherProps: u
@@ -7795,7 +7797,7 @@ const xN = /* @__PURE__ */ E((e, {
 }, kb = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(Ob, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -7840,19 +7842,19 @@ const _b = "lumx-selection-chip-group", {
     "aria-orientation": "horizontal",
     className: Ib([v])
   }), Tb(s = i.map((y) => {
-    const A = c && se(c, y) || se(l, y), N = se(l, y), x = p?.(y) || {}, w = x.isDisabled || f, P = typeof x.children == "string" ? x.children : A, O = u ? `${P} - ${u}` : P;
+    const A = c && se(c, y) || se(l, y), N = se(l, y), P = p?.(y) || {}, w = P.isDisabled || f, k = typeof P.children == "string" ? P.children : A, x = u ? `${k} - ${u}` : k;
     return m(r, {
       key: N,
-      label: w ? void 0 : O
+      label: w ? void 0 : x
     }, {
       default: () => [m(t, S({
-        "aria-label": O
-      }, x, {
+        "aria-label": x
+      }, P, {
         size: "s",
         after: m(a, {
           icon: yr
         }, null),
-        className: Lb("chip", [x.className]),
+        className: Lb("chip", [P.className]),
         "data-option-id": N,
         isClickable: !0,
         role: "option",
@@ -7864,7 +7866,7 @@ const _b = "lumx-selection-chip-group", {
           as: "span",
           truncate: !0
         }, {
-          default: () => [x.children || A]
+          default: () => [P.children || A]
         })]
       })]
     });
@@ -7892,7 +7894,7 @@ function Ll(e, t) {
   const o = [...n];
   o.splice(a, 1), e.onChange(o);
 }
-function Rb(e) {
+function Mb(e) {
   const t = e.getContainer();
   if (!t) return () => {
   };
@@ -7935,7 +7937,7 @@ function ju({
     ), s(() => l.abort());
   });
 }
-const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
+const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   change: (e) => !0
 }, Db = /* @__PURE__ */ E(
@@ -7944,9 +7946,9 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     emit: t,
     slots: n
   }) => {
-    const a = D(), o = R(() => e.class), r = U(), s = M(null), i = () => s.value?.$el ?? s.value ?? null;
+    const a = D(), o = M(() => e.class), r = U(), s = R(null), i = () => s.value?.$el ?? s.value ?? null;
     Xe((c) => {
-      const d = Rb({
+      const d = Mb({
         getContainer: i,
         getInput: () => e.inputRef,
         onChange: (u) => t("change", u),
@@ -8005,7 +8007,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     name: "LumxSelectionChipGroup",
     inheritAttrs: !1,
     props: $()("getChipProps", "getOptionId", "getOptionName", "value", "label", "chipRemoveLabel", "isDisabled", "theme", "class", "inputRef"),
-    emits: Mb
+    emits: Rb
   }
 ), Bb = "lumx-lightbox", {
   block: Fb,
@@ -8032,10 +8034,10 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     HeadingLevelProvider: y,
     ThemeProvider: A,
     ClickAwayProvider: N,
-    childrenRef: x,
+    childrenRef: P,
     clickAwayRefs: w,
-    closeButtonRef: P,
-    IconButton: O,
+    closeButtonRef: k,
+    IconButton: x,
     ...T
   } = e;
   return !l && !p ? null : m(g, null, {
@@ -8057,8 +8059,8 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
       }
     }), [i && m("div", {
       className: El("close")
-    }, [m(O, S(i, {
-      ref: P,
+    }, [m(x, S(i, {
+      ref: k,
       emphasis: "low",
       hasBackground: !0,
       icon: yr,
@@ -8076,7 +8078,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
           childrenRefs: w
         }, {
           default: () => [m("div", {
-            ref: x,
+            ref: P,
             className: El("wrapper"),
             role: "presentation"
           }, [r])]
@@ -8091,7 +8093,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
   slots: n,
   attrs: a
 }) => {
-  const o = R(() => e.class), r = M(null), s = M(null), i = () => t("close");
+  const o = M(() => e.class), r = R(null), s = R(null), i = () => t("close");
   ln(i, C(() => !!(e.isOpen && !e.preventAutoClose)));
   const l = C(() => e.isOpen && r.value || !1);
   Cr(l, C(() => {
@@ -8141,7 +8143,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     }))
   }), null);
 }, ON = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(Vb, S(t, e, {
     className: a.value,
     theme: e.theme || n.value
@@ -8174,7 +8176,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
 }, kN = /* @__PURE__ */ E((e) => {
   const t = D(), n = U({
     defaultTheme: void 0
-  }), a = R(() => e.class);
+  }), a = M(() => e.class);
   return () => m(Gb, S(t, e, {
     className: a.value,
     theme: e.theme || n.value
@@ -8210,12 +8212,12 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     isChildrenVisible: y,
     IconButton: A,
     footer: N,
-    closeMode: x,
+    closeMode: P,
     ...w
-  } = e, P = (k) => {
+  } = e, k = (O) => {
     const _ = !s;
-    c && _ && c(k), l && !_ && l(k), d && d(_, k);
-  }, O = u === he.dark ? G.light : G.dark, T = L(t, Xb({
+    c && _ && c(O), l && !_ && l(O), d && d(_, O);
+  }, x = u === he.dark ? G.light : G.dark, T = L(t, Xb({
     "has-background": a,
     "has-header": !Kt(h.children),
     "has-header-divider": r,
@@ -8230,7 +8232,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
     className: T
   }), [m("header", {
     className: we("header"),
-    onClick: P
+    onClick: k
   }, [p && m("div", {
     className: we("header-drag")
   }, [p]), m("div", S(h, {
@@ -8238,7 +8240,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
   }), [v]), m("div", {
     className: we("header-toggle")
   }, [m(A, S(f, {
-    color: O,
+    color: x,
     emphasis: ge.low,
     icon: s ? dc : fc,
     "aria-expanded": s || "false"
@@ -8261,7 +8263,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Mb = {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = M(null), i = M(e.isOpen), l = M(e.isOpen);
+  const a = D(), o = U(), r = M(() => e.class), s = R(null), i = R(e.isOpen), l = R(e.isOpen);
   X(() => e.isOpen, (h) => {
     l.value = h, h || e.closeMode === "hide" ? i.value = !0 : Yr || (i.value = !1);
   }, {
@@ -8355,7 +8357,7 @@ const ey = "lumx-flag", {
 }, _N = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class);
+  const n = D(), a = U(), o = M(() => e.class);
   return () => m(ny, S(e, n, {
     className: o.value,
     theme: e.theme || a.value,
@@ -8368,10 +8370,10 @@ const ey = "lumx-flag", {
   // Redefine properties so that they come in as `props` on the `defineComponent` function
   props: $()("color", "icon", "truncate", "theme", "class")
 });
-var qo, Rl;
+var qo, Ml;
 function ay() {
-  if (Rl) return qo;
-  Rl = 1;
+  if (Ml) return qo;
+  Ml = 1;
   var e = /\s/;
   function t(n) {
     for (var a = n.length; a-- && e.test(n.charAt(a)); )
@@ -8380,10 +8382,10 @@ function ay() {
   }
   return qo = t, qo;
 }
-var jo, Ml;
+var jo, Rl;
 function oy() {
-  if (Ml) return jo;
-  Ml = 1;
+  if (Rl) return jo;
+  Rl = 1;
   var e = ay(), t = /^\s+/;
   function n(a) {
     return a && a.slice(0, e(a) + 1).replace(t, "");
@@ -8485,7 +8487,7 @@ kn.defaultProps = fy;
 const IN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(kn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -8505,7 +8507,7 @@ const IN = /* @__PURE__ */ E((e, {
 }, LN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = Pc(), o = R(() => e.class), r = C(() => {
+  const n = D(), a = Pc(), o = M(() => e.class), r = C(() => {
     const {
       className: s,
       ...i
@@ -8530,7 +8532,7 @@ const IN = /* @__PURE__ */ E((e, {
 }), EN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class);
+  const n = D(), a = U(), o = M(() => e.class);
   return () => m(Oe, S(e, n, {
     className: o.value,
     theme: e.theme || a.value,
@@ -8544,7 +8546,7 @@ const IN = /* @__PURE__ */ E((e, {
 }), $N = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class);
+  const n = D(), a = U(), o = M(() => e.class);
   return () => m(Ve, S(e, n, {
     className: o.value,
     theme: e.theme || a.value,
@@ -8590,7 +8592,7 @@ const IN = /* @__PURE__ */ E((e, {
 } = fe.bem(Wu), Hr = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = ke(), a = D(), o = R(() => e.class), {
+  const n = ke(), a = D(), o = M(() => e.class), {
     isAnyDisabled: r,
     disabledStateProps: s,
     otherProps: i
@@ -8698,8 +8700,8 @@ const yy = "lumx-link-preview", {
   }), jl(a) ? a : {
     default: () => [a]
   })])])])]);
-}, RN = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+}, MN = /* @__PURE__ */ E((e) => {
+  const t = D(), n = U(), a = M(() => e.class);
   return () => {
     const {
       titleHeading: o = Uu.titleHeading,
@@ -8767,14 +8769,14 @@ function vt() {
 function Oy(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
-const MN = /* @__PURE__ */ E((e, {
+const RN = /* @__PURE__ */ E((e, {
   slots: t,
   emit: n,
   attrs: a
 }) => {
   const {
     handle: o
-  } = vt(), r = R(() => e.class), s = M(null), i = (l) => {
+  } = vt(), r = M(() => e.class), s = R(null), i = (l) => {
     if (e.isDisabled) {
       l.preventDefault();
       return;
@@ -8867,8 +8869,8 @@ function Iy(e) {
   return Array.from(e.querySelectorAll(cr));
 }
 function Ly(e) {
-  const t = Array.from(document.querySelectorAll(Rc)).filter(
-    (o) => !o.matches(Mc) && o.tabIndex >= 0
+  const t = Array.from(document.querySelectorAll(Mc)).filter(
+    (o) => !o.matches(Rc) && o.tabIndex >= 0
   ), n = t.indexOf(e);
   if (n === -1) return;
   t[n + 1]?.focus();
@@ -9022,7 +9024,7 @@ function Ey(e = {}) {
 const $y = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = ke(), a = re(), o = re(), r = M(null), s = Ey({
+  const n = ke(), a = re(), o = re(), r = R(null), s = Ey({
     menuId: a
   });
   return Ke(() => {
@@ -9051,10 +9053,10 @@ const $y = /* @__PURE__ */ E((e, {
   },
   emits: ["open"]
 });
-function Ry(e) {
+function My(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
-const My = "lumx-menu-trigger", Dy = (e, {
+const Ry = "lumx-menu-trigger", Dy = (e, {
   Trigger: t
 }) => {
   const {
@@ -9068,16 +9070,16 @@ const My = "lumx-menu-trigger", Dy = (e, {
   return m(t, S({
     ref: s
   }, i, {
-    className: L(a, My),
+    className: L(a, Ry),
     "aria-haspopup": "true",
     "aria-controls": o,
     "aria-expanded": r ? "true" : "false"
-  }), Ry(n) ? n : {
+  }), My(n) ? n : {
     default: () => [n]
   });
 };
 function By(e, t) {
-  const { handle: n } = vt(), a = M(t);
+  const { handle: n } = vt(), a = R(t);
   let o;
   return Ke(() => {
     o = n.subscribe(e, (r) => {
@@ -9098,7 +9100,7 @@ const Fy = /* @__PURE__ */ E((e, {
     triggerId: o,
     anchorRef: r,
     handle: s
-  } = vt(), [i] = zr(), l = R(() => e.class), c = M(null);
+  } = vt(), [i] = zr(), l = M(() => e.class), c = R(null);
   return Xe((d) => {
     const u = c.value?.$el ?? c.value;
     if (!u) return;
@@ -9214,7 +9216,7 @@ const jy = "lumx-menu-popover", {
     menuId: n,
     triggerId: a,
     handle: o
-  } = vt(), [r] = zr(), s = R(() => e.class), i = M(null);
+  } = vt(), [r] = zr(), s = M(() => e.class), i = R(null);
   return Ke(() => {
     const l = i.value;
     if (!l) return;
@@ -9243,7 +9245,7 @@ const jy = "lumx-menu-popover", {
   slots: n,
   attrs: a
 }) => {
-  const o = R(() => e.class), r = (s) => t("open", s);
+  const o = M(() => e.class), r = (s) => t("open", s);
   return () => {
     const {
       variant: s = ky.variant,
@@ -9339,7 +9341,7 @@ const BN = /* @__PURE__ */ E((e, {
 }) => {
   const a = D(), {
     closeButtonLabel: o
-  } = e, r = R(() => e.class);
+  } = e, r = M(() => e.class);
   return () => m(Vr, S(e, a, {
     className: r.value,
     children: t.default?.(),
@@ -9435,7 +9437,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
 }, FN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = oe("onHandleClick"), s = (i) => {
+  const n = D(), a = U(), o = M(() => e.class), r = oe("onHandleClick"), s = (i) => {
     t("handleClick", i);
   };
   return () => m(rA, S(n, {
@@ -9456,7 +9458,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = R(() => e.class), r = C(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
+  const a = D(), o = M(() => e.class), r = C(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
   return () => {
     const {
       label: i,
@@ -9509,7 +9511,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
     className: Wl("line2")
   }, null)]);
 }, jN = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(fA, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9589,7 +9591,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
 }, HN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = re(), s = C(() => e.id || r), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.id || r), {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
@@ -9637,7 +9639,7 @@ Tn.defaultProps = bA;
 const zN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(Tn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -9702,7 +9704,7 @@ const zN = /* @__PURE__ */ E((e, {
     className: wA("inner")
   }, null)]);
 }, VN = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(SA, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9712,7 +9714,7 @@ const zN = /* @__PURE__ */ E((e, {
   inheritAttrs: !1,
   props: $()("class", "size", "color", "theme")
 }), WN = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(OA, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9722,7 +9724,7 @@ const zN = /* @__PURE__ */ E((e, {
   inheritAttrs: !1,
   props: $()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
 }), UN = /* @__PURE__ */ E((e) => {
-  const t = D(), n = U(), a = R(() => e.class);
+  const t = D(), n = U(), a = M(() => e.class);
   return () => m(ir, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9809,7 +9811,7 @@ const zN = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = re(), i = C(() => e.id || s), {
+  const a = D(), o = U(), r = M(() => e.class), s = re(), i = C(() => e.id || s), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
@@ -9849,7 +9851,7 @@ const zN = /* @__PURE__ */ E((e, {
   aspectRatio: dt.horizontal,
   size: H.xl,
   variant: Yu.square
-}, RA = (e) => {
+}, MA = (e) => {
   const {
     aspectRatio: t = Yo.aspectRatio,
     className: n,
@@ -9899,13 +9901,13 @@ const zN = /* @__PURE__ */ E((e, {
       onChange: h
     }), null)]
   });
-}, MA = {
+}, RA = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   change: (e, t) => !0
 }, KN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class), r = re(), s = C(() => e.fileInputProps?.id || r), i = M(!1), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.fileInputProps?.id || r), i = R(!1), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
@@ -9932,7 +9934,7 @@ const zN = /* @__PURE__ */ E((e, {
       theme: g,
       ...y
     } = d.value;
-    return m(RA, S(y, {
+    return m(MA, S(y, {
       className: o.value,
       theme: e.theme || a.value,
       inputId: s.value,
@@ -9966,7 +9968,7 @@ const zN = /* @__PURE__ */ E((e, {
   name: "LumxUploader",
   inheritAttrs: !1,
   props: $()("class", "theme", "aspectRatio", "icon", "label", "size", "variant", "isDisabled", "disabled", "aria-disabled", "fileInputProps"),
-  emits: MA
+  emits: RA
 }), DA = {
   below: "below",
   over: "over"
@@ -10127,7 +10129,7 @@ const qA = (e) => {
 }), XN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class);
+  const n = D(), a = U(), o = M(() => e.class);
   return () => {
     const {
       class: r,
@@ -10191,7 +10193,7 @@ _n.defaultProps = VA;
 const YN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(_n, S(e, n, {
     className: a.value,
     items: t.default?.()
@@ -10200,9 +10202,9 @@ const YN = /* @__PURE__ */ E((e, {
   name: "LumxInlineList",
   inheritAttrs: !1,
   props: $()("color", "colorVariant", "typography", "wrap", "class")
-}), Rt = "lumx-table", {
+}), Mt = "lumx-table", {
   block: WA
-} = B(Rt), UA = (e) => {
+} = B(Mt), UA = (e) => {
   const {
     children: t,
     className: n,
@@ -10224,7 +10226,7 @@ const YN = /* @__PURE__ */ E((e, {
 }, ZN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = U(), o = R(() => e.class);
+  const n = D(), a = U(), o = M(() => e.class);
   return () => m(UA, S(e, n, {
     className: o.value,
     theme: e.theme || a.value,
@@ -10234,7 +10236,7 @@ const YN = /* @__PURE__ */ E((e, {
   name: "LumxTable",
   inheritAttrs: !1,
   props: $()("class", "hasBefore", "hasDividers", "theme")
-}), GA = `${Rt}__body`, KA = (e) => {
+}), GA = `${Mt}__body`, KA = (e) => {
   const {
     children: t,
     className: n,
@@ -10249,7 +10251,7 @@ const YN = /* @__PURE__ */ E((e, {
 }, JN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(KA, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -10264,7 +10266,7 @@ const YN = /* @__PURE__ */ E((e, {
 }, ur = {
   body: "body",
   head: "head"
-}, Ue = `${Rt}__cell`, {
+}, Ue = `${Mt}__cell`, {
   block: Xl
 } = B(Ue), XA = {
   variant: ur.body
@@ -10327,7 +10329,7 @@ const YN = /* @__PURE__ */ E((e, {
   slots: n,
   attrs: a
 }) => {
-  const o = R(() => e.class), r = () => {
+  const o = M(() => e.class), r = () => {
     t("headerClick");
   }, s = oe("onHeaderClick");
   return () => m(YA, S(e, a, {
@@ -10340,7 +10342,7 @@ const YN = /* @__PURE__ */ E((e, {
   inheritAttrs: !1,
   props: $()("class", "icon", "isSortable", "sortOrder", "variant"),
   emits: ZA
-}), JA = `${Rt}__header`, QA = (e) => {
+}), JA = `${Mt}__header`, QA = (e) => {
   const {
     children: t,
     className: n,
@@ -10355,7 +10357,7 @@ const YN = /* @__PURE__ */ E((e, {
 }, ex = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class);
+  const n = D(), a = M(() => e.class);
   return () => m(QA, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -10364,7 +10366,7 @@ const YN = /* @__PURE__ */ E((e, {
   name: "LumxTableHeader",
   inheritAttrs: !1,
   props: $()("class")
-}), eS = `${Rt}__row`, {
+}), eS = `${Mt}__row`, {
   block: tS
 } = B(eS), nS = (e) => {
   const {
@@ -10392,7 +10394,7 @@ const YN = /* @__PURE__ */ E((e, {
 }, tx = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = R(() => e.class), {
+  const n = D(), a = M(() => e.class), {
     isAnyDisabled: o,
     otherProps: r
   } = te(C(() => ({
@@ -10437,17 +10439,17 @@ const oS = `${Qu}__link`, {
     Icon: y,
     Text: A,
     ref: N,
-    ...x
+    ...P
   } = e, w = () => {
     o || v?.();
-  }, P = (T) => {
+  }, k = (T) => {
     c?.(T), b && w();
-  }, O = (T) => {
+  }, x = (T) => {
     d?.(T), !(T.key !== "Enter" || o) && w();
   };
   return m("button", S({
     ref: N
-  }, x, {
+  }, P, {
     type: "button",
     id: g,
     className: L(t, rS({
@@ -10456,9 +10458,9 @@ const oS = `${Qu}__link`, {
     })),
     onClick: w
   }, {
-    [h]: O
+    [h]: x
   }, {
-    onFocus: P,
+    onFocus: k,
     role: "tab"
   }, {
     [f]: i ? 0 : u
@@ -10531,7 +10533,7 @@ const oS = `${Qu}__link`, {
 }, nx = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = R(() => e.class), {
+  const n = D(), a = M(() => e.class), {
     isAnyDisabled: o
   } = te(C(() => ({
     ...e,
@@ -10597,7 +10599,7 @@ const Yl = {
     "aria-label": t
   }, [n])]);
 }, ax = /* @__PURE__ */ E((e) => {
-  const t = D(), n = ke(), a = U(), o = R(() => e.class), r = M(null);
+  const t = D(), n = ke(), a = U(), o = M(() => e.class), r = R(null);
   return ju({
     containerRef: r,
     itemSelector: '[role="tab"]'
@@ -10642,7 +10644,7 @@ const Yl = {
     "aria-labelledby": r
   }), [(!s || a) && t]);
 }, ox = /* @__PURE__ */ E((e) => {
-  const t = D(), n = ke(), a = R(() => e.class), o = td("tabPanel", e.id), r = C(() => e.isActive || o.value?.isActive);
+  const t = D(), n = ke(), a = M(() => e.class), o = td("tabPanel", e.id), r = C(() => e.isActive || o.value?.isActive);
   return () => m(pS, S(t, {
     className: a.value,
     isActive: r.value,
@@ -10665,7 +10667,7 @@ const Yl = {
   emit: t,
   slots: n
 }) => {
-  const a = M({
+  const a = R({
     ...xt,
     isLazy: e.isLazy ?? xt.isLazy,
     shouldActivateOnFocus: e.shouldActivateOnFocus ?? xt.shouldActivateOnFocus,
@@ -10711,7 +10713,7 @@ var Jo, Jl;
 function gS() {
   if (Jl) return Jo;
   Jl = 1;
-  var e = Mu();
+  var e = Ru();
   function t(n, a, o) {
     return n == null ? n : e(n, a, o);
   }
@@ -10757,14 +10759,14 @@ const SS = "lumx-user-block", {
     theme: y,
     children: A,
     additionalFields: N,
-    after: x,
+    after: P,
     Text: w,
-    Avatar: P,
-    ...O
+    Avatar: k,
+    ...x
   } = e;
   let T = g;
   p === ct.vertical && (T = H.l);
-  const k = p === ct.vertical, _ = dr({
+  const O = p === ct.vertical, _ = dr({
     handleClick: f,
     linkAs: r,
     linkProps: o
@@ -10786,14 +10788,14 @@ const SS = "lumx-user-block", {
   };
   return m("div", S({
     ref: s
-  }, O, I, {
+  }, x, I, {
     className: L(n, NS({
       [`orientation-${p}`]: !!p,
       [`size-${T}`]: !!T,
       [`theme-${y}`]: !!y,
       "is-clickable": _
     }))
-  }), [t && m(P, S({
+  }), [t && m(k, S({
     linkAs: r,
     linkProps: o,
     alt: ""
@@ -10804,13 +10806,13 @@ const SS = "lumx-user-block", {
     theme: y
   }), null), (a || d || A || N) && m("div", {
     className: $e("wrapper")
-  }, [A, j, q ? N : null]), k && b && m("div", {
+  }, [A, j, q ? N : null]), O && b && m("div", {
     className: $e("action")
-  }, [b]), k && i && m("div", {
+  }, [b]), O && i && m("div", {
     className: $e("actions")
-  }, [i]), x ? m("div", {
+  }, [i]), P ? m("div", {
     className: $e("after")
-  }, [x]) : null]);
+  }, [P]) : null]);
 };
 function PS(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
@@ -10823,7 +10825,7 @@ const wS = {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = R(() => e.class), s = () => {
+  const a = D(), o = U(), r = M(() => e.class), s = () => {
     t("click");
   }, i = () => {
     t("mouseenter");
@@ -11012,9 +11014,9 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
     listStatus: y = "idle",
     translations: A,
     onOpen: N,
-    onLoadMore: x,
+    onLoadMore: P,
     infiniteScrollOptions: w
-  } = e, P = y === "loading", O = y === "loadingMore", T = y === "error", k = u === "multiple", _ = d != null ? qr(d).map((q) => ad(q, r, o)).filter(Boolean).join(", ") : "";
+  } = e, k = y === "loading", x = y === "loadingMore", T = y === "error", O = u === "multiple", _ = d != null ? qr(d).map((q) => ad(q, r, o)).filter(Boolean).join(", ") : "";
   return m(t.Provider, {
     onOpen: N
   }, {
@@ -11030,9 +11032,9 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
     }, p), {
       default: () => [m(t.List, S(b, {
         "aria-label": f,
-        "aria-multiselectable": k || void 0
+        "aria-multiselectable": O || void 0
       }), {
-        default: () => [P ? m(t.OptionSkeleton, {
+        default: () => [k ? m(t.OptionSkeleton, {
           count: 3
         }, null) : Wr({
           options: a,
@@ -11045,12 +11047,12 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
           selected: d
         }, {
           Combobox: t
-        }), x && n && m(n, {
+        }), P && n && m(n, {
           callback: () => {
-            y && y !== "idle" || x();
+            y && y !== "idle" || P();
           },
           options: w
-        }, null), O && m(t.OptionSkeleton, {
+        }, null), x && m(t.OptionSkeleton, {
           count: 1
         }, null)]
       }), m(t.State, {
@@ -11134,7 +11136,7 @@ const LS = {
   slots: n,
   attrs: a
 }) => {
-  const o = M(null), r = R(() => e.class), {
+  const o = R(null), r = M(() => e.class), {
     disabledStateProps: s
   } = te(C(() => ({
     ...e,
@@ -11230,12 +11232,12 @@ const LS = {
     emptyMessage: y,
     nbOptionMessage: A,
     errorMessage: N,
-    errorTryReloadMessage: x,
+    errorTryReloadMessage: P,
     onOpen: w,
-    chips: P,
-    beforeOptions: O,
+    chips: k,
+    beforeOptions: x,
     afterOptions: T,
-    onLoadMore: k,
+    onLoadMore: O,
     infiniteScrollOptions: _
   } = e, q = b === "loading", j = b === "loadingMore", I = b === "error";
   return m(t.Provider, {
@@ -11244,7 +11246,8 @@ const LS = {
     default: () => [m(t.Input, S({
       label: u
     }, h, {
-      chips: P
+      selectionMode: "keep",
+      chips: k
     }), null), m(t.Popover, S({
       fitToAnchorWidth: "minWidth",
       fitWithinViewportHeight: !0,
@@ -11254,7 +11257,7 @@ const LS = {
         "aria-label": u,
         "aria-multiselectable": f || void 0
       }), {
-        default: () => [O, q ? m(t.OptionSkeleton, {
+        default: () => [x, q ? m(t.OptionSkeleton, {
           count: 3
         }, null) : Wr({
           options: a,
@@ -11267,9 +11270,9 @@ const LS = {
           selected: d
         }, {
           Combobox: t
-        }), T, k && n && m(n, {
+        }), T, O && n && m(n, {
           callback: () => {
-            b && b !== "idle" || k();
+            b && b !== "idle" || O();
           },
           options: _
         }, null), j && m(t.OptionSkeleton, {
@@ -11280,14 +11283,14 @@ const LS = {
         emptyMessage: y,
         nbOptionMessage: A,
         errorMessage: I ? N : void 0,
-        errorTryReloadMessage: I ? x : void 0
+        errorTryReloadMessage: I ? P : void 0
       }, null)]
     })]
   });
 };
 Gr.displayName = ES;
 Gr.className = $S;
-const RS = {
+const MS = {
   /**
    * Selection change. Payload type depends on `selectionType`:
    * - `'single'`   → `O | undefined` (option on select, `undefined` on clear).
@@ -11312,33 +11315,33 @@ const RS = {
   clear: (e) => !0,
   /** Dropdown opened or closed. */
   open: (e) => !0
-}, MS = /* @__PURE__ */ E((e, {
+}, RS = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n,
   attrs: a
 }) => {
-  const o = C(() => e.selectionType === "multiple"), r = R(() => e.class), {
+  const o = C(() => e.selectionType === "multiple"), r = M(() => e.class), {
     isAnyDisabled: s,
     disabledStateProps: i
   } = te(C(() => ({
     ...e,
     ...a
-  }))), l = M(!!e.searchInputValue), c = M(e.searchInputValue ?? ""), d = M(null), u = M(null);
-  X(() => e.searchInputValue, (x) => {
-    x !== void 0 && (c.value = x, l.value = !!x);
+  }))), l = R(!!e.searchInputValue), c = R(e.searchInputValue ?? ""), d = R(null), u = R(null);
+  X(() => e.searchInputValue, (P) => {
+    P !== void 0 && (c.value = P, l.value = !!P);
   });
-  const f = C(() => e.selectionType === "multiple" || l.value ? c.value : ad(e.value, e.getOptionName, e.getOptionId)), h = (x) => {
-    const w = nd(e.options, e.getOptionId, e.value, x.value, e.selectionType === "multiple");
+  const f = C(() => e.selectionType === "multiple" || l.value ? c.value : ad(e.value, e.getOptionName, e.getOptionId)), h = (P) => {
+    const w = nd(e.options, e.getOptionId, e.value, P.value, e.selectionType === "multiple");
     t("change", w), l.value = !1, c.value = "", t("search", "");
-  }, v = (x) => {
-    l.value = !0, c.value = x, t("search", x), !o.value && x === "" && e.value !== void 0 && e.value !== null && t("change", void 0);
-  }, p = (x) => {
-    t("change", void 0), l.value = !1, c.value = "", t("search", ""), t("clear", x);
-  }, b = (x) => {
-    l.value = !1, c.value = "", t("search", ""), t("blur", x);
+  }, v = (P) => {
+    l.value = !0, c.value = P, t("search", P), !o.value && P === "" && e.value !== void 0 && e.value !== null && t("change", void 0);
+  }, p = (P) => {
+    t("change", void 0), l.value = !1, c.value = "", t("search", ""), t("clear", P);
+  }, b = (P) => {
+    l.value = !1, c.value = "", t("search", ""), t("blur", P);
   }, g = od(n.option), y = rd(n.sectionTitle), A = oe("onLoadMore") || oe("onLoad-more"), N = () => t("load-more");
   return () => {
-    const x = !o.value && !s.value && (e.hasClearButton ?? !0) && e.value !== void 0 && e.value !== null, w = e.selectionType === "multiple" ? m(Db, {
+    const P = !o.value && !s.value && (e.hasClearButton ?? !0) && e.value !== void 0 && e.value !== null, w = e.selectionType === "multiple" ? m(Db, {
       value: e.value,
       theme: e.theme,
       getOptionId: e.getOptionId,
@@ -11350,7 +11353,7 @@ const RS = {
       chipRemoveLabel: e.translations.chipRemoveLabel
     }, {
       chip: n.chip || void 0
-    }) : void 0, P = e.listStatus ?? "idle", O = e.beforeOptions ?? n.beforeOptions?.();
+    }) : void 0, k = e.listStatus ?? "idle", x = e.beforeOptions ?? n.beforeOptions?.();
     return Gr({
       options: e.options,
       getOptionId: e.getOptionId,
@@ -11362,7 +11365,7 @@ const RS = {
       selected: e.value,
       label: e.label,
       isMultiselectable: o.value,
-      listStatus: P,
+      listStatus: k,
       onOpen: (T) => t("open", T),
       loadingMessage: e.translations.loadingMessage,
       emptyMessage: e.translations.emptyMessage,
@@ -11392,7 +11395,7 @@ const RS = {
         isValid: e.isValid,
         maxLength: e.maxLength,
         "aria-label": e.ariaLabel,
-        clearButtonProps: x ? {
+        clearButtonProps: P ? {
           label: e.translations.clearLabel
         } : void 0,
         onClear: p,
@@ -11409,7 +11412,7 @@ const RS = {
         ref: d
       },
       chips: w,
-      beforeOptions: O,
+      beforeOptions: x,
       onLoadMore: A ? N : void 0,
       infiniteScrollOptions: {
         root: d.value?.$el ?? null,
@@ -11424,7 +11427,7 @@ const RS = {
   name: "LumxSelectTextField",
   inheritAttrs: !1,
   props: $()("options", "getOptionId", "getOptionName", "getOptionDescription", "getSectionId", "selectionType", "value", "filter", "searchInputValue", "hasClearButton", "listStatus", "label", "placeholder", "icon", "isDisabled", "aria-disabled", "isRequired", "hasError", "error", "helper", "id", "name", "isValid", "maxLength", "ariaLabel", "inputProps", "popoverProps", "translations", "beforeOptions", "openOnFocus", "class", "theme"),
-  emits: RS
+  emits: MS
 }), DS = Ot, cx = Eu, ux = ku, dx = Tu, fx = Iu, BS = "TimePickerField", sd = "lumx-time-picker-field", {
   block: FS
 } = B(sd), tc = {
@@ -11516,12 +11519,12 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
 }, hx = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = R(() => e.class), a = C(() => e.locale ?? WS()), o = C(() => e.step ?? tc.step), r = C(() => e.boundsMode ?? tc.boundsMode), s = C(() => jS({
+  const n = M(() => e.class), a = C(() => e.locale ?? WS()), o = C(() => e.step ?? tc.step), r = C(() => e.boundsMode ?? tc.boundsMode), s = C(() => jS({
     step: o.value,
     minTime: e.minTime,
     maxTime: e.maxTime,
     locale: a.value
-  })), i = M(""), l = C(() => {
+  })), i = R(""), l = C(() => {
     const {
       value: f
     } = e;
@@ -11577,7 +11580,7 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
       handleBlur: u,
       searchInputValue: f
     }, {
-      SelectTextField: MS,
+      SelectTextField: RS,
       Option: DS
     });
   };
@@ -11644,7 +11647,7 @@ export {
   $N as InputLabel,
   CN as Lightbox,
   Hr as Link,
-  RN as LinkPreview,
+  MN as LinkPreview,
   AN as List,
   Iu as ListDivider,
   SN as ListItem,
@@ -11652,7 +11655,7 @@ export {
   mg as ListSection,
   DN as MenuButton,
   Iu as MenuDivider,
-  MN as MenuItem,
+  RN as MenuItem,
   BN as Message,
   FN as Mosaic,
   Av as Placement,
@@ -11666,7 +11669,7 @@ export {
   Lp as RawInputTextarea,
   ix as SelectButton,
   lx as SelectButtonOption,
-  MS as SelectTextField,
+  RS as SelectTextField,
   fx as SelectTextFieldDivider,
   DS as SelectTextFieldOption,
   ux as SelectTextFieldOptionMoreInfo,