slippers-ui - npm Package Compare versions

Comparing version 3.1.10 to 3.1.11

dist/slippers-ui.es.js

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

package.json

@@ -5,3 +5,3 @@ {
   "author": "GitLab",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "type": "module",
@@ -8,0 +8,0 @@ "files": [

No alert changes

Improved metrics

Number of package files

407

increased by0.25%

Worsened metrics

Total package byte prevSize

1264100

decreased by-2.88%

Lines of code

8016

decreased by-9.04%

No dependency changes