@kong-ui-public/page-layout 1.3.1 → 1.3.2-pr.3955.05d8c859e.0

package/dist/page-layout.es.js

@@ -1,39 +1,39 @@
-import { shallowRef as Ce, shallowReadonly as Be, getCurrentScope as ze, onScopeDispose as Ne, toValue as ae, watch as re, computed as w, getCurrentInstance as Oe, onMounted as be, defineComponent as ue, inject as te, useTemplateRef as se, ref as F, onBeforeUnmount as Ee, resolveComponent as R, openBlock as i, createElementBlock as d, createElementVNode as b, normalizeClass as j, Fragment as G, renderList as M, createBlock as D, resolveDynamicComponent as fe, mergeProps as Se, withKeys as Ae, withModifiers as le, withCtx as T, renderSlot as E, createTextVNode as X, toDisplayString as B, createVNode as z, unref as h, createCommentVNode as m, nextTick as pe, provide as Fe, onUnmounted as He, createSlots as ge, normalizeProps as xe, guardReactiveProps as We } from "vue";
-import { useRouter as De, useRoute as Me } from "vue-router";
-import { createI18n as Ve, i18nTComponent as je } from "@kong-ui-public/i18n";
-import { ChevronDownIcon as Re, ChevronRightIcon as Ge, ArrowTopLeftIcon as Ue, StarFillIcon as qe, StarIcon as Ye, InfoIcon as Ze } from "@kong/icons";
-const Je = "Go back", Xe = { save_shortcut: "Save page to shortcuts", remove_shortcut: "Remove page from shortcuts" }, Qe = { more_button: { label: "More", aria_label: "More tabs" } }, et = { aria_label: "Page sections", more_button: { aria_label: "More page sections" } }, tt = {
-  back_button: Je,
-  favorite_button: Xe,
-  tabs: Qe,
-  anchor_navigation: et
+import { shallowRef as De, shallowReadonly as Ve, getCurrentScope as Ue, onScopeDispose as je, toValue as re, watch as he, computed as C, getCurrentInstance as Ge, onMounted as we, defineComponent as fe, inject as le, useTemplateRef as de, ref as M, onBeforeUnmount as Pe, resolveComponent as R, openBlock as s, createElementBlock as d, createElementVNode as b, normalizeClass as q, Fragment as Y, renderList as W, createBlock as L, resolveDynamicComponent as be, mergeProps as Ke, withKeys as Ne, withModifiers as ve, withCtx as I, renderSlot as A, createTextVNode as te, toDisplayString as O, createVNode as z, unref as h, createCommentVNode as y, nextTick as ye, provide as qe, onUnmounted as Ye, createSlots as ke, normalizeProps as Ze, guardReactiveProps as Je } from "vue";
+import { useRouter as Be, useRoute as Xe } from "vue-router";
+import { createI18n as Qe, i18nTComponent as et } from "@kong-ui-public/i18n";
+import { ChevronDownIcon as Oe, ChevronRightIcon as tt, ArrowTopLeftIcon as at, StarFillIcon as ot, StarIcon as nt, InfoIcon as it } from "@kong/icons";
+const st = "Go back", lt = { save_shortcut: "Save page to shortcuts", remove_shortcut: "Remove page from shortcuts" }, rt = { more_button: { label: "More", aria_label: "More tabs" } }, ut = { aria_label: "Page sections", more_button: { aria_label: "More page sections" } }, ct = {
+  back_button: st,
+  favorite_button: lt,
+  tabs: rt,
+  anchor_navigation: ut
 };
-function at() {
-  const e = Ve("en-us", tt);
+function dt() {
+  const e = Qe("en-us", ct);
   return {
     i18n: e,
-    i18nT: je(e)
+    i18nT: et(e)
     // Translation component <i18n-t>
   };
 }
-const me = {
-  useI18n: at
-}, ot = "12px", Q = "16px", nt = "2px", Le = "16px";
-function it(e, r) {
-  return ze() ? (Ne(e, r), !0) : !1;
+const Te = {
+  useI18n: dt
+}, vt = "12px", ae = "16px", ht = "2px", ze = "16px";
+function ft(e, u) {
+  return Ue() ? (je(e, u), !0) : !1;
 }
-const st = typeof window < "u" && typeof document < "u";
+const pt = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const J = () => {
+const ee = () => {
 };
-function lt(e, r) {
-  function a(...o) {
-    return new Promise((l, c) => {
-      Promise.resolve(e(() => r.apply(this, o), {
-        fn: r,
+function gt(e, u) {
+  function a(...n) {
+    return new Promise((r, c) => {
+      Promise.resolve(e(() => u.apply(this, n), {
+        fn: u,
         thisArg: this,
-        args: o
-      })).then(l).catch(c);
+        args: n
+      })).then(r).catch(c);
     });
   }
   return "cancel" in e && Object.assign(a, {
@@ -42,201 +42,201 @@ function lt(e, r) {
     isPending: e.isPending
   }), a;
 }
-function rt(e, r = {}) {
-  let a, o, l = J, c = J;
-  const v = Ce(!1), n = (f) => {
-    clearTimeout(f), l(), l = J;
+function mt(e, u = {}) {
+  let a, n, r = ee, c = ee;
+  const v = De(!1), i = (f) => {
+    clearTimeout(f), r(), r = ee;
   };
-  let y;
+  let w;
   return Object.assign((f) => {
-    const p = ae(e), I = ae(r.maxWait);
-    return a && n(a), p <= 0 || I !== void 0 && I <= 0 ? (o && (n(o), o = void 0), v.value = !1, Promise.resolve(f())) : (v.value = !0, new Promise((S, g) => {
-      l = r.rejectOnCancel ? g : S, c = S, y = f, I && !o && (o = setTimeout(() => {
-        a && n(a), o = void 0, v.value = !1, S(y());
-      }, I)), a = setTimeout(() => {
-        o && n(o), o = void 0, v.value = !1, S(f());
+    const p = re(e), E = re(u.maxWait);
+    return a && i(a), p <= 0 || E !== void 0 && E <= 0 ? (n && (i(n), n = void 0), v.value = !1, Promise.resolve(f())) : (v.value = !0, new Promise((S, g) => {
+      r = u.rejectOnCancel ? g : S, c = S, w = f, E && !n && (n = setTimeout(() => {
+        a && i(a), n = void 0, v.value = !1, S(w());
+      }, E)), a = setTimeout(() => {
+        n && i(n), n = void 0, v.value = !1, S(f());
       }, p);
     }));
   }, {
     cancel: () => {
-      a && (n(a), a = void 0), o && (n(o), o = void 0), v.value = !1, c = J;
+      a && (i(a), a = void 0), n && (i(n), n = void 0), v.value = !1, c = ee;
     },
     flush: () => {
       if (v.value) {
-        a && (clearTimeout(a), a = void 0), o && (clearTimeout(o), o = void 0), v.value = !1;
+        a && (clearTimeout(a), a = void 0), n && (clearTimeout(n), n = void 0), v.value = !1;
         const f = c;
-        l = J, c = J, f(y());
+        r = ee, c = ee, f(w());
       }
     },
-    isPending: Be(v)
+    isPending: Ve(v)
   });
 }
-function ut(e, r = 200, a = {}) {
-  return lt(rt(r, a), e);
+function bt(e, u = 200, a = {}) {
+  return gt(mt(u, a), e);
 }
-const ct = st ? window : void 0;
-function Te(e) {
-  var r;
-  const a = ae(e);
-  return (r = a?.$el) !== null && r !== void 0 ? r : a;
+const yt = pt ? window : void 0;
+function Ae(e) {
+  var u;
+  const a = re(e);
+  return (u = a?.$el) !== null && u !== void 0 ? u : a;
 }
 // @__NO_SIDE_EFFECTS__
-function dt() {
-  const e = Ce(!1), r = Oe();
-  return r && be(() => {
+function kt() {
+  const e = De(!1), u = Ge();
+  return u && we(() => {
     e.value = !0;
-  }, r), e;
+  }, u), e;
 }
 // @__NO_SIDE_EFFECTS__
-function vt(e) {
-  const r = /* @__PURE__ */ dt();
-  return w(() => (r.value, !!e()));
+function wt(e) {
+  const u = /* @__PURE__ */ kt();
+  return C(() => (u.value, !!e()));
 }
-function Pe(e, r, a = {}) {
-  const { window: o = ct, ...l } = a;
+function He(e, u, a = {}) {
+  const { window: n = yt, ...r } = a;
   let c;
-  const v = /* @__PURE__ */ vt(() => o && "ResizeObserver" in o), n = () => {
+  const v = /* @__PURE__ */ wt(() => n && "ResizeObserver" in n), i = () => {
     c && (c.disconnect(), c = void 0);
-  }, y = re(w(() => {
-    const f = ae(e);
-    return Array.isArray(f) ? f.map((p) => Te(p)) : [Te(f)];
+  }, w = he(C(() => {
+    const f = re(e);
+    return Array.isArray(f) ? f.map((p) => Ae(p)) : [Ae(f)];
   }), (f) => {
-    if (n(), v.value && o) {
-      c = new ResizeObserver(r);
-      for (const p of f) p && c.observe(p, l);
+    if (i(), v.value && n) {
+      c = new ResizeObserver(u);
+      for (const p of f) p && c.observe(p, r);
     }
   }, {
     immediate: !0,
     flush: "post"
-  }), k = () => {
-    n(), y();
+  }), T = () => {
+    i(), w();
   };
-  return it(k), {
+  return ft(T), {
     isSupported: v,
-    stop: k
+    stop: T
   };
 }
-const ht = {
+const Tt = {
   ref: "page-layout-tabs",
   class: "page-layout-tabs",
   "data-testid": "page-layout-tabs"
-}, ft = { key: 0 }, pt = ["aria-label"], gt = {
+}, _t = { key: 0 }, $t = ["aria-label"], Ct = {
   key: 0,
   class: "layout-loader-container"
-}, bt = /* @__PURE__ */ ue({
+}, It = /* @__PURE__ */ fe({
   __name: "PageLayoutTabs",
   props: {
     tabs: { default: () => [] }
   },
   setup(e) {
-    const { i18n: { t: r } } = me.useI18n(), a = De(), o = te("app:navigateTo", null), l = (g) => {
+    const { i18n: { t: u } } = Te.useI18n(), a = Be(), n = le("app:navigateTo", null), r = (g) => {
       if (typeof g.to != "string") {
         a.push(g.to);
         return;
       }
-      if (typeof o != "function") {
+      if (typeof n != "function") {
         window.location.href = g.to;
         return;
       }
-      o(g.to);
-    }, c = se("page-layout-tabs"), v = se("page-layout-tabs-list"), n = F(e.tabs.length), y = F(!1), k = w(() => e.tabs.slice(0, n.value)), f = w(() => e.tabs.slice(n.value)), p = async () => {
+      n(g.to);
+    }, c = de("page-layout-tabs"), v = de("page-layout-tabs-list"), i = M(e.tabs.length), w = M(!1), T = C(() => e.tabs.slice(0, i.value)), f = C(() => e.tabs.slice(i.value)), p = async () => {
       if (!c.value || !v.value)
         return;
-      y.value = !1, n.value = e.tabs.length, await pe();
-      const g = c.value?.getBoundingClientRect().width - parseInt(Le) * 2;
-      let N = v.value?.getBoundingClientRect().width;
-      if (!g || !N) {
-        y.value = !0;
+      w.value = !1, i.value = e.tabs.length, await ye();
+      const g = c.value?.getBoundingClientRect().width - parseInt(ze) * 2;
+      let H = v.value?.getBoundingClientRect().width;
+      if (!g || !H) {
+        w.value = !0;
         return;
       }
       const P = 50;
-      for (; N + P > g && n.value > 1; )
-        n.value--, await pe(), N = v.value?.getBoundingClientRect().width || 0;
-      y.value = !0;
+      for (; H + P > g && i.value > 1; )
+        i.value--, await ye(), H = v.value?.getBoundingClientRect().width || 0;
+      w.value = !0;
     };
-    let I = null;
+    let E = null;
     const S = () => {
-      I && clearTimeout(I), I = setTimeout(() => {
+      E && clearTimeout(E), E = setTimeout(() => {
         p();
       }, 150);
     };
-    return be(() => {
-      p(), Pe(c, S);
-    }), Ee(() => {
-      I && clearTimeout(I);
-    }), re(() => e.tabs, () => {
+    return we(() => {
+      p(), He(c, S);
+    }), Pe(() => {
+      E && clearTimeout(E);
+    }), he(() => e.tabs, () => {
       p();
-    }, { deep: !0 }), (g, N) => {
-      const P = R("KDropdownItem"), H = R("KDropdown"), U = R("KSkeletonBox");
-      return i(), d("nav", ht, [
+    }, { deep: !0 }), (g, H) => {
+      const P = R("KDropdownItem"), x = R("KDropdown"), Z = R("KSkeletonBox");
+      return s(), d("nav", Tt, [
         b("ul", {
           ref: "page-layout-tabs-list",
-          class: j({ "layout-computing": !y.value })
+          class: q({ "layout-computing": !w.value })
         }, [
-          (i(!0), d(G, null, M(k.value, (s) => (i(), d("li", {
-            key: `${s.key}-tab`
+          (s(!0), d(Y, null, W(T.value, (l) => (s(), d("li", {
+            key: `${l.key}-tab`
           }, [
-            (i(), D(fe(typeof s.to == "string" ? "a" : "router-link"), Se({ ref_for: !0 }, typeof s.to == "string" ? { href: s.to } : { to: s.to }, {
-              "aria-current": s.active ? "page" : void 0,
-              class: ["tab-link", { active: s.active }],
-              "data-testid": s.dataTestId ? s.dataTestId : `page-layout-tab-${s.key}`,
+            (s(), L(be(typeof l.to == "string" ? "a" : "router-link"), Ke({ ref_for: !0 }, typeof l.to == "string" ? { href: l.to } : { to: l.to }, {
+              "aria-current": l.active ? "page" : void 0,
+              class: ["tab-link", { active: l.active }],
+              "data-testid": l.dataTestId ? l.dataTestId : `page-layout-tab-${l.key}`,
               tabindex: "0",
-              onClick: le((O) => l(s), ["prevent"]),
-              onKeydown: Ae(le((O) => l(s), ["prevent"]), ["enter"])
+              onClick: ve((F) => r(l), ["prevent"]),
+              onKeydown: Ne(ve((F) => r(l), ["prevent"]), ["enter"])
             }), {
-              default: T(() => [
-                E(g.$slots, `tab-${s.key}`, { tab: s }, () => [
-                  X(B(s.label), 1)
+              default: I(() => [
+                A(g.$slots, `tab-${l.key}`, { tab: l }, () => [
+                  te(O(l.label), 1)
                 ], !0)
               ]),
               _: 2
             }, 1040, ["aria-current", "class", "data-testid", "onClick", "onKeydown"]))
           ]))), 128)),
-          e.tabs.length > n.value ? (i(), d("li", ft, [
-            z(H, { "kpop-attributes": {
+          e.tabs.length > i.value ? (s(), d("li", _t, [
+            z(x, { "kpop-attributes": {
               placement: "bottom-end",
               popoverElementAttributes: { "data-testid": "tabs-overflow-dropdown-popover" }
             } }, {
-              items: T(() => [
-                (i(!0), d(G, null, M(f.value, (s) => (i(), D(P, {
-                  key: `${s.key}-dropdown-item`,
-                  "aria-current": s.active ? "page" : void 0,
-                  "data-testid": s.dataTestId ? s.dataTestId : `page-layout-tab-${s.key}`,
+              items: I(() => [
+                (s(!0), d(Y, null, W(f.value, (l) => (s(), L(P, {
+                  key: `${l.key}-dropdown-item`,
+                  "aria-current": l.active ? "page" : void 0,
+                  "data-testid": l.dataTestId ? l.dataTestId : `page-layout-tab-${l.key}`,
                   item: {
-                    label: s.label,
-                    value: s.key,
-                    to: s.to
+                    label: l.label,
+                    value: l.key,
+                    to: l.to
                   },
-                  selected: s.active
+                  selected: l.active
                 }, {
-                  default: T(() => [
-                    E(g.$slots, `tab-${s.key}`, { tab: s }, () => [
-                      X(B(s.label), 1)
+                  default: I(() => [
+                    A(g.$slots, `tab-${l.key}`, { tab: l }, () => [
+                      te(O(l.label), 1)
                     ], !0)
                   ]),
                   _: 2
                 }, 1032, ["aria-current", "data-testid", "item", "selected"]))), 128))
               ]),
-              default: T(() => [
+              default: I(() => [
                 b("button", {
-                  "aria-label": h(r)("tabs.more_button.aria_label"),
-                  class: j(["tab-link", { active: f.value.find((s) => s.active) }]),
+                  "aria-label": h(u)("tabs.more_button.aria_label"),
+                  class: q(["tab-link", { active: f.value.find((l) => l.active) }]),
                   "data-testid": "tabs-overflow-dropdown-button"
                 }, [
-                  X(B(h(r)("tabs.more_button.label")) + " ", 1),
-                  z(h(Re), {
+                  te(O(h(u)("tabs.more_button.label")) + " ", 1),
+                  z(h(Oe), {
                     decorative: "",
-                    size: `var(--kui-icon-size-30, ${h(Q)})`
+                    size: `var(--kui-icon-size-30, ${h(ae)})`
                   }, null, 8, ["size"])
-                ], 10, pt)
+                ], 10, $t)
               ]),
               _: 3
             })
-          ])) : m("", !0)
+          ])) : y("", !0)
         ], 2),
-        y.value ? m("", !0) : (i(), d("div", gt, [
-          (i(), d(G, null, M(3, (s) => z(U, {
-            key: `layout-loader-${s}`,
+        w.value ? y("", !0) : (s(), d("div", Ct, [
+          (s(), d(Y, null, W(3, (l) => z(Z, {
+            key: `layout-loader-${l}`,
             height: "1",
             width: "5"
           })), 64))
@@ -244,53 +244,53 @@ const ht = {
       ], 512);
     };
   }
-}), ce = (e, r) => {
+}), pe = (e, u) => {
   const a = e.__vccOpts || e;
-  for (const [o, l] of r)
-    a[o] = l;
+  for (const [n, r] of u)
+    a[n] = r;
   return a;
-}, mt = /* @__PURE__ */ ce(bt, [["__scopeId", "data-v-02891bc1"]]), yt = ["aria-label", "data-fit"], kt = {
+}, Et = /* @__PURE__ */ pe(It, [["__scopeId", "data-v-02891bc1"]]), At = ["aria-label", "data-fit"], St = {
   key: 0,
   "aria-hidden": "true",
   class: "anchor-ellipsis",
   "data-testid": "anchor-navigation-leading-ellipsis"
-}, wt = ["aria-current", "data-testid", "title", "onClick"], Tt = {
+}, Lt = ["aria-current", "data-testid", "title", "onClick"], Rt = {
   key: 1,
   "aria-hidden": "true",
   class: "anchor-ellipsis",
   "data-testid": "anchor-navigation-trailing-ellipsis"
-}, _t = { key: 2 }, _e = 140, $e = 22, he = 16, $t = /* @__PURE__ */ ue({
+}, Dt = { key: 2 }, Se = 140, Le = 22, me = 16, se = "data-anchor-attention", Pt = 1200, Kt = 1600, Nt = /* @__PURE__ */ fe({
   __name: "PageLayoutAnchorNavigation",
   props: {
     anchors: { default: () => [] }
   },
   setup(e) {
-    const { i18n: { t: r } } = me.useI18n(), a = se("page-layout-anchor-navigation"), o = se("page-layout-anchor-navigation-list"), l = F("all"), c = F(""), v = F([]), n = w(() => e.anchors.filter((t) => v.value.includes(t.id))), y = w(() => {
-      const t = n.value.findIndex((u) => u.id === c.value);
+    const { i18n: { t: u } } = Te.useI18n(), a = de("page-layout-anchor-navigation"), n = de("page-layout-anchor-navigation-list"), r = M("all"), c = M(""), v = M([]), i = C(() => e.anchors.filter((t) => v.value.includes(t.id))), w = C(() => {
+      const t = i.value.findIndex((o) => o.id === c.value);
       return t === -1 ? 0 : t;
-    }), k = w(() => {
-      const t = n.value, u = t.length, _ = y.value;
-      if (l.value === "all")
+    }), T = C(() => {
+      const t = i.value, o = t.length, m = w.value;
+      if (r.value === "all")
         return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
-      if (l.value === "hidden")
+      if (r.value === "hidden")
         return { anchors: [], hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
-      if (l.value === "active-only")
-        return { anchors: t.slice(_, _ + 1), hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
-      const $ = l.value === "window-3" ? 3 : 2;
-      if (u <= $)
+      if (r.value === "active-only")
+        return { anchors: t.slice(m, m + 1), hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
+      const _ = r.value === "window-3" ? 3 : 2;
+      if (o <= _)
         return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
-      const x = _ < $ ? 0 : _ >= u - $ ? u - $ : _ - 1;
+      const N = m < _ ? 0 : m >= o - _ ? o - _ : m - 1;
       return {
-        anchors: t.slice(x, x + $),
-        hasLeadingEllipsis: x > 0,
-        hasTrailingEllipsis: x + $ < u,
+        anchors: t.slice(N, N + _),
+        hasLeadingEllipsis: N > 0,
+        hasTrailingEllipsis: N + _ < o,
         hasOverflowDropdown: !0
       };
-    }), f = (t) => t.dataTestId ?? `page-layout-anchor-${t.id.replace(/[^\w-]+/g, "-").replace(/^-+|-+$/g, "")}`, p = F(null), I = () => {
+    }), f = (t) => t.dataTestId ?? `page-layout-anchor-${t.id.replace(/[^\w-]+/g, "-").replace(/^-+|-+$/g, "")}`, p = M(null), E = () => {
       let t = a.value?.parentElement ?? null;
       for (; t; ) {
-        const { overflowY: u } = getComputedStyle(t);
-        if (u === "auto" || u === "scroll" || u === "overlay")
+        const { overflowY: o } = getComputedStyle(t);
+        if (o === "auto" || o === "scroll" || o === "overlay")
           return t;
         t = t.parentElement;
       }
@@ -298,41 +298,52 @@ const ht = {
     }, S = (t) => {
       if (t.element)
         return t.element.isConnected ? t.element : null;
-      const u = p.value ?? document;
+      const o = p.value ?? document;
       try {
-        return u.querySelector(t.id) ?? u.querySelector(`#${CSS.escape(t.id)}`);
+        return o.querySelector(t.id) ?? o.querySelector(`#${CSS.escape(t.id)}`);
       } catch {
         return null;
       }
-    }, g = () => (a.value?.closest(".page-layout-header")?.getBoundingClientRect().height ?? 0) + parseInt(Le, 10), N = parseInt(Q, 10), P = parseInt(nt, 10), H = (t) => t * _e + 2 * N + $e + (t + 2) * P + he, U = () => _e + $e + P + he;
-    let s = 0;
-    const O = async () => {
-      if (!n.value.length) {
-        l.value = "hidden";
+    }, g = () => (a.value?.closest(".page-layout-header")?.getBoundingClientRect().height ?? 0) + parseInt(ze, 10), H = parseInt(ae, 10), P = parseInt(ht, 10), x = (t) => t * Se + 2 * H + Le + (t + 2) * P + me, Z = () => Se + Le + P + me;
+    let l = 0;
+    const F = async () => {
+      if (!i.value.length) {
+        r.value = "hidden";
         return;
       }
-      const t = ++s;
-      if (l.value = "all", await pe(), t !== s || !a.value || !o.value)
+      const t = ++l;
+      if (r.value = "all", await ye(), t !== l || !a.value || !n.value)
         return;
-      const u = a.value.getBoundingClientRect().width, _ = o.value.getBoundingClientRect().width;
-      u <= 0 || _ <= 0 || _ + he <= u || (H(3) <= u ? l.value = "window-3" : H(2) <= u ? l.value = "window-2" : U() <= u ? l.value = "active-only" : l.value = "hidden");
+      const o = a.value.getBoundingClientRect().width, m = n.value.getBoundingClientRect().width;
+      o <= 0 || m <= 0 || m + me <= o || (x(3) <= o ? r.value = "window-3" : x(2) <= o ? r.value = "window-2" : Z() <= o ? r.value = "active-only" : r.value = "hidden");
     };
     let V = null;
-    Pe(a, () => {
+    He(a, () => {
       V && clearTimeout(V), V = setTimeout(() => {
-        ee(), O();
+        ie(), F();
       }, 150);
     });
-    let q = null, Y = null;
-    const Z = () => p.value ?? window, L = () => {
-      q = null, Y && (clearTimeout(Y), Y = null);
-      const t = Z();
-      t.removeEventListener("scrollend", L), t.removeEventListener("wheel", L), t.removeEventListener("touchstart", L);
-    }, oe = (t) => {
-      L(), q = t;
-      const u = Z();
-      u.addEventListener("scrollend", L, { once: !0 }), u.addEventListener("wheel", L, { passive: !0 }), u.addEventListener("touchstart", L, { passive: !0 }), Y = setTimeout(L, 1e3);
-    }, de = () => {
+    let J = null, X = null, U = 0, ue = 0, j = null, oe = null;
+    const _e = (t) => {
+      const o = String(++U);
+      $e(), oe = t, t.removeAttribute(se), ue = requestAnimationFrame(() => {
+        t.setAttribute(se, o), j = setTimeout(() => {
+          t.getAttribute(se) === o && t.removeAttribute(se);
+        }, Pt);
+      });
+    }, $e = () => {
+      cancelAnimationFrame(ue), j && (clearTimeout(j), j = null), oe?.removeAttribute(se), oe = null;
+    }, ne = () => p.value ?? window, Fe = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]), D = (t) => {
+      if (t instanceof KeyboardEvent && !Fe.has(t.key))
+        return;
+      t && t.type !== "scrollend" && U++, J = null, X && (clearTimeout(X), X = null);
+      const o = ne();
+      o.removeEventListener("scrollend", D), o.removeEventListener("wheel", D), o.removeEventListener("touchstart", D), o.removeEventListener("keydown", D);
+    }, Me = (t) => {
+      D(), J = t;
+      const o = ne();
+      o.addEventListener("scrollend", D, { once: !0 }), o.addEventListener("wheel", D, { passive: !0 }), o.addEventListener("touchstart", D, { passive: !0 }), o.addEventListener("keydown", D, { passive: !0 }), X = setTimeout(D, 1e3);
+    }, Ce = () => {
       const t = p.value;
       return {
         top: t ? t.getBoundingClientRect().top : 0,
@@ -340,102 +351,111 @@ const ht = {
         clientHeight: t ? t.clientHeight : window.innerHeight,
         scrollHeight: t ? t.scrollHeight : document.documentElement.scrollHeight
       };
-    }, ee = () => {
-      const { top: t, scrollTop: u, clientHeight: _, scrollHeight: $ } = de(), x = g(), C = [];
-      let A = null, ne = null;
-      for (const W of e.anchors) {
-        const ie = S(W);
-        ie && (C.push(W.id), ne = W.id, A ??= W.id, ie.getBoundingClientRect().top - t <= (W.offset ?? x) + 8 && (A = W.id));
+    }, ie = () => {
+      const { top: t, scrollTop: o, clientHeight: m, scrollHeight: _ } = Ce(), N = g(), $ = [];
+      let k = null, G = null;
+      for (const B of e.anchors) {
+        const Q = S(B);
+        Q && ($.push(B.id), G = B.id, k ??= B.id, Q.getBoundingClientRect().top - t <= (B.offset ?? N) + 8 && (k = B.id));
       }
-      const we = C.length !== v.value.length || C.some((W, ie) => W !== v.value[ie]);
-      return we && (v.value = C), q || (ne && u > 0 && u + _ >= $ - 2 && (A = ne), c.value = A ?? ""), we;
+      const ce = $.length !== v.value.length || $.some((B, Q) => B !== v.value[Q]);
+      return ce && (v.value = $), J || (G && o > 0 && o + m >= _ - 2 && (k = G), c.value = k ?? ""), ce;
     };
-    let ve = !1;
-    const ye = () => {
-      ve || (ve = !0, requestAnimationFrame(() => {
-        ve = !1, ee() && O();
+    let ge = !1;
+    const Ie = () => {
+      ge || (ge = !0, requestAnimationFrame(() => {
+        ge = !1, ie() && F();
       }));
-    }, ke = (t) => {
-      const u = S(t);
-      if (!u)
+    }, xe = (t) => {
+      const o = ne();
+      let m = !1;
+      const _ = () => {
+        m || (m = !0, o.removeEventListener("scrollend", _), t());
+      };
+      o.addEventListener("scrollend", _, { once: !0 }), window.setTimeout(_, Kt);
+    }, Ee = (t) => {
+      const o = S(t);
+      if (!o)
         return;
-      c.value = t.id, oe(t.id);
-      const _ = t.offset ?? g(), $ = p.value;
-      if ($) {
-        $.scrollTo({ behavior: "smooth", top: u.getBoundingClientRect().top - $.getBoundingClientRect().top + $.scrollTop - _ });
+      c.value = t.id, Me(t.id);
+      const m = t.offset ?? g(), { scrollTop: _, clientHeight: N, scrollHeight: $ } = Ce(), k = p.value, G = k ? o.getBoundingClientRect().top - k.getBoundingClientRect().top + k.scrollTop - m : o.getBoundingClientRect().top + window.scrollY - m, ce = Math.min(Math.max(G, 0), Math.max($ - N, 0)), B = Math.abs(ce - _) >= 2, Q = ++U;
+      if ((k ?? window).scrollTo({ behavior: "smooth", top: G }), !B) {
+        _e(o);
         return;
       }
-      window.scrollTo({ behavior: "smooth", top: u.getBoundingClientRect().top + window.scrollY - _ });
-    }, Ke = (t, u) => {
-      u(), ke(t);
+      xe(() => {
+        Q === U && _e(o);
+      });
+    }, We = (t, o) => {
+      o(), Ee(t);
     };
-    return be(() => {
-      p.value = I(), Z().addEventListener("scroll", ye, { passive: !0 }), ee(), O(), requestAnimationFrame(() => {
-        ee(), O();
+    return we(() => {
+      p.value = E(), ne().addEventListener("scroll", Ie, { passive: !0 }), ie(), F(), requestAnimationFrame(() => {
+        ie(), F();
       });
-    }), Ee(() => {
-      Z().removeEventListener("scroll", ye), L(), V && clearTimeout(V);
-    }), re(() => e.anchors, () => {
-      e.anchors.some((t) => t.id === c.value) || (c.value = ""), ee(), O();
-    }, { deep: !0 }), (t, u) => {
-      const _ = R("KButton"), $ = R("KDropdownItem"), x = R("KDropdown");
-      return i(), d("nav", {
+    }), Pe(() => {
+      ne().removeEventListener("scroll", Ie), D(), U++, $e(), V && clearTimeout(V);
+    }), he(() => e.anchors, () => {
+      e.anchors.some((t) => t.id === c.value) || (c.value = ""), ie(), F();
+    }, { deep: !0 }), (t, o) => {
+      const m = R("KButton"), _ = R("KDropdownItem"), N = R("KDropdown");
+      return s(), d("nav", {
         ref: "page-layout-anchor-navigation",
-        "aria-label": h(r)("anchor_navigation.aria_label"),
+        "aria-label": h(u)("anchor_navigation.aria_label"),
         class: "page-layout-anchor-navigation",
-        "data-fit": l.value,
+        "data-fit": r.value,
         "data-testid": "page-layout-anchor-navigation"
       }, [
         b("ul", {
           ref: "page-layout-anchor-navigation-list",
-          class: j({ "layout-hidden": l.value === "hidden" })
+          class: q({ "layout-hidden": r.value === "hidden" })
         }, [
-          k.value.hasLeadingEllipsis ? (i(), d("li", kt, " … ")) : m("", !0),
-          (i(!0), d(G, null, M(k.value.anchors, (C) => (i(), d("li", {
-            key: `${C.id}-anchor`
+          T.value.hasLeadingEllipsis ? (s(), d("li", St, " … ")) : y("", !0),
+          (s(!0), d(Y, null, W(T.value.anchors, ($) => (s(), d("li", {
+            key: `${$.id}-anchor`
           }, [
             b("button", {
-              "aria-current": C.id === c.value ? "location" : void 0,
-              class: j(["anchor-link", { active: C.id === c.value }]),
-              "data-testid": f(C),
-              title: C.label,
+              "aria-current": $.id === c.value ? "location" : void 0,
+              class: q(["anchor-link", { active: $.id === c.value }]),
+              "data-testid": f($),
+              title: $.label,
               type: "button",
-              onClick: (A) => ke(C)
-            }, B(C.label), 11, wt)
+              onClick: (k) => Ee($)
+            }, O($.label), 11, Lt)
           ]))), 128)),
-          k.value.hasTrailingEllipsis ? (i(), d("li", Tt, " … ")) : m("", !0),
-          k.value.hasOverflowDropdown ? (i(), d("li", _t, [
-            z(x, { "kpop-attributes": {
+          T.value.hasTrailingEllipsis ? (s(), d("li", Rt, " … ")) : y("", !0),
+          T.value.hasOverflowDropdown ? (s(), d("li", Dt, [
+            z(N, { "kpop-attributes": {
               placement: "bottom-end",
               popoverElementAttributes: { "data-testid": "anchor-navigation-overflow-dropdown-popover" }
             } }, {
-              items: T(({ closeDropdown: C }) => [
-                (i(!0), d(G, null, M(n.value, (A) => (i(), D($, {
-                  key: `${A.id}-dropdown-item`,
-                  "aria-current": A.id === c.value ? "location" : void 0,
-                  "data-testid": f(A),
-                  selected: A.id === c.value,
-                  onClick: (ne) => Ke(A, C)
+              items: I(({ closeDropdown: $ }) => [
+                (s(!0), d(Y, null, W(i.value, (k) => (s(), L(_, {
+                  key: `${k.id}-dropdown-item`,
+                  "aria-current": k.id === c.value ? "location" : void 0,
+                  "data-testid": f(k),
+                  selected: k.id === c.value,
+                  onClick: (G) => We(k, $)
                 }, {
-                  default: T(() => [
-                    X(B(A.label), 1)
+                  default: I(() => [
+                    te(O(k.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["aria-current", "data-testid", "selected", "onClick"]))), 128))
               ]),
-              default: T(() => [
-                z(_, {
+              default: I(() => [
+                z(m, {
                   appearance: "tertiary",
-                  "aria-label": h(r)("anchor_navigation.more_button.aria_label"),
+                  "aria-label": h(u)("anchor_navigation.more_button.aria_label"),
                   class: "anchor-overflow-button",
                   "data-testid": "anchor-navigation-overflow-dropdown-button",
                   icon: "",
                   size: "small"
                 }, {
-                  default: T(() => [
-                    z(h(Re), {
+                  default: I(() => [
+                    z(h(Oe), {
                       decorative: "",
-                      size: `var(--kui-icon-size-30, ${h(Q)})`
+                      size: `var(--kui-icon-size-30, ${h(ae)})`
                     }, null, 8, ["size"])
                   ]),
                   _: 1
@@ -443,29 +463,29 @@ const ht = {
               ]),
               _: 1
             })
-          ])) : m("", !0)
+          ])) : y("", !0)
         ], 2)
-      ], 8, yt);
+      ], 8, At);
     };
   }
-}), It = /* @__PURE__ */ ce($t, [["__scopeId", "data-v-f9770830"]]), Ie = /* @__PURE__ */ Symbol("nested-page-layout-detection"), Ct = "page-layout:new-appearance", Et = {
+}), Bt = /* @__PURE__ */ pe(Nt, [["__scopeId", "data-v-2f18cb71"]]), Re = /* @__PURE__ */ Symbol("nested-page-layout-detection"), Ot = "page-layout:new-appearance", zt = {
   key: 0,
   class: "page-layout-header",
   "data-testid": "page-layout-header"
-}, St = { class: "page-header-container" }, At = { class: "page-header-start" }, Dt = { class: "title-container" }, Rt = {
+}, Ht = { class: "page-header-container" }, Ft = { class: "page-header-start" }, Mt = { class: "title-container" }, xt = {
   key: 1,
   class: "page-layout-title-wrapper"
-}, Lt = {
+}, Wt = {
   class: "page-layout-title",
   "data-testid": "page-layout-title"
-}, Pt = ["aria-label"], Kt = {
+}, Vt = ["aria-label"], Ut = {
   key: 3,
   class: "title-after-container"
-}, Bt = { class: "page-header-actions-container" }, zt = {
+}, jt = { class: "page-header-actions-container" }, Gt = {
   key: 0,
   class: "page-layout-aside-container",
   "data-testid": "page-layout-aside"
-}, Nt = { class: "page-layout-content" }, Ot = /* @__PURE__ */ ue({
+}, qt = { class: "page-layout-content" }, Yt = /* @__PURE__ */ fe({
   __name: "PageLayout",
   props: {
     breadcrumbs: { default: () => [] },
@@ -476,165 +496,165 @@ const ht = {
     pageShortcutData: {}
   },
   setup(e) {
-    const r = te("app:navigateTo", null), a = te(Ct, null), o = te("app:pageShortcutsContext", null), { i18n: { t: l } } = me.useI18n(), c = De(), v = Me(), n = w(() => !!(e.tabs && e.tabs.length)), y = w(() => typeof e.backTo == "string"), k = w(() => ae(a) === !0), f = w(() => k.value && !n.value && !!(e.anchors && e.anchors.length)), p = w(() => !!e.pageShortcutData && !!e.pageShortcutData.entityType && !!e.pageShortcutData.label), I = w(() => p.value && !!o && "onFavoriteToggle" in o && typeof o.onFavoriteToggle == "function"), S = F(0), g = w(() => !!o && "isFavorite" in o && typeof o.isFavorite == "function" && o.isFavorite(e.pageShortcutData) === !0), N = async () => {
+    const u = le("app:navigateTo", null), a = le(Ot, null), n = le("app:pageShortcutsContext", null), { i18n: { t: r } } = Te.useI18n(), c = Be(), v = Xe(), i = C(() => !!(e.tabs && e.tabs.length)), w = C(() => typeof e.backTo == "string"), T = C(() => re(a) === !0), f = C(() => T.value && !i.value && !!(e.anchors && e.anchors.length)), p = C(() => !!e.pageShortcutData && !!e.pageShortcutData.entityType && !!e.pageShortcutData.label), E = C(() => p.value && !!n && "onFavoriteToggle" in n && typeof n.onFavoriteToggle == "function"), S = M(0), g = C(() => !!n && "isFavorite" in n && typeof n.isFavorite == "function" && n.isFavorite(e.pageShortcutData) === !0), H = async () => {
       if (e.backTo) {
         if (typeof e.backTo == "object") {
           c.push(e.backTo);
           return;
         }
-        if (typeof r != "function") {
+        if (typeof u != "function") {
           window.location.href = e.backTo;
           return;
         }
-        await r(e.backTo);
+        await u(e.backTo);
       }
-    }, P = F(0), H = w(() => P.value > 0);
-    Fe(Ie, () => (P.value++, () => {
+    }, P = M(0), x = C(() => P.value > 0);
+    qe(Re, () => (P.value++, () => {
       P.value--;
     }));
-    const U = te(Ie, null), s = F(null);
-    typeof U == "function" && (s.value = U());
-    const O = () => {
-      o.onFavoriteToggle({ ...e.pageShortcutData, path: e.pageShortcutData?.path || v.fullPath });
+    const Z = le(Re, null), l = M(null);
+    typeof Z == "function" && (l.value = Z());
+    const F = () => {
+      n.onFavoriteToggle({ ...e.pageShortcutData, path: e.pageShortcutData?.path || v.fullPath });
     };
-    He(() => {
-      s.value?.();
+    Ye(() => {
+      l.value?.();
     });
-    const V = ut(() => {
-      !H.value && p.value && o && "onEntityPageVisit" in o && typeof o.onEntityPageVisit == "function" && (o.onEntityPageVisit({ ...e.pageShortcutData, path: e.pageShortcutData?.path || v?.fullPath }), S.value++);
+    const V = bt(() => {
+      !x.value && p.value && n && "onEntityPageVisit" in n && typeof n.onEntityPageVisit == "function" && (n.onEntityPageVisit({ ...e.pageShortcutData, path: e.pageShortcutData?.path || v?.fullPath }), S.value++);
     }, 500);
-    return re([() => e.pageShortcutData, () => v?.fullPath], () => {
+    return he([() => e.pageShortcutData, () => v?.fullPath], () => {
       V();
-    }, { immediate: !0, deep: !0 }), (K, q) => {
-      const Y = R("KBreadcrumbs"), Z = R("KTooltip"), L = R("router-view");
-      return i(), d("div", {
-        class: j(["kong-ui-public-page-layout", { "new-appearance": k.value }]),
+    }, { immediate: !0, deep: !0 }), (K, J) => {
+      const X = R("KBreadcrumbs"), U = R("KTooltip"), ue = R("router-view");
+      return s(), d("div", {
+        class: q(["kong-ui-public-page-layout", { "new-appearance": T.value }]),
         "data-testid": "kong-ui-public-page-layout"
       }, [
-        H.value ? m("", !0) : (i(), d("div", Et, [
-          b("div", St, [
-            b("div", At, [
-              e.breadcrumbs && e.breadcrumbs.length ? (i(), D(Y, {
+        x.value ? y("", !0) : (s(), d("div", zt, [
+          b("div", Ht, [
+            b("div", Ft, [
+              e.breadcrumbs && e.breadcrumbs.length ? (s(), L(X, {
                 key: 0,
                 class: "header-breadcrumbs",
                 "data-testid": "page-layout-breadcrumbs",
                 "item-max-width": "25ch",
                 items: e.breadcrumbs
-              }, ge({ _: 2 }, [
-                k.value ? {
+              }, ke({ _: 2 }, [
+                T.value ? {
                   name: "divider",
-                  fn: T(() => [
-                    z(h(Ge), {
+                  fn: I(() => [
+                    z(h(tt), {
                       decorative: "",
-                      size: `var(--kui-icon-size-30, ${h(Q)})`
+                      size: `var(--kui-icon-size-30, ${h(ae)})`
                     }, null, 8, ["size"])
                   ]),
                   key: "0"
                 } : void 0
-              ]), 1032, ["items"])) : m("", !0),
-              b("div", Dt, [
-                e.backTo && !k.value ? (i(), D(fe(y.value ? "a" : "router-link"), Se({ key: 0 }, y.value ? { href: e.backTo } : { to: e.backTo }, {
-                  "aria-label": h(l)("back_button"),
+              ]), 1032, ["items"])) : y("", !0),
+              b("div", Mt, [
+                e.backTo && !T.value ? (s(), L(be(w.value ? "a" : "router-link"), Ke({ key: 0 }, w.value ? { href: e.backTo } : { to: e.backTo }, {
+                  "aria-label": h(r)("back_button"),
                   class: "navigate-back",
                   "data-testid": "page-layout-navigate-back",
                   tabindex: "0",
-                  onClick: le(N, ["prevent"]),
-                  onKeydown: Ae(le(N, ["prevent"]), ["enter"])
+                  onClick: ve(H, ["prevent"]),
+                  onKeydown: Ne(ve(H, ["prevent"]), ["enter"])
                 }), {
-                  default: T(() => [
-                    z(h(Ue), {
+                  default: I(() => [
+                    z(h(at), {
                       decorative: "",
-                      size: `var(--kui-icon-size-30, ${h(Q)})`
+                      size: `var(--kui-icon-size-30, ${h(ae)})`
                     }, null, 8, ["size"])
                   ]),
                   _: 1
-                }, 16, ["aria-label", "onKeydown"])) : m("", !0),
-                e.title || K.$slots.title ? (i(), d("span", Rt, [
-                  E(K.$slots, "title", {}, () => [
-                    b("h1", Lt, B(e.title), 1)
+                }, 16, ["aria-label", "onKeydown"])) : y("", !0),
+                e.title || K.$slots.title ? (s(), d("span", xt, [
+                  A(K.$slots, "title", {}, () => [
+                    b("h1", Wt, O(e.title), 1)
                   ], !0)
-                ])) : m("", !0),
-                I.value ? (i(), d("div", {
+                ])) : y("", !0),
+                E.value ? (s(), d("div", {
                   key: S.value,
                   class: "favorite-button-container"
                 }, [
-                  z(Z, {
+                  z(U, {
                     placement: "right",
-                    text: g.value ? h(l)("favorite_button.remove_shortcut") : h(l)("favorite_button.save_shortcut")
+                    text: g.value ? h(r)("favorite_button.remove_shortcut") : h(r)("favorite_button.save_shortcut")
                   }, {
-                    default: T(() => [
+                    default: I(() => [
                       b("button", {
-                        "aria-label": g.value ? h(l)("favorite_button.remove_shortcut") : h(l)("favorite_button.save_shortcut"),
-                        class: j(["favorite-button", { active: g.value }]),
+                        "aria-label": g.value ? h(r)("favorite_button.remove_shortcut") : h(r)("favorite_button.save_shortcut"),
+                        class: q(["favorite-button", { active: g.value }]),
                         "data-testid": "page-layout-favorite-button",
                         type: "button",
-                        onClick: O
+                        onClick: F
                       }, [
-                        (i(), D(fe(g.value ? h(qe) : h(Ye)), {
+                        (s(), L(be(g.value ? h(ot) : h(nt)), {
                           decorative: "",
-                          size: `var(--kui-icon-size-30, ${h(Q)})`
+                          size: `var(--kui-icon-size-30, ${h(ae)})`
                         }, null, 8, ["size"]))
-                      ], 10, Pt)
+                      ], 10, Vt)
                     ]),
                     _: 1
                   }, 8, ["text"])
-                ])) : m("", !0),
-                K.$slots["title-after"] ? (i(), d("div", Kt, [
-                  E(K.$slots, "title-after", {}, void 0, !0)
-                ])) : m("", !0)
+                ])) : y("", !0),
+                K.$slots["title-after"] ? (s(), d("div", Ut, [
+                  A(K.$slots, "title-after", {}, void 0, !0)
+                ])) : y("", !0)
               ])
             ]),
-            f.value ? (i(), D(It, {
+            f.value ? (s(), L(Bt, {
               key: 0,
               anchors: e.anchors
-            }, null, 8, ["anchors"])) : m("", !0),
-            b("div", Bt, [
-              E(K.$slots, "actions", {}, void 0, !0),
-              q[0] || (q[0] = b("div", { "data-teleport-target": "ask-kai" }, null, -1))
+            }, null, 8, ["anchors"])) : y("", !0),
+            b("div", jt, [
+              A(K.$slots, "actions", {}, void 0, !0),
+              J[0] || (J[0] = b("div", { "data-teleport-target": "ask-kai" }, null, -1))
             ])
           ]),
-          n.value ? (i(), D(mt, {
+          i.value ? (s(), L(Et, {
             key: 0,
             tabs: e.tabs
-          }, ge({ _: 2 }, [
-            M(e.tabs, (oe) => ({
-              name: `tab-${oe.key}`,
-              fn: T((de) => [
-                E(K.$slots, `tab-${oe.key}`, xe(We(de)), void 0, !0)
+          }, ke({ _: 2 }, [
+            W(e.tabs, (j) => ({
+              name: `tab-${j.key}`,
+              fn: I((oe) => [
+                A(K.$slots, `tab-${j.key}`, Ze(Je(oe)), void 0, !0)
               ])
             }))
-          ]), 1032, ["tabs"])) : m("", !0)
+          ]), 1032, ["tabs"])) : y("", !0)
         ])),
         b("div", {
-          class: j(["page-layout-content-container", { "has-nested-page-layout": H.value }])
+          class: q(["page-layout-content-container", { "has-nested-page-layout": x.value }])
         }, [
-          k.value && K.$slots.aside ? (i(), d("div", zt, [
-            E(K.$slots, "aside", {}, void 0, !0)
-          ])) : m("", !0),
-          b("div", Nt, [
-            n.value ? (i(), D(L, { key: 0 })) : E(K.$slots, "default", {}, void 0, !0, 1)
+          T.value && K.$slots.aside ? (s(), d("div", Gt, [
+            A(K.$slots, "aside", {}, void 0, !0)
+          ])) : y("", !0),
+          b("div", qt, [
+            i.value ? (s(), L(ue, { key: 0 })) : A(K.$slots, "default", {}, void 0, !0, 1)
           ])
         ], 2)
       ], 2);
     };
   }
-}), ea = /* @__PURE__ */ ce(Ot, [["__scopeId", "data-v-82c7f181"]]), Ft = {
+}), da = /* @__PURE__ */ pe(Yt, [["__scopeId", "data-v-e714e65a"]]), Zt = {
   key: 0,
   class: "about-card-description",
   "data-testid": "about-card-description"
-}, Ht = {
+}, Jt = {
   key: 1,
   class: "about-card-skeleton",
   "data-testid": "about-card-skeleton"
-}, xt = {
+}, Xt = {
   key: 2,
   class: "about-card-rows",
   "data-testid": "about-card-rows"
-}, Wt = ["data-testid"], Mt = { class: "about-card-row-label" }, Vt = { class: "about-card-row-text" }, jt = ["aria-label", "data-testid"], Gt = { class: "about-card-row-value" }, Ut = { class: "about-card-row-text" }, qt = {
+}, Qt = ["data-testid"], ea = { class: "about-card-row-label" }, ta = { class: "about-card-row-text" }, aa = ["aria-label", "data-testid"], oa = { class: "about-card-row-value" }, na = { class: "about-card-row-text" }, ia = {
   key: 3,
   class: "about-card-content",
   "data-testid": "about-card-content"
-}, Yt = /* @__PURE__ */ ue({
+}, sa = /* @__PURE__ */ fe({
   __name: "AboutCard",
   props: {
     title: { default: "" },
@@ -644,90 +664,90 @@ const ht = {
     isLoading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const r = w(() => e.rows.length || 4);
-    return (a, o) => {
-      const l = R("KSkeletonBox"), c = R("KTooltip"), v = R("KCard");
-      return i(), D(v, {
+    const u = C(() => e.rows.length || 4);
+    return (a, n) => {
+      const r = R("KSkeletonBox"), c = R("KTooltip"), v = R("KCard");
+      return s(), L(v, {
         class: "kong-ui-public-about-card",
         title: e.title,
         "title-tag": e.titleTag
-      }, ge({
-        default: T(() => [
-          a.$slots.description || e.description ? (i(), d("p", Ft, [
-            E(a.$slots, "description", {}, () => [
-              X(B(e.description), 1)
+      }, ke({
+        default: I(() => [
+          a.$slots.description || e.description ? (s(), d("p", Zt, [
+            A(a.$slots, "description", {}, () => [
+              te(O(e.description), 1)
             ], !0)
-          ])) : m("", !0),
-          e.isLoading ? (i(), d("div", Ht, [
-            (i(!0), d(G, null, M(r.value, (n) => (i(), D(l, {
-              key: n,
+          ])) : y("", !0),
+          e.isLoading ? (s(), d("div", Jt, [
+            (s(!0), d(Y, null, W(u.value, (i) => (s(), L(r, {
+              key: i,
               height: "2",
               width: "100"
             }))), 128))
-          ])) : e.rows.length ? (i(), d("dl", xt, [
-            (i(!0), d(G, null, M(e.rows, (n) => (i(), d("div", {
-              key: n.key,
+          ])) : e.rows.length ? (s(), d("dl", Xt, [
+            (s(!0), d(Y, null, W(e.rows, (i) => (s(), d("div", {
+              key: i.key,
               class: "about-card-row",
-              "data-testid": `about-card-row-${n.key}`
+              "data-testid": `about-card-row-${i.key}`
             }, [
-              b("dt", Mt, [
-                E(a.$slots, `label-${n.key}`, { row: n }, () => [
-                  b("span", Vt, B(n.label), 1)
+              b("dt", ea, [
+                A(a.$slots, `label-${i.key}`, { row: i }, () => [
+                  b("span", ta, O(i.label), 1)
                 ], !0),
-                n.tooltip ? (i(), D(c, {
+                i.tooltip ? (s(), L(c, {
                   key: 0,
-                  text: n.tooltip
+                  text: i.tooltip
                 }, {
-                  default: T(() => [
+                  default: I(() => [
                     b("button", {
-                      "aria-label": n.tooltip,
+                      "aria-label": i.tooltip,
                       class: "about-card-row-tooltip-trigger",
-                      "data-testid": `about-card-row-${n.key}-tooltip`,
+                      "data-testid": `about-card-row-${i.key}-tooltip`,
                       type: "button"
                     }, [
-                      z(h(Ze), {
-                        size: `var(--kui-icon-size-20, ${h(ot)})`
+                      z(h(it), {
+                        size: `var(--kui-icon-size-20, ${h(vt)})`
                       }, null, 8, ["size"])
-                    ], 8, jt)
+                    ], 8, aa)
                   ]),
                   _: 2
-                }, 1032, ["text"])) : m("", !0)
+                }, 1032, ["text"])) : y("", !0)
               ]),
-              b("dd", Gt, [
-                E(a.$slots, `row-${n.key}`, { row: n }, () => [
-                  b("span", Ut, B(n.value), 1)
+              b("dd", oa, [
+                A(a.$slots, `row-${i.key}`, { row: i }, () => [
+                  b("span", na, O(i.value), 1)
                 ], !0)
               ])
-            ], 8, Wt))), 128))
-          ])) : m("", !0),
-          a.$slots.default ? (i(), d("div", qt, [
-            E(a.$slots, "default", {}, void 0, !0)
-          ])) : m("", !0)
+            ], 8, Qt))), 128))
+          ])) : y("", !0),
+          a.$slots.default ? (s(), d("div", ia, [
+            A(a.$slots, "default", {}, void 0, !0)
+          ])) : y("", !0)
         ]),
         _: 2
       }, [
         a.$slots.title || e.title ? {
           name: "title",
-          fn: T(() => [
-            E(a.$slots, "title", {}, () => [
-              X(B(e.title), 1)
+          fn: I(() => [
+            A(a.$slots, "title", {}, () => [
+              te(O(e.title), 1)
             ], !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.actions ? {
           name: "actions",
-          fn: T(() => [
-            E(a.$slots, "actions", {}, void 0, !0)
+          fn: I(() => [
+            A(a.$slots, "actions", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0
       ]), 1032, ["title", "title-tag"]);
     };
   }
-}), ta = /* @__PURE__ */ ce(Yt, [["__scopeId", "data-v-0316c887"]]);
+}), va = /* @__PURE__ */ pe(sa, [["__scopeId", "data-v-86b6c183"]]);
 export {
-  ta as AboutCard,
-  Ct as NEW_APPEARANCE_INJECTION_KEY,
-  ea as PageLayout
+  va as AboutCard,
+  Ot as NEW_APPEARANCE_INJECTION_KEY,
+  da as PageLayout
 };