@kong-ui-public/page-layout 1.2.1 → 1.2.2-pr.3947.2fc5c5378.0

package/dist/page-layout.es.js

@@ -381,8 +381,8 @@ const Ut = {
               ])
             ]),
             f("div", ie, [
-              h(C.$slots, "actions", {}, void 0, !0),
-              Y[0] || (Y[0] = f("div", { "data-teleport-target": "ask-kai" }, null, -1))
+              Y[0] || (Y[0] = f("div", { "data-teleport-target": "ask-kai" }, null, -1)),
+              h(C.$slots, "actions", {}, void 0, !0)
             ])
           ]),
           o.value ? (i(), _(qt, {
@@ -410,7 +410,7 @@ const Ut = {
       ], 2);
     };
   }
-}), Ce = /* @__PURE__ */ J(re, [["__scopeId", "data-v-33657beb"]]), ce = {
+}), Ce = /* @__PURE__ */ J(re, [["__scopeId", "data-v-820ab9a3"]]), ce = {
   key: 0,
   class: "about-card-description",
   "data-testid": "about-card-description"

package/dist/page-layout.umd.js

@@ -1 +1 @@
-(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,$,_,B){"use strict";const x={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 z(){const e=_.createI18n("en-us",x);return{i18n:e,i18nT:_.i18nTComponent(e)}}const I={useI18n:z},A="12px",N="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 w=()=>{};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=w,c=w;const s=t.shallowRef(!1),n=d=>{clearTimeout(d),i(),i=w};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=w},flush:()=>{if(s.value){o&&(clearTimeout(o),o=void 0),a&&(clearTimeout(a),a=void 0),s.value=!1;const d=c;i=w,c=w,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 P(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=>P(p)):[P(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"}),h=()=>{n(),m()};return O(h),{isSupported:s,stop:h}}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}}=I.useI18n(),o=$.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),h=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 g=s.value?.getBoundingClientRect().width;if(!u||!g){m.value=!0;return}const C=50;for(;g+C>u&&n.value>1;)n.value--,await t.nextTick(),g=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,g)=>{const C=t.resolveComponent("KDropdownItem"),S=t.resolveComponent("KDropdown"),T=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(h.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(V=>i(l),["prevent"]),onKeydown:t.withKeys(t.withModifiers(V=>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(S,{"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(C,{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(B.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},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(T,{key:`layout-loader-${l}`,height:"1",width:"5"})),64))]))],512)}}}),E=(e,r)=>{const o=e.__vccOpts||e;for(const[a,i]of r)o[a]=i;return o},tt=E(v,[["__scopeId","data-v-02891bc1"]]),D=Symbol("nested-page-layout-detection"),K="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=E(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},pageShortcutData:{}},setup(e){const r=t.inject("app:navigateTo",null),o=t.inject(K,null),a=t.inject("app:pageShortcutsContext",null),{i18n:{t:i}}=I.useI18n(),c=$.useRouter(),s=$.useRoute(),n=t.computed(()=>!!(e.tabs&&e.tabs.length)),m=t.computed(()=>typeof e.backTo=="string"),h=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)}},g=t.ref(0),C=t.computed(()=>g.value>0);t.provide(D,()=>(g.value++,()=>{g.value--}));const S=t.inject(D,null),T=t.ref(null);typeof S=="function"&&(T.value=S());const l=()=>{a.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||s.fullPath})};t.onUnmounted(()=>{T.value?.()});const V=U(()=>{!C.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],()=>{V()},{immediate:!0,deep:!0}),(y,L)=>{const Tt=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":h.value}]),"data-testid":"kong-ui-public-page-layout"},[C.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(Tt,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[h.value?{name:"divider",fn:t.withCtx(()=>[t.createVNode(t.unref(B.ChevronRightIcon),{decorative:""})]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[e.backTo&&!h.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(B.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",lt,[t.renderSlot(y.$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(B.StarFillIcon):t.unref(B.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},null,8,["size"]))],10,it)]),_:1},8,["text"])])):t.createCommentVNode("",!0),y.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",st,[t.renderSlot(y.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),t.createElementVNode("div",ct,[t.renderSlot(y.$slots,"actions",{},void 0,!0),L[0]||(L[0]=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,R=>({name:`tab-${R.key}`,fn:t.withCtx(Et=>[t.renderSlot(y.$slots,`tab-${R.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":C.value}])},[h.value&&y.$slots.aside?(t.openBlock(),t.createElementBlock("div",dt,[t.renderSlot(y.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",ut,[n.value?(t.openBlock(),t.createBlock(Nt,{key:0})):t.renderSlot(y.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-33657beb"]]),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"],ht={class:"about-card-row-label"},yt={class:"about-card-row-text"},gt=["aria-label","data-testid"],Ct={class:"about-card-row-value"},Bt={class:"about-card-row-text"},wt={key:3,class:"about-card-content","data-testid":"about-card-content"},St=E(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",ht,[t.renderSlot(o.$slots,`label-${n.key}`,{row:n},()=>[t.createElementVNode("span",yt,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(B.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(A)})`},null,8,["size"])],8,gt)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",Ct,[t.renderSlot(o.$slots,`row-${n.key}`,{row:n},()=>[t.createElementVNode("span",Bt,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=St,k.NEW_APPEARANCE_INJECTION_KEY=K,k.PageLayout=mt,Object.defineProperty(k,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,$,_,B){"use strict";const x={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 z(){const e=_.createI18n("en-us",x);return{i18n:e,i18nT:_.i18nTComponent(e)}}const I={useI18n:z},A="12px",N="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 w=()=>{};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=w,c=w;const s=t.shallowRef(!1),n=d=>{clearTimeout(d),i(),i=w};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=w},flush:()=>{if(s.value){o&&(clearTimeout(o),o=void 0),a&&(clearTimeout(a),a=void 0),s.value=!1;const d=c;i=w,c=w,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 P(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=>P(p)):[P(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"}),h=()=>{n(),m()};return O(h),{isSupported:s,stop:h}}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}}=I.useI18n(),o=$.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),h=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 g=s.value?.getBoundingClientRect().width;if(!u||!g){m.value=!0;return}const C=50;for(;g+C>u&&n.value>1;)n.value--,await t.nextTick(),g=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,g)=>{const C=t.resolveComponent("KDropdownItem"),S=t.resolveComponent("KDropdown"),T=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(h.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(V=>i(l),["prevent"]),onKeydown:t.withKeys(t.withModifiers(V=>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(S,{"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(C,{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(B.ChevronDownIcon),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},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(T,{key:`layout-loader-${l}`,height:"1",width:"5"})),64))]))],512)}}}),E=(e,r)=>{const o=e.__vccOpts||e;for(const[a,i]of r)o[a]=i;return o},tt=E(v,[["__scopeId","data-v-02891bc1"]]),D=Symbol("nested-page-layout-detection"),K="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=E(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},pageShortcutData:{}},setup(e){const r=t.inject("app:navigateTo",null),o=t.inject(K,null),a=t.inject("app:pageShortcutsContext",null),{i18n:{t:i}}=I.useI18n(),c=$.useRouter(),s=$.useRoute(),n=t.computed(()=>!!(e.tabs&&e.tabs.length)),m=t.computed(()=>typeof e.backTo=="string"),h=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)}},g=t.ref(0),C=t.computed(()=>g.value>0);t.provide(D,()=>(g.value++,()=>{g.value--}));const S=t.inject(D,null),T=t.ref(null);typeof S=="function"&&(T.value=S());const l=()=>{a.onFavoriteToggle({...e.pageShortcutData,path:e.pageShortcutData?.path||s.fullPath})};t.onUnmounted(()=>{T.value?.()});const V=U(()=>{!C.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],()=>{V()},{immediate:!0,deep:!0}),(y,L)=>{const Tt=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":h.value}]),"data-testid":"kong-ui-public-page-layout"},[C.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(Tt,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},t.createSlots({_:2},[h.value?{name:"divider",fn:t.withCtx(()=>[t.createVNode(t.unref(B.ChevronRightIcon),{decorative:""})]),key:"0"}:void 0]),1032,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[e.backTo&&!h.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(B.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",lt,[t.renderSlot(y.$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(B.StarFillIcon):t.unref(B.StarIcon)),{decorative:"",size:`var(--kui-icon-size-30, ${t.unref(N)})`},null,8,["size"]))],10,it)]),_:1},8,["text"])])):t.createCommentVNode("",!0),y.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",st,[t.renderSlot(y.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),t.createElementVNode("div",ct,[L[0]||(L[0]=t.createElementVNode("div",{"data-teleport-target":"ask-kai"},null,-1)),t.renderSlot(y.$slots,"actions",{},void 0,!0)])]),n.value?(t.openBlock(),t.createBlock(tt,{key:0,tabs:e.tabs},t.createSlots({_:2},[t.renderList(e.tabs,R=>({name:`tab-${R.key}`,fn:t.withCtx(Et=>[t.renderSlot(y.$slots,`tab-${R.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":C.value}])},[h.value&&y.$slots.aside?(t.openBlock(),t.createElementBlock("div",dt,[t.renderSlot(y.$slots,"aside",{},void 0,!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",ut,[n.value?(t.openBlock(),t.createBlock(Nt,{key:0})):t.renderSlot(y.$slots,"default",{},void 0,!0,1)])],2)],2)}}}),[["__scopeId","data-v-820ab9a3"]]),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"],ht={class:"about-card-row-label"},yt={class:"about-card-row-text"},gt=["aria-label","data-testid"],Ct={class:"about-card-row-value"},Bt={class:"about-card-row-text"},wt={key:3,class:"about-card-content","data-testid":"about-card-content"},St=E(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",ht,[t.renderSlot(o.$slots,`label-${n.key}`,{row:n},()=>[t.createElementVNode("span",yt,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(B.InfoIcon),{size:`var(--kui-icon-size-20, ${t.unref(A)})`},null,8,["size"])],8,gt)]),_:2},1032,["text"])):t.createCommentVNode("",!0)]),t.createElementVNode("dd",Ct,[t.renderSlot(o.$slots,`row-${n.key}`,{row:n},()=>[t.createElementVNode("span",Bt,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=St,k.NEW_APPEARANCE_INJECTION_KEY=K,k.PageLayout=mt,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -1 +1 @@
-.page-layout-tabs[data-v-02891bc1]{align-items:flex-end;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);box-sizing:border-box;display:flex;height:34px;overflow-x:clip;padding:0 16px;padding:var(--kui-space-0, 0px) var(--kui-space-60, 16px);position:relative;width:100%}.page-layout-tabs a[data-v-02891bc1],.page-layout-tabs button[data-v-02891bc1]{background-color:#0000;background-color:var(--kui-color-background-transparent, rgba(0, 0, 0, 0));border:none;color:inherit;cursor:pointer;font:inherit;outline:none;padding:0;padding:var(--kui-space-0, 0px);text-decoration:none}.page-layout-tabs ul[data-v-02891bc1]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);list-style:none;margin:0;margin:var(--kui-space-0, 0px);margin-bottom:-1px;margin-bottom:calc(-1 * var(--kui-border-width-10, 1px));max-width:100%;padding:0;padding:var(--kui-space-0, 0px)}.page-layout-tabs ul.layout-computing[data-v-02891bc1]{height:0;visibility:hidden}.page-layout-tabs ul li[data-v-02891bc1]{display:flex}.page-layout-tabs ul li .tab-link[data-v-02891bc1]{align-items:center;border-bottom:2px solid rgba(0,0,0,0);border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-transparent, rgba(0, 0, 0, 0));border-radius:4px 4px 0 0;border-radius:var(--kui-border-radius-20, 4px) var(--kui-border-radius-20, 4px) var(--kui-border-radius-0, 0px) var(--kui-border-radius-0, 0px);color:#52596e;color:var(--kui-color-text-neutral-strong, #52596e);cursor:pointer;display:flex;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:500;font-weight:var(--kui-font-weight-medium, 500);gap:6px;gap:var(--kui-space-30, 6px);line-height:20px;line-height:var(--kui-line-height-30, 20px);padding:6px 0;padding:var(--kui-space-30, 6px) var(--kui-space-0, 0px);text-decoration:none;transition:color .2s ease-in,border-color .2s ease-in,font-weight .2s ease-in;white-space:nowrap}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:hover{border-bottom:2px solid #afb7c5;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-neutral-weak, #afb7c5);color:#0d0e14;color:var(--kui-color-text, #0d0e14);text-decoration:none}.page-layout-tabs ul li .tab-link[data-v-02891bc1]:focus-visible{box-shadow:0 0 0 4px #0044f433;box-shadow:var(--kui-shadow-focus, 0px 0px 0px 4px rgba(0, 68, 244, .2));text-decoration:none}.page-layout-tabs ul li .tab-link.active[data-v-02891bc1]{border-bottom:2px solid #0044f4;border-bottom:var(--kui-border-width-20, 2px) solid var(--kui-color-border-primary, #0044f4);color:#0044f4!important;color:var(--kui-color-text-primary, #0044f4)!important;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);text-decoration:none}.page-layout-tabs .layout-loader-container[data-v-02891bc1]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);height:34px;inset:0 0 0 16px;left:var(--kui-space-60, 16px);position:absolute}.kong-ui-public-page-layout[data-v-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-33657beb] .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-33657beb] .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-33657beb]{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-33657beb],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-33657beb]{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-33657beb]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-33657beb]: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-33657beb]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-33657beb]: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-33657beb]{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-33657beb]>*{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-33657beb]{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-33657beb]{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-33657beb]: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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]>*{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-33657beb],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-33657beb]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-33657beb]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{min-width:0}.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .header-breadcrumbs[data-v-820ab9a3] .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-820ab9a3] .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-820ab9a3]{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-820ab9a3],.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-820ab9a3]{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-820ab9a3]:hover,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-820ab9a3]: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-820ab9a3]:focus-visible,.kong-ui-public-page-layout .page-layout-header .page-header-container .page-header-start .title-container .favorite-button[data-v-820ab9a3]: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-820ab9a3]{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-820ab9a3]>*{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]: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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{position:sticky;top:0;z-index:3}.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container[data-v-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]>*{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-820ab9a3],.kong-ui-public-page-layout.new-appearance .page-layout-header .page-header-container .page-header-start .title-after-container[data-v-820ab9a3]{flex-shrink:0}.kong-ui-public-page-layout.new-appearance .page-layout-header:not(:has(.page-layout-tabs)) .page-header-container[data-v-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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-820ab9a3]{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/package.json

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