slippers-ui 3.2.0 → 3.2.2

package/dist/slippers-ui.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as N, computed as S, createElementBlock as l, openBlock as a, mergeProps as X, renderSlot as $, normalizeClass as m, createElementVNode as p, createBlock as D, resolveDynamicComponent as ee, normalizeStyle as te, withCtx as T, createCommentVNode as B, ref as I, onMounted as j, onUnmounted as oe, createVNode as L, unref as A, Fragment as M, renderList as V, withModifiers as x, toDisplayString as C, createTextVNode as G, resolveComponent as de, withDirectives as U, vShow as Y, normalizeProps as ce, guardReactiveProps as ue, watch as pe, onBeforeUnmount as ae, onBeforeMount as ve, vModelSelect as fe } from "vue";
+import { defineComponent as N, computed as S, createElementBlock as l, openBlock as a, mergeProps as X, renderSlot as $, normalizeClass as m, createElementVNode as p, createBlock as D, resolveDynamicComponent as ee, normalizeStyle as te, withCtx as T, createCommentVNode as B, ref as I, onMounted as j, onUnmounted as oe, createVNode as C, unref as A, Fragment as M, renderList as V, withModifiers as x, toDisplayString as L, createTextVNode as G, resolveComponent as de, withDirectives as U, vShow as Y, normalizeProps as ce, guardReactiveProps as ue, watch as pe, onBeforeUnmount as ae, onBeforeMount as ve, vModelSelect as fe } from "vue";
 const he = ["href"], ge = /* @__PURE__ */ N({
   __name: "SlpButton",
   props: {
@@ -6,42 +6,42 @@ const he = ["href"], ge = /* @__PURE__ */ N({
     variant: {},
     href: {}
   },
-  setup(u) {
-    const e = u, s = S(() => e.disabled ?? !1), r = S(() => e.variant ?? "primary");
+  setup(c) {
+    const e = c, n = S(() => e.disabled ?? !1), i = S(() => e.variant ?? "primary");
     S(() => e.href ?? "");
     const t = S(() => {
-      let n = [`slp-btn-${r.value}`];
-      return s.value && n.push("slp-btn-disabled"), n.join(" ");
+      let s = [`slp-btn-${i.value}`];
+      return n.value && s.push("slp-btn-disabled"), s.join(" ");
     });
-    return (n, v) => e.href ? (a(), l("a", X({ key: 0 }, n.$attrs, {
+    return (s, v) => e.href ? (a(), l("a", X({ key: 0 }, s.$attrs, {
       class: ["slp-btn", t.value],
       href: e.href
     }), [
-      $(n.$slots, "default", {}, void 0, !0)
-    ], 16, he)) : (a(), l("button", X({ key: 1 }, n.$attrs, {
+      $(s.$slots, "default", {}, void 0, !0)
+    ], 16, he)) : (a(), l("button", X({ key: 1 }, s.$attrs, {
       class: ["slp-btn", t.value],
       type: "button"
     }), [
-      $(n.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), k = (u, e) => {
-  const s = u.__vccOpts || u;
-  for (const [r, t] of e)
-    s[r] = t;
-  return s;
+}), k = (c, e) => {
+  const n = c.__vccOpts || c;
+  for (const [i, t] of e)
+    n[i] = t;
+  return n;
 }, Q = /* @__PURE__ */ k(ge, [["__scopeId", "data-v-c6fd7cb9"]]), me = /* @__PURE__ */ N({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
-  setup(u) {
-    const e = u, s = S(() => e.cols ?? null), r = S(() => e.size ?? "md"), t = S(() => s.value ? `slp-col-${r.value}-${s.value}` : `slp-col-${r.value}`);
-    return (n, v) => (a(), l("div", {
+  setup(c) {
+    const e = c, n = S(() => e.cols ?? null), i = S(() => e.size ?? "md"), t = S(() => n.value ? `slp-col-${i.value}-${n.value}` : `slp-col-${i.value}`);
+    return (s, v) => (a(), l("div", {
       class: m(t.value)
     }, [
-      $(n.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 }), Ut = /* @__PURE__ */ k(me, [["__scopeId", "data-v-00b68f22"]]), _e = {
@@ -68,79 +68,79 @@ const he = ["href"], ge = /* @__PURE__ */ N({
 }, Ie = {
   key: 7,
   class: "slp-partial-white-background"
-}, Ce = {
+}, Le = {
   key: 8,
   class: "slp-partial-grey-background"
-}, Le = /* @__PURE__ */ N({
+}, Ce = /* @__PURE__ */ N({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
-  setup(u) {
-    const e = u, s = S(() => e.fluid ?? !1), r = S(() => e.variant ?? "white"), t = S(() => s.value ? "fluid" : "");
-    return (n, v) => r.value === "light-purple-100" ? (a(), l("div", _e, [
+  setup(c) {
+    const e = c, n = S(() => e.fluid ?? !1), i = S(() => e.variant ?? "white"), t = S(() => n.value ? "fluid" : "");
+    return (s, v) => i.value === "light-purple-100" ? (a(), l("div", _e, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "grey-100" ? (a(), l("div", be, [
+    ])) : i.value === "grey-100" ? (a(), l("div", be, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "gradient" ? (a(), l("div", ye, [
+    ])) : i.value === "gradient" ? (a(), l("div", ye, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "gradient-full" ? (a(), l("div", $e, [
+    ])) : i.value === "gradient-full" ? (a(), l("div", $e, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "charcoal-100" ? (a(), l("div", ke, [
+    ])) : i.value === "charcoal-100" ? (a(), l("div", ke, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "charcoal-75" ? (a(), l("div", we, [
+    ])) : i.value === "charcoal-75" ? (a(), l("div", we, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "grey-50" ? (a(), l("div", Se, [
+    ])) : i.value === "grey-50" ? (a(), l("div", Se, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "white-75" ? (a(), l("div", Ie, [
+    ])) : i.value === "white-75" ? (a(), l("div", Ie, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : r.value === "grey-75" ? (a(), l("div", Ce, [
+    ])) : i.value === "grey-75" ? (a(), l("div", Le, [
       p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(n.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
     ])) : (a(), l("div", {
       key: 9,
       class: m(["slp-container", t.value])
     }, [
-      $(n.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), se = /* @__PURE__ */ k(Le, [["__scopeId", "data-v-e594efe8"]]), Ne = /* @__PURE__ */ N({
+}), ne = /* @__PURE__ */ k(Ce, [["__scopeId", "data-v-e594efe8"]]), Ne = /* @__PURE__ */ N({
   __name: "SlpIcon",
   props: {
     size: {
@@ -159,34 +159,34 @@ const he = ["href"], ge = /* @__PURE__ */ N({
       required: !0
     }
   },
-  setup(u) {
-    const e = u, s = S(() => {
+  setup(c) {
+    const e = c, n = S(() => {
       const t = ["slp-icon"];
       return typeof e.size == "string" && isNaN(Number(e.size)) && t.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && t.push(`slp-icon--color-${e.color}`), t;
-    }), r = S(() => {
-      var n;
+    }), i = S(() => {
+      var s;
       const t = {};
-      if ((n = e.color) != null && n.startsWith("#") && (t.color = e.color, t.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
+      if ((s = e.color) != null && s.startsWith("#") && (t.color = e.color, t.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
         const v = typeof e.size == "number" ? e.size : Number(e.size);
         t.width = `${v}px`, t.height = `${v}px`;
       }
       return t;
     });
-    return (t, n) => {
-      var v, i;
-      return a(), D(ee(u.icon), {
-        class: m(["slp-icon", s.value]),
-        style: te(r.value),
+    return (t, s) => {
+      var v, r;
+      return a(), D(ee(c.icon), {
+        class: m(["slp-icon", n.value]),
+        style: te(i.value),
         role: "img",
         "aria-hidden": "true",
-        "data-icon-name": ((i = (v = u.icon) == null ? void 0 : v.__docgenInfo) == null ? void 0 : i.displayName) || ""
+        "data-icon-name": ((r = (v = c.icon) == null ? void 0 : v.__docgenInfo) == null ? void 0 : r.displayName) || ""
       }, null, 8, ["class", "style", "data-icon-name"]);
     };
   }
 }), W = /* @__PURE__ */ k(Ne, [["__scopeId", "data-v-c3411281"]]), Te = {}, Ee = { class: "slp-row" };
-function ze(u, e) {
+function ze(c, e) {
   return a(), l("div", Ee, [
-    $(u.$slots, "default", {}, void 0, !0)
+    $(c.$slots, "default", {}, void 0, !0)
   ]);
 }
 const jt = /* @__PURE__ */ k(Te, [["render", ze], ["__scopeId", "data-v-adc8d02f"]]), Be = {
@@ -198,7 +198,7 @@ const jt = /* @__PURE__ */ k(Te, [["render", ze], ["__scopeId", "data-v-adc8d02f
     variant: {},
     tag: {}
   },
-  setup(u) {
+  setup(c) {
     const e = [
       "display1",
       "heading1",
@@ -221,12 +221,12 @@ const jt = /* @__PURE__ */ k(Te, [["render", ze], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], s = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], r = u, t = S(() => e.includes(r.variant || "") ? r.variant : "body1"), n = S(() => s.includes(r.tag || "") ? r.tag : "span"), v = S(() => `slp-text-${t.value}`);
-    return (i, d) => (a(), D(ee(n.value), {
+    ], n = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = c, t = S(() => e.includes(i.variant || "") ? i.variant : "body1"), s = S(() => n.includes(i.tag || "") ? i.tag : "span"), v = S(() => `slp-text-${t.value}`);
+    return (r, d) => (a(), D(ee(s.value), {
       class: m(v.value)
     }, {
       default: T(() => [
-        $(i.$slots, "default", {}, void 0, !0),
+        $(r.$slots, "default", {}, void 0, !0),
         t.value === "arrow" ? (a(), l("span", Be, "→")) : B("", !0)
       ]),
       _: 3
@@ -238,7 +238,7 @@ const jt = /* @__PURE__ */ k(Te, [["render", ze], ["__scopeId", "data-v-adc8d02f
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ge(u, e) {
+function Ge(c, e) {
   return a(), l("svg", Pe, e[0] || (e[0] = [
     p("path", {
       fill: "currentColor",
@@ -248,11 +248,11 @@ function Ge(u, e) {
     }, null, -1)
   ]));
 }
-const ne = /* @__PURE__ */ k(Ve, [["render", Ge]]), Oe = {}, Re = {
+const se = /* @__PURE__ */ k(Ve, [["render", Ge]]), Oe = {}, Re = {
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ae(u, e) {
+function Ae(c, e) {
   return a(), l("svg", Re, e[0] || (e[0] = [
     p("path", {
       "fill-rule": "evenodd",
@@ -266,7 +266,7 @@ const De = /* @__PURE__ */ k(Oe, [["render", Ae]]), We = {}, qe = {
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function He(u, e) {
+function He(c, e) {
   return a(), l("svg", qe, e[0] || (e[0] = [
     p("path", {
       "fill-rule": "evenodd",
@@ -282,7 +282,7 @@ const le = /* @__PURE__ */ k(We, [["render", He]]), Ue = {}, je = {
   viewBox: "0 0 16 16",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ke(u, e) {
+function Ke(c, e) {
   return a(), l("svg", je, e[0] || (e[0] = [
     p("path", {
       "fill-rule": "evenodd",
@@ -292,10 +292,10 @@ function Ke(u, e) {
     }, null, -1)
   ]));
 }
-const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
+const ie = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
   key: 0,
   class: "dropdown-menu"
-}, Fe = ["onClick"], Je = { class: "side-navigation" }, Ye = ["data-ga-name", "onClick"], Qe = /* @__PURE__ */ N({
+}, Fe = ["onClick"], Je = ["aria-label"], Ye = ["data-ga-name", "onClick"], Qe = /* @__PURE__ */ N({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -309,17 +309,21 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     navigationItems: {
       type: Array,
       required: !0
+    },
+    navigationLabel: {
+      type: String,
+      default: "secondary"
     }
   },
-  setup(u) {
-    const e = u, s = I(null), r = (f) => {
-      s.value && !s.value.contains(f.target) && (i.value = !1);
-    }, t = I(null), n = I(null);
+  setup(c) {
+    const e = c, n = I(null), i = (f) => {
+      n.value && !n.value.contains(f.target) && (r.value = !1);
+    }, t = I(null), s = I(null);
     let v = null;
-    const i = I(!1), d = I(!0), c = (f) => {
-      window.location.hash = f, i.value = !1;
+    const r = I(!1), d = I(!0), u = (f) => {
+      window.location.hash = f, r.value = !1;
     }, o = () => {
-      if (!n.value) return;
+      if (!s.value) return;
       const f = (window.innerHeight - 120 - 48) * -1;
       v = new IntersectionObserver(
         (w) => {
@@ -337,11 +341,11 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       });
     };
     return j(() => {
-      document.addEventListener("click", r), window.addEventListener("load", () => {
+      document.addEventListener("click", i), window.addEventListener("load", () => {
         o();
       }), document.readyState === "complete" && o();
     }), oe(() => {
-      v && v.disconnect(), document.removeEventListener("click", r);
+      v && v.disconnect(), document.removeEventListener("click", i);
     }), (f, w) => (a(), l("div", {
       class: m([
         "side-navigation-layout",
@@ -351,21 +355,21 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     }, [
       p("div", {
         ref_key: "dropdownRef",
-        ref: s,
+        ref: n,
         class: "side-navigation-dropdown"
       }, [
         p("button", {
           class: "dropdown-toggle",
-          onClick: w[0] || (w[0] = (_) => i.value = !i.value)
+          onClick: w[0] || (w[0] = (_) => r.value = !r.value)
         }, [
           w[1] || (w[1] = p("span", null, "Jump to a section", -1)),
-          L(W, {
-            icon: i.value ? A(re) : A(ne),
+          C(W, {
+            icon: r.value ? A(ie) : A(se),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        i.value ? (a(), l("ul", Ze, [
+        r.value ? (a(), l("ul", Ze, [
           (a(!0), l(M, null, V(e.navigationItems, (_) => (a(), l("li", {
             key: _.id,
             class: "dropdown-item"
@@ -373,12 +377,15 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
             p("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: x((E) => c(_.id), ["prevent"])
-            }, C(_.text), 9, Fe)
+              onClick: x((E) => u(_.id), ["prevent"])
+            }, L(_.text), 9, Fe)
           ]))), 128))
         ])) : B("", !0)
       ], 512),
-      p("nav", Je, [
+      p("nav", {
+        class: "side-navigation",
+        "aria-label": c.navigationLabel
+      }, [
         $(f.$slots, "navigation-header", {}, void 0, !0),
         p("ul", null, [
           (a(!0), l(M, null, V(e.navigationItems, (_) => (a(), l("li", {
@@ -390,21 +397,21 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
               class: m(["side-navigation__link", { "side-navigation__link--active": t.value === _.id }]),
               "data-ga-name": _.text,
               "data-ga-location": "side anchor",
-              onClick: x((E) => c(_.id), ["prevent"])
-            }, C(_.text), 11, Ye)
+              onClick: x((E) => u(_.id), ["prevent"])
+            }, L(_.text), 11, Ye)
           ]))), 128))
         ])
-      ]),
+      ], 8, Je),
       p("div", {
         ref_key: "slotContentRef",
-        ref: n,
+        ref: s,
         class: "side-navigation-content"
       }, [
         $(f.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), Kt = /* @__PURE__ */ k(Qe, [["__scopeId", "data-v-1bd8ef5a"]]), Xe = ["for"], xe = ["name", "value", "id", "checked", "disabled"], et = /* @__PURE__ */ N({
+}), Kt = /* @__PURE__ */ k(Qe, [["__scopeId", "data-v-3cc08323"]]), Xe = ["for"], xe = ["name", "value", "id", "checked", "disabled"], et = /* @__PURE__ */ N({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -412,28 +419,28 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     config: {}
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: e }) {
-    const s = e, r = (t) => {
-      const n = t.target;
-      s("update:modelValue", n.value);
+  setup(c, { emit: e }) {
+    const n = e, i = (t) => {
+      const s = t.target;
+      n("update:modelValue", s.value);
     };
-    return (t, n) => {
-      var v, i, d;
+    return (t, s) => {
+      var v, r, d;
       return a(), l("label", {
         for: t.option,
         class: m(["slp-radio", { disabled: (v = t.config) == null ? void 0 : v.disabled }])
       }, [
-        G(C(t.option) + " ", 1),
+        G(L(t.option) + " ", 1),
         p("input", {
           type: "radio",
           name: t.name,
           value: t.option,
           id: t.option,
-          onInput: r,
-          checked: (i = t.config) == null ? void 0 : i.checked,
+          onInput: i,
+          checked: (r = t.config) == null ? void 0 : r.checked,
           disabled: (d = t.config) == null ? void 0 : d.disabled
         }, null, 40, xe),
-        n[0] || (n[0] = p("span", { class: "slp-radio__checkmark" }, null, -1))
+        s[0] || (s[0] = p("span", { class: "slp-radio__checkmark" }, null, -1))
       ], 10, Xe);
     };
   }
@@ -448,29 +455,29 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     } }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: e }) {
-    const s = {
+  setup(c, { emit: e }) {
+    const n = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, r = e, t = (n) => {
-      r("update:modelValue", n);
+    }, i = e, t = (s) => {
+      i("update:modelValue", s);
     };
-    return (n, v) => {
-      var i, d;
-      return a(), D(se, {
+    return (s, v) => {
+      var r, d;
+      return a(), D(ne, {
         class: m(["slp-radio-group", {
-          "slp-radio-group--vertical": ((i = n.config) == null ? void 0 : i.orientation) === s.VERTICAL,
-          "slp-radio-group--horizontal": ((d = n.config) == null ? void 0 : d.orientation) === s.HORIZONTAL
+          "slp-radio-group--vertical": ((r = s.config) == null ? void 0 : r.orientation) === n.VERTICAL,
+          "slp-radio-group--horizontal": ((d = s.config) == null ? void 0 : d.orientation) === n.HORIZONTAL
         }])
       }, {
         default: T(() => [
-          (a(!0), l(M, null, V(n.options, (c) => (a(), D(tt, {
-            key: c.value,
-            option: c.value,
-            name: n.name,
+          (a(!0), l(M, null, V(s.options, (u) => (a(), D(tt, {
+            key: u.value,
+            option: u.value,
+            name: s.name,
             config: {
-              ...c.config,
-              checked: c.value === n.modelValue
+              ...u.config,
+              checked: u.value === s.modelValue
             },
             "onUpdate:modelValue": t
           }, null, 8, ["option", "name", "config"]))), 128))
@@ -482,23 +489,23 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
 }), Zt = /* @__PURE__ */ k(ot, [["__scopeId", "data-v-ae31ec89"]]), at = {
   key: 0,
   class: "slp-loading-round"
-}, st = {
+}, nt = {
   key: 1,
   class: "slp-loading-linear"
-}, nt = /* @__PURE__ */ N({
+}, st = /* @__PURE__ */ N({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
     config: {}
   },
-  setup(u) {
-    const e = u;
-    return (s, r) => {
+  setup(c) {
+    const e = c;
+    return (n, i) => {
       var t;
-      return ((t = e.config) == null ? void 0 : t.variant) === "round" ? (a(), l("div", at)) : (a(), l("div", st));
+      return ((t = e.config) == null ? void 0 : t.variant) === "round" ? (a(), l("div", at)) : (a(), l("div", nt));
     };
   }
-}), Ft = /* @__PURE__ */ k(nt, [["__scopeId", "data-v-ee32411b"]]), lt = ["href", "data-ga-name", "data-ga-location"], rt = /* @__PURE__ */ N({
+}), Ft = /* @__PURE__ */ k(st, [["__scopeId", "data-v-ee32411b"]]), lt = ["href", "data-ga-name", "data-ga-location"], it = /* @__PURE__ */ N({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -512,23 +519,23 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       mobile: !1
     }) }
   },
-  setup(u) {
-    return (e, s) => {
-      var t, n, v, i, d, c;
-      const r = de("Tree", !0);
+  setup(c) {
+    return (e, n) => {
+      var t, s, v, r, d, u;
+      const i = de("Tree", !0);
       return a(), l("div", {
-        class: m([`depth-${(t = e.config) == null ? void 0 : t.depth}`, { mobile: (n = e.config) == null ? void 0 : n.mobile }])
+        class: m([`depth-${(t = e.config) == null ? void 0 : t.depth}`, { mobile: (s = e.config) == null ? void 0 : s.mobile }])
       }, [
         e.text ? (a(), l("a", {
           key: 0,
           class: m(["anchor", { selected: (v = e.config) == null ? void 0 : v.isSelected }]),
-          href: (i = e.config) == null ? void 0 : i.href,
+          href: (r = e.config) == null ? void 0 : r.href,
           "data-ga-name": (d = e.config) == null ? void 0 : d.dataGaName,
-          "data-ga-location": (c = e.config) == null ? void 0 : c.dataGaLocation
-        }, C(e.text), 11, lt)) : B("", !0),
+          "data-ga-location": (u = e.config) == null ? void 0 : u.dataGaLocation
+        }, L(e.text), 11, lt)) : B("", !0),
         (a(!0), l(M, null, V(e.nodes, (o) => {
           var f, w, _, E, O, h;
-          return a(), D(r, {
+          return a(), D(i, {
             key: o.text,
             nodes: o.nodes,
             text: o.text,
@@ -545,57 +552,57 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       ], 2);
     };
   }
-}), ie = /* @__PURE__ */ k(rt, [["__scopeId", "data-v-c3be63ed"]]), it = { class: "dropdown__list" }, dt = { class: "horizontal-rule slp-my-16" }, ct = /* @__PURE__ */ N({
+}), re = /* @__PURE__ */ k(it, [["__scopeId", "data-v-c3be63ed"]]), rt = { class: "dropdown__list" }, dt = { class: "horizontal-rule slp-my-16" }, ct = /* @__PURE__ */ N({
   __name: "SlpAnchorDropdown",
   props: {
     dropdownLabel: { default: "Jump to a section" },
     anchors: {},
     hyperlinks: {}
   },
-  setup(u) {
-    const e = I(!1), s = () => {
+  setup(c) {
+    const e = I(!1), n = () => {
       e.value = !e.value;
     };
-    return (r, t) => {
-      var n, v, i;
+    return (i, t) => {
+      var s, v, r;
       return a(), l("div", {
         class: m(["dropdown", { hide: !e.value }])
       }, [
-        L(Q, {
+        C(Q, {
           class: "dropdown__button",
           variant: "ghost",
-          onClick: s
+          onClick: n
         }, {
           default: T(() => [
-            p("span", null, C(r.dropdownLabel), 1),
-            L(W, {
-              icon: e.value ? A(re) : A(ne)
+            p("span", null, L(i.dropdownLabel), 1),
+            C(W, {
+              icon: e.value ? A(ie) : A(se)
             }, null, 8, ["icon"])
           ]),
           _: 1
         }),
-        p("div", it, [
-          U(L(q, {
+        p("div", rt, [
+          U(C(q, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
           }, {
             default: T(() => [
-              G(C(r.anchors.text), 1)
+              G(L(i.anchors.text), 1)
             ]),
             _: 1
           }, 512), [
-            [Y, r.anchors.text]
+            [Y, i.anchors.text]
           ]),
-          L(ie, {
+          C(re, {
             mobile: "",
-            nodes: r.anchors.data,
-            onClick: s
+            nodes: i.anchors.data,
+            onClick: n
           }, null, 8, ["nodes"]),
           U(p("div", dt, null, 512), [
-            [Y, (n = r.hyperlinks) == null ? void 0 : n.data.length]
+            [Y, (s = i.hyperlinks) == null ? void 0 : s.data.length]
           ]),
-          U(L(q, {
+          U(C(q, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
@@ -603,27 +610,27 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
             default: T(() => {
               var d;
               return [
-                G(C((d = r.hyperlinks) == null ? void 0 : d.text), 1)
+                G(L((d = i.hyperlinks) == null ? void 0 : d.text), 1)
               ];
             }),
             _: 1
           }, 512), [
-            [Y, (v = r.hyperlinks) == null ? void 0 : v.text]
+            [Y, (v = i.hyperlinks) == null ? void 0 : v.text]
           ]),
           p("ul", null, [
-            (a(!0), l(M, null, V((i = r.hyperlinks) == null ? void 0 : i.data, (d) => (a(), l("li", {
+            (a(!0), l(M, null, V((r = i.hyperlinks) == null ? void 0 : r.data, (d) => (a(), l("li", {
               key: d.text
             }, [
-              L(Q, {
+              C(Q, {
                 class: "dropdown__link",
                 variant: "ghost",
                 href: d.config.href
               }, {
                 default: T(() => [
-                  p("span", null, C(d.text), 1),
-                  L(Q, { variant: "icon" }, {
+                  p("span", null, L(d.text), 1),
+                  C(Q, { variant: "icon" }, {
                     default: T(() => [
-                      L(W, {
+                      C(W, {
                         icon: A(le),
                         size: "xs"
                       }, null, 8, ["icon"])
@@ -649,8 +656,8 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     hyperlinks: {},
     alwaysExpanded: { type: Boolean }
   },
-  setup(u) {
-    const e = u, s = I([]), r = I(null), t = I([]), n = I(
+  setup(c) {
+    const e = c, n = I([]), i = I(null), t = I([]), s = I(
       e.anchors.data.map((h) => ({
         text: h.text,
         nodes: h.nodes,
@@ -662,15 +669,15 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
           mobile: !1
         }
       }))
-    ), v = I(!1), i = I(!0);
+    ), v = I(!1), r = I(!0);
     let d = null;
-    const c = (h, g = []) => (h.forEach((b) => {
-      b.config.href && g.push(b.config.href), b.nodes && c(b.nodes, g);
+    const u = (h, g = []) => (h.forEach((b) => {
+      b.config.href && g.push(b.config.href), b.nodes && u(b.nodes, g);
     }), g), o = (h) => {
       const g = [], b = (z) => z.some((y, P) => (g.push(P), y.config.href === h || y.nodes && b(y.nodes) ? !0 : (g.pop(), !1)));
       return b(e.anchors.data), g;
     }, f = (h) => {
-      const g = t.value, b = r.value, z = (y, P, R) => {
+      const g = t.value, b = i.value, z = (y, P, R) => {
         const H = g[R] === P, K = y.config.href === b, Z = {
           text: y.text,
           config: {
@@ -706,15 +713,15 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       const g = w(h);
       if (g && g.isIntersecting) {
         const b = `#${g.target.id}`;
-        r.value = b, t.value = o(b), s.value = t.value.slice(), n.value = f(!1), i.value = !1;
+        i.value = b, t.value = o(b), n.value = t.value.slice(), s.value = f(!1), r.value = !1;
         return;
       }
-      i.value && !e.alwaysExpanded && (n.value = f(!0), i.value = !1);
+      r.value && !e.alwaysExpanded && (s.value = f(!0), r.value = !1);
     }, E = () => {
       v.value = window.innerWidth < 768;
     }, O = () => {
-      const h = c(e.anchors.data), g = h[0] || null;
-      r.value = g, t.value = g ? o(g) : [], n.value = f(!0), i.value = !1;
+      const h = u(e.anchors.data), g = h[0] || null;
+      i.value = g, t.value = g ? o(g) : [], s.value = f(!0), r.value = !1;
       const b = (window.innerHeight - 120 - 48) * -1;
       d = new IntersectionObserver(_, {
         rootMargin: `-120px 0px ${b}px 0px`,
@@ -732,7 +739,7 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       window.removeEventListener("resize", E), d && d.disconnect();
     }), (h, g) => (a(), l("div", null, [
       v.value ? (a(), l("div", pt, [
-        L(ut, ce(ue({ anchors: h.anchors, hyperlinks: h.hyperlinks })), null, 16),
+        C(ut, ce(ue({ anchors: h.anchors, hyperlinks: h.hyperlinks })), null, 16),
         $(h.$slots, "default", {}, void 0, !0)
       ])) : (a(), l("div", vt, [
         p("div", ft, [
@@ -748,18 +755,18 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
               class: "nav-heading"
             }, {
               default: T(() => [
-                G(C(h.anchors.text), 1)
+                G(L(h.anchors.text), 1)
               ]),
               _: 1
             })) : B("", !0),
-            L(ie, { nodes: n.value }, null, 8, ["nodes"])
+            C(re, { nodes: s.value }, null, 8, ["nodes"])
           ]),
           $(h.$slots, "footer", {}, void 0, !0)
         ])
       ]))
     ]));
   }
-}), Jt = /* @__PURE__ */ k(mt, [["__scopeId", "data-v-32a730be"]]), _t = ["id", "data-tooltip-open", "aria-describedby"], bt = { class: "slp-tooltip__wrapper" }, yt = ["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"], It = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], Ct = ["id"], Lt = /* @__PURE__ */ N({
+}), Jt = /* @__PURE__ */ k(mt, [["__scopeId", "data-v-32a730be"]]), _t = ["id", "data-tooltip-open", "aria-describedby"], bt = { class: "slp-tooltip__wrapper" }, yt = ["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"], It = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], Lt = ["id"], Ct = /* @__PURE__ */ N({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -769,14 +776,14 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     id: { default: "" },
     dataProperties: { default: null }
   },
-  setup(u) {
-    const e = u, s = I(!1), r = I(""), t = I(""), n = I(""), v = (o) => {
-      e.mode === "hover" && (s.value = o.type === "mouseenter");
-    }, i = () => {
-      e.mode === "click" ? (c(), s.value = !s.value) : s.value = !1;
+  setup(c) {
+    const e = c, n = I(!1), i = I(""), t = I(""), s = I(""), v = (o) => {
+      e.mode === "hover" && (n.value = o.type === "mouseenter");
+    }, r = () => {
+      e.mode === "click" ? (u(), n.value = !n.value) : n.value = !1;
     }, d = (o) => {
-      o.target.id !== e.id && (s.value = !1);
-    }, c = () => {
+      o.target.id !== e.id && (n.value = !1);
+    }, u = () => {
       document.querySelectorAll('[data-tooltip-open="true"]').forEach((f) => {
         f.setAttribute("data-tooltip-open", "false");
       });
@@ -784,9 +791,9 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     return j(() => {
       if (e.mode === "click" && document.addEventListener("click", d), e.text) {
         const o = e.text.match(/\[(.*?)\]/), f = e.text.match(/\[.*?\]\((.*?)\)/);
-        r.value = o ? o[1] : "", t.value = f ? f[1] : "", n.value = e.text.replace(`(${t.value})`, "").replace(`[${r.value}]`, "").trim();
+        i.value = o ? o[1] : "", t.value = f ? f[1] : "", s.value = e.text.replace(`(${t.value})`, "").replace(`[${i.value}]`, "").trim();
       }
-    }), pe(s, (o) => {
+    }), pe(n, (o) => {
       if (e.mode === "click" && e.id) {
         const f = document.getElementById(e.id);
         f && f.setAttribute("data-tooltip-open", o.toString());
@@ -798,21 +805,21 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       return o.mode === "hover" ? (a(), l("div", {
         key: 0,
         id: o.id,
-        "data-tooltip-open": s.value,
+        "data-tooltip-open": n.value,
         "aria-label": "Click to open tooltip with more information.",
         "aria-describedby": `${o.id}-content`,
         class: "slp-tooltip",
         onMouseenter: v,
         onMouseleave: v,
-        onClick: i
+        onClick: r
       }, [
         p("div", bt, [
           $(o.$slots, "default", {}, void 0, !0),
-          s.value ? (a(), l("div", {
+          n.value ? (a(), l("div", {
             key: 0,
             class: m(["slp-tooltip__content", `${o.position} ${o.mode === "hover" ? "hover-mode" : ""}`])
           }, [
-            G(C(n.value) + " ", 1),
+            G(L(s.value) + " ", 1),
             o.text ? (a(), l("a", {
               key: 0,
               id: `${o.id}-content`,
@@ -823,7 +830,7 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
               "data-ga-location": o.dataProperties ? "features content" : null,
               role: "tooltip",
               href: t.value
-            }, C(r.value), 9, yt)) : o.list ? (a(), l("ul", {
+            }, L(i.value), 9, yt)) : o.list ? (a(), l("ul", {
               key: 1,
               id: `${o.id}-content`,
               role: "tooltip",
@@ -831,22 +838,22 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
             }, [
               (a(!0), l(M, null, V(o.list, (b) => (a(), l("li", {
                 key: b.text
-              }, C(b.text), 1))), 128))
+              }, L(b.text), 1))), 128))
             ], 8, $t)) : B("", !0)
           ], 2)) : B("", !0)
         ])
       ], 40, _t)) : (a(), l("button", {
         key: 1,
         id: o.id,
-        "data-tooltip-open": s.value,
+        "data-tooltip-open": n.value,
         "aria-label": "Click to open tooltip with more information.",
         "aria-describedby": `${o.id}-content`,
         class: m(`slp-tooltip ${o.mode === "click" ? "button-mode" : ""}`),
-        onClick: i
+        onClick: r
       }, [
         p("div", wt, [
           $(o.$slots, "default", {}, void 0, !0),
-          s.value ? (a(), l("div", {
+          n.value ? (a(), l("div", {
             key: 0,
             class: m(["slp-tooltip__content", `${o.position}`])
           }, [
@@ -855,8 +862,8 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
               id: `${o.id}-content`,
               role: "tooltip"
             }, [
-              G(C(n.value) + " ", 1),
-              r.value && t.value ? (a(), l("a", {
+              G(L(s.value) + " ", 1),
+              i.value && t.value ? (a(), l("a", {
                 key: 0,
                 "data-ga-features": o.dataProperties && o.dataProperties.features.toLowerCase() || null,
                 "data-ga-features-sub": (O = o.dataProperties) == null ? void 0 : O.sub,
@@ -864,7 +871,7 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
                 "data-ga-name": (g = o.dataProperties) == null ? void 0 : g.plan,
                 "data-ga-location": o.dataProperties ? "features content" : null,
                 href: t.value
-              }, C(r.value), 9, It)) : B("", !0)
+              }, L(i.value), 9, It)) : B("", !0)
             ], 8, St)) : (a(), l("ul", {
               key: 1,
               id: `${o.id}-content`,
@@ -873,14 +880,14 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
             }, [
               (a(!0), l(M, null, V(o.list, (b) => (a(), l("li", {
                 key: b.text
-              }, C(b.text), 1))), 128))
-            ], 8, Ct))
+              }, L(b.text), 1))), 128))
+            ], 8, Lt))
           ], 2)) : B("", !0)
         ])
       ], 10, kt));
     };
   }
-}), Nt = /* @__PURE__ */ k(Lt, [["__scopeId", "data-v-0412a63f"]]), Tt = {
+}), Nt = /* @__PURE__ */ k(Ct, [["__scopeId", "data-v-0412a63f"]]), Tt = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
@@ -899,51 +906,51 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     crumbs: { default: () => [] },
     router: {}
   },
-  setup(u) {
-    const e = u, s = I(e.crumbs), r = I(!1), t = (i) => {
-      const d = i.split(" ");
-      for (let c = 0; c < d.length; c++)
-        d[c] = d[c][0].toUpperCase() + d[c].substr(1);
+  setup(c) {
+    const e = c, n = I(e.crumbs), i = I(!1), t = (r) => {
+      const d = r.split(" ");
+      for (let u = 0; u < d.length; u++)
+        d[u] = d[u][0].toUpperCase() + d[u].substr(1);
       return d.join(" ");
-    }, n = () => {
-      r.value = window.innerWidth < 768;
-    }, v = (i) => {
-      s.value[i] && (s.value[i] = {
-        ...s.value[i],
-        hover: !s.value[i].hover
+    }, s = () => {
+      i.value = window.innerWidth < 768;
+    }, v = (r) => {
+      n.value[r] && (n.value[r] = {
+        ...n.value[r],
+        hover: !n.value[r].hover
       });
     };
     return ve(() => {
       if (e.router) {
-        const i = e.router.currentRoute.path, d = i.startsWith("/") ? i.substring(1).split("/") : i.split("/"), c = [];
+        const r = e.router.currentRoute.path, d = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), u = [];
         let o = "";
         d.forEach((f) => {
           o = `${o}/${f}`;
           const w = e.router.match(o);
-          w.params.slug !== null && f.length && c.push({
+          w.params.slug !== null && f.length && u.push({
             title: t(f.replace(/-/g, " ")),
             hover: !1,
             ...w
           });
-        }), s.value = c;
+        }), n.value = u;
       }
     }), j(() => {
-      n(), window.addEventListener("resize", n);
+      s(), window.addEventListener("resize", s);
     }), ae(() => {
-      window.removeEventListener("resize", n);
-    }), (i, d) => s.value && !r.value ? (a(), l("ol", Tt, [
-      (a(!0), l(M, null, V(s.value, (c, o) => (a(), l("li", {
-        key: c.title,
+      window.removeEventListener("resize", s);
+    }), (r, d) => n.value && !i.value ? (a(), l("ol", Tt, [
+      (a(!0), l(M, null, V(n.value, (u, o) => (a(), l("li", {
+        key: u.title,
         class: m(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": o === s.value.length - 1
+          "breadcrumb__crumb--disabled": o === n.value.length - 1
         }]),
         property: "itemListElement",
         typeof: "ListItem",
         onMouseenter: (f) => v(o),
         onMouseleave: (f) => v(o)
       }, [
-        L(Nt, {
-          text: c.title,
+        C(Nt, {
+          text: u.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
         }, {
@@ -951,17 +958,17 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
             p("a", {
               property: "item",
               typeof: "WebPage",
-              "data-ga-name": c.dataGaName || c.title.toLowerCase(),
-              "data-ga-location": c.dataGaLocation || "breadcrumb",
-              href: o !== s.value.length - 1 ? c.path : void 0
+              "data-ga-name": u.dataGaName || u.title.toLowerCase(),
+              "data-ga-location": u.dataGaLocation || "breadcrumb",
+              href: o !== n.value.length - 1 ? u.path : void 0
             }, [
-              L(q, {
+              C(q, {
                 tag: "span",
                 variant: "body3",
                 property: "name"
               }, {
                 default: T(() => [
-                  G(C(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
+                  G(L(u.title.length > 18 ? u.title.substring(0, 18).concat("...") : u.title), 1)
                 ]),
                 _: 2
               }, 1024)
@@ -969,8 +976,8 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
           ]),
           _: 2
         }, 1032, ["text"]),
-        o !== s.value.length - 1 ? (a(), l("span", Bt, [
-          L(W, {
+        o !== n.value.length - 1 ? (a(), l("span", Bt, [
+          C(W, {
             color: "accent-500",
             size: "xs",
             icon: A(le)
@@ -981,43 +988,43 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
           content: o + 1
         }, null, 8, Mt)
       ], 42, Et))), 128))
-    ])) : s.value && r.value ? (a(), l("ol", Vt, [
-      (a(!0), l(M, null, V(s.value, (c) => (a(), l("li", {
-        key: c.title,
+    ])) : n.value && i.value ? (a(), l("ol", Vt, [
+      (a(!0), l(M, null, V(n.value, (u) => (a(), l("li", {
+        key: u.title,
         class: "breadcrumb__crumb breadcrumb__crumb--mobile",
         property: "itemListElement",
         typeof: "ListItem"
       }, [
         p("a", {
           class: "slp-flex slp-align-items-center",
-          href: s.value[s.value.length - 2].path,
-          "data-ga-name": c.dataGaName || c.title.toLowerCase(),
-          "data-ga-location": c.dataGaLocation || "breadcrumb",
+          href: n.value[n.value.length - 2].path,
+          "data-ga-name": u.dataGaName || u.title.toLowerCase(),
+          "data-ga-location": u.dataGaLocation || "breadcrumb",
           property: "item",
           typeof: "WebPage"
         }, [
           p("span", null, [
-            L(W, {
+            C(W, {
               color: "accent-500",
               size: "xs",
               icon: A(De)
             }, null, 8, ["icon"])
           ]),
-          L(q, {
+          C(q, {
             class: "slp-ml-8",
             tag: "span",
             variant: "body2",
             property: "name"
           }, {
             default: T(() => [
-              G(C(s.value[s.value.length - 2].title), 1)
+              G(L(n.value[n.value.length - 2].title), 1)
             ]),
             _: 1
           })
         ], 8, Pt),
         p("meta", {
           property: "position",
-          content: s.value.length - 1
+          content: n.value.length - 1
         }, null, 8, Gt)
       ]))), 128))
     ])) : B("", !0);
@@ -1034,39 +1041,39 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     valueKey: {}
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: e }) {
-    const s = u, r = e, t = (i, d) => {
-      if (typeof i == "object" && i !== null) {
+  setup(c, { emit: e }) {
+    const n = c, i = e, t = (r, d) => {
+      if (typeof r == "object" && r !== null) {
         if (!d) {
-          const f = Object.keys(i)[0];
-          return i[f];
+          const f = Object.keys(r)[0];
+          return r[f];
         }
-        const c = d.split(".");
-        let o = i;
-        for (const f of c)
+        const u = d.split(".");
+        let o = r;
+        for (const f of u)
           o = o == null ? void 0 : o[f];
         return o;
       }
-      return i;
-    }, n = S(() => s.options.length > 0 ? t(s.options[0], s.valueKey) : ""), v = S({
+      return r;
+    }, s = S(() => n.options.length > 0 ? t(n.options[0], n.valueKey) : ""), v = S({
       // Getter: Called when the template reads selectedValue
       // Returns the current modelValue from parent (or empty string if undefined)
-      get: () => s.modelValue ?? n.value,
+      get: () => n.modelValue ?? s.value,
       // Setter: Called when the select's v-model updates selectedValue
       // Emits the new value to the parent component
-      set: (i) => r("update:modelValue", i)
+      set: (r) => i("update:modelValue", r)
     });
-    return (i, d) => {
-      var c;
-      return (c = i.options) != null && c.length ? U((a(), l("select", {
+    return (r, d) => {
+      var u;
+      return (u = r.options) != null && u.length ? U((a(), l("select", {
         key: 0,
         "onUpdate:modelValue": d[0] || (d[0] = (o) => v.value = o),
         class: "dropdown"
       }, [
-        (a(!0), l(M, null, V(i.options, (o, f) => (a(), l("option", {
-          key: `${t(o, i.valueKey)}-${f}`,
-          value: t(o, i.valueKey)
-        }, C(t(o, i.labelKey)), 9, Rt))), 128))
+        (a(!0), l(M, null, V(r.options, (o, f) => (a(), l("option", {
+          key: `${t(o, r.valueKey)}-${f}`,
+          value: t(o, r.valueKey)
+        }, L(t(o, r.labelKey)), 9, Rt))), 128))
       ], 512)), [
         [fe, v.value]
       ]) : (a(), l("div", At, d[1] || (d[1] = [
@@ -1080,9 +1087,9 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
     backgroundColor: {
       type: String,
       required: !1,
-      validator(u) {
-        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(u), s = /^\$color-[a-zA-Z0-9-]+$/.test(u);
-        return u ? e || s : !0;
+      validator(c) {
+        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(c), n = /^\$color-[a-zA-Z0-9-]+$/.test(c);
+        return c ? e || n : !0;
       }
     },
     id: {
@@ -1090,20 +1097,20 @@ const re = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
       required: !1
     }
   },
-  setup(u) {
-    const e = u, s = S(() => {
+  setup(c) {
+    const e = c, n = S(() => {
       var t;
       return !e.backgroundColor || (t = e.backgroundColor) != null && t.startsWith("$") ? {} : { backgroundColor: e.backgroundColor };
-    }), r = S(() => {
-      var t, n;
-      return (t = e.backgroundColor) != null && t.startsWith("$") ? `slp-background-${(n = e.backgroundColor) == null ? void 0 : n.slice(1)}` : null;
+    }), i = S(() => {
+      var t, s;
+      return (t = e.backgroundColor) != null && t.startsWith("$") ? `slp-background-${(s = e.backgroundColor) == null ? void 0 : s.slice(1)}` : null;
     });
-    return (t, n) => (a(), l("section", {
-      style: te(s.value),
-      class: m(r.value),
-      id: u.id || void 0
+    return (t, s) => (a(), l("section", {
+      style: te(n.value),
+      class: m(i.value),
+      id: c.id || void 0
     }, [
-      L(se, null, {
+      C(ne, null, {
         default: T(() => [
           $(t.$slots, "default", {}, void 0, !0)
         ]),
@@ -1116,7 +1123,7 @@ export {
   Yt as SlpBreadcrumb,
   Q as SlpButton,
   Ut as SlpColumn,
-  se as SlpContainer,
+  ne as SlpContainer,
   Qt as SlpDropdown,
   W as SlpIcon,
   Ft as SlpLoader,