@kong-ui-public/page-layout 1.2.3 → 1.2.4-pr.3950.67e63cd5b.0

package/dist/page-layout.es.js

@@ -1,241 +1,242 @@
-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
+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
 };
-function zt() {
-  const t = $t("en-us", Rt);
+function at() {
+  const e = Ve("en-us", tt);
   return {
-    i18n: t,
-    i18nT: wt(t)
+    i18n: e,
+    i18nT: je(e)
     // Translation component <i18n-t>
   };
 }
-const it = {
-  useI18n: zt
-}, Et = "12px", U = "16px", Lt = "16px";
-function Nt(t, s) {
-  return vt() ? (ft(t, s), !0) : !1;
+const be = {
+  useI18n: at
+}, ot = "12px", ae = "16px", nt = "2px", Le = "16px";
+function st(e, l) {
+  return Ne() ? (Oe(e, l), !0) : !1;
 }
-const At = typeof window < "u" && typeof document < "u";
+const it = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const B = () => {
+const J = () => {
 };
-function Ft(t, s) {
-  function e(...a) {
-    return new Promise((l, r) => {
-      Promise.resolve(t(() => s.apply(this, a), {
-        fn: s,
+function lt(e, l) {
+  function a(...o) {
+    return new Promise((r, c) => {
+      Promise.resolve(e(() => l.apply(this, o), {
+        fn: l,
         thisArg: this,
-        args: a
-      })).then(l).catch(r);
+        args: o
+      })).then(r).catch(c);
     });
   }
-  return "cancel" in t && Object.assign(e, {
-    cancel: t.cancel,
-    flush: t.flush,
-    isPending: t.isPending
-  }), e;
+  return "cancel" in e && Object.assign(a, {
+    cancel: e.cancel,
+    flush: e.flush,
+    isPending: e.isPending
+  }), a;
 }
-function Ot(t, s = {}) {
-  let e, a, l = B, r = B;
-  const u = et(!1), o = (d) => {
-    clearTimeout(d), l(), l = B;
+function rt(e, l = {}) {
+  let a, o, r = J, c = J;
+  const v = Ie(!1), n = (h) => {
+    clearTimeout(h), r(), r = J;
   };
-  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);
+  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);
     }));
   }, {
     cancel: () => {
-      e && (o(e), e = void 0), a && (o(a), a = void 0), u.value = !1, r = B;
+      a && (n(a), a = void 0), o && (n(o), o = void 0), v.value = !1, c = J;
     },
     flush: () => {
-      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());
+      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());
       }
     },
-    isPending: dt(u)
+    isPending: Be(v)
   });
 }
-function Vt(t, s = 200, e = {}) {
-  return Ft(Ot(s, e), t);
+function ut(e, l = 200, a = {}) {
+  return lt(rt(l, a), e);
 }
-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;
+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;
 }
 // @__NO_SIDE_EFFECTS__
-function jt() {
-  const t = et(!1), s = bt();
-  return s && at(() => {
-    t.value = !0;
-  }, s), t;
+function dt() {
+  const e = Ie(!1), l = ze();
+  return l && ye(() => {
+    e.value = !0;
+  }, l), e;
 }
 // @__NO_SIDE_EFFECTS__
-function xt(t) {
-  const s = /* @__PURE__ */ jt();
-  return k(() => (s.value, !!t()));
+function vt(e) {
+  const l = /* @__PURE__ */ dt();
+  return w(() => (l.value, !!e()));
 }
-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);
+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);
     }
   }, {
     immediate: !0,
     flush: "post"
-  }), T = () => {
-    o(), p();
+  }), k = () => {
+    n(), m();
   };
-  return Nt(T), {
-    isSupported: u,
-    stop: T
+  return st(k), {
+    isSupported: v,
+    stop: k
   };
 }
-const Ut = {
+const ht = {
   ref: "page-layout-tabs",
   class: "page-layout-tabs",
   "data-testid": "page-layout-tabs"
-}, Gt = { key: 0 }, Zt = ["aria-label"], Jt = {
+}, ft = { key: 0 }, pt = ["aria-label"], gt = {
   key: 0,
   class: "layout-loader-container"
-}, Yt = /* @__PURE__ */ Z({
+}, yt = /* @__PURE__ */ ue({
   __name: "PageLayoutTabs",
   props: {
     tabs: { default: () => [] }
   },
-  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);
+  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);
         return;
       }
-      if (typeof a != "function") {
-        window.location.href = b.to;
+      if (typeof o != "function") {
+        window.location.href = g.to;
         return;
       }
-      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)
+      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)
         return;
-      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;
+      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;
         return;
       }
-      const K = 50;
-      for (; S + K > b && o.value > 1; )
-        o.value--, await Q(), S = u.value?.getBoundingClientRect().width || 0;
-      p.value = !0;
+      const P = 50;
+      for (; O + P > g && n.value > 1; )
+        n.value--, await pe(), O = v.value?.getBoundingClientRect().width || 0;
+      m.value = !0;
     };
-    let m = null;
-    const w = () => {
-      m && clearTimeout(m), m = setTimeout(() => {
-        g();
+    let C = null;
+    const S = () => {
+      C && clearTimeout(C), C = setTimeout(() => {
+        p();
       }, 150);
     };
-    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", {
+    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", {
           ref: "page-layout-tabs-list",
-          class: L({ "layout-computing": !p.value })
+          class: j({ "layout-computing": !m.value })
         }, [
-          (i(!0), c(N, null, R(T.value, (n) => (i(), c("li", {
-            key: `${n.key}-tab`
+          (s(!0), d(G, null, M(k.value, (i) => (s(), d("li", {
+            key: `${i.key}-tab`
           }, [
-            (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}`,
+            (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}`,
               tabindex: "0",
-              onClick: W((j) => l(n), ["prevent"]),
-              onKeydown: nt(W((j) => l(n), ["prevent"]), ["enter"])
+              onClick: le((z) => r(i), ["prevent"]),
+              onKeydown: Ae(le((z) => r(i), ["prevent"]), ["enter"])
             }), {
-              default: $(() => [
-                h(b.$slots, `tab-${n.key}`, { tab: n }, () => [
-                  A(P(n.label), 1)
+              default: T(() => [
+                E(g.$slots, `tab-${i.key}`, { tab: i }, () => [
+                  X(B(i.label), 1)
                 ], !0)
               ]),
               _: 2
             }, 1040, ["aria-current", "class", "data-testid", "onClick", "onKeydown"]))
           ]))), 128)),
-          t.tabs.length > o.value ? (i(), c("li", Gt, [
-            D(O, { "kpop-attributes": {
+          e.tabs.length > n.value ? (s(), d("li", ft, [
+            N(H, { "kpop-attributes": {
               placement: "bottom-end",
               popoverElementAttributes: { "data-testid": "tabs-overflow-dropdown-popover" }
             } }, {
-              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}`,
+              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}`,
                   item: {
-                    label: n.label,
-                    value: n.key,
-                    to: n.to
+                    label: i.label,
+                    value: i.key,
+                    to: i.to
                   },
-                  selected: n.active
+                  selected: i.active
                 }, {
-                  default: $(() => [
-                    h(b.$slots, `tab-${n.key}`, { tab: n }, () => [
-                      A(P(n.label), 1)
+                  default: T(() => [
+                    E(g.$slots, `tab-${i.key}`, { tab: i }, () => [
+                      X(B(i.label), 1)
                     ], !0)
                   ]),
                   _: 2
                 }, 1032, ["aria-current", "data-testid", "item", "selected"]))), 128))
               ]),
-              default: $(() => [
-                f("button", {
-                  "aria-label": v(s)("tabs.more_button.aria_label"),
-                  class: L(["tab-link", { active: d.value.find((n) => n.active) }]),
+              default: T(() => [
+                y("button", {
+                  "aria-label": f(l)("tabs.more_button.aria_label"),
+                  class: j(["tab-link", { active: h.value.find((i) => i.active) }]),
                   "data-testid": "tabs-overflow-dropdown-button"
                 }, [
-                  A(P(v(s)("tabs.more_button.label")) + " ", 1),
-                  D(v(Tt), {
+                  X(B(f(l)("tabs.more_button.label")) + " ", 1),
+                  N(f(Re), {
                     decorative: "",
-                    size: `var(--kui-icon-size-30, ${v(U)})`
+                    size: `var(--kui-icon-size-30, ${f(ae)})`
                   }, null, 8, ["size"])
-                ], 10, Zt)
+                ], 10, pt)
               ]),
               _: 3
             })
-          ])) : y("", !0)
+          ])) : b("", !0)
         ], 2),
-        p.value ? y("", !0) : (i(), c("div", Jt, [
-          (i(), c(N, null, R(3, (n) => D(V, {
-            key: `layout-loader-${n}`,
+        m.value ? b("", !0) : (s(), d("div", gt, [
+          (s(), d(G, null, M(3, (i) => N(U, {
+            key: `layout-loader-${i}`,
             height: "1",
             width: "5"
           })), 64))
@@ -243,190 +244,394 @@ const Ut = {
       ], 512);
     };
   }
-}), 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 = {
+}), 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 = {
   key: 0,
   class: "page-layout-header",
   "data-testid": "page-layout-header"
-}, Xt = { class: "page-header-container" }, te = { class: "page-header-start" }, ee = { class: "title-container" }, ae = {
+}, St = { class: "page-header-container" }, At = { class: "page-header-start" }, Dt = { class: "title-container" }, Rt = {
   key: 1,
   class: "page-layout-title-wrapper"
-}, oe = {
+}, Lt = {
   class: "page-layout-title",
   "data-testid": "page-layout-title"
-}, ne = ["aria-label"], se = {
+}, Pt = ["aria-label"], Kt = {
   key: 3,
   class: "title-after-container"
-}, ie = { class: "page-header-actions-container" }, le = {
+}, Bt = { class: "page-header-actions-container" }, Nt = {
   key: 0,
   class: "page-layout-aside-container",
   "data-testid": "page-layout-aside"
-}, ue = { class: "page-layout-content" }, re = /* @__PURE__ */ Z({
+}, Ot = { class: "page-layout-content" }, zt = /* @__PURE__ */ ue({
   __name: "PageLayout",
   props: {
     breadcrumbs: { default: () => [] },
     title: {},
     backTo: {},
     tabs: { default: () => [] },
+    anchors: { default: () => [] },
     pageShortcutData: {}
   },
-  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);
+  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);
           return;
         }
-        if (typeof s != "function") {
-          window.location.href = t.backTo;
+        if (typeof l != "function") {
+          window.location.href = e.backTo;
           return;
         }
-        await s(t.backTo);
+        await l(e.backTo);
       }
-    }, S = E(0), K = k(() => S.value > 0);
-    yt(tt, () => (S.value++, () => {
-      S.value--;
+    }, P = F(0), H = w(() => P.value > 0);
+    Fe(Ce, () => (P.value++, () => {
+      P.value--;
     }));
-    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 });
+    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 });
     };
-    ht(() => {
-      V.value?.();
+    He(() => {
+      i.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++);
+    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++);
     }, 500);
-    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 }]),
+    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 }]),
         "data-testid": "kong-ui-public-page-layout"
       }, [
-        K.value ? y("", !0) : (i(), c("div", Qt, [
-          f("div", Xt, [
-            f("div", te, [
-              t.breadcrumbs && t.breadcrumbs.length ? (i(), _(lt, {
+        H.value ? b("", !0) : (s(), d("div", Et, [
+          y("div", St, [
+            y("div", At, [
+              e.breadcrumbs && e.breadcrumbs.length ? (s(), D(Y, {
                 key: 0,
                 class: "header-breadcrumbs",
                 "data-testid": "page-layout-breadcrumbs",
                 "item-max-width": "25ch",
-                items: t.breadcrumbs
-              }, M({ _: 2 }, [
-                T.value ? {
+                items: e.breadcrumbs
+              }, ge({ _: 2 }, [
+                k.value ? {
                   name: "divider",
-                  fn: $(() => [
-                    D(v(_t), { decorative: "" })
+                  fn: T(() => [
+                    N(f(Ge), { decorative: "" })
                   ]),
                   key: "0"
                 } : void 0
-              ]), 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"),
+              ]), 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"),
                   class: "navigate-back",
                   "data-testid": "page-layout-navigate-back",
                   tabindex: "0",
-                  onClick: W(b, ["prevent"]),
-                  onKeydown: nt(W(b, ["prevent"]), ["enter"])
+                  onClick: le(O, ["prevent"]),
+                  onKeydown: Ae(le(O, ["prevent"]), ["enter"])
                 }), {
-                  default: $(() => [
-                    D(v(Ct), {
+                  default: T(() => [
+                    N(f(Ue), {
                       decorative: "",
-                      size: `var(--kui-icon-size-30, ${v(U)})`
+                      size: `var(--kui-icon-size-30, ${f(ae)})`
                     }, null, 8, ["size"])
                   ]),
                   _: 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)
+                }, 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)
                   ], !0)
-                ])) : y("", !0),
-                g.value ? (i(), c("div", {
-                  key: m.value,
+                ])) : b("", !0),
+                C.value ? (s(), d("div", {
+                  key: S.value,
                   class: "favorite-button-container"
                 }, [
-                  D(ut, {
+                  N(Z, {
                     placement: "right",
-                    text: w.value ? v(l)("favorite_button.remove_shortcut") : v(l)("favorite_button.save_shortcut")
+                    text: g.value ? f(r)("favorite_button.remove_shortcut") : f(r)("favorite_button.save_shortcut")
                   }, {
-                    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 }]),
+                    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 }]),
                         "data-testid": "page-layout-favorite-button",
                         type: "button",
-                        onClick: n
+                        onClick: z
                       }, [
-                        (i(), _(x(w.value ? v(It) : v(St)), {
+                        (s(), D(fe(g.value ? f(qe) : f(Ye)), {
                           decorative: "",
-                          size: `var(--kui-icon-size-30, ${v(U)})`
+                          size: `var(--kui-icon-size-30, ${f(ae)})`
                         }, null, 8, ["size"]))
-                      ], 10, ne)
+                      ], 10, Pt)
                     ]),
                     _: 1
                   }, 8, ["text"])
-                ])) : y("", !0),
-                C.$slots["title-after"] ? (i(), c("div", se, [
-                  h(C.$slots, "title-after", {}, void 0, !0)
-                ])) : y("", !0)
+                ])) : b("", !0),
+                K.$slots["title-after"] ? (s(), d("div", Kt, [
+                  E(K.$slots, "title-after", {}, void 0, !0)
+                ])) : b("", !0)
               ])
             ]),
-            f("div", ie, [
-              h(C.$slots, "actions", {}, void 0, !0),
-              Y[0] || (Y[0] = f("div", { "data-teleport-target": "ask-kai" }, null, -1))
+            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))
             ])
           ]),
-          o.value ? (i(), _(qt, {
+          n.value ? (s(), D(bt, {
             key: 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)
+            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)
               ])
             }))
-          ]), 1032, ["tabs"])) : y("", !0)
+          ]), 1032, ["tabs"])) : b("", !0)
         ])),
-        f("div", {
-          class: L(["page-layout-content-container", { "has-nested-page-layout": K.value }])
+        y("div", {
+          class: j(["page-layout-content-container", { "has-nested-page-layout": H.value }])
         }, [
-          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)
+          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)
           ])
         ], 2)
       ], 2);
     };
   }
-}), Ce = /* @__PURE__ */ J(re, [["__scopeId", "data-v-33657beb"]]), ce = {
+}), ea = /* @__PURE__ */ ce(zt, [["__scopeId", "data-v-b57669c9"]]), Ft = {
   key: 0,
   class: "about-card-description",
   "data-testid": "about-card-description"
-}, de = {
+}, Ht = {
   key: 1,
   class: "about-card-skeleton",
   "data-testid": "about-card-skeleton"
-}, ve = {
+}, xt = {
   key: 2,
   class: "about-card-rows",
   "data-testid": "about-card-rows"
-}, 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 = {
+}, 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 = {
   key: 3,
   class: "about-card-content",
   "data-testid": "about-card-content"
-}, ke = /* @__PURE__ */ Z({
+}, Yt = /* @__PURE__ */ ue({
   __name: "AboutCard",
   props: {
     title: { default: "" },
@@ -435,91 +640,91 @@ const Ut = {
     rows: { default: () => [] },
     isLoading: { type: Boolean, default: !1 }
   },
-  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, {
+  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, {
         class: "kong-ui-public-about-card",
-        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)
+        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)
             ], !0)
-          ])) : y("", !0),
-          t.isLoading ? (i(), c("div", de, [
-            (i(!0), c(N, null, R(s.value, (o) => (i(), _(l, {
-              key: o,
+          ])) : b("", !0),
+          e.isLoading ? (s(), d("div", Ht, [
+            (s(!0), d(G, null, M(l.value, (n) => (s(), D(r, {
+              key: n,
               height: "2",
               width: "100"
             }))), 128))
-          ])) : t.rows.length ? (i(), c("dl", ve, [
-            (i(!0), c(N, null, R(t.rows, (o) => (i(), c("div", {
-              key: o.key,
+          ])) : e.rows.length ? (s(), d("dl", xt, [
+            (s(!0), d(G, null, M(e.rows, (n) => (s(), d("div", {
+              key: n.key,
               class: "about-card-row",
-              "data-testid": `about-card-row-${o.key}`
+              "data-testid": `about-card-row-${n.key}`
             }, [
-              f("dt", be, [
-                h(e.$slots, `label-${o.key}`, { row: o }, () => [
-                  f("span", pe, P(o.label), 1)
+              y("dt", Mt, [
+                E(a.$slots, `label-${n.key}`, { row: n }, () => [
+                  y("span", Vt, B(n.label), 1)
                 ], !0),
-                o.tooltip ? (i(), _(r, {
+                n.tooltip ? (s(), D(c, {
                   key: 0,
-                  text: o.tooltip
+                  text: n.tooltip
                 }, {
-                  default: $(() => [
-                    f("button", {
-                      "aria-label": o.tooltip,
+                  default: T(() => [
+                    y("button", {
+                      "aria-label": n.tooltip,
                       class: "about-card-row-tooltip-trigger",
-                      "data-testid": `about-card-row-${o.key}-tooltip`,
+                      "data-testid": `about-card-row-${n.key}-tooltip`,
                       type: "button"
                     }, [
-                      D(v(Pt), {
-                        size: `var(--kui-icon-size-20, ${v(Et)})`
+                      N(f(Ze), {
+                        size: `var(--kui-icon-size-20, ${f(ot)})`
                       }, null, 8, ["size"])
-                    ], 8, ye)
+                    ], 8, jt)
                   ]),
                   _: 2
-                }, 1032, ["text"])) : y("", !0)
+                }, 1032, ["text"])) : b("", !0)
               ]),
-              f("dd", he, [
-                h(e.$slots, `row-${o.key}`, { row: o }, () => [
-                  f("span", ge, P(o.value), 1)
+              y("dd", Gt, [
+                E(a.$slots, `row-${n.key}`, { row: n }, () => [
+                  y("span", Ut, B(n.value), 1)
                 ], !0)
               ])
-            ], 8, fe))), 128))
-          ])) : y("", !0),
-          e.$slots.default ? (i(), c("div", me, [
-            h(e.$slots, "default", {}, void 0, !0)
-          ])) : y("", !0)
+            ], 8, Wt))), 128))
+          ])) : b("", !0),
+          a.$slots.default ? (s(), d("div", qt, [
+            E(a.$slots, "default", {}, void 0, !0)
+          ])) : b("", !0)
         ]),
         _: 2
       }, [
-        e.$slots.title || t.title ? {
+        a.$slots.title || e.title ? {
           name: "title",
-          fn: $(() => [
-            h(e.$slots, "title", {}, () => [
-              A(P(t.title), 1)
+          fn: T(() => [
+            E(a.$slots, "title", {}, () => [
+              X(B(e.title), 1)
             ], !0)
           ]),
           key: "0"
         } : void 0,
-        e.$slots.actions ? {
+        a.$slots.actions ? {
           name: "actions",
-          fn: $(() => [
-            h(e.$slots, "actions", {}, void 0, !0)
+          fn: T(() => [
+            E(a.$slots, "actions", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0
       ]), 1032, ["title", "title-tag"]);
     };
   }
-}), Ie = /* @__PURE__ */ J(ke, [["__scopeId", "data-v-0316c887"]]);
+}), ta = /* @__PURE__ */ ce(Yt, [["__scopeId", "data-v-0316c887"]]);
 export {
-  Ie as AboutCard,
-  Ht as NEW_APPEARANCE_INJECTION_KEY,
-  Ce as PageLayout
+  ta as AboutCard,
+  It as NEW_APPEARANCE_INJECTION_KEY,
+  ea as PageLayout
 };