@maltjoy/core-vue 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/joy-vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as y, openBlock as s, createElementBlock as u, normalizeClass as d, useAttrs as z, computed as J, createBlock as w, resolveDynamicComponent as T, unref as f, withCtx as V, createCommentVNode as j, createElementVNode as n, renderSlot as r, ref as h, createTextVNode as R, toDisplayString as L, pushScopeId as O, popScopeId as N, mergeProps as C, useSlots as E, onBeforeMount as M, onMounted as A, watch as D } from "vue";
-const G = ["teal", "white"], W = /* @__PURE__ */ y({
+import { defineComponent as h, openBlock as i, createElementBlock as u, normalizeClass as y, useAttrs as N, computed as I, createBlock as J, resolveDynamicComponent as M, unref as g, withCtx as q, createCommentVNode as b, createElementVNode as n, renderSlot as s, ref as S, createTextVNode as B, toDisplayString as V, mergeProps as w, createVNode as R, pushScopeId as L, popScopeId as z, useSlots as E, onBeforeMount as A, onMounted as T, watch as G } from "vue";
+const D = ["teal", "white"], P = /* @__PURE__ */ h({
   __name: "JoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return G.includes(e);
+        return D.includes(e);
       }
     }
   },
   setup(e) {
-    return (a, t) => (s(), u("div", {
-      class: d(["joy-spinner", `joy-spinner_${e.color}`])
+    return (l, t) => (i(), u("div", {
+      class: y(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const _ = (e, a) => {
+const p = (e, l) => {
   const t = e.__vccOpts || e;
-  for (const [l, i] of a)
-    t[l] = i;
+  for (const [a, o] of l)
+    t[a] = o;
   return t;
-}, P = /* @__PURE__ */ _(W, [["__scopeId", "data-v-b633f633"]]), Z = ["primary", "secondary"], U = ["xlarge", "large", "medium", "small", "xsmall", "xxsmall"], K = ["neutral", "success", "info", "warning", "error"], X = ["main", "admin", "white", "ghost"], Q = [...Z, ...X], Y = [...U], x = ["xxsmall", "xsmall", "small"], ee = ["name", "size"], te = { class: "joy-button--slot" }, oe = /* @__PURE__ */ y({
+}, F = /* @__PURE__ */ p(P, [["__scopeId", "data-v-b633f633"]]), W = ["primary", "secondary"], U = ["neutral", "success", "info", "warning", "error"], Z = ["main", "admin", "ghost"], K = [...W, ...Z], Q = ["large", "medium", "small", "xsmall", "xxsmall"], X = ["xxsmall", "xsmall", "small"], Y = ["name", "size"], ee = { class: "joy-button--slot" }, te = /* @__PURE__ */ h({
   __name: "JoyButton",
   props: {
     /**
@@ -43,7 +43,7 @@ const _ = (e, a) => {
       type: String,
       default: "primary",
       validator(e) {
-        return Q.includes(e);
+        return K.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,7 +51,7 @@ const _ = (e, a) => {
       type: String,
       default: "medium",
       validator(e) {
-        return Y.includes(e);
+        return Q.includes(e);
       }
     },
     /** Override the icon size. Default to xsmall */
@@ -59,15 +59,15 @@ const _ = (e, a) => {
       type: String,
       default: "xsmall",
       validator(e) {
-        return x.includes(e);
+        return X.includes(e);
       }
     }
   },
   setup(e) {
-    const a = e, t = z(), l = J(() => ["white", "ghost", "secondary"].includes(a.variant) ? "teal" : "white");
-    return (i, c) => (s(), w(T(f(t).href ? "a" : "button"), {
-      disabled: e.loading || f(t).disabled,
-      class: d([
+    const l = e, t = N(), a = I(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
+    return (o, m) => (i(), J(M(g(t).href ? "a" : "button"), {
+      disabled: e.loading || g(t).disabled,
+      class: y([
         "joy-button",
         `joy-button_${e.variant}`,
         `joy-button_${e.size}`,
@@ -77,61 +77,26 @@ const _ = (e, a) => {
         }
       ])
     }, {
-      default: V(() => [
-        e.icon ? (s(), u("joy-icon", {
+      default: q(() => [
+        e.icon ? (i(), u("joy-icon", {
           key: 0,
           name: e.icon,
           size: e.iconSize,
           lazy: !1
-        }, null, 8, ee)) : j("", !0),
-        e.loading ? (s(), w(P, {
+        }, null, 8, Y)) : b("", !0),
+        e.loading ? (i(), J(F, {
           key: 1,
-          color: f(l)
-        }, null, 8, ["color"])) : j("", !0),
-        n("span", te, [
-          r(i.$slots, "default", {}, void 0, !0)
+          color: g(a)
+        }, null, 8, ["color"])) : b("", !0),
+        n("span", ee, [
+          s(o.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
     }, 8, ["disabled", "class"]));
   }
 });
-const ae = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-08c3c0a6"]]), B = {
-  disabled: {
-    type: Boolean,
-    default: !1
-  },
-  id: {
-    type: String
-  },
-  invalid: {
-    type: Boolean,
-    default: !1
-  },
-  name: {
-    type: String
-  },
-  required: {
-    type: Boolean,
-    default: !1
-  }
-}, F = {
-  modelValue: {
-    type: Boolean,
-    default: !1
-  },
-  value: {
-    type: String,
-    default: "on"
-  },
-  ...B
-}, H = {
-  label: String,
-  labelSize: {
-    type: String,
-    default: "medium"
-  }
-}, le = ["aria-checked", "aria-hidden"], ne = ["name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], ie = { class: "joy-checkbox__content-wrapper" }, se = { class: "joy-checkbox__content" }, re = /* @__PURE__ */ y({
+const ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-958cc680"]]), le = ["aria-checked", "aria-hidden"], ne = ["name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], oe = { class: "joy-checkbox__content-wrapper" }, ie = { class: "joy-checkbox__content" }, de = /* @__PURE__ */ h({
   __name: "JoyCheckbox",
   props: {
     /** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
@@ -139,61 +104,257 @@ const ae = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-08c3c0a6"]]), B = {
       type: Boolean,
       default: !1
     },
-    ...F
+    label: {
+      type: String
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: String,
+      default: "on"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    }
+    // ...CHECKBOX_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: a, emit: t }) {
-    const l = e, i = h(), c = h(l.indeterminate), S = {
-      onChange: (o) => {
-        const p = o.target.checked;
-        c.value = !1, t("update:modelValue", p);
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = S(), m = S(a.indeterminate), _ = {
+      onChange: (r) => {
+        const c = r.target.checked;
+        m.value = !1, t("update:modelValue", c);
       }
     };
-    return a({
-      isIndeterminate: c
-    }), (o, p) => (s(), u("div", {
-      "aria-checked": o.modelValue,
-      "aria-hidden": o.disabled
+    return l({
+      isIndeterminate: m
+    }), (r, c) => (i(), u("div", {
+      "aria-checked": e.modelValue,
+      "aria-hidden": e.disabled
     }, [
       n("label", {
-        class: d([
+        class: y([
           "joy-checkbox",
           {
-            "joy-checkbox__checked": o.modelValue,
-            "joy-checkbox__indeterminate": c.value
+            "joy-checkbox__checked": e.modelValue,
+            "joy-checkbox__indeterminate": m.value
           }
         ])
       }, [
         n("input", {
           ref_key: "input",
-          ref: i,
+          ref: o,
           type: "checkbox",
           class: "joy-checkbox__input",
           role: "checkbox",
-          name: o.name,
-          disabled: o.disabled,
-          checked: o.modelValue,
-          required: o.required,
-          "aria-checked": o.modelValue,
-          value: o.value,
-          indeterminate: c.value,
-          onChange: p[0] || (p[0] = //@ts-ignore
-          (...b) => S.onChange && S.onChange(...b))
+          name: e.name,
+          disabled: e.disabled,
+          checked: e.modelValue,
+          required: e.required,
+          "aria-checked": e.modelValue,
+          value: e.value,
+          indeterminate: m.value,
+          onChange: c[0] || (c[0] = //@ts-ignore
+          (...j) => _.onChange && _.onChange(...j))
         }, null, 40, ne),
-        n("div", ie, [
-          r(o.$slots, "default", {}, void 0, !0),
-          n("div", se, [
-            r(o.$slots, "checkbox-content", {}, void 0, !0)
+        n("div", oe, [
+          s(r.$slots, "default", {}, () => [
+            B(V(e.label), 1)
+          ], !0),
+          n("div", ie, [
+            s(r.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
     ], 8, le));
   }
 });
-const de = /* @__PURE__ */ _(re, [["__scopeId", "data-v-61d9cccf"]]), ue = (e) => (O("data-v-eba58103"), e = e(), N(), e), ce = ["aria-hidden"], pe = /* @__PURE__ */ ue(() => /* @__PURE__ */ n("joy-icon", {
+const re = /* @__PURE__ */ p(de, [["__scopeId", "data-v-cd187cef"]]), H = (e) => (L("data-v-366cb712"), e = e(), z(), e), ue = { class: "joy-counter" }, se = { class: "joy-counter__wrapper" }, ce = ["aria-label", "disabled"], ye = /* @__PURE__ */ H(() => /* @__PURE__ */ n("joy-icon", {
+  name: "minus",
+  color: "teal",
+  lazy: !1
+}, null, -1)), me = [
+  ye
+], fe = ["id", "min", "max", "aria-invalid", "name", "required", "value"], ve = ["aria-label", "disabled"], ge = /* @__PURE__ */ H(() => /* @__PURE__ */ n("joy-icon", {
+  name: "add",
+  lazy: !1,
+  color: "teal"
+}, null, -1)), be = [
+  ge
+], he = {
+  key: 0,
+  class: "joy-counter_error"
+}, pe = /* @__PURE__ */ h({
+  __name: "JoyCounter",
+  props: {
+    // ...FORM_BASED_PROPS,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    label: String,
+    labelSize: {
+      type: String,
+      default: "medium"
+    },
+    optionalLabel: String,
+    requiredMark: {
+      type: Boolean,
+      default: !1
+    },
+    // ...LABEL_BASED_PROPS,
+    labelDecrement: {
+      type: String
+    },
+    labelIncrement: {
+      type: String
+    },
+    max: {
+      type: Number
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    componentErrorMessage: {
+      type: String
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = S(!1);
+    function m() {
+      const d = c(!1);
+      d >= 0 ? t("update:modelValue", d <= a.min ? a.min : d) : t("update:modelValue", 0), r();
+    }
+    function _() {
+      const d = c();
+      a.max && d <= a.max ? t("update:modelValue", d >= a.max ? a.max : d) : a.max && d > a.max ? t("update:modelValue", a.max) : t("update:modelValue", d), r();
+    }
+    function r() {
+      o.value = !j();
+    }
+    function c(d = !0) {
+      const f = a.step.toString().split("."), $ = f.length === 2 ? f[1].length : 0;
+      return parseFloat(d ? (a.modelValue + a.step).toFixed($) : (a.modelValue - a.step).toFixed($));
+    }
+    function j() {
+      return x() && k();
+    }
+    function x() {
+      return !a.max || a.modelValue <= a.max;
+    }
+    function k() {
+      return a.min <= a.modelValue;
+    }
+    const v = {
+      onInput: (d) => {
+        t("update:modelValue", +d.target.value || 0), o.value = !1;
+      },
+      onBlur: () => {
+        r();
+      }
+    };
+    return l({
+      props: a
+    }), (d, f) => (i(), u("div", ue, [
+      e.label ? (i(), J(g(C), {
+        key: 0,
+        for: e.id,
+        required: e.required && e.requiredMark,
+        "optional-label": e.optionalLabel,
+        size: e.labelSize
+      }, {
+        default: q(() => [
+          s(d.$slots, "default", {}, () => [
+            B(V(e.label), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["for", "required", "optional-label", "size"])) : b("", !0),
+      n("div", se, [
+        n("button", {
+          class: "joy-counter__decrement",
+          type: "button",
+          "aria-label": e.labelDecrement,
+          disabled: e.modelValue <= e.min,
+          onClick: m
+        }, me, 8, ce),
+        n("input", w({
+          id: e.id,
+          ref: "input",
+          type: "number",
+          class: { "joy-counter__invalid": e.invalid || o.value },
+          min: e.min,
+          max: e.max,
+          "aria-invalid": e.invalid || o.value,
+          name: e.name,
+          required: e.required,
+          step: "any",
+          value: e.modelValue
+        }, d.$attrs, {
+          onInput: f[0] || (f[0] = //@ts-ignore
+          (...$) => v.onInput && v.onInput(...$)),
+          onBlur: f[1] || (f[1] = //@ts-ignore
+          (...$) => v.onBlur && v.onBlur(...$))
+        }), null, 16, fe),
+        n("button", {
+          class: "joy-counter__increment",
+          type: "button",
+          "aria-label": e.labelIncrement,
+          disabled: e.max ? e.modelValue >= e.max : !1,
+          onClick: _
+        }, be, 8, ve),
+        e.invalid && e.componentErrorMessage ? (i(), u("div", he, [
+          R(g(O), { "no-html-error-text": e.componentErrorMessage }, null, 8, ["no-html-error-text"])
+        ])) : b("", !0)
+      ])
+    ]));
+  }
+});
+const _e = /* @__PURE__ */ p(pe, [["__scopeId", "data-v-366cb712"]]), je = (e) => (L("data-v-eba58103"), e = e(), z(), e), Se = ["aria-hidden"], $e = /* @__PURE__ */ je(() => /* @__PURE__ */ n("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), ye = /* @__PURE__ */ y({
+}, null, -1)), xe = /* @__PURE__ */ h({
   __name: "JoyFormError",
   props: {
     visible: {
@@ -203,36 +364,36 @@ const de = /* @__PURE__ */ _(re, [["__scopeId", "data-v-61d9cccf"]]), ue = (e) =
     noHtmlErrorText: String
   },
   setup(e) {
-    return (a, t) => (s(), u("div", {
+    return (l, t) => (i(), u("div", {
       "aria-hidden": e.visible,
-      class: d(["joy-form-error", { "joy-has-error": e.visible }]),
+      class: y(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      pe,
+      $e,
       n("div", null, [
-        r(a.$slots, "default", {}, () => [
-          R(L(e.noHtmlErrorText), 1)
+        s(l.$slots, "default", {}, () => [
+          B(V(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, ce));
+    ], 10, Se));
   }
 });
-const _e = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-eba58103"]]);
-function me(e) {
-  let a;
+const O = /* @__PURE__ */ p(xe, [["__scopeId", "data-v-eba58103"]]);
+function ke(e) {
+  let l;
   switch (e) {
     case "error":
-      a = "warning-triangle";
+      l = "warning-triangle";
       break;
     case "success":
-      a = "check";
+      l = "check";
       break;
     default:
-      a = "info-circle";
+      l = "info-circle";
   }
-  return a;
+  return l;
 }
-const ve = [...K], fe = ["name"], ge = { class: "joy-highlight--text" }, he = /* @__PURE__ */ y({
+const Ve = [...U], Ie = ["name"], Be = { class: "joy-highlight--text" }, Je = /* @__PURE__ */ h({
   __name: "JoyHighlight",
   props: {
     accent: {
@@ -248,51 +409,51 @@ const ve = [...K], fe = ["name"], ge = { class: "joy-highlight--text" }, he = /*
       type: String,
       default: "neutral",
       validator(e) {
-        return ve.includes(e);
+        return Ve.includes(e);
       }
     }
   },
-  setup(e, { expose: a }) {
-    const t = e, l = J(() => t.icon ? t.icon : me(t.level));
-    return a({
-      getRelevantIcon: l
-    }), (i, c) => (s(), u("div", {
-      class: d([
+  setup(e, { expose: l }) {
+    const t = e, a = I(() => t.icon ? t.icon : ke(t.level));
+    return l({
+      getRelevantIcon: a
+    }), (o, m) => (i(), u("div", {
+      class: y([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": i.$slots["highlight-title"]
+          "joy-highlight__titled": o.$slots["highlight-title"]
         }
       ])
     }, [
-      e.displayIcon ? (s(), u("joy-icon", {
+      e.displayIcon ? (i(), u("joy-icon", {
         key: 0,
-        name: f(l)
-      }, null, 8, fe)) : j("", !0),
-      n("div", ge, [
+        name: g(a)
+      }, null, 8, Ie)) : b("", !0),
+      n("div", Be, [
         n("strong", null, [
-          r(i.$slots, "highlight-title", {}, void 0, !0)
+          s(o.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        r(i.$slots, "default", {}, void 0, !0)
+        s(o.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const be = /* @__PURE__ */ _(he, [["__scopeId", "data-v-15d3fa11"]]), je = ["small", "medium", "large"], Se = {
+const qe = /* @__PURE__ */ p(Je, [["__scopeId", "data-v-15d3fa11"]]), we = ["small", "medium", "large"], Ce = {
   key: 0,
   class: "joy-label-required"
-}, $e = {
+}, Le = {
   key: 1,
   class: "joy-label-optional"
-}, ke = /* @__PURE__ */ y({
+}, ze = /* @__PURE__ */ h({
   __name: "JoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return je.includes(e);
+        return we.includes(e);
       }
     },
     tagName: {
@@ -308,145 +469,175 @@ const be = /* @__PURE__ */ _(he, [["__scopeId", "data-v-15d3fa11"]]), je = ["sma
     }
   },
   setup(e) {
-    return (a, t) => (s(), w(T(e.tagName), C({
+    return (l, t) => (i(), J(M(e.tagName), w({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, a.$attrs), {
-      default: V(() => [
-        r(a.$slots, "default", {}, void 0, !0),
-        e.required ? (s(), u("span", Se, "*")) : j("", !0),
-        e.optionalLabel ? (s(), u("span", $e, "- " + L(e.optionalLabel), 1)) : j("", !0)
+    }, l.$attrs), {
+      default: q(() => [
+        s(l.$slots, "default", {}, void 0, !0),
+        e.required ? (i(), u("span", Ce, "*")) : b("", !0),
+        e.optionalLabel ? (i(), u("span", Le, "- " + V(e.optionalLabel), 1)) : b("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const q = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-e3232407"]]), Je = ["id", "type", "value"], Ie = ["data-unit"], we = /* @__PURE__ */ y({
+const C = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-e3232407"]]), Ee = ["large", "medium", "small"], Te = ["id", "disabled", "type", "value"], Ne = ["data-unit"], Me = /* @__PURE__ */ h({
   __name: "JoyInput",
   props: {
-    ...B,
-    ...H,
-    clearable: {
+    // ...FORM_BASED_PROPS,
+    disabled: {
       type: Boolean,
       default: !1
     },
-    icon: String,
-    modelValue: {
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    label: String,
+    labelSize: {
       type: String,
-      default: ""
+      default: "medium"
     },
     optionalLabel: String,
     requiredMark: {
       type: Boolean,
       default: !1
     },
+    // ...LABEL_BASED_PROPS,
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    // ...TEXT_BASED_PROPS,
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    icon: String,
     size: {
       type: String,
-      default: "medium"
+      default: "medium",
+      validator(e) {
+        return Ee.includes(e);
+      }
     },
     type: String,
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: a }) {
-    const t = e, l = h(), i = h(), c = z(), S = E(), o = h(!1), p = J(() => t.clearable && t.modelValue.length > 0 && !t.unit), b = J(() => S.default && S.default()), I = J(() => {
-      var m, v;
-      return !!((m = i.value) != null && m.closest("joy-wrapper")) || !!((v = i.value) != null && v.closest(".joy-wrapper"));
-    }), g = h(t.type);
-    M(() => {
-      g.value = t.unit ? "number" : t.unit || "text";
+  setup(e, { emit: l }) {
+    const t = e, a = S(), o = S(), m = N(), _ = E(), r = S(!1), c = I(() => t.clearable && t.modelValue.length > 0 && !t.unit), j = I(() => _.default && _.default()), x = I(() => {
+      var d, f;
+      return !!((d = o.value) != null && d.closest("joy-wrapper")) || !!((f = o.value) != null && f.closest(".joy-wrapper"));
+    }), k = S(t.type);
+    A(() => {
+      k.value = t.unit ? "number" : t.unit || "text";
     });
-    const $ = {
+    const v = {
       onFocus: () => {
-        o.value = !0;
+        r.value = !0;
       },
       onBlur: () => {
-        o.value = !1;
+        r.value = !1;
       },
-      onInput: (m) => {
-        let v = m.target.value;
-        a("update:modelValue", v);
+      onInput: (d) => {
+        let f = d.target.value;
+        l("update:modelValue", f);
       },
       clearValue: () => {
-        a("update:modelValue", "");
+        t.disabled || l("update:modelValue", "");
       }
     };
-    return (m, v) => (s(), u("div", {
+    return (d, f) => (i(), u("div", {
       ref_key: "root",
-      ref: i,
-      class: d([`joy-input--${t.size}`])
+      ref: o,
+      class: y([`joy-input--${t.size}`])
     }, [
       n("div", {
-        class: d([
+        class: y([
           "joy-input",
           {
-            "joy-input--focusing": o.value,
-            "joy-input--disabled": f(c).disabled,
-            "joy-input--invalid": m.invalid,
-            "joy-input--valid": !m.invalid && !f(c).disabled
+            "joy-input--focusing": r.value,
+            "joy-input--disabled": e.disabled,
+            "joy-input--invalid": e.invalid,
+            "joy-input--valid": !e.invalid && !g(m).disabled
           }
         ])
       }, [
-        f(b) ? (s(), w(q, {
+        g(j) || e.label ? (i(), J(C, {
           key: 0,
-          for: m.name,
-          required: m.required && e.requiredMark,
+          for: e.name,
+          required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
-          size: m.labelSize
+          size: e.labelSize
         }, {
-          default: V(() => [
-            r(m.$slots, "default", {}, void 0, !0)
+          default: q(() => [
+            s(d.$slots, "default", {}, () => [
+              B(V(e.label), 1)
+            ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : j("", !0),
+        }, 8, ["for", "required", "optional-label", "size"])) : b("", !0),
         n("div", {
-          class: d([
+          class: y([
             "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": !f(I)
+              "joy-input--wrapper-margin": !g(x)
             }
           ])
         }, [
-          n("input", C(m.$attrs, {
+          n("input", w(d.$attrs, {
             id: t.name,
             ref_key: "input",
-            ref: l,
+            ref: a,
+            disabled: e.disabled,
             class: [
               {
-                "joy-input--field-disabled": f(c).disabled,
-                "joy-input--field-invalid": m.invalid
+                "joy-input--field-disabled": e.disabled,
+                "joy-input--field-invalid": e.invalid
               }
             ],
-            type: g.value,
+            type: k.value,
             value: e.modelValue,
-            onFocus: v[0] || (v[0] = //@ts-ignore
-            (...k) => $.onFocus && $.onFocus(...k)),
-            onBlur: v[1] || (v[1] = //@ts-ignore
-            (...k) => $.onBlur && $.onBlur(...k)),
-            onInput: v[2] || (v[2] = //@ts-ignore
-            (...k) => $.onInput && $.onInput(...k))
-          }), null, 16, Je),
-          f(p) ? (s(), u("joy-icon", {
+            onFocus: f[0] || (f[0] = //@ts-ignore
+            (...$) => v.onFocus && v.onFocus(...$)),
+            onBlur: f[1] || (f[1] = //@ts-ignore
+            (...$) => v.onBlur && v.onBlur(...$)),
+            onInput: f[2] || (f[2] = //@ts-ignore
+            (...$) => v.onInput && v.onInput(...$))
+          }), null, 16, Te),
+          g(c) ? (i(), u("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
-            onClick: v[3] || (v[3] = //@ts-ignore
-            (...k) => $.clearValue && $.clearValue(...k))
-          })) : j("", !0),
-          e.unit ? (s(), u("div", {
+            onClick: f[3] || (f[3] = //@ts-ignore
+            (...$) => v.clearValue && v.clearValue(...$))
+          })) : b("", !0),
+          e.unit ? (i(), u("div", {
             key: 1,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, Ie)) : j("", !0)
+          }, null, 8, Ne)) : b("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const Ve = /* @__PURE__ */ _(we, [["__scopeId", "data-v-6eb67b7e"]]), Be = ["teal", "white"], Le = ["href"], Ce = ["color", "name"], Ee = /* @__PURE__ */ y({
+const Re = /* @__PURE__ */ p(Me, [["__scopeId", "data-v-3da79efb"]]), Fe = ["teal", "white"], He = ["href"], Oe = ["color", "name"], Ae = /* @__PURE__ */ h({
   __name: "JoyLink",
   props: {
     href: {
@@ -457,29 +648,47 @@ const Ve = /* @__PURE__ */ _(we, [["__scopeId", "data-v-6eb67b7e"]]), Be = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return Be.includes(e);
+        return Fe.includes(e);
       }
     },
     icon: String
   },
   setup(e) {
-    const a = e, t = J(() => a.color === "white" ? "white" : "teal");
-    return (l, i) => (s(), u("a", C({ href: e.href }, l.$attrs, {
+    const l = e, t = I(() => l.color === "white" ? "white" : "teal");
+    return (a, o) => (i(), u("a", w({ href: e.href }, a.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (s(), u("joy-icon", {
+      e.icon ? (i(), u("joy-icon", {
         key: 0,
-        color: f(t),
+        color: g(t),
         name: e.icon
-      }, null, 8, Ce)) : j("", !0),
-      r(l.$slots, "default", {}, void 0, !0)
-    ], 16, Le));
+      }, null, 8, Oe)) : b("", !0),
+      s(a.$slots, "default", {}, void 0, !0)
+    ], 16, He));
   }
 });
-const qe = /* @__PURE__ */ _(Ee, [["__scopeId", "data-v-640ee9a6"]]), ze = ["id", "value", "checked", "disabled", "required", "name"], Te = { class: "joy-radio-label" }, Re = { class: "joy-radio-content__wrapper" }, Oe = { class: "joy-radio-content" }, Ne = /* @__PURE__ */ y({
+const Ge = /* @__PURE__ */ p(Ae, [["__scopeId", "data-v-640ee9a6"]]), De = ["id", "value", "checked", "disabled", "required", "name"], Pe = { class: "joy-radio-label" }, We = { class: "joy-radio-content__wrapper" }, Ue = { class: "joy-radio-content" }, Ze = /* @__PURE__ */ h({
   __name: "JoyRadio",
   props: {
-    ...B,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // ...FORM_BASED_PROPS,
     modelValue: {
       type: String
     },
@@ -492,66 +701,66 @@ const qe = /* @__PURE__ */ _(Ee, [["__scopeId", "data-v-640ee9a6"]]), ze = ["id"
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: a, emit: t }) {
-    const l = e, i = h(!1), c = h(null), S = h(null), o = E(), p = J(() => !l.modelValue || !l.value ? !1 : l.modelValue === l.value);
-    function b() {
-      i.value = !!o["expandable-content"] && p.value;
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = S(!1), m = S(null), _ = S(null), r = E(), c = I(() => !a.modelValue || !a.value ? !1 : a.modelValue === a.value);
+    function j() {
+      o.value = !!r["expandable-content"] && c.value;
     }
-    function I() {
-      t("update:modelValue", l.value), b();
+    function x() {
+      t("update:modelValue", a.value), j();
     }
-    return A(() => {
-      l.theme === "outline" && b();
-    }), D(
-      () => l.modelValue,
+    return T(() => {
+      a.theme === "outline" && j();
+    }), G(
+      () => a.modelValue,
       () => {
-        b();
+        j();
       }
-    ), a({
-      checked: p,
-      isExpanded: i
-    }), (g, $) => (s(), u("label", {
+    ), l({
+      checked: c,
+      isExpanded: o
+    }), (k, v) => (i(), u("label", {
       ref_key: "root",
-      ref: c,
-      class: d([
+      ref: m,
+      class: y([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": f(p),
-          "joy-radio--disabled": g.disabled,
-          "joy-radio--invalid": g.invalid
+          "joy-radio--checked": g(c),
+          "joy-radio--disabled": e.disabled,
+          "joy-radio--invalid": e.invalid
         }
       ])
     }, [
       n("input", {
-        id: g.name,
+        id: e.name,
         type: "radio",
         value: e.value,
-        checked: f(p),
-        disabled: g.disabled,
-        required: g.required,
-        name: g.name,
-        onChange: I
-      }, null, 40, ze),
-      n("span", Te, [
-        r(g.$slots, "default", {}, void 0, !0)
+        checked: g(c),
+        disabled: e.disabled,
+        required: e.required,
+        name: e.name,
+        onChange: x
+      }, null, 40, De),
+      n("span", Pe, [
+        s(k.$slots, "default", {}, void 0, !0)
       ]),
-      n("div", Re, [
-        n("div", Oe, [
-          r(g.$slots, "radio-content", {}, void 0, !0)
+      n("div", We, [
+        n("div", Ue, [
+          s(k.$slots, "radio-content", {}, void 0, !0)
         ]),
         n("div", {
           ref_key: "expandableElement",
-          ref: S,
-          class: d(["joy-radio-expandable", { "joy-radio-expandable--expanded": i.value }])
+          ref: _,
+          class: y(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
         }, [
-          r(g.$slots, "expandable-content", {}, void 0, !0)
+          s(k.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const Ae = /* @__PURE__ */ _(Ne, [["__scopeId", "data-v-822f5782"]]), Pe = ["form", "name"], Fe = /* @__PURE__ */ y({
+const Ke = /* @__PURE__ */ p(Ze, [["__scopeId", "data-v-0a0dcfe7"]]), Qe = ["form", "name"], Xe = /* @__PURE__ */ h({
   __name: "JoyRadioGroup",
   props: {
     direction: {
@@ -561,121 +770,136 @@ const Ae = /* @__PURE__ */ _(Ne, [["__scopeId", "data-v-822f5782"]]), Pe = ["for
     form: {
       type: String
     },
-    modelValue: {
-      type: String
-    },
     name: {
       type: String
-    },
-    invalid: Boolean,
-    invalidText: {
-      type: String
     }
   },
   setup(e) {
-    return (a, t) => (s(), u("fieldset", {
+    return (l, t) => (i(), u("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      r(a.$slots, "radio-group-legend", {}, void 0, !0),
+      s(l.$slots, "radio-group-legend", {}, void 0, !0),
       n("div", {
-        class: d(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
+        class: y(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        r(a.$slots, "default", {}, void 0, !0)
+        s(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, Pe));
+    ], 8, Qe));
   }
 });
-const He = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-09adf076"]]), Me = (e) => (O("data-v-7733736c"), e = e(), N(), e), De = ["id", "name", "aria-invalid", "required", "disabled", "value"], Ge = /* @__PURE__ */ Me(() => /* @__PURE__ */ n("joy-icon", {
+const Ye = /* @__PURE__ */ p(Xe, [["__scopeId", "data-v-d75cd96a"]]), et = (e) => (L("data-v-f9015b7b"), e = e(), z(), e), tt = ["id", "name", "aria-invalid", "required", "disabled", "value"], at = /* @__PURE__ */ et(() => /* @__PURE__ */ n("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), We = /* @__PURE__ */ y({
+}, null, -1)), lt = /* @__PURE__ */ h({
   __name: "JoySelect",
   props: {
-    ...B,
-    ...H,
-    modelValue: {
-      type: String,
-      default: ""
+    disabled: {
+      type: Boolean,
+      default: !1
     },
-    optionalLabel: {
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
       type: String
     },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // ...FORM_BASED_PROPS,
+    label: String,
+    labelSize: {
+      type: String,
+      default: "medium"
+    },
+    optionalLabel: String,
     requiredMark: {
       type: Boolean,
       default: !1
+    },
+    // ...LABEL_BASED_PROPS,
+    modelValue: {
+      type: String,
+      default: ""
     }
+    // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: a }) {
-    const t = e, l = h(), i = h(), c = E();
-    A(() => {
-      var b;
-      const o = c.label && c.label();
-      if (!o || !o.length)
+  setup(e, { emit: l }) {
+    const t = e, a = S(), o = S(), m = E();
+    T(() => {
+      var j;
+      const r = m.label && m.label();
+      if (!r || !r.length)
         return;
-      const p = o[0];
-      if (p.type === "JoyLabel") {
-        const I = (b = p.props) == null ? void 0 : b.for;
-        if (!I) {
+      const c = r[0];
+      if (c.type === "JoyLabel") {
+        const x = (j = c.props) == null ? void 0 : j.for;
+        if (!x) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        I !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        x !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function S(o) {
-      const p = o.target.value;
-      a("update:modelValue", p);
+    function _(r) {
+      const c = r.target.value;
+      l("update:modelValue", c);
     }
-    return (o, p) => (s(), u("div", {
+    return (r, c) => (i(), u("div", {
       ref_key: "root",
-      ref: l
+      ref: a
     }, [
-      r(o.$slots, "label", {}, () => [
-        o.label ? (s(), w(q, {
+      s(r.$slots, "label", {}, () => [
+        e.label ? (i(), J(C, {
           key: 0,
-          required: o.required && e.requiredMark,
+          required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
-          for: o.id || o.name,
-          size: o.labelSize
+          for: e.id || e.name,
+          size: e.labelSize
         }, {
-          default: V(() => [
-            R(L(o.label), 1)
+          default: q(() => [
+            B(V(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : j("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : b("", !0)
       ], !0),
       n("div", {
-        class: d({
+        class: y({
           "joy-select__wrapper": !0,
-          "joy-select--invalid": o.invalid,
-          "joy-select--disabled": o.disabled
+          "joy-select--invalid": e.invalid,
+          "joy-select--disabled": e.disabled
         })
       }, [
         n("select", {
-          id: o.id || o.name,
+          id: e.id || e.name,
           ref_key: "select",
-          ref: i,
+          ref: o,
           class: "joy-select",
-          name: o.name,
-          "aria-invalid": o.invalid,
-          required: o.required,
-          disabled: o.disabled,
+          name: e.name,
+          "aria-invalid": e.invalid,
+          required: e.required,
+          disabled: e.disabled,
           value: e.modelValue,
-          onInput: S
+          onInput: _
         }, [
-          r(o.$slots, "default", {}, void 0, !0)
-        ], 40, De),
-        Ge
+          s(r.$slots, "default", {}, void 0, !0)
+        ], 40, tt),
+        at
       ], 2)
     ], 512));
   }
 });
-const Ze = /* @__PURE__ */ _(We, [["__scopeId", "data-v-7733736c"]]), Ue = /* @__PURE__ */ y({
+const nt = /* @__PURE__ */ p(lt, [["__scopeId", "data-v-f9015b7b"]]), ot = /* @__PURE__ */ h({
   __name: "JoyWrapper",
   props: {
     justify: {
@@ -696,83 +920,252 @@ const Ze = /* @__PURE__ */ _(We, [["__scopeId", "data-v-7733736c"]]), Ue = /* @_
     }
   },
   setup(e) {
-    return (a, t) => (s(), u("div", {
-      class: d(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
+    return (l, t) => (i(), u("div", {
+      class: y(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      r(a.$slots, "default", {}, void 0, !0)
+      s(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const Ke = /* @__PURE__ */ _(Ue, [["__scopeId", "data-v-dce6df77"]]), Xe = { class: "joy-template__heading" }, Qe = { class: "joy-template__heading___headings" }, Ye = /* @__PURE__ */ y({
+const it = /* @__PURE__ */ p(ot, [["__scopeId", "data-v-ce0e1214"]]), dt = { class: "joy-template__heading" }, rt = { class: "joy-template__heading___headings" }, ut = /* @__PURE__ */ h({
   __name: "JoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const a = e;
-    return (t, l) => (s(), u("main", {
-      class: d(["joy-template", { "joy-template--full": a.full }])
+    const l = e;
+    return (t, a) => (i(), u("main", {
+      class: y(["joy-template", { "joy-template--full": l.full }])
     }, [
-      n("div", Xe, [
+      n("div", dt, [
         n("div", {
-          class: d({ "joy-template-slot-back": t.$slots["template-back"] })
+          class: y({ "joy-template-slot-back": t.$slots["template-back"] })
         }, [
-          r(t.$slots, "template-back", {}, void 0, !0)
+          s(t.$slots, "template-back", {}, void 0, !0)
         ], 2),
-        n("div", Qe, [
+        n("div", rt, [
           n("div", {
-            class: d({ "joy-template-slot-title": t.$slots["template-title"] })
+            class: y({ "joy-template-slot-title": t.$slots["template-title"] })
           }, [
-            r(t.$slots, "template-title", {}, void 0, !0)
+            s(t.$slots, "template-title", {}, void 0, !0)
           ], 2),
           n("div", {
-            class: d({ "joy-template-slot-subtitle": t.$slots["template-subtitle"] })
+            class: y({ "joy-template-slot-subtitle": t.$slots["template-subtitle"] })
           }, [
-            r(t.$slots, "template-subtitle", {}, void 0, !0)
+            s(t.$slots, "template-subtitle", {}, void 0, !0)
           ], 2)
         ])
       ]),
       n("div", {
-        class: d([
+        class: y([
           "joy-template__content",
           {
-            "joy-template__content--reverse": a.sidebar === "left"
+            "joy-template__content--reverse": l.sidebar === "left"
           }
         ])
       }, [
         n("div", {
-          class: d({ "joy-template-slot-main": t.$slots["template-main"] })
+          class: y({ "joy-template-slot-main": t.$slots["template-main"] })
         }, [
-          r(t.$slots, "template-main", {}, void 0, !0)
+          s(t.$slots, "template-main", {}, void 0, !0)
         ], 2),
         n("div", {
-          class: d({ "joy-template-slot-sidebar": t.$slots["template-sidebar"] })
+          class: y({ "joy-template-slot-sidebar": t.$slots["template-sidebar"] })
         }, [
-          r(t.$slots, "template-sidebar", {}, void 0, !0)
+          s(t.$slots, "template-sidebar", {}, void 0, !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const xe = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-d8b3fcfa"]]), et = ["name", "disabled", "checked", "required", "aria-checked", "value"], tt = { class: "joy-toggle__content" }, ot = /* @__PURE__ */ y({
+const st = /* @__PURE__ */ p(ut, [["__scopeId", "data-v-2333416c"]]), ct = ["aria-disabled"], yt = ["id", "disabled", "name", "required", "minlength", "value"], mt = {
+  key: 0,
+  class: "joy-textarea_helpers"
+}, ft = {
+  key: 0,
+  name: "check",
+  color: "grey",
+  size: "xxsmall"
+}, vt = /* @__PURE__ */ h({
+  __name: "JoyTextarea",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // ...FORM_BASED_PROPS,
+    label: String,
+    labelSize: {
+      type: String,
+      default: "medium"
+    },
+    optionalLabel: String,
+    requiredMark: {
+      type: Boolean,
+      default: !1
+    },
+    // ...LABEL_BASED_PROPS,
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    // ...TEXT_BASED_PROPS,
+    autogrow: {
+      type: Boolean,
+      default: !1
+    },
+    minlength: {
+      type: Number
+    },
+    minlengthLabel: String,
+    maxlength: {
+      type: Number
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = S(), m = S(), _ = S(!1), r = I(() => a.maxlength ? a.modelValue.length > a.maxlength : !1), c = I(() => a.minlength ? a.modelValue.length < a.minlength : !1);
+    function j() {
+      o.value && a.autogrow && (o.value.style.height = "auto", o.value.style.height = o.value.scrollHeight + "px", m.value && (m.value.style.height = o.value.scrollHeight + "px"));
+    }
+    T(() => {
+      j();
+    });
+    const x = {
+      onInput: (k) => {
+        t("update:modelValue", k.target.value), j();
+      },
+      onBlur: () => {
+        _.value = r.value || c.value;
+      }
+    };
+    return l({
+      isInvalid: _,
+      valueOverMaxlength: r,
+      valueUnderMinlength: c
+    }), (k, v) => (i(), u("div", {
+      "aria-disabled": e.disabled,
+      class: y([
+        "joy-textarea",
+        {
+          "joy-textarea_invalid": _.value || e.invalid,
+          "joy-textarea_disabled": e.disabled,
+          "joy-textarea_autogrow": e.autogrow
+        }
+      ])
+    }, [
+      R(g(C), {
+        for: e.id,
+        required: e.required && e.requiredMark,
+        "optional-label": e.optionalLabel,
+        size: e.labelSize
+      }, {
+        default: q(() => [
+          s(k.$slots, "default", {}, () => [
+            B(V(e.label), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["for", "required", "optional-label", "size"]),
+      n("div", {
+        ref_key: "textareaWrapper",
+        ref: m,
+        class: "joy-textarea_wrapper"
+      }, [
+        n("textarea", w(k.$attrs, {
+          id: e.id,
+          ref_key: "textarea",
+          ref: o,
+          class: "joy-native-textarea",
+          disabled: e.disabled,
+          name: e.name,
+          required: e.required,
+          minlength: e.minlength,
+          value: e.modelValue,
+          onInput: v[0] || (v[0] = //@ts-ignore
+          (...d) => x.onInput && x.onInput(...d)),
+          onBlur: v[1] || (v[1] = //@ts-ignore
+          (...d) => x.onBlur && x.onBlur(...d))
+        }), null, 16, yt)
+      ], 512),
+      e.minlength || e.maxlength ? (i(), u("div", mt, [
+        e.minlength ? (i(), u("p", {
+          key: 0,
+          class: y(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
+        }, [
+          g(c) ? b("", !0) : (i(), u("joy-icon", ft)),
+          B(" " + V(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+        ], 2)) : b("", !0),
+        e.maxlength ? (i(), u("p", {
+          key: 1,
+          class: y(["joy-textarea-count", { "joy-textarea-count-invalid": g(r) }])
+        }, V(e.modelValue.length + "/" + e.maxlength), 3)) : b("", !0)
+      ])) : b("", !0)
+    ], 10, ct));
+  }
+});
+const gt = /* @__PURE__ */ p(vt, [["__scopeId", "data-v-d68ef0dd"]]), bt = ["name", "disabled", "checked", "required", "aria-checked", "value"], ht = { class: "joy-toggle__content" }, pt = /* @__PURE__ */ h({
   __name: "JoyToggle",
-  props: F,
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: String,
+      default: "on"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // ...CHECKBOX_BASED_PROPS,
+    label: String
+  },
   emits: ["update:modelValue"],
-  setup(e, { emit: a }) {
+  setup(e, { emit: l }) {
     const t = {
-      onChange: (l) => {
-        const i = l.target.checked;
-        a("update:modelValue", i);
+      onChange: (a) => {
+        const o = a.target.checked;
+        l("update:modelValue", o);
       }
     };
-    return (l, i) => (s(), u("div", null, [
+    return (a, o) => (i(), u("div", null, [
       n("label", {
-        class: d([
+        class: y([
           "joy-toggle",
           {
-            "joy-toggle__checked": l.modelValue,
-            "joy-toggle__disabled": l.disabled
+            "joy-toggle__checked": e.modelValue,
+            "joy-toggle__disabled": e.disabled
           }
         ])
       }, [
@@ -781,59 +1174,65 @@ const xe = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-d8b3fcfa"]]), et = ["nam
           type: "checkbox",
           class: "joy-toggle__input",
           role: "checkbox",
-          name: l.name,
-          disabled: l.disabled,
-          checked: l.modelValue,
-          required: l.required,
-          "aria-checked": l.modelValue,
-          value: l.value,
-          onChange: i[0] || (i[0] = //@ts-ignore
-          (...c) => t.onChange && t.onChange(...c))
-        }, null, 40, et),
-        n("p", tt, [
-          r(l.$slots, "default", {}, void 0, !0)
+          name: e.name,
+          disabled: e.disabled,
+          checked: e.modelValue,
+          required: e.required,
+          "aria-checked": e.modelValue,
+          value: e.value,
+          onChange: o[0] || (o[0] = //@ts-ignore
+          (...m) => t.onChange && t.onChange(...m))
+        }, null, 40, bt),
+        n("p", ht, [
+          s(a.$slots, "default", {}, () => [
+            B(V(e.label), 1)
+          ], !0)
         ])
       ], 2)
     ]));
   }
 });
-const at = /* @__PURE__ */ _(ot, [["__scopeId", "data-v-e617de9c"]]), lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const _t = /* @__PURE__ */ p(pt, [["__scopeId", "data-v-e31a6b5e"]]), jt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   JoyButton: ae,
-  JoyCheckbox: de,
-  JoyFormError: _e,
-  JoyHighlight: be,
-  JoyInput: Ve,
-  JoyLabel: q,
-  JoyLink: qe,
-  JoyRadio: Ae,
-  JoyRadioGroup: He,
-  JoySelect: Ze,
-  JoySpinner: P,
-  JoyTemplate: xe,
-  JoyToggle: at,
-  JoyWrapper: Ke
-}, Symbol.toStringTag, { value: "Module" })), it = {
+  JoyCheckbox: re,
+  JoyCounter: _e,
+  JoyFormError: O,
+  JoyHighlight: qe,
+  JoyInput: Re,
+  JoyLabel: C,
+  JoyLink: Ge,
+  JoyRadio: Ke,
+  JoyRadioGroup: Ye,
+  JoySelect: nt,
+  JoySpinner: F,
+  JoyTemplate: st,
+  JoyTextarea: gt,
+  JoyToggle: _t,
+  JoyWrapper: it
+}, Symbol.toStringTag, { value: "Module" })), $t = {
   install: (e) => {
-    Object.entries(lt).forEach(([a, t]) => {
-      e.component(a, t);
+    Object.entries(jt).forEach(([l, t]) => {
+      e.component(l, t);
     });
   }
 };
 export {
   ae as JoyButton,
-  de as JoyCheckbox,
-  _e as JoyFormError,
-  be as JoyHighlight,
-  Ve as JoyInput,
-  q as JoyLabel,
-  qe as JoyLink,
-  Ae as JoyRadio,
-  He as JoyRadioGroup,
-  Ze as JoySelect,
-  P as JoySpinner,
-  xe as JoyTemplate,
-  at as JoyToggle,
-  it as JoyVuePlugin,
-  Ke as JoyWrapper
+  re as JoyCheckbox,
+  _e as JoyCounter,
+  O as JoyFormError,
+  qe as JoyHighlight,
+  Re as JoyInput,
+  C as JoyLabel,
+  Ge as JoyLink,
+  Ke as JoyRadio,
+  Ye as JoyRadioGroup,
+  nt as JoySelect,
+  F as JoySpinner,
+  st as JoyTemplate,
+  gt as JoyTextarea,
+  _t as JoyToggle,
+  $t as JoyVuePlugin,
+  it as JoyWrapper
 };