@maltjoy/core-vue 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/joy-vue.js

@@ -1,11 +1,47 @@
-import { defineComponent as $, openBlock as m, createElementBlock as p, normalizeClass as k, useAttrs as De, computed as I, createBlock as P, resolveDynamicComponent as de, unref as _, withCtx as L, createCommentVNode as w, createElementVNode as h, renderSlot as b, ref as g, createTextVNode as T, toDisplayString as O, mergeProps as K, createVNode as ce, pushScopeId as ee, popScopeId as te, getCurrentScope as et, onScopeDispose as tt, getCurrentInstance as lt, onMounted as W, nextTick as Me, watch as q, h as at, reactive as Y, onBeforeUnmount as Re, normalizeStyle as G, Fragment as fe, renderList as ye, normalizeProps as me, guardReactiveProps as ve, Teleport as ot, useSlots as F, onBeforeMount as nt, createSlots as it } from "vue";
-const rt = ["teal", "white"], st = /* @__PURE__ */ $({
+import { defineComponent as $, openBlock as m, createElementBlock as p, normalizeClass as k, renderSlot as g, createTextVNode as J, toDisplayString as I, useAttrs as Re, computed as x, createBlock as q, resolveDynamicComponent as ce, unref as _, withCtx as L, createCommentVNode as w, createElementVNode as h, ref as b, mergeProps as Q, createVNode as fe, pushScopeId as te, popScopeId as le, getCurrentScope as ot, onScopeDispose as nt, getCurrentInstance as at, onMounted as Z, nextTick as Me, watch as B, h as it, reactive as X, onBeforeUnmount as Ne, normalizeStyle as K, Fragment as ye, renderList as ve, normalizeProps as me, guardReactiveProps as pe, Teleport as rt, useSlots as W, onBeforeMount as st, createSlots as ut } from "vue";
+const dt = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink", "dark-blue", "yellow"], ct = /* @__PURE__ */ $({
+  __name: "VJoyBadge",
+  props: {
+    /**
+     * Use label or slot in order to inject the text.
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Color of the badge. Override the color with `--badge-bg-color` and `--badge-circle-color` if needed
+     */
+    variant: {
+      type: String,
+      validator(e) {
+        return dt.includes(e);
+      }
+    }
+  },
+  setup(e) {
+    return (t, l) => (m(), p("span", {
+      class: k(["joy-badge", `joy-badge__${e.variant}`]),
+      role: "status"
+    }, [
+      g(t.$slots, "default", {}, () => [
+        J(I(e.label), 1)
+      ], !0)
+    ], 2));
+  }
+});
+const V = (e, t) => {
+  const l = e.__vccOpts || e;
+  for (const [o, n] of t)
+    l[o] = n;
+  return l;
+}, ft = /* @__PURE__ */ V(ct, [["__scopeId", "data-v-c0310e42"]]), yt = ["teal", "white"], vt = /* @__PURE__ */ $({
   __name: "VJoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return rt.includes(e);
+        return yt.includes(e);
       }
     }
   },
@@ -15,12 +51,7 @@ const rt = ["teal", "white"], st = /* @__PURE__ */ $({
     }, null, 2));
   }
 });
-const V = (e, t) => {
-  const l = e.__vccOpts || e;
-  for (const [a, o] of t)
-    l[a] = o;
-  return l;
-}, Ne = /* @__PURE__ */ V(st, [["__scopeId", "data-v-616a29d0"]]), ut = ["primary", "secondary"], dt = ["neutral", "success", "info", "warning", "error"], ct = ["main", "admin", "ghost"], ft = [...ut, ...ct], yt = ["large", "medium", "small", "xsmall", "xxsmall"], mt = ["name", "size"], vt = { class: "joy-button--slot" }, pt = /* @__PURE__ */ $({
+const He = /* @__PURE__ */ V(vt, [["__scopeId", "data-v-616a29d0"]]), mt = ["primary", "secondary"], pt = ["neutral", "success", "info", "warning", "error"], ht = ["main", "admin", "ghost"], bt = [...mt, ...ht], gt = ["large", "medium", "small", "xsmall", "xxsmall"], _t = ["name", "size"], wt = { class: "joy-button--slot" }, St = /* @__PURE__ */ $({
   __name: "VJoyButton",
   props: {
     /**
@@ -43,7 +74,7 @@ const V = (e, t) => {
       type: String,
       default: "primary",
       validator(e) {
-        return ft.includes(e);
+        return bt.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,12 +82,12 @@ const V = (e, t) => {
       type: String,
       default: "medium",
       validator(e) {
-        return yt.includes(e);
+        return gt.includes(e);
       }
     }
   },
   setup(e) {
-    const t = e, l = De(), a = I(() => {
+    const t = e, l = Re(), o = x(() => {
       switch (t.size) {
         case "xxsmall":
           return "xsmall";
@@ -64,9 +95,11 @@ const V = (e, t) => {
           return "xxsmall";
         case "small":
           return "xsmall";
+        default:
+          return "small";
       }
-    }), o = I(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
-    return (r, s) => (m(), P(de(_(l).href ? "a" : "button"), {
+    }), n = x(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
+    return (r, s) => (m(), q(ce(_(l).href ? "a" : "button"), {
       disabled: e.loading || _(l).disabled,
       class: k([
         "joy-button",
@@ -82,22 +115,22 @@ const V = (e, t) => {
         e.icon ? (m(), p("joy-icon", {
           key: 0,
           name: e.icon,
-          size: _(a),
+          size: _(o),
           lazy: !1
-        }, null, 8, mt)) : w("", !0),
-        e.loading ? (m(), P(Ne, {
+        }, null, 8, _t)) : w("", !0),
+        e.loading ? (m(), q(He, {
           key: 1,
-          color: _(o)
+          color: _(n)
         }, null, 8, ["color"])) : w("", !0),
-        h("span", vt, [
-          b(r.$slots, "default", {}, void 0, !0)
+        h("span", wt, [
+          g(r.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
     }, 8, ["disabled", "class"]));
   }
 });
-const ht = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-62aca3ad"]]), bt = ["aria-checked", "aria-hidden"], gt = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], _t = { class: "joy-checkbox__content-wrapper" }, wt = { class: "joy-checkbox__content" }, St = /* @__PURE__ */ $({
+const jt = /* @__PURE__ */ V(St, [["__scopeId", "data-v-ff4bd9af"]]), kt = ["aria-checked", "aria-hidden"], $t = { class: "joy-checkbox__input-wrapper" }, Vt = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], xt = { class: "joy-checkbox__content-wrapper" }, Ot = { class: "joy-checkbox__content" }, It = /* @__PURE__ */ $({
   __name: "VJoyCheckbox",
   props: {
     /** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
@@ -105,6 +138,14 @@ const ht = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-62aca3ad"]]), bt = ["ari
       type: Boolean,
       default: !1
     },
+    /**
+     * Internal purpose in order to prevent double focus mark on selectable-item
+     * @internal
+     */
+    displayFocus: {
+      type: Boolean,
+      default: !0
+    },
     /** Use it to replace the default slot */
     label: {
       type: String
@@ -135,17 +176,23 @@ const ht = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-62aca3ad"]]), bt = ["ari
       default: !1
     }
   },
-  emits: ["update:checked"],
+  emits: ["update:checked", "focus", "blur"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(), r = g(a.indeterminate), s = {
-      onChange: (n) => {
-        const u = n.target.checked;
-        r.value = !1, l("update:checked", u);
+    const o = e, n = b(), r = b(o.indeterminate), s = b(!1), a = {
+      onChange: (c) => {
+        const f = c.target.checked;
+        r.value = !1, l("update:checked", f);
+      },
+      onFocus: () => {
+        s.value = !0, l("focus");
+      },
+      onBlur: () => {
+        s.value = !1, l("blur");
       }
     };
     return t({
       isIndeterminate: r
-    }), (n, u) => (m(), p("div", {
+    }), (c, f) => (m(), p("div", {
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
@@ -154,55 +201,62 @@ const ht = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-62aca3ad"]]), bt = ["ari
           "joy-checkbox",
           {
             "joy-checkbox__checked": e.checked,
-            "joy-checkbox__indeterminate": r.value
+            "joy-checkbox__indeterminate": r.value,
+            "joy-checkbox__focusing": s.value && e.displayFocus
           }
         ])
       }, [
-        h("input", {
-          id: e.id,
-          ref_key: "input",
-          ref: o,
-          type: "checkbox",
-          class: "joy-checkbox__input",
-          role: "checkbox",
-          name: e.name,
-          disabled: e.disabled,
-          checked: e.checked,
-          required: e.required,
-          "aria-checked": e.checked,
-          value: e.value,
-          indeterminate: r.value,
-          onChange: u[0] || (u[0] = //@ts-ignore
-          (...y) => s.onChange && s.onChange(...y))
-        }, null, 40, gt),
-        h("div", _t, [
-          b(n.$slots, "default", {}, () => [
-            T(O(e.label), 1)
+        h("div", $t, [
+          h("input", {
+            id: e.id,
+            ref_key: "input",
+            ref: n,
+            type: "checkbox",
+            class: "joy-checkbox__input",
+            role: "checkbox",
+            name: e.name,
+            disabled: e.disabled,
+            checked: e.checked,
+            required: e.required,
+            "aria-checked": e.checked,
+            value: e.value,
+            indeterminate: r.value,
+            onChange: f[0] || (f[0] = //@ts-ignore
+            (...u) => a.onChange && a.onChange(...u)),
+            onFocus: f[1] || (f[1] = //@ts-ignore
+            (...u) => a.onFocus && a.onFocus(...u)),
+            onBlur: f[2] || (f[2] = //@ts-ignore
+            (...u) => a.onBlur && a.onBlur(...u))
+          }, null, 40, Vt)
+        ]),
+        h("div", xt, [
+          g(c.$slots, "default", {}, () => [
+            J(I(e.label), 1)
           ], !0),
-          h("div", wt, [
-            b(n.$slots, "checkbox-content", {}, void 0, !0)
+          h("div", Ot, [
+            g(c.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, bt));
+    ], 8, kt));
   }
 });
-const pe = /* @__PURE__ */ V(St, [["__scopeId", "data-v-d6496829"]]), He = (e) => (ee("data-v-01418e7e"), e = e(), te(), e), kt = { class: "joy-counter" }, jt = { class: "joy-counter__wrapper" }, $t = ["aria-label", "disabled"], Vt = /* @__PURE__ */ He(() => /* @__PURE__ */ h("joy-icon", {
+const he = /* @__PURE__ */ V(It, [["__scopeId", "data-v-a39797a6"]]), We = (e) => (te("data-v-0d1ab3f2"), e = e(), le(), e), Bt = { class: "joy-counter" }, Lt = ["aria-label", "disabled"], Et = /* @__PURE__ */ We(() => /* @__PURE__ */ h("joy-icon", {
   name: "minus",
   color: "teal",
   lazy: !1
-}, null, -1)), xt = [
-  Vt
-], It = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Ot = ["aria-label", "disabled"], Lt = /* @__PURE__ */ He(() => /* @__PURE__ */ h("joy-icon", {
+}, null, -1)), Ct = [
+  Et
+], Pt = { class: "joy-counter__input-wrapper" }, Jt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], qt = ["aria-label", "disabled"], Tt = /* @__PURE__ */ We(() => /* @__PURE__ */ h("joy-icon", {
   name: "add",
   lazy: !1,
   color: "teal"
-}, null, -1)), Et = [
-  Lt
-], Bt = {
+}, null, -1)), zt = [
+  Tt
+], At = {
   key: 0,
   class: "joy-counter_error"
-}, Ct = /* @__PURE__ */ $({
+}, Ft = /* @__PURE__ */ $({
   __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
@@ -269,43 +323,46 @@ const pe = /* @__PURE__ */ V(St, [["__scopeId", "data-v-d6496829"]]), He = (e) =
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(!1);
-    function r() {
-      const d = u(!1);
-      d >= 0 ? l("update:modelValue", d <= a.min ? a.min : d) : l("update:modelValue", 0), n();
-    }
+    const o = e, n = b(!1), r = b(!1);
     function s() {
-      const d = u();
-      a.max && d <= a.max ? l("update:modelValue", d >= a.max ? a.max : d) : a.max && d > a.max ? l("update:modelValue", a.max) : l("update:modelValue", d), n();
+      const d = f(!1);
+      d >= 0 ? l("update:modelValue", d <= o.min ? o.min : d) : l("update:modelValue", 0), c();
     }
-    function n() {
-      o.value = !y();
+    function a() {
+      const d = f();
+      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 u(d = !0) {
-      const f = a.step.toString().split("."), S = f.length === 2 ? f[1].length : 0;
-      return parseFloat(d ? (a.modelValue + a.step).toFixed(S) : (a.modelValue - a.step).toFixed(S));
+    function c() {
+      n.value = !u();
     }
-    function y() {
-      return c() && v();
+    function f(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 c() {
-      return !a.max || a.modelValue <= a.max;
+    function u() {
+      return v() && i();
     }
     function v() {
-      return a.min <= a.modelValue;
+      return !o.max || o.modelValue <= o.max;
     }
-    const i = {
+    function i() {
+      return o.min <= o.modelValue;
+    }
+    const y = {
       onInput: (d) => {
-        l("update:modelValue", +d.target.value || 0), o.value = !1;
+        l("update:modelValue", +d.target.value || 0), n.value = !1;
+      },
+      onFocus: () => {
+        r.value = !0;
       },
       onBlur: () => {
-        n();
+        r.value = !1, c();
       }
     };
     return t({
-      props: a
-    }), (d, f) => (m(), p("div", kt, [
-      e.label ? (m(), P(_(H), {
+      props: o
+    }), (d, j) => (m(), p("div", Bt, [
+      e.label ? (m(), q(_(N), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -313,95 +370,101 @@ const pe = /* @__PURE__ */ V(St, [["__scopeId", "data-v-d6496829"]]), He = (e) =
         size: e.labelSize
       }, {
         default: L(() => [
-          b(d.$slots, "default", {}, () => [
-            T(O(e.label), 1)
+          g(d.$slots, "default", {}, () => [
+            J(I(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"])) : w("", !0),
-      h("div", jt, [
+      h("div", {
+        class: k(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
+      }, [
         h("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
-          onClick: r
-        }, xt, 8, $t),
-        h("input", K({
-          id: e.id,
-          ref: "input",
-          type: "number",
-          class: { "joy-counter__invalid": e.invalid || o.value },
-          min: e.min,
-          max: e.max,
-          "aria-invalid": e.invalid || o.value,
-          name: e.name,
-          required: e.required,
-          step: "any",
-          value: e.modelValue
-        }, d.$attrs, {
-          onInput: f[0] || (f[0] = //@ts-ignore
-          (...S) => i.onInput && i.onInput(...S)),
-          onBlur: f[1] || (f[1] = //@ts-ignore
-          (...S) => i.onBlur && i.onBlur(...S))
-        }), null, 16, It),
+          onClick: s
+        }, Ct, 8, Lt),
+        h("div", Pt, [
+          h("input", Q({
+            id: e.id,
+            ref: "input",
+            type: "number",
+            class: { "joy-counter__invalid": e.invalid || n.value },
+            min: e.min,
+            max: e.max,
+            "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)),
+            onBlur: j[1] || (j[1] = //@ts-ignore
+            (...S) => y.onBlur && y.onBlur(...S)),
+            onFocus: j[2] || (j[2] = //@ts-ignore
+            (...S) => y.onFocus && y.onFocus(...S))
+          }), null, 16, Jt)
+        ]),
         h("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: s
-        }, Et, 8, Ot),
-        e.invalid && e.errorMessage ? (m(), p("div", Bt, [
-          ce(_(Ye), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+          onClick: a
+        }, zt, 8, qt),
+        e.invalid && e.errorMessage ? (m(), p("div", At, [
+          fe(_(et), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
         ])) : w("", !0)
-      ])
+      ], 2)
     ]));
   }
 });
-const Pt = /* @__PURE__ */ V(Ct, [["__scopeId", "data-v-01418e7e"]]);
-var ge;
-const he = typeof window < "u", We = (e) => typeof e == "string", z = () => {
-}, X = he && ((ge = window == null ? void 0 : window.navigator) == null ? void 0 : ge.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-function B(e) {
+const Dt = /* @__PURE__ */ V(Ft, [["__scopeId", "data-v-0d1ab3f2"]]);
+var _e;
+const U = typeof window < "u", Ue = (e) => typeof e == "string", z = () => {
+}, ee = U && ((_e = window == null ? void 0 : window.navigator) == null ? void 0 : _e.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function C(e) {
   return typeof e == "function" ? e() : _(e);
 }
-function Fe(e, t) {
-  function l(...a) {
-    return new Promise((o, r) => {
-      Promise.resolve(e(() => t.apply(this, a), { fn: t, thisArg: this, args: a })).then(o).catch(r);
+function Ge(e, t) {
+  function l(...o) {
+    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 qt(e, t = {}) {
-  let l, a, o = z;
-  const r = (n) => {
-    clearTimeout(n), o(), o = z;
+function Rt(e, t = {}) {
+  let l, o, n = z;
+  const r = (a) => {
+    clearTimeout(a), n(), n = z;
   };
-  return (n) => {
-    const u = B(e), y = B(t.maxWait);
-    return l && r(l), u <= 0 || y !== void 0 && y <= 0 ? (a && (r(a), a = null), Promise.resolve(n())) : new Promise((c, v) => {
-      o = t.rejectOnCancel ? v : c, y && !a && (a = setTimeout(() => {
-        l && r(l), a = null, c(n());
-      }, y)), l = setTimeout(() => {
-        a && r(a), a = null, c(n());
-      }, u);
+  return (a) => {
+    const c = C(e), f = C(t.maxWait);
+    return l && r(l), c <= 0 || f !== void 0 && f <= 0 ? (o && (r(o), o = null), Promise.resolve(a())) : new Promise((u, v) => {
+      n = t.rejectOnCancel ? v : u, f && !o && (o = setTimeout(() => {
+        l && r(l), o = null, u(a());
+      }, f)), l = setTimeout(() => {
+        o && r(o), o = null, u(a());
+      }, c);
     });
   };
 }
-function Jt(e, t = !0, l = !0, a = !1) {
-  let o = 0, r, s = !0, n = z, u;
-  const y = () => {
-    r && (clearTimeout(r), r = void 0, n(), n = z);
+function Mt(e, t = !0, l = !0, o = !1) {
+  let n = 0, r, s = !0, a = z, c;
+  const f = () => {
+    r && (clearTimeout(r), r = void 0, a(), a = z);
   };
   return (v) => {
-    const i = B(e), d = Date.now() - o, f = () => u = v();
-    return y(), i <= 0 ? (o = Date.now(), f()) : (d > i && (l || !s) ? (o = Date.now(), f()) : t && (u = new Promise((S, j) => {
-      n = a ? j : S, r = setTimeout(() => {
-        o = Date.now(), s = !0, S(f()), y();
-      }, Math.max(0, i - d));
-    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, u);
+    const i = C(e), y = Date.now() - n, d = () => c = v();
+    return f(), i <= 0 ? (n = Date.now(), d()) : (y > 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()), f();
+      }, Math.max(0, i - y));
+    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, c);
   };
 }
 const R = {
@@ -409,97 +472,140 @@ const R = {
   updated: "updated",
   unmounted: "unmounted"
 };
-function Tt(e) {
+function Nt(e) {
   return e;
 }
-function Q(e) {
-  return et() ? (tt(e), !0) : !1;
+function G(e) {
+  return ot() ? (nt(e), !0) : !1;
 }
-function zt(e, t = 200, l = {}) {
-  return Fe(qt(t, l), e);
+function Ht(e, t = 200, l = {}) {
+  return Ge(Rt(t, l), e);
 }
-function At(e, t = 200, l = !1, a = !0, o = !1) {
-  return Fe(Jt(t, l, a, o), e);
+function Wt(e, t = 200, l = !1, o = !0, n = !1) {
+  return Ge(Mt(t, l, o, n), e);
 }
-function Dt(e) {
-  return typeof e == "function" ? I(e) : g(e);
+function Ut(e) {
+  return typeof e == "function" ? x(e) : b(e);
 }
-function Mt(e, t = !0) {
-  lt() ? W(e) : t ? e() : Me(e);
+function Ke(e, t = !0) {
+  at() ? Z(e) : t ? e() : Me(e);
 }
-function U(e) {
+function H(e) {
   var t;
-  const l = B(e);
+  const l = C(e);
   return (t = l == null ? void 0 : l.$el) != null ? t : l;
 }
-const Ue = he ? window : void 0;
-function oe(...e) {
-  let t, l, a, o;
-  if (We(e[0]) || Array.isArray(e[0]) ? ([l, a, o] = e, t = Ue) : [t, l, a, o] = e, !t)
+const be = U ? window : void 0;
+U && window.document;
+U && window.navigator;
+U && window.location;
+function ae(...e) {
+  let t, l, o, n;
+  if (Ue(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = be) : [t, l, o, n] = e, !t)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
+  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
-    r.forEach((c) => c()), r.length = 0;
-  }, n = (c, v, i, d) => (c.addEventListener(v, i, d), () => c.removeEventListener(v, i, d)), u = q(() => [U(t), B(o)], ([c, v]) => {
-    s(), c && r.push(...l.flatMap((i) => a.map((d) => n(c, i, d, v))));
-  }, { immediate: !0, flush: "post" }), y = () => {
-    u(), s();
+    r.forEach((u) => u()), r.length = 0;
+  }, a = (u, v, i, y) => (u.addEventListener(v, i, y), () => u.removeEventListener(v, i, y)), c = B(() => [H(t), C(n)], ([u, v]) => {
+    s(), u && r.push(...l.flatMap((i) => o.map((y) => a(u, i, y, v))));
+  }, { immediate: !0, flush: "post" }), f = () => {
+    c(), s();
   };
-  return Q(y), y;
+  return G(f), f;
 }
-let _e = !1;
-function Rt(e, t, l = {}) {
-  const { window: a = Ue, ignore: o = [], capture: r = !0, detectIframe: s = !1 } = l;
-  if (!a)
+let we = !1;
+function Gt(e, t, l = {}) {
+  const { window: o = be, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+  if (!o)
     return;
-  X && !_e && (_e = !0, Array.from(a.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let n = !0;
-  const u = (i) => o.some((d) => {
-    if (typeof d == "string")
-      return Array.from(a.document.querySelectorAll(d)).some((f) => f === i.target || i.composedPath().includes(f));
+  ee && !we && (we = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
+  let a = !0;
+  const c = (i) => n.some((y) => {
+    if (typeof y == "string")
+      return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
     {
-      const f = U(d);
-      return f && (i.target === f || i.composedPath().includes(f));
+      const d = H(y);
+      return d && (i.target === d || i.composedPath().includes(d));
     }
-  }), c = [
-    oe(a, "click", (i) => {
-      const d = U(e);
-      if (!(!d || d === i.target || i.composedPath().includes(d))) {
-        if (i.detail === 0 && (n = !u(i)), !n) {
-          n = !0;
+  }), u = [
+    ae(o, "click", (i) => {
+      const y = H(e);
+      if (!(!y || y === i.target || i.composedPath().includes(y))) {
+        if (i.detail === 0 && (a = !c(i)), !a) {
+          a = !0;
           return;
         }
         t(i);
       }
     }, { passive: !0, capture: r }),
-    oe(a, "pointerdown", (i) => {
-      const d = U(e);
-      d && (n = !i.composedPath().includes(d) && !u(i));
+    ae(o, "pointerdown", (i) => {
+      const y = H(e);
+      y && (a = !i.composedPath().includes(y) && !c(i));
     }, { passive: !0 }),
-    s && oe(a, "blur", (i) => {
-      var d;
-      const f = U(e);
-      ((d = a.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(f != null && f.contains(a.document.activeElement)) && t(i);
+    s && ae(o, "blur", (i) => {
+      var y;
+      const d = H(e);
+      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
     })
   ].filter(Boolean);
-  return () => c.forEach((i) => i());
+  return () => u.forEach((i) => i());
+}
+function Kt(e, t = !1) {
+  const l = b(), o = () => l.value = Boolean(e());
+  return o(), Ke(o, t), l;
 }
-const ne = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ie = "__vueuse_ssr_handlers__";
-ne[ie] = ne[ie] || {};
-ne[ie];
-var we;
+const ie = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, re = "__vueuse_ssr_handlers__";
+ie[re] = ie[re] || {};
+ie[re];
+var Se = Object.getOwnPropertySymbols, Qt = Object.prototype.hasOwnProperty, Zt = Object.prototype.propertyIsEnumerable, Yt = (e, t) => {
+  var l = {};
+  for (var o in e)
+    Qt.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
+  if (e != null && Se)
+    for (var o of Se(e))
+      t.indexOf(o) < 0 && Zt.call(e, o) && (l[o] = e[o]);
+  return l;
+};
+function Xt(e, t, l = {}) {
+  const o = l, { window: n = be } = o, r = Yt(o, ["window"]);
+  let s;
+  const a = Kt(() => n && "ResizeObserver" in n), c = () => {
+    s && (s.disconnect(), s = void 0);
+  }, f = B(() => H(e), (v) => {
+    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
+  }, { immediate: !0, flush: "post" }), u = () => {
+    c(), f();
+  };
+  return G(u), {
+    isSupported: a,
+    stop: u
+  };
+}
+var je;
 (function(e) {
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
-})(we || (we = {}));
-var Nt = Object.defineProperty, Se = Object.getOwnPropertySymbols, Ht = Object.prototype.hasOwnProperty, Wt = Object.prototype.propertyIsEnumerable, ke = (e, t, l) => t in e ? Nt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Ft = (e, t) => {
+})(je || (je = {}));
+function el(e) {
+  const t = b(e == null ? void 0 : e.element), l = b(e == null ? void 0 : e.input);
+  function o() {
+    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 B([l, t], o, { immediate: !0 }), Xt(t, () => o()), e != null && e.watch && B(e.watch, o, { immediate: !0, deep: !0 }), {
+    textarea: t,
+    input: l,
+    triggerResize: o
+  };
+}
+var tl = Object.defineProperty, ke = Object.getOwnPropertySymbols, ll = Object.prototype.hasOwnProperty, ol = Object.prototype.propertyIsEnumerable, $e = (e, t, l) => t in e ? tl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, nl = (e, t) => {
   for (var l in t || (t = {}))
-    Ht.call(t, l) && ke(e, l, t[l]);
-  if (Se)
-    for (var l of Se(t))
-      Wt.call(t, l) && ke(e, l, t[l]);
+    ll.call(t, l) && $e(e, l, t[l]);
+  if (ke)
+    for (var l of ke(t))
+      ol.call(t, l) && $e(e, l, t[l]);
   return e;
 };
-const Ut = {
+const al = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -525,209 +631,209 @@ const Ut = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-Ft({
-  linear: Tt
-}, Ut);
-const Gt = /* @__PURE__ */ $({
+nl({
+  linear: Nt
+}, al);
+const il = /* @__PURE__ */ $({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(e, { slots: t, emit: l }) {
-    const a = g();
-    return Rt(a, (o) => {
-      l("trigger", o);
+    const o = b();
+    return Gt(o, (n) => {
+      l("trigger", n);
     }, e.options), () => {
       if (t.default)
-        return at(e.as || "div", { ref: a }, t.default());
+        return it(e.as || "div", { ref: o }, t.default());
     };
   }
 });
-function C(e) {
+function P(e) {
   var t;
-  const l = B(e);
+  const l = C(e);
   return (t = l == null ? void 0 : l.$el) != null ? t : l;
 }
-const N = he ? window : void 0;
+const M = U ? window : void 0;
 function A(...e) {
-  let t, l, a, o;
-  if (We(e[0]) || Array.isArray(e[0]) ? ([l, a, o] = e, t = N) : [t, l, a, o] = e, !t)
+  let t, l, o, n;
+  if (Ue(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = M) : [t, l, o, n] = e, !t)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
+  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
-    r.forEach((c) => c()), r.length = 0;
-  }, n = (c, v, i, d) => (c.addEventListener(v, i, d), () => c.removeEventListener(v, i, d)), u = q(() => [C(t), B(o)], ([c, v]) => {
-    s(), c && r.push(...l.flatMap((i) => a.map((d) => n(c, i, d, v))));
-  }, { immediate: !0, flush: "post" }), y = () => {
-    u(), s();
+    r.forEach((u) => u()), r.length = 0;
+  }, a = (u, v, i, y) => (u.addEventListener(v, i, y), () => u.removeEventListener(v, i, y)), c = B(() => [P(t), C(n)], ([u, v]) => {
+    s(), u && r.push(...l.flatMap((i) => o.map((y) => a(u, i, y, v))));
+  }, { immediate: !0, flush: "post" }), f = () => {
+    c(), s();
   };
-  return Q(y), y;
+  return G(f), f;
 }
-let je = !1;
-function $e(e, t, l = {}) {
-  const { window: a = N, ignore: o = [], capture: r = !0, detectIframe: s = !1 } = l;
-  if (!a)
+let Ve = !1;
+function xe(e, t, l = {}) {
+  const { window: o = M, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+  if (!o)
     return;
-  X && !je && (je = !0, Array.from(a.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let n = !0;
-  const u = (i) => o.some((d) => {
-    if (typeof d == "string")
-      return Array.from(a.document.querySelectorAll(d)).some((f) => f === i.target || i.composedPath().includes(f));
+  ee && !Ve && (Ve = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
+  let a = !0;
+  const c = (i) => n.some((y) => {
+    if (typeof y == "string")
+      return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
     {
-      const f = C(d);
-      return f && (i.target === f || i.composedPath().includes(f));
+      const d = P(y);
+      return d && (i.target === d || i.composedPath().includes(d));
     }
-  }), c = [
-    A(a, "click", (i) => {
-      const d = C(e);
-      if (!(!d || d === i.target || i.composedPath().includes(d))) {
-        if (i.detail === 0 && (n = !u(i)), !n) {
-          n = !0;
+  }), u = [
+    A(o, "click", (i) => {
+      const y = P(e);
+      if (!(!y || y === i.target || i.composedPath().includes(y))) {
+        if (i.detail === 0 && (a = !c(i)), !a) {
+          a = !0;
           return;
         }
         t(i);
       }
     }, { passive: !0, capture: r }),
-    A(a, "pointerdown", (i) => {
-      const d = C(e);
-      d && (n = !i.composedPath().includes(d) && !u(i));
+    A(o, "pointerdown", (i) => {
+      const y = P(e);
+      y && (a = !i.composedPath().includes(y) && !c(i));
     }, { passive: !0 }),
-    s && A(a, "blur", (i) => {
-      var d;
-      const f = C(e);
-      ((d = a.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(f != null && f.contains(a.document.activeElement)) && t(i);
+    s && A(o, "blur", (i) => {
+      var y;
+      const d = P(e);
+      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
     })
   ].filter(Boolean);
-  return () => c.forEach((i) => i());
+  return () => u.forEach((i) => i());
 }
 R.mounted + "", R.unmounted + "";
-const Kt = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
-function Ve(...e) {
-  let t, l, a = {};
-  e.length === 3 ? (t = e[0], l = e[1], a = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], a = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
-  const { target: o = N, eventName: r = "keydown", passive: s = !1 } = a, n = Kt(t);
-  return A(o, r, (y) => {
-    n(y) && l(y);
+const rl = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+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: n = M, eventName: r = "keydown", passive: s = !1 } = o, a = rl(t);
+  return A(n, r, (f) => {
+    a(f) && l(f);
   }, s);
 }
-var Qt = Object.defineProperty, xe = Object.getOwnPropertySymbols, Zt = Object.prototype.hasOwnProperty, Yt = Object.prototype.propertyIsEnumerable, Ie = (e, t, l) => t in e ? Qt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Xt = (e, t) => {
+var sl = Object.defineProperty, Ie = Object.getOwnPropertySymbols, ul = Object.prototype.hasOwnProperty, dl = Object.prototype.propertyIsEnumerable, Be = (e, t, l) => t in e ? sl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, cl = (e, t) => {
   for (var l in t || (t = {}))
-    Zt.call(t, l) && Ie(e, l, t[l]);
-  if (xe)
-    for (var l of xe(t))
-      Yt.call(t, l) && Ie(e, l, t[l]);
+    ul.call(t, l) && Be(e, l, t[l]);
+  if (Ie)
+    for (var l of Ie(t))
+      dl.call(t, l) && Be(e, l, t[l]);
   return e;
 };
 R.mounted + "";
-const el = 500;
-function Oe(e, t, l) {
-  var a, o;
-  const r = I(() => C(e));
+const fl = 500;
+function Le(e, t, l) {
+  var o, n;
+  const r = x(() => P(e));
   let s;
-  function n() {
+  function a() {
     s && (clearTimeout(s), s = void 0);
   }
-  function u(c) {
-    var v, i, d, f;
-    (v = l == null ? void 0 : l.modifiers) != null && v.self && c.target !== r.value || (n(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && c.preventDefault(), (d = l == null ? void 0 : l.modifiers) != null && d.stop && c.stopPropagation(), s = setTimeout(() => t(c), (f = l == null ? void 0 : l.delay) != null ? f : el));
+  function c(u) {
+    var v, i, y, 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(), (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 : fl));
   }
-  const y = {
-    capture: (a = l == null ? void 0 : l.modifiers) == null ? void 0 : a.capture,
-    once: (o = l == null ? void 0 : l.modifiers) == null ? void 0 : o.once
+  const f = {
+    capture: (o = l == null ? void 0 : l.modifiers) == null ? void 0 : o.capture,
+    once: (n = l == null ? void 0 : l.modifiers) == null ? void 0 : n.once
   };
-  A(r, "pointerdown", u, y), A(r, "pointerup", n, y), A(r, "pointerleave", n, y);
+  A(r, "pointerdown", c, f), A(r, "pointerup", a, f), A(r, "pointerleave", a, f);
 }
 R.mounted + "";
-const re = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, se = "__vueuse_ssr_handlers__";
-re[se] = re[se] || {};
-re[se];
-function Ge(e, t = !1) {
-  const l = g(), a = () => l.value = Boolean(e());
-  return a(), Mt(a, t), l;
+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 Qe(e, t = !1) {
+  const l = b(), o = () => l.value = Boolean(e());
+  return o(), Ke(o, t), l;
 }
-function tl(e, t = {}) {
-  const l = t ? t.delayEnter : 0, a = t ? t.delayLeave : 0, o = g(!1);
+function yl(e, t = {}) {
+  const l = t ? t.delayEnter : 0, o = t ? t.delayLeave : 0, n = b(!1);
   let r;
-  const s = (n) => {
-    const u = n ? l : a;
-    r && (clearTimeout(r), r = void 0), u ? r = setTimeout(() => o.value = n, u) : o.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 })), o;
+  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), n;
 }
 R.mounted + "";
-var Le = Object.getOwnPropertySymbols, ll = Object.prototype.hasOwnProperty, al = Object.prototype.propertyIsEnumerable, ol = (e, t) => {
+var Ee = Object.getOwnPropertySymbols, vl = Object.prototype.hasOwnProperty, ml = Object.prototype.propertyIsEnumerable, pl = (e, t) => {
   var l = {};
-  for (var a in e)
-    ll.call(e, a) && t.indexOf(a) < 0 && (l[a] = e[a]);
-  if (e != null && Le)
-    for (var a of Le(e))
-      t.indexOf(a) < 0 && al.call(e, a) && (l[a] = e[a]);
+  for (var o in e)
+    vl.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
+  if (e != null && Ee)
+    for (var o of Ee(e))
+      t.indexOf(o) < 0 && ml.call(e, o) && (l[o] = e[o]);
   return l;
 };
-function nl(e, t, l = {}) {
-  const a = l, { window: o = N } = a, r = ol(a, ["window"]);
+function hl(e, t, l = {}) {
+  const o = l, { window: n = M } = o, r = pl(o, ["window"]);
   let s;
-  const n = Ge(() => o && "ResizeObserver" in o), u = () => {
+  const a = Qe(() => n && "ResizeObserver" in n), c = () => {
     s && (s.disconnect(), s = void 0);
-  }, y = q(() => C(e), (v) => {
-    u(), n.value && o && v && (s = new ResizeObserver(t), s.observe(v, r));
-  }, { immediate: !0, flush: "post" }), c = () => {
-    u(), y();
+  }, f = B(() => P(e), (v) => {
+    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
+  }, { immediate: !0, flush: "post" }), u = () => {
+    c(), f();
   };
-  return Q(c), {
-    isSupported: n,
-    stop: c
+  return G(u), {
+    isSupported: a,
+    stop: u
   };
 }
-function il(e, t = { width: 0, height: 0 }, l = {}) {
-  const { window: a = N, box: o = "content-box" } = l, r = I(() => {
-    var u, y;
-    return (y = (u = C(e)) == null ? void 0 : u.namespaceURI) == null ? void 0 : y.includes("svg");
-  }), s = g(t.width), n = g(t.height);
-  return nl(e, ([u]) => {
-    const y = o === "border-box" ? u.borderBoxSize : o === "content-box" ? u.contentBoxSize : u.devicePixelContentBoxSize;
-    if (a && r.value) {
-      const c = C(e);
-      if (c) {
-        const v = a.getComputedStyle(c);
-        s.value = parseFloat(v.width), n.value = parseFloat(v.height);
+function bl(e, t = { width: 0, height: 0 }, l = {}) {
+  const { window: o = M, box: n = "content-box" } = l, r = x(() => {
+    var c, f;
+    return (f = (c = P(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : f.includes("svg");
+  }), s = b(t.width), a = b(t.height);
+  return hl(e, ([c]) => {
+    const f = n === "border-box" ? c.borderBoxSize : n === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
+    if (o && r.value) {
+      const u = P(e);
+      if (u) {
+        const v = o.getComputedStyle(u);
+        s.value = parseFloat(v.width), a.value = parseFloat(v.height);
       }
-    } else if (y) {
-      const c = Array.isArray(y) ? y : [y];
-      s.value = c.reduce((v, { inlineSize: i }) => v + i, 0), n.value = c.reduce((v, { blockSize: i }) => v + i, 0);
+    } else if (f) {
+      const u = Array.isArray(f) ? f : [f];
+      s.value = u.reduce((v, { inlineSize: i }) => v + i, 0), a.value = u.reduce((v, { blockSize: i }) => v + i, 0);
     } else
-      s.value = u.contentRect.width, n.value = u.contentRect.height;
-  }, l), q(() => C(e), (u) => {
-    s.value = u ? t.width : 0, n.value = u ? t.height : 0;
+      s.value = c.contentRect.width, a.value = c.contentRect.height;
+  }, l), B(() => P(e), (c) => {
+    s.value = c ? t.width : 0, a.value = c ? t.height : 0;
   }), {
     width: s,
-    height: n
+    height: a
   };
 }
 R.mounted + "";
-function Ee(e, { window: t = N, scrollTarget: l } = {}) {
-  const a = g(!1), o = () => {
+function Ce(e, { window: t = M, scrollTarget: l } = {}) {
+  const o = b(!1), n = () => {
     if (!t)
       return;
-    const r = t.document, s = C(e);
+    const r = t.document, s = P(e);
     if (!s)
-      a.value = !1;
+      o.value = !1;
     else {
-      const n = s.getBoundingClientRect();
-      a.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 q(() => C(e), () => o(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", o, {
+  return B(() => P(e), () => n(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", n, {
     capture: !1,
     passive: !0
-  }), a;
+  }), o;
 }
 R.mounted + "";
-const Be = 1;
-function ue(e, t = {}) {
+const Pe = 1;
+function de(e, t = {}) {
   const {
     throttle: l = 0,
-    idle: a = 200,
-    onStop: o = z,
+    idle: o = 200,
+    onStop: n = z,
     onScroll: r = z,
     offset: s = {
       left: 0,
@@ -735,191 +841,191 @@ function ue(e, t = {}) {
       top: 0,
       bottom: 0
     },
-    eventListenerOptions: n = {
+    eventListenerOptions: a = {
       capture: !1,
       passive: !0
     },
-    behavior: u = "auto"
-  } = t, y = g(0), c = g(0), v = I({
+    behavior: c = "auto"
+  } = t, f = b(0), u = b(0), v = x({
     get() {
-      return y.value;
+      return f.value;
     },
-    set(x) {
-      d(x, void 0);
+    set(O) {
+      y(O, void 0);
     }
-  }), i = I({
+  }), i = x({
     get() {
-      return c.value;
+      return u.value;
     },
-    set(x) {
-      d(void 0, x);
+    set(O) {
+      y(void 0, O);
     }
   });
-  function d(x, J) {
-    var M, D, be;
-    const ae = B(e);
-    ae && ((be = ae instanceof Document ? document.body : ae) == null || be.scrollTo({
-      top: (M = B(J)) != null ? M : i.value,
-      left: (D = B(x)) != null ? D : v.value,
-      behavior: B(u)
+  function y(O, T) {
+    var D, F, ge;
+    const ne = C(e);
+    ne && ((ge = ne instanceof Document ? document.body : ne) == null || ge.scrollTo({
+      top: (D = C(T)) != null ? D : i.value,
+      left: (F = C(O)) != null ? F : v.value,
+      behavior: C(c)
     }));
   }
-  const f = g(!1), S = Y({
+  const d = b(!1), j = X({
     left: !0,
     right: !1,
     top: !0,
     bottom: !1
-  }), j = Y({
+  }), S = X({
     left: !1,
     right: !1,
     top: !1,
     bottom: !1
-  }), Z = (x) => {
-    f.value && (f.value = !1, j.left = !1, j.right = !1, j.top = !1, j.bottom = !1, o(x));
-  }, le = zt(Z, l + a), E = (x) => {
-    const J = x.target === document ? x.target.documentElement : x.target, M = J.scrollLeft;
-    j.left = M < y.value, j.right = M > c.value, S.left = M <= 0 + (s.left || 0), S.right = M + J.clientWidth >= J.scrollWidth - (s.right || 0) - Be, y.value = M;
-    let D = J.scrollTop;
-    x.target === document && !D && (D = document.body.scrollTop), j.top = D < c.value, j.bottom = D > c.value, S.top = D <= 0 + (s.top || 0), S.bottom = D + J.clientHeight >= J.scrollHeight - (s.bottom || 0) - Be, c.value = D, f.value = !0, le(x), r(x);
+  }), Y = (O) => {
+    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, n(O));
+  }, oe = Ht(Y, l + o), E = (O) => {
+    const T = O.target === document ? O.target.documentElement : O.target, D = T.scrollLeft;
+    S.left = D < f.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + T.clientWidth >= T.scrollWidth - (s.right || 0) - Pe, f.value = D;
+    let F = T.scrollTop;
+    O.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(O), r(O);
   };
-  return A(e, "scroll", l ? At(E, l, !0, !1) : E, n), A(e, "scrollend", Z, n), {
+  return A(e, "scroll", l ? Wt(E, l, !0, !1) : E, a), A(e, "scrollend", Y, a), {
     x: v,
     y: i,
-    isScrolling: f,
-    arrivedState: S,
-    directions: j
+    isScrolling: d,
+    arrivedState: j,
+    directions: S
   };
 }
-var rl = Object.defineProperty, sl = Object.defineProperties, ul = Object.getOwnPropertyDescriptors, Ce = Object.getOwnPropertySymbols, dl = Object.prototype.hasOwnProperty, cl = Object.prototype.propertyIsEnumerable, Pe = (e, t, l) => t in e ? rl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, qe = (e, t) => {
+var gl = Object.defineProperty, _l = Object.defineProperties, wl = Object.getOwnPropertyDescriptors, Je = Object.getOwnPropertySymbols, Sl = Object.prototype.hasOwnProperty, jl = Object.prototype.propertyIsEnumerable, qe = (e, t, l) => t in e ? gl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Te = (e, t) => {
   for (var l in t || (t = {}))
-    dl.call(t, l) && Pe(e, l, t[l]);
-  if (Ce)
-    for (var l of Ce(t))
-      cl.call(t, l) && Pe(e, l, t[l]);
+    Sl.call(t, l) && qe(e, l, t[l]);
+  if (Je)
+    for (var l of Je(t))
+      jl.call(t, l) && qe(e, l, t[l]);
   return e;
-}, fl = (e, t) => sl(e, ul(t));
-function Je(e, t, l = {}) {
-  var a, o;
-  const r = (a = l.direction) != null ? a : "bottom", s = Y(ue(e, fl(qe({}, l), {
-    offset: qe({
-      [r]: (o = l.distance) != null ? o : 0
+}, kl = (e, t) => _l(e, wl(t));
+function ze(e, t, l = {}) {
+  var o, n;
+  const r = (o = l.direction) != null ? o : "bottom", s = X(de(e, kl(Te({}, l), {
+    offset: Te({
+      [r]: (n = l.distance) != null ? n : 0
     }, l.offset)
   })));
-  q(() => s.arrivedState[r], async (n) => {
-    var u, y;
-    if (n) {
-      const c = B(e), v = {
-        height: (u = c == null ? void 0 : c.scrollHeight) != null ? u : 0,
-        width: (y = c == null ? void 0 : c.scrollWidth) != null ? y : 0
+  B(() => s.arrivedState[r], async (a) => {
+    var c, f;
+    if (a) {
+      const u = C(e), v = {
+        height: (c = u == null ? void 0 : u.scrollHeight) != null ? c : 0,
+        width: (f = u == null ? void 0 : u.scrollWidth) != null ? f : 0
       };
-      await t(s), l.preserveScrollPosition && c && Me(() => {
-        c.scrollTo({
-          top: c.scrollHeight - v.height,
-          left: c.scrollWidth - v.width
+      await t(s), l.preserveScrollPosition && u && Me(() => {
+        u.scrollTo({
+          top: u.scrollHeight - v.height,
+          left: u.scrollWidth - v.width
         });
       });
     }
   });
 }
 R.mounted + "";
-function Te(e, t, l = {}) {
+function Ae(e, t, l = {}) {
   const {
-    root: a,
-    rootMargin: o = "0px",
+    root: o,
+    rootMargin: n = "0px",
     threshold: r = 0.1,
-    window: s = N
-  } = l, n = Ge(() => s && "IntersectionObserver" in s);
-  let u = z;
-  const y = n.value ? q(() => ({
-    el: C(e),
-    root: C(a)
+    window: s = M
+  } = l, a = Qe(() => s && "IntersectionObserver" in s);
+  let c = z;
+  const f = a.value ? B(() => ({
+    el: P(e),
+    root: P(o)
   }), ({ el: v, root: i }) => {
-    if (u(), !v)
+    if (c(), !v)
       return;
-    const d = new IntersectionObserver(t, {
+    const y = new IntersectionObserver(t, {
       root: i,
-      rootMargin: o,
+      rootMargin: n,
       threshold: r
     });
-    d.observe(v), u = () => {
-      d.disconnect(), u = z;
+    y.observe(v), c = () => {
+      y.disconnect(), c = z;
     };
-  }, { immediate: !0, flush: "post" }) : z, c = () => {
-    u(), y();
+  }, { immediate: !0, flush: "post" }) : z, u = () => {
+    c(), f();
   };
-  return Q(c), {
-    isSupported: n,
-    stop: c
+  return G(u), {
+    isSupported: a,
+    stop: u
   };
 }
 R.mounted + "";
-var yl = Object.defineProperty, ml = Object.defineProperties, vl = Object.getOwnPropertyDescriptors, ze = Object.getOwnPropertySymbols, pl = Object.prototype.hasOwnProperty, hl = Object.prototype.propertyIsEnumerable, Ae = (e, t, l) => t in e ? yl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, bl = (e, t) => {
+var $l = Object.defineProperty, Vl = Object.defineProperties, xl = Object.getOwnPropertyDescriptors, Fe = Object.getOwnPropertySymbols, Ol = Object.prototype.hasOwnProperty, Il = Object.prototype.propertyIsEnumerable, De = (e, t, l) => t in e ? $l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Bl = (e, t) => {
   for (var l in t || (t = {}))
-    pl.call(t, l) && Ae(e, l, t[l]);
-  if (ze)
-    for (var l of ze(t))
-      hl.call(t, l) && Ae(e, l, t[l]);
+    Ol.call(t, l) && De(e, l, t[l]);
+  if (Fe)
+    for (var l of Fe(t))
+      Il.call(t, l) && De(e, l, t[l]);
   return e;
-}, gl = (e, t) => ml(e, vl(t));
+}, Ll = (e, t) => Vl(e, xl(t));
 R.mounted + "";
-function Ke(e) {
+function Ze(e) {
   const t = window.getComputedStyle(e);
   if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && e.clientHeight < e.scrollHeight || t.overflowY === "auto" && e.clientWidth < e.scrollWidth)
     return !0;
   {
     const l = e.parentNode;
-    return !l || l.tagName === "BODY" ? !1 : Ke(l);
+    return !l || l.tagName === "BODY" ? !1 : Ze(l);
   }
 }
-function _l(e) {
+function El(e) {
   const t = e || window.event, l = t.target;
-  return Ke(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+  return Ze(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function wl(e, t = !1) {
-  const l = g(t);
-  let a = null, o;
-  q(Dt(e), (n) => {
-    if (n) {
-      const u = n;
-      o = u.style.overflow, l.value && (u.style.overflow = "hidden");
+function Cl(e, t = !1) {
+  const l = b(t);
+  let o = null, n;
+  B(Ut(e), (a) => {
+    if (a) {
+      const c = a;
+      n = c.style.overflow, l.value && (c.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const r = () => {
-    const n = B(e);
-    !n || l.value || (X && (a = A(n, "touchmove", (u) => {
-      _l(u);
-    }, { passive: !1 })), n.style.overflow = "hidden", l.value = !0);
+    const a = C(e);
+    !a || l.value || (ee && (o = A(a, "touchmove", (c) => {
+      El(c);
+    }, { passive: !1 })), a.style.overflow = "hidden", l.value = !0);
   }, s = () => {
-    const n = B(e);
-    !n || !l.value || (X && (a == null || a()), n.style.overflow = o, l.value = !1);
+    const a = C(e);
+    !a || !l.value || (ee && (o == null || o()), a.style.overflow = n, l.value = !1);
   };
-  return Q(s), I({
+  return G(s), x({
     get() {
       return l.value;
     },
-    set(n) {
-      n ? r() : s();
+    set(a) {
+      a ? r() : s();
     }
   });
 }
-const Sl = () => {
+const Pl = () => {
   let e = !1;
-  const t = g(!1);
-  return (l, a) => {
-    if (t.value = a.value, e)
+  const t = b(!1);
+  return (l, o) => {
+    if (t.value = o.value, e)
       return;
     e = !0;
-    const o = wl(l, a.value);
-    q(t, (r) => o.value = r);
+    const n = Cl(l, o.value);
+    B(t, (r) => n.value = r);
   };
 };
-Sl();
-const Qe = ["medium", "small"], kl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataLabel", "onClick"], jl = {
+Pl();
+const Ye = ["medium", "small"], Jl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataLabel", "onClick"], ql = {
   key: 0,
   class: "joy-dropdown-list__footer"
-}, $l = /* @__PURE__ */ $({
+}, Tl = /* @__PURE__ */ $({
   __name: "VJoyDropdownList",
   props: {
     options: {
@@ -935,7 +1041,7 @@ const Qe = ["medium", "small"], kl = ["id", "tabindex", "aria-disabled", "aria-s
       type: String,
       default: "medium",
       validator(e) {
-        return Qe.includes(e);
+        return Ye.includes(e);
       }
     },
     modelValue: {
@@ -952,38 +1058,38 @@ const Qe = ["medium", "small"], kl = ["id", "tabindex", "aria-disabled", "aria-s
   },
   emits: ["update:modelValue", "close:dropdownList"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(), r = I(() => (i) => !a.modelValue && !i.value ? !1 : a.modelValue === i.label || a.modelValue === i.value);
+    const o = e, n = b(), r = x(() => (i) => !o.modelValue && !i.value ? !1 : o.modelValue === i.label || o.modelValue === i.value);
     function s(i) {
       i.disabled || l("update:modelValue", i.label);
     }
-    function n() {
+    function a() {
       var i;
-      return Array.from(((i = o.value) == null ? void 0 : i.querySelectorAll("li")) || []);
+      return Array.from(((i = n.value) == null ? void 0 : i.querySelectorAll("li")) || []);
     }
-    function u() {
-      const i = n().find((d) => d.getAttribute("aria-selected") === "true");
-      i && (i.focus(), o.value.scrollTo({
+    function c() {
+      const i = a().find((y) => y.getAttribute("aria-selected") === "true");
+      i && (i.focus(), n.value.scrollTo({
         top: i.offsetTop
       }));
     }
-    function y() {
-      return n().find((i) => i === document.activeElement);
+    function f() {
+      return a().find((i) => i === document.activeElement);
     }
-    function c(i) {
-      var d;
-      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), y() && ((d = o.value) != null && d.contains(y())))) {
-        const f = y();
-        if (!f)
+    function u(i) {
+      var y;
+      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), f() && ((y = n.value) != null && y.contains(f())))) {
+        const d = f();
+        if (!d)
           return;
-        if (f.querySelector("a"))
-          return f.querySelector("a").click();
-        l("update:modelValue", f.dataLabel);
+        if (d.querySelector("a"))
+          return d.querySelector("a").click();
+        l("update:modelValue", d.dataLabel);
       }
       if (i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
-        const f = n(), S = y();
-        let j = f.indexOf(S);
-        if (f.length) {
-          i.preventDefault(), i.key === "ArrowDown" ? j++ : i.key === "ArrowUp" ? j-- : i.key === "Home" ? j = 0 : i.key === "End" && (j = f.length - 1), j < 0 && (j = 0), j > f.length - 1 && (j = 0), v(f[j]);
+        const d = a(), j = f();
+        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 = 0), S > d.length - 1 && (S = 0), v(d[S]);
           return;
         }
       }
@@ -991,65 +1097,65 @@ const Qe = ["medium", "small"], kl = ["id", "tabindex", "aria-disabled", "aria-s
     function v(i) {
       i.focus();
     }
-    return W(() => {
-      window.addEventListener("keydown", c), u();
-    }), Re(() => {
-      window.removeEventListener("keydown", c);
+    return Z(() => {
+      window.addEventListener("keydown", u), c();
+    }), Ne(() => {
+      window.removeEventListener("keydown", u);
     }), t({
       isSelected: r
-    }), (i, d) => (m(), p("div", {
+    }), (i, y) => (m(), p("div", {
       class: "joy-dropdown-list",
-      style: G({ "max-width": `${e.width}px`, "max-height": `${e.height}px` })
+      style: K({ "max-width": `${e.width}px`, "max-height": `${e.height}px` })
     }, [
       h("ul", {
         ref_key: "listbox",
-        ref: o,
+        ref: n,
         role: "listbox",
         class: "joy-dropdown-list__items",
-        style: G({ "max-height": `${e.height}px` })
+        style: K({ "max-height": `${e.height}px` })
       }, [
-        (m(!0), p(fe, null, ye(e.options, (f) => (m(), p("li", {
-          id: f.id,
-          key: f.label,
-          style: G({ "max-width": `${e.width}px` }),
+        (m(!0), p(ye, null, ve(e.options, (d) => (m(), p("li", {
+          id: d.id,
+          key: d.label,
+          style: K({ "max-width": `${e.width}px` }),
           class: k([
             "joy-dropdown-list__item",
             `joy-dropdown-list__item--${e.size}`,
             {
-              "joy-dropdown-list__item--selected": _(r)(f),
-              "joy-dropdown-list__item--disabled": f.disabled
+              "joy-dropdown-list__item--selected": _(r)(d),
+              "joy-dropdown-list__item--disabled": d.disabled
             }
           ]),
-          tabindex: f.disabled ? void 0 : 0,
-          "aria-disabled": f.disabled,
-          "aria-selected": _(r)(f),
-          title: f.label,
-          "aria-label": f.label,
-          ".dataLabel": f.value || f.label,
+          tabindex: d.disabled ? void 0 : 0,
+          "aria-disabled": d.disabled,
+          "aria-selected": _(r)(d),
+          title: d.label,
+          "aria-label": d.label,
+          ".dataLabel": d.value || d.label,
           role: "option",
-          onClick: (S) => s(f)
+          onClick: (j) => s(d)
         }, [
-          b(i.$slots, "label", me(ve(f)), () => [
-            h("span", null, O(f.label), 1)
+          g(i.$slots, "label", me(pe(d)), () => [
+            h("span", null, I(d.label), 1)
           ], !0)
-        ], 14, kl))), 128))
+        ], 14, Jl))), 128))
       ], 4),
-      i.$slots.footer ? (m(), p("footer", jl, [
-        b(i.$slots, "footer", {}, void 0, !0)
+      i.$slots.footer ? (m(), p("footer", ql, [
+        g(i.$slots, "footer", {}, void 0, !0)
       ])) : w("", !0)
     ], 4));
   }
 });
-const Ze = /* @__PURE__ */ V($l, [["__scopeId", "data-v-5ab31622"]]);
-function Vl(e) {
+const Xe = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-5ab31622"]]);
+function zl(e) {
   const t = () => e();
-  W(() => {
+  Z(() => {
     window.addEventListener("resize", t);
-  }), Re(() => {
+  }), Ne(() => {
     window.removeEventListener("resize", t);
   });
 }
-const xl = /* @__PURE__ */ $({
+const Al = /* @__PURE__ */ $({
   __name: "VJoyDropdown",
   props: {
     /** DOM valid selector to give to Vue3 Teleport "to" property */
@@ -1097,7 +1203,7 @@ const xl = /* @__PURE__ */ $({
       type: String,
       default: "medium",
       validator(e) {
-        return Qe.includes(e);
+        return Ye.includes(e);
       }
     },
     modelValue: {
@@ -1128,87 +1234,87 @@ const xl = /* @__PURE__ */ $({
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(!1), r = g(null), s = g(), n = g(null), u = g(null), y = g(!1), c = {
+    const o = e, n = b(!1), r = b(null), s = b(), a = b(null), c = b(null), f = b(!1), u = {
       ignore: [s, ".joy-dropdown__list"]
     };
     let v = null;
-    const i = Y({
+    const i = X({
       left: "auto",
       top: "0px",
       right: "auto"
     });
-    function d() {
-      v && clearTimeout(v), y.value = !0, v = setTimeout(() => {
-        o.value = !1, y.value = !1;
+    function y() {
+      v && clearTimeout(v), f.value = !0, v = setTimeout(() => {
+        n.value = !1, f.value = !1;
       }, 300);
     }
-    function f(E) {
-      y.value = !1, v && clearTimeout(v), Z(), u.value = E.target, o.value = !0;
-    }
-    function S() {
-      d(), j();
+    function d(E) {
+      f.value = !1, v && clearTimeout(v), Y(), c.value = E.target, n.value = !0;
     }
     function j() {
-      u.value && u.value.focus();
+      y(), S();
+    }
+    function S() {
+      c.value && c.value.focus();
     }
-    function Z() {
-      const E = s.value.getBoundingClientRect(), x = document.documentElement.scrollTop + E.top, J = E.height, M = E.left, D = E.width;
-      a.justify === "left" ? i.left = M + "px" : i.left = M + D - parseInt(a.width) + "px", a.direction === "down" ? i.top = x + J + parseInt(a.dropdownGap) + "px" : i.top = x - (parseInt(a.height) + parseInt(a.dropdownGap)) + "px";
+    function Y() {
+      const E = s.value.getBoundingClientRect(), O = document.documentElement.scrollTop + E.top, T = E.height, D = E.left, F = E.width;
+      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = O + T + parseInt(o.dropdownGap) + "px" : i.top = O - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
-    function le(E) {
-      l("update:modelValue", E), a.closeOnSelect && (d(), j());
+    function oe(E) {
+      l("update:modelValue", E), o.closeOnSelect && (y(), S());
     }
-    return Vl(d), t({
-      showDropdownList: o
-    }), (E, x) => (m(), P(_(Gt), {
+    return zl(y), t({
+      showDropdownList: n
+    }), (E, O) => (m(), q(_(il), {
       ref_key: "dropdown",
       ref: r,
-      options: c,
+      options: u,
       class: "joy-dropdown",
-      onTrigger: d
+      onTrigger: y
     }, {
       default: L(() => [
         h("div", {
           ref_key: "button",
           ref: s,
           class: "joy-dropdown__button",
-          onClick: f
+          onClick: d
         }, [
-          b(E.$slots, "dropdown-button", {}, void 0, !0)
+          g(E.$slots, "dropdown-button", {}, void 0, !0)
         ], 512),
-        (m(), P(ot, {
+        (m(), q(rt, {
           to: e.appendTo,
           disabled: e.disableTeleport
         }, [
-          o.value ? (m(), p("div", {
+          n.value ? (m(), p("div", {
             key: 0,
             ref_key: "list",
-            ref: n,
+            ref: a,
             class: k([
               "joy-dropdown__list",
               `joy-dropdown__list--${e.direction}`,
               {
-                "joy-dropdown__list--visible": !y.value,
-                "joy-dropdown__list--hiding": y.value
+                "joy-dropdown__list--visible": !f.value,
+                "joy-dropdown__list--hiding": f.value
               }
             ]),
-            style: G({
+            style: K({
               top: i.top,
               left: i.left
             })
           }, [
-            ce(Ze, {
+            fe(Xe, {
               "model-value": e.modelValue,
               options: e.options,
               size: e.size,
               width: e.width,
               height: e.height,
-              "onUpdate:modelValue": le,
-              "onClose:dropdownList": S
+              "onUpdate:modelValue": oe,
+              "onClose:dropdownList": j
             }, {
-              label: L((J) => [
-                b(E.$slots, "dropdown-item", me(ve(J)), () => [
-                  h("span", null, O(J.label), 1)
+              label: L((T) => [
+                g(E.$slots, "dropdown-item", me(pe(T)), () => [
+                  h("span", null, I(T.label), 1)
                 ], !0)
               ]),
               _: 3
@@ -1220,10 +1326,10 @@ const xl = /* @__PURE__ */ $({
     }, 512));
   }
 });
-const Il = /* @__PURE__ */ V(xl, [["__scopeId", "data-v-49159b35"]]), Ol = (e) => (ee("data-v-50e209d6"), e = e(), te(), e), Ll = ["aria-hidden"], El = /* @__PURE__ */ Ol(() => /* @__PURE__ */ h("joy-icon", {
+const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-49159b35"]]), Dl = (e) => (te("data-v-50e209d6"), e = e(), le(), e), Rl = ["aria-hidden"], Ml = /* @__PURE__ */ Dl(() => /* @__PURE__ */ h("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), Bl = /* @__PURE__ */ $({
+}, null, -1)), Nl = /* @__PURE__ */ $({
   __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -1240,17 +1346,17 @@ const Il = /* @__PURE__ */ V(xl, [["__scopeId", "data-v-49159b35"]]), Ol = (e) =
       class: k(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      El,
+      Ml,
       h("div", null, [
-        b(t.$slots, "default", {}, () => [
-          T(O(e.noHtmlErrorText), 1)
+        g(t.$slots, "default", {}, () => [
+          J(I(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, Ll));
+    ], 10, Rl));
   }
 });
-const Ye = /* @__PURE__ */ V(Bl, [["__scopeId", "data-v-50e209d6"]]);
-function Cl(e) {
+const et = /* @__PURE__ */ V(Nl, [["__scopeId", "data-v-50e209d6"]]);
+function Hl(e) {
   let t;
   switch (e) {
     case "error":
@@ -1264,7 +1370,7 @@ function Cl(e) {
   }
   return t;
 }
-const Pl = [...dt], ql = ["name"], Jl = { class: "joy-highlight--text" }, Tl = /* @__PURE__ */ $({
+const Wl = [...pt], Ul = ["name"], Gl = { class: "joy-highlight--text" }, Kl = /* @__PURE__ */ $({
   __name: "VJoyHighlight",
   props: {
     accent: {
@@ -1280,51 +1386,51 @@ const Pl = [...dt], ql = ["name"], Jl = { class: "joy-highlight--text" }, Tl = /
       type: String,
       default: "neutral",
       validator(e) {
-        return Pl.includes(e);
+        return Wl.includes(e);
       }
     }
   },
   setup(e, { expose: t }) {
-    const l = e, a = I(() => l.icon ? l.icon : Cl(l.level));
+    const l = e, o = x(() => l.icon ? l.icon : Hl(l.level));
     return t({
-      getRelevantIcon: a
-    }), (o, r) => (m(), p("div", {
+      getRelevantIcon: o
+    }), (n, r) => (m(), p("div", {
       class: k([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": o.$slots["highlight-title"]
+          "joy-highlight__titled": n.$slots["highlight-title"]
         }
       ])
     }, [
       e.displayIcon ? (m(), p("joy-icon", {
         key: 0,
-        name: _(a)
-      }, null, 8, ql)) : w("", !0),
-      h("div", Jl, [
+        name: _(o)
+      }, null, 8, Ul)) : w("", !0),
+      h("div", Gl, [
         h("strong", null, [
-          b(o.$slots, "highlight-title", {}, void 0, !0)
+          g(n.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        b(o.$slots, "default", {}, void 0, !0)
+        g(n.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const zl = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-a0ff7a60"]]), Al = ["small", "medium", "large"], Dl = {
+const Ql = /* @__PURE__ */ V(Kl, [["__scopeId", "data-v-a0ff7a60"]]), Zl = ["small", "medium", "large"], Yl = {
   key: 0,
   class: "joy-label-required"
-}, Ml = {
+}, Xl = {
   key: 1,
   class: "joy-label-optional"
-}, Rl = /* @__PURE__ */ $({
+}, eo = /* @__PURE__ */ $({
   __name: "VJoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return Al.includes(e);
+        return Zl.includes(e);
       }
     },
     tagName: {
@@ -1340,19 +1446,19 @@ const zl = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-a0ff7a60"]]), Al = ["sma
     }
   },
   setup(e) {
-    return (t, l) => (m(), P(de(e.tagName), K({
+    return (t, l) => (m(), q(ce(e.tagName), Q({
       class: ["joy-label", `joy-label--${e.size}`]
     }, t.$attrs), {
       default: L(() => [
-        b(t.$slots, "default", {}, void 0, !0),
-        e.required ? (m(), p("span", Dl, "*")) : w("", !0),
-        e.optionalLabel ? (m(), p("span", Ml, "- " + O(e.optionalLabel), 1)) : w("", !0)
+        g(t.$slots, "default", {}, void 0, !0),
+        e.required ? (m(), p("span", Yl, "*")) : w("", !0),
+        e.optionalLabel ? (m(), p("span", Xl, "- " + I(e.optionalLabel), 1)) : w("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["large", "medium", "small"], Hl = ["id", "disabled", "type", "value"], Wl = ["name"], Fl = ["data-unit"], Ul = /* @__PURE__ */ $({
+const N = /* @__PURE__ */ V(eo, [["__scopeId", "data-v-1e682734"]]), to = ["large", "medium", "small"], lo = ["id", "disabled", "type", "value"], oo = ["name"], no = ["data-unit"], ao = /* @__PURE__ */ $({
   __name: "VJoyInput",
   props: {
     disabled: {
@@ -1403,7 +1509,7 @@ const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return Nl.includes(e);
+        return to.includes(e);
       }
     },
     type: String,
@@ -1412,45 +1518,45 @@ const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["larg
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = g(), o = g(), r = De(), s = F(), n = g(!1), u = I(() => l.clearable && l.modelValue.length > 0 && !l.unit), y = I(() => s.default && s.default()), c = I(() => {
-      var d, f;
-      return !!((d = o.value) != null && d.closest("joy-wrapper")) || !!((f = o.value) != null && f.closest(".joy-wrapper"));
-    }), v = g(l.type);
-    nt(() => {
+    const l = e, o = b(), n = b(), r = Re(), s = W(), a = b(!1), c = x(() => l.clearable && l.modelValue.length > 0 && !l.unit), f = x(() => s.default && s.default()), u = x(() => {
+      var y, d;
+      return !!((y = n.value) != null && y.closest("joy-wrapper")) || !!((d = n.value) != null && d.closest(".joy-wrapper"));
+    }), v = b(l.type);
+    st(() => {
       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: (d) => {
-        let f = d.target.value;
-        t("update:modelValue", f);
+      onInput: (y) => {
+        let d = y.target.value;
+        t("update:modelValue", d);
       },
       clearValue: () => {
         l.disabled || t("update:modelValue", "");
       }
     };
-    return (d, f) => (m(), p("div", {
+    return (y, d) => (m(), p("div", {
       ref_key: "root",
-      ref: o,
+      ref: n,
       class: k([`joy-input--${l.size}`])
     }, [
       h("div", {
         class: k([
           "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 && !_(r).disabled
           }
         ])
       }, [
-        _(y) || e.label ? (m(), P(H, {
+        _(f) || e.label ? (m(), q(N, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -1458,8 +1564,8 @@ const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["larg
           size: e.labelSize
         }, {
           default: L(() => [
-            b(d.$slots, "default", {}, () => [
-              T(O(e.label), 1)
+            g(y.$slots, "default", {}, () => [
+              J(I(e.label), 1)
             ], !0)
           ]),
           _: 3
@@ -1471,14 +1577,14 @@ const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["larg
               "joy-input--wrapper-has-icon": !!e.icon,
               "joy-input--wrapper---clearable": e.clearable,
               "joy-input--wrapper-unit": !!e.unit,
-              "joy-input--wrapper-margin": !_(c)
+              "joy-input--wrapper-margin": !_(u)
             }
           ])
         }, [
-          h("input", K(d.$attrs, {
+          h("input", Q(y.$attrs, {
             id: l.name,
             ref_key: "input",
-            ref: a,
+            ref: o,
             disabled: e.disabled,
             class: [
               {
@@ -1488,38 +1594,38 @@ const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["larg
             ],
             type: v.value,
             value: e.modelValue,
-            onFocus: f[0] || (f[0] = //@ts-ignore
-            (...S) => i.onFocus && i.onFocus(...S)),
-            onBlur: f[1] || (f[1] = //@ts-ignore
-            (...S) => i.onBlur && i.onBlur(...S)),
-            onInput: f[2] || (f[2] = //@ts-ignore
-            (...S) => i.onInput && i.onInput(...S))
-          }), null, 16, Hl),
-          _(u) ? (m(), p("joy-icon", {
+            onFocus: d[0] || (d[0] = //@ts-ignore
+            (...j) => i.onFocus && i.onFocus(...j)),
+            onBlur: d[1] || (d[1] = //@ts-ignore
+            (...j) => i.onBlur && i.onBlur(...j)),
+            onInput: d[2] || (d[2] = //@ts-ignore
+            (...j) => i.onInput && i.onInput(...j))
+          }), null, 16, lo),
+          _(c) ? (m(), p("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
-            onClick: f[3] || (f[3] = //@ts-ignore
-            (...S) => i.clearValue && i.clearValue(...S))
+            onClick: d[3] || (d[3] = //@ts-ignore
+            (...j) => i.clearValue && i.clearValue(...j))
           })) : w("", !0),
           e.icon && !e.clearable ? (m(), p("joy-icon", {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
             name: e.icon
-          }, null, 8, Wl)) : w("", !0),
+          }, null, 8, oo)) : w("", !0),
           e.unit ? (m(), p("div", {
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, Fl)) : w("", !0)
+          }, null, 8, no)) : w("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const Gl = /* @__PURE__ */ V(Ul, [["__scopeId", "data-v-8258d6d7"]]), Kl = ["teal", "white"], Ql = ["href"], Zl = ["color", "name"], Yl = /* @__PURE__ */ $({
+const io = /* @__PURE__ */ V(ao, [["__scopeId", "data-v-8258d6d7"]]), ro = ["teal", "white"], so = ["href"], uo = ["color", "name"], co = /* @__PURE__ */ $({
   __name: "VJoyLink",
   props: {
     href: {
@@ -1530,35 +1636,35 @@ const Gl = /* @__PURE__ */ V(Ul, [["__scopeId", "data-v-8258d6d7"]]), Kl = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return Kl.includes(e);
+        return ro.includes(e);
       }
     },
     icon: String
   },
   setup(e) {
-    const t = e, l = I(() => t.color === "white" ? "white" : "teal");
-    return (a, o) => (m(), p("a", K({ href: e.href }, a.$attrs, {
+    const t = e, l = x(() => t.color === "white" ? "white" : "teal");
+    return (o, n) => (m(), p("a", Q({ href: e.href }, o.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
       e.icon ? (m(), p("joy-icon", {
         key: 0,
         color: _(l),
         name: e.icon
-      }, null, 8, Zl)) : w("", !0),
-      b(a.$slots, "default", {}, void 0, !0)
-    ], 16, Ql));
+      }, null, 8, uo)) : w("", !0),
+      g(o.$slots, "default", {}, void 0, !0)
+    ], 16, so));
   }
 });
-const Xl = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-7ef59bc8"]]), ea = ["id"], ta = {
+const fo = /* @__PURE__ */ V(co, [["__scopeId", "data-v-7ef59bc8"]]), yo = ["id"], vo = {
   class: /* @__PURE__ */ k(["joy-multi-checkbox"])
-}, la = /* @__PURE__ */ $({
+}, mo = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((a) => Object.keys(a).includes("value")), l = e.every((a) => Object.keys(a).includes("label"));
+        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
         return t && l;
       }
     },
@@ -1591,18 +1697,18 @@ const Xl = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-7ef59bc8"]]), ea = ["id"
   emits: ["update:value"],
   setup(e, { emit: t }) {
     const l = e;
-    function a(r) {
+    function o(r) {
       return l.value.includes(r.value);
     }
-    function o(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) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (m(), P(_(H), {
+      e.label ? (m(), q(_(N), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -1610,42 +1716,42 @@ const Xl = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-7ef59bc8"]]), ea = ["id"
         size: e.labelSize
       }, {
         default: L(() => [
-          T(O(e.label), 1)
+          J(I(e.label), 1)
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : w("", !0),
-      h("div", ta, [
-        (m(!0), p(fe, null, ye(e.options, (n) => (m(), P(_(pe), {
-          id: n.id,
-          key: n.id,
-          name: n.name,
-          value: n.value,
-          checked: a(n),
-          "onUpdate:checked": (u) => o(n.value, u)
+      h("div", vo, [
+        (m(!0), p(ye, null, ve(e.options, (a) => (m(), q(_(he), {
+          id: a.id,
+          key: a.id,
+          name: a.name,
+          value: a.value,
+          checked: o(a),
+          "onUpdate:checked": (c) => n(a.value, c)
         }, {
           default: L(() => [
-            b(r.$slots, "checkbox", me(ve(n)), () => [
-              T(O(n.label), 1)
+            g(r.$slots, "checkbox", me(pe(a)), () => [
+              J(I(a.label), 1)
             ], !0)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, ea));
+    ], 8, yo));
   }
 });
-const aa = /* @__PURE__ */ V(la, [["__scopeId", "data-v-f4301a1f"]]), oa = ["small", "medium", "large"], na = {
+const po = /* @__PURE__ */ V(mo, [["__scopeId", "data-v-f4301a1f"]]), ho = ["small", "medium", "large"], bo = {
   class: /* @__PURE__ */ k(["joy-panel__header"])
-}, ia = {
+}, go = {
   key: 0,
   class: "joy-panel__header-title"
-}, ra = {
+}, _o = {
   key: 1,
   class: "joy-panel__header-action"
-}, sa = {
+}, wo = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, ua = { class: "joy-panel__body" }, da = { class: "joy-panel__footer" }, ca = /* @__PURE__ */ $({
+}, So = { class: "joy-panel__body" }, jo = { class: "joy-panel__footer" }, ko = /* @__PURE__ */ $({
   __name: "VJoyPanel",
   props: {
     flex: {
@@ -1659,62 +1765,62 @@ const aa = /* @__PURE__ */ V(la, [["__scopeId", "data-v-f4301a1f"]]), oa = ["sma
       type: String,
       defaut: "medium",
       validator(e) {
-        return oa.includes(e);
+        return ho.includes(e);
       }
     }
   },
   setup(e) {
-    const t = F(), l = g(), a = I(() => {
-      var o;
-      return (o = l.value) == null ? void 0 : o.closest(".joy-wrapper");
+    const t = W(), l = b(), o = x(() => {
+      var n;
+      return (n = l.value) == null ? void 0 : n.closest(".joy-wrapper");
     });
-    return (o, r) => (m(), p("section", {
+    return (n, r) => (m(), p("section", {
       ref_key: "panel",
       ref: l,
-      style: G({ flex: e.flex }),
-      class: k(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || _(a) }])
+      style: K({ flex: e.flex }),
+      class: k(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || _(o) }])
     }, [
-      h("header", na, [
-        _(t)["panel-title"] ? (m(), p("div", ia, [
-          b(o.$slots, "panel-title", {}, void 0, !0)
+      h("header", bo, [
+        _(t)["panel-title"] ? (m(), p("div", go, [
+          g(n.$slots, "panel-title", {}, void 0, !0)
         ])) : w("", !0),
-        _(t)["panel-action"] ? (m(), p("div", ra, [
-          b(o.$slots, "panel-title-action", {}, void 0, !0)
+        _(t)["panel-action"] ? (m(), p("div", _o, [
+          g(n.$slots, "panel-title-action", {}, void 0, !0)
         ])) : w("", !0),
-        _(t)["panel-subtitle"] ? (m(), p("div", sa, [
-          b(o.$slots, "panel-subtitle", {}, void 0, !0)
+        _(t)["panel-subtitle"] ? (m(), p("div", wo, [
+          g(n.$slots, "panel-subtitle", {}, void 0, !0)
         ])) : w("", !0)
       ]),
-      h("div", ua, [
-        b(o.$slots, "panel-body", {}, void 0, !0)
+      h("div", So, [
+        g(n.$slots, "panel-body", {}, void 0, !0)
       ]),
-      h("footer", da, [
-        b(o.$slots, "panel-action", {}, void 0, !0)
+      h("footer", jo, [
+        g(n.$slots, "panel-action", {}, void 0, !0)
       ])
     ], 6));
   }
 });
-const fa = /* @__PURE__ */ V(ca, [["__scopeId", "data-v-2e2ef043"]]), ya = { class: "joy-panel-section" }, ma = {
+const $o = /* @__PURE__ */ V(ko, [["__scopeId", "data-v-2e2ef043"]]), Vo = { class: "joy-panel-section" }, xo = {
   key: 0,
   class: "joy-panel-section__title"
-}, va = {
+}, Oo = {
   key: 1,
   class: "joy-panel-section__content"
-}, pa = /* @__PURE__ */ $({
+}, Io = /* @__PURE__ */ $({
   __name: "VJoyPanelSection",
   setup(e) {
-    const t = F();
-    return (l, a) => (m(), p("div", ya, [
-      _(t)["panel-section-title"] ? (m(), p("div", ma, [
-        b(l.$slots, "panel-section-title", {}, void 0, !0)
+    const t = W();
+    return (l, o) => (m(), p("div", Vo, [
+      _(t)["panel-section-title"] ? (m(), p("div", xo, [
+        g(l.$slots, "panel-section-title", {}, void 0, !0)
       ])) : w("", !0),
-      _(t)["panel-section-content"] ? (m(), p("div", va, [
-        b(l.$slots, "panel-section-content", {}, void 0, !0)
+      _(t)["panel-section-content"] ? (m(), p("div", Oo, [
+        g(l.$slots, "panel-section-content", {}, void 0, !0)
       ])) : w("", !0)
     ]));
   }
 });
-const ha = /* @__PURE__ */ V(pa, [["__scopeId", "data-v-d88510ab"]]), ba = ["id", "value", "checked", "disabled", "required", "name"], ga = { class: "joy-radio-label" }, _a = { class: "joy-radio-content__wrapper" }, wa = { class: "joy-radio-content" }, Sa = /* @__PURE__ */ $({
+const Bo = /* @__PURE__ */ V(Io, [["__scopeId", "data-v-d88510ab"]]), Lo = ["id", "value", "checked", "disabled", "required", "name"], Eo = { class: "joy-radio-label" }, Co = { class: "joy-radio-content__wrapper" }, Po = { class: "joy-radio-content" }, Jo = /* @__PURE__ */ $({
   __name: "VJoyRadio",
   props: {
     disabled: {
@@ -1750,33 +1856,42 @@ const ha = /* @__PURE__ */ V(pa, [["__scopeId", "data-v-d88510ab"]]), ba = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(!1), r = g(null), s = g(null), n = F(), u = I(() => !a.modelValue || !a.value ? !1 : a.modelValue === a.value);
-    function y() {
-      o.value = !!n["expandable-content"] && u.value;
+    const o = e, n = b(!1), r = b(!1), s = b(null), a = b(null), c = W(), f = x(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
+    function u() {
+      n.value = !!c["expandable-content"] && f.value;
     }
-    function c() {
-      l("update:modelValue", a.value), y();
+    function v() {
+      l("update:modelValue", o.value), u();
+    }
+    Z(() => {
+      o.theme === "outline" && u();
+    });
+    function i() {
+      r.value = !0;
+    }
+    function y() {
+      r.value = !1;
     }
-    return W(() => {
-      a.theme === "outline" && y();
-    }), q(
-      () => a.modelValue,
+    return B(
+      () => o.modelValue,
       () => {
-        y();
+        u();
       }
     ), t({
-      checked: u,
-      isExpanded: o
-    }), (v, i) => (m(), p("label", {
+      checked: f,
+      isExpanded: n
+    }), (d, j) => (m(), p("label", {
       ref_key: "root",
-      ref: r,
+      ref: s,
       class: k([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": _(u),
+          "joy-radio--checked": _(f),
           "joy-radio--disabled": e.disabled,
-          "joy-radio--invalid": e.invalid
+          "joy-radio--invalid": e.invalid,
+          "joy-radio--outline-focus": r.value && e.theme === "outline",
+          "joy-radio--focus": r.value && e.theme === "default"
         }
       ])
     }, [
@@ -1784,31 +1899,33 @@ const ha = /* @__PURE__ */ V(pa, [["__scopeId", "data-v-d88510ab"]]), ba = ["id"
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: _(u),
+        checked: _(f),
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: c
-      }, null, 40, ba),
-      h("span", ga, [
-        b(v.$slots, "default", {}, void 0, !0)
+        onChange: v,
+        onFocus: i,
+        onBlur: y
+      }, null, 40, Lo),
+      h("span", Eo, [
+        g(d.$slots, "default", {}, void 0, !0)
       ]),
-      h("div", _a, [
-        h("div", wa, [
-          b(v.$slots, "radio-content", {}, void 0, !0)
+      h("div", Co, [
+        h("div", Po, [
+          g(d.$slots, "radio-content", {}, void 0, !0)
         ]),
         h("div", {
           ref_key: "expandableElement",
-          ref: s,
-          class: k(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
+          ref: a,
+          class: k(["joy-radio-expandable", { "joy-radio-expandable--expanded": n.value }])
         }, [
-          b(v.$slots, "expandable-content", {}, void 0, !0)
+          g(d.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const ka = /* @__PURE__ */ V(Sa, [["__scopeId", "data-v-d5988486"]]), ja = ["form", "name"], $a = /* @__PURE__ */ $({
+const qo = /* @__PURE__ */ V(Jo, [["__scopeId", "data-v-24cea99b"]]), To = ["form", "name"], zo = /* @__PURE__ */ $({
   __name: "VJoyRadioGroup",
   props: {
     direction: {
@@ -1830,19 +1947,19 @@ const ka = /* @__PURE__ */ V(Sa, [["__scopeId", "data-v-d5988486"]]), ja = ["for
       form: e.form,
       name: e.name
     }, [
-      b(t.$slots, "radio-group-legend", {}, void 0, !0),
+      g(t.$slots, "radio-group-legend", {}, void 0, !0),
       h("div", {
         class: k(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        b(t.$slots, "default", {}, void 0, !0)
+        g(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, ja));
+    ], 8, To));
   }
 });
-const Va = /* @__PURE__ */ V($a, [["__scopeId", "data-v-de56c3c4"]]), xa = (e) => (ee("data-v-e856916f"), e = e(), te(), e), Ia = ["id", "name", "aria-invalid", "required", "disabled", "value"], Oa = /* @__PURE__ */ xa(() => /* @__PURE__ */ h("joy-icon", {
+const Ao = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-de56c3c4"]]), Fo = (e) => (te("data-v-d251a432"), e = e(), le(), e), Do = ["id", "name", "aria-invalid", "required", "disabled", "value"], Ro = /* @__PURE__ */ Fo(() => /* @__PURE__ */ h("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), La = /* @__PURE__ */ $({
+}, null, -1)), Mo = /* @__PURE__ */ $({
   __name: "VJoySelect",
   props: {
     disabled: {
@@ -1883,32 +2000,38 @@ const Va = /* @__PURE__ */ V($a, [["__scopeId", "data-v-de56c3c4"]]), xa = (e) =
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = g(), o = g(), r = F();
-    W(() => {
-      var y;
-      const n = r.label && r.label();
-      if (!n || !n.length)
+    const l = e, o = b(), n = b(), r = W(), s = b(!1);
+    Z(() => {
+      var i;
+      const u = r.label && r.label();
+      if (!u || !u.length)
         return;
-      const u = n[0];
-      if (u.type === "JoyLabel") {
-        const c = (y = u.props) == null ? void 0 : y.for;
-        if (!c) {
+      const v = u[0];
+      if (v.type === "JoyLabel") {
+        const y = (i = v.props) == null ? void 0 : i.for;
+        if (!y) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        c !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        y !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function s(n) {
-      const u = n.target.value;
-      t("update:modelValue", u);
+    function a(u) {
+      const v = u.target.value;
+      t("update:modelValue", v);
+    }
+    function c() {
+      s.value = !0;
+    }
+    function f() {
+      s.value = !1;
     }
-    return (n, u) => (m(), p("div", {
+    return (u, v) => (m(), p("div", {
       ref_key: "root",
-      ref: a
+      ref: o
     }, [
-      b(n.$slots, "label", {}, () => [
-        e.label ? (m(), P(H, {
+      g(u.$slots, "label", {}, () => [
+        e.label ? (m(), q(N, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
@@ -1916,7 +2039,7 @@ const Va = /* @__PURE__ */ V($a, [["__scopeId", "data-v-de56c3c4"]]), xa = (e) =
           size: e.labelSize
         }, {
           default: L(() => [
-            T(O(e.label), 1)
+            J(I(e.label), 1)
           ]),
           _: 1
         }, 8, ["required", "optional-label", "for", "size"])) : w("", !0)
@@ -1925,29 +2048,32 @@ const Va = /* @__PURE__ */ V($a, [["__scopeId", "data-v-de56c3c4"]]), xa = (e) =
         class: k({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
-          "joy-select--disabled": e.disabled
+          "joy-select--disabled": e.disabled,
+          "joy-select--focusing": s.value
         })
       }, [
         h("select", {
           id: e.id || e.name,
           ref_key: "select",
-          ref: o,
+          ref: n,
           class: "joy-select",
           name: e.name,
           "aria-invalid": e.invalid,
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: s
+          onInput: a,
+          onFocus: c,
+          onBlur: f
         }, [
-          b(n.$slots, "default", {}, void 0, !0)
-        ], 40, Ia),
-        Oa
+          g(u.$slots, "default", {}, void 0, !0)
+        ], 40, Do),
+        Ro
       ], 2)
     ], 512));
   }
 });
-const Ea = /* @__PURE__ */ V(La, [["__scopeId", "data-v-e856916f"]]), Ba = ["aria-disabled"], Ca = ["id", "value", "checked", "disabled", "required", "name"], Pa = /* @__PURE__ */ $({
+const No = /* @__PURE__ */ V(Mo, [["__scopeId", "data-v-d251a432"]]), Ho = ["aria-disabled"], Wo = ["id", "value", "checked", "disabled", "required", "name"], Uo = /* @__PURE__ */ $({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -1984,41 +2110,56 @@ const Ea = /* @__PURE__ */ V(La, [["__scopeId", "data-v-e856916f"]]), Ba = ["ari
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = e, a = g(l.checked), o = g(), r = l.multiple ? "div" : "label", s = {
+    const l = e, o = b(l.checked), n = b(), r = b(!1), s = l.multiple ? "div" : "label", a = {
       onRadioChange: () => {
         t("update:checked", l.value);
       },
       onClick: () => {
         l.checked && !l.multiple && t("update:checked", "");
       },
-      onLabelClick: (u) => {
-        l.multiple || u.stopPropagation();
+      onLabelClick: (f) => {
+        l.multiple || f.stopPropagation();
+      },
+      onFocus: () => {
+        r.value = !0;
+      },
+      onBlur: () => {
+        r.value = !1;
       }
     };
-    function n(u) {
-      t("update:checked", u);
+    function c(f) {
+      t("update:checked", f);
     }
-    return (u, y) => (m(), p("div", {
-      class: "joy-selectable-item__wrapper",
+    return (f, u) => (m(), p("div", {
+      class: k([
+        "joy-selectable-item__wrapper",
+        {
+          "joy-selectable-item--focusing": r.value
+        }
+      ]),
       "aria-disabled": e.disabled,
-      onClick: y[2] || (y[2] = //@ts-ignore
-      (...c) => s.onClick && s.onClick(...c))
+      onClick: u[4] || (u[4] = //@ts-ignore
+      (...v) => a.onClick && a.onClick(...v))
     }, [
       e.multiple ? w("", !0) : (m(), p("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
-        ref: o,
+        ref: n,
         type: "radio",
         value: e.value,
         checked: e.checked,
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: y[0] || (y[0] = //@ts-ignore
-        (...c) => s.onRadioChange && s.onRadioChange(...c))
-      }, null, 40, Ca)),
-      (m(), P(de(_(r)), {
+        onChange: u[0] || (u[0] = //@ts-ignore
+        (...v) => a.onRadioChange && a.onRadioChange(...v)),
+        onFocus: u[1] || (u[1] = //@ts-ignore
+        (...v) => a.onFocus && a.onFocus(...v)),
+        onBlur: u[2] || (u[2] = //@ts-ignore
+        (...v) => a.onBlur && a.onBlur(...v))
+      }, null, 40, Wo)),
+      (m(), q(ce(_(s)), {
         for: e.id,
         class: k([
           "joy-selectable-item",
@@ -2029,47 +2170,50 @@ const Ea = /* @__PURE__ */ V(La, [["__scopeId", "data-v-e856916f"]]), Ba = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: s.onLabelClick
+        onClick: a.onLabelClick
       }, {
         default: L(() => [
-          e.multiple ? (m(), P(_(pe), {
+          e.multiple ? (m(), q(_(he), {
             key: 0,
             id: e.id,
-            checked: a.value,
+            checked: o.value,
             "onUpdate:checked": [
-              y[1] || (y[1] = (c) => a.value = c),
-              n
+              u[3] || (u[3] = (v) => o.value = v),
+              c
             ],
             disabled: e.disabled,
             value: e.value,
             name: e.name,
-            required: e.required
+            "display-focus": !1,
+            required: e.required,
+            onFocus: a.onFocus,
+            onBlur: a.onBlur
           }, {
             default: L(() => [
-              b(u.$slots, "default", {}, void 0, !0)
+              g(f.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : w("", !0),
-          e.multiple ? w("", !0) : b(u.$slots, "default", { key: 1 }, void 0, !0),
+          }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : w("", !0),
+          e.multiple ? w("", !0) : g(f.$slots, "default", { key: 1 }, void 0, !0),
           h("div", {
-            class: k([{ "joy-selectable-item__sublabel": u.$slots["selectable-item-sublabel"] }])
+            class: k([{ "joy-selectable-item__sublabel": f.$slots["selectable-item-sublabel"] }])
           }, [
-            b(u.$slots, "selectable-item-sublabel", {}, void 0, !0)
+            g(f.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 8, Ba));
+    ], 10, Ho));
   }
 });
-const Xe = /* @__PURE__ */ V(Pa, [["__scopeId", "data-v-c40bf83e"]]), qa = ["id"], Ja = /* @__PURE__ */ $({
+const tt = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-cb2531c0"]]), Go = ["id"], Ko = /* @__PURE__ */ $({
   __name: "VJoySelectableItemGroup",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((a) => Object.keys(a).includes("value")), l = e.every((a) => Object.keys(a).includes("label"));
+        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
         return t && l;
       }
     },
@@ -2104,20 +2248,20 @@ const Xe = /* @__PURE__ */ V(Pa, [["__scopeId", "data-v-c40bf83e"]]), qa = ["id"
   emits: ["update:value"],
   setup(e, { emit: t }) {
     const l = e;
-    function a(r) {
+    function o(r) {
       return typeof l.value == "string" ? l.value === r.value : (l.value || []).includes(r.value);
     }
-    function o(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) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (m(), P(_(H), {
+      e.label ? (m(), q(_(N), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -2125,7 +2269,7 @@ const Xe = /* @__PURE__ */ V(Pa, [["__scopeId", "data-v-c40bf83e"]]), qa = ["id"
         size: e.labelSize
       }, {
         default: L(() => [
-          T(O(e.label), 1)
+          J(I(e.label), 1)
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : w("", !0),
@@ -2139,33 +2283,33 @@ const Xe = /* @__PURE__ */ V(Pa, [["__scopeId", "data-v-c40bf83e"]]), qa = ["id"
           }
         ])
       }, [
-        (m(!0), p(fe, null, ye(e.options, (n) => (m(), P(_(Xe), {
-          id: n.id,
-          key: n.id,
-          name: n.name,
-          value: n.value,
+        (m(!0), p(ye, null, ve(e.options, (a) => (m(), q(_(tt), {
+          id: a.id,
+          key: a.id,
+          name: a.name,
+          value: a.value,
           multiple: e.multiple,
-          checked: a(n),
-          "onUpdate:checked": (u) => o(n.value, u)
-        }, it({
+          checked: o(a),
+          "onUpdate:checked": (c) => n(a.value, c)
+        }, ut({
           default: L(() => [
-            T(O(n.label) + " ", 1)
+            J(I(a.label) + " ", 1)
           ]),
           _: 2
         }, [
-          n.subLabel ? {
+          a.subLabel ? {
             name: "selectable-item-sublabel",
             fn: L(() => [
-              T(O(n.subLabel), 1)
+              J(I(a.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, qa));
+    ], 8, Go));
   }
 });
-const Ta = /* @__PURE__ */ V(Ja, [["__scopeId", "data-v-3ba17434"]]), za = /* @__PURE__ */ $({
+const Qo = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-3ba17434"]]), Zo = /* @__PURE__ */ $({
   __name: "VJoyWrapper",
   props: {
     justify: {
@@ -2189,76 +2333,81 @@ const Ta = /* @__PURE__ */ V(Ja, [["__scopeId", "data-v-3ba17434"]]), za = /* @_
     return (t, l) => (m(), p("div", {
       class: k(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      b(t.$slots, "default", {}, void 0, !0)
+      g(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const Aa = /* @__PURE__ */ V(za, [["__scopeId", "data-v-319d995e"]]), Da = { class: "joy-template__heading" }, Ma = {
+const Yo = /* @__PURE__ */ V(Zo, [["__scopeId", "data-v-319d995e"]]), Xo = { class: "joy-template__wrapper" }, en = {
+  key: 0,
+  class: "joy-template__heading"
+}, tn = {
   key: 0,
   class: "joy-template-slot-back"
-}, Ra = { class: "joy-template__heading___headings" }, Na = {
+}, ln = { class: "joy-template__heading___headings" }, on = {
   key: 0,
   class: "joy-template-slot-title"
-}, Ha = {
+}, nn = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, Wa = {
+}, an = {
   key: 0,
   class: "joy-template-slot-main"
-}, Fa = {
+}, rn = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, Ua = /* @__PURE__ */ $({
+}, sn = /* @__PURE__ */ $({
   __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const t = e, l = F();
-    return (a, o) => (m(), p("main", {
+    const t = e, l = W(), o = x(() => !!l["template-back"] || !!l["template-title"] || !!l["template-subtitle"]);
+    return (n, r) => (m(), p("main", {
       class: k(["joy-template", { "joy-template--full": t.full }])
     }, [
-      h("div", Da, [
-        _(l)["template-back"] ? (m(), p("div", Ma, [
-          b(a.$slots, "template-back", {}, void 0, !0)
+      h("div", Xo, [
+        _(o) ? (m(), p("div", en, [
+          _(l)["template-back"] ? (m(), p("div", tn, [
+            g(n.$slots, "template-back", {}, void 0, !0)
+          ])) : w("", !0),
+          h("div", ln, [
+            _(l)["template-title"] ? (m(), p("div", on, [
+              g(n.$slots, "template-title", {}, void 0, !0)
+            ])) : w("", !0),
+            _(l)["template-subtitle"] ? (m(), p("div", nn, [
+              g(n.$slots, "template-subtitle", {}, void 0, !0)
+            ])) : w("", !0)
+          ])
         ])) : w("", !0),
-        h("div", Ra, [
-          _(l)["template-title"] ? (m(), p("div", Na, [
-            b(a.$slots, "template-title", {}, void 0, !0)
+        h("div", {
+          class: k([
+            "joy-template__content",
+            {
+              "joy-template__content--reverse": t.sidebar === "left"
+            }
+          ])
+        }, [
+          n.$slots["template-main"] ? (m(), p("div", an, [
+            g(n.$slots, "template-main", {}, void 0, !0)
           ])) : w("", !0),
-          _(l)["template-subtitle"] ? (m(), p("div", Ha, [
-            b(a.$slots, "template-subtitle", {}, void 0, !0)
+          n.$slots["template-sidebar"] ? (m(), p("div", rn, [
+            g(n.$slots, "template-sidebar", {}, void 0, !0)
           ])) : w("", !0)
-        ])
-      ]),
-      h("div", {
-        class: k([
-          "joy-template__content",
-          {
-            "joy-template__content--reverse": t.sidebar === "left"
-          }
-        ])
-      }, [
-        a.$slots["template-main"] ? (m(), p("div", Wa, [
-          b(a.$slots, "template-main", {}, void 0, !0)
-        ])) : w("", !0),
-        a.$slots["template-sidebar"] ? (m(), p("div", Fa, [
-          b(a.$slots, "template-sidebar", {}, void 0, !0)
-        ])) : w("", !0)
-      ], 2)
+        ], 2)
+      ])
     ], 2));
   }
 });
-const Ga = /* @__PURE__ */ V(Ua, [["__scopeId", "data-v-a03bc629"]]), Ka = ["aria-disabled"], Qa = ["id", "disabled", "name", "required", "minlength", "value"], Za = {
+const un = /* @__PURE__ */ V(sn, [["__scopeId", "data-v-f891bd85"]]), dn = ["aria-disabled"], cn = { class: "joy-textarea_wrapper" }, fn = ["id", "disabled", "name", "required", "minlength", "value"], yn = {
   key: 0,
   class: "joy-textarea_helpers"
-}, Ya = {
+}, vn = {
   key: 0,
   name: "check",
   color: "grey",
   size: "xxsmall"
-}, Xa = /* @__PURE__ */ $({
+}, mn = /* @__PURE__ */ $({
   __name: "VJoyTextarea",
   props: {
     disabled: {
@@ -2307,25 +2456,23 @@ const Ga = /* @__PURE__ */ V(Ua, [["__scopeId", "data-v-a03bc629"]]), Ka = ["ari
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: l }) {
-    const a = e, o = g(), r = g(), s = g(!1), n = I(() => a.maxlength ? a.modelValue.length > a.maxlength : !1), u = I(() => a.minlength ? a.modelValue.length < a.minlength : !1);
-    function y() {
-      o.value && a.autogrow && (o.value.style.height = "auto", o.value.style.height = o.value.scrollHeight + "px", r.value && (r.value.style.height = o.value.scrollHeight + "px"));
-    }
-    W(() => {
-      y();
-    });
-    const c = {
+    const o = e, n = b(), { triggerResize: r } = el({
+      element: o.autogrow ? n : void 0
+    }), s = b(!1), a = b(!1), c = x(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), f = x(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
       onInput: (v) => {
-        l("update:modelValue", v.target.value), y();
+        l("update:modelValue", v.target.value), r();
       },
       onBlur: () => {
-        s.value = n.value || u.value;
+        a.value = !1, s.value = c.value || f.value;
+      },
+      onFocus: () => {
+        a.value = !0;
       }
     };
     return t({
       isInvalid: s,
-      valueOverMaxlength: n,
-      valueUnderMinlength: u
+      valueOverMaxlength: c,
+      valueUnderMinlength: f
     }), (v, i) => (m(), p("div", {
       "aria-disabled": e.disabled,
       class: k([
@@ -2333,32 +2480,29 @@ const Ga = /* @__PURE__ */ V(Ua, [["__scopeId", "data-v-a03bc629"]]), Ka = ["ari
         {
           "joy-textarea_invalid": s.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
-          "joy-textarea_autogrow": e.autogrow
+          "joy-textarea_autogrow": e.autogrow,
+          "joy-textarea_focusing": a.value
         }
       ])
     }, [
-      ce(_(H), {
+      fe(_(N), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
         default: L(() => [
-          b(v.$slots, "default", {}, () => [
-            T(O(e.label), 1)
+          g(v.$slots, "default", {}, () => [
+            J(I(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      h("div", {
-        ref_key: "textareaWrapper",
-        ref: r,
-        class: "joy-textarea_wrapper"
-      }, [
-        h("textarea", K(v.$attrs, {
+      h("div", cn, [
+        h("textarea", Q(v.$attrs, {
           id: e.id,
           ref_key: "textarea",
-          ref: o,
+          ref: n,
           class: "joy-native-textarea",
           disabled: e.disabled,
           name: e.name,
@@ -2366,28 +2510,30 @@ const Ga = /* @__PURE__ */ V(Ua, [["__scopeId", "data-v-a03bc629"]]), Ka = ["ari
           minlength: e.minlength,
           value: e.modelValue,
           onInput: i[0] || (i[0] = //@ts-ignore
-          (...d) => c.onInput && c.onInput(...d)),
-          onBlur: i[1] || (i[1] = //@ts-ignore
-          (...d) => c.onBlur && c.onBlur(...d))
-        }), null, 16, Qa)
-      ], 512),
-      e.minlength || e.maxlength ? (m(), p("div", Za, [
+          (...y) => u.onInput && u.onInput(...y)),
+          onFocus: i[1] || (i[1] = //@ts-ignore
+          (...y) => u.onFocus && u.onFocus(...y)),
+          onBlur: i[2] || (i[2] = //@ts-ignore
+          (...y) => u.onBlur && u.onBlur(...y))
+        }), null, 16, fn)
+      ]),
+      e.minlength || e.maxlength ? (m(), p("div", yn, [
         e.minlength ? (m(), p("p", {
           key: 0,
           class: k(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          _(u) ? w("", !0) : (m(), p("joy-icon", Ya)),
-          T(" " + O(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+          _(f) ? w("", !0) : (m(), p("joy-icon", vn)),
+          J(" " + I(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
         ], 2)) : w("", !0),
         e.maxlength ? (m(), p("p", {
           key: 1,
-          class: k(["joy-textarea-count", { "joy-textarea-count-invalid": _(n) }])
-        }, O(e.modelValue.length + "/" + e.maxlength), 3)) : w("", !0)
+          class: k(["joy-textarea-count", { "joy-textarea-count-invalid": _(c) }])
+        }, I(e.modelValue.length + "/" + e.maxlength), 3)) : w("", !0)
       ])) : w("", !0)
-    ], 10, Ka));
+    ], 10, dn));
   }
 });
-const eo = /* @__PURE__ */ V(Xa, [["__scopeId", "data-v-650f33d9"]]), to = (e) => (ee("data-v-79792513"), e = e(), te(), e), lo = ["name", "disabled", "checked", "required", "aria-checked", "value"], ao = { class: "joy-toggle__content" }, oo = { class: "joy-toggle__content-label" }, no = /* @__PURE__ */ to(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
+const pn = /* @__PURE__ */ V(mn, [["__scopeId", "data-v-1496c389"]]), lt = (e) => (te("data-v-cf79d999"), e = e(), le(), e), hn = { class: "joy-toggle__wrapper" }, bn = ["name", "disabled", "checked", "required", "aria-checked", "value"], gn = { class: "joy-toggle__content" }, _n = /* @__PURE__ */ lt(() => /* @__PURE__ */ h("span", { class: "joy-toggle__symbol" }, null, -1)), wn = { class: "joy-toggle__content-label" }, Sn = /* @__PURE__ */ lt(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
   /* @__PURE__ */ h("svg", {
     width: "18",
     height: "10",
@@ -2400,7 +2546,7 @@ const eo = /* @__PURE__ */ V(Xa, [["__scopeId", "data-v-650f33d9"]]), to = (e) =
       fill: "currentColor"
     })
   ])
-], -1)), io = /* @__PURE__ */ $({
+], -1)), jn = /* @__PURE__ */ $({
   __name: "VJoyToggle",
   props: {
     modelValue: {
@@ -2434,19 +2580,26 @@ const eo = /* @__PURE__ */ V(Xa, [["__scopeId", "data-v-650f33d9"]]), to = (e) =
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = {
-      onChange: (a) => {
-        const o = a.target.checked;
-        t("update:modelValue", o);
+    const l = b(!1), o = {
+      onChange: (n) => {
+        const r = n.target.checked;
+        t("update:modelValue", r);
+      },
+      onFocus: () => {
+        l.value = !0;
+      },
+      onBlur: () => {
+        l.value = !1;
       }
     };
-    return (a, o) => (m(), p("div", null, [
+    return (n, r) => (m(), p("div", hn, [
       h("label", {
         class: k([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,
-            "joy-toggle__disabled": e.disabled
+            "joy-toggle__disabled": e.disabled,
+            "joy-toggle__focusing": l.value
           }
         ])
       }, [
@@ -2461,76 +2614,83 @@ const eo = /* @__PURE__ */ V(Xa, [["__scopeId", "data-v-650f33d9"]]), to = (e) =
           required: e.required,
           "aria-checked": e.modelValue,
           value: e.value,
-          onChange: o[0] || (o[0] = //@ts-ignore
-          (...r) => l.onChange && l.onChange(...r))
-        }, null, 40, lo),
-        h("p", ao, [
-          h("span", oo, [
-            b(a.$slots, "default", {}, () => [
-              T(O(e.label), 1)
+          onChange: r[0] || (r[0] = //@ts-ignore
+          (...s) => o.onChange && o.onChange(...s)),
+          onFocus: r[1] || (r[1] = //@ts-ignore
+          (...s) => o.onFocus && o.onFocus(...s)),
+          onBlur: r[2] || (r[2] = //@ts-ignore
+          (...s) => o.onBlur && o.onBlur(...s))
+        }, null, 40, bn),
+        h("p", gn, [
+          _n,
+          h("span", wn, [
+            g(n.$slots, "default", {}, () => [
+              J(I(e.label), 1)
             ], !0)
           ]),
-          no
+          Sn
         ])
       ], 2)
     ]));
   }
 });
-const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-79792513"]]), so = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const kn = /* @__PURE__ */ V(jn, [["__scopeId", "data-v-cf79d999"]]), $n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VJoyButton: ht,
-  VJoyCheckbox: pe,
-  VJoyCounter: Pt,
-  VJoyDropdown: Il,
-  VJoyDropdownList: Ze,
-  VJoyFormError: Ye,
-  VJoyHighlight: zl,
-  VJoyInput: Gl,
-  VJoyLabel: H,
-  VJoyLink: Xl,
-  VJoyMultiCheckbox: aa,
-  VJoyPanel: fa,
-  VJoyPanelSection: ha,
-  VJoyRadio: ka,
-  VJoyRadioGroup: Va,
-  VJoySelect: Ea,
-  VJoySelectableItem: Xe,
-  VJoySelectableItemGroup: Ta,
-  VJoySpinner: Ne,
-  VJoyTemplate: Ga,
-  VJoyTextarea: eo,
-  VJoyToggle: ro,
-  VJoyWrapper: Aa
-}, Symbol.toStringTag, { value: "Module" })), co = {
+  VJoyBadge: ft,
+  VJoyButton: jt,
+  VJoyCheckbox: he,
+  VJoyCounter: Dt,
+  VJoyDropdown: Fl,
+  VJoyDropdownList: Xe,
+  VJoyFormError: et,
+  VJoyHighlight: Ql,
+  VJoyInput: io,
+  VJoyLabel: N,
+  VJoyLink: fo,
+  VJoyMultiCheckbox: po,
+  VJoyPanel: $o,
+  VJoyPanelSection: Bo,
+  VJoyRadio: qo,
+  VJoyRadioGroup: Ao,
+  VJoySelect: No,
+  VJoySelectableItem: tt,
+  VJoySelectableItemGroup: Qo,
+  VJoySpinner: He,
+  VJoyTemplate: un,
+  VJoyTextarea: pn,
+  VJoyToggle: kn,
+  VJoyWrapper: Yo
+}, Symbol.toStringTag, { value: "Module" })), xn = {
   install: (e) => {
-    Object.entries(so).forEach(([t, l]) => {
+    Object.entries($n).forEach(([t, l]) => {
       e.component(t, l);
     });
   }
 };
 export {
-  co as JoyVuePlugin,
-  ht as VJoyButton,
-  pe as VJoyCheckbox,
-  Pt as VJoyCounter,
-  Il as VJoyDropdown,
-  Ze as VJoyDropdownList,
-  Ye as VJoyFormError,
-  zl as VJoyHighlight,
-  Gl as VJoyInput,
-  H as VJoyLabel,
-  Xl as VJoyLink,
-  aa as VJoyMultiCheckbox,
-  fa as VJoyPanel,
-  ha as VJoyPanelSection,
-  ka as VJoyRadio,
-  Va as VJoyRadioGroup,
-  Ea as VJoySelect,
-  Xe as VJoySelectableItem,
-  Ta as VJoySelectableItemGroup,
-  Ne as VJoySpinner,
-  Ga as VJoyTemplate,
-  eo as VJoyTextarea,
-  ro as VJoyToggle,
-  Aa as VJoyWrapper
+  xn as JoyVuePlugin,
+  ft as VJoyBadge,
+  jt as VJoyButton,
+  he as VJoyCheckbox,
+  Dt as VJoyCounter,
+  Fl as VJoyDropdown,
+  Xe as VJoyDropdownList,
+  et as VJoyFormError,
+  Ql as VJoyHighlight,
+  io as VJoyInput,
+  N as VJoyLabel,
+  fo as VJoyLink,
+  po as VJoyMultiCheckbox,
+  $o as VJoyPanel,
+  Bo as VJoyPanelSection,
+  qo as VJoyRadio,
+  Ao as VJoyRadioGroup,
+  No as VJoySelect,
+  tt as VJoySelectableItem,
+  Qo as VJoySelectableItemGroup,
+  He as VJoySpinner,
+  un as VJoyTemplate,
+  pn as VJoyTextarea,
+  kn as VJoyToggle,
+  Yo as VJoyWrapper
 };