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

package/dist/page-layout.es.js

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

package/dist/page-layout.umd.js

@@ -1 +1 @@
-(function(B,t){typeof exports=="object"&&typeof module<"u"?t(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"],t):(B=typeof globalThis<"u"?globalThis:B||self,t(B["kong-ui-public-page-layout"]={},B.Vue,B.VueRouter,B["kong-ui-public-i18n"],B.KongIcons))})(this,(function(B,t,J,tt,D){"use strict";const pt={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 ft(){const e=tt.createI18n("en-us",pt);return{i18n:e,i18nT:tt.i18nTComponent(e)}}const Z={useI18n:ft},ht="12px",x="16px",gt="2px",et="16px";function kt(e,c){return t.getCurrentScope()?(t.onScopeDispose(e,c),!0):!1}const bt=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const O=()=>{};function yt(e,c){function n(...l){return new Promise((s,d)=>{Promise.resolve(e(()=>c.apply(this,l),{fn:c,thisArg:this,args:l})).then(s).catch(d)})}return"cancel"in e&&Object.assign(n,{cancel:e.cancel,flush:e.flush,isPending:e.isPending}),n}function Ct(e,c={}){let n,l,s=O,d=O;const u=t.shallowRef(!1),i=m=>{clearTimeout(m),s(),s=O};let k;return Object.assign(m=>{const p=t.toValue(e),w=t.toValue(c.maxWait);return n&&i(n),p<=0||w!==void 0&&w<=0?(l&&(i(l),l=void 0),u.value=!1,Promise.resolve(m())):(u.value=!0,new Promise((T,f)=>{s=c.rejectOnCancel?f:T,d=T,k=m,w&&!l&&(l=setTimeout(()=>{n&&i(n),l=void 0,u.value=!1,T(k())},w)),n=setTimeout(()=>{l&&i(l),l=void 0,u.value=!1,T(m())},p)}))},{cancel:()=>{n&&(i(n),n=void 0),l&&(i(l),l=void 0),u.value=!1,d=O},flush:()=>{if(u.value){n&&(clearTimeout(n),n=void 0),l&&(clearTimeout(l),l=void 0),u.value=!1;const m=d;s=O,d=O,m(k())}},isPending:t.shallowReadonly(u)})}function wt(e,c=200,n={}){return yt(Ct(c,n),e)}const Bt=bt?window:void 0;function ot(e){var c;const n=t.toValue(e);return(c=n?.$el)!==null&&c!==void 0?c:n}function Tt(){const e=t.shallowRef(!1),c=t.getCurrentInstance();return c&&t.onMounted(()=>{e.value=!0},c),e}function Et(e){const c=Tt();return t.computed(()=>(c.value,!!e()))}function nt(e,c,n={}){const{window:l=Bt,...s}=n;let d;const u=Et(()=>l&&"ResizeObserver"in l),i=()=>{d&&(d.disconnect(),d=void 0)},k=t.watch(t.computed(()=>{const m=t.toValue(e);return Array.isArray(m)?m.map(p=>ot(p)):[ot(m)]}),m=>{if(i(),u.value&&l){d=new ResizeObserver(c);for(const p of m)p&&d.observe(p,s)}},{immediate:!0,flush:"post"}),b=()=>{i(),k()};return kt(b),{isSupported:u,stop:b}}const _t={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},Nt={key:0},St=["aria-label"],$t={key:0,class:"layout-loader-container"},It=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){const{i18n:{t:c}}=Z.useI18n(),n=J.useRouter(),l=t.inject("app:navigateTo",null),s=f=>{if(typeof f.to!="string"){n.push(f.to);return}if(typeof l!="function"){window.location.href=f.to;return}l(f.to)},d=t.useTemplateRef("page-layout-tabs"),u=t.useTemplateRef("page-layout-tabs-list"),i=t.ref(e.tabs.length),k=t.ref(!1),b=t.computed(()=>e.tabs.slice(0,i.value)),m=t.computed(()=>e.tabs.slice(i.value)),p=async()=>{if(!d.value||!u.value)return;k.value=!1,i.value=e.tabs.length,await t.nextTick();const f=d.value?.getBoundingClientRect().width-parseInt(et)*2;let $=u.value?.getBoundingClientRect().width;if(!f||!$){k.value=!0;return}const E=50;for(;$+E>f&&i.value>1;)i.value--,await t.nextTick(),$=u.value?.getBoundingClientRect().width||0;k.value=!0};let w=null;const T=()=>{w&&clearTimeout(w),w=setTimeout(()=>{p()},150)};return t.onMounted(()=>{p(),nt(d,T)}),t.onBeforeUnmount(()=>{w&&clearTimeout(w)}),t.watch(()=>e.tabs,()=>{p()},{deep:!0}),(f,$)=>{const E=t.resolveComponent("KDropdownItem"),A=t.resolveComponent("KDropdown"),z=t.resolveComponent("KSkeletonBox");return t.openBlock(),t.createElementBlock("nav",_t,[t.createElementVNode("ul",{ref:"page-layout-tabs-list",class:t.normalizeClass({"layout-computing":!k.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(b.value,r=>(t.openBlock(),t.createElementBlock("li",{key:`${r.key}-tab`},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(typeof r.to=="string"?"a":"router-link"),t.mergeProps({ref_for:!0},typeof r.to=="string"?{href:r.to}:{to:r.to},{"aria-current":r.active?"page":void 0,class:["tab-link",{active:r.active}],"data-testid":r.dataTestId?r.dataTestId:`page-layout-tab-${r.key}`,tabindex:"0",onClick:t.withModifiers(I=>s(r),["prevent"]),onKeydown:t.withKeys(t.withModifiers(I=>s(r),["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.renderSlot(f.$slots,`tab-${r.key}`,{tab:r},()=>[t.createTextVNode(t.toDisplayString(r.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),e.tabs.length>i.value?(t.openBlock(),t.createElementBlock("li",Nt,[t.createVNode(A,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"tabs-overflow-dropdown-popover"}}},{items:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(m.value,r=>(t.openBlock(),t.createBlock(E,{key:`${r.key}-dropdown-item`,"aria-current":r.active?"page":void 0,"data-testid":r.dataTestId?r.dataTestId:`page-layout-tab-${r.key}`,item:{label:r.label,value:r.key,to:r.to},selected:r.active},{default:t.withCtx(()=>[t.renderSlot(f.$slots,`tab-${r.key}`,{tab:r},()=>[t.createTextVNode(t.toDisplayString(r.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":t.unref(c)("tabs.more_button.aria_label"),class:t.normalizeClass(["tab-link",{active:m.value.find(r=>r.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[t.createTextVNode(t.toDisplayString(t.unref(c)("tabs.more_button.label"))+" ",1),t.createVNode(t.unref(D.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(x)})`},null,8,["size"])],10,St)]),_:3})])):t.createCommentVNode("",!0)],2),k.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",$t,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(3,r=>t.createVNode(z,{key:`layout-loader-${r}`,height:"1",width:"5"})),64))]))],512)}}}),U=(e,c)=>{const n=e.__vccOpts||e;for(const[l,s]of c)n[l]=s;return n},Vt=U(It,[["__scopeId","data-v-02891bc1"]]),At=["aria-label","data-fit"],Dt={key:0,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-leading-ellipsis"},Lt=["aria-current","data-testid","title","onClick"],Rt={key:1,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-trailing-ellipsis"},Pt={key:2},at=140,lt=22,X=16,j="data-anchor-attention",Kt=1200,xt=1600,Ot=U(t.defineComponent({__name:"PageLayoutAnchorNavigation",props:{anchors:{default:()=>[]}},setup(e){const{i18n:{t:c}}=Z.useI18n(),n=t.useTemplateRef("page-layout-anchor-navigation"),l=t.useTemplateRef("page-layout-anchor-navigation-list"),s=t.ref("all"),d=t.ref(""),u=t.ref([]),i=t.computed(()=>e.anchors.filter(o=>u.value.includes(o.id))),k=t.computed(()=>{const o=i.value.findIndex(a=>a.id===d.value);return o===-1?0:o}),b=t.computed(()=>{const o=i.value,a=o.length,h=k.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(h,h+1),hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const y=s.value==="window-3"?3:2;if(a<=y)return{anchors:o,hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const N=h<y?0:h>=a-y?a-y:h-1;return{anchors:o.slice(N,N+y),hasLeadingEllipsis:N>0,hasTrailingEllipsis:N+y<a,hasOverflowDropdown:!0}}),m=o=>o.dataTestId??`page-layout-anchor-${o.id.replace(/[^\w-]+/g,"-").replace(/^-+|-+$/g,"")}`,p=t.ref(null),w=()=>{let o=n.value?.parentElement??null;for(;o;){const{overflowY:a}=getComputedStyle(o);if(a==="auto"||a==="scroll"||a==="overlay")return o;o=o.parentElement}return null},T=o=>{if(o.element)return o.element.isConnected?o.element:null;const a=p.value??document;try{return a.querySelector(o.id)??a.querySelector(`#${CSS.escape(o.id)}`)}catch{return null}},f=()=>(n.value?.closest(".page-layout-header")?.getBoundingClientRect().height??0)+parseInt(et,10),$=parseInt(x,10),E=parseInt(gt,10),A=o=>o*at+2*$+lt+(o+2)*E+X,z=()=>at+lt+E+X;let r=0;const I=async()=>{if(!i.value.length){s.value="hidden";return}const o=++r;if(s.value="all",await t.nextTick(),o!==r||!n.value||!l.value)return;const a=n.value.getBoundingClientRect().width,h=l.value.getBoundingClientRect().width;a<=0||h<=0||h+X<=a||(A(3)<=a?s.value="window-3":A(2)<=a?s.value="window-2":z()<=a?s.value="active-only":s.value="hidden")};let L=null;nt(n,()=>{L&&clearTimeout(L),L=setTimeout(()=>{v(),I()},150)});let F=null,M=null,R=0,G=0,P=null,W=null;const st=o=>{const a=String(++R);ct(),W=o,o.removeAttribute(j),G=requestAnimationFrame(()=>{o.setAttribute(j,a),P=setTimeout(()=>{o.getAttribute(j)===a&&o.removeAttribute(j)},Kt)})},ct=()=>{cancelAnimationFrame(G),P&&(clearTimeout(P),P=null),W?.removeAttribute(j),W=null},q=()=>p.value??window,V=o=>{o&&o.type!=="scrollend"&&R++,F=null,M&&(clearTimeout(M),M=null);const a=q();a.removeEventListener("scrollend",V),a.removeEventListener("wheel",V),a.removeEventListener("touchstart",V)},se=o=>{V(),F=o;const a=q();a.addEventListener("scrollend",V,{once:!0}),a.addEventListener("wheel",V,{passive:!0}),a.addEventListener("touchstart",V,{passive:!0}),M=setTimeout(V,1e3)},dt=()=>{const o=p.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}},v=()=>{const{top:o,scrollTop:a,clientHeight:h,scrollHeight:y}=dt(),N=f(),C=[];let g=null,K=null;for(const S of e.anchors){const H=T(S);H&&(C.push(S.id),K=S.id,g??=S.id,H.getBoundingClientRect().top-o<=(S.offset??N)+8&&(g=S.id))}const Y=C.length!==u.value.length||C.some((S,H)=>S!==u.value[H]);return Y&&(u.value=C),F||(K&&a>0&&a+h>=y-2&&(g=K),d.value=g??""),Y};let Q=!1;const ut=()=>{Q||(Q=!0,requestAnimationFrame(()=>{Q=!1,v()&&I()}))},ce=o=>{const a=q();let h=!1;const y=()=>{h||(h=!0,a.removeEventListener("scrollend",y),o())};a.addEventListener("scrollend",y,{once:!0}),window.setTimeout(y,xt)},mt=o=>{const a=T(o);if(!a)return;d.value=o.id,se(o.id);const h=o.offset??f(),{scrollTop:y,clientHeight:N,scrollHeight:C}=dt(),g=p.value,K=g?a.getBoundingClientRect().top-g.getBoundingClientRect().top+g.scrollTop-h:a.getBoundingClientRect().top+window.scrollY-h,Y=Math.min(Math.max(K,0),Math.max(C-N,0)),S=Math.abs(Y-y)>=2,H=R;if((g??window).scrollTo({behavior:"smooth",top:K}),!S){st(a);return}ce(()=>{H===R&&st(a)})},de=(o,a)=>{a(),mt(o)};return t.onMounted(()=>{p.value=w(),q().addEventListener("scroll",ut,{passive:!0}),v(),I(),requestAnimationFrame(()=>{v(),I()})}),t.onBeforeUnmount(()=>{q().removeEventListener("scroll",ut),V(),R++,ct(),L&&clearTimeout(L)}),t.watch(()=>e.anchors,()=>{e.anchors.some(o=>o.id===d.value)||(d.value=""),v(),I()},{deep:!0}),(o,a)=>{const h=t.resolveComponent("KButton"),y=t.resolveComponent("KDropdownItem"),N=t.resolveComponent("KDropdown");return t.openBlock(),t.createElementBlock("nav",{ref:"page-layout-anchor-navigation","aria-label":t.unref(c)("anchor_navigation.aria_label"),class:"page-layout-anchor-navigation","data-fit":s.value,"data-testid":"page-layout-anchor-navigation"},[t.createElementVNode("ul",{ref:"page-layout-anchor-navigation-list",class:t.normalizeClass({"layout-hidden":s.value==="hidden"})},[b.value.hasLeadingEllipsis?(t.openBlock(),t.createElementBlock("li",Dt," … ")):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(b.value.anchors,C=>(t.openBlock(),t.createElementBlock("li",{key:`${C.id}-anchor`},[t.createElementVNode("button",{"aria-current":C.id===d.value?"location":void 0,class:t.normalizeClass(["anchor-link",{active:C.id===d.value}]),"data-testid":m(C),title:C.label,type:"button",onClick:g=>mt(C)},t.toDisplayString(C.label),11,Lt)]))),128)),b.value.hasTrailingEllipsis?(t.openBlock(),t.createElementBlock("li",Rt," … ")):t.createCommentVNode("",!0),b.value.hasOverflowDropdown?(t.openBlock(),t.createElementBlock("li",Pt,[t.createVNode(N,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"anchor-navigation-overflow-dropdown-popover"}}},{items:t.withCtx(({closeDropdown:C})=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value,g=>(t.openBlock(),t.createBlock(y,{key:`${g.id}-dropdown-item`,"aria-current":g.id===d.value?"location":void 0,"data-testid":m(g),selected:g.id===d.value,onClick:K=>de(g,C)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(g.label),1)]),_:2},1032,["aria-current","data-testid","selected","onClick"]))),128))]),default:t.withCtx(()=>[t.createVNode(h,{appearance:"tertiary","aria-label":t.unref(c)("anchor_navigation.more_button.aria_label"),class:"anchor-overflow-button","data-testid":"anchor-navigation-overflow-dropdown-button",icon:"",size:"small"},{default:t.withCtx(()=>[t.createVNode(t.unref(D.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(x)})`},null,8,["size"])]),_:1},8,["aria-label"])]),_:1})])):t.createCommentVNode("",!0)],2)],8,At)}}}),[["__scopeId","data-v-d9058e68"]]),it=Symbol("nested-page-layout-detection"),rt="page-layout:new-appearance",zt={key:0,class:"page-layout-header","data-testid":"page-layout-header"},Ft={class:"page-header-container"},Mt={class:"page-header-start"},Ht={class:"title-container"},jt={key:1,class:"page-layout-title-wrapper"},Wt={class:"page-layout-title","data-testid":"page-layout-title"},qt=["aria-label"],vt={key:3,class:"title-after-container"},Ut={class:"page-header-actions-container"},Gt={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},Yt={class:"page-layout-content"},Jt=U(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},anchors:{default:()=>[]},pageShortcutData:{}},setup(e){const c=t.inject("app:navigateTo",null),n=t.inject(rt,null),l=t.inject("app:pageShortcutsContext",null),{i18n:{t:s}}=Z.useI18n(),d=J.useRouter(),u=J.useRoute(),i=t.computed(()=>!!(e.tabs&&e.tabs.length)),k=t.computed(()=>typeof e.backTo=="string"),b=t.computed(()=>t.toValue(n)===!0),m=t.computed(()=>b.value&&!i.value&&!!(e.anchors&&e.anchors.length)),p=t.computed(()=>!!e.pageShortcutData&&!!e.pageShortcutData.entityType&&!!e.pageShortcutData.label),w=t.computed(()=>p.value&&!!l&&"onFavoriteToggle"in l&&typeof l.onFavoriteToggle=="function"),T=t.ref(0),f=t.computed(()=>!!l&&"isFavorite"in l&&typeof l.isFavorite=="function"&&l.isFavorite(e.pageShortcutData)===!0),$=async()=>{if(e.backTo){if(typeof e.backTo=="object"){d.push(e.backTo);return}if(typeof c!="function"){window.location.href=e.backTo;return}await c(e.backTo)}},E=t.ref(0),A=t.computed(()=>E.value>0);t.provide(it,()=>(E.value++,()=>{E.value--}));const z=t.inject(it,null),r=t.ref(null);typeof z=="function"&&(r.value=z());const I=()=>{l.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||u.fullPath})};t.onUnmounted(()=>{r.value?.()});const L=wt(()=>{!A.value&&p.value&&l&&"onEntityPageVisit"in l&&typeof l.onEntityPageVisit=="function"&&(l.onEntityPageVisit({...e.pageShortcutData,path:e.pageShortcutData?.path||u?.fullPath}),T.value++)},500);return t.watch([()=>e.pageShortcutData,()=>u?.fullPath],()=>{L()},{immediate:!0,deep:!0}),(_,F)=>{const M=t.resolveComponent("KBreadcrumbs"),R=t.resolveComponent("KTooltip"),G=t.resolveComponent("router-view");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":b.value}]),"data-testid":"kong-ui-public-page-layout"},[A.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",zt,[t.createElementVNode("div",Ft,[t.createElementVNode("div",Mt,[e.breadcrumbs&&e.breadcrumbs.length?(t.openBlock(),t.createBlock(M,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[b.value?{name:"divider",fn:t.withCtx(()=>[t.createVNode(t.unref(D.ChevronRightIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(x)})`},null,8,["size"])]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",Ht,[e.backTo&&!b.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(k.value?"a":"router-link"),t.mergeProps({key:0},k.value?{href:e.backTo}:{to:e.backTo},{"aria-label":t.unref(s)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:t.withModifiers($,["prevent"]),onKeydown:t.withKeys(t.withModifiers($,["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.createVNode(t.unref(D.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(x)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):t.createCommentVNode("",!0),e.title||_.$slots.title?(t.openBlock(),t.createElementBlock("span",jt,[t.renderSlot(_.$slots,"title",{},()=>[t.createElementVNode("h1",Wt,t.toDisplayString(e.title),1)],!0)])):t.createCommentVNode("",!0),w.value?(t.openBlock(),t.createElementBlock("div",{key:T.value,class:"favorite-button-container"},[t.createVNode(R,{placement:"right",text:f.value?t.unref(s)("favorite_button.remove_shortcut"):t.unref(s)("favorite_button.save_shortcut")},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":f.value?t.unref(s)("favorite_button.remove_shortcut"):t.unref(s)("favorite_button.save_shortcut"),class:t.normalizeClass(["favorite-button",{active:f.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:I},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(f.value?t.unref(D.StarFillIcon):t.unref(D.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(x)})`},null,8,["size"]))],10,qt)]),_:1},8,["text"])])):t.createCommentVNode("",!0),_.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",vt,[t.renderSlot(_.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),m.value?(t.openBlock(),t.createBlock(Ot,{key:0,anchors:e.anchors},null,8,["anchors"])):t.createCommentVNode("",!0),t.createElementVNode("div",Ut,[t.renderSlot(_.$slots,"actions",{},void 0,!0),F[0]||(F[0]=t.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),i.value?(t.openBlock(),t.createBlock(Vt,{key:0,tabs:e.tabs},t.createSlots({_:2},[t.renderList(e.tabs,P=>({name:`tab-${P.key}`,fn:t.withCtx(W=>[t.renderSlot(_.$slots,`tab-${P.key}`,t.normalizeProps(t.guardReactiveProps(W)),void 0,!0)])}))]),1032,["tabs"])):t.createCommentVNode("",!0)])),t.createElementVNode("div",{class:t.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":A.value}])},[b.value&&_.$slots.aside?(t.openBlock(),t.createElementBlock("div",Gt,[t.renderSlot(_.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",Yt,[i.value?(t.openBlock(),t.createBlock(G,{key:0})):t.renderSlot(_.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-e714e65a"]]),Zt={key:0,class:"about-card-description","data-testid":"about-card-description"},Xt={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},Qt={key:2,class:"about-card-rows","data-testid":"about-card-rows"},te=["data-testid"],ee={class:"about-card-row-label"},oe={class:"about-card-row-text"},ne=["aria-label","data-testid"],ae={class:"about-card-row-value"},le={class:"about-card-row-text"},ie={key:3,class:"about-card-content","data-testid":"about-card-content"},re=U(t.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(e){const c=t.computed(()=>e.rows.length||4);return(n,l)=>{const s=t.resolveComponent("KSkeletonBox"),d=t.resolveComponent("KTooltip"),u=t.resolveComponent("KCard");return t.openBlock(),t.createBlock(u,{class:"kong-ui-public-about-card",title:e.title,"title-tag":e.titleTag},t.createSlots({default:t.withCtx(()=>[n.$slots.description||e.description?(t.openBlock(),t.createElementBlock("p",Zt,[t.renderSlot(n.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(e.description),1)],!0)])):t.createCommentVNode("",!0),e.isLoading?(t.openBlock(),t.createElementBlock("div",Xt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(c.value,i=>(t.openBlock(),t.createBlock(s,{key:i,height:"2",width:"100"}))),128))])):e.rows.length?(t.openBlock(),t.createElementBlock("dl",Qt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.rows,i=>(t.openBlock(),t.createElementBlock("div",{key:i.key,class:"about-card-row","data-testid":`about-card-row-${i.key}`},[t.createElementVNode("dt",ee,[t.renderSlot(n.$slots,`label-${i.key}`,{row:i},()=>[t.createElementVNode("span",oe,t.toDisplayString(i.label),1)],!0),i.tooltip?(t.openBlock(),t.createBlock(d,{key:0,text:i.tooltip},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":i.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${i.key}-tooltip`,type:"button"},[t.createVNode(t.unref(D.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(ht)})`},null,8,["size"])],8,ne)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",ae,[t.renderSlot(n.$slots,`row-${i.key}`,{row:i},()=>[t.createElementVNode("span",le,t.toDisplayString(i.value),1)],!0)])],8,te))),128))])):t.createCommentVNode("",!0),n.$slots.default?(t.openBlock(),t.createElementBlock("div",ie,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):t.createCommentVNode("",!0)]),_:2},[n.$slots.title||e.title?{name:"title",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"title",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)],!0)]),key:"0"}:void 0,n.$slots.actions?{name:"actions",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-0316c887"]]);B.AboutCard=re,B.NEW_APPEARANCE_INJECTION_KEY=rt,B.PageLayout=Jt,Object.defineProperty(B,Symbol.toStringTag,{value:"Module"})}));
+(function(B,t){typeof exports=="object"&&typeof module<"u"?t(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"],t):(B=typeof globalThis<"u"?globalThis:B||self,t(B["kong-ui-public-page-layout"]={},B.Vue,B.VueRouter,B["kong-ui-public-i18n"],B.KongIcons))})(this,(function(B,t,J,tt,D){"use strict";const mt={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 ft(){const e=tt.createI18n("en-us",mt);return{i18n:e,i18nT:tt.i18nTComponent(e)}}const Z={useI18n:ft},ht="12px",O="16px",gt="2px",et="16px";function kt(e,c){return t.getCurrentScope()?(t.onScopeDispose(e,c),!0):!1}const bt=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const x=()=>{};function yt(e,c){function n(...l){return new Promise((s,d)=>{Promise.resolve(e(()=>c.apply(this,l),{fn:c,thisArg:this,args:l})).then(s).catch(d)})}return"cancel"in e&&Object.assign(n,{cancel:e.cancel,flush:e.flush,isPending:e.isPending}),n}function wt(e,c={}){let n,l,s=x,d=x;const u=t.shallowRef(!1),i=p=>{clearTimeout(p),s(),s=x};let k;return Object.assign(p=>{const m=t.toValue(e),C=t.toValue(c.maxWait);return n&&i(n),m<=0||C!==void 0&&C<=0?(l&&(i(l),l=void 0),u.value=!1,Promise.resolve(p())):(u.value=!0,new Promise((E,f)=>{s=c.rejectOnCancel?f:E,d=E,k=p,C&&!l&&(l=setTimeout(()=>{n&&i(n),l=void 0,u.value=!1,E(k())},C)),n=setTimeout(()=>{l&&i(l),l=void 0,u.value=!1,E(p())},m)}))},{cancel:()=>{n&&(i(n),n=void 0),l&&(i(l),l=void 0),u.value=!1,d=x},flush:()=>{if(u.value){n&&(clearTimeout(n),n=void 0),l&&(clearTimeout(l),l=void 0),u.value=!1;const p=d;s=x,d=x,p(k())}},isPending:t.shallowReadonly(u)})}function Ct(e,c=200,n={}){return yt(wt(c,n),e)}const Bt=bt?window:void 0;function ot(e){var c;const n=t.toValue(e);return(c=n?.$el)!==null&&c!==void 0?c:n}function Et(){const e=t.shallowRef(!1),c=t.getCurrentInstance();return c&&t.onMounted(()=>{e.value=!0},c),e}function Tt(e){const c=Et();return t.computed(()=>(c.value,!!e()))}function nt(e,c,n={}){const{window:l=Bt,...s}=n;let d;const u=Tt(()=>l&&"ResizeObserver"in l),i=()=>{d&&(d.disconnect(),d=void 0)},k=t.watch(t.computed(()=>{const p=t.toValue(e);return Array.isArray(p)?p.map(m=>ot(m)):[ot(p)]}),p=>{if(i(),u.value&&l){d=new ResizeObserver(c);for(const m of p)m&&d.observe(m,s)}},{immediate:!0,flush:"post"}),b=()=>{i(),k()};return kt(b),{isSupported:u,stop:b}}const _t={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},Nt={key:0},St=["aria-label"],$t={key:0,class:"layout-loader-container"},It=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){const{i18n:{t:c}}=Z.useI18n(),n=J.useRouter(),l=t.inject("app:navigateTo",null),s=f=>{if(typeof f.to!="string"){n.push(f.to);return}if(typeof l!="function"){window.location.href=f.to;return}l(f.to)},d=t.useTemplateRef("page-layout-tabs"),u=t.useTemplateRef("page-layout-tabs-list"),i=t.ref(e.tabs.length),k=t.ref(!1),b=t.computed(()=>e.tabs.slice(0,i.value)),p=t.computed(()=>e.tabs.slice(i.value)),m=async()=>{if(!d.value||!u.value)return;k.value=!1,i.value=e.tabs.length,await t.nextTick();const f=d.value?.getBoundingClientRect().width-parseInt(et)*2;let I=u.value?.getBoundingClientRect().width;if(!f||!I){k.value=!0;return}const _=50;for(;I+_>f&&i.value>1;)i.value--,await t.nextTick(),I=u.value?.getBoundingClientRect().width||0;k.value=!0};let C=null;const E=()=>{C&&clearTimeout(C),C=setTimeout(()=>{m()},150)};return t.onMounted(()=>{m(),nt(d,E)}),t.onBeforeUnmount(()=>{C&&clearTimeout(C)}),t.watch(()=>e.tabs,()=>{m()},{deep:!0}),(f,I)=>{const _=t.resolveComponent("KDropdownItem"),V=t.resolveComponent("KDropdown"),z=t.resolveComponent("KSkeletonBox");return t.openBlock(),t.createElementBlock("nav",_t,[t.createElementVNode("ul",{ref:"page-layout-tabs-list",class:t.normalizeClass({"layout-computing":!k.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(b.value,r=>(t.openBlock(),t.createElementBlock("li",{key:`${r.key}-tab`},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(typeof r.to=="string"?"a":"router-link"),t.mergeProps({ref_for:!0},typeof r.to=="string"?{href:r.to}:{to:r.to},{"aria-current":r.active?"page":void 0,class:["tab-link",{active:r.active}],"data-testid":r.dataTestId?r.dataTestId:`page-layout-tab-${r.key}`,tabindex:"0",onClick:t.withModifiers(A=>s(r),["prevent"]),onKeydown:t.withKeys(t.withModifiers(A=>s(r),["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.renderSlot(f.$slots,`tab-${r.key}`,{tab:r},()=>[t.createTextVNode(t.toDisplayString(r.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),e.tabs.length>i.value?(t.openBlock(),t.createElementBlock("li",Nt,[t.createVNode(V,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"tabs-overflow-dropdown-popover"}}},{items:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(p.value,r=>(t.openBlock(),t.createBlock(_,{key:`${r.key}-dropdown-item`,"aria-current":r.active?"page":void 0,"data-testid":r.dataTestId?r.dataTestId:`page-layout-tab-${r.key}`,item:{label:r.label,value:r.key,to:r.to},selected:r.active},{default:t.withCtx(()=>[t.renderSlot(f.$slots,`tab-${r.key}`,{tab:r},()=>[t.createTextVNode(t.toDisplayString(r.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":t.unref(c)("tabs.more_button.aria_label"),class:t.normalizeClass(["tab-link",{active:p.value.find(r=>r.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[t.createTextVNode(t.toDisplayString(t.unref(c)("tabs.more_button.label"))+" ",1),t.createVNode(t.unref(D.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(O)})`},null,8,["size"])],10,St)]),_:3})])):t.createCommentVNode("",!0)],2),k.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",$t,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(3,r=>t.createVNode(z,{key:`layout-loader-${r}`,height:"1",width:"5"})),64))]))],512)}}}),U=(e,c)=>{const n=e.__vccOpts||e;for(const[l,s]of c)n[l]=s;return n},At=U(It,[["__scopeId","data-v-02891bc1"]]),Vt=["aria-label","data-fit"],Dt={key:0,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-leading-ellipsis"},Lt=["aria-current","data-testid","title","onClick"],Rt={key:1,"aria-hidden":"true",class:"anchor-ellipsis","data-testid":"anchor-navigation-trailing-ellipsis"},Pt={key:2},at=140,lt=22,X=16,j="data-anchor-attention",Kt=1200,Ot=1600,xt=U(t.defineComponent({__name:"PageLayoutAnchorNavigation",props:{anchors:{default:()=>[]}},setup(e){const{i18n:{t:c}}=Z.useI18n(),n=t.useTemplateRef("page-layout-anchor-navigation"),l=t.useTemplateRef("page-layout-anchor-navigation-list"),s=t.ref("all"),d=t.ref(""),u=t.ref([]),i=t.computed(()=>e.anchors.filter(o=>u.value.includes(o.id))),k=t.computed(()=>{const o=i.value.findIndex(a=>a.id===d.value);return o===-1?0:o}),b=t.computed(()=>{const o=i.value,a=o.length,h=k.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(h,h+1),hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const y=s.value==="window-3"?3:2;if(a<=y)return{anchors:o,hasLeadingEllipsis:!1,hasTrailingEllipsis:!1,hasOverflowDropdown:!0};const S=h<y?0:h>=a-y?a-y:h-1;return{anchors:o.slice(S,S+y),hasLeadingEllipsis:S>0,hasTrailingEllipsis:S+y<a,hasOverflowDropdown:!0}}),p=o=>o.dataTestId??`page-layout-anchor-${o.id.replace(/[^\w-]+/g,"-").replace(/^-+|-+$/g,"")}`,m=t.ref(null),C=()=>{let o=n.value?.parentElement??null;for(;o;){const{overflowY:a}=getComputedStyle(o);if(a==="auto"||a==="scroll"||a==="overlay")return o;o=o.parentElement}return null},E=o=>{if(o.element)return o.element.isConnected?o.element:null;const a=m.value??document;try{return a.querySelector(o.id)??a.querySelector(`#${CSS.escape(o.id)}`)}catch{return null}},f=()=>(n.value?.closest(".page-layout-header")?.getBoundingClientRect().height??0)+parseInt(et,10),I=parseInt(O,10),_=parseInt(gt,10),V=o=>o*at+2*I+lt+(o+2)*_+X,z=()=>at+lt+_+X;let r=0;const A=async()=>{if(!i.value.length){s.value="hidden";return}const o=++r;if(s.value="all",await t.nextTick(),o!==r||!n.value||!l.value)return;const a=n.value.getBoundingClientRect().width,h=l.value.getBoundingClientRect().width;a<=0||h<=0||h+X<=a||(V(3)<=a?s.value="window-3":V(2)<=a?s.value="window-2":z()<=a?s.value="active-only":s.value="hidden")};let L=null;nt(n,()=>{L&&clearTimeout(L),L=setTimeout(()=>{q(),A()},150)});let F=null,M=null,R=0,G=0,P=null,v=null;const st=o=>{const a=String(++R);ct(),v=o,o.removeAttribute(j),G=requestAnimationFrame(()=>{o.setAttribute(j,a),P=setTimeout(()=>{o.getAttribute(j)===a&&o.removeAttribute(j)},Kt)})},ct=()=>{cancelAnimationFrame(G),P&&(clearTimeout(P),P=null),v?.removeAttribute(j),v=null},W=()=>m.value??window,se=new Set(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "]),T=o=>{if(o instanceof KeyboardEvent&&!se.has(o.key))return;o&&o.type!=="scrollend"&&R++,F=null,M&&(clearTimeout(M),M=null);const a=W();a.removeEventListener("scrollend",T),a.removeEventListener("wheel",T),a.removeEventListener("touchstart",T),a.removeEventListener("keydown",T)},ce=o=>{T(),F=o;const a=W();a.addEventListener("scrollend",T,{once:!0}),a.addEventListener("wheel",T,{passive:!0}),a.addEventListener("touchstart",T,{passive:!0}),a.addEventListener("keydown",T,{passive:!0}),M=setTimeout(T,1e3)},dt=()=>{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}},q=()=>{const{top:o,scrollTop:a,clientHeight:h,scrollHeight:y}=dt(),S=f(),w=[];let g=null,K=null;for(const $ of e.anchors){const H=E($);H&&(w.push($.id),K=$.id,g??=$.id,H.getBoundingClientRect().top-o<=($.offset??S)+8&&(g=$.id))}const Y=w.length!==u.value.length||w.some(($,H)=>$!==u.value[H]);return Y&&(u.value=w),F||(K&&a>0&&a+h>=y-2&&(g=K),d.value=g??""),Y};let Q=!1;const ut=()=>{Q||(Q=!0,requestAnimationFrame(()=>{Q=!1,q()&&A()}))},de=o=>{const a=W();let h=!1;const y=()=>{h||(h=!0,a.removeEventListener("scrollend",y),o())};a.addEventListener("scrollend",y,{once:!0}),window.setTimeout(y,Ot)},pt=o=>{const a=E(o);if(!a)return;d.value=o.id,ce(o.id);const h=o.offset??f(),{scrollTop:y,clientHeight:S,scrollHeight:w}=dt(),g=m.value,K=g?a.getBoundingClientRect().top-g.getBoundingClientRect().top+g.scrollTop-h:a.getBoundingClientRect().top+window.scrollY-h,Y=Math.min(Math.max(K,0),Math.max(w-S,0)),$=Math.abs(Y-y)>=2,H=++R;if((g??window).scrollTo({behavior:"smooth",top:K}),!$){st(a);return}de(()=>{H===R&&st(a)})},ue=(o,a)=>{a(),pt(o)};return t.onMounted(()=>{m.value=C(),W().addEventListener("scroll",ut,{passive:!0}),q(),A(),requestAnimationFrame(()=>{q(),A()})}),t.onBeforeUnmount(()=>{W().removeEventListener("scroll",ut),T(),R++,ct(),L&&clearTimeout(L)}),t.watch(()=>e.anchors,()=>{e.anchors.some(o=>o.id===d.value)||(d.value=""),q(),A()},{deep:!0}),(o,a)=>{const h=t.resolveComponent("KButton"),y=t.resolveComponent("KDropdownItem"),S=t.resolveComponent("KDropdown");return t.openBlock(),t.createElementBlock("nav",{ref:"page-layout-anchor-navigation","aria-label":t.unref(c)("anchor_navigation.aria_label"),class:"page-layout-anchor-navigation","data-fit":s.value,"data-testid":"page-layout-anchor-navigation"},[t.createElementVNode("ul",{ref:"page-layout-anchor-navigation-list",class:t.normalizeClass({"layout-hidden":s.value==="hidden"})},[b.value.hasLeadingEllipsis?(t.openBlock(),t.createElementBlock("li",Dt," … ")):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(b.value.anchors,w=>(t.openBlock(),t.createElementBlock("li",{key:`${w.id}-anchor`},[t.createElementVNode("button",{"aria-current":w.id===d.value?"location":void 0,class:t.normalizeClass(["anchor-link",{active:w.id===d.value}]),"data-testid":p(w),title:w.label,type:"button",onClick:g=>pt(w)},t.toDisplayString(w.label),11,Lt)]))),128)),b.value.hasTrailingEllipsis?(t.openBlock(),t.createElementBlock("li",Rt," … ")):t.createCommentVNode("",!0),b.value.hasOverflowDropdown?(t.openBlock(),t.createElementBlock("li",Pt,[t.createVNode(S,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"anchor-navigation-overflow-dropdown-popover"}}},{items:t.withCtx(({closeDropdown:w})=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value,g=>(t.openBlock(),t.createBlock(y,{key:`${g.id}-dropdown-item`,"aria-current":g.id===d.value?"location":void 0,"data-testid":p(g),selected:g.id===d.value,onClick:K=>ue(g,w)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(g.label),1)]),_:2},1032,["aria-current","data-testid","selected","onClick"]))),128))]),default:t.withCtx(()=>[t.createVNode(h,{appearance:"tertiary","aria-label":t.unref(c)("anchor_navigation.more_button.aria_label"),class:"anchor-overflow-button","data-testid":"anchor-navigation-overflow-dropdown-button",icon:"",size:"small"},{default:t.withCtx(()=>[t.createVNode(t.unref(D.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(O)})`},null,8,["size"])]),_:1},8,["aria-label"])]),_:1})])):t.createCommentVNode("",!0)],2)],8,Vt)}}}),[["__scopeId","data-v-2f18cb71"]]),it=Symbol("nested-page-layout-detection"),rt="page-layout:new-appearance",zt={key:0,class:"page-layout-header","data-testid":"page-layout-header"},Ft={class:"page-header-container"},Mt={class:"page-header-start"},Ht={class:"title-container"},jt={key:1,class:"page-layout-title-wrapper"},vt={class:"page-layout-title","data-testid":"page-layout-title"},Wt=["aria-label"],qt={key:3,class:"title-after-container"},Ut={class:"page-header-actions-container"},Gt={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},Yt={class:"page-layout-content"},Jt=U(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},anchors:{default:()=>[]},pageShortcutData:{}},setup(e){const c=t.inject("app:navigateTo",null),n=t.inject(rt,null),l=t.inject("app:pageShortcutsContext",null),{i18n:{t:s}}=Z.useI18n(),d=J.useRouter(),u=J.useRoute(),i=t.computed(()=>!!(e.tabs&&e.tabs.length)),k=t.computed(()=>typeof e.backTo=="string"),b=t.computed(()=>t.toValue(n)===!0),p=t.computed(()=>b.value&&!i.value&&!!(e.anchors&&e.anchors.length)),m=t.computed(()=>!!e.pageShortcutData&&!!e.pageShortcutData.entityType&&!!e.pageShortcutData.label),C=t.computed(()=>m.value&&!!l&&"onFavoriteToggle"in l&&typeof l.onFavoriteToggle=="function"),E=t.ref(0),f=t.computed(()=>!!l&&"isFavorite"in l&&typeof l.isFavorite=="function"&&l.isFavorite(e.pageShortcutData)===!0),I=async()=>{if(e.backTo){if(typeof e.backTo=="object"){d.push(e.backTo);return}if(typeof c!="function"){window.location.href=e.backTo;return}await c(e.backTo)}},_=t.ref(0),V=t.computed(()=>_.value>0);t.provide(it,()=>(_.value++,()=>{_.value--}));const z=t.inject(it,null),r=t.ref(null);typeof z=="function"&&(r.value=z());const A=()=>{l.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||u.fullPath})};t.onUnmounted(()=>{r.value?.()});const L=Ct(()=>{!V.value&&m.value&&l&&"onEntityPageVisit"in l&&typeof l.onEntityPageVisit=="function"&&(l.onEntityPageVisit({...e.pageShortcutData,path:e.pageShortcutData?.path||u?.fullPath}),E.value++)},500);return t.watch([()=>e.pageShortcutData,()=>u?.fullPath],()=>{L()},{immediate:!0,deep:!0}),(N,F)=>{const M=t.resolveComponent("KBreadcrumbs"),R=t.resolveComponent("KTooltip"),G=t.resolveComponent("router-view");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":b.value}]),"data-testid":"kong-ui-public-page-layout"},[V.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",zt,[t.createElementVNode("div",Ft,[t.createElementVNode("div",Mt,[e.breadcrumbs&&e.breadcrumbs.length?(t.openBlock(),t.createBlock(M,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[b.value?{name:"divider",fn:t.withCtx(()=>[t.createVNode(t.unref(D.ChevronRightIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(O)})`},null,8,["size"])]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",Ht,[e.backTo&&!b.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(k.value?"a":"router-link"),t.mergeProps({key:0},k.value?{href:e.backTo}:{to:e.backTo},{"aria-label":t.unref(s)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:t.withModifiers(I,["prevent"]),onKeydown:t.withKeys(t.withModifiers(I,["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.createVNode(t.unref(D.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(O)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):t.createCommentVNode("",!0),e.title||N.$slots.title?(t.openBlock(),t.createElementBlock("span",jt,[t.renderSlot(N.$slots,"title",{},()=>[t.createElementVNode("h1",vt,t.toDisplayString(e.title),1)],!0)])):t.createCommentVNode("",!0),C.value?(t.openBlock(),t.createElementBlock("div",{key:E.value,class:"favorite-button-container"},[t.createVNode(R,{placement:"right",text:f.value?t.unref(s)("favorite_button.remove_shortcut"):t.unref(s)("favorite_button.save_shortcut")},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":f.value?t.unref(s)("favorite_button.remove_shortcut"):t.unref(s)("favorite_button.save_shortcut"),class:t.normalizeClass(["favorite-button",{active:f.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:A},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(f.value?t.unref(D.StarFillIcon):t.unref(D.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(O)})`},null,8,["size"]))],10,Wt)]),_:1},8,["text"])])):t.createCommentVNode("",!0),N.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",qt,[t.renderSlot(N.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),p.value?(t.openBlock(),t.createBlock(xt,{key:0,anchors:e.anchors},null,8,["anchors"])):t.createCommentVNode("",!0),t.createElementVNode("div",Ut,[t.renderSlot(N.$slots,"actions",{},void 0,!0),F[0]||(F[0]=t.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),i.value?(t.openBlock(),t.createBlock(At,{key:0,tabs:e.tabs},t.createSlots({_:2},[t.renderList(e.tabs,P=>({name:`tab-${P.key}`,fn:t.withCtx(v=>[t.renderSlot(N.$slots,`tab-${P.key}`,t.normalizeProps(t.guardReactiveProps(v)),void 0,!0)])}))]),1032,["tabs"])):t.createCommentVNode("",!0)])),t.createElementVNode("div",{class:t.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":V.value}])},[b.value&&N.$slots.aside?(t.openBlock(),t.createElementBlock("div",Gt,[t.renderSlot(N.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",Yt,[i.value?(t.openBlock(),t.createBlock(G,{key:0})):t.renderSlot(N.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-e714e65a"]]),Zt={key:0,class:"about-card-description","data-testid":"about-card-description"},Xt={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},Qt={key:2,class:"about-card-rows","data-testid":"about-card-rows"},te=["data-testid"],ee={class:"about-card-row-label"},oe={class:"about-card-row-text"},ne=["aria-label","data-testid"],ae={class:"about-card-row-value"},le={class:"about-card-row-text"},ie={key:3,class:"about-card-content","data-testid":"about-card-content"},re=U(t.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(e){const c=t.computed(()=>e.rows.length||4);return(n,l)=>{const s=t.resolveComponent("KSkeletonBox"),d=t.resolveComponent("KTooltip"),u=t.resolveComponent("KCard");return t.openBlock(),t.createBlock(u,{class:"kong-ui-public-about-card",title:e.title,"title-tag":e.titleTag},t.createSlots({default:t.withCtx(()=>[n.$slots.description||e.description?(t.openBlock(),t.createElementBlock("p",Zt,[t.renderSlot(n.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(e.description),1)],!0)])):t.createCommentVNode("",!0),e.isLoading?(t.openBlock(),t.createElementBlock("div",Xt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(c.value,i=>(t.openBlock(),t.createBlock(s,{key:i,height:"2",width:"100"}))),128))])):e.rows.length?(t.openBlock(),t.createElementBlock("dl",Qt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.rows,i=>(t.openBlock(),t.createElementBlock("div",{key:i.key,class:"about-card-row","data-testid":`about-card-row-${i.key}`},[t.createElementVNode("dt",ee,[t.renderSlot(n.$slots,`label-${i.key}`,{row:i},()=>[t.createElementVNode("span",oe,t.toDisplayString(i.label),1)],!0),i.tooltip?(t.openBlock(),t.createBlock(d,{key:0,text:i.tooltip},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":i.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${i.key}-tooltip`,type:"button"},[t.createVNode(t.unref(D.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(ht)})`},null,8,["size"])],8,ne)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",ae,[t.renderSlot(n.$slots,`row-${i.key}`,{row:i},()=>[t.createElementVNode("span",le,t.toDisplayString(i.value),1)],!0)])],8,te))),128))])):t.createCommentVNode("",!0),n.$slots.default?(t.openBlock(),t.createElementBlock("div",ie,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):t.createCommentVNode("",!0)]),_:2},[n.$slots.title||e.title?{name:"title",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"title",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)],!0)]),key:"0"}:void 0,n.$slots.actions?{name:"actions",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-86b6c183"]]);B.AboutCard=re,B.NEW_APPEARANCE_INJECTION_KEY=rt,B.PageLayout=Jt,Object.defineProperty(B,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-d9058e68]{display:flex;flex:1 1 0;justify-content:center;min-width:0;overflow-x:clip}.page-layout-anchor-navigation ul[data-v-d9058e68]{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-d9058e68]{display:none}.page-layout-anchor-navigation ul li[data-v-d9058e68]{display:flex}.page-layout-anchor-navigation .anchor-link[data-v-d9058e68]{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-d9058e68]: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-d9058e68]: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-d9058e68]{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-d9058e68]{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-d9058e68]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-e714e65a] .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-e714e65a] .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-e714e65a]{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-e714e65a],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]{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-e714e65a]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]: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-e714e65a]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]: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-e714e65a]{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-e714e65a]>*{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-e714e65a]{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-e714e65a]{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-e714e65a]: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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]>*{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-e714e65a],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-e714e65a]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{flex-shrink:0;width:400px}}.kong-ui-public-page-layout[data-v-e714e65a] [data-anchor-attention]{animation:anchor-attention-e714e65a 1s cubic-bezier(.2,0,0,1) both;animation:anchor-attention-e714e65a calc(var(--kui-animation-duration-20, .2s) * 5) cubic-bezier(.2,0,0,1) both}@media(prefers-reduced-motion:reduce){.kong-ui-public-page-layout[data-v-e714e65a] [data-anchor-attention]{animation-name:anchor-attention-still-e714e65a}}@keyframes anchor-attention-e714e65a{0%{box-shadow:0 0 color-mix(in srgb,#0044f4 80%,transparent);box-shadow:0 0 color-mix(in srgb,var(--kui-color-brand, #0044f4) 80%,transparent)}18%{box-shadow:0 0 0 4px color-mix(in srgb,#0044f4 70%,transparent);box-shadow:0 0 0 var(--kui-border-width-30, 4px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 70%,transparent)}55%{box-shadow:0 0 0 8px color-mix(in srgb,#0044f4 28%,transparent);box-shadow:0 0 0 calc(var(--kui-border-width-30, 4px) * 2) color-mix(in srgb,var(--kui-color-brand, #0044f4) 28%,transparent)}to{box-shadow:0 0 0 12px color-mix(in srgb,#0044f4 0%,transparent);box-shadow:0 0 0 calc(var(--kui-border-width-30, 4px) * 3) color-mix(in srgb,var(--kui-color-brand, #0044f4) 0%,transparent)}}@keyframes anchor-attention-still-e714e65a{0%,45%{box-shadow:0 0 0 2px color-mix(in srgb,#0044f4 70%,transparent);box-shadow:0 0 0 var(--kui-border-width-20, 2px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 70%,transparent)}to{box-shadow:0 0 0 2px color-mix(in srgb,#0044f4 0%,transparent);box-shadow:0 0 0 var(--kui-border-width-20, 2px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 0%,transparent)}}.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-2f18cb71]{display:flex;flex:1 1 0;justify-content:center;min-width:0;overflow-x:clip}.page-layout-anchor-navigation ul[data-v-2f18cb71]{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-2f18cb71]{display:none}.page-layout-anchor-navigation ul li[data-v-2f18cb71]{display:flex}.page-layout-anchor-navigation .anchor-link[data-v-2f18cb71]{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-2f18cb71]: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-2f18cb71]: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-2f18cb71]{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-2f18cb71]{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-2f18cb71]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489)}.kong-ui-public-page-layout[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-e714e65a] .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-e714e65a] .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-e714e65a]{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-e714e65a],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]{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-e714e65a]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]: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-e714e65a]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-e714e65a]: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-e714e65a]{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-e714e65a]>*{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-e714e65a]{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-e714e65a]{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-e714e65a]: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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]>*{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-e714e65a],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-e714e65a]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{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-e714e65a]{flex-shrink:0;width:400px}}.kong-ui-public-page-layout[data-v-e714e65a] [data-anchor-attention]{animation:anchor-attention-e714e65a 1s cubic-bezier(.2,0,0,1) both;animation:anchor-attention-e714e65a calc(var(--kui-animation-duration-20, .2s) * 5) cubic-bezier(.2,0,0,1) both}@media(prefers-reduced-motion:reduce){.kong-ui-public-page-layout[data-v-e714e65a] [data-anchor-attention]{animation-name:anchor-attention-still-e714e65a}}@keyframes anchor-attention-e714e65a{0%{box-shadow:0 0 color-mix(in srgb,#0044f4 80%,transparent);box-shadow:0 0 color-mix(in srgb,var(--kui-color-brand, #0044f4) 80%,transparent)}18%{box-shadow:0 0 0 4px color-mix(in srgb,#0044f4 70%,transparent);box-shadow:0 0 0 var(--kui-border-width-30, 4px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 70%,transparent)}55%{box-shadow:0 0 0 8px color-mix(in srgb,#0044f4 28%,transparent);box-shadow:0 0 0 calc(var(--kui-border-width-30, 4px) * 2) color-mix(in srgb,var(--kui-color-brand, #0044f4) 28%,transparent)}to{box-shadow:0 0 0 12px color-mix(in srgb,#0044f4 0%,transparent);box-shadow:0 0 0 calc(var(--kui-border-width-30, 4px) * 3) color-mix(in srgb,var(--kui-color-brand, #0044f4) 0%,transparent)}}@keyframes anchor-attention-still-e714e65a{0%,45%{box-shadow:0 0 0 2px color-mix(in srgb,#0044f4 70%,transparent);box-shadow:0 0 0 var(--kui-border-width-20, 2px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 70%,transparent)}to{box-shadow:0 0 0 2px color-mix(in srgb,#0044f4 0%,transparent);box-shadow:0 0 0 var(--kui-border-width-20, 2px) color-mix(in srgb,var(--kui-color-brand, #0044f4) 0%,transparent)}}.kong-ui-public-about-card[data-v-86b6c183]{--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-86b6c183]{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-86b6c183]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px)}.kong-ui-public-about-card .about-card-rows[data-v-86b6c183]{display:flex;flex-direction:column;margin:0;margin:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-86b6c183]{align-items:center;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;gap:8px;gap:var(--kui-space-40, 8px);min-height:47px;padding:8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-86b6c183]: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-86b6c183]:first-child{padding-top:0;padding-top:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-label[data-v-86b6c183]{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-86b6c183]{-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-86b6c183]{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-86b6c183]{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-86b6c183]{margin-top:16px;margin-top:var(--kui-space-60, 16px)}@container (max-width: 320px){.kong-ui-public-about-card .about-card-row[data-v-86b6c183]{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-86b6c183]{width:auto}}

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

@@ -1 +1 @@
-{"version":3,"file":"AboutCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AboutCard.vue"],"names":[],"mappings":"AA+OA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAY9D,KAAK,WAAW,GAAG,cAAc,CAAC;AAwMlC,QAAA,MAAM,UAAU,wSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"AboutCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AboutCard.vue"],"names":[],"mappings":"AAiPA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAY9D,KAAK,WAAW,GAAG,cAAc,CAAC;AAwMlC,QAAA,MAAM,UAAU,wSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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":"AA6uBA,OAAO,KAAK,EAAoB,+BAA+B,EAAE,MAAM,UAAU,CAAA;AAqvBjF,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":"AAyvBA,OAAO,KAAK,EAAoB,+BAA+B,EAAE,MAAM,UAAU,CAAA;AAiwBjF,QAAA,MAAM,YAAY,0UAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/page-layout",
-  "version": "1.3.2-pr.3955.d76d9b0e2.0",
+  "version": "1.3.2",
   "type": "module",
   "main": "./dist/page-layout.umd.js",
   "module": "./dist/page-layout.es.js",