slippers-ui 3.1.18 → 3.1.19

package/dist/slippers-ui.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as L, computed as $, openBlock as s, createElementBlock as r, mergeProps as q, renderSlot as b, normalizeClass as _, createElementVNode as v, createBlock as O, resolveDynamicComponent as j, normalizeStyle as Z, withCtx as N, createCommentVNode as E, ref as k, onMounted as P, nextTick as ne, onUnmounted as J, createVNode as y, unref as G, Fragment as T, renderList as z, withModifiers as H, toDisplayString as w, createTextVNode as B, resolveComponent as se, withDirectives as F, vShow as D, normalizeProps as le, guardReactiveProps as ie, onBeforeUnmount as K, onBeforeMount as Q, watch as U, vModelSelect as re } from "vue";
-import { _ as S, C as X, a as Y, b as x, c as de } from "./chunks/ChevronLgUp-EczI5oF8.js";
-const ce = ["href"], ue = /* @__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 },
@@ -8,135 +8,135 @@ const ce = ["href"], ue = /* @__PURE__ */ L({
     href: {}
   },
   setup(u) {
-    const e = u, o = $(() => e.disabled ?? !1), i = $(() => e.variant ?? "primary");
-    $(() => e.href ?? "");
-    const a = $(() => {
-      let n = [`slp-btn-${i.value}`];
+    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", q({ 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, ce)) : (s(), r("button", q({ 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(ue, [["__scopeId", "data-v-56e2df5f"]]), pe = /* @__PURE__ */ L({
+}), U = /* @__PURE__ */ C(pe, [["__scopeId", "data-v-56e2df5f"]]), fe = /* @__PURE__ */ I({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
   setup(u) {
-    const e = u, o = $(() => e.cols ?? null), i = $(() => e.size ?? "md"), a = $(() => o.value ? `slp-col-${i.value}-${o.value}` : `slp-col-${i.value}`);
+    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));
   }
-}), Nt = /* @__PURE__ */ S(pe, [["__scopeId", "data-v-00b68f22"]]), fe = {
+}), Tt = /* @__PURE__ */ C(fe, [["__scopeId", "data-v-00b68f22"]]), ve = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, ve = {
+}, he = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, he = {
+}, me = {
   key: 2,
   class: "slp-gradient-background"
-}, me = {
+}, ge = {
   key: 3,
   class: "slp-full-gradient-background"
-}, ge = {
+}, _e = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, _e = {
+}, be = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, be = {
+}, ye = {
   key: 6,
   class: "slp-half-grey-background"
-}, ye = {
+}, $e = {
   key: 7,
   class: "slp-partial-white-background"
-}, $e = {
+}, ke = {
   key: 8,
   class: "slp-partial-grey-background"
-}, ke = /* @__PURE__ */ L({
+}, we = /* @__PURE__ */ I({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
   setup(u) {
-    const e = u, o = $(() => e.fluid ?? !1), i = $(() => e.variant ?? "white"), a = $(() => o.value ? "fluid" : "");
-    return (n, d) => i.value === "light-purple-100" ? (s(), r("div", fe, [
+    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", ve, [
+    ])) : 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", he, [
+    ])) : 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", me, [
+    ])) : 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", ge, [
+    ])) : 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", _e, [
+    ])) : 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", be, [
+    ])) : 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", ye, [
+    ])) : 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", $e, [
+    ])) : 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(ke, [["__scopeId", "data-v-67a0761e"]]), we = /* @__PURE__ */ L({
+}), oe = /* @__PURE__ */ C(we, [["__scopeId", "data-v-67a0761e"]]), Se = /* @__PURE__ */ I({
   __name: "SlpIcon",
   props: {
     size: {
@@ -156,10 +156,10 @@ const ce = ["href"], ue = /* @__PURE__ */ L({
     }
   },
   setup(u) {
-    const e = u, o = $(() => {
+    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,26 +169,26 @@ const ce = ["href"], ue = /* @__PURE__ */ L({
       return a;
     });
     return (a, n) => {
-      var d, l;
-      return s(), O(j(u.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 = u.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(we, [["__scopeId", "data-v-b82aeda9"]]), Se = {}, Ce = { class: "slp-row" };
-function Le(u, e) {
-  return s(), r("div", Ce, [
+}), 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 Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f"]]), Ie = {
+const zt = /* @__PURE__ */ C(Ce, [["render", Ie], ["__scopeId", "data-v-adc8d02f"]]), Ne = {
   key: 0,
   class: "arrow-symbol"
-}, Ne = /* @__PURE__ */ L({
+}, Te = /* @__PURE__ */ I({
   __name: "SlpTypography",
   props: {
     variant: {},
@@ -217,21 +217,21 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], o = ["span", "h1", "h2", "h3", "h4", "p", "div"], i = u, 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", Ie, "→")) : E("", !0)
+        b(i.$slots, "default", {}, void 0, !0),
+        a.value === "arrow" ? (s(), r("span", Ne, "→")) : B("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), A = /* @__PURE__ */ S(Ne, [["__scopeId", "data-v-fba90f83"]]), Te = {
+}), F = /* @__PURE__ */ C(Te, [["__scopeId", "data-v-f601c702"]]), ze = {
   key: 0,
   class: "dropdown-menu"
-}, ze = ["onClick"], Ee = { class: "side-navigation" }, Me = ["data-ga-name", "onClick"], Ge = /* @__PURE__ */ L({
+}, Ee = ["onClick"], Me = { class: "side-navigation" }, Be = ["data-ga-name", "onClick"], Ge = /* @__PURE__ */ I({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -248,13 +248,13 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
     }
   },
   setup(u) {
-    const e = u, o = k(null), i = (p) => {
-      o.value && !o.value.contains(p.target) && (l.value = !1);
-    }, a = k(null), n = k(null);
+    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 = (p) => {
+    const i = w(!1), c = (p) => {
       const h = document.getElementById(p);
-      h && h.scrollIntoView({ behavior: "smooth" }), l.value = !1;
+      h && h.scrollIntoView({ behavior: "smooth" }), i.value = !1;
     }, t = () => {
       if (!n.value) return;
       const p = e.navigationItems.map((h) => document.getElementById(h.id)).filter((h) => h !== null);
@@ -274,14 +274,14 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
         }
       ), p.forEach((h) => d == null ? void 0 : d.observe(h));
     };
-    return P(() => {
-      document.addEventListener("click", i), ne(() => {
+    return D(() => {
+      document.addEventListener("click", l), se(() => {
         t();
       });
-    }), J(() => {
-      d && d.disconnect(), document.removeEventListener("click", i);
+    }), X(() => {
+      d && d.disconnect(), document.removeEventListener("click", l);
     }), (p, h) => (s(), r("div", {
-      class: _([
+      class: g([
         "side-navigation-layout",
         `side-navigation-layout--${e.position}`,
         { "side-navigation--dark": e.darkMode }
@@ -294,16 +294,16 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
       }, [
         v("button", {
           class: "dropdown-toggle",
-          onClick: h[0] || (h[0] = (m) => l.value = !l.value)
+          onClick: h[0] || (h[0] = (m) => i.value = !i.value)
         }, [
           h[1] || (h[1] = v("span", null, "Jump to a section", -1)),
-          y(R, {
-            icon: l.value ? G(X) : G(Y),
+          $(A, {
+            icon: i.value ? G(ee) : G(te),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        l.value ? (s(), r("ul", Te, [
+        i.value ? (s(), r("ul", ze, [
           (s(!0), r(T, null, z(e.navigationItems, (m) => (s(), r("li", {
             key: m.id,
             class: "dropdown-item"
@@ -311,12 +311,12 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
             v("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: H((f) => c(m.id), ["prevent"])
-            }, w(m.text), 9, ze)
+              onClick: Z((f) => c(m.id), ["prevent"])
+            }, S(m.text), 9, Ee)
           ]))), 128))
-        ])) : E("", !0)
+        ])) : B("", !0)
       ], 512),
-      v("nav", Ee, [
+      v("nav", Me, [
         v("ul", null, [
           (s(!0), r(T, null, z(e.navigationItems, (m) => (s(), r("li", {
             key: m.id,
@@ -324,11 +324,11 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
           }, [
             v("a", {
               href: "#",
-              class: _(["side-navigation__link", { "side-navigation__link--active": a.value === m.id }]),
+              class: g(["side-navigation__link", { "side-navigation__link--active": a.value === m.id }]),
               "data-ga-name": m.text,
               "data-ga-location": "side anchor",
-              onClick: H((f) => c(m.id), ["prevent"])
-            }, w(m.text), 11, Me)
+              onClick: Z((f) => c(m.id), ["prevent"])
+            }, S(m.text), 11, Be)
           ]))), 128))
         ])
       ]),
@@ -341,7 +341,7 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
       ], 512)
     ], 2));
   }
-}), zt = /* @__PURE__ */ S(Ge, [["__scopeId", "data-v-68f8d83f"]]), Be = ["for"], Ve = ["name", "value", "id", "checked", "disabled"], Oe = /* @__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: {},
@@ -350,31 +350,31 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
   },
   emits: ["update:modelValue"],
   setup(u, { emit: e }) {
-    const o = e, i = (a) => {
+    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, Ve),
+        }, null, 40, Oe),
         n[0] || (n[0] = v("span", { class: "slp-radio__checkmark" }, null, -1))
-      ], 10, Be);
+      ], 10, Ve);
     };
   }
-}), Re = /* @__PURE__ */ S(Oe, [["__scopeId", "data-v-f37e970e"]]), Ae = /* @__PURE__ */ L({
+}), Ae = /* @__PURE__ */ C(Re, [["__scopeId", "data-v-f37e970e"]]), Fe = /* @__PURE__ */ I({
   __name: "SlpRadioButtonGroup",
   props: {
     options: {},
@@ -389,19 +389,19 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
     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(Re, {
+          (s(!0), r(T, null, z(n.options, (t) => (s(), R(Ae, {
             key: t.value,
             option: t.value,
             name: n.name,
@@ -416,13 +416,13 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
       }, 8, ["class"]);
     };
   }
-}), Et = /* @__PURE__ */ S(Ae, [["__scopeId", "data-v-ae31ec89"]]), Fe = {
+}), Mt = /* @__PURE__ */ C(Fe, [["__scopeId", "data-v-ae31ec89"]]), Pe = {
   key: 0,
   class: "slp-loading-round"
-}, Pe = {
+}, De = {
   key: 1,
   class: "slp-loading-linear"
-}, De = /* @__PURE__ */ L({
+}, We = /* @__PURE__ */ I({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
@@ -430,12 +430,12 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
   },
   setup(u) {
     const e = u;
-    return (o, i) => {
+    return (o, l) => {
       var a;
-      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), r("div", Fe)) : (s(), r("div", Pe));
+      return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), r("div", Pe)) : (s(), r("div", De));
     };
   }
-}), Mt = /* @__PURE__ */ S(De, [["__scopeId", "data-v-ee32411b"]]), We = ["href", "data-ga-name", "data-ga-location"], qe = /* @__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: "" },
@@ -451,21 +451,21 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
   },
   setup(u) {
     return (e, o) => {
-      var a, n, d, l, c, t;
-      const i = se("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, We)) : E("", !0),
+        }, S(e.text), 11, qe)) : B("", !0),
         (s(!0), r(T, null, z(e.nodes, (p) => {
-          var h, m, f, g, I, C;
-          return s(), O(i, {
+          var h, m, f, _, L, y;
+          return s(), R(l, {
             key: p.text,
             nodes: p.nodes,
             text: p.text,
@@ -473,16 +473,16 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
               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: (((g = e.config) == null ? void 0 : g.depth) ?? 0) + 1,
-              isSelected: (I = p.config) == null ? void 0 : I.isSelected,
-              mobile: (C = e.config) == null ? void 0 : C.mobile
+              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(qe, [["__scopeId", "data-v-c3be63ed"]]), He = { class: "dropdown__list" }, Ue = { class: "horizontal-rule slp-my-16" }, je = /* @__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" },
@@ -490,49 +490,49 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
     hyperlinks: {}
   },
   setup(u) {
-    const e = k(!1), o = () => {
+    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", Ue, 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"
@@ -540,28 +540,28 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__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"])
                     ]),
@@ -576,107 +576,107 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), Ze = /* @__PURE__ */ S(je, [["__scopeId", "data-v-9b690a76"]]), Je = { key: 0 }, Ke = {
+}), Je = /* @__PURE__ */ C(Ze, [["__scopeId", "data-v-9b690a76"]]), Ke = { key: 0 }, Qe = {
   key: 1,
   id: "collapsible-sidebar-wrapper"
-}, Qe = { id: "collapsible-sidebar-content" }, Xe = { id: "collapsible-sidebar" }, Ye = { class: "anchors" }, xe = /* @__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(u) {
-    const e = u, o = k([]), i = k(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 = k(!1), n = k(!0);
+    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 = (f, g = []) => (f.forEach((I) => {
-      I.config.href && g.push(I.config.href), I.nodes && l(I.nodes, g);
-    }), g), c = (f) => {
-      const g = [], I = (C) => C.some((M, V) => (g.push(V), M.config.href === f || M.nodes && I(M.nodes) ? !0 : (g.pop(), !1)));
-      return I(e.anchors.data), g;
+    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 g = 0;
-      const I = (C, M) => {
-        const V = {
-          text: C.text,
+      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 f && M === 0 && (V.config.isSelected = !0), o.value[g] === M && (C.nodes && (g += 1, V.nodes = C.nodes.map(
-          (ae, oe) => I(ae, oe)
-        ), g -= 1), g + 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, M) => I(C, M)
-      );
+      return e.anchors.data.map((y, E) => L(y, E, _));
     }, p = (f) => {
-      f.forEach((g) => {
-        g.isIntersecting ? (o.value = c(`#${g.target.id}`), i.value = t(!1)) : n.value && (i.value = t(!0), n.value = !1);
+      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));
       });
     }, h = () => {
       a.value = window.innerWidth < 768;
     }, m = () => {
-      i.value = t(!0), n.value = !1;
+      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(() => {
-        l(e.anchors.data).forEach((I) => {
-          const C = document.querySelector(I);
-          C && (d == null || d.observe(C));
+      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(() => {
+    return D(() => {
       h(), window.addEventListener("resize", h), m();
-    }), J(() => {
+    }), X(() => {
       window.removeEventListener("resize", h), d && d.disconnect();
-    }), (f, g) => (s(), r("div", null, [
-      a.value ? (s(), r("div", Je, [
-        y(Ze, le(ie({ anchors: f.anchors, hyperlinks: f.hyperlinks })), null, 16),
+    }), (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", Ke, [
-        v("div", Qe, [
+      ])) : (s(), r("div", Qe, [
+        v("div", Xe, [
           b(f.$slots, "default", {}, void 0, !0)
         ]),
-        v("nav", Xe, [
+        v("nav", Ye, [
           b(f.$slots, "header", {}, void 0, !0),
-          v("div", Ye, [
-            f.anchors.text ? (s(), O(A, {
+          v("div", xe, [
+            f.anchors.text ? (s(), R(F, {
               key: 0,
               tag: "div",
               variant: "body3-bold",
               class: "nav-heading"
             }, {
               default: N(() => [
-                B(w(f.anchors.text), 1)
+                V(S(f.anchors.text), 1)
               ]),
               _: 1
-            })) : E("", !0),
-            y(te, { nodes: i.value }, null, 8, ["nodes"])
+            })) : B("", !0),
+            $(ne, { nodes: l.value }, null, 8, ["nodes"])
           ]),
           b(f.$slots, "footer", {}, void 0, !0)
         ])
       ]))
     ]));
   }
-}), Gt = /* @__PURE__ */ S(xe, [["__scopeId", "data-v-9319fd2e"]]), et = ["id", "aria-describedby"], tt = { class: "slp-tooltip__wrapper" }, at = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], ot = ["id"], nt = ["id", "aria-describedby"], st = { class: "slp-tooltip__wrapper" }, lt = ["id", "innerHTML"], it = ["id"], rt = /* @__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: "" },
@@ -687,19 +687,19 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
     dataProperties: { default: null }
   },
   setup(u) {
-    const e = u, o = k(!1), i = k(""), a = k(""), n = k(""), d = (t) => {
+    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(/\[(.*?)\]/), p = e.text.match(/\((.*?)\)/);
-        i.value = t ? t[1] : "", a.value = p ? p[1] : "", n.value = e.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
+        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, p) => {
       var h, m, f;
@@ -711,15 +711,15 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
         class: "slp-tooltip",
         onMouseenter: d,
         onMouseleave: d,
-        onClick: l
+        onClick: i
       }, [
-        v("div", tt, [
+        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`,
@@ -730,88 +730,88 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
               "data-ga-location": t.dataProperties ? "features content" : null,
               role: "tooltip",
               href: a.value
-            }, w(i.value), 9, at)) : 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, (g) => (s(), r("li", {
-                key: g.text
-              }, w(g.text), 1))), 128))
-            ], 8, ot)) : E("", !0)
-          ], 2)) : E("", !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, et)) : (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", st, [
+        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, lt)) : (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, (g) => (s(), r("li", {
-                key: g.text
-              }, w(g.text), 1))), 128))
-            ], 8, it))
-          ], 2)) : E("", !0)
+              (s(!0), r(T, null, z(t.list, (_) => (s(), r("li", {
+                key: _.text
+              }, S(_.text), 1))), 128))
+            ], 8, rt))
+          ], 2)) : B("", !0)
         ])
-      ], 10, nt));
+      ], 10, st));
     };
   }
-}), dt = /* @__PURE__ */ S(rt, [["__scopeId", "data-v-a2668f04"]]), ct = {
+}), ct = /* @__PURE__ */ C(dt, [["__scopeId", "data-v-a2668f04"]]), ut = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, ut = ["onMouseenter", "onMouseleave"], pt = ["data-ga-name", "data-ga-location", "href"], ft = {
+}, pt = ["onMouseenter", "onMouseleave"], ft = ["data-ga-name", "data-ga-location", "href"], vt = {
   key: 0,
   class: "breadcrumb__chevron"
-}, vt = ["content"], ht = {
+}, ht = ["content"], mt = {
   key: 1,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, mt = ["href", "data-ga-name", "data-ga-location"], gt = ["content"], _t = /* @__PURE__ */ L({
+}, gt = ["href", "data-ga-name", "data-ga-location"], _t = ["content"], bt = /* @__PURE__ */ I({
   __name: "SlpBreadcrumb",
   props: {
     crumbs: { default: () => [] },
     router: {}
   },
   setup(u) {
-    const e = u, o = k(e.crumbs), i = k(!1), a = (l) => {
-      const c = l.split(" ");
+    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 = [];
+        const i = e.router.currentRoute.path, c = i.startsWith("/") ? i.substring(1).split("/") : i.split("/"), t = [];
         let p = "";
         c.forEach((h) => {
           p = `${p}/${h}`;
@@ -823,14 +823,14 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
           });
         }), 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", ct, [
+    }), (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", {
+        class: g(["breadcrumb__crumb", {
           "breadcrumb__crumb--disabled": p === o.value.length - 1
         }]),
         property: "itemListElement",
@@ -838,7 +838,7 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
         onMouseenter: (h) => d(p),
         onMouseleave: (h) => d(p)
       }, [
-        y(dt, {
+        $(ct, {
           text: t.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
@@ -851,33 +851,33 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
               "data-ga-location": t.dataGaLocation || "breadcrumb",
               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, pt)
+            ], 8, ft)
           ]),
           _: 2
         }, 1032, ["text"]),
-        p !== o.value.length - 1 ? (s(), r("span", ft, [
-          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"])
-        ])) : E("", !0),
+        ])) : B("", !0),
         v("meta", {
           property: "position",
           content: p + 1
-        }, null, 8, vt)
-      ], 42, ut))), 128))
-    ])) : o.value && i.value ? (s(), r("ol", ht, [
+        }, 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",
@@ -893,32 +893,32 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
           typeof: "WebPage"
         }, [
           v("span", null, [
-            y(R, {
+            $(A, {
               color: "accent-500",
               size: "xs",
-              icon: G(de)
+              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, mt),
+        ], 8, gt),
         v("meta", {
           property: "position",
           content: o.value.length - 1
-        }, null, 8, gt)
+        }, null, 8, _t)
       ]))), 128))
-    ])) : E("", !0);
+    ])) : B("", !0);
   }
-}), Bt = /* @__PURE__ */ S(_t, [["__scopeId", "data-v-fd412793"]]), bt = { class: "dropdown" }, yt = ["aria-label", "name"], $t = ["value", "name"], kt = ["value", "name"], wt = /* @__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: {},
@@ -933,9 +933,9 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
   },
   emits: ["input"],
   setup(u, { emit: e }) {
-    const o = u, i = e, a = k(o.value), n = k(!0);
-    Q(() => {
-      var l;
+    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))
@@ -944,52 +944,52 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__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", bt, [
-      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, $t))), 128)) : (s(!0), r(T, { key: 1 }, z(l.options, (t) => {
+        }, 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: (p = l.config) != null && p.primitive ? t[l.valueField] : t,
-            name: t[l.textField]
-          }, w(t[l.textField]), 9, kt);
+            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, yt), [
-        [re, a.value]
+      ], 40, $t), [
+        [de, a.value]
       ])
     ]));
   }
-}), Vt = /* @__PURE__ */ S(wt, [["__scopeId", "data-v-9c71f7b0"]]), St = ["id"], Ct = /* @__PURE__ */ L({
+}), Ot = /* @__PURE__ */ C(St, [["__scopeId", "data-v-9c71f7b0"]]), Ct = ["id"], Lt = /* @__PURE__ */ I({
   __name: "SlpSection",
   props: {
     backgroundColor: {
@@ -1006,42 +1006,42 @@ const Tt = /* @__PURE__ */ S(Se, [["render", Le], ["__scopeId", "data-v-adc8d02f
     }
   },
   setup(u) {
-    const e = u, o = $(() => {
+    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),
+      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, St));
+    ], 14, Ct));
   }
-}), Ot = /* @__PURE__ */ S(Ct, [["__scopeId", "data-v-2b3ad016"]]);
+}), Rt = /* @__PURE__ */ C(Lt, [["__scopeId", "data-v-2b3ad016"]]);
 export {
-  Bt as SlpBreadcrumb,
-  W as SlpButton,
-  Nt as SlpColumn,
-  ee as SlpContainer,
-  Vt as SlpCustomDropdown,
-  Vt as SlpDropdown,
-  R as SlpIcon,
-  Mt as SlpLoader,
-  Re as SlpRadioButton,
-  Et as SlpRadioButtonGroup,
-  Tt as SlpRow,
-  Ot as SlpSection,
-  zt as SlpSideNavigation,
+  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,
-  dt as SlpTooltip,
-  A as SlpTypography
+  ct as SlpTooltip,
+  F as SlpTypography
 };