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

package/dist/joy-vue.js

@@ -1,26 +1,26 @@
-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({
+import { defineComponent as S, openBlock as i, createElementBlock as r, normalizeClass as v, useAttrs as O, computed as J, createBlock as V, resolveDynamicComponent as z, unref as b, withCtx as q, createCommentVNode as f, createElementVNode as d, renderSlot as m, ref as _, createTextVNode as B, toDisplayString as $, mergeProps as w, createVNode as R, pushScopeId as M, popScopeId as T, useSlots as L, onBeforeMount as P, Fragment as F, renderList as A, onMounted as E, watch as D, createSlots as K } from "vue";
+const Z = ["teal", "white"], Q = /* @__PURE__ */ S({
   __name: "JoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return D.includes(e);
+        return Z.includes(e);
       }
     }
   },
   setup(e) {
-    return (l, t) => (i(), u("div", {
-      class: y(["joy-spinner", `joy-spinner_${e.color}`])
+    return (n, a) => (i(), r("div", {
+      class: v(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const p = (e, l) => {
-  const t = e.__vccOpts || e;
-  for (const [a, o] of l)
-    t[a] = o;
-  return t;
-}, 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({
+const j = (e, n) => {
+  const a = e.__vccOpts || e;
+  for (const [t, o] of n)
+    a[t] = o;
+  return a;
+}, H = /* @__PURE__ */ j(Q, [["__scopeId", "data-v-b633f633"]]), X = ["primary", "secondary"], Y = ["neutral", "success", "info", "warning", "error"], ee = ["main", "admin", "ghost"], te = [...X, ...ee], ae = ["large", "medium", "small", "xsmall", "xxsmall"], le = ["xxsmall", "xsmall", "small"], ne = ["name", "size"], ie = { class: "joy-button--slot" }, oe = /* @__PURE__ */ S({
   __name: "JoyButton",
   props: {
     /**
@@ -43,7 +43,7 @@ const p = (e, l) => {
       type: String,
       default: "primary",
       validator(e) {
-        return K.includes(e);
+        return te.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,7 +51,7 @@ const p = (e, l) => {
       type: String,
       default: "medium",
       validator(e) {
-        return Q.includes(e);
+        return ae.includes(e);
       }
     },
     /** Override the icon size. Default to xsmall */
@@ -59,15 +59,15 @@ const p = (e, l) => {
       type: String,
       default: "xsmall",
       validator(e) {
-        return X.includes(e);
+        return le.includes(e);
       }
     }
   },
   setup(e) {
-    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([
+    const n = e, a = O(), t = J(() => ["white", "ghost", "secondary"].includes(n.variant) ? "teal" : "white");
+    return (o, s) => (i(), V(z(b(a).href ? "a" : "button"), {
+      disabled: e.loading || b(a).disabled,
+      class: v([
         "joy-button",
         `joy-button_${e.variant}`,
         `joy-button_${e.size}`,
@@ -78,25 +78,25 @@ const p = (e, l) => {
       ])
     }, {
       default: q(() => [
-        e.icon ? (i(), u("joy-icon", {
+        e.icon ? (i(), r("joy-icon", {
           key: 0,
           name: e.icon,
           size: e.iconSize,
           lazy: !1
-        }, null, 8, Y)) : b("", !0),
-        e.loading ? (i(), J(F, {
+        }, null, 8, ne)) : f("", !0),
+        e.loading ? (i(), V(H, {
           key: 1,
-          color: g(a)
-        }, null, 8, ["color"])) : b("", !0),
-        n("span", ee, [
-          s(o.$slots, "default", {}, void 0, !0)
+          color: b(t)
+        }, null, 8, ["color"])) : f("", !0),
+        d("span", ie, [
+          m(o.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
     }, 8, ["disabled", "class"]));
   }
 });
-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({
+const de = /* @__PURE__ */ j(oe, [["__scopeId", "data-v-958cc680"]]), ue = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], se = { class: "joy-checkbox__content-wrapper" }, ce = { class: "joy-checkbox__content" }, ye = /* @__PURE__ */ S({
   __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 */
@@ -104,17 +104,21 @@ const ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-958cc680"]]), le = ["ari
       type: Boolean,
       default: !1
     },
+    /** Use it to replace the default slot */
     label: {
       type: String
     },
-    modelValue: {
+    /** Checked state of the component */
+    checked: {
       type: Boolean,
       default: !1
     },
+    /** The value is used in multiselection context in order to build array of values. */
     value: {
       type: String,
       default: "on"
     },
+    /** Removes any interactivity if disabled */
     disabled: {
       type: Boolean,
       default: !1
@@ -122,10 +126,6 @@ const ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-958cc680"]]), le = ["ari
     id: {
       type: String
     },
-    invalid: {
-      type: Boolean,
-      default: !1
-    },
     name: {
       type: String
     },
@@ -133,32 +133,32 @@ const ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-958cc680"]]), le = ["ari
       type: Boolean,
       default: !1
     }
-    // ...CHECKBOX_BASED_PROPS,
   },
-  emits: ["update:modelValue"],
-  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);
+  emits: ["update:checked"],
+  setup(e, { expose: n, emit: a }) {
+    const t = e, o = _(), s = _(t.indeterminate), c = {
+      onChange: (l) => {
+        const u = l.target.checked;
+        s.value = !1, a("update:checked", u);
       }
     };
-    return l({
-      isIndeterminate: m
-    }), (r, c) => (i(), u("div", {
-      "aria-checked": e.modelValue,
+    return n({
+      isIndeterminate: s
+    }), (l, u) => (i(), r("div", {
+      "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      n("label", {
-        class: y([
+      d("label", {
+        class: v([
           "joy-checkbox",
           {
-            "joy-checkbox__checked": e.modelValue,
-            "joy-checkbox__indeterminate": m.value
+            "joy-checkbox__checked": e.checked,
+            "joy-checkbox__indeterminate": s.value
           }
         ])
       }, [
-        n("input", {
+        d("input", {
+          id: e.id,
           ref_key: "input",
           ref: o,
           type: "checkbox",
@@ -166,45 +166,45 @@ const ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-958cc680"]]), le = ["ari
           role: "checkbox",
           name: e.name,
           disabled: e.disabled,
-          checked: e.modelValue,
+          checked: e.checked,
           required: e.required,
-          "aria-checked": e.modelValue,
+          "aria-checked": e.checked,
           value: e.value,
-          indeterminate: m.value,
-          onChange: c[0] || (c[0] = //@ts-ignore
-          (...j) => _.onChange && _.onChange(...j))
-        }, null, 40, ne),
-        n("div", oe, [
-          s(r.$slots, "default", {}, () => [
-            B(V(e.label), 1)
+          indeterminate: s.value,
+          onChange: u[0] || (u[0] = //@ts-ignore
+          (...g) => c.onChange && c.onChange(...g))
+        }, null, 40, re),
+        d("div", se, [
+          m(l.$slots, "default", {}, () => [
+            B($(e.label), 1)
           ], !0),
-          n("div", ie, [
-            s(r.$slots, "checkbox-content", {}, void 0, !0)
+          d("div", ce, [
+            m(l.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, le));
+    ], 8, ue));
   }
 });
-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", {
+const N = /* @__PURE__ */ j(ye, [["__scopeId", "data-v-7251a11b"]]), G = (e) => (M("data-v-47a76942"), e = e(), T(), e), me = { class: "joy-counter" }, fe = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ve = /* @__PURE__ */ G(() => /* @__PURE__ */ d("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", {
+}, null, -1)), ge = [
+  ve
+], he = ["id", "min", "max", "aria-invalid", "name", "required", "value"], pe = ["aria-label", "disabled"], ke = /* @__PURE__ */ G(() => /* @__PURE__ */ d("joy-icon", {
   name: "add",
   lazy: !1,
   color: "teal"
-}, null, -1)), be = [
-  ge
-], he = {
+}, null, -1)), Se = [
+  ke
+], je = {
   key: 0,
   class: "joy-counter_error"
-}, pe = /* @__PURE__ */ h({
+}, _e = /* @__PURE__ */ S({
   __name: "JoyCounter",
   props: {
-    // ...FORM_BASED_PROPS,
+    /** Removes any interactivity */
     disabled: {
       type: Boolean,
       default: !1
@@ -223,20 +223,25 @@ const re = /* @__PURE__ */ p(de, [["__scopeId", "data-v-cd187cef"]]), H = (e) =>
       type: Boolean,
       default: !1
     },
+    /** Display a label on top of the element. */
     label: String,
+    /** Overrides the default label size. See JoyLabel stories */
     labelSize: {
       type: String,
       default: "medium"
     },
+    /** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
     optionalLabel: String,
+    /** Depending on context, we can add a "*" after the label to specify it's mandatory. */
     requiredMark: {
       type: Boolean,
       default: !1
     },
-    // ...LABEL_BASED_PROPS,
+    /** Used for aria-label. */
     labelDecrement: {
       type: String
     },
+    /** Used for aria-label. */
     labelIncrement: {
       type: String
     },
@@ -251,53 +256,55 @@ const re = /* @__PURE__ */ p(de, [["__scopeId", "data-v-cd187cef"]]), H = (e) =>
       type: Number,
       default: 0
     },
+    /** In order to increment or decrement by given steps. For non-integer values, don't use comma */
     step: {
       type: Number,
       default: 1
     },
-    componentErrorMessage: {
+    /** When given, it renders a JoyFormError element */
+    errorMessage: {
       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();
+  setup(e, { expose: n, emit: a }) {
+    const t = e, o = _(!1);
+    function s() {
+      const y = u(!1);
+      y >= 0 ? a("update:modelValue", y <= t.min ? t.min : y) : a("update:modelValue", 0), l();
     }
-    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 c() {
+      const y = u();
+      t.max && y <= t.max ? a("update:modelValue", y >= t.max ? t.max : y) : t.max && y > t.max ? a("update:modelValue", t.max) : a("update:modelValue", y), l();
     }
-    function r() {
-      o.value = !j();
+    function l() {
+      o.value = !g();
     }
-    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 u(y = !0) {
+      const h = t.step.toString().split("."), x = h.length === 2 ? h[1].length : 0;
+      return parseFloat(y ? (t.modelValue + t.step).toFixed(x) : (t.modelValue - t.step).toFixed(x));
     }
-    function j() {
-      return x() && k();
+    function g() {
+      return p() && I();
     }
-    function x() {
-      return !a.max || a.modelValue <= a.max;
+    function p() {
+      return !t.max || t.modelValue <= t.max;
     }
-    function k() {
-      return a.min <= a.modelValue;
+    function I() {
+      return t.min <= t.modelValue;
     }
-    const v = {
-      onInput: (d) => {
-        t("update:modelValue", +d.target.value || 0), o.value = !1;
+    const k = {
+      onInput: (y) => {
+        a("update:modelValue", +y.target.value || 0), o.value = !1;
       },
       onBlur: () => {
-        r();
+        l();
       }
     };
-    return l({
-      props: a
-    }), (d, f) => (i(), u("div", ue, [
-      e.label ? (i(), J(g(C), {
+    return n({
+      props: t
+    }), (y, h) => (i(), r("div", me, [
+      e.label ? (i(), V(b(C), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -305,21 +312,21 @@ const re = /* @__PURE__ */ p(de, [["__scopeId", "data-v-cd187cef"]]), H = (e) =>
         size: e.labelSize
       }, {
         default: q(() => [
-          s(d.$slots, "default", {}, () => [
-            B(V(e.label), 1)
+          m(y.$slots, "default", {}, () => [
+            B($(e.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["for", "required", "optional-label", "size"])) : b("", !0),
-      n("div", se, [
-        n("button", {
+      }, 8, ["for", "required", "optional-label", "size"])) : f("", !0),
+      d("div", fe, [
+        d("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
-          onClick: m
-        }, me, 8, ce),
-        n("input", w({
+          onClick: s
+        }, ge, 8, be),
+        d("input", w({
           id: e.id,
           ref: "input",
           type: "number",
@@ -331,69 +338,71 @@ const re = /* @__PURE__ */ p(de, [["__scopeId", "data-v-cd187cef"]]), H = (e) =>
           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", {
+        }, y.$attrs, {
+          onInput: h[0] || (h[0] = //@ts-ignore
+          (...x) => k.onInput && k.onInput(...x)),
+          onBlur: h[1] || (h[1] = //@ts-ignore
+          (...x) => k.onBlur && k.onBlur(...x))
+        }), null, 16, he),
+        d("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)
+          onClick: c
+        }, Se, 8, pe),
+        e.invalid && e.errorMessage ? (i(), r("div", je, [
+          R(b(U), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+        ])) : f("", !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", {
+const $e = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-47a76942"]]), xe = (e) => (M("data-v-d693f93c"), e = e(), T(), e), Ie = ["aria-hidden"], qe = /* @__PURE__ */ xe(() => /* @__PURE__ */ d("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), xe = /* @__PURE__ */ h({
+}, null, -1)), Be = /* @__PURE__ */ S({
   __name: "JoyFormError",
   props: {
+    /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
     visible: {
       type: Boolean,
       default: !0
     },
+    /** Error message to display. If you need a list of errors, use the slot instead */
     noHtmlErrorText: String
   },
   setup(e) {
-    return (l, t) => (i(), u("div", {
+    return (n, a) => (i(), r("div", {
       "aria-hidden": e.visible,
-      class: y(["joy-form-error", { "joy-has-error": e.visible }]),
+      class: v(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      $e,
-      n("div", null, [
-        s(l.$slots, "default", {}, () => [
-          B(V(e.noHtmlErrorText), 1)
+      qe,
+      d("div", null, [
+        m(n.$slots, "default", {}, () => [
+          B($(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, Se));
+    ], 10, Ie));
   }
 });
-const O = /* @__PURE__ */ p(xe, [["__scopeId", "data-v-eba58103"]]);
-function ke(e) {
-  let l;
+const U = /* @__PURE__ */ j(Be, [["__scopeId", "data-v-d693f93c"]]);
+function Ve(e) {
+  let n;
   switch (e) {
     case "error":
-      l = "warning-triangle";
+      n = "warning-triangle";
       break;
     case "success":
-      l = "check";
+      n = "check";
       break;
     default:
-      l = "info-circle";
+      n = "info-circle";
   }
-  return l;
+  return n;
 }
-const Ve = [...U], Ie = ["name"], Be = { class: "joy-highlight--text" }, Je = /* @__PURE__ */ h({
+const Je = [...Y], Ce = ["name"], we = { class: "joy-highlight--text" }, Le = /* @__PURE__ */ S({
   __name: "JoyHighlight",
   props: {
     accent: {
@@ -409,16 +418,16 @@ const Ve = [...U], Ie = ["name"], Be = { class: "joy-highlight--text" }, Je = /*
       type: String,
       default: "neutral",
       validator(e) {
-        return Ve.includes(e);
+        return Je.includes(e);
       }
     }
   },
-  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([
+  setup(e, { expose: n }) {
+    const a = e, t = J(() => a.icon ? a.icon : Ve(a.level));
+    return n({
+      getRelevantIcon: t
+    }), (o, s) => (i(), r("div", {
+      class: v([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
@@ -427,33 +436,33 @@ const Ve = [...U], Ie = ["name"], Be = { class: "joy-highlight--text" }, Je = /*
         }
       ])
     }, [
-      e.displayIcon ? (i(), u("joy-icon", {
+      e.displayIcon ? (i(), r("joy-icon", {
         key: 0,
-        name: g(a)
-      }, null, 8, Ie)) : b("", !0),
-      n("div", Be, [
-        n("strong", null, [
-          s(o.$slots, "highlight-title", {}, void 0, !0)
+        name: b(t)
+      }, null, 8, Ce)) : f("", !0),
+      d("div", we, [
+        d("strong", null, [
+          m(o.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        s(o.$slots, "default", {}, void 0, !0)
+        m(o.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const qe = /* @__PURE__ */ p(Je, [["__scopeId", "data-v-15d3fa11"]]), we = ["small", "medium", "large"], Ce = {
+const ze = /* @__PURE__ */ j(Le, [["__scopeId", "data-v-15d3fa11"]]), Me = ["small", "medium", "large"], Te = {
   key: 0,
   class: "joy-label-required"
-}, Le = {
+}, Ee = {
   key: 1,
   class: "joy-label-optional"
-}, ze = /* @__PURE__ */ h({
+}, Ne = /* @__PURE__ */ S({
   __name: "JoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return we.includes(e);
+        return Me.includes(e);
       }
     },
     tagName: {
@@ -469,22 +478,21 @@ const qe = /* @__PURE__ */ p(Je, [["__scopeId", "data-v-15d3fa11"]]), we = ["sma
     }
   },
   setup(e) {
-    return (l, t) => (i(), J(M(e.tagName), w({
+    return (n, a) => (i(), V(z(e.tagName), w({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, l.$attrs), {
+    }, n.$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)
+        m(n.$slots, "default", {}, void 0, !0),
+        e.required ? (i(), r("span", Te, "*")) : f("", !0),
+        e.optionalLabel ? (i(), r("span", Ee, "- " + $(e.optionalLabel), 1)) : f("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const C = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-e3232407"]]), Ee = ["large", "medium", "small"], Te = ["id", "disabled", "type", "value"], Ne = ["data-unit"], Me = /* @__PURE__ */ h({
+const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["large", "medium", "small"], Re = ["id", "disabled", "type", "value"], Fe = ["data-unit"], Ae = /* @__PURE__ */ S({
   __name: "JoyInput",
   props: {
-    // ...FORM_BASED_PROPS,
     disabled: {
       type: Boolean,
       default: !1
@@ -503,78 +511,83 @@ const C = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-e3232407"]]), Ee = ["larg
       type: Boolean,
       default: !1
     },
+    /** Display a label on top of the element. */
     label: String,
+    /** Overrides the default label size. See JoyLabel stories */
     labelSize: {
       type: String,
       default: "medium"
     },
+    /** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
     optionalLabel: String,
+    /** Depending on context, we can add a "*" after the label to specify it's mandatory. */
     requiredMark: {
       type: Boolean,
       default: !1
     },
-    // ...LABEL_BASED_PROPS,
     modelValue: {
       type: String,
       default: ""
     },
-    // ...TEXT_BASED_PROPS,
+    /** Display a cross icon on the right that enables to clear the field */
     clearable: {
       type: Boolean,
       default: !1
     },
+    /** Add a JoyIcon / joy-icon with given name on left-side. */
     icon: String,
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return Ee.includes(e);
+        return Oe.includes(e);
       }
     },
     type: String,
+    /** Adds a legend like symbol on the right of the component. Made for number based values */
     unit: String
   },
   emits: ["update:modelValue"],
-  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";
+  setup(e, { emit: n }) {
+    const a = e, t = _(), o = _(), s = O(), c = L(), l = _(!1), u = J(() => a.clearable && a.modelValue.length > 0 && !a.unit), g = J(() => c.default && c.default()), p = J(() => {
+      var y, h;
+      return !!((y = o.value) != null && y.closest("joy-wrapper")) || !!((h = o.value) != null && h.closest(".joy-wrapper"));
+    }), I = _(a.type);
+    P(() => {
+      I.value = a.unit ? "number" : a.unit || "text";
     });
-    const v = {
+    const k = {
       onFocus: () => {
-        r.value = !0;
+        l.value = !0;
       },
       onBlur: () => {
-        r.value = !1;
+        l.value = !1;
       },
-      onInput: (d) => {
-        let f = d.target.value;
-        l("update:modelValue", f);
+      onInput: (y) => {
+        let h = y.target.value;
+        n("update:modelValue", h);
       },
       clearValue: () => {
-        t.disabled || l("update:modelValue", "");
+        a.disabled || n("update:modelValue", "");
       }
     };
-    return (d, f) => (i(), u("div", {
+    return (y, h) => (i(), r("div", {
       ref_key: "root",
       ref: o,
-      class: y([`joy-input--${t.size}`])
+      class: v([`joy-input--${a.size}`])
     }, [
-      n("div", {
-        class: y([
+      d("div", {
+        class: v([
           "joy-input",
           {
-            "joy-input--focusing": r.value,
+            "joy-input--focusing": l.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !g(m).disabled
+            "joy-input--valid": !e.invalid && !b(s).disabled
           }
         ])
       }, [
-        g(j) || e.label ? (i(), J(C, {
+        b(g) || e.label ? (i(), V(C, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -582,27 +595,27 @@ const C = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-e3232407"]]), Ee = ["larg
           size: e.labelSize
         }, {
           default: q(() => [
-            s(d.$slots, "default", {}, () => [
-              B(V(e.label), 1)
+            m(y.$slots, "default", {}, () => [
+              B($(e.label), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : b("", !0),
-        n("div", {
-          class: y([
+        }, 8, ["for", "required", "optional-label", "size"])) : f("", !0),
+        d("div", {
+          class: v([
             "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": !g(x)
+              "joy-input--wrapper-margin": !b(p)
             }
           ])
         }, [
-          n("input", w(d.$attrs, {
-            id: t.name,
+          d("input", w(y.$attrs, {
+            id: a.name,
             ref_key: "input",
-            ref: a,
+            ref: t,
             disabled: e.disabled,
             class: [
               {
@@ -610,34 +623,34 @@ const C = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-e3232407"]]), Ee = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: k.value,
+            type: I.value,
             value: e.modelValue,
-            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", {
+            onFocus: h[0] || (h[0] = //@ts-ignore
+            (...x) => k.onFocus && k.onFocus(...x)),
+            onBlur: h[1] || (h[1] = //@ts-ignore
+            (...x) => k.onBlur && k.onBlur(...x)),
+            onInput: h[2] || (h[2] = //@ts-ignore
+            (...x) => k.onInput && k.onInput(...x))
+          }), null, 16, Re),
+          b(u) ? (i(), r("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
-            onClick: f[3] || (f[3] = //@ts-ignore
-            (...$) => v.clearValue && v.clearValue(...$))
-          })) : b("", !0),
-          e.unit ? (i(), u("div", {
+            onClick: h[3] || (h[3] = //@ts-ignore
+            (...x) => k.clearValue && k.clearValue(...x))
+          })) : f("", !0),
+          e.unit ? (i(), r("div", {
             key: 1,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, Ne)) : b("", !0)
+          }, null, 8, Fe)) : f("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const Re = /* @__PURE__ */ p(Me, [["__scopeId", "data-v-3da79efb"]]), Fe = ["teal", "white"], He = ["href"], Oe = ["color", "name"], Ae = /* @__PURE__ */ h({
+const He = /* @__PURE__ */ j(Ae, [["__scopeId", "data-v-f264c5ef"]]), Ge = ["teal", "white"], Ue = ["href"], We = ["color", "name"], Pe = /* @__PURE__ */ S({
   __name: "JoyLink",
   props: {
     href: {
@@ -648,26 +661,109 @@ const Re = /* @__PURE__ */ p(Me, [["__scopeId", "data-v-3da79efb"]]), Fe = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return Fe.includes(e);
+        return Ge.includes(e);
       }
     },
     icon: String
   },
   setup(e) {
-    const l = e, t = I(() => l.color === "white" ? "white" : "teal");
-    return (a, o) => (i(), u("a", w({ href: e.href }, a.$attrs, {
+    const n = e, a = J(() => n.color === "white" ? "white" : "teal");
+    return (t, o) => (i(), r("a", w({ href: e.href }, t.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (i(), u("joy-icon", {
+      e.icon ? (i(), r("joy-icon", {
         key: 0,
-        color: g(t),
+        color: b(a),
         name: e.icon
-      }, null, 8, Oe)) : b("", !0),
-      s(a.$slots, "default", {}, void 0, !0)
-    ], 16, He));
+      }, null, 8, We)) : f("", !0),
+      m(t.$slots, "default", {}, void 0, !0)
+    ], 16, Ue));
   }
 });
-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({
+const De = /* @__PURE__ */ j(Pe, [["__scopeId", "data-v-640ee9a6"]]), Ke = ["id"], Ze = {
+  class: /* @__PURE__ */ v(["joy-multi-checkbox"])
+}, Qe = /* @__PURE__ */ S({
+  __name: "JoyMultiCheckbox",
+  props: {
+    options: {
+      type: Array,
+      required: !0,
+      validator(e) {
+        const n = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
+        return n && a;
+      }
+    },
+    id: String,
+    value: {
+      type: Object,
+      default() {
+        return [];
+      }
+    },
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    label: String,
+    labelSize: {
+      type: String,
+      default: "medium"
+    },
+    optionalLabel: String,
+    requiredMark: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:value"],
+  setup(e, { emit: n }) {
+    const a = e;
+    function t(s) {
+      return a.value.includes(s.value);
+    }
+    function o(s, c) {
+      let l = [...a.value || []];
+      c ? l.push(s) : l.splice(l.indexOf(s), 1), n("update:value", l);
+    }
+    return (s, c) => (i(), r("fieldset", {
+      id: e.id,
+      class: "joy-multi-checkbox__wrapper"
+    }, [
+      e.label ? (i(), V(b(C), {
+        key: 0,
+        "tag-name": "legend",
+        required: e.required && e.requiredMark,
+        "optional-label": e.optionalLabel,
+        size: e.labelSize
+      }, {
+        default: q(() => [
+          B($(e.label), 1)
+        ]),
+        _: 1
+      }, 8, ["required", "optional-label", "size"])) : f("", !0),
+      d("div", Ze, [
+        (i(!0), r(F, null, A(e.options, (l) => (i(), V(b(N), {
+          id: l.id,
+          key: l.id,
+          name: l.name,
+          value: l.value,
+          checked: t(l),
+          "onUpdate:checked": (u) => o(l.value, u)
+        }, {
+          default: q(() => [
+            B($(l.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
+      ])
+    ], 8, Ke));
+  }
+});
+const Xe = /* @__PURE__ */ j(Qe, [["__scopeId", "data-v-ac218b17"]]), Ye = ["id", "value", "checked", "disabled", "required", "name"], et = { class: "joy-radio-label" }, tt = { class: "joy-radio-content__wrapper" }, at = { class: "joy-radio-content" }, lt = /* @__PURE__ */ S({
   __name: "JoyRadio",
   props: {
     disabled: {
@@ -701,66 +797,66 @@ const Ge = /* @__PURE__ */ p(Ae, [["__scopeId", "data-v-640ee9a6"]]), De = ["id"
     }
   },
   emits: ["update:modelValue"],
-  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;
+  setup(e, { expose: n, emit: a }) {
+    const t = e, o = _(!1), s = _(null), c = _(null), l = L(), u = J(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
+    function g() {
+      o.value = !!l["expandable-content"] && u.value;
     }
-    function x() {
-      t("update:modelValue", a.value), j();
+    function p() {
+      a("update:modelValue", t.value), g();
     }
-    return T(() => {
-      a.theme === "outline" && j();
-    }), G(
-      () => a.modelValue,
+    return E(() => {
+      t.theme === "outline" && g();
+    }), D(
+      () => t.modelValue,
       () => {
-        j();
+        g();
       }
-    ), l({
-      checked: c,
+    ), n({
+      checked: u,
       isExpanded: o
-    }), (k, v) => (i(), u("label", {
+    }), (I, k) => (i(), r("label", {
       ref_key: "root",
-      ref: m,
-      class: y([
+      ref: s,
+      class: v([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": g(c),
+          "joy-radio--checked": b(u),
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid
         }
       ])
     }, [
-      n("input", {
-        id: e.name,
+      d("input", {
+        id: e.id,
         type: "radio",
         value: e.value,
-        checked: g(c),
+        checked: b(u),
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: x
-      }, null, 40, De),
-      n("span", Pe, [
-        s(k.$slots, "default", {}, void 0, !0)
+        onChange: p
+      }, null, 40, Ye),
+      d("span", et, [
+        m(I.$slots, "default", {}, void 0, !0)
       ]),
-      n("div", We, [
-        n("div", Ue, [
-          s(k.$slots, "radio-content", {}, void 0, !0)
+      d("div", tt, [
+        d("div", at, [
+          m(I.$slots, "radio-content", {}, void 0, !0)
         ]),
-        n("div", {
+        d("div", {
           ref_key: "expandableElement",
-          ref: _,
-          class: y(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
+          ref: c,
+          class: v(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
         }, [
-          s(k.$slots, "expandable-content", {}, void 0, !0)
+          m(I.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const Ke = /* @__PURE__ */ p(Ze, [["__scopeId", "data-v-0a0dcfe7"]]), Qe = ["form", "name"], Xe = /* @__PURE__ */ h({
+const nt = /* @__PURE__ */ j(lt, [["__scopeId", "data-v-8882dc58"]]), it = ["form", "name"], ot = /* @__PURE__ */ S({
   __name: "JoyRadioGroup",
   props: {
     direction: {
@@ -775,26 +871,26 @@ const Ke = /* @__PURE__ */ p(Ze, [["__scopeId", "data-v-0a0dcfe7"]]), Qe = ["for
     }
   },
   setup(e) {
-    return (l, t) => (i(), u("fieldset", {
+    return (n, a) => (i(), r("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      s(l.$slots, "radio-group-legend", {}, void 0, !0),
-      n("div", {
-        class: y(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
+      m(n.$slots, "radio-group-legend", {}, void 0, !0),
+      d("div", {
+        class: v(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        s(l.$slots, "default", {}, void 0, !0)
+        m(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, Qe));
+    ], 8, it));
   }
 });
-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", {
+const dt = /* @__PURE__ */ j(ot, [["__scopeId", "data-v-d75cd96a"]]), ut = (e) => (M("data-v-f9015b7b"), e = e(), T(), e), rt = ["id", "name", "aria-invalid", "required", "disabled", "value"], st = /* @__PURE__ */ ut(() => /* @__PURE__ */ d("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), lt = /* @__PURE__ */ h({
+}, null, -1)), ct = /* @__PURE__ */ S({
   __name: "JoySelect",
   props: {
     disabled: {
@@ -834,33 +930,33 @@ const Ye = /* @__PURE__ */ p(Xe, [["__scopeId", "data-v-d75cd96a"]]), et = (e) =
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  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)
+  setup(e, { emit: n }) {
+    const a = e, t = _(), o = _(), s = L();
+    E(() => {
+      var g;
+      const l = s.label && s.label();
+      if (!l || !l.length)
         return;
-      const c = r[0];
-      if (c.type === "JoyLabel") {
-        const x = (j = c.props) == null ? void 0 : j.for;
-        if (!x) {
+      const u = l[0];
+      if (u.type === "JoyLabel") {
+        const p = (g = u.props) == null ? void 0 : g.for;
+        if (!p) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        x !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        p !== a.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function _(r) {
-      const c = r.target.value;
-      l("update:modelValue", c);
+    function c(l) {
+      const u = l.target.value;
+      n("update:modelValue", u);
     }
-    return (r, c) => (i(), u("div", {
+    return (l, u) => (i(), r("div", {
       ref_key: "root",
-      ref: a
+      ref: t
     }, [
-      s(r.$slots, "label", {}, () => [
-        e.label ? (i(), J(C, {
+      m(l.$slots, "label", {}, () => [
+        e.label ? (i(), V(C, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
@@ -868,19 +964,19 @@ const Ye = /* @__PURE__ */ p(Xe, [["__scopeId", "data-v-d75cd96a"]]), et = (e) =
           size: e.labelSize
         }, {
           default: q(() => [
-            B(V(e.label), 1)
+            B($(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : b("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : f("", !0)
       ], !0),
-      n("div", {
-        class: y({
+      d("div", {
+        class: v({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
           "joy-select--disabled": e.disabled
         })
       }, [
-        n("select", {
+        d("select", {
           id: e.id || e.name,
           ref_key: "select",
           ref: o,
@@ -890,16 +986,233 @@ const Ye = /* @__PURE__ */ p(Xe, [["__scopeId", "data-v-d75cd96a"]]), et = (e) =
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: _
+          onInput: c
         }, [
-          s(r.$slots, "default", {}, void 0, !0)
-        ], 40, tt),
-        at
+          m(l.$slots, "default", {}, void 0, !0)
+        ], 40, rt),
+        st
       ], 2)
     ], 512));
   }
 });
-const nt = /* @__PURE__ */ p(lt, [["__scopeId", "data-v-f9015b7b"]]), ot = /* @__PURE__ */ h({
+const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["aria-disabled"], ft = ["id", "value", "checked", "disabled", "required", "name"], bt = /* @__PURE__ */ S({
+  __name: "JoySelectableItem",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Mandatory in order to link the label and the actual input */
+    id: {
+      type: String,
+      required: !0
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    checked: {
+      type: Boolean
+    },
+    value: {
+      type: String
+    }
+  },
+  emits: ["update:checked"],
+  setup(e, { emit: n }) {
+    const a = e, t = _(a.checked), o = _(), s = a.multiple ? "div" : "label", c = {
+      onRadioChange: () => {
+        n("update:checked", a.value);
+      },
+      onClick: () => {
+        a.checked && !a.multiple && n("update:checked", "");
+      },
+      onLabelClick: (u) => {
+        a.multiple || u.stopPropagation();
+      }
+    };
+    function l(u) {
+      n("update:checked", u);
+    }
+    return (u, g) => (i(), r("div", {
+      class: "joy-selectable-item__wrapper",
+      "aria-disabled": e.disabled,
+      onClick: g[2] || (g[2] = //@ts-ignore
+      (...p) => c.onClick && c.onClick(...p))
+    }, [
+      e.multiple ? f("", !0) : (i(), r("input", {
+        key: 0,
+        id: e.id,
+        ref_key: "inputRadio",
+        ref: o,
+        type: "radio",
+        value: e.value,
+        checked: e.checked,
+        disabled: e.disabled,
+        required: e.required,
+        name: e.name,
+        onChange: g[0] || (g[0] = //@ts-ignore
+        (...p) => c.onRadioChange && c.onRadioChange(...p))
+      }, null, 40, ft)),
+      (i(), V(z(b(s)), {
+        for: e.id,
+        class: v([
+          "joy-selectable-item",
+          {
+            "joy-selectable-item--disabled": e.disabled,
+            "joy-selectable-item--checked": e.checked,
+            "joy-selectable-item--multiple": e.multiple,
+            "joy-selectable-item--single": !e.multiple
+          }
+        ]),
+        onClick: c.onLabelClick
+      }, {
+        default: q(() => [
+          e.multiple ? (i(), V(b(N), {
+            key: 0,
+            id: e.id,
+            checked: t.value,
+            "onUpdate:checked": [
+              g[1] || (g[1] = (p) => t.value = p),
+              l
+            ],
+            disabled: e.disabled,
+            value: e.value,
+            name: e.name,
+            required: e.required
+          }, {
+            default: q(() => [
+              m(u.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : f("", !0),
+          e.multiple ? f("", !0) : m(u.$slots, "default", { key: 1 }, void 0, !0),
+          d("div", {
+            class: v([{ "joy-selectable-item__sublabel": u.$slots["selectable-item-sublabel"] }])
+          }, [
+            m(u.$slots, "selectable-item-sublabel", {}, void 0, !0)
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["for", "class", "onClick"]))
+    ], 8, mt));
+  }
+});
+const W = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-6fdac15a"]]), vt = ["id"], gt = /* @__PURE__ */ S({
+  __name: "JoySelectableItemGroup",
+  props: {
+    options: {
+      type: Array,
+      required: !0,
+      validator(e) {
+        const n = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
+        return n && a;
+      }
+    },
+    id: String,
+    value: {
+      type: [String, Array],
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    label: String,
+    labelSize: {
+      type: String,
+      default: "medium"
+    },
+    optionalLabel: String,
+    requiredMark: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:value"],
+  setup(e, { emit: n }) {
+    const a = e;
+    function t(s) {
+      return typeof a.value == "string" ? a.value === s.value : (a.value || []).includes(s.value);
+    }
+    function o(s, c) {
+      if (!a.multiple)
+        return n("update:value", c);
+      let l = [...a.value || []];
+      c && typeof c == "boolean" ? l.push(s) : l.splice(l.indexOf(s), 1), n("update:value", l);
+    }
+    return (s, c) => (i(), r("fieldset", {
+      id: e.id,
+      class: "joy-selectable-item-group__wrapper"
+    }, [
+      e.label ? (i(), V(b(C), {
+        key: 0,
+        "tag-name": "legend",
+        required: e.required && e.requiredMark,
+        "optional-label": e.optionalLabel,
+        size: e.labelSize
+      }, {
+        default: q(() => [
+          B($(e.label), 1)
+        ]),
+        _: 1
+      }, 8, ["required", "optional-label", "size"])) : f("", !0),
+      d("div", {
+        class: v([
+          "joy-selectable-item-group",
+          {
+            "joy-selectable-item-group--multiple": e.multiple,
+            "joy-selectable-item-group--single": !e.multiple,
+            "joy-selectable-item-group--full": e.fullWidth
+          }
+        ])
+      }, [
+        (i(!0), r(F, null, A(e.options, (l) => (i(), V(b(W), {
+          id: l.id,
+          key: l.id,
+          name: l.name,
+          value: l.value,
+          multiple: e.multiple,
+          checked: t(l),
+          "onUpdate:checked": (u) => o(l.value, u)
+        }, K({
+          default: q(() => [
+            B($(l.label) + " ", 1)
+          ]),
+          _: 2
+        }, [
+          l.subLabel ? {
+            name: "selectable-item-sublabel",
+            fn: q(() => [
+              B($(l.subLabel), 1)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["id", "name", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
+      ], 2)
+    ], 8, vt));
+  }
+});
+const ht = /* @__PURE__ */ j(gt, [["__scopeId", "data-v-93c88f70"]]), pt = /* @__PURE__ */ S({
   __name: "JoyWrapper",
   props: {
     justify: {
@@ -920,74 +1233,64 @@ const nt = /* @__PURE__ */ p(lt, [["__scopeId", "data-v-f9015b7b"]]), ot = /* @_
     }
   },
   setup(e) {
-    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}`])
+    return (n, a) => (i(), r("div", {
+      class: v(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      s(l.$slots, "default", {}, void 0, !0)
+      m(n.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const it = /* @__PURE__ */ p(ot, [["__scopeId", "data-v-ce0e1214"]]), dt = { class: "joy-template__heading" }, rt = { class: "joy-template__heading___headings" }, ut = /* @__PURE__ */ h({
+const kt = /* @__PURE__ */ j(pt, [["__scopeId", "data-v-ce0e1214"]]), St = { class: "joy-template__heading" }, jt = { key: 0 }, _t = { class: "joy-template__heading___headings" }, $t = { key: 0 }, xt = { key: 1 }, It = { key: 0 }, qt = { key: 1 }, Bt = /* @__PURE__ */ S({
   __name: "JoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const l = e;
-    return (t, a) => (i(), u("main", {
-      class: y(["joy-template", { "joy-template--full": l.full }])
+    const n = e, a = L();
+    return (t, o) => (i(), r("main", {
+      class: v(["joy-template", { "joy-template--full": n.full }])
     }, [
-      n("div", dt, [
-        n("div", {
-          class: y({ "joy-template-slot-back": t.$slots["template-back"] })
-        }, [
-          s(t.$slots, "template-back", {}, void 0, !0)
-        ], 2),
-        n("div", rt, [
-          n("div", {
-            class: y({ "joy-template-slot-title": t.$slots["template-title"] })
-          }, [
-            s(t.$slots, "template-title", {}, void 0, !0)
-          ], 2),
-          n("div", {
-            class: y({ "joy-template-slot-subtitle": t.$slots["template-subtitle"] })
-          }, [
-            s(t.$slots, "template-subtitle", {}, void 0, !0)
-          ], 2)
+      d("div", St, [
+        b(a)["template-back"] ? (i(), r("div", jt, [
+          m(t.$slots, "template-back", {}, void 0, !0)
+        ])) : f("", !0),
+        d("div", _t, [
+          b(a)["template-title"] ? (i(), r("div", $t, [
+            m(t.$slots, "template-title", {}, void 0, !0)
+          ])) : f("", !0),
+          b(a)["template-subtitle"] ? (i(), r("div", xt, [
+            m(t.$slots, "template-subtitle", {}, void 0, !0)
+          ])) : f("", !0)
         ])
       ]),
-      n("div", {
-        class: y([
+      d("div", {
+        class: v([
           "joy-template__content",
           {
-            "joy-template__content--reverse": l.sidebar === "left"
+            "joy-template__content--reverse": n.sidebar === "left"
           }
         ])
       }, [
-        n("div", {
-          class: y({ "joy-template-slot-main": t.$slots["template-main"] })
-        }, [
-          s(t.$slots, "template-main", {}, void 0, !0)
-        ], 2),
-        n("div", {
-          class: y({ "joy-template-slot-sidebar": t.$slots["template-sidebar"] })
-        }, [
-          s(t.$slots, "template-sidebar", {}, void 0, !0)
-        ], 2)
+        t.$slots["template-main"] ? (i(), r("div", It, [
+          m(t.$slots, "template-main", {}, void 0, !0)
+        ])) : f("", !0),
+        t.$slots["template-sidebar"] ? (i(), r("div", qt, [
+          m(t.$slots, "template-sidebar", {}, void 0, !0)
+        ])) : f("", !0)
       ], 2)
     ], 2));
   }
 });
-const st = /* @__PURE__ */ p(ut, [["__scopeId", "data-v-2333416c"]]), ct = ["aria-disabled"], yt = ["id", "disabled", "name", "required", "minlength", "value"], mt = {
+const Vt = /* @__PURE__ */ j(Bt, [["__scopeId", "data-v-ba1a4be0"]]), Jt = ["aria-disabled"], Ct = ["id", "disabled", "name", "required", "minlength", "value"], wt = {
   key: 0,
   class: "joy-textarea_helpers"
-}, ft = {
+}, Lt = {
   key: 0,
   name: "check",
   color: "grey",
   size: "xxsmall"
-}, vt = /* @__PURE__ */ h({
+}, zt = /* @__PURE__ */ S({
   __name: "JoyTextarea",
   props: {
     disabled: {
@@ -1038,56 +1341,56 @@ const st = /* @__PURE__ */ p(ut, [["__scopeId", "data-v-2333416c"]]), ct = ["ari
     }
   },
   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"));
+  setup(e, { expose: n, emit: a }) {
+    const t = e, o = _(), s = _(), c = _(!1), l = J(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), u = J(() => t.minlength ? t.modelValue.length < t.minlength : !1);
+    function g() {
+      o.value && t.autogrow && (o.value.style.height = "auto", o.value.style.height = o.value.scrollHeight + "px", s.value && (s.value.style.height = o.value.scrollHeight + "px"));
     }
-    T(() => {
-      j();
+    E(() => {
+      g();
     });
-    const x = {
-      onInput: (k) => {
-        t("update:modelValue", k.target.value), j();
+    const p = {
+      onInput: (I) => {
+        a("update:modelValue", I.target.value), g();
       },
       onBlur: () => {
-        _.value = r.value || c.value;
+        c.value = l.value || u.value;
       }
     };
-    return l({
-      isInvalid: _,
-      valueOverMaxlength: r,
-      valueUnderMinlength: c
-    }), (k, v) => (i(), u("div", {
+    return n({
+      isInvalid: c,
+      valueOverMaxlength: l,
+      valueUnderMinlength: u
+    }), (I, k) => (i(), r("div", {
       "aria-disabled": e.disabled,
-      class: y([
+      class: v([
         "joy-textarea",
         {
-          "joy-textarea_invalid": _.value || e.invalid,
+          "joy-textarea_invalid": c.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow
         }
       ])
     }, [
-      R(g(C), {
+      R(b(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)
+          m(I.$slots, "default", {}, () => [
+            B($(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      n("div", {
+      d("div", {
         ref_key: "textareaWrapper",
-        ref: m,
+        ref: s,
         class: "joy-textarea_wrapper"
       }, [
-        n("textarea", w(k.$attrs, {
+        d("textarea", w(I.$attrs, {
           id: e.id,
           ref_key: "textarea",
           ref: o,
@@ -1097,29 +1400,29 @@ const st = /* @__PURE__ */ p(ut, [["__scopeId", "data-v-2333416c"]]), ct = ["ari
           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)
+          onInput: k[0] || (k[0] = //@ts-ignore
+          (...y) => p.onInput && p.onInput(...y)),
+          onBlur: k[1] || (k[1] = //@ts-ignore
+          (...y) => p.onBlur && p.onBlur(...y))
+        }), null, 16, Ct)
       ], 512),
-      e.minlength || e.maxlength ? (i(), u("div", mt, [
-        e.minlength ? (i(), u("p", {
+      e.minlength || e.maxlength ? (i(), r("div", wt, [
+        e.minlength ? (i(), r("p", {
           key: 0,
-          class: y(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
+          class: v(["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", {
+          b(u) ? f("", !0) : (i(), r("joy-icon", Lt)),
+          B(" " + $(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+        ], 2)) : f("", !0),
+        e.maxlength ? (i(), r("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));
+          class: v(["joy-textarea-count", { "joy-textarea-count-invalid": b(l) }])
+        }, $(e.modelValue.length + "/" + e.maxlength), 3)) : f("", !0)
+      ])) : f("", !0)
+    ], 10, Jt));
   }
 });
-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({
+const Mt = /* @__PURE__ */ j(zt, [["__scopeId", "data-v-d68ef0dd"]]), Tt = ["name", "disabled", "checked", "required", "aria-checked", "value"], Et = { class: "joy-toggle__content" }, Nt = /* @__PURE__ */ S({
   __name: "JoyToggle",
   props: {
     modelValue: {
@@ -1152,16 +1455,16 @@ const gt = /* @__PURE__ */ p(vt, [["__scopeId", "data-v-d68ef0dd"]]), bt = ["nam
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const t = {
-      onChange: (a) => {
-        const o = a.target.checked;
-        l("update:modelValue", o);
+  setup(e, { emit: n }) {
+    const a = {
+      onChange: (t) => {
+        const o = t.target.checked;
+        n("update:modelValue", o);
       }
     };
-    return (a, o) => (i(), u("div", null, [
-      n("label", {
-        class: y([
+    return (t, o) => (i(), r("div", null, [
+      d("label", {
+        class: v([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,
@@ -1169,7 +1472,7 @@ const gt = /* @__PURE__ */ p(vt, [["__scopeId", "data-v-d68ef0dd"]]), bt = ["nam
           }
         ])
       }, [
-        n("input", {
+        d("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -1181,58 +1484,64 @@ const gt = /* @__PURE__ */ p(vt, [["__scopeId", "data-v-d68ef0dd"]]), bt = ["nam
           "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)
+          (...s) => a.onChange && a.onChange(...s))
+        }, null, 40, Tt),
+        d("p", Et, [
+          m(t.$slots, "default", {}, () => [
+            B($(e.label), 1)
           ], !0)
         ])
       ], 2)
     ]));
   }
 });
-const _t = /* @__PURE__ */ p(pt, [["__scopeId", "data-v-e31a6b5e"]]), jt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ot = /* @__PURE__ */ j(Nt, [["__scopeId", "data-v-e31a6b5e"]]), Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  JoyButton: ae,
-  JoyCheckbox: re,
-  JoyCounter: _e,
-  JoyFormError: O,
-  JoyHighlight: qe,
-  JoyInput: Re,
+  JoyButton: de,
+  JoyCheckbox: N,
+  JoyCounter: $e,
+  JoyFormError: U,
+  JoyHighlight: ze,
+  JoyInput: He,
   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 = {
+  JoyLink: De,
+  JoyMultiCheckbox: Xe,
+  JoyRadio: nt,
+  JoyRadioGroup: dt,
+  JoySelect: yt,
+  JoySelectableItem: W,
+  JoySelectableItemGroup: ht,
+  JoySpinner: H,
+  JoyTemplate: Vt,
+  JoyTextarea: Mt,
+  JoyToggle: Ot,
+  JoyWrapper: kt
+}, Symbol.toStringTag, { value: "Module" })), At = {
   install: (e) => {
-    Object.entries(jt).forEach(([l, t]) => {
-      e.component(l, t);
+    Object.entries(Rt).forEach(([n, a]) => {
+      e.component(n, a);
     });
   }
 };
 export {
-  ae as JoyButton,
-  re as JoyCheckbox,
-  _e as JoyCounter,
-  O as JoyFormError,
-  qe as JoyHighlight,
-  Re as JoyInput,
+  de as JoyButton,
+  N as JoyCheckbox,
+  $e as JoyCounter,
+  U as JoyFormError,
+  ze as JoyHighlight,
+  He 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
+  De as JoyLink,
+  Xe as JoyMultiCheckbox,
+  nt as JoyRadio,
+  dt as JoyRadioGroup,
+  yt as JoySelect,
+  W as JoySelectableItem,
+  ht as JoySelectableItemGroup,
+  H as JoySpinner,
+  Vt as JoyTemplate,
+  Mt as JoyTextarea,
+  Ot as JoyToggle,
+  At as JoyVuePlugin,
+  kt as JoyWrapper
 };