@muenchen/muc-patternlab-vue 1.12.1-beta.2 → 1.12.1-beta.3

package/dist/components/Form/index.d.ts

@@ -4,7 +4,7 @@ import { default as MucErrorList } from './MucErrorList.vue';
 import { default as MucForm } from './MucInput.vue';
 import { default as MucRadioButton } from './MucRadioButton.vue';
 import { default as MucRadioButtonGroup } from './MucRadioButtonGroup.vue';
-import { default as MucSingleSelect } from './MucSelect.vue';
+import { default as MucSelect } from './MucSelect.vue';
 import { default as MucTextArea } from './MucTextArea.vue';
 
-export { MucForm, MucCheckbox, MucCheckboxGroup, MucRadioButtonGroup, MucInput, MucRadioButton, MucTextArea, MucSingleSelect, MucErrorList, MucSelect, };
+export { MucForm, MucCheckbox, MucCheckboxGroup, MucRadioButtonGroup, MucInput, MucRadioButton, MucTextArea, MucErrorList, MucSelect, };

package/dist/components/index.d.ts

@@ -3,8 +3,8 @@ import { MucButton } from './Button';
 import { MucCallout } from './Callout';
 import { MucCard, MucCardContainer } from './Card';
 import { MucComment, MucCommentText } from './Comment/';
-import { MucForm } from './Form';
+import { MucCheckbox, MucCheckboxGroup, MucErrorList, MucInput, MucRadioButton, MucRadioButtonGroup, MucSelect, MucTextArea } from './Form';
 import { MucIcon } from './Icon';
 import { MucIntro } from './Intro';
 
-export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucForm, MucIcon, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucRadioButton, MucRadioButtonGroup, MucInput, MucTextArea, MucCheckboxGroup, MucCheckbox, MucSelect, MucErrorList, MucIcon, };

package/dist/muc-patternlab-vue.es.js

@@ -1,29 +1,29 @@
-import { defineComponent as v, useAttrs as P, computed as c, openBlock as n, createElementBlock as r, normalizeClass as M, normalizeStyle as H, createElementVNode as e, createVNode as E, unref as $, renderSlot as d, createBlock as V, createCommentVNode as f, toDisplayString as _, pushScopeId as q, popScopeId as F, useSlots as T, createTextVNode as h, Fragment as B, renderList as L, createSlots as N, withCtx as C, mergeModels as O, useModel as W, withDirectives as j, vModelDynamic as z } from "vue";
-const U = ["href"], b = /* @__PURE__ */ v({
+import { defineComponent as v, useAttrs as Z, computed as r, openBlock as n, createElementBlock as c, normalizeClass as y, normalizeStyle as ee, createElementVNode as e, createVNode as R, unref as k, renderSlot as _, createBlock as j, createCommentVNode as $, toDisplayString as u, pushScopeId as H, popScopeId as N, useSlots as W, createTextVNode as g, Fragment as E, renderList as L, createSlots as te, withCtx as I, mergeModels as M, useModel as T, withModifiers as U, ref as O, withDirectives as z, vModelDynamic as se, inject as oe, provide as ae, readonly as ne, toRef as le, vModelText as ce } from "vue";
+const ie = ["href"], B = /* @__PURE__ */ v({
   __name: "MucIcon",
   props: {
     icon: {},
     color: {}
   },
-  setup(o) {
-    const t = P(), a = c(() => t.class ?? "icon");
-    return (s, u) => (n(), r("svg", {
+  setup(a) {
+    const t = Z(), s = r(() => t.class ?? "icon");
+    return (o, i) => (n(), c("svg", {
       "aria-hidden": "true",
-      class: M(a.value),
-      style: H({ color: s.color })
+      class: y(s.value),
+      style: ee({ color: o.color })
     }, [
       e("use", {
-        href: "#icon-" + s.icon
-      }, null, 8, U)
+        href: "#icon-" + o.icon
+      }, null, 8, ie)
     ], 6));
   }
-}), X = ["role", "aria-label"], x = { class: "container-fluid" }, G = /* @__PURE__ */ v({
+}), re = ["role", "aria-label"], ue = { class: "container-fluid" }, de = /* @__PURE__ */ v({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
   },
-  setup(o) {
-    const t = o, a = c(() => {
+  setup(a) {
+    const t = a, s = r(() => {
       switch (t.type) {
         case "info":
           return "m-banner--info";
@@ -36,7 +36,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "m-banner--info";
       }
-    }), s = c(() => {
+    }), o = r(() => {
       switch (t.type) {
         case "info":
           return "dialog";
@@ -49,7 +49,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "dialog";
       }
-    }), u = c(() => {
+    }), i = r(() => {
       switch (t.type) {
         case "info":
           return "Information";
@@ -62,7 +62,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "Information";
       }
-    }), l = c(() => {
+    }), l = r(() => {
       switch (t.type) {
         case "success":
           return "check";
@@ -74,27 +74,27 @@ const U = ["href"], b = /* @__PURE__ */ v({
           return "information";
       }
     });
-    return (g, p) => (n(), r("div", null, [
+    return (m, f) => (n(), c("div", null, [
       e("div", null, [
         e("div", {
-          class: M(["m-banner", a.value]),
-          role: s.value,
-          "aria-label": u.value
+          class: y(["m-banner", s.value]),
+          role: o.value,
+          "aria-label": i.value
         }, [
-          e("div", x, [
-            E($(b), { icon: l.value }, null, 8, ["icon"]),
-            d(g.$slots, "default", {}, void 0, !0)
+          e("div", ue, [
+            R(k(B), { icon: l.value }, null, 8, ["icon"]),
+            _(m.$slots, "default", {}, void 0, !0)
           ])
-        ], 10, X)
+        ], 10, re)
       ])
     ]));
   }
-}), A = (o, t) => {
-  const a = o.__vccOpts || o;
-  for (const [s, u] of t)
-    a[s] = u;
-  return a;
-}, J = /* @__PURE__ */ A(G, [["__scopeId", "data-v-53bc7eca"]]), K = ["disabled"], Q = /* @__PURE__ */ v({
+}), x = (a, t) => {
+  const s = a.__vccOpts || a;
+  for (const [o, i] of t)
+    s[o] = i;
+  return s;
+}, _e = /* @__PURE__ */ x(de, [["__scopeId", "data-v-53bc7eca"]]), me = ["disabled"], D = /* @__PURE__ */ v({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -103,9 +103,9 @@ const U = ["href"], b = /* @__PURE__ */ v({
     iconAnimated: { type: Boolean, default: !1 }
   },
   emits: ["click"],
-  setup(o, { emit: t }) {
-    const a = o, s = t, u = c(() => {
-      switch (a.variant) {
+  setup(a, { emit: t }) {
+    const s = a, o = t, i = r(() => {
+      switch (s.variant) {
         case "secondary":
           return "m-button--secondary";
         case "ghost":
@@ -113,33 +113,33 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "m-button--primary";
       }
-    }), l = c(
-      () => a.iconAnimated ? "m-button--animated-right" : ""
-    ), g = () => {
-      s("click");
+    }), l = r(
+      () => s.iconAnimated ? "m-button--animated-right" : ""
+    ), m = () => {
+      o("click");
     };
-    return (p, m) => (n(), r("button", {
-      onClick: g,
-      disabled: p.disabled,
-      class: M(["m-button", [u.value, l.value]])
+    return (f, h) => (n(), c("button", {
+      onClick: m,
+      disabled: f.disabled,
+      class: y(["m-button", [i.value, l.value]])
     }, [
       e("span", null, [
-        d(p.$slots, "default"),
-        p.icon ? (n(), V($(b), {
+        _(f.$slots, "default"),
+        f.icon ? (n(), j(k(B), {
           key: 0,
-          icon: p.icon,
+          icon: f.icon,
           class: "m-button__icon"
-        }, null, 8, ["icon"])) : f("", !0)
+        }, null, 8, ["icon"])) : $("", !0)
       ])
-    ], 10, K));
+    ], 10, me));
   }
-}), Y = ["aria-label"], Z = { class: "m-callout__inner" }, ee = { class: "m-callout__icon" }, te = { class: "m-callout__body" }, se = { class: "m-callout__body__inner" }, ne = { class: "m-callout__headline" }, ae = { class: "m-callout__content" }, oe = /* @__PURE__ */ v({
+}), pe = ["aria-label"], he = { class: "m-callout__inner" }, ve = { class: "m-callout__icon" }, fe = { class: "m-callout__body" }, $e = { class: "m-callout__body__inner" }, ge = { class: "m-callout__headline" }, be = { class: "m-callout__content" }, ye = /* @__PURE__ */ v({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
-  setup(o) {
-    const t = o, a = c(() => {
+  setup(a) {
+    const t = a, s = r(() => {
       switch (t.type) {
         case "error":
           return "warning";
@@ -148,7 +148,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "information";
       }
-    }), s = c(() => {
+    }), o = r(() => {
       switch (t.type) {
         case "error":
           return "m-callout--error";
@@ -159,7 +159,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "m-callout--default";
       }
-    }), u = c(() => {
+    }), i = r(() => {
       switch (t.type) {
         case "success":
           return "Erfolgreich";
@@ -171,148 +171,148 @@ const U = ["href"], b = /* @__PURE__ */ v({
           return "Information";
       }
     });
-    return (l, g) => (n(), r("div", {
-      class: M(["m-callout", s.value]),
-      "aria-label": u.value
+    return (l, m) => (n(), c("div", {
+      class: y(["m-callout", o.value]),
+      "aria-label": i.value
     }, [
-      e("div", Z, [
-        e("div", ee, [
-          d(l.$slots, "icon", {}, () => [
-            E($(b), { icon: a.value }, null, 8, ["icon"])
+      e("div", he, [
+        e("div", ve, [
+          _(l.$slots, "icon", {}, () => [
+            R(k(B), { icon: s.value }, null, 8, ["icon"])
           ], !0)
         ]),
-        e("div", te, [
-          e("div", se, [
-            e("div", ne, [
-              d(l.$slots, "header", {}, void 0, !0)
+        e("div", fe, [
+          e("div", $e, [
+            e("div", ge, [
+              _(l.$slots, "header", {}, void 0, !0)
             ]),
-            e("div", ae, [
+            e("div", be, [
               e("p", null, [
-                d(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+                _(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
         ])
       ])
-    ], 10, Y));
+    ], 10, pe));
   }
-}), re = /* @__PURE__ */ A(oe, [["__scopeId", "data-v-e6cf4104"]]), ie = (o) => (q("data-v-acf0a1dd"), o = o(), F(), o), ce = { class: "card-content" }, le = { class: "card-header" }, ue = {
+}), ke = /* @__PURE__ */ x(ye, [["__scopeId", "data-v-e6cf4104"]]), Me = (a) => (H("data-v-acf0a1dd"), a = a(), N(), a), Ce = { class: "card-content" }, we = { class: "card-header" }, Se = {
   key: 0,
   class: "card-tagline"
-}, de = /* @__PURE__ */ ie(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), me = /* @__PURE__ */ v({
+}, Ie = /* @__PURE__ */ Me(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), Be = /* @__PURE__ */ v({
   __name: "MucCard",
   props: {
     title: {},
     tagline: {}
   },
   emits: ["click"],
-  setup(o, { emit: t }) {
-    const a = t;
-    return (s, u) => (n(), r("div", {
+  setup(a, { emit: t }) {
+    const s = t;
+    return (o, i) => (n(), c("div", {
       class: "card",
-      onClick: u[0] || (u[0] = (l) => a("click", l))
+      onClick: i[0] || (i[0] = (l) => s("click", l))
     }, [
-      e("div", ce, [
-        e("div", le, [
-          d(s.$slots, "headerPrefix", {}, void 0, !0),
+      e("div", Ce, [
+        e("div", we, [
+          _(o.$slots, "headerPrefix", {}, void 0, !0),
           e("div", null, [
-            s.tagline ? (n(), r("div", ue, _(s.tagline), 1)) : f("", !0),
+            o.tagline ? (n(), c("div", Se, u(o.tagline), 1)) : $("", !0),
             e("div", null, [
-              e("h3", null, _(s.title), 1)
+              e("h3", null, u(o.title), 1)
             ])
           ])
         ]),
-        de,
-        d(s.$slots, "content", {}, void 0, !0)
+        Ie,
+        _(o.$slots, "content", {}, void 0, !0)
       ])
     ]));
   }
-}), _e = /* @__PURE__ */ A(me, [["__scopeId", "data-v-acf0a1dd"]]), pe = { class: "container card-container" }, he = /* @__PURE__ */ v({
+}), xe = /* @__PURE__ */ x(Be, [["__scopeId", "data-v-acf0a1dd"]]), Ve = { class: "container card-container" }, Ae = /* @__PURE__ */ v({
   __name: "MucCardContainer",
-  setup(o) {
-    return (t, a) => (n(), r("div", pe, [
-      d(t.$slots, "default", {}, void 0, !0)
+  setup(a) {
+    return (t, s) => (n(), c("div", Ve, [
+      _(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), fe = /* @__PURE__ */ A(he, [["__scopeId", "data-v-6740df8f"]]), ve = { class: "m-comment__head" }, ge = { class: "m-comment__initials" }, ye = { class: "m-comment__info" }, $e = { class: "m-comment__author" }, be = { key: 0 }, Ce = { class: "m-comment__author" }, Me = { class: "m-comment__date" }, ke = ["aria-label"], we = {
+}), Re = /* @__PURE__ */ x(Ae, [["__scopeId", "data-v-6740df8f"]]), Ee = { class: "m-comment__head" }, Le = { class: "m-comment__initials" }, Te = { class: "m-comment__info" }, Oe = { class: "m-comment__author" }, je = { key: 0 }, Ge = { class: "m-comment__author" }, Pe = { class: "m-comment__date" }, qe = ["aria-label"], He = {
   key: 0,
   class: "m-star-rating__item m-star-rating__item--half"
-}, Se = { class: "m-star-rating__numeric" }, Ie = { class: "m-comment__body" }, Ee = { class: "m-comment__headline" }, Ae = { class: "m-comment__text" }, Be = "de-DE", Le = 0.2, Oe = 0.8, I = 5, D = /* @__PURE__ */ v({
+}, Ne = { class: "m-star-rating__numeric" }, We = { class: "m-comment__body" }, Ue = { class: "m-comment__headline" }, ze = { class: "m-comment__text" }, De = "de-DE", Fe = 0.2, Ke = 0.8, A = 5, F = /* @__PURE__ */ v({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
-  setup(o) {
-    const t = T(), a = o, s = c(() => !!t.date), u = c(() => a.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), l = c(
-      () => Math.min(Math.max(a.rating, 0), I)
-    ), g = c(() => l.value.toLocaleString(Be.valueOf(), {
+  setup(a) {
+    const t = W(), s = a, o = r(() => !!t.date), i = r(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), l = r(
+      () => Math.min(Math.max(s.rating, 0), A)
+    ), m = r(() => l.value.toLocaleString(De.valueOf(), {
       minimumFractionDigits: 1
-    })), p = c(() => {
-      const m = +(l.value % 1).toFixed(1);
-      let k = Math.min(Math.floor(l.value), I), y = Math.floor(I - l.value), i = !1;
-      return l.value !== 0 && l.value !== I && (m <= Le ? y++ : m >= Oe ? k++ : i = !0), {
-        fullStars: k,
-        emptyStars: y,
-        isHalfStar: i
+    })), f = r(() => {
+      const h = +(l.value % 1).toFixed(1);
+      let C = Math.min(Math.floor(l.value), A), b = Math.floor(A - l.value), d = !1;
+      return l.value !== 0 && l.value !== A && (h <= Fe ? b++ : h >= Ke ? C++ : d = !0), {
+        fullStars: C,
+        emptyStars: b,
+        isHalfStar: d
       };
     });
-    return (m, k) => (n(), r("div", {
-      class: M(["m-comment", u.value])
+    return (h, C) => (n(), c("div", {
+      class: y(["m-comment", i.value])
     }, [
-      e("div", ve, [
-        e("div", ge, [
-          d(m.$slots, "initials")
+      e("div", Ee, [
+        e("div", Le, [
+          _(h.$slots, "initials")
         ]),
-        e("div", ye, [
-          e("span", $e, [
-            d(m.$slots, "author")
+        e("div", Te, [
+          e("span", Oe, [
+            _(h.$slots, "author")
           ]),
-          s.value ? (n(), r("span", be, [
-            e("span", Ce, [
-              h("  "),
-              d(m.$slots, "datePrefix")
+          o.value ? (n(), c("span", je, [
+            e("span", Ge, [
+              g("  "),
+              _(h.$slots, "datePrefix")
             ]),
-            e("span", Me, [
-              h(" "),
-              d(m.$slots, "date")
+            e("span", Pe, [
+              g(" "),
+              _(h.$slots, "date")
             ])
-          ])) : f("", !0),
+          ])) : $("", !0),
           e("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${m.rating} von ${I} Sternen`
+            "aria-label": `Bewertung: ${h.rating} von ${A} Sternen`
           }, [
-            (n(!0), r(B, null, L(p.value.fullStars, (y) => (n(), r("div", {
-              key: y,
+            (n(!0), c(E, null, L(f.value.fullStars, (b) => (n(), c("div", {
+              key: b,
               class: "m-star-rating__item m-star-rating__item--full"
             }, [
-              E($(b), { icon: "solid-star" })
+              R(k(B), { icon: "solid-star" })
             ]))), 128)),
-            p.value.isHalfStar ? (n(), r("div", we, [
-              E($(b), { icon: "half-star" })
-            ])) : f("", !0),
-            (n(!0), r(B, null, L(p.value.emptyStars, (y) => (n(), r("div", {
-              key: y,
+            f.value.isHalfStar ? (n(), c("div", He, [
+              R(k(B), { icon: "half-star" })
+            ])) : $("", !0),
+            (n(!0), c(E, null, L(f.value.emptyStars, (b) => (n(), c("div", {
+              key: b,
               class: "m-star-rating__item"
             }, [
-              E($(b), { icon: "solid-star" })
+              R(k(B), { icon: "solid-star" })
             ]))), 128)),
-            e("div", Se, _(g.value), 1)
-          ], 8, ke)
+            e("div", Ne, u(m.value), 1)
+          ], 8, qe)
         ])
       ]),
-      e("div", Ie, [
-        e("div", Ee, [
-          d(m.$slots, "headline")
+      e("div", We, [
+        e("div", Ue, [
+          _(h.$slots, "headline")
         ]),
-        e("div", Ae, [
-          d(m.$slots, "text")
+        e("div", ze, [
+          _(h.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Re = " ", Ve = /* @__PURE__ */ v({
+}), Xe = " ", Je = /* @__PURE__ */ v({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -324,63 +324,158 @@ const U = ["href"], b = /* @__PURE__ */ v({
     rating: {},
     variant: { default: "listing" }
   },
-  setup(o) {
-    const t = o, a = c(() => ((t.initials ?? t.author.split(Re).map((s) => s.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
-    return (s, u) => (n(), V($(D), {
-      rating: s.rating,
-      variant: s.variant
-    }, N({
-      initials: C(() => [
-        h(_(a.value), 1)
+  setup(a) {
+    const t = a, s = r(() => ((t.initials ?? t.author.split(Xe).map((o) => o.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
+    return (o, i) => (n(), j(k(F), {
+      rating: o.rating,
+      variant: o.variant
+    }, te({
+      initials: I(() => [
+        g(u(s.value), 1)
       ]),
-      datePrefix: C(() => [
-        h("am")
+      datePrefix: I(() => [
+        g("am")
       ]),
-      author: C(() => [
-        h(_(s.author), 1)
+      author: I(() => [
+        g(u(o.author), 1)
       ]),
-      headline: C(() => [
-        h(_(s.headline), 1)
+      headline: I(() => [
+        g(u(o.headline), 1)
       ]),
-      text: C(() => [
-        h(_(s.text), 1)
+      text: I(() => [
+        g(u(o.text), 1)
       ]),
       _: 2
     }, [
-      s.date ? {
+      o.date ? {
         name: "date",
-        fn: C(() => [
-          h(_(s.date), 1)
+        fn: I(() => [
+          g(u(o.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Te = {
+}), Qe = ["checked"], Ye = { class: "m-label m-checkboxes__label" }, Ze = /* @__PURE__ */ v({
+  __name: "MucCheckbox",
+  props: /* @__PURE__ */ M({
+    label: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ M(["click"], ["update:modelValue"]),
+  setup(a, { emit: t }) {
+    const s = T(a, "modelValue"), o = t, i = () => {
+      s.value = !s.value, o("click");
+    };
+    return (l, m) => (n(), c("div", {
+      class: "m-checkboxes__item",
+      onClick: i
+    }, [
+      e("input", {
+        class: "m-checkboxes__input",
+        name: "checkbox",
+        type: "checkbox",
+        checked: s.value,
+        onClick: U(i, ["stop"])
+      }, null, 8, Qe),
+      e("label", Ye, u(l.label), 1)
+    ]));
+  }
+}), et = { class: "m-form-group" }, tt = { class: "m-checkbox-group" }, st = { class: "m-checkbox-group__legend" }, ot = { class: "m-checkbox-group__heading" }, at = { class: "m-checkboxes m-checkboxes--collapse" }, nt = /* @__PURE__ */ e("span", null, "Mehr ", -1), lt = {
+  "aria-hidden": "true",
+  class: "icon icon--after"
+}, ct = ["href"], it = /* @__PURE__ */ v({
+  __name: "MucCheckboxGroup",
+  props: {
+    heading: {}
+  },
+  setup(a) {
+    const t = O(!0), s = r(() => t.value ? "collapse" : ""), o = r(() => t.value ? "down" : "up"), i = () => t.value = !t.value;
+    return (l, m) => (n(), c("div", et, [
+      e("fieldset", tt, [
+        e("legend", st, [
+          e("h3", ot, u(l.heading), 1)
+        ]),
+        e("div", at, [
+          _(l.$slots, "checkboxes"),
+          l.$slots.collapsableCheckboxes ? (n(), c("div", {
+            key: 0,
+            class: y(["m-checkboxes__collapse__container", s.value])
+          }, [
+            _(l.$slots, "collapsableCheckboxes")
+          ], 2)) : $("", !0),
+          l.$slots.collapsableCheckboxes ? (n(), j(k(D), {
+            key: 1,
+            variant: "ghost",
+            onClick: i,
+            "aria-expanded": !t.value
+          }, {
+            default: I(() => [
+              nt,
+              (n(), c("svg", lt, [
+                e("use", {
+                  href: "#icon-chevron-" + o.value
+                }, null, 8, ct)
+              ]))
+            ]),
+            _: 1
+          }, 8, ["aria-expanded"])) : $("", !0)
+        ])
+      ])
+    ]));
+  }
+}), rt = {
+  class: "m-error-list",
+  role: "alert",
+  tabindex: "-1"
+}, ut = { class: "m-error-list__title" }, dt = { class: "m-error-list__body" }, _t = { class: "m-list m-error-list__list" }, mt = /* @__PURE__ */ v({
+  __name: "MucErrorList",
+  props: {
+    title: {},
+    errors: {}
+  },
+  setup(a) {
+    const t = a, s = r(
+      () => typeof t.errors == "string" ? [t.errors] : t.errors
+    );
+    return (o, i) => (n(), c("div", rt, [
+      e("h2", ut, u(o.title), 1),
+      e("div", dt, [
+        e("ul", _t, [
+          (n(!0), c(E, null, L(s.value, (l, m) => (n(), c("li", { key: m }, [
+            e("a", null, u(l), 1)
+          ]))), 128))
+        ])
+      ])
+    ]));
+  }
+}), pt = {
   for: "search-input",
   class: "m-label"
-}, De = {
+}, ht = {
   key: 0,
   "aria-hidden": "true",
   class: "mandatory"
-}, Pe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), He = {
+}, vt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), ft = {
   id: "text-input-error",
   class: "m-error-message"
-}, qe = { class: "m-input-wrapper m-autocomplete" }, Fe = {
+}, $t = { class: "m-input-wrapper m-autocomplete" }, gt = {
   key: 0,
   class: "m-input__prefix"
-}, Ne = ["type", "aria-describedby", "placeholder", "required"], We = {
+}, bt = ["type", "aria-describedby", "placeholder", "required"], yt = {
   key: 1,
   class: "autocomplete-result-list autocomplete-result-list--location"
-}, je = ["onClick"], ze = {
+}, kt = ["onClick"], Mt = {
   "aria-hidden": "true",
   class: "icon"
-}, Ue = ["xlink:href"], Xe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), xe = {
+}, Ct = ["xlink:href"], wt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), St = {
   class: "m-hint",
   id: "text-input-hint"
-}, Ge = /* @__PURE__ */ v({
+}, It = /* @__PURE__ */ v({
   __name: "MucInput",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ M({
     errorMsg: {},
     placeholder: {},
     required: { type: Boolean, default: !1 },
@@ -393,127 +488,316 @@ const U = ["href"], b = /* @__PURE__ */ v({
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ O(["suffixClick"], ["update:modelValue"]),
-  setup(o, { emit: t }) {
-    const a = W(o, "modelValue"), s = o, u = T(), l = t, g = c(() => s.errorMsg ? "has-error" : ""), p = c(() => s.type === "search"), m = c(() => {
-      if (a.value === "") return [];
-      const i = a.value.toLowerCase();
-      return s.datalist.filter(
-        (w) => w.toLowerCase().startsWith(i) && w.toLowerCase() !== i
+  emits: /* @__PURE__ */ M(["suffixClick"], ["update:modelValue"]),
+  setup(a, { emit: t }) {
+    const s = T(a, "modelValue"), o = a, i = W(), l = t, m = r(() => o.errorMsg ? "has-error" : ""), f = r(() => o.type === "search"), h = r(() => {
+      if (s.value === "") return [];
+      const d = s.value.toLowerCase();
+      return o.datalist.filter(
+        (w) => w.toLowerCase().startsWith(d) && w.toLowerCase() !== d
       );
-    }), k = (i) => a.value = i, y = () => l("suffixClick");
-    return (i, w) => (n(), r("div", {
-      class: M(["m-form-group", g.value])
+    }), C = (d) => s.value = d, b = () => l("suffixClick");
+    return (d, w) => (n(), c("div", {
+      class: y(["m-form-group", m.value])
     }, [
-      e("label", Te, [
-        h(_(i.label) + " ", 1),
-        i.required ? (n(), r("span", De, [
-          h(" * "),
-          Pe
-        ])) : f("", !0)
+      e("label", pt, [
+        g(u(d.label) + " ", 1),
+        d.required ? (n(), c("span", ht, [
+          g(" * "),
+          vt
+        ])) : $("", !0)
       ]),
-      e("p", He, _(i.errorMsg), 1),
-      e("div", qe, [
-        u.prefix ? (n(), r("div", Fe, [
+      e("p", ft, u(d.errorMsg), 1),
+      e("div", $t, [
+        i.prefix ? (n(), c("div", gt, [
           e("span", null, [
-            d(i.$slots, "prefix")
+            _(d.$slots, "prefix")
           ])
-        ])) : f("", !0),
-        j(e("input", {
+        ])) : $("", !0),
+        z(e("input", {
           class: "m-input autocomplete-input",
-          type: i.type,
-          "onUpdate:modelValue": w[0] || (w[0] = (S) => a.value = S),
-          "aria-describedby": i.type + "-input",
-          placeholder: i.placeholder,
-          required: i.required
-        }, null, 8, Ne), [
-          [z, a.value]
+          type: d.type,
+          "onUpdate:modelValue": w[0] || (w[0] = (S) => s.value = S),
+          "aria-describedby": d.type + "-input",
+          placeholder: d.placeholder,
+          required: d.required
+        }, null, 8, bt), [
+          [se, s.value]
         ]),
-        p.value && m.value.length !== 0 ? (n(), r("ul", We, [
-          (n(!0), r(B, null, L(m.value, (S) => (n(), r("li", {
+        f.value && h.value.length !== 0 ? (n(), c("ul", yt, [
+          (n(!0), c(E, null, L(h.value, (S) => (n(), c("li", {
             class: "autocomplete-result",
             key: S,
-            onClick: (rt) => k(S)
-          }, _(S), 9, je))), 128))
-        ])) : f("", !0),
-        i.suffixIcon ? (n(), r("button", {
+            onClick: (G) => C(S)
+          }, u(S), 9, kt))), 128))
+        ])) : $("", !0),
+        d.suffixIcon ? (n(), c("button", {
           key: 2,
           class: "m-input__suffix",
-          onClick: y
+          onClick: b
         }, [
-          (n(), r("svg", ze, [
+          (n(), c("svg", Mt, [
             e("use", {
-              "xlink:href": "#icon-" + i.suffixIcon
-            }, null, 8, Ue)
+              "xlink:href": "#icon-" + d.suffixIcon
+            }, null, 8, Ct)
           ])),
-          Xe
-        ])) : f("", !0)
+          wt
+        ])) : $("", !0)
       ]),
-      e("p", xe, _(i.hint), 1)
+      e("p", St, u(d.hint), 1)
     ], 2));
   }
-}), Je = {
+}), K = Symbol("mucRadioGroup"), Bt = {
+  key: 0,
+  class: "m-radios__item"
+}, xt = ["checked", "disabled"], Vt = { class: "m-hint" }, At = /* @__PURE__ */ v({
+  __name: "MucRadioButton",
+  props: {
+    value: {},
+    label: {},
+    hint: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const t = a, s = oe(K), o = () => s == null ? void 0 : s.set(t.value), i = r(() => (s == null ? void 0 : s.modelValue.value) === t.value), l = r(() => t.disabled || (s == null ? void 0 : s.disabled.value)), m = r(() => !!(s != null && s.disabled));
+    return (f, h) => m.value ? (n(), c("div", Bt, [
+      e("input", {
+        class: "m-radios__input",
+        type: "radio",
+        checked: i.value,
+        disabled: l.value,
+        onClick: U(o, ["stop"])
+      }, null, 8, xt),
+      e("label", {
+        class: "m-label m-radios__label",
+        onClick: o
+      }, [
+        g(u(f.label) + " ", 1),
+        e("span", Vt, u(f.hint), 1)
+      ])
+    ])) : $("", !0);
+  }
+}), Rt = { class: "m-form-group" }, Et = { class: "m-radio-group" }, Lt = { class: "m-radio-group__legend" }, Tt = { class: "m-radio-group__heading" }, Ot = { class: "m-radios" }, jt = /* @__PURE__ */ v({
+  __name: "MucRadioButtonGroup",
+  props: /* @__PURE__ */ M({
+    heading: {},
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: [Boolean, String, Array, Object, Number, null] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ M(["change"], ["update:modelValue"]),
+  setup(a, { emit: t }) {
+    const s = T(a, "modelValue"), o = a, i = t;
+    return ae(K, {
+      set: (l) => {
+        i("change", l), s.value = l;
+      },
+      modelValue: s,
+      disabled: ne(le(o.disabled))
+    }), (l, m) => (n(), c("div", Rt, [
+      e("fieldset", Et, [
+        e("legend", Lt, [
+          e("h3", Tt, u(l.heading), 1)
+        ]),
+        e("div", Ot, [
+          _(l.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+}), X = (a) => (H("data-v-d28d341e"), a = a(), N(), a), Gt = { class: "m-form-group" }, Pt = { class: "m-label" }, qt = ["value"], Ht = /* @__PURE__ */ X(() => /* @__PURE__ */ e("svg", {
+  "aria-hidden": "true",
+  class: "icon"
+}, [
+  /* @__PURE__ */ e("use", { "xlink:href": "#icon-chevron-down" })
+], -1)), Nt = /* @__PURE__ */ X(() => /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)), Wt = [
+  Ht,
+  Nt
+], Ut = ["onMouseenter", "onClick"], zt = {
+  key: 0,
+  class: "m-hint"
+}, Dt = /* @__PURE__ */ v({
+  __name: "MucSelect",
+  props: /* @__PURE__ */ M({
+    items: {},
+    label: {},
+    hint: {},
+    multiple: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {
+      default: []
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const t = T(a, "modelValue"), s = O(!1), o = O(), i = O(), l = a, m = () => {
+      s.value = !s.value, i.value = o.value;
+    }, f = (p) => {
+      o.value = p, l.multiple ? C(p) : h(p), l.multiple || (s.value = !1);
+    }, h = (p) => {
+      typeof t.value == "object" && (t.value = t.value.join(" ")), t.value = t.value === p ? "" : p;
+    }, C = (p) => {
+      typeof t.value == "string" && (t.value = [t.value]), t.value = t.value.includes(p) ? t.value.filter((P) => P !== p) : [...t.value, p];
+    }, b = r(() => typeof t.value == "string" ? t.value : t.value.join(l.multiple ? ", " : " ")), d = (p) => p === i.value ? "active" : "", w = (p) => t.value.includes(p) ? "selected" : "", S = () => i.value = "", G = r(
+      () => s.value ? "display-listbox" : ""
+    ), J = r(
+      () => l.multiple ? "m-input-wrapper--multiselect multiselect" : "m-input-wrapper--select"
+    );
+    return (p, P) => (n(), c("div", Gt, [
+      e("label", Pt, u(p.label), 1),
+      e("div", {
+        class: y(["m-input-wrapper", J.value])
+      }, [
+        e("input", {
+          type: "text",
+          class: "m-input m-combobox m-combobox--single",
+          value: b.value,
+          onClick: m,
+          readonly: ""
+        }, null, 8, qt),
+        e("span", {
+          class: "m-input__trigger",
+          onClick: m
+        }, Wt),
+        e("ul", {
+          class: y(["listbox", G.value]),
+          onMouseleave: S
+        }, [
+          (n(!0), c(E, null, L(l.items, (V, Q) => (n(), c("li", {
+            key: Q,
+            class: y(["option", [d(V), w(V)]]),
+            onMouseenter: (Y) => i.value = V,
+            onClick: (Y) => f(V)
+          }, u(V), 43, Ut))), 128))
+        ], 34)
+      ], 2),
+      p.hint ? (n(), c("p", zt, u(p.hint), 1)) : $("", !0)
+    ]));
+  }
+}), Ft = /* @__PURE__ */ x(Dt, [["__scopeId", "data-v-d28d341e"]]), Kt = { class: "m-form-group has-error" }, Xt = {
+  for: "textarea",
+  class: "m-label"
+}, Jt = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, Qt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), Yt = { class: "m-error-message" }, Zt = { class: "m-input-wrapper" }, es = ["rows", "placeholder"], ts = { class: "m-hint" }, ss = /* @__PURE__ */ v({
+  __name: "MucTextArea",
+  props: /* @__PURE__ */ M({
+    errorMsg: {},
+    rows: { default: 3 },
+    placeholder: {},
+    label: {},
+    hint: {},
+    required: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const t = T(a, "modelValue");
+    return (s, o) => (n(), c("div", Kt, [
+      e("label", Xt, [
+        g(u(s.label) + " ", 1),
+        s.required ? (n(), c("span", Jt, [
+          g(" * "),
+          Qt
+        ])) : $("", !0)
+      ]),
+      e("p", Yt, u(s.errorMsg), 1),
+      e("div", Zt, [
+        z(e("textarea", {
+          class: "m-textarea",
+          rows: s.rows,
+          "aria-describedby": "textarea input",
+          placeholder: s.placeholder,
+          "onUpdate:modelValue": o[0] || (o[0] = (i) => t.value = i)
+        }, null, 8, es), [
+          [ce, t.value]
+        ])
+      ]),
+      e("p", ts, u(s.hint), 1)
+    ]));
+  }
+}), os = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, Ke = { class: "container" }, Qe = { style: { width: "66.6%" } }, Ye = {
+}, as = { class: "container" }, ns = { style: { width: "66.6%" } }, ls = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, Ze = { class: "m-intro-vertical__title" }, et = {
+}, cs = { class: "m-intro-vertical__title" }, is = {
   key: 0,
   class: "muc-divider"
-}, tt = { class: "m-intro-vertical__content" }, st = { style: { "padding-bottom": "32px" } }, nt = /* @__PURE__ */ v({
+}, rs = { class: "m-intro-vertical__content" }, us = { style: { "padding-bottom": "32px" } }, ds = /* @__PURE__ */ v({
   __name: "MucIntro",
   props: {
     title: {},
     tagline: {},
     divider: { type: Boolean }
   },
-  setup(o) {
-    return (t, a) => (n(), r("div", Je, [
-      e("div", Ke, [
-        e("div", Qe, [
+  setup(a) {
+    return (t, s) => (n(), c("div", os, [
+      e("div", as, [
+        e("div", ns, [
           e("div", null, [
-            t.tagline ? (n(), r("p", Ye, _(t.tagline), 1)) : f("", !0),
-            e("h1", Ze, _(t.title), 1)
+            t.tagline ? (n(), c("p", ls, u(t.tagline), 1)) : $("", !0),
+            e("h1", cs, u(t.title), 1)
           ]),
-          t.divider ? (n(), r("div", et)) : f("", !0),
-          e("div", tt, [
-            e("p", st, [
-              d(t.$slots, "default", {}, void 0, !0)
+          t.divider ? (n(), c("div", is)) : $("", !0),
+          e("div", rs, [
+            e("p", us, [
+              _(t.$slots, "default", {}, void 0, !0)
             ])
           ])
         ])
       ])
     ]));
   }
-}), at = /* @__PURE__ */ A(nt, [["__scopeId", "data-v-9ad3adc7"]]), R = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), _s = /* @__PURE__ */ x(ds, [["__scopeId", "data-v-9ad3adc7"]]), q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: J,
-  MucButton: Q,
-  MucCallout: re,
-  MucCard: _e,
-  MucCardContainer: fe,
-  MucComment: D,
-  MucCommentText: Ve,
-  MucForm: Ge,
-  MucIcon: b,
-  MucIntro: at
+  MucBanner: _e,
+  MucButton: D,
+  MucCallout: ke,
+  MucCard: xe,
+  MucCardContainer: Re,
+  MucCheckbox: Ze,
+  MucCheckboxGroup: it,
+  MucComment: F,
+  MucCommentText: Je,
+  MucErrorList: mt,
+  MucIcon: B,
+  MucInput: It,
+  MucIntro: _s,
+  MucRadioButton: At,
+  MucRadioButtonGroup: jt,
+  MucSelect: Ft,
+  MucTextArea: ss
 }, Symbol.toStringTag, { value: "Module" }));
-function ot(o) {
-  for (const t in R)
-    o.component(t, R[t]);
+function ms(a) {
+  for (const t in q)
+    a.component(t, q[t]);
 }
-const ct = { install: ot };
+const hs = { install: ms };
 export {
-  J as MucBanner,
-  Q as MucButton,
-  re as MucCallout,
-  _e as MucCard,
-  fe as MucCardContainer,
-  D as MucComment,
-  Ve as MucCommentText,
-  Ge as MucForm,
-  b as MucIcon,
-  at as MucIntro,
-  ct as default
+  _e as MucBanner,
+  D as MucButton,
+  ke as MucCallout,
+  xe as MucCard,
+  Re as MucCardContainer,
+  Ze as MucCheckbox,
+  it as MucCheckboxGroup,
+  F as MucComment,
+  Je as MucCommentText,
+  mt as MucErrorList,
+  B as MucIcon,
+  It as MucInput,
+  _s as MucIntro,
+  At as MucRadioButton,
+  jt as MucRadioButtonGroup,
+  Ft as MucSelect,
+  ss as MucTextArea,
+  hs as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.12.1-beta.2",
+  "version": "1.12.1-beta.3",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Form/index.ts

@@ -5,7 +5,6 @@ import MucForm from "./MucInput.vue";
 import MucInput from "./MucInput.vue";
 import MucRadioButton from "./MucRadioButton.vue";
 import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
-import MucSingleSelect from "./MucSelect.vue";
 import MucSelect from "./MucSelect.vue";
 import MucTextArea from "./MucTextArea.vue";
 
@@ -17,7 +16,6 @@ export {
   MucInput,
   MucRadioButton,
   MucTextArea,
-  MucSingleSelect,
   MucErrorList,
   MucSelect,
 };

package/src/components/index.ts

@@ -3,7 +3,16 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
-import { MucForm } from "./Form";
+import {
+  MucCheckbox,
+  MucCheckboxGroup,
+  MucErrorList,
+  MucInput,
+  MucRadioButton,
+  MucRadioButtonGroup,
+  MucSelect,
+  MucTextArea,
+} from "./Form";
 import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
 
@@ -16,6 +25,13 @@ export {
   MucCardContainer,
   MucComment,
   MucCommentText,
-  MucForm,
+  MucRadioButton,
+  MucRadioButtonGroup,
+  MucInput,
+  MucTextArea,
+  MucCheckboxGroup,
+  MucCheckbox,
+  MucSelect,
+  MucErrorList,
   MucIcon,
 };