@kong-ui-public/page-layout 1.2.3-pr.3950.8bbf2948c.0 → 1.2.3

package/dist/page-layout.es.js

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