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

package/dist/components/Divider/MucDivider.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {};

package/dist/components/Divider/MucDivider.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import { default as MucDivider } from './MucDivider.vue';
+
+export { MucDivider };

package/dist/components/index.d.ts

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

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

@@ -1,4 +1,4 @@
-import { defineComponent as h, useAttrs as Z, computed as r, openBlock as n, createElementBlock as c, normalizeClass as b, normalizeStyle as ee, createElementVNode as e, createVNode as R, unref as k, renderSlot as _, createBlock as j, createCommentVNode as g, toDisplayString as u, pushScopeId as H, popScopeId as U, useSlots as N, createTextVNode as $, Fragment as E, renderList as L, createSlots as te, withCtx as B, mergeModels as C, useModel as T, withModifiers as W, 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";
+import { defineComponent as h, useAttrs as Z, computed as r, openBlock as n, createElementBlock as c, normalizeClass as g, 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 U, useSlots as N, createTextVNode as b, Fragment as E, renderList as L, createSlots as te, withCtx as B, mergeModels as C, useModel as T, withModifiers as W, ref as O, withDirectives as D, vModelDynamic as se, inject as oe, provide as ae, readonly as ne, toRef as le, vModelText as ce } from "vue";
 const ie = ["href"], M = /* @__PURE__ */ h({
   __name: "MucIcon",
   props: {
@@ -9,7 +9,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     const t = Z(), s = r(() => t.class ?? "icon");
     return (o, i) => (n(), c("svg", {
       "aria-hidden": "true",
-      class: b(s.value),
+      class: g(s.value),
       style: ee({ color: o.color })
     }, [
       e("use", {
@@ -77,7 +77,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     return (m, f) => (n(), c("div", null, [
       e("div", null, [
         e("div", {
-          class: b(["m-banner", s.value]),
+          class: g(["m-banner", s.value]),
           role: o.value,
           "aria-label": i.value
         }, [
@@ -94,7 +94,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
   for (const [o, i] of t)
     s[o] = i;
   return s;
-}, _e = /* @__PURE__ */ V(de, [["__scopeId", "data-v-53bc7eca"]]), me = ["disabled"], D = /* @__PURE__ */ h({
+}, _e = /* @__PURE__ */ V(de, [["__scopeId", "data-v-53bc7eca"]]), me = ["disabled"], z = /* @__PURE__ */ h({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -121,7 +121,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     return (f, v) => (n(), c("button", {
       onClick: m,
       disabled: f.disabled,
-      class: b(["m-button", [i.value, l.value]])
+      class: g(["m-button", [i.value, l.value]])
     }, [
       e("span", null, [
         _(f.$slots, "default"),
@@ -129,11 +129,11 @@ const ie = ["href"], M = /* @__PURE__ */ h({
           key: 0,
           icon: f.icon,
           class: "m-button__icon"
-        }, null, 8, ["icon"])) : g("", !0)
+        }, null, 8, ["icon"])) : $("", !0)
       ])
     ], 10, me));
   }
-}), pe = ["aria-label"], he = { class: "m-callout__inner" }, ve = { class: "m-callout__icon" }, fe = { class: "m-callout__body" }, ge = { class: "m-callout__body__inner" }, $e = { class: "m-callout__headline" }, be = { class: "m-callout__content" }, ye = /* @__PURE__ */ h({
+}), pe = ["aria-label"], he = { class: "m-callout__inner" }, ve = { class: "m-callout__icon" }, fe = { class: "m-callout__body" }, $e = { class: "m-callout__body__inner" }, be = { class: "m-callout__headline" }, ge = { class: "m-callout__content" }, ye = /* @__PURE__ */ h({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
@@ -172,7 +172,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       }
     });
     return (l, m) => (n(), c("div", {
-      class: b(["m-callout", o.value]),
+      class: g(["m-callout", o.value]),
       "aria-label": i.value
     }, [
       e("div", he, [
@@ -182,11 +182,11 @@ const ie = ["href"], M = /* @__PURE__ */ h({
           ], !0)
         ]),
         e("div", fe, [
-          e("div", ge, [
-            e("div", $e, [
+          e("div", $e, [
+            e("div", be, [
               _(l.$slots, "header", {}, void 0, !0)
             ]),
-            e("div", be, [
+            e("div", ge, [
               e("p", null, [
                 _(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
@@ -196,10 +196,10 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       ])
     ], 10, pe));
   }
-}), ke = /* @__PURE__ */ V(ye, [["__scopeId", "data-v-e6cf4104"]]), Me = (a) => (H("data-v-acf0a1dd"), a = a(), U(), a), Ce = { class: "card-content" }, we = { class: "card-header" }, Se = {
+}), ke = /* @__PURE__ */ V(ye, [["__scopeId", "data-v-e6cf4104"]]), Me = (a) => (H("data-v-acf0a1dd"), a = a(), U(), a), Ce = { class: "card-content" }, we = { class: "card-header" }, Ie = {
   key: 0,
   class: "card-tagline"
-}, Ie = /* @__PURE__ */ Me(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), Be = /* @__PURE__ */ h({
+}, Se = /* @__PURE__ */ Me(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), Be = /* @__PURE__ */ h({
   __name: "MucCard",
   props: {
     title: {},
@@ -216,13 +216,13 @@ const ie = ["href"], M = /* @__PURE__ */ h({
         e("div", we, [
           _(o.$slots, "headerPrefix", {}, void 0, !0),
           e("div", null, [
-            o.tagline ? (n(), c("div", Se, u(o.tagline), 1)) : g("", !0),
+            o.tagline ? (n(), c("div", Ie, u(o.tagline), 1)) : $("", !0),
             e("div", null, [
               e("h3", null, u(o.title), 1)
             ])
           ])
         ]),
-        Ie,
+        Se,
         _(o.$slots, "content", {}, void 0, !0)
       ])
     ]));
@@ -237,7 +237,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
 }), Re = /* @__PURE__ */ V(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"
-}, Ue = { class: "m-star-rating__numeric" }, Ne = { class: "m-comment__body" }, We = { class: "m-comment__headline" }, ze = { class: "m-comment__text" }, De = "de-DE", Fe = 0.2, Ke = 0.8, A = 5, F = /* @__PURE__ */ h({
+}, Ue = { class: "m-star-rating__numeric" }, Ne = { class: "m-comment__body" }, We = { class: "m-comment__headline" }, De = { class: "m-comment__text" }, ze = "de-DE", Fe = 0.2, Ke = 0.8, A = 5, F = /* @__PURE__ */ h({
   __name: "MucComment",
   props: {
     rating: {},
@@ -246,7 +246,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
   setup(a) {
     const t = N(), 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(), {
+    ), m = r(() => l.value.toLocaleString(ze.valueOf(), {
       minimumFractionDigits: 1
     })), f = r(() => {
       const v = +(l.value % 1).toFixed(1);
@@ -258,7 +258,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       };
     });
     return (v, w) => (n(), c("div", {
-      class: b(["m-comment", i.value])
+      class: g(["m-comment", i.value])
     }, [
       e("div", Ee, [
         e("div", Le, [
@@ -270,14 +270,14 @@ const ie = ["href"], M = /* @__PURE__ */ h({
           ]),
           o.value ? (n(), c("span", je, [
             e("span", Ge, [
-              $("  "),
+              b("  "),
               _(v.$slots, "datePrefix")
             ]),
             e("span", Pe, [
-              $(" "),
+              b(" "),
               _(v.$slots, "date")
             ])
-          ])) : g("", !0),
+          ])) : $("", !0),
           e("div", {
             class: "m-star-rating",
             role: "img",
@@ -291,7 +291,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
             ]))), 128)),
             f.value.isHalfStar ? (n(), c("div", He, [
               R(k(M), { icon: "half-star" })
-            ])) : g("", !0),
+            ])) : $("", !0),
             (n(!0), c(E, null, L(f.value.emptyStars, (y) => (n(), c("div", {
               key: y,
               class: "m-star-rating__item"
@@ -306,7 +306,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
         e("div", We, [
           _(v.$slots, "headline")
         ]),
-        e("div", ze, [
+        e("div", De, [
           _(v.$slots, "text")
         ])
       ])
@@ -331,32 +331,36 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       variant: o.variant
     }, te({
       initials: B(() => [
-        $(u(s.value), 1)
+        b(u(s.value), 1)
       ]),
       datePrefix: B(() => [
-        $("am")
+        b("am")
       ]),
       author: B(() => [
-        $(u(o.author), 1)
+        b(u(o.author), 1)
       ]),
       headline: B(() => [
-        $(u(o.headline), 1)
+        b(u(o.headline), 1)
       ]),
       text: B(() => [
-        $(u(o.text), 1)
+        b(u(o.text), 1)
       ]),
       _: 2
     }, [
       o.date ? {
         name: "date",
         fn: B(() => [
-          $(u(o.date), 1)
+          b(u(o.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Qe = ["checked"], Ye = { class: "m-label m-checkboxes__label" }, Ze = /* @__PURE__ */ h({
+}), Qe = {}, Ye = { class: "divider-border" };
+function Ze(a, t) {
+  return n(), c("hr", Ye);
+}
+const et = /* @__PURE__ */ V(Qe, [["render", Ze], ["__scopeId", "data-v-a2b37f5b"]]), tt = ["checked"], st = { class: "m-label m-checkboxes__label" }, ot = /* @__PURE__ */ h({
   __name: "MucCheckbox",
   props: /* @__PURE__ */ C({
     label: {}
@@ -379,58 +383,58 @@ const ie = ["href"], M = /* @__PURE__ */ h({
         type: "checkbox",
         checked: s.value,
         onClick: W(i, ["stop"])
-      }, null, 8, Qe),
-      e("label", Ye, u(l.label), 1)
+      }, null, 8, tt),
+      e("label", st, 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 = {
+}), at = { class: "m-form-group" }, nt = { class: "m-checkbox-group" }, lt = { class: "m-checkbox-group__legend" }, ct = { class: "m-checkbox-group__heading" }, it = { class: "m-checkboxes m-checkboxes--collapse" }, rt = /* @__PURE__ */ e("span", null, "Mehr ", -1), ut = {
   "aria-hidden": "true",
   class: "icon icon--after"
-}, ct = ["href"], it = /* @__PURE__ */ h({
+}, dt = ["href"], _t = /* @__PURE__ */ h({
   __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)
+    return (l, m) => (n(), c("div", at, [
+      e("fieldset", nt, [
+        e("legend", lt, [
+          e("h3", ct, u(l.heading), 1)
         ]),
-        e("div", at, [
+        e("div", it, [
           _(l.$slots, "checkboxes"),
           l.$slots.collapsableCheckboxes ? (n(), c("div", {
             key: 0,
-            class: b(["m-checkboxes__collapse__container", s.value])
+            class: g(["m-checkboxes__collapse__container", s.value])
           }, [
             _(l.$slots, "collapsableCheckboxes")
-          ], 2)) : g("", !0),
-          l.$slots.collapsableCheckboxes ? (n(), j(k(D), {
+          ], 2)) : $("", !0),
+          l.$slots.collapsableCheckboxes ? (n(), j(k(z), {
             key: 1,
             variant: "ghost",
             onClick: i,
             "aria-expanded": !t.value
           }, {
             default: B(() => [
-              nt,
-              (n(), c("svg", lt, [
+              rt,
+              (n(), c("svg", ut, [
                 e("use", {
                   href: "#icon-chevron-" + o.value
-                }, null, 8, ct)
+                }, null, 8, dt)
               ]))
             ]),
             _: 1
-          }, 8, ["aria-expanded"])) : g("", !0)
+          }, 8, ["aria-expanded"])) : $("", !0)
         ])
       ])
     ]));
   }
-}), rt = {
+}), mt = {
   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__ */ h({
+}, pt = { class: "m-error-list__title" }, ht = { class: "m-error-list__body" }, vt = { class: "m-list m-error-list__list" }, ft = /* @__PURE__ */ h({
   __name: "MucErrorList",
   props: {
     title: {},
@@ -440,10 +444,10 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     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, [
+    return (o, i) => (n(), c("div", mt, [
+      e("h2", pt, u(o.title), 1),
+      e("div", ht, [
+        e("ul", vt, [
           (n(!0), c(E, null, L(s.value, (l, m) => (n(), c("li", { key: m }, [
             e("a", null, u(l), 1)
           ]))), 128))
@@ -451,29 +455,29 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       ])
     ]));
   }
-}), pt = {
+}), $t = {
   for: "search-input",
   class: "m-label"
-}, ht = {
+}, bt = {
   key: 0,
   "aria-hidden": "true",
   class: "mandatory"
-}, vt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), ft = {
+}, gt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), yt = {
   id: "text-input-error",
   class: "m-error-message"
-}, gt = { class: "m-input-wrapper m-autocomplete" }, $t = {
+}, kt = { class: "m-input-wrapper m-autocomplete" }, Mt = {
   key: 0,
   class: "m-input__prefix"
-}, bt = ["type", "aria-describedby", "placeholder", "required"], yt = {
+}, Ct = ["type", "aria-describedby", "placeholder", "required"], wt = {
   key: 1,
   class: "autocomplete-result-list autocomplete-result-list--location"
-}, kt = ["onClick"], Mt = {
+}, It = ["onClick"], St = {
   "aria-hidden": "true",
   class: "icon"
-}, Ct = ["xlink:href"], wt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), St = {
+}, Bt = ["xlink:href"], Vt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), xt = {
   class: "m-hint",
   id: "text-input-hint"
-}, It = /* @__PURE__ */ h({
+}, At = /* @__PURE__ */ h({
   __name: "MucInput",
   props: /* @__PURE__ */ C({
     errorMsg: {},
@@ -494,63 +498,63 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       if (s.value === "") return [];
       const d = s.value.toLowerCase();
       return o.datalist.filter(
-        (S) => S.toLowerCase().startsWith(d) && S.toLowerCase() !== d
+        (I) => I.toLowerCase().startsWith(d) && I.toLowerCase() !== d
       );
     }), w = (d) => s.value = d, y = () => l("suffixClick");
-    return (d, S) => (n(), c("div", {
-      class: b(["m-form-group", m.value])
+    return (d, I) => (n(), c("div", {
+      class: g(["m-form-group", m.value])
     }, [
-      e("label", pt, [
-        $(u(d.label) + " ", 1),
-        d.required ? (n(), c("span", ht, [
-          $(" * "),
-          vt
-        ])) : g("", !0)
+      e("label", $t, [
+        b(u(d.label) + " ", 1),
+        d.required ? (n(), c("span", bt, [
+          b(" * "),
+          gt
+        ])) : $("", !0)
       ]),
-      e("p", ft, u(d.errorMsg), 1),
-      e("div", gt, [
-        i.prefix ? (n(), c("div", $t, [
+      e("p", yt, u(d.errorMsg), 1),
+      e("div", kt, [
+        i.prefix ? (n(), c("div", Mt, [
           e("span", null, [
             _(d.$slots, "prefix")
           ])
-        ])) : g("", !0),
-        z(e("input", {
+        ])) : $("", !0),
+        D(e("input", {
           class: "m-input autocomplete-input",
           type: d.type,
-          "onUpdate:modelValue": S[0] || (S[0] = (I) => s.value = I),
+          "onUpdate:modelValue": I[0] || (I[0] = (S) => s.value = S),
           "aria-describedby": d.type + "-input",
           placeholder: d.placeholder,
           required: d.required
-        }, null, 8, bt), [
+        }, null, 8, Ct), [
           [se, s.value]
         ]),
-        f.value && v.value.length !== 0 ? (n(), c("ul", yt, [
-          (n(!0), c(E, null, L(v.value, (I) => (n(), c("li", {
+        f.value && v.value.length !== 0 ? (n(), c("ul", wt, [
+          (n(!0), c(E, null, L(v.value, (S) => (n(), c("li", {
             class: "autocomplete-result",
-            key: I,
-            onClick: (G) => w(I)
-          }, u(I), 9, kt))), 128))
-        ])) : g("", !0),
+            key: S,
+            onClick: (G) => w(S)
+          }, u(S), 9, It))), 128))
+        ])) : $("", !0),
         d.suffixIcon ? (n(), c("button", {
           key: 2,
           class: "m-input__suffix",
           onClick: y
         }, [
-          (n(), c("svg", Mt, [
+          (n(), c("svg", St, [
             e("use", {
               "xlink:href": "#icon-" + d.suffixIcon
-            }, null, 8, Ct)
+            }, null, 8, Bt)
           ])),
-          wt
-        ])) : g("", !0)
+          Vt
+        ])) : $("", !0)
       ]),
-      e("p", St, u(d.hint), 1)
+      e("p", xt, u(d.hint), 1)
     ], 2));
   }
-}), K = Symbol("mucRadioGroup"), Bt = {
+}), K = Symbol("mucRadioGroup"), Rt = {
   key: 0,
   class: "m-radios__item"
-}, Vt = ["checked", "disabled"], xt = { class: "m-hint" }, At = /* @__PURE__ */ h({
+}, Et = ["checked", "disabled"], Lt = { class: "m-hint" }, Tt = /* @__PURE__ */ h({
   __name: "MucRadioButton",
   props: {
     value: {},
@@ -560,24 +564,24 @@ const ie = ["href"], M = /* @__PURE__ */ h({
   },
   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, v) => m.value ? (n(), c("div", Bt, [
+    return (f, v) => m.value ? (n(), c("div", Rt, [
       e("input", {
         class: "m-radios__input",
         type: "radio",
         checked: i.value,
         disabled: l.value,
         onClick: W(o, ["stop"])
-      }, null, 8, Vt),
+      }, null, 8, Et),
       e("label", {
         class: "m-label m-radios__label",
         onClick: o
       }, [
-        $(u(f.label) + " ", 1),
-        e("span", xt, u(f.hint), 1)
+        b(u(f.label) + " ", 1),
+        e("span", Lt, u(f.hint), 1)
       ])
-    ])) : g("", !0);
+    ])) : $("", !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__ */ h({
+}), Ot = { class: "m-form-group" }, jt = { class: "m-radio-group" }, Gt = { class: "m-radio-group__legend" }, Pt = { class: "m-radio-group__heading" }, qt = { class: "m-radios" }, Ht = /* @__PURE__ */ h({
   __name: "MucRadioButtonGroup",
   props: /* @__PURE__ */ C({
     heading: {},
@@ -595,29 +599,29 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       },
       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)
+    }), (l, m) => (n(), c("div", Ot, [
+      e("fieldset", jt, [
+        e("legend", Gt, [
+          e("h3", Pt, u(l.heading), 1)
         ]),
-        e("div", Ot, [
+        e("div", qt, [
           _(l.$slots, "default")
         ])
       ])
     ]));
   }
-}), X = (a) => (H("data-v-d28d341e"), a = a(), U(), a), Gt = { class: "m-form-group" }, Pt = { class: "m-label" }, qt = ["value"], Ht = /* @__PURE__ */ X(() => /* @__PURE__ */ e("svg", {
+}), X = (a) => (H("data-v-d28d341e"), a = a(), U(), a), Ut = { class: "m-form-group" }, Nt = { class: "m-label" }, Wt = ["value"], Dt = /* @__PURE__ */ X(() => /* @__PURE__ */ e("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
   /* @__PURE__ */ e("use", { "xlink:href": "#icon-chevron-down" })
-], -1)), Ut = /* @__PURE__ */ X(() => /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)), Nt = [
-  Ht,
-  Ut
-], Wt = ["onMouseenter", "onClick"], zt = {
+], -1)), zt = /* @__PURE__ */ X(() => /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)), Ft = [
+  Dt,
+  zt
+], Kt = ["onMouseenter", "onClick"], Xt = {
   key: 0,
   class: "m-hint"
-}, Dt = /* @__PURE__ */ h({
+}, Jt = /* @__PURE__ */ h({
   __name: "MucSelect",
   props: /* @__PURE__ */ C({
     items: {},
@@ -640,15 +644,15 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       typeof t.value == "object" && (t.value = t.value.join(" ")), t.value = t.value === p ? "" : p;
     }, w = (p) => {
       typeof t.value == "string" && (t.value = [t.value]), t.value = t.value.includes(p) ? t.value.filter((P) => P !== p) : [...t.value, p];
-    }, y = r(() => typeof t.value == "string" ? t.value : t.value.join(l.multiple ? ", " : " ")), d = (p) => p === i.value ? "active" : "", S = (p) => t.value.includes(p) ? "selected" : "", I = () => i.value = "", G = r(
+    }, y = r(() => typeof t.value == "string" ? t.value : t.value.join(l.multiple ? ", " : " ")), d = (p) => p === i.value ? "active" : "", I = (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),
+    return (p, P) => (n(), c("div", Ut, [
+      e("label", Nt, u(p.label), 1),
       e("div", {
-        class: b(["m-input-wrapper", J.value])
+        class: g(["m-input-wrapper", J.value])
       }, [
         e("input", {
           type: "text",
@@ -656,34 +660,34 @@ const ie = ["href"], M = /* @__PURE__ */ h({
           value: y.value,
           onClick: m,
           readonly: ""
-        }, null, 8, qt),
+        }, null, 8, Wt),
         e("span", {
           class: "m-input__trigger",
           onClick: m
-        }, Nt),
+        }, Ft),
         e("ul", {
-          class: b(["listbox", G.value]),
-          onMouseleave: I
+          class: g(["listbox", G.value]),
+          onMouseleave: S
         }, [
           (n(!0), c(E, null, L(l.items, (x, Q) => (n(), c("li", {
             key: Q,
-            class: b(["option", [d(x), S(x)]]),
+            class: g(["option", [d(x), I(x)]]),
             onMouseenter: (Y) => i.value = x,
             onClick: (Y) => f(x)
-          }, u(x), 43, Wt))), 128))
+          }, u(x), 43, Kt))), 128))
         ], 34)
       ], 2),
-      p.hint ? (n(), c("p", zt, u(p.hint), 1)) : g("", !0)
+      p.hint ? (n(), c("p", Xt, u(p.hint), 1)) : $("", !0)
     ]));
   }
-}), Ft = /* @__PURE__ */ V(Dt, [["__scopeId", "data-v-d28d341e"]]), Kt = { class: "m-form-group has-error" }, Xt = {
+}), Qt = /* @__PURE__ */ V(Jt, [["__scopeId", "data-v-d28d341e"]]), Yt = { class: "m-form-group has-error" }, Zt = {
   for: "textarea",
   class: "m-label"
-}, Jt = {
+}, es = {
   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__ */ h({
+}, ts = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), ss = { class: "m-error-message" }, os = { class: "m-input-wrapper" }, as = ["rows", "placeholder"], ns = { class: "m-hint" }, ls = /* @__PURE__ */ h({
   __name: "MucTextArea",
   props: /* @__PURE__ */ C({
     errorMsg: {},
@@ -699,39 +703,39 @@ const ie = ["href"], M = /* @__PURE__ */ h({
   emits: ["update:modelValue"],
   setup(a) {
     const t = T(a, "modelValue");
-    return (s, o) => (n(), c("div", Kt, [
-      e("label", Xt, [
-        $(u(s.label) + " ", 1),
-        s.required ? (n(), c("span", Jt, [
-          $(" * "),
-          Qt
-        ])) : g("", !0)
+    return (s, o) => (n(), c("div", Yt, [
+      e("label", Zt, [
+        b(u(s.label) + " ", 1),
+        s.required ? (n(), c("span", es, [
+          b(" * "),
+          ts
+        ])) : $("", !0)
       ]),
-      e("p", Yt, u(s.errorMsg), 1),
-      e("div", Zt, [
-        z(e("textarea", {
+      e("p", ss, u(s.errorMsg), 1),
+      e("div", os, [
+        D(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), [
+        }, null, 8, as), [
           [ce, t.value]
         ])
       ]),
-      e("p", ts, u(s.hint), 1)
+      e("p", ns, u(s.hint), 1)
     ]));
   }
-}), os = {
+}), cs = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, as = { class: "container" }, ns = { style: { width: "66.6%" } }, ls = {
+}, is = { class: "container" }, rs = { style: { width: "66.6%" } }, us = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, cs = { class: "m-intro-vertical__title" }, is = {
+}, ds = { class: "m-intro-vertical__title" }, _s = {
   key: 0,
   class: "muc-divider"
-}, rs = { class: "m-intro-vertical__content" }, us = { style: { "padding-bottom": "32px" } }, ds = /* @__PURE__ */ h({
+}, ms = { class: "m-intro-vertical__content" }, ps = { style: { "padding-bottom": "32px" } }, hs = /* @__PURE__ */ h({
   __name: "MucIntro",
   props: {
     title: {},
@@ -739,16 +743,16 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     divider: { type: Boolean }
   },
   setup(a) {
-    return (t, s) => (n(), c("div", os, [
-      e("div", as, [
-        e("div", ns, [
+    return (t, s) => (n(), c("div", cs, [
+      e("div", is, [
+        e("div", rs, [
           e("div", null, [
-            t.tagline ? (n(), c("p", ls, u(t.tagline), 1)) : g("", !0),
-            e("h1", cs, u(t.title), 1)
+            t.tagline ? (n(), c("p", us, u(t.tagline), 1)) : $("", !0),
+            e("h1", ds, u(t.title), 1)
           ]),
-          t.divider ? (n(), c("div", is)) : g("", !0),
-          e("div", rs, [
-            e("p", us, [
+          t.divider ? (n(), c("div", _s)) : $("", !0),
+          e("div", ms, [
+            e("p", ps, [
               _(t.$slots, "default", {}, void 0, !0)
             ])
           ])
@@ -756,7 +760,7 @@ const ie = ["href"], M = /* @__PURE__ */ h({
       ])
     ]));
   }
-}), _s = /* @__PURE__ */ V(ds, [["__scopeId", "data-v-9ad3adc7"]]), ms = ["href", "target"], ps = /* @__PURE__ */ h({
+}), vs = /* @__PURE__ */ V(hs, [["__scopeId", "data-v-9ad3adc7"]]), fs = ["href", "target"], $s = /* @__PURE__ */ h({
   __name: "MucLink",
   props: {
     label: {},
@@ -772,62 +776,64 @@ const ie = ["href"], M = /* @__PURE__ */ h({
     return (o, i) => (n(), c("a", {
       href: o.href,
       target: o.target,
-      class: b(["m-link", s.value])
+      class: g(["m-link", s.value])
     }, [
-      $(u(o.label) + " ", 1),
+      b(u(o.label) + " ", 1),
       _(o.$slots, "icon", {}, () => [
         o.icon ? (n(), j(k(M), {
           key: 0,
           icon: o.icon,
           class: "icon icon--after"
-        }, null, 8, ["icon"])) : g("", !0)
+        }, null, 8, ["icon"])) : $("", !0)
       ])
-    ], 10, ms));
+    ], 10, fs));
   }
 }), q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   MucBanner: _e,
-  MucButton: D,
+  MucButton: z,
   MucCallout: ke,
   MucCard: Ve,
   MucCardContainer: Re,
-  MucCheckbox: Ze,
-  MucCheckboxGroup: it,
+  MucCheckbox: ot,
+  MucCheckboxGroup: _t,
   MucComment: F,
   MucCommentText: Je,
-  MucErrorList: mt,
+  MucDivider: et,
+  MucErrorList: ft,
   MucIcon: M,
-  MucInput: It,
-  MucIntro: _s,
-  MucLink: ps,
-  MucRadioButton: At,
-  MucRadioButtonGroup: jt,
-  MucSelect: Ft,
-  MucTextArea: ss
+  MucInput: At,
+  MucIntro: vs,
+  MucLink: $s,
+  MucRadioButton: Tt,
+  MucRadioButtonGroup: Ht,
+  MucSelect: Qt,
+  MucTextArea: ls
 }, Symbol.toStringTag, { value: "Module" }));
-function hs(a) {
+function bs(a) {
   for (const t in q)
     a.component(t, q[t]);
 }
-const fs = { install: hs };
+const ys = { install: bs };
 export {
   _e as MucBanner,
-  D as MucButton,
+  z as MucButton,
   ke as MucCallout,
   Ve as MucCard,
   Re as MucCardContainer,
-  Ze as MucCheckbox,
-  it as MucCheckboxGroup,
+  ot as MucCheckbox,
+  _t as MucCheckboxGroup,
   F as MucComment,
   Je as MucCommentText,
-  mt as MucErrorList,
+  et as MucDivider,
+  ft as MucErrorList,
   M as MucIcon,
-  It as MucInput,
-  _s as MucIntro,
-  ps as MucLink,
-  At as MucRadioButton,
-  jt as MucRadioButtonGroup,
-  Ft as MucSelect,
-  ss as MucTextArea,
-  fs as default
+  At as MucInput,
+  vs as MucIntro,
+  $s as MucLink,
+  Tt as MucRadioButton,
+  Ht as MucRadioButtonGroup,
+  Qt as MucSelect,
+  ls as MucTextArea,
+  ys as default
 };

package/dist/style.css

@@ -1 +1 @@
-.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.display-listbox[data-v-d28d341e]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}
+.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.divider-border[data-v-a2b37f5b]{border-bottom:1px solid var(--color-neutrals-blue)}.display-listbox[data-v-d28d341e]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}

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.13.0-beta.1",
+  "version": "1.13.0-beta.2",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Divider/MucDivider.stories.ts

@@ -0,0 +1,19 @@
+import MucDivider from "./MucDivider.vue";
+
+export default {
+  component: MucDivider,
+  title: "MucDivider",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-divider\` is a trivial divider.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-all)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {};

package/src/components/Divider/MucDivider.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="divider-border" />
+</template>
+
+<style scoped>
+.divider-border {
+  border-bottom: 1px solid var(--color-neutrals-blue);
+}
+</style>

package/src/components/Divider/index.ts

@@ -0,0 +1,3 @@
+import MucDivider from "./MucDivider.vue";
+
+export { MucDivider };

package/src/components/index.ts

@@ -3,6 +3,7 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
+import { MucDivider } from "./Divider";
 import {
   MucCheckbox,
   MucCheckboxGroup,
@@ -35,5 +36,6 @@ export {
   MucSelect,
   MucErrorList,
   MucIcon,
+  MucDivider,
   MucLink,
 };