@maltjoy/core-vue 3.8.0 → 3.9.1

package/dist/joy-vue.js

@@ -27,21 +27,21 @@ const vt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue
     }
   },
   setup(e) {
-    return (t, l) => (m(), p("span", {
+    return (l, t) => (m(), p("span", {
       class: w(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
       role: "status"
     }, [
-      h(t.$slots, "default", {}, () => [
+      h(l.$slots, "default", {}, () => [
         C(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;
+const V = (e, l) => {
+  const t = e.__vccOpts || e;
+  for (const [o, n] of l)
+    t[o] = n;
+  return t;
 }, pt = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-1ed08e27"]]), ht = ["teal", "white"], gt = /* @__PURE__ */ $({
   __name: "VJoySpinner",
   props: {
@@ -53,7 +53,7 @@ const V = (e, t) => {
     }
   },
   setup(e) {
-    return (t, l) => (m(), p("div", {
+    return (l, t) => (m(), p("div", {
       class: w(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
@@ -75,7 +75,7 @@ const pe = /* @__PURE__ */ V(gt, [["__scopeId", "data-v-616a29d0"]]), R = /* @__
     }
   },
   setup(e) {
-    return (t, l) => (m(), p("span", {
+    return (l, t) => (m(), p("span", {
       class: w(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
     }, [
       b("i", {
@@ -133,8 +133,8 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
     }
   },
   setup(e) {
-    const t = e, l = Me(), o = L(() => {
-      switch (t.size) {
+    const l = e, t = Me(), o = L(() => {
+      switch (l.size) {
         case "xxsmall":
           return "xxsmall";
         case "xsmall":
@@ -144,10 +144,10 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
         default:
           return "small";
       }
-    }), n = L(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
-    return (r, s) => (m(), x(ce(k(l).href ? "a" : "button"), {
-      disabled: e.loading || k(l).disabled,
-      type: k(l).type || "button",
+    }), n = L(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
+    return (r, s) => (m(), x(ce(k(t).href ? "a" : "button"), {
+      disabled: e.loading || k(t).disabled,
+      type: k(t).type || "button",
       class: w([
         "joy-button",
         `joy-button_${e.variant}`,
@@ -239,20 +239,20 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
     }
   },
   emits: ["update:checked", "focus", "blur"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(), r = g(o.indeterminate), s = g(o.invalid), a = g(!1), c = {
+  setup(e, { expose: l, emit: t }) {
+    const o = e, n = g(), r = g(o.indeterminate), s = g(o.invalid), i = g(!1), c = {
       onChange: (y) => {
         const u = y.target.checked;
-        r.value = !1, s.value = !1, l("update:checked", u);
+        r.value = !1, s.value = !1, t("update:checked", u);
       },
       onFocus: () => {
-        a.value = !0, l("focus");
+        i.value = !0, t("focus");
       },
       onBlur: () => {
-        a.value = !1, l("blur");
+        i.value = !1, t("blur");
       }
     };
-    return t({
+    return l({
       isIndeterminate: r
     }), (y, u) => (m(), p("div", {
       class: "joy-checkbox__wrapper",
@@ -267,7 +267,7 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
             "joy-checkbox__indeterminate": r.value,
             "joy-checkbox__disabled": e.disabled,
             "joy-checkbox__invalid": s.value,
-            "joy-checkbox__focusing": a.value && e.displayFocus
+            "joy-checkbox__focusing": i.value && e.displayFocus
           }
         ])
       }, [
@@ -378,15 +378,15 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-27cc9d8c"]]), Et = { cla
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
+  setup(e, { expose: l, emit: t }) {
     const o = e, n = g(!1), r = g(!1);
     function s() {
       const d = y(!1);
-      d >= 0 ? l("update:modelValue", d <= o.min ? o.min : d) : l("update:modelValue", 0), c();
+      d >= 0 ? t("update:modelValue", d <= o.min ? o.min : d) : t("update:modelValue", 0), c();
     }
-    function a() {
+    function i() {
       const d = y();
-      o.max && d <= o.max ? l("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? l("update:modelValue", o.max) : l("update:modelValue", d), c();
+      o.max && d <= o.max ? t("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? t("update:modelValue", o.max) : t("update:modelValue", d), c();
     }
     function c() {
       n.value = !u();
@@ -396,17 +396,17 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-27cc9d8c"]]), Et = { cla
       return parseFloat(d ? (o.modelValue + o.step).toFixed(S) : (o.modelValue - o.step).toFixed(S));
     }
     function u() {
-      return v() && i();
+      return v() && a();
     }
     function v() {
       return !o.max || o.modelValue <= o.max;
     }
-    function i() {
+    function a() {
       return o.min <= o.modelValue;
     }
     const f = {
       onInput: (d) => {
-        l("update:modelValue", +d.target.value || 0), n.value = !1;
+        t("update:modelValue", +d.target.value || 0), n.value = !1;
       },
       onFocus: () => {
         r.value = !0;
@@ -415,7 +415,7 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-27cc9d8c"]]), Et = { cla
         r.value = !1, c();
       }
     };
-    return t({
+    return l({
       props: o
     }), (d, j) => (m(), p("div", Et, [
       e.label ? (m(), x(k(W), {
@@ -471,7 +471,7 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-27cc9d8c"]]), Et = { cla
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: a
+          onClick: i
         }, [
           N(k(R), { name: "add" })
         ], 8, qt),
@@ -489,42 +489,42 @@ const K = typeof window < "u", Ge = (e) => typeof e == "string", z = () => {
 function P(e) {
   return typeof e == "function" ? e() : k(e);
 }
-function Ke(e, t) {
-  function l(...o) {
+function Ke(e, l) {
+  function t(...o) {
     return new Promise((n, r) => {
-      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(n).catch(r);
+      Promise.resolve(e(() => l.apply(this, o), { fn: l, thisArg: this, args: o })).then(n).catch(r);
     });
   }
-  return l;
+  return t;
 }
-function Dt(e, t = {}) {
-  let l, o, n = z;
-  const r = (a) => {
-    clearTimeout(a), n(), n = z;
+function Dt(e, l = {}) {
+  let t, o, n = z;
+  const r = (i) => {
+    clearTimeout(i), n(), n = z;
   };
-  return (a) => {
-    const c = P(e), y = P(t.maxWait);
-    return l && r(l), c <= 0 || y !== void 0 && y <= 0 ? (o && (r(o), o = null), Promise.resolve(a())) : new Promise((u, v) => {
-      n = t.rejectOnCancel ? v : u, y && !o && (o = setTimeout(() => {
-        l && r(l), o = null, u(a());
-      }, y)), l = setTimeout(() => {
-        o && r(o), o = null, u(a());
+  return (i) => {
+    const c = P(e), y = P(l.maxWait);
+    return t && r(t), c <= 0 || y !== void 0 && y <= 0 ? (o && (r(o), o = null), Promise.resolve(i())) : new Promise((u, v) => {
+      n = l.rejectOnCancel ? v : u, y && !o && (o = setTimeout(() => {
+        t && r(t), o = null, u(i());
+      }, y)), t = setTimeout(() => {
+        o && r(o), o = null, u(i());
       }, c);
     });
   };
 }
-function Rt(e, t = !0, l = !0, o = !1) {
-  let n = 0, r, s = !0, a = z, c;
+function Rt(e, l = !0, t = !0, o = !1) {
+  let n = 0, r, s = !0, i = z, c;
   const y = () => {
-    r && (clearTimeout(r), r = void 0, a(), a = z);
+    r && (clearTimeout(r), r = void 0, i(), i = z);
   };
   return (v) => {
-    const i = P(e), f = Date.now() - n, d = () => c = v();
-    return y(), i <= 0 ? (n = Date.now(), d()) : (f > i && (l || !s) ? (n = Date.now(), d()) : t && (c = new Promise((j, S) => {
-      a = o ? S : j, r = setTimeout(() => {
+    const a = P(e), f = Date.now() - n, d = () => c = v();
+    return y(), a <= 0 ? (n = Date.now(), d()) : (f > a && (t || !s) ? (n = Date.now(), d()) : l && (c = new Promise((j, S) => {
+      i = o ? S : j, r = setTimeout(() => {
         n = Date.now(), s = !0, j(d()), y();
-      }, Math.max(0, i - f));
-    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, c);
+      }, Math.max(0, a - f));
+    })), !t && !r && (r = setTimeout(() => s = !0, a)), s = !1, c);
   };
 }
 const M = {
@@ -538,106 +538,106 @@ function Mt(e) {
 function Q(e) {
   return nt() ? (at(e), !0) : !1;
 }
-function Nt(e, t = 200, l = {}) {
-  return Ke(Dt(t, l), e);
+function Nt(e, l = 200, t = {}) {
+  return Ke(Dt(l, t), e);
 }
-function Ht(e, t = 200, l = !1, o = !0, n = !1) {
-  return Ke(Rt(t, l, o, n), e);
+function Ht(e, l = 200, t = !1, o = !0, n = !1) {
+  return Ke(Rt(l, t, o, n), e);
 }
 function Wt(e) {
   return typeof e == "function" ? L(e) : g(e);
 }
-function Qe(e, t = !0) {
-  it() ? X(e) : t ? e() : Ne(e);
+function Qe(e, l = !0) {
+  it() ? X(e) : l ? e() : Ne(e);
 }
 function U(e) {
-  var t;
-  const l = P(e);
-  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+  var l;
+  const t = P(e);
+  return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
 const ge = K ? window : void 0;
 K && window.document;
 K && window.navigator;
 K && window.location;
 function ae(...e) {
-  let t, l, o, n;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = ge) : [t, l, o, n] = e, !t)
+  let l, t, o, n;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([t, o, n] = e, l = ge) : [l, t, o, n] = e, !l)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
+  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, v, i, f) => (u.addEventListener(v, i, f), () => u.removeEventListener(v, i, f)), c = J(() => [U(t), P(n)], ([u, v]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((f) => a(u, i, f, v))));
+  }, i = (u, v, a, f) => (u.addEventListener(v, a, f), () => u.removeEventListener(v, a, f)), c = J(() => [U(l), P(n)], ([u, v]) => {
+    s(), u && r.push(...t.flatMap((a) => o.map((f) => i(u, a, f, v))));
   }, { immediate: !0, flush: "post" }), y = () => {
     c(), s();
   };
   return Q(y), y;
 }
 let Se = !1;
-function Ut(e, t, l = {}) {
-  const { window: o = ge, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+function Ut(e, l, t = {}) {
+  const { window: o = ge, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
-  le && !Se && (Se = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let a = !0;
-  const c = (i) => n.some((f) => {
+  le && !Se && (Se = !0, Array.from(o.document.body.children).forEach((a) => a.addEventListener("click", z)));
+  let i = !0;
+  const c = (a) => n.some((f) => {
     if (typeof f == "string")
-      return Array.from(o.document.querySelectorAll(f)).some((d) => d === i.target || i.composedPath().includes(d));
+      return Array.from(o.document.querySelectorAll(f)).some((d) => d === a.target || a.composedPath().includes(d));
     {
       const d = U(f);
-      return d && (i.target === d || i.composedPath().includes(d));
+      return d && (a.target === d || a.composedPath().includes(d));
     }
   }), u = [
-    ae(o, "click", (i) => {
+    ae(o, "click", (a) => {
       const f = U(e);
-      if (!(!f || f === i.target || i.composedPath().includes(f))) {
-        if (i.detail === 0 && (a = !c(i)), !a) {
-          a = !0;
+      if (!(!f || f === a.target || a.composedPath().includes(f))) {
+        if (a.detail === 0 && (i = !c(a)), !i) {
+          i = !0;
           return;
         }
-        t(i);
+        l(a);
       }
     }, { passive: !0, capture: r }),
-    ae(o, "pointerdown", (i) => {
+    ae(o, "pointerdown", (a) => {
       const f = U(e);
-      f && (a = !i.composedPath().includes(f) && !c(i));
+      f && (i = !a.composedPath().includes(f) && !c(a));
     }, { passive: !0 }),
-    s && ae(o, "blur", (i) => {
+    s && ae(o, "blur", (a) => {
       var f;
       const d = U(e);
-      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && l(a);
     })
   ].filter(Boolean);
-  return () => u.forEach((i) => i());
+  return () => u.forEach((a) => a());
 }
-function Gt(e, t = !1) {
-  const l = g(), o = () => l.value = Boolean(e());
-  return o(), Qe(o, t), l;
+function Gt(e, l = !1) {
+  const t = g(), o = () => t.value = Boolean(e());
+  return o(), Qe(o, l), t;
 }
 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 je = Object.getOwnPropertySymbols, Kt = Object.prototype.hasOwnProperty, Qt = Object.prototype.propertyIsEnumerable, Zt = (e, t) => {
-  var l = {};
+var je = Object.getOwnPropertySymbols, Kt = Object.prototype.hasOwnProperty, Qt = Object.prototype.propertyIsEnumerable, Zt = (e, l) => {
+  var t = {};
   for (var o in e)
-    Kt.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
+    Kt.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
   if (e != null && je)
     for (var o of je(e))
-      t.indexOf(o) < 0 && Qt.call(e, o) && (l[o] = e[o]);
-  return l;
+      l.indexOf(o) < 0 && Qt.call(e, o) && (t[o] = e[o]);
+  return t;
 };
-function Yt(e, t, l = {}) {
-  const o = l, { window: n = ge } = o, r = Zt(o, ["window"]);
+function Yt(e, l, t = {}) {
+  const o = t, { window: n = ge } = o, r = Zt(o, ["window"]);
   let s;
-  const a = Gt(() => n && "ResizeObserver" in n), c = () => {
+  const i = Gt(() => n && "ResizeObserver" in n), c = () => {
     s && (s.disconnect(), s = void 0);
   }, y = J(() => U(e), (v) => {
-    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
+    c(), i.value && n && v && (s = new ResizeObserver(l), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
     c(), y();
   };
   return Q(u), {
-    isSupported: a,
+    isSupported: i,
     stop: u
   };
 }
@@ -646,23 +646,23 @@ var ke;
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
 })(ke || (ke = {}));
 function Xt(e) {
-  const t = g(e == null ? void 0 : e.element), l = g(e == null ? void 0 : e.input);
+  const l = g(e == null ? void 0 : e.element), t = g(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));
+    l.value && (l.value.style.height = "1px", l.value.style.height = `${(n = l.value) == null ? void 0 : n.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
   }
-  return J([l, t], o, { immediate: !0 }), Yt(t, () => o()), e != null && e.watch && J(e.watch, o, { immediate: !0, deep: !0 }), {
-    textarea: t,
-    input: l,
+  return J([t, l], o, { immediate: !0 }), Yt(l, () => o()), e != null && e.watch && J(e.watch, o, { immediate: !0, deep: !0 }), {
+    textarea: l,
+    input: t,
     triggerResize: o
   };
 }
-var el = Object.defineProperty, $e = Object.getOwnPropertySymbols, tl = Object.prototype.hasOwnProperty, ll = Object.prototype.propertyIsEnumerable, Ve = (e, t, l) => t in e ? el(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, ol = (e, t) => {
-  for (var l in t || (t = {}))
-    tl.call(t, l) && Ve(e, l, t[l]);
+var el = Object.defineProperty, $e = Object.getOwnPropertySymbols, tl = Object.prototype.hasOwnProperty, ll = Object.prototype.propertyIsEnumerable, Ve = (e, l, t) => l in e ? el(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, ol = (e, l) => {
+  for (var t in l || (l = {}))
+    tl.call(l, t) && Ve(e, t, l[t]);
   if ($e)
-    for (var l of $e(t))
-      ll.call(t, l) && Ve(e, l, t[l]);
+    for (var t of $e(l))
+      ll.call(l, t) && Ve(e, t, l[t]);
   return e;
 };
 const nl = {
@@ -698,200 +698,200 @@ const al = /* @__PURE__ */ $({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
-  setup(e, { slots: t, emit: l }) {
+  setup(e, { slots: l, emit: t }) {
     const o = g();
     return Ut(o, (n) => {
-      l("trigger", n);
+      t("trigger", n);
     }, e.options), () => {
-      if (t.default)
-        return rt(e.as || "div", { ref: o }, t.default());
+      if (l.default)
+        return rt(e.as || "div", { ref: o }, l.default());
     };
   }
 });
 function q(e) {
-  var t;
-  const l = P(e);
-  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+  var l;
+  const t = P(e);
+  return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
 const H = K ? window : void 0;
 function A(...e) {
-  let t, l, o, n;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = H) : [t, l, o, n] = e, !t)
+  let l, t, o, n;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([t, o, n] = e, l = H) : [l, t, o, n] = e, !l)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
+  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, v, i, f) => (u.addEventListener(v, i, f), () => u.removeEventListener(v, i, f)), c = J(() => [q(t), P(n)], ([u, v]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((f) => a(u, i, f, v))));
+  }, i = (u, v, a, f) => (u.addEventListener(v, a, f), () => u.removeEventListener(v, a, f)), c = J(() => [q(l), P(n)], ([u, v]) => {
+    s(), u && r.push(...t.flatMap((a) => o.map((f) => i(u, a, f, v))));
   }, { immediate: !0, flush: "post" }), y = () => {
     c(), s();
   };
   return Q(y), y;
 }
 let xe = !1;
-function Ie(e, t, l = {}) {
-  const { window: o = H, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+function Ie(e, l, t = {}) {
+  const { window: o = H, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
-  le && !xe && (xe = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let a = !0;
-  const c = (i) => n.some((f) => {
+  le && !xe && (xe = !0, Array.from(o.document.body.children).forEach((a) => a.addEventListener("click", z)));
+  let i = !0;
+  const c = (a) => n.some((f) => {
     if (typeof f == "string")
-      return Array.from(o.document.querySelectorAll(f)).some((d) => d === i.target || i.composedPath().includes(d));
+      return Array.from(o.document.querySelectorAll(f)).some((d) => d === a.target || a.composedPath().includes(d));
     {
       const d = q(f);
-      return d && (i.target === d || i.composedPath().includes(d));
+      return d && (a.target === d || a.composedPath().includes(d));
     }
   }), u = [
-    A(o, "click", (i) => {
+    A(o, "click", (a) => {
       const f = q(e);
-      if (!(!f || f === i.target || i.composedPath().includes(f))) {
-        if (i.detail === 0 && (a = !c(i)), !a) {
-          a = !0;
+      if (!(!f || f === a.target || a.composedPath().includes(f))) {
+        if (a.detail === 0 && (i = !c(a)), !i) {
+          i = !0;
           return;
         }
-        t(i);
+        l(a);
       }
     }, { passive: !0, capture: r }),
-    A(o, "pointerdown", (i) => {
+    A(o, "pointerdown", (a) => {
       const f = q(e);
-      f && (a = !i.composedPath().includes(f) && !c(i));
+      f && (i = !a.composedPath().includes(f) && !c(a));
     }, { passive: !0 }),
-    s && A(o, "blur", (i) => {
+    s && A(o, "blur", (a) => {
       var f;
       const d = q(e);
-      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      ((f = o.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && l(a);
     })
   ].filter(Boolean);
-  return () => u.forEach((i) => i());
+  return () => u.forEach((a) => a());
 }
 M.mounted + "", M.unmounted + "";
-const il = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+const il = (e) => typeof e == "function" ? e : typeof e == "string" ? (l) => l.key === e : Array.isArray(e) ? (l) => e.includes(l.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 = H, eventName: r = "keydown", passive: s = !1 } = o, a = il(t);
+  let l, t, o = {};
+  e.length === 3 ? (l = e[0], t = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (l = !0, t = e[0], o = e[1]) : (l = e[0], t = e[1]) : (l = !0, t = e[0]);
+  const { target: n = H, eventName: r = "keydown", passive: s = !1 } = o, i = il(l);
   return A(n, r, (y) => {
-    a(y) && l(y);
+    i(y) && t(y);
   }, s);
 }
-var rl = Object.defineProperty, Be = Object.getOwnPropertySymbols, sl = Object.prototype.hasOwnProperty, ul = Object.prototype.propertyIsEnumerable, Le = (e, t, l) => t in e ? rl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, dl = (e, t) => {
-  for (var l in t || (t = {}))
-    sl.call(t, l) && Le(e, l, t[l]);
+var rl = Object.defineProperty, Be = Object.getOwnPropertySymbols, sl = Object.prototype.hasOwnProperty, ul = Object.prototype.propertyIsEnumerable, Le = (e, l, t) => l in e ? rl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, dl = (e, l) => {
+  for (var t in l || (l = {}))
+    sl.call(l, t) && Le(e, t, l[t]);
   if (Be)
-    for (var l of Be(t))
-      ul.call(t, l) && Le(e, l, t[l]);
+    for (var t of Be(l))
+      ul.call(l, t) && Le(e, t, l[t]);
   return e;
 };
 M.mounted + "";
 const cl = 500;
-function Ee(e, t, l) {
+function Ee(e, l, t) {
   var o, n;
   const r = L(() => q(e));
   let s;
-  function a() {
+  function i() {
     s && (clearTimeout(s), s = void 0);
   }
   function c(u) {
-    var v, i, f, d;
-    (v = l == null ? void 0 : l.modifiers) != null && v.self && u.target !== r.value || (a(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && u.preventDefault(), (f = l == null ? void 0 : l.modifiers) != null && f.stop && u.stopPropagation(), s = setTimeout(() => t(u), (d = l == null ? void 0 : l.delay) != null ? d : cl));
+    var v, a, f, d;
+    (v = t == null ? void 0 : t.modifiers) != null && v.self && u.target !== r.value || (i(), (a = t == null ? void 0 : t.modifiers) != null && a.prevent && u.preventDefault(), (f = t == null ? void 0 : t.modifiers) != null && f.stop && u.stopPropagation(), s = setTimeout(() => l(u), (d = t == null ? void 0 : t.delay) != null ? d : cl));
   }
   const y = {
-    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
+    capture: (o = t == null ? void 0 : t.modifiers) == null ? void 0 : o.capture,
+    once: (n = t == null ? void 0 : t.modifiers) == null ? void 0 : n.once
   };
-  A(r, "pointerdown", c, y), A(r, "pointerup", a, y), A(r, "pointerleave", a, y);
+  A(r, "pointerdown", c, y), A(r, "pointerup", i, y), A(r, "pointerleave", i, y);
 }
 M.mounted + "";
 const se = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ue = "__vueuse_ssr_handlers__";
 se[ue] = se[ue] || {};
 se[ue];
-function Ze(e, t = !1) {
-  const l = g(), o = () => l.value = Boolean(e());
-  return o(), Qe(o, t), l;
+function Ze(e, l = !1) {
+  const t = g(), o = () => t.value = Boolean(e());
+  return o(), Qe(o, l), t;
 }
-function fl(e, t = {}) {
-  const l = t ? t.delayEnter : 0, o = t ? t.delayLeave : 0, n = g(!1);
+function fl(e, l = {}) {
+  const t = l ? l.delayEnter : 0, o = l ? l.delayLeave : 0, n = g(!1);
   let r;
-  const s = (a) => {
-    const c = a ? l : o;
-    r && (clearTimeout(r), r = void 0), c ? r = setTimeout(() => n.value = a, c) : n.value = a;
+  const s = (i) => {
+    const c = i ? t : o;
+    r && (clearTimeout(r), r = void 0), c ? r = setTimeout(() => n.value = i, c) : n.value = i;
   };
   return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), n;
 }
 M.mounted + "";
-var Ce = Object.getOwnPropertySymbols, yl = Object.prototype.hasOwnProperty, vl = Object.prototype.propertyIsEnumerable, ml = (e, t) => {
-  var l = {};
+var Ce = Object.getOwnPropertySymbols, yl = Object.prototype.hasOwnProperty, vl = Object.prototype.propertyIsEnumerable, ml = (e, l) => {
+  var t = {};
   for (var o in e)
-    yl.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
+    yl.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
   if (e != null && Ce)
     for (var o of Ce(e))
-      t.indexOf(o) < 0 && vl.call(e, o) && (l[o] = e[o]);
-  return l;
+      l.indexOf(o) < 0 && vl.call(e, o) && (t[o] = e[o]);
+  return t;
 };
-function pl(e, t, l = {}) {
-  const o = l, { window: n = H } = o, r = ml(o, ["window"]);
+function pl(e, l, t = {}) {
+  const o = t, { window: n = H } = o, r = ml(o, ["window"]);
   let s;
-  const a = Ze(() => n && "ResizeObserver" in n), c = () => {
+  const i = Ze(() => n && "ResizeObserver" in n), c = () => {
     s && (s.disconnect(), s = void 0);
   }, y = J(() => q(e), (v) => {
-    c(), a.value && n && v && (s = new ResizeObserver(t), s.observe(v, r));
+    c(), i.value && n && v && (s = new ResizeObserver(l), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
     c(), y();
   };
   return Q(u), {
-    isSupported: a,
+    isSupported: i,
     stop: u
   };
 }
-function hl(e, t = { width: 0, height: 0 }, l = {}) {
-  const { window: o = H, box: n = "content-box" } = l, r = L(() => {
+function hl(e, l = { width: 0, height: 0 }, t = {}) {
+  const { window: o = H, box: n = "content-box" } = t, r = L(() => {
     var c, y;
     return (y = (c = q(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : y.includes("svg");
-  }), s = g(t.width), a = g(t.height);
+  }), s = g(l.width), i = g(l.height);
   return pl(e, ([c]) => {
     const y = n === "border-box" ? c.borderBoxSize : n === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
     if (o && r.value) {
       const u = q(e);
       if (u) {
         const v = o.getComputedStyle(u);
-        s.value = parseFloat(v.width), a.value = parseFloat(v.height);
+        s.value = parseFloat(v.width), i.value = parseFloat(v.height);
       }
     } else if (y) {
       const u = Array.isArray(y) ? y : [y];
-      s.value = u.reduce((v, { inlineSize: i }) => v + i, 0), a.value = u.reduce((v, { blockSize: i }) => v + i, 0);
+      s.value = u.reduce((v, { inlineSize: a }) => v + a, 0), i.value = u.reduce((v, { blockSize: a }) => v + a, 0);
     } else
-      s.value = c.contentRect.width, a.value = c.contentRect.height;
-  }, l), J(() => q(e), (c) => {
-    s.value = c ? t.width : 0, a.value = c ? t.height : 0;
+      s.value = c.contentRect.width, i.value = c.contentRect.height;
+  }, t), J(() => q(e), (c) => {
+    s.value = c ? l.width : 0, i.value = c ? l.height : 0;
   }), {
     width: s,
-    height: a
+    height: i
   };
 }
 M.mounted + "";
-function Je(e, { window: t = H, scrollTarget: l } = {}) {
+function Je(e, { window: l = H, scrollTarget: t } = {}) {
   const o = g(!1), n = () => {
-    if (!t)
+    if (!l)
       return;
-    const r = t.document, s = q(e);
+    const r = l.document, s = q(e);
     if (!s)
       o.value = !1;
     else {
-      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;
+      const i = s.getBoundingClientRect();
+      o.value = i.top <= (l.innerHeight || r.documentElement.clientHeight) && i.left <= (l.innerWidth || r.documentElement.clientWidth) && i.bottom >= 0 && i.right >= 0;
     }
   };
-  return J(() => q(e), () => n(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", n, {
+  return J(() => q(e), () => n(), { immediate: !0, flush: "post" }), l && A(t || l, "scroll", n, {
     capture: !1,
     passive: !0
   }), o;
 }
 M.mounted + "";
 const Pe = 1;
-function de(e, t = {}) {
+function de(e, l = {}) {
   const {
-    throttle: l = 0,
+    throttle: t = 0,
     idle: o = 200,
     onStop: n = z,
     onScroll: r = z,
@@ -901,19 +901,19 @@ function de(e, t = {}) {
       top: 0,
       bottom: 0
     },
-    eventListenerOptions: a = {
+    eventListenerOptions: i = {
       capture: !1,
       passive: !0
     },
     behavior: c = "auto"
-  } = t, y = g(0), u = g(0), v = L({
+  } = l, y = g(0), u = g(0), v = L({
     get() {
       return y.value;
     },
     set(E) {
       f(E, void 0);
     }
-  }), i = L({
+  }), a = L({
     get() {
       return u.value;
     },
@@ -925,7 +925,7 @@ function de(e, t = {}) {
     var D, F, _e;
     const ne = P(e);
     ne && ((_e = ne instanceof Document ? document.body : ne) == null || _e.scrollTo({
-      top: (D = P(T)) != null ? D : i.value,
+      top: (D = P(T)) != null ? D : a.value,
       left: (F = P(E)) != null ? F : v.value,
       behavior: P(c)
     }));
@@ -942,43 +942,43 @@ function de(e, t = {}) {
     bottom: !1
   }), ee = (E) => {
     d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, n(E));
-  }, oe = Nt(ee, l + o), O = (E) => {
+  }, oe = Nt(ee, t + o), O = (E) => {
     const T = E.target === document ? E.target.documentElement : E.target, D = T.scrollLeft;
     S.left = D < y.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + T.clientWidth >= T.scrollWidth - (s.right || 0) - Pe, y.value = D;
     let F = T.scrollTop;
     E.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + T.clientHeight >= T.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(E), r(E);
   };
-  return A(e, "scroll", l ? Ht(O, l, !0, !1) : O, a), A(e, "scrollend", ee, a), {
+  return A(e, "scroll", t ? Ht(O, t, !0, !1) : O, i), A(e, "scrollend", ee, i), {
     x: v,
-    y: i,
+    y: a,
     isScrolling: d,
     arrivedState: j,
     directions: S
   };
 }
-var gl = Object.defineProperty, bl = Object.defineProperties, _l = Object.getOwnPropertyDescriptors, qe = Object.getOwnPropertySymbols, wl = Object.prototype.hasOwnProperty, Sl = Object.prototype.propertyIsEnumerable, Te = (e, t, l) => t in e ? gl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, ze = (e, t) => {
-  for (var l in t || (t = {}))
-    wl.call(t, l) && Te(e, l, t[l]);
+var gl = Object.defineProperty, bl = Object.defineProperties, _l = Object.getOwnPropertyDescriptors, qe = Object.getOwnPropertySymbols, wl = Object.prototype.hasOwnProperty, Sl = Object.prototype.propertyIsEnumerable, Te = (e, l, t) => l in e ? gl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, ze = (e, l) => {
+  for (var t in l || (l = {}))
+    wl.call(l, t) && Te(e, t, l[t]);
   if (qe)
-    for (var l of qe(t))
-      Sl.call(t, l) && Te(e, l, t[l]);
+    for (var t of qe(l))
+      Sl.call(l, t) && Te(e, t, l[t]);
   return e;
-}, jl = (e, t) => bl(e, _l(t));
-function Ae(e, t, l = {}) {
+}, jl = (e, l) => bl(e, _l(l));
+function Ae(e, l, t = {}) {
   var o, n;
-  const r = (o = l.direction) != null ? o : "bottom", s = te(de(e, jl(ze({}, l), {
+  const r = (o = t.direction) != null ? o : "bottom", s = te(de(e, jl(ze({}, t), {
     offset: ze({
-      [r]: (n = l.distance) != null ? n : 0
-    }, l.offset)
+      [r]: (n = t.distance) != null ? n : 0
+    }, t.offset)
   })));
-  J(() => s.arrivedState[r], async (a) => {
+  J(() => s.arrivedState[r], async (i) => {
     var c, y;
-    if (a) {
+    if (i) {
       const u = P(e), v = {
         height: (c = u == null ? void 0 : u.scrollHeight) != null ? c : 0,
         width: (y = u == null ? void 0 : u.scrollWidth) != null ? y : 0
       };
-      await t(s), l.preserveScrollPosition && u && Ne(() => {
+      await l(s), t.preserveScrollPosition && u && Ne(() => {
         u.scrollTo({
           top: u.scrollHeight - v.height,
           left: u.scrollWidth - v.width
@@ -988,22 +988,22 @@ function Ae(e, t, l = {}) {
   });
 }
 M.mounted + "";
-function Fe(e, t, l = {}) {
+function Fe(e, l, t = {}) {
   const {
     root: o,
     rootMargin: n = "0px",
     threshold: r = 0.1,
     window: s = H
-  } = l, a = Ze(() => s && "IntersectionObserver" in s);
+  } = t, i = Ze(() => s && "IntersectionObserver" in s);
   let c = z;
-  const y = a.value ? J(() => ({
+  const y = i.value ? J(() => ({
     el: q(e),
     root: q(o)
-  }), ({ el: v, root: i }) => {
+  }), ({ el: v, root: a }) => {
     if (c(), !v)
       return;
-    const f = new IntersectionObserver(t, {
-      root: i,
+    const f = new IntersectionObserver(l, {
+      root: a,
       rootMargin: n,
       threshold: r
     });
@@ -1014,75 +1014,75 @@ function Fe(e, t, l = {}) {
     c(), y();
   };
   return Q(u), {
-    isSupported: a,
+    isSupported: i,
     stop: u
   };
 }
 M.mounted + "";
-var kl = Object.defineProperty, $l = Object.defineProperties, Vl = Object.getOwnPropertyDescriptors, De = Object.getOwnPropertySymbols, xl = Object.prototype.hasOwnProperty, Il = Object.prototype.propertyIsEnumerable, Re = (e, t, l) => t in e ? kl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Ol = (e, t) => {
-  for (var l in t || (t = {}))
-    xl.call(t, l) && Re(e, l, t[l]);
+var kl = Object.defineProperty, $l = Object.defineProperties, Vl = Object.getOwnPropertyDescriptors, De = Object.getOwnPropertySymbols, xl = Object.prototype.hasOwnProperty, Il = Object.prototype.propertyIsEnumerable, Re = (e, l, t) => l in e ? kl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Ol = (e, l) => {
+  for (var t in l || (l = {}))
+    xl.call(l, t) && Re(e, t, l[t]);
   if (De)
-    for (var l of De(t))
-      Il.call(t, l) && Re(e, l, t[l]);
+    for (var t of De(l))
+      Il.call(l, t) && Re(e, t, l[t]);
   return e;
-}, Bl = (e, t) => $l(e, Vl(t));
+}, Bl = (e, l) => $l(e, Vl(l));
 M.mounted + "";
 function Ye(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)
+  const l = window.getComputedStyle(e);
+  if (l.overflowX === "scroll" || l.overflowY === "scroll" || l.overflowX === "auto" && e.clientHeight < e.scrollHeight || l.overflowY === "auto" && e.clientWidth < e.scrollWidth)
     return !0;
   {
-    const l = e.parentNode;
-    return !l || l.tagName === "BODY" ? !1 : Ye(l);
+    const t = e.parentNode;
+    return !t || t.tagName === "BODY" ? !1 : Ye(t);
   }
 }
 function Ll(e) {
-  const t = e || window.event, l = t.target;
-  return Ye(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+  const l = e || window.event, t = l.target;
+  return Ye(t) ? !1 : l.touches.length > 1 ? !0 : (l.preventDefault && l.preventDefault(), !1);
 }
-function El(e, t = !1) {
-  const l = g(t);
+function El(e, l = !1) {
+  const t = g(l);
   let o = null, n;
-  J(Wt(e), (a) => {
-    if (a) {
-      const c = a;
-      n = c.style.overflow, l.value && (c.style.overflow = "hidden");
+  J(Wt(e), (i) => {
+    if (i) {
+      const c = i;
+      n = c.style.overflow, t.value && (c.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const r = () => {
-    const a = P(e);
-    !a || l.value || (le && (o = A(a, "touchmove", (c) => {
+    const i = P(e);
+    !i || t.value || (le && (o = A(i, "touchmove", (c) => {
       Ll(c);
-    }, { passive: !1 })), a.style.overflow = "hidden", l.value = !0);
+    }, { passive: !1 })), i.style.overflow = "hidden", t.value = !0);
   }, s = () => {
-    const a = P(e);
-    !a || !l.value || (le && (o == null || o()), a.style.overflow = n, l.value = !1);
+    const i = P(e);
+    !i || !t.value || (le && (o == null || o()), i.style.overflow = n, t.value = !1);
   };
   return Q(s), L({
     get() {
-      return l.value;
+      return t.value;
     },
-    set(a) {
-      a ? r() : s();
+    set(i) {
+      i ? r() : s();
     }
   });
 }
 const Cl = () => {
   let e = !1;
-  const t = g(!1);
-  return (l, o) => {
-    if (t.value = o.value, e)
+  const l = g(!1);
+  return (t, o) => {
+    if (l.value = o.value, e)
       return;
     e = !0;
-    const n = El(l, o.value);
-    J(t, (r) => n.value = r);
+    const n = El(t, o.value);
+    J(l, (r) => n.value = r);
   };
 };
 Cl();
-const Xe = ["medium", "small"], Jl = {
+const Xe = ["medium", "small", "xsmall"], Jl = {
   key: 0,
   class: "joy-dropdown-list__header"
 }, Pl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], ql = {
@@ -1097,12 +1097,13 @@ const Xe = ["medium", "small"], Jl = {
     options: {
       type: Array,
       validator(e) {
-        return e.every((t) => Object.keys(t).includes("value") || Object.keys(t).includes("id"));
+        return e.every((l) => Object.keys(l).includes("value") || Object.keys(l).includes("id"));
       },
       default() {
         return [];
       }
     },
+    /** Customize the actual size of each items. */
     size: {
       type: String,
       default: "medium",
@@ -1123,64 +1124,64 @@ const Xe = ["medium", "small"], Jl = {
     }
   },
   emits: ["update:modelValue", "close:dropdownList"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(), r = L(() => (i) => !o.modelValue && !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
-    function s(i) {
-      i.disabled || l("update:modelValue", i.value || i.id);
+  setup(e, { expose: l, emit: t }) {
+    const o = e, n = g(), r = L(() => (a) => !o.modelValue || !a.value && !a.id ? !1 : o.modelValue === a.value || o.modelValue === a.id);
+    function s(a) {
+      a.disabled || t("update:modelValue", a.value || a.id);
     }
-    function a() {
-      var i;
-      return Array.from(((i = n.value) == null ? void 0 : i.querySelectorAll("li")) || []);
+    function i() {
+      var a;
+      return Array.from(((a = n.value) == null ? void 0 : a.querySelectorAll("li")) || []);
     }
     function c() {
-      const i = a().find((f) => f.getAttribute("aria-selected") === "true");
-      i && (i.focus(), n.value.scrollTo({
-        top: i.offsetTop
+      const a = i().find((f) => f.getAttribute("aria-selected") === "true");
+      a && (a.focus(), n.value.scrollTo({
+        top: a.offsetTop
       }));
     }
     function y() {
-      return a().find((i) => i === document.activeElement);
+      return i().find((a) => a === document.activeElement);
     }
-    function u(i) {
+    function u(a) {
       var f;
-      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), y() && ((f = n.value) != null && f.contains(y())))) {
+      if ((a.key === "Escape" || a.key === "Tab") && t("close:dropdownList"), (a.key === "Enter" || a.key === "enter") && (a.preventDefault(), y() && ((f = n.value) != null && f.contains(y())))) {
         const d = y();
         if (!d)
           return;
         if (d.querySelector("a"))
           return d.querySelector("a").click();
-        l("update:modelValue", d.dataModel);
+        t("update:modelValue", d.dataModel);
       }
-      if (y() && i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
-        const d = a(), j = y();
+      if (y() && a.key === " " && a.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(a.key)) {
+        const d = i(), j = y();
         let S = d.indexOf(j);
         if (d.length) {
-          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), v(d[S]);
+          a.preventDefault(), a.key === "ArrowDown" ? S++ : a.key === "ArrowUp" ? S-- : a.key === "Home" ? S = 0 : a.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), v(d[S]);
           return;
         }
       }
     }
-    function v(i) {
-      i.focus();
+    function v(a) {
+      a.focus();
     }
     return X(() => {
       window.addEventListener("keydown", u), c();
     }), He(() => {
       window.removeEventListener("keydown", u);
-    }), t({
+    }), l({
       isSelected: r
-    }), (i, f) => (m(), p("div", {
+    }), (a, f) => (m(), p("div", {
       class: "joy-dropdown-list",
       style: Z({ width: `${e.width}px`, "max-width": `${e.width}px` })
     }, [
-      i.$slots["dropdown-list-header"] ? (m(), p("header", Jl, [
-        h(i.$slots, "dropdown-list-header", {}, void 0, !0)
+      a.$slots["dropdown-list-header"] ? (m(), p("header", Jl, [
+        h(a.$slots, "dropdown-list-header", {}, void 0, !0)
       ])) : _("", !0),
       b("div", {
-        class: w(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": i.$slots["dropdown-list-items"] }]),
+        class: w(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": a.$slots["dropdown-list-items"] }]),
         style: Z({ "max-height": `${e.height}px` })
       }, [
-        h(i.$slots, "dropdown-list-items", {}, void 0, !0),
+        h(a.$slots, "dropdown-list-items", {}, void 0, !0),
         e.options.length ? (m(), p("ul", {
           key: 0,
           ref_key: "listbox",
@@ -1208,25 +1209,25 @@ const Xe = ["medium", "small"], Jl = {
             role: "option",
             onClick: (j) => s(d)
           }, [
-            h(i.$slots, "label", ve(me(d)), () => [
+            h(a.$slots, "label", ve(me(d)), () => [
               b("span", null, I(d.label), 1)
             ], !0)
           ], 14, Pl))), 128))
         ], 512)) : _("", !0)
       ], 6),
-      i.$slots["dropdown-list-footer"] ? (m(), p("footer", ql, [
-        h(i.$slots, "dropdown-list-footer", {}, void 0, !0)
+      a.$slots["dropdown-list-footer"] ? (m(), p("footer", ql, [
+        h(a.$slots, "dropdown-list-footer", {}, void 0, !0)
       ])) : _("", !0)
     ], 4));
   }
 });
-const et = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-1085f269"]]);
+const et = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-0a25fc40"]]);
 function zl(e) {
-  const t = () => e();
+  const l = () => e();
   X(() => {
-    window.addEventListener("resize", t);
+    window.addEventListener("resize", l);
   }), He(() => {
-    window.removeEventListener("resize", t);
+    window.removeEventListener("resize", l);
   });
 }
 const Al = /* @__PURE__ */ $({
@@ -1260,6 +1261,8 @@ const Al = /* @__PURE__ */ $({
       default: "left"
     },
     /**
+     * Use options to render a pre-designed list.
+     *
      * ```
      * interface Option {id?: string; value?: string; label: string; href?: string; disabled?:boolean; checked?:boolean}
      * ```
@@ -1267,7 +1270,7 @@ const Al = /* @__PURE__ */ $({
     options: {
       type: Array,
       validator(e) {
-        return e.every((l) => Object.keys(l).includes("label"));
+        return e.every((t) => Object.keys(t).includes("label"));
       },
       default() {
         return [];
@@ -1307,23 +1310,23 @@ const Al = /* @__PURE__ */ $({
     }
   },
   emits: ["update:modelValue", "dropdown:open", "dropdown:hide"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(!1), r = g(null), s = g(), a = g(null), c = g(null), y = g(!1), u = {
+  setup(e, { expose: l, emit: t }) {
+    const o = e, n = g(!1), r = g(null), s = g(), i = g(null), c = g(null), y = g(!1), u = {
       ignore: [s, ".joy-dropdown__list"]
     };
     let v = null;
-    const i = te({
+    const a = te({
       left: "auto",
       top: "0px",
       right: "auto"
     });
     function f() {
       v && clearTimeout(v), y.value = !0, v = setTimeout(() => {
-        n.value = !1, y.value = !1, l("dropdown:hide");
+        n.value = !1, y.value = !1, t("dropdown:hide");
       }, 300);
     }
     function d(O) {
-      y.value = !1, v && clearTimeout(v), ee(), c.value = O.target, n.value = !0, l("dropdown:open");
+      y.value = !1, v && clearTimeout(v), ee(), c.value = O.target, n.value = !0, t("dropdown:open");
     }
     function j() {
       f(), S();
@@ -1333,12 +1336,12 @@ const Al = /* @__PURE__ */ $({
     }
     function ee() {
       const O = s.value.getBoundingClientRect(), E = document.documentElement.scrollTop + O.top, T = O.height, D = O.left, F = O.width;
-      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = E + T + parseInt(o.dropdownGap) + "px" : i.top = E - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
+      o.justify === "left" ? a.left = D + "px" : a.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? a.top = E + T + parseInt(o.dropdownGap) + "px" : a.top = E - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
     function oe(O) {
-      l("update:modelValue", O), o.closeOnSelect && (f(), S());
+      t("update:modelValue", O), o.closeOnSelect && (f(), S());
     }
-    return zl(f), t({
+    return zl(f), l({
       showDropdownList: n
     }), (O, E) => (m(), x(k(al), {
       ref_key: "dropdown",
@@ -1363,7 +1366,7 @@ const Al = /* @__PURE__ */ $({
           n.value ? (m(), p("div", {
             key: 0,
             ref_key: "list",
-            ref: a,
+            ref: i,
             class: w([
               "joy-dropdown__list",
               `joy-dropdown__list--${e.direction}`,
@@ -1373,8 +1376,8 @@ const Al = /* @__PURE__ */ $({
               }
             ]),
             style: Z({
-              top: i.top,
-              left: i.left
+              top: a.top,
+              left: a.left
             })
           }, [
             N(et, {
@@ -1422,7 +1425,7 @@ const Al = /* @__PURE__ */ $({
     }, 512));
   }
 });
-const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["aria-hidden"], Rl = /* @__PURE__ */ $({
+const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-4d9d2251"]]), Dl = ["aria-hidden"], Rl = /* @__PURE__ */ $({
   __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -1434,7 +1437,7 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
     noHtmlErrorText: String
   },
   setup(e) {
-    return (t, l) => (m(), p("div", {
+    return (l, t) => (m(), p("div", {
       "aria-hidden": e.visible,
       class: w(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
@@ -1444,7 +1447,7 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
         name: "warning-triangle"
       }),
       b("div", null, [
-        h(t.$slots, "default", {}, () => [
+        h(l.$slots, "default", {}, () => [
           C(I(e.noHtmlErrorText), 1)
         ], !0)
       ])
@@ -1453,18 +1456,18 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
 });
 const tt = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-581fd33b"]]);
 function Ml(e) {
-  let t;
+  let l;
   switch (e) {
     case "error":
-      t = "warning-triangle";
+      l = "warning-triangle";
       break;
     case "success":
-      t = "check";
+      l = "check";
       break;
     default:
-      t = "info-circle";
+      l = "info-circle";
   }
-  return t;
+  return l;
 }
 const Nl = [..._t], Hl = { class: "joy-highlight--text" }, Wl = { key: 0 }, Ul = /* @__PURE__ */ $({
   __name: "VJoyHighlight",
@@ -1488,9 +1491,9 @@ const Nl = [..._t], Hl = { class: "joy-highlight--text" }, Wl = { key: 0 }, Ul =
       }
     }
   },
-  setup(e, { expose: t }) {
-    const l = e, o = L(() => l.icon ? l.icon : Ml(l.level));
-    return t({
+  setup(e, { expose: l }) {
+    const t = e, o = L(() => t.icon ? t.icon : Ml(t.level));
+    return l({
       getRelevantIcon: o
     }), (n, r) => (m(), p("div", {
       class: w([
@@ -1545,11 +1548,11 @@ const Gl = /* @__PURE__ */ V(Ul, [["__scopeId", "data-v-ba5e6101"]]), Kl = ["sma
     text: String
   },
   setup(e) {
-    return (t, l) => (m(), x(ce(e.tagName), Y({
+    return (l, t) => (m(), x(ce(e.tagName), Y({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, t.$attrs), {
+    }, l.$attrs), {
       default: B(() => [
-        h(t.$slots, "default", {}, () => [
+        h(l.$slots, "default", {}, () => [
           C(I(e.text), 1)
         ], !0),
         e.required ? (m(), p("span", Ql, "*")) : _("", !0),
@@ -1620,39 +1623,39 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(), n = g(), r = Me(), s = G(), a = g(!1), c = L(() => typeof l.modelValue == "number" || !l.clearable || l.unit || !l.modelValue ? !1 : l.modelValue.length > 0 && !l.unit), y = L(() => s.default && s.default()), u = L(() => {
+  setup(e, { emit: l }) {
+    const t = e, o = g(), n = g(), r = Me(), s = G(), i = g(!1), c = L(() => typeof t.modelValue == "number" || !t.clearable || t.unit || !t.modelValue ? !1 : t.modelValue.length > 0 && !t.unit), y = L(() => s.default && s.default()), u = L(() => {
       var f, d;
       return !!((f = n.value) != null && f.closest("joy-wrapper")) || !!((d = n.value) != null && d.closest(".joy-wrapper"));
-    }), v = g(l.type);
+    }), v = g(t.type);
     ut(() => {
-      v.value = l.unit ? "number" : l.unit || "text";
+      v.value = t.unit ? "number" : t.unit || "text";
     });
-    const i = {
+    const a = {
       onFocus: () => {
-        a.value = !0;
+        i.value = !0;
       },
       onBlur: () => {
-        a.value = !1;
+        i.value = !1;
       },
       onInput: (f) => {
         let d = f.target.value;
-        t("update:modelValue", d);
+        l("update:modelValue", d);
       },
       clearValue: () => {
-        l.disabled || t("update:modelValue", "");
+        t.disabled || l("update:modelValue", "");
       }
     };
     return (f, d) => (m(), p("div", {
       ref_key: "root",
       ref: n,
-      class: w([`joy-input--${l.size}`])
+      class: w([`joy-input--${t.size}`])
     }, [
       b("div", {
         class: w([
           "joy-input",
           {
-            "joy-input--focusing": a.value,
+            "joy-input--focusing": i.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
             "joy-input--valid": !e.invalid && !k(r).disabled
@@ -1685,7 +1688,7 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
           ])
         }, [
           b("input", Y(f.$attrs, {
-            id: l.name,
+            id: t.name,
             ref_key: "input",
             ref: o,
             required: e.required,
@@ -1699,11 +1702,11 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             type: v.value,
             value: e.modelValue,
             onFocus: d[0] || (d[0] = //@ts-ignore
-            (...j) => i.onFocus && i.onFocus(...j)),
+            (...j) => a.onFocus && a.onFocus(...j)),
             onBlur: d[1] || (d[1] = //@ts-ignore
-            (...j) => i.onBlur && i.onBlur(...j)),
+            (...j) => a.onBlur && a.onBlur(...j)),
             onInput: d[2] || (d[2] = //@ts-ignore
-            (...j) => i.onInput && i.onInput(...j))
+            (...j) => a.onInput && a.onInput(...j))
           }), null, 16, eo),
           c.value ? (m(), x(Ue, {
             key: 0,
@@ -1712,9 +1715,9 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             variant: "ghost",
             size: "xxsmall",
             icon: "cross",
-            onClick: i.clearValue
+            onClick: a.clearValue
           }, null, 8, ["onClick"])) : _("", !0),
-          e.icon && !e.clearable ? (m(), x(R, {
+          e.icon ? (m(), x(R, {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
@@ -1730,7 +1733,7 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
     ], 2));
   }
 });
-const oo = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-46a69828"]]), no = ["teal", "white"], ao = ["href"], io = /* @__PURE__ */ $({
+const oo = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-603ced38"]]), no = ["teal", "white"], ao = ["href"], io = /* @__PURE__ */ $({
   __name: "VJoyLink",
   props: {
     href: {
@@ -1744,26 +1747,24 @@ const oo = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-46a69828"]]), no = ["tea
         return no.includes(e);
       }
     },
-    icon: {
-      type: String
-    },
+    icon: String,
     text: String
   },
   setup(e) {
-    return (t, l) => (m(), p("a", Y({ href: e.href }, t.$attrs, {
+    return (l, t) => (m(), p("a", Y({ href: e.href }, l.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
       e.icon ? (m(), x(R, {
         key: 0,
         name: e.icon
       }, null, 8, ["name"])) : _("", !0),
-      h(t.$slots, "default", {}, () => [
+      h(l.$slots, "default", {}, () => [
         C(I(e.text), 1)
       ], !0)
     ], 16, ao));
   }
 });
-const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-a8db21c2"]]), so = ["id"], uo = {
+const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-76f0342e"]]), so = ["id"], uo = {
   class: /* @__PURE__ */ w(["joy-multi-checkbox"])
 }, co = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
@@ -1772,8 +1773,8 @@ const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-a8db21c2"]]), so = ["id"
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
-        return t && l;
+        const l = e.every((o) => Object.keys(o).includes("value")), t = e.every((o) => Object.keys(o).includes("label"));
+        return l && t;
       }
     },
     id: String,
@@ -1799,14 +1800,14 @@ const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-a8db21c2"]]), so = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: t }) {
-    const l = e;
+  setup(e, { emit: l }) {
+    const t = e;
     function o(r) {
-      return l.value.includes(r.value);
+      return t.value.includes(r.value);
     }
     function n(r, s) {
-      let a = [...l.value || []];
-      s ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
+      let i = [...t.value || []];
+      s ? i.push(r) : i.splice(i.indexOf(r), 1), l("update:value", i);
     }
     return (r, s) => (m(), p("fieldset", {
       id: e.id,
@@ -1825,17 +1826,17 @@ const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-a8db21c2"]]), so = ["id"
         _: 1
       }, 8, ["required", "optional-label", "size"])) : _("", !0),
       b("div", uo, [
-        (m(!0), p(fe, null, ye(e.options, (a) => (m(), x(k(he), {
-          id: a.id,
-          key: a.id,
-          name: a.name,
-          value: a.value,
-          checked: o(a),
-          "onUpdate:checked": (c) => n(a.value, c)
+        (m(!0), p(fe, null, ye(e.options, (i) => (m(), x(k(he), {
+          id: i.id,
+          key: i.id,
+          name: i.name,
+          value: i.value,
+          checked: o(i),
+          "onUpdate:checked": (c) => n(i.value, c)
         }, {
           default: B(() => [
-            h(r.$slots, "checkbox", ve(me(a)), () => [
-              C(I(a.label), 1)
+            h(r.$slots, "checkbox", ve(me(i)), () => [
+              C(I(i.label), 1)
             ], !0)
           ]),
           _: 2
@@ -1890,8 +1891,8 @@ const fo = /* @__PURE__ */ V(co, [["__scopeId", "data-v-47574ced"]]), yo = ["sma
     }
   },
   setup(e) {
-    const t = dt("VJoyWrapperContext", {}), l = L(() => Object.keys(t).length > 0), o = G(), n = g(), r = L(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
-    return (s, a) => (m(), p("section", {
+    const l = dt("VJoyWrapperContext", {}), t = L(() => Object.keys(l).length > 0), o = G(), n = g(), r = L(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
+    return (s, i) => (m(), p("section", {
       ref_key: "panel",
       ref: n,
       style: Z({ flex: e.flex }),
@@ -1899,7 +1900,7 @@ const fo = /* @__PURE__ */ V(co, [["__scopeId", "data-v-47574ced"]]), yo = ["sma
         "joy-panel",
         `joy-panel--${e.padding}`,
         {
-          "joy-panel--no-margin": e.noMargin || l.value,
+          "joy-panel--no-margin": e.noMargin || t.value,
           "joy-panel--loading": e.loading
         }
       ])
@@ -1946,13 +1947,13 @@ const wo = /* @__PURE__ */ V(_o, [["__scopeId", "data-v-2e3a2baa"]]), So = { cla
 }, $o = /* @__PURE__ */ $({
   __name: "VJoyPanelSection",
   setup(e) {
-    const t = G();
-    return (l, o) => (m(), p("div", So, [
-      k(t)["panel-section-title"] ? (m(), p("div", jo, [
-        h(l.$slots, "panel-section-title", {}, void 0, !0)
+    const l = G();
+    return (t, o) => (m(), p("div", So, [
+      k(l)["panel-section-title"] ? (m(), p("div", jo, [
+        h(t.$slots, "panel-section-title", {}, void 0, !0)
       ])) : _("", !0),
-      k(t)["panel-section-content"] ? (m(), p("div", ko, [
-        h(l.$slots, "panel-section-content", {}, void 0, !0)
+      k(l)["panel-section-content"] ? (m(), p("div", ko, [
+        h(t.$slots, "panel-section-content", {}, void 0, !0)
       ])) : _("", !0)
     ]));
   }
@@ -1992,18 +1993,18 @@ const Vo = /* @__PURE__ */ V($o, [["__scopeId", "data-v-d88510ab"]]), xo = ["id"
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(!1), r = g(!1), s = g(null), a = g(null), c = G(), y = L(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
+  setup(e, { expose: l, emit: t }) {
+    const o = e, n = g(!1), r = g(!1), s = g(null), i = g(null), c = G(), y = L(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
     function u() {
       n.value = !!c["expandable-content"] && y.value;
     }
     function v() {
-      l("update:modelValue", o.value), u();
+      t("update:modelValue", o.value), u();
     }
     X(() => {
       o.theme === "outline" && u();
     });
-    function i() {
+    function a() {
       r.value = !0;
     }
     function f() {
@@ -2014,7 +2015,7 @@ const Vo = /* @__PURE__ */ V($o, [["__scopeId", "data-v-d88510ab"]]), xo = ["id"
       () => {
         u();
       }
-    ), t({
+    ), l({
       checked: y,
       isExpanded: n
     }), (d, j) => (m(), p("label", {
@@ -2041,7 +2042,7 @@ const Vo = /* @__PURE__ */ V($o, [["__scopeId", "data-v-d88510ab"]]), xo = ["id"
         required: e.required,
         name: e.name,
         onChange: v,
-        onFocus: i,
+        onFocus: a,
         onBlur: f
       }, null, 40, xo),
       b("span", Io, [
@@ -2053,7 +2054,7 @@ const Vo = /* @__PURE__ */ V($o, [["__scopeId", "data-v-d88510ab"]]), xo = ["id"
         ]),
         b("div", {
           ref_key: "expandableElement",
-          ref: a,
+          ref: i,
           class: w(["joy-radio-expandable", { "joy-radio-expandable--expanded": n.value }])
         }, [
           h(d.$slots, "expandable-content", {}, void 0, !0)
@@ -2083,18 +2084,18 @@ const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-24cea99b"]]), Co = ["for
     }
   },
   setup(e) {
-    return (t, l) => (m(), p("fieldset", {
+    return (l, t) => (m(), p("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      h(t.$slots, "radio-group-legend", {}, void 0, !0),
+      h(l.$slots, "radio-group-legend", {}, void 0, !0),
       b("div", {
         class: w(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        h(t.$slots, "default", {}, void 0, !0)
+        h(l.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 8, Co));
   }
@@ -2117,17 +2118,17 @@ const Po = /* @__PURE__ */ V(Jo, [["__scopeId", "data-v-a77e7f95"]]), qo = { cla
     }
   },
   setup(e) {
-    return (t, l) => (m(), p("div", {
+    return (l, t) => (m(), p("div", {
       class: w(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
     }, [
       b("div", qo, [
-        h(t.$slots, "spinner", {}, () => [
+        h(l.$slots, "spinner", {}, () => [
           N(pe, {
             color: e.color === "dark" ? "white" : "teal"
           }, null, 8, ["color"])
         ], !0),
-        t.$slots.content ? (m(), p("div", To, [
-          h(t.$slots, "content", {}, void 0, !0)
+        l.$slots.content ? (m(), p("div", To, [
+          h(l.$slots, "content", {}, void 0, !0)
         ])) : _("", !0)
       ])
     ], 2));
@@ -2157,8 +2158,7 @@ const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id"
     // ...FORM_BASED_PROPS,
     label: String,
     labelSize: {
-      type: String,
-      default: "medium"
+      type: String
     },
     optionalLabel: String,
     requiredMark: {
@@ -2169,48 +2169,52 @@ const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id"
     modelValue: {
       type: String,
       default: ""
+    },
+    size: {
+      type: String,
+      default: "medium"
     }
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(), n = g(), r = G(), s = g(!1);
+  setup(e, { emit: l }) {
+    const t = e, o = g(), n = g(), r = G(), s = g(!1), i = L(() => t.labelSize ? t.labelSize : t.size !== "medium" ? "small" : "medium");
     X(() => {
-      var i;
-      const u = r.label && r.label();
-      if (!u || !u.length)
+      var f;
+      const v = r.label && r.label();
+      if (!v || !v.length)
         return;
-      const v = u[0];
-      if (v.type === "JoyLabel") {
-        const f = (i = v.props) == null ? void 0 : i.for;
-        if (!f) {
+      const a = v[0];
+      if (a.type === "JoyLabel") {
+        const d = (f = a.props) == null ? void 0 : f.for;
+        if (!d) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        f !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        d !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function a(u) {
-      const v = u.target.value;
-      t("update:modelValue", v);
+    function c(v) {
+      const a = v.target.value;
+      l("update:modelValue", a);
     }
-    function c() {
+    function y() {
       s.value = !0;
     }
-    function y() {
+    function u() {
       s.value = !1;
     }
-    return (u, v) => (m(), p("div", {
+    return (v, a) => (m(), p("div", {
       ref_key: "root",
       ref: o
     }, [
-      h(u.$slots, "select-label", {}, () => [
+      h(v.$slots, "select-label", {}, () => [
         e.label ? (m(), x(W, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           for: e.id || e.name,
-          size: e.labelSize
+          size: i.value
         }, {
           default: B(() => [
             C(I(e.label), 1)
@@ -2219,12 +2223,15 @@ const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id"
         }, 8, ["required", "optional-label", "for", "size"])) : _("", !0)
       ], !0),
       b("div", {
-        class: w({
-          "joy-select__wrapper": !0,
-          "joy-select--invalid": e.invalid,
-          "joy-select--disabled": e.disabled,
-          "joy-select--focusing": s.value
-        })
+        class: w([
+          `joy-select--${e.size}`,
+          {
+            "joy-select__wrapper": !0,
+            "joy-select--invalid": e.invalid,
+            "joy-select--disabled": e.disabled,
+            "joy-select--focusing": s.value
+          }
+        ])
       }, [
         b("select", {
           id: e.id || e.name,
@@ -2236,11 +2243,11 @@ const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id"
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: a,
-          onFocus: c,
-          onBlur: y
+          onInput: c,
+          onFocus: y,
+          onBlur: u
         }, [
-          h(u.$slots, "default", {}, void 0, !0)
+          h(v.$slots, "default", {}, void 0, !0)
         ], 40, Ao),
         N(R, {
           class: "joy-select__chevron",
@@ -2250,7 +2257,7 @@ const be = /* @__PURE__ */ V(zo, [["__scopeId", "data-v-5c4f6d7f"]]), Ao = ["id"
     ], 512));
   }
 });
-const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["aria-disabled"], Mo = ["id", "value", "checked", "disabled", "required", "name"], No = /* @__PURE__ */ $({
+const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-18112ea4"]]), Ro = ["aria-disabled"], Mo = ["id", "value", "checked", "disabled", "required", "name"], No = /* @__PURE__ */ $({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -2286,16 +2293,16 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(l.checked), n = g(), r = g(!1), s = l.multiple ? "div" : "label", a = {
+  setup(e, { emit: l }) {
+    const t = e, o = g(t.checked), n = g(), r = g(!1), s = t.multiple ? "div" : "label", i = {
       onRadioChange: () => {
-        t("update:checked", l.value);
+        l("update:checked", t.value);
       },
       onClick: () => {
-        l.checked && !l.multiple && t("update:checked", "");
+        t.checked && !t.multiple && l("update:checked", "");
       },
       onLabelClick: (y) => {
-        l.multiple || y.stopPropagation();
+        t.multiple || y.stopPropagation();
       },
       onFocus: () => {
         r.value = !0;
@@ -2305,7 +2312,7 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
       }
     };
     function c(y) {
-      t("update:checked", y);
+      l("update:checked", y);
     }
     return (y, u) => (m(), p("div", {
       class: w([
@@ -2316,7 +2323,7 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
       ]),
       "aria-disabled": e.disabled,
       onClick: u[4] || (u[4] = //@ts-ignore
-      (...v) => a.onClick && a.onClick(...v))
+      (...v) => i.onClick && i.onClick(...v))
     }, [
       e.multiple ? _("", !0) : (m(), p("input", {
         key: 0,
@@ -2330,11 +2337,11 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
         required: e.required,
         name: e.name,
         onChange: u[0] || (u[0] = //@ts-ignore
-        (...v) => a.onRadioChange && a.onRadioChange(...v)),
+        (...v) => i.onRadioChange && i.onRadioChange(...v)),
         onFocus: u[1] || (u[1] = //@ts-ignore
-        (...v) => a.onFocus && a.onFocus(...v)),
+        (...v) => i.onFocus && i.onFocus(...v)),
         onBlur: u[2] || (u[2] = //@ts-ignore
-        (...v) => a.onBlur && a.onBlur(...v))
+        (...v) => i.onBlur && i.onBlur(...v))
       }, null, 40, Mo)),
       (m(), x(ce(k(s)), {
         for: e.id,
@@ -2347,7 +2354,7 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: a.onLabelClick
+        onClick: i.onLabelClick
       }, {
         default: B(() => [
           e.multiple ? (m(), x(k(he), {
@@ -2363,8 +2370,8 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-b1af08d1"]]), Ro = ["ari
             name: e.name,
             "display-focus": !1,
             required: e.required,
-            onFocus: a.onFocus,
-            onBlur: a.onBlur
+            onFocus: i.onFocus,
+            onBlur: i.onBlur
           }, {
             default: B(() => [
               h(y.$slots, "default", {}, void 0, !0)
@@ -2390,8 +2397,8 @@ const lt = /* @__PURE__ */ V(No, [["__scopeId", "data-v-cb2531c0"]]), Ho = ["id"
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
-        return t && l;
+        const l = e.every((o) => Object.keys(o).includes("value")), t = e.every((o) => Object.keys(o).includes("label"));
+        return l && t;
       }
     },
     id: String,
@@ -2423,16 +2430,16 @@ const lt = /* @__PURE__ */ V(No, [["__scopeId", "data-v-cb2531c0"]]), Ho = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: t }) {
-    const l = e;
+  setup(e, { emit: l }) {
+    const t = e;
     function o(r) {
-      return typeof l.value == "string" ? l.value === r.value : (l.value || []).includes(r.value);
+      return typeof t.value == "string" ? t.value === r.value : (t.value || []).includes(r.value);
     }
     function n(r, s) {
-      if (!l.multiple)
-        return t("update:value", s);
-      let a = [...l.value || []];
-      s && typeof s == "boolean" ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
+      if (!t.multiple)
+        return l("update:value", s);
+      let i = [...t.value || []];
+      s && typeof s == "boolean" ? i.push(r) : i.splice(i.indexOf(r), 1), l("update:value", i);
     }
     return (r, s) => (m(), p("fieldset", {
       id: e.id,
@@ -2460,25 +2467,25 @@ const lt = /* @__PURE__ */ V(No, [["__scopeId", "data-v-cb2531c0"]]), Ho = ["id"
           }
         ])
       }, [
-        (m(!0), p(fe, null, ye(e.options, (a) => (m(), x(k(lt), {
-          id: a.id,
-          key: a.id,
-          name: a.name,
-          disabled: a.disabled,
-          value: a.value,
+        (m(!0), p(fe, null, ye(e.options, (i) => (m(), x(k(lt), {
+          id: i.id,
+          key: i.id,
+          name: i.name,
+          disabled: i.disabled,
+          value: i.value,
           multiple: e.multiple,
-          checked: o(a),
-          "onUpdate:checked": (c) => n(a.value, c)
+          checked: o(i),
+          "onUpdate:checked": (c) => n(i.value, c)
         }, We({
           default: B(() => [
-            C(I(a.label) + " ", 1)
+            C(I(i.label) + " ", 1)
           ]),
           _: 2
         }, [
-          a.subLabel ? {
+          i.subLabel ? {
             name: "selectable-item-sublabel",
             fn: B(() => [
-              C(I(a.subLabel), 1)
+              C(I(i.subLabel), 1)
             ]),
             key: "0"
           } : void 0
@@ -2521,7 +2528,7 @@ const Uo = /* @__PURE__ */ V(Wo, [["__scopeId", "data-v-0730aed0"]]), Go = /* @_
     }
   },
   setup(e) {
-    return ct("VJoyWrapperContext", e), (l, o) => (m(), p("div", {
+    return ct("VJoyWrapperContext", e), (t, o) => (m(), p("div", {
       class: w([
         "joy-wrapper",
         `joy-wrapper--justify-${e.justify}`,
@@ -2532,7 +2539,7 @@ const Uo = /* @__PURE__ */ V(Wo, [["__scopeId", "data-v-0730aed0"]]), Go = /* @_
         { "joy-wrapper--has-margin": !e.noMargin }
       ])
     }, [
-      h(l.$slots, "default", {}, void 0, !0)
+      h(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
@@ -2572,24 +2579,24 @@ const Ko = /* @__PURE__ */ V(Go, [["__scopeId", "data-v-e2f29698"]]), Qo = { cla
     }
   },
   setup(e) {
-    const t = e, l = G(), o = L(() => !!l["template-back"] || !!l["template-title"] || !!l["template-subtitle"] || !!l["template-actions"]);
+    const l = e, t = G(), o = L(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
     return (n, r) => (m(), p("main", {
       class: w(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
     }, [
       b("div", Qo, [
         o.value ? (m(), p("div", Zo, [
-          k(l)["template-back"] ? (m(), p("div", Yo, [
+          k(t)["template-back"] ? (m(), p("div", Yo, [
             h(n.$slots, "template-back", {}, void 0, !0)
           ])) : _("", !0),
           b("div", Xo, [
-            k(l)["template-title"] ? (m(), p("div", en, [
+            k(t)["template-title"] ? (m(), p("div", en, [
               h(n.$slots, "template-title", {}, void 0, !0)
             ])) : _("", !0),
-            k(l)["template-subtitle"] ? (m(), p("div", tn, [
+            k(t)["template-subtitle"] ? (m(), p("div", tn, [
               h(n.$slots, "template-subtitle", {}, void 0, !0)
             ])) : _("", !0)
           ]),
-          k(l)["template-actions"] ? (m(), p("div", ln, [
+          k(t)["template-actions"] ? (m(), p("div", ln, [
             h(n.$slots, "template-actions", {}, void 0, !0)
           ])) : _("", !0)
         ])) : _("", !0),
@@ -2597,7 +2604,7 @@ const Ko = /* @__PURE__ */ V(Go, [["__scopeId", "data-v-e2f29698"]]), Qo = { cla
           class: w([
             "joy-template__content",
             {
-              "joy-template__content--reverse": t.sidebar === "left"
+              "joy-template__content--reverse": l.sidebar === "left"
             }
           ])
         }, [
@@ -2676,25 +2683,25 @@ const rn = /* @__PURE__ */ V(an, [["__scopeId", "data-v-a2355e4b"]]), sn = ["ari
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
+  setup(e, { expose: l, emit: t }) {
     const o = e, n = g(), { triggerResize: r } = Xt({
       element: o.autogrow ? n : void 0
-    }), s = g(!1), a = g(!1), c = L(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), y = L(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
+    }), s = g(!1), i = g(!1), c = L(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), y = L(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
       onInput: (v) => {
-        l("update:modelValue", v.target.value), r();
+        t("update:modelValue", v.target.value), r();
       },
       onBlur: () => {
-        a.value = !1, s.value = c.value || y.value;
+        i.value = !1, s.value = c.value || y.value;
       },
       onFocus: () => {
-        a.value = !0;
+        i.value = !0;
       }
     };
-    return t({
+    return l({
       isInvalid: s,
       valueOverMaxlength: c,
       valueUnderMinlength: y
-    }), (v, i) => (m(), p("div", {
+    }), (v, a) => (m(), p("div", {
       "aria-disabled": e.disabled,
       class: w([
         "joy-textarea",
@@ -2702,7 +2709,7 @@ const rn = /* @__PURE__ */ V(an, [["__scopeId", "data-v-a2355e4b"]]), sn = ["ari
           "joy-textarea_invalid": s.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow,
-          "joy-textarea_focusing": a.value
+          "joy-textarea_focusing": i.value
         }
       ])
     }, [
@@ -2730,11 +2737,11 @@ const rn = /* @__PURE__ */ V(an, [["__scopeId", "data-v-a2355e4b"]]), sn = ["ari
           required: e.required,
           minlength: e.minlength,
           value: e.modelValue,
-          onInput: i[0] || (i[0] = //@ts-ignore
+          onInput: a[0] || (a[0] = //@ts-ignore
           (...f) => u.onInput && u.onInput(...f)),
-          onFocus: i[1] || (i[1] = //@ts-ignore
+          onFocus: a[1] || (a[1] = //@ts-ignore
           (...f) => u.onFocus && u.onFocus(...f)),
-          onBlur: i[2] || (i[2] = //@ts-ignore
+          onBlur: a[2] || (a[2] = //@ts-ignore
           (...f) => u.onBlur && u.onBlur(...f))
         }), null, 16, dn)
       ]),
@@ -2805,17 +2812,17 @@ const vn = /* @__PURE__ */ V(yn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = g(!1), o = {
+  setup(e, { emit: l }) {
+    const t = g(!1), o = {
       onChange: (n) => {
         const r = n.target.checked;
-        t("update:modelValue", r);
+        l("update:modelValue", r);
       },
       onFocus: () => {
-        l.value = !0;
+        t.value = !0;
       },
       onBlur: () => {
-        l.value = !1;
+        t.value = !1;
       }
     };
     return (n, r) => (m(), p("div", mn, [
@@ -2825,7 +2832,7 @@ const vn = /* @__PURE__ */ V(yn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
           {
             "joy-toggle__checked": e.modelValue,
             "joy-toggle__disabled": e.disabled,
-            "joy-toggle__focusing": l.value
+            "joy-toggle__focusing": t.value
           }
         ])
       }, [
@@ -2890,8 +2897,8 @@ const Sn = /* @__PURE__ */ V(wn, [["__scopeId", "data-v-cf79d999"]]), jn = /* @_
   VJoyWrapper: Ko
 }, Symbol.toStringTag, { value: "Module" })), $n = {
   install: (e) => {
-    Object.entries(jn).forEach(([t, l]) => {
-      e.component(t, l);
+    Object.entries(jn).forEach(([l, t]) => {
+      e.component(l, t);
     });
   }
 };