@lumx/vue 4.13.0-next.0 → 4.13.0-next.2

package/index.js

@@ -1,8 +1,8 @@
 import { ColorVariant as Bu, Size as Ye, VISUALLY_HIDDEN as Fu, DIALOG_TRANSITION_DURATION as Fl, AspectRatio as ql, IS_BROWSER as _o, ColorPalette as qu } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as f, mergeProps as S, Fragment as ee, isVNode as X, useAttrs as M, computed as O, toValue as _e, getCurrentScope as zl, onScopeDispose as to, toRef as te, readonly as zu, customRef as ju, ref as B, shallowRef as Ie, watch as K, getCurrentInstance as jl, onMounted as Gt, inject as qe, defineComponent as L, toRefs as Hu, reactive as Hl, provide as ze, watchEffect as je, isRef as Be, onUnmounted as wt, watchPostEffect as Vu, onBeforeUnmount as Kt, Comment as Vl, unref as bt, useSlots as nt, useTemplateRef as Wu, toRaw as He, Text as Wl, nextTick as Uu, shallowReadonly as Ke, h as Io, cloneVNode as Gu, onWatcherCleanup as Ku, createTextVNode as Xu, withDirectives as Yu, resolveDirective as Zu } from "vue";
-import { classNames as ce } from "@lumx/core/js/utils";
+import { createVNode as f, mergeProps as S, Fragment as ee, isVNode as Y, useAttrs as D, computed as O, toValue as _e, getCurrentScope as zl, onScopeDispose as to, toRef as te, readonly as zu, customRef as ju, ref as B, shallowRef as Ie, watch as X, getCurrentInstance as jl, onMounted as Gt, inject as qe, defineComponent as L, toRefs as Hu, reactive as Hl, provide as ze, watchEffect as je, isRef as Be, onUnmounted as wt, watchPostEffect as Vu, onBeforeUnmount as Kt, Comment as Vl, unref as bt, useSlots as nt, useTemplateRef as Wu, toRaw as He, Text as Wl, nextTick as Uu, shallowReadonly as Ke, h as Io, cloneVNode as Gu, onWatcherCleanup as Ku, createTextVNode as Xu, withDirectives as Yu, resolveDirective as Zu } from "vue";
+import { classNames as ue } from "@lumx/core/js/utils";
 import { k as E, u as W, T as no, P as Xt, C as ao, I as Ju } from "./_internal/CO3BhTbu.js";
 import { getDisabledState as Qu } from "@lumx/core/js/utils/disabledState";
 import { mdiAlertCircle as gt } from "@lumx/icons/esm/alert-circle.js";
@@ -29,7 +29,7 @@ const Eo = {
   close: 3e3
 }, so = {
   left: "left"
-}, ue = {
+}, de = {
   light: "light",
   dark: "dark"
 }, H = {
@@ -206,18 +206,18 @@ function gd(e) {
     t.key === "Escape" && e(t);
   };
 }
-const ie = (e, t) => typeof e == "function" ? e(t) : typeof e == "string" ? t[e] : String(t);
+const le = (e, t) => typeof e == "function" ? e(t) : typeof e == "string" ? t[e] : String(t);
 function yd(e, t) {
   const n = /* @__PURE__ */ new Map();
   for (const a of e) {
-    const r = ie(t, a);
+    const r = le(t, a);
     let o = n.get(r);
     o || (o = [], n.set(r, o)), o.push(a);
   }
   return n;
 }
 function Pn(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Ad = {
   [Q.error]: {
@@ -272,7 +272,7 @@ const Ad = {
   } = o, {
     label: x,
     onClick: R,
-    ...D
+    ...M
   } = r || {};
   return f(v, S({
     ref: s,
@@ -307,7 +307,7 @@ const Ad = {
       default: () => [u]
     }), f("footer", null, [f(g, {
       className: "lumx-spacing-margin-horizontal",
-      after: f(ee, null, [r && f(b, S(D, {
+      after: f(ee, null, [r && f(b, S(M, {
         ref: m,
         emphasis: me.medium,
         onClick: R
@@ -329,14 +329,14 @@ function oe() {
   return zo += 1, `:lumx${zo}:`;
 }
 function ec(e, t, n) {
-  const a = M();
+  const a = D();
   return O(() => {
     const r = _e(e), o = a[t];
     return n ? n(r, o) : r ?? o;
   });
 }
 function $(e) {
-  return ec(e, "className", ce.join);
+  return ec(e, "className", ue.join);
 }
 function Jt(e, t) {
   return zl() ? (to(e, t), !0) : !1;
@@ -379,7 +379,7 @@ function kd(e, t, n = {}) {
   let o;
   const s = /* @__PURE__ */ co(() => a && "MutationObserver" in a), i = () => {
     o && (o.disconnect(), o = void 0);
-  }, l = K(O(() => {
+  }, l = X(O(() => {
     const d = nc(_e(e)).map(Ze).filter(tc);
     return new Set(d);
   }), (d) => {
@@ -401,7 +401,7 @@ function Td(e, t, n = {}) {
   let o;
   const s = /* @__PURE__ */ co(() => a && "ResizeObserver" in a), i = () => {
     o && (o.disconnect(), o = void 0);
-  }, l = K(O(() => {
+  }, l = X(O(() => {
     const u = _e(e);
     return Array.isArray(u) ? u.map((d) => Ze(d)) : [Ze(u)];
   }), (u) => {
@@ -423,7 +423,7 @@ function Td(e, t, n = {}) {
 function jo(e, t, n = {}) {
   const { root: a, rootMargin: r = "0px", threshold: o = 0, window: s = lo, immediate: i = !0 } = n, l = /* @__PURE__ */ co(() => s && "IntersectionObserver" in s), c = O(() => nc(_e(e)).map(Ze).filter(tc));
   let u = Bt;
-  const d = Ie(i), m = l.value ? K(() => [
+  const d = Ie(i), m = l.value ? X(() => [
     c.value,
     Ze(a),
     d.value
@@ -462,7 +462,7 @@ const On = /* @__PURE__ */ new WeakMap();
 function _d(e, t = !1) {
   const n = Ie(t);
   let a = "";
-  K(Cd(e), (s) => {
+  X(Cd(e), (s) => {
     const i = Cn(_e(s));
     if (i) {
       const l = i;
@@ -521,16 +521,16 @@ const Id = "lumx-dialog", {
     setSentinelTop: _,
     content: x,
     setSentinelBottom: R,
-    footerChildContent: D,
+    footerChildContent: M,
     footerChildProps: q,
-    ProgressCircular: j,
+    ProgressCircular: z,
     hasBottomIntersection: V,
-    ...G
+    ...K
   } = e;
   return f(g, null, {
     default: () => [f("div", S({
       ref: n
-    }, G, {
+    }, K, {
       className: I(t, Ld({
         "is-hidden": !l,
         "is-loading": i,
@@ -577,13 +577,13 @@ const Id = "lumx-dialog", {
               bottom: !0
             }),
             ref: R
-          }, null)]), (s || D) && f("footer", S(q, {
+          }, null)]), (s || M) && f("footer", S(q, {
             className: I(Ne("footer", {
               "has-divider": !!(r || V)
             }), q?.className)
-          }), [s, D]), i && f("div", {
+          }), [s, M]), i && f("div", {
             className: Ne("progress-overlay")
-          }, [f(j, null, null)])])]
+          }, [f(z, null, null)])])]
         })])]
       })]
     })])]
@@ -651,7 +651,7 @@ const Id = "lumx-dialog", {
     }), null)])]
   });
 }, qd = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(Fd, S(e, t, {
     className: a.value,
     theme: e.theme || n.value,
@@ -1187,7 +1187,7 @@ function ho(e, t, n, a, r) {
       c)?.focus({ preventScroll: !0 });
     }, 0);
   };
-  r && K(
+  r && X(
     r,
     (s, i) => {
       i && !s && o();
@@ -1200,7 +1200,7 @@ function ho(e, t, n, a, r) {
 function vc(e, t, n) {
   const a = B(e.value);
   let r;
-  K(
+  X(
     e,
     (s) => {
       if (s)
@@ -1215,7 +1215,7 @@ function vc(e, t, n) {
     { immediate: !1 }
   );
   let o = a.value;
-  return K(a, (s) => {
+  return X(a, (s) => {
     s !== o && (o = s, n?.value?.(s));
   }), Kt(() => {
     clearTimeout(r);
@@ -1223,7 +1223,7 @@ function vc(e, t, n) {
 }
 function bc(e) {
   const t = _d(typeof document < "u" ? document.body : null);
-  K(e, (n) => {
+  X(e, (n) => {
     t.value = n;
   });
 }
@@ -1482,8 +1482,8 @@ function If() {
   Us = 1;
   var e = St(), t = po(), n = nn(), a = "[object Arguments]", r = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", c = "[object Map]", u = "[object Number]", d = "[object Object]", m = "[object RegExp]", h = "[object Set]", p = "[object String]", v = "[object WeakMap]", g = "[object ArrayBuffer]", b = "[object DataView]", y = "[object Float32Array]", A = "[object Float64Array]", P = "[object Int8Array]", C = "[object Int16Array]", N = "[object Int32Array]", w = "[object Uint8Array]", k = "[object Uint8ClampedArray]", T = "[object Uint16Array]", _ = "[object Uint32Array]", x = {};
   x[y] = x[A] = x[P] = x[C] = x[N] = x[w] = x[k] = x[T] = x[_] = !0, x[a] = x[r] = x[g] = x[o] = x[b] = x[s] = x[i] = x[l] = x[c] = x[u] = x[d] = x[m] = x[h] = x[p] = x[v] = !1;
-  function R(D) {
-    return n(D) && t(D.length) && !!x[e(D)];
+  function R(M) {
+    return n(M) && t(M.length) && !!x[e(M)];
   }
   return Oa = R, Oa;
 }
@@ -1534,7 +1534,7 @@ function $f() {
 var Rf = $f();
 const zt = /* @__PURE__ */ Pe(Rf);
 function Mf(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const rt = (e) => {
   const {
@@ -1603,12 +1603,12 @@ const rt = (e) => {
     isHovered: d,
     linkAs: m,
     size: h,
-    theme: p = ue.light,
+    theme: p = de.light,
     variant: v,
     fullWidth: g,
     ref: b,
     ...y
-  } = e, A = o || s !== me.high && p === ue.dark && U.light || s === me.high && U.primary || U.dark;
+  } = e, A = o || s !== me.high && p === de.dark && U.light || s === me.high && U.primary || U.dark;
   if (i)
     return jf({
       ...e,
@@ -1711,7 +1711,7 @@ const Ys = L({
     ...d
   } = e, [m, h] = io(n, a);
   let p = m;
-  !p && (r || l) && (p = l === ue.dark ? U.light : U.dark);
+  !p && (r || l) && (p = l === de.dark ? U.light : U.dark);
   let v = h;
   !v && r && p === U.dark && (v = "L2");
   let g = s;
@@ -1749,7 +1749,7 @@ Z.displayName = Gf;
 Z.className = Nc;
 Z.defaultProps = Yf;
 const et = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W({
+  const t = D(), n = W({
     defaultTheme: void 0
   }), a = $(() => e.class);
   return () => f(Z, S(e, t, {
@@ -1803,14 +1803,14 @@ function nh(e) {
     return { tooltipLabel: t };
   const a = () => {
     const r = e.value;
-    r && !r.closest(`.${ce.visuallyHidden()}`) && r.offsetWidth < r.scrollWidth ? t.value = r.innerText : t.value = void 0;
+    r && !r.closest(`.${ue.visuallyHidden()}`) && r.offsetWidth < r.scrollWidth ? t.value = r.innerText : t.value = void 0;
   };
   return kd(e, a, {
     childList: !0,
     attributes: !0,
     characterData: !0,
     subtree: !0
-  }), Td(e, a), K(e, a, { immediate: !0 }), { tooltipLabel: t };
+  }), Td(e, a), X(e, a, { immediate: !0 }), { tooltipLabel: t };
 }
 const xc = (e = "default") => {
   const t = nt();
@@ -1823,7 +1823,7 @@ function Gr(e) {
   if (!e) return;
   const t = [];
   for (const n of e) {
-    if (!X(n)) {
+    if (!Y(n)) {
       t.push(n);
       continue;
     }
@@ -1846,12 +1846,12 @@ function Gr(e) {
   return t;
 }
 function ah(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const ve = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = xc(), r = Wu("tooltip-label"), {
+  const n = D(), a = xc(), r = Wu("tooltip-label"), {
     tooltipLabel: o
   } = nh(r), s = $(() => e.class), i = O(() => wc({
     ...e,
@@ -1888,7 +1888,7 @@ const ve = /* @__PURE__ */ L((e, {
 }, Pc = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = nt(), a = M(), r = W(), o = $(() => e.class), {
+  const n = nt(), a = D(), r = W(), o = $(() => e.class), {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
@@ -1959,7 +1959,7 @@ const ve = /* @__PURE__ */ L((e, {
 }, lh = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(ih, S(e, n, {
     className: a.value,
     label: t.default?.() ?? n.label,
@@ -1976,7 +1976,7 @@ const ve = /* @__PURE__ */ L((e, {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), i = Ie(void 0), l = Ie(void 0);
+  const a = D(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), i = Ie(void 0), l = Ie(void 0);
   return () => {
     const c = n.default?.(), d = c?.length === 1 && c[0].type === Wl ? "p" : "div", m = {
       isOpen: e.isOpen,
@@ -2113,7 +2113,7 @@ function mh({
 const ph = "lumx-thumbnail", {
   block: vh,
   element: pt
-} = ce.bem(ph), Js = {
+} = ue.bem(ph), Js = {
   fallback: nd,
   loading: "lazy"
 }, bh = (e) => {
@@ -2146,29 +2146,29 @@ const ph = "lumx-thumbnail", {
     handleClick: _,
     handleKeyPress: x,
     ...R
-  } = e, D = p || N === "isLoading", q = N === "hasError", j = q && typeof l == "string", V = q && !j, G = {};
-  j ? G.visibility = "hidden" : V && (G.display = "none");
-  const z = !!(k?.href || T), Y = !y && !!(z || _ || x), he = {
+  } = e, M = p || N === "isLoading", q = N === "hasError", z = q && typeof l == "string", V = q && !z, K = {};
+  z ? K.visibility = "hidden" : V && (K.display = "none");
+  const j = !!(k?.href || T), G = !y && !!(j || _ || x), se = {
     ...R
   };
-  Y && (Object.assign(he, {
+  G && (Object.assign(se, {
     as: T || (k?.href ? "a" : "button")
-  }, A), z ? Object.assign(he, k) : he["aria-label"] = R["aria-label"] || n);
-  const It = ce.join(k?.className, o, vh({
+  }, A), j ? Object.assign(se, k) : se["aria-label"] = R["aria-label"] || n);
+  const It = ue.join(k?.className, o, vh({
     [`align-${t}`]: !!t,
     [`aspect-ratio-${a}`]: !!a,
     [`size-${P}`]: !!P,
     [`theme-${C}`]: !!C,
     [`variant-${w}`]: !!w,
-    "is-clickable": Y,
+    "is-clickable": G,
     "has-error": q,
-    "has-icon-error-fallback": j,
+    "has-icon-error-fallback": z,
     "has-custom-error-fallback": V,
-    "is-loading": D,
+    "is-loading": M,
     [`object-fit-${v}`]: !!v,
     "has-badge": !!r,
     "fill-height": u
-  })), it = D && b?.current?.complete && b?.current || void 0, Du = it ? {
+  })), it = M && b?.current?.complete && b?.current || void 0, Du = it ? {
     backgroundImage: `url(${it.src})`
   } : void 0, To = f(ee, null, [f("span", {
     className: pt("background")
@@ -2178,44 +2178,44 @@ const ph = "lumx-thumbnail", {
   }, m, {
     style: {
       // Reserve space while loading (when possible)
-      width: D ? m?.width || it?.naturalWidth : void 0,
+      width: M ? m?.width || it?.naturalWidth : void 0,
       ...m?.style,
-      ...G,
+      ...K,
       ...c,
       ...Du
     },
     ref: h,
-    className: ce.join(pt("image", {
-      "is-loading": D,
+    className: ue.join(pt("image", {
+      "is-loading": M,
       "has-defined-size": !!(m?.height && m.width)
     }), m?.className),
     crossOrigin: s,
     src: d,
     alt: n,
     loading: g
-  }), null), !D && q && f("span", {
+  }), null), !M && q && f("span", {
     className: pt("fallback")
-  }, [j ? Z({
+  }, [z ? Z({
     icon: l,
     size: Ye.xxs,
     theme: C
   }) : l])]), r]);
-  return Y ? rt({
+  return G ? rt({
     ref: i,
-    ...he,
+    ...se,
     className: It,
     children: To,
     handleClick: _,
     handleKeyPress: x
   }) : f("div", S({
     ref: i
-  }, he, {
+  }, se, {
     className: It
   }), [To]);
 }, ae = (e) => jl()?.vnode.props?.[e] !== void 0;
 function gh(e, t) {
   const n = B(Ia(t.value));
-  K(
+  X(
     [e, t],
     () => {
       n.value = Ia(t.value);
@@ -2225,7 +2225,7 @@ function gh(e, t) {
   const a = (r) => {
     t.value && (n.value = Ia(t.value, r));
   };
-  return K(
+  return X(
     t,
     (r, o) => {
       o && (o.removeEventListener("load", a), o.removeEventListener("error", a)), r && (r.addEventListener("load", a), r.addEventListener("error", a));
@@ -2253,7 +2253,7 @@ function yh(e) {
       (p?.width !== m || p?.height !== h) && (c.value = { width: m, height: h });
     } else l.value && requestAnimationFrame(u);
   };
-  return K(
+  return X(
     [() => s.value?.offsetWidth, () => s.value?.offsetHeight, l],
     () => {
       Uu(u);
@@ -2277,7 +2277,7 @@ const Ah = {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = W(), o = $(() => e.class), s = B(), i = ae("onClick"), l = ae("onKeyPress"), {
+  const a = D(), r = W(), o = $(() => e.class), s = B(), i = ae("onClick"), l = ae("onKeyPress"), {
     isAnyDisabled: c,
     disabledStateProps: u,
     otherProps: d
@@ -2319,13 +2319,13 @@ const Ah = {
         ...C,
         props: {
           ...C.props,
-          class: ce.join(pt("badge"), C.props?.class)
+          class: ue.join(pt("badge"), C.props?.class)
         }
       })) : {
         ...b,
         props: {
           ...b.props,
-          class: ce.join(pt("badge"), b.props?.class)
+          class: ue.join(pt("badge"), b.props?.class)
         }
       })
     }), null);
@@ -2344,7 +2344,7 @@ const Ah = {
 }, Nh = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => {
     const {
       image: o,
@@ -2388,7 +2388,7 @@ const Ah = {
   props: E()("image", "alt", "size", "theme", "linkProps", "linkAs", "thumbnailProps", "class")
 });
 function wh(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Sh = "lumx-combobox-button", xh = (e, {
   Button: t,
@@ -2510,9 +2510,9 @@ function _c(e, t, n) {
       if (R)
         _ = R, T += 1;
       else if (s) {
-        const D = C ? d() : m();
-        if (!D || D === P) break;
-        _ = D, T += 1, w.currentNode = D;
+        const M = C ? d() : m();
+        if (!M || M === P) break;
+        _ = M, T += 1, w.currentNode = M;
       } else
         break;
     }
@@ -2665,12 +2665,12 @@ function Ch(e, t, n) {
     if (_ >= 0 && _ < k.length)
       return c = _, l.setActive(k[_]), !0;
     if (!i) return !1;
-    const x = N > 0 ? "next" : "prev", D = g(w, x) ?? (N > 0 ? h("first") : h("last"));
-    if (!D) return !1;
-    const q = p(D);
+    const x = N > 0 ? "next" : "prev", M = g(w, x) ?? (N > 0 ? h("first") : h("last"));
+    if (!M) return !1;
+    const q = p(M);
     if (q.length === 0) return !1;
-    const j = N > 0 ? 0 : q.length - 1;
-    return c = j, l.setActive(q[j]), !0;
+    const z = N > 0 ? 0 : q.length - 1;
+    return c = z, l.setActive(q[z]), !0;
   }
   function C(N) {
     if (!l.active)
@@ -2703,8 +2703,8 @@ function Ch(e, t, n) {
       const w = h("all");
       if (w.length === 0) return !1;
       if (!l.active) {
-        const x = N > 0 ? 0 : w.length - 1, R = N > 0 ? N - 1 : N + 1, D = Math.max(0, Math.min(x + R, w.length - 1));
-        return b(w[D], c);
+        const x = N > 0 ? 0 : w.length - 1, R = N > 0 ? N - 1 : N + 1, M = Math.max(0, Math.min(x + R, w.length - 1));
+        return b(w[M], c);
       }
       const k = v(l.active);
       if (!k) return !1;
@@ -2989,7 +2989,7 @@ function Ic(e, t, n) {
     loadingAnnouncement: /* @__PURE__ */ new Set()
   };
   function v(x, R) {
-    p[x].forEach((D) => D(R));
+    p[x].forEach((M) => M(R));
   }
   function g() {
     for (const [q] of u)
@@ -3015,41 +3015,40 @@ function Ic(e, t, n) {
   function k() {
     d?.abort(), d = null, s = null;
   }
-  function T(x, R, D) {
-    function q(j) {
-      if (D?.(j)) {
-        j.stopPropagation(), j.preventDefault();
+  function T(x, R, M) {
+    function q(z) {
+      if (M?.(z)) {
+        z.stopPropagation(), z.preventDefault();
         return;
       }
       let V = !1;
-      const { altKey: G } = j, z = w.focusNav;
-      switch (j.key) {
+      const { altKey: K } = z, j = w.focusNav;
+      switch (z.key) {
         case "Enter":
-          if (w.isOpen && z?.hasActiveItem && z.activeItem) {
-            const { activeItem: Y } = z;
-            Oc(Y) || Y.click(), !w.isMultiSelect && !kc(Y) && w.setIsOpen(!1);
-          } else w.isMultiSelect || w.setIsOpen(!w.isOpen);
-          V = !0;
+          if (w.isOpen && j?.hasActiveItem && j.activeItem) {
+            const { activeItem: G } = j;
+            Oc(G) || G.click(), !w.isMultiSelect && !kc(G) && w.setIsOpen(!1), V = !0;
+          } else w.isOpen && !w.isMultiSelect && (w.setIsOpen(!1), V = !0);
           break;
         case "ArrowDown":
-          z?.hasNavigableItems && (w.isOpen && !G ? z.hasActiveItem ? z.type === "grid" ? z.goDown() : !z.goToOffset(1) && a && z.goToFirst() : Qs(z) : (w.setIsOpen(!0), G || Qs(z))), V = !0;
+          j?.hasNavigableItems && (w.isOpen && !K ? j.hasActiveItem ? j.type === "grid" ? j.goDown() : !j.goToOffset(1) && a && j.goToFirst() : Qs(j) : (w.setIsOpen(!0), K || Qs(j))), V = !0;
           break;
         case "ArrowUp":
-          z?.hasNavigableItems && (!w.isOpen && !G ? (w.setIsOpen(!0), ei(z)) : w.isOpen && z.hasActiveItem ? z.type === "grid" ? z.goUp() : !z.goToOffset(-1) && a && z.goToLast() : w.isOpen && !z.hasActiveItem && !G && ei(z)), V = !0;
+          j?.hasNavigableItems && (!w.isOpen && !K ? (w.setIsOpen(!0), ei(j)) : w.isOpen && j.hasActiveItem ? j.type === "grid" ? j.goUp() : !j.goToOffset(-1) && a && j.goToLast() : w.isOpen && !j.hasActiveItem && !K && ei(j)), V = !0;
           break;
         case "Escape":
           w.isOpen ? w.setIsOpen(!1) : w.select(null), V = !0;
           break;
         case "PageUp":
-          w.isOpen && z?.hasActiveItem && z.goToOffset(-10), V = !0;
+          w.isOpen && j?.hasActiveItem && j.goToOffset(-10), V = !0;
           break;
         case "PageDown":
-          w.isOpen && z?.hasActiveItem && z.goToOffset(10), V = !0;
+          w.isOpen && j?.hasActiveItem && j.goToOffset(10), V = !0;
           break;
       }
-      V && (j.stopPropagation(), j.preventDefault());
+      V && (z.stopPropagation(), z.preventDefault());
     }
-    x.addEventListener("keydown", (j) => q(j), { signal: R });
+    x.addEventListener("keydown", (z) => q(z), { signal: R });
   }
   function _() {
     if (!r) return;
@@ -3095,16 +3094,16 @@ function Ic(e, t, n) {
       e.onSelect?.({ value: x ? mt(x) : "" });
     },
     registerOption(x, R) {
-      const D = l.toLowerCase(), q = mt(x).toLowerCase(), j = D.length > 0 && !q.includes(D);
-      return c.set(x, { callback: R, lastFiltered: j }), R(j), g(), () => {
+      const M = l.toLowerCase(), q = mt(x).toLowerCase(), z = M.length > 0 && !q.includes(M);
+      return c.set(x, { callback: R, lastFiltered: z }), R(z), g(), () => {
         c.delete(x), g();
       };
     },
     setFilter(x) {
       l = x;
       const R = x.toLowerCase();
-      for (const [D, q] of c) {
-        const j = mt(D).toLowerCase(), V = R.length > 0 && !j.includes(R);
+      for (const [M, q] of c) {
+        const z = mt(M).toLowerCase(), V = R.length > 0 && !z.includes(R);
         V !== q.lastFiltered && (q.lastFiltered = V, q.callback(V));
       }
       g();
@@ -3112,8 +3111,8 @@ function Ic(e, t, n) {
     refilterOption(x) {
       const R = c.get(x);
       if (!R) return;
-      const D = l.toLowerCase(), q = mt(x).toLowerCase(), j = D.length > 0 && !q.includes(D);
-      j !== R.lastFiltered && (R.lastFiltered = j, R.callback(j), g());
+      const M = l.toLowerCase(), q = mt(x).toLowerCase(), z = M.length > 0 && !q.includes(M);
+      z !== R.lastFiltered && (R.lastFiltered = z, R.callback(z), g());
     },
     registerSection(x, R) {
       return u.set(x, { callback: R, last: { hidden: !1, "aria-hidden": !1 } }), ti(x, u, c, !0), () => {
@@ -3279,7 +3278,7 @@ function Ue(e, t) {
 function be(e) {
   return e.split("-")[0];
 }
-function le(e) {
+function ce(e) {
   return e.split("-")[1];
 }
 function Lc(e) {
@@ -3297,7 +3296,7 @@ function bo(e) {
 }
 function Ec(e, t, n) {
   n === void 0 && (n = !1);
-  const a = le(e), r = bo(e), o = vo(r);
+  const a = ce(e), r = bo(e), o = vo(r);
   let s = r === "x" ? a === (n ? "end" : "start") ? "right" : "left" : a === "start" ? "bottom" : "top";
   return t.reference[o] > t.floating[o] && (s = Vt(s)), [s, Vt(s)];
 }
@@ -3322,7 +3321,7 @@ function jh(e, t, n) {
   }
 }
 function Hh(e, t, n, a) {
-  const r = le(e);
+  const r = ce(e);
   let o = jh(be(e), n === "start", a);
   return r && (o = o.map((s) => s + "-" + r), t && (o = o.concat(o.map(Ht)))), o;
 }
@@ -3402,7 +3401,7 @@ function li(e, t, n) {
         y: a.y
       };
   }
-  switch (le(t)) {
+  switch (ce(t)) {
     case "start":
       h[s] -= m * (n && c ? -1 : 1);
       break;
@@ -3545,14 +3544,14 @@ const Uh = async (e, t, n) => {
     }, h = bo(r), p = vo(h), v = await s.getDimensions(c), g = h === "y", b = g ? "top" : "left", y = g ? "bottom" : "right", A = g ? "clientHeight" : "clientWidth", P = o.reference[p] + o.reference[h] - m[h] - o.floating[p], C = m[h] - o.reference[h], N = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
     let w = N ? N[A] : 0;
     (!w || !await (s.isElement == null ? void 0 : s.isElement(N))) && (w = i.floating[A] || o.floating[p]);
-    const k = P / 2 - C / 2, T = w / 2 - v[p] / 2 - 1, _ = Le(d[b], T), x = Le(d[y], T), R = _, D = w - v[p] - x, q = w / 2 - v[p] / 2 + k, j = Yr(R, q, D), V = !l.arrow && le(r) != null && q !== j && o.reference[p] / 2 - (q < R ? _ : x) - v[p] / 2 < 0, G = V ? q < R ? q - R : q - D : 0;
+    const k = P / 2 - C / 2, T = w / 2 - v[p] / 2 - 1, _ = Le(d[b], T), x = Le(d[y], T), R = _, M = w - v[p] - x, q = w / 2 - v[p] / 2 + k, z = Yr(R, q, M), V = !l.arrow && ce(r) != null && q !== z && o.reference[p] / 2 - (q < R ? _ : x) - v[p] / 2 < 0, K = V ? q < R ? q - R : q - M : 0;
     return {
-      [h]: m[h] + G,
+      [h]: m[h] + K,
       data: {
-        [h]: j,
-        centerOffset: q - j - G,
+        [h]: z,
+        centerOffset: q - z - K,
         ...V && {
-          alignmentOffset: G
+          alignmentOffset: K
         }
       },
       reset: V
@@ -3560,7 +3559,7 @@ const Uh = async (e, t, n) => {
   }
 });
 function Kh(e, t, n) {
-  return (e ? [...n.filter((r) => le(r) === e), ...n.filter((r) => le(r) !== e)] : n.filter((r) => be(r) === r)).filter((r) => e ? le(r) === e || (t ? Ht(r) !== r : !1) : !0);
+  return (e ? [...n.filter((r) => ce(r) === e), ...n.filter((r) => ce(r) !== e)] : n.filter((r) => be(r) === r)).filter((r) => e ? ce(r) === e || (t ? Ht(r) !== r : !1) : !0);
 }
 const Xh = function(e) {
   return e === void 0 && (e = {}), {
@@ -3605,10 +3604,10 @@ const Xh = function(e) {
           }
         };
       const w = C.map((_) => {
-        const x = le(_.placement);
+        const x = ce(_.placement);
         return [_.placement, x && u ? (
           // Check along the mainAxis and main crossAxis side.
-          _.overflows.slice(0, 2).reduce((R, D) => R + D, 0)
+          _.overflows.slice(0, 2).reduce((R, M) => R + M, 0)
         ) : (
           // Check only the mainAxis.
           _.overflows[0]
@@ -3617,7 +3616,7 @@ const Xh = function(e) {
         0,
         // Aligned placements should not check their opposite crossAxis
         // side.
-        le(_[0]) ? 2 : 3
+        ce(_[0]) ? 2 : 3
       ).every((x) => x <= 0))[0]) == null ? void 0 : r[0]) || w[0][0];
       return T !== i ? {
         data: {
@@ -3667,34 +3666,34 @@ const Xh = function(e) {
         overflows: T
       }], !T.every((q) => q <= 0)) {
         var x, R;
-        const q = (((x = o.flip) == null ? void 0 : x.index) || 0) + 1, j = w[q];
-        if (j && (!(d === "alignment" ? y !== Se(j) : !1) || // We leave the current main axis only if every placement on that axis
+        const q = (((x = o.flip) == null ? void 0 : x.index) || 0) + 1, z = w[q];
+        if (z && (!(d === "alignment" ? y !== Se(z) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        _.every((z) => Se(z.placement) === y ? z.overflows[0] > 0 : !0)))
+        _.every((j) => Se(j.placement) === y ? j.overflows[0] > 0 : !0)))
           return {
             data: {
               index: q,
               overflows: _
             },
             reset: {
-              placement: j
+              placement: z
             }
           };
-        let V = (R = _.filter((G) => G.overflows[0] <= 0).sort((G, z) => G.overflows[1] - z.overflows[1])[0]) == null ? void 0 : R.placement;
+        let V = (R = _.filter((K) => K.overflows[0] <= 0).sort((K, j) => K.overflows[1] - j.overflows[1])[0]) == null ? void 0 : R.placement;
         if (!V)
           switch (h) {
             case "bestFit": {
-              var D;
-              const G = (D = _.filter((z) => {
+              var M;
+              const K = (M = _.filter((j) => {
                 if (N) {
-                  const Y = Se(z.placement);
-                  return Y === y || // Create a bias to the `y` side axis due to horizontal
+                  const G = Se(j.placement);
+                  return G === y || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
-                  Y === "y";
+                  G === "y";
                 }
                 return !0;
-              }).map((z) => [z.placement, z.overflows.filter((Y) => Y > 0).reduce((Y, he) => Y + he, 0)]).sort((z, Y) => z[1] - Y[1])[0]) == null ? void 0 : D[0];
-              G && (V = G);
+              }).map((j) => [j.placement, j.overflows.filter((G) => G > 0).reduce((G, se) => G + se, 0)]).sort((j, G) => j[1] - G[1])[0]) == null ? void 0 : M[0];
+              K && (V = K);
               break;
             }
             case "initialPlacement":
@@ -3717,7 +3716,7 @@ async function Jh(e, t) {
     placement: n,
     platform: a,
     elements: r
-  } = e, o = await (a.isRTL == null ? void 0 : a.isRTL(r.floating)), s = be(n), i = le(n), l = Se(n) === "y", c = Zh.has(s) ? -1 : 1, u = o && l ? -1 : 1, d = Ue(t, e);
+  } = e, o = await (a.isRTL == null ? void 0 : a.isRTL(r.floating)), s = be(n), i = ce(n), l = Se(n) === "y", c = Zh.has(s) ? -1 : 1, u = o && l ? -1 : 1, d = Ue(t, e);
   let {
     mainAxis: m,
     crossAxis: h,
@@ -3833,7 +3832,7 @@ const Qh = function(e) {
         apply: l = () => {
         },
         ...c
-      } = Ue(e, t), u = await s.detectOverflow(t, c), d = be(r), m = le(r), h = Se(r) === "y", {
+      } = Ue(e, t), u = await s.detectOverflow(t, c), d = be(r), m = ce(r), h = Se(r) === "y", {
         width: p,
         height: v
       } = o.floating;
@@ -3842,8 +3841,8 @@ const Qh = function(e) {
       const y = v - u.top - u.bottom, A = p - u.left - u.right, P = Le(v - u[g], y), C = Le(p - u[b], A), N = !t.middlewareData.shift;
       let w = P, k = C;
       if ((n = t.middlewareData.shift) != null && n.enabled.x && (k = A), (a = t.middlewareData.shift) != null && a.enabled.y && (w = y), N && !m) {
-        const _ = ne(u.left, 0), x = ne(u.right, 0), R = ne(u.top, 0), D = ne(u.bottom, 0);
-        h ? k = p - 2 * (_ !== 0 || x !== 0 ? _ + x : ne(u.left, u.right)) : w = v - 2 * (R !== 0 || D !== 0 ? R + D : ne(u.top, u.bottom));
+        const _ = ne(u.left, 0), x = ne(u.right, 0), R = ne(u.top, 0), M = ne(u.bottom, 0);
+        h ? k = p - 2 * (_ !== 0 || x !== 0 ? _ + x : ne(u.left, u.right)) : w = v - 2 * (R !== 0 || M !== 0 ? R + M : ne(u.top, u.bottom));
       }
       await l({
         ...t,
@@ -3876,7 +3875,7 @@ function ye(e) {
 function go(e) {
   return sn() ? e instanceof Node || e instanceof re(e).Node : !1;
 }
-function de(e) {
+function fe(e) {
   return sn() ? e instanceof Element || e instanceof re(e).Element : !1;
 }
 function ge(e) {
@@ -3892,7 +3891,7 @@ function Ct(e) {
     overflowX: n,
     overflowY: a,
     display: r
-  } = fe(e);
+  } = he(e);
   return /auto|scroll|overlay|hidden|clip/.test(t + a + n) && !nm.has(r);
 }
 const am = /* @__PURE__ */ new Set(["table", "td", "th"]);
@@ -3911,7 +3910,7 @@ function ln(e) {
 }
 const sm = ["transform", "translate", "scale", "rotate", "perspective"], im = ["transform", "translate", "scale", "rotate", "perspective", "filter"], lm = ["paint", "layout", "strict", "content"];
 function yo(e) {
-  const t = Ao(), n = de(e) ? fe(e) : e;
+  const t = Ao(), n = fe(e) ? he(e) : e;
   return sm.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) || im.some((a) => (n.willChange || "").includes(a)) || lm.some((a) => (n.contain || "").includes(a));
 }
 function cm(e) {
@@ -3932,11 +3931,11 @@ const um = /* @__PURE__ */ new Set(["html", "body", "#document"]);
 function tt(e) {
   return um.has(Ge(e));
 }
-function fe(e) {
+function he(e) {
   return re(e).getComputedStyle(e);
 }
 function cn(e) {
-  return de(e) ? {
+  return fe(e) ? {
     scrollLeft: e.scrollLeft,
     scrollTop: e.scrollTop
   } : {
@@ -3974,7 +3973,7 @@ function Zr(e) {
   return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
 }
 function Mc(e) {
-  const t = fe(e);
+  const t = he(e);
   let n = parseFloat(t.width) || 0, a = parseFloat(t.height) || 0;
   const r = ge(e), o = r ? e.offsetWidth : n, s = r ? e.offsetHeight : a, i = jt(n) !== o || jt(a) !== s;
   return i && (n = o, a = s), {
@@ -3984,7 +3983,7 @@ function Mc(e) {
   };
 }
 function No(e) {
-  return de(e) ? e : e.contextElement;
+  return fe(e) ? e : e.contextElement;
 }
 function Je(e) {
   const t = No(e);
@@ -4016,14 +4015,14 @@ function Fe(e, t, n, a) {
   t === void 0 && (t = !1), n === void 0 && (n = !1);
   const r = e.getBoundingClientRect(), o = No(e);
   let s = pe(1);
-  t && (a ? de(a) && (s = Je(a)) : s = Je(e));
+  t && (a ? fe(a) && (s = Je(a)) : s = Je(e));
   const i = fm(o, n, a) ? Dc(o) : pe(0);
   let l = (r.left + i.x) / s.x, c = (r.top + i.y) / s.y, u = r.width / s.x, d = r.height / s.y;
   if (o) {
-    const m = re(o), h = a && de(a) ? re(a) : a;
+    const m = re(o), h = a && fe(a) ? re(a) : a;
     let p = m, v = Zr(p);
     for (; v && a && h !== p; ) {
-      const g = Je(v), b = v.getBoundingClientRect(), y = fe(v), A = b.left + (v.clientLeft + parseFloat(y.paddingLeft)) * g.x, P = b.top + (v.clientTop + parseFloat(y.paddingTop)) * g.y;
+      const g = Je(v), b = v.getBoundingClientRect(), y = he(v), A = b.left + (v.clientLeft + parseFloat(y.paddingLeft)) * g.x, P = b.top + (v.clientTop + parseFloat(y.paddingTop)) * g.y;
       l *= g.x, c *= g.y, u *= g.x, d *= g.y, l += A, c += P, p = re(v), v = Zr(p);
     }
   }
@@ -4079,7 +4078,7 @@ function pm(e) {
   const t = ye(e), n = cn(e), a = e.ownerDocument.body, r = ne(t.scrollWidth, t.clientWidth, a.scrollWidth, a.clientWidth), o = ne(t.scrollHeight, t.clientHeight, a.scrollHeight, a.clientHeight);
   let s = -n.scrollLeft + un(e);
   const i = -n.scrollTop;
-  return fe(a).direction === "rtl" && (s += ne(t.clientWidth, a.clientWidth) - r), {
+  return he(a).direction === "rtl" && (s += ne(t.clientWidth, a.clientWidth) - r), {
     width: r,
     height: o,
     x: s,
@@ -4123,7 +4122,7 @@ function di(e, t, n) {
     a = vm(e, n);
   else if (t === "document")
     a = pm(ye(e));
-  else if (de(t))
+  else if (fe(t))
     a = gm(t, n);
   else {
     const r = Dc(e);
@@ -4138,17 +4137,17 @@ function di(e, t, n) {
 }
 function Fc(e, t) {
   const n = Ee(e);
-  return n === t || !de(n) || tt(n) ? !1 : fe(n).position === "fixed" || Fc(n, t);
+  return n === t || !fe(n) || tt(n) ? !1 : he(n).position === "fixed" || Fc(n, t);
 }
 function ym(e, t) {
   const n = t.get(e);
   if (n)
     return n;
-  let a = At(e, [], !1).filter((i) => de(i) && Ge(i) !== "body"), r = null;
-  const o = fe(e).position === "fixed";
+  let a = At(e, [], !1).filter((i) => fe(i) && Ge(i) !== "body"), r = null;
+  const o = he(e).position === "fixed";
   let s = o ? Ee(e) : e;
-  for (; de(s) && !tt(s); ) {
-    const i = fe(s), l = yo(s);
+  for (; fe(s) && !tt(s); ) {
+    const i = he(s), l = yo(s);
     !l && i.position === "fixed" && (r = null), (o ? !l && !r : !l && i.position === "static" && !!r && bm.has(r.position) || Ct(s) && !l && Fc(e, s)) ? a = a.filter((u) => u !== s) : r = i, s = Ee(s);
   }
   return t.set(e, a), a;
@@ -4206,10 +4205,10 @@ function wm(e, t, n) {
   };
 }
 function La(e) {
-  return fe(e).position === "static";
+  return he(e).position === "static";
 }
 function fi(e, t) {
-  if (!ge(e) || fe(e).position === "fixed")
+  if (!ge(e) || he(e).position === "fixed")
     return null;
   if (t)
     return t(e);
@@ -4223,7 +4222,7 @@ function qc(e, t) {
   if (!ge(e)) {
     let r = Ee(e);
     for (; r && !tt(r); ) {
-      if (de(r) && !La(r))
+      if (fe(r) && !La(r))
         return r;
       r = Ee(r);
     }
@@ -4247,7 +4246,7 @@ const Sm = async function(e) {
   };
 };
 function xm(e) {
-  return fe(e).direction === "rtl";
+  return he(e).direction === "rtl";
 }
 const Pm = {
   convertOffsetParentRelativeRectToViewportRelativeRect: hm,
@@ -4258,7 +4257,7 @@ const Pm = {
   getClientRects: mm,
   getDimensions: Nm,
   getScale: Je,
-  isElement: de,
+  isElement: fe,
   isRTL: xm
 };
 function zc(e, t) {
@@ -4443,11 +4442,11 @@ function Wc(e, t, n) {
   function N() {
     r.value || (g.value = !1);
   }
-  return K([o, s, i, r], A, {
+  return X([o, s, i, r], A, {
     flush: "sync"
-  }), K([c, u], C, {
+  }), X([c, u], C, {
     flush: "sync"
-  }), K(r, N, {
+  }), X(r, N, {
     flush: "sync"
   }), zl() && to(P), {
     x: Ke(d),
@@ -4603,7 +4602,7 @@ function jm(e) {
   return c && (u[s] = c), Io("div", u, t);
 }
 function Hm(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const dn = /* @__PURE__ */ L((e, {
   slots: t
@@ -4658,7 +4657,7 @@ const dn = /* @__PURE__ */ L((e, {
   emit: t,
   expose: n
 }) => {
-  const a = M(), r = W(), o = $(() => e.class), s = ec(() => a.tabindex, "tabIndex"), {
+  const a = D(), r = W(), o = $(() => e.class), s = ec(() => a.tabindex, "tabIndex"), {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
@@ -4716,7 +4715,7 @@ fn.defaultProps = Um;
 const tN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(fn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -4740,7 +4739,7 @@ function ot(e, t, n = { immediate: !0 }) {
   let a;
   const r = () => {
     a?.(), a = void 0;
-  }, o = K(
+  }, o = X(
     e,
     (s, i) => {
       r();
@@ -4771,7 +4770,7 @@ function So() {
 const Km = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = $(() => e.class), {
+  const n = D(), a = $(() => e.class), {
     listboxId: r,
     anchorRef: o,
     setHandle: s,
@@ -4779,7 +4778,7 @@ const Km = /* @__PURE__ */ L((e, {
   } = Ae(), {
     isOpen: l
   } = So(), c = B(null);
-  return K(c, (u) => {
+  return X(c, (u) => {
     u && (s(Lh(u, {
       onSelect(d) {
         e.onSelect?.(d), t("select", d);
@@ -4959,7 +4958,7 @@ const Zc = "lumx-text-field", Jc = `${Zc}__input-native`, {
 }, np = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = (i, l, c) => {
+  const n = D(), a = W(), r = $(() => e.class), o = (i, l, c) => {
     c?.stopImmediatePropagation(), t("change", i, l, c);
   }, s = (i, l, c) => {
     t("input", i, l, c);
@@ -5039,7 +5038,7 @@ const sp = {
 }, ip = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = B(null), s = op(O(() => e.rows ?? Qc.rows), o, O(() => e.value)), i = (c, u, d) => {
+  const n = D(), a = W(), r = $(() => e.class), o = B(null), s = op(O(() => e.rows ?? Qc.rows), o, O(() => e.value)), i = (c, u, d) => {
     d?.stopImmediatePropagation(), t("change", c, u, d);
   }, l = (c, u, d) => {
     t("input", c, u, d);
@@ -5121,7 +5120,7 @@ xe.className = tu;
 xe.defaultProps = nu;
 const {
   block: vp,
-  element: se
+  element: ie
 } = F(Zc);
 function bp(e, t, n, a, r) {
   const o = e ? `text-field-helper-${n}` : void 0, s = t ? `text-field-error-${n}` : void 0, i = r ? `text-field-label-${n}` : void 0, l = [s, o, a].filter(Boolean), c = l.length === 0 ? void 0 : l.join(" ");
@@ -5162,7 +5161,7 @@ const gp = (e) => {
     isFocus: _,
     IconButton: x,
     ref: R
-  } = e, D = (w || "").length, q = D > 0;
+  } = e, M = (w || "").length, q = M > 0;
   return f("div", {
     ref: R,
     className: I(n, vp({
@@ -5181,56 +5180,56 @@ const gp = (e) => {
       [`theme-${N}`]: !!N
     }))
   }, [(m || v) && f("div", {
-    className: se("header")
+    className: ie("header")
   }, [m && Re({
     ...h,
     id: C,
     htmlFor: c,
-    className: se("label"),
+    className: ie("label"),
     isRequired: u,
     theme: N,
     children: m
   }), v && f("div", {
-    className: se("char-counter")
-  }, [f("span", null, [v - D]), v - D === 0 && Z({
+    className: ie("char-counter")
+  }, [f("span", null, [v - M]), v - M === 0 && Z({
     icon: gt,
     size: H.xxs
   })])]), f("div", {
-    className: se("wrapper"),
+    className: ie("wrapper"),
     ref: y
   }, [l && Z({
-    className: se("input-icon"),
-    color: N === ue.dark ? "light" : void 0,
+    className: ie("input-icon"),
+    color: N === de.dark ? "light" : void 0,
     icon: l,
     size: H.xs
   }), t ? f("div", {
-    className: se("chips")
+    className: ie("chips")
   }, [t, T]) : f("div", {
-    className: se("input-wrapper")
+    className: ie("input-wrapper")
   }, [T]), (d || s) && Z({
-    className: se("input-validity"),
-    color: N === ue.dark ? "light" : void 0,
+    className: ie("input-validity"),
+    color: N === de.dark ? "light" : void 0,
     icon: d ? ro : gt,
     size: H.xxs
   }), a && q && !p && f(x, S({
     "aria-describedby": C
   }, a, {
-    className: se("input-clear"),
+    className: ie("input-clear"),
     icon: ed,
     emphasis: me.low,
     size: H.s,
     theme: N,
     type: "button"
   }), null), k && f("div", {
-    className: se("after-element")
+    className: ie("after-element")
   }, [k])]), s && r && xe({
     children: r,
-    className: se("helper"),
+    className: ie("helper"),
     kind: Q.error,
     theme: N,
     id: P
   }), i && xe({
-    className: se("helper"),
+    className: ie("helper"),
     theme: N,
     id: A,
     children: i
@@ -5249,14 +5248,14 @@ const gp = (e) => {
 }, Ap = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = xc("chips"), r = W(), o = $(() => e.class), s = oe(), i = O(() => e.id || s), l = B(!1), {
+  const n = D(), a = xc("chips"), r = W(), o = $(() => e.class), s = oe(), i = O(() => e.id || s), l = B(!1), {
     isAnyDisabled: c,
     disabledStateProps: u
   } = J(O(() => ({
     ...e,
     ...n
   }))), d = B(null);
-  K(d, (y) => {
+  X(d, (y) => {
     const A = y?.$el ?? y ?? null;
     e.inputRef?.(A);
   }, {
@@ -5286,15 +5285,15 @@ const gp = (e) => {
       disabled: _,
       isDisabled: x,
       "aria-disabled": R,
-      ariaDisabled: D,
+      ariaDisabled: M,
       onChange: q,
-      onInput: j,
+      onInput: z,
       onFocus: V,
-      onBlur: G,
-      chips: z,
-      ...Y
-    } = n, he = {
-      ...Y,
+      onBlur: K,
+      chips: j,
+      ...G
+    } = n, se = {
+      ...G,
       id: i.value,
       value: e.value,
       name: e.name,
@@ -5303,22 +5302,22 @@ const gp = (e) => {
       "aria-invalid": e.hasError || void 0,
       "aria-describedby": C,
       ...u.value,
-      readOnly: !!Y.readOnly || !!u.value["aria-disabled"],
+      readOnly: !!G.readOnly || !!u.value["aria-disabled"],
       onChange: h,
       onInput: p,
       onFocus: v,
       onBlur: g
     }, It = e.multiline ? f(ip, S({
       ref: d
-    }, he, {
+    }, se, {
       rows: e.minimumRows
     }), null) : f(np, S({
       ref: d
-    }, he, {
+    }, se, {
       type: e.type || "text"
     }), null);
     return f(gp, {
-      chips: (a() ?? z) || void 0,
+      chips: (a() ?? j) || void 0,
       error: e.error,
       forceFocusStyle: e.forceFocusStyle,
       hasError: e.hasError,
@@ -5490,7 +5489,7 @@ function Tp() {
 const _p = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class), {
+  const n = D(), a = $(() => e.class), {
     listboxId: r,
     handle: o
   } = Ae(), s = B(null);
@@ -5594,7 +5593,7 @@ const iu = (e) => {
   });
 };
 function Ep(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const $p = "lumx-combobox-option", {
   block: Rp,
@@ -5671,7 +5670,7 @@ const Fp = {
   slots: t,
   emit: n
 }) => {
-  const a = M(), r = $(() => e.class), {
+  const a = D(), r = $(() => e.class), {
     type: o
   } = Tp(), {
     handle: s
@@ -5683,7 +5682,7 @@ const Fp = {
       return v.registerOption(g, (b) => {
         d.value = b;
       });
-  }), K(
+  }), X(
     te(e, "value"),
     () => {
       const v = s.value, g = u.value;
@@ -5774,7 +5773,7 @@ const Fp = {
   props: E()("isDisabled", "onClick", "class")
 });
 function Hp(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Vp = "lumx-combobox-option-more-info", {
   block: Wp,
@@ -5837,7 +5836,7 @@ const Vp = "lumx-combobox-option-more-info", {
   MIN_WIDTH: "minWidth"
 }, Ea = 14, Yp = 9999;
 function Zp(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Jp = "lumx-popover", {
   block: Qp,
@@ -6047,7 +6046,7 @@ const cv = {
   emits: cv
 });
 function uv(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const cu = /* @__PURE__ */ L((e, {
   slots: t
@@ -6198,7 +6197,7 @@ const cu = /* @__PURE__ */ L((e, {
   props: E()("hasDescription", "count", "class")
 });
 function vv(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const bv = "lumx-combobox-popover", {
   block: gv,
@@ -6285,7 +6284,7 @@ function Cv(e) {
 const Po = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => {
     const r = e.as || "div", o = Cv({
       ...e,
@@ -6337,7 +6336,7 @@ const Po = /* @__PURE__ */ L((e, {
   slots: t,
   emit: n
 }) => {
-  const a = M(), r = oe(), o = B(null), s = Ie(null);
+  const a = D(), r = oe(), o = B(null), s = Ie(null);
   return Gm({
     handle: s,
     setHandle: (l) => {
@@ -6345,7 +6344,7 @@ const Po = /* @__PURE__ */ L((e, {
     },
     listboxId: r,
     anchorRef: o
-  }), K(s, (l) => {
+  }), X(s, (l) => {
     if (!l) return;
     const c = l.subscribe("open", (u) => {
       a.onOpen?.(u), n("open", u);
@@ -6362,7 +6361,7 @@ const Po = /* @__PURE__ */ L((e, {
   }
 });
 function Tv(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const _v = "lumx-combobox-section", Iv = (e, {
   ListSection: t
@@ -6388,7 +6387,7 @@ const _v = "lumx-combobox-section", Iv = (e, {
 }, nN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Tt, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -6414,7 +6413,7 @@ hn.displayName = Lv;
 hn.className = du;
 hn.defaultProps = Ev;
 const fu = /* @__PURE__ */ L((e) => {
-  const t = M(), n = $(() => e.class);
+  const t = D(), n = $(() => e.class);
   return () => f(hn, S(t, {
     className: n.value
   }), null);
@@ -6429,7 +6428,7 @@ const fu = /* @__PURE__ */ L((e) => {
   slots: n,
   expose: a
 }) => {
-  const r = M(), o = $(() => e.class), s = B();
+  const r = D(), o = $(() => e.class), s = B();
   a({
     $el: s
   });
@@ -6450,7 +6449,7 @@ const fu = /* @__PURE__ */ L((e) => {
     } = c.value;
     return f(iu, S(m, {
       ref: s,
-      className: ce.join(o.value, d),
+      className: ue.join(o.value, d),
       isDisabled: l.value.disabled,
       "aria-disabled": l.value["aria-disabled"],
       handleClick: u,
@@ -6468,7 +6467,7 @@ const fu = /* @__PURE__ */ L((e) => {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = $(() => e.class), o = ae("onClick"), {
+  const a = D(), r = $(() => e.class), o = ae("onClick"), {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
@@ -6540,7 +6539,7 @@ mn.defaultProps = qv;
 const zv = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = oe(), r = $(() => e.class);
+  const n = D(), a = oe(), r = $(() => e.class);
   return () => f(mn, S(e, n, {
     className: r.value,
     id: a,
@@ -6591,7 +6590,7 @@ const zv = /* @__PURE__ */ L((e, {
   props: E()("label", "icon", "class")
 });
 function ut(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const jv = "lumx-combobox-state", {
   block: Hv
@@ -6663,7 +6662,7 @@ function Uv(e, t) {
   };
 }
 function Ra(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Gv = "lumx-generic-block", {
   block: Kv,
@@ -6713,7 +6712,7 @@ const Gv = "lumx-generic-block", {
 }, Yv = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => {
     const r = t.figure?.(), o = t.default?.(), s = t.actions?.(), i = {
       verticalAlign: e.verticalAlign,
@@ -7416,7 +7415,7 @@ An.defaultProps = yu;
 const oN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(An, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -7447,7 +7446,7 @@ const oN = /* @__PURE__ */ L((e, {
 }, sN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Wb, S(e, n, {
     className: a.value,
     badge: e.badge || t.badge?.(),
@@ -7532,7 +7531,7 @@ const oN = /* @__PURE__ */ L((e, {
 }, iN = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), i = B(null), {
+  const n = D(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), i = B(null), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: u
@@ -7540,7 +7539,7 @@ const oN = /* @__PURE__ */ L((e, {
     ...e,
     ...n
   }))), d = O(() => e.isChecked === Au);
-  K(d, (h) => {
+  X(d, (h) => {
     i.value && (i.value.indeterminate = h);
   }, {
     immediate: !0
@@ -7599,9 +7598,9 @@ const oN = /* @__PURE__ */ L((e, {
     keyDownProp: N = "onKeyDown",
     tabIndexProp: w = "tabIndex",
     ...k
-  } = e, T = p && !y, _ = !!p || !!y || s, x = o || (g === ue.light ? U.dark : U.light), R = (q) => {
+  } = e, T = p && !y, _ = !!p || !!y || s, x = o || (g === de.light ? U.dark : U.light), R = (q) => {
     A?.(q), p && d && bd(d)(q);
-  }, D = {
+  }, M = {
     [N]: R,
     [w]: _ && !P.disabled ? 0 : void 0
   };
@@ -7609,7 +7608,7 @@ const oN = /* @__PURE__ */ L((e, {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     f("a", S({
       role: T ? "button" : void 0
-    }, D, k, {
+    }, M, k, {
       href: P.disabled ? void 0 : y,
       ref: b,
       className: I(r, Yb({
@@ -7649,7 +7648,7 @@ const oN = /* @__PURE__ */ L((e, {
 }, ml = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = nt(), a = M(), r = W(), o = $(() => e.class), s = ae("onClick"), i = ae("onAfterClick"), l = ae("onBeforeClick"), {
+  const n = nt(), a = D(), r = W(), o = $(() => e.class), s = ae("onClick"), i = ae("onAfterClick"), l = ae("onBeforeClick"), {
     isAnyDisabled: c,
     disabledStateProps: u,
     otherProps: d
@@ -7703,7 +7702,7 @@ const oN = /* @__PURE__ */ L((e, {
 }, ng = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(tg, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -7714,7 +7713,7 @@ const oN = /* @__PURE__ */ L((e, {
   props: E()("align", "class")
 });
 function ag(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const rg = "lumx-selection-chip-group", {
   block: og,
@@ -7748,7 +7747,7 @@ const rg = "lumx-selection-chip-group", {
     "aria-orientation": "horizontal",
     className: og([p])
   }), ag(s = i.map((y) => {
-    const A = c && ie(c, y) || ie(l, y), P = ie(l, y), C = v?.(y) || {}, N = C.isDisabled || m, w = typeof C.children == "string" ? C.children : A, k = d ? `${w} - ${d}` : w;
+    const A = c && le(c, y) || le(l, y), P = le(l, y), C = v?.(y) || {}, N = C.isDisabled || m, w = typeof C.children == "string" ? C.children : A, k = d ? `${w} - ${d}` : w;
     return f(o, {
       key: P,
       label: N ? void 0 : k
@@ -7795,7 +7794,7 @@ function Mt(e, t, n) {
 function bl(e, t) {
   const n = e.getValue();
   if (!n) return;
-  const a = n.findIndex((o) => String(ie(e.getOptionId, o)) === t);
+  const a = n.findIndex((o) => String(le(e.getOptionId, o)) === t);
   if (a === -1) return;
   const r = [...n];
   r.splice(a, 1), e.onChange(r);
@@ -7843,7 +7842,7 @@ function Nu({
     ), s(() => l.abort());
   });
 }
-const wu = (e) => (t) => X(t) && t.type === e, ug = {
+const wu = (e) => (t) => Y(t) && t.type === e, ug = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   change: (e) => !0
 }, dg = /* @__PURE__ */ L(
@@ -7852,7 +7851,7 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
     emit: t,
     slots: n
   }) => {
-    const a = M(), r = $(() => e.class), o = W(), s = B(null), i = () => s.value?.$el ?? s.value ?? null;
+    const a = D(), r = $(() => e.class), o = W(), s = B(null), i = () => s.value?.$el ?? s.value ?? null;
     je((c) => {
       const u = cg({
         getContainer: i,
@@ -8049,7 +8048,7 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
     }))
   }), null);
 }, cN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(gg, S(t, e, {
     className: a.value,
     theme: e.theme || n.value
@@ -8076,11 +8075,11 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
     }))
   }), [Z({
     icon: od,
-    color: n === ue.dark ? U.light : U.dark,
+    color: n === de.dark ? U.light : U.dark,
     size: H.xs
   })]);
 }, uN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W({
+  const t = D(), n = W({
     defaultTheme: void 0
   }), a = $(() => e.class);
   return () => f(Ng, S(t, e, {
@@ -8123,7 +8122,7 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
   } = e, w = (_) => {
     const x = !s;
     c && x && c(_), l && !x && l(_), u && u(x, _);
-  }, k = d === ue.dark ? U.light : U.dark, T = I(t, Sg({
+  }, k = d === de.dark ? U.light : U.dark, T = I(t, Sg({
     "has-background": a,
     "has-header": !zt(h.children),
     "has-header-divider": o,
@@ -8169,8 +8168,8 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = W(), o = $(() => e.class), s = B(null), i = B(e.isOpen), l = B(e.isOpen);
-  K(() => e.isOpen, (h) => {
+  const a = D(), r = W(), o = $(() => e.class), s = B(null), i = B(e.isOpen), l = B(e.isOpen);
+  X(() => e.isOpen, (h) => {
     l.value = h, h || e.closeMode === "hide" ? i.value = !0 : _o || (i.value = !1);
   }, {
     immediate: !0
@@ -8227,7 +8226,7 @@ const wu = (e) => (t) => X(t) && t.type === e, ug = {
   emits: Cg
 });
 function Og(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const kg = "lumx-flag", {
   block: Tg,
@@ -8242,7 +8241,7 @@ const kg = "lumx-flag", {
     truncate: s,
     Text: i,
     ...l
-  } = e, c = a || (o === ue.light ? U.dark : U.light), u = !!s;
+  } = e, c = a || (o === de.light ? U.dark : U.light), u = !!s;
   return f("div", S(l, {
     className: I(r, Tg({
       [`color-${c}`]: !!c,
@@ -8263,7 +8262,7 @@ const kg = "lumx-flag", {
 }, fN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => f(_g, S(e, n, {
     className: r.value,
     theme: e.theme || a.value,
@@ -8360,7 +8359,7 @@ function Rg() {
 var Mg = Rg();
 const Dg = /* @__PURE__ */ Pe(Mg);
 function Bg(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Fg = "GridColumn", xu = "lumx-grid-column", qg = {}, Nn = (e) => {
   const {
@@ -8393,7 +8392,7 @@ Nn.defaultProps = qg;
 const hN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Nn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -8413,7 +8412,7 @@ const hN = /* @__PURE__ */ L((e, {
 }, mN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = oc(), r = $(() => e.class), o = O(() => {
+  const n = D(), a = oc(), r = $(() => e.class), o = O(() => {
     const {
       className: s,
       ...i
@@ -8438,7 +8437,7 @@ const hN = /* @__PURE__ */ L((e, {
 }), pN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => f(xe, S(e, n, {
     className: r.value,
     theme: e.theme || a.value,
@@ -8452,7 +8451,7 @@ const hN = /* @__PURE__ */ L((e, {
 }), vN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => f(Re, S(e, n, {
     className: r.value,
     theme: e.theme || a.value,
@@ -8495,10 +8494,10 @@ const hN = /* @__PURE__ */ L((e, {
   click: (e) => e instanceof MouseEvent
 }, {
   element: Ug
-} = ce.bem(Pu), Cu = /* @__PURE__ */ L((e, {
+} = ue.bem(Pu), Cu = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = nt(), a = M(), r = $(() => e.class), {
+  const n = nt(), a = D(), r = $(() => e.class), {
     isAnyDisabled: o,
     disabledStateProps: s,
     otherProps: i
@@ -8530,7 +8529,7 @@ const hN = /* @__PURE__ */ L((e, {
   emits: Wg
 });
 function Cl(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const Gg = "lumx-link-preview", {
   block: Kg,
@@ -8586,7 +8585,7 @@ const Gg = "lumx-link-preview", {
       linkAs: r,
       target: "_blank",
       href: a,
-      color: i === ue.light ? U.dark : U.light,
+      color: i === de.light ? U.dark : U.light,
       colorVariant: Ro.N
     }), Cl(u) ? u : {
       default: () => [u]
@@ -8600,14 +8599,14 @@ const Gg = "lumx-link-preview", {
     className: I(Me("link"), o?.className),
     target: "_blank",
     href: a,
-    color: i === ue.light ? U.primary : U.light,
+    color: i === de.light ? U.primary : U.light,
     colorVariant: Ro.N,
     tabIndex: u ? "-1" : void 0
   }), Cl(a) ? a : {
     default: () => [a]
   })])])])]);
 }, bN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => {
     const {
       titleHeading: r = Ou.titleHeading,
@@ -8691,7 +8690,7 @@ const gN = /* @__PURE__ */ L((e, {
   slots: t,
   emit: n
 }) => {
-  const a = M(), {
+  const a = D(), {
     closeButtonLabel: r
   } = e, o = $(() => e.class);
   return () => f(Oo, S(e, a, {
@@ -8789,7 +8788,7 @@ const ny = /* @__PURE__ */ Pe(ty), ay = "lumx-mosaic", {
 }, yN = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = ae("onHandleClick"), s = (i) => {
+  const n = D(), a = W(), r = $(() => e.class), o = ae("onHandleClick"), s = (i) => {
     t("handleClick", i);
   };
   return () => f(oy, S(n, {
@@ -8810,7 +8809,7 @@ const ny = /* @__PURE__ */ Pe(ty), ay = "lumx-mosaic", {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = $(() => e.class), o = O(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
+  const a = D(), r = $(() => e.class), o = O(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
   return () => {
     const {
       label: i,
@@ -8823,7 +8822,7 @@ const ny = /* @__PURE__ */ Pe(ty), ay = "lumx-mosaic", {
       "aria-modal": "true",
       "aria-label": o.value
     }), {
-      class: ce.join(ly, r.value),
+      class: ue.join(ly, r.value),
       closeOnClickAway: !0,
       closeOnEscape: !0,
       withFocusTrap: !0,
@@ -8863,7 +8862,7 @@ const ny = /* @__PURE__ */ Pe(ty), ay = "lumx-mosaic", {
     className: Tl("line2")
   }, null)]);
 }, NN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(fy, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -8943,7 +8942,7 @@ const ny = /* @__PURE__ */ Pe(ty), ay = "lumx-mosaic", {
 }, wN = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), {
+  const n = D(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.id || o), {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
@@ -8991,7 +8990,7 @@ wn.defaultProps = gy;
 const SN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(wn, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -9056,7 +9055,7 @@ const SN = /* @__PURE__ */ L((e, {
     className: Py("inner")
   }, null)]);
 }, xN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(Ny, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9066,7 +9065,7 @@ const SN = /* @__PURE__ */ L((e, {
   inheritAttrs: !1,
   props: E()("class", "size", "color", "theme")
 }), PN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(Oy, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9076,7 +9075,7 @@ const SN = /* @__PURE__ */ L((e, {
   inheritAttrs: !1,
   props: E()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
 }), CN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = W(), a = $(() => e.class);
+  const t = D(), n = W(), a = $(() => e.class);
   return () => f(Jr, S(e, t, {
     className: a.value,
     theme: e.theme || n.value
@@ -9163,7 +9162,7 @@ const SN = /* @__PURE__ */ L((e, {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = W(), o = $(() => e.class), s = oe(), i = O(() => e.id || s), {
+  const a = D(), r = W(), o = $(() => e.class), s = oe(), i = O(() => e.id || s), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: u
@@ -9259,7 +9258,7 @@ const SN = /* @__PURE__ */ L((e, {
 }, kN = /* @__PURE__ */ L((e, {
   emit: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.fileInputProps?.id || o), i = B(!1), {
+  const n = D(), a = W(), r = $(() => e.class), o = oe(), s = O(() => e.fileInputProps?.id || o), i = B(!1), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: u
@@ -9388,7 +9387,7 @@ const SN = /* @__PURE__ */ L((e, {
   }, [t])]);
 };
 function Hr(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const qy = (e) => {
   const {
@@ -9481,7 +9480,7 @@ const qy = (e) => {
 }), TN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => {
     const {
       class: o,
@@ -9545,7 +9544,7 @@ Sn.defaultProps = Vy;
 const _N = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Sn, S(e, n, {
     className: a.value,
     items: t.default?.()
@@ -9578,7 +9577,7 @@ const _N = /* @__PURE__ */ L((e, {
 }, IN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = W(), r = $(() => e.class);
+  const n = D(), a = W(), r = $(() => e.class);
   return () => f(Uy, S(e, n, {
     className: r.value,
     theme: e.theme || a.value,
@@ -9603,7 +9602,7 @@ const _N = /* @__PURE__ */ L((e, {
 }, LN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Ky, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -9709,7 +9708,7 @@ const _N = /* @__PURE__ */ L((e, {
 }, $N = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class);
+  const n = D(), a = $(() => e.class);
   return () => f(Qy, S(e, n, {
     className: a.value,
     children: t.default?.()
@@ -9746,7 +9745,7 @@ const _N = /* @__PURE__ */ L((e, {
 }, RN = /* @__PURE__ */ L((e, {
   slots: t
 }) => {
-  const n = M(), a = $(() => e.class), {
+  const n = D(), a = $(() => e.class), {
     isAnyDisabled: r,
     otherProps: o
   } = J(O(() => ({
@@ -9765,7 +9764,7 @@ const _N = /* @__PURE__ */ L((e, {
   props: E()("class", "isClickable", "isDisabled", "isSelected")
 }), Eu = "lumx-tabs";
 function aA(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const rA = `${Eu}__link`, {
   block: oA
@@ -9878,7 +9877,7 @@ const rA = `${Eu}__link`, {
       };
   });
 }, MN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = $(() => e.class), {
+  const t = D(), n = $(() => e.class), {
     isAnyDisabled: a
   } = J(O(() => ({
     ...e,
@@ -9951,7 +9950,7 @@ const $l = {
     "aria-label": t
   }, [n])]);
 }, DN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = nt(), a = W(), r = $(() => e.class), o = B(null);
+  const t = D(), n = nt(), a = W(), r = $(() => e.class), o = B(null);
   return Nu({
     containerRef: o,
     itemSelector: '[role="tab"]'
@@ -9996,7 +9995,7 @@ const $l = {
     "aria-labelledby": o
   }), [(!s || a) && t]);
 }, BN = /* @__PURE__ */ L((e) => {
-  const t = M(), n = nt(), a = $(() => e.class), r = Ru("tabPanel", e.id), o = O(() => e.isActive || r.value?.isActive);
+  const t = D(), n = nt(), a = $(() => e.class), r = Ru("tabPanel", e.id), o = O(() => e.isActive || r.value?.isActive);
   return () => f(mA, S(t, {
     className: a.value,
     isActive: o.value,
@@ -10032,7 +10031,7 @@ const $l = {
   return ze($u, {
     state: a,
     dispatch: r
-  }), K([() => e.activeTabIndex, () => e.isLazy, () => e.shouldActivateOnFocus], () => {
+  }), X([() => e.activeTabIndex, () => e.isLazy, () => e.shouldActivateOnFocus], () => {
     r({
       type: "update",
       payload: {
@@ -10043,7 +10042,7 @@ const $l = {
         } : {}
       }
     });
-  }), K(() => a.value.activeTabIndex, (o) => {
+  }), X(() => a.value.activeTabIndex, (o) => {
     e.activeTabIndex !== o && t("change", o);
   }), () => n.default?.();
 }, {
@@ -10074,7 +10073,7 @@ function vA() {
 var bA = vA();
 const gA = /* @__PURE__ */ Pe(bA);
 function yA(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const AA = "lumx-user-block", {
   block: NA,
@@ -10122,14 +10121,14 @@ const AA = "lumx-user-block", {
     handleClick: m,
     linkAs: o,
     linkProps: r
-  }), R = T !== H.s && T !== H.xs, D = a && R && f("div", {
+  }), R = T !== H.s && T !== H.xs, M = a && R && f("div", {
     className: Te("fields")
-  }, [a.map((j, V) => f(N, {
+  }, [a.map((z, V) => f(N, {
     as: "span",
     key: V,
     className: Te("field")
-  }, yA(j) ? j : {
-    default: () => [j]
+  }, yA(z) ? z : {
+    default: () => [z]
   }))]), q = {
     ...h && {
       [l]: h
@@ -10158,7 +10157,7 @@ const AA = "lumx-user-block", {
     theme: y
   }), null), (a || u || A || P) && f("div", {
     className: Te("wrapper")
-  }, [A, D, R ? P : null]), _ && g && f("div", {
+  }, [A, M, R ? P : null]), _ && g && f("div", {
     className: Te("action")
   }, [g]), _ && i && f("div", {
     className: Te("actions")
@@ -10167,7 +10166,7 @@ const AA = "lumx-user-block", {
   }, [C]) : null]);
 };
 function SA(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const xA = {
   click: () => !0,
@@ -10177,7 +10176,7 @@ const xA = {
   emit: t,
   slots: n
 }) => {
-  const a = M(), r = W(), o = $(() => e.class), s = () => {
+  const a = D(), r = W(), o = $(() => e.class), s = () => {
     t("click");
   }, i = () => {
     t("mouseenter");
@@ -10195,7 +10194,7 @@ const xA = {
     let g = "span";
     const b = {
       ...e.nameProps,
-      class: ce.join(Te("name"), e.linkProps?.class, e.nameProps?.class)
+      class: ue.join(Te("name"), e.linkProps?.class, e.nameProps?.class)
     };
     return v && (g = Cu, Object.assign(b, {
       ...e.linkProps,
@@ -10266,13 +10265,13 @@ const xA = {
 function PA(e, t, n) {
   if (e == null) return "";
   if (t) {
-    const a = ie(t, e);
+    const a = le(t, e);
     if (a != null) return String(a);
   }
-  return n ? String(ie(n, e)) : "";
+  return n ? String(le(n, e)) : "";
 }
 function Bl(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 function Mu(e, t) {
   const {
@@ -10288,7 +10287,7 @@ function Mu(e, t) {
     Combobox: u
   } = t;
   if (l && n) {
-    const m = yd(n, (h) => ie(l, h));
+    const m = yd(n, (h) => le(l, h));
     return Array.from(m.entries()).map(([h, p]) => {
       let v;
       const g = c ? c(h, p) : h;
@@ -10308,12 +10307,13 @@ function Mu(e, t) {
       });
     });
   }
-  const d = i ? new Set((Array.isArray(i) ? i : [i]).map((m) => ie(a, m))) : void 0;
+  const d = i ? new Set((Array.isArray(i) ? i : [i]).map((m) => le(a, m))) : void 0;
   return n?.map((m, h) => {
-    const p = ie(a || r, m), v = ie(r || a, m), g = o && ie(o, m), b = d?.has(p) ?? !1;
+    const p = le(a || r, m), v = le(r || a, m) || p, g = o && le(o, m), b = d?.has(p) ?? !1;
     return s ? s(m, {
       index: h,
       value: p,
+      name: v,
       isSelected: b,
       description: g
     }) : f(u.Option, {
@@ -10356,7 +10356,7 @@ const CA = "SelectTextField", OA = "lumx-select-text-field", ko = (e, {
     afterOptions: T,
     onLoadMore: _,
     infiniteScrollOptions: x
-  } = e, R = g === "loading", D = g === "loadingMore", q = g === "error";
+  } = e, R = g === "loading", M = g === "loadingMore", q = g === "error";
   return f(t.Provider, {
     onOpen: N
   }, {
@@ -10391,7 +10391,7 @@ const CA = "SelectTextField", OA = "lumx-select-text-field", ko = (e, {
             g && g !== "idle" || _();
           },
           options: x
-        }, null), D && f(t.OptionSkeleton, {
+        }, null), M && f(t.OptionSkeleton, {
           count: 1
         }, null)]
       }), f(t.State, {
@@ -10407,7 +10407,7 @@ const CA = "SelectTextField", OA = "lumx-select-text-field", ko = (e, {
 ko.displayName = CA;
 ko.className = OA;
 function kA(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Y(e);
 }
 const TA = {
   /**
@@ -10446,7 +10446,7 @@ const TA = {
     ...e,
     ...a
   }))), l = B(!!e.searchInputValue), c = B(e.searchInputValue ?? ""), u = B(null), d = B(null);
-  K(() => e.searchInputValue, (C) => {
+  X(() => e.searchInputValue, (C) => {
     C !== void 0 && (c.value = C, l.value = !!C);
   });
   const m = O(() => e.selectionType === "multiple" || l.value ? c.value : PA(e.value, e.getOptionName, e.getOptionId)), h = (C) => {
@@ -10476,27 +10476,28 @@ const TA = {
         index: w,
         value: k,
         isSelected: T,
-        description: _
+        description: _,
+        name: x
       }) => {
-        const x = C({
+        const R = C({
           option: N,
           index: w
-        }), R = x?.find(wu(Ut));
-        if (!R) return x;
-        const D = R.props || {}, q = Object.fromEntries(Object.entries(D).filter(([, Y]) => Y !== void 0)), {
-          before: j,
-          after: V,
-          ...G
-        } = q, z = {
-          ...R.children
+        }), M = R?.find(wu(Ut));
+        if (!M) return R;
+        const q = M.props || {}, z = Object.fromEntries(Object.entries(q).filter(([, se]) => se !== void 0)), {
+          before: V,
+          after: K,
+          ...j
+        } = z, G = {
+          ...M.children
         };
-        return j !== void 0 && !z.before && (z.before = () => j), V !== void 0 && !z.after && (z.after = () => V), f(Ut, S({
+        return V !== void 0 && !G.before && (G.before = () => V), K !== void 0 && !G.after && (G.after = () => K), G.default || (G.default = x), f(Ut, S({
           key: k,
           value: k,
           isSelected: T,
           description: _ ?? void 0
-        }, G), kA(z) ? z : {
-          default: () => [z]
+        }, j), kA(G) ? G : {
+          default: () => [G]
         });
       };
   }), y = O(() => {