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

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

@@ -1,12 +1,30 @@
-import { defineComponent as m, computed as l, openBlock as o, createElementBlock as r, createElementVNode as t, normalizeClass as k, renderSlot as c, createCommentVNode as g, toDisplayString as _, pushScopeId as E, popScopeId as A, useSlots as B, createTextVNode as p, Fragment as M, renderList as S, createBlock as O, unref as R, createSlots as T, withCtx as f, normalizeStyle as L } from "vue";
-const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class: "icon" }, j = ["href"], N = /* @__PURE__ */ m({
+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";
+const U = ["href"], b = /* @__PURE__ */ v({
+  __name: "MucIcon",
+  props: {
+    icon: {},
+    color: {}
+  },
+  setup(o) {
+    const t = P(), n = c(() => t.class ?? "icon");
+    return (s, l) => (a(), r("svg", {
+      "aria-hidden": "true",
+      class: k(n.value),
+      style: H({ color: s.color })
+    }, [
+      e("use", {
+        href: "#icon-" + s.icon
+      }, null, 8, U)
+    ], 6));
+  }
+}), X = ["role", "aria-label"], G = { class: "container-fluid" }, J = /* @__PURE__ */ v({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
   },
-  setup(a) {
-    const e = a, s = l(() => {
-      switch (e.type) {
+  setup(o) {
+    const t = o, n = c(() => {
+      switch (t.type) {
         case "info":
           return "m-banner--info";
         case "success":
@@ -18,8 +36,8 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "m-banner--info";
       }
-    }), n = l(() => {
-      switch (e.type) {
+    }), s = c(() => {
+      switch (t.type) {
         case "info":
           return "dialog";
         case "success":
@@ -31,8 +49,8 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "dialog";
       }
-    }), u = l(() => {
-      switch (e.type) {
+    }), l = c(() => {
+      switch (t.type) {
         case "info":
           return "Information";
         case "success":
@@ -44,45 +62,39 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "Information";
       }
-    }), d = l(() => {
-      switch (e.type) {
+    }), _ = c(() => {
+      switch (t.type) {
         case "success":
-          return "#icon-check";
+          return "check";
         case "warning":
         case "emergency":
-          return "#icon-warning";
+          return "warning";
         case "info":
         default:
-          return "#icon-information";
+          return "information";
       }
     });
-    return (h, i) => (o(), r("div", null, [
-      t("div", null, [
-        t("div", {
-          class: k(["m-banner", s.value]),
-          role: n.value,
-          "aria-label": u.value
+    return (p, i) => (a(), r("div", null, [
+      e("div", null, [
+        e("div", {
+          class: k(["m-banner", n.value]),
+          role: s.value,
+          "aria-label": l.value
         }, [
-          t("div", D, [
-            (o(), r("svg", H, [
-              t("use", { href: d.value }, null, 8, j)
-            ])),
-            c(h.$slots, "default", {}, void 0, !0)
+          e("div", G, [
+            S($(b), { icon: _.value }, null, 8, ["icon"]),
+            d(p.$slots, "default", {}, void 0, !0)
           ])
-        ], 10, P)
+        ], 10, X)
       ])
     ]));
   }
-}), $ = (a, e) => {
-  const s = a.__vccOpts || a;
-  for (const [n, u] of e)
-    s[n] = u;
-  return s;
-}, V = /* @__PURE__ */ $(N, [["__scopeId", "data-v-ac0adeb7"]]), W = ["disabled"], z = {
-  key: 0,
-  "aria-hidden": "true",
-  class: "m-button__icon"
-}, F = ["xlink:href"], U = /* @__PURE__ */ m({
+}), 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({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -91,9 +103,9 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
     iconAnimated: { type: Boolean, default: !1 }
   },
   emits: ["click"],
-  setup(a, { emit: e }) {
-    const s = a, n = e, u = l(() => {
-      switch (s.variant) {
+  setup(o, { emit: t }) {
+    const n = o, s = t, l = c(() => {
+      switch (n.variant) {
         case "secondary":
           return "m-button--secondary";
         case "ghost":
@@ -101,37 +113,34 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "m-button--primary";
       }
-    }), d = l(
-      () => s.iconAnimated ? "m-button--animated-right" : ""
-    ), h = () => {
-      n("click");
+    }), _ = c(
+      () => n.iconAnimated ? "m-button--animated-right" : ""
+    ), p = () => {
+      s("click");
     };
-    return (i, y) => (o(), r("button", {
-      onClick: h,
+    return (i, y) => (a(), r("button", {
+      onClick: p,
       disabled: i.disabled,
-      class: k(["m-button", [u.value, d.value]])
+      class: k(["m-button", [l.value, _.value]])
     }, [
-      t("span", null, [
-        c(i.$slots, "default"),
-        i.icon ? (o(), r("svg", z, [
-          t("use", {
-            "xlink:href": "#icon-" + i.icon
-          }, null, 8, F)
-        ])) : g("", !0)
+      e("span", null, [
+        d(i.$slots, "default"),
+        i.icon ? (a(), R($(b), {
+          key: 0,
+          icon: i.icon,
+          class: "m-button__icon"
+        }, null, 8, ["icon"])) : f("", !0)
       ])
-    ], 10, W));
+    ], 10, Q));
   }
-}), x = ["aria-label"], X = { class: "m-callout__inner" }, q = { class: "m-callout__icon" }, G = {
-  "aria-hidden": "true",
-  class: "icon"
-}, J = ["xlink:href"], K = { class: "m-callout__body" }, Q = { class: "m-callout__body__inner" }, Y = { class: "m-callout__headline" }, Z = { class: "m-callout__content" }, tt = /* @__PURE__ */ m({
+}), 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({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
-  setup(a) {
-    const e = a, s = l(() => {
-      switch (e.type) {
+  setup(o) {
+    const t = o, n = c(() => {
+      switch (t.type) {
         case "error":
           return "warning";
         case "success":
@@ -139,8 +148,8 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "information";
       }
-    }), n = l(() => {
-      switch (e.type) {
+    }), s = c(() => {
+      switch (t.type) {
         case "error":
           return "m-callout--error";
         case "warning":
@@ -150,8 +159,8 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
         default:
           return "m-callout--default";
       }
-    }), u = l(() => {
-      switch (e.type) {
+    }), l = c(() => {
+      switch (t.type) {
         case "success":
           return "Erfolgreich";
         case "warning":
@@ -162,165 +171,146 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
           return "Information";
       }
     });
-    return (d, h) => (o(), r("div", {
-      class: k(["m-callout", n.value]),
-      "aria-label": u.value
+    return (_, p) => (a(), r("div", {
+      class: k(["m-callout", s.value]),
+      "aria-label": l.value
     }, [
-      t("div", X, [
-        t("div", q, [
-          c(d.$slots, "icon", {}, () => [
-            (o(), r("svg", G, [
-              t("use", {
-                "xlink:href": `#icon-${s.value}`
-              }, null, 8, J)
-            ]))
+      e("div", x, [
+        e("div", ee, [
+          d(_.$slots, "icon", {}, () => [
+            S($(b), { icon: n.value }, null, 8, ["icon"])
           ], !0)
         ]),
-        t("div", K, [
-          t("div", Q, [
-            t("div", Y, [
-              c(d.$slots, "header", {}, void 0, !0)
+        e("div", te, [
+          e("div", se, [
+            e("div", ne, [
+              d(_.$slots, "header", {}, void 0, !0)
             ]),
-            t("div", Z, [
-              t("p", null, [
-                c(d.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+            e("div", ae, [
+              e("p", null, [
+                d(_.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
         ])
       ])
-    ], 10, x));
+    ], 10, Z));
   }
-}), et = /* @__PURE__ */ $(tt, [["__scopeId", "data-v-efad4956"]]), nt = (a) => (E("data-v-acf0a1dd"), a = a(), A(), a), st = { class: "card-content" }, at = { class: "card-header" }, ot = {
+}), 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 = {
   key: 0,
   class: "card-tagline"
-}, rt = /* @__PURE__ */ nt(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), it = /* @__PURE__ */ m({
+}, de = /* @__PURE__ */ ie(() => /* @__PURE__ */ e("div", { class: "muc-divider" }, null, -1)), me = /* @__PURE__ */ v({
   __name: "MucCard",
   props: {
     title: {},
     tagline: {}
   },
   emits: ["click"],
-  setup(a, { emit: e }) {
-    const s = e;
-    return (n, u) => (o(), r("div", {
+  setup(o, { emit: t }) {
+    const n = t;
+    return (s, l) => (a(), r("div", {
       class: "card",
-      onClick: u[0] || (u[0] = (d) => s("click", d))
+      onClick: l[0] || (l[0] = (_) => n("click", _))
     }, [
-      t("div", st, [
-        t("div", at, [
-          c(n.$slots, "headerPrefix", {}, void 0, !0),
-          t("div", null, [
-            n.tagline ? (o(), r("div", ot, _(n.tagline), 1)) : g("", !0),
-            t("div", null, [
-              t("h3", null, _(n.title), 1)
+      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),
+            e("div", null, [
+              e("h3", null, m(s.title), 1)
             ])
           ])
         ]),
-        rt,
-        c(n.$slots, "content", {}, void 0, !0)
+        de,
+        d(s.$slots, "content", {}, void 0, !0)
       ])
     ]));
   }
-}), ct = /* @__PURE__ */ $(it, [["__scopeId", "data-v-acf0a1dd"]]), lt = { class: "container card-container" }, ut = /* @__PURE__ */ m({
+}), _e = /* @__PURE__ */ I(me, [["__scopeId", "data-v-acf0a1dd"]]), pe = { class: "container card-container" }, he = /* @__PURE__ */ v({
   __name: "MucCardContainer",
-  setup(a) {
-    return (e, s) => (o(), r("div", lt, [
-      c(e.$slots, "default", {}, void 0, !0)
+  setup(o) {
+    return (t, n) => (a(), r("div", pe, [
+      d(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), dt = /* @__PURE__ */ $(ut, [["__scopeId", "data-v-6740df8f"]]), _t = { class: "m-comment__head" }, mt = { class: "m-comment__initials" }, ht = { class: "m-comment__info" }, pt = { class: "m-comment__author" }, vt = { key: 0 }, ft = { class: "m-comment__author" }, gt = { class: "m-comment__date" }, $t = ["aria-label"], yt = /* @__PURE__ */ t("svg", {
-  "aria-hidden": "true",
-  class: "icon"
-}, [
-  /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
-], -1), bt = [
-  yt
-], kt = {
+}), 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 = {
   key: 0,
   class: "m-star-rating__item m-star-rating__item--half"
-}, Ct = /* @__PURE__ */ t("svg", {
-  "aria-hidden": "true",
-  class: "icon"
-}, [
-  /* @__PURE__ */ t("use", { "xlink:href": "#icon-half-star" })
-], -1), Mt = [
-  Ct
-], St = /* @__PURE__ */ t("svg", {
-  "aria-hidden": "true",
-  class: "icon"
-}, [
-  /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
-], -1), wt = [
-  St
-], It = { class: "m-star-rating__numeric" }, Et = { class: "m-comment__body" }, At = { class: "m-comment__headline" }, Bt = { class: "m-comment__text" }, Ot = "de-DE", Rt = 0.2, Tt = 0.8, b = 5, I = /* @__PURE__ */ m({
+}, 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({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
-  setup(a) {
-    const e = B(), s = a, n = l(() => !!e.date), u = l(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), d = l(() => s.rating.toLocaleString(Ot.valueOf(), {
+  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(), {
       minimumFractionDigits: 1
-    })), h = l(() => {
-      const i = +(s.rating % 1).toFixed(1);
-      let y = Math.min(Math.floor(s.rating), b), v = Math.floor(b - s.rating), C = !1;
-      return s.rating !== 0 && s.rating !== b && (i <= Rt ? v++ : i >= Tt ? y++ : C = !0), {
+    })), 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: v,
-        isHalfStar: C
+        emptyStars: g,
+        isHalfStar: E
       };
     });
-    return (i, y) => (o(), r("div", {
-      class: k(["m-comment", u.value])
+    return (i, y) => (a(), r("div", {
+      class: k(["m-comment", l.value])
     }, [
-      t("div", _t, [
-        t("div", mt, [
-          c(i.$slots, "initials")
+      e("div", ve, [
+        e("div", ge, [
+          d(i.$slots, "initials")
         ]),
-        t("div", ht, [
-          t("span", pt, [
-            c(i.$slots, "author")
+        e("div", ye, [
+          e("span", $e, [
+            d(i.$slots, "author")
           ]),
-          n.value ? (o(), r("span", vt, [
-            t("span", ft, [
-              p(" "),
-              c(i.$slots, "datePrefix")
+          s.value ? (a(), r("span", be, [
+            e("span", Ce, [
+              h("  "),
+              d(i.$slots, "datePrefix")
             ]),
-            t("span", gt, [
-              p(" "),
-              c(i.$slots, "date")
+            e("span", ke, [
+              h(" "),
+              d(i.$slots, "date")
             ])
-          ])) : g("", !0),
-          t("div", {
+          ])) : f("", !0),
+          e("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${i.rating} von ${b} Sternen`
+            "aria-label": `Bewertung: ${i.rating} von ${A} Sternen`
           }, [
-            (o(!0), r(M, null, S(h.value.fullStars, (v) => (o(), r("div", {
-              key: v,
+            (a(!0), r(B, null, L(p.value.fullStars, (g) => (a(), r("div", {
+              key: g,
               class: "m-star-rating__item m-star-rating__item--full"
-            }, bt))), 128)),
-            h.value.isHalfStar ? (o(), r("div", kt, Mt)) : g("", !0),
-            (o(!0), r(M, null, S(h.value.emptyStars, (v) => (o(), r("div", {
-              key: v,
+            }, [
+              S($(b), { icon: "solid-star" })
+            ]))), 128)),
+            p.value.isHalfStar ? (a(), r("div", we, [
+              S($(b), { icon: "half-star" })
+            ])) : f("", !0),
+            (a(!0), r(B, null, L(p.value.emptyStars, (g) => (a(), r("div", {
+              key: g,
               class: "m-star-rating__item"
-            }, wt))), 128)),
-            t("div", It, _(d.value), 1)
-          ], 8, $t)
+            }, [
+              S($(b), { icon: "solid-star" })
+            ]))), 128)),
+            e("div", Se, m(_.value), 1)
+          ], 8, Me)
         ])
       ]),
-      t("div", Et, [
-        t("div", At, [
-          c(i.$slots, "headline")
+      e("div", Ie, [
+        e("div", Ee, [
+          d(i.$slots, "headline")
         ]),
-        t("div", Bt, [
-          c(i.$slots, "text")
+        e("div", Ae, [
+          d(i.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Lt = " ", Pt = /* @__PURE__ */ m({
+}), Ve = " ", Re = /* @__PURE__ */ v({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -332,115 +322,196 @@ const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = { class:
     rating: {},
     variant: { default: "listing" }
   },
-  setup(a) {
-    const e = a, s = l(() => ((e.initials ?? e.author.split(Lt).map((n) => n.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
-    return (n, u) => (o(), O(R(I), {
-      rating: n.rating,
-      variant: n.variant
-    }, T({
-      initials: f(() => [
-        p(_(s.value), 1)
+  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), {
+      rating: s.rating,
+      variant: s.variant
+    }, N({
+      initials: C(() => [
+        h(m(n.value), 1)
       ]),
-      datePrefix: f(() => [
-        p("am")
+      datePrefix: C(() => [
+        h("am")
       ]),
-      author: f(() => [
-        p(_(n.author), 1)
+      author: C(() => [
+        h(m(s.author), 1)
       ]),
-      headline: f(() => [
-        p(_(n.headline), 1)
+      headline: C(() => [
+        h(m(s.headline), 1)
       ]),
-      text: f(() => [
-        p(_(n.text), 1)
+      text: C(() => [
+        h(m(s.text), 1)
       ]),
       _: 2
     }, [
-      n.date ? {
+      s.date ? {
         name: "date",
-        fn: f(() => [
-          p(_(n.date), 1)
+        fn: C(() => [
+          h(m(s.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Dt = ["href"], Ht = /* @__PURE__ */ m({
-  __name: "MucIcon",
-  props: {
-    icon: {},
-    color: {}
-  },
-  setup(a) {
-    return (e, s) => (o(), r("svg", {
-      "aria-hidden": "true",
-      class: "m-button__icon",
-      style: L({ color: e.color })
+}), Te = {
+  for: "search-input",
+  class: "m-label"
+}, De = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, Pe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "(erforderlich)", -1), He = {
+  id: "text-input-error",
+  class: "m-error-message"
+}, qe = { class: "m-input-wrapper m-autocomplete" }, Fe = {
+  key: 0,
+  class: "m-input__prefix"
+}, Ne = ["type", "aria-describedby", "placeholder", "required"], We = {
+  key: 1,
+  class: "autocomplete-result-list autocomplete-result-list--location"
+}, je = ["onClick"], ze = {
+  "aria-hidden": "true",
+  class: "icon"
+}, Ue = ["xlink:href"], Xe = /* @__PURE__ */ e("span", { class: "visually-hidden" }, "Suchen", -1), Ge = {
+  class: "m-hint",
+  id: "text-input-hint"
+}, Je = /* @__PURE__ */ v({
+  __name: "MucInput",
+  props: /* @__PURE__ */ O({
+    errorMsg: {},
+    placeholder: {},
+    required: { type: Boolean, default: !1 },
+    label: {},
+    hint: {},
+    type: { default: "text" },
+    datalist: {},
+    suffixIcon: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  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();
+      return s.datalist.filter(
+        (M) => M.toLowerCase().startsWith(u) && M.toLowerCase() !== u
+      );
+    }), g = (u) => n.value = u, E = () => _("suffixClick");
+    return (u, M) => (a(), r("div", {
+      class: k(["m-form-group", p.value])
     }, [
-      t("use", {
-        href: "#icon-" + e.icon
-      }, null, 8, Dt)
-    ], 4));
+      e("label", Te, [
+        h(m(u.label) + " ", 1),
+        u.required ? (a(), r("span", De, [
+          h(" * "),
+          Pe
+        ])) : f("", !0)
+      ]),
+      e("p", He, m(u.errorMsg), 1),
+      e("div", qe, [
+        l.prefix ? (a(), r("div", Fe, [
+          e("span", null, [
+            d(u.$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
+        }, null, 8, Ne), [
+          [z, n.value]
+        ]),
+        i.value && y.value.length !== 0 ? (a(), r("ul", We, [
+          (a(!0), r(B, null, L(y.value, (w) => (a(), r("li", {
+            class: "autocomplete-result",
+            key: w,
+            onClick: (rt) => g(w)
+          }, m(w), 9, je))), 128))
+        ])) : f("", !0),
+        u.suffixIcon ? (a(), r("button", {
+          key: 2,
+          class: "m-input__suffix",
+          onClick: E
+        }, [
+          (a(), r("svg", ze, [
+            e("use", {
+              "xlink:href": "#icon-" + u.suffixIcon
+            }, null, 8, Ue)
+          ])),
+          Xe
+        ])) : f("", !0)
+      ]),
+      e("p", Ge, m(u.hint), 1)
+    ], 2));
   }
-}), jt = {
+}), Ke = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, Nt = { class: "container" }, Vt = { style: { width: "66.6%" } }, Wt = {
+}, Qe = { class: "container" }, Ye = { style: { width: "66.6%" } }, Ze = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, zt = { class: "m-intro-vertical__title" }, Ft = {
+}, xe = { class: "m-intro-vertical__title" }, et = {
   key: 0,
   class: "muc-divider"
-}, Ut = { class: "m-intro-vertical__content" }, xt = { style: { "padding-bottom": "32px" } }, Xt = /* @__PURE__ */ m({
+}, tt = { class: "m-intro-vertical__content" }, st = { style: { "padding-bottom": "32px" } }, nt = /* @__PURE__ */ v({
   __name: "MucIntro",
   props: {
     title: {},
     tagline: {},
     divider: { type: Boolean }
   },
-  setup(a) {
-    return (e, s) => (o(), r("div", jt, [
-      t("div", Nt, [
-        t("div", Vt, [
-          t("div", null, [
-            e.tagline ? (o(), r("p", Wt, _(e.tagline), 1)) : g("", !0),
-            t("h1", zt, _(e.title), 1)
+  setup(o) {
+    return (t, n) => (a(), r("div", Ke, [
+      e("div", Qe, [
+        e("div", Ye, [
+          e("div", null, [
+            t.tagline ? (a(), r("p", Ze, m(t.tagline), 1)) : f("", !0),
+            e("h1", xe, m(t.title), 1)
           ]),
-          e.divider ? (o(), r("div", Ft)) : g("", !0),
-          t("div", Ut, [
-            t("p", xt, [
-              c(e.$slots, "default", {}, void 0, !0)
+          t.divider ? (a(), r("div", et)) : f("", !0),
+          e("div", tt, [
+            e("p", st, [
+              d(t.$slots, "default", {}, void 0, !0)
             ])
           ])
         ])
       ])
     ]));
   }
-}), qt = /* @__PURE__ */ $(Xt, [["__scopeId", "data-v-3957c1bd"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), at = /* @__PURE__ */ I(nt, [["__scopeId", "data-v-9ad3adc7"]]), V = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: V,
-  MucButton: U,
-  MucCallout: et,
-  MucCard: ct,
-  MucCardContainer: dt,
-  MucComment: I,
-  MucCommentText: Pt,
-  MucIcon: Ht,
-  MucIntro: qt
+  MucBanner: K,
+  MucButton: Y,
+  MucCallout: re,
+  MucCard: _e,
+  MucCardContainer: fe,
+  MucComment: D,
+  MucCommentText: Re,
+  MucForm: Je,
+  MucIcon: b,
+  MucIntro: at
 }, Symbol.toStringTag, { value: "Module" }));
-function Gt(a) {
-  for (const e in w)
-    a.component(e, w[e]);
+function ot(o) {
+  for (const t in V)
+    o.component(t, V[t]);
 }
-const Kt = { install: Gt };
+const ct = { install: ot };
 export {
-  V as MucBanner,
-  U as MucButton,
-  et as MucCallout,
-  ct as MucCard,
-  dt as MucCardContainer,
-  I as MucComment,
-  Pt as MucCommentText,
-  Ht as MucIcon,
-  qt as MucIntro,
-  Kt as default
+  K as MucBanner,
+  Y as MucButton,
+  re as MucCallout,
+  _e as MucCard,
+  fe as MucCardContainer,
+  D as MucComment,
+  Re as MucCommentText,
+  Je as MucForm,
+  b as MucIcon,
+  at as MucIntro,
+  ct as default
 };