@kong-ui-public/page-layout 1.2.0 → 1.2.1-pr.3941.913f636f2.0

package/dist/page-layout.es.js

@@ -1,38 +1,38 @@
-import { shallowRef as at, shallowReadonly as vt, getCurrentScope as ft, onScopeDispose as bt, toValue as L, watch as j, computed as g, getCurrentInstance as pt, onMounted as ot, defineComponent as J, useCssVars as yt, inject as z, useTemplateRef as Q, ref as O, onBeforeUnmount as gt, resolveComponent as P, openBlock as i, createElementBlock as r, createElementVNode as f, normalizeClass as x, Fragment as V, renderList as R, createBlock as _, resolveDynamicComponent as G, mergeProps as nt, withKeys as st, withModifiers as W, withCtx as w, renderSlot as h, createTextVNode as E, toDisplayString as K, createVNode as A, unref as v, createCommentVNode as y, nextTick as X, provide as ht, onUnmounted as mt, createSlots as Z, normalizeProps as kt, guardReactiveProps as $t } from "vue";
-import { useRouter as it, useRoute as wt } from "vue-router";
-import { createI18n as Tt, i18nTComponent as _t } from "@kong-ui-public/i18n";
-import { ChevronDownIcon as Ct, ArrowTopLeftIcon as It, StarFillIcon as St, StarIcon as Pt, InfoIcon as Kt } from "@kong/icons";
-const Dt = "Go back", Bt = { save_shortcut: "Save page to shortcuts", remove_shortcut: "Remove page from shortcuts" }, zt = { more_button: { label: "More", aria_label: "More tabs" } }, Rt = {
-  back_button: Dt,
-  favorite_button: Bt,
-  tabs: zt
+import { shallowRef as et, shallowReadonly as dt, getCurrentScope as vt, onScopeDispose as ft, toValue as F, watch as Z, computed as k, getCurrentInstance as bt, onMounted as at, defineComponent as J, inject as E, useTemplateRef as H, ref as L, onBeforeUnmount as pt, resolveComponent as C, openBlock as i, createElementBlock as c, createElementVNode as f, normalizeClass as N, Fragment as A, renderList as B, createBlock as _, resolveDynamicComponent as M, mergeProps as ot, withKeys as nt, withModifiers as j, withCtx as $, renderSlot as g, createTextVNode as R, toDisplayString as P, createVNode as z, unref as v, createCommentVNode as y, nextTick as Q, provide as yt, onUnmounted as gt, createSlots as U, normalizeProps as ht, guardReactiveProps as mt } from "vue";
+import { useRouter as st, useRoute as kt } from "vue-router";
+import { createI18n as $t, i18nTComponent as wt } from "@kong-ui-public/i18n";
+import { ChevronDownIcon as Tt, ArrowTopLeftIcon as _t, StarFillIcon as St, StarIcon as Ct, InfoIcon as It } from "@kong/icons";
+const Pt = "Go back", Kt = { save_shortcut: "Save page to shortcuts", remove_shortcut: "Remove page from shortcuts" }, Dt = { more_button: { label: "More", aria_label: "More tabs" } }, Bt = {
+  back_button: Pt,
+  favorite_button: Kt,
+  tabs: Dt
 };
-function Et() {
-  const t = Tt("en-us", Rt);
+function Rt() {
+  const t = $t("en-us", Bt);
   return {
     i18n: t,
-    i18nT: _t(t)
+    i18nT: wt(t)
     // Translation component <i18n-t>
   };
 }
-const lt = {
-  useI18n: Et
-}, At = "12px", H = "16px", Lt = "8px", Nt = "16px";
-function Ft(t, s) {
-  return ft() ? (bt(t, s), !0) : !1;
+const it = {
+  useI18n: Rt
+}, zt = "12px", G = "16px", Et = "16px";
+function Lt(t, s) {
+  return vt() ? (ft(t, s), !0) : !1;
 }
-const Ot = typeof window < "u" && typeof document < "u";
+const Nt = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const B = () => {
+const D = () => {
 };
-function xt(t, s) {
+function At(t, s) {
   function e(...a) {
-    return new Promise((u, d) => {
+    return new Promise((l, r) => {
       Promise.resolve(t(() => s.apply(this, a), {
         fn: s,
         thisArg: this,
         args: a
-      })).then(u).catch(d);
+      })).then(l).catch(r);
     });
   }
   return "cancel" in t && Object.assign(e, {
@@ -41,206 +41,201 @@ function xt(t, s) {
     isPending: t.isPending
   }), e;
 }
-function Vt(t, s = {}) {
-  let e, a, u = B, d = B;
-  const c = at(!1), n = (l) => {
-    clearTimeout(l), u(), u = B;
+function Ft(t, s = {}) {
+  let e, a, l = D, r = D;
+  const u = et(!1), o = (d) => {
+    clearTimeout(d), l(), l = D;
   };
-  let m;
-  return Object.assign((l) => {
-    const b = L(t), C = L(s.maxWait);
-    return e && n(e), b <= 0 || C !== void 0 && C <= 0 ? (a && (n(a), a = void 0), c.value = !1, Promise.resolve(l())) : (c.value = !0, new Promise(($, I) => {
-      u = s.rejectOnCancel ? I : $, d = $, m = l, C && !a && (a = setTimeout(() => {
-        e && n(e), a = void 0, c.value = !1, $(m());
-      }, C)), e = setTimeout(() => {
-        a && n(a), a = void 0, c.value = !1, $(l());
-      }, b);
+  let p;
+  return Object.assign((d) => {
+    const h = F(t), m = F(s.maxWait);
+    return e && o(e), h <= 0 || m !== void 0 && m <= 0 ? (a && (o(a), a = void 0), u.value = !1, Promise.resolve(d())) : (u.value = !0, new Promise((w, b) => {
+      l = s.rejectOnCancel ? b : w, r = w, p = d, m && !a && (a = setTimeout(() => {
+        e && o(e), a = void 0, u.value = !1, w(p());
+      }, m)), e = setTimeout(() => {
+        a && o(a), a = void 0, u.value = !1, w(d());
+      }, h);
     }));
   }, {
     cancel: () => {
-      e && (n(e), e = void 0), a && (n(a), a = void 0), c.value = !1, d = B;
+      e && (o(e), e = void 0), a && (o(a), a = void 0), u.value = !1, r = D;
     },
     flush: () => {
-      if (c.value) {
-        e && (clearTimeout(e), e = void 0), a && (clearTimeout(a), a = void 0), c.value = !1;
-        const l = d;
-        u = B, d = B, l(m());
+      if (u.value) {
+        e && (clearTimeout(e), e = void 0), a && (clearTimeout(a), a = void 0), u.value = !1;
+        const d = r;
+        l = D, r = D, d(p());
       }
     },
-    isPending: vt(c)
+    isPending: dt(u)
   });
 }
-function jt(t, s = 200, e = {}) {
-  return xt(Vt(s, e), t);
+function Ot(t, s = 200, e = {}) {
+  return At(Ft(s, e), t);
 }
-const Wt = Ot ? window : void 0;
-function tt(t) {
+const Vt = Nt ? window : void 0;
+function X(t) {
   var s;
-  const e = L(t);
+  const e = F(t);
   return (s = e?.$el) !== null && s !== void 0 ? s : e;
 }
 // @__NO_SIDE_EFFECTS__
-function Mt() {
-  const t = at(!1), s = pt();
-  return s && ot(() => {
+function Wt() {
+  const t = et(!1), s = bt();
+  return s && at(() => {
     t.value = !0;
   }, s), t;
 }
 // @__NO_SIDE_EFFECTS__
-function Ut(t) {
-  const s = /* @__PURE__ */ Mt();
-  return g(() => (s.value, !!t()));
+function jt(t) {
+  const s = /* @__PURE__ */ Wt();
+  return k(() => (s.value, !!t()));
 }
-function Gt(t, s, e = {}) {
-  const { window: a = Wt, ...u } = e;
-  let d;
-  const c = /* @__PURE__ */ Ut(() => a && "ResizeObserver" in a), n = () => {
-    d && (d.disconnect(), d = void 0);
-  }, m = j(g(() => {
-    const l = L(t);
-    return Array.isArray(l) ? l.map((b) => tt(b)) : [tt(l)];
-  }), (l) => {
-    if (n(), c.value && a) {
-      d = new ResizeObserver(s);
-      for (const b of l) b && d.observe(b, u);
+function xt(t, s, e = {}) {
+  const { window: a = Vt, ...l } = e;
+  let r;
+  const u = /* @__PURE__ */ jt(() => a && "ResizeObserver" in a), o = () => {
+    r && (r.disconnect(), r = void 0);
+  }, p = Z(k(() => {
+    const d = F(t);
+    return Array.isArray(d) ? d.map((h) => X(h)) : [X(d)];
+  }), (d) => {
+    if (o(), u.value && a) {
+      r = new ResizeObserver(s);
+      for (const h of d) h && r.observe(h, l);
     }
   }, {
     immediate: !0,
     flush: "post"
-  }), k = () => {
-    n(), m();
+  }), T = () => {
+    o(), p();
   };
-  return Ft(k), {
-    isSupported: c,
-    stop: k
+  return Lt(T), {
+    isSupported: u,
+    stop: T
   };
 }
-const et = /* @__PURE__ */ Symbol("nested-page-layout-detection"), ut = "page-layout:new-appearance", Zt = {
+const Mt = {
   ref: "page-layout-tabs",
   class: "page-layout-tabs",
   "data-testid": "page-layout-tabs"
-}, Ht = { key: 0 }, Jt = ["aria-label"], Yt = {
+}, Ut = { key: 0 }, Gt = ["aria-label"], Zt = {
   key: 0,
   class: "layout-loader-container"
-}, qt = /* @__PURE__ */ J({
+}, Jt = /* @__PURE__ */ J({
   __name: "PageLayoutTabs",
   props: {
     tabs: { default: () => [] }
   },
   setup(t) {
-    yt((p) => ({
-      v2c7bf110: n.value
-    }));
-    const { i18n: { t: s } } = lt.useI18n(), e = it(), a = z("app:navigateTo", null), u = (p) => {
-      if (typeof p.to != "string") {
-        e.push(p.to);
+    const { i18n: { t: s } } = it.useI18n(), e = st(), a = E("app:navigateTo", null), l = (b) => {
+      if (typeof b.to != "string") {
+        e.push(b.to);
         return;
       }
       if (typeof a != "function") {
-        window.location.href = p.to;
+        window.location.href = b.to;
         return;
       }
-      a(p.to);
-    }, d = z(ut, null), c = g(() => L(d) === !0), n = g(() => c.value ? Lt : Nt), m = Q("page-layout-tabs"), k = Q("page-layout-tabs-list"), l = O(t.tabs.length), b = O(!1), C = g(() => t.tabs.slice(0, l.value)), $ = g(() => t.tabs.slice(l.value)), I = async () => {
-      if (!m.value || !k.value)
+      a(b.to);
+    }, r = H("page-layout-tabs"), u = H("page-layout-tabs-list"), o = L(t.tabs.length), p = L(!1), T = k(() => t.tabs.slice(0, o.value)), d = k(() => t.tabs.slice(o.value)), h = async () => {
+      if (!r.value || !u.value)
         return;
-      b.value = !1, l.value = t.tabs.length, await X();
-      const p = m.value?.getBoundingClientRect().width - parseInt(n.value) * 2;
-      let D = k.value?.getBoundingClientRect().width;
-      if (!p || !D) {
-        b.value = !0;
+      p.value = !1, o.value = t.tabs.length, await Q();
+      const b = r.value?.getBoundingClientRect().width - parseInt(Et) * 2;
+      let I = u.value?.getBoundingClientRect().width;
+      if (!b || !I) {
+        p.value = !0;
         return;
       }
-      const F = 50;
-      for (; D + F > p && l.value > 1; )
-        l.value--, await X(), D = k.value?.getBoundingClientRect().width || 0;
-      b.value = !0;
+      const K = 50;
+      for (; I + K > b && o.value > 1; )
+        o.value--, await Q(), I = u.value?.getBoundingClientRect().width || 0;
+      p.value = !0;
     };
-    let S = null;
-    const N = () => {
-      S && clearTimeout(S), S = setTimeout(() => {
-        I();
+    let m = null;
+    const w = () => {
+      m && clearTimeout(m), m = setTimeout(() => {
+        h();
       }, 150);
     };
-    return ot(() => {
-      I(), Gt(m, N);
-    }), gt(() => {
-      S && clearTimeout(S);
-    }), j(() => t.tabs, () => {
-      I();
-    }, { deep: !0 }), j(n, () => {
-      I();
-    }), (p, D) => {
-      const F = P("KDropdownItem"), M = P("KDropdown"), T = P("KSkeletonBox");
-      return i(), r("nav", Zt, [
+    return at(() => {
+      h(), xt(r, w);
+    }), pt(() => {
+      m && clearTimeout(m);
+    }), Z(() => t.tabs, () => {
+      h();
+    }, { deep: !0 }), (b, I) => {
+      const K = C("KDropdownItem"), O = C("KDropdown"), V = C("KSkeletonBox");
+      return i(), c("nav", Mt, [
         f("ul", {
           ref: "page-layout-tabs-list",
-          class: x({ "layout-computing": !b.value })
+          class: N({ "layout-computing": !p.value })
         }, [
-          (i(!0), r(V, null, R(C.value, (o) => (i(), r("li", {
-            key: `${o.key}-tab`
+          (i(!0), c(A, null, B(T.value, (n) => (i(), c("li", {
+            key: `${n.key}-tab`
           }, [
-            (i(), _(G(typeof o.to == "string" ? "a" : "router-link"), nt({ ref_for: !0 }, typeof o.to == "string" ? { href: o.to } : { to: o.to }, {
-              "aria-current": o.active ? "page" : void 0,
-              class: ["tab-link", { active: o.active }],
-              "data-testid": o.dataTestId ? o.dataTestId : `page-layout-tab-${o.key}`,
+            (i(), _(M(typeof n.to == "string" ? "a" : "router-link"), ot({ ref_for: !0 }, typeof n.to == "string" ? { href: n.to } : { to: n.to }, {
+              "aria-current": n.active ? "page" : void 0,
+              class: ["tab-link", { active: n.active }],
+              "data-testid": n.dataTestId ? n.dataTestId : `page-layout-tab-${n.key}`,
               tabindex: "0",
-              onClick: W((U) => u(o), ["prevent"]),
-              onKeydown: st(W((U) => u(o), ["prevent"]), ["enter"])
+              onClick: j((x) => l(n), ["prevent"]),
+              onKeydown: nt(j((x) => l(n), ["prevent"]), ["enter"])
             }), {
-              default: w(() => [
-                h(p.$slots, `tab-${o.key}`, { tab: o }, () => [
-                  E(K(o.label), 1)
+              default: $(() => [
+                g(b.$slots, `tab-${n.key}`, { tab: n }, () => [
+                  R(P(n.label), 1)
                 ], !0)
               ]),
               _: 2
             }, 1040, ["aria-current", "class", "data-testid", "onClick", "onKeydown"]))
           ]))), 128)),
-          t.tabs.length > l.value ? (i(), r("li", Ht, [
-            A(M, { "kpop-attributes": {
+          t.tabs.length > o.value ? (i(), c("li", Ut, [
+            z(O, { "kpop-attributes": {
               placement: "bottom-end",
               popoverElementAttributes: { "data-testid": "tabs-overflow-dropdown-popover" }
             } }, {
-              items: w(() => [
-                (i(!0), r(V, null, R($.value, (o) => (i(), _(F, {
-                  key: `${o.key}-dropdown-item`,
-                  "aria-current": o.active ? "page" : void 0,
-                  "data-testid": o.dataTestId ? o.dataTestId : `page-layout-tab-${o.key}`,
+              items: $(() => [
+                (i(!0), c(A, null, B(d.value, (n) => (i(), _(K, {
+                  key: `${n.key}-dropdown-item`,
+                  "aria-current": n.active ? "page" : void 0,
+                  "data-testid": n.dataTestId ? n.dataTestId : `page-layout-tab-${n.key}`,
                   item: {
-                    label: o.label,
-                    value: o.key,
-                    to: o.to
+                    label: n.label,
+                    value: n.key,
+                    to: n.to
                   },
-                  selected: o.active
+                  selected: n.active
                 }, {
-                  default: w(() => [
-                    h(p.$slots, `tab-${o.key}`, { tab: o }, () => [
-                      E(K(o.label), 1)
+                  default: $(() => [
+                    g(b.$slots, `tab-${n.key}`, { tab: n }, () => [
+                      R(P(n.label), 1)
                     ], !0)
                   ]),
                   _: 2
                 }, 1032, ["aria-current", "data-testid", "item", "selected"]))), 128))
               ]),
-              default: w(() => [
+              default: $(() => [
                 f("button", {
                   "aria-label": v(s)("tabs.more_button.aria_label"),
-                  class: x(["tab-link", { active: $.value.find((o) => o.active) }]),
+                  class: N(["tab-link", { active: d.value.find((n) => n.active) }]),
                   "data-testid": "tabs-overflow-dropdown-button"
                 }, [
-                  E(K(v(s)("tabs.more_button.label")) + " ", 1),
-                  A(v(Ct), {
+                  R(P(v(s)("tabs.more_button.label")) + " ", 1),
+                  z(v(Tt), {
                     decorative: "",
-                    size: `var(--kui-icon-size-30, ${v(H)})`
+                    size: `var(--kui-icon-size-30, ${v(G)})`
                   }, null, 8, ["size"])
-                ], 10, Jt)
+                ], 10, Gt)
               ]),
               _: 3
             })
           ])) : y("", !0)
         ], 2),
-        b.value ? y("", !0) : (i(), r("div", Yt, [
-          (i(), r(V, null, R(3, (o) => A(T, {
-            key: `layout-loader-${o}`,
+        p.value ? y("", !0) : (i(), c("div", Zt, [
+          (i(), c(A, null, B(3, (n) => z(V, {
+            key: `layout-loader-${n}`,
             height: "1",
             width: "5"
           })), 64))
@@ -250,27 +245,27 @@ const et = /* @__PURE__ */ Symbol("nested-page-layout-detection"), ut = "page-la
   }
 }), Y = (t, s) => {
   const e = t.__vccOpts || t;
-  for (const [a, u] of s)
-    e[a] = u;
+  for (const [a, l] of s)
+    e[a] = l;
   return e;
-}, Qt = /* @__PURE__ */ Y(qt, [["__scopeId", "data-v-da8e77b9"]]), Xt = {
+}, Yt = /* @__PURE__ */ Y(Jt, [["__scopeId", "data-v-02891bc1"]]), tt = /* @__PURE__ */ Symbol("nested-page-layout-detection"), qt = "page-layout:new-appearance", Ht = {
   key: 0,
   class: "page-layout-header",
   "data-testid": "page-layout-header"
-}, te = { class: "page-header-container" }, ee = { class: "page-header-start" }, ae = { class: "title-container" }, oe = {
+}, Qt = { class: "page-header-container" }, Xt = { class: "page-header-start" }, te = { class: "title-container" }, ee = {
   key: 1,
   class: "page-layout-title-wrapper"
-}, ne = {
+}, ae = {
   class: "page-layout-title",
   "data-testid": "page-layout-title"
-}, se = ["aria-label"], ie = {
+}, oe = ["aria-label"], ne = {
   key: 3,
   class: "title-after-container"
-}, le = { class: "page-header-actions-container" }, ue = {
+}, se = { class: "page-header-actions-container" }, ie = {
   key: 0,
   class: "page-layout-aside-container",
   "data-testid": "page-layout-aside"
-}, re = { class: "page-layout-content" }, ce = /* @__PURE__ */ J({
+}, le = { class: "page-layout-content" }, ue = /* @__PURE__ */ J({
   __name: "PageLayout",
   props: {
     breadcrumbs: { default: () => [] },
@@ -280,10 +275,10 @@ const et = /* @__PURE__ */ Symbol("nested-page-layout-detection"), ut = "page-la
     pageShortcutData: {}
   },
   setup(t) {
-    const s = z("app:navigateTo", null), e = z(ut, null), a = z("app:pageShortcutsContext", null), { i18n: { t: u } } = lt.useI18n(), d = it(), c = wt(), n = g(() => !!(t.tabs && t.tabs.length)), m = g(() => typeof t.backTo == "string"), k = g(() => L(e) === !0), l = g(() => !!t.pageShortcutData && !!t.pageShortcutData.entityType && !!t.pageShortcutData.label), b = g(() => l.value && !!a && "onFavoriteToggle" in a && typeof a.onFavoriteToggle == "function"), C = O(0), $ = g(() => !!a && "isFavorite" in a && typeof a.isFavorite == "function" && a.isFavorite(t.pageShortcutData) === !0), I = async () => {
+    const s = E("app:navigateTo", null), e = E(qt, null), a = E("app:pageShortcutsContext", null), { i18n: { t: l } } = it.useI18n(), r = st(), u = kt(), o = k(() => !!(t.tabs && t.tabs.length)), p = k(() => typeof t.backTo == "string"), T = k(() => F(e) === !0), d = k(() => !!t.pageShortcutData && !!t.pageShortcutData.entityType && !!t.pageShortcutData.label), h = k(() => d.value && !!a && "onFavoriteToggle" in a && typeof a.onFavoriteToggle == "function"), m = L(0), w = k(() => !!a && "isFavorite" in a && typeof a.isFavorite == "function" && a.isFavorite(t.pageShortcutData) === !0), b = async () => {
       if (t.backTo) {
         if (typeof t.backTo == "object") {
-          d.push(t.backTo);
+          r.push(t.backTo);
           return;
         }
         if (typeof s != "function") {
@@ -292,146 +287,146 @@ const et = /* @__PURE__ */ Symbol("nested-page-layout-detection"), ut = "page-la
         }
         await s(t.backTo);
       }
-    }, S = O(0), N = g(() => S.value > 0);
-    ht(et, () => (S.value++, () => {
-      S.value--;
+    }, I = L(0), K = k(() => I.value > 0);
+    yt(tt, () => (I.value++, () => {
+      I.value--;
     }));
-    const p = z(et, null), D = O(null);
-    typeof p == "function" && (D.value = p());
-    const F = () => {
-      a.onFavoriteToggle({ ...t.pageShortcutData, path: t.pageShortcutData?.path || c.fullPath });
+    const O = E(tt, null), V = L(null);
+    typeof O == "function" && (V.value = O());
+    const n = () => {
+      a.onFavoriteToggle({ ...t.pageShortcutData, path: t.pageShortcutData?.path || u.fullPath });
     };
-    mt(() => {
-      D.value?.();
+    gt(() => {
+      V.value?.();
     });
-    const M = jt(() => {
-      !N.value && l.value && a && "onEntityPageVisit" in a && typeof a.onEntityPageVisit == "function" && (a.onEntityPageVisit({ ...t.pageShortcutData, path: t.pageShortcutData?.path || c?.fullPath }), C.value++);
+    const x = Ot(() => {
+      !K.value && d.value && a && "onEntityPageVisit" in a && typeof a.onEntityPageVisit == "function" && (a.onEntityPageVisit({ ...t.pageShortcutData, path: t.pageShortcutData?.path || u?.fullPath }), m.value++);
     }, 500);
-    return j([() => t.pageShortcutData, () => c?.fullPath], () => {
-      M();
-    }, { immediate: !0, deep: !0 }), (T, o) => {
-      const U = P("KBreadcrumbs"), rt = P("KTooltip"), ct = P("router-view");
-      return i(), r("div", {
-        class: x(["kong-ui-public-page-layout", { "new-appearance": k.value }]),
+    return Z([() => t.pageShortcutData, () => u?.fullPath], () => {
+      x();
+    }, { immediate: !0, deep: !0 }), (S, W) => {
+      const lt = C("KBreadcrumbs"), ut = C("KTooltip"), rt = C("router-view");
+      return i(), c("div", {
+        class: N(["kong-ui-public-page-layout", { "new-appearance": T.value }]),
         "data-testid": "kong-ui-public-page-layout"
       }, [
-        N.value ? y("", !0) : (i(), r("div", Xt, [
-          f("div", te, [
-            f("div", ee, [
-              t.breadcrumbs && t.breadcrumbs.length ? (i(), _(U, {
+        K.value ? y("", !0) : (i(), c("div", Ht, [
+          f("div", Qt, [
+            f("div", Xt, [
+              t.breadcrumbs && t.breadcrumbs.length ? (i(), _(lt, {
                 key: 0,
                 class: "header-breadcrumbs",
                 "data-testid": "page-layout-breadcrumbs",
                 "item-max-width": "25ch",
                 items: t.breadcrumbs
-              }, Z({ _: 2 }, [
-                k.value ? {
+              }, U({ _: 2 }, [
+                T.value ? {
                   name: "divider",
-                  fn: w(() => [
-                    o[0] || (o[0] = E(" › ", -1))
+                  fn: $(() => [
+                    W[0] || (W[0] = R(" › ", -1))
                   ]),
                   key: "0"
                 } : void 0
               ]), 1032, ["items"])) : y("", !0),
-              f("div", ae, [
-                t.backTo && !k.value ? (i(), _(G(m.value ? "a" : "router-link"), nt({ key: 0 }, m.value ? { href: t.backTo } : { to: t.backTo }, {
-                  "aria-label": v(u)("back_button"),
+              f("div", te, [
+                t.backTo && !T.value ? (i(), _(M(p.value ? "a" : "router-link"), ot({ key: 0 }, p.value ? { href: t.backTo } : { to: t.backTo }, {
+                  "aria-label": v(l)("back_button"),
                   class: "navigate-back",
                   "data-testid": "page-layout-navigate-back",
                   tabindex: "0",
-                  onClick: W(I, ["prevent"]),
-                  onKeydown: st(W(I, ["prevent"]), ["enter"])
+                  onClick: j(b, ["prevent"]),
+                  onKeydown: nt(j(b, ["prevent"]), ["enter"])
                 }), {
-                  default: w(() => [
-                    A(v(It), {
+                  default: $(() => [
+                    z(v(_t), {
                       decorative: "",
-                      size: `var(--kui-icon-size-30, ${v(H)})`
+                      size: `var(--kui-icon-size-30, ${v(G)})`
                     }, null, 8, ["size"])
                   ]),
                   _: 1
                 }, 16, ["aria-label", "onKeydown"])) : y("", !0),
-                t.title || T.$slots.title ? (i(), r("span", oe, [
-                  h(T.$slots, "title", {}, () => [
-                    f("h1", ne, K(t.title), 1)
+                t.title || S.$slots.title ? (i(), c("span", ee, [
+                  g(S.$slots, "title", {}, () => [
+                    f("h1", ae, P(t.title), 1)
                   ], !0)
                 ])) : y("", !0),
-                b.value ? (i(), r("div", {
-                  key: C.value,
+                h.value ? (i(), c("div", {
+                  key: m.value,
                   class: "favorite-button-container"
                 }, [
-                  A(rt, {
+                  z(ut, {
                     placement: "right",
-                    text: $.value ? v(u)("favorite_button.remove_shortcut") : v(u)("favorite_button.save_shortcut")
+                    text: w.value ? v(l)("favorite_button.remove_shortcut") : v(l)("favorite_button.save_shortcut")
                   }, {
-                    default: w(() => [
+                    default: $(() => [
                       f("button", {
-                        "aria-label": $.value ? v(u)("favorite_button.remove_shortcut") : v(u)("favorite_button.save_shortcut"),
-                        class: x(["favorite-button", { active: $.value }]),
+                        "aria-label": w.value ? v(l)("favorite_button.remove_shortcut") : v(l)("favorite_button.save_shortcut"),
+                        class: N(["favorite-button", { active: w.value }]),
                         "data-testid": "page-layout-favorite-button",
                         type: "button",
-                        onClick: F
+                        onClick: n
                       }, [
-                        (i(), _(G($.value ? v(St) : v(Pt)), {
+                        (i(), _(M(w.value ? v(St) : v(Ct)), {
                           decorative: "",
-                          size: `var(--kui-icon-size-30, ${v(H)})`
+                          size: `var(--kui-icon-size-30, ${v(G)})`
                         }, null, 8, ["size"]))
-                      ], 10, se)
+                      ], 10, oe)
                     ]),
                     _: 1
                   }, 8, ["text"])
                 ])) : y("", !0),
-                T.$slots["title-after"] ? (i(), r("div", ie, [
-                  h(T.$slots, "title-after", {}, void 0, !0)
+                S.$slots["title-after"] ? (i(), c("div", ne, [
+                  g(S.$slots, "title-after", {}, void 0, !0)
                 ])) : y("", !0)
               ])
             ]),
-            f("div", le, [
-              h(T.$slots, "actions", {}, void 0, !0),
-              o[1] || (o[1] = f("div", { "data-teleport-target": "ask-kai" }, null, -1))
+            f("div", se, [
+              g(S.$slots, "actions", {}, void 0, !0),
+              W[1] || (W[1] = f("div", { "data-teleport-target": "ask-kai" }, null, -1))
             ])
           ]),
-          n.value ? (i(), _(Qt, {
+          o.value ? (i(), _(Yt, {
             key: 0,
             tabs: t.tabs
-          }, Z({ _: 2 }, [
-            R(t.tabs, (q) => ({
+          }, U({ _: 2 }, [
+            B(t.tabs, (q) => ({
               name: `tab-${q.key}`,
-              fn: w((dt) => [
-                h(T.$slots, `tab-${q.key}`, kt($t(dt)), void 0, !0)
+              fn: $((ct) => [
+                g(S.$slots, `tab-${q.key}`, ht(mt(ct)), void 0, !0)
               ])
             }))
           ]), 1032, ["tabs"])) : y("", !0)
         ])),
         f("div", {
-          class: x(["page-layout-content-container", { "has-nested-page-layout": N.value }])
+          class: N(["page-layout-content-container", { "has-nested-page-layout": K.value }])
         }, [
-          k.value && T.$slots.aside ? (i(), r("div", ue, [
-            h(T.$slots, "aside", {}, void 0, !0)
+          T.value && S.$slots.aside ? (i(), c("div", ie, [
+            g(S.$slots, "aside", {}, void 0, !0)
           ])) : y("", !0),
-          f("div", re, [
-            n.value ? (i(), _(ct, { key: 0 })) : h(T.$slots, "default", {}, void 0, !0, 1)
+          f("div", le, [
+            o.value ? (i(), _(rt, { key: 0 })) : g(S.$slots, "default", {}, void 0, !0, 1)
           ])
         ], 2)
       ], 2);
     };
   }
-}), Ie = /* @__PURE__ */ Y(ce, [["__scopeId", "data-v-b6604b63"]]), de = {
+}), _e = /* @__PURE__ */ Y(ue, [["__scopeId", "data-v-ada53013"]]), re = {
   key: 0,
   class: "about-card-description",
   "data-testid": "about-card-description"
-}, ve = {
+}, ce = {
   key: 1,
   class: "about-card-skeleton",
   "data-testid": "about-card-skeleton"
-}, fe = {
+}, de = {
   key: 2,
   class: "about-card-rows",
   "data-testid": "about-card-rows"
-}, be = ["data-testid"], pe = { class: "about-card-row-label" }, ye = { class: "about-card-row-text" }, ge = ["aria-label", "data-testid"], he = { class: "about-card-row-value" }, me = { class: "about-card-row-text" }, ke = {
+}, ve = ["data-testid"], fe = { class: "about-card-row-label" }, be = { class: "about-card-row-text" }, pe = ["aria-label", "data-testid"], ye = { class: "about-card-row-value" }, ge = { class: "about-card-row-text" }, he = {
   key: 3,
   class: "about-card-content",
   "data-testid": "about-card-content"
-}, $e = /* @__PURE__ */ J({
+}, me = /* @__PURE__ */ J({
   __name: "AboutCard",
   props: {
     title: { default: "" },
@@ -441,90 +436,90 @@ const et = /* @__PURE__ */ Symbol("nested-page-layout-detection"), ut = "page-la
     isLoading: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const s = g(() => t.rows.length || 4);
+    const s = k(() => t.rows.length || 4);
     return (e, a) => {
-      const u = P("KSkeletonBox"), d = P("KTooltip"), c = P("KCard");
-      return i(), _(c, {
+      const l = C("KSkeletonBox"), r = C("KTooltip"), u = C("KCard");
+      return i(), _(u, {
         class: "kong-ui-public-about-card",
         title: t.title,
         "title-tag": t.titleTag
-      }, Z({
-        default: w(() => [
-          e.$slots.description || t.description ? (i(), r("p", de, [
-            h(e.$slots, "description", {}, () => [
-              E(K(t.description), 1)
+      }, U({
+        default: $(() => [
+          e.$slots.description || t.description ? (i(), c("p", re, [
+            g(e.$slots, "description", {}, () => [
+              R(P(t.description), 1)
             ], !0)
           ])) : y("", !0),
-          t.isLoading ? (i(), r("div", ve, [
-            (i(!0), r(V, null, R(s.value, (n) => (i(), _(u, {
-              key: n,
+          t.isLoading ? (i(), c("div", ce, [
+            (i(!0), c(A, null, B(s.value, (o) => (i(), _(l, {
+              key: o,
               height: "2",
               width: "100"
             }))), 128))
-          ])) : t.rows.length ? (i(), r("dl", fe, [
-            (i(!0), r(V, null, R(t.rows, (n) => (i(), r("div", {
-              key: n.key,
+          ])) : t.rows.length ? (i(), c("dl", de, [
+            (i(!0), c(A, null, B(t.rows, (o) => (i(), c("div", {
+              key: o.key,
               class: "about-card-row",
-              "data-testid": `about-card-row-${n.key}`
+              "data-testid": `about-card-row-${o.key}`
             }, [
-              f("dt", pe, [
-                h(e.$slots, `label-${n.key}`, { row: n }, () => [
-                  f("span", ye, K(n.label), 1)
+              f("dt", fe, [
+                g(e.$slots, `label-${o.key}`, { row: o }, () => [
+                  f("span", be, P(o.label), 1)
                 ], !0),
-                n.tooltip ? (i(), _(d, {
+                o.tooltip ? (i(), _(r, {
                   key: 0,
-                  text: n.tooltip
+                  text: o.tooltip
                 }, {
-                  default: w(() => [
+                  default: $(() => [
                     f("button", {
-                      "aria-label": n.tooltip,
+                      "aria-label": o.tooltip,
                       class: "about-card-row-tooltip-trigger",
-                      "data-testid": `about-card-row-${n.key}-tooltip`,
+                      "data-testid": `about-card-row-${o.key}-tooltip`,
                       type: "button"
                     }, [
-                      A(v(Kt), {
-                        size: `var(--kui-icon-size-20, ${v(At)})`
+                      z(v(It), {
+                        size: `var(--kui-icon-size-20, ${v(zt)})`
                       }, null, 8, ["size"])
-                    ], 8, ge)
+                    ], 8, pe)
                   ]),
                   _: 2
                 }, 1032, ["text"])) : y("", !0)
               ]),
-              f("dd", he, [
-                h(e.$slots, `row-${n.key}`, { row: n }, () => [
-                  f("span", me, K(n.value), 1)
+              f("dd", ye, [
+                g(e.$slots, `row-${o.key}`, { row: o }, () => [
+                  f("span", ge, P(o.value), 1)
                 ], !0)
               ])
-            ], 8, be))), 128))
+            ], 8, ve))), 128))
           ])) : y("", !0),
-          e.$slots.default ? (i(), r("div", ke, [
-            h(e.$slots, "default", {}, void 0, !0)
+          e.$slots.default ? (i(), c("div", he, [
+            g(e.$slots, "default", {}, void 0, !0)
           ])) : y("", !0)
         ]),
         _: 2
       }, [
         e.$slots.title || t.title ? {
           name: "title",
-          fn: w(() => [
-            h(e.$slots, "title", {}, () => [
-              E(K(t.title), 1)
+          fn: $(() => [
+            g(e.$slots, "title", {}, () => [
+              R(P(t.title), 1)
             ], !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.actions ? {
           name: "actions",
-          fn: w(() => [
-            h(e.$slots, "actions", {}, void 0, !0)
+          fn: $(() => [
+            g(e.$slots, "actions", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0
       ]), 1032, ["title", "title-tag"]);
     };
   }
-}), Se = /* @__PURE__ */ Y($e, [["__scopeId", "data-v-0316c887"]]);
+}), Se = /* @__PURE__ */ Y(me, [["__scopeId", "data-v-0316c887"]]);
 export {
   Se as AboutCard,
-  ut as NEW_APPEARANCE_INJECTION_KEY,
-  Ie as PageLayout
+  qt as NEW_APPEARANCE_INJECTION_KEY,
+  _e as PageLayout
 };

package/dist/page-layout.umd.js

@@ -1 +1 @@
-(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,t(m["kong-ui-public-page-layout"]={},m.Vue,m.VueRouter,m["kong-ui-public-i18n"],m.KongIcons))})(this,(function(m,t,E,D,S){"use strict";const R={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"}}};function A(){const e=D.createI18n("en-us",R);return{i18n:e,i18nT:D.i18nTComponent(e)}}const K={useI18n:A},F="12px",N="16px",j="8px",O="16px";function M(e,r){return t.getCurrentScope()?(t.onScopeDispose(e,r),!0):!1}const W=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const w=()=>{};function U(e,r){function o(...a){return new Promise((i,d)=>{Promise.resolve(e(()=>r.apply(this,a),{fn:r,thisArg:this,args:a})).then(i).catch(d)})}return"cancel"in e&&Object.assign(o,{cancel:e.cancel,flush:e.flush,isPending:e.isPending}),o}function q(e,r={}){let o,a,i=w,d=w;const c=t.shallowRef(!1),l=s=>{clearTimeout(s),i(),i=w};let f;return Object.assign(s=>{const u=t.toValue(e),g=t.toValue(r.maxWait);return o&&l(o),u<=0||g!==void 0&&g<=0?(a&&(l(a),a=void 0),c.value=!1,Promise.resolve(s())):(c.value=!0,new Promise((b,h)=>{i=r.rejectOnCancel?h:b,d=b,f=s,g&&!a&&(a=setTimeout(()=>{o&&l(o),a=void 0,c.value=!1,b(f())},g)),o=setTimeout(()=>{a&&l(a),a=void 0,c.value=!1,b(s())},u)}))},{cancel:()=>{o&&(l(o),o=void 0),a&&(l(a),a=void 0),c.value=!1,d=w},flush:()=>{if(c.value){o&&(clearTimeout(o),o=void 0),a&&(clearTimeout(a),a=void 0),c.value=!1;const s=d;i=w,d=w,s(f())}},isPending:t.shallowReadonly(c)})}function G(e,r=200,o={}){return U(q(r,o),e)}const J=W?window:void 0;function x(e){var r;const o=t.toValue(e);return(r=o?.$el)!==null&&r!==void 0?r:o}function Y(){const e=t.shallowRef(!1),r=t.getCurrentInstance();return r&&t.onMounted(()=>{e.value=!0},r),e}function Z(e){const r=Y();return t.computed(()=>(r.value,!!e()))}function H(e,r,o={}){const{window:a=J,...i}=o;let d;const c=Z(()=>a&&"ResizeObserver"in a),l=()=>{d&&(d.disconnect(),d=void 0)},f=t.watch(t.computed(()=>{const s=t.toValue(e);return Array.isArray(s)?s.map(u=>x(u)):[x(s)]}),s=>{if(l(),c.value&&a){d=new ResizeObserver(r);for(const u of s)u&&d.observe(u,i)}},{immediate:!0,flush:"post"}),k=()=>{l(),f()};return M(k),{isSupported:c,stop:k}}const z=Symbol("nested-page-layout-detection"),V="page-layout:new-appearance",Q={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},X={key:0},v=["aria-label"],tt={key:0,class:"layout-loader-container"},et=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){t.useCssVars(p=>({v2c7bf110:l.value}));const{i18n:{t:r}}=K.useI18n(),o=E.useRouter(),a=t.inject("app:navigateTo",null),i=p=>{if(typeof p.to!="string"){o.push(p.to);return}if(typeof a!="function"){window.location.href=p.to;return}a(p.to)},d=t.inject(V,null),c=t.computed(()=>t.toValue(d)===!0),l=t.computed(()=>c.value?j:O),f=t.useTemplateRef("page-layout-tabs"),k=t.useTemplateRef("page-layout-tabs-list"),s=t.ref(e.tabs.length),u=t.ref(!1),g=t.computed(()=>e.tabs.slice(0,s.value)),b=t.computed(()=>e.tabs.slice(s.value)),h=async()=>{if(!f.value||!k.value)return;u.value=!1,s.value=e.tabs.length,await t.nextTick();const p=f.value?.getBoundingClientRect().width-parseInt(l.value)*2;let B=k.value?.getBoundingClientRect().width;if(!p||!B){u.value=!0;return}const $=50;for(;B+$>p&&s.value>1;)s.value--,await t.nextTick(),B=k.value?.getBoundingClientRect().width||0;u.value=!0};let C=null;const T=()=>{C&&clearTimeout(C),C=setTimeout(()=>{h()},150)};return t.onMounted(()=>{h(),H(f,T)}),t.onBeforeUnmount(()=>{C&&clearTimeout(C)}),t.watch(()=>e.tabs,()=>{h()},{deep:!0}),t.watch(l,()=>{h()}),(p,B)=>{const $=t.resolveComponent("KDropdownItem"),I=t.resolveComponent("KDropdown"),y=t.resolveComponent("KSkeletonBox");return t.openBlock(),t.createElementBlock("nav",Q,[t.createElementVNode("ul",{ref:"page-layout-tabs-list",class:t.normalizeClass({"layout-computing":!u.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(g.value,n=>(t.openBlock(),t.createElementBlock("li",{key:`${n.key}-tab`},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(typeof n.to=="string"?"a":"router-link"),t.mergeProps({ref_for:!0},typeof n.to=="string"?{href:n.to}:{to:n.to},{"aria-current":n.active?"page":void 0,class:["tab-link",{active:n.active}],"data-testid":n.dataTestId?n.dataTestId:`page-layout-tab-${n.key}`,tabindex:"0",onClick:t.withModifiers(P=>i(n),["prevent"]),onKeydown:t.withKeys(t.withModifiers(P=>i(n),["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.renderSlot(p.$slots,`tab-${n.key}`,{tab:n},()=>[t.createTextVNode(t.toDisplayString(n.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),e.tabs.length>s.value?(t.openBlock(),t.createElementBlock("li",X,[t.createVNode(I,{"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(b.value,n=>(t.openBlock(),t.createBlock($,{key:`${n.key}-dropdown-item`,"aria-current":n.active?"page":void 0,"data-testid":n.dataTestId?n.dataTestId:`page-layout-tab-${n.key}`,item:{label:n.label,value:n.key,to:n.to},selected:n.active},{default:t.withCtx(()=>[t.renderSlot(p.$slots,`tab-${n.key}`,{tab:n},()=>[t.createTextVNode(t.toDisplayString(n.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":t.unref(r)("tabs.more_button.aria_label"),class:t.normalizeClass(["tab-link",{active:b.value.find(n=>n.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[t.createTextVNode(t.toDisplayString(t.unref(r)("tabs.more_button.label"))+" ",1),t.createVNode(t.unref(S.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},null,8,["size"])],10,v)]),_:3})])):t.createCommentVNode("",!0)],2),u.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",tt,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(3,n=>t.createVNode(y,{key:`layout-loader-${n}`,height:"1",width:"5"})),64))]))],512)}}}),_=(e,r)=>{const o=e.__vccOpts||e;for(const[a,i]of r)o[a]=i;return o},ot=_(et,[["__scopeId","data-v-da8e77b9"]]),at={key:0,class:"page-layout-header","data-testid":"page-layout-header"},nt={class:"page-header-container"},lt={class:"page-header-start"},rt={class:"title-container"},st={key:1,class:"page-layout-title-wrapper"},it={class:"page-layout-title","data-testid":"page-layout-title"},ct=["aria-label"],dt={key:3,class:"title-after-container"},ut={class:"page-header-actions-container"},pt={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},mt={class:"page-layout-content"},ft=_(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},pageShortcutData:{}},setup(e){const r=t.inject("app:navigateTo",null),o=t.inject(V,null),a=t.inject("app:pageShortcutsContext",null),{i18n:{t:i}}=K.useI18n(),d=E.useRouter(),c=E.useRoute(),l=t.computed(()=>!!(e.tabs&&e.tabs.length)),f=t.computed(()=>typeof e.backTo=="string"),k=t.computed(()=>t.toValue(o)===!0),s=t.computed(()=>!!e.pageShortcutData&&!!e.pageShortcutData.entityType&&!!e.pageShortcutData.label),u=t.computed(()=>s.value&&!!a&&"onFavoriteToggle"in a&&typeof a.onFavoriteToggle=="function"),g=t.ref(0),b=t.computed(()=>!!a&&"isFavorite"in a&&typeof a.isFavorite=="function"&&a.isFavorite(e.pageShortcutData)===!0),h=async()=>{if(e.backTo){if(typeof e.backTo=="object"){d.push(e.backTo);return}if(typeof r!="function"){window.location.href=e.backTo;return}await r(e.backTo)}},C=t.ref(0),T=t.computed(()=>C.value>0);t.provide(z,()=>(C.value++,()=>{C.value--}));const p=t.inject(z,null),B=t.ref(null);typeof p=="function"&&(B.value=p());const $=()=>{a.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||c.fullPath})};t.onUnmounted(()=>{B.value?.()});const I=G(()=>{!T.value&&s.value&&a&&"onEntityPageVisit"in a&&typeof a.onEntityPageVisit=="function"&&(a.onEntityPageVisit({...e.pageShortcutData,path:e.pageShortcutData?.path||c?.fullPath}),g.value++)},500);return t.watch([()=>e.pageShortcutData,()=>c?.fullPath],()=>{I()},{immediate:!0,deep:!0}),(y,n)=>{const P=t.resolveComponent("KBreadcrumbs"),Et=t.resolveComponent("KTooltip"),Nt=t.resolveComponent("router-view");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":k.value}]),"data-testid":"kong-ui-public-page-layout"},[T.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",at,[t.createElementVNode("div",nt,[t.createElementVNode("div",lt,[e.breadcrumbs&&e.breadcrumbs.length?(t.openBlock(),t.createBlock(P,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[k.value?{name:"divider",fn:t.withCtx(()=>[n[0]||(n[0]=t.createTextVNode(" › ",-1))]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",rt,[e.backTo&&!k.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(f.value?"a":"router-link"),t.mergeProps({key:0},f.value?{href:e.backTo}:{to:e.backTo},{"aria-label":t.unref(i)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:t.withModifiers(h,["prevent"]),onKeydown:t.withKeys(t.withModifiers(h,["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.createVNode(t.unref(S.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):t.createCommentVNode("",!0),e.title||y.$slots.title?(t.openBlock(),t.createElementBlock("span",st,[t.renderSlot(y.$slots,"title",{},()=>[t.createElementVNode("h1",it,t.toDisplayString(e.title),1)],!0)])):t.createCommentVNode("",!0),u.value?(t.openBlock(),t.createElementBlock("div",{key:g.value,class:"favorite-button-container"},[t.createVNode(Et,{placement:"right",text:b.value?t.unref(i)("favorite_button.remove_shortcut"):t.unref(i)("favorite_button.save_shortcut")},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":b.value?t.unref(i)("favorite_button.remove_shortcut"):t.unref(i)("favorite_button.save_shortcut"),class:t.normalizeClass(["favorite-button",{active:b.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:$},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(b.value?t.unref(S.StarFillIcon):t.unref(S.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},null,8,["size"]))],10,ct)]),_:1},8,["text"])])):t.createCommentVNode("",!0),y.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",dt,[t.renderSlot(y.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),t.createElementVNode("div",ut,[t.renderSlot(y.$slots,"actions",{},void 0,!0),n[1]||(n[1]=t.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),l.value?(t.openBlock(),t.createBlock(ot,{key:0,tabs:e.tabs},t.createSlots({_:2},[t.renderList(e.tabs,L=>({name:`tab-${L.key}`,fn:t.withCtx(Vt=>[t.renderSlot(y.$slots,`tab-${L.key}`,t.normalizeProps(t.guardReactiveProps(Vt)),void 0,!0)])}))]),1032,["tabs"])):t.createCommentVNode("",!0)])),t.createElementVNode("div",{class:t.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":T.value}])},[k.value&&y.$slots.aside?(t.openBlock(),t.createElementBlock("div",pt,[t.renderSlot(y.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",mt,[l.value?(t.openBlock(),t.createBlock(Nt,{key:0})):t.renderSlot(y.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-b6604b63"]]),kt={key:0,class:"about-card-description","data-testid":"about-card-description"},bt={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},yt={key:2,class:"about-card-rows","data-testid":"about-card-rows"},gt=["data-testid"],ht={class:"about-card-row-label"},Ct={class:"about-card-row-text"},Bt=["aria-label","data-testid"],wt={class:"about-card-row-value"},St={class:"about-card-row-text"},Tt={key:3,class:"about-card-content","data-testid":"about-card-content"},$t=_(t.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(e){const r=t.computed(()=>e.rows.length||4);return(o,a)=>{const i=t.resolveComponent("KSkeletonBox"),d=t.resolveComponent("KTooltip"),c=t.resolveComponent("KCard");return t.openBlock(),t.createBlock(c,{class:"kong-ui-public-about-card",title:e.title,"title-tag":e.titleTag},t.createSlots({default:t.withCtx(()=>[o.$slots.description||e.description?(t.openBlock(),t.createElementBlock("p",kt,[t.renderSlot(o.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(e.description),1)],!0)])):t.createCommentVNode("",!0),e.isLoading?(t.openBlock(),t.createElementBlock("div",bt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.value,l=>(t.openBlock(),t.createBlock(i,{key:l,height:"2",width:"100"}))),128))])):e.rows.length?(t.openBlock(),t.createElementBlock("dl",yt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.rows,l=>(t.openBlock(),t.createElementBlock("div",{key:l.key,class:"about-card-row","data-testid":`about-card-row-${l.key}`},[t.createElementVNode("dt",ht,[t.renderSlot(o.$slots,`label-${l.key}`,{row:l},()=>[t.createElementVNode("span",Ct,t.toDisplayString(l.label),1)],!0),l.tooltip?(t.openBlock(),t.createBlock(d,{key:0,text:l.tooltip},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":l.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${l.key}-tooltip`,type:"button"},[t.createVNode(t.unref(S.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(F)})`},null,8,["size"])],8,Bt)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",wt,[t.renderSlot(o.$slots,`row-${l.key}`,{row:l},()=>[t.createElementVNode("span",St,t.toDisplayString(l.value),1)],!0)])],8,gt))),128))])):t.createCommentVNode("",!0),o.$slots.default?(t.openBlock(),t.createElementBlock("div",Tt,[t.renderSlot(o.$slots,"default",{},void 0,!0)])):t.createCommentVNode("",!0)]),_:2},[o.$slots.title||e.title?{name:"title",fn:t.withCtx(()=>[t.renderSlot(o.$slots,"title",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)],!0)]),key:"0"}:void 0,o.$slots.actions?{name:"actions",fn:t.withCtx(()=>[t.renderSlot(o.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-0316c887"]]);m.AboutCard=$t,m.NEW_APPEARANCE_INJECTION_KEY=V,m.PageLayout=ft,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+(function(k,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):(k=typeof globalThis<"u"?globalThis:k||self,t(k["kong-ui-public-page-layout"]={},k.Vue,k.VueRouter,k["kong-ui-public-i18n"],k.KongIcons))})(this,(function(k,t,N,I,w){"use strict";const z={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"}}};function R(){const e=I.createI18n("en-us",z);return{i18n:e,i18nT:I.i18nTComponent(e)}}const P={useI18n:R},A="12px",E="16px",F="16px";function O(e,r){return t.getCurrentScope()?(t.onScopeDispose(e,r),!0):!1}const j=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const C=()=>{};function M(e,r){function o(...a){return new Promise((i,c)=>{Promise.resolve(e(()=>r.apply(this,a),{fn:r,thisArg:this,args:a})).then(i).catch(c)})}return"cancel"in e&&Object.assign(o,{cancel:e.cancel,flush:e.flush,isPending:e.isPending}),o}function W(e,r={}){let o,a,i=C,c=C;const s=t.shallowRef(!1),n=d=>{clearTimeout(d),i(),i=C};let m;return Object.assign(d=>{const p=t.toValue(e),f=t.toValue(r.maxWait);return o&&n(o),p<=0||f!==void 0&&f<=0?(a&&(n(a),a=void 0),s.value=!1,Promise.resolve(d())):(s.value=!0,new Promise((b,u)=>{i=r.rejectOnCancel?u:b,c=b,m=d,f&&!a&&(a=setTimeout(()=>{o&&n(o),a=void 0,s.value=!1,b(m())},f)),o=setTimeout(()=>{a&&n(a),a=void 0,s.value=!1,b(d())},p)}))},{cancel:()=>{o&&(n(o),o=void 0),a&&(n(a),a=void 0),s.value=!1,c=C},flush:()=>{if(s.value){o&&(clearTimeout(o),o=void 0),a&&(clearTimeout(a),a=void 0),s.value=!1;const d=c;i=C,c=C,d(m())}},isPending:t.shallowReadonly(s)})}function U(e,r=200,o={}){return M(W(r,o),e)}const q=j?window:void 0;function D(e){var r;const o=t.toValue(e);return(r=o?.$el)!==null&&r!==void 0?r:o}function G(){const e=t.shallowRef(!1),r=t.getCurrentInstance();return r&&t.onMounted(()=>{e.value=!0},r),e}function J(e){const r=G();return t.computed(()=>(r.value,!!e()))}function Y(e,r,o={}){const{window:a=q,...i}=o;let c;const s=J(()=>a&&"ResizeObserver"in a),n=()=>{c&&(c.disconnect(),c=void 0)},m=t.watch(t.computed(()=>{const d=t.toValue(e);return Array.isArray(d)?d.map(p=>D(p)):[D(d)]}),d=>{if(n(),s.value&&a){c=new ResizeObserver(r);for(const p of d)p&&c.observe(p,i)}},{immediate:!0,flush:"post"}),y=()=>{n(),m()};return O(y),{isSupported:s,stop:y}}const Z={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},H={key:0},Q=["aria-label"],X={key:0,class:"layout-loader-container"},v=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){const{i18n:{t:r}}=P.useI18n(),o=N.useRouter(),a=t.inject("app:navigateTo",null),i=u=>{if(typeof u.to!="string"){o.push(u.to);return}if(typeof a!="function"){window.location.href=u.to;return}a(u.to)},c=t.useTemplateRef("page-layout-tabs"),s=t.useTemplateRef("page-layout-tabs-list"),n=t.ref(e.tabs.length),m=t.ref(!1),y=t.computed(()=>e.tabs.slice(0,n.value)),d=t.computed(()=>e.tabs.slice(n.value)),p=async()=>{if(!c.value||!s.value)return;m.value=!1,n.value=e.tabs.length,await t.nextTick();const u=c.value?.getBoundingClientRect().width-parseInt(F)*2;let h=s.value?.getBoundingClientRect().width;if(!u||!h){m.value=!0;return}const B=50;for(;h+B>u&&n.value>1;)n.value--,await t.nextTick(),h=s.value?.getBoundingClientRect().width||0;m.value=!0};let f=null;const b=()=>{f&&clearTimeout(f),f=setTimeout(()=>{p()},150)};return t.onMounted(()=>{p(),Y(c,b)}),t.onBeforeUnmount(()=>{f&&clearTimeout(f)}),t.watch(()=>e.tabs,()=>{p()},{deep:!0}),(u,h)=>{const B=t.resolveComponent("KDropdownItem"),T=t.resolveComponent("KDropdown"),S=t.resolveComponent("KSkeletonBox");return t.openBlock(),t.createElementBlock("nav",Z,[t.createElementVNode("ul",{ref:"page-layout-tabs-list",class:t.normalizeClass({"layout-computing":!m.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(y.value,l=>(t.openBlock(),t.createElementBlock("li",{key:`${l.key}-tab`},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(typeof l.to=="string"?"a":"router-link"),t.mergeProps({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:t.withModifiers(_=>i(l),["prevent"]),onKeydown:t.withKeys(t.withModifiers(_=>i(l),["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.renderSlot(u.$slots,`tab-${l.key}`,{tab:l},()=>[t.createTextVNode(t.toDisplayString(l.label),1)],!0)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),e.tabs.length>n.value?(t.openBlock(),t.createElementBlock("li",H,[t.createVNode(T,{"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(d.value,l=>(t.openBlock(),t.createBlock(B,{key:`${l.key}-dropdown-item`,"aria-current":l.active?"page":void 0,"data-testid":l.dataTestId?l.dataTestId:`page-layout-tab-${l.key}`,item:{label:l.label,value:l.key,to:l.to},selected:l.active},{default:t.withCtx(()=>[t.renderSlot(u.$slots,`tab-${l.key}`,{tab:l},()=>[t.createTextVNode(t.toDisplayString(l.label),1)],!0)]),_:2},1032,["aria-current","data-testid","item","selected"]))),128))]),default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":t.unref(r)("tabs.more_button.aria_label"),class:t.normalizeClass(["tab-link",{active:d.value.find(l=>l.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[t.createTextVNode(t.toDisplayString(t.unref(r)("tabs.more_button.label"))+" ",1),t.createVNode(t.unref(w.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(E)})`},null,8,["size"])],10,Q)]),_:3})])):t.createCommentVNode("",!0)],2),m.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",X,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(3,l=>t.createVNode(S,{key:`layout-loader-${l}`,height:"1",width:"5"})),64))]))],512)}}}),V=(e,r)=>{const o=e.__vccOpts||e;for(const[a,i]of r)o[a]=i;return o},tt=V(v,[["__scopeId","data-v-02891bc1"]]),K=Symbol("nested-page-layout-detection"),x="page-layout:new-appearance",et={key:0,class:"page-layout-header","data-testid":"page-layout-header"},ot={class:"page-header-container"},at={class:"page-header-start"},nt={class:"title-container"},lt={key:1,class:"page-layout-title-wrapper"},rt={class:"page-layout-title","data-testid":"page-layout-title"},it=["aria-label"],st={key:3,class:"title-after-container"},ct={class:"page-header-actions-container"},dt={key:0,class:"page-layout-aside-container","data-testid":"page-layout-aside"},ut={class:"page-layout-content"},mt=V(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},pageShortcutData:{}},setup(e){const r=t.inject("app:navigateTo",null),o=t.inject(x,null),a=t.inject("app:pageShortcutsContext",null),{i18n:{t:i}}=P.useI18n(),c=N.useRouter(),s=N.useRoute(),n=t.computed(()=>!!(e.tabs&&e.tabs.length)),m=t.computed(()=>typeof e.backTo=="string"),y=t.computed(()=>t.toValue(o)===!0),d=t.computed(()=>!!e.pageShortcutData&&!!e.pageShortcutData.entityType&&!!e.pageShortcutData.label),p=t.computed(()=>d.value&&!!a&&"onFavoriteToggle"in a&&typeof a.onFavoriteToggle=="function"),f=t.ref(0),b=t.computed(()=>!!a&&"isFavorite"in a&&typeof a.isFavorite=="function"&&a.isFavorite(e.pageShortcutData)===!0),u=async()=>{if(e.backTo){if(typeof e.backTo=="object"){c.push(e.backTo);return}if(typeof r!="function"){window.location.href=e.backTo;return}await r(e.backTo)}},h=t.ref(0),B=t.computed(()=>h.value>0);t.provide(K,()=>(h.value++,()=>{h.value--}));const T=t.inject(K,null),S=t.ref(null);typeof T=="function"&&(S.value=T());const l=()=>{a.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||s.fullPath})};t.onUnmounted(()=>{S.value?.()});const _=U(()=>{!B.value&&d.value&&a&&"onEntityPageVisit"in a&&typeof a.onEntityPageVisit=="function"&&(a.onEntityPageVisit({...e.pageShortcutData,path:e.pageShortcutData?.path||s?.fullPath}),f.value++)},500);return t.watch([()=>e.pageShortcutData,()=>s?.fullPath],()=>{_()},{immediate:!0,deep:!0}),(g,$)=>{const St=t.resolveComponent("KBreadcrumbs"),$t=t.resolveComponent("KTooltip"),Nt=t.resolveComponent("router-view");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["kong-ui-public-page-layout",{"new-appearance":y.value}]),"data-testid":"kong-ui-public-page-layout"},[B.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",et,[t.createElementVNode("div",ot,[t.createElementVNode("div",at,[e.breadcrumbs&&e.breadcrumbs.length?(t.openBlock(),t.createBlock(St,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[y.value?{name:"divider",fn:t.withCtx(()=>[$[0]||($[0]=t.createTextVNode(" › ",-1))]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[e.backTo&&!y.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(m.value?"a":"router-link"),t.mergeProps({key:0},m.value?{href:e.backTo}:{to:e.backTo},{"aria-label":t.unref(i)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:t.withModifiers(u,["prevent"]),onKeydown:t.withKeys(t.withModifiers(u,["prevent"]),["enter"])}),{default:t.withCtx(()=>[t.createVNode(t.unref(w.ArrowTopLeftIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(E)})`},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):t.createCommentVNode("",!0),e.title||g.$slots.title?(t.openBlock(),t.createElementBlock("span",lt,[t.renderSlot(g.$slots,"title",{},()=>[t.createElementVNode("h1",rt,t.toDisplayString(e.title),1)],!0)])):t.createCommentVNode("",!0),p.value?(t.openBlock(),t.createElementBlock("div",{key:f.value,class:"favorite-button-container"},[t.createVNode($t,{placement:"right",text:b.value?t.unref(i)("favorite_button.remove_shortcut"):t.unref(i)("favorite_button.save_shortcut")},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":b.value?t.unref(i)("favorite_button.remove_shortcut"):t.unref(i)("favorite_button.save_shortcut"),class:t.normalizeClass(["favorite-button",{active:b.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:l},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(b.value?t.unref(w.StarFillIcon):t.unref(w.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(E)})`},null,8,["size"]))],10,it)]),_:1},8,["text"])])):t.createCommentVNode("",!0),g.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",st,[t.renderSlot(g.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),t.createElementVNode("div",ct,[t.renderSlot(g.$slots,"actions",{},void 0,!0),$[1]||($[1]=t.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1))])]),n.value?(t.openBlock(),t.createBlock(tt,{key:0,tabs:e.tabs},t.createSlots({_:2},[t.renderList(e.tabs,L=>({name:`tab-${L.key}`,fn:t.withCtx(Et=>[t.renderSlot(g.$slots,`tab-${L.key}`,t.normalizeProps(t.guardReactiveProps(Et)),void 0,!0)])}))]),1032,["tabs"])):t.createCommentVNode("",!0)])),t.createElementVNode("div",{class:t.normalizeClass(["page-layout-content-container",{"has-nested-page-layout":B.value}])},[y.value&&g.$slots.aside?(t.openBlock(),t.createElementBlock("div",dt,[t.renderSlot(g.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",ut,[n.value?(t.openBlock(),t.createBlock(Nt,{key:0})):t.renderSlot(g.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-ada53013"]]),pt={key:0,class:"about-card-description","data-testid":"about-card-description"},ft={key:1,class:"about-card-skeleton","data-testid":"about-card-skeleton"},kt={key:2,class:"about-card-rows","data-testid":"about-card-rows"},bt=["data-testid"],yt={class:"about-card-row-label"},gt={class:"about-card-row-text"},ht=["aria-label","data-testid"],Bt={class:"about-card-row-value"},Ct={class:"about-card-row-text"},wt={key:3,class:"about-card-content","data-testid":"about-card-content"},Tt=V(t.defineComponent({__name:"AboutCard",props:{title:{default:""},titleTag:{default:"h2"},description:{default:""},rows:{default:()=>[]},isLoading:{type:Boolean,default:!1}},setup(e){const r=t.computed(()=>e.rows.length||4);return(o,a)=>{const i=t.resolveComponent("KSkeletonBox"),c=t.resolveComponent("KTooltip"),s=t.resolveComponent("KCard");return t.openBlock(),t.createBlock(s,{class:"kong-ui-public-about-card",title:e.title,"title-tag":e.titleTag},t.createSlots({default:t.withCtx(()=>[o.$slots.description||e.description?(t.openBlock(),t.createElementBlock("p",pt,[t.renderSlot(o.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(e.description),1)],!0)])):t.createCommentVNode("",!0),e.isLoading?(t.openBlock(),t.createElementBlock("div",ft,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.value,n=>(t.openBlock(),t.createBlock(i,{key:n,height:"2",width:"100"}))),128))])):e.rows.length?(t.openBlock(),t.createElementBlock("dl",kt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.rows,n=>(t.openBlock(),t.createElementBlock("div",{key:n.key,class:"about-card-row","data-testid":`about-card-row-${n.key}`},[t.createElementVNode("dt",yt,[t.renderSlot(o.$slots,`label-${n.key}`,{row:n},()=>[t.createElementVNode("span",gt,t.toDisplayString(n.label),1)],!0),n.tooltip?(t.openBlock(),t.createBlock(c,{key:0,text:n.tooltip},{default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":n.tooltip,class:"about-card-row-tooltip-trigger","data-testid":`about-card-row-${n.key}-tooltip`,type:"button"},[t.createVNode(t.unref(w.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(A)})`},null,8,["size"])],8,ht)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",Bt,[t.renderSlot(o.$slots,`row-${n.key}`,{row:n},()=>[t.createElementVNode("span",Ct,t.toDisplayString(n.value),1)],!0)])],8,bt))),128))])):t.createCommentVNode("",!0),o.$slots.default?(t.openBlock(),t.createElementBlock("div",wt,[t.renderSlot(o.$slots,"default",{},void 0,!0)])):t.createCommentVNode("",!0)]),_:2},[o.$slots.title||e.title?{name:"title",fn:t.withCtx(()=>[t.renderSlot(o.$slots,"title",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)],!0)]),key:"0"}:void 0,o.$slots.actions?{name:"actions",fn:t.withCtx(()=>[t.renderSlot(o.$slots,"actions",{},void 0,!0)]),key:"1"}:void 0]),1032,["title","title-tag"])}}}),[["__scopeId","data-v-0316c887"]]);k.AboutCard=Tt,k.NEW_APPEARANCE_INJECTION_KEY=x,k.PageLayout=mt,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -1 +1 @@
-.page-layout-tabs[data-v-da8e77b9]{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:0px var(--v2c7bf110);padding:var(--kui-space-0, 0px) var(--v2c7bf110);position:relative;width:100%}.page-layout-tabs a[data-v-da8e77b9],.page-layout-tabs button[data-v-da8e77b9]{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-da8e77b9]{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-da8e77b9]{height:0;visibility:hidden}.page-layout-tabs ul li[data-v-da8e77b9]{display:flex}.page-layout-tabs ul li .tab-link[data-v-da8e77b9]{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-da8e77b9]: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-da8e77b9]: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-da8e77b9]{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-da8e77b9]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);height:34px;inset:0;left:var(--v2c7bf110);position:absolute}.kong-ui-public-page-layout[data-v-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-b6604b63] .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-b6604b63] .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-b6604b63]{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-b6604b63],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b6604b63]{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-b6604b63]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b6604b63]: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-b6604b63]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-b6604b63]: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-b6604b63]{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-b6604b63]>*{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-b6604b63]{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-b6604b63]{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-b6604b63]: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-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-b6604b63]{align-items:center;padding:8px 8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-40, 8px) var(--kui-space-0, 0px) var(--kui-space-40, 8px)}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start[data-v-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]>*{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-b6604b63],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-b6604b63]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-b6604b63]{box-sizing:border-box;height:45px;padding:8px;padding:var(--kui-space-40, 8px)}.kong-ui-public-page-layout .page-layout-content-container[data-v-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{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-b6604b63]{flex-shrink:0;width:400px}}.kong-ui-public-about-card[data-v-0316c887]{--kui-card-gap: var(--kui-space-50, 12px);--kui-card-title-font-size: var(--kui-font-size-30, 14px);container-type:inline-size}.kong-ui-public-about-card .about-card-description[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0 0 16px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-about-card .about-card-skeleton[data-v-0316c887]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px)}.kong-ui-public-about-card .about-card-rows[data-v-0316c887]{display:flex;flex-direction:column;margin:0;margin:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);padding:8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:last-child{border-bottom:none;padding-bottom:0;padding-bottom:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:first-child{padding-top:0;padding-top:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{align-items:center;color:#0d0e14;color:var(--kui-color-text, #0d0e14);display:flex;flex:0 0 auto;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:4px;gap:var(--kui-space-20, 4px);line-height:16px;line-height:var(--kui-line-height-20, 16px);width:140px}.kong-ui-public-about-card .about-card-row-text[data-v-0316c887]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-row-tooltip-trigger[data-v-0316c887]{align-items:center;background:none;border:none;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;display:flex;padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-value[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);flex:1 1 0;font-size:12px;font-size:var(--kui-font-size-20, 12px);line-height:16px;line-height:var(--kui-line-height-20, 16px);margin:0;margin:var(--kui-space-0, 0px);min-width:0;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-content[data-v-0316c887]{margin-top:16px;margin-top:var(--kui-space-60, 16px)}@container (max-width: 320px){.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:flex-start;flex-direction:column;gap:2px;gap:var(--kui-space-10, 2px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{width:auto}}
+.page-layout-tabs[data-v-02891bc1]{align-items:flex-end;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);box-sizing:border-box;display:flex;height:34px;overflow-x:clip;padding:0 16px;padding:var(--kui-space-0, 0px) var(--kui-space-60, 16px);position:relative;width:100%}.page-layout-tabs a[data-v-02891bc1],.page-layout-tabs button[data-v-02891bc1]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;color:inherit;cursor:pointer;font:inherit;outline:none;padding:0;padding:var(--kui-space-0, 0px);text-decoration:none}.page-layout-tabs ul[data-v-02891bc1]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);margin-bottom:-1px;margin-bottom:calc(-1 * var(--kui-border-width-10, 1px));max-width:100%;padding:0;padding:var(--kui-space-0, 0px)}.page-layout-tabs ul.layout-computing[data-v-02891bc1]{height:0;visibility:hidden}.page-layout-tabs ul li[data-v-02891bc1]{display:flex}.page-layout-tabs ul li .tab-link[data-v-02891bc1]{align-items:center;border-bottom:2px solid rgba(0,0,0,0);border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-transparent, rgba(0, 0, 0, 0));border-radius:4px 4px 0 0;border-radius:var(--kui-border-radius-20, 4px) var(--kui-border-radius-20, 4px) var(--kui-border-radius-0, 0px) var(--kui-border-radius-0, 0px);color:#52596e;color:var(--kui-color-text-neutral-strong, #52596e);cursor:pointer;display:flex;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:6px;gap:var(--kui-space-30, 6px);line-height:20px;line-height:var(--kui-line-height-30, 20px);padding:6px 0;padding:var(--kui-space-30, 6px) var(--kui-space-0, 0px);text-decoration:none;transition:color .2s ease-in,border-color .2s ease-in,font-weight .2s ease-in;white-space:nowrap}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:hover{border-bottom:2px solid #afb7c5;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-neutral-weak, #afb7c5);color:#0d0e14;color:var(--kui-color-text, #0d0e14);text-decoration:none}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2));text-decoration:none}.page-layout-tabs ul li .tab-link.active[data-v-02891bc1]{border-bottom:2px solid #0044f4;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-primary, #0044f4);color:#0044f4!important;color:var(--kui-color-text-primary, #0044f4)!important;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);text-decoration:none}.page-layout-tabs .layout-loader-container[data-v-02891bc1]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);height:34px;inset:0 0 0 16px;left:var(--kui-space-60, 16px);position:absolute}.kong-ui-public-page-layout[data-v-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-ada53013] .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-ada53013] .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-ada53013]{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-ada53013],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-ada53013]{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-ada53013]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-ada53013]: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-ada53013]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-ada53013]: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-ada53013]{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-ada53013]>*{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-ada53013]{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-ada53013]{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-ada53013]: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-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]>*{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-ada53013],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-ada53013]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-ada53013]{box-sizing:border-box;height:45px;padding:8px;padding:var(--kui-space-40, 8px)}.kong-ui-public-page-layout .page-layout-content-container[data-v-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{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-ada53013]{flex-shrink:0;width:400px}}.kong-ui-public-about-card[data-v-0316c887]{--kui-card-gap: var(--kui-space-50, 12px);--kui-card-title-font-size: var(--kui-font-size-30, 14px);container-type:inline-size}.kong-ui-public-about-card .about-card-description[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);font-size:14px;font-size:var(--kui-font-size-30, 14px);line-height:20px;line-height:var(--kui-line-height-30, 20px);margin:0 0 16px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-60, 16px)}.kong-ui-public-about-card .about-card-skeleton[data-v-0316c887]{display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px)}.kong-ui-public-about-card .about-card-rows[data-v-0316c887]{display:flex;flex-direction:column;margin:0;margin:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;gap:8px;gap:var(--kui-space-40, 8px);padding:8px 0;padding:var(--kui-space-40, 8px) var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:last-child{border-bottom:none;padding-bottom:0;padding-bottom:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row[data-v-0316c887]:first-child{padding-top:0;padding-top:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{align-items:center;color:#0d0e14;color:var(--kui-color-text, #0d0e14);display:flex;flex:0 0 auto;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:4px;gap:var(--kui-space-20, 4px);line-height:16px;line-height:var(--kui-line-height-20, 16px);width:140px}.kong-ui-public-about-card .about-card-row-text[data-v-0316c887]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-row-tooltip-trigger[data-v-0316c887]{align-items:center;background:none;border:none;color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer;display:flex;padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-public-about-card .about-card-row-value[data-v-0316c887]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);flex:1 1 0;font-size:12px;font-size:var(--kui-font-size-20, 12px);line-height:16px;line-height:var(--kui-line-height-20, 16px);margin:0;margin:var(--kui-space-0, 0px);min-width:0;overflow-wrap:anywhere}.kong-ui-public-about-card .about-card-content[data-v-0316c887]{margin-top:16px;margin-top:var(--kui-space-60, 16px)}@container (max-width: 320px){.kong-ui-public-about-card .about-card-row[data-v-0316c887]{align-items:flex-start;flex-direction:column;gap:2px;gap:var(--kui-space-10, 2px)}.kong-ui-public-about-card .about-card-row-label[data-v-0316c887]{width:auto}}

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

@@ -1 +1 @@
-{"version":3,"file":"PageLayoutTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageLayoutTabs.vue"],"names":[],"mappings":"AA0TA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAiVlE,QAAA,IAAI,QAAQ,iBAAW,EAAE,QAAQ;;CAAU,EAAE,QAAQ,iBAAW,EAAE,QAAQ;;CAAY,CAAE;AACxF,KAAK,WAAW,GAAG,EAAE,GACnB;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,CAAC;AAQ5E,QAAA,MAAM,UAAU,kTAEd,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":"PageLayoutTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageLayoutTabs.vue"],"names":[],"mappings":"AA8SA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AA8TlE,QAAA,IAAI,QAAQ,iBAAW,EAAE,QAAQ;;CAAU,EAAE,QAAQ,iBAAW,EAAE,QAAQ;;CAAY,CAAE;AACxF,KAAK,WAAW,GAAG,EAAE,GACnB;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,CAAC;AAQ5E,QAAA,MAAM,UAAU,kTAEd,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/page-layout",
-  "version": "1.2.0",
+  "version": "1.2.1-pr.3941.913f636f2.0",
   "type": "module",
   "main": "./dist/page-layout.umd.js",
   "module": "./dist/page-layout.es.js",