slippers-ui 3.1.17 → 3.1.19

package/dist/slippers-ui.es.js

@@ -1,142 +1,142 @@
-import { defineComponent as L, computed as $, openBlock as s, createElementBlock as r, mergeProps as H, renderSlot as b, normalizeClass as _, createElementVNode as v, createBlock as O, resolveDynamicComponent as j, normalizeStyle as Z, withCtx as N, createCommentVNode as M, ref as k, onMounted as P, onUnmounted as J, createVNode as y, unref as G, Fragment as T, renderList as z, withModifiers as q, toDisplayString as w, createTextVNode as B, resolveComponent as ne, withDirectives as F, vShow as D, normalizeProps as se, guardReactiveProps as le, onBeforeUnmount as K, onBeforeMount as Q, watch as U, vModelSelect as ie } from "vue";
-import { _ as S, C as X, a as Y, b as x, c as re } from "./chunks/ChevronLgUp-EczI5oF8.js";
-const de = ["href"], ce = /* @__PURE__ */ L({
+import { defineComponent as I, computed as k, openBlock as s, createElementBlock as r, mergeProps as j, renderSlot as b, normalizeClass as g, createElementVNode as v, createBlock as R, resolveDynamicComponent as K, normalizeStyle as Q, withCtx as N, createCommentVNode as B, ref as w, onMounted as D, nextTick as se, onUnmounted as X, createVNode as $, unref as G, Fragment as T, renderList as z, withModifiers as Z, toDisplayString as S, createTextVNode as V, resolveComponent as le, withDirectives as P, vShow as H, normalizeProps as ie, guardReactiveProps as re, onBeforeUnmount as Y, onBeforeMount as x, watch as J, vModelSelect as de } from "vue";
+import { _ as C, C as ee, a as te, b as ae, c as ce } from "./chunks/ChevronLgUp-EczI5oF8.js";
+const ue = ["href"], pe = /* @__PURE__ */ I({
   __name: "SlpButton",
   props: {
     disabled: { type: Boolean },
     variant: {},
     href: {}
   },
-  setup(p) {
-    const e = p, o = $(() => e.disabled ?? !1), i = $(() => e.variant ?? "primary");
-    $(() => e.href ?? "");
-    const a = $(() => {
-      let n = [`slp-btn-${i.value}`];
+  setup(u) {
+    const e = u, o = k(() => e.disabled ?? !1), l = k(() => e.variant ?? "primary");
+    k(() => e.href ?? "");
+    const a = k(() => {
+      let n = [`slp-btn-${l.value}`];
       return o.value && n.push("slp-btn-disabled"), n.join(" ");
     });
-    return (n, d) => e.href ? (s(), r("a", H({ key: 0 }, n.$attrs, {
+    return (n, d) => e.href ? (s(), r("a", j({ key: 0 }, n.$attrs, {
       class: ["slp-btn", a.value],
       href: e.href
     }), [
       b(n.$slots, "default", {}, void 0, !0)
-    ], 16, de)) : (s(), r("button", H({ key: 1 }, n.$attrs, {
+    ], 16, ue)) : (s(), r("button", j({ key: 1 }, n.$attrs, {
       class: ["slp-btn", a.value],
       type: "button"
     }), [
       b(n.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), W = /* @__PURE__ */ S(ce, [["__scopeId", "data-v-56e2df5f"]]), ue = /* @__PURE__ */ L({
+}), U = /* @__PURE__ */ C(pe, [["__scopeId", "data-v-56e2df5f"]]), fe = /* @__PURE__ */ I({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
-  setup(p) {
-    const e = p, o = $(() => e.cols ?? null), i = $(() => e.size ?? "md"), a = $(() => o.value ? `slp-col-${i.value}-${o.value}` : `slp-col-${i.value}`);
+  setup(u) {
+    const e = u, o = k(() => e.cols ?? null), l = k(() => e.size ?? "md"), a = k(() => o.value ? `slp-col-${l.value}-${o.value}` : `slp-col-${l.value}`);
     return (n, d) => (s(), r("div", {
-      class: _(a.value)
+      class: g(a.value)
     }, [
       b(n.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), It = /* @__PURE__ */ S(ue, [["__scopeId", "data-v-00b68f22"]]), pe = {
+}), Tt = /* @__PURE__ */ C(fe, [["__scopeId", "data-v-00b68f22"]]), ve = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, fe = {
+}, he = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, ve = {
+}, me = {
   key: 2,
   class: "slp-gradient-background"
-}, he = {
+}, ge = {
   key: 3,
   class: "slp-full-gradient-background"
-}, me = {
+}, _e = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, ge = {
+}, be = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, _e = {
+}, ye = {
   key: 6,
   class: "slp-half-grey-background"
-}, be = {
+}, $e = {
   key: 7,
   class: "slp-partial-white-background"
-}, ye = {
+}, ke = {
   key: 8,
   class: "slp-partial-grey-background"
-}, $e = /* @__PURE__ */ L({
+}, we = /* @__PURE__ */ I({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
-  setup(p) {
-    const e = p, o = $(() => e.fluid ?? !1), i = $(() => e.variant ?? "white"), a = $(() => o.value ? "fluid" : "");
-    return (n, d) => i.value === "light-purple-100" ? (s(), r("div", pe, [
+  setup(u) {
+    const e = u, o = k(() => e.fluid ?? !1), l = k(() => e.variant ?? "white"), a = k(() => o.value ? "fluid" : "");
+    return (n, d) => l.value === "light-purple-100" ? (s(), r("div", ve, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-100" ? (s(), r("div", fe, [
+    ])) : l.value === "grey-100" ? (s(), r("div", he, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient" ? (s(), r("div", ve, [
+    ])) : l.value === "gradient" ? (s(), r("div", me, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient-full" ? (s(), r("div", he, [
+    ])) : l.value === "gradient-full" ? (s(), r("div", ge, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-100" ? (s(), r("div", me, [
+    ])) : l.value === "charcoal-100" ? (s(), r("div", _e, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-75" ? (s(), r("div", ge, [
+    ])) : l.value === "charcoal-75" ? (s(), r("div", be, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-50" ? (s(), r("div", _e, [
+    ])) : l.value === "grey-50" ? (s(), r("div", ye, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "white-75" ? (s(), r("div", be, [
+    ])) : l.value === "white-75" ? (s(), r("div", $e, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-75" ? (s(), r("div", ye, [
+    ])) : l.value === "grey-75" ? (s(), r("div", ke, [
       v("div", {
-        class: _(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
         b(n.$slots, "default", {}, void 0, !0)
       ], 2)
     ])) : (s(), r("div", {
       key: 9,
-      class: _(["slp-container", a.value])
+      class: g(["slp-container", a.value])
     }, [
       b(n.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), ee = /* @__PURE__ */ S($e, [["__scopeId", "data-v-67a0761e"]]), ke = /* @__PURE__ */ L({
+}), oe = /* @__PURE__ */ C(we, [["__scopeId", "data-v-67a0761e"]]), Se = /* @__PURE__ */ I({
   __name: "SlpIcon",
   props: {
     size: {
@@ -155,11 +155,11 @@ const de = ["href"], ce = /* @__PURE__ */ L({
       required: !0
     }
   },
-  setup(p) {
-    const e = p, o = $(() => {
+  setup(u) {
+    const e = u, o = k(() => {
       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 = $(() => {
+    }), l = k(() => {
       var n;
       const a = {};
       if ((n = e.color) != null && n.startsWith("#") && (a.color = e.color, a.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
@@ -169,32 +169,32 @@ const de = ["href"], ce = /* @__PURE__ */ L({
       return a;
     });
     return (a, n) => {
-      var d, l;
-      return s(), O(j(p.icon), {
-        class: _(["slp-icon", o.value]),
-        style: Z(i.value),
+      var d, i;
+      return s(), R(K(u.icon), {
+        class: g(["slp-icon", o.value]),
+        style: Q(l.value),
         role: "img",
         "aria-hidden": "true",
-        "data-icon-name": ((l = (d = p.icon) == null ? void 0 : d.__docgenInfo) == null ? void 0 : l.displayName) || ""
+        "data-icon-name": ((i = (d = u.icon) == null ? void 0 : d.__docgenInfo) == null ? void 0 : i.displayName) || ""
       }, null, 8, ["class", "style", "data-icon-name"]);
     };
   }
-}), R = /* @__PURE__ */ S(ke, [["__scopeId", "data-v-b82aeda9"]]), we = {}, Se = { class: "slp-row" };
-function Ce(p, e) {
-  return s(), r("div", Se, [
-    b(p.$slots, "default", {}, void 0, !0)
+}), A = /* @__PURE__ */ C(Se, [["__scopeId", "data-v-b82aeda9"]]), Ce = {}, Le = { class: "slp-row" };
+function Ie(u, e) {
+  return s(), r("div", Le, [
+    b(u.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f"]]), Le = {
+const zt = /* @__PURE__ */ C(Ce, [["render", Ie], ["__scopeId", "data-v-adc8d02f"]]), Ne = {
   key: 0,
   class: "arrow-symbol"
-}, Ie = /* @__PURE__ */ L({
+}, Te = /* @__PURE__ */ I({
   __name: "SlpTypography",
   props: {
     variant: {},
     tag: {}
   },
-  setup(p) {
+  setup(u) {
     const e = [
       "display1",
       "heading1",
@@ -217,21 +217,21 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], o = ["span", "h1", "h2", "h3", "h4", "p", "div"], i = p, a = $(() => e.includes(i.variant || "") ? i.variant : "body1"), n = $(() => o.includes(i.tag || "") ? i.tag : "span"), d = $(() => `slp-text-${a.value}`);
-    return (l, c) => (s(), O(j(n.value), {
-      class: _(d.value)
+    ], o = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], l = u, a = k(() => e.includes(l.variant || "") ? l.variant : "body1"), n = k(() => o.includes(l.tag || "") ? l.tag : "span"), d = k(() => `slp-text-${a.value}`);
+    return (i, c) => (s(), R(K(n.value), {
+      class: g(d.value)
     }, {
       default: N(() => [
-        b(l.$slots, "default", {}, void 0, !0),
-        a.value === "arrow" ? (s(), r("span", Le, "→")) : M("", !0)
+        b(i.$slots, "default", {}, void 0, !0),
+        a.value === "arrow" ? (s(), r("span", Ne, "→")) : B("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), A = /* @__PURE__ */ S(Ie, [["__scopeId", "data-v-fba90f83"]]), Ne = {
+}), F = /* @__PURE__ */ C(Te, [["__scopeId", "data-v-f601c702"]]), ze = {
   key: 0,
   class: "dropdown-menu"
-}, Te = ["onClick"], ze = { class: "side-navigation" }, Me = ["data-ga-name", "onClick"], Ee = /* @__PURE__ */ L({
+}, Ee = ["onClick"], Me = { class: "side-navigation" }, Be = ["data-ga-name", "onClick"], Ge = /* @__PURE__ */ I({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -247,38 +247,41 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       required: !0
     }
   },
-  setup(p) {
-    const e = p, o = k(null), i = (f) => {
-      o.value && !o.value.contains(f.target) && (l.value = !1);
-    }, a = k(null), n = k(null);
+  setup(u) {
+    const e = u, o = w(null), l = (p) => {
+      o.value && !o.value.contains(p.target) && (i.value = !1);
+    }, a = w(null), n = w(null);
     let d = null;
-    const l = k(!1), c = (f) => {
-      const g = document.getElementById(f);
-      g && g.scrollIntoView({ behavior: "smooth" }), l.value = !1;
+    const i = w(!1), c = (p) => {
+      const h = document.getElementById(p);
+      h && h.scrollIntoView({ behavior: "smooth" }), i.value = !1;
     }, t = () => {
       if (!n.value) return;
-      const f = e.navigationItems.map((h) => document.getElementById(h.id)).filter((h) => h !== null), g = (window.innerHeight - 140 - 1) * -1;
+      const p = e.navigationItems.map((h) => document.getElementById(h.id)).filter((h) => h !== null);
       d = new IntersectionObserver(
         (h) => {
-          h.forEach((u) => {
-            if (u.isIntersecting) {
-              const m = u.target.getAttribute("id");
-              m && (a.value = m);
+          h.forEach((m) => {
+            if (m.isIntersecting) {
+              const f = m.target.getAttribute("id");
+              f && (a.value = f);
             }
           });
         },
         {
-          rootMargin: `-120px 0px ${g}px 0px`,
-          threshold: Array.from({ length: 99 }, (h, u) => (u + 2) / 100)
+          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 }, (h, m) => (m + 2) / 100)
         }
-      ), f.forEach((h) => d == null ? void 0 : d.observe(h));
+      ), p.forEach((h) => d == null ? void 0 : d.observe(h));
     };
-    return P(() => {
-      t(), document.addEventListener("click", i);
-    }), J(() => {
-      d && d.disconnect(), document.removeEventListener("click", i);
-    }), (f, g) => (s(), r("div", {
-      class: _([
+    return D(() => {
+      document.addEventListener("click", l), se(() => {
+        t();
+      });
+    }), X(() => {
+      d && d.disconnect(), document.removeEventListener("click", l);
+    }), (p, h) => (s(), r("div", {
+      class: g([
         "side-navigation-layout",
         `side-navigation-layout--${e.position}`,
         { "side-navigation--dark": e.darkMode }
@@ -291,41 +294,41 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       }, [
         v("button", {
           class: "dropdown-toggle",
-          onClick: g[0] || (g[0] = (h) => l.value = !l.value)
+          onClick: h[0] || (h[0] = (m) => i.value = !i.value)
         }, [
-          g[1] || (g[1] = v("span", null, "Jump to a section", -1)),
-          y(R, {
-            icon: l.value ? G(X) : G(Y),
+          h[1] || (h[1] = v("span", null, "Jump to a section", -1)),
+          $(A, {
+            icon: i.value ? G(ee) : G(te),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        l.value ? (s(), r("ul", Ne, [
-          (s(!0), r(T, null, z(e.navigationItems, (h) => (s(), r("li", {
-            key: h.id,
+        i.value ? (s(), r("ul", ze, [
+          (s(!0), r(T, null, z(e.navigationItems, (m) => (s(), r("li", {
+            key: m.id,
             class: "dropdown-item"
           }, [
             v("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: q((u) => c(h.id), ["prevent"])
-            }, w(h.text), 9, Te)
+              onClick: Z((f) => c(m.id), ["prevent"])
+            }, S(m.text), 9, Ee)
           ]))), 128))
-        ])) : M("", !0)
+        ])) : B("", !0)
       ], 512),
-      v("nav", ze, [
+      v("nav", Me, [
         v("ul", null, [
-          (s(!0), r(T, null, z(e.navigationItems, (h) => (s(), r("li", {
-            key: h.id,
+          (s(!0), r(T, null, z(e.navigationItems, (m) => (s(), r("li", {
+            key: m.id,
             class: "side-navigation__item"
           }, [
             v("a", {
               href: "#",
-              class: _(["side-navigation__link", { "side-navigation__link--active": a.value === h.id }]),
-              "data-ga-name": h.text,
+              class: g(["side-navigation__link", { "side-navigation__link--active": a.value === m.id }]),
+              "data-ga-name": m.text,
               "data-ga-location": "side anchor",
-              onClick: q((u) => c(h.id), ["prevent"])
-            }, w(h.text), 11, Me)
+              onClick: Z((f) => c(m.id), ["prevent"])
+            }, S(m.text), 11, Be)
           ]))), 128))
         ])
       ]),
@@ -334,11 +337,11 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
         ref: n,
         class: "side-navigation-content"
       }, [
-        b(f.$slots, "default", {}, void 0, !0)
+        b(p.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), Tt = /* @__PURE__ */ S(Ee, [["__scopeId", "data-v-76494345"]]), Ge = ["for"], Be = ["name", "value", "id", "checked", "disabled"], Ve = /* @__PURE__ */ L({
+}), Et = /* @__PURE__ */ C(Ge, [["__scopeId", "data-v-68f8d83f"]]), Ve = ["for"], Oe = ["name", "value", "id", "checked", "disabled"], Re = /* @__PURE__ */ I({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -346,32 +349,32 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
     config: {}
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
-    const o = e, i = (a) => {
+  setup(u, { emit: e }) {
+    const o = e, l = (a) => {
       const n = a.target;
       o("update:modelValue", n.value);
     };
     return (a, n) => {
-      var d, l, c;
+      var d, i, c;
       return s(), r("label", {
         for: a.option,
-        class: _(["slp-radio", { disabled: (d = a.config) == null ? void 0 : d.disabled }])
+        class: g(["slp-radio", { disabled: (d = a.config) == null ? void 0 : d.disabled }])
       }, [
-        B(w(a.option) + " ", 1),
+        V(S(a.option) + " ", 1),
         v("input", {
           type: "radio",
           name: a.name,
           value: a.option,
           id: a.option,
-          onInput: i,
-          checked: (l = a.config) == null ? void 0 : l.checked,
+          onInput: l,
+          checked: (i = a.config) == null ? void 0 : i.checked,
           disabled: (c = a.config) == null ? void 0 : c.disabled
-        }, null, 40, Be),
+        }, null, 40, Oe),
         n[0] || (n[0] = v("span", { class: "slp-radio__checkmark" }, null, -1))
-      ], 10, Ge);
+      ], 10, Ve);
     };
   }
-}), Oe = /* @__PURE__ */ S(Ve, [["__scopeId", "data-v-f37e970e"]]), Re = /* @__PURE__ */ L({
+}), Ae = /* @__PURE__ */ C(Re, [["__scopeId", "data-v-f37e970e"]]), Fe = /* @__PURE__ */ I({
   __name: "SlpRadioButtonGroup",
   props: {
     options: {},
@@ -382,23 +385,23 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
     } }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
+  setup(u, { emit: e }) {
     const o = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, i = e, a = (n) => {
-      i("update:modelValue", n);
+    }, l = e, a = (n) => {
+      l("update:modelValue", n);
     };
     return (n, d) => {
-      var l, c;
-      return s(), O(ee, {
-        class: _(["slp-radio-group", {
-          "slp-radio-group--vertical": ((l = n.config) == null ? void 0 : l.orientation) === o.VERTICAL,
+      var i, c;
+      return s(), R(oe, {
+        class: g(["slp-radio-group", {
+          "slp-radio-group--vertical": ((i = n.config) == null ? void 0 : i.orientation) === o.VERTICAL,
           "slp-radio-group--horizontal": ((c = n.config) == null ? void 0 : c.orientation) === o.HORIZONTAL
         }])
       }, {
         default: N(() => [
-          (s(!0), r(T, null, z(n.options, (t) => (s(), O(Oe, {
+          (s(!0), r(T, null, z(n.options, (t) => (s(), R(Ae, {
             key: t.value,
             option: t.value,
             name: n.name,
@@ -413,26 +416,26 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       }, 8, ["class"]);
     };
   }
-}), zt = /* @__PURE__ */ S(Re, [["__scopeId", "data-v-ae31ec89"]]), Ae = {
+}), Mt = /* @__PURE__ */ C(Fe, [["__scopeId", "data-v-ae31ec89"]]), Pe = {
   key: 0,
   class: "slp-loading-round"
-}, Fe = {
+}, De = {
   key: 1,
   class: "slp-loading-linear"
-}, Pe = /* @__PURE__ */ L({
+}, We = /* @__PURE__ */ I({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
     config: {}
   },
-  setup(p) {
-    const e = p;
-    return (o, i) => {
+  setup(u) {
+    const e = u;
+    return (o, l) => {
       var a;
-      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), r("div", Ae)) : (s(), r("div", Fe));
+      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), r("div", Pe)) : (s(), r("div", De));
     };
   }
-}), Mt = /* @__PURE__ */ S(Pe, [["__scopeId", "data-v-ee32411b"]]), De = ["href", "data-ga-name", "data-ga-location"], We = /* @__PURE__ */ L({
+}), Bt = /* @__PURE__ */ C(We, [["__scopeId", "data-v-ee32411b"]]), qe = ["href", "data-ga-name", "data-ga-location"], He = /* @__PURE__ */ I({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -446,90 +449,90 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       mobile: !1
     }) }
   },
-  setup(p) {
+  setup(u) {
     return (e, o) => {
-      var a, n, d, l, c, t;
-      const i = ne("Tree", !0);
+      var a, n, d, i, c, t;
+      const l = le("Tree", !0);
       return s(), r("div", {
-        class: _([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (n = e.config) == null ? void 0 : n.mobile }])
+        class: g([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (n = e.config) == null ? void 0 : n.mobile }])
       }, [
         e.text ? (s(), r("a", {
           key: 0,
-          class: _(["anchor", { selected: (d = e.config) == null ? void 0 : d.isSelected }]),
-          href: (l = e.config) == null ? void 0 : l.href,
+          class: g(["anchor", { selected: (d = e.config) == null ? void 0 : d.isSelected }]),
+          href: (i = e.config) == null ? void 0 : i.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)) : M("", !0),
-        (s(!0), r(T, null, z(e.nodes, (f) => {
-          var g, h, u, m, I, C;
-          return s(), O(i, {
-            key: f.text,
-            nodes: f.nodes,
-            text: f.text,
+        }, S(e.text), 11, qe)) : B("", !0),
+        (s(!0), r(T, null, z(e.nodes, (p) => {
+          var h, m, f, _, L, y;
+          return s(), R(l, {
+            key: p.text,
+            nodes: p.nodes,
+            text: p.text,
             config: {
-              href: ((g = f.config) == null ? void 0 : g.href) ?? "",
-              dataGaName: (h = f.config) == null ? void 0 : h.dataGaName,
-              dataGaLocation: (u = f.config) == null ? void 0 : u.dataGaLocation,
-              depth: (((m = e.config) == null ? void 0 : m.depth) ?? 0) + 1,
-              isSelected: (I = f.config) == null ? void 0 : I.isSelected,
-              mobile: (C = e.config) == null ? void 0 : C.mobile
+              href: ((h = p.config) == null ? void 0 : h.href) ?? "",
+              dataGaName: (m = p.config) == null ? void 0 : m.dataGaName,
+              dataGaLocation: (f = p.config) == null ? void 0 : f.dataGaLocation,
+              depth: (((_ = e.config) == null ? void 0 : _.depth) ?? 0) + 1,
+              isSelected: (L = p.config) == null ? void 0 : L.isSelected,
+              mobile: (y = e.config) == null ? void 0 : y.mobile
             }
           }, null, 8, ["nodes", "text", "config"]);
         }), 128))
       ], 2);
     };
   }
-}), te = /* @__PURE__ */ S(We, [["__scopeId", "data-v-c3be63ed"]]), He = { class: "dropdown__list" }, qe = { class: "horizontal-rule slp-my-16" }, Ue = /* @__PURE__ */ L({
+}), ne = /* @__PURE__ */ C(He, [["__scopeId", "data-v-c3be63ed"]]), Ue = { class: "dropdown__list" }, je = { class: "horizontal-rule slp-my-16" }, Ze = /* @__PURE__ */ I({
   __name: "SlpAnchorDropdown",
   props: {
     dropdownLabel: { default: "Jump to a section" },
     anchors: {},
     hyperlinks: {}
   },
-  setup(p) {
-    const e = k(!1), o = () => {
+  setup(u) {
+    const e = w(!1), o = () => {
       e.value = !e.value;
     };
-    return (i, a) => {
-      var n, d, l;
+    return (l, a) => {
+      var n, d, i;
       return s(), r("div", {
-        class: _(["dropdown", { hide: !e.value }])
+        class: g(["dropdown", { hide: !e.value }])
       }, [
-        y(W, {
+        $(U, {
           class: "dropdown__button",
           variant: "ghost",
           onClick: o
         }, {
           default: N(() => [
-            v("span", null, w(i.dropdownLabel), 1),
-            y(R, {
-              icon: e.value ? G(X) : G(Y)
+            v("span", null, S(l.dropdownLabel), 1),
+            $(A, {
+              icon: e.value ? G(ee) : G(te)
             }, null, 8, ["icon"])
           ]),
           _: 1
         }),
-        v("div", He, [
-          F(y(A, {
+        v("div", Ue, [
+          P($(F, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
           }, {
             default: N(() => [
-              B(w(i.anchors.text), 1)
+              V(S(l.anchors.text), 1)
             ]),
             _: 1
           }, 512), [
-            [D, i.anchors.text]
+            [H, l.anchors.text]
           ]),
-          y(te, {
+          $(ne, {
             mobile: "",
-            nodes: i.anchors.data,
+            nodes: l.anchors.data,
             onClick: o
           }, null, 8, ["nodes"]),
-          F(v("div", qe, null, 512), [
-            [D, (n = i.hyperlinks) == null ? void 0 : n.data.length]
+          P(v("div", je, null, 512), [
+            [H, (n = l.hyperlinks) == null ? void 0 : n.data.length]
           ]),
-          F(y(A, {
+          P($(F, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
@@ -537,28 +540,28 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
             default: N(() => {
               var c;
               return [
-                B(w((c = i.hyperlinks) == null ? void 0 : c.text), 1)
+                V(S((c = l.hyperlinks) == null ? void 0 : c.text), 1)
               ];
             }),
             _: 1
           }, 512), [
-            [D, (d = i.hyperlinks) == null ? void 0 : d.text]
+            [H, (d = l.hyperlinks) == null ? void 0 : d.text]
           ]),
           v("ul", null, [
-            (s(!0), r(T, null, z((l = i.hyperlinks) == null ? void 0 : l.data, (c) => (s(), r("li", {
+            (s(!0), r(T, null, z((i = l.hyperlinks) == null ? void 0 : i.data, (c) => (s(), r("li", {
               key: c.text
             }, [
-              y(W, {
+              $(U, {
                 class: "dropdown__link",
                 variant: "ghost",
                 href: c.config.href
               }, {
                 default: N(() => [
-                  v("span", null, w(c.text), 1),
-                  y(W, { variant: "icon" }, {
+                  v("span", null, S(c.text), 1),
+                  $(U, { variant: "icon" }, {
                     default: N(() => [
-                      y(R, {
-                        icon: G(x),
+                      $(A, {
+                        icon: G(ae),
                         size: "xs"
                       }, null, 8, ["icon"])
                     ]),
@@ -573,107 +576,107 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), je = /* @__PURE__ */ S(Ue, [["__scopeId", "data-v-9b690a76"]]), Ze = { key: 0 }, Je = {
+}), Je = /* @__PURE__ */ C(Ze, [["__scopeId", "data-v-9b690a76"]]), Ke = { key: 0 }, Qe = {
   key: 1,
   id: "collapsible-sidebar-wrapper"
-}, Ke = { id: "collapsible-sidebar-content" }, Qe = { id: "collapsible-sidebar" }, Xe = { class: "anchors" }, Ye = /* @__PURE__ */ L({
+}, Xe = { id: "collapsible-sidebar-content" }, Ye = { id: "collapsible-sidebar" }, xe = { class: "anchors" }, et = /* @__PURE__ */ I({
   __name: "SlpSideNavigationWithTree",
   props: {
     anchors: {},
-    hyperlinks: {}
+    hyperlinks: {},
+    alwaysExpanded: { type: Boolean }
   },
-  setup(p) {
-    const e = p, o = k([]), i = k(e.anchors.data.map((u) => ({
-      text: u.text,
-      nodes: u.nodes,
-      config: {
-        href: u.config.href,
-        dataGaName: u.config.dataGaName,
-        dataGaLocation: u.config.dataGaLocation,
-        depth: 0,
-        mobile: !1
-      }
-    }))), a = k(!1), n = k(!0);
+  setup(u) {
+    const e = u, o = w([]), l = w(
+      e.anchors.data.map((f) => ({
+        text: f.text,
+        nodes: f.nodes,
+        config: {
+          href: f.config.href,
+          dataGaName: f.config.dataGaName,
+          dataGaLocation: f.config.dataGaLocation,
+          depth: 0,
+          mobile: !1
+        }
+      }))
+    ), a = w(!1), n = w(!0);
     let d = null;
-    const l = (u, m = []) => (u.forEach((I) => {
-      I.config.href && m.push(I.config.href), I.nodes && l(I.nodes, m);
-    }), m), c = (u) => {
-      const m = [], I = (C) => C.some((E, V) => (m.push(V), E.config.href === u || E.nodes && I(E.nodes) ? !0 : (m.pop(), !1)));
-      return I(e.anchors.data), m;
-    }, t = (u) => {
-      let m = 0;
-      const I = (C, E) => {
-        const V = {
-          text: C.text,
+    const i = (f, _ = []) => (f.forEach((L) => {
+      L.config.href && _.push(L.config.href), L.nodes && i(L.nodes, _);
+    }), _), c = (f) => {
+      const _ = [], L = (y) => y.some((E, M) => (_.push(M), E.config.href === f || E.nodes && L(E.nodes) ? !0 : (_.pop(), !1)));
+      return L(e.anchors.data), _;
+    }, t = (f) => {
+      let _ = 0;
+      const L = (y, E, M) => {
+        const O = {
+          text: y.text,
           config: {
-            href: C.config.href,
-            dataGaName: C.config.dataGaName,
-            dataGaLocation: C.config.dataGaLocation
+            href: y.config.href,
+            dataGaName: y.config.dataGaName,
+            dataGaLocation: y.config.dataGaLocation
           }
         };
-        return u && E === 0 && (V.config.isSelected = !0), o.value[m] === E && (C.nodes && (m += 1, V.nodes = C.nodes.map(
-          (ae, oe) => I(ae, oe)
-        ), m -= 1), m + 1 === o.value.length && (V.config.isSelected = !0)), V;
+        return f && E === 0 && (O.config.isSelected = !0), e.alwaysExpanded ? (o.value[M] === E && (O.config.isSelected = !0), y.nodes && (O.nodes = y.nodes.map(
+          (W, q) => L(W, q, M + 1)
+        ))) : o.value[M] === E && (y.nodes && (M += 1, O.nodes = y.nodes.map(
+          (W, q) => L(W, q, M)
+        ), M -= 1), M + 1 === o.value.length && (O.config.isSelected = !0)), O;
       };
-      return e.anchors.data.map(
-        (C, E) => I(C, E)
-      );
-    }, f = (u) => {
-      u.forEach((m) => {
-        m.isIntersecting ? (o.value = c(`#${m.target.id}`), i.value = t(!1)) : n.value && (i.value = t(!0), n.value = !1);
+      return e.anchors.data.map((y, E) => L(y, E, _));
+    }, p = (f) => {
+      f.forEach((_) => {
+        _.isIntersecting ? (o.value = c(`#${_.target.id}`), e.alwaysExpanded || (l.value = t(!1))) : n.value && !e.alwaysExpanded && (l.value = t(!0), n.value = !1), e.alwaysExpanded && (l.value = t(!1));
       });
-    }, g = () => {
-      a.value = window.innerWidth < 768;
     }, h = () => {
-      i.value = t(!0), n.value = !1;
-      const u = (window.innerHeight - 120 - 48) * -1;
-      d = new IntersectionObserver(
-        f,
-        {
-          rootMargin: `-120px 0px ${u}px 0px`,
-          threshold: 0
-        }
-      ), setTimeout(() => {
-        l(e.anchors.data).forEach((I) => {
-          const C = document.querySelector(I);
-          C && (d == null || d.observe(C));
+      a.value = window.innerWidth < 768;
+    }, m = () => {
+      l.value = t(!0), n.value = !1;
+      const f = (window.innerHeight - 120 - 48) * -1;
+      d = new IntersectionObserver(p, {
+        rootMargin: `-120px 0px ${f}px 0px`,
+        threshold: 0
+      }), setTimeout(() => {
+        i(e.anchors.data).forEach((L) => {
+          const y = document.querySelector(L);
+          y && (d == null || d.observe(y));
         });
       }, 0);
     };
-    return P(() => {
-      g(), window.addEventListener("resize", g), h();
-    }), J(() => {
-      window.removeEventListener("resize", g), d && d.disconnect();
-    }), (u, m) => (s(), r("div", null, [
-      a.value ? (s(), r("div", Ze, [
-        y(je, se(le({ anchors: u.anchors, hyperlinks: u.hyperlinks })), null, 16),
-        b(u.$slots, "default", {}, void 0, !0)
-      ])) : (s(), r("div", Je, [
-        v("div", Ke, [
-          b(u.$slots, "default", {}, void 0, !0)
+    return D(() => {
+      h(), window.addEventListener("resize", h), m();
+    }), X(() => {
+      window.removeEventListener("resize", h), d && d.disconnect();
+    }), (f, _) => (s(), r("div", null, [
+      a.value ? (s(), r("div", Ke, [
+        $(Je, ie(re({ anchors: f.anchors, hyperlinks: f.hyperlinks })), null, 16),
+        b(f.$slots, "default", {}, void 0, !0)
+      ])) : (s(), r("div", Qe, [
+        v("div", Xe, [
+          b(f.$slots, "default", {}, void 0, !0)
         ]),
-        v("nav", Qe, [
-          b(u.$slots, "header", {}, void 0, !0),
-          v("div", Xe, [
-            u.anchors.text ? (s(), O(A, {
+        v("nav", Ye, [
+          b(f.$slots, "header", {}, void 0, !0),
+          v("div", xe, [
+            f.anchors.text ? (s(), R(F, {
               key: 0,
               tag: "div",
               variant: "body3-bold",
               class: "nav-heading"
             }, {
               default: N(() => [
-                B(w(u.anchors.text), 1)
+                V(S(f.anchors.text), 1)
               ]),
               _: 1
-            })) : M("", !0),
-            y(te, { nodes: i.value }, null, 8, ["nodes"])
+            })) : B("", !0),
+            $(ne, { nodes: l.value }, null, 8, ["nodes"])
           ]),
-          b(u.$slots, "footer", {}, void 0, !0)
+          b(f.$slots, "footer", {}, void 0, !0)
         ])
       ]))
     ]));
   }
-}), Et = /* @__PURE__ */ S(Ye, [["__scopeId", "data-v-9319fd2e"]]), xe = ["id", "aria-describedby"], et = { class: "slp-tooltip__wrapper" }, tt = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], at = ["id"], ot = ["id", "aria-describedby"], nt = { class: "slp-tooltip__wrapper" }, st = ["id", "innerHTML"], lt = ["id"], it = /* @__PURE__ */ L({
+}), Gt = /* @__PURE__ */ C(et, [["__scopeId", "data-v-47e57dda"]]), tt = ["id", "aria-describedby"], at = { class: "slp-tooltip__wrapper" }, ot = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], nt = ["id"], st = ["id", "aria-describedby"], lt = { class: "slp-tooltip__wrapper" }, it = ["id", "innerHTML"], rt = ["id"], dt = /* @__PURE__ */ I({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -683,23 +686,23 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
     id: { default: "" },
     dataProperties: { default: null }
   },
-  setup(p) {
-    const e = p, o = k(!1), i = k(""), a = k(""), n = k(""), d = (t) => {
+  setup(u) {
+    const e = u, o = w(!1), l = w(""), a = w(""), n = w(""), d = (t) => {
       e.mode === "hover" && (o.value = t.type === "mouseenter");
-    }, l = () => {
+    }, i = () => {
       o.value = e.mode === "click";
     }, c = (t) => {
       t.target.id !== e.id && (o.value = !1);
     };
-    return P(() => {
+    return D(() => {
       if (e.mode === "click" && document.addEventListener("click", c), e.text) {
-        const t = e.text.match(/\[(.*?)\]/), f = e.text.match(/\((.*?)\)/);
-        i.value = t ? t[1] : "", a.value = f ? f[1] : "", n.value = e.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
+        const t = e.text.match(/\[(.*?)\]/), p = e.text.match(/\((.*?)\)/);
+        l.value = t ? t[1] : "", a.value = p ? p[1] : "", n.value = e.text.replace(`(${a.value})`, "").replace(`[${l.value}]`, "").trim();
       }
-    }), K(() => {
+    }), Y(() => {
       document.removeEventListener("click", c);
-    }), (t, f) => {
-      var g, h, u;
+    }), (t, p) => {
+      var h, m, f;
       return t.mode === "hover" ? (s(), r("div", {
         key: 0,
         id: t.id,
@@ -708,134 +711,134 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
         class: "slp-tooltip",
         onMouseenter: d,
         onMouseleave: d,
-        onClick: l
+        onClick: i
       }, [
-        v("div", et, [
+        v("div", at, [
           b(t.$slots, "default", {}, void 0, !0),
           o.value ? (s(), r("div", {
             key: 0,
-            class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
+            class: g(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
           }, [
-            B(w(n.value) + " ", 1),
+            V(S(n.value) + " ", 1),
             t.text ? (s(), r("a", {
               key: 0,
               id: `${t.id}-content`,
               "data-ga-features": t.dataProperties && t.dataProperties.features.toLowerCase() || null,
-              "data-ga-features-sub": (g = t.dataProperties) == null ? void 0 : g.sub,
-              "data-ga-features-sub-card": (h = t.dataProperties) == null ? void 0 : h.card,
-              "data-ga-name": (u = t.dataProperties) == null ? void 0 : u.plan,
+              "data-ga-features-sub": (h = t.dataProperties) == null ? void 0 : h.sub,
+              "data-ga-features-sub-card": (m = t.dataProperties) == null ? void 0 : m.card,
+              "data-ga-name": (f = t.dataProperties) == null ? void 0 : f.plan,
               "data-ga-location": t.dataProperties ? "features content" : null,
               role: "tooltip",
               href: a.value
-            }, w(i.value), 9, tt)) : t.list ? (s(), r("ul", {
+            }, S(l.value), 9, ot)) : t.list ? (s(), r("ul", {
               key: 1,
               id: `${t.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (s(!0), r(T, null, z(t.list, (m) => (s(), r("li", {
-                key: m.text
-              }, w(m.text), 1))), 128))
-            ], 8, at)) : M("", !0)
-          ], 2)) : M("", !0)
+              (s(!0), r(T, null, z(t.list, (_) => (s(), r("li", {
+                key: _.text
+              }, S(_.text), 1))), 128))
+            ], 8, nt)) : B("", !0)
+          ], 2)) : B("", !0)
         ])
-      ], 40, xe)) : (s(), r("button", {
+      ], 40, tt)) : (s(), r("button", {
         key: 1,
         id: t.id,
         "aria-label": "Click to open tooltip with more information.",
         "aria-describedby": `${t.id}-content`,
-        class: _(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
-        onClick: l
+        class: g(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
+        onClick: i
       }, [
-        v("div", nt, [
+        v("div", lt, [
           b(t.$slots, "default", {}, void 0, !0),
           o.value ? (s(), r("div", {
             key: 0,
-            class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
+            class: g(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
           }, [
             t.text ? (s(), r("span", {
               key: 0,
               id: `${t.id}-content`,
               role: "tooltip",
               innerHTML: t.text
-            }, null, 8, st)) : (s(), r("ul", {
+            }, null, 8, it)) : (s(), r("ul", {
               key: 1,
               id: `${t.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (s(!0), r(T, null, z(t.list, (m) => (s(), r("li", {
-                key: m.text
-              }, w(m.text), 1))), 128))
-            ], 8, lt))
-          ], 2)) : M("", !0)
+              (s(!0), r(T, null, z(t.list, (_) => (s(), r("li", {
+                key: _.text
+              }, S(_.text), 1))), 128))
+            ], 8, rt))
+          ], 2)) : B("", !0)
         ])
-      ], 10, ot));
+      ], 10, st));
     };
   }
-}), rt = /* @__PURE__ */ S(it, [["__scopeId", "data-v-a2668f04"]]), dt = {
+}), ct = /* @__PURE__ */ C(dt, [["__scopeId", "data-v-a2668f04"]]), ut = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, ct = ["onMouseenter", "onMouseleave"], ut = ["data-ga-name", "data-ga-location", "href"], pt = {
+}, pt = ["onMouseenter", "onMouseleave"], ft = ["data-ga-name", "data-ga-location", "href"], vt = {
   key: 0,
   class: "breadcrumb__chevron"
-}, ft = ["content"], vt = {
+}, ht = ["content"], mt = {
   key: 1,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, ht = ["href", "data-ga-name", "data-ga-location"], mt = ["content"], gt = /* @__PURE__ */ L({
+}, gt = ["href", "data-ga-name", "data-ga-location"], _t = ["content"], bt = /* @__PURE__ */ I({
   __name: "SlpBreadcrumb",
   props: {
     crumbs: { default: () => [] },
     router: {}
   },
-  setup(p) {
-    const e = p, o = k(e.crumbs), i = k(!1), a = (l) => {
-      const c = l.split(" ");
+  setup(u) {
+    const e = u, o = w(e.crumbs), l = w(!1), a = (i) => {
+      const c = i.split(" ");
       for (let t = 0; t < c.length; t++)
         c[t] = c[t][0].toUpperCase() + c[t].substr(1);
       return c.join(" ");
     }, n = () => {
-      i.value = window.innerWidth < 768;
-    }, d = (l) => {
-      o.value[l] && (o.value[l] = {
-        ...o.value[l],
-        hover: !o.value[l].hover
+      l.value = window.innerWidth < 768;
+    }, d = (i) => {
+      o.value[i] && (o.value[i] = {
+        ...o.value[i],
+        hover: !o.value[i].hover
       });
     };
-    return Q(() => {
+    return x(() => {
       if (e.router) {
-        const l = e.router.currentRoute.path, c = l.startsWith("/") ? l.substring(1).split("/") : l.split("/"), t = [];
-        let f = "";
-        c.forEach((g) => {
-          f = `${f}/${g}`;
-          const h = e.router.match(f);
-          h.params.slug !== null && g.length && t.push({
-            title: a(g.replace(/-/g, " ")),
+        const i = e.router.currentRoute.path, c = i.startsWith("/") ? i.substring(1).split("/") : i.split("/"), t = [];
+        let p = "";
+        c.forEach((h) => {
+          p = `${p}/${h}`;
+          const m = e.router.match(p);
+          m.params.slug !== null && h.length && t.push({
+            title: a(h.replace(/-/g, " ")),
             hover: !1,
-            ...h
+            ...m
           });
         }), o.value = t;
       }
-    }), P(() => {
+    }), D(() => {
       n(), window.addEventListener("resize", n);
-    }), K(() => {
+    }), Y(() => {
       window.removeEventListener("resize", n);
-    }), (l, c) => o.value && !i.value ? (s(), r("ol", dt, [
-      (s(!0), r(T, null, z(o.value, (t, f) => (s(), r("li", {
+    }), (i, c) => o.value && !l.value ? (s(), r("ol", ut, [
+      (s(!0), r(T, null, z(o.value, (t, p) => (s(), r("li", {
         key: t.title,
-        class: _(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": f === o.value.length - 1
+        class: g(["breadcrumb__crumb", {
+          "breadcrumb__crumb--disabled": p === o.value.length - 1
         }]),
         property: "itemListElement",
         typeof: "ListItem",
-        onMouseenter: (g) => d(f),
-        onMouseleave: (g) => d(f)
+        onMouseenter: (h) => d(p),
+        onMouseleave: (h) => d(p)
       }, [
-        y(rt, {
+        $(ct, {
           text: t.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
@@ -846,35 +849,35 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
               typeof: "WebPage",
               "data-ga-name": t.dataGaName || t.title.toLowerCase(),
               "data-ga-location": t.dataGaLocation || "breadcrumb",
-              href: f !== o.value.length - 1 ? t.path : void 0
+              href: p !== o.value.length - 1 ? t.path : void 0
             }, [
-              y(A, {
+              $(F, {
                 tag: "span",
                 variant: "body3",
                 property: "name"
               }, {
                 default: N(() => [
-                  B(w(t.title.length > 18 ? t.title.substring(0, 18).concat("...") : t.title), 1)
+                  V(S(t.title.length > 18 ? t.title.substring(0, 18).concat("...") : t.title), 1)
                 ]),
                 _: 2
               }, 1024)
-            ], 8, ut)
+            ], 8, ft)
           ]),
           _: 2
         }, 1032, ["text"]),
-        f !== o.value.length - 1 ? (s(), r("span", pt, [
-          y(R, {
+        p !== o.value.length - 1 ? (s(), r("span", vt, [
+          $(A, {
             color: "accent-500",
             size: "xs",
-            icon: G(x)
+            icon: G(ae)
           }, null, 8, ["icon"])
-        ])) : M("", !0),
+        ])) : B("", !0),
         v("meta", {
           property: "position",
-          content: f + 1
-        }, null, 8, ft)
-      ], 42, ct))), 128))
-    ])) : o.value && i.value ? (s(), r("ol", vt, [
+          content: p + 1
+        }, null, 8, ht)
+      ], 42, pt))), 128))
+    ])) : o.value && l.value ? (s(), r("ol", mt, [
       (s(!0), r(T, null, z(o.value, (t) => (s(), r("li", {
         key: t.title,
         class: "breadcrumb__crumb breadcrumb__crumb--mobile",
@@ -890,32 +893,32 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
           typeof: "WebPage"
         }, [
           v("span", null, [
-            y(R, {
+            $(A, {
               color: "accent-500",
               size: "xs",
-              icon: G(re)
+              icon: G(ce)
             }, null, 8, ["icon"])
           ]),
-          y(A, {
+          $(F, {
             class: "slp-ml-8",
             tag: "span",
             variant: "body2",
             property: "name"
           }, {
             default: N(() => [
-              B(w(o.value[o.value.length - 2].title), 1)
+              V(S(o.value[o.value.length - 2].title), 1)
             ]),
             _: 1
           })
-        ], 8, ht),
+        ], 8, gt),
         v("meta", {
           property: "position",
           content: o.value.length - 1
-        }, null, 8, mt)
+        }, null, 8, _t)
       ]))), 128))
-    ])) : M("", !0);
+    ])) : B("", !0);
   }
-}), Gt = /* @__PURE__ */ S(gt, [["__scopeId", "data-v-fd412793"]]), _t = { class: "dropdown" }, bt = ["aria-label", "name"], yt = ["value", "name"], $t = ["value", "name"], kt = /* @__PURE__ */ L({
+}), Vt = /* @__PURE__ */ C(bt, [["__scopeId", "data-v-fd412793"]]), yt = { class: "dropdown" }, $t = ["aria-label", "name"], kt = ["value", "name"], wt = ["value", "name"], St = /* @__PURE__ */ I({
   __name: "SlpDropdown",
   props: {
     name: {},
@@ -929,10 +932,10 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
     } }
   },
   emits: ["input"],
-  setup(p, { emit: e }) {
-    const o = p, i = e, a = k(o.value), n = k(!0);
-    Q(() => {
-      var l;
+  setup(u, { emit: e }) {
+    const o = u, l = e, a = w(o.value), n = w(!0);
+    x(() => {
+      var i;
       if (n.value = !o.options.every(
         (c) => typeof c == "object"
       ), !n.value && !(o.textField && o.valueField))
@@ -941,60 +944,60 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
         );
       if (o.value === void 0 && o.options.length > 0)
         if (n.value)
-          a.value = o.options[0], i("input", a.value);
+          a.value = o.options[0], l("input", a.value);
         else {
           const c = o.options[0];
-          a.value = (l = o.config) != null && l.primitive ? c[o.valueField] : c, i("input", a.value);
+          a.value = (i = o.config) != null && i.primitive ? c[o.valueField] : c, l("input", a.value);
         }
-    }), U(
+    }), J(
       () => a.value,
-      (l) => {
-        i("input", l);
+      (i) => {
+        l("input", i);
       }
-    ), U(
+    ), J(
       () => o.value,
-      (l) => {
-        a.value = l;
+      (i) => {
+        a.value = i;
       }
     );
-    const d = (l) => {
-      const c = l.target;
-      i(o.name, c.value);
+    const d = (i) => {
+      const c = i.target;
+      l(o.name, c.value);
     };
-    return (l, c) => (s(), r("div", _t, [
-      F(v("select", {
-        "aria-label": l.dropdownLabel || `${l.name} dropdown`,
+    return (i, c) => (s(), r("div", yt, [
+      P(v("select", {
+        "aria-label": i.dropdownLabel || `${i.name} dropdown`,
         class: "dropdown__select",
-        name: l.name,
+        name: i.name,
         onChange: d,
         "onUpdate:modelValue": c[0] || (c[0] = (t) => a.value = t)
       }, [
-        n.value ? (s(!0), r(T, { key: 0 }, z(l.options, (t) => (s(), r("option", {
+        n.value ? (s(!0), r(T, { key: 0 }, z(i.options, (t) => (s(), r("option", {
           key: t,
           value: t,
           name: t
-        }, w(t), 9, yt))), 128)) : (s(!0), r(T, { key: 1 }, z(l.options, (t) => {
-          var f;
+        }, S(t), 9, kt))), 128)) : (s(!0), r(T, { key: 1 }, z(i.options, (t) => {
+          var p;
           return s(), r("option", {
-            key: t[l.valueField],
-            value: (f = l.config) != null && f.primitive ? t[l.valueField] : t,
-            name: t[l.textField]
-          }, w(t[l.textField]), 9, $t);
+            key: t[i.valueField],
+            value: (p = i.config) != null && p.primitive ? t[i.valueField] : t,
+            name: t[i.textField]
+          }, S(t[i.textField]), 9, wt);
         }), 128))
-      ], 40, bt), [
-        [ie, a.value]
+      ], 40, $t), [
+        [de, a.value]
       ])
     ]));
   }
-}), Bt = /* @__PURE__ */ S(kt, [["__scopeId", "data-v-9c71f7b0"]]), wt = ["id"], St = /* @__PURE__ */ L({
+}), Ot = /* @__PURE__ */ C(St, [["__scopeId", "data-v-9c71f7b0"]]), Ct = ["id"], Lt = /* @__PURE__ */ I({
   __name: "SlpSection",
   props: {
     backgroundColor: {
       type: String,
       required: !1,
-      validator(p) {
-        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(p), o = /^\$color-[a-zA-Z0-9-]+$/.test(p);
-        return p ? e || o : !0;
+      validator(u) {
+        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(u), o = /^\$color-[a-zA-Z0-9-]+$/.test(u);
+        return u ? e || o : !0;
       }
     },
     id: {
@@ -1002,43 +1005,43 @@ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f
       required: !1
     }
   },
-  setup(p) {
-    const e = p, o = $(() => {
+  setup(u) {
+    const e = u, o = k(() => {
       var a;
       return !e.backgroundColor || (a = e.backgroundColor) != null && a.startsWith("$") ? {} : { backgroundColor: e.backgroundColor };
-    }), i = $(() => {
+    }), l = k(() => {
       var a, n;
       return (a = e.backgroundColor) != null && a.startsWith("$") ? `slp-background-${(n = e.backgroundColor) == null ? void 0 : n.slice(1)}` : null;
     });
     return (a, n) => (s(), r("section", {
-      style: Z(o.value),
-      class: _(i.value),
-      id: p.id || void 0
+      style: Q(o.value),
+      class: g(l.value),
+      id: u.id || void 0
     }, [
-      y(ee, null, {
+      $(oe, null, {
         default: N(() => [
           b(a.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       })
-    ], 14, wt));
+    ], 14, Ct));
   }
-}), Vt = /* @__PURE__ */ S(St, [["__scopeId", "data-v-2b3ad016"]]);
+}), Rt = /* @__PURE__ */ C(Lt, [["__scopeId", "data-v-2b3ad016"]]);
 export {
-  Gt as SlpBreadcrumb,
-  W as SlpButton,
-  It as SlpColumn,
-  ee as SlpContainer,
-  Bt as SlpCustomDropdown,
-  Bt as SlpDropdown,
-  R as SlpIcon,
-  Mt as SlpLoader,
-  Oe as SlpRadioButton,
-  zt as SlpRadioButtonGroup,
-  Nt as SlpRow,
-  Vt as SlpSection,
-  Tt as SlpSideNavigation,
-  Et as SlpSideNavigationWithTree,
-  rt as SlpTooltip,
-  A as SlpTypography
+  Vt as SlpBreadcrumb,
+  U as SlpButton,
+  Tt as SlpColumn,
+  oe as SlpContainer,
+  Ot as SlpCustomDropdown,
+  Ot as SlpDropdown,
+  A as SlpIcon,
+  Bt as SlpLoader,
+  Ae as SlpRadioButton,
+  Mt as SlpRadioButtonGroup,
+  zt as SlpRow,
+  Rt as SlpSection,
+  Et as SlpSideNavigation,
+  Gt as SlpSideNavigationWithTree,
+  ct as SlpTooltip,
+  F as SlpTypography
 };