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

package/dist/components/Link/MucLink.stories.d.ts

@@ -0,0 +1,139 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            href: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            target: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            noUnderline: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            href: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            target: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            noUnderline: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {
+            href: string;
+            target: string;
+            noUnderline: boolean;
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            href: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            target: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            noUnderline: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, {}, {}, {}, {
+            href: string;
+            target: string;
+            noUnderline: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: import('vue').PropType<string>;
+        };
+        label: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        href: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        target: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        noUnderline: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        href: string;
+        target: string;
+        noUnderline: boolean;
+    }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            icon(): void;
+        }> & {
+            icon(): void;
+        };
+    });
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import('@vitest/spy').Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Weather: {
+    args: {
+        label: string;
+    };
+};
+export declare const LinkWithIcon: {
+    args: {
+        icon: string;
+        label: string;
+        href: string;
+        noUnderline: boolean;
+    };
+};

package/dist/components/Link/MucLink.vue.d.ts

@@ -0,0 +1,92 @@
+declare function __VLS_template(): Readonly<{
+    /**
+     * Icon slots overrides chosen prop icon.
+     * The icon can be displayed infront or behind the label with these classes: icon--after | icon--before
+     */
+    icon(): void;
+}> & {
+    /**
+     * Icon slots overrides chosen prop icon.
+     * The icon can be displayed infront or behind the label with these classes: icon--after | icon--before
+     */
+    icon(): void;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Text shown as the link
+     */
+    label: string;
+    /**
+     * href to link to
+     */
+    href?: string;
+    /**
+     * Optional icon displayed behind the text
+     */
+    icon?: string;
+    /**
+     * Target on the link
+     */
+    target?: string;
+    /**
+     * Removes the underline from the label text
+     */
+    noUnderline?: boolean;
+}>, {
+    noUnderline: boolean;
+    href: string;
+    target: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Text shown as the link
+     */
+    label: string;
+    /**
+     * href to link to
+     */
+    href?: string;
+    /**
+     * Optional icon displayed behind the text
+     */
+    icon?: string;
+    /**
+     * Target on the link
+     */
+    target?: string;
+    /**
+     * Removes the underline from the label text
+     */
+    noUnderline?: boolean;
+}>, {
+    noUnderline: boolean;
+    href: string;
+    target: string;
+}>>>, {
+    href: string;
+    target: string;
+    noUnderline: boolean;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

package/dist/components/index.d.ts

@@ -6,5 +6,6 @@ import { MucComment, MucCommentText } from './Comment/';
 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, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucRadioButton, MucRadioButtonGroup, MucInput, MucTextArea, MucCheckboxGroup, MucCheckbox, MucSelect, MucErrorList, MucIcon, MucLink, };

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

@@ -1,5 +1,5 @@
-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({
+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";
+const ie = ["href"], M = /* @__PURE__ */ h({
   __name: "MucIcon",
   props: {
     icon: {},
@@ -9,7 +9,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     const t = Z(), s = r(() => t.class ?? "icon");
     return (o, i) => (n(), c("svg", {
       "aria-hidden": "true",
-      class: y(s.value),
+      class: b(s.value),
       style: ee({ color: o.color })
     }, [
       e("use", {
@@ -17,7 +17,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       }, null, 8, ie)
     ], 6));
   }
-}), re = ["role", "aria-label"], ue = { class: "container-fluid" }, de = /* @__PURE__ */ v({
+}), re = ["role", "aria-label"], ue = { class: "container-fluid" }, de = /* @__PURE__ */ h({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
@@ -77,24 +77,24 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     return (m, f) => (n(), c("div", null, [
       e("div", null, [
         e("div", {
-          class: y(["m-banner", s.value]),
+          class: b(["m-banner", s.value]),
           role: o.value,
           "aria-label": i.value
         }, [
           e("div", ue, [
-            R(k(B), { icon: l.value }, null, 8, ["icon"]),
+            R(k(M), { icon: l.value }, null, 8, ["icon"]),
             _(m.$slots, "default", {}, void 0, !0)
           ])
         ], 10, re)
       ])
     ]));
   }
-}), x = (a, t) => {
+}), V = (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({
+}, _e = /* @__PURE__ */ V(de, [["__scopeId", "data-v-53bc7eca"]]), me = ["disabled"], D = /* @__PURE__ */ h({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -118,22 +118,22 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     ), m = () => {
       o("click");
     };
-    return (f, h) => (n(), c("button", {
+    return (f, v) => (n(), c("button", {
       onClick: m,
       disabled: f.disabled,
-      class: y(["m-button", [i.value, l.value]])
+      class: b(["m-button", [i.value, l.value]])
     }, [
       e("span", null, [
         _(f.$slots, "default"),
-        f.icon ? (n(), j(k(B), {
+        f.icon ? (n(), j(k(M), {
           key: 0,
           icon: f.icon,
           class: "m-button__icon"
-        }, null, 8, ["icon"])) : $("", !0)
+        }, null, 8, ["icon"])) : g("", !0)
       ])
     ], 10, me));
   }
-}), 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({
+}), 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({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
@@ -172,18 +172,18 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       }
     });
     return (l, m) => (n(), c("div", {
-      class: y(["m-callout", o.value]),
+      class: b(["m-callout", o.value]),
       "aria-label": i.value
     }, [
       e("div", he, [
         e("div", ve, [
           _(l.$slots, "icon", {}, () => [
-            R(k(B), { icon: s.value }, null, 8, ["icon"])
+            R(k(M), { icon: s.value }, null, 8, ["icon"])
           ], !0)
         ]),
         e("div", fe, [
-          e("div", $e, [
-            e("div", ge, [
+          e("div", ge, [
+            e("div", $e, [
               _(l.$slots, "header", {}, void 0, !0)
             ]),
             e("div", be, [
@@ -196,10 +196,10 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       ])
     ], 10, pe));
   }
-}), 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 = {
+}), 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 = {
   key: 0,
   class: "card-tagline"
-}, Ie = /* @__PURE__ */ Me(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), Be = /* @__PURE__ */ v({
+}, Ie = /* @__PURE__ */ Me(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), Be = /* @__PURE__ */ h({
   __name: "MucCard",
   props: {
     title: {},
@@ -216,7 +216,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
         e("div", we, [
           _(o.$slots, "headerPrefix", {}, void 0, !0),
           e("div", null, [
-            o.tagline ? (n(), c("div", Se, u(o.tagline), 1)) : $("", !0),
+            o.tagline ? (n(), c("div", Se, u(o.tagline), 1)) : g("", !0),
             e("div", null, [
               e("h3", null, u(o.title), 1)
             ])
@@ -227,92 +227,92 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), xe = /* @__PURE__ */ x(Be, [["__scopeId", "data-v-acf0a1dd"]]), Ve = { class: "container card-container" }, Ae = /* @__PURE__ */ v({
+}), Ve = /* @__PURE__ */ V(Be, [["__scopeId", "data-v-acf0a1dd"]]), xe = { class: "container card-container" }, Ae = /* @__PURE__ */ h({
   __name: "MucCardContainer",
   setup(a) {
-    return (t, s) => (n(), c("div", Ve, [
+    return (t, s) => (n(), c("div", xe, [
       _(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), 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 = {
+}), 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"
-}, 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({
+}, 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({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
   setup(a) {
-    const t = W(), s = a, o = r(() => !!t.date), i = r(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), l = r(
+    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(), {
       minimumFractionDigits: 1
     })), 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,
+      const v = +(l.value % 1).toFixed(1);
+      let w = Math.min(Math.floor(l.value), A), y = Math.floor(A - l.value), d = !1;
+      return l.value !== 0 && l.value !== A && (v <= Fe ? y++ : v >= Ke ? w++ : d = !0), {
+        fullStars: w,
+        emptyStars: y,
         isHalfStar: d
       };
     });
-    return (h, C) => (n(), c("div", {
-      class: y(["m-comment", i.value])
+    return (v, w) => (n(), c("div", {
+      class: b(["m-comment", i.value])
     }, [
       e("div", Ee, [
         e("div", Le, [
-          _(h.$slots, "initials")
+          _(v.$slots, "initials")
         ]),
         e("div", Te, [
           e("span", Oe, [
-            _(h.$slots, "author")
+            _(v.$slots, "author")
           ]),
           o.value ? (n(), c("span", je, [
             e("span", Ge, [
-              g("  "),
-              _(h.$slots, "datePrefix")
+              $("  "),
+              _(v.$slots, "datePrefix")
             ]),
             e("span", Pe, [
-              g(" "),
-              _(h.$slots, "date")
+              $(" "),
+              _(v.$slots, "date")
             ])
-          ])) : $("", !0),
+          ])) : g("", !0),
           e("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${h.rating} von ${A} Sternen`
+            "aria-label": `Bewertung: ${v.rating} von ${A} Sternen`
           }, [
-            (n(!0), c(E, null, L(f.value.fullStars, (b) => (n(), c("div", {
-              key: b,
+            (n(!0), c(E, null, L(f.value.fullStars, (y) => (n(), c("div", {
+              key: y,
               class: "m-star-rating__item m-star-rating__item--full"
             }, [
-              R(k(B), { icon: "solid-star" })
+              R(k(M), { icon: "solid-star" })
             ]))), 128)),
             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,
+              R(k(M), { icon: "half-star" })
+            ])) : g("", !0),
+            (n(!0), c(E, null, L(f.value.emptyStars, (y) => (n(), c("div", {
+              key: y,
               class: "m-star-rating__item"
             }, [
-              R(k(B), { icon: "solid-star" })
+              R(k(M), { icon: "solid-star" })
             ]))), 128)),
-            e("div", Ne, u(m.value), 1)
+            e("div", Ue, u(m.value), 1)
           ], 8, qe)
         ])
       ]),
-      e("div", We, [
-        e("div", Ue, [
-          _(h.$slots, "headline")
+      e("div", Ne, [
+        e("div", We, [
+          _(v.$slots, "headline")
         ]),
         e("div", ze, [
-          _(h.$slots, "text")
+          _(v.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Xe = " ", Je = /* @__PURE__ */ v({
+}), Xe = " ", Je = /* @__PURE__ */ h({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -330,41 +330,41 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       rating: o.rating,
       variant: o.variant
     }, te({
-      initials: I(() => [
-        g(u(s.value), 1)
+      initials: B(() => [
+        $(u(s.value), 1)
       ]),
-      datePrefix: I(() => [
-        g("am")
+      datePrefix: B(() => [
+        $("am")
       ]),
-      author: I(() => [
-        g(u(o.author), 1)
+      author: B(() => [
+        $(u(o.author), 1)
       ]),
-      headline: I(() => [
-        g(u(o.headline), 1)
+      headline: B(() => [
+        $(u(o.headline), 1)
       ]),
-      text: I(() => [
-        g(u(o.text), 1)
+      text: B(() => [
+        $(u(o.text), 1)
       ]),
       _: 2
     }, [
       o.date ? {
         name: "date",
-        fn: I(() => [
-          g(u(o.date), 1)
+        fn: B(() => [
+          $(u(o.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Qe = ["checked"], Ye = { class: "m-label m-checkboxes__label" }, Ze = /* @__PURE__ */ v({
+}), Qe = ["checked"], Ye = { class: "m-label m-checkboxes__label" }, Ze = /* @__PURE__ */ h({
   __name: "MucCheckbox",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ C({
     label: {}
   }, {
     modelValue: { type: Boolean, default: !1 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["click"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ C(["click"], ["update:modelValue"]),
   setup(a, { emit: t }) {
     const s = T(a, "modelValue"), o = t, i = () => {
       s.value = !s.value, o("click");
@@ -378,7 +378,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
         name: "checkbox",
         type: "checkbox",
         checked: s.value,
-        onClick: U(i, ["stop"])
+        onClick: W(i, ["stop"])
       }, null, 8, Qe),
       e("label", Ye, u(l.label), 1)
     ]));
@@ -386,7 +386,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
 }), 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({
+}, ct = ["href"], it = /* @__PURE__ */ h({
   __name: "MucCheckboxGroup",
   props: {
     heading: {}
@@ -402,17 +402,17 @@ const ie = ["href"], B = /* @__PURE__ */ v({
           _(l.$slots, "checkboxes"),
           l.$slots.collapsableCheckboxes ? (n(), c("div", {
             key: 0,
-            class: y(["m-checkboxes__collapse__container", s.value])
+            class: b(["m-checkboxes__collapse__container", s.value])
           }, [
             _(l.$slots, "collapsableCheckboxes")
-          ], 2)) : $("", !0),
+          ], 2)) : g("", !0),
           l.$slots.collapsableCheckboxes ? (n(), j(k(D), {
             key: 1,
             variant: "ghost",
             onClick: i,
             "aria-expanded": !t.value
           }, {
-            default: I(() => [
+            default: B(() => [
               nt,
               (n(), c("svg", lt, [
                 e("use", {
@@ -421,7 +421,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
               ]))
             ]),
             _: 1
-          }, 8, ["aria-expanded"])) : $("", !0)
+          }, 8, ["aria-expanded"])) : g("", !0)
         ])
       ])
     ]));
@@ -430,7 +430,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
   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({
+}, ut = { class: "m-error-list__title" }, dt = { class: "m-error-list__body" }, _t = { class: "m-list m-error-list__list" }, mt = /* @__PURE__ */ h({
   __name: "MucErrorList",
   props: {
     title: {},
@@ -461,7 +461,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
 }, vt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), ft = {
   id: "text-input-error",
   class: "m-error-message"
-}, $t = { class: "m-input-wrapper m-autocomplete" }, gt = {
+}, gt = { class: "m-input-wrapper m-autocomplete" }, $t = {
   key: 0,
   class: "m-input__prefix"
 }, bt = ["type", "aria-describedby", "placeholder", "required"], yt = {
@@ -473,9 +473,9 @@ const ie = ["href"], B = /* @__PURE__ */ v({
 }, Ct = ["xlink:href"], wt = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), St = {
   class: "m-hint",
   id: "text-input-hint"
-}, It = /* @__PURE__ */ v({
+}, It = /* @__PURE__ */ h({
   __name: "MucInput",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ C({
     errorMsg: {},
     placeholder: {},
     required: { type: Boolean, default: !1 },
@@ -488,53 +488,53 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["suffixClick"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ C(["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(() => {
+    const s = T(a, "modelValue"), o = a, i = N(), l = t, m = r(() => o.errorMsg ? "has-error" : ""), f = r(() => o.type === "search"), v = r(() => {
       if (s.value === "") return [];
       const d = s.value.toLowerCase();
       return o.datalist.filter(
-        (w) => w.toLowerCase().startsWith(d) && w.toLowerCase() !== d
+        (S) => S.toLowerCase().startsWith(d) && S.toLowerCase() !== d
       );
-    }), C = (d) => s.value = d, b = () => l("suffixClick");
-    return (d, w) => (n(), c("div", {
-      class: y(["m-form-group", m.value])
+    }), w = (d) => s.value = d, y = () => l("suffixClick");
+    return (d, S) => (n(), c("div", {
+      class: b(["m-form-group", m.value])
     }, [
       e("label", pt, [
-        g(u(d.label) + " ", 1),
+        $(u(d.label) + " ", 1),
         d.required ? (n(), c("span", ht, [
-          g(" * "),
+          $(" * "),
           vt
-        ])) : $("", !0)
+        ])) : g("", !0)
       ]),
       e("p", ft, u(d.errorMsg), 1),
-      e("div", $t, [
-        i.prefix ? (n(), c("div", gt, [
+      e("div", gt, [
+        i.prefix ? (n(), c("div", $t, [
           e("span", null, [
             _(d.$slots, "prefix")
           ])
-        ])) : $("", !0),
+        ])) : g("", !0),
         z(e("input", {
           class: "m-input autocomplete-input",
           type: d.type,
-          "onUpdate:modelValue": w[0] || (w[0] = (S) => s.value = S),
+          "onUpdate:modelValue": S[0] || (S[0] = (I) => s.value = I),
           "aria-describedby": d.type + "-input",
           placeholder: d.placeholder,
           required: d.required
         }, null, 8, bt), [
           [se, s.value]
         ]),
-        f.value && h.value.length !== 0 ? (n(), c("ul", yt, [
-          (n(!0), c(E, null, L(h.value, (S) => (n(), c("li", {
+        f.value && v.value.length !== 0 ? (n(), c("ul", yt, [
+          (n(!0), c(E, null, L(v.value, (I) => (n(), c("li", {
             class: "autocomplete-result",
-            key: S,
-            onClick: (G) => C(S)
-          }, u(S), 9, kt))), 128))
-        ])) : $("", !0),
+            key: I,
+            onClick: (G) => w(I)
+          }, u(I), 9, kt))), 128))
+        ])) : g("", !0),
         d.suffixIcon ? (n(), c("button", {
           key: 2,
           class: "m-input__suffix",
-          onClick: b
+          onClick: y
         }, [
           (n(), c("svg", Mt, [
             e("use", {
@@ -542,7 +542,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
             }, null, 8, Ct)
           ])),
           wt
-        ])) : $("", !0)
+        ])) : g("", !0)
       ]),
       e("p", St, u(d.hint), 1)
     ], 2));
@@ -550,7 +550,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
 }), K = Symbol("mucRadioGroup"), Bt = {
   key: 0,
   class: "m-radios__item"
-}, xt = ["checked", "disabled"], Vt = { class: "m-hint" }, At = /* @__PURE__ */ v({
+}, Vt = ["checked", "disabled"], xt = { class: "m-hint" }, At = /* @__PURE__ */ h({
   __name: "MucRadioButton",
   props: {
     value: {},
@@ -560,33 +560,33 @@ const ie = ["href"], B = /* @__PURE__ */ v({
   },
   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, [
+    return (f, v) => 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),
+        onClick: W(o, ["stop"])
+      }, null, 8, Vt),
       e("label", {
         class: "m-label m-radios__label",
         onClick: o
       }, [
-        g(u(f.label) + " ", 1),
-        e("span", Vt, u(f.hint), 1)
+        $(u(f.label) + " ", 1),
+        e("span", xt, u(f.hint), 1)
       ])
-    ])) : $("", !0);
+    ])) : g("", !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({
+}), 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({
   __name: "MucRadioButtonGroup",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ C({
     heading: {},
     disabled: { type: Boolean, default: !1 }
   }, {
     modelValue: { type: [Boolean, String, Array, Object, Number, null] },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["change"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ C(["change"], ["update:modelValue"]),
   setup(a, { emit: t }) {
     const s = T(a, "modelValue"), o = a, i = t;
     return ae(K, {
@@ -606,20 +606,20 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), 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", {
+}), 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", {
   "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 = [
+], -1)), Ut = /* @__PURE__ */ X(() => /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)), Nt = [
   Ht,
-  Nt
-], Ut = ["onMouseenter", "onClick"], zt = {
+  Ut
+], Wt = ["onMouseenter", "onClick"], zt = {
   key: 0,
   class: "m-hint"
-}, Dt = /* @__PURE__ */ v({
+}, Dt = /* @__PURE__ */ h({
   __name: "MucSelect",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ C({
     items: {},
     label: {},
     hint: {},
@@ -635,12 +635,12 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     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) => {
+      o.value = p, l.multiple ? w(p) : v(p), l.multiple || (s.value = !1);
+    }, v = (p) => {
       typeof t.value == "object" && (t.value = t.value.join(" ")), t.value = t.value === p ? "" : p;
-    }, C = (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];
-    }, 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(
+    }, 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(
       () => s.value ? "display-listbox" : ""
     ), J = r(
       () => l.multiple ? "m-input-wrapper--multiselect multiselect" : "m-input-wrapper--select"
@@ -648,44 +648,44 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     return (p, P) => (n(), c("div", Gt, [
       e("label", Pt, u(p.label), 1),
       e("div", {
-        class: y(["m-input-wrapper", J.value])
+        class: b(["m-input-wrapper", J.value])
       }, [
         e("input", {
           type: "text",
           class: "m-input m-combobox m-combobox--single",
-          value: b.value,
+          value: y.value,
           onClick: m,
           readonly: ""
         }, null, 8, qt),
         e("span", {
           class: "m-input__trigger",
           onClick: m
-        }, Wt),
+        }, Nt),
         e("ul", {
-          class: y(["listbox", G.value]),
-          onMouseleave: S
+          class: b(["listbox", G.value]),
+          onMouseleave: I
         }, [
-          (n(!0), c(E, null, L(l.items, (V, Q) => (n(), c("li", {
+          (n(!0), c(E, null, L(l.items, (x, 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))
+            class: b(["option", [d(x), S(x)]]),
+            onMouseenter: (Y) => i.value = x,
+            onClick: (Y) => f(x)
+          }, u(x), 43, Wt))), 128))
         ], 34)
       ], 2),
-      p.hint ? (n(), c("p", zt, u(p.hint), 1)) : $("", !0)
+      p.hint ? (n(), c("p", zt, u(p.hint), 1)) : g("", !0)
     ]));
   }
-}), Ft = /* @__PURE__ */ x(Dt, [["__scopeId", "data-v-d28d341e"]]), Kt = { class: "m-form-group has-error" }, Xt = {
+}), Ft = /* @__PURE__ */ V(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({
+}, 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({
   __name: "MucTextArea",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ C({
     errorMsg: {},
     rows: { default: 3 },
     placeholder: {},
@@ -701,11 +701,11 @@ const ie = ["href"], B = /* @__PURE__ */ v({
     const t = T(a, "modelValue");
     return (s, o) => (n(), c("div", Kt, [
       e("label", Xt, [
-        g(u(s.label) + " ", 1),
+        $(u(s.label) + " ", 1),
         s.required ? (n(), c("span", Jt, [
-          g(" * "),
+          $(" * "),
           Qt
-        ])) : $("", !0)
+        ])) : g("", !0)
       ]),
       e("p", Yt, u(s.errorMsg), 1),
       e("div", Zt, [
@@ -731,7 +731,7 @@ const ie = ["href"], B = /* @__PURE__ */ v({
 }, cs = { class: "m-intro-vertical__title" }, is = {
   key: 0,
   class: "muc-divider"
-}, rs = { class: "m-intro-vertical__content" }, us = { style: { "padding-bottom": "32px" } }, ds = /* @__PURE__ */ v({
+}, rs = { class: "m-intro-vertical__content" }, us = { style: { "padding-bottom": "32px" } }, ds = /* @__PURE__ */ h({
   __name: "MucIntro",
   props: {
     title: {},
@@ -743,10 +743,10 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       e("div", as, [
         e("div", ns, [
           e("div", null, [
-            t.tagline ? (n(), c("p", ls, u(t.tagline), 1)) : $("", !0),
+            t.tagline ? (n(), c("p", ls, u(t.tagline), 1)) : g("", !0),
             e("h1", cs, u(t.title), 1)
           ]),
-          t.divider ? (n(), c("div", is)) : $("", !0),
+          t.divider ? (n(), c("div", is)) : g("", !0),
           e("div", rs, [
             e("p", us, [
               _(t.$slots, "default", {}, void 0, !0)
@@ -756,48 +756,78 @@ const ie = ["href"], B = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), _s = /* @__PURE__ */ x(ds, [["__scopeId", "data-v-9ad3adc7"]]), q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), _s = /* @__PURE__ */ V(ds, [["__scopeId", "data-v-9ad3adc7"]]), ms = ["href", "target"], ps = /* @__PURE__ */ h({
+  __name: "MucLink",
+  props: {
+    label: {},
+    href: { default: "#" },
+    icon: {},
+    target: { default: "_blank" },
+    noUnderline: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const t = a, s = r(
+      () => t.noUnderline ? "m-link--reversed-underline" : ""
+    );
+    return (o, i) => (n(), c("a", {
+      href: o.href,
+      target: o.target,
+      class: b(["m-link", s.value])
+    }, [
+      $(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)
+      ])
+    ], 10, ms));
+  }
+}), q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   MucBanner: _e,
   MucButton: D,
   MucCallout: ke,
-  MucCard: xe,
+  MucCard: Ve,
   MucCardContainer: Re,
   MucCheckbox: Ze,
   MucCheckboxGroup: it,
   MucComment: F,
   MucCommentText: Je,
   MucErrorList: mt,
-  MucIcon: B,
+  MucIcon: M,
   MucInput: It,
   MucIntro: _s,
+  MucLink: ps,
   MucRadioButton: At,
   MucRadioButtonGroup: jt,
   MucSelect: Ft,
   MucTextArea: ss
 }, Symbol.toStringTag, { value: "Module" }));
-function ms(a) {
+function hs(a) {
   for (const t in q)
     a.component(t, q[t]);
 }
-const hs = { install: ms };
+const fs = { install: hs };
 export {
   _e as MucBanner,
   D as MucButton,
   ke as MucCallout,
-  xe as MucCard,
+  Ve as MucCard,
   Re as MucCardContainer,
   Ze as MucCheckbox,
   it as MucCheckboxGroup,
   F as MucComment,
   Je as MucCommentText,
   mt as MucErrorList,
-  B as MucIcon,
+  M as MucIcon,
   It as MucInput,
   _s as MucIntro,
+  ps as MucLink,
   At as MucRadioButton,
   jt as MucRadioButtonGroup,
   Ft as MucSelect,
   ss as MucTextArea,
-  hs as default
+  fs 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",
+  "version": "1.13.0-beta.1",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Link/MucLink.stories.ts

@@ -0,0 +1,36 @@
+import { fn } from "@storybook/test";
+
+import MucLink from "./MucLink.vue";
+
+export default {
+  component: MucLink,
+  title: "MucLink",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-link\` component is a wrapper commponent for a standard html-a tag.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-links)
+`,
+      },
+    },
+  },
+};
+
+export const Weather = {
+  args: {
+    label: "Generic link label",
+  },
+};
+
+export const LinkWithIcon = {
+  args: {
+    icon: "youtube",
+    label: "youtube",
+    href: "https://www.youtube.com",
+    noUnderline: true,
+  },
+};

package/src/components/Link/MucLink.vue

@@ -0,0 +1,74 @@
+<template>
+  <a
+    :href="href"
+    :target="target"
+    class="m-link"
+    :class="reversedUnderlineClass"
+  >
+    {{ label }}
+    <slot name="icon">
+      <muc-icon
+        v-if="icon"
+        :icon="icon"
+        class="icon icon--after"
+      />
+    </slot>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { MucIcon } from "../Icon";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Text shown as the link
+     */
+    label: string;
+
+    /**
+     * href to link to
+     */
+    href?: string;
+
+    /**
+     * Optional icon displayed behind the text
+     */
+    icon?: string;
+
+    /**
+     * Target on the link
+     */
+    target?: string;
+
+    /**
+     * Removes the underline from the label text
+     */
+    noUnderline?: boolean;
+  }>(),
+  {
+    noUnderline: false,
+    href: "#",
+    target: "_blank",
+  }
+);
+
+defineSlots<{
+  /**
+   * Icon slots overrides chosen prop icon.
+   * The icon can be displayed infront or behind the label with these classes: icon--after | icon--before
+   */
+  icon(): void;
+}>();
+
+/**
+ * Computed class to remove the underline if chosen.
+ */
+const reversedUnderlineClass = computed(() =>
+  props.noUnderline ? "m-link--reversed-underline" : ""
+);
+</script>
+
+<style scoped></style>

package/src/components/Link/index.ts

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

package/src/components/index.ts

@@ -15,6 +15,7 @@ import {
 } from "./Form";
 import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
+import { MucLink } from "./Link";
 
 export {
   MucButton,
@@ -34,4 +35,5 @@ export {
   MucSelect,
   MucErrorList,
   MucIcon,
+  MucLink,
 };