@maltjoy/core-vue 3.6.2 → 3.7.0

package/dist/joy-vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, openBlock as v, createElementBlock as p, normalizeClass as S, renderSlot as h, createTextVNode as C, toDisplayString as I, createElementVNode as g, useAttrs as Me, computed as L, createBlock as x, resolveDynamicComponent as ce, unref as w, withCtx as B, createCommentVNode as _, ref as b, createVNode as N, mergeProps as Y, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as X, nextTick as Ne, watch as J, h as rt, reactive as te, onBeforeUnmount as He, normalizeStyle as Z, Fragment as fe, renderList as ye, normalizeProps as ve, guardReactiveProps as me, Teleport as st, createSlots as We, useSlots as G, onBeforeMount as ut, inject as dt, provide as ct, pushScopeId as ft, popScopeId as yt } from "vue";
+import { defineComponent as $, openBlock as v, createElementBlock as p, normalizeClass as w, renderSlot as h, createTextVNode as C, toDisplayString as I, createElementVNode as g, useAttrs as Me, computed as L, createBlock as x, resolveDynamicComponent as ce, unref as k, withCtx as B, createCommentVNode as _, ref as b, createVNode as N, mergeProps as Y, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as X, nextTick as Ne, watch as J, h as rt, reactive as te, onBeforeUnmount as He, normalizeStyle as Z, Fragment as fe, renderList as ye, normalizeProps as ve, guardReactiveProps as me, Teleport as st, createSlots as We, useSlots as G, onBeforeMount as ut, inject as dt, provide as ct, pushScopeId as ft, popScopeId as yt } from "vue";
 const vt = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink", "dark-blue", "yellow"], mt = /* @__PURE__ */ $({
   __name: "VJoyBadge",
   props: {
@@ -28,7 +28,7 @@ const vt = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink
   },
   setup(e) {
     return (t, l) => (v(), p("span", {
-      class: S(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
+      class: w(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
       role: "status"
     }, [
       h(t.$slots, "default", {}, () => [
@@ -54,7 +54,7 @@ const V = (e, t) => {
   },
   setup(e) {
     return (t, l) => (v(), p("div", {
-      class: S(["joy-spinner", `joy-spinner_${e.color}`])
+      class: w(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
@@ -76,10 +76,10 @@ const pe = /* @__PURE__ */ V(gt, [["__scopeId", "data-v-616a29d0"]]), R = /* @__
   },
   setup(e) {
     return (t, l) => (v(), p("span", {
-      class: S(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
+      class: w(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
     }, [
       g("i", {
-        class: S(["icon", `icon-${e.name}`])
+        class: w(["icon", `icon-${e.name}`])
       }, null, 2)
     ], 2));
   }
@@ -145,10 +145,10 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
           return "small";
       }
     }), a = L(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
-    return (r, s) => (v(), x(ce(w(l).href ? "a" : "button"), {
-      disabled: e.loading || w(l).disabled,
-      type: w(l).type || "button",
-      class: S([
+    return (r, s) => (v(), x(ce(k(l).href ? "a" : "button"), {
+      disabled: e.loading || k(l).disabled,
+      type: k(l).type || "button",
+      class: w([
         "joy-button",
         `joy-button_${e.variant}`,
         `joy-button_${e.size}`,
@@ -163,11 +163,11 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
           key: 0,
           class: "joy-button_icon joy-button_icon--left",
           name: e.icon,
-          size: w(o)
+          size: o.value
         }, null, 8, ["name", "size"])) : _("", !0),
         e.loading ? (v(), x(pe, {
           key: 1,
-          color: w(a)
+          color: a.value
         }, null, 8, ["color"])) : _("", !0),
         g("span", kt, [
           h(r.$slots, "default", {}, () => [
@@ -178,7 +178,7 @@ const bt = ["primary", "secondary"], _t = ["neutral", "success", "info", "warnin
           key: 2,
           class: "joy-button_icon joy-button_icon--right",
           name: e.icon,
-          size: w(o)
+          size: o.value
         }, null, 8, ["name", "size"])) : _("", !0)
       ]),
       _: 3
@@ -253,7 +253,7 @@ const Ue = /* @__PURE__ */ V($t, [["__scopeId", "data-v-ae0676bb"]]), Vt = ["ari
       "aria-hidden": e.disabled
     }, [
       g("label", {
-        class: S([
+        class: w([
           "joy-checkbox",
           {
             "joy-checkbox__checked": e.checked,
@@ -384,8 +384,8 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
       a.value = !u();
     }
     function c(d = !0) {
-      const k = o.step.toString().split("."), j = k.length === 2 ? k[1].length : 0;
-      return parseFloat(d ? (o.modelValue + o.step).toFixed(j) : (o.modelValue - o.step).toFixed(j));
+      const j = o.step.toString().split("."), S = j.length === 2 ? j[1].length : 0;
+      return parseFloat(d ? (o.modelValue + o.step).toFixed(S) : (o.modelValue - o.step).toFixed(S));
     }
     function u() {
       return m() && i();
@@ -409,8 +409,8 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
     };
     return t({
       props: o
-    }), (d, k) => (v(), p("div", Et, [
-      e.label ? (v(), x(w(W), {
+    }), (d, j) => (v(), p("div", Et, [
+      e.label ? (v(), x(k(W), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -425,7 +425,7 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
         _: 3
       }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
       g("div", {
-        class: S(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
+        class: w(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
       }, [
         g("button", {
           class: "joy-counter__decrement",
@@ -434,7 +434,7 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
           disabled: e.modelValue <= e.min,
           onClick: s
         }, [
-          N(w(R), { name: "minus" })
+          N(k(R), { name: "minus" })
         ], 8, Ct),
         g("div", Jt, [
           g("input", Y({
@@ -450,12 +450,12 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
             step: "any",
             value: e.modelValue
           }, d.$attrs, {
-            onInput: k[0] || (k[0] = //@ts-ignore
-            (...j) => y.onInput && y.onInput(...j)),
-            onBlur: k[1] || (k[1] = //@ts-ignore
-            (...j) => y.onBlur && y.onBlur(...j)),
-            onFocus: k[2] || (k[2] = //@ts-ignore
-            (...j) => y.onFocus && y.onFocus(...j))
+            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, Pt)
         ]),
         g("button", {
@@ -465,10 +465,10 @@ const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Et = { cla
           disabled: e.max ? e.modelValue >= e.max : !1,
           onClick: n
         }, [
-          N(w(R), { name: "add" })
+          N(k(R), { name: "add" })
         ], 8, Tt),
         e.invalid && e.errorMessage ? (v(), p("div", qt, [
-          N(w(tt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+          N(k(tt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
         ])) : _("", !0)
       ], 2)
     ]));
@@ -479,7 +479,7 @@ var we;
 const K = typeof window < "u", Ge = (e) => typeof e == "string", z = () => {
 }, le = K && ((we = window == null ? void 0 : window.navigator) == null ? void 0 : we.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
 function P(e) {
-  return typeof e == "function" ? e() : w(e);
+  return typeof e == "function" ? e() : k(e);
 }
 function Ke(e, t) {
   function l(...o) {
@@ -512,9 +512,9 @@ function Rt(e, t = !0, l = !0, o = !1) {
   };
   return (m) => {
     const i = P(e), y = Date.now() - a, d = () => f = m();
-    return c(), i <= 0 ? (a = Date.now(), d()) : (y > i && (l || !s) ? (a = Date.now(), d()) : t && (f = new Promise((k, j) => {
-      n = o ? j : k, r = setTimeout(() => {
-        a = Date.now(), s = !0, k(d()), c();
+    return c(), i <= 0 ? (a = Date.now(), d()) : (y > i && (l || !s) ? (a = Date.now(), d()) : t && (f = new Promise((j, S) => {
+      n = o ? S : j, r = setTimeout(() => {
+        a = Date.now(), s = !0, j(d()), c();
       }, Math.max(0, i - y));
     })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, f);
   };
@@ -922,30 +922,30 @@ function de(e, t = {}) {
       behavior: P(f)
     }));
   }
-  const d = b(!1), k = te({
+  const d = b(!1), j = te({
     left: !0,
     right: !1,
     top: !0,
     bottom: !1
-  }), j = te({
+  }), S = te({
     left: !1,
     right: !1,
     top: !1,
     bottom: !1
   }), ee = (E) => {
-    d.value && (d.value = !1, j.left = !1, j.right = !1, j.top = !1, j.bottom = !1, a(E));
+    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, a(E));
   }, oe = Nt(ee, l + o), O = (E) => {
     const q = E.target === document ? E.target.documentElement : E.target, D = q.scrollLeft;
-    j.left = D < c.value, j.right = D > u.value, k.left = D <= 0 + (s.left || 0), k.right = D + q.clientWidth >= q.scrollWidth - (s.right || 0) - Pe, c.value = D;
+    S.left = D < c.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + q.clientWidth >= q.scrollWidth - (s.right || 0) - Pe, c.value = D;
     let F = q.scrollTop;
-    E.target === document && !F && (F = document.body.scrollTop), j.top = F < u.value, j.bottom = F > u.value, k.top = F <= 0 + (s.top || 0), k.bottom = F + q.clientHeight >= q.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(E), r(E);
+    E.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + q.clientHeight >= q.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(E), r(E);
   };
   return A(e, "scroll", l ? Ht(O, l, !0, !1) : O, n), A(e, "scrollend", ee, n), {
     x: m,
     y: i,
     isScrolling: d,
-    arrivedState: k,
-    directions: j
+    arrivedState: j,
+    directions: S
   };
 }
 var gl = Object.defineProperty, bl = Object.defineProperties, _l = Object.getOwnPropertyDescriptors, Te = Object.getOwnPropertySymbols, wl = Object.prototype.hasOwnProperty, Sl = Object.prototype.propertyIsEnumerable, qe = (e, t, l) => t in e ? gl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, ze = (e, t) => {
@@ -1144,10 +1144,10 @@ const Xe = ["medium", "small"], Jl = {
         l("update:modelValue", d.dataModel);
       }
       if (c() && i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
-        const d = n(), k = c();
-        let j = d.indexOf(k);
+        const d = n(), j = c();
+        let S = d.indexOf(j);
         if (d.length) {
-          i.preventDefault(), i.key === "ArrowDown" ? j++ : i.key === "ArrowUp" ? j-- : i.key === "Home" ? j = 0 : i.key === "End" && (j = d.length - 1), j < 0 && (j = d.length - 1), j > d.length - 1 && (j = 0), m(d[j]);
+          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), m(d[S]);
           return;
         }
       }
@@ -1169,7 +1169,7 @@ const Xe = ["medium", "small"], Jl = {
         h(i.$slots, "dropdown-list-header", {}, void 0, !0)
       ])) : _("", !0),
       g("div", {
-        class: S(["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": i.$slots["dropdown-list-items"] }]),
         style: Z({ "max-height": `${e.height}px` })
       }, [
         h(i.$slots, "dropdown-list-items", {}, void 0, !0),
@@ -1183,22 +1183,22 @@ const Xe = ["medium", "small"], Jl = {
             id: d.id,
             key: d.label,
             style: Z({ "max-width": `${e.width}px` }),
-            class: S([
+            class: w([
               "joy-dropdown-list__item",
               `joy-dropdown-list__item--${e.size}`,
               {
-                "joy-dropdown-list__item--selected": w(r)(d),
+                "joy-dropdown-list__item--selected": r.value(d),
                 "joy-dropdown-list__item--disabled": d.disabled
               }
             ]),
             tabindex: d.disabled ? void 0 : 0,
             "aria-disabled": d.disabled,
-            "aria-selected": w(r)(d),
+            "aria-selected": r.value(d),
             title: d.label,
             "aria-label": d.label,
             ".dataModel": d.value || d.id,
             role: "option",
-            onClick: (k) => s(d)
+            onClick: (j) => s(d)
           }, [
             h(i.$slots, "label", ve(me(d)), () => [
               g("span", null, I(d.label), 1)
@@ -1317,10 +1317,10 @@ const Al = /* @__PURE__ */ $({
     function d(O) {
       c.value = !1, m && clearTimeout(m), ee(), f.value = O.target, a.value = !0, l("dropdown:open");
     }
-    function k() {
-      y(), j();
-    }
     function j() {
+      y(), S();
+    }
+    function S() {
       f.value && f.value.focus();
     }
     function ee() {
@@ -1328,11 +1328,11 @@ const Al = /* @__PURE__ */ $({
       o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = E + q + parseInt(o.dropdownGap) + "px" : i.top = E - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
     function oe(O) {
-      l("update:modelValue", O), o.closeOnSelect && (y(), j());
+      l("update:modelValue", O), o.closeOnSelect && (y(), S());
     }
     return zl(y), t({
       showDropdownList: a
-    }), (O, E) => (v(), x(w(al), {
+    }), (O, E) => (v(), x(k(al), {
       ref_key: "dropdown",
       ref: r,
       options: u,
@@ -1356,7 +1356,7 @@ const Al = /* @__PURE__ */ $({
             key: 0,
             ref_key: "list",
             ref: n,
-            class: S([
+            class: w([
               "joy-dropdown__list",
               `joy-dropdown__list--${e.direction}`,
               {
@@ -1376,7 +1376,7 @@ const Al = /* @__PURE__ */ $({
               width: e.width,
               height: e.height,
               "onUpdate:modelValue": oe,
-              "onClose:dropdownList": k
+              "onClose:dropdownList": j
             }, We({
               label: B((q) => [
                 h(O.$slots, "dropdown-item", ve(me(q)), () => [
@@ -1428,7 +1428,7 @@ const Fl = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-2657fbc4"]]), Dl = ["ari
   setup(e) {
     return (t, l) => (v(), p("div", {
       "aria-hidden": e.visible,
-      class: S(["joy-form-error", { "joy-has-error": e.visible }]),
+      class: w(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
       N(R, {
@@ -1485,7 +1485,7 @@ const Nl = [..._t], Hl = { class: "joy-highlight--text" }, Wl = { key: 0 }, Ul =
     return t({
       getRelevantIcon: o
     }), (a, r) => (v(), p("div", {
-      class: S([
+      class: w([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
@@ -1496,7 +1496,7 @@ const Nl = [..._t], Hl = { class: "joy-highlight--text" }, Wl = { key: 0 }, Ul =
     }, [
       e.displayIcon ? (v(), x(R, {
         key: 0,
-        name: w(o)
+        name: o.value
       }, null, 8, ["name"])) : _("", !0),
       g("div", Hl, [
         a.$slots["highlight-title"] ? (v(), p("strong", Wl, [
@@ -1640,20 +1640,20 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
     return (y, d) => (v(), p("div", {
       ref_key: "root",
       ref: a,
-      class: S([`joy-input--${l.size}`])
+      class: w([`joy-input--${l.size}`])
     }, [
       g("div", {
-        class: S([
+        class: w([
           "joy-input",
           {
             "joy-input--focusing": n.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !w(r).disabled
+            "joy-input--valid": !e.invalid && !k(r).disabled
           }
         ])
       }, [
-        w(c) || e.label ? (v(), x(W, {
+        c.value || e.label ? (v(), x(W, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -1668,13 +1668,13 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
           _: 3
         }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
         g("div", {
-          class: S([
+          class: w([
             "joy-input--wrapper",
             {
               "joy-input--wrapper-has-icon": !!e.icon,
               "joy-input--wrapper---clearable": e.clearable,
               "joy-input--wrapper-unit": !!e.unit,
-              "joy-input--wrapper-margin": !w(u)
+              "joy-input--wrapper-margin": !u.value
             }
           ])
         }, [
@@ -1692,13 +1692,13 @@ const W = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-1265214a"]]), Xl = ["larg
             type: m.value,
             value: e.modelValue,
             onFocus: d[0] || (d[0] = //@ts-ignore
-            (...k) => i.onFocus && i.onFocus(...k)),
+            (...j) => i.onFocus && i.onFocus(...j)),
             onBlur: d[1] || (d[1] = //@ts-ignore
-            (...k) => i.onBlur && i.onBlur(...k)),
+            (...j) => i.onBlur && i.onBlur(...j)),
             onInput: d[2] || (d[2] = //@ts-ignore
-            (...k) => i.onInput && i.onInput(...k))
+            (...j) => i.onInput && i.onInput(...j))
           }), null, 16, eo),
-          w(f) ? (v(), x(Ue, {
+          f.value ? (v(), x(Ue, {
             key: 0,
             class: "joy-input--clear",
             circle: "",
@@ -1757,7 +1757,7 @@ const no = /* @__PURE__ */ V(oo, [["__scopeId", "data-v-c37d9a7a"]]), ao = ["tea
   }
 });
 const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"], co = {
-  class: /* @__PURE__ */ S(["joy-multi-checkbox"])
+  class: /* @__PURE__ */ w(["joy-multi-checkbox"])
 }, fo = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
   props: {
@@ -1805,7 +1805,7 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (v(), x(w(W), {
+      e.label ? (v(), x(k(W), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -1818,7 +1818,7 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"
         _: 1
       }, 8, ["required", "optional-label", "size"])) : _("", !0),
       g("div", co, [
-        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(w(he), {
+        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(k(he), {
           id: n.id,
           key: n.id,
           name: n.name,
@@ -1839,7 +1839,7 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-a8db21c2"]]), uo = ["id"
 });
 const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["small", "medium", "large"], mo = ["small", "large"], po = {
   key: 0,
-  class: /* @__PURE__ */ S(["joy-panel__header"])
+  class: /* @__PURE__ */ w(["joy-panel__header"])
 }, ho = {
   key: 1,
   class: "joy-panel__header-action"
@@ -1888,36 +1888,36 @@ const yo = /* @__PURE__ */ V(fo, [["__scopeId", "data-v-47574ced"]]), vo = ["sma
       ref_key: "panel",
       ref: a,
       style: Z({ flex: e.flex }),
-      class: S([
+      class: w([
         "joy-panel",
         `joy-panel--${e.padding}`,
         {
-          "joy-panel--no-margin": e.noMargin || w(l),
+          "joy-panel--no-margin": e.noMargin || l.value,
           "joy-panel--loading": e.loading
         }
       ])
     }, [
-      w(r) ? (v(), p("header", po, [
-        w(o)["panel-title"] ? (v(), p("div", {
+      r.value ? (v(), p("header", po, [
+        k(o)["panel-title"] ? (v(), p("div", {
           key: 0,
-          class: S(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
+          class: w(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
         }, [
           h(s.$slots, "panel-title", {}, void 0, !0)
         ], 2)) : _("", !0),
-        w(o)["panel-title-action"] ? (v(), p("div", ho, [
+        k(o)["panel-title-action"] ? (v(), p("div", ho, [
           h(s.$slots, "panel-title-action", {}, void 0, !0)
         ])) : _("", !0),
-        w(o)["panel-subtitle"] ? (v(), p("div", go, [
+        k(o)["panel-subtitle"] ? (v(), p("div", go, [
           h(s.$slots, "panel-subtitle", {}, void 0, !0)
         ])) : _("", !0)
       ])) : _("", !0),
       g("div", bo, [
         h(s.$slots, "panel-body", {}, void 0, !0)
       ]),
-      w(o)["panel-action"] ? (v(), p("footer", _o, [
+      k(o)["panel-action"] ? (v(), p("footer", _o, [
         h(s.$slots, "panel-action", {}, void 0, !0)
       ])) : _("", !0),
-      e.loading ? (v(), x(w(be), {
+      e.loading ? (v(), x(k(be), {
         key: 2,
         overlay: "",
         color: e.loadingColor
@@ -1941,10 +1941,10 @@ const So = /* @__PURE__ */ V(wo, [["__scopeId", "data-v-2e3a2baa"]]), jo = { cla
   setup(e) {
     const t = G();
     return (l, o) => (v(), p("div", jo, [
-      w(t)["panel-section-title"] ? (v(), p("div", ko, [
+      k(t)["panel-section-title"] ? (v(), p("div", ko, [
         h(l.$slots, "panel-section-title", {}, void 0, !0)
       ])) : _("", !0),
-      w(t)["panel-section-content"] ? (v(), p("div", $o, [
+      k(t)["panel-section-content"] ? (v(), p("div", $o, [
         h(l.$slots, "panel-section-content", {}, void 0, !0)
       ])) : _("", !0)
     ]));
@@ -2010,14 +2010,14 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
     ), t({
       checked: c,
       isExpanded: a
-    }), (d, k) => (v(), p("label", {
+    }), (d, j) => (v(), p("label", {
       ref_key: "root",
       ref: s,
-      class: S([
+      class: w([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": w(c),
+          "joy-radio--checked": c.value,
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid,
           "joy-radio--outline-focus": r.value && e.theme === "outline",
@@ -2029,7 +2029,7 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: w(c),
+        checked: c.value,
         disabled: e.disabled,
         required: e.required,
         name: e.name,
@@ -2047,7 +2047,7 @@ const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-d88510ab"]]), Io = ["id"
         g("div", {
           ref_key: "expandableElement",
           ref: n,
-          class: S(["joy-radio-expandable", { "joy-radio-expandable--expanded": a.value }])
+          class: w(["joy-radio-expandable", { "joy-radio-expandable--expanded": a.value }])
         }, [
           h(d.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
@@ -2085,7 +2085,7 @@ const Co = /* @__PURE__ */ V(Eo, [["__scopeId", "data-v-24cea99b"]]), Jo = ["for
     }, [
       h(t.$slots, "radio-group-legend", {}, void 0, !0),
       g("div", {
-        class: S(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
+        class: w(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
         h(t.$slots, "default", {}, void 0, !0)
       ], 2)
@@ -2111,7 +2111,7 @@ const To = /* @__PURE__ */ V(Po, [["__scopeId", "data-v-a77e7f95"]]), qo = { cla
   },
   setup(e) {
     return (t, l) => (v(), p("div", {
-      class: S(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
+      class: w(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
     }, [
       g("div", qo, [
         h(t.$slots, "spinner", {}, () => [
@@ -2212,7 +2212,7 @@ const be = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-5c4f6d7f"]]), Fo = ["id"
         }, 8, ["required", "optional-label", "for", "size"])) : _("", !0)
       ], !0),
       g("div", {
-        class: S({
+        class: w({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
           "joy-select--disabled": e.disabled,
@@ -2301,7 +2301,7 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
       t("update:checked", c);
     }
     return (c, u) => (v(), p("div", {
-      class: S([
+      class: w([
         "joy-selectable-item__wrapper",
         {
           "joy-selectable-item--focusing": r.value
@@ -2329,9 +2329,9 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
         onBlur: u[2] || (u[2] = //@ts-ignore
         (...m) => n.onBlur && n.onBlur(...m))
       }, null, 40, No)),
-      (v(), x(ce(w(s)), {
+      (v(), x(ce(k(s)), {
         for: e.id,
-        class: S([
+        class: w([
           "joy-selectable-item",
           {
             "joy-selectable-item--disabled": e.disabled,
@@ -2343,7 +2343,7 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
         onClick: n.onLabelClick
       }, {
         default: B(() => [
-          e.multiple ? (v(), x(w(he), {
+          e.multiple ? (v(), x(k(he), {
             key: 0,
             id: e.id,
             checked: o.value,
@@ -2366,7 +2366,7 @@ const Ro = /* @__PURE__ */ V(Do, [["__scopeId", "data-v-b1af08d1"]]), Mo = ["ari
           }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : _("", !0),
           e.multiple ? _("", !0) : h(c.$slots, "default", { key: 1 }, void 0, !0),
           g("div", {
-            class: S([{ "joy-selectable-item__sublabel": c.$slots["selectable-item-sublabel"] }])
+            class: w([{ "joy-selectable-item__sublabel": c.$slots["selectable-item-sublabel"] }])
           }, [
             h(c.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
@@ -2431,7 +2431,7 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (v(), x(w(W), {
+      e.label ? (v(), x(k(W), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -2444,7 +2444,7 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
         _: 1
       }, 8, ["required", "optional-label", "size"])) : _("", !0),
       g("div", {
-        class: S([
+        class: w([
           "joy-selectable-item-group",
           {
             "joy-selectable-item-group--multiple": e.multiple,
@@ -2453,7 +2453,7 @@ const lt = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-cb2531c0"]]), Wo = ["id"
           }
         ])
       }, [
-        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(w(lt), {
+        (v(!0), p(fe, null, ye(e.options, (n) => (v(), x(k(lt), {
           id: n.id,
           key: n.id,
           name: n.name,
@@ -2515,7 +2515,7 @@ const Go = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-0730aed0"]]), Ko = /* @_
   },
   setup(e) {
     return ct("VJoyWrapperContext", e), (l, o) => (v(), p("div", {
-      class: S([
+      class: w([
         "joy-wrapper",
         `joy-wrapper--justify-${e.justify}`,
         `joy-wrapper--align-${e.align}`,
@@ -2567,27 +2567,27 @@ const Qo = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-e2f29698"]]), Zo = { cla
   setup(e) {
     const t = e, l = G(), o = L(() => !!l["template-back"] || !!l["template-title"] || !!l["template-subtitle"] || !!l["template-actions"]);
     return (a, r) => (v(), p("main", {
-      class: S(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
+      class: w(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
     }, [
       g("div", Zo, [
-        w(o) ? (v(), p("div", Yo, [
-          w(l)["template-back"] ? (v(), p("div", Xo, [
+        o.value ? (v(), p("div", Yo, [
+          k(l)["template-back"] ? (v(), p("div", Xo, [
             h(a.$slots, "template-back", {}, void 0, !0)
           ])) : _("", !0),
           g("div", en, [
-            w(l)["template-title"] ? (v(), p("div", tn, [
+            k(l)["template-title"] ? (v(), p("div", tn, [
               h(a.$slots, "template-title", {}, void 0, !0)
             ])) : _("", !0),
-            w(l)["template-subtitle"] ? (v(), p("div", ln, [
+            k(l)["template-subtitle"] ? (v(), p("div", ln, [
               h(a.$slots, "template-subtitle", {}, void 0, !0)
             ])) : _("", !0)
           ]),
-          w(l)["template-actions"] ? (v(), p("div", on, [
+          k(l)["template-actions"] ? (v(), p("div", on, [
             h(a.$slots, "template-actions", {}, void 0, !0)
           ])) : _("", !0)
         ])) : _("", !0),
         g("div", {
-          class: S([
+          class: w([
             "joy-template__content",
             {
               "joy-template__content--reverse": t.sidebar === "left"
@@ -2689,7 +2689,7 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
       valueUnderMinlength: c
     }), (m, i) => (v(), p("div", {
       "aria-disabled": e.disabled,
-      class: S([
+      class: w([
         "joy-textarea",
         {
           "joy-textarea_invalid": s.value || e.invalid,
@@ -2699,7 +2699,7 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
         }
       ])
     }, [
-      N(w(W), {
+      N(k(W), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
@@ -2734,9 +2734,9 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
       e.minlength || e.maxlength ? (v(), p("div", fn, [
         e.minlength ? (v(), p("p", {
           key: 0,
-          class: S(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
+          class: w(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          w(c) ? _("", !0) : (v(), x(R, {
+          c.value ? _("", !0) : (v(), x(R, {
             key: 0,
             name: "check",
             color: "neutral",
@@ -2746,7 +2746,7 @@ const sn = /* @__PURE__ */ V(rn, [["__scopeId", "data-v-a2355e4b"]]), un = ["ari
         ], 2)) : _("", !0),
         e.maxlength ? (v(), p("p", {
           key: 1,
-          class: S(["joy-textarea-count", { "joy-textarea-count-invalid": w(f) }])
+          class: w(["joy-textarea-count", { "joy-textarea-count-invalid": f.value }])
         }, I(e.modelValue.length + "/" + e.maxlength), 3)) : _("", !0)
       ])) : _("", !0)
     ], 10, un));
@@ -2813,7 +2813,7 @@ const mn = /* @__PURE__ */ V(vn, [["__scopeId", "data-v-d0d2c93e"]]), ot = (e) =
     };
     return (a, r) => (v(), p("div", pn, [
       g("label", {
-        class: S([
+        class: w([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,