@kong-ui-public/page-layout 1.2.4-pr.3950.d754871d7.0 → 1.3.0

package/dist/page-layout.es.js

@@ -1,4 +1,4 @@
-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 { shallowRef as Ce, shallowReadonly as Be, getCurrentScope as Ne, onScopeDispose as Oe, toValue as te, watch as re, computed as w, getCurrentInstance as ze, onMounted as be, defineComponent as ue, inject as ee, 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 N, unref as f, 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";
@@ -16,24 +16,24 @@ function at() {
     // Translation component <i18n-t>
   };
 }
-const be = {
+const me = {
   useI18n: at
 }, ot = "12px", ae = "16px", nt = "2px", Le = "16px";
-function st(e, l) {
-  return Ne() ? (Oe(e, l), !0) : !1;
+function it(e, r) {
+  return Ne() ? (Oe(e, r), !0) : !1;
 }
-const it = typeof window < "u" && typeof document < "u";
+const st = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 const J = () => {
 };
-function lt(e, l) {
+function lt(e, r) {
   function a(...o) {
-    return new Promise((r, c) => {
-      Promise.resolve(e(() => l.apply(this, o), {
-        fn: l,
+    return new Promise((l, c) => {
+      Promise.resolve(e(() => r.apply(this, o), {
+        fn: r,
         thisArg: this,
         args: o
-      })).then(r).catch(c);
+      })).then(l).catch(c);
     });
   }
   return "cancel" in e && Object.assign(a, {
@@ -42,18 +42,18 @@ function lt(e, l) {
     isPending: e.isPending
   }), a;
 }
-function rt(e, l = {}) {
-  let a, o, r = J, c = J;
-  const v = Ie(!1), n = (h) => {
-    clearTimeout(h), r(), r = J;
+function rt(e, r = {}) {
+  let a, o, l = J, c = J;
+  const v = Ce(!1), n = (h) => {
+    clearTimeout(h), l(), l = J;
   };
-  let m;
+  let y;
   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(() => {
+    const p = te(e), I = te(r.maxWait);
+    return a && n(a), p <= 0 || I !== void 0 && I <= 0 ? (o && (n(o), o = void 0), v.value = !1, Promise.resolve(h())) : (v.value = !0, new Promise((S, g) => {
+      l = r.rejectOnCancel ? g : S, c = S, y = h, 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(h());
       }, p);
     }));
@@ -65,53 +65,53 @@ function rt(e, l = {}) {
       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());
+        l = J, c = J, h(y());
       }
     },
     isPending: Be(v)
   });
 }
-function ut(e, l = 200, a = {}) {
-  return lt(rt(l, a), e);
+function ut(e, r = 200, a = {}) {
+  return lt(rt(r, a), e);
 }
-const ct = it ? window : void 0;
+const ct = st ? window : void 0;
 function Te(e) {
-  var l;
+  var r;
   const a = te(e);
-  return (l = a?.$el) !== null && l !== void 0 ? l : a;
+  return (r = a?.$el) !== null && r !== void 0 ? r : a;
 }
 // @__NO_SIDE_EFFECTS__
 function dt() {
-  const e = Ie(!1), l = ze();
-  return l && ye(() => {
+  const e = Ce(!1), r = ze();
+  return r && be(() => {
     e.value = !0;
-  }, l), e;
+  }, r), e;
 }
 // @__NO_SIDE_EFFECTS__
 function vt(e) {
-  const l = /* @__PURE__ */ dt();
-  return w(() => (l.value, !!e()));
+  const r = /* @__PURE__ */ dt();
+  return w(() => (r.value, !!e()));
 }
-function Pe(e, l, a = {}) {
-  const { window: o = ct, ...r } = a;
+function Pe(e, r, a = {}) {
+  const { window: o = ct, ...l } = a;
   let c;
   const v = /* @__PURE__ */ vt(() => o && "ResizeObserver" in o), n = () => {
     c && (c.disconnect(), c = void 0);
-  }, m = re(w(() => {
+  }, y = 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);
+      c = new ResizeObserver(r);
+      for (const p of h) p && c.observe(p, l);
     }
   }, {
     immediate: !0,
     flush: "post"
   }), k = () => {
-    n(), m();
+    n(), y();
   };
-  return st(k), {
+  return it(k), {
     isSupported: v,
     stop: k
   };
@@ -123,13 +123,13 @@ const ht = {
 }, ft = { key: 0 }, pt = ["aria-label"], gt = {
   key: 0,
   class: "layout-loader-container"
-}, yt = /* @__PURE__ */ ue({
+}, bt = /* @__PURE__ */ ue({
   __name: "PageLayoutTabs",
   props: {
     tabs: { default: () => [] }
   },
   setup(e) {
-    const { i18n: { t: l } } = be.useI18n(), a = De(), o = ee("app:navigateTo", null), r = (g) => {
+    const { i18n: { t: r } } = me.useI18n(), a = De(), o = ee("app:navigateTo", null), l = (g) => {
       if (typeof g.to != "string") {
         a.push(g.to);
         return;
@@ -139,91 +139,91 @@ const ht = {
         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 () => {
+    }, 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)), h = w(() => e.tabs.slice(n.value)), p = async () => {
       if (!c.value || !v.value)
         return;
-      m.value = !1, n.value = e.tabs.length, await pe();
+      y.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;
+        y.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;
+      y.value = !0;
     };
-    let C = null;
+    let I = null;
     const S = () => {
-      C && clearTimeout(C), C = setTimeout(() => {
+      I && clearTimeout(I), I = setTimeout(() => {
         p();
       }, 150);
     };
-    return ye(() => {
+    return be(() => {
       p(), Pe(c, S);
     }), Ee(() => {
-      C && clearTimeout(C);
+      I && clearTimeout(I);
     }), 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 i(), d("nav", ht, [
+        b("ul", {
           ref: "page-layout-tabs-list",
-          class: j({ "layout-computing": !m.value })
+          class: j({ "layout-computing": !y.value })
         }, [
-          (s(!0), d(G, null, M(k.value, (i) => (s(), d("li", {
-            key: `${i.key}-tab`
+          (i(!0), d(G, null, M(k.value, (s) => (i(), d("li", {
+            key: `${s.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(), 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}`,
               tabindex: "0",
-              onClick: le((z) => r(i), ["prevent"]),
-              onKeydown: Ae(le((z) => r(i), ["prevent"]), ["enter"])
+              onClick: le((z) => l(s), ["prevent"]),
+              onKeydown: Ae(le((z) => l(s), ["prevent"]), ["enter"])
             }), {
               default: T(() => [
-                E(g.$slots, `tab-${i.key}`, { tab: i }, () => [
-                  X(B(i.label), 1)
+                E(g.$slots, `tab-${s.key}`, { tab: s }, () => [
+                  X(B(s.label), 1)
                 ], !0)
               ]),
               _: 2
             }, 1040, ["aria-current", "class", "data-testid", "onClick", "onKeydown"]))
           ]))), 128)),
-          e.tabs.length > n.value ? (s(), d("li", ft, [
+          e.tabs.length > n.value ? (i(), d("li", ft, [
             N(H, { "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}`,
+                (i(!0), d(G, null, M(h.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}`,
                   item: {
-                    label: i.label,
-                    value: i.key,
-                    to: i.to
+                    label: s.label,
+                    value: s.key,
+                    to: s.to
                   },
-                  selected: i.active
+                  selected: s.active
                 }, {
                   default: T(() => [
-                    E(g.$slots, `tab-${i.key}`, { tab: i }, () => [
-                      X(B(i.label), 1)
+                    E(g.$slots, `tab-${s.key}`, { tab: s }, () => [
+                      X(B(s.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) }]),
+                b("button", {
+                  "aria-label": f(r)("tabs.more_button.aria_label"),
+                  class: j(["tab-link", { active: h.value.find((s) => s.active) }]),
                   "data-testid": "tabs-overflow-dropdown-button"
                 }, [
-                  X(B(f(l)("tabs.more_button.label")) + " ", 1),
+                  X(B(f(r)("tabs.more_button.label")) + " ", 1),
                   N(f(Re), {
                     decorative: "",
                     size: `var(--kui-icon-size-30, ${f(ae)})`
@@ -232,11 +232,11 @@ const ht = {
               ]),
               _: 3
             })
-          ])) : b("", !0)
+          ])) : m("", !0)
         ], 2),
-        m.value ? b("", !0) : (s(), d("div", gt, [
-          (s(), d(G, null, M(3, (i) => N(U, {
-            key: `layout-loader-${i}`,
+        y.value ? m("", !0) : (i(), d("div", gt, [
+          (i(), d(G, null, M(3, (s) => N(U, {
+            key: `layout-loader-${s}`,
             height: "1",
             width: "5"
           })), 64))
@@ -244,12 +244,12 @@ const ht = {
       ], 512);
     };
   }
-}), ce = (e, l) => {
+}), ce = (e, r) => {
   const a = e.__vccOpts || e;
-  for (const [o, r] of l)
-    a[o] = r;
+  for (const [o, l] of r)
+    a[o] = l;
   return a;
-}, bt = /* @__PURE__ */ ce(yt, [["__scopeId", "data-v-02891bc1"]]), mt = ["aria-label", "data-fit"], kt = {
+}, mt = /* @__PURE__ */ ce(bt, [["__scopeId", "data-v-02891bc1"]]), yt = ["aria-label", "data-fit"], kt = {
   key: 0,
   "aria-hidden": "true",
   class: "anchor-ellipsis",
@@ -265,18 +265,18 @@ const ht = {
     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);
+    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, _ = m.value;
-      if (r.value === "all")
+      const t = n.value, u = t.length, _ = y.value;
+      if (l.value === "all")
         return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
-      if (r.value === "hidden")
+      if (l.value === "hidden")
         return { anchors: [], hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
-      if (r.value === "active-only")
+      if (l.value === "active-only")
         return { anchors: t.slice(_, _ + 1), hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
-      const $ = r.value === "window-3" ? 3 : 2;
+      const $ = l.value === "window-3" ? 3 : 2;
       if (u <= $)
         return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
       const x = _ < $ ? 0 : _ >= u - $ ? u - $ : _ - 1;
@@ -286,7 +286,7 @@ const ht = {
         hasTrailingEllipsis: x + $ < u,
         hasOverflowDropdown: !0
       };
-    }), h = (t) => t.dataTestId ?? `page-layout-anchor-${t.key}`, p = F(null), C = () => {
+    }), h = (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);
@@ -298,24 +298,24 @@ const ht = {
     }, 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);
+        return u.querySelector(t.id) ?? u.querySelector(`#${CSS.escape(t.id)}`);
       } 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;
+    let s = 0;
     const z = async () => {
-      if (!n.value.length)
+      if (!n.value.length) {
+        l.value = "hidden";
         return;
-      const t = ++i;
-      if (r.value = "all", await pe(), t !== i || !a.value || !o.value)
+      }
+      const t = ++s;
+      if (l.value = "all", await pe(), t !== s || !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");
+      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");
     };
     let V = null;
     Pe(a, () => {
@@ -341,17 +341,17 @@ const ht = {
         scrollHeight: t ? t.scrollHeight : document.documentElement.scrollHeight
       };
     }, Q = () => {
-      const { top: t, scrollTop: u, clientHeight: _, scrollHeight: $ } = de(), x = g(), I = [];
+      const { top: t, scrollTop: u, clientHeight: _, scrollHeight: $ } = de(), x = g(), C = [];
       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 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));
       }
-      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;
+      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;
     };
     let ve = !1;
-    const me = () => {
+    const ye = () => {
       ve || (ve = !0, requestAnimationFrame(() => {
         ve = !1, Q() && z();
       }));
@@ -359,7 +359,7 @@ const ht = {
       const u = S(t);
       if (!u)
         return;
-      c.value = t.key, oe(t.key);
+      c.value = t.id, oe(t.id);
       const _ = t.offset ?? g(), $ = p.value;
       if ($) {
         $.scrollTo({ behavior: "smooth", top: u.getBoundingClientRect().top - $.getBoundingClientRect().top + $.scrollTop - _ });
@@ -369,53 +369,53 @@ const ht = {
     }, Ke = (t, u) => {
       u(), ke(t);
     };
-    return ye(() => {
-      p.value = C(), Z().addEventListener("scroll", me, { passive: !0 }), Q(), z(), requestAnimationFrame(() => {
+    return be(() => {
+      p.value = I(), Z().addEventListener("scroll", ye, { passive: !0 }), Q(), z(), requestAnimationFrame(() => {
         Q(), z();
       });
     }), Ee(() => {
-      Z().removeEventListener("scroll", me), L(), V && clearTimeout(V);
+      Z().removeEventListener("scroll", ye), L(), V && clearTimeout(V);
     }), re(() => e.anchors, () => {
-      e.anchors.some((t) => t.key === c.value) || (c.value = ""), Q(), z();
+      e.anchors.some((t) => t.id === c.value) || (c.value = ""), Q(), z();
     }, { deep: !0 }), (t, u) => {
       const _ = R("KButton"), $ = R("KDropdownItem"), x = R("KDropdown");
-      return s(), d("nav", {
+      return i(), d("nav", {
         ref: "page-layout-anchor-navigation",
-        "aria-label": f(l)("anchor_navigation.aria_label"),
+        "aria-label": f(r)("anchor_navigation.aria_label"),
         class: "page-layout-anchor-navigation",
-        "data-fit": r.value,
+        "data-fit": l.value,
         "data-testid": "page-layout-anchor-navigation"
       }, [
-        y("ul", {
+        b("ul", {
           ref: "page-layout-anchor-navigation-list",
-          class: j({ "layout-hidden": r.value === "hidden" })
+          class: j({ "layout-hidden": l.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`
+          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`
           }, [
-            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,
+            b("button", {
+              "aria-current": C.id === c.value ? "location" : void 0,
+              class: j(["anchor-link", { active: C.id === c.value }]),
+              "data-testid": h(C),
+              title: C.label,
               type: "button",
-              onClick: (A) => ke(I)
-            }, B(I.label), 11, wt)
+              onClick: (A) => ke(C)
+            }, B(C.label), 11, wt)
           ]))), 128)),
-          k.value.hasTrailingEllipsis ? (s(), d("li", Tt, " … ")) : b("", !0),
-          k.value.hasOverflowDropdown ? (s(), d("li", _t, [
+          k.value.hasTrailingEllipsis ? (i(), d("li", Tt, " … ")) : m("", !0),
+          k.value.hasOverflowDropdown ? (i(), 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,
+              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": h(A),
-                  selected: A.key === c.value,
-                  onClick: (ne) => Ke(A, I)
+                  selected: A.id === c.value,
+                  onClick: (ne) => Ke(A, C)
                 }, {
                   default: T(() => [
                     X(B(A.label), 1)
@@ -426,7 +426,7 @@ const ht = {
               default: T(() => [
                 N(_, {
                   appearance: "tertiary",
-                  "aria-label": f(l)("anchor_navigation.more_button.aria_label"),
+                  "aria-label": f(r)("anchor_navigation.more_button.aria_label"),
                   class: "anchor-overflow-button",
                   "data-testid": "anchor-navigation-overflow-dropdown-button",
                   icon: "",
@@ -443,12 +443,12 @@ const ht = {
               ]),
               _: 1
             })
-          ])) : b("", !0)
+          ])) : m("", !0)
         ], 2)
-      ], 8, mt);
+      ], 8, yt);
     };
   }
-}), Ct = /* @__PURE__ */ ce($t, [["__scopeId", "data-v-6ab1d1c1"]]), Ce = /* @__PURE__ */ Symbol("nested-page-layout-detection"), It = "page-layout:new-appearance", Et = {
+}), It = /* @__PURE__ */ ce($t, [["__scopeId", "data-v-f9770830"]]), Ie = /* @__PURE__ */ Symbol("nested-page-layout-detection"), Ct = "page-layout:new-appearance", Et = {
   key: 0,
   class: "page-layout-header",
   "data-testid": "page-layout-header"
@@ -476,29 +476,29 @@ const ht = {
     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 () => {
+    const r = ee("app:navigateTo", null), a = ee(Ct, null), o = ee("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(() => te(a) === !0), h = 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), O = async () => {
       if (e.backTo) {
         if (typeof e.backTo == "object") {
           c.push(e.backTo);
           return;
         }
-        if (typeof l != "function") {
+        if (typeof r != "function") {
           window.location.href = e.backTo;
           return;
         }
-        await l(e.backTo);
+        await r(e.backTo);
       }
     }, P = F(0), H = w(() => P.value > 0);
-    Fe(Ce, () => (P.value++, () => {
+    Fe(Ie, () => (P.value++, () => {
       P.value--;
     }));
-    const U = ee(Ce, null), i = F(null);
-    typeof U == "function" && (i.value = U());
+    const U = ee(Ie, null), s = F(null);
+    typeof U == "function" && (s.value = U());
     const z = () => {
       o.onFavoriteToggle({ ...e.pageShortcutData, path: e.pageShortcutData?.path || v.fullPath });
     };
     He(() => {
-      i.value?.();
+      s.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++);
@@ -507,14 +507,14 @@ const ht = {
       V();
     }, { immediate: !0, deep: !0 }), (K, q) => {
       const Y = R("KBreadcrumbs"), Z = R("KTooltip"), L = R("router-view");
-      return s(), d("div", {
+      return i(), d("div", {
         class: j(["kong-ui-public-page-layout", { "new-appearance": k.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, {
+        H.value ? m("", !0) : (i(), d("div", Et, [
+          b("div", St, [
+            b("div", At, [
+              e.breadcrumbs && e.breadcrumbs.length ? (i(), D(Y, {
                 key: 0,
                 class: "header-breadcrumbs",
                 "data-testid": "page-layout-breadcrumbs",
@@ -528,10 +528,10 @@ const ht = {
                   ]),
                   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"])) : 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": f(l)("back_button"),
                   class: "navigate-back",
                   "data-testid": "page-layout-navigate-back",
                   tabindex: "0",
@@ -545,29 +545,29 @@ const ht = {
                     }, null, 8, ["size"])
                   ]),
                   _: 1
-                }, 16, ["aria-label", "onKeydown"])) : b("", !0),
-                e.title || K.$slots.title ? (s(), d("span", Rt, [
+                }, 16, ["aria-label", "onKeydown"])) : m("", !0),
+                e.title || K.$slots.title ? (i(), d("span", Rt, [
                   E(K.$slots, "title", {}, () => [
-                    y("h1", Lt, B(e.title), 1)
+                    b("h1", Lt, B(e.title), 1)
                   ], !0)
-                ])) : b("", !0),
-                C.value ? (s(), d("div", {
+                ])) : m("", !0),
+                I.value ? (i(), d("div", {
                   key: S.value,
                   class: "favorite-button-container"
                 }, [
                   N(Z, {
                     placement: "right",
-                    text: g.value ? f(r)("favorite_button.remove_shortcut") : f(r)("favorite_button.save_shortcut")
+                    text: g.value ? f(l)("favorite_button.remove_shortcut") : f(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"),
+                      b("button", {
+                        "aria-label": g.value ? f(l)("favorite_button.remove_shortcut") : f(l)("favorite_button.save_shortcut"),
                         class: j(["favorite-button", { active: g.value }]),
                         "data-testid": "page-layout-favorite-button",
                         type: "button",
                         onClick: z
                       }, [
-                        (s(), D(fe(g.value ? f(qe) : f(Ye)), {
+                        (i(), D(fe(g.value ? f(qe) : f(Ye)), {
                           decorative: "",
                           size: `var(--kui-icon-size-30, ${f(ae)})`
                         }, null, 8, ["size"]))
@@ -575,22 +575,22 @@ const ht = {
                     ]),
                     _: 1
                   }, 8, ["text"])
-                ])) : b("", !0),
-                K.$slots["title-after"] ? (s(), d("div", Kt, [
+                ])) : m("", !0),
+                K.$slots["title-after"] ? (i(), d("div", Kt, [
                   E(K.$slots, "title-after", {}, void 0, !0)
-                ])) : b("", !0)
+                ])) : m("", !0)
               ])
             ]),
-            h.value ? (s(), D(Ct, {
+            h.value ? (i(), D(It, {
               key: 0,
               anchors: e.anchors
-            }, null, 8, ["anchors"])) : b("", !0),
-            y("div", Bt, [
+            }, null, 8, ["anchors"])) : m("", !0),
+            b("div", Bt, [
               E(K.$slots, "actions", {}, void 0, !0),
-              q[0] || (q[0] = y("div", { "data-teleport-target": "ask-kai" }, null, -1))
+              q[0] || (q[0] = b("div", { "data-teleport-target": "ask-kai" }, null, -1))
             ])
           ]),
-          n.value ? (s(), D(bt, {
+          n.value ? (i(), D(mt, {
             key: 0,
             tabs: e.tabs
           }, ge({ _: 2 }, [
@@ -600,16 +600,16 @@ const ht = {
                 E(K.$slots, `tab-${oe.key}`, xe(We(de)), void 0, !0)
               ])
             }))
-          ]), 1032, ["tabs"])) : b("", !0)
+          ]), 1032, ["tabs"])) : m("", !0)
         ])),
-        y("div", {
+        b("div", {
           class: j(["page-layout-content-container", { "has-nested-page-layout": H.value }])
         }, [
-          k.value && K.$slots.aside ? (s(), d("div", Nt, [
+          k.value && K.$slots.aside ? (i(), 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)
+          ])) : m("", !0),
+          b("div", Ot, [
+            n.value ? (i(), D(L, { key: 0 })) : E(K.$slots, "default", {}, void 0, !0, 1)
           ])
         ], 2)
       ], 2);
@@ -641,42 +641,42 @@ const ht = {
     isLoading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const l = w(() => e.rows.length || 4);
+    const r = w(() => e.rows.length || 4);
     return (a, o) => {
-      const r = R("KSkeletonBox"), c = R("KTooltip"), v = R("KCard");
-      return s(), D(v, {
+      const l = R("KSkeletonBox"), c = R("KTooltip"), v = R("KCard");
+      return i(), D(v, {
         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, [
+          a.$slots.description || e.description ? (i(), d("p", Ft, [
             E(a.$slots, "description", {}, () => [
               X(B(e.description), 1)
             ], !0)
-          ])) : b("", !0),
-          e.isLoading ? (s(), d("div", Ht, [
-            (s(!0), d(G, null, M(l.value, (n) => (s(), D(r, {
+          ])) : m("", !0),
+          e.isLoading ? (i(), d("div", Ht, [
+            (i(!0), d(G, null, M(r.value, (n) => (i(), D(l, {
               key: n,
               height: "2",
               width: "100"
             }))), 128))
-          ])) : e.rows.length ? (s(), d("dl", xt, [
-            (s(!0), d(G, null, M(e.rows, (n) => (s(), d("div", {
+          ])) : e.rows.length ? (i(), d("dl", xt, [
+            (i(!0), d(G, null, M(e.rows, (n) => (i(), d("div", {
               key: n.key,
               class: "about-card-row",
               "data-testid": `about-card-row-${n.key}`
             }, [
-              y("dt", Mt, [
+              b("dt", Mt, [
                 E(a.$slots, `label-${n.key}`, { row: n }, () => [
-                  y("span", Vt, B(n.label), 1)
+                  b("span", Vt, B(n.label), 1)
                 ], !0),
-                n.tooltip ? (s(), D(c, {
+                n.tooltip ? (i(), D(c, {
                   key: 0,
                   text: n.tooltip
                 }, {
                   default: T(() => [
-                    y("button", {
+                    b("button", {
                       "aria-label": n.tooltip,
                       class: "about-card-row-tooltip-trigger",
                       "data-testid": `about-card-row-${n.key}-tooltip`,
@@ -688,18 +688,18 @@ const ht = {
                     ], 8, jt)
                   ]),
                   _: 2
-                }, 1032, ["text"])) : b("", !0)
+                }, 1032, ["text"])) : m("", !0)
               ]),
-              y("dd", Gt, [
+              b("dd", Gt, [
                 E(a.$slots, `row-${n.key}`, { row: n }, () => [
-                  y("span", Ut, B(n.value), 1)
+                  b("span", Ut, B(n.value), 1)
                 ], !0)
               ])
             ], 8, Wt))), 128))
-          ])) : b("", !0),
-          a.$slots.default ? (s(), d("div", qt, [
+          ])) : m("", !0),
+          a.$slots.default ? (i(), d("div", qt, [
             E(a.$slots, "default", {}, void 0, !0)
-          ])) : b("", !0)
+          ])) : m("", !0)
         ]),
         _: 2
       }, [
@@ -725,6 +725,6 @@ const ht = {
 }), ta = /* @__PURE__ */ ce(Yt, [["__scopeId", "data-v-0316c887"]]);
 export {
   ta as AboutCard,
-  It as NEW_APPEARANCE_INJECTION_KEY,
+  Ct as NEW_APPEARANCE_INJECTION_KEY,
   ea as PageLayout
 };

package/dist/page-layout.umd.js

@@ -1 +1 @@
-(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router"),require("@kong-ui-public/i18n"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router","@kong-ui-public/i18n","@kong/icons"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C["kong-ui-public-page-layout"]={},C.Vue,C.VueRouter,C["kong-ui-public-i18n"],C.KongIcons))})(this,(function(C,e,q,J,L){"use strict";const re={back_button:"Go back",favorite_button:{save_shortcut:"Save page to shortcuts",remove_shortcut:"Remove page from shortcuts"},tabs:{more_button:{label:"More",aria_label:"More tabs"}},anchor_navigation:{aria_label:"Page sections",more_button:{aria_label:"More page sections"}}};function se(){const t=J.createI18n("en-us",re);return{i18n:t,i18nT:J.i18nTComponent(t)}}const G={useI18n:se},ce="12px",O="16px",de="2px",Z="16px";function ue(t,r){return e.getCurrentScope()?(e.onScopeDispose(t,r),!0):!1}const pe=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const A=()=>{};function me(t,r){function n(...a){return new Promise((s,d)=>{Promise.resolve(t(()=>r.apply(this,a),{fn:r,thisArg:this,args:a})).then(s).catch(d)})}return"cancel"in t&&Object.assign(n,{cancel:t.cancel,flush:t.flush,isPending:t.isPending}),n}function fe(t,r={}){let n,a,s=A,d=A;const u=e.shallowRef(!1),l=p=>{clearTimeout(p),s(),s=A};let h;return Object.assign(p=>{const m=e.toValue(t),b=e.toValue(r.maxWait);return n&&l(n),m<=0||b!==void 0&&b<=0?(a&&(l(a),a=void 0),u.value=!1,Promise.resolve(p())):(u.value=!0,new Promise((B,f)=>{s=r.rejectOnCancel?f:B,d=B,h=p,b&&!a&&(a=setTimeout(()=>{n&&l(n),a=void 0,u.value=!1,B(h())},b)),n=setTimeout(()=>{a&&l(a),a=void 0,u.value=!1,B(p())},m)}))},{cancel:()=>{n&&(l(n),n=void 0),a&&(l(a),a=void 0),u.value=!1,d=A},flush:()=>{if(u.value){n&&(clearTimeout(n),n=void 0),a&&(clearTimeout(a),a=void 0),u.value=!1;const p=d;s=A,d=A,p(h())}},isPending:e.shallowReadonly(u)})}function he(t,r=200,n={}){return me(fe(r,n),t)}const ge=pe?window:void 0;function X(t){var r;const n=e.toValue(t);return(r=n?.$el)!==null&&r!==void 0?r:n}function ke(){const t=e.shallowRef(!1),r=e.getCurrentInstance();return r&&e.onMounted(()=>{t.value=!0},r),t}function ye(t){const r=ke();return e.computed(()=>(r.value,!!t()))}function Q(t,r,n={}){const{window:a=ge,...s}=n;let d;const u=ye(()=>a&&"ResizeObserver"in a),l=()=>{d&&(d.disconnect(),d=void 0)},h=e.watch(e.computed(()=>{const p=e.toValue(t);return Array.isArray(p)?p.map(m=>X(m)):[X(p)]}),p=>{if(l(),u.value&&a){d=new ResizeObserver(r);for(const m of p)m&&d.observe(m,s)}},{immediate:!0,flush:"post"}),g=()=>{l(),h()};return ue(g),{isSupported:u,stop:g}}const be={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},we={key:0},Ce=["aria-label"],Be={key:0,class:"layout-loader-container"},Ee=e.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(t){const{i18n:{t:r}}=G.useI18n(),n=q.useRouter(),a=e.inject("app:navigateTo",null),s=f=>{if(typeof f.to!="string"){n.push(f.to);return}if(typeof a!="function"){window.location.href=f.to;return}a(f.to)},d=e.useTemplateRef("page-layout-tabs"),u=e.useTemplateRef("page-layout-tabs-list"),l=e.ref(t.tabs.length),h=e.ref(!1),g=e.computed(()=>t.tabs.slice(0,l.value)),p=e.computed(()=>t.tabs.slice(l.value)),m=async()=>{if(!d.value||!u.value)return;h.value=!1,l.value=t.tabs.length,await e.nextTick();const f=d.value?.getBoundingClientRect().width-parseInt(Z)*2;let $=u.value?.getBoundingClientRect().width;if(!f||!$){h.value=!0;return}const _=50;for(;$+_>f&&l.value>1;)l.value--,await e.nextTick(),$=u.value?.getBoundingClientRect().width||0;h.value=!0};let b=null;const B=()=>{b&&clearTimeout(b),b=setTimeout(()=>{m()},150)};return e.onMounted(()=>{m(),Q(d,B)}),e.onBeforeUnmount(()=>{b&&clearTimeout(b)}),e.watch(()=>t.tabs,()=>{m()},{deep:!0}),(f,$)=>{const _=e.resolveComponent("KDropdownItem"),V=e.resolveComponent("KDropdown"),P=e.resolveComponent("KSkeletonBox");return e.openBlock(),e.createElementBlock("nav",be,[e.createElementVNode("ul",{ref:"page-layout-tabs-list",class:e.normalizeClass({"layout-computing":!h.value})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,i=>(e.openBlock(),e.createElementBlock("li",{key:`${i.key}-tab`},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(typeof i.to=="string"?"a":"router-link"),e.mergeProps({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:e.withModifiers(S=>s(i),["prevent"]),onKeydown:e.withKeys(e.withModifiers(S=>s(i),["prevent"]),["enter"])}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,`tab-${i.key}`,{tab:i},()=>[e.createTextVNode(e.toDisplayString(i.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),t.tabs.length>l.value?(e.openBlock(),e.createElementBlock("li",we,[e.createVNode(V,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"tabs-overflow-dropdown-popover"}}},{items:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,i=>(e.openBlock(),e.createBlock(_,{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:i.label,value:i.key,to:i.to},selected:i.active},{default:e.withCtx(()=>[e.renderSlot(f.$slots,`tab-${i.key}`,{tab:i},()=>[e.createTextVNode(e.toDisplayString(i.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":e.unref(r)("tabs.more_button.aria_label"),class:e.normalizeClass(["tab-link",{active:p.value.find(i=>i.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[e.createTextVNode(e.toDisplayString(e.unref(r)("tabs.more_button.label"))+" ",1),e.createVNode(e.unref(L.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])],10,Ce)]),_:3})])):e.createCommentVNode("",!0)],2),h.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Be,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,i=>e.createVNode(P,{key:`layout-loader-${i}`,height:"1",width:"5"})),64))]))],512)}}}),M=(t,r)=>{const n=t.__vccOpts||t;for(const[a,s]of r)n[a]=s;return n},Te=M(Ee,[["__scopeId","data-v-02891bc1"]]),_e=["aria-label","data-fit"],Ne={key:0,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-leading-ellipsis"},$e=["aria-current","data-testid","title","onClick"],Se={key:1,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-trailing-ellipsis"},Ve={key:2},ee=140,te=22,U=16,Ie=M(e.defineComponent({__name:"PageLayoutAnchorNavigation",props:{anchors:{default:()=>[]}},setup(t){const{i18n:{t:r}}=G.useI18n(),n=e.useTemplateRef("page-layout-anchor-navigation"),a=e.useTemplateRef("page-layout-anchor-navigation-list"),s=e.ref("all"),d=e.ref(""),u=e.ref([]),l=e.computed(()=>t.anchors.filter(o=>u.value.includes(o.key))),h=e.computed(()=>{const o=l.value.findIndex(c=>c.key===d.value);return o===-1?0:o}),g=e.computed(()=>{const o=l.value,c=o.length,k=h.value;if(s.value==="all")return{anchors:o,hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!1};if(s.value==="hidden")return{anchors:[],hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!1};if(s.value==="active-only")return{anchors:o.slice(k,k+1),hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const y=s.value==="window-3"?3:2;if(c<=y)return{anchors:o,hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const I=k<y?0:k>=c-y?c-y:k-1;return{anchors:o.slice(I,I+y),hasLeadingEllipsis:I>0,hasTrailingEllipsis:I+y<c,hasOverflowDropdown:!0}}),p=o=>o.dataTestId??`page-layout-anchor-${o.key}`,m=e.ref(null),b=()=>{let o=n.value?.parentElement??null;for(;o;){const{overflowY:c}=getComputedStyle(o);if(c==="auto"||c==="scroll"||c==="overlay")return o;o=o.parentElement}return null},B=o=>{if(o.element)return o.element.isConnected?o.element:null;if(!o.selector)return null;const c=m.value??document;try{return c.querySelector(o.selector)}catch{return null}},f=()=>(n.value?.closest(".page-layout-header")?.getBoundingClientRect().height??0)+parseInt(Z,10),$=parseInt(O,10),_=parseInt(de,10),V=o=>o*ee+2*$+te+(o+2)*_+U,P=()=>ee+te+_+U;let i=0;const S=async()=>{if(!l.value.length)return;const o=++i;if(s.value="all",await e.nextTick(),o!==i||!n.value||!a.value)return;const c=n.value.getBoundingClientRect().width,k=a.value.getBoundingClientRect().width;c<=0||k<=0||k+U<=c||(V(3)<=c?s.value="window-3":V(2)<=c?s.value="window-2":P()<=c?s.value="active-only":s.value="hidden")};let R=null;Q(n,()=>{R&&clearTimeout(R),R=setTimeout(()=>{F(),S()},150)});let K=null,x=null;const z=()=>m.value??window,T=()=>{K=null,x&&(clearTimeout(x),x=null);const o=z();o.removeEventListener("scrollend",T),o.removeEventListener("wheel",T),o.removeEventListener("touchstart",T)},H=o=>{T(),K=o;const c=z();c.addEventListener("scrollend",T,{once:!0}),c.addEventListener("wheel",T,{passive:!0}),c.addEventListener("touchstart",T,{passive:!0}),x=setTimeout(T,1e3)},Y=()=>{const o=m.value;return{top:o?o.getBoundingClientRect().top:0,scrollTop:o?o.scrollTop:window.scrollY,clientHeight:o?o.clientHeight:window.innerHeight,scrollHeight:o?o.scrollHeight:document.documentElement.scrollHeight}},F=()=>{const{top:o,scrollTop:c,clientHeight:k,scrollHeight:y}=Y(),I=f(),w=[];let E=null,j=null;for(const D of t.anchors){const W=B(D);W&&(w.push(D.key),j=D.key,E??=D.key,W.getBoundingClientRect().top-o<=(D.offset??I)+8&&(E=D.key))}const ie=w.length!==u.value.length||w.some((D,W)=>D!==u.value[W]);return ie&&(u.value=w),K||(j&&c>0&&c+k>=y-2&&(E=j),d.value=E??""),ie};let v=!1;const ae=()=>{v||(v=!0,requestAnimationFrame(()=>{v=!1,F()&&S()}))},le=o=>{const c=B(o);if(!c)return;d.value=o.key,H(o.key);const k=o.offset??f(),y=m.value;if(y){y.scrollTo({behavior:"smooth",top:c.getBoundingClientRect().top-y.getBoundingClientRect().top+y.scrollTop-k});return}window.scrollTo({behavior:"smooth",top:c.getBoundingClientRect().top+window.scrollY-k})},et=(o,c)=>{c(),le(o)};return e.onMounted(()=>{m.value=b(),z().addEventListener("scroll",ae,{passive:!0}),F(),S(),requestAnimationFrame(()=>{F(),S()})}),e.onBeforeUnmount(()=>{z().removeEventListener("scroll",ae),T(),R&&clearTimeout(R)}),e.watch(()=>t.anchors,()=>{t.anchors.some(o=>o.key===d.value)||(d.value=""),F(),S()},{deep:!0}),(o,c)=>{const k=e.resolveComponent("KButton"),y=e.resolveComponent("KDropdownItem"),I=e.resolveComponent("KDropdown");return e.openBlock(),e.createElementBlock("nav",{ref:"page-layout-anchor-navigation","aria-label":e.unref(r)("anchor_navigation.aria_label"),class:"page-layout-anchor-navigation","data-fit":s.value,"data-testid":"page-layout-anchor-navigation"},[e.createElementVNode("ul",{ref:"page-layout-anchor-navigation-list",class:e.normalizeClass({"layout-hidden":s.value==="hidden"})},[g.value.hasLeadingEllipsis?(e.openBlock(),e.createElementBlock("li",Ne," … ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value.anchors,w=>(e.openBlock(),e.createElementBlock("li",{key:`${w.key}-anchor`},[e.createElementVNode("button",{"aria-current":w.key===d.value?"location":void 0,class:e.normalizeClass(["anchor-link",{active:w.key===d.value}]),"data-testid":p(w),title:w.label,type:"button",onClick:E=>le(w)},e.toDisplayString(w.label),11,$e)]))),128)),g.value.hasTrailingEllipsis?(e.openBlock(),e.createElementBlock("li",Se," … ")):e.createCommentVNode("",!0),g.value.hasOverflowDropdown?(e.openBlock(),e.createElementBlock("li",Ve,[e.createVNode(I,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"anchor-navigation-overflow-dropdown-popover"}}},{items:e.withCtx(({closeDropdown:w})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,E=>(e.openBlock(),e.createBlock(y,{key:`${E.key}-dropdown-item`,"aria-current":E.key===d.value?"location":void 0,"data-testid":p(E),selected:E.key===d.value,onClick:j=>et(E,w)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(E.label),1)]),_:2},1032,["aria-current","data-testid","selected","onClick"]))),128))]),default:e.withCtx(()=>[e.createVNode(k,{appearance:"tertiary","aria-label":e.unref(r)("anchor_navigation.more_button.aria_label"),class:"anchor-overflow-button","data-testid":"anchor-navigation-overflow-dropdown-button",icon:"",size:"small"},{default:e.withCtx(()=>[e.createVNode(e.unref(L.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])]),_:1},8,["aria-label"])]),_:1})])):e.createCommentVNode("",!0)],2)],8,_e)}}}),[["__scopeId","data-v-6ab1d1c1"]]),oe=Symbol("nested-page-layout-detection"),ne="page-layout:new-appearance",De={key:0,class:"page-layout-header","data-testid":"page-layout-header"},Le={class:"page-header-container"},Re={class:"page-header-start"},Ae={class:"title-container"},Pe={key:1,class:"page-layout-title-wrapper"},Ke={class:"page-layout-title","data-testid":"page-layout-title"},xe=["aria-label"],ze={key:3,class:"title-after-container"},Oe={class:"page-header-actions-container"},Fe={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},Me={class:"page-layout-content"},He=M(e.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},anchors:{default:()=>[]},pageShortcutData:{}},setup(t){const r=e.inject("app:navigateTo",null),n=e.inject(ne,null),a=e.inject("app:pageShortcutsContext",null),{i18n:{t:s}}=G.useI18n(),d=q.useRouter(),u=q.useRoute(),l=e.computed(()=>!!(t.tabs&&t.tabs.length)),h=e.computed(()=>typeof t.backTo=="string"),g=e.computed(()=>e.toValue(n)===!0),p=e.computed(()=>g.value&&!l.value&&!!(t.anchors&&t.anchors.length)),m=e.computed(()=>!!t.pageShortcutData&&!!t.pageShortcutData.entityType&&!!t.pageShortcutData.label),b=e.computed(()=>m.value&&!!a&&"onFavoriteToggle"in a&&typeof a.onFavoriteToggle=="function"),B=e.ref(0),f=e.computed(()=>!!a&&"isFavorite"in a&&typeof a.isFavorite=="function"&&a.isFavorite(t.pageShortcutData)===!0),$=async()=>{if(t.backTo){if(typeof t.backTo=="object"){d.push(t.backTo);return}if(typeof r!="function"){window.location.href=t.backTo;return}await r(t.backTo)}},_=e.ref(0),V=e.computed(()=>_.value>0);e.provide(oe,()=>(_.value++,()=>{_.value--}));const P=e.inject(oe,null),i=e.ref(null);typeof P=="function"&&(i.value=P());const S=()=>{a.onFavoriteToggle({...t.pageShortcutData,path:t.pageShortcutData?.path||u.fullPath})};e.onUnmounted(()=>{i.value?.()});const R=he(()=>{!V.value&&m.value&&a&&"onEntityPageVisit"in a&&typeof a.onEntityPageVisit=="function"&&(a.onEntityPageVisit({...t.pageShortcutData,path:t.pageShortcutData?.path||u?.fullPath}),B.value++)},500);return e.watch([()=>t.pageShortcutData,()=>u?.fullPath],()=>{R()},{immediate:!0,deep:!0}),(N,K)=>{const x=e.resolveComponent("KBreadcrumbs"),z=e.resolveComponent("KTooltip"),T=e.resolveComponent("router-view");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":g.value}]),"data-testid":"kong-ui-public-page-layout"},[V.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("div",Le,[e.createElementVNode("div",Re,[t.breadcrumbs&&t.breadcrumbs.length?(e.openBlock(),e.createBlock(x,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:t.breadcrumbs},e.createSlots({_:2},[g.value?{name:"divider",fn:e.withCtx(()=>[e.createVNode(e.unref(L.ChevronRightIcon),{decorative:""})]),key:"0"}:void 0]),1032,["items"])):e.createCommentVNode("",!0),e.createElementVNode("div",Ae,[t.backTo&&!g.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value?"a":"router-link"),e.mergeProps({key:0},h.value?{href:t.backTo}:{to:t.backTo},{"aria-label":e.unref(s)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:e.withModifiers($,["prevent"]),onKeydown:e.withKeys(e.withModifiers($,["prevent"]),["enter"])}),{default:e.withCtx(()=>[e.createVNode(e.unref(L.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):e.createCommentVNode("",!0),t.title||N.$slots.title?(e.openBlock(),e.createElementBlock("span",Pe,[e.renderSlot(N.$slots,"title",{},()=>[e.createElementVNode("h1",Ke,e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0),b.value?(e.openBlock(),e.createElementBlock("div",{key:B.value,class:"favorite-button-container"},[e.createVNode(z,{placement:"right",text:f.value?e.unref(s)("favorite_button.remove_shortcut"):e.unref(s)("favorite_button.save_shortcut")},{default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":f.value?e.unref(s)("favorite_button.remove_shortcut"):e.unref(s)("favorite_button.save_shortcut"),class:e.normalizeClass(["favorite-button",{active:f.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:S},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value?e.unref(L.StarFillIcon):e.unref(L.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"]))],10,xe)]),_:1},8,["text"])])):e.createCommentVNode("",!0),N.$slots["title-after"]?(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(N.$slots,"title-after",{},void 0,!0)])):e.createCommentVNode("",!0)])]),p.value?(e.openBlock(),e.createBlock(Ie,{key:0,anchors:t.anchors},null,8,["anchors"])):e.createCommentVNode("",!0),e.createElementVNode("div",Oe,[e.renderSlot(N.$slots,"actions",{},void 0,!0),K[0]||(K[0]=e.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),l.value?(e.openBlock(),e.createBlock(Te,{key:0,tabs:t.tabs},e.createSlots({_:2},[e.renderList(t.tabs,H=>({name:`tab-${H.key}`,fn:e.withCtx(Y=>[e.renderSlot(N.$slots,`tab-${H.key}`,e.normalizeProps(e.guardReactiveProps(Y)),void 0,!0)])}))]),1032,["tabs"])):e.createCommentVNode("",!0)])),e.createElementVNode("div",{class:e.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":V.value}])},[g.value&&N.$slots.aside?(e.openBlock(),e.createElementBlock("div",Fe,[e.renderSlot(N.$slots,"aside",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Me,[l.value?(e.openBlock(),e.createBlock(T,{key:0})):e.renderSlot(N.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-b57669c9"]]),je={key:0,class:"about-card-description","data-testid":"about-card-description"},We={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},qe={key:2,class:"about-card-rows","data-testid":"about-card-rows"},Ge=["data-testid"],Ue={class:"about-card-row-label"},Ye={class:"about-card-row-text"},ve=["aria-label","data-testid"],Je={class:"about-card-row-value"},Ze={class:"about-card-row-text"},Xe={key:3,class:"about-card-content","data-testid":"about-card-content"},Qe=M(e.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(t){const r=e.computed(()=>t.rows.length||4);return(n,a)=>{const s=e.resolveComponent("KSkeletonBox"),d=e.resolveComponent("KTooltip"),u=e.resolveComponent("KCard");return e.openBlock(),e.createBlock(u,{class:"kong-ui-public-about-card",title:t.title,"title-tag":t.titleTag},e.createSlots({default:e.withCtx(()=>[n.$slots.description||t.description?(e.openBlock(),e.createElementBlock("p",je,[e.renderSlot(n.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)],!0)])):e.createCommentVNode("",!0),t.isLoading?(e.openBlock(),e.createElementBlock("div",We,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,l=>(e.openBlock(),e.createBlock(s,{key:l,height:"2",width:"100"}))),128))])):t.rows.length?(e.openBlock(),e.createElementBlock("dl",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.rows,l=>(e.openBlock(),e.createElementBlock("div",{key:l.key,class:"about-card-row","data-testid":`about-card-row-${l.key}`},[e.createElementVNode("dt",Ue,[e.renderSlot(n.$slots,`label-${l.key}`,{row:l},()=>[e.createElementVNode("span",Ye,e.toDisplayString(l.label),1)],!0),l.tooltip?(e.openBlock(),e.createBlock(d,{key:0,text:l.tooltip},{default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":l.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${l.key}-tooltip`,type:"button"},[e.createVNode(e.unref(L.InfoIcon),{size:`var(--kui-icon-size-20, ${e.unref(ce)})`},null,8,["size"])],8,ve)]),_:2},1032,["text"])):e.createCommentVNode("",!0)]),e.createElementVNode("dd",Je,[e.renderSlot(n.$slots,`row-${l.key}`,{row:l},()=>[e.createElementVNode("span",Ze,e.toDisplayString(l.value),1)],!0)])],8,Ge))),128))])):e.createCommentVNode("",!0),n.$slots.default?(e.openBlock(),e.createElementBlock("div",Xe,[e.renderSlot(n.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:2},[n.$slots.title||t.title?{name:"title",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)]),key:"0"}:void 0,n.$slots.actions?{name:"actions",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-0316c887"]]);C.AboutCard=Qe,C.NEW_APPEARANCE_INJECTION_KEY=ne,C.PageLayout=He,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
+(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router"),require("@kong-ui-public/i18n"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router","@kong-ui-public/i18n","@kong/icons"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C["kong-ui-public-page-layout"]={},C.Vue,C.VueRouter,C["kong-ui-public-i18n"],C.KongIcons))})(this,(function(C,e,q,J,L){"use strict";const re={back_button:"Go back",favorite_button:{save_shortcut:"Save page to shortcuts",remove_shortcut:"Remove page from shortcuts"},tabs:{more_button:{label:"More",aria_label:"More tabs"}},anchor_navigation:{aria_label:"Page sections",more_button:{aria_label:"More page sections"}}};function se(){const t=J.createI18n("en-us",re);return{i18n:t,i18nT:J.i18nTComponent(t)}}const G={useI18n:se},ce="12px",O="16px",de="2px",Z="16px";function ue(t,s){return e.getCurrentScope()?(e.onScopeDispose(t,s),!0):!1}const pe=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const A=()=>{};function me(t,s){function n(...a){return new Promise((r,d)=>{Promise.resolve(t(()=>s.apply(this,a),{fn:s,thisArg:this,args:a})).then(r).catch(d)})}return"cancel"in t&&Object.assign(n,{cancel:t.cancel,flush:t.flush,isPending:t.isPending}),n}function fe(t,s={}){let n,a,r=A,d=A;const u=e.shallowRef(!1),l=p=>{clearTimeout(p),r(),r=A};let h;return Object.assign(p=>{const m=e.toValue(t),y=e.toValue(s.maxWait);return n&&l(n),m<=0||y!==void 0&&y<=0?(a&&(l(a),a=void 0),u.value=!1,Promise.resolve(p())):(u.value=!0,new Promise((B,f)=>{r=s.rejectOnCancel?f:B,d=B,h=p,y&&!a&&(a=setTimeout(()=>{n&&l(n),a=void 0,u.value=!1,B(h())},y)),n=setTimeout(()=>{a&&l(a),a=void 0,u.value=!1,B(p())},m)}))},{cancel:()=>{n&&(l(n),n=void 0),a&&(l(a),a=void 0),u.value=!1,d=A},flush:()=>{if(u.value){n&&(clearTimeout(n),n=void 0),a&&(clearTimeout(a),a=void 0),u.value=!1;const p=d;r=A,d=A,p(h())}},isPending:e.shallowReadonly(u)})}function he(t,s=200,n={}){return me(fe(s,n),t)}const ge=pe?window:void 0;function X(t){var s;const n=e.toValue(t);return(s=n?.$el)!==null&&s!==void 0?s:n}function ke(){const t=e.shallowRef(!1),s=e.getCurrentInstance();return s&&e.onMounted(()=>{t.value=!0},s),t}function be(t){const s=ke();return e.computed(()=>(s.value,!!t()))}function Q(t,s,n={}){const{window:a=ge,...r}=n;let d;const u=be(()=>a&&"ResizeObserver"in a),l=()=>{d&&(d.disconnect(),d=void 0)},h=e.watch(e.computed(()=>{const p=e.toValue(t);return Array.isArray(p)?p.map(m=>X(m)):[X(p)]}),p=>{if(l(),u.value&&a){d=new ResizeObserver(s);for(const m of p)m&&d.observe(m,r)}},{immediate:!0,flush:"post"}),g=()=>{l(),h()};return ue(g),{isSupported:u,stop:g}}const ye={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},we={key:0},Ce=["aria-label"],Be={key:0,class:"layout-loader-container"},Ee=e.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(t){const{i18n:{t:s}}=G.useI18n(),n=q.useRouter(),a=e.inject("app:navigateTo",null),r=f=>{if(typeof f.to!="string"){n.push(f.to);return}if(typeof a!="function"){window.location.href=f.to;return}a(f.to)},d=e.useTemplateRef("page-layout-tabs"),u=e.useTemplateRef("page-layout-tabs-list"),l=e.ref(t.tabs.length),h=e.ref(!1),g=e.computed(()=>t.tabs.slice(0,l.value)),p=e.computed(()=>t.tabs.slice(l.value)),m=async()=>{if(!d.value||!u.value)return;h.value=!1,l.value=t.tabs.length,await e.nextTick();const f=d.value?.getBoundingClientRect().width-parseInt(Z)*2;let $=u.value?.getBoundingClientRect().width;if(!f||!$){h.value=!0;return}const _=50;for(;$+_>f&&l.value>1;)l.value--,await e.nextTick(),$=u.value?.getBoundingClientRect().width||0;h.value=!0};let y=null;const B=()=>{y&&clearTimeout(y),y=setTimeout(()=>{m()},150)};return e.onMounted(()=>{m(),Q(d,B)}),e.onBeforeUnmount(()=>{y&&clearTimeout(y)}),e.watch(()=>t.tabs,()=>{m()},{deep:!0}),(f,$)=>{const _=e.resolveComponent("KDropdownItem"),I=e.resolveComponent("KDropdown"),P=e.resolveComponent("KSkeletonBox");return e.openBlock(),e.createElementBlock("nav",ye,[e.createElementVNode("ul",{ref:"page-layout-tabs-list",class:e.normalizeClass({"layout-computing":!h.value})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,i=>(e.openBlock(),e.createElementBlock("li",{key:`${i.key}-tab`},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(typeof i.to=="string"?"a":"router-link"),e.mergeProps({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:e.withModifiers(S=>r(i),["prevent"]),onKeydown:e.withKeys(e.withModifiers(S=>r(i),["prevent"]),["enter"])}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,`tab-${i.key}`,{tab:i},()=>[e.createTextVNode(e.toDisplayString(i.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),t.tabs.length>l.value?(e.openBlock(),e.createElementBlock("li",we,[e.createVNode(I,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"tabs-overflow-dropdown-popover"}}},{items:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,i=>(e.openBlock(),e.createBlock(_,{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:i.label,value:i.key,to:i.to},selected:i.active},{default:e.withCtx(()=>[e.renderSlot(f.$slots,`tab-${i.key}`,{tab:i},()=>[e.createTextVNode(e.toDisplayString(i.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":e.unref(s)("tabs.more_button.aria_label"),class:e.normalizeClass(["tab-link",{active:p.value.find(i=>i.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[e.createTextVNode(e.toDisplayString(e.unref(s)("tabs.more_button.label"))+" ",1),e.createVNode(e.unref(L.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])],10,Ce)]),_:3})])):e.createCommentVNode("",!0)],2),h.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Be,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,i=>e.createVNode(P,{key:`layout-loader-${i}`,height:"1",width:"5"})),64))]))],512)}}}),M=(t,s)=>{const n=t.__vccOpts||t;for(const[a,r]of s)n[a]=r;return n},Te=M(Ee,[["__scopeId","data-v-02891bc1"]]),_e=["aria-label","data-fit"],Ne={key:0,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-leading-ellipsis"},$e=["aria-current","data-testid","title","onClick"],Se={key:1,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-trailing-ellipsis"},Ie={key:2},ee=140,te=22,U=16,Ve=M(e.defineComponent({__name:"PageLayoutAnchorNavigation",props:{anchors:{default:()=>[]}},setup(t){const{i18n:{t:s}}=G.useI18n(),n=e.useTemplateRef("page-layout-anchor-navigation"),a=e.useTemplateRef("page-layout-anchor-navigation-list"),r=e.ref("all"),d=e.ref(""),u=e.ref([]),l=e.computed(()=>t.anchors.filter(o=>u.value.includes(o.id))),h=e.computed(()=>{const o=l.value.findIndex(c=>c.id===d.value);return o===-1?0:o}),g=e.computed(()=>{const o=l.value,c=o.length,k=h.value;if(r.value==="all")return{anchors:o,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:o.slice(k,k+1),hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const b=r.value==="window-3"?3:2;if(c<=b)return{anchors:o,hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const V=k<b?0:k>=c-b?c-b:k-1;return{anchors:o.slice(V,V+b),hasLeadingEllipsis:V>0,hasTrailingEllipsis:V+b<c,hasOverflowDropdown:!0}}),p=o=>o.dataTestId??`page-layout-anchor-${o.id.replace(/[^\w-]+/g,"-").replace(/^-+|-+$/g,"")}`,m=e.ref(null),y=()=>{let o=n.value?.parentElement??null;for(;o;){const{overflowY:c}=getComputedStyle(o);if(c==="auto"||c==="scroll"||c==="overlay")return o;o=o.parentElement}return null},B=o=>{if(o.element)return o.element.isConnected?o.element:null;const c=m.value??document;try{return c.querySelector(o.id)??c.querySelector(`#${CSS.escape(o.id)}`)}catch{return null}},f=()=>(n.value?.closest(".page-layout-header")?.getBoundingClientRect().height??0)+parseInt(Z,10),$=parseInt(O,10),_=parseInt(de,10),I=o=>o*ee+2*$+te+(o+2)*_+U,P=()=>ee+te+_+U;let i=0;const S=async()=>{if(!l.value.length){r.value="hidden";return}const o=++i;if(r.value="all",await e.nextTick(),o!==i||!n.value||!a.value)return;const c=n.value.getBoundingClientRect().width,k=a.value.getBoundingClientRect().width;c<=0||k<=0||k+U<=c||(I(3)<=c?r.value="window-3":I(2)<=c?r.value="window-2":P()<=c?r.value="active-only":r.value="hidden")};let R=null;Q(n,()=>{R&&clearTimeout(R),R=setTimeout(()=>{F(),S()},150)});let K=null,x=null;const z=()=>m.value??window,T=()=>{K=null,x&&(clearTimeout(x),x=null);const o=z();o.removeEventListener("scrollend",T),o.removeEventListener("wheel",T),o.removeEventListener("touchstart",T)},H=o=>{T(),K=o;const c=z();c.addEventListener("scrollend",T,{once:!0}),c.addEventListener("wheel",T,{passive:!0}),c.addEventListener("touchstart",T,{passive:!0}),x=setTimeout(T,1e3)},v=()=>{const o=m.value;return{top:o?o.getBoundingClientRect().top:0,scrollTop:o?o.scrollTop:window.scrollY,clientHeight:o?o.clientHeight:window.innerHeight,scrollHeight:o?o.scrollHeight:document.documentElement.scrollHeight}},F=()=>{const{top:o,scrollTop:c,clientHeight:k,scrollHeight:b}=v(),V=f(),w=[];let E=null,j=null;for(const D of t.anchors){const W=B(D);W&&(w.push(D.id),j=D.id,E??=D.id,W.getBoundingClientRect().top-o<=(D.offset??V)+8&&(E=D.id))}const ie=w.length!==u.value.length||w.some((D,W)=>D!==u.value[W]);return ie&&(u.value=w),K||(j&&c>0&&c+k>=b-2&&(E=j),d.value=E??""),ie};let Y=!1;const ae=()=>{Y||(Y=!0,requestAnimationFrame(()=>{Y=!1,F()&&S()}))},le=o=>{const c=B(o);if(!c)return;d.value=o.id,H(o.id);const k=o.offset??f(),b=m.value;if(b){b.scrollTo({behavior:"smooth",top:c.getBoundingClientRect().top-b.getBoundingClientRect().top+b.scrollTop-k});return}window.scrollTo({behavior:"smooth",top:c.getBoundingClientRect().top+window.scrollY-k})},et=(o,c)=>{c(),le(o)};return e.onMounted(()=>{m.value=y(),z().addEventListener("scroll",ae,{passive:!0}),F(),S(),requestAnimationFrame(()=>{F(),S()})}),e.onBeforeUnmount(()=>{z().removeEventListener("scroll",ae),T(),R&&clearTimeout(R)}),e.watch(()=>t.anchors,()=>{t.anchors.some(o=>o.id===d.value)||(d.value=""),F(),S()},{deep:!0}),(o,c)=>{const k=e.resolveComponent("KButton"),b=e.resolveComponent("KDropdownItem"),V=e.resolveComponent("KDropdown");return e.openBlock(),e.createElementBlock("nav",{ref:"page-layout-anchor-navigation","aria-label":e.unref(s)("anchor_navigation.aria_label"),class:"page-layout-anchor-navigation","data-fit":r.value,"data-testid":"page-layout-anchor-navigation"},[e.createElementVNode("ul",{ref:"page-layout-anchor-navigation-list",class:e.normalizeClass({"layout-hidden":r.value==="hidden"})},[g.value.hasLeadingEllipsis?(e.openBlock(),e.createElementBlock("li",Ne," … ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value.anchors,w=>(e.openBlock(),e.createElementBlock("li",{key:`${w.id}-anchor`},[e.createElementVNode("button",{"aria-current":w.id===d.value?"location":void 0,class:e.normalizeClass(["anchor-link",{active:w.id===d.value}]),"data-testid":p(w),title:w.label,type:"button",onClick:E=>le(w)},e.toDisplayString(w.label),11,$e)]))),128)),g.value.hasTrailingEllipsis?(e.openBlock(),e.createElementBlock("li",Se," … ")):e.createCommentVNode("",!0),g.value.hasOverflowDropdown?(e.openBlock(),e.createElementBlock("li",Ie,[e.createVNode(V,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"anchor-navigation-overflow-dropdown-popover"}}},{items:e.withCtx(({closeDropdown:w})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,E=>(e.openBlock(),e.createBlock(b,{key:`${E.id}-dropdown-item`,"aria-current":E.id===d.value?"location":void 0,"data-testid":p(E),selected:E.id===d.value,onClick:j=>et(E,w)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(E.label),1)]),_:2},1032,["aria-current","data-testid","selected","onClick"]))),128))]),default:e.withCtx(()=>[e.createVNode(k,{appearance:"tertiary","aria-label":e.unref(s)("anchor_navigation.more_button.aria_label"),class:"anchor-overflow-button","data-testid":"anchor-navigation-overflow-dropdown-button",icon:"",size:"small"},{default:e.withCtx(()=>[e.createVNode(e.unref(L.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])]),_:1},8,["aria-label"])]),_:1})])):e.createCommentVNode("",!0)],2)],8,_e)}}}),[["__scopeId","data-v-f9770830"]]),oe=Symbol("nested-page-layout-detection"),ne="page-layout:new-appearance",De={key:0,class:"page-layout-header","data-testid":"page-layout-header"},Le={class:"page-header-container"},Re={class:"page-header-start"},Ae={class:"title-container"},Pe={key:1,class:"page-layout-title-wrapper"},Ke={class:"page-layout-title","data-testid":"page-layout-title"},xe=["aria-label"],ze={key:3,class:"title-after-container"},Oe={class:"page-header-actions-container"},Fe={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},Me={class:"page-layout-content"},He=M(e.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},anchors:{default:()=>[]},pageShortcutData:{}},setup(t){const s=e.inject("app:navigateTo",null),n=e.inject(ne,null),a=e.inject("app:pageShortcutsContext",null),{i18n:{t:r}}=G.useI18n(),d=q.useRouter(),u=q.useRoute(),l=e.computed(()=>!!(t.tabs&&t.tabs.length)),h=e.computed(()=>typeof t.backTo=="string"),g=e.computed(()=>e.toValue(n)===!0),p=e.computed(()=>g.value&&!l.value&&!!(t.anchors&&t.anchors.length)),m=e.computed(()=>!!t.pageShortcutData&&!!t.pageShortcutData.entityType&&!!t.pageShortcutData.label),y=e.computed(()=>m.value&&!!a&&"onFavoriteToggle"in a&&typeof a.onFavoriteToggle=="function"),B=e.ref(0),f=e.computed(()=>!!a&&"isFavorite"in a&&typeof a.isFavorite=="function"&&a.isFavorite(t.pageShortcutData)===!0),$=async()=>{if(t.backTo){if(typeof t.backTo=="object"){d.push(t.backTo);return}if(typeof s!="function"){window.location.href=t.backTo;return}await s(t.backTo)}},_=e.ref(0),I=e.computed(()=>_.value>0);e.provide(oe,()=>(_.value++,()=>{_.value--}));const P=e.inject(oe,null),i=e.ref(null);typeof P=="function"&&(i.value=P());const S=()=>{a.onFavoriteToggle({...t.pageShortcutData,path:t.pageShortcutData?.path||u.fullPath})};e.onUnmounted(()=>{i.value?.()});const R=he(()=>{!I.value&&m.value&&a&&"onEntityPageVisit"in a&&typeof a.onEntityPageVisit=="function"&&(a.onEntityPageVisit({...t.pageShortcutData,path:t.pageShortcutData?.path||u?.fullPath}),B.value++)},500);return e.watch([()=>t.pageShortcutData,()=>u?.fullPath],()=>{R()},{immediate:!0,deep:!0}),(N,K)=>{const x=e.resolveComponent("KBreadcrumbs"),z=e.resolveComponent("KTooltip"),T=e.resolveComponent("router-view");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":g.value}]),"data-testid":"kong-ui-public-page-layout"},[I.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("div",Le,[e.createElementVNode("div",Re,[t.breadcrumbs&&t.breadcrumbs.length?(e.openBlock(),e.createBlock(x,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:t.breadcrumbs},e.createSlots({_:2},[g.value?{name:"divider",fn:e.withCtx(()=>[e.createVNode(e.unref(L.ChevronRightIcon),{decorative:""})]),key:"0"}:void 0]),1032,["items"])):e.createCommentVNode("",!0),e.createElementVNode("div",Ae,[t.backTo&&!g.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value?"a":"router-link"),e.mergeProps({key:0},h.value?{href:t.backTo}:{to:t.backTo},{"aria-label":e.unref(r)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:e.withModifiers($,["prevent"]),onKeydown:e.withKeys(e.withModifiers($,["prevent"]),["enter"])}),{default:e.withCtx(()=>[e.createVNode(e.unref(L.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):e.createCommentVNode("",!0),t.title||N.$slots.title?(e.openBlock(),e.createElementBlock("span",Pe,[e.renderSlot(N.$slots,"title",{},()=>[e.createElementVNode("h1",Ke,e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createElementBlock("div",{key:B.value,class:"favorite-button-container"},[e.createVNode(z,{placement:"right",text:f.value?e.unref(r)("favorite_button.remove_shortcut"):e.unref(r)("favorite_button.save_shortcut")},{default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":f.value?e.unref(r)("favorite_button.remove_shortcut"):e.unref(r)("favorite_button.save_shortcut"),class:e.normalizeClass(["favorite-button",{active:f.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:S},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value?e.unref(L.StarFillIcon):e.unref(L.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(O)})`},null,8,["size"]))],10,xe)]),_:1},8,["text"])])):e.createCommentVNode("",!0),N.$slots["title-after"]?(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(N.$slots,"title-after",{},void 0,!0)])):e.createCommentVNode("",!0)])]),p.value?(e.openBlock(),e.createBlock(Ve,{key:0,anchors:t.anchors},null,8,["anchors"])):e.createCommentVNode("",!0),e.createElementVNode("div",Oe,[e.renderSlot(N.$slots,"actions",{},void 0,!0),K[0]||(K[0]=e.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),l.value?(e.openBlock(),e.createBlock(Te,{key:0,tabs:t.tabs},e.createSlots({_:2},[e.renderList(t.tabs,H=>({name:`tab-${H.key}`,fn:e.withCtx(v=>[e.renderSlot(N.$slots,`tab-${H.key}`,e.normalizeProps(e.guardReactiveProps(v)),void 0,!0)])}))]),1032,["tabs"])):e.createCommentVNode("",!0)])),e.createElementVNode("div",{class:e.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":I.value}])},[g.value&&N.$slots.aside?(e.openBlock(),e.createElementBlock("div",Fe,[e.renderSlot(N.$slots,"aside",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Me,[l.value?(e.openBlock(),e.createBlock(T,{key:0})):e.renderSlot(N.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-b57669c9"]]),je={key:0,class:"about-card-description","data-testid":"about-card-description"},We={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},qe={key:2,class:"about-card-rows","data-testid":"about-card-rows"},Ge=["data-testid"],Ue={class:"about-card-row-label"},ve={class:"about-card-row-text"},Ye=["aria-label","data-testid"],Je={class:"about-card-row-value"},Ze={class:"about-card-row-text"},Xe={key:3,class:"about-card-content","data-testid":"about-card-content"},Qe=M(e.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(t){const s=e.computed(()=>t.rows.length||4);return(n,a)=>{const r=e.resolveComponent("KSkeletonBox"),d=e.resolveComponent("KTooltip"),u=e.resolveComponent("KCard");return e.openBlock(),e.createBlock(u,{class:"kong-ui-public-about-card",title:t.title,"title-tag":t.titleTag},e.createSlots({default:e.withCtx(()=>[n.$slots.description||t.description?(e.openBlock(),e.createElementBlock("p",je,[e.renderSlot(n.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)],!0)])):e.createCommentVNode("",!0),t.isLoading?(e.openBlock(),e.createElementBlock("div",We,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,l=>(e.openBlock(),e.createBlock(r,{key:l,height:"2",width:"100"}))),128))])):t.rows.length?(e.openBlock(),e.createElementBlock("dl",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.rows,l=>(e.openBlock(),e.createElementBlock("div",{key:l.key,class:"about-card-row","data-testid":`about-card-row-${l.key}`},[e.createElementVNode("dt",Ue,[e.renderSlot(n.$slots,`label-${l.key}`,{row:l},()=>[e.createElementVNode("span",ve,e.toDisplayString(l.label),1)],!0),l.tooltip?(e.openBlock(),e.createBlock(d,{key:0,text:l.tooltip},{default:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":l.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${l.key}-tooltip`,type:"button"},[e.createVNode(e.unref(L.InfoIcon),{size:`var(--kui-icon-size-20, ${e.unref(ce)})`},null,8,["size"])],8,Ye)]),_:2},1032,["text"])):e.createCommentVNode("",!0)]),e.createElementVNode("dd",Je,[e.renderSlot(n.$slots,`row-${l.key}`,{row:l},()=>[e.createElementVNode("span",Ze,e.toDisplayString(l.value),1)],!0)])],8,Ge))),128))])):e.createCommentVNode("",!0),n.$slots.default?(e.openBlock(),e.createElementBlock("div",Xe,[e.renderSlot(n.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:2},[n.$slots.title||t.title?{name:"title",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)]),key:"0"}:void 0,n.$slots.actions?{name:"actions",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-0316c887"]]);C.AboutCard=Qe,C.NEW_APPEARANCE_INJECTION_KEY=ne,C.PageLayout=He,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -1 +1 @@
-.page-layout-tabs[data-v-02891bc1]{align-items:flex-end;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);box-sizing:border-box;display:flex;height:34px;overflow-x:clip;padding:0 16px;padding:var(--kui-space-0, 0px) var(--kui-space-60, 16px);position:relative;width:100%}.page-layout-tabs a[data-v-02891bc1],.page-layout-tabs button[data-v-02891bc1]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;color:inherit;cursor:pointer;font:inherit;outline:none;padding:0;padding:var(--kui-space-0, 0px);text-decoration:none}.page-layout-tabs ul[data-v-02891bc1]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);margin-bottom:-1px;margin-bottom:calc(-1 * var(--kui-border-width-10, 1px));max-width:100%;padding:0;padding:var(--kui-space-0, 0px)}.page-layout-tabs ul.layout-computing[data-v-02891bc1]{height:0;visibility:hidden}.page-layout-tabs ul li[data-v-02891bc1]{display:flex}.page-layout-tabs ul li .tab-link[data-v-02891bc1]{align-items:center;border-bottom:2px solid rgba(0,0,0,0);border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-transparent, rgba(0, 0, 0, 0));border-radius:4px 4px 0 0;border-radius:var(--kui-border-radius-20, 4px) var(--kui-border-radius-20, 4px) var(--kui-border-radius-0, 0px) var(--kui-border-radius-0, 0px);color:#52596e;color:var(--kui-color-text-neutral-strong, #52596e);cursor:pointer;display:flex;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:6px;gap:var(--kui-space-30, 6px);line-height:20px;line-height:var(--kui-line-height-30, 20px);padding:6px 0;padding:var(--kui-space-30, 6px) var(--kui-space-0, 0px);text-decoration:none;transition:color .2s ease-in,border-color .2s ease-in,font-weight .2s ease-in;white-space:nowrap}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:hover{border-bottom:2px solid #afb7c5;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-neutral-weak, #afb7c5);color:#0d0e14;color:var(--kui-color-text, #0d0e14);text-decoration:none}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2));text-decoration:none}.page-layout-tabs ul li .tab-link.active[data-v-02891bc1]{border-bottom:2px solid #0044f4;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-primary, #0044f4);color:#0044f4!important;color:var(--kui-color-text-primary, #0044f4)!important;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);text-decoration:none}.page-layout-tabs .layout-loader-container[data-v-02891bc1]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);height:34px;inset:0 0 0 16px;left:var(--kui-space-60, 16px);position:absolute}.page-layout-anchor-navigation[data-v-6ab1d1c1]{display:flex;flex:1 1 0;justify-content:center;min-width:0;overflow-x:clip}.page-layout-anchor-navigation ul[data-v-6ab1d1c1]{align-items:center;display:flex;flex-shrink:0;gap:2px;gap:var(--kui-space-10, 2px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);padding:0;padding:var(--kui-space-0, 0px)}.page-layout-anchor-navigation ul.layout-hidden[data-v-6ab1d1c1]{display:none}.page-layout-anchor-navigation ul li[data-v-6ab1d1c1]{display:flex}.page-layout-anchor-navigation .anchor-link[data-v-6ab1d1c1]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;font-family:inherit;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);line-height:16px;line-height:var(--kui-line-height-20, 16px);max-width:140px;outline:none;overflow:hidden;padding:4px 8px;padding:var(--kui-space-20, 4px) var(--kui-space-40, 8px);text-overflow:ellipsis;transition:background-color .2s ease-in,color .2s ease-in;transition:background-color var(--kui-animation-duration-20, .2s) ease-in,color var(--kui-animation-duration-20, .2s) ease-in;white-space:nowrap}.page-layout-anchor-navigation .anchor-link[data-v-6ab1d1c1]:hover{background-color:#f9fafb;background-color:var(--kui-color-background-neutral-weakest, #f9fafb);color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.page-layout-anchor-navigation .anchor-link[data-v-6ab1d1c1]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.page-layout-anchor-navigation .anchor-link.active[data-v-6ab1d1c1]{background-color:#0044f4;background-color:var(--kui-color-brand, #0044f4);color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.page-layout-anchor-navigation .anchor-ellipsis[data-v-6ab1d1c1]{align-items:center;color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5);font-size:12px;font-size:var(--kui-font-size-20, 12px);justify-content:center;line-height:16px;line-height:var(--kui-line-height-20, 16px);-webkit-user-select:none;user-select:none;width:16px;width:var(--kui-icon-size-30, 16px)}.page-layout-anchor-navigation .anchor-overflow-button[data-v-6ab1d1c1]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout[data-v-b57669c9]{box-sizing:border-box;container-name:page-layout;container-type:inline-size;font-family:Inter,Roboto,Helvetica,sans-serif;font-family:var(--kui-font-family-text, "Inter", Roboto, Helvetica, sans-serif)}.kong-ui-public-page-layout .page-layout-header[data-v-b57669c9]{background-color:#fff;background-color:var(--kui-color-background, #ffffff);display:flex;flex-direction:column;gap:8px;gap:var(--kui-space-40, 8px)}.kong-ui-public-page-layout .page-layout-header .page-header-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:6px;gap:var(--kui-space-30, 6px);justify-content:space-between;padding:16px 16px 0;padding:var(--kui-space-60, 16px) var(--kui-space-60, 16px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start[data-v-b57669c9]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9] .breadcrumbs-item-container:first-child .breadcrumbs-item{padding-left:0;padding-left:var(--kui-space-0, 0px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9] .breadcrumbs-item-container .breadcrumbs-item.active .breadcrumbs-text{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:4px;gap:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;outline:none;padding:4px;padding:var(--kui-space-20, 4px);transition:background-color .2s ease-in,color .2s ease-in}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]:hover{color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]{min-width:0;overflow:hidden}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]>*{color:#0d0e14;color:var(--kui-color-text, #0d0e14);font-size:18px;font-size:var(--kui-font-size-50, 18px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);line-height:24px;line-height:var(--kui-line-height-40, 24px);margin:0;margin:var(--kui-space-0, 0px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container[data-v-b57669c9]{align-self:center;display:flex;margin-left:4px;margin-left:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button[data-v-b57669c9]{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5);padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button[data-v-b57669c9]:hover{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button.active[data-v-b57669c9]{color:#ffc400;color:var(--kui-color-text-warning-weak, #ffc400)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .title-after-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:6px;gap:var(--kui-space-30, 6px);margin-left:4px;margin-left:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-actions-container[data-v-b57669c9]{align-items:center;display:flex;gap:6px;gap:var(--kui-space-30, 6px)}.kong-ui-public-page-layout .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-b57669c9]{border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);padding:16px;padding:var(--kui-space-60, 16px)}.kong-ui-public-page-layout.new-appearance .page-layout-header[data-v-b57669c9]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-b57669c9]{align-items:center;padding:8px 16px 0;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start[data-v-b57669c9]{align-items:center;display:flex;gap:4px;gap:var(--kui-space-20, 4px)}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container[data-v-b57669c9]{align-items:center;min-width:0}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]{color:#0d0e14;color:var(--kui-color-text, #0d0e14);font-size:14px;font-size:var(--kui-font-size-30, 14px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);line-height:20px;line-height:var(--kui-line-height-30, 20px);max-width:40ch;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]>*{font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);max-width:40ch}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-b57669c9]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-b57669c9]{box-sizing:border-box;height:44px;padding:8px 16px;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-content-container[data-v-b57669c9]{background-color:#f9fafb;background-color:var(--kui-color-background-neutral-weakest, #f9fafb);display:flex;flex-direction:column-reverse;gap:12px;gap:var(--kui-space-50, 12px);padding:16px;padding:var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-content-container.has-nested-page-layout[data-v-b57669c9]{padding:0;padding:var(--kui-space-0, 0px)}@container page-layout (min-width: 1024px){.kong-ui-public-page-layout .page-layout-content-container[data-v-b57669c9]{flex-direction:row-reverse;gap:8px;gap:var(--kui-space-40, 8px)}}.kong-ui-public-page-layout .page-layout-content-container .page-layout-content[data-v-b57669c9]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px);min-width:0;width:100%}.kong-ui-public-page-layout .page-layout-content-container .page-layout-aside-container[data-v-b57669c9]{display:flex;flex-direction:column;gap:8px;gap:var(--kui-space-40, 8px)}@container page-layout (min-width: 1024px){.kong-ui-public-page-layout .page-layout-content-container .page-layout-aside-container[data-v-b57669c9]{flex-shrink:0;width:400px}}.kong-ui-public-about-card[data-v-0316c887]{--kui-card-gap: var(--kui-space-50, 12px);--kui-card-title-font-size: var(--kui-font-size-30, 14px);container-type:inline-size}.kong-ui-public-about-card .about-card-description[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0 0 16px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-about-card .about-card-skeleton[data-v-0316c887]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px)}.kong-ui-public-about-card .about-card-rows[data-v-0316c887]{display:flex;flex-direction:column;margin:0;margin:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);padding:8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:last-child{border-bottom:none;padding-bottom:0;padding-bottom:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:first-child{padding-top:0;padding-top:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{align-items:center;color:#0d0e14;color:var(--kui-color-text, #0d0e14);display:flex;flex:0 0 auto;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:4px;gap:var(--kui-space-20, 4px);line-height:16px;line-height:var(--kui-line-height-20, 16px);width:140px}.kong-ui-public-about-card .about-card-row-text[data-v-0316c887]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-row-tooltip-trigger[data-v-0316c887]{align-items:center;background:none;border:none;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;display:flex;padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-value[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);flex:1 1 0;font-size:12px;font-size:var(--kui-font-size-20, 12px);line-height:16px;line-height:var(--kui-line-height-20, 16px);margin:0;margin:var(--kui-space-0, 0px);min-width:0;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-content[data-v-0316c887]{margin-top:16px;margin-top:var(--kui-space-60, 16px)}@container (max-width: 320px){.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:flex-start;flex-direction:column;gap:2px;gap:var(--kui-space-10, 2px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{width:auto}}
+.page-layout-tabs[data-v-02891bc1]{align-items:flex-end;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);box-sizing:border-box;display:flex;height:34px;overflow-x:clip;padding:0 16px;padding:var(--kui-space-0, 0px) var(--kui-space-60, 16px);position:relative;width:100%}.page-layout-tabs a[data-v-02891bc1],.page-layout-tabs button[data-v-02891bc1]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;color:inherit;cursor:pointer;font:inherit;outline:none;padding:0;padding:var(--kui-space-0, 0px);text-decoration:none}.page-layout-tabs ul[data-v-02891bc1]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);margin-bottom:-1px;margin-bottom:calc(-1 * var(--kui-border-width-10, 1px));max-width:100%;padding:0;padding:var(--kui-space-0, 0px)}.page-layout-tabs ul.layout-computing[data-v-02891bc1]{height:0;visibility:hidden}.page-layout-tabs ul li[data-v-02891bc1]{display:flex}.page-layout-tabs ul li .tab-link[data-v-02891bc1]{align-items:center;border-bottom:2px solid rgba(0,0,0,0);border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-transparent, rgba(0, 0, 0, 0));border-radius:4px 4px 0 0;border-radius:var(--kui-border-radius-20, 4px) var(--kui-border-radius-20, 4px) var(--kui-border-radius-0, 0px) var(--kui-border-radius-0, 0px);color:#52596e;color:var(--kui-color-text-neutral-strong, #52596e);cursor:pointer;display:flex;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:6px;gap:var(--kui-space-30, 6px);line-height:20px;line-height:var(--kui-line-height-30, 20px);padding:6px 0;padding:var(--kui-space-30, 6px) var(--kui-space-0, 0px);text-decoration:none;transition:color .2s ease-in,border-color .2s ease-in,font-weight .2s ease-in;white-space:nowrap}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:hover{border-bottom:2px solid #afb7c5;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-neutral-weak, #afb7c5);color:#0d0e14;color:var(--kui-color-text, #0d0e14);text-decoration:none}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2));text-decoration:none}.page-layout-tabs ul li .tab-link.active[data-v-02891bc1]{border-bottom:2px solid #0044f4;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-primary, #0044f4);color:#0044f4!important;color:var(--kui-color-text-primary, #0044f4)!important;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);text-decoration:none}.page-layout-tabs .layout-loader-container[data-v-02891bc1]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);height:34px;inset:0 0 0 16px;left:var(--kui-space-60, 16px);position:absolute}.page-layout-anchor-navigation[data-v-f9770830]{display:flex;flex:1 1 0;justify-content:center;min-width:0;overflow-x:clip}.page-layout-anchor-navigation ul[data-v-f9770830]{align-items:center;display:flex;flex-shrink:0;gap:2px;gap:var(--kui-space-10, 2px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);padding:0;padding:var(--kui-space-0, 0px)}.page-layout-anchor-navigation ul.layout-hidden[data-v-f9770830]{display:none}.page-layout-anchor-navigation ul li[data-v-f9770830]{display:flex}.page-layout-anchor-navigation .anchor-link[data-v-f9770830]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;font-family:inherit;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);line-height:16px;line-height:var(--kui-line-height-20, 16px);max-width:140px;outline:none;overflow:hidden;padding:4px 8px;padding:var(--kui-space-20, 4px) var(--kui-space-40, 8px);text-overflow:ellipsis;transition:background-color .2s ease-in,color .2s ease-in;transition:background-color var(--kui-animation-duration-20, .2s) ease-in,color var(--kui-animation-duration-20, .2s) ease-in;white-space:nowrap}.page-layout-anchor-navigation .anchor-link[data-v-f9770830]:hover{background-color:#f9fafb;background-color:var(--kui-color-background-neutral-weakest, #f9fafb);color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.page-layout-anchor-navigation .anchor-link[data-v-f9770830]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.page-layout-anchor-navigation .anchor-link.active[data-v-f9770830]{background-color:#0044f4;background-color:var(--kui-color-brand, #0044f4);color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.page-layout-anchor-navigation .anchor-ellipsis[data-v-f9770830]{align-items:center;color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5);font-size:12px;font-size:var(--kui-font-size-20, 12px);justify-content:center;line-height:16px;line-height:var(--kui-line-height-20, 16px);-webkit-user-select:none;user-select:none;width:16px;width:var(--kui-icon-size-30, 16px)}.page-layout-anchor-navigation .anchor-overflow-button[data-v-f9770830]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout[data-v-b57669c9]{box-sizing:border-box;container-name:page-layout;container-type:inline-size;font-family:Inter,Roboto,Helvetica,sans-serif;font-family:var(--kui-font-family-text, "Inter", Roboto, Helvetica, sans-serif)}.kong-ui-public-page-layout .page-layout-header[data-v-b57669c9]{background-color:#fff;background-color:var(--kui-color-background, #ffffff);display:flex;flex-direction:column;gap:8px;gap:var(--kui-space-40, 8px)}.kong-ui-public-page-layout .page-layout-header .page-header-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:6px;gap:var(--kui-space-30, 6px);justify-content:space-between;padding:16px 16px 0;padding:var(--kui-space-60, 16px) var(--kui-space-60, 16px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start[data-v-b57669c9]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9] .breadcrumbs-item-container:first-child .breadcrumbs-item{padding-left:0;padding-left:var(--kui-space-0, 0px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9] .breadcrumbs-item-container .breadcrumbs-item.active .breadcrumbs-text{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:4px;gap:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;outline:none;padding:4px;padding:var(--kui-space-20, 4px);transition:background-color .2s ease-in,color .2s ease-in}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]:hover{color:#0d0e14;color:var(--kui-color-text, #0d0e14)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .navigate-back[data-v-b57669c9]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b57669c9]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2))}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]{min-width:0;overflow:hidden}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]>*{color:#0d0e14;color:var(--kui-color-text, #0d0e14);font-size:18px;font-size:var(--kui-font-size-50, 18px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);line-height:24px;line-height:var(--kui-line-height-40, 24px);margin:0;margin:var(--kui-space-0, 0px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container[data-v-b57669c9]{align-self:center;display:flex;margin-left:4px;margin-left:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button[data-v-b57669c9]{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5);padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button[data-v-b57669c9]:hover{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button-container .favorite-button.active[data-v-b57669c9]{color:#ffc400;color:var(--kui-color-text-warning-weak, #ffc400)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .title-after-container[data-v-b57669c9]{align-items:flex-end;display:flex;gap:6px;gap:var(--kui-space-30, 6px);margin-left:4px;margin-left:var(--kui-space-20, 4px)}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-actions-container[data-v-b57669c9]{align-items:center;display:flex;gap:6px;gap:var(--kui-space-30, 6px)}.kong-ui-public-page-layout .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-b57669c9]{border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);padding:16px;padding:var(--kui-space-60, 16px)}.kong-ui-public-page-layout.new-appearance .page-layout-header[data-v-b57669c9]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-b57669c9]{align-items:center;padding:8px 16px 0;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start[data-v-b57669c9]{align-items:center;display:flex;gap:4px;gap:var(--kui-space-20, 4px)}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container[data-v-b57669c9]{align-items:center;min-width:0}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]{color:#0d0e14;color:var(--kui-color-text, #0d0e14);font-size:14px;font-size:var(--kui-font-size-30, 14px);font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);line-height:20px;line-height:var(--kui-line-height-30, 20px);max-width:40ch;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-container .page-layout-title-wrapper[data-v-b57669c9]>*{font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);max-width:40ch}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b57669c9],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-b57669c9]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-b57669c9]{box-sizing:border-box;height:44px;padding:8px 16px;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-content-container[data-v-b57669c9]{background-color:#f9fafb;background-color:var(--kui-color-background-neutral-weakest, #f9fafb);display:flex;flex-direction:column-reverse;gap:12px;gap:var(--kui-space-50, 12px);padding:16px;padding:var(--kui-space-60, 16px)}.kong-ui-public-page-layout .page-layout-content-container.has-nested-page-layout[data-v-b57669c9]{padding:0;padding:var(--kui-space-0, 0px)}@container page-layout (min-width: 1024px){.kong-ui-public-page-layout .page-layout-content-container[data-v-b57669c9]{flex-direction:row-reverse;gap:8px;gap:var(--kui-space-40, 8px)}}.kong-ui-public-page-layout .page-layout-content-container .page-layout-content[data-v-b57669c9]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px);min-width:0;width:100%}.kong-ui-public-page-layout .page-layout-content-container .page-layout-aside-container[data-v-b57669c9]{display:flex;flex-direction:column;gap:8px;gap:var(--kui-space-40, 8px)}@container page-layout (min-width: 1024px){.kong-ui-public-page-layout .page-layout-content-container .page-layout-aside-container[data-v-b57669c9]{flex-shrink:0;width:400px}}.kong-ui-public-about-card[data-v-0316c887]{--kui-card-gap: var(--kui-space-50, 12px);--kui-card-title-font-size: var(--kui-font-size-30, 14px);container-type:inline-size}.kong-ui-public-about-card .about-card-description[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0 0 16px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-about-card .about-card-skeleton[data-v-0316c887]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px)}.kong-ui-public-about-card .about-card-rows[data-v-0316c887]{display:flex;flex-direction:column;margin:0;margin:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);padding:8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:last-child{border-bottom:none;padding-bottom:0;padding-bottom:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:first-child{padding-top:0;padding-top:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{align-items:center;color:#0d0e14;color:var(--kui-color-text, #0d0e14);display:flex;flex:0 0 auto;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:4px;gap:var(--kui-space-20, 4px);line-height:16px;line-height:var(--kui-line-height-20, 16px);width:140px}.kong-ui-public-about-card .about-card-row-text[data-v-0316c887]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-row-tooltip-trigger[data-v-0316c887]{align-items:center;background:none;border:none;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;display:flex;padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-value[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);flex:1 1 0;font-size:12px;font-size:var(--kui-font-size-20, 12px);line-height:16px;line-height:var(--kui-line-height-20, 16px);margin:0;margin:var(--kui-space-0, 0px);min-width:0;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-content[data-v-0316c887]{margin-top:16px;margin-top:var(--kui-space-60, 16px)}@container (max-width: 320px){.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:flex-start;flex-direction:column;gap:2px;gap:var(--kui-space-10, 2px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{width:auto}}

package/dist/types/components/PageLayoutAnchorNavigation.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayoutAnchorNavigation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageLayoutAnchorNavigation.vue"],"names":[],"mappings":"AAgoBA,OAAO,KAAK,EAAoB,+BAA+B,EAAE,MAAM,UAAU,CAAA;AAwoBjF,QAAA,MAAM,YAAY,0UAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PageLayoutAnchorNavigation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageLayoutAnchorNavigation.vue"],"names":[],"mappings":"AAooBA,OAAO,KAAK,EAAoB,+BAA+B,EAAE,MAAM,UAAU,CAAA;AA4oBjF,QAAA,MAAM,YAAY,0UAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/types/types/page-layout-anchor-navigation.d.ts

@@ -1,17 +1,15 @@
 export interface PageLayoutAnchor {
-    /** The unique kebab-case key of the anchor */
-    key: string;
-    /** The display text of the navigation item */
-    label: string;
     /**
-     * A CSS selector matching the section this item scrolls to, e.g. `#usage` or
-     * `[data-anchor="usage"]`. Ignored when `element` is set; one of the two must be provided for
-     * the item to resolve to anything.
+     * A CSS selector matching the section this item scrolls to (`#usage`, `[data-anchor="usage"]`, ...).
+     * A bare identifier (`usage`) is also accepted and looked up as `#usage`.
+     * Doubles as the item's unique key, so it must be unique within the list.
      */
-    selector?: string;
+    id: string;
+    /** The display text of the navigation item */
+    label: string;
     /**
      * The section element itself, for pages that hold a template ref rather than a selector.
-     * Takes precedence over `selector`.
+     * Takes precedence over `id`, which is then only used as the item's key.
      */
     element?: HTMLElement | null;
     /**

package/dist/types/types/page-layout-anchor-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout-anchor-navigation.d.ts","sourceRoot":"","sources":["../../../src/types/page-layout-anchor-navigation.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,+BAA+B;IAC9C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC7B"}
+{"version":3,"file":"page-layout-anchor-navigation.d.ts","sourceRoot":"","sources":["../../../src/types/page-layout-anchor-navigation.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,+BAA+B;IAC9C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/page-layout",
-  "version": "1.2.4-pr.3950.d754871d7.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/page-layout.umd.js",
   "module": "./dist/page-layout.es.js",