slippers-ui 3.3.0-alpha.2 → 3.3.1

package/dist/slippers-ui.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as C, computed as w, openBlock as o, createElementBlock as s, mergeProps as F, renderSlot as g, normalizeClass as h, createElementVNode as d, createBlock as G, resolveDynamicComponent as Y, normalizeStyle as Q, withCtx as N, createCommentVNode as E, ref as x, onMounted as q, onUnmounted as X, createVNode as L, unref as P, Fragment as z, renderList as B, withModifiers as J, toDisplayString as I, createTextVNode as V, resolveComponent as ce, withDirectives as W, vShow as K, normalizeProps as de, guardReactiveProps as ue, watch as ve, onBeforeUnmount as ee, onBeforeMount as fe, vModelSelect as pe } from "vue";
-const he = ["href"], ge = /* @__PURE__ */ C({
+import { defineComponent as C, computed as k, openBlock as n, createElementBlock as l, mergeProps as Y, renderSlot as b, normalizeClass as g, createElementVNode as d, createBlock as G, resolveDynamicComponent as X, normalizeStyle as ee, withCtx as N, createCommentVNode as E, ref as x, onMounted as W, onUnmounted as te, createVNode as L, unref as P, Fragment as V, renderList as z, withModifiers as Q, toDisplayString as I, createTextVNode as M, resolveComponent as pe, withDirectives as H, vShow as K, normalizeProps as fe, guardReactiveProps as he, watch as ge, onBeforeUnmount as ae, onBeforeMount as me, vModelSelect as be } from "vue";
+const ye = ["href"], _e = /* @__PURE__ */ C({
   __name: "SlpButton",
   props: {
     disabled: { type: Boolean },
@@ -7,140 +7,140 @@ const he = ["href"], ge = /* @__PURE__ */ C({
     href: {}
   },
   setup(e) {
-    const t = e, n = w(() => t.disabled ?? !1), i = w(() => t.variant ?? "primary");
-    w(() => t.href ?? "");
-    const a = w(() => {
-      let l = [`slp-btn-${i.value}`];
-      return n.value && l.push("slp-btn-disabled"), l.join(" ");
+    const t = e, o = k(() => t.disabled ?? !1), i = k(() => t.variant ?? "primary");
+    k(() => t.href ?? "");
+    const a = k(() => {
+      let s = [`slp-btn-${i.value}`];
+      return o.value && s.push("slp-btn-disabled"), s.join(" ");
     });
-    return (l, b) => t.href ? (o(), s("a", F({ key: 0 }, l.$attrs, {
+    return (s, m) => t.href ? (n(), l("a", Y({ key: 0 }, s.$attrs, {
       class: ["slp-btn", a.value],
       href: t.href
     }), [
-      g(l.$slots, "default", {}, void 0, !0)
-    ], 16, he)) : (o(), s("button", F({ key: 1 }, l.$attrs, {
+      b(s.$slots, "default", {}, void 0, !0)
+    ], 16, ye)) : (n(), l("button", Y({ key: 1 }, s.$attrs, {
       class: ["slp-btn", a.value],
       type: "button"
     }), [
-      g(l.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), $ = (e, t) => {
-  const n = e.__vccOpts || e;
+}), w = (e, t) => {
+  const o = e.__vccOpts || e;
   for (const [i, a] of t)
-    n[i] = a;
-  return n;
-}, Z = /* @__PURE__ */ $(ge, [["__scopeId", "data-v-c6fd7cb9"]]), me = /* @__PURE__ */ C({
+    o[i] = a;
+  return o;
+}, Z = /* @__PURE__ */ w(_e, [["__scopeId", "data-v-c6fd7cb9"]]), $e = /* @__PURE__ */ C({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
   setup(e) {
-    const t = e, n = w(() => t.cols ?? null), i = w(() => t.size ?? "md"), a = w(() => n.value ? `slp-col-${i.value}-${n.value}` : `slp-col-${i.value}`);
-    return (l, b) => (o(), s("div", {
-      class: h(a.value)
+    const t = e, o = k(() => t.cols ?? null), i = k(() => t.size ?? "md"), a = k(() => o.value ? `slp-col-${i.value}-${o.value}` : `slp-col-${i.value}`);
+    return (s, m) => (n(), l("div", {
+      class: g(a.value)
     }, [
-      g(l.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Ht = /* @__PURE__ */ $(me, [["__scopeId", "data-v-00b68f22"]]), be = {
+}), Zt = /* @__PURE__ */ w($e, [["__scopeId", "data-v-00b68f22"]]), ke = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, ye = {
+}, we = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, _e = {
+}, Se = {
   key: 2,
   class: "slp-gradient-background"
-}, $e = {
+}, xe = {
   key: 3,
   class: "slp-full-gradient-background"
-}, ke = {
+}, Ie = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, we = {
+}, Le = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, Se = {
+}, Ce = {
   key: 6,
   class: "slp-half-grey-background"
-}, xe = {
+}, Ne = {
   key: 7,
   class: "slp-partial-white-background"
-}, Ie = {
+}, Te = {
   key: 8,
   class: "slp-partial-grey-background"
-}, Le = /* @__PURE__ */ C({
+}, Ee = /* @__PURE__ */ C({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
   setup(e) {
-    const t = e, n = w(() => t.fluid ?? !1), i = w(() => t.variant ?? "white"), a = w(() => n.value ? "fluid" : "");
-    return (l, b) => i.value === "light-purple-100" ? (o(), s("div", be, [
+    const t = e, o = k(() => t.fluid ?? !1), i = k(() => t.variant ?? "white"), a = k(() => o.value ? "fluid" : "");
+    return (s, m) => i.value === "light-purple-100" ? (n(), l("div", ke, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-100" ? (o(), s("div", ye, [
+    ])) : i.value === "grey-100" ? (n(), l("div", we, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient" ? (o(), s("div", _e, [
+    ])) : i.value === "gradient" ? (n(), l("div", Se, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient-full" ? (o(), s("div", $e, [
+    ])) : i.value === "gradient-full" ? (n(), l("div", xe, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-100" ? (o(), s("div", ke, [
+    ])) : i.value === "charcoal-100" ? (n(), l("div", Ie, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-75" ? (o(), s("div", we, [
+    ])) : i.value === "charcoal-75" ? (n(), l("div", Le, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-50" ? (o(), s("div", Se, [
+    ])) : i.value === "grey-50" ? (n(), l("div", Ce, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "white-75" ? (o(), s("div", xe, [
+    ])) : i.value === "white-75" ? (n(), l("div", Ne, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-75" ? (o(), s("div", Ie, [
+    ])) : i.value === "grey-75" ? (n(), l("div", Te, [
       d("div", {
-        class: h(["slp-container", a.value])
+        class: g(["slp-container", a.value])
       }, [
-        g(l.$slots, "default", {}, void 0, !0)
+        b(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : (o(), s("div", {
+    ])) : (n(), l("div", {
       key: 9,
-      class: h(["slp-container", a.value])
+      class: g(["slp-container", a.value])
     }, [
-      g(l.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), te = /* @__PURE__ */ $(Le, [["__scopeId", "data-v-e594efe8"]]), Ce = /* @__PURE__ */ C({
+}), oe = /* @__PURE__ */ w(Ee, [["__scopeId", "data-v-e594efe8"]]), Ve = /* @__PURE__ */ C({
   __name: "SlpIcon",
   props: {
     size: {
@@ -160,35 +160,35 @@ const he = ["href"], ge = /* @__PURE__ */ C({
     }
   },
   setup(e) {
-    const t = e, n = w(() => {
+    const t = e, o = k(() => {
       const a = ["slp-icon"];
       return typeof t.size == "string" && isNaN(Number(t.size)) && a.push(`slp-icon--size-${t.size}`), t.color && !t.color.startsWith("#") && a.push(`slp-icon--color-${t.color}`), a;
-    }), i = w(() => {
+    }), i = k(() => {
       const a = {};
       if (t.color?.startsWith("#") && (a.color = t.color, a.fill = t.color), typeof t.size == "number" || !isNaN(Number(t.size))) {
-        const l = typeof t.size == "number" ? t.size : Number(t.size);
-        a.width = `${l}px`, a.height = `${l}px`;
+        const s = typeof t.size == "number" ? t.size : Number(t.size);
+        a.width = `${s}px`, a.height = `${s}px`;
       }
       return a;
     });
-    return (a, l) => (o(), G(Y(e.icon), {
-      class: h(["slp-icon", n.value]),
-      style: Q(i.value),
+    return (a, s) => (n(), G(X(e.icon), {
+      class: g(["slp-icon", o.value]),
+      style: ee(i.value),
       role: "img",
       "aria-hidden": "true",
       "data-icon-name": e.icon?.__docgenInfo?.displayName || ""
     }, null, 8, ["class", "style", "data-icon-name"]));
   }
-}), A = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-c3411281"]]), Ne = {}, Te = { class: "slp-row" };
-function Ee(e, t) {
-  return o(), s("div", Te, [
-    g(e.$slots, "default", {}, void 0, !0)
+}), A = /* @__PURE__ */ w(Ve, [["__scopeId", "data-v-c3411281"]]), ze = {}, Be = { class: "slp-row" };
+function Me(e, t) {
+  return n(), l("div", Be, [
+    b(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Ut = /* @__PURE__ */ $(Ne, [["render", Ee], ["__scopeId", "data-v-adc8d02f"]]), ze = {
+const Ft = /* @__PURE__ */ w(ze, [["render", Me], ["__scopeId", "data-v-adc8d02f"]]), Pe = {
   key: 0,
   class: "arrow-symbol"
-}, Be = /* @__PURE__ */ C({
+}, Oe = /* @__PURE__ */ C({
   __name: "SlpTypography",
   props: {
     variant: {},
@@ -217,25 +217,25 @@ const Ut = /* @__PURE__ */ $(Ne, [["render", Ee], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], n = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = e, a = w(() => t.includes(i.variant || "") ? i.variant : "body1"), l = w(() => n.includes(i.tag || "") ? i.tag : "span"), b = w(() => `slp-text-${a.value}`);
-    return (r, f) => (o(), G(Y(l.value), {
-      class: h(b.value)
+    ], o = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = e, a = k(() => t.includes(i.variant || "") ? i.variant : "body1"), s = k(() => o.includes(i.tag || "") ? i.tag : "span"), m = k(() => `slp-text-${a.value}`);
+    return (r, p) => (n(), G(X(s.value), {
+      class: g(m.value)
     }, {
       default: N(() => [
-        g(r.$slots, "default", {}, void 0, !0),
-        a.value === "arrow" ? (o(), s("span", ze, "→")) : E("", !0)
+        b(r.$slots, "default", {}, void 0, !0),
+        a.value === "arrow" ? (n(), l("span", Pe, "→")) : E("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), D = /* @__PURE__ */ $(Be, [["__scopeId", "data-v-64ad2128"]]), Me = {}, Ve = {
+}), D = /* @__PURE__ */ w(Oe, [["__scopeId", "data-v-64ad2128"]]), Ge = {}, Re = {
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Pe(e, t) {
-  return o(), s("svg", Ve, [...t[0] || (t[0] = [
+function Ae(e, t) {
+  return n(), l("svg", Re, [...t[0] || (t[0] = [
     d("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -244,12 +244,12 @@ function Pe(e, t) {
     }, null, -1)
   ])]);
 }
-const ae = /* @__PURE__ */ $(Me, [["render", Pe]]), Oe = {}, Ge = {
+const ne = /* @__PURE__ */ w(Ge, [["render", Ae]]), De = {}, He = {
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Re(e, t) {
-  return o(), s("svg", Ge, [...t[0] || (t[0] = [
+function We(e, t) {
+  return n(), l("svg", He, [...t[0] || (t[0] = [
     d("path", {
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
@@ -258,12 +258,12 @@ function Re(e, t) {
     }, null, -1)
   ])]);
 }
-const Ae = /* @__PURE__ */ $(Oe, [["render", Re]]), De = {}, We = {
+const qe = /* @__PURE__ */ w(De, [["render", We]]), Ue = {}, je = {
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function qe(e, t) {
-  return o(), s("svg", We, [...t[0] || (t[0] = [
+function Ke(e, t) {
+  return n(), l("svg", je, [...t[0] || (t[0] = [
     d("path", {
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
@@ -272,14 +272,14 @@ function qe(e, t) {
     }, null, -1)
   ])]);
 }
-const oe = /* @__PURE__ */ $(De, [["render", qe]]), He = {}, Ue = {
+const le = /* @__PURE__ */ w(Ue, [["render", Ke]]), Ze = {}, Fe = {
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function je(e, t) {
-  return o(), s("svg", Ue, [...t[0] || (t[0] = [
+function Je(e, t) {
+  return n(), l("svg", Fe, [...t[0] || (t[0] = [
     d("path", {
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
@@ -288,10 +288,10 @@ function je(e, t) {
     }, null, -1)
   ])]);
 }
-const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
+const se = /* @__PURE__ */ w(Ze, [["render", Je]]), Ye = {
   key: 0,
   class: "dropdown-menu"
-}, Ze = ["onClick"], Fe = ["aria-label"], Je = ["data-ga-name", "onClick"], Ye = /* @__PURE__ */ C({
+}, Qe = ["onClick"], Xe = ["aria-label"], et = ["data-ga-name", "onClick"], tt = /* @__PURE__ */ C({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -312,38 +312,38 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     }
   },
   setup(e) {
-    const t = e, n = x(null), i = (v) => {
-      n.value && !n.value.contains(v.target) && (r.value = !1);
-    }, a = x(null), l = x(null);
-    let b = null;
-    const r = x(!1), f = x(!0), c = (v) => {
+    const t = e, o = x(null), i = (v) => {
+      o.value && !o.value.contains(v.target) && (r.value = !1);
+    }, a = x(null), s = x(null);
+    let m = null;
+    const r = x(!1), p = x(!0), c = (v) => {
       window.location.hash = v, r.value = !1;
     }, u = () => {
-      if (!l.value) return;
+      if (!s.value) return;
       const v = (window.innerHeight - 120 - 48) * -1;
-      b = new IntersectionObserver(
-        (k) => {
-          k.forEach((S) => {
-            S.isIntersecting ? a.value = S.target.id : f.value && (t.navigationItems.length > 0 && (a.value = t.navigationItems[0].id), f.value = !1);
+      m = new IntersectionObserver(
+        (y) => {
+          y.forEach((S) => {
+            S.isIntersecting ? a.value = S.target.id : p.value && (t.navigationItems.length > 0 && (a.value = t.navigationItems[0].id), p.value = !1);
           });
         },
         {
           rootMargin: `-120px 0px ${v}px 0px`,
           threshold: 0
         }
-      ), t.navigationItems.forEach((k) => {
-        const S = document.getElementById(k.id);
-        S && b.observe(S);
+      ), t.navigationItems.forEach((y) => {
+        const S = document.getElementById(y.id);
+        S && m.observe(S);
       });
     };
-    return q(() => {
+    return W(() => {
       document.addEventListener("click", i), window.addEventListener("load", () => {
         u();
       }), document.readyState === "complete" && u();
-    }), X(() => {
-      b && b.disconnect(), document.removeEventListener("click", i);
-    }), (v, k) => (o(), s("div", {
-      class: h([
+    }), te(() => {
+      m && m.disconnect(), document.removeEventListener("click", i);
+    }), (v, y) => (n(), l("div", {
+      class: g([
         "side-navigation-layout",
         `side-navigation-layout--${t.position}`,
         { "side-navigation--dark": t.darkMode }
@@ -351,30 +351,30 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     }, [
       d("div", {
         ref_key: "dropdownRef",
-        ref: n,
+        ref: o,
         class: "side-navigation-dropdown"
       }, [
         d("button", {
           class: "dropdown-toggle",
-          onClick: k[0] || (k[0] = (S) => r.value = !r.value)
+          onClick: y[0] || (y[0] = (S) => r.value = !r.value)
         }, [
-          k[1] || (k[1] = d("span", null, "Jump to a section", -1)),
+          y[1] || (y[1] = d("span", null, "Jump to a section", -1)),
           L(A, {
-            icon: r.value ? P(ne) : P(ae),
+            icon: r.value ? P(se) : P(ne),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        r.value ? (o(), s("ul", Ke, [
-          (o(!0), s(z, null, B(t.navigationItems, (S) => (o(), s("li", {
+        r.value ? (n(), l("ul", Ye, [
+          (n(!0), l(V, null, z(t.navigationItems, (S) => (n(), l("li", {
             key: S.id,
             class: "dropdown-item"
           }, [
             d("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: J((R) => c(S.id), ["prevent"])
-            }, I(S.text), 9, Ze)
+              onClick: Q((R) => c(S.id), ["prevent"])
+            }, I(S.text), 9, Qe)
           ]))), 128))
         ])) : E("", !0)
       ], 512),
@@ -382,32 +382,32 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
         class: "side-navigation",
         "aria-label": e.navigationLabel
       }, [
-        g(v.$slots, "navigation-header", {}, void 0, !0),
+        b(v.$slots, "navigation-header", {}, void 0, !0),
         d("ul", null, [
-          (o(!0), s(z, null, B(t.navigationItems, (S) => (o(), s("li", {
+          (n(!0), l(V, null, z(t.navigationItems, (S) => (n(), l("li", {
             key: S.id,
             class: "side-navigation__item"
           }, [
             d("a", {
               href: "#",
-              class: h(["side-navigation__link", { "side-navigation__link--active": a.value === S.id }]),
+              class: g(["side-navigation__link", { "side-navigation__link--active": a.value === S.id }]),
               "data-ga-name": S.text,
               "data-ga-location": "side anchor",
-              onClick: J((R) => c(S.id), ["prevent"])
-            }, I(S.text), 11, Je)
+              onClick: Q((R) => c(S.id), ["prevent"])
+            }, I(S.text), 11, et)
           ]))), 128))
         ])
-      ], 8, Fe),
+      ], 8, Xe),
       d("div", {
         ref_key: "slotContentRef",
-        ref: l,
+        ref: s,
         class: "side-navigation-content"
       }, [
-        g(v.$slots, "default", {}, void 0, !0)
+        b(v.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), jt = /* @__PURE__ */ $(Ye, [["__scopeId", "data-v-3cc08323"]]), Qe = ["for"], Xe = ["name", "value", "id", "checked", "disabled"], et = /* @__PURE__ */ C({
+}), Jt = /* @__PURE__ */ w(tt, [["__scopeId", "data-v-3cc08323"]]), at = ["for"], ot = ["name", "value", "id", "checked", "disabled"], nt = /* @__PURE__ */ C({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -416,15 +416,15 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = t, i = (a) => {
-      const l = a.target;
-      n("update:modelValue", l.value);
+    const o = t, i = (a) => {
+      const s = a.target;
+      o("update:modelValue", s.value);
     };
-    return (a, l) => (o(), s("label", {
+    return (a, s) => (n(), l("label", {
       for: e.option,
-      class: h(["slp-radio", { disabled: e.config?.disabled }])
+      class: g(["slp-radio", { disabled: e.config?.disabled }])
     }, [
-      V(I(e.option) + " ", 1),
+      M(I(e.option) + " ", 1),
       d("input", {
         type: "radio",
         name: e.name,
@@ -433,11 +433,11 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
         onInput: i,
         checked: e.config?.checked,
         disabled: e.config?.disabled
-      }, null, 40, Xe),
-      l[0] || (l[0] = d("span", { class: "slp-radio__checkmark" }, null, -1))
-    ], 10, Qe));
+      }, null, 40, ot),
+      s[0] || (s[0] = d("span", { class: "slp-radio__checkmark" }, null, -1))
+    ], 10, at));
   }
-}), tt = /* @__PURE__ */ $(et, [["__scopeId", "data-v-f37e970e"]]), at = /* @__PURE__ */ C({
+}), lt = /* @__PURE__ */ w(nt, [["__scopeId", "data-v-f37e970e"]]), st = /* @__PURE__ */ C({
   __name: "SlpRadioButtonGroup",
   props: {
     options: {},
@@ -449,20 +449,20 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = {
+    const o = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, i = t, a = (l) => {
-      i("update:modelValue", l);
+    }, i = t, a = (s) => {
+      i("update:modelValue", s);
     };
-    return (l, b) => (o(), G(te, {
-      class: h(["slp-radio-group", {
-        "slp-radio-group--vertical": e.config?.orientation === n.VERTICAL,
-        "slp-radio-group--horizontal": e.config?.orientation === n.HORIZONTAL
+    return (s, m) => (n(), G(oe, {
+      class: g(["slp-radio-group", {
+        "slp-radio-group--vertical": e.config?.orientation === o.VERTICAL,
+        "slp-radio-group--horizontal": e.config?.orientation === o.HORIZONTAL
       }])
     }, {
       default: N(() => [
-        (o(!0), s(z, null, B(e.options, (r) => (o(), G(tt, {
+        (n(!0), l(V, null, z(e.options, (r) => (n(), G(lt, {
           key: r.value,
           option: r.value,
           name: e.name,
@@ -476,13 +476,13 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
       _: 1
     }, 8, ["class"]));
   }
-}), Kt = /* @__PURE__ */ $(at, [["__scopeId", "data-v-ae31ec89"]]), ot = {
+}), Yt = /* @__PURE__ */ w(st, [["__scopeId", "data-v-ae31ec89"]]), it = {
   key: 0,
   class: "slp-loading-round"
-}, nt = {
+}, rt = {
   key: 1,
   class: "slp-loading-linear"
-}, st = /* @__PURE__ */ C({
+}, ct = /* @__PURE__ */ C({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
@@ -490,9 +490,9 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
   },
   setup(e) {
     const t = e;
-    return (n, i) => t.config?.variant === "round" ? (o(), s("div", ot)) : (o(), s("div", nt));
+    return (o, i) => t.config?.variant === "round" ? (n(), l("div", it)) : (n(), l("div", rt));
   }
-}), Zt = /* @__PURE__ */ $(st, [["__scopeId", "data-v-ee32411b"]]), lt = ["href", "data-ga-name", "data-ga-location"], it = /* @__PURE__ */ C({
+}), Qt = /* @__PURE__ */ w(ct, [["__scopeId", "data-v-ee32411b"]]), dt = ["href", "data-ga-name", "data-ga-location"], ut = /* @__PURE__ */ C({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -507,19 +507,19 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     }) }
   },
   setup(e) {
-    return (t, n) => {
-      const i = ce("Tree", !0);
-      return o(), s("div", {
-        class: h([`depth-${e.config?.depth}`, { mobile: e.config?.mobile }])
+    return (t, o) => {
+      const i = pe("Tree", !0);
+      return n(), l("div", {
+        class: g([`depth-${e.config?.depth}`, { mobile: e.config?.mobile }])
       }, [
-        e.text ? (o(), s("a", {
+        e.text ? (n(), l("a", {
           key: 0,
-          class: h(["anchor", { selected: e.config?.isSelected }]),
+          class: g(["anchor", { selected: e.config?.isSelected }]),
           href: e.config?.href,
           "data-ga-name": e.config?.dataGaName,
           "data-ga-location": e.config?.dataGaLocation
-        }, I(e.text), 11, lt)) : E("", !0),
-        (o(!0), s(z, null, B(e.nodes, (a) => (o(), G(i, {
+        }, I(e.text), 11, dt)) : E("", !0),
+        (n(!0), l(V, null, z(e.nodes, (a) => (n(), G(i, {
           key: a.text,
           nodes: a.nodes,
           text: a.text,
@@ -535,7 +535,7 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
       ], 2);
     };
   }
-}), se = /* @__PURE__ */ $(it, [["__scopeId", "data-v-c3be63ed"]]), rt = { class: "dropdown__list" }, ct = { class: "horizontal-rule slp-my-16" }, dt = /* @__PURE__ */ C({
+}), ie = /* @__PURE__ */ w(ut, [["__scopeId", "data-v-c3be63ed"]]), vt = { class: "dropdown__list" }, pt = { class: "horizontal-rule slp-my-16" }, ft = /* @__PURE__ */ C({
   __name: "SlpAnchorDropdown",
   props: {
     dropdownLabel: { default: "Jump to a section" },
@@ -543,73 +543,73 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     hyperlinks: {}
   },
   setup(e) {
-    const t = x(!1), n = () => {
+    const t = x(!1), o = () => {
       t.value = !t.value;
     };
-    return (i, a) => (o(), s("div", {
-      class: h(["dropdown", { hide: !t.value }])
+    return (i, a) => (n(), l("div", {
+      class: g(["dropdown", { hide: !t.value }])
     }, [
       L(Z, {
         class: "dropdown__button",
         variant: "ghost",
-        onClick: n
+        onClick: o
       }, {
         default: N(() => [
           d("span", null, I(e.dropdownLabel), 1),
           L(A, {
-            icon: t.value ? P(ne) : P(ae)
+            icon: t.value ? P(se) : P(ne)
           }, null, 8, ["icon"])
         ]),
         _: 1
       }),
-      d("div", rt, [
-        W(L(D, {
+      d("div", vt, [
+        H(L(D, {
           tag: "div",
           variant: "body3-bold",
           class: "nav-heading"
         }, {
           default: N(() => [
-            V(I(e.anchors.text), 1)
+            M(I(e.anchors.text), 1)
           ]),
           _: 1
         }, 512), [
           [K, e.anchors.text]
         ]),
-        L(se, {
+        L(ie, {
           mobile: "",
           nodes: e.anchors.data,
-          onClick: n
+          onClick: o
         }, null, 8, ["nodes"]),
-        W(d("div", ct, null, 512), [
+        H(d("div", pt, null, 512), [
           [K, e.hyperlinks?.data.length]
         ]),
-        W(L(D, {
+        H(L(D, {
           tag: "div",
           variant: "body3-bold",
           class: "nav-heading"
         }, {
           default: N(() => [
-            V(I(e.hyperlinks?.text), 1)
+            M(I(e.hyperlinks?.text), 1)
           ]),
           _: 1
         }, 512), [
           [K, e.hyperlinks?.text]
         ]),
         d("ul", null, [
-          (o(!0), s(z, null, B(e.hyperlinks?.data, (l) => (o(), s("li", {
-            key: l.text
+          (n(!0), l(V, null, z(e.hyperlinks?.data, (s) => (n(), l("li", {
+            key: s.text
           }, [
             L(Z, {
               class: "dropdown__link",
               variant: "ghost",
-              href: l.config.href
+              href: s.config.href
             }, {
               default: N(() => [
-                d("span", null, I(l.text), 1),
+                d("span", null, I(s.text), 1),
                 L(Z, { variant: "icon" }, {
                   default: N(() => [
                     L(A, {
-                      icon: P(oe),
+                      icon: P(le),
                       size: "xs"
                     }, null, 8, ["icon"])
                   ]),
@@ -623,10 +623,7 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
       ])
     ], 2));
   }
-}), ut = /* @__PURE__ */ $(dt, [["__scopeId", "data-v-bd9281e3"]]), vt = { key: 0 }, ft = {
-  key: 1,
-  id: "collapsible-sidebar-wrapper"
-}, pt = { id: "collapsible-sidebar-content" }, ht = { id: "collapsible-sidebar" }, gt = { class: "anchors" }, mt = /* @__PURE__ */ C({
+}), ht = /* @__PURE__ */ w(ft, [["__scopeId", "data-v-bd9281e3"]]), gt = ["aria-hidden", "inert", "tabindex"], mt = { id: "collapsible-sidebar-wrapper" }, bt = { id: "collapsible-sidebar-content" }, yt = ["aria-hidden", "inert", "tabindex"], _t = { class: "anchors" }, $t = /* @__PURE__ */ C({
   __name: "SlpSideNavigationWithTree",
   props: {
     anchors: {},
@@ -634,115 +631,132 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     alwaysExpanded: { type: Boolean }
   },
   setup(e) {
-    const t = e, n = x([]), i = x(null), a = x([]), l = x(
-      t.anchors.data.map((m) => ({
-        text: m.text,
-        nodes: m.nodes,
+    const t = e, o = x([]), i = x(null), a = x([]), s = x(
+      t.anchors.data.map((f) => ({
+        text: f.text,
+        nodes: f.nodes,
         config: {
-          href: m.config.href,
-          dataGaName: m.config.dataGaName,
-          dataGaLocation: m.config.dataGaLocation,
+          href: f.config.href,
+          dataGaName: f.config.dataGaName,
+          dataGaLocation: f.config.dataGaLocation,
           depth: 0,
           mobile: !1
         }
       }))
-    ), b = x(!1), r = x(!0);
-    let f = null;
-    const c = (m, p = []) => (m.forEach((y) => {
-      y.config.href && p.push(y.config.href), y.nodes && c(y.nodes, p);
-    }), p), u = (m) => {
-      const p = [], y = (T) => T.some((_, M) => (p.push(M), _.config.href === m || _.nodes && y(_.nodes) ? !0 : (p.pop(), !1)));
-      return y(t.anchors.data), p;
-    }, v = (m) => {
-      const p = a.value, y = i.value, T = (_, M, O) => {
-        const ie = p[O] === M, re = _.config.href === y, H = {
-          text: _.text,
+    ), m = x(!0), r = x(null);
+    let p = null, c = null;
+    const u = k(
+      () => r.value !== null && r.value
+    ), v = k(
+      () => r.value !== null && !r.value
+    ), y = (f, h = []) => (f.forEach((_) => {
+      _.config.href && h.push(_.config.href), _.nodes && y(_.nodes, h);
+    }), h), S = (f) => {
+      const h = [], _ = (T) => T.some(($, B) => (h.push(B), $.config.href === f || $.nodes && _($.nodes) ? !0 : (h.pop(), !1)));
+      return _(t.anchors.data), h;
+    }, R = (f) => {
+      const h = a.value, _ = i.value, T = ($, B, O) => {
+        const ue = h[O] === B, ve = $.config.href === _, q = {
+          text: $.text,
           config: {
-            href: _.config.href,
-            dataGaName: _.config.dataGaName,
-            dataGaLocation: _.config.dataGaLocation,
+            href: $.config.href,
+            dataGaName: $.config.dataGaName,
+            dataGaLocation: $.config.dataGaLocation,
             // Highlight only the exact node (or first one on very first load)
-            isSelected: re || m && O === 0 && M === 0 && !y
+            isSelected: ve || f && O === 0 && B === 0 && !_
           }
         };
-        return t.alwaysExpanded ? _.nodes && (H.nodes = _.nodes.map(
+        return t.alwaysExpanded ? $.nodes && (q.nodes = $.nodes.map(
           (U, j) => T(U, j, O + 1)
-        )) : ie && _.nodes && (H.nodes = _.nodes.map(
+        )) : ue && $.nodes && (q.nodes = $.nodes.map(
           (U, j) => T(U, j, O + 1)
-        )), H;
+        )), q;
       };
-      return t.anchors.data.map((_, M) => T(_, M, 0));
-    }, k = (m) => {
-      let p = null;
-      for (const y of m) {
-        if (!y.isIntersecting) continue;
-        const T = y.boundingClientRect?.top ?? Number.POSITIVE_INFINITY;
-        if (!p) {
-          p = y;
+      return t.anchors.data.map(($, B) => T($, B, 0));
+    }, re = (f) => {
+      let h = null;
+      for (const _ of f) {
+        if (!_.isIntersecting) continue;
+        const T = _.boundingClientRect?.top ?? Number.POSITIVE_INFINITY;
+        if (!h) {
+          h = _;
           continue;
         }
-        const _ = p.boundingClientRect?.top ?? Number.POSITIVE_INFINITY, M = T >= 0 && (_ < 0 || T < _), O = !M && y.intersectionRatio > p.intersectionRatio;
-        (M || O) && (p = y);
+        const $ = h.boundingClientRect?.top ?? Number.POSITIVE_INFINITY, B = T >= 0 && ($ < 0 || T < $), O = !B && _.intersectionRatio > h.intersectionRatio;
+        (B || O) && (h = _);
       }
-      return p;
-    }, S = (m) => {
-      const p = k(m);
-      if (p && p.isIntersecting) {
-        const y = `#${p.target.id}`;
-        i.value = y, a.value = u(y), n.value = a.value.slice(), l.value = v(!1), r.value = !1;
+      return h;
+    }, ce = (f) => {
+      const h = re(f);
+      if (h && h.isIntersecting) {
+        const _ = `#${h.target.id}`;
+        i.value = _, a.value = S(_), o.value = a.value.slice(), s.value = R(!1), m.value = !1;
         return;
       }
-      r.value && !t.alwaysExpanded && (l.value = v(!0), r.value = !1);
-    }, R = () => {
-      b.value = window.innerWidth < 768;
-    }, le = () => {
-      const m = c(t.anchors.data), p = m[0] || null;
-      i.value = p, a.value = p ? u(p) : [], l.value = v(!0), r.value = !1;
-      const y = (window.innerHeight - 120 - 48) * -1;
-      f = new IntersectionObserver(S, {
-        rootMargin: `-120px 0px ${y}px 0px`,
+      m.value && !t.alwaysExpanded && (s.value = R(!0), m.value = !1);
+    }, F = (f) => {
+      r.value = f;
+    }, de = () => {
+      const f = y(t.anchors.data), h = f[0] || null;
+      i.value = h, a.value = h ? S(h) : [], s.value = R(!0), m.value = !1;
+      const _ = (window.innerHeight - 120 - 48) * -1;
+      c = new IntersectionObserver(ce, {
+        rootMargin: `-120px 0px ${_}px 0px`,
         threshold: 0
       }), setTimeout(() => {
-        m.forEach((T) => {
-          const _ = document.querySelector(T);
-          _ && f?.observe(_);
+        f.forEach((T) => {
+          const $ = document.querySelector(T);
+          $ && c?.observe($);
         });
       }, 0);
+    }, J = (f) => {
+      F(f.matches);
     };
-    return q(() => {
-      R(), window.addEventListener("resize", R), le();
-    }), X(() => {
-      window.removeEventListener("resize", R), f && f.disconnect();
-    }), (m, p) => (o(), s("div", null, [
-      b.value ? (o(), s("div", vt, [
-        L(ut, de(ue({ anchors: e.anchors, hyperlinks: e.hyperlinks })), null, 16),
-        g(m.$slots, "default", {}, void 0, !0)
-      ])) : (o(), s("div", ft, [
-        d("div", pt, [
-          g(m.$slots, "default", {}, void 0, !0)
+    return W(() => {
+      p = window.matchMedia("(min-width: 768px)"), F(p.matches), p.addEventListener("change", J), de();
+    }), te(() => {
+      p?.removeEventListener("change", J), c && c.disconnect();
+    }), (f, h) => (n(), l("div", null, [
+      d("div", {
+        class: "mobile",
+        "aria-hidden": u.value,
+        inert: u.value,
+        tabindex: u.value ? -1 : void 0
+      }, [
+        L(ht, fe(he({ anchors: e.anchors, hyperlinks: e.hyperlinks })), null, 16)
+      ], 8, gt),
+      d("div", mt, [
+        d("div", bt, [
+          b(f.$slots, "default", {}, void 0, !0)
         ]),
-        d("nav", ht, [
-          g(m.$slots, "header", {}, void 0, !0),
-          d("div", gt, [
-            e.anchors.text ? (o(), G(D, {
+        d("nav", {
+          id: "collapsible-sidebar",
+          class: "desktop",
+          "aria-hidden": v.value,
+          inert: v.value,
+          tabindex: v.value ? -1 : void 0
+        }, [
+          b(f.$slots, "header", {}, void 0, !0),
+          d("div", _t, [
+            e.anchors.text ? (n(), G(D, {
               key: 0,
               tag: "div",
               variant: "body3-bold",
               class: "nav-heading"
             }, {
               default: N(() => [
-                V(I(e.anchors.text), 1)
+                M(I(e.anchors.text), 1)
               ]),
               _: 1
             })) : E("", !0),
-            L(se, { nodes: l.value }, null, 8, ["nodes"])
+            L(ie, { nodes: s.value }, null, 8, ["nodes"])
           ]),
-          g(m.$slots, "footer", {}, void 0, !0)
-        ])
-      ]))
+          b(f.$slots, "footer", {}, void 0, !0)
+        ], 8, yt)
+      ])
     ]));
   }
-}), Ft = /* @__PURE__ */ $(mt, [["__scopeId", "data-v-32a730be"]]), bt = ["id", "data-tooltip-open", "aria-describedby"], yt = { class: "slp-tooltip__wrapper" }, _t = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], $t = ["id"], kt = ["id", "data-tooltip-open", "aria-describedby"], wt = { class: "slp-tooltip__wrapper" }, St = ["id"], xt = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], It = ["id"], Lt = /* @__PURE__ */ C({
+}), Xt = /* @__PURE__ */ w($t, [["__scopeId", "data-v-4e96ad9b"]]), kt = ["id", "data-tooltip-open", "aria-describedby"], wt = { class: "slp-tooltip__wrapper" }, St = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], xt = ["id"], It = ["id", "data-tooltip-open", "aria-describedby"], Lt = { class: "slp-tooltip__wrapper" }, Ct = ["id"], Nt = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], Tt = ["id"], Et = /* @__PURE__ */ C({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -753,48 +767,48 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     dataProperties: { default: null }
   },
   setup(e) {
-    const t = e, n = x(!1), i = x(""), a = x(""), l = x(""), b = (u) => {
-      t.mode === "hover" && (n.value = u.type === "mouseenter");
+    const t = e, o = x(!1), i = x(""), a = x(""), s = x(""), m = (u) => {
+      t.mode === "hover" && (o.value = u.type === "mouseenter");
     }, r = () => {
-      t.mode === "click" ? (c(), n.value = !n.value) : n.value = !1;
-    }, f = (u) => {
-      u.target.id !== t.id && (n.value = !1);
+      t.mode === "click" ? (c(), o.value = !o.value) : o.value = !1;
+    }, p = (u) => {
+      u.target.id !== t.id && (o.value = !1);
     }, c = () => {
       document.querySelectorAll('[data-tooltip-open="true"]').forEach((v) => {
         v.setAttribute("data-tooltip-open", "false");
       });
     };
-    return q(() => {
-      if (t.mode === "click" && document.addEventListener("click", f), t.text) {
+    return W(() => {
+      if (t.mode === "click" && document.addEventListener("click", p), t.text) {
         const u = t.text.match(/\[(.*?)\]/), v = t.text.match(/\[.*?\]\((.*?)\)/);
-        i.value = u ? u[1] : "", a.value = v ? v[1] : "", l.value = t.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
+        i.value = u ? u[1] : "", a.value = v ? v[1] : "", s.value = t.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
       }
-    }), ve(n, (u) => {
+    }), ge(o, (u) => {
       if (t.mode === "click" && t.id) {
         const v = document.getElementById(t.id);
         v && v.setAttribute("data-tooltip-open", u.toString());
       }
-    }), ee(() => {
-      document.removeEventListener("click", f);
-    }), (u, v) => e.mode === "hover" ? (o(), s("div", {
+    }), ae(() => {
+      document.removeEventListener("click", p);
+    }), (u, v) => e.mode === "hover" ? (n(), l("div", {
       key: 0,
       id: e.id,
-      "data-tooltip-open": n.value,
+      "data-tooltip-open": o.value,
       "aria-label": "Click to open tooltip with more information.",
       "aria-describedby": `${e.id}-content`,
       class: "slp-tooltip",
-      onMouseenter: b,
-      onMouseleave: b,
+      onMouseenter: m,
+      onMouseleave: m,
       onClick: r
     }, [
-      d("div", yt, [
-        g(u.$slots, "default", {}, void 0, !0),
-        n.value ? (o(), s("div", {
+      d("div", wt, [
+        b(u.$slots, "default", {}, void 0, !0),
+        o.value ? (n(), l("div", {
           key: 0,
-          class: h(["slp-tooltip__content", `${e.position} ${e.mode === "hover" ? "hover-mode" : ""}`])
+          class: g(["slp-tooltip__content", `${e.position} ${e.mode === "hover" ? "hover-mode" : ""}`])
         }, [
-          V(I(l.value) + " ", 1),
-          e.text ? (o(), s("a", {
+          M(I(s.value) + " ", 1),
+          e.text ? (n(), l("a", {
             key: 0,
             id: `${e.id}-content`,
             "data-ga-features": e.dataProperties && e.dataProperties.features.toLowerCase() || null,
@@ -804,40 +818,40 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
             "data-ga-location": e.dataProperties ? "features content" : null,
             role: "tooltip",
             href: a.value
-          }, I(i.value), 9, _t)) : e.list ? (o(), s("ul", {
+          }, I(i.value), 9, St)) : e.list ? (n(), l("ul", {
             key: 1,
             id: `${e.id}-content`,
             role: "tooltip",
             class: "slp-tooltip__list"
           }, [
-            (o(!0), s(z, null, B(e.list, (k) => (o(), s("li", {
-              key: k.text
-            }, I(k.text), 1))), 128))
-          ], 8, $t)) : E("", !0)
+            (n(!0), l(V, null, z(e.list, (y) => (n(), l("li", {
+              key: y.text
+            }, I(y.text), 1))), 128))
+          ], 8, xt)) : E("", !0)
         ], 2)) : E("", !0)
       ])
-    ], 40, bt)) : (o(), s("button", {
+    ], 40, kt)) : (n(), l("button", {
       key: 1,
       id: e.id,
-      "data-tooltip-open": n.value,
+      "data-tooltip-open": o.value,
       "aria-label": "Click to open tooltip with more information.",
       "aria-describedby": `${e.id}-content`,
-      class: h(`slp-tooltip ${e.mode === "click" ? "button-mode" : ""}`),
+      class: g(`slp-tooltip ${e.mode === "click" ? "button-mode" : ""}`),
       onClick: r
     }, [
-      d("div", wt, [
-        g(u.$slots, "default", {}, void 0, !0),
-        n.value ? (o(), s("div", {
+      d("div", Lt, [
+        b(u.$slots, "default", {}, void 0, !0),
+        o.value ? (n(), l("div", {
           key: 0,
-          class: h(["slp-tooltip__content", `${e.position}`])
+          class: g(["slp-tooltip__content", `${e.position}`])
         }, [
-          e.text ? (o(), s("span", {
+          e.text ? (n(), l("span", {
             key: 0,
             id: `${e.id}-content`,
             role: "tooltip"
           }, [
-            V(I(l.value) + " ", 1),
-            i.value && a.value ? (o(), s("a", {
+            M(I(s.value) + " ", 1),
+            i.value && a.value ? (n(), l("a", {
               key: 0,
               "data-ga-features": e.dataProperties && e.dataProperties.features.toLowerCase() || null,
               "data-ga-features-sub": e.dataProperties?.sub,
@@ -845,84 +859,84 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
               "data-ga-name": e.dataProperties?.plan,
               "data-ga-location": e.dataProperties ? "features content" : null,
               href: a.value
-            }, I(i.value), 9, xt)) : E("", !0)
-          ], 8, St)) : (o(), s("ul", {
+            }, I(i.value), 9, Nt)) : E("", !0)
+          ], 8, Ct)) : (n(), l("ul", {
             key: 1,
             id: `${e.id}-content`,
             role: "tooltip",
             class: "slp-tooltip__list"
           }, [
-            (o(!0), s(z, null, B(e.list, (k) => (o(), s("li", {
-              key: k.text
-            }, I(k.text), 1))), 128))
-          ], 8, It))
+            (n(!0), l(V, null, z(e.list, (y) => (n(), l("li", {
+              key: y.text
+            }, I(y.text), 1))), 128))
+          ], 8, Tt))
         ], 2)) : E("", !0)
       ])
-    ], 10, kt));
+    ], 10, It));
   }
-}), Ct = /* @__PURE__ */ $(Lt, [["__scopeId", "data-v-0412a63f"]]), Nt = {
+}), Vt = /* @__PURE__ */ w(Et, [["__scopeId", "data-v-0412a63f"]]), zt = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, Tt = ["onMouseenter", "onMouseleave"], Et = ["data-ga-name", "data-ga-location", "href"], zt = {
+}, Bt = ["onMouseenter", "onMouseleave"], Mt = ["data-ga-name", "data-ga-location", "href"], Pt = {
   key: 0,
   class: "breadcrumb__chevron"
-}, Bt = ["content"], Mt = {
+}, Ot = ["content"], Gt = {
   key: 1,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, Vt = ["href", "data-ga-name", "data-ga-location"], Pt = ["content"], Ot = /* @__PURE__ */ C({
+}, Rt = ["href", "data-ga-name", "data-ga-location"], At = ["content"], Dt = /* @__PURE__ */ C({
   __name: "SlpBreadcrumb",
   props: {
     crumbs: { default: () => [] },
     router: {}
   },
   setup(e) {
-    const t = e, n = x(t.crumbs), i = x(!1), a = (r) => {
-      const f = r.split(" ");
-      for (let c = 0; c < f.length; c++)
-        f[c] = f[c][0].toUpperCase() + f[c].substr(1);
-      return f.join(" ");
-    }, l = () => {
+    const t = e, o = x(t.crumbs), i = x(!1), a = (r) => {
+      const p = r.split(" ");
+      for (let c = 0; c < p.length; c++)
+        p[c] = p[c][0].toUpperCase() + p[c].substr(1);
+      return p.join(" ");
+    }, s = () => {
       i.value = window.innerWidth < 768;
-    }, b = (r) => {
-      n.value[r] && (n.value[r] = {
-        ...n.value[r],
-        hover: !n.value[r].hover
+    }, m = (r) => {
+      o.value[r] && (o.value[r] = {
+        ...o.value[r],
+        hover: !o.value[r].hover
       });
     };
-    return fe(() => {
+    return me(() => {
       if (t.router) {
-        const r = t.router.currentRoute.path, f = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), c = [];
+        const r = t.router.currentRoute.path, p = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), c = [];
         let u = "";
-        f.forEach((v) => {
+        p.forEach((v) => {
           u = `${u}/${v}`;
-          const k = t.router.match(u);
-          k.params.slug !== null && v.length && c.push({
+          const y = t.router.match(u);
+          y.params.slug !== null && v.length && c.push({
             title: a(v.replace(/-/g, " ")),
             hover: !1,
-            ...k
+            ...y
           });
-        }), n.value = c;
+        }), o.value = c;
       }
-    }), q(() => {
-      l(), window.addEventListener("resize", l);
-    }), ee(() => {
-      window.removeEventListener("resize", l);
-    }), (r, f) => n.value && !i.value ? (o(), s("ol", Nt, [
-      (o(!0), s(z, null, B(n.value, (c, u) => (o(), s("li", {
+    }), W(() => {
+      s(), window.addEventListener("resize", s);
+    }), ae(() => {
+      window.removeEventListener("resize", s);
+    }), (r, p) => o.value && !i.value ? (n(), l("ol", zt, [
+      (n(!0), l(V, null, z(o.value, (c, u) => (n(), l("li", {
         key: c.title,
-        class: h(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": u === n.value.length - 1
+        class: g(["breadcrumb__crumb", {
+          "breadcrumb__crumb--disabled": u === o.value.length - 1
         }]),
         property: "itemListElement",
         typeof: "ListItem",
-        onMouseenter: (v) => b(u),
-        onMouseleave: (v) => b(u)
+        onMouseenter: (v) => m(u),
+        onMouseleave: (v) => m(u)
       }, [
-        L(Ct, {
+        L(Vt, {
           text: c.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
@@ -933,7 +947,7 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
               typeof: "WebPage",
               "data-ga-name": c.dataGaName || c.title.toLowerCase(),
               "data-ga-location": c.dataGaLocation || "breadcrumb",
-              href: u !== n.value.length - 1 ? c.path : void 0
+              href: u !== o.value.length - 1 ? c.path : void 0
             }, [
               L(D, {
                 tag: "span",
@@ -941,28 +955,28 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
                 property: "name"
               }, {
                 default: N(() => [
-                  V(I(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
+                  M(I(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
                 ]),
                 _: 2
               }, 1024)
-            ], 8, Et)
+            ], 8, Mt)
           ]),
           _: 2
         }, 1032, ["text"]),
-        u !== n.value.length - 1 ? (o(), s("span", zt, [
+        u !== o.value.length - 1 ? (n(), l("span", Pt, [
           L(A, {
             color: "accent-500",
             size: "xs",
-            icon: P(oe)
+            icon: P(le)
           }, null, 8, ["icon"])
         ])) : E("", !0),
         d("meta", {
           property: "position",
           content: u + 1
-        }, null, 8, Bt)
-      ], 42, Tt))), 128))
-    ])) : n.value && i.value ? (o(), s("ol", Mt, [
-      (o(!0), s(z, null, B(n.value, (c) => (o(), s("li", {
+        }, null, 8, Ot)
+      ], 42, Bt))), 128))
+    ])) : o.value && i.value ? (n(), l("ol", Gt, [
+      (n(!0), l(V, null, z(o.value, (c) => (n(), l("li", {
         key: c.title,
         class: "breadcrumb__crumb breadcrumb__crumb--mobile",
         property: "itemListElement",
@@ -970,7 +984,7 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
       }, [
         d("a", {
           class: "slp-flex slp-align-items-center",
-          href: n.value[n.value.length - 2].path,
+          href: o.value[o.value.length - 2].path,
           "data-ga-name": c.dataGaName || c.title.toLowerCase(),
           "data-ga-location": c.dataGaLocation || "breadcrumb",
           property: "item",
@@ -980,7 +994,7 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
             L(A, {
               color: "accent-500",
               size: "xs",
-              icon: P(Ae)
+              icon: P(qe)
             }, null, 8, ["icon"])
           ]),
           L(D, {
@@ -990,22 +1004,22 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
             property: "name"
           }, {
             default: N(() => [
-              V(I(n.value[n.value.length - 2].title), 1)
+              M(I(o.value[o.value.length - 2].title), 1)
             ]),
             _: 1
           })
-        ], 8, Vt),
+        ], 8, Rt),
         d("meta", {
           property: "position",
-          content: n.value.length - 1
-        }, null, 8, Pt)
+          content: o.value.length - 1
+        }, null, 8, At)
       ]))), 128))
     ])) : E("", !0);
   }
-}), Jt = /* @__PURE__ */ $(Ot, [["__scopeId", "data-v-6894f4b8"]]), Gt = ["value"], Rt = {
+}), ea = /* @__PURE__ */ w(Dt, [["__scopeId", "data-v-6894f4b8"]]), Ht = ["value"], Wt = {
   key: 1,
   class: "dropdown"
-}, At = /* @__PURE__ */ C({
+}, qt = /* @__PURE__ */ C({
   __name: "SlpDropdown",
   props: {
     modelValue: {},
@@ -1015,51 +1029,51 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, i = t, a = (r, f) => {
+    const o = e, i = t, a = (r, p) => {
       if (typeof r == "object" && r !== null) {
-        if (!f) {
+        if (!p) {
           const v = Object.keys(r)[0];
           return r[v];
         }
-        const c = f.split(".");
+        const c = p.split(".");
         let u = r;
         for (const v of c)
           u = u?.[v];
         return u;
       }
       return r;
-    }, l = w(() => n.options.length > 0 ? a(n.options[0], n.valueKey) : ""), b = w({
+    }, s = k(() => o.options.length > 0 ? a(o.options[0], o.valueKey) : ""), m = k({
       // Getter: Called when the template reads selectedValue
       // Returns the current modelValue from parent (or empty string if undefined)
-      get: () => n.modelValue ?? l.value,
+      get: () => o.modelValue ?? s.value,
       // Setter: Called when the select's v-model updates selectedValue
       // Emits the new value to the parent component
       set: (r) => i("update:modelValue", r)
     });
-    return (r, f) => e.options?.length ? W((o(), s("select", {
+    return (r, p) => e.options?.length ? H((n(), l("select", {
       key: 0,
-      "onUpdate:modelValue": f[0] || (f[0] = (c) => b.value = c),
+      "onUpdate:modelValue": p[0] || (p[0] = (c) => m.value = c),
       class: "dropdown"
     }, [
-      (o(!0), s(z, null, B(e.options, (c, u) => (o(), s("option", {
+      (n(!0), l(V, null, z(e.options, (c, u) => (n(), l("option", {
         key: `${a(c, e.valueKey)}-${u}`,
         value: a(c, e.valueKey)
-      }, I(a(c, e.labelKey)), 9, Gt))), 128))
+      }, I(a(c, e.labelKey)), 9, Ht))), 128))
     ], 512)), [
-      [pe, b.value]
-    ]) : (o(), s("div", Rt, [...f[1] || (f[1] = [
+      [be, m.value]
+    ]) : (n(), l("div", Wt, [...p[1] || (p[1] = [
       d("p", null, "No options available", -1)
     ])]));
   }
-}), Yt = /* @__PURE__ */ $(At, [["__scopeId", "data-v-4a5d0657"]]), Dt = ["id"], Wt = /* @__PURE__ */ C({
+}), ta = /* @__PURE__ */ w(qt, [["__scopeId", "data-v-4a5d0657"]]), Ut = ["id"], jt = /* @__PURE__ */ C({
   __name: "SlpSection",
   props: {
     backgroundColor: {
       type: String,
       required: !1,
       validator(e) {
-        const t = /^#([A-Fa-f0-9]{3}){1,2}$/.test(e), n = /^\$color-[a-zA-Z0-9-]+$/.test(e);
-        return e ? t || n : !0;
+        const t = /^#([A-Fa-f0-9]{3}){1,2}$/.test(e), o = /^\$color-[a-zA-Z0-9-]+$/.test(e);
+        return e ? t || o : !0;
       }
     },
     id: {
@@ -1068,35 +1082,35 @@ const ne = /* @__PURE__ */ $(He, [["render", je]]), Ke = {
     }
   },
   setup(e) {
-    const t = e, n = w(() => !t.backgroundColor || t.backgroundColor?.startsWith("$") ? {} : { backgroundColor: t.backgroundColor }), i = w(() => t.backgroundColor?.startsWith("$") ? `slp-background-${t.backgroundColor?.slice(1)}` : null);
-    return (a, l) => (o(), s("section", {
-      style: Q(n.value),
-      class: h(i.value),
+    const t = e, o = k(() => !t.backgroundColor || t.backgroundColor?.startsWith("$") ? {} : { backgroundColor: t.backgroundColor }), i = k(() => t.backgroundColor?.startsWith("$") ? `slp-background-${t.backgroundColor?.slice(1)}` : null);
+    return (a, s) => (n(), l("section", {
+      style: ee(o.value),
+      class: g(i.value),
       id: e.id || void 0
     }, [
-      L(te, null, {
+      L(oe, null, {
         default: N(() => [
-          g(a.$slots, "default", {}, void 0, !0)
+          b(a.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       })
-    ], 14, Dt));
+    ], 14, Ut));
   }
-}), Qt = /* @__PURE__ */ $(Wt, [["__scopeId", "data-v-2b3ad016"]]);
+}), aa = /* @__PURE__ */ w(jt, [["__scopeId", "data-v-2b3ad016"]]);
 export {
-  Jt as SlpBreadcrumb,
+  ea as SlpBreadcrumb,
   Z as SlpButton,
-  Ht as SlpColumn,
-  te as SlpContainer,
-  Yt as SlpDropdown,
+  Zt as SlpColumn,
+  oe as SlpContainer,
+  ta as SlpDropdown,
   A as SlpIcon,
-  Zt as SlpLoader,
-  tt as SlpRadioButton,
-  Kt as SlpRadioButtonGroup,
-  Ut as SlpRow,
-  Qt as SlpSection,
-  jt as SlpSideNavigation,
-  Ft as SlpSideNavigationWithTree,
-  Ct as SlpTooltip,
+  Qt as SlpLoader,
+  lt as SlpRadioButton,
+  Yt as SlpRadioButtonGroup,
+  Ft as SlpRow,
+  aa as SlpSection,
+  Jt as SlpSideNavigation,
+  Xt as SlpSideNavigationWithTree,
+  Vt as SlpTooltip,
   D as SlpTypography
 };