@mirweb/mir-web-components 1.8.2 → 1.8.3

package/dist/mir-web-components.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, computed as q, openBlock as l, createElementBlock as i, normalizeClass as p, toDisplayString as d, createElementVNode as t, renderSlot as c, pushScopeId as H, popScopeId as R, createTextVNode as J, ref as C, resolveDirective as _e, withDirectives as U, Fragment as D, renderList as V, vShow as Z, normalizeProps as O, guardReactiveProps as z, toRefs as Se, mergeProps as M, createVNode as S, Transition as Ie, withCtx as y, withModifiers as he, createBlock as L, createCommentVNode as _, watchEffect as pe, withKeys as Ce, useSlots as qe, normalizeStyle as ee, isRef as x, unref as I, onMounted as me, watch as Q, onUnmounted as Ae } from "vue";
+import { defineComponent as g, computed as q, openBlock as l, createElementBlock as i, normalizeClass as h, toDisplayString as d, createElementVNode as t, renderSlot as c, pushScopeId as H, popScopeId as R, createTextVNode as J, ref as C, resolveDirective as _e, withDirectives as U, Fragment as D, renderList as V, vShow as Z, normalizeProps as O, guardReactiveProps as z, toRefs as Se, mergeProps as M, createVNode as S, Transition as Ie, withCtx as y, withModifiers as he, createBlock as L, createCommentVNode as _, watchEffect as pe, withKeys as Ce, useSlots as qe, normalizeStyle as ee, isRef as x, unref as I, onMounted as me, watch as Q, onUnmounted as Ae } from "vue";
 const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   __name: "button",
   props: {
@@ -16,7 +16,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       previous: "previous"
     }, r = e, s = q(() => a[r.variant]);
     return (o, u) => (l(), i("button", {
-      class: p(["button", "button--" + s.value]),
+      class: h(["button", "button--" + s.value]),
       "aria-label": o.ariaLabel
     }, d(s.value === "close" ? "" : o.buttonText), 11, Le));
   }
@@ -42,7 +42,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       r("input", u.checked);
     };
     return (o, u) => (l(), i("div", {
-      class: p(["checkbox__wrapper", o.disabled ? "disabled" : ""])
+      class: h(["checkbox__wrapper", o.disabled ? "disabled" : ""])
     }, [
       t("input", {
         id: o.id,
@@ -57,7 +57,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       }, null, 40, Ve),
       t("label", {
         for: o.id,
-        class: p(["checkbox__label", o.required ? "required" : ""])
+        class: h(["checkbox__label", o.required ? "required" : ""])
       }, [
         Fe,
         c(o.$slots, "default", {}, void 0, !0)
@@ -107,7 +107,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     const r = {
       primary: "dropdown-dark-bg-primary",
       dark: "dropdown-dark dropdown-dark-bg-dark"
-    }, s = e, o = q(() => r[s.variant]), u = C(null), h = C(null), n = C([]), b = C(0), f = C(""), k = C(!0), w = C(0), ae = a, re = q(() => {
+    }, s = e, o = q(() => r[s.variant]), u = C(null), p = C(null), n = C([]), b = C(0), f = C(""), k = C(!0), w = C(0), ae = a, re = q(() => {
       const m = s.options.find(
         (B) => B.value === s.modelValue
       );
@@ -200,12 +200,12 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         ), Y = n.value[N];
         ce(Y);
       }
-      if (m.setAttribute("aria-selected", "true"), (A = h.value) == null || A.setAttribute(
+      if (m.setAttribute("aria-selected", "true"), (A = p.value) == null || A.setAttribute(
         "aria-activedescendant",
         B || ""
-      ), ne(B || ""), h.value && h.value.scrollHeight > h.value.clientHeight) {
-        const N = h.value.clientHeight + h.value.scrollTop, Y = m.offsetTop + m.offsetHeight;
-        Y > N ? h.value.scrollTop = Y - ((T = h.value) == null ? void 0 : T.clientHeight) : m.offsetTop < h.value.scrollTop && (h.value.scrollTop = m.offsetTop);
+      ), ne(B || ""), p.value && p.value.scrollHeight > p.value.clientHeight) {
+        const N = p.value.clientHeight + p.value.scrollTop, Y = m.offsetTop + m.offsetHeight;
+        Y > N ? p.value.scrollTop = Y - ((T = p.value) == null ? void 0 : T.clientHeight) : m.offsetTop < p.value.scrollTop && (p.value.scrollTop = m.offsetTop);
       }
     }
     function $e() {
@@ -219,7 +219,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     }
     function ue() {
       var m, B;
-      k.value = !1, (m = u.value) == null || m.setAttribute("aria-expanded", "true"), (B = h.value) == null || B.focus();
+      k.value = !1, (m = u.value) == null || m.setAttribute("aria-expanded", "true"), (B = p.value) == null || B.focus();
     }
     function we() {
       s.disabled || (k.value ? ue() : se());
@@ -233,7 +233,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       }, [
         t("label", {
           id: `${m.name}-label`,
-          class: p([{
+          class: h([{
             "listbox__label--visually-hidden": !m.showLabel,
             "is-disabled": m.disabled,
             "is-required": m.required
@@ -248,13 +248,13 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
             type: "button",
             "aria-haspopup": "listbox",
             "aria-disabled": m.disabled,
-            class: p(["listbox__button", o.value]),
+            class: h(["listbox__button", o.value]),
             onClick: we,
             onKeydown: oe
           }, d(m.modelValue ? re.value : m.placeholder), 43, Ue),
           U(t("ul", {
             ref_key: "listboxNode",
-            ref: h,
+            ref: p,
             "aria-labelledby": `${m.name}-label`,
             "aria-activedescendant": m.modelValue,
             tabindex: "0",
@@ -310,7 +310,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       t("span", {
         "aria-label": r.value,
         "label-dark": s.labelDark,
-        class: p(s.labelDark ? "label--dark" : "label--light")
+        class: h(s.labelDark ? "label--dark" : "label--light")
       }, d(s.text), 11, xe)
     ]));
   }
@@ -336,12 +336,12 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       hover: "underline-hover",
       true: "add-underline",
       false: "remove-underline"
-    }, s = e, o = q(() => a[s.linkType]), u = q(() => r[s.underline]), h = q(() => {
+    }, s = e, o = q(() => a[s.linkType]), u = q(() => r[s.underline]), p = q(() => {
       const { ...n } = Se(s);
       return n;
     });
     return (n, b) => (l(), i("div", tt, [
-      t("div", M(h.value, {
+      t("div", M(p.value, {
         class: ["mir-link", [
           o.value,
           n.disabled ? "disabled" : "",
@@ -370,7 +370,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       r("input", u.checked);
     };
     return (o, u) => (l(), i("div", {
-      class: p(["radio__wrapper", o.disabled ? "disabled" : ""])
+      class: h(["radio__wrapper", o.disabled ? "disabled" : ""])
     }, [
       t("input", {
         id: o.id,
@@ -385,7 +385,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       }, null, 40, ot),
       t("label", {
         for: o.id,
-        class: p(["radio__label", o.required ? "required" : ""])
+        class: h(["radio__label", o.required ? "required" : ""])
       }, [
         lt,
         c(o.$slots, "default", {}, void 0, !0)
@@ -408,11 +408,11 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     return (a, r) => (l(), i("div", nt, [
       t("label", {
         for: a.id,
-        class: p([a.required ? "required" : "", a.disabled ? "disabled" : ""])
+        class: h([a.required ? "required" : "", a.disabled ? "disabled" : ""])
       }, d(a.label), 11, dt),
       t("select", {
         id: a.id,
-        class: p(a.disabled ? "disabled" : ""),
+        class: h(a.disabled ? "disabled" : ""),
         disabled: a.disabled,
         name: a.name,
         value: a.modelValue,
@@ -438,22 +438,22 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     const r = e, s = a, o = () => {
       s("update:show", !r.show);
     };
-    return (u, h) => (l(), i("div", pt, [
+    return (u, p) => (l(), i("div", pt, [
       S(Ie, {
         duration: 300,
         name: "nested"
       }, {
         default: y(() => [
           U(t("div", {
-            class: p(["overlay", u.searchBar ? "overlay-search" : "overlay-default"]),
+            class: h(["overlay", u.searchBar ? "overlay-search" : "overlay-default"]),
             ariaLabel: "modal",
             role: "dialog",
             onClick: o
           }, [
             t("div", {
               id: "modal",
-              class: p([u.searchBar ? "search" : ""]),
-              onClick: h[0] || (h[0] = he(() => {
+              class: h([u.searchBar ? "search" : ""]),
+              onClick: p[0] || (p[0] = he(() => {
               }, ["stop"]))
             }, [
               t("div", null, [
@@ -490,7 +490,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const r = e, s = a, o = C(r.modelValue), u = C(), h = C(!1), n = (f, k, w) => (f - k) / (w - k) * 100, b = (f) => {
+    const r = e, s = a, o = C(r.modelValue), u = C(), p = C(!1), n = (f, k, w) => (f - k) / (w - k) * 100, b = (f) => {
       var k;
       (k = u.value) == null || k.style.setProperty("--ProgressPercent", `${f}%`);
     };
@@ -506,22 +506,22 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         t("div", vt, [
           t("label", {
             for: f.id,
-            class: p([f.variant, ""])
+            class: h([f.variant, ""])
           }, d(f.label), 11, gt),
           f.information ? (l(), i("i", {
             key: 0,
             role: "button",
-            class: p([f.variant, "slider__information"]),
+            class: h([f.variant, "slider__information"]),
             "aria-label": f.informationLabel,
             tabindex: "0",
             "aria-haspopup": "dialog",
-            onClick: k[0] || (k[0] = (w) => h.value = !h.value),
-            onKeyup: k[1] || (k[1] = Ce((w) => h.value = !h.value, ["enter"]))
+            onClick: k[0] || (k[0] = (w) => p.value = !p.value),
+            onKeyup: k[1] || (k[1] = Ce((w) => p.value = !p.value, ["enter"]))
           }, null, 42, bt)) : _("", !0)
         ]),
         t("div", yt, [
           t("span", {
-            class: p([f.variant, "slider__minmax"])
+            class: h([f.variant, "slider__minmax"])
           }, d(f.min), 3),
           t("input", {
             id: f.id,
@@ -533,21 +533,21 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
             min: f.min,
             step: f.step,
             max: f.max,
-            class: p(f.variant),
+            class: h(f.variant),
             onInput: k[2] || (k[2] = ({ target: w }) => o.value = parseFloat(w.value))
           }, null, 42, kt),
           t("span", {
-            class: p([f.variant, "slider__minmax"])
+            class: h([f.variant, "slider__minmax"])
           }, d(f.max), 3)
         ]),
         t("span", {
-          class: p([f.variant, "slider__value"])
+          class: h([f.variant, "slider__value"])
         }, d(f.modelValue), 3)
       ]),
       f.information ? (l(), L(ve, {
         key: 0,
-        show: h.value,
-        "onUpdate:show": k[3] || (k[3] = (w) => h.value = w)
+        show: p.value,
+        "onUpdate:show": k[3] || (k[3] = (w) => p.value = w)
       }, {
         default: y(() => [
           t("p", $t, d(f.information), 1)
@@ -573,7 +573,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     return (a, r) => (l(), i("div", St, [
       t("label", {
         for: a.id,
-        class: p({ required: a.required })
+        class: h({ required: a.required })
       }, d(a.labelText) + d(a.required ? " *" : ""), 11, It),
       t("div", {
         id: a.modelValue !== void 0 && a.modelValue.length === a.maxLength ? "textarea-wrapper__inner" : ""
@@ -588,7 +588,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           disabled: a.disabled,
           maxlength: a.maxLength,
           value: a.modelValue,
-          class: p(
+          class: h(
             a.modelValue !== void 0 && a.modelValue.length === a.maxLength ? "reached-meter-limit" : "border"
           ),
           onInput: r[0] || (r[0] = (s) => a.$emit("update:modelValue", s.target.value))
@@ -599,7 +599,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           a.modelValue !== void 0 && a.modelValue.length === a.maxLength ? (l(), i("p", Lt, " Too many characters. Please make it shorter ")) : _("", !0)
         ]),
         t("p", {
-          class: p(
+          class: h(
             a.modelValue !== void 0 && a.modelValue.length === a.maxLength ? "reached-meter-limit-meter" : ""
           )
         }, d(a.maxLength !== void 0 && a.modelValue !== void 0 && a.maxLength - a.modelValue.length >= 0 ? a.modelValue.length : 0) + " / " + d(a.maxLength), 3)
@@ -644,13 +644,13 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       search: "search"
     }, r = e, s = q(() => a[r.type]), o = C(!0), u = q(
       () => o.value ? "showPassword" : "hidePassword"
-    ), h = q(
+    ), p = q(
       () => o.value ? "password" : "text"
     );
     return (n, b) => (l(), i("div", Vt, [
       t("label", {
         for: n.id,
-        class: p([
+        class: h([
           n.required ? "required" : "",
           n.disabled ? "disabled" : "",
           n.search ? "search" : ""
@@ -660,7 +660,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         t("input", {
           id: n.id,
           ref: "passwordField",
-          type: h.value,
+          type: p.value,
           value: n.modelValue,
           placeholder: n.placeholder,
           required: n.required,
@@ -670,7 +670,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         }, null, 40, Mt),
         t("i", {
           role: "button",
-          class: p([u.value]),
+          class: h([u.value]),
           "aria-controls": "password",
           "aria-expanded": !o.value,
           onClick: b[1] || (b[1] = (f) => o.value = !o.value)
@@ -683,7 +683,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         value: n.modelValue,
         placeholder: n.placeholder,
         required: n.required,
-        class: p([
+        class: h([
           n.invalid ? "invalid" : "",
           n.valid ? "valid" : "",
           n.search ? "search" : ""
@@ -722,7 +722,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       resetVideo: () => {
         s.value && (s.value.currentTime = 0, s.value.play());
       }
-    }), (u, h) => (l(), i("div", Kt, [
+    }), (u, p) => (l(), i("div", Kt, [
       u.localVideo ? (l(), i("video", {
         key: 0,
         ref_key: "videoRef",
@@ -833,7 +833,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   setup(e) {
     return (a, r) => (l(), i("div", ra, [
       t("div", {
-        class: p(["bullet-list", e.variant])
+        class: h(["bullet-list", e.variant])
       }, [
         t("ul", null, [
           (l(!0), i(D, null, V(e.list, (s) => (l(), i("li", { key: s }, [
@@ -889,14 +889,14 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         width: "596",
         height: "335"
       }
-    }, o = e, u = q(() => s[o.size]), h = q(() => o.variant === "article" || o.variant === "product" ? `card--${o.size}-${o.variant}` : `card--${o.variant}`);
+    }, o = e, u = q(() => s[o.size]), p = q(() => o.variant === "article" || o.variant === "product" ? `card--${o.size}-${o.variant}` : `card--${o.variant}`);
     return (n, b) => (l(), i("div", ua, [
       t("div", {
-        class: p(["card", [
+        class: h(["card", [
           n.theme === "dark" ? "card--dark" : "card--light",
           n.orientation === "vertical" ? "vertical" : "horizontal",
           u.value.class,
-          h.value,
+          p.value,
           n.variant === "product" ? "card--product" : "card--article"
         ]]),
         style: ee([n.variant === "product" ? "font-weight: 700" : "font-weight: 300"]),
@@ -919,7 +919,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           _: 3
         })) : (l(), i("div", {
           key: 1,
-          class: p(["video-card__wrapper", I(r) === !0 ? "vimeoPlaying" : ""])
+          class: h(["video-card__wrapper", I(r) === !0 ? "vimeoPlaying" : ""])
         }, [
           S(te, {
             play: I(r),
@@ -940,14 +940,14 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         ])) : _("", !0),
         n.variant === "product" ? (l(), i("div", {
           key: 3,
-          class: p([
+          class: h([
             "card__headline",
             n.theme === "dark" ? "regular-dark" : "regular-blue"
           ]),
           style: { "font-weight": "700" }
         }, d(n.headline), 3)) : (l(), i("div", {
           key: 4,
-          class: p([
+          class: h([
             "card__headline",
             n.theme === "dark" ? "regular-dark" : "regular-dark-blue"
           ])
@@ -969,7 +969,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       t("div", va, [
         a.image.filename ? (l(), i("div", {
           key: 0,
-          class: p(["column-card__image", { cover: a.imageFit, contain: !a.imageFit }])
+          class: h(["column-card__image", { cover: a.imageFit, contain: !a.imageFit }])
         }, [
           c(a.$slots, "column-card-image", O(z({
             src: a.image.filename,
@@ -1074,13 +1074,13 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       a.value = !a.value;
     }
     return (s, o) => {
-      var u, h, n, b, f, k;
+      var u, p, n, b, f, k;
       return l(), i("div", {
         class: "flashcard-container",
         onClick: r
       }, [
         t("div", {
-          class: p(["flashcard", {
+          class: h(["flashcard", {
             flipped: a.value,
             "flashcard--sm": s.size === "sm",
             "flashcard--md": s.size === "md",
@@ -1096,17 +1096,17 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
               Pa
             ])) : (l(), i("div", {
               key: 1,
-              class: p(["flashcard-image", {
+              class: h(["flashcard-image", {
                 contain: s.imageFit,
                 cover: !s.imageFit
               }])
             }, [
-              c(s.$slots, "flashcard-front-image", O(z({ src: (h = s.image) == null ? void 0 : h.filename, alt: (n = s.image) == null ? void 0 : n.alt })), void 0, !0),
+              c(s.$slots, "flashcard-front-image", O(z({ src: (p = s.image) == null ? void 0 : p.filename, alt: (n = s.image) == null ? void 0 : n.alt })), void 0, !0),
               Fa
             ], 2))
           ]),
           t("div", {
-            class: p([
+            class: h([
               "flashcard-side flashcard-back",
               (b = s.imagebackside) != null && b.filename ? "flashcard-back--image" : "flashcard-back--no-image"
             ])
@@ -1119,7 +1119,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
               Ha
             ])) : (l(), i("div", {
               key: 1,
-              class: p(["flashcard-image", {
+              class: h(["flashcard-image", {
                 contain: s.imageFitBack,
                 cover: !s.imageFitBack
               }])
@@ -1178,36 +1178,36 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
     }, s = (o) => a.value.includes(o);
     return (o, u) => (l(), i("section", Ja, [
       t("div", Wa, [
-        (l(!0), i(D, null, V(o.accordions, (h) => (l(), i("div", {
-          key: h._uid
+        (l(!0), i(D, null, V(o.accordions, (p) => (l(), i("div", {
+          key: p._uid
         }, [
           t("div", Ya, [
             t("div", {
               class: "accordion__header",
-              onClick: (n) => r(h._uid)
+              onClick: (n) => r(p._uid)
             }, [
-              t("h3", Za, d(h.headline), 1),
+              t("h3", Za, d(p.headline), 1),
               t("span", Xa, [
-                s(h._uid) ? (l(), i("img", eo)) : (l(), i("img", xa))
+                s(p._uid) ? (l(), i("img", eo)) : (l(), i("img", xa))
               ])
             ], 8, Qa),
             t("div", {
-              class: p(["accordion__content", { "accordion__content--reverse": h.imageFirst }]),
+              class: h(["accordion__content", { "accordion__content--reverse": p.imageFirst }]),
               style: ee({
-                display: s(h._uid) ? "flex" : "none"
+                display: s(p._uid) ? "flex" : "none"
               })
             }, [
               t("div", to, [
-                c(o.$slots, "accordion-body", M({ ref_for: !0 }, { body: h.bodytext }), void 0, !0)
+                c(o.$slots, "accordion-body", M({ ref_for: !0 }, { body: p.bodytext }), void 0, !0)
               ]),
               S(F, null, {
                 default: y(() => [
-                  h.image ? c(o.$slots, "accordion-image", M({
+                  p.image ? c(o.$slots, "accordion-image", M({
                     key: 0,
                     ref_for: !0
                   }, {
-                    src: h.image.filename,
-                    alt: h.image.alt,
+                    src: p.image.filename,
+                    alt: p.image.alt,
                     class: "accordion__image"
                   }), void 0, !0) : _("", !0)
                 ]),
@@ -1240,7 +1240,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   },
   setup(e) {
     return (a, r) => (l(), i("div", {
-      class: p([
+      class: h([
         "card-display",
         e.bgColor === "blue" ? "card-display--blue" : "card-display--white"
       ])
@@ -1272,7 +1272,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   },
   setup(e) {
     return (a, r) => (l(), i("div", {
-      class: p([
+      class: h([
         "column-grid",
         a.bgColor === "dark" ? "column-grid--dark" : a.bgColor === "light" ? "column-grid--light" : "column-grid--white"
       ])
@@ -1389,7 +1389,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           c(a.$slots, "features-body", {}, void 0, !0)
         ])) : _("", !0),
         t("div", {
-          class: p(["features__elements", [a.elements.length === 6 ? "features__elements--grid-6" : ""]])
+          class: h(["features__elements", [a.elements.length === 6 ? "features__elements--grid-6" : ""]])
         }, [
           (l(!0), i(D, null, V(a.elements, (s) => (l(), i("div", {
             key: s.headline,
@@ -1434,11 +1434,11 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       return o === 4 || o === 5 ? "sm" : o === 6 || o === 3 ? "md" : o === 2 ? "lg" : "sm";
     });
     return (o, u) => (l(), i("div", {
-      class: p(["flashcards", o.bgColor === "light" ? "flashcards--light" : "flashcards--white"])
+      class: h(["flashcards", o.bgColor === "light" ? "flashcards--light" : "flashcards--white"])
     }, [
       t("div", Fo, [
         t("div", {
-          class: p([
+          class: h([
             { "no-bodytext": !r.value },
             "flashcard-wrapper__top-section"
           ])
@@ -1449,23 +1449,23 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           ])) : _("", !0)
         ], 2),
         t("div", {
-          class: p(["flashcard-wrapper__teaser-list", {
+          class: h(["flashcard-wrapper__teaser-list", {
             sm: s.value === "sm",
             md: s.value === "md",
             lg: s.value === "lg"
           }])
         }, [
-          (l(!0), i(D, null, V(o.flashcards, (h) => (l(), L(I(be), {
-            key: h._uid,
-            name: h.name,
-            bodytext: h.bodytext,
-            image: h.image,
-            namebackside: h.namebackside ? h.namebackside : "",
-            bodytextbackside: h.bodytextbackside,
-            imagebackside: h.imagebackside ? h.imagebackside : { filename: "", alt: "" },
+          (l(!0), i(D, null, V(o.flashcards, (p) => (l(), L(I(be), {
+            key: p._uid,
+            name: p.name,
+            bodytext: p.bodytext,
+            image: p.image,
+            namebackside: p.namebackside ? p.namebackside : "",
+            bodytextbackside: p.bodytextbackside,
+            imagebackside: p.imagebackside ? p.imagebackside : { filename: "", alt: "" },
             size: s.value,
-            "image-fit": h.imageFit,
-            "image-fit-back": h.imageFitBack
+            "image-fit": p.imageFit,
+            "image-fit-back": p.imageFitBack
           }, {
             "flashcard-front-body": y(({ bodytext: n }) => [
               c(o.$slots, "flashcard-front-body", M({ ref_for: !0 }, { bodytext: n }), void 0, !0)
@@ -1500,7 +1500,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       default: "form__wrapper--default"
     }, r = e, s = q(() => a[r.variant]);
     return (o, u) => (l(), i("div", {
-      class: p(["form__wrapper", s.value])
+      class: h(["form__wrapper", s.value])
     }, [
       t("div", Ro, [
         t("div", No, [
@@ -1544,7 +1544,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
   setup(e) {
     return (a, r) => (l(), i("div", Jo, [
       t("div", {
-        class: p({
+        class: h({
           "headline__content--article-and-submenu": e.article && e.subMenu,
           "headline__content--article": e.article && !e.subMenu,
           "headline__content--default headline__content--submenu": !e.article && e.subMenu,
@@ -1664,10 +1664,10 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       dark: "gallery__wrapper--dark mirsaic--dark"
     }, r = e, s = q(() => a[r.bgColor]);
     return (o, u) => (l(), i("div", {
-      class: p(["gallery__wrapper", s.value])
+      class: h(["gallery__wrapper", s.value])
     }, [
       t("div", {
-        class: p([
+        class: h([
           "gallery__content",
           o.flipHorizontal ? "gallery__content--reverse" : "gallery__content--default"
         ])
@@ -1703,13 +1703,13 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
         ]),
         t("div", {
           style: ee([o.mediaSmall.length === 2 ? "grid-gap: 38px;" : ""]),
-          class: p([
+          class: h([
             "gallery__small",
             o.flipVertical ? "gallery__small--reverse" : "gallery__small--default"
           ])
         }, [
-          (l(!0), i(D, null, V(o.mediaSmall, (h) => (l(), i("div", {
-            key: h.src + h.alt,
+          (l(!0), i(D, null, V(o.mediaSmall, (p) => (l(), i("div", {
+            key: p.src + p.alt,
             class: "image image--small"
           }, [
             S(F, null, {
@@ -1717,8 +1717,8 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
                 c(o.$slots, "image-small", M({ ref_for: !0 }, {
                   width: 328,
                   height: 246,
-                  src: h.src,
-                  alt: h.alt
+                  src: p.src,
+                  alt: p.alt
                 }))
               ]),
               _: 2
@@ -1726,7 +1726,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
           ]))), 128)),
           o.mediaSmall.length < 2 ? (l(), i("div", {
             key: 0,
-            class: p(["body", o.bgColor === "dark" ? "body--dark" : ""])
+            class: h(["body", o.bgColor === "dark" ? "body--dark" : ""])
           }, [
             t("p", null, d(o.body), 1)
           ], 2)) : _("", !0)
@@ -1813,7 +1813,7 @@ const Le = ["aria-label"], Te = /* @__PURE__ */ g({
       dark: "micro-stories__wrapper--dark"
     }, r = q(() => a[s.bgColor]), s = e;
     return (o, u) => (l(), i("div", {
-      class: p(["micro-stories__wrapper", r.value])
+      class: h(["micro-stories__wrapper", r.value])
     }, [
       t("div", Ls, [
         o.headline ? (l(), i("div", Ts, [
@@ -1943,7 +1943,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
       default: "promo__wrapper--default"
     }, r = e, s = q(() => a[r.variant]);
     return (o, u) => (l(), i("div", {
-      class: p([
+      class: h([
         "promo__wrapper",
         s.value,
         o.teaser ? "promo__wrapper--teaser" : "",
@@ -1953,7 +1953,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
       t("div", Ys, [
         o.mediaType === "image" ? (l(), i("div", {
           key: 0,
-          class: p([
+          class: h([
             "promo__image",
             o.reverse ? "promo__image--reverse" : "promo__image--default"
           ])
@@ -1967,7 +1967,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
         ], 2)) : _("", !0),
         o.mediaType === "video" ? (l(), i("div", {
           key: 1,
-          class: p([
+          class: h([
             "promo__video",
             o.reverse ? "promo__video--reverse" : "promo__video--default"
           ])
@@ -1985,7 +1985,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
           }, null, 8, ["src", "aria-label", "poster"])
         ], 2)) : _("", !0),
         t("div", {
-          class: p([
+          class: h([
             "promo__text",
             o.reverse ? "promo__text--reverse" : "promo__text--default"
           ])
@@ -1996,7 +1996,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
             "label-dark": o.variant === "dark"
           }, null, 8, ["text", "label-dark"])) : _("", !0),
           t("div", {
-            class: p([
+            class: h([
               "promo__title",
               o.variant === "dark" ? "promo__title--dark" : ""
             ])
@@ -2098,7 +2098,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
   },
   setup(e) {
     return (a, r) => (l(), i("div", {
-      class: p([
+      class: h([
         "rich-text",
         a.bgColor === "blue" ? "rich-text--blue" : "rich-text--white"
       ])
@@ -2111,19 +2111,19 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
         }, null, 8, ["text"])) : _("", !0),
         a.headline ? (l(), i("h2", {
           key: 1,
-          class: p([
+          class: h([
             "rich-text__headline",
             a.leftAligned || a.bulletList || a.image ? "rich-text__headline--left-aligned" : "rich-text__headline--centered"
           ])
         }, d(a.headline), 3)) : _("", !0),
         t("div", {
-          class: p([
+          class: h([
             "rich-text__content",
             a.leftAligned || a.bulletList || a.image ? "rich-text__content--left-aligned" : "rich-text__content--centered"
           ])
         }, [
           t("div", {
-            class: p([
+            class: h([
               "rich-text__body",
               a.bulletList || a.image ? "rich-text__body--content-right" : ""
             ])
@@ -2138,7 +2138,7 @@ const Hs = /* @__PURE__ */ v(Fs, [["render", zs], ["__scopeId", "data-v-ea887d7a
           ])) : _("", !0),
           a.image ? (l(), i("div", {
             key: 1,
-            class: p([
+            class: h([
               "rich-text__image",
               a.imageClip ? "rich-text__image--clip" : ""
             ])
@@ -2463,7 +2463,7 @@ const $l = /* @__PURE__ */ v(fl, [["render", kl], ["__scopeId", "data-v-776750d2
                   t("i", {
                     width: "19",
                     height: "14",
-                    class: p(["footer__social--icon", [s.title ? "bg-" + s.title : ""]])
+                    class: h(["footer__social--icon", [s.title ? "bg-" + s.title : ""]])
                   }, null, 2)
                 ], 8, Oi)
               ]),
@@ -2484,7 +2484,7 @@ const $l = /* @__PURE__ */ v(fl, [["render", kl], ["__scopeId", "data-v-776750d2
                   t("i", {
                     width: "19",
                     height: "14",
-                    class: p(["footer__social--icon", [s.title ? "bg-" + s.title : ""]])
+                    class: h(["footer__social--icon", [s.title ? "bg-" + s.title : ""]])
                   }, null, 2)
                 ], 8, Hi)
               ]),
@@ -2593,13 +2593,13 @@ const $l = /* @__PURE__ */ v(fl, [["render", kl], ["__scopeId", "data-v-776750d2
   setup(e, { expose: a, emit: r }) {
     let s = null;
     const o = e;
-    let u = C(o.burgerState), h = C(o.search), n = C(o.showDropDown), b = C(o.showPortalSwitcherDropDown), f = C(o.showProfileDropDown), k = C(o.isAuthenticated);
+    let u = C(o.burgerState), p = C(o.search), n = C(o.showDropDown), b = C(o.showPortalSwitcherDropDown), f = C(o.showProfileDropDown), k = C(o.isAuthenticated);
     Q(
       () => o.burgerState,
       ($) => u.value = $
     ), Q(
       () => o.search,
-      ($) => h.value = $
+      ($) => p.value = $
     ), Q(
       () => o.showDropDown,
       ($) => n.value = $
@@ -2661,7 +2661,7 @@ const $l = /* @__PURE__ */ v(fl, [["render", kl], ["__scopeId", "data-v-776750d2
               [Z, I(n)]
             ])
           ], 512)) : _("", !0),
-          I(h) ? (l(), i("div", Qi, [
+          I(p) ? (l(), i("div", Qi, [
             t("button", {
               ref_key: "navSearchButton",
               ref: G,
@@ -2727,13 +2727,13 @@ const $l = /* @__PURE__ */ v(fl, [["render", kl], ["__scopeId", "data-v-776750d2
           ])) : _("", !0)
         ]),
         t("div", {
-          class: p(["mobile-nav-wrapper", I(u) === !0 ? "mirsaic-mobile-bg mirsaic--dark" : ""])
+          class: h(["mobile-nav-wrapper", I(u) === !0 ? "mirsaic-mobile-bg mirsaic--dark" : ""])
         }, [
           t("div", cr, [
             t("div", ur, [
               c($.$slots, "link-logo", {}, void 0, !0)
             ]),
-            I(h) ? (l(), i("div", _r, [
+            I(p) ? (l(), i("div", _r, [
               t("button", {
                 ref_key: "mobileSearchButton",
                 ref: oe,
@@ -2854,7 +2854,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
     function u(b, f) {
       !s.selectedOptions.includes(b) && !s.selectedOptions.includes(f) ? o("filter", b) : o("remove-filter", b);
     }
-    function h() {
+    function p() {
       r.value = !1;
     }
     const n = q(() => s.options.length > 8);
@@ -2862,7 +2862,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
       const k = _e("click-outside");
       return U((l(), i("div", Pr, [
         t("button", {
-          class: "dropdown-button",
+          class: h(["dropdown-button", { clicked: r.value }]),
           style: ee({ "z-index": r.value ? 2 : 0 }),
           "aria-expanded": r.value ? "true" : "false",
           onClick: f[0] || (f[0] = (w) => r.value = !r.value)
@@ -2870,9 +2870,9 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
           c(b.$slots, "button", {}, () => [
             J(d(b.label), 1)
           ], !0)
-        ], 12, Fr),
+        ], 14, Fr),
         t("div", {
-          class: p([{ hidden: !r.value, "adjust-height": n.value }, "dropdown-content"])
+          class: h([{ hidden: !r.value, "adjust-height": n.value }, "dropdown-content"])
         }, [
           (l(!0), i(D, null, V(b.options, (w) => (l(), L(I(fe), {
             id: w.value,
@@ -2891,11 +2891,11 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
           }, 1032, ["id", "name", "value", "checked", "onInput"]))), 128))
         ], 2)
       ])), [
-        [k, h]
+        [k, p]
       ]);
     };
   }
-}), Or = /* @__PURE__ */ v(Mr, [["__scopeId", "data-v-831030bc"]]), zr = { class: "promo__content" }, Hr = { class: "pallet-jack__media-wrap" }, Rr = { class: "pallet-jack-link" }, Nr = { class: "pallet-jack__media-wrap__inner-wrap" }, Er = { class: "pallet-jack__media-wrap__content-wrap" }, jr = { class: "regular-blue" }, Kr = /* @__PURE__ */ g({
+}), Or = /* @__PURE__ */ v(Mr, [["__scopeId", "data-v-678cc92e"]]), zr = { class: "promo__content" }, Hr = { class: "pallet-jack__media-wrap" }, Rr = { class: "pallet-jack-link" }, Nr = { class: "pallet-jack__media-wrap__inner-wrap" }, Er = { class: "pallet-jack__media-wrap__content-wrap" }, jr = { class: "regular-blue" }, Kr = /* @__PURE__ */ g({
   __name: "pallet-jack",
   props: {
     label: { default: "" },
@@ -2915,7 +2915,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
       default: "promo__wrapper--default"
     }, r = e, s = q(() => a[r.variant]);
     return (o, u) => (l(), i("div", {
-      class: p([
+      class: h([
         "promo__wrapper",
         s.value,
         o.teaser ? "promo__wrapper--teaser" : ""
@@ -2923,7 +2923,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
     }, [
       t("div", zr, [
         t("div", {
-          class: p([
+          class: h([
             "promo__video",
             o.reverse ? "promo__video--reverse" : "promo__video--default"
           ])
@@ -2942,7 +2942,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
           ])
         ], 2),
         t("div", {
-          class: p([
+          class: h([
             "promo__text",
             o.reverse ? "promo__text--reverse" : "promo__text--default"
           ])
@@ -2953,7 +2953,7 @@ const Vr = /* @__PURE__ */ v(Lr, [["render", Dr], ["__scopeId", "data-v-c07a6cf3
             "label-dark": o.variant === "dark"
           }, null, 8, ["text", "label-dark"])) : _("", !0),
           t("div", {
-            class: p([
+            class: h([
               "promo__title",
               o.variant === "dark" ? "promo__title--dark" : ""
             ])