@kong-ui-public/page-layout 1.3.1 → 1.3.2-pr.3955.d76d9b0e2.0

package/dist/page-layout.es.js

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