slippers-ui 3.1.31 → 3.1.33

package/dist/slippers-ui.es.js

@@ -1,142 +1,142 @@
-import { defineComponent as S, computed as y, createElementBlock as r, openBlock as n, mergeProps as U, renderSlot as b, normalizeClass as g, createElementVNode as f, createBlock as B, resolveDynamicComponent as j, normalizeStyle as Z, withCtx as N, createCommentVNode as E, ref as L, onMounted as A, nextTick as te, onUnmounted as F, createVNode as $, unref as V, Fragment as T, renderList as z, withModifiers as K, toDisplayString as w, createTextVNode as M, resolveComponent as ae, withDirectives as P, vShow as q, normalizeProps as oe, guardReactiveProps as se, onBeforeUnmount as J, onBeforeMount as ne, vModelSelect as le } from "vue";
-import { _ as k, C as Q, a as X, b as Y, c as ie } from "./chunks/ChevronLgUp-HZ_-4Y4K.js";
-const re = ["href"], de = /* @__PURE__ */ S({
+import { defineComponent as S, computed as y, createElementBlock as i, openBlock as n, mergeProps as U, renderSlot as b, normalizeClass as _, createElementVNode as v, createBlock as B, resolveDynamicComponent as j, normalizeStyle as Z, withCtx as N, createCommentVNode as E, ref as L, onMounted as A, onUnmounted as F, createVNode as $, unref as V, Fragment as T, renderList as z, withModifiers as K, toDisplayString as w, createTextVNode as M, resolveComponent as te, withDirectives as P, vShow as H, normalizeProps as ae, guardReactiveProps as oe, onBeforeUnmount as J, onBeforeMount as se, vModelSelect as ne } from "vue";
+import { _ as k, C as Q, a as X, b as Y, c as le } from "./chunks/ChevronLgUp-HZ_-4Y4K.js";
+const ie = ["href"], re = /* @__PURE__ */ S({
   __name: "SlpButton",
   props: {
     disabled: { type: Boolean },
     variant: {},
     href: {}
   },
-  setup(h) {
-    const e = h, s = y(() => e.disabled ?? !1), i = y(() => e.variant ?? "primary");
+  setup(f) {
+    const e = f, s = y(() => e.disabled ?? !1), l = y(() => e.variant ?? "primary");
     y(() => e.href ?? "");
     const a = y(() => {
-      let o = [`slp-btn-${i.value}`];
+      let o = [`slp-btn-${l.value}`];
       return s.value && o.push("slp-btn-disabled"), o.join(" ");
     });
-    return (o, p) => e.href ? (n(), r("a", U({ key: 0 }, o.$attrs, {
+    return (o, p) => e.href ? (n(), i("a", U({ key: 0 }, o.$attrs, {
       class: ["slp-btn", a.value],
       href: e.href
     }), [
       b(o.$slots, "default", {}, void 0, !0)
-    ], 16, re)) : (n(), r("button", U({ key: 1 }, o.$attrs, {
+    ], 16, ie)) : (n(), i("button", U({ key: 1 }, o.$attrs, {
       class: ["slp-btn", a.value],
       type: "button"
     }), [
       b(o.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), H = /* @__PURE__ */ k(de, [["__scopeId", "data-v-c6fd7cb9"]]), ce = /* @__PURE__ */ S({
+}), q = /* @__PURE__ */ k(re, [["__scopeId", "data-v-c6fd7cb9"]]), de = /* @__PURE__ */ S({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
-  setup(h) {
-    const e = h, s = y(() => e.cols ?? null), i = y(() => e.size ?? "md"), a = y(() => s.value ? `slp-col-${i.value}-${s.value}` : `slp-col-${i.value}`);
-    return (o, p) => (n(), r("div", {
-      class: g(a.value)
+  setup(f) {
+    const e = f, s = y(() => e.cols ?? null), l = y(() => e.size ?? "md"), a = y(() => s.value ? `slp-col-${l.value}-${s.value}` : `slp-col-${l.value}`);
+    return (o, p) => (n(), i("div", {
+      class: _(a.value)
     }, [
       b(o.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), St = /* @__PURE__ */ k(ce, [["__scopeId", "data-v-00b68f22"]]), ue = {
+}), wt = /* @__PURE__ */ k(de, [["__scopeId", "data-v-00b68f22"]]), ce = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, pe = {
+}, ue = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, ve = {
+}, pe = {
   key: 2,
   class: "slp-gradient-background"
-}, fe = {
+}, ve = {
   key: 3,
   class: "slp-full-gradient-background"
-}, he = {
+}, fe = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, ge = {
+}, he = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, me = {
+}, ge = {
   key: 6,
   class: "slp-half-grey-background"
-}, _e = {
+}, me = {
   key: 7,
   class: "slp-partial-white-background"
-}, be = {
+}, _e = {
   key: 8,
   class: "slp-partial-grey-background"
-}, ye = /* @__PURE__ */ S({
+}, be = /* @__PURE__ */ S({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
-  setup(h) {
-    const e = h, s = y(() => e.fluid ?? !1), i = y(() => e.variant ?? "white"), a = y(() => s.value ? "fluid" : "");
-    return (o, p) => i.value === "light-purple-100" ? (n(), r("div", ue, [
-      f("div", {
-        class: g(["slp-container", a.value])
+  setup(f) {
+    const e = f, s = y(() => e.fluid ?? !1), l = y(() => e.variant ?? "white"), a = y(() => s.value ? "fluid" : "");
+    return (o, p) => l.value === "light-purple-100" ? (n(), i("div", ce, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-100" ? (n(), r("div", pe, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "grey-100" ? (n(), i("div", ue, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient" ? (n(), r("div", ve, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "gradient" ? (n(), i("div", pe, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient-full" ? (n(), r("div", fe, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "gradient-full" ? (n(), i("div", ve, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-100" ? (n(), r("div", he, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "charcoal-100" ? (n(), i("div", fe, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-75" ? (n(), r("div", ge, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "charcoal-75" ? (n(), i("div", he, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-50" ? (n(), r("div", me, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "grey-50" ? (n(), i("div", ge, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "white-75" ? (n(), r("div", _e, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "white-75" ? (n(), i("div", me, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-75" ? (n(), r("div", be, [
-      f("div", {
-        class: g(["slp-container", a.value])
+    ])) : l.value === "grey-75" ? (n(), i("div", _e, [
+      v("div", {
+        class: _(["slp-container", a.value])
       }, [
         b(o.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : (n(), r("div", {
+    ])) : (n(), i("div", {
       key: 9,
-      class: g(["slp-container", a.value])
+      class: _(["slp-container", a.value])
     }, [
       b(o.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), x = /* @__PURE__ */ k(ye, [["__scopeId", "data-v-e594efe8"]]), $e = /* @__PURE__ */ S({
+}), x = /* @__PURE__ */ k(be, [["__scopeId", "data-v-e594efe8"]]), ye = /* @__PURE__ */ S({
   __name: "SlpIcon",
   props: {
     size: {
@@ -155,11 +155,11 @@ const re = ["href"], de = /* @__PURE__ */ S({
       required: !0
     }
   },
-  setup(h) {
-    const e = h, s = y(() => {
+  setup(f) {
+    const e = f, s = y(() => {
       const a = ["slp-icon"];
       return typeof e.size == "string" && isNaN(Number(e.size)) && a.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && a.push(`slp-icon--color-${e.color}`), a;
-    }), i = y(() => {
+    }), l = y(() => {
       var o;
       const a = {};
       if ((o = e.color) != null && o.startsWith("#") && (a.color = e.color, a.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
@@ -169,32 +169,32 @@ const re = ["href"], de = /* @__PURE__ */ S({
       return a;
     });
     return (a, o) => {
-      var p, d;
-      return n(), B(j(h.icon), {
-        class: g(["slp-icon", s.value]),
-        style: Z(i.value),
+      var p, r;
+      return n(), B(j(f.icon), {
+        class: _(["slp-icon", s.value]),
+        style: Z(l.value),
         role: "img",
         "aria-hidden": "true",
-        "data-icon-name": ((d = (p = h.icon) == null ? void 0 : p.__docgenInfo) == null ? void 0 : d.displayName) || ""
+        "data-icon-name": ((r = (p = f.icon) == null ? void 0 : p.__docgenInfo) == null ? void 0 : r.displayName) || ""
       }, null, 8, ["class", "style", "data-icon-name"]);
     };
   }
-}), O = /* @__PURE__ */ k($e, [["__scopeId", "data-v-b82aeda9"]]), ke = {}, we = { class: "slp-row" };
-function Se(h, e) {
-  return n(), r("div", we, [
-    b(h.$slots, "default", {}, void 0, !0)
+}), O = /* @__PURE__ */ k(ye, [["__scopeId", "data-v-b82aeda9"]]), $e = {}, ke = { class: "slp-row" };
+function we(f, e) {
+  return n(), i("div", ke, [
+    b(f.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f"]]), Le = {
+const St = /* @__PURE__ */ k($e, [["render", we], ["__scopeId", "data-v-adc8d02f"]]), Se = {
   key: 0,
   class: "arrow-symbol"
-}, Ce = /* @__PURE__ */ S({
+}, Le = /* @__PURE__ */ S({
   __name: "SlpTypography",
   props: {
     variant: {},
     tag: {}
   },
-  setup(h) {
+  setup(f) {
     const e = [
       "display1",
       "heading1",
@@ -217,21 +217,21 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], s = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = h, a = y(() => e.includes(i.variant || "") ? i.variant : "body1"), o = y(() => s.includes(i.tag || "") ? i.tag : "span"), p = y(() => `slp-text-${a.value}`);
-    return (d, u) => (n(), B(j(o.value), {
-      class: g(p.value)
+    ], s = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], l = f, a = y(() => e.includes(l.variant || "") ? l.variant : "body1"), o = y(() => s.includes(l.tag || "") ? l.tag : "span"), p = y(() => `slp-text-${a.value}`);
+    return (r, c) => (n(), B(j(o.value), {
+      class: _(p.value)
     }, {
       default: N(() => [
-        b(d.$slots, "default", {}, void 0, !0),
-        a.value === "arrow" ? (n(), r("span", Le, "→")) : E("", !0)
+        b(r.$slots, "default", {}, void 0, !0),
+        a.value === "arrow" ? (n(), i("span", Se, "→")) : E("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), R = /* @__PURE__ */ k(Ce, [["__scopeId", "data-v-64ad2128"]]), Ie = {
+}), R = /* @__PURE__ */ k(Le, [["__scopeId", "data-v-64ad2128"]]), Ce = {
   key: 0,
   class: "dropdown-menu"
-}, Ne = ["onClick"], Te = { class: "side-navigation" }, ze = ["data-ga-name", "onClick"], Ee = /* @__PURE__ */ S({
+}, Ie = ["onClick"], Ne = { class: "side-navigation" }, Te = ["data-ga-name", "onClick"], ze = /* @__PURE__ */ S({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -247,101 +247,101 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       required: !0
     }
   },
-  setup(h) {
-    const e = h, s = L(null), i = (c) => {
-      s.value && !s.value.contains(c.target) && (d.value = !1);
+  setup(f) {
+    const e = f, s = L(null), l = (d) => {
+      s.value && !s.value.contains(d.target) && (r.value = !1);
     }, a = L(null), o = L(null);
     let p = null;
-    const d = L(!1), u = (c) => {
-      const l = document.getElementById(c);
-      l && l.scrollIntoView({ behavior: "smooth" }), d.value = !1;
-    }, t = () => {
+    const r = L(!1), c = L(!0), t = (d) => {
+      const g = document.getElementById(d);
+      g && g.scrollIntoView({ behavior: "smooth" }), r.value = !1;
+    }, u = () => {
       if (!o.value) return;
-      const c = e.navigationItems.map((l) => document.getElementById(l.id)).filter((l) => l !== null);
+      const d = (window.innerHeight - 120 - 48) * -1;
       p = new IntersectionObserver(
-        (l) => {
-          l.forEach((v) => {
-            if (v.isIntersecting) {
-              const m = v.target.getAttribute("id");
-              m && (a.value = m);
-            }
+        (g) => {
+          g.forEach((h) => {
+            h.isIntersecting ? a.value = h.target.id : c.value && (e.navigationItems.length > 0 && (a.value = e.navigationItems[0].id), c.value = !1);
           });
         },
         {
-          rootMargin: "0px 0px -40% 0px",
-          // When the 40% of the content is in the viewport the menu will be highlighted
-          threshold: Array.from({ length: 99 }, (l, v) => (v + 2) / 100)
+          rootMargin: `-120px 0px ${d}px 0px`,
+          threshold: 0
         }
-      ), c.forEach((l) => p == null ? void 0 : p.observe(l));
+      ), e.navigationItems.forEach((g) => {
+        const h = document.getElementById(g.id);
+        h && p.observe(h);
+      });
     };
     return A(() => {
-      document.addEventListener("click", i), te(() => {
-        t();
-      });
+      document.addEventListener("click", l), window.addEventListener("load", () => {
+        u();
+      }), document.readyState === "complete" && u();
     }), F(() => {
-      p && p.disconnect(), document.removeEventListener("click", i);
-    }), (c, l) => (n(), r("div", {
-      class: g([
+      p && p.disconnect(), document.removeEventListener("click", l);
+    }), (d, g) => (n(), i("div", {
+      class: _([
         "side-navigation-layout",
         `side-navigation-layout--${e.position}`,
         { "side-navigation--dark": e.darkMode }
       ])
     }, [
-      f("div", {
+      v("div", {
         ref_key: "dropdownRef",
         ref: s,
         class: "side-navigation-dropdown"
       }, [
-        f("button", {
+        v("button", {
           class: "dropdown-toggle",
-          onClick: l[0] || (l[0] = (v) => d.value = !d.value)
+          onClick: g[0] || (g[0] = (h) => r.value = !r.value)
         }, [
-          l[1] || (l[1] = f("span", null, "Jump to a section", -1)),
+          g[1] || (g[1] = v("span", null, "Jump to a section", -1)),
           $(O, {
-            icon: d.value ? V(Q) : V(X),
+            icon: r.value ? V(Q) : V(X),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        d.value ? (n(), r("ul", Ie, [
-          (n(!0), r(T, null, z(e.navigationItems, (v) => (n(), r("li", {
-            key: v.id,
+        r.value ? (n(), i("ul", Ce, [
+          (n(!0), i(T, null, z(e.navigationItems, (h) => (n(), i("li", {
+            key: h.id,
             class: "dropdown-item"
           }, [
-            f("a", {
+            v("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: K((m) => u(v.id), ["prevent"])
-            }, w(v.text), 9, Ne)
+              onClick: K((m) => t(h.id), ["prevent"])
+            }, w(h.text), 9, Ie)
           ]))), 128))
         ])) : E("", !0)
       ], 512),
-      f("nav", Te, [
-        f("ul", null, [
-          (n(!0), r(T, null, z(e.navigationItems, (v) => (n(), r("li", {
-            key: v.id,
+      v("nav", Ne, [
+        b(d.$slots, "navigation-header", {}, void 0, !0),
+        v("ul", null, [
+          (n(!0), i(T, null, z(e.navigationItems, (h) => (n(), i("li", {
+            key: h.id,
             class: "side-navigation__item"
           }, [
-            f("a", {
+            v("a", {
               href: "#",
-              class: g(["side-navigation__link", { "side-navigation__link--active": a.value === v.id }]),
-              "data-ga-name": v.text,
+              class: _(["side-navigation__link", { "side-navigation__link--active": a.value === h.id }]),
+              "data-ga-name": h.text,
               "data-ga-location": "side anchor",
-              onClick: K((m) => u(v.id), ["prevent"])
-            }, w(v.text), 11, ze)
+              onClick: K((m) => t(h.id), ["prevent"])
+            }, w(h.text), 11, Te)
           ]))), 128))
         ])
       ]),
-      f("div", {
+      v("div", {
         ref_key: "slotContentRef",
         ref: o,
         class: "side-navigation-content"
       }, [
-        b(c.$slots, "default", {}, void 0, !0)
+        b(d.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), Ct = /* @__PURE__ */ k(Ee, [["__scopeId", "data-v-68f8d83f"]]), Ve = ["for"], Me = ["name", "value", "id", "checked", "disabled"], Ge = /* @__PURE__ */ S({
+}), Lt = /* @__PURE__ */ k(ze, [["__scopeId", "data-v-73bd3d44"]]), Ee = ["for"], Ve = ["name", "value", "id", "checked", "disabled"], Me = /* @__PURE__ */ S({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -349,32 +349,32 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
     config: {}
   },
   emits: ["update:modelValue"],
-  setup(h, { emit: e }) {
-    const s = e, i = (a) => {
+  setup(f, { emit: e }) {
+    const s = e, l = (a) => {
       const o = a.target;
       s("update:modelValue", o.value);
     };
     return (a, o) => {
-      var p, d, u;
-      return n(), r("label", {
+      var p, r, c;
+      return n(), i("label", {
         for: a.option,
-        class: g(["slp-radio", { disabled: (p = a.config) == null ? void 0 : p.disabled }])
+        class: _(["slp-radio", { disabled: (p = a.config) == null ? void 0 : p.disabled }])
       }, [
         M(w(a.option) + " ", 1),
-        f("input", {
+        v("input", {
           type: "radio",
           name: a.name,
           value: a.option,
           id: a.option,
-          onInput: i,
-          checked: (d = a.config) == null ? void 0 : d.checked,
-          disabled: (u = a.config) == null ? void 0 : u.disabled
-        }, null, 40, Me),
-        o[0] || (o[0] = f("span", { class: "slp-radio__checkmark" }, null, -1))
-      ], 10, Ve);
+          onInput: l,
+          checked: (r = a.config) == null ? void 0 : r.checked,
+          disabled: (c = a.config) == null ? void 0 : c.disabled
+        }, null, 40, Ve),
+        o[0] || (o[0] = v("span", { class: "slp-radio__checkmark" }, null, -1))
+      ], 10, Ee);
     };
   }
-}), Be = /* @__PURE__ */ k(Ge, [["__scopeId", "data-v-f37e970e"]]), Oe = /* @__PURE__ */ S({
+}), Ge = /* @__PURE__ */ k(Me, [["__scopeId", "data-v-f37e970e"]]), Be = /* @__PURE__ */ S({
   __name: "SlpRadioButtonGroup",
   props: {
     options: {},
@@ -385,23 +385,23 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
     } }
   },
   emits: ["update:modelValue"],
-  setup(h, { emit: e }) {
+  setup(f, { emit: e }) {
     const s = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, i = e, a = (o) => {
-      i("update:modelValue", o);
+    }, l = e, a = (o) => {
+      l("update:modelValue", o);
     };
     return (o, p) => {
-      var d, u;
+      var r, c;
       return n(), B(x, {
-        class: g(["slp-radio-group", {
-          "slp-radio-group--vertical": ((d = o.config) == null ? void 0 : d.orientation) === s.VERTICAL,
-          "slp-radio-group--horizontal": ((u = o.config) == null ? void 0 : u.orientation) === s.HORIZONTAL
+        class: _(["slp-radio-group", {
+          "slp-radio-group--vertical": ((r = o.config) == null ? void 0 : r.orientation) === s.VERTICAL,
+          "slp-radio-group--horizontal": ((c = o.config) == null ? void 0 : c.orientation) === s.HORIZONTAL
         }])
       }, {
         default: N(() => [
-          (n(!0), r(T, null, z(o.options, (t) => (n(), B(Be, {
+          (n(!0), i(T, null, z(o.options, (t) => (n(), B(Ge, {
             key: t.value,
             option: t.value,
             name: o.name,
@@ -416,26 +416,26 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       }, 8, ["class"]);
     };
   }
-}), It = /* @__PURE__ */ k(Oe, [["__scopeId", "data-v-ae31ec89"]]), Re = {
+}), Ct = /* @__PURE__ */ k(Be, [["__scopeId", "data-v-ae31ec89"]]), Oe = {
   key: 0,
   class: "slp-loading-round"
-}, Pe = {
+}, Re = {
   key: 1,
   class: "slp-loading-linear"
-}, Ae = /* @__PURE__ */ S({
+}, Pe = /* @__PURE__ */ S({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
     config: {}
   },
-  setup(h) {
-    const e = h;
-    return (s, i) => {
+  setup(f) {
+    const e = f;
+    return (s, l) => {
       var a;
-      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (n(), r("div", Re)) : (n(), r("div", Pe));
+      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (n(), i("div", Oe)) : (n(), i("div", Re));
     };
   }
-}), Nt = /* @__PURE__ */ k(Ae, [["__scopeId", "data-v-ee32411b"]]), De = ["href", "data-ga-name", "data-ga-location"], We = /* @__PURE__ */ S({
+}), It = /* @__PURE__ */ k(Pe, [["__scopeId", "data-v-ee32411b"]]), Ae = ["href", "data-ga-name", "data-ga-location"], De = /* @__PURE__ */ S({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -449,32 +449,32 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       mobile: !1
     }) }
   },
-  setup(h) {
+  setup(f) {
     return (e, s) => {
-      var a, o, p, d, u, t;
-      const i = ae("Tree", !0);
-      return n(), r("div", {
-        class: g([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (o = e.config) == null ? void 0 : o.mobile }])
+      var a, o, p, r, c, t;
+      const l = te("Tree", !0);
+      return n(), i("div", {
+        class: _([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (o = e.config) == null ? void 0 : o.mobile }])
       }, [
-        e.text ? (n(), r("a", {
+        e.text ? (n(), i("a", {
           key: 0,
-          class: g(["anchor", { selected: (p = e.config) == null ? void 0 : p.isSelected }]),
-          href: (d = e.config) == null ? void 0 : d.href,
-          "data-ga-name": (u = e.config) == null ? void 0 : u.dataGaName,
+          class: _(["anchor", { selected: (p = e.config) == null ? void 0 : p.isSelected }]),
+          href: (r = e.config) == null ? void 0 : r.href,
+          "data-ga-name": (c = e.config) == null ? void 0 : c.dataGaName,
           "data-ga-location": (t = e.config) == null ? void 0 : t.dataGaLocation
-        }, w(e.text), 11, De)) : E("", !0),
-        (n(!0), r(T, null, z(e.nodes, (c) => {
-          var l, v, m, _, C, I;
-          return n(), B(i, {
-            key: c.text,
-            nodes: c.nodes,
-            text: c.text,
+        }, w(e.text), 11, Ae)) : E("", !0),
+        (n(!0), i(T, null, z(e.nodes, (u) => {
+          var d, g, h, m, C, I;
+          return n(), B(l, {
+            key: u.text,
+            nodes: u.nodes,
+            text: u.text,
             config: {
-              href: ((l = c.config) == null ? void 0 : l.href) ?? "",
-              dataGaName: (v = c.config) == null ? void 0 : v.dataGaName,
-              dataGaLocation: (m = c.config) == null ? void 0 : m.dataGaLocation,
-              depth: (((_ = e.config) == null ? void 0 : _.depth) ?? 0) + 1,
-              isSelected: (C = c.config) == null ? void 0 : C.isSelected,
+              href: ((d = u.config) == null ? void 0 : d.href) ?? "",
+              dataGaName: (g = u.config) == null ? void 0 : g.dataGaName,
+              dataGaLocation: (h = u.config) == null ? void 0 : h.dataGaLocation,
+              depth: (((m = e.config) == null ? void 0 : m.depth) ?? 0) + 1,
+              isSelected: (C = u.config) == null ? void 0 : C.isSelected,
               mobile: (I = e.config) == null ? void 0 : I.mobile
             }
           }, null, 8, ["nodes", "text", "config"]);
@@ -482,55 +482,55 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), ee = /* @__PURE__ */ k(We, [["__scopeId", "data-v-c3be63ed"]]), qe = { class: "dropdown__list" }, He = { class: "horizontal-rule slp-my-16" }, Ue = /* @__PURE__ */ S({
+}), ee = /* @__PURE__ */ k(De, [["__scopeId", "data-v-c3be63ed"]]), We = { class: "dropdown__list" }, He = { class: "horizontal-rule slp-my-16" }, qe = /* @__PURE__ */ S({
   __name: "SlpAnchorDropdown",
   props: {
     dropdownLabel: { default: "Jump to a section" },
     anchors: {},
     hyperlinks: {}
   },
-  setup(h) {
+  setup(f) {
     const e = L(!1), s = () => {
       e.value = !e.value;
     };
-    return (i, a) => {
-      var o, p, d;
-      return n(), r("div", {
-        class: g(["dropdown", { hide: !e.value }])
+    return (l, a) => {
+      var o, p, r;
+      return n(), i("div", {
+        class: _(["dropdown", { hide: !e.value }])
       }, [
-        $(H, {
+        $(q, {
           class: "dropdown__button",
           variant: "ghost",
           onClick: s
         }, {
           default: N(() => [
-            f("span", null, w(i.dropdownLabel), 1),
+            v("span", null, w(l.dropdownLabel), 1),
             $(O, {
               icon: e.value ? V(Q) : V(X)
             }, null, 8, ["icon"])
           ]),
           _: 1
         }),
-        f("div", qe, [
+        v("div", We, [
           P($(R, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
           }, {
             default: N(() => [
-              M(w(i.anchors.text), 1)
+              M(w(l.anchors.text), 1)
             ]),
             _: 1
           }, 512), [
-            [q, i.anchors.text]
+            [H, l.anchors.text]
           ]),
           $(ee, {
             mobile: "",
-            nodes: i.anchors.data,
+            nodes: l.anchors.data,
             onClick: s
           }, null, 8, ["nodes"]),
-          P(f("div", He, null, 512), [
-            [q, (o = i.hyperlinks) == null ? void 0 : o.data.length]
+          P(v("div", He, null, 512), [
+            [H, (o = l.hyperlinks) == null ? void 0 : o.data.length]
           ]),
           P($(R, {
             tag: "div",
@@ -538,27 +538,27 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
             class: "nav-heading"
           }, {
             default: N(() => {
-              var u;
+              var c;
               return [
-                M(w((u = i.hyperlinks) == null ? void 0 : u.text), 1)
+                M(w((c = l.hyperlinks) == null ? void 0 : c.text), 1)
               ];
             }),
             _: 1
           }, 512), [
-            [q, (p = i.hyperlinks) == null ? void 0 : p.text]
+            [H, (p = l.hyperlinks) == null ? void 0 : p.text]
           ]),
-          f("ul", null, [
-            (n(!0), r(T, null, z((d = i.hyperlinks) == null ? void 0 : d.data, (u) => (n(), r("li", {
-              key: u.text
+          v("ul", null, [
+            (n(!0), i(T, null, z((r = l.hyperlinks) == null ? void 0 : r.data, (c) => (n(), i("li", {
+              key: c.text
             }, [
-              $(H, {
+              $(q, {
                 class: "dropdown__link",
                 variant: "ghost",
-                href: u.config.href
+                href: c.config.href
               }, {
                 default: N(() => [
-                  f("span", null, w(u.text), 1),
-                  $(H, { variant: "icon" }, {
+                  v("span", null, w(c.text), 1),
+                  $(q, { variant: "icon" }, {
                     default: N(() => [
                       $(O, {
                         icon: V(Y),
@@ -576,106 +576,106 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), Ke = /* @__PURE__ */ k(Ue, [["__scopeId", "data-v-9b690a76"]]), je = { class: "mobile-navigation" }, Ze = {
+}), Ue = /* @__PURE__ */ k(qe, [["__scopeId", "data-v-9b690a76"]]), Ke = { class: "mobile-navigation" }, je = {
   class: "desktop-navigation",
   id: "collapsible-sidebar-wrapper"
-}, Fe = { id: "collapsible-sidebar-content" }, Je = { id: "collapsible-sidebar" }, Qe = { class: "anchors" }, Xe = /* @__PURE__ */ S({
+}, Ze = { id: "collapsible-sidebar-content" }, Fe = { id: "collapsible-sidebar" }, Je = { class: "anchors" }, Qe = /* @__PURE__ */ S({
   __name: "SlpSideNavigationWithTree",
   props: {
     anchors: {},
     hyperlinks: {},
     alwaysExpanded: { type: Boolean }
   },
-  setup(h) {
-    const e = h, s = L([]), i = L(
-      e.anchors.data.map((l) => ({
-        text: l.text,
-        nodes: l.nodes,
+  setup(f) {
+    const e = f, s = L([]), l = L(
+      e.anchors.data.map((d) => ({
+        text: d.text,
+        nodes: d.nodes,
         config: {
-          href: l.config.href,
-          dataGaName: l.config.dataGaName,
-          dataGaLocation: l.config.dataGaLocation,
+          href: d.config.href,
+          dataGaName: d.config.dataGaName,
+          dataGaLocation: d.config.dataGaLocation,
           depth: 0,
           mobile: !1
         }
       }))
     ), a = L(!0);
     let o = null;
-    const p = (l, v = []) => (l.forEach((m) => {
-      m.config.href && v.push(m.config.href), m.nodes && p(m.nodes, v);
-    }), v), d = (l) => {
-      const v = [], m = (_) => _.some((C, I) => (v.push(I), C.config.href === l || C.nodes && m(C.nodes) ? !0 : (v.pop(), !1)));
-      return m(e.anchors.data), v;
-    }, u = (l) => {
-      let v = 0;
-      const m = (_, C, I) => {
+    const p = (d, g = []) => (d.forEach((h) => {
+      h.config.href && g.push(h.config.href), h.nodes && p(h.nodes, g);
+    }), g), r = (d) => {
+      const g = [], h = (m) => m.some((C, I) => (g.push(I), C.config.href === d || C.nodes && h(C.nodes) ? !0 : (g.pop(), !1)));
+      return h(e.anchors.data), g;
+    }, c = (d) => {
+      let g = 0;
+      const h = (m, C, I) => {
         const G = {
-          text: _.text,
+          text: m.text,
           config: {
-            href: _.config.href,
-            dataGaName: _.config.dataGaName,
-            dataGaLocation: _.config.dataGaLocation
+            href: m.config.href,
+            dataGaName: m.config.dataGaName,
+            dataGaLocation: m.config.dataGaLocation
           }
         };
-        return l && C === 0 && (G.config.isSelected = !0), e.alwaysExpanded ? (s.value[I] === C && (G.config.isSelected = !0), _.nodes && (G.nodes = _.nodes.map(
-          (D, W) => m(D, W, I + 1)
-        ))) : s.value[I] === C && (_.nodes && (I += 1, G.nodes = _.nodes.map(
-          (D, W) => m(D, W, I)
+        return d && C === 0 && (G.config.isSelected = !0), e.alwaysExpanded ? (s.value[I] === C && (G.config.isSelected = !0), m.nodes && (G.nodes = m.nodes.map(
+          (D, W) => h(D, W, I + 1)
+        ))) : s.value[I] === C && (m.nodes && (I += 1, G.nodes = m.nodes.map(
+          (D, W) => h(D, W, I)
         ), I -= 1), I + 1 === s.value.length && (G.config.isSelected = !0)), G;
       };
-      return e.anchors.data.map((_, C) => m(_, C, v));
-    }, t = (l) => {
-      l.forEach((v) => {
-        v.isIntersecting ? (s.value = d(`#${v.target.id}`), e.alwaysExpanded || (i.value = u(!1))) : a.value && !e.alwaysExpanded && (i.value = u(!0), a.value = !1), e.alwaysExpanded && (i.value = u(!1));
+      return e.anchors.data.map((m, C) => h(m, C, g));
+    }, t = (d) => {
+      d.forEach((g) => {
+        g.isIntersecting ? (s.value = r(`#${g.target.id}`), e.alwaysExpanded || (l.value = c(!1))) : a.value && !e.alwaysExpanded && (l.value = c(!0), a.value = !1), e.alwaysExpanded && (l.value = c(!1));
       });
-    }, c = () => {
-      i.value = u(!0), a.value = !1;
-      const l = (window.innerHeight - 120 - 48) * -1;
+    }, u = () => {
+      l.value = c(!0), a.value = !1;
+      const d = (window.innerHeight - 120 - 48) * -1;
       o = new IntersectionObserver(t, {
-        rootMargin: `-120px 0px ${l}px 0px`,
+        rootMargin: `-120px 0px ${d}px 0px`,
         threshold: 0
       }), setTimeout(() => {
-        p(e.anchors.data).forEach((m) => {
-          const _ = document.querySelector(m);
-          _ && (o == null || o.observe(_));
+        p(e.anchors.data).forEach((h) => {
+          const m = document.querySelector(h);
+          m && (o == null || o.observe(m));
         });
       }, 0);
     };
     return A(() => {
-      window.addEventListener("resize", detectMobile), c();
+      u();
     }), F(() => {
-      window.removeEventListener("resize", detectMobile), o && o.disconnect();
-    }), (l, v) => (n(), r("div", null, [
-      f("div", je, [
-        $(Ke, oe(se({ anchors: l.anchors, hyperlinks: l.hyperlinks })), null, 16),
-        b(l.$slots, "default", {}, void 0, !0)
+      o && o.disconnect();
+    }), (d, g) => (n(), i("div", null, [
+      v("div", Ke, [
+        $(Ue, ae(oe({ anchors: d.anchors, hyperlinks: d.hyperlinks })), null, 16),
+        b(d.$slots, "default", {}, void 0, !0)
       ]),
-      f("div", Ze, [
-        f("div", Fe, [
-          b(l.$slots, "default", {}, void 0, !0)
+      v("div", je, [
+        v("div", Ze, [
+          b(d.$slots, "default", {}, void 0, !0)
         ]),
-        f("nav", Je, [
-          b(l.$slots, "header", {}, void 0, !0),
-          f("div", Qe, [
-            l.anchors.text ? (n(), B(R, {
+        v("nav", Fe, [
+          b(d.$slots, "header", {}, void 0, !0),
+          v("div", Je, [
+            d.anchors.text ? (n(), B(R, {
               key: 0,
               tag: "div",
               variant: "body3-bold",
               class: "nav-heading"
             }, {
               default: N(() => [
-                M(w(l.anchors.text), 1)
+                M(w(d.anchors.text), 1)
               ]),
               _: 1
             })) : E("", !0),
-            $(ee, { nodes: i.value }, null, 8, ["nodes"])
+            $(ee, { nodes: l.value }, null, 8, ["nodes"])
           ]),
-          b(l.$slots, "footer", {}, void 0, !0)
+          b(d.$slots, "footer", {}, void 0, !0)
         ])
       ])
     ]));
   }
-}), Tt = /* @__PURE__ */ k(Xe, [["__scopeId", "data-v-15e9e921"]]), Ye = ["id", "aria-describedby"], xe = { class: "slp-tooltip__wrapper" }, et = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], tt = ["id"], at = ["id", "aria-describedby"], ot = { class: "slp-tooltip__wrapper" }, st = ["id", "innerHTML"], nt = ["id"], lt = /* @__PURE__ */ S({
+}), Nt = /* @__PURE__ */ k(Qe, [["__scopeId", "data-v-28e2fc48"]]), Xe = ["id", "aria-describedby"], Ye = { class: "slp-tooltip__wrapper" }, xe = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], et = ["id"], tt = ["id", "aria-describedby"], at = { class: "slp-tooltip__wrapper" }, ot = ["id", "innerHTML"], st = ["id"], nt = /* @__PURE__ */ S({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -685,24 +685,24 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
     id: { default: "" },
     dataProperties: { default: null }
   },
-  setup(h) {
-    const e = h, s = L(!1), i = L(""), a = L(""), o = L(""), p = (t) => {
+  setup(f) {
+    const e = f, s = L(!1), l = L(""), a = L(""), o = L(""), p = (t) => {
       e.mode === "hover" && (s.value = t.type === "mouseenter");
-    }, d = () => {
+    }, r = () => {
       s.value = e.mode === "click" ? !s.value : !1;
-    }, u = (t) => {
+    }, c = (t) => {
       t.target.id !== e.id && (s.value = !1);
     };
     return A(() => {
-      if (e.mode === "click" && document.addEventListener("click", u), e.text) {
-        const t = e.text.match(/\[(.*?)\]/), c = e.text.match(/\((.*?)\)/);
-        i.value = t ? t[1] : "", a.value = c ? c[1] : "", o.value = e.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
+      if (e.mode === "click" && document.addEventListener("click", c), e.text) {
+        const t = e.text.match(/\[(.*?)\]/), u = e.text.match(/\((.*?)\)/);
+        l.value = t ? t[1] : "", a.value = u ? u[1] : "", o.value = e.text.replace(`(${a.value})`, "").replace(`[${l.value}]`, "").trim();
       }
     }), J(() => {
-      document.removeEventListener("click", u);
-    }), (t, c) => {
-      var l, v, m;
-      return t.mode === "hover" ? (n(), r("div", {
+      document.removeEventListener("click", c);
+    }), (t, u) => {
+      var d, g, h;
+      return t.mode === "hover" ? (n(), i("div", {
         key: 0,
         id: t.id,
         "aria-label": "Click to open tooltip with more information.",
@@ -710,115 +710,115 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
         class: "slp-tooltip",
         onMouseenter: p,
         onMouseleave: p,
-        onClick: d
+        onClick: r
       }, [
-        f("div", xe, [
+        v("div", Ye, [
           b(t.$slots, "default", {}, void 0, !0),
-          s.value ? (n(), r("div", {
+          s.value ? (n(), i("div", {
             key: 0,
-            class: g(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
+            class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
           }, [
             M(w(o.value) + " ", 1),
-            t.text ? (n(), r("a", {
+            t.text ? (n(), i("a", {
               key: 0,
               id: `${t.id}-content`,
               "data-ga-features": t.dataProperties && t.dataProperties.features.toLowerCase() || null,
-              "data-ga-features-sub": (l = t.dataProperties) == null ? void 0 : l.sub,
-              "data-ga-features-sub-card": (v = t.dataProperties) == null ? void 0 : v.card,
-              "data-ga-name": (m = t.dataProperties) == null ? void 0 : m.plan,
+              "data-ga-features-sub": (d = t.dataProperties) == null ? void 0 : d.sub,
+              "data-ga-features-sub-card": (g = t.dataProperties) == null ? void 0 : g.card,
+              "data-ga-name": (h = t.dataProperties) == null ? void 0 : h.plan,
               "data-ga-location": t.dataProperties ? "features content" : null,
               role: "tooltip",
               href: a.value
-            }, w(i.value), 9, et)) : t.list ? (n(), r("ul", {
+            }, w(l.value), 9, xe)) : t.list ? (n(), i("ul", {
               key: 1,
               id: `${t.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (n(!0), r(T, null, z(t.list, (_) => (n(), r("li", {
-                key: _.text
-              }, w(_.text), 1))), 128))
-            ], 8, tt)) : E("", !0)
+              (n(!0), i(T, null, z(t.list, (m) => (n(), i("li", {
+                key: m.text
+              }, w(m.text), 1))), 128))
+            ], 8, et)) : E("", !0)
           ], 2)) : E("", !0)
         ])
-      ], 40, Ye)) : (n(), r("button", {
+      ], 40, Xe)) : (n(), i("button", {
         key: 1,
         id: t.id,
         "aria-label": "Click to open tooltip with more information.",
         "aria-describedby": `${t.id}-content`,
-        class: g(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
-        onClick: d
+        class: _(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
+        onClick: r
       }, [
-        f("div", ot, [
+        v("div", at, [
           b(t.$slots, "default", {}, void 0, !0),
-          s.value ? (n(), r("div", {
+          s.value ? (n(), i("div", {
             key: 0,
-            class: g(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
+            class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
           }, [
-            t.text ? (n(), r("span", {
+            t.text ? (n(), i("span", {
               key: 0,
               id: `${t.id}-content`,
               role: "tooltip",
               innerHTML: t.text
-            }, null, 8, st)) : (n(), r("ul", {
+            }, null, 8, ot)) : (n(), i("ul", {
               key: 1,
               id: `${t.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (n(!0), r(T, null, z(t.list, (_) => (n(), r("li", {
-                key: _.text
-              }, w(_.text), 1))), 128))
-            ], 8, nt))
+              (n(!0), i(T, null, z(t.list, (m) => (n(), i("li", {
+                key: m.text
+              }, w(m.text), 1))), 128))
+            ], 8, st))
           ], 2)) : E("", !0)
         ])
-      ], 10, at));
+      ], 10, tt));
     };
   }
-}), it = /* @__PURE__ */ k(lt, [["__scopeId", "data-v-1280f345"]]), rt = {
+}), lt = /* @__PURE__ */ k(nt, [["__scopeId", "data-v-1280f345"]]), it = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, dt = ["onMouseenter", "onMouseleave"], ct = ["data-ga-name", "data-ga-location", "href"], ut = {
+}, rt = ["onMouseenter", "onMouseleave"], dt = ["data-ga-name", "data-ga-location", "href"], ct = {
   key: 0,
   class: "breadcrumb__chevron"
-}, pt = ["content"], vt = {
+}, ut = ["content"], pt = {
   key: 1,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, ft = ["href", "data-ga-name", "data-ga-location"], ht = ["content"], gt = /* @__PURE__ */ S({
+}, vt = ["href", "data-ga-name", "data-ga-location"], ft = ["content"], ht = /* @__PURE__ */ S({
   __name: "SlpBreadcrumb",
   props: {
     crumbs: { default: () => [] },
     router: {}
   },
-  setup(h) {
-    const e = h, s = L(e.crumbs), i = L(!1), a = (d) => {
-      const u = d.split(" ");
-      for (let t = 0; t < u.length; t++)
-        u[t] = u[t][0].toUpperCase() + u[t].substr(1);
-      return u.join(" ");
+  setup(f) {
+    const e = f, s = L(e.crumbs), l = L(!1), a = (r) => {
+      const c = r.split(" ");
+      for (let t = 0; t < c.length; t++)
+        c[t] = c[t][0].toUpperCase() + c[t].substr(1);
+      return c.join(" ");
     }, o = () => {
-      i.value = window.innerWidth < 768;
-    }, p = (d) => {
-      s.value[d] && (s.value[d] = {
-        ...s.value[d],
-        hover: !s.value[d].hover
+      l.value = window.innerWidth < 768;
+    }, p = (r) => {
+      s.value[r] && (s.value[r] = {
+        ...s.value[r],
+        hover: !s.value[r].hover
       });
     };
-    return ne(() => {
+    return se(() => {
       if (e.router) {
-        const d = e.router.currentRoute.path, u = d.startsWith("/") ? d.substring(1).split("/") : d.split("/"), t = [];
-        let c = "";
-        u.forEach((l) => {
-          c = `${c}/${l}`;
-          const v = e.router.match(c);
-          v.params.slug !== null && l.length && t.push({
-            title: a(l.replace(/-/g, " ")),
+        const r = e.router.currentRoute.path, c = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), t = [];
+        let u = "";
+        c.forEach((d) => {
+          u = `${u}/${d}`;
+          const g = e.router.match(u);
+          g.params.slug !== null && d.length && t.push({
+            title: a(d.replace(/-/g, " ")),
             hover: !1,
-            ...v
+            ...g
           });
         }), s.value = t;
       }
@@ -826,29 +826,29 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       o(), window.addEventListener("resize", o);
     }), J(() => {
       window.removeEventListener("resize", o);
-    }), (d, u) => s.value && !i.value ? (n(), r("ol", rt, [
-      (n(!0), r(T, null, z(s.value, (t, c) => (n(), r("li", {
+    }), (r, c) => s.value && !l.value ? (n(), i("ol", it, [
+      (n(!0), i(T, null, z(s.value, (t, u) => (n(), i("li", {
         key: t.title,
-        class: g(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": c === s.value.length - 1
+        class: _(["breadcrumb__crumb", {
+          "breadcrumb__crumb--disabled": u === s.value.length - 1
         }]),
         property: "itemListElement",
         typeof: "ListItem",
-        onMouseenter: (l) => p(c),
-        onMouseleave: (l) => p(c)
+        onMouseenter: (d) => p(u),
+        onMouseleave: (d) => p(u)
       }, [
-        $(it, {
+        $(lt, {
           text: t.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
         }, {
           default: N(() => [
-            f("a", {
+            v("a", {
               property: "item",
               typeof: "WebPage",
               "data-ga-name": t.dataGaName || t.title.toLowerCase(),
               "data-ga-location": t.dataGaLocation || "breadcrumb",
-              href: c !== s.value.length - 1 ? t.path : void 0
+              href: u !== s.value.length - 1 ? t.path : void 0
             }, [
               $(R, {
                 tag: "span",
@@ -860,30 +860,30 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
                 ]),
                 _: 2
               }, 1024)
-            ], 8, ct)
+            ], 8, dt)
           ]),
           _: 2
         }, 1032, ["text"]),
-        c !== s.value.length - 1 ? (n(), r("span", ut, [
+        u !== s.value.length - 1 ? (n(), i("span", ct, [
           $(O, {
             color: "accent-500",
             size: "xs",
             icon: V(Y)
           }, null, 8, ["icon"])
         ])) : E("", !0),
-        f("meta", {
+        v("meta", {
           property: "position",
-          content: c + 1
-        }, null, 8, pt)
-      ], 42, dt))), 128))
-    ])) : s.value && i.value ? (n(), r("ol", vt, [
-      (n(!0), r(T, null, z(s.value, (t) => (n(), r("li", {
+          content: u + 1
+        }, null, 8, ut)
+      ], 42, rt))), 128))
+    ])) : s.value && l.value ? (n(), i("ol", pt, [
+      (n(!0), i(T, null, z(s.value, (t) => (n(), i("li", {
         key: t.title,
         class: "breadcrumb__crumb breadcrumb__crumb--mobile",
         property: "itemListElement",
         typeof: "ListItem"
       }, [
-        f("a", {
+        v("a", {
           class: "slp-flex slp-align-items-center",
           href: s.value[s.value.length - 2].path,
           "data-ga-name": t.dataGaName || t.title.toLowerCase(),
@@ -891,11 +891,11 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
           property: "item",
           typeof: "WebPage"
         }, [
-          f("span", null, [
+          v("span", null, [
             $(O, {
               color: "accent-500",
               size: "xs",
-              icon: V(ie)
+              icon: V(le)
             }, null, 8, ["icon"])
           ]),
           $(R, {
@@ -909,18 +909,18 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
             ]),
             _: 1
           })
-        ], 8, ft),
-        f("meta", {
+        ], 8, vt),
+        v("meta", {
           property: "position",
           content: s.value.length - 1
-        }, null, 8, ht)
+        }, null, 8, ft)
       ]))), 128))
     ])) : E("", !0);
   }
-}), zt = /* @__PURE__ */ k(gt, [["__scopeId", "data-v-fd412793"]]), mt = ["value"], _t = {
+}), Tt = /* @__PURE__ */ k(ht, [["__scopeId", "data-v-fd412793"]]), gt = ["value"], mt = {
   key: 1,
   class: "dropdown"
-}, bt = /* @__PURE__ */ S({
+}, _t = /* @__PURE__ */ S({
   __name: "SlpDropdown",
   props: {
     modelValue: {},
@@ -929,55 +929,55 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
     valueKey: {}
   },
   emits: ["update:modelValue"],
-  setup(h, { emit: e }) {
-    const s = h, i = e, a = (d, u) => {
-      if (typeof d == "object" && d !== null) {
-        if (!u) {
-          const l = Object.keys(d)[0];
-          return d[l];
+  setup(f, { emit: e }) {
+    const s = f, l = e, a = (r, c) => {
+      if (typeof r == "object" && r !== null) {
+        if (!c) {
+          const d = Object.keys(r)[0];
+          return r[d];
         }
-        const t = u.split(".");
-        let c = d;
-        for (const l of t)
-          c = c == null ? void 0 : c[l];
-        return c;
+        const t = c.split(".");
+        let u = r;
+        for (const d of t)
+          u = u == null ? void 0 : u[d];
+        return u;
       }
-      return d;
+      return r;
     }, o = y(() => s.options.length > 0 ? a(s.options[0], s.valueKey) : ""), p = y({
       // Getter: Called when the template reads selectedValue
       // Returns the current modelValue from parent (or empty string if undefined)
       get: () => s.modelValue ?? o.value,
       // Setter: Called when the select's v-model updates selectedValue
       // Emits the new value to the parent component
-      set: (d) => i("update:modelValue", d)
+      set: (r) => l("update:modelValue", r)
     });
-    return (d, u) => {
+    return (r, c) => {
       var t;
-      return (t = d.options) != null && t.length ? P((n(), r("select", {
+      return (t = r.options) != null && t.length ? P((n(), i("select", {
         key: 0,
-        "onUpdate:modelValue": u[0] || (u[0] = (c) => p.value = c),
+        "onUpdate:modelValue": c[0] || (c[0] = (u) => p.value = u),
         class: "dropdown"
       }, [
-        (n(!0), r(T, null, z(d.options, (c, l) => (n(), r("option", {
-          key: `${a(c, d.valueKey)}-${l}`,
-          value: a(c, d.valueKey)
-        }, w(a(c, d.labelKey)), 9, mt))), 128))
+        (n(!0), i(T, null, z(r.options, (u, d) => (n(), i("option", {
+          key: `${a(u, r.valueKey)}-${d}`,
+          value: a(u, r.valueKey)
+        }, w(a(u, r.labelKey)), 9, gt))), 128))
       ], 512)), [
-        [le, p.value]
-      ]) : (n(), r("div", _t, u[1] || (u[1] = [
-        f("p", null, "No options available", -1)
+        [ne, p.value]
+      ]) : (n(), i("div", mt, c[1] || (c[1] = [
+        v("p", null, "No options available", -1)
       ])));
     };
   }
-}), Et = /* @__PURE__ */ k(bt, [["__scopeId", "data-v-4a5d0657"]]), yt = ["id"], $t = /* @__PURE__ */ S({
+}), zt = /* @__PURE__ */ k(_t, [["__scopeId", "data-v-4a5d0657"]]), bt = ["id"], yt = /* @__PURE__ */ S({
   __name: "SlpSection",
   props: {
     backgroundColor: {
       type: String,
       required: !1,
-      validator(h) {
-        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(h), s = /^\$color-[a-zA-Z0-9-]+$/.test(h);
-        return h ? e || s : !0;
+      validator(f) {
+        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(f), s = /^\$color-[a-zA-Z0-9-]+$/.test(f);
+        return f ? e || s : !0;
       }
     },
     id: {
@@ -985,18 +985,18 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
       required: !1
     }
   },
-  setup(h) {
-    const e = h, s = y(() => {
+  setup(f) {
+    const e = f, s = y(() => {
       var a;
       return !e.backgroundColor || (a = e.backgroundColor) != null && a.startsWith("$") ? {} : { backgroundColor: e.backgroundColor };
-    }), i = y(() => {
+    }), l = y(() => {
       var a, o;
       return (a = e.backgroundColor) != null && a.startsWith("$") ? `slp-background-${(o = e.backgroundColor) == null ? void 0 : o.slice(1)}` : null;
     });
-    return (a, o) => (n(), r("section", {
+    return (a, o) => (n(), i("section", {
       style: Z(s.value),
-      class: g(i.value),
-      id: h.id || void 0
+      class: _(l.value),
+      id: f.id || void 0
     }, [
       $(x, null, {
         default: N(() => [
@@ -1004,23 +1004,23 @@ const Lt = /* @__PURE__ */ k(ke, [["render", Se], ["__scopeId", "data-v-adc8d02f
         ]),
         _: 3
       })
-    ], 14, yt));
+    ], 14, bt));
   }
-}), Vt = /* @__PURE__ */ k($t, [["__scopeId", "data-v-2b3ad016"]]);
+}), Et = /* @__PURE__ */ k(yt, [["__scopeId", "data-v-2b3ad016"]]);
 export {
-  zt as SlpBreadcrumb,
-  H as SlpButton,
-  St as SlpColumn,
+  Tt as SlpBreadcrumb,
+  q as SlpButton,
+  wt as SlpColumn,
   x as SlpContainer,
-  Et as SlpDropdown,
+  zt as SlpDropdown,
   O as SlpIcon,
-  Nt as SlpLoader,
-  Be as SlpRadioButton,
-  It as SlpRadioButtonGroup,
-  Lt as SlpRow,
-  Vt as SlpSection,
-  Ct as SlpSideNavigation,
-  Tt as SlpSideNavigationWithTree,
-  it as SlpTooltip,
+  It as SlpLoader,
+  Ge as SlpRadioButton,
+  Ct as SlpRadioButtonGroup,
+  St as SlpRow,
+  Et as SlpSection,
+  Lt as SlpSideNavigation,
+  Nt as SlpSideNavigationWithTree,
+  lt as SlpTooltip,
   R as SlpTypography
 };