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

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

@@ -1,4 +1,4 @@
-import { defineComponent as v, useAttrs as P, computed as c, openBlock as a, createElementBlock as r, normalizeClass as k, normalizeStyle as H, createElementVNode as e, createVNode as S, unref as $, renderSlot as d, createBlock as R, createCommentVNode as f, toDisplayString as m, 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";
+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({
   __name: "MucIcon",
   props: {
@@ -6,10 +6,10 @@ const U = ["href"], b = /* @__PURE__ */ v({
     color: {}
   },
   setup(o) {
-    const t = P(), n = c(() => t.class ?? "icon");
-    return (s, l) => (a(), r("svg", {
+    const t = P(), a = c(() => t.class ?? "icon");
+    return (s, u) => (n(), r("svg", {
       "aria-hidden": "true",
-      class: k(n.value),
+      class: M(a.value),
       style: H({ color: s.color })
     }, [
       e("use", {
@@ -17,13 +17,13 @@ const U = ["href"], b = /* @__PURE__ */ v({
       }, null, 8, U)
     ], 6));
   }
-}), X = ["role", "aria-label"], G = { class: "container-fluid" }, J = /* @__PURE__ */ v({
+}), X = ["role", "aria-label"], x = { class: "container-fluid" }, G = /* @__PURE__ */ v({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
   },
   setup(o) {
-    const t = o, n = c(() => {
+    const t = o, a = c(() => {
       switch (t.type) {
         case "info":
           return "m-banner--info";
@@ -49,7 +49,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "dialog";
       }
-    }), l = c(() => {
+    }), u = c(() => {
       switch (t.type) {
         case "info":
           return "Information";
@@ -62,7 +62,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "Information";
       }
-    }), _ = c(() => {
+    }), l = c(() => {
       switch (t.type) {
         case "success":
           return "check";
@@ -74,27 +74,27 @@ const U = ["href"], b = /* @__PURE__ */ v({
           return "information";
       }
     });
-    return (p, i) => (a(), r("div", null, [
+    return (g, p) => (n(), r("div", null, [
       e("div", null, [
         e("div", {
-          class: k(["m-banner", n.value]),
+          class: M(["m-banner", a.value]),
           role: s.value,
-          "aria-label": l.value
+          "aria-label": u.value
         }, [
-          e("div", G, [
-            S($(b), { icon: _.value }, null, 8, ["icon"]),
-            d(p.$slots, "default", {}, void 0, !0)
+          e("div", x, [
+            E($(b), { icon: l.value }, null, 8, ["icon"]),
+            d(g.$slots, "default", {}, void 0, !0)
           ])
         ], 10, X)
       ])
     ]));
   }
-}), I = (o, t) => {
-  const n = o.__vccOpts || o;
-  for (const [s, l] of t)
-    n[s] = l;
-  return n;
-}, K = /* @__PURE__ */ I(J, [["__scopeId", "data-v-53bc7eca"]]), Q = ["disabled"], Y = /* @__PURE__ */ v({
+}), 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({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -104,8 +104,8 @@ const U = ["href"], b = /* @__PURE__ */ v({
   },
   emits: ["click"],
   setup(o, { emit: t }) {
-    const n = o, s = t, l = c(() => {
-      switch (n.variant) {
+    const a = o, s = t, u = c(() => {
+      switch (a.variant) {
         case "secondary":
           return "m-button--secondary";
         case "ghost":
@@ -113,33 +113,33 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "m-button--primary";
       }
-    }), _ = c(
-      () => n.iconAnimated ? "m-button--animated-right" : ""
-    ), p = () => {
+    }), l = c(
+      () => a.iconAnimated ? "m-button--animated-right" : ""
+    ), g = () => {
       s("click");
     };
-    return (i, y) => (a(), r("button", {
-      onClick: p,
-      disabled: i.disabled,
-      class: k(["m-button", [l.value, _.value]])
+    return (p, m) => (n(), r("button", {
+      onClick: g,
+      disabled: p.disabled,
+      class: M(["m-button", [u.value, l.value]])
     }, [
       e("span", null, [
-        d(i.$slots, "default"),
-        i.icon ? (a(), R($(b), {
+        d(p.$slots, "default"),
+        p.icon ? (n(), V($(b), {
           key: 0,
-          icon: i.icon,
+          icon: p.icon,
           class: "m-button__icon"
         }, null, 8, ["icon"])) : f("", !0)
       ])
-    ], 10, Q));
+    ], 10, K));
   }
-}), Z = ["aria-label"], x = { 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({
+}), 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({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
   setup(o) {
-    const t = o, n = c(() => {
+    const t = o, a = c(() => {
       switch (t.type) {
         case "error":
           return "warning";
@@ -159,7 +159,7 @@ const U = ["href"], b = /* @__PURE__ */ v({
         default:
           return "m-callout--default";
       }
-    }), l = c(() => {
+    }), u = c(() => {
       switch (t.type) {
         case "success":
           return "Erfolgreich";
@@ -171,32 +171,32 @@ const U = ["href"], b = /* @__PURE__ */ v({
           return "Information";
       }
     });
-    return (_, p) => (a(), r("div", {
-      class: k(["m-callout", s.value]),
-      "aria-label": l.value
+    return (l, g) => (n(), r("div", {
+      class: M(["m-callout", s.value]),
+      "aria-label": u.value
     }, [
-      e("div", x, [
+      e("div", Z, [
         e("div", ee, [
-          d(_.$slots, "icon", {}, () => [
-            S($(b), { icon: n.value }, null, 8, ["icon"])
+          d(l.$slots, "icon", {}, () => [
+            E($(b), { icon: a.value }, null, 8, ["icon"])
           ], !0)
         ]),
         e("div", te, [
           e("div", se, [
             e("div", ne, [
-              d(_.$slots, "header", {}, void 0, !0)
+              d(l.$slots, "header", {}, void 0, !0)
             ]),
             e("div", ae, [
               e("p", null, [
-                d(_.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+                d(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
         ])
       ])
-    ], 10, Z));
+    ], 10, Y));
   }
-}), re = /* @__PURE__ */ I(oe, [["__scopeId", "data-v-e6cf4104"]]), ie = (o) => (q("data-v-acf0a1dd"), o = o(), F(), o), ce = { class: "card-content" }, le = { class: "card-header" }, ue = {
+}), 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 = {
   key: 0,
   class: "card-tagline"
 }, de = /* @__PURE__ */ ie(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), me = /* @__PURE__ */ v({
@@ -207,18 +207,18 @@ const U = ["href"], b = /* @__PURE__ */ v({
   },
   emits: ["click"],
   setup(o, { emit: t }) {
-    const n = t;
-    return (s, l) => (a(), r("div", {
+    const a = t;
+    return (s, u) => (n(), r("div", {
       class: "card",
-      onClick: l[0] || (l[0] = (_) => n("click", _))
+      onClick: u[0] || (u[0] = (l) => a("click", l))
     }, [
       e("div", ce, [
         e("div", le, [
           d(s.$slots, "headerPrefix", {}, void 0, !0),
           e("div", null, [
-            s.tagline ? (a(), r("div", ue, m(s.tagline), 1)) : f("", !0),
+            s.tagline ? (n(), r("div", ue, _(s.tagline), 1)) : f("", !0),
             e("div", null, [
-              e("h3", null, m(s.title), 1)
+              e("h3", null, _(s.title), 1)
             ])
           ])
         ]),
@@ -227,90 +227,92 @@ const U = ["href"], b = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), _e = /* @__PURE__ */ I(me, [["__scopeId", "data-v-acf0a1dd"]]), pe = { class: "container card-container" }, he = /* @__PURE__ */ v({
+}), _e = /* @__PURE__ */ A(me, [["__scopeId", "data-v-acf0a1dd"]]), pe = { class: "container card-container" }, he = /* @__PURE__ */ v({
   __name: "MucCardContainer",
   setup(o) {
-    return (t, n) => (a(), r("div", pe, [
+    return (t, a) => (n(), r("div", pe, [
       d(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), fe = /* @__PURE__ */ I(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" }, ke = { class: "m-comment__date" }, Me = ["aria-label"], we = {
+}), 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 = {
   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, A = 5, D = /* @__PURE__ */ v({
+}, 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({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
   setup(o) {
-    const t = T(), n = o, s = c(() => !!t.date), l = c(() => n.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), _ = c(() => n.rating.toLocaleString(Be.valueOf(), {
+    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(), {
       minimumFractionDigits: 1
     })), p = c(() => {
-      const i = +(n.rating % 1).toFixed(1);
-      let y = Math.min(Math.floor(n.rating), A), g = Math.floor(A - n.rating), E = !1;
-      return n.rating !== 0 && n.rating !== A && (i <= Le ? g++ : i >= Oe ? y++ : E = !0), {
-        fullStars: y,
-        emptyStars: g,
-        isHalfStar: E
+      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
       };
     });
-    return (i, y) => (a(), r("div", {
-      class: k(["m-comment", l.value])
+    return (m, k) => (n(), r("div", {
+      class: M(["m-comment", u.value])
     }, [
       e("div", ve, [
         e("div", ge, [
-          d(i.$slots, "initials")
+          d(m.$slots, "initials")
         ]),
         e("div", ye, [
           e("span", $e, [
-            d(i.$slots, "author")
+            d(m.$slots, "author")
           ]),
-          s.value ? (a(), r("span", be, [
+          s.value ? (n(), r("span", be, [
             e("span", Ce, [
               h("  "),
-              d(i.$slots, "datePrefix")
+              d(m.$slots, "datePrefix")
             ]),
-            e("span", ke, [
+            e("span", Me, [
               h(" "),
-              d(i.$slots, "date")
+              d(m.$slots, "date")
             ])
           ])) : f("", !0),
           e("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${i.rating} von ${A} Sternen`
+            "aria-label": `Bewertung: ${m.rating} von ${I} Sternen`
           }, [
-            (a(!0), r(B, null, L(p.value.fullStars, (g) => (a(), r("div", {
-              key: g,
+            (n(!0), r(B, null, L(p.value.fullStars, (y) => (n(), r("div", {
+              key: y,
               class: "m-star-rating__item m-star-rating__item--full"
             }, [
-              S($(b), { icon: "solid-star" })
+              E($(b), { icon: "solid-star" })
             ]))), 128)),
-            p.value.isHalfStar ? (a(), r("div", we, [
-              S($(b), { icon: "half-star" })
+            p.value.isHalfStar ? (n(), r("div", we, [
+              E($(b), { icon: "half-star" })
             ])) : f("", !0),
-            (a(!0), r(B, null, L(p.value.emptyStars, (g) => (a(), r("div", {
-              key: g,
+            (n(!0), r(B, null, L(p.value.emptyStars, (y) => (n(), r("div", {
+              key: y,
               class: "m-star-rating__item"
             }, [
-              S($(b), { icon: "solid-star" })
+              E($(b), { icon: "solid-star" })
             ]))), 128)),
-            e("div", Se, m(_.value), 1)
-          ], 8, Me)
+            e("div", Se, _(g.value), 1)
+          ], 8, ke)
         ])
       ]),
       e("div", Ie, [
         e("div", Ee, [
-          d(i.$slots, "headline")
+          d(m.$slots, "headline")
         ]),
         e("div", Ae, [
-          d(i.$slots, "text")
+          d(m.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Ve = " ", Re = /* @__PURE__ */ v({
+}), Re = " ", Ve = /* @__PURE__ */ v({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -323,32 +325,32 @@ const U = ["href"], b = /* @__PURE__ */ v({
     variant: { default: "listing" }
   },
   setup(o) {
-    const t = o, n = c(() => ((t.initials ?? t.author.split(Ve).map((s) => s.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
-    return (s, l) => (a(), R($(D), {
+    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(m(n.value), 1)
+        h(_(a.value), 1)
       ]),
       datePrefix: C(() => [
         h("am")
       ]),
       author: C(() => [
-        h(m(s.author), 1)
+        h(_(s.author), 1)
       ]),
       headline: C(() => [
-        h(m(s.headline), 1)
+        h(_(s.headline), 1)
       ]),
       text: C(() => [
-        h(m(s.text), 1)
+        h(_(s.text), 1)
       ]),
       _: 2
     }, [
       s.date ? {
         name: "date",
         fn: C(() => [
-          h(m(s.date), 1)
+          h(_(s.date), 1)
         ]),
         key: "0"
       } : void 0
@@ -373,10 +375,10 @@ const U = ["href"], b = /* @__PURE__ */ v({
 }, je = ["onClick"], ze = {
   "aria-hidden": "true",
   class: "icon"
-}, Ue = ["xlink:href"], Xe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), Ge = {
+}, Ue = ["xlink:href"], Xe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), xe = {
   class: "m-hint",
   id: "text-input-hint"
-}, Je = /* @__PURE__ */ v({
+}, Ge = /* @__PURE__ */ v({
   __name: "MucInput",
   props: /* @__PURE__ */ O({
     errorMsg: {},
@@ -393,70 +395,70 @@ const U = ["href"], b = /* @__PURE__ */ v({
   }),
   emits: /* @__PURE__ */ O(["suffixClick"], ["update:modelValue"]),
   setup(o, { emit: t }) {
-    const n = W(o, "modelValue"), s = o, l = T(), _ = t, p = c(() => s.errorMsg ? "has-error" : ""), i = c(() => s.type === "search"), y = c(() => {
-      if (n.value === "") return [];
-      const u = n.value.toLowerCase();
+    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(
-        (M) => M.toLowerCase().startsWith(u) && M.toLowerCase() !== u
+        (w) => w.toLowerCase().startsWith(i) && w.toLowerCase() !== i
       );
-    }), g = (u) => n.value = u, E = () => _("suffixClick");
-    return (u, M) => (a(), r("div", {
-      class: k(["m-form-group", p.value])
+    }), k = (i) => a.value = i, y = () => l("suffixClick");
+    return (i, w) => (n(), r("div", {
+      class: M(["m-form-group", g.value])
     }, [
       e("label", Te, [
-        h(m(u.label) + " ", 1),
-        u.required ? (a(), r("span", De, [
+        h(_(i.label) + " ", 1),
+        i.required ? (n(), r("span", De, [
           h(" * "),
           Pe
         ])) : f("", !0)
       ]),
-      e("p", He, m(u.errorMsg), 1),
+      e("p", He, _(i.errorMsg), 1),
       e("div", qe, [
-        l.prefix ? (a(), r("div", Fe, [
+        u.prefix ? (n(), r("div", Fe, [
           e("span", null, [
-            d(u.$slots, "prefix")
+            d(i.$slots, "prefix")
           ])
         ])) : f("", !0),
         j(e("input", {
           class: "m-input autocomplete-input",
-          type: u.type,
-          "onUpdate:modelValue": M[0] || (M[0] = (w) => n.value = w),
-          "aria-describedby": u.type + "-input",
-          placeholder: u.placeholder,
-          required: u.required
+          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, n.value]
+          [z, a.value]
         ]),
-        i.value && y.value.length !== 0 ? (a(), r("ul", We, [
-          (a(!0), r(B, null, L(y.value, (w) => (a(), r("li", {
+        p.value && m.value.length !== 0 ? (n(), r("ul", We, [
+          (n(!0), r(B, null, L(m.value, (S) => (n(), r("li", {
             class: "autocomplete-result",
-            key: w,
-            onClick: (rt) => g(w)
-          }, m(w), 9, je))), 128))
+            key: S,
+            onClick: (rt) => k(S)
+          }, _(S), 9, je))), 128))
         ])) : f("", !0),
-        u.suffixIcon ? (a(), r("button", {
+        i.suffixIcon ? (n(), r("button", {
           key: 2,
           class: "m-input__suffix",
-          onClick: E
+          onClick: y
         }, [
-          (a(), r("svg", ze, [
+          (n(), r("svg", ze, [
             e("use", {
-              "xlink:href": "#icon-" + u.suffixIcon
+              "xlink:href": "#icon-" + i.suffixIcon
             }, null, 8, Ue)
           ])),
           Xe
         ])) : f("", !0)
       ]),
-      e("p", Ge, m(u.hint), 1)
+      e("p", xe, _(i.hint), 1)
     ], 2));
   }
-}), Ke = {
+}), Je = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, Qe = { class: "container" }, Ye = { style: { width: "66.6%" } }, Ze = {
+}, Ke = { class: "container" }, Qe = { style: { width: "66.6%" } }, Ye = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, xe = { class: "m-intro-vertical__title" }, et = {
+}, Ze = { class: "m-intro-vertical__title" }, et = {
   key: 0,
   class: "muc-divider"
 }, tt = { class: "m-intro-vertical__content" }, st = { style: { "padding-bottom": "32px" } }, nt = /* @__PURE__ */ v({
@@ -467,14 +469,14 @@ const U = ["href"], b = /* @__PURE__ */ v({
     divider: { type: Boolean }
   },
   setup(o) {
-    return (t, n) => (a(), r("div", Ke, [
-      e("div", Qe, [
-        e("div", Ye, [
+    return (t, a) => (n(), r("div", Je, [
+      e("div", Ke, [
+        e("div", Qe, [
           e("div", null, [
-            t.tagline ? (a(), r("p", Ze, m(t.tagline), 1)) : f("", !0),
-            e("h1", xe, m(t.title), 1)
+            t.tagline ? (n(), r("p", Ye, _(t.tagline), 1)) : f("", !0),
+            e("h1", Ze, _(t.title), 1)
           ]),
-          t.divider ? (a(), r("div", et)) : f("", !0),
+          t.divider ? (n(), r("div", et)) : f("", !0),
           e("div", tt, [
             e("p", st, [
               d(t.$slots, "default", {}, void 0, !0)
@@ -484,33 +486,33 @@ const U = ["href"], b = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), at = /* @__PURE__ */ I(nt, [["__scopeId", "data-v-9ad3adc7"]]), V = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), at = /* @__PURE__ */ A(nt, [["__scopeId", "data-v-9ad3adc7"]]), R = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: K,
-  MucButton: Y,
+  MucBanner: J,
+  MucButton: Q,
   MucCallout: re,
   MucCard: _e,
   MucCardContainer: fe,
   MucComment: D,
-  MucCommentText: Re,
-  MucForm: Je,
+  MucCommentText: Ve,
+  MucForm: Ge,
   MucIcon: b,
   MucIntro: at
 }, Symbol.toStringTag, { value: "Module" }));
 function ot(o) {
-  for (const t in V)
-    o.component(t, V[t]);
+  for (const t in R)
+    o.component(t, R[t]);
 }
 const ct = { install: ot };
 export {
-  K as MucBanner,
-  Y as MucButton,
+  J as MucBanner,
+  Q as MucButton,
   re as MucCallout,
   _e as MucCard,
   fe as MucCardContainer,
   D as MucComment,
-  Re as MucCommentText,
-  Je as MucForm,
+  Ve as MucCommentText,
+  Ge as MucForm,
   b as MucIcon,
   at as MucIntro,
   ct 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.0-beta.2",
+  "version": "1.12.1-beta.1",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",
@@ -72,7 +72,7 @@
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.0.3",
     "rimraf": "^6.0.0",
-    "semantic-release": "^22.0.0",
+    "semantic-release": "^23.1.1",
     "semantic-release-gitmoji": "^1.6.5",
     "storybook": "^8.0.9",
     "typescript": "~5.5.0",

package/src/components/Comment/MucComment.vue

@@ -126,17 +126,27 @@ const showDate = computed(() => {
   return !!slots["date"];
 });
 
+/**
+ * Computes class for given variant
+ */
 const commentClass = computed(() => {
   return props.variant === "slider"
     ? "m-comment--slider"
     : "m-comment--listing";
 });
 
+/**
+ * Computes rating with min and max limits
+ */
+const computedRating = computed(() =>
+  Math.min(Math.max(props.rating, 0), MAX_STARS)
+);
+
 /*
  * Converts the dot used on decimal numbers and converts it to a comma.
  */
 const ratingWithDecimalComma = computed(() => {
-  return props.rating.toLocaleString(LOCALES.valueOf(), {
+  return computedRating.value.toLocaleString(LOCALES.valueOf(), {
     minimumFractionDigits: 1,
   });
 });
@@ -145,14 +155,14 @@ const ratingWithDecimalComma = computed(() => {
 Calculates the amount of full, empty and half-stars to be displayed.
  */
 const evaluateRating = computed(() => {
-  const decimalPart = +(props.rating % 1).toFixed(1); // ask Brendan Eich why "3.3 % 1 = 0.2999999999999998" and then come back
+  const decimalPart = +(computedRating.value % 1).toFixed(1); // ask Brendan Eich why "3.3 % 1 = 0.2999999999999998" and then come back
 
-  let fullStars = Math.min(Math.floor(props.rating), MAX_STARS);
-  let emptyStars = Math.floor(MAX_STARS - props.rating);
+  let fullStars = Math.min(Math.floor(computedRating.value), MAX_STARS);
+  let emptyStars = Math.floor(MAX_STARS - computedRating.value);
   let isHalfStar = false;
 
   // evaluating half-stars and if the rating is e.g. 3.9 an extra full star needs to be displayed
-  if (props.rating !== 0.0 && props.rating !== MAX_STARS) {
+  if (computedRating.value !== 0.0 && computedRating.value !== MAX_STARS) {
     if (decimalPart <= LOWER_THRESHOLD) emptyStars++;
     else if (decimalPart >= UPPER_THRESHOLD) fullStars++;
     else isHalfStar = true;