@maltjoy/core-vue 3.7.5 → 3.8.0

package/dist/joy-vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, openBlock as v, createElementBlock as p, normalizeClass as w, renderSlot as h, createTextVNode as C, toDisplayString as I, createElementVNode as g, useAttrs as Me, computed as L, createBlock as x, resolveDynamicComponent as ce, unref as k, withCtx as B, createCommentVNode as _, ref as b, createVNode as N, mergeProps as Y, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as X, nextTick as Ne, watch as J, h as rt, reactive as te, onBeforeUnmount as He, normalizeStyle as Z, Fragment as fe, renderList as ye, normalizeProps as ve, guardReactiveProps as me, Teleport as st, createSlots as We, useSlots as G, onBeforeMount as ut, inject as dt, provide as ct, pushScopeId as ft, popScopeId as yt } from "vue";
+import { defineComponent as $, openBlock as m, createElementBlock as p, normalizeClass as w, renderSlot as h, createTextVNode as C, toDisplayString as I, createElementVNode as b, useAttrs as Me, computed as L, createBlock as x, resolveDynamicComponent as ce, unref as k, withCtx as B, createCommentVNode as _, ref as g, createVNode as N, mergeProps as Y, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as X, nextTick as Ne, watch as J, h as rt, reactive as te, onBeforeUnmount as He, normalizeStyle as Z, Fragment as fe, renderList as ye, normalizeProps as ve, guardReactiveProps as me, Teleport as st, createSlots as We, useSlots as G, onBeforeMount as ut, inject as dt, provide as ct, pushScopeId as ft, popScopeId as yt } from "vue";
 const vt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue", "yellow"], mt = /* @__PURE__ */ $({
   __name: "VJoyBadge",
   props: {
@@ -27,7 +27,7 @@ const vt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("span", {
+    return (t, l) => (m(), p("span", {
       class: w(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
       role: "status"
     }, [
@@ -39,8 +39,8 @@ const vt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue
 });
 const V = (e, t) => {
   const l = e.__vccOpts || e;
-  for (const [o, a] of t)
-    l[o] = a;
+  for (const [o, n] of t)
+    l[o] = n;
   return l;
 }, pt = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-1ed08e27"]]), ht = ["teal", "white"], gt = /* @__PURE__ */ $({
   __name: "VJoySpinner",
@@ -53,7 +53,7 @@ const V = (e, t) => {
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return (t, l) => (m(), p("div", {
       class: w(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
@@ -75,10 +75,10 @@ const pe = /* @__PURE__ */ V(gt, [["__scopeId", "data-v-616a29d0"]]), R = /* @__
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("span", {
+    return (t, l) => (m(), p("span", {
       class: w(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
     }, [
-      g("i", {
+      b("i", {
         class: w(["icon", `icon-${e.name}`])
       }, null, 2)
     ], 2));
@@ -144,8 +144,8 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
         default:
           return "small";
       }
-    }), a = L(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
-    return (r, s) => (v(), x(ce(k(l).href ? "a" : "button"), {
+    }), n = L(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
+    return (r, s) => (m(), x(ce(k(l).href ? "a" : "button"), {
       disabled: e.loading || k(l).disabled,
       type: k(l).type || "button",
       class: w([
@@ -159,22 +159,22 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
       ])
     }, {
       default: B(() => [
-        e.icon && e.iconPosition === "left" ? (v(), x(R, {
+        e.icon && e.iconPosition === "left" ? (m(), x(R, {
           key: 0,
           class: "joy-button_icon joy-button_icon--left",
           name: e.icon,
           size: o.value
         }, null, 8, ["name", "size"])) : _("", !0),
-        e.loading ? (v(), x(pe, {
+        e.loading ? (m(), x(pe, {
           key: 1,
-          color: a.value
+          color: n.value
         }, null, 8, ["color"])) : _("", !0),
-        g("span", kt, [
+        b("span", kt, [
           h(r.$slots, "default", {}, () => [
             C(I(e.label), 1)
           ], !0)
         ]),
-        e.icon && e.iconPosition === "right" ? (v(), x(R, {
+        e.icon && e.iconPosition === "right" ? (m(), x(R, {
           key: 2,
           class: "joy-button_icon joy-button_icon--right",
           name: e.icon,
@@ -210,6 +210,13 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
       type: Boolean,
       default: !1
     },
+    /**
+     * Invalid state of the component
+     */
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
     /** The value is used in multiselection context in order to build array of values. */
     value: {
       type: String,
@@ -233,41 +240,42 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
   },
   emits: ["update:checked", "focus", "blur"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(), r = b(o.indeterminate), s = b(!1), n = {
-      onChange: (f) => {
-        const c = f.target.checked;
-        r.value = !1, l("update:checked", c);
+    const o = e, n = g(), r = g(o.indeterminate), s = g(o.invalid), a = g(!1), c = {
+      onChange: (y) => {
+        const u = y.target.checked;
+        r.value = !1, s.value = !1, l("update:checked", u);
       },
       onFocus: () => {
-        s.value = !0, l("focus");
+        a.value = !0, l("focus");
       },
       onBlur: () => {
-        s.value = !1, l("blur");
+        a.value = !1, l("blur");
       }
     };
     return t({
       isIndeterminate: r
-    }), (f, c) => (v(), p("div", {
+    }), (y, u) => (m(), p("div", {
       class: "joy-checkbox__wrapper",
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      g("label", {
+      b("label", {
         class: w([
           "joy-checkbox",
           {
             "joy-checkbox__checked": e.checked,
             "joy-checkbox__indeterminate": r.value,
             "joy-checkbox__disabled": e.disabled,
-            "joy-checkbox__focusing": s.value && e.displayFocus
+            "joy-checkbox__invalid": s.value,
+            "joy-checkbox__focusing": a.value && e.displayFocus
           }
         ])
       }, [
-        g("div", xt, [
-          g("input", {
+        b("div", xt, [
+          b("input", {
             id: e.id,
             ref_key: "input",
-            ref: a,
+            ref: n,
             type: "checkbox",
             class: "joy-checkbox__input",
             role: "checkbox",
@@ -278,27 +286,27 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
             "aria-checked": e.checked,
             value: e.value,
             indeterminate: r.value,
-            onChange: c[0] || (c[0] = //@ts-ignore
-            (...u) => n.onChange && n.onChange(...u)),
-            onFocus: c[1] || (c[1] = //@ts-ignore
-            (...u) => n.onFocus && n.onFocus(...u)),
-            onBlur: c[2] || (c[2] = //@ts-ignore
-            (...u) => n.onBlur && n.onBlur(...u))
+            onChange: u[0] || (u[0] = //@ts-ignore
+            (...v) => c.onChange && c.onChange(...v)),
+            onFocus: u[1] || (u[1] = //@ts-ignore
+            (...v) => c.onFocus && c.onFocus(...v)),
+            onBlur: u[2] || (u[2] = //@ts-ignore
+            (...v) => c.onBlur && c.onBlur(...v))
           }, null, 40, It)
         ]),
-        g("div", Ot, [
-          h(f.$slots, "default", {}, () => [
+        b("div", Ot, [
+          h(y.$slots, "default", {}, () => [
             C(I(e.label), 1)
           ], !0),
-          g("div", Bt, [
-            h(f.$slots, "checkbox-content", {}, void 0, !0)
+          b("div", Bt, [
+            h(y.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
     ], 8, Vt));
   }
 });
-const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { class: "joy-counter" }, Ct = ["aria-label", "disabled"], Jt = { class: "joy-counter__input-wrapper" }, Pt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Tt = ["aria-label", "disabled"], qt = {
+const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-27cc9d8c"]]), Et = { class: "joy-counter" }, Ct = ["aria-label", "disabled"], Jt = { class: "joy-counter__input-wrapper" }, Pt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], qt = ["aria-label", "disabled"], Tt = {
   key: 0,
   class: "joy-counter_error"
 }, zt = {
@@ -371,46 +379,46 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(!1), r = b(!1);
+    const o = e, n = g(!1), r = g(!1);
     function s() {
-      const d = c(!1);
-      d >= 0 ? l("update:modelValue", d <= o.min ? o.min : d) : l("update:modelValue", 0), f();
+      const d = y(!1);
+      d >= 0 ? l("update:modelValue", d <= o.min ? o.min : d) : l("update:modelValue", 0), c();
     }
-    function n() {
-      const d = c();
-      o.max && d <= o.max ? l("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? l("update:modelValue", o.max) : l("update:modelValue", d), f();
+    function a() {
+      const d = y();
+      o.max && d <= o.max ? l("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? l("update:modelValue", o.max) : l("update:modelValue", d), c();
     }
-    function f() {
-      a.value = !u();
+    function c() {
+      n.value = !u();
     }
-    function c(d = !0) {
+    function y(d = !0) {
       const j = o.step.toString().split("."), S = j.length === 2 ? j[1].length : 0;
       return parseFloat(d ? (o.modelValue + o.step).toFixed(S) : (o.modelValue - o.step).toFixed(S));
     }
     function u() {
-      return m() && i();
+      return v() && i();
     }
-    function m() {
+    function v() {
       return !o.max || o.modelValue <= o.max;
     }
     function i() {
       return o.min <= o.modelValue;
     }
-    const y = {
+    const f = {
       onInput: (d) => {
-        l("update:modelValue", +d.target.value || 0), a.value = !1;
+        l("update:modelValue", +d.target.value || 0), n.value = !1;
       },
       onFocus: () => {
         r.value = !0;
       },
       onBlur: () => {
-        r.value = !1, f();
+        r.value = !1, c();
       }
     };
     return t({
       props: o
-    }), (d, j) => (v(), p("div", Et, [
-      e.label ? (v(), x(k(W), {
+    }), (d, j) => (m(), p("div", Et, [
+      e.label ? (m(), x(k(W), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -424,10 +432,10 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
-      g("div", {
+      b("div", {
         class: w(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
       }, [
-        g("button", {
+        b("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
@@ -436,38 +444,38 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
         }, [
           N(k(R), { name: "minus" })
         ], 8, Ct),
-        g("div", Jt, [
-          g("input", Y({
+        b("div", Jt, [
+          b("input", Y({
             id: e.id,
             ref: "input",
             type: "number",
-            class: { "joy-counter__invalid": e.invalid || a.value },
+            class: { "joy-counter__invalid": e.invalid || n.value },
             min: e.min,
             max: e.max,
-            "aria-invalid": e.invalid || a.value,
+            "aria-invalid": e.invalid || n.value,
             name: e.name,
             required: e.required,
             step: "any",
             value: e.modelValue
           }, d.$attrs, {
             onInput: j[0] || (j[0] = //@ts-ignore
-            (...S) => y.onInput && y.onInput(...S)),
+            (...S) => f.onInput && f.onInput(...S)),
             onBlur: j[1] || (j[1] = //@ts-ignore
-            (...S) => y.onBlur && y.onBlur(...S)),
+            (...S) => f.onBlur && f.onBlur(...S)),
             onFocus: j[2] || (j[2] = //@ts-ignore
-            (...S) => y.onFocus && y.onFocus(...S))
+            (...S) => f.onFocus && f.onFocus(...S))
           }), null, 16, Pt)
         ]),
-        g("button", {
+        b("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: n
+          onClick: a
         }, [
           N(k(R), { name: "add" })
-        ], 8, Tt),
-        e.invalid && e.errorMessage ? (v(), p("div", qt, [
+        ], 8, qt),
+        e.invalid && e.errorMessage ? (m(), p("div", Tt, [
           N(k(tt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
         ])) : _("", !0)
       ], 2)
@@ -483,40 +491,40 @@ function P(e) {
 }
 function Ke(e, t) {
   function l(...o) {
-    return new Promise((a, r) => {
-      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(a).catch(r);
+    return new Promise((n, r) => {
+      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(n).catch(r);
     });
   }
   return l;
 }
 function Dt(e, t = {}) {
-  let l, o, a = z;
-  const r = (n) => {
-    clearTimeout(n), a(), a = z;
+  let l, o, n = z;
+  const r = (a) => {
+    clearTimeout(a), n(), n = z;
   };
-  return (n) => {
-    const f = P(e), c = P(t.maxWait);
-    return l && r(l), f <= 0 || c !== void 0 && c <= 0 ? (o && (r(o), o = null), Promise.resolve(n())) : new Promise((u, m) => {
-      a = t.rejectOnCancel ? m : u, c && !o && (o = setTimeout(() => {
-        l && r(l), o = null, u(n());
-      }, c)), l = setTimeout(() => {
-        o && r(o), o = null, u(n());
-      }, f);
+  return (a) => {
+    const c = P(e), y = P(t.maxWait);
+    return l && r(l), c <= 0 || y !== void 0 && y <= 0 ? (o && (r(o), o = null), Promise.resolve(a())) : new Promise((u, v) => {
+      n = t.rejectOnCancel ? v : u, y && !o && (o = setTimeout(() => {
+        l && r(l), o = null, u(a());
+      }, y)), l = setTimeout(() => {
+        o && r(o), o = null, u(a());
+      }, c);
     });
   };
 }
 function Rt(e, t = !0, l = !0, o = !1) {
-  let a = 0, r, s = !0, n = z, f;
-  const c = () => {
-    r && (clearTimeout(r), r = void 0, n(), n = z);
+  let n = 0, r, s = !0, a = z, c;
+  const y = () => {
+    r && (clearTimeout(r), r = void 0, a(), a = z);
   };
-  return (m) => {
-    const i = P(e), y = Date.now() - a, d = () => f = m();
-    return c(), i <= 0 ? (a = Date.now(), d()) : (y > i && (l || !s) ? (a = Date.now(), d()) : t && (f = new Promise((j, S) => {
-      n = o ? S : j, r = setTimeout(() => {
-        a = Date.now(), s = !0, j(d()), c();
-      }, Math.max(0, i - y));
-    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, f);
+  return (v) => {
+    const i = P(e), f = Date.now() - n, d = () => c = v();
+    return y(), i <= 0 ? (n = Date.now(), d()) : (f > i && (l || !s) ? (n = Date.now(), d()) : t && (c = new Promise((j, S) => {
+      a = o ? S : j, r = setTimeout(() => {
+        n = Date.now(), s = !0, j(d()), y();
+      }, Math.max(0, i - f));
+    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, c);
   };
 }
 const M = {
@@ -533,11 +541,11 @@ function Q(e) {
 function Nt(e, t = 200, l = {}) {
   return Ke(Dt(t, l), e);
 }
-function Ht(e, t = 200, l = !1, o = !0, a = !1) {
-  return Ke(Rt(t, l, o, a), e);
+function Ht(e, t = 200, l = !1, o = !0, n = !1) {
+  return Ke(Rt(t, l, o, n), e);
 }
 function Wt(e) {
-  return typeof e == "function" ? L(e) : b(e);
+  return typeof e == "function" ? L(e) : g(e);
 }
 function Qe(e, t = !0) {
   it() ? X(e) : t ? e() : Ne(e);
@@ -552,58 +560,58 @@ K && window.document;
 K && window.navigator;
 K && window.location;
 function ae(...e) {
-  let t, l, o, a;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, a] = e, t = ge) : [t, l, o, a] = e, !t)
+  let t, l, o, n;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = ge) : [t, l, o, n] = e, !t)
     return z;
   Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, n = (u, m, i, y) => (u.addEventListener(m, i, y), () => u.removeEventListener(m, i, y)), f = J(() => [U(t), P(a)], ([u, m]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((y) => n(u, i, y, m))));
-  }, { immediate: !0, flush: "post" }), c = () => {
-    f(), s();
+  }, a = (u, v, i, f) => (u.addEventListener(v, i, f), () => u.removeEventListener(v, i, f)), c = J(() => [U(t), P(n)], ([u, v]) => {
+    s(), u && r.push(...l.flatMap((i) => o.map((f) => a(u, i, f, v))));
+  }, { immediate: !0, flush: "post" }), y = () => {
+    c(), s();
   };
-  return Q(c), c;
+  return Q(y), y;
 }
 let Se = !1;
 function Ut(e, t, l = {}) {
-  const { window: o = ge, ignore: a = [], capture: r = !0, detectIframe: s = !1 } = l;
+  const { window: o = ge, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
   if (!o)
     return;
   le && !Se && (Se = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let n = !0;
-  const f = (i) => a.some((y) => {
-    if (typeof y == "string")
-      return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
+  let a = !0;
+  const c = (i) => n.some((f) => {
+    if (typeof f == "string")
+      return Array.from(o.document.querySelectorAll(f)).some((d) => d === i.target || i.composedPath().includes(d));
     {
-      const d = U(y);
+      const d = U(f);
       return d && (i.target === d || i.composedPath().includes(d));
     }
   }), u = [
     ae(o, "click", (i) => {
-      const y = U(e);
-      if (!(!y || y === i.target || i.composedPath().includes(y))) {
-        if (i.detail === 0 && (n = !f(i)), !n) {
-          n = !0;
+      const f = U(e);
+      if (!(!f || f === i.target || i.composedPath().includes(f))) {
+        if (i.detail === 0 && (a = !c(i)), !a) {
+          a = !0;
           return;
         }
         t(i);
       }
     }, { passive: !0, capture: r }),
     ae(o, "pointerdown", (i) => {
-      const y = U(e);
-      y && (n = !i.composedPath().includes(y) && !f(i));
+      const f = U(e);
+      f && (a = !i.composedPath().includes(f) && !c(i));
     }, { passive: !0 }),
     s && ae(o, "blur", (i) => {
-      var y;
+      var f;
       const d = U(e);
-      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
     })
   ].filter(Boolean);
   return () => u.forEach((i) => i());
 }
 function Gt(e, t = !1) {
-  const l = b(), o = () => l.value = Boolean(e());
+  const l = g(), o = () => l.value = Boolean(e());
   return o(), Qe(o, t), l;
 }
 const ie = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, re = "__vueuse_ssr_handlers__";
@@ -619,17 +627,17 @@ var je = Object.getOwnPropertySymbols, Kt = Object.prototype.hasOwnProperty, Qt
   return l;
 };
 function Yt(e, t, l = {}) {
-  const o = l, { window: a = ge } = o, r = Zt(o, ["window"]);
+  const o = l, { window: n = ge } = o, r = Zt(o, ["window"]);
   let s;
-  const n = Gt(() => a && "ResizeObserver" in a), f = () => {
+  const a = Gt(() => n && "ResizeObserver" in n), c = () => {
     s && (s.disconnect(), s = void 0);
-  }, c = J(() => U(e), (m) => {
-    f(), n.value && a && m && (s = new ResizeObserver(t), s.observe(m, r));
+  }, y = J(() => U(e), (v) => {
+    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
-    f(), c();
+    c(), y();
   };
   return Q(u), {
-    isSupported: n,
+    isSupported: a,
     stop: u
   };
 }
@@ -638,10 +646,10 @@ var ke;
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
 })(ke || (ke = {}));
 function Xt(e) {
-  const t = b(e == null ? void 0 : e.element), l = b(e == null ? void 0 : e.input);
+  const t = g(e == null ? void 0 : e.element), l = g(e == null ? void 0 : e.input);
   function o() {
-    var a, r;
-    t.value && (t.value.style.height = "1px", t.value.style.height = `${(a = t.value) == null ? void 0 : a.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
+    var n, r;
+    t.value && (t.value.style.height = "1px", t.value.style.height = `${(n = t.value) == null ? void 0 : n.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
   }
   return J([l, t], o, { immediate: !0 }), Yt(t, () => o()), e != null && e.watch && J(e.watch, o, { immediate: !0, deep: !0 }), {
     textarea: t,
@@ -691,68 +699,68 @@ const al = /* @__PURE__ */ $({
   props: ["as", "options"],
   emits: ["trigger"],
   setup(e, { slots: t, emit: l }) {
-    const o = b();
-    return Ut(o, (a) => {
-      l("trigger", a);
+    const o = g();
+    return Ut(o, (n) => {
+      l("trigger", n);
     }, e.options), () => {
       if (t.default)
         return rt(e.as || "div", { ref: o }, t.default());
     };
   }
 });
-function T(e) {
+function q(e) {
   var t;
   const l = P(e);
   return (t = l == null ? void 0 : l.$el) != null ? t : l;
 }
 const H = K ? window : void 0;
 function A(...e) {
-  let t, l, o, a;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, a] = e, t = H) : [t, l, o, a] = e, !t)
+  let t, l, o, n;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = H) : [t, l, o, n] = e, !t)
     return z;
   Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, n = (u, m, i, y) => (u.addEventListener(m, i, y), () => u.removeEventListener(m, i, y)), f = J(() => [T(t), P(a)], ([u, m]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((y) => n(u, i, y, m))));
-  }, { immediate: !0, flush: "post" }), c = () => {
-    f(), s();
+  }, a = (u, v, i, f) => (u.addEventListener(v, i, f), () => u.removeEventListener(v, i, f)), c = J(() => [q(t), P(n)], ([u, v]) => {
+    s(), u && r.push(...l.flatMap((i) => o.map((f) => a(u, i, f, v))));
+  }, { immediate: !0, flush: "post" }), y = () => {
+    c(), s();
   };
-  return Q(c), c;
+  return Q(y), y;
 }
 let xe = !1;
 function Ie(e, t, l = {}) {
-  const { window: o = H, ignore: a = [], capture: r = !0, detectIframe: s = !1 } = l;
+  const { window: o = H, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
   if (!o)
     return;
   le && !xe && (xe = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let n = !0;
-  const f = (i) => a.some((y) => {
-    if (typeof y == "string")
-      return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
+  let a = !0;
+  const c = (i) => n.some((f) => {
+    if (typeof f == "string")
+      return Array.from(o.document.querySelectorAll(f)).some((d) => d === i.target || i.composedPath().includes(d));
     {
-      const d = T(y);
+      const d = q(f);
       return d && (i.target === d || i.composedPath().includes(d));
     }
   }), u = [
     A(o, "click", (i) => {
-      const y = T(e);
-      if (!(!y || y === i.target || i.composedPath().includes(y))) {
-        if (i.detail === 0 && (n = !f(i)), !n) {
-          n = !0;
+      const f = q(e);
+      if (!(!f || f === i.target || i.composedPath().includes(f))) {
+        if (i.detail === 0 && (a = !c(i)), !a) {
+          a = !0;
           return;
         }
         t(i);
       }
     }, { passive: !0, capture: r }),
     A(o, "pointerdown", (i) => {
-      const y = T(e);
-      y && (n = !i.composedPath().includes(y) && !f(i));
+      const f = q(e);
+      f && (a = !i.composedPath().includes(f) && !c(i));
     }, { passive: !0 }),
     s && A(o, "blur", (i) => {
-      var y;
-      const d = T(e);
-      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      var f;
+      const d = q(e);
+      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
     })
   ].filter(Boolean);
   return () => u.forEach((i) => i());
@@ -762,9 +770,9 @@ const il = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.k
 function Oe(...e) {
   let t, l, o = {};
   e.length === 3 ? (t = e[0], l = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], o = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
-  const { target: a = H, eventName: r = "keydown", passive: s = !1 } = o, n = il(t);
-  return A(a, r, (c) => {
-    n(c) && l(c);
+  const { target: n = H, eventName: r = "keydown", passive: s = !1 } = o, a = il(t);
+  return A(n, r, (y) => {
+    a(y) && l(y);
   }, s);
 }
 var rl = Object.defineProperty, Be = Object.getOwnPropertySymbols, sl = Object.prototype.hasOwnProperty, ul = Object.prototype.propertyIsEnumerable, Le = (e, t, l) => t in e ? rl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, dl = (e, t) => {
@@ -778,38 +786,38 @@ var rl = Object.defineProperty, Be = Object.getOwnPropertySymbols, sl = Object.p
 M.mounted + "";
 const cl = 500;
 function Ee(e, t, l) {
-  var o, a;
-  const r = L(() => T(e));
+  var o, n;
+  const r = L(() => q(e));
   let s;
-  function n() {
+  function a() {
     s && (clearTimeout(s), s = void 0);
   }
-  function f(u) {
-    var m, i, y, d;
-    (m = l == null ? void 0 : l.modifiers) != null && m.self && u.target !== r.value || (n(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && u.preventDefault(), (y = l == null ? void 0 : l.modifiers) != null && y.stop && u.stopPropagation(), s = setTimeout(() => t(u), (d = l == null ? void 0 : l.delay) != null ? d : cl));
+  function c(u) {
+    var v, i, f, d;
+    (v = l == null ? void 0 : l.modifiers) != null && v.self && u.target !== r.value || (a(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && u.preventDefault(), (f = l == null ? void 0 : l.modifiers) != null && f.stop && u.stopPropagation(), s = setTimeout(() => t(u), (d = l == null ? void 0 : l.delay) != null ? d : cl));
   }
-  const c = {
+  const y = {
     capture: (o = l == null ? void 0 : l.modifiers) == null ? void 0 : o.capture,
-    once: (a = l == null ? void 0 : l.modifiers) == null ? void 0 : a.once
+    once: (n = l == null ? void 0 : l.modifiers) == null ? void 0 : n.once
   };
-  A(r, "pointerdown", f, c), A(r, "pointerup", n, c), A(r, "pointerleave", n, c);
+  A(r, "pointerdown", c, y), A(r, "pointerup", a, y), A(r, "pointerleave", a, y);
 }
 M.mounted + "";
 const se = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ue = "__vueuse_ssr_handlers__";
 se[ue] = se[ue] || {};
 se[ue];
 function Ze(e, t = !1) {
-  const l = b(), o = () => l.value = Boolean(e());
+  const l = g(), o = () => l.value = Boolean(e());
   return o(), Qe(o, t), l;
 }
 function fl(e, t = {}) {
-  const l = t ? t.delayEnter : 0, o = t ? t.delayLeave : 0, a = b(!1);
+  const l = t ? t.delayEnter : 0, o = t ? t.delayLeave : 0, n = g(!1);
   let r;
-  const s = (n) => {
-    const f = n ? l : o;
-    r && (clearTimeout(r), r = void 0), f ? r = setTimeout(() => a.value = n, f) : a.value = n;
+  const s = (a) => {
+    const c = a ? l : o;
+    r && (clearTimeout(r), r = void 0), c ? r = setTimeout(() => n.value = a, c) : n.value = a;
   };
-  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), a;
+  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), n;
 }
 M.mounted + "";
 var Ce = Object.getOwnPropertySymbols, yl = Object.prototype.hasOwnProperty, vl = Object.prototype.propertyIsEnumerable, ml = (e, t) => {
@@ -822,59 +830,59 @@ var Ce = Object.getOwnPropertySymbols, yl = Object.prototype.hasOwnProperty, vl
   return l;
 };
 function pl(e, t, l = {}) {
-  const o = l, { window: a = H } = o, r = ml(o, ["window"]);
+  const o = l, { window: n = H } = o, r = ml(o, ["window"]);
   let s;
-  const n = Ze(() => a && "ResizeObserver" in a), f = () => {
+  const a = Ze(() => n && "ResizeObserver" in n), c = () => {
     s && (s.disconnect(), s = void 0);
-  }, c = J(() => T(e), (m) => {
-    f(), n.value && a && m && (s = new ResizeObserver(t), s.observe(m, r));
+  }, y = J(() => q(e), (v) => {
+    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
-    f(), c();
+    c(), y();
   };
   return Q(u), {
-    isSupported: n,
+    isSupported: a,
     stop: u
   };
 }
 function hl(e, t = { width: 0, height: 0 }, l = {}) {
-  const { window: o = H, box: a = "content-box" } = l, r = L(() => {
-    var f, c;
-    return (c = (f = T(e)) == null ? void 0 : f.namespaceURI) == null ? void 0 : c.includes("svg");
-  }), s = b(t.width), n = b(t.height);
-  return pl(e, ([f]) => {
-    const c = a === "border-box" ? f.borderBoxSize : a === "content-box" ? f.contentBoxSize : f.devicePixelContentBoxSize;
+  const { window: o = H, box: n = "content-box" } = l, r = L(() => {
+    var c, y;
+    return (y = (c = q(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : y.includes("svg");
+  }), s = g(t.width), a = g(t.height);
+  return pl(e, ([c]) => {
+    const y = n === "border-box" ? c.borderBoxSize : n === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
     if (o && r.value) {
-      const u = T(e);
+      const u = q(e);
       if (u) {
-        const m = o.getComputedStyle(u);
-        s.value = parseFloat(m.width), n.value = parseFloat(m.height);
+        const v = o.getComputedStyle(u);
+        s.value = parseFloat(v.width), a.value = parseFloat(v.height);
       }
-    } else if (c) {
-      const u = Array.isArray(c) ? c : [c];
-      s.value = u.reduce((m, { inlineSize: i }) => m + i, 0), n.value = u.reduce((m, { blockSize: i }) => m + i, 0);
+    } else if (y) {
+      const u = Array.isArray(y) ? y : [y];
+      s.value = u.reduce((v, { inlineSize: i }) => v + i, 0), a.value = u.reduce((v, { blockSize: i }) => v + i, 0);
     } else
-      s.value = f.contentRect.width, n.value = f.contentRect.height;
-  }, l), J(() => T(e), (f) => {
-    s.value = f ? t.width : 0, n.value = f ? t.height : 0;
+      s.value = c.contentRect.width, a.value = c.contentRect.height;
+  }, l), J(() => q(e), (c) => {
+    s.value = c ? t.width : 0, a.value = c ? t.height : 0;
   }), {
     width: s,
-    height: n
+    height: a
   };
 }
 M.mounted + "";
 function Je(e, { window: t = H, scrollTarget: l } = {}) {
-  const o = b(!1), a = () => {
+  const o = g(!1), n = () => {
     if (!t)
       return;
-    const r = t.document, s = T(e);
+    const r = t.document, s = q(e);
     if (!s)
       o.value = !1;
     else {
-      const n = s.getBoundingClientRect();
-      o.value = n.top <= (t.innerHeight || r.documentElement.clientHeight) && n.left <= (t.innerWidth || r.documentElement.clientWidth) && n.bottom >= 0 && n.right >= 0;
+      const a = s.getBoundingClientRect();
+      o.value = a.top <= (t.innerHeight || r.documentElement.clientHeight) && a.left <= (t.innerWidth || r.documentElement.clientWidth) && a.bottom >= 0 && a.right >= 0;
     }
   };
-  return J(() => T(e), () => a(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", a, {
+  return J(() => q(e), () => n(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", n, {
     capture: !1,
     passive: !0
   }), o;
@@ -885,7 +893,7 @@ function de(e, t = {}) {
   const {
     throttle: l = 0,
     idle: o = 200,
-    onStop: a = z,
+    onStop: n = z,
     onScroll: r = z,
     offset: s = {
       left: 0,
@@ -893,36 +901,36 @@ function de(e, t = {}) {
       top: 0,
       bottom: 0
     },
-    eventListenerOptions: n = {
+    eventListenerOptions: a = {
       capture: !1,
       passive: !0
     },
-    behavior: f = "auto"
-  } = t, c = b(0), u = b(0), m = L({
+    behavior: c = "auto"
+  } = t, y = g(0), u = g(0), v = L({
     get() {
-      return c.value;
+      return y.value;
     },
     set(E) {
-      y(E, void 0);
+      f(E, void 0);
     }
   }), i = L({
     get() {
       return u.value;
     },
     set(E) {
-      y(void 0, E);
+      f(void 0, E);
     }
   });
-  function y(E, q) {
+  function f(E, T) {
     var D, F, _e;
     const ne = P(e);
     ne && ((_e = ne instanceof Document ? document.body : ne) == null || _e.scrollTo({
-      top: (D = P(q)) != null ? D : i.value,
-      left: (F = P(E)) != null ? F : m.value,
-      behavior: P(f)
+      top: (D = P(T)) != null ? D : i.value,
+      left: (F = P(E)) != null ? F : v.value,
+      behavior: P(c)
     }));
   }
-  const d = b(!1), j = te({
+  const d = g(!1), j = te({
     left: !0,
     right: !1,
     top: !0,
@@ -933,47 +941,47 @@ function de(e, t = {}) {
     top: !1,
     bottom: !1
   }), ee = (E) => {
-    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, a(E));
+    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, n(E));
   }, oe = Nt(ee, l + o), O = (E) => {
-    const q = E.target === document ? E.target.documentElement : E.target, D = q.scrollLeft;
-    S.left = D < c.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + q.clientWidth >= q.scrollWidth - (s.right || 0) - Pe, c.value = D;
-    let F = q.scrollTop;
-    E.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + q.clientHeight >= q.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(E), r(E);
+    const T = E.target === document ? E.target.documentElement : E.target, D = T.scrollLeft;
+    S.left = D < y.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + T.clientWidth >= T.scrollWidth - (s.right || 0) - Pe, y.value = D;
+    let F = T.scrollTop;
+    E.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + T.clientHeight >= T.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(E), r(E);
   };
-  return A(e, "scroll", l ? Ht(O, l, !0, !1) : O, n), A(e, "scrollend", ee, n), {
-    x: m,
+  return A(e, "scroll", l ? Ht(O, l, !0, !1) : O, a), A(e, "scrollend", ee, a), {
+    x: v,
     y: i,
     isScrolling: d,
     arrivedState: j,
     directions: S
   };
 }
-var gl = Object.defineProperty, bl = Object.defineProperties, _l = Object.getOwnPropertyDescriptors, Te = Object.getOwnPropertySymbols, wl = Object.prototype.hasOwnProperty, Sl = Object.prototype.propertyIsEnumerable, qe = (e, t, l) => t in e ? gl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, ze = (e, t) => {
+var gl = Object.defineProperty, bl = Object.defineProperties, _l = Object.getOwnPropertyDescriptors, qe = Object.getOwnPropertySymbols, wl = Object.prototype.hasOwnProperty, Sl = Object.prototype.propertyIsEnumerable, Te = (e, t, l) => t in e ? gl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, ze = (e, t) => {
   for (var l in t || (t = {}))
-    wl.call(t, l) && qe(e, l, t[l]);
-  if (Te)
-    for (var l of Te(t))
-      Sl.call(t, l) && qe(e, l, t[l]);
+    wl.call(t, l) && Te(e, l, t[l]);
+  if (qe)
+    for (var l of qe(t))
+      Sl.call(t, l) && Te(e, l, t[l]);
   return e;
 }, jl = (e, t) => bl(e, _l(t));
 function Ae(e, t, l = {}) {
-  var o, a;
+  var o, n;
   const r = (o = l.direction) != null ? o : "bottom", s = te(de(e, jl(ze({}, l), {
     offset: ze({
-      [r]: (a = l.distance) != null ? a : 0
+      [r]: (n = l.distance) != null ? n : 0
     }, l.offset)
   })));
-  J(() => s.arrivedState[r], async (n) => {
-    var f, c;
-    if (n) {
-      const u = P(e), m = {
-        height: (f = u == null ? void 0 : u.scrollHeight) != null ? f : 0,
-        width: (c = u == null ? void 0 : u.scrollWidth) != null ? c : 0
+  J(() => s.arrivedState[r], async (a) => {
+    var c, y;
+    if (a) {
+      const u = P(e), v = {
+        height: (c = u == null ? void 0 : u.scrollHeight) != null ? c : 0,
+        width: (y = u == null ? void 0 : u.scrollWidth) != null ? y : 0
       };
       await t(s), l.preserveScrollPosition && u && Ne(() => {
         u.scrollTo({
-          top: u.scrollHeight - m.height,
-          left: u.scrollWidth - m.width
+          top: u.scrollHeight - v.height,
+          left: u.scrollWidth - v.width
         });
       });
     }
@@ -983,30 +991,30 @@ M.mounted + "";
 function Fe(e, t, l = {}) {
   const {
     root: o,
-    rootMargin: a = "0px",
+    rootMargin: n = "0px",
     threshold: r = 0.1,
     window: s = H
-  } = l, n = Ze(() => s && "IntersectionObserver" in s);
-  let f = z;
-  const c = n.value ? J(() => ({
-    el: T(e),
-    root: T(o)
-  }), ({ el: m, root: i }) => {
-    if (f(), !m)
+  } = l, a = Ze(() => s && "IntersectionObserver" in s);
+  let c = z;
+  const y = a.value ? J(() => ({
+    el: q(e),
+    root: q(o)
+  }), ({ el: v, root: i }) => {
+    if (c(), !v)
       return;
-    const y = new IntersectionObserver(t, {
+    const f = new IntersectionObserver(t, {
       root: i,
-      rootMargin: a,
+      rootMargin: n,
       threshold: r
     });
-    y.observe(m), f = () => {
-      y.disconnect(), f = z;
+    f.observe(v), c = () => {
+      f.disconnect(), c = z;
     };
   }, { immediate: !0, flush: "post" }) : z, u = () => {
-    f(), c();
+    c(), y();
   };
   return Q(u), {
-    isSupported: n,
+    isSupported: a,
     stop: u
   };
 }
@@ -1034,53 +1042,53 @@ function Ll(e) {
   return Ye(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
 function El(e, t = !1) {
-  const l = b(t);
-  let o = null, a;
-  J(Wt(e), (n) => {
-    if (n) {
-      const f = n;
-      a = f.style.overflow, l.value && (f.style.overflow = "hidden");
+  const l = g(t);
+  let o = null, n;
+  J(Wt(e), (a) => {
+    if (a) {
+      const c = a;
+      n = c.style.overflow, l.value && (c.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const r = () => {
-    const n = P(e);
-    !n || l.value || (le && (o = A(n, "touchmove", (f) => {
-      Ll(f);
-    }, { passive: !1 })), n.style.overflow = "hidden", l.value = !0);
+    const a = P(e);
+    !a || l.value || (le && (o = A(a, "touchmove", (c) => {
+      Ll(c);
+    }, { passive: !1 })), a.style.overflow = "hidden", l.value = !0);
   }, s = () => {
-    const n = P(e);
-    !n || !l.value || (le && (o == null || o()), n.style.overflow = a, l.value = !1);
+    const a = P(e);
+    !a || !l.value || (le && (o == null || o()), a.style.overflow = n, l.value = !1);
   };
   return Q(s), L({
     get() {
       return l.value;
     },
-    set(n) {
-      n ? r() : s();
+    set(a) {
+      a ? r() : s();
     }
   });
 }
 const Cl = () => {
   let e = !1;
-  const t = b(!1);
+  const t = g(!1);
   return (l, o) => {
     if (t.value = o.value, e)
       return;
     e = !0;
-    const a = El(l, o.value);
-    J(t, (r) => a.value = r);
+    const n = El(l, o.value);
+    J(t, (r) => n.value = r);
   };
 };
 Cl();
 const Xe = ["medium", "small"], Jl = {
   key: 0,
   class: "joy-dropdown-list__header"
-}, Pl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], Tl = {
+}, Pl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], ql = {
   key: 1,
   class: "joy-dropdown-list__footer"
-}, ql = /* @__PURE__ */ $({
+}, Tl = /* @__PURE__ */ $({
   __name: "VJoyDropdownList",
   props: {
     /**
@@ -1116,70 +1124,70 @@ const Xe = ["medium", "small"], Jl = {
   },
   emits: ["update:modelValue", "close:dropdownList"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(), r = L(() => (i) => !o.modelValue && !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
+    const o = e, n = g(), r = L(() => (i) => !o.modelValue && !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
     function s(i) {
       i.disabled || l("update:modelValue", i.value || i.id);
     }
-    function n() {
+    function a() {
       var i;
-      return Array.from(((i = a.value) == null ? void 0 : i.querySelectorAll("li")) || []);
+      return Array.from(((i = n.value) == null ? void 0 : i.querySelectorAll("li")) || []);
     }
-    function f() {
-      const i = n().find((y) => y.getAttribute("aria-selected") === "true");
-      i && (i.focus(), a.value.scrollTo({
+    function c() {
+      const i = a().find((f) => f.getAttribute("aria-selected") === "true");
+      i && (i.focus(), n.value.scrollTo({
         top: i.offsetTop
       }));
     }
-    function c() {
-      return n().find((i) => i === document.activeElement);
+    function y() {
+      return a().find((i) => i === document.activeElement);
     }
     function u(i) {
-      var y;
-      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), c() && ((y = a.value) != null && y.contains(c())))) {
-        const d = c();
+      var f;
+      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), y() && ((f = n.value) != null && f.contains(y())))) {
+        const d = y();
         if (!d)
           return;
         if (d.querySelector("a"))
           return d.querySelector("a").click();
         l("update:modelValue", d.dataModel);
       }
-      if (c() && i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
-        const d = n(), j = c();
+      if (y() && i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
+        const d = a(), j = y();
         let S = d.indexOf(j);
         if (d.length) {
-          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), m(d[S]);
+          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), v(d[S]);
           return;
         }
       }
     }
-    function m(i) {
+    function v(i) {
       i.focus();
     }
     return X(() => {
-      window.addEventListener("keydown", u), f();
+      window.addEventListener("keydown", u), c();
     }), He(() => {
       window.removeEventListener("keydown", u);
     }), t({
       isSelected: r
-    }), (i, y) => (v(), p("div", {
+    }), (i, f) => (m(), p("div", {
       class: "joy-dropdown-list",
       style: Z({ width: `${e.width}px`, "max-width": `${e.width}px` })
     }, [
-      i.$slots["dropdown-list-header"] ? (v(), p("header", Jl, [
+      i.$slots["dropdown-list-header"] ? (m(), p("header", Jl, [
         h(i.$slots, "dropdown-list-header", {}, void 0, !0)
       ])) : _("", !0),
-      g("div", {
+      b("div", {
         class: w(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": i.$slots["dropdown-list-items"] }]),
         style: Z({ "max-height": `${e.height}px` })
       }, [
         h(i.$slots, "dropdown-list-items", {}, void 0, !0),
-        e.options.length ? (v(), p("ul", {
+        e.options.length ? (m(), p("ul", {
           key: 0,
           ref_key: "listbox",
-          ref: a,
+          ref: n,
           role: "listbox"
         }, [
-          (v(!0), p(fe, null, ye(e.options, (d) => (v(), p("li", {
+          (m(!0), p(fe, null, ye(e.options, (d) => (m(), p("li", {
             id: d.id,
             key: d.label,
             style: Z({ "max-width": `${e.width}px` }),
@@ -1201,18 +1209,18 @@ const Xe = ["medium", "small"], Jl = {
             onClick: (j) => s(d)
           }, [
             h(i.$slots, "label", ve(me(d)), () => [
-              g("span", null, I(d.label), 1)
+              b("span", null, I(d.label), 1)
             ], !0)
           ], 14, Pl))), 128))
         ], 512)) : _("", !0)
       ], 6),
-      i.$slots["dropdown-list-footer"] ? (v(), p("footer", Tl, [
+      i.$slots["dropdown-list-footer"] ? (m(), p("footer", ql, [
         h(i.$slots, "dropdown-list-footer", {}, void 0, !0)
       ])) : _("", !0)
     ], 4));
   }
 });
-const et = /* @__PURE__ */ V(ql, [["__scopeId", "data-v-1085f269"]]);
+const et = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-1085f269"]]);
 function zl(e) {
   const t = () => e();
   X(() => {
@@ -1300,47 +1308,47 @@ const Al = /* @__PURE__ */ $({
   },
   emits: ["update:modelValue", "dropdown:open", "dropdown:hide"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(!1), r = b(null), s = b(), n = b(null), f = b(null), c = b(!1), u = {
+    const o = e, n = g(!1), r = g(null), s = g(), a = g(null), c = g(null), y = g(!1), u = {
       ignore: [s, ".joy-dropdown__list"]
     };
-    let m = null;
+    let v = null;
     const i = te({
       left: "auto",
       top: "0px",
       right: "auto"
     });
-    function y() {
-      m && clearTimeout(m), c.value = !0, m = setTimeout(() => {
-        a.value = !1, c.value = !1, l("dropdown:hide");
+    function f() {
+      v && clearTimeout(v), y.value = !0, v = setTimeout(() => {
+        n.value = !1, y.value = !1, l("dropdown:hide");
       }, 300);
     }
     function d(O) {
-      c.value = !1, m && clearTimeout(m), ee(), f.value = O.target, a.value = !0, l("dropdown:open");
+      y.value = !1, v && clearTimeout(v), ee(), c.value = O.target, n.value = !0, l("dropdown:open");
     }
     function j() {
-      y(), S();
+      f(), S();
     }
     function S() {
-      f.value && f.value.focus();
+      c.value && c.value.focus();
     }
     function ee() {
-      const O = s.value.getBoundingClientRect(), E = document.documentElement.scrollTop + O.top, q = O.height, D = O.left, F = O.width;
-      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = E + q + parseInt(o.dropdownGap) + "px" : i.top = E - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
+      const O = s.value.getBoundingClientRect(), E = document.documentElement.scrollTop + O.top, T = O.height, D = O.left, F = O.width;
+      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = E + T + parseInt(o.dropdownGap) + "px" : i.top = E - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
     function oe(O) {
-      l("update:modelValue", O), o.closeOnSelect && (y(), S());
+      l("update:modelValue", O), o.closeOnSelect && (f(), S());
     }
-    return zl(y), t({
-      showDropdownList: a
-    }), (O, E) => (v(), x(k(al), {
+    return zl(f), t({
+      showDropdownList: n
+    }), (O, E) => (m(), x(k(al), {
       ref_key: "dropdown",
       ref: r,
       options: u,
       class: "joy-dropdown",
-      onTrigger: y
+      onTrigger: f
     }, {
       default: B(() => [
-        g("div", {
+        b("div", {
           ref_key: "button",
           ref: s,
           class: "joy-dropdown__button",
@@ -1348,20 +1356,20 @@ const Al = /* @__PURE__ */ $({
         }, [
           h(O.$slots, "dropdown-button", {}, void 0, !0)
         ], 512),
-        (v(), x(st, {
+        (m(), x(st, {
           to: e.appendTo,
           disabled: e.disableTeleport
         }, [
-          a.value ? (v(), p("div", {
+          n.value ? (m(), p("div", {
             key: 0,
             ref_key: "list",
-            ref: n,
+            ref: a,
             class: w([
               "joy-dropdown__list",
               `joy-dropdown__list--${e.direction}`,
               {
-                "joy-dropdown__list--visible": !c.value,
-                "joy-dropdown__list--hiding": c.value
+                "joy-dropdown__list--visible": !y.value,
+                "joy-dropdown__list--hiding": y.value
               }
             ]),
             style: Z({
@@ -1378,9 +1386,9 @@ const Al = /* @__PURE__ */ $({
               "onUpdate:modelValue": oe,
               "onClose:dropdownList": j
             }, We({
-              label: B((q) => [
-                h(O.$slots, "dropdown-item", ve(me(q)), () => [
-                  g("span", null, I(q.label), 1)
+              label: B((T) => [
+                h(O.$slots, "dropdown-item", ve(me(T)), () => [
+                  b("span", null, I(T.label), 1)
                 ], !0)
               ]),
               _: 2
@@ -1426,7 +1434,7 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
     noHtmlErrorText: String
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return (t, l) => (m(), p("div", {
       "aria-hidden": e.visible,
       class: w(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
@@ -1435,7 +1443,7 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
         class: "joy-icon-error",
         name: "warning-triangle"
       }),
-      g("div", null, [
+      b("div", null, [
         h(t.$slots, "default", {}, () => [
           C(I(e.noHtmlErrorText), 1)
         ], !0)
@@ -1484,25 +1492,25 @@ const Nl = [..._t], Hl = { class: "joy-highlight--text" }, Wl = { key: 0 }, Ul =
     const l = e, o = L(() => l.icon ? l.icon : Ml(l.level));
     return t({
       getRelevantIcon: o
-    }), (a, r) => (v(), p("div", {
+    }), (n, r) => (m(), p("div", {
       class: w([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": a.$slots["highlight-title"]
+          "joy-highlight__titled": n.$slots["highlight-title"]
         }
       ])
     }, [
-      e.displayIcon ? (v(), x(R, {
+      e.displayIcon ? (m(), x(R, {
         key: 0,
         name: o.value
       }, null, 8, ["name"])) : _("", !0),
-      g("div", Hl, [
-        a.$slots["highlight-title"] ? (v(), p("strong", Wl, [
-          h(a.$slots, "highlight-title", {}, void 0, !0)
+      b("div", Hl, [
+        n.$slots["highlight-title"] ? (m(), p("strong", Wl, [
+          h(n.$slots, "highlight-title", {}, void 0, !0)
         ])) : _("", !0),
-        h(a.$slots, "default", {}, void 0, !0)
+        h(n.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
@@ -1537,24 +1545,22 @@ const Gl = /* @__PURE__ */ V(Ul, [["__scopeId", "data-v-ba5e6101"]]), Kl = ["sma
     text: String
   },
   setup(e) {
-    return (t, l) => (v(), x(ce(e.tagName), Y({
+    return (t, l) => (m(), x(ce(e.tagName), Y({
       class: ["joy-label", `joy-label--${e.size}`]
     }, t.$attrs), {
       default: B(() => [
         h(t.$slots, "default", {}, () => [
           C(I(e.text), 1)
         ], !0),
-        e.required ? (v(), p("span", Ql, "*")) : _("", !0),
-        e.optionalLabel ? (v(), p("span", Zl, "- " + I(e.optionalLabel), 1)) : _("", !0)
+        e.required ? (m(), p("span", Ql, "*")) : _("", !0),
+        e.optionalLabel ? (m(), p("span", Zl, "- " + I(e.optionalLabel), 1)) : _("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["large", "medium", "small"], eo = ["id", "disabled", "type", "value"], to = ["data-unit"], lo = {
-  inheritAttrs: !1
-}, oo = /* @__PURE__ */ $({
-  ...lo,
+const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["large", "medium", "small"], eo = ["id", "required", "disabled", "type", "value"], to = ["data-unit"], lo = /* @__PURE__ */ $({
+  inheritAttrs: !1,
   __name: "VJoyInput",
   props: {
     disabled: {
@@ -1615,45 +1621,45 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, o = b(), a = b(), r = Me(), s = G(), n = b(!1), f = L(() => typeof l.modelValue == "number" || !l.clearable || l.unit || !l.modelValue ? !1 : l.modelValue.length > 0 && !l.unit), c = L(() => s.default && s.default()), u = L(() => {
-      var y, d;
-      return !!((y = a.value) != null && y.closest("joy-wrapper")) || !!((d = a.value) != null && d.closest(".joy-wrapper"));
-    }), m = b(l.type);
+    const l = e, o = g(), n = g(), r = Me(), s = G(), a = g(!1), c = L(() => typeof l.modelValue == "number" || !l.clearable || l.unit || !l.modelValue ? !1 : l.modelValue.length > 0 && !l.unit), y = L(() => s.default && s.default()), u = L(() => {
+      var f, d;
+      return !!((f = n.value) != null && f.closest("joy-wrapper")) || !!((d = n.value) != null && d.closest(".joy-wrapper"));
+    }), v = g(l.type);
     ut(() => {
-      m.value = l.unit ? "number" : l.unit || "text";
+      v.value = l.unit ? "number" : l.unit || "text";
     });
     const i = {
       onFocus: () => {
-        n.value = !0;
+        a.value = !0;
       },
       onBlur: () => {
-        n.value = !1;
+        a.value = !1;
       },
-      onInput: (y) => {
-        let d = y.target.value;
+      onInput: (f) => {
+        let d = f.target.value;
         t("update:modelValue", d);
       },
       clearValue: () => {
         l.disabled || t("update:modelValue", "");
       }
     };
-    return (y, d) => (v(), p("div", {
+    return (f, d) => (m(), p("div", {
       ref_key: "root",
-      ref: a,
+      ref: n,
       class: w([`joy-input--${l.size}`])
     }, [
-      g("div", {
+      b("div", {
         class: w([
           "joy-input",
           {
-            "joy-input--focusing": n.value,
+            "joy-input--focusing": a.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
             "joy-input--valid": !e.invalid && !k(r).disabled
           }
         ])
       }, [
-        c.value || e.label ? (v(), x(W, {
+        y.value || e.label ? (m(), x(W, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -1661,13 +1667,13 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
           size: e.labelSize
         }, {
           default: B(() => [
-            h(y.$slots, "default", {}, () => [
+            h(f.$slots, "default", {}, () => [
               C(I(e.label), 1)
             ], !0)
           ]),
           _: 3
         }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
-        g("div", {
+        b("div", {
           class: w([
             "joy-input--wrapper",
             {
@@ -1678,10 +1684,11 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             }
           ])
         }, [
-          g("input", Y(y.$attrs, {
+          b("input", Y(f.$attrs, {
             id: l.name,
             ref_key: "input",
             ref: o,
+            required: e.required,
             disabled: e.disabled,
             class: [
               {
@@ -1689,7 +1696,7 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: m.value,
+            type: v.value,
             value: e.modelValue,
             onFocus: d[0] || (d[0] = //@ts-ignore
             (...j) => i.onFocus && i.onFocus(...j)),
@@ -1698,7 +1705,7 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             onInput: d[2] || (d[2] = //@ts-ignore
             (...j) => i.onInput && i.onInput(...j))
           }), null, 16, eo),
-          f.value ? (v(), x(Ue, {
+          c.value ? (m(), x(Ue, {
             key: 0,
             class: "joy-input--clear",
             circle: "",
@@ -1707,13 +1714,13 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             icon: "cross",
             onClick: i.clearValue
           }, null, 8, ["onClick"])) : _("", !0),
-          e.icon && !e.clearable ? (v(), x(R, {
+          e.icon && !e.clearable ? (m(), x(R, {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
             name: e.icon
           }, null, 8, ["name"])) : _("", !0),
-          e.unit ? (v(), p("div", {
+          e.unit ? (m(), p("div", {
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
@@ -1723,7 +1730,7 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
     ], 2));
   }
 });
-const no = /* @__PURE__ */ V(oo, [["__scopeId", "data-v-c37d9a7a"]]), ao = ["teal", "white"], io = ["href"], ro = /* @__PURE__ */ $({
+const oo = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-46a69828"]]), no = ["teal", "white"], ao = ["href"], io = /* @__PURE__ */ $({
   __name: "VJoyLink",
   props: {
     href: {
@@ -1734,7 +1741,7 @@ const no = /* @__PURE__ */ V(oo, [["__scopeId", "data-v-c37d9a7a"]]), ao = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return ao.includes(e);
+        return no.includes(e);
       }
     },
     icon: {
@@ -1743,22 +1750,22 @@ const no = /* @__PURE__ */ V(oo, [["__scopeId", "data-v-c37d9a7a"]]), ao = ["tea
     text: String
   },
   setup(e) {
-    return (t, l) => (v(), p("a", Y({ href: e.href }, t.$attrs, {
+    return (t, l) => (m(), p("a", Y({ href: e.href }, t.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (v(), x(R, {
+      e.icon ? (m(), x(R, {
         key: 0,
         name: e.icon
       }, null, 8, ["name"])) : _("", !0),
       h(t.$slots, "default", {}, () => [
         C(I(e.text), 1)
       ], !0)
-    ], 16, io));
+    ], 16, ao));
   }
 });
-const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"], co = {
+const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-a8db21c2"]]), so = ["id"], uo = {
   class: /* @__PURE__ */ w(["joy-multi-checkbox"])
-}, fo = /* @__PURE__ */ $({
+}, co = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
   props: {
     options: {
@@ -1797,15 +1804,15 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"
     function o(r) {
       return l.value.includes(r.value);
     }
-    function a(r, s) {
-      let n = [...l.value || []];
-      s ? n.push(r) : n.splice(n.indexOf(r), 1), t("update:value", n);
+    function n(r, s) {
+      let a = [...l.value || []];
+      s ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
     }
-    return (r, s) => (v(), p("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (v(), x(k(W), {
+      e.label ? (m(), x(k(W), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -1817,39 +1824,39 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : _("", !0),
-      g("div", co, [
-        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(k(he), {
-          id: n.id,
-          key: n.id,
-          name: n.name,
-          value: n.value,
-          checked: o(n),
-          "onUpdate:checked": (f) => a(n.value, f)
+      b("div", uo, [
+        (m(!0), p(fe, null, ye(e.options, (a) => (m(), x(k(he), {
+          id: a.id,
+          key: a.id,
+          name: a.name,
+          value: a.value,
+          checked: o(a),
+          "onUpdate:checked": (c) => n(a.value, c)
         }, {
           default: B(() => [
-            h(r.$slots, "checkbox", ve(me(n)), () => [
-              C(I(n.label), 1)
+            h(r.$slots, "checkbox", ve(me(a)), () => [
+              C(I(a.label), 1)
             ], !0)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, uo));
+    ], 8, so));
   }
 });
-const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["small", "medium", "large"], mo = ["small", "large"], po = {
+const fo = /* @__PURE__ */ V(co, [["__scopeId", "data-v-47574ced"]]), yo = ["small", "medium", "large"], vo = ["small", "large"], mo = {
   key: 0,
   class: /* @__PURE__ */ w(["joy-panel__header"])
-}, ho = {
+}, po = {
   key: 1,
   class: "joy-panel__header-action"
-}, go = {
+}, ho = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, bo = { class: "joy-panel__body" }, _o = {
+}, go = { class: "joy-panel__body" }, bo = {
   key: 1,
   class: "joy-panel__footer"
-}, wo = /* @__PURE__ */ $({
+}, _o = /* @__PURE__ */ $({
   __name: "VJoyPanel",
   props: {
     flex: {
@@ -1863,14 +1870,14 @@ const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["sma
       type: String,
       default: "medium",
       validator(e) {
-        return vo.includes(e);
+        return yo.includes(e);
       }
     },
     titleSize: {
       type: String,
       default: "large",
       validator(e) {
-        return mo.includes(e);
+        return vo.includes(e);
       }
     },
     loading: {
@@ -1883,10 +1890,10 @@ const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["sma
     }
   },
   setup(e) {
-    const t = dt("VJoyWrapperContext", {}), l = L(() => Object.keys(t).length > 0), o = G(), a = b(), r = L(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
-    return (s, n) => (v(), p("section", {
+    const t = dt("VJoyWrapperContext", {}), l = L(() => Object.keys(t).length > 0), o = G(), n = g(), r = L(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
+    return (s, a) => (m(), p("section", {
       ref_key: "panel",
-      ref: a,
+      ref: n,
       style: Z({ flex: e.flex }),
       class: w([
         "joy-panel",
@@ -1897,27 +1904,27 @@ const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["sma
         }
       ])
     }, [
-      r.value ? (v(), p("header", po, [
-        k(o)["panel-title"] ? (v(), p("div", {
+      r.value ? (m(), p("header", mo, [
+        k(o)["panel-title"] ? (m(), p("div", {
           key: 0,
           class: w(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
         }, [
           h(s.$slots, "panel-title", {}, void 0, !0)
         ], 2)) : _("", !0),
-        k(o)["panel-title-action"] ? (v(), p("div", ho, [
+        k(o)["panel-title-action"] ? (m(), p("div", po, [
           h(s.$slots, "panel-title-action", {}, void 0, !0)
         ])) : _("", !0),
-        k(o)["panel-subtitle"] ? (v(), p("div", go, [
+        k(o)["panel-subtitle"] ? (m(), p("div", ho, [
           h(s.$slots, "panel-subtitle", {}, void 0, !0)
         ])) : _("", !0)
       ])) : _("", !0),
-      g("div", bo, [
+      b("div", go, [
         h(s.$slots, "panel-body", {}, void 0, !0)
       ]),
-      k(o)["panel-action"] ? (v(), p("footer", _o, [
+      k(o)["panel-action"] ? (m(), p("footer", bo, [
         h(s.$slots, "panel-action", {}, void 0, !0)
       ])) : _("", !0),
-      e.loading ? (v(), x(k(be), {
+      e.loading ? (m(), x(k(be), {
         key: 2,
         overlay: "",
         color: e.loadingColor
@@ -1930,27 +1937,27 @@ const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["sma
     ], 6));
   }
 });
-const So = /* @__PURE__ */ V(wo, [["__scopeId", "data-v-2e3a2baa"]]), jo = { class: "joy-panel-section" }, ko = {
+const wo = /* @__PURE__ */ V(_o, [["__scopeId", "data-v-2e3a2baa"]]), So = { class: "joy-panel-section" }, jo = {
   key: 0,
   class: "joy-panel-section__title"
-}, $o = {
+}, ko = {
   key: 1,
   class: "joy-panel-section__content"
-}, Vo = /* @__PURE__ */ $({
+}, $o = /* @__PURE__ */ $({
   __name: "VJoyPanelSection",
   setup(e) {
     const t = G();
-    return (l, o) => (v(), p("div", jo, [
-      k(t)["panel-section-title"] ? (v(), p("div", ko, [
+    return (l, o) => (m(), p("div", So, [
+      k(t)["panel-section-title"] ? (m(), p("div", jo, [
         h(l.$slots, "panel-section-title", {}, void 0, !0)
       ])) : _("", !0),
-      k(t)["panel-section-content"] ? (v(), p("div", $o, [
+      k(t)["panel-section-content"] ? (m(), p("div", ko, [
         h(l.$slots, "panel-section-content", {}, void 0, !0)
       ])) : _("", !0)
     ]));
   }
 });
-const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id", "value", "checked", "disabled", "required", "name"], Oo = { class: "joy-radio-label" }, Bo = { class: "joy-radio-content__wrapper" }, Lo = { class: "joy-radio-content" }, Eo = /* @__PURE__ */ $({
+const Vo = /* @__PURE__ */ V($o, [["__scopeId", "data-v-d88510ab"]]), xo = ["id", "value", "checked", "disabled", "required", "name"], Io = { class: "joy-radio-label" }, Oo = { class: "joy-radio-content__wrapper" }, Bo = { class: "joy-radio-content" }, Lo = /* @__PURE__ */ $({
   __name: "VJoyRadio",
   props: {
     disabled: {
@@ -1986,11 +1993,11 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(!1), r = b(!1), s = b(null), n = b(null), f = G(), c = L(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
+    const o = e, n = g(!1), r = g(!1), s = g(null), a = g(null), c = G(), y = L(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
     function u() {
-      a.value = !!f["expandable-content"] && c.value;
+      n.value = !!c["expandable-content"] && y.value;
     }
-    function m() {
+    function v() {
       l("update:modelValue", o.value), u();
     }
     X(() => {
@@ -1999,7 +2006,7 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
     function i() {
       r.value = !0;
     }
-    function y() {
+    function f() {
       r.value = !1;
     }
     return J(
@@ -2008,16 +2015,16 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
         u();
       }
     ), t({
-      checked: c,
-      isExpanded: a
-    }), (d, j) => (v(), p("label", {
+      checked: y,
+      isExpanded: n
+    }), (d, j) => (m(), p("label", {
       ref_key: "root",
       ref: s,
       class: w([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": c.value,
+          "joy-radio--checked": y.value,
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid,
           "joy-radio--outline-focus": r.value && e.theme === "outline",
@@ -2025,29 +2032,29 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
         }
       ])
     }, [
-      g("input", {
+      b("input", {
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: c.value,
+        checked: y.value,
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: m,
+        onChange: v,
         onFocus: i,
-        onBlur: y
-      }, null, 40, Io),
-      g("span", Oo, [
+        onBlur: f
+      }, null, 40, xo),
+      b("span", Io, [
         h(d.$slots, "default", {}, void 0, !0)
       ]),
-      g("div", Bo, [
-        g("div", Lo, [
+      b("div", Oo, [
+        b("div", Bo, [
           h(d.$slots, "radio-content", {}, void 0, !0)
         ]),
-        g("div", {
+        b("div", {
           ref_key: "expandableElement",
-          ref: n,
-          class: w(["joy-radio-expandable", { "joy-radio-expandable--expanded": a.value }])
+          ref: a,
+          class: w(["joy-radio-expandable", { "joy-radio-expandable--expanded": n.value }])
         }, [
           h(d.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
@@ -2055,7 +2062,7 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
     ], 2));
   }
 });
-const Co = /* @__PURE__ */ V(Eo, [["__scopeId", "data-v-24cea99b"]]), Jo = ["form", "name"], Po = /* @__PURE__ */ $({
+const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-24cea99b"]]), Co = ["form", "name"], Jo = /* @__PURE__ */ $({
   __name: "VJoyRadioGroup",
   props: {
     /**
@@ -2076,7 +2083,7 @@ const Co = /* @__PURE__ */ V(Eo, [["__scopeId", "data-v-24cea99b"]]), Jo = ["for
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("fieldset", {
+    return (t, l) => (m(), p("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
@@ -2084,18 +2091,18 @@ const Co = /* @__PURE__ */ V(Eo, [["__scopeId", "data-v-24cea99b"]]), Jo = ["for
       name: e.name
     }, [
       h(t.$slots, "radio-group-legend", {}, void 0, !0),
-      g("div", {
+      b("div", {
         class: w(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
         h(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, Jo));
+    ], 8, Co));
   }
 });
-const To = /* @__PURE__ */ V(Po, [["__scopeId", "data-v-a77e7f95"]]), qo = { class: "joy-screen-loader__content" }, zo = {
+const Po = /* @__PURE__ */ V(Jo, [["__scopeId", "data-v-a77e7f95"]]), qo = { class: "joy-screen-loader__content" }, To = {
   key: 0,
   class: "joy-screen-loader__content"
-}, Ao = /* @__PURE__ */ $({
+}, zo = /* @__PURE__ */ $({
   __name: "VJoyScreenLoader",
   props: {
     /** Light or dark. Changes the spinner and background color */
@@ -2110,23 +2117,23 @@ const To = /* @__PURE__ */ V(Po, [["__scopeId", "data-v-a77e7f95"]]), qo = { cla
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return (t, l) => (m(), p("div", {
       class: w(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
     }, [
-      g("div", qo, [
+      b("div", qo, [
         h(t.$slots, "spinner", {}, () => [
           N(pe, {
             color: e.color === "dark" ? "white" : "teal"
           }, null, 8, ["color"])
         ], !0),
-        t.$slots.content ? (v(), p("div", zo, [
+        t.$slots.content ? (m(), p("div", To, [
           h(t.$slots, "content", {}, void 0, !0)
         ])) : _("", !0)
       ])
     ], 2));
   }
 });
-const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id", "name", "aria-invalid", "required", "disabled", "value"], Do = /* @__PURE__ */ $({
+const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id", "name", "aria-invalid", "required", "disabled", "value"], Fo = /* @__PURE__ */ $({
   __name: "VJoySelect",
   props: {
     disabled: {
@@ -2167,38 +2174,38 @@ const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, o = b(), a = b(), r = G(), s = b(!1);
+    const l = e, o = g(), n = g(), r = G(), s = g(!1);
     X(() => {
       var i;
       const u = r.label && r.label();
       if (!u || !u.length)
         return;
-      const m = u[0];
-      if (m.type === "JoyLabel") {
-        const y = (i = m.props) == null ? void 0 : i.for;
-        if (!y) {
+      const v = u[0];
+      if (v.type === "JoyLabel") {
+        const f = (i = v.props) == null ? void 0 : i.for;
+        if (!f) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        y !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        f !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function n(u) {
-      const m = u.target.value;
-      t("update:modelValue", m);
+    function a(u) {
+      const v = u.target.value;
+      t("update:modelValue", v);
     }
-    function f() {
+    function c() {
       s.value = !0;
     }
-    function c() {
+    function y() {
       s.value = !1;
     }
-    return (u, m) => (v(), p("div", {
+    return (u, v) => (m(), p("div", {
       ref_key: "root",
       ref: o
     }, [
       h(u.$slots, "select-label", {}, () => [
-        e.label ? (v(), x(W, {
+        e.label ? (m(), x(W, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
@@ -2211,7 +2218,7 @@ const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id"
           _: 1
         }, 8, ["required", "optional-label", "for", "size"])) : _("", !0)
       ], !0),
-      g("div", {
+      b("div", {
         class: w({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
@@ -2219,22 +2226,22 @@ const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id"
           "joy-select--focusing": s.value
         })
       }, [
-        g("select", {
+        b("select", {
           id: e.id || e.name,
           ref_key: "select",
-          ref: a,
+          ref: n,
           class: "joy-select",
           name: e.name,
           "aria-invalid": e.invalid,
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: n,
-          onFocus: f,
-          onBlur: c
+          onInput: a,
+          onFocus: c,
+          onBlur: y
         }, [
           h(u.$slots, "default", {}, void 0, !0)
-        ], 40, Fo),
+        ], 40, Ao),
         N(R, {
           class: "joy-select__chevron",
           name: "chevron-down"
@@ -2243,7 +2250,7 @@ const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id"
     ], 512));
   }
 });
-const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["aria-disabled"], No = ["id", "value", "checked", "disabled", "required", "name"], Ho = /* @__PURE__ */ $({
+const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["aria-disabled"], Mo = ["id", "value", "checked", "disabled", "required", "name"], No = /* @__PURE__ */ $({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -2280,15 +2287,15 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = e, o = b(l.checked), a = b(), r = b(!1), s = l.multiple ? "div" : "label", n = {
+    const l = e, o = g(l.checked), n = g(), r = g(!1), s = l.multiple ? "div" : "label", a = {
       onRadioChange: () => {
         t("update:checked", l.value);
       },
       onClick: () => {
         l.checked && !l.multiple && t("update:checked", "");
       },
-      onLabelClick: (c) => {
-        l.multiple || c.stopPropagation();
+      onLabelClick: (y) => {
+        l.multiple || y.stopPropagation();
       },
       onFocus: () => {
         r.value = !0;
@@ -2297,10 +2304,10 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
         r.value = !1;
       }
     };
-    function f(c) {
-      t("update:checked", c);
+    function c(y) {
+      t("update:checked", y);
     }
-    return (c, u) => (v(), p("div", {
+    return (y, u) => (m(), p("div", {
       class: w([
         "joy-selectable-item__wrapper",
         {
@@ -2309,13 +2316,13 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
       ]),
       "aria-disabled": e.disabled,
       onClick: u[4] || (u[4] = //@ts-ignore
-      (...m) => n.onClick && n.onClick(...m))
+      (...v) => a.onClick && a.onClick(...v))
     }, [
-      e.multiple ? _("", !0) : (v(), p("input", {
+      e.multiple ? _("", !0) : (m(), p("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
-        ref: a,
+        ref: n,
         type: "radio",
         value: e.value,
         checked: e.checked,
@@ -2323,13 +2330,13 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
         required: e.required,
         name: e.name,
         onChange: u[0] || (u[0] = //@ts-ignore
-        (...m) => n.onRadioChange && n.onRadioChange(...m)),
+        (...v) => a.onRadioChange && a.onRadioChange(...v)),
         onFocus: u[1] || (u[1] = //@ts-ignore
-        (...m) => n.onFocus && n.onFocus(...m)),
+        (...v) => a.onFocus && a.onFocus(...v)),
         onBlur: u[2] || (u[2] = //@ts-ignore
-        (...m) => n.onBlur && n.onBlur(...m))
-      }, null, 40, No)),
-      (v(), x(ce(k(s)), {
+        (...v) => a.onBlur && a.onBlur(...v))
+      }, null, 40, Mo)),
+      (m(), x(ce(k(s)), {
         for: e.id,
         class: w([
           "joy-selectable-item",
@@ -2340,43 +2347,43 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: n.onLabelClick
+        onClick: a.onLabelClick
       }, {
         default: B(() => [
-          e.multiple ? (v(), x(k(he), {
+          e.multiple ? (m(), x(k(he), {
             key: 0,
             id: e.id,
             checked: o.value,
             "onUpdate:checked": [
-              u[3] || (u[3] = (m) => o.value = m),
-              f
+              u[3] || (u[3] = (v) => o.value = v),
+              c
             ],
             disabled: e.disabled,
             value: e.value,
             name: e.name,
             "display-focus": !1,
             required: e.required,
-            onFocus: n.onFocus,
-            onBlur: n.onBlur
+            onFocus: a.onFocus,
+            onBlur: a.onBlur
           }, {
             default: B(() => [
-              h(c.$slots, "default", {}, void 0, !0)
+              h(y.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
           }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : _("", !0),
-          e.multiple ? _("", !0) : h(c.$slots, "default", { key: 1 }, void 0, !0),
-          g("div", {
-            class: w([{ "joy-selectable-item__sublabel": c.$slots["selectable-item-sublabel"] }])
+          e.multiple ? _("", !0) : h(y.$slots, "default", { key: 1 }, void 0, !0),
+          b("div", {
+            class: w([{ "joy-selectable-item__sublabel": y.$slots["selectable-item-sublabel"] }])
           }, [
-            h(c.$slots, "selectable-item-sublabel", {}, void 0, !0)
+            h(y.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 10, Mo));
+    ], 10, Ro));
   }
 });
-const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"], Uo = /* @__PURE__ */ $({
+const lt = /* @__PURE__ */ V(No, [["__scopeId", "data-v-cb2531c0"]]), Ho = ["id"], Wo = /* @__PURE__ */ $({
   __name: "VJoySelectableItemGroup",
   props: {
     options: {
@@ -2421,17 +2428,17 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
     function o(r) {
       return typeof l.value == "string" ? l.value === r.value : (l.value || []).includes(r.value);
     }
-    function a(r, s) {
+    function n(r, s) {
       if (!l.multiple)
         return t("update:value", s);
-      let n = [...l.value || []];
-      s && typeof s == "boolean" ? n.push(r) : n.splice(n.indexOf(r), 1), t("update:value", n);
+      let a = [...l.value || []];
+      s && typeof s == "boolean" ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
     }
-    return (r, s) => (v(), p("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (v(), x(k(W), {
+      e.label ? (m(), x(k(W), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -2443,7 +2450,7 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : _("", !0),
-      g("div", {
+      b("div", {
         class: w([
           "joy-selectable-item-group",
           {
@@ -2453,34 +2460,34 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
           }
         ])
       }, [
-        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(k(lt), {
-          id: n.id,
-          key: n.id,
-          name: n.name,
-          disabled: n.disabled,
-          value: n.value,
+        (m(!0), p(fe, null, ye(e.options, (a) => (m(), x(k(lt), {
+          id: a.id,
+          key: a.id,
+          name: a.name,
+          disabled: a.disabled,
+          value: a.value,
           multiple: e.multiple,
-          checked: o(n),
-          "onUpdate:checked": (f) => a(n.value, f)
+          checked: o(a),
+          "onUpdate:checked": (c) => n(a.value, c)
         }, We({
           default: B(() => [
-            C(I(n.label) + " ", 1)
+            C(I(a.label) + " ", 1)
           ]),
           _: 2
         }, [
-          n.subLabel ? {
+          a.subLabel ? {
             name: "selectable-item-sublabel",
             fn: B(() => [
-              C(I(n.subLabel), 1)
+              C(I(a.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "disabled", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, Wo));
+    ], 8, Ho));
   }
 });
-const Go = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-0730aed0"]]), Ko = /* @__PURE__ */ $({
+const Uo = /* @__PURE__ */ V(Wo, [["__scopeId", "data-v-0730aed0"]]), Go = /* @__PURE__ */ $({
   __name: "VJoyWrapper",
   props: {
     /** Horizontal spread. Refers to CSS flex justify-content. */
@@ -2514,7 +2521,7 @@ const Go = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-0730aed0"]]), Ko = /* @_
     }
   },
   setup(e) {
-    return ct("VJoyWrapperContext", e), (l, o) => (v(), p("div", {
+    return ct("VJoyWrapperContext", e), (l, o) => (m(), p("div", {
       class: w([
         "joy-wrapper",
         `joy-wrapper--justify-${e.justify}`,
@@ -2529,28 +2536,28 @@ const Go = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-0730aed0"]]), Ko = /* @_
     ], 2));
   }
 });
-const Qo = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-e2f29698"]]), Zo = { class: "joy-template__wrapper" }, Yo = {
+const Ko = /* @__PURE__ */ V(Go, [["__scopeId", "data-v-e2f29698"]]), Qo = { class: "joy-template__wrapper" }, Zo = {
   key: 0,
   class: "joy-template__heading"
-}, Xo = {
+}, Yo = {
   key: 0,
   class: "joy-template-slot-back"
-}, en = { class: "joy-template__heading___headings" }, tn = {
+}, Xo = { class: "joy-template__heading___headings" }, en = {
   key: 0,
   class: "joy-template-slot-title"
-}, ln = {
+}, tn = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, on = {
+}, ln = {
   key: 1,
   class: "joy-template-slot-actions"
-}, nn = {
+}, on = {
   key: 0,
   class: "joy-template-slot-main"
-}, an = {
+}, nn = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, rn = /* @__PURE__ */ $({
+}, an = /* @__PURE__ */ $({
   __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
@@ -2566,27 +2573,27 @@ const Qo = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-e2f29698"]]), Zo = { cla
   },
   setup(e) {
     const t = e, l = G(), o = L(() => !!l["template-back"] || !!l["template-title"] || !!l["template-subtitle"] || !!l["template-actions"]);
-    return (a, r) => (v(), p("main", {
+    return (n, r) => (m(), p("main", {
       class: w(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
     }, [
-      g("div", Zo, [
-        o.value ? (v(), p("div", Yo, [
-          k(l)["template-back"] ? (v(), p("div", Xo, [
-            h(a.$slots, "template-back", {}, void 0, !0)
+      b("div", Qo, [
+        o.value ? (m(), p("div", Zo, [
+          k(l)["template-back"] ? (m(), p("div", Yo, [
+            h(n.$slots, "template-back", {}, void 0, !0)
           ])) : _("", !0),
-          g("div", en, [
-            k(l)["template-title"] ? (v(), p("div", tn, [
-              h(a.$slots, "template-title", {}, void 0, !0)
+          b("div", Xo, [
+            k(l)["template-title"] ? (m(), p("div", en, [
+              h(n.$slots, "template-title", {}, void 0, !0)
             ])) : _("", !0),
-            k(l)["template-subtitle"] ? (v(), p("div", ln, [
-              h(a.$slots, "template-subtitle", {}, void 0, !0)
+            k(l)["template-subtitle"] ? (m(), p("div", tn, [
+              h(n.$slots, "template-subtitle", {}, void 0, !0)
             ])) : _("", !0)
           ]),
-          k(l)["template-actions"] ? (v(), p("div", on, [
-            h(a.$slots, "template-actions", {}, void 0, !0)
+          k(l)["template-actions"] ? (m(), p("div", ln, [
+            h(n.$slots, "template-actions", {}, void 0, !0)
           ])) : _("", !0)
         ])) : _("", !0),
-        g("div", {
+        b("div", {
           class: w([
             "joy-template__content",
             {
@@ -2594,34 +2601,34 @@ const Qo = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-e2f29698"]]), Zo = { cla
             }
           ])
         }, [
-          a.$slots["template-main"] ? (v(), p("div", nn, [
-            h(a.$slots, "template-main", {}, void 0, !0)
+          n.$slots["template-main"] ? (m(), p("div", on, [
+            h(n.$slots, "template-main", {}, void 0, !0)
           ])) : _("", !0),
-          a.$slots["template-sidebar"] ? (v(), p("div", an, [
-            h(a.$slots, "template-sidebar", {}, void 0, !0)
+          n.$slots["template-sidebar"] ? (m(), p("div", nn, [
+            h(n.$slots, "template-sidebar", {}, void 0, !0)
           ])) : _("", !0)
         ], 2)
       ]),
-      e.loading ? (v(), x(be, {
+      e.loading ? (m(), x(be, {
         key: 0,
         overlay: "",
         color: e.loadingColor
       }, {
         content: B(() => [
-          h(a.$slots, "template-loader-content", {}, void 0, !0)
+          h(n.$slots, "template-loader-content", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["color"])) : _("", !0)
     ], 2));
   }
 });
-const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["aria-disabled"], dn = { class: "joy-textarea_wrapper" }, cn = ["id", "disabled", "name", "required", "minlength", "value"], fn = {
+const rn = /* @__PURE__ */ V(an, [["__scopeId", "data-v-a2355e4b"]]), sn = ["aria-disabled"], un = { class: "joy-textarea_wrapper" }, dn = ["id", "disabled", "name", "required", "minlength", "value"], cn = {
   key: 0,
   class: "joy-textarea_helpers"
-}, yn = {
+}, fn = {
   inheritAttrs: !1
-}, vn = /* @__PURE__ */ $({
-  ...yn,
+}, yn = /* @__PURE__ */ $({
+  ...fn,
   __name: "VJoyTextarea",
   props: {
     disabled: {
@@ -2670,24 +2677,24 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const o = e, a = b(), { triggerResize: r } = Xt({
-      element: o.autogrow ? a : void 0
-    }), s = b(!1), n = b(!1), f = L(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), c = L(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
-      onInput: (m) => {
-        l("update:modelValue", m.target.value), r();
+    const o = e, n = g(), { triggerResize: r } = Xt({
+      element: o.autogrow ? n : void 0
+    }), s = g(!1), a = g(!1), c = L(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), y = L(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
+      onInput: (v) => {
+        l("update:modelValue", v.target.value), r();
       },
       onBlur: () => {
-        n.value = !1, s.value = f.value || c.value;
+        a.value = !1, s.value = c.value || y.value;
       },
       onFocus: () => {
-        n.value = !0;
+        a.value = !0;
       }
     };
     return t({
       isInvalid: s,
-      valueOverMaxlength: f,
-      valueUnderMinlength: c
-    }), (m, i) => (v(), p("div", {
+      valueOverMaxlength: c,
+      valueUnderMinlength: y
+    }), (v, i) => (m(), p("div", {
       "aria-disabled": e.disabled,
       class: w([
         "joy-textarea",
@@ -2695,7 +2702,7 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
           "joy-textarea_invalid": s.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow,
-          "joy-textarea_focusing": n.value
+          "joy-textarea_focusing": a.value
         }
       ])
     }, [
@@ -2706,17 +2713,17 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
         size: e.labelSize
       }, {
         default: B(() => [
-          h(m.$slots, "default", {}, () => [
+          h(v.$slots, "default", {}, () => [
             C(I(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      g("div", dn, [
-        g("textarea", Y(m.$attrs, {
+      b("div", un, [
+        b("textarea", Y(v.$attrs, {
           id: e.id,
           ref_key: "textarea",
-          ref: a,
+          ref: n,
           class: "joy-native-textarea",
           disabled: e.disabled,
           name: e.name,
@@ -2724,19 +2731,19 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
           minlength: e.minlength,
           value: e.modelValue,
           onInput: i[0] || (i[0] = //@ts-ignore
-          (...y) => u.onInput && u.onInput(...y)),
+          (...f) => u.onInput && u.onInput(...f)),
           onFocus: i[1] || (i[1] = //@ts-ignore
-          (...y) => u.onFocus && u.onFocus(...y)),
+          (...f) => u.onFocus && u.onFocus(...f)),
           onBlur: i[2] || (i[2] = //@ts-ignore
-          (...y) => u.onBlur && u.onBlur(...y))
-        }), null, 16, cn)
+          (...f) => u.onBlur && u.onBlur(...f))
+        }), null, 16, dn)
       ]),
-      e.minlength || e.maxlength ? (v(), p("div", fn, [
-        e.minlength ? (v(), p("p", {
+      e.minlength || e.maxlength ? (m(), p("div", cn, [
+        e.minlength ? (m(), p("p", {
           key: 0,
           class: w(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          c.value ? _("", !0) : (v(), x(R, {
+          y.value ? _("", !0) : (m(), x(R, {
             key: 0,
             name: "check",
             color: "neutral",
@@ -2744,28 +2751,28 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
           })),
           C(" " + I(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
         ], 2)) : _("", !0),
-        e.maxlength ? (v(), p("p", {
+        e.maxlength ? (m(), p("p", {
           key: 1,
-          class: w(["joy-textarea-count", { "joy-textarea-count-invalid": f.value }])
+          class: w(["joy-textarea-count", { "joy-textarea-count-invalid": c.value }])
         }, I(e.modelValue.length + "/" + e.maxlength), 3)) : _("", !0)
       ])) : _("", !0)
-    ], 10, un));
+    ], 10, sn));
   }
 });
-const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) => (ft("data-v-cf79d999"), e = e(), yt(), e), pn = { class: "joy-toggle__wrapper" }, hn = ["name", "disabled", "checked", "required", "aria-checked", "value"], gn = { class: "joy-toggle__content" }, bn = /* @__PURE__ */ ot(() => /* @__PURE__ */ g("span", { class: "joy-toggle__symbol" }, null, -1)), _n = { class: "joy-toggle__content-label" }, wn = /* @__PURE__ */ ot(() => /* @__PURE__ */ g("span", { class: "joy-toggle__smile" }, [
-  /* @__PURE__ */ g("svg", {
+const vn = /* @__PURE__ */ V(yn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) => (ft("data-v-cf79d999"), e = e(), yt(), e), mn = { class: "joy-toggle__wrapper" }, pn = ["name", "disabled", "checked", "required", "aria-checked", "value"], hn = { class: "joy-toggle__content" }, gn = /* @__PURE__ */ ot(() => /* @__PURE__ */ b("span", { class: "joy-toggle__symbol" }, null, -1)), bn = { class: "joy-toggle__content-label" }, _n = /* @__PURE__ */ ot(() => /* @__PURE__ */ b("span", { class: "joy-toggle__smile" }, [
+  /* @__PURE__ */ b("svg", {
     width: "18",
     height: "10",
     viewBox: "0 0 18 10",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   }, [
-    /* @__PURE__ */ g("path", {
+    /* @__PURE__ */ b("path", {
       d: "M9.0237 9.14856C15.7144 9.14856 17.8736 2.22231 17.9649 1.91853L17.9345 1.94891C18.1778 1.15908 17.7216 0.308485 16.9309 0.0654591C16.1402 -0.177566 15.2886 0.278108 15.0453 1.06794C14.9845 1.25021 13.5551 6.11073 8.99328 6.11073C4.43147 6.11073 3.03249 1.43248 2.97167 1.21983C2.75878 0.399622 1.90724 -0.0560541 1.11652 0.156593C0.295397 0.369241 -0.160787 1.18945 0.0520982 2.00967C0.721165 4.4703 3.48869 9.14856 9.0237 9.14856Z",
       fill: "currentColor"
     })
   ])
-], -1)), Sn = /* @__PURE__ */ $({
+], -1)), wn = /* @__PURE__ */ $({
   __name: "VJoyToggle",
   props: {
     modelValue: {
@@ -2799,9 +2806,9 @@ const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = b(!1), o = {
-      onChange: (a) => {
-        const r = a.target.checked;
+    const l = g(!1), o = {
+      onChange: (n) => {
+        const r = n.target.checked;
         t("update:modelValue", r);
       },
       onFocus: () => {
@@ -2811,8 +2818,8 @@ const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
         l.value = !1;
       }
     };
-    return (a, r) => (v(), p("div", pn, [
-      g("label", {
+    return (n, r) => (m(), p("div", mn, [
+      b("label", {
         class: w([
           "joy-toggle",
           {
@@ -2822,7 +2829,7 @@ const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
           }
         ])
       }, [
-        g("input", {
+        b("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -2839,21 +2846,21 @@ const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
           (...s) => o.onFocus && o.onFocus(...s)),
           onBlur: r[2] || (r[2] = //@ts-ignore
           (...s) => o.onBlur && o.onBlur(...s))
-        }, null, 40, hn),
-        g("p", gn, [
-          bn,
-          g("span", _n, [
-            h(a.$slots, "default", {}, () => [
+        }, null, 40, pn),
+        b("p", hn, [
+          gn,
+          b("span", bn, [
+            h(n.$slots, "default", {}, () => [
               C(I(e.label), 1)
             ], !0)
           ]),
-          wn
+          _n
         ])
       ], 2)
     ]));
   }
 });
-const jn = /* @__PURE__ */ V(Sn, [["__scopeId", "data-v-cf79d999"]]), kn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Sn = /* @__PURE__ */ V(wn, [["__scopeId", "data-v-cf79d999"]]), jn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   VJoyBadge: pt,
   VJoyButton: Ue,
@@ -2864,32 +2871,32 @@ const jn = /* @__PURE__ */ V(Sn, [["__scopeId", "data-v-cf79d999"]]), kn = /* @_
   VJoyFormError: tt,
   VJoyHighlight: Gl,
   VJoyIcon: R,
-  VJoyInput: no,
+  VJoyInput: oo,
   VJoyLabel: W,
-  VJoyLink: so,
-  VJoyMultiCheckbox: yo,
-  VJoyPanel: So,
-  VJoyPanelSection: xo,
-  VJoyRadio: Co,
-  VJoyRadioGroup: To,
+  VJoyLink: ro,
+  VJoyMultiCheckbox: fo,
+  VJoyPanel: wo,
+  VJoyPanelSection: Vo,
+  VJoyRadio: Eo,
+  VJoyRadioGroup: Po,
   VJoyScreenLoader: be,
-  VJoySelect: Ro,
+  VJoySelect: Do,
   VJoySelectableItem: lt,
-  VJoySelectableItemGroup: Go,
+  VJoySelectableItemGroup: Uo,
   VJoySpinner: pe,
-  VJoyTemplate: sn,
-  VJoyTextarea: mn,
-  VJoyToggle: jn,
-  VJoyWrapper: Qo
-}, Symbol.toStringTag, { value: "Module" })), Vn = {
+  VJoyTemplate: rn,
+  VJoyTextarea: vn,
+  VJoyToggle: Sn,
+  VJoyWrapper: Ko
+}, Symbol.toStringTag, { value: "Module" })), $n = {
   install: (e) => {
-    Object.entries(kn).forEach(([t, l]) => {
+    Object.entries(jn).forEach(([t, l]) => {
       e.component(t, l);
     });
   }
 };
 export {
-  Vn as JoyVuePlugin,
+  $n as JoyVuePlugin,
   pt as VJoyBadge,
   Ue as VJoyButton,
   he as VJoyCheckbox,
@@ -2899,21 +2906,21 @@ export {
   tt as VJoyFormError,
   Gl as VJoyHighlight,
   R as VJoyIcon,
-  no as VJoyInput,
+  oo as VJoyInput,
   W as VJoyLabel,
-  so as VJoyLink,
-  yo as VJoyMultiCheckbox,
-  So as VJoyPanel,
-  xo as VJoyPanelSection,
-  Co as VJoyRadio,
-  To as VJoyRadioGroup,
+  ro as VJoyLink,
+  fo as VJoyMultiCheckbox,
+  wo as VJoyPanel,
+  Vo as VJoyPanelSection,
+  Eo as VJoyRadio,
+  Po as VJoyRadioGroup,
   be as VJoyScreenLoader,
-  Ro as VJoySelect,
+  Do as VJoySelect,
   lt as VJoySelectableItem,
-  Go as VJoySelectableItemGroup,
+  Uo as VJoySelectableItemGroup,
   pe as VJoySpinner,
-  sn as VJoyTemplate,
-  mn as VJoyTextarea,
-  jn as VJoyToggle,
-  Qo as VJoyWrapper
+  rn as VJoyTemplate,
+  vn as VJoyTextarea,
+  Sn as VJoyToggle,
+  Ko as VJoyWrapper
 };