From a7cc37c3237a96bdc972bf960beed5a3b1d888e4 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 10:39:57 -0400
Subject: [PATCH 01/25] feat(pageheader): new component [khcp-7898]

---
 packages/core/app-layout/docs/page-header.md  |  47 ++++++++
 .../sandbox/components/NavLinks.vue           |   3 +
 packages/core/app-layout/sandbox/index.ts     |   5 +
 .../app-layout/sandbox/pages/PageHeader.vue   |  66 ++++++++++
 .../components/pageHeader/PageHeader.cy.ts    |  74 ++++++++++++
 .../src/components/pageHeader/PageHeader.vue  | 113 ++++++++++++++++++
 packages/core/app-layout/src/index.ts         |  12 +-
 pnpm-lock.yaml                                |   1 +
 8 files changed, 316 insertions(+), 5 deletions(-)
 create mode 100644 packages/core/app-layout/docs/page-header.md
 create mode 100644 packages/core/app-layout/sandbox/pages/PageHeader.vue
 create mode 100644 packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
 create mode 100644 packages/core/app-layout/src/components/pageHeader/PageHeader.vue

diff --git a/packages/core/app-layout/docs/page-header.md b/packages/core/app-layout/docs/page-header.md
new file mode 100644
index 0000000000..6557871651
--- /dev/null
+++ b/packages/core/app-layout/docs/page-header.md
@@ -0,0 +1,47 @@
+# PageHeader.vue
+
+A Kong UI dynamic page header component.
+
+- [Features](#features)
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Slots](#slots)
+
+## Features
+
+- Reactive updates based on `prop` value changes :rocket:
+- Slottable areas for displaying custom content, icons, etc.
+
+## Requirements
+
+- `vue` must be initialized in the host application
+- `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents). Specifically, the following Kongponents must be available:
+  - `KBreadcrumb`
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/app-layout` package.](../README.md#install)
+
+### Props
+
+#### `title`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+The title text of the page.
+
+### Slots
+
+#### `center`
+
+The main slot to use for navbar content if you don't need a left/center/right navbar layout.
+
+---
+
+[← Back to `@kong-ui-public/app-layout` docs](../README.md)
diff --git a/packages/core/app-layout/sandbox/components/NavLinks.vue b/packages/core/app-layout/sandbox/components/NavLinks.vue
index bf02be2bd5..0248f20bec 100644
--- a/packages/core/app-layout/sandbox/components/NavLinks.vue
+++ b/packages/core/app-layout/sandbox/components/NavLinks.vue
@@ -12,5 +12,8 @@
     <router-link to="/kong-manager-example">
       KM Example
     </router-link>
+    <router-link to="/page-header">
+      PageHeader
+    </router-link>
   </div>
 </template>
diff --git a/packages/core/app-layout/sandbox/index.ts b/packages/core/app-layout/sandbox/index.ts
index 3ec532d923..c5d79218da 100644
--- a/packages/core/app-layout/sandbox/index.ts
+++ b/packages/core/app-layout/sandbox/index.ts
@@ -28,6 +28,11 @@ const router = createRouter({
       name: 'kong-manager-example',
       component: () => import('./pages/KongManagerLayoutExample.vue'),
     },
+    {
+      path: '/page-header',
+      name: 'page-header',
+      component: () => import('./pages/PageHeader.vue'),
+    },
   ],
 })
 
diff --git a/packages/core/app-layout/sandbox/pages/PageHeader.vue b/packages/core/app-layout/sandbox/pages/PageHeader.vue
new file mode 100644
index 0000000000..3e41313cbe
--- /dev/null
+++ b/packages/core/app-layout/sandbox/pages/PageHeader.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="sandbox-container">
+    <PageHeader
+      :breadcrumbs="breadcrumbs"
+      title="Cats are Cool"
+    >
+      <template #title-icon>
+        <KIcon
+          color="#169fcc"
+          icon="graduationHat"
+          size="20"
+        />
+      </template>
+      <template #title-badge>
+        <KBadge appearance="info">
+          TRUTH
+        </KBadge>
+      </template>
+
+      <template #actions>
+        <div class="actions-wrapper">
+          <KInputSwitch
+            v-model="enabled"
+            class="mr-3"
+            :label="enabled ? 'Enabled' : 'Disabled'"
+            label-position="left"
+          />
+          <KButton
+            appearance="creation"
+            icon="plus"
+          >
+            Do Things
+          </KButton>
+        </div>
+      </template>
+    </PageHeader>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { PageHeader } from '../../src'
+
+const breadcrumbs = computed(() => {
+  return [
+    {
+      key: 'home',
+      to: { name: 'home' },
+      text: 'Home',
+      icon: 'kong',
+    },
+  ]
+})
+const enabled = ref(false)
+</script>
+
+<style lang="scss" scoped>
+.mr-3 {
+  margin-right: 8px;
+}
+
+.actions-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+</style>
diff --git a/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
new file mode 100644
index 0000000000..8471eb03ea
--- /dev/null
+++ b/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
@@ -0,0 +1,74 @@
+// Cypress component test spec file
+
+import PageHeader from './PageHeader.vue'
+
+describe('<PageHeader />', () => {
+  it('should correctly render content when using props', () => {
+    const title = 'Cats are Cool'
+    const breadcrumbTitle = 'Home'
+
+    cy.mount(PageHeader, {
+      props: {
+        title,
+        breadcrumbs: [{
+          key: 'home',
+          to: { name: 'home' },
+          text: breadcrumbTitle,
+          icon: 'kong',
+        }],
+      },
+    })
+
+    cy.get('.kong-ui-page-header').should('exist')
+    cy.getTestId('page-breadcrumbs').should('be.visible')
+    cy.get('.k-breadcrumb-text').should('contain.text', breadcrumbTitle)
+    cy.getTestId('page-title-text').should('be.visible')
+    cy.getTestId('page-title-text').should('contain.text', title)
+  })
+
+  it('should correctly render content when use slots', () => {
+    const title = 'Cats are Cool'
+    const breadcrumbText = 'breadcrumbs-are-cool'
+    const iconText = 'title-icons-are-cool'
+    const badgeText = 'title-badges-are-cool'
+    const actionsText = 'actions-are-cool'
+
+    cy.mount(PageHeader, {
+      slots: {
+        breadcrumbs: breadcrumbText,
+        default: title,
+        'title-icon': iconText,
+        'title-badge': badgeText,
+        actions: actionsText,
+      },
+    })
+
+    cy.get('.kong-ui-page-header').should('exist')
+    cy.getTestId('page-breadcrumbs').should('be.visible')
+    cy.getTestId('page-breadcrumbs').should('contain.text', breadcrumbText)
+    cy.getTestId('page-title-icon').should('be.visible')
+    cy.getTestId('page-title-icon').should('contain.text', iconText)
+    cy.getTestId('page-title-text').should('be.visible')
+    cy.getTestId('page-title-text').should('contain.text', title)
+    cy.getTestId('page-title-badge').should('be.visible')
+    cy.getTestId('page-title-badge').should('contain.text', badgeText)
+    cy.getTestId('page-actions').should('be.visible')
+    cy.getTestId('page-actions').should('contain.text', actionsText)
+  })
+
+  it('should not render empty slots', () => {
+    const title = 'Cats are Cool'
+
+    cy.mount(PageHeader, {
+      props: {
+        title,
+      },
+    })
+
+    cy.get('.kong-ui-page-header').should('exist')
+    cy.getTestId('page-breadcrumbs').should('not.exist')
+    cy.getTestId('page-title-icon').should('not.exist')
+    cy.getTestId('page-title-badge').should('not.exist')
+    cy.getTestId('page-actions').should('not.exist')
+  })
+})
diff --git a/packages/core/app-layout/src/components/pageHeader/PageHeader.vue b/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
new file mode 100644
index 0000000000..21e76cf2c3
--- /dev/null
+++ b/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="kong-ui-page-header">
+    <div
+      v-if="hasBreadcrumbs"
+      class="page-breadcrumbs"
+      data-testid="page-breadcrumbs"
+    >
+      <slot name="breadcrumbs">
+        <KBreadcrumbs :items="breadcrumbs">
+          <template #divider>
+            /
+          </template>
+        </KBreadcrumbs>
+      </slot>
+    </div>
+
+    <div
+      class="page-title-section"
+      :data-testid="dataTestId"
+    >
+      <div class="page-title-wrapper">
+        <div
+          v-if="$slots['title-icon']"
+          class="page-title-icon"
+          data-testid="page-title-icon"
+        >
+          <slot name="title-icon" />
+        </div>
+        <h1
+          class="truncate"
+          data-testid="page-title-text"
+          :title="title"
+        >
+          <slot>
+            {{ title }}
+          </slot>
+        </h1>
+        <div
+          v-if="$slots['title-badge']"
+          class="page-title-badge"
+          data-testid="page-title-badge"
+        >
+          <slot name="title-badge" />
+        </div>
+      </div>
+
+      <div
+        v-if="$slots.actions"
+        class="page-actions"
+        data-testid="page-actions"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, PropType } from 'vue'
+import type { BreadcrumbItem } from '@kong/kongponents'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  breadcrumbs: {
+    type: Array as PropType<BreadcrumbItem[]>,
+    default: () => ([]),
+  },
+})
+
+const slots = useSlots()
+
+const hasBreadcrumbs = computed((): boolean => !!(props.breadcrumbs.length || slots.breadcrumbs))
+const dataTestId = computed((): string => props.title ? `page-title-${props.title.toLowerCase().replace(/\s/g, '-')}` : 'page-title')
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-page-header {
+
+  .page-title-section {
+    display: flex;
+    justify-content: space-between;
+
+    .page-title-wrapper {
+      display: flex;
+      align-items: baseline;
+
+      .page-title-icon {
+        margin-right: var(--spacing-xs, 4px);
+      }
+
+      .page-title-badge {
+        align-self: center;
+        margin-left: var(--spacing-sm, 8px);
+      }
+
+      h1 {
+        color: var(--black-500, #0B172D);
+        font-size: 24px;
+        margin: var(--spacing-md, 16px) 0;
+      }
+    }
+  }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/packages/core/app-layout/src/index.ts b/packages/core/app-layout/src/index.ts
index a61ae6de82..20a497b010 100644
--- a/packages/core/app-layout/src/index.ts
+++ b/packages/core/app-layout/src/index.ts
@@ -1,11 +1,12 @@
 import type { App } from 'vue'
+
+import AccountDropdown from './components/navbar/AccountDropdown.vue'
+import AppError from './components/errors/AppError.vue'
 import AppLayout from './components/AppLayout.vue'
 import AppNavbar from './components/navbar/AppNavbar.vue'
-import AccountDropdown from './components/navbar/AccountDropdown.vue'
-
 import AppSidebar from './components/sidebar/AppSidebar.vue'
+import PageHeader from './components/pageHeader/PageHeader.vue'
 import SidebarToggle from './components/sidebar/SidebarToggle.vue'
-import AppError from './components/errors/AppError.vue'
 
 // Export Vue plugin as the default
 export default {
@@ -18,12 +19,13 @@ export default {
 
 // Export individual Components
 export {
+  AccountDropdown,
+  AppError,
   AppLayout,
   AppNavbar,
   AppSidebar,
+  PageHeader,
   SidebarToggle,
-  AppError,
-  AccountDropdown,
 }
 
 export * from './types'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4318f53551..fffa1fc2cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1536,6 +1536,7 @@ packages:
     transitivePeerDependencies:
       - '@popperjs/core'
       - debug
+    dev: true
 
   /@kong/swagger-ui-kong-theme-universal@4.2.6(react-dom@17.0.2)(react@17.0.2)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-ZZtnsER3yHFnzjy5OO3jYgeY3ZCuhQP6IFqwq2vUj9HntyJUBOBUxvTJ9YJoQHz2wMVuatdUJHadQcUVS/Cktw==}

From 0f52572adf980b8656428f74ac0c791298d22f2a Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 10:41:00 -0400
Subject: [PATCH 02/25] fix(*): lint

---
 .../core/app-layout/src/components/pageHeader/PageHeader.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/PageHeader.vue b/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
index 21e76cf2c3..75236ba172 100644
--- a/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
@@ -84,8 +84,8 @@ const dataTestId = computed((): string => props.title ? `page-title-${props.titl
     justify-content: space-between;
 
     .page-title-wrapper {
-      display: flex;
       align-items: baseline;
+      display: flex;
 
       .page-title-icon {
         margin-right: var(--spacing-xs, 4px);

From 5a7eaad027e1067ea6a584d2d6fff64ceed7d396 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 11:42:05 -0400
Subject: [PATCH 03/25] fix(*): adam feedback

---
 packages/core/app-layout/docs/page-header.md  |  28 ++++-
 .../{PageHeader.vue => PageHeaderPage.vue}    |  10 +-
 .../components/pageHeader/AppPageHeader.cy.ts |  73 +++++++++++
 .../components/pageHeader/AppPageHeader.vue   | 113 ++++++++++++++++++
 .../components/pageHeader/PageHeader.cy.ts    |  74 ------------
 .../src/components/pageHeader/PageHeader.vue  | 113 ------------------
 6 files changed, 218 insertions(+), 193 deletions(-)
 rename packages/core/app-layout/sandbox/pages/{PageHeader.vue => PageHeaderPage.vue} (85%)
 create mode 100644 packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
 create mode 100644 packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
 delete mode 100644 packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
 delete mode 100644 packages/core/app-layout/src/components/pageHeader/PageHeader.vue

diff --git a/packages/core/app-layout/docs/page-header.md b/packages/core/app-layout/docs/page-header.md
index 6557871651..bf12b4dc60 100644
--- a/packages/core/app-layout/docs/page-header.md
+++ b/packages/core/app-layout/docs/page-header.md
@@ -1,4 +1,4 @@
-# PageHeader.vue
+# AppPageHeader.vue
 
 A Kong UI dynamic page header component.
 
@@ -31,16 +31,36 @@ A Kong UI dynamic page header component.
 #### `title`
 
 - type: `String`
-- required: `false`
+- required: `true`
 - default: `''`
 
 The title text of the page.
 
+#### `breadcrumbs`
+
+- type: Array as PropType<BreadcrumbItem[]>
+- required: `false`
+- default: `[]`
+
+Breadcrumb object to be passed into `KBreadcrumb`.
+
 ### Slots
 
-#### `center`
+#### `icon`
+
+Content displayed right before the title text, typically an icon.
+
+#### `badge`
+
+Content displayed right after the title text, typically a badge.
+
+#### `actions`
+
+Content displayed opposite the title, typically an action menu.
+
+#### `below`
 
-The main slot to use for navbar content if you don't need a left/center/right navbar layout.
+Content displayed directly below the title.
 
 ---
 
diff --git a/packages/core/app-layout/sandbox/pages/PageHeader.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
similarity index 85%
rename from packages/core/app-layout/sandbox/pages/PageHeader.vue
rename to packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 3e41313cbe..5ce50a5eeb 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeader.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -4,14 +4,14 @@
       :breadcrumbs="breadcrumbs"
       title="Cats are Cool"
     >
-      <template #title-icon>
+      <template #icon>
         <KIcon
           color="#169fcc"
           icon="graduationHat"
           size="20"
         />
       </template>
-      <template #title-badge>
+      <template #badge>
         <KBadge appearance="info">
           TRUTH
         </KBadge>
@@ -33,6 +33,12 @@
           </KButton>
         </div>
       </template>
+
+      <template #below>
+        <div>
+          Cats are a key part of a balanced day (except when walking down stairs)
+        </div>
+      </template>
     </PageHeader>
   </div>
 </template>
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
new file mode 100644
index 0000000000..c1555a458f
--- /dev/null
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
@@ -0,0 +1,73 @@
+// Cypress component test spec file
+
+import AppPageHeader from './AppPageHeader.vue'
+
+describe('<AppPageHeader />', () => {
+  it('should correctly render content when using props', () => {
+    const title = 'Cats are Cool'
+    const breadcrumbTitle = 'Home'
+
+    cy.mount(AppPageHeader, {
+      props: {
+        title,
+        breadcrumbs: [{
+          key: 'home',
+          to: { name: 'home' },
+          text: breadcrumbTitle,
+          icon: 'kong',
+        }],
+      },
+    })
+
+    cy.get('.kong-ui-app-page-header').should('exist')
+    cy.getTestId('page-header-breadcrumbs').should('be.visible')
+    cy.get('.k-breadcrumb-text').should('contain.text', breadcrumbTitle)
+    cy.getTestId('page-header-title').should('be.visible')
+    cy.getTestId('page-header-title').should('contain.text', title)
+  })
+
+  it('should correctly render content when use slots', () => {
+    const title = 'Cats are Cool'
+    const iconText = 'title-icons-are-cool'
+    const badgeText = 'title-badges-are-cool'
+    const actionsText = 'actions-are-cool'
+    const belowText = 'Cats are the key to a happy life.'
+
+    cy.mount(AppPageHeader, {
+      slots: {
+        title,
+        icon: iconText,
+        badge: badgeText,
+        actions: actionsText,
+        below: belowText,
+      },
+    })
+
+    cy.get('.kong-ui-app-page-header').should('exist')
+    cy.getTestId('page-header-title-icon').should('be.visible')
+    cy.getTestId('page-header-title-icon').should('contain.text', iconText)
+    cy.getTestId('page-header-title-badge').should('be.visible')
+    cy.getTestId('page-header-title-badge').should('contain.text', badgeText)
+    cy.getTestId('page-header-actions').should('be.visible')
+    cy.getTestId('page-header-actions').should('contain.text', actionsText)
+    cy.getTestId('page-header-below-section').should('be.visible')
+    cy.getTestId('page-header-below-section').should('contain.text', belowText)
+  })
+
+  it('should not render empty props/slots', () => {
+    const title = 'Cats are Cool'
+
+    cy.mount(AppPageHeader, {
+      props: {
+        title,
+      },
+    })
+
+    cy.get('.kong-ui-app-page-header').should('exist')
+    cy.getTestId('page-header-breadcrumbs').should('not.exist')
+    cy.getTestId('page-header-title-icon').should('not.exist')
+    cy.getTestId('page-header-title-badge').should('not.exist')
+    cy.getTestId('page-header-actions').should('not.exist')
+    cy.getTestId('page-header-below-section').should('not.exist')
+  })
+})
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
new file mode 100644
index 0000000000..810c9cde2b
--- /dev/null
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="kong-ui-app-page-header">
+    <div
+      v-if="hasBreadcrumbs"
+      class="page-header-breadcrumbs"
+      data-testid="page-header-breadcrumbs"
+    >
+      <KBreadcrumbs :items="breadcrumbs">
+        <template #divider>
+          /
+        </template>
+      </KBreadcrumbs>
+    </div>
+
+    <div class="page-header-title-section">
+      <div class="page-header-title-wrapper">
+        <div
+          v-if="$slots.icon"
+          class="page-header-title-icon"
+          data-testid="page-header-title-icon"
+        >
+          <slot name="icon" />
+        </div>
+        <h1
+          class="page-header-title"
+          data-testid="page-header-title"
+          :title="title"
+        >
+          {{ title }}
+        </h1>
+        <div
+          v-if="$slots.badge"
+          class="page-header-title-badge"
+          data-testid="page-header-title-badge"
+        >
+          <slot name="badge" />
+        </div>
+      </div>
+
+      <div
+        v-if="$slots.actions"
+        class="page-header-actions"
+        data-testid="page-header-actions"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      v-if="$slots.below"
+      class="page-header-section-below"
+      data-testid="page-header-section-below"
+    >
+      <slot name="below" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import type { BreadcrumbItem } from '@kong/kongponents'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  breadcrumbs: {
+    type: Array as PropType<BreadcrumbItem[]>,
+    default: () => ([]),
+  },
+})
+
+const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-app-page-header {
+  .page-header-title-section {
+    display: flex;
+    justify-content: space-between;
+
+    .page-header-title-wrapper {
+      align-items: baseline;
+      display: flex;
+
+      .page-header-title-icon {
+        margin-right: $kui-space-20;
+      }
+
+      .page-header-title-badge {
+        align-self: center;
+        margin-left: $kui-space-40;
+      }
+
+      .page-header-title {
+        color: #0B172D;  /** black-500 */
+        font-size: $kui-font-size-70;
+        margin: $kui-space-60 $kui-space-0;
+        /** truncation */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .page-header-section-below {
+    width: 100%;
+  }
+}
+</style>
diff --git a/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
deleted file mode 100644
index 8471eb03ea..0000000000
--- a/packages/core/app-layout/src/components/pageHeader/PageHeader.cy.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-// Cypress component test spec file
-
-import PageHeader from './PageHeader.vue'
-
-describe('<PageHeader />', () => {
-  it('should correctly render content when using props', () => {
-    const title = 'Cats are Cool'
-    const breadcrumbTitle = 'Home'
-
-    cy.mount(PageHeader, {
-      props: {
-        title,
-        breadcrumbs: [{
-          key: 'home',
-          to: { name: 'home' },
-          text: breadcrumbTitle,
-          icon: 'kong',
-        }],
-      },
-    })
-
-    cy.get('.kong-ui-page-header').should('exist')
-    cy.getTestId('page-breadcrumbs').should('be.visible')
-    cy.get('.k-breadcrumb-text').should('contain.text', breadcrumbTitle)
-    cy.getTestId('page-title-text').should('be.visible')
-    cy.getTestId('page-title-text').should('contain.text', title)
-  })
-
-  it('should correctly render content when use slots', () => {
-    const title = 'Cats are Cool'
-    const breadcrumbText = 'breadcrumbs-are-cool'
-    const iconText = 'title-icons-are-cool'
-    const badgeText = 'title-badges-are-cool'
-    const actionsText = 'actions-are-cool'
-
-    cy.mount(PageHeader, {
-      slots: {
-        breadcrumbs: breadcrumbText,
-        default: title,
-        'title-icon': iconText,
-        'title-badge': badgeText,
-        actions: actionsText,
-      },
-    })
-
-    cy.get('.kong-ui-page-header').should('exist')
-    cy.getTestId('page-breadcrumbs').should('be.visible')
-    cy.getTestId('page-breadcrumbs').should('contain.text', breadcrumbText)
-    cy.getTestId('page-title-icon').should('be.visible')
-    cy.getTestId('page-title-icon').should('contain.text', iconText)
-    cy.getTestId('page-title-text').should('be.visible')
-    cy.getTestId('page-title-text').should('contain.text', title)
-    cy.getTestId('page-title-badge').should('be.visible')
-    cy.getTestId('page-title-badge').should('contain.text', badgeText)
-    cy.getTestId('page-actions').should('be.visible')
-    cy.getTestId('page-actions').should('contain.text', actionsText)
-  })
-
-  it('should not render empty slots', () => {
-    const title = 'Cats are Cool'
-
-    cy.mount(PageHeader, {
-      props: {
-        title,
-      },
-    })
-
-    cy.get('.kong-ui-page-header').should('exist')
-    cy.getTestId('page-breadcrumbs').should('not.exist')
-    cy.getTestId('page-title-icon').should('not.exist')
-    cy.getTestId('page-title-badge').should('not.exist')
-    cy.getTestId('page-actions').should('not.exist')
-  })
-})
diff --git a/packages/core/app-layout/src/components/pageHeader/PageHeader.vue b/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
deleted file mode 100644
index 75236ba172..0000000000
--- a/packages/core/app-layout/src/components/pageHeader/PageHeader.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div class="kong-ui-page-header">
-    <div
-      v-if="hasBreadcrumbs"
-      class="page-breadcrumbs"
-      data-testid="page-breadcrumbs"
-    >
-      <slot name="breadcrumbs">
-        <KBreadcrumbs :items="breadcrumbs">
-          <template #divider>
-            /
-          </template>
-        </KBreadcrumbs>
-      </slot>
-    </div>
-
-    <div
-      class="page-title-section"
-      :data-testid="dataTestId"
-    >
-      <div class="page-title-wrapper">
-        <div
-          v-if="$slots['title-icon']"
-          class="page-title-icon"
-          data-testid="page-title-icon"
-        >
-          <slot name="title-icon" />
-        </div>
-        <h1
-          class="truncate"
-          data-testid="page-title-text"
-          :title="title"
-        >
-          <slot>
-            {{ title }}
-          </slot>
-        </h1>
-        <div
-          v-if="$slots['title-badge']"
-          class="page-title-badge"
-          data-testid="page-title-badge"
-        >
-          <slot name="title-badge" />
-        </div>
-      </div>
-
-      <div
-        v-if="$slots.actions"
-        class="page-actions"
-        data-testid="page-actions"
-      >
-        <slot name="actions" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots, PropType } from 'vue'
-import type { BreadcrumbItem } from '@kong/kongponents'
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  breadcrumbs: {
-    type: Array as PropType<BreadcrumbItem[]>,
-    default: () => ([]),
-  },
-})
-
-const slots = useSlots()
-
-const hasBreadcrumbs = computed((): boolean => !!(props.breadcrumbs.length || slots.breadcrumbs))
-const dataTestId = computed((): string => props.title ? `page-title-${props.title.toLowerCase().replace(/\s/g, '-')}` : 'page-title')
-</script>
-
-<style lang="scss" scoped>
-.kong-ui-page-header {
-
-  .page-title-section {
-    display: flex;
-    justify-content: space-between;
-
-    .page-title-wrapper {
-      align-items: baseline;
-      display: flex;
-
-      .page-title-icon {
-        margin-right: var(--spacing-xs, 4px);
-      }
-
-      .page-title-badge {
-        align-self: center;
-        margin-left: var(--spacing-sm, 8px);
-      }
-
-      h1 {
-        color: var(--black-500, #0B172D);
-        font-size: 24px;
-        margin: var(--spacing-md, 16px) 0;
-      }
-    }
-  }
-
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-</style>

From 65e0dc2ed6c15dbcc400f884a38820bc5c516a66 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 12:03:55 -0400
Subject: [PATCH 04/25] fix(*): imports

---
 packages/core/app-layout/sandbox/pages/PageHeaderPage.vue | 6 +++---
 packages/core/app-layout/src/index.ts                     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 5ce50a5eeb..7d00c364ab 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sandbox-container">
-    <PageHeader
+    <AppPageHeader
       :breadcrumbs="breadcrumbs"
       title="Cats are Cool"
     >
@@ -39,13 +39,13 @@
           Cats are a key part of a balanced day (except when walking down stairs)
         </div>
       </template>
-    </PageHeader>
+    </AppPageHeader>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { PageHeader } from '../../src'
+import { AppPageHeader } from '../../src'
 
 const breadcrumbs = computed(() => {
   return [
diff --git a/packages/core/app-layout/src/index.ts b/packages/core/app-layout/src/index.ts
index 20a497b010..706c55351b 100644
--- a/packages/core/app-layout/src/index.ts
+++ b/packages/core/app-layout/src/index.ts
@@ -4,8 +4,8 @@ import AccountDropdown from './components/navbar/AccountDropdown.vue'
 import AppError from './components/errors/AppError.vue'
 import AppLayout from './components/AppLayout.vue'
 import AppNavbar from './components/navbar/AppNavbar.vue'
+import AppPageHeader from './components/pageHeader/AppPageHeader.vue'
 import AppSidebar from './components/sidebar/AppSidebar.vue'
-import PageHeader from './components/pageHeader/PageHeader.vue'
 import SidebarToggle from './components/sidebar/SidebarToggle.vue'
 
 // Export Vue plugin as the default
@@ -23,8 +23,8 @@ export {
   AppError,
   AppLayout,
   AppNavbar,
+  AppPageHeader,
   AppSidebar,
-  PageHeader,
   SidebarToggle,
 }
 

From e296d77de008e7e2413331f0eb58314eb915b8e3 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 12:22:39 -0400
Subject: [PATCH 05/25] fix(*): test selectors

---
 .../src/components/pageHeader/AppPageHeader.cy.ts           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
index c1555a458f..4629ae7d10 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
@@ -50,8 +50,8 @@ describe('<AppPageHeader />', () => {
     cy.getTestId('page-header-title-badge').should('contain.text', badgeText)
     cy.getTestId('page-header-actions').should('be.visible')
     cy.getTestId('page-header-actions').should('contain.text', actionsText)
-    cy.getTestId('page-header-below-section').should('be.visible')
-    cy.getTestId('page-header-below-section').should('contain.text', belowText)
+    cy.getTestId('page-header-section-below').should('be.visible')
+    cy.getTestId('page-header-section-below').should('contain.text', belowText)
   })
 
   it('should not render empty props/slots', () => {
@@ -68,6 +68,6 @@ describe('<AppPageHeader />', () => {
     cy.getTestId('page-header-title-icon').should('not.exist')
     cy.getTestId('page-header-title-badge').should('not.exist')
     cy.getTestId('page-header-actions').should('not.exist')
-    cy.getTestId('page-header-below-section').should('not.exist')
+    cy.getTestId('page-header-section-below').should('not.exist')
   })
 })

From 0cf1906b06f8d65f9cf73b18f4cd209307652373 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Thu, 13 Jul 2023 15:28:48 -0400
Subject: [PATCH 06/25] fix(*): styles

---
 packages/core/app-layout/sandbox/index.ts          |  2 +-
 .../src/components/pageHeader/AppPageHeader.vue    | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/core/app-layout/sandbox/index.ts b/packages/core/app-layout/sandbox/index.ts
index c5d79218da..2fc5fa7688 100644
--- a/packages/core/app-layout/sandbox/index.ts
+++ b/packages/core/app-layout/sandbox/index.ts
@@ -31,7 +31,7 @@ const router = createRouter({
     {
       path: '/page-header',
       name: 'page-header',
-      component: () => import('./pages/PageHeader.vue'),
+      component: () => import('./pages/PageHeaderPage.vue'),
     },
   ],
 })
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 810c9cde2b..332c8282e5 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -78,6 +78,7 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
 <style lang="scss" scoped>
 .kong-ui-app-page-header {
   .page-header-title-section {
+    align-items: center;
     display: flex;
     justify-content: space-between;
 
@@ -86,7 +87,7 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
       display: flex;
 
       .page-header-title-icon {
-        margin-right: $kui-space-20;
+        margin-right: $kui-space-40;
       }
 
       .page-header-title-badge {
@@ -95,9 +96,12 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
       }
 
       .page-header-title {
-        color: #0B172D;  /** black-500 */
+        color: $kui-color-text;
         font-size: $kui-font-size-70;
-        margin: $kui-space-60 $kui-space-0;
+        font-weight: $kui-font-weight-bold;
+        letter-spacing: -0.48px;
+        line-height: $kui-line-height-60;
+        margin: $kui-space-0;
         /** truncation */
         overflow: hidden;
         text-overflow: ellipsis;
@@ -109,5 +113,9 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
   .page-header-section-below {
     width: 100%;
   }
+
+  :deep(.k-breadcrumbs) {
+    margin-bottom: $kui-space-0;
+  }
 }
 </style>

From 2c513de297f8dc3a7fcd8338389355182265c39f Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Mon, 24 Jul 2023 17:09:04 -0400
Subject: [PATCH 07/25] fix(*): pr feedback

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 332c8282e5..439ab52db3 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -99,7 +99,6 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
         color: $kui-color-text;
         font-size: $kui-font-size-70;
         font-weight: $kui-font-weight-bold;
-        letter-spacing: -0.48px;
         line-height: $kui-line-height-60;
         margin: $kui-space-0;
         /** truncation */

From 084a448300246ec940aa64425b046c3ce2d17405 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Mon, 24 Jul 2023 17:14:14 -0400
Subject: [PATCH 08/25] fix(*): lockfile

---
 pnpm-lock.yaml | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fffa1fc2cc..de12e8e9fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: false
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -1536,7 +1532,6 @@ packages:
     transitivePeerDependencies:
       - '@popperjs/core'
       - debug
-    dev: true
 
   /@kong/swagger-ui-kong-theme-universal@4.2.6(react-dom@17.0.2)(react@17.0.2)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-ZZtnsER3yHFnzjy5OO3jYgeY3ZCuhQP6IFqwq2vUj9HntyJUBOBUxvTJ9YJoQHz2wMVuatdUJHadQcUVS/Cktw==}
@@ -13392,3 +13387,7 @@ packages:
   /zenscroll@4.0.2:
     resolution: {integrity: sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==}
     dev: false
+
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false

From acfc69acdaaba184d18345b12d2e781fac67f5f9 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 10:23:13 -0400
Subject: [PATCH 09/25] fix(*): bump kongponents

---
 packages/core/app-layout/package.json |  4 ++--
 pnpm-lock.yaml                        | 31 ++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
index e98c24acf1..89d452b20f 100644
--- a/packages/core/app-layout/package.json
+++ b/packages/core/app-layout/package.json
@@ -38,7 +38,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "^8.91.1",
+    "@kong/kongponents": "^8.106.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.7.1",
-    "@kong/kongponents": "^8.91.1",
+    "@kong/kongponents": "^8.106.0",
     "@types/lodash.clonedeep": "^4.5.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de12e8e9fb..9163c07dcb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -273,8 +273,8 @@ importers:
         specifier: ^1.7.1
         version: 1.7.1
       '@kong/kongponents':
-        specifier: ^8.91.1
-        version: 8.101.0(vue-router@4.2.4)(vue@3.3.4)
+        specifier: ^8.106.0
+        version: 8.106.0(vue-router@4.2.4)(vue@3.3.4)
       '@types/lodash.clonedeep':
         specifier: ^4.5.7
         version: 4.5.7
@@ -1532,6 +1532,31 @@ packages:
     transitivePeerDependencies:
       - '@popperjs/core'
       - debug
+    dev: true
+
+  /@kong/kongponents@8.106.0(vue-router@4.2.4)(vue@3.3.4):
+    resolution: {integrity: sha512-rOIFR6Sc+9ggcIB10rolVV7+WpgVvRtVTi16SQhNjxx/lTE9rwiF9WbCANbPh1gDPFFLY/nIs1+as1r7X3+eCA==}
+    engines: {node: '>=16.19.0'}
+    peerDependencies:
+      vue: '>= 3.3.0'
+      vue-router: ^4.1.6
+    dependencies:
+      axios: 0.27.2
+      date-fns: 2.30.0
+      date-fns-tz: 1.3.8(date-fns@2.30.0)
+      focus-trap: 7.5.2
+      focus-trap-vue: 3.4.0(focus-trap@7.5.2)(vue@3.3.4)
+      popper.js: 1.16.1
+      sortablejs: 1.15.0
+      swrv: 1.0.4(vue@3.3.4)
+      uuid: 8.3.2
+      v-calendar: 3.0.3(vue@3.3.4)
+      vue: 3.3.4
+      vue-draggable-next: 2.2.0(sortablejs@1.15.0)(vue@3.3.4)
+      vue-router: 4.2.4(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@popperjs/core'
+      - debug
 
   /@kong/swagger-ui-kong-theme-universal@4.2.6(react-dom@17.0.2)(react@17.0.2)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-ZZtnsER3yHFnzjy5OO3jYgeY3ZCuhQP6IFqwq2vUj9HntyJUBOBUxvTJ9YJoQHz2wMVuatdUJHadQcUVS/Cktw==}
@@ -1539,7 +1564,7 @@ packages:
       react: 17.0.2
     dependencies:
       '@braintree/sanitize-url': 2.1.0
-      '@kong/kongponents': 8.101.0(vue-router@4.2.4)(vue@3.3.4)
+      '@kong/kongponents': 8.106.0(vue-router@4.2.4)(vue@3.3.4)
       '@kyleshockey/xml': 1.0.2
       classnames: 2.3.2
       curl-to-har: 1.0.1

From 1937cb0589b0fb6fad392714341636e5eba838e0 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 11:59:18 -0400
Subject: [PATCH 10/25] fix(*): style cleanup

---
 packages/core/app-layout/sandbox/pages/PageHeaderPage.vue   | 4 ++++
 .../app-layout/src/components/pageHeader/AppPageHeader.vue  | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 7d00c364ab..ccd50293df 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -61,6 +61,10 @@ const enabled = ref(false)
 </script>
 
 <style lang="scss" scoped>
+.sandbox-container {
+  padding: 16px;
+}
+
 .mr-3 {
   margin-right: 8px;
 }
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 439ab52db3..e8b9f58519 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -7,7 +7,7 @@
     >
       <KBreadcrumbs :items="breadcrumbs">
         <template #divider>
-          /
+          <span class="page-header-breadcrumb-divider">/</span>
         </template>
       </KBreadcrumbs>
     </div>
@@ -77,6 +77,10 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
 
 <style lang="scss" scoped>
 .kong-ui-app-page-header {
+  .page-header-breadcrumb-divider {
+    color: $kui-color-text-neutral-weak;
+  }
+
   .page-header-title-section {
     align-items: center;
     display: flex;

From e5285388cecd00f5928e99bf2ab2db1d76a39f43 Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 12:42:41 -0400
Subject: [PATCH 11/25] fix(*): pr feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 packages/core/app-layout/docs/page-header.md                   | 3 +--
 .../app-layout/src/components/pageHeader/AppPageHeader.vue     | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/app-layout/docs/page-header.md b/packages/core/app-layout/docs/page-header.md
index bf12b4dc60..17d628868e 100644
--- a/packages/core/app-layout/docs/page-header.md
+++ b/packages/core/app-layout/docs/page-header.md
@@ -17,8 +17,7 @@ A Kong UI dynamic page header component.
 ## Requirements
 
 - `vue` must be initialized in the host application
-- `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents). Specifically, the following Kongponents must be available:
-  - `KBreadcrumb`
+- `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
 
 ## Usage
 
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index e8b9f58519..31d02357a1 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -63,7 +63,6 @@ import type { BreadcrumbItem } from '@kong/kongponents'
 const props = defineProps({
   title: {
     type: String,
-    default: '',
     required: true,
   },
   breadcrumbs: {
@@ -72,7 +71,7 @@ const props = defineProps({
   },
 })
 
-const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs.length)
+const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
 </script>
 
 <style lang="scss" scoped>

From ffe1ed803dad08a3bc85f0e614082192428ad4aa Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 12:49:52 -0400
Subject: [PATCH 12/25] fix(*): pr feedback

---
 packages/core/app-layout/docs/page-header.md  |  9 +++++----
 .../sandbox/pages/PageHeaderPage.vue          |  4 ++--
 .../components/pageHeader/AppPageHeader.cy.ts | 16 +++++++--------
 .../components/pageHeader/AppPageHeader.vue   | 20 +++++++++----------
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/core/app-layout/docs/page-header.md b/packages/core/app-layout/docs/page-header.md
index 17d628868e..ee49ccf10b 100644
--- a/packages/core/app-layout/docs/page-header.md
+++ b/packages/core/app-layout/docs/page-header.md
@@ -13,6 +13,7 @@ A Kong UI dynamic page header component.
 
 - Reactive updates based on `prop` value changes :rocket:
 - Slottable areas for displaying custom content, icons, etc.
+- Built-in support for rendering breadcrumbs (optional)
 
 ## Requirements
 
@@ -45,13 +46,13 @@ Breadcrumb object to be passed into `KBreadcrumb`.
 
 ### Slots
 
-#### `icon`
+#### `title-before`
 
-Content displayed right before the title text, typically an icon.
+Content displayed before the title text, typically an icon.
 
-#### `badge`
+#### `title-after`
 
-Content displayed right after the title text, typically a badge.
+Content displayed after the title text, typically a badge.
 
 #### `actions`
 
diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index ccd50293df..5f6401865e 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -4,14 +4,14 @@
       :breadcrumbs="breadcrumbs"
       title="Cats are Cool"
     >
-      <template #icon>
+      <template #title-before>
         <KIcon
           color="#169fcc"
           icon="graduationHat"
           size="20"
         />
       </template>
-      <template #badge>
+      <template #title-after>
         <KBadge appearance="info">
           TRUTH
         </KBadge>
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
index 4629ae7d10..9a468cc86f 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
@@ -36,18 +36,18 @@ describe('<AppPageHeader />', () => {
     cy.mount(AppPageHeader, {
       slots: {
         title,
-        icon: iconText,
-        badge: badgeText,
+        'title-before': iconText,
+        'title-after': badgeText,
         actions: actionsText,
         below: belowText,
       },
     })
 
     cy.get('.kong-ui-app-page-header').should('exist')
-    cy.getTestId('page-header-title-icon').should('be.visible')
-    cy.getTestId('page-header-title-icon').should('contain.text', iconText)
-    cy.getTestId('page-header-title-badge').should('be.visible')
-    cy.getTestId('page-header-title-badge').should('contain.text', badgeText)
+    cy.getTestId('page-header-title-before').should('be.visible')
+    cy.getTestId('page-header-title-before').should('contain.text', iconText)
+    cy.getTestId('page-header-title-after').should('be.visible')
+    cy.getTestId('page-header-title-after').should('contain.text', badgeText)
     cy.getTestId('page-header-actions').should('be.visible')
     cy.getTestId('page-header-actions').should('contain.text', actionsText)
     cy.getTestId('page-header-section-below').should('be.visible')
@@ -65,8 +65,8 @@ describe('<AppPageHeader />', () => {
 
     cy.get('.kong-ui-app-page-header').should('exist')
     cy.getTestId('page-header-breadcrumbs').should('not.exist')
-    cy.getTestId('page-header-title-icon').should('not.exist')
-    cy.getTestId('page-header-title-badge').should('not.exist')
+    cy.getTestId('page-header-title-before').should('not.exist')
+    cy.getTestId('page-header-title-after').should('not.exist')
     cy.getTestId('page-header-actions').should('not.exist')
     cy.getTestId('page-header-section-below').should('not.exist')
   })
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 31d02357a1..48581eda26 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -15,11 +15,11 @@
     <div class="page-header-title-section">
       <div class="page-header-title-wrapper">
         <div
-          v-if="$slots.icon"
-          class="page-header-title-icon"
-          data-testid="page-header-title-icon"
+          v-if="$slots['title-before']"
+          class="page-header-title-before"
+          data-testid="page-header-title-before"
         >
-          <slot name="icon" />
+          <slot name="title-before" />
         </div>
         <h1
           class="page-header-title"
@@ -29,11 +29,11 @@
           {{ title }}
         </h1>
         <div
-          v-if="$slots.badge"
-          class="page-header-title-badge"
-          data-testid="page-header-title-badge"
+          v-if="$slots['title-after']"
+          class="page-header-title-after"
+          data-testid="page-header-title-after"
         >
-          <slot name="badge" />
+          <slot name="title-after" />
         </div>
       </div>
 
@@ -89,11 +89,11 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
       align-items: baseline;
       display: flex;
 
-      .page-header-title-icon {
+      .page-header-title-before {
         margin-right: $kui-space-40;
       }
 
-      .page-header-title-badge {
+      .page-header-title-after {
         align-self: center;
         margin-left: $kui-space-40;
       }

From 91cd8b28af008b112b6ff60a97317bd58a08483e Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 25 Jul 2023 16:08:19 -0400
Subject: [PATCH 13/25] fix(apppageheader): fix truncation [KHCP-7898]

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 48581eda26..7038da2a95 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -84,10 +84,12 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
     align-items: center;
     display: flex;
     justify-content: space-between;
+    gap: $kui-space-40;
 
     .page-header-title-wrapper {
       align-items: baseline;
       display: flex;
+      min-width: 0;
 
       .page-header-title-before {
         margin-right: $kui-space-40;

From f76dab41dd7b107d8701b11bb7b3c5e1b034ab84 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 25 Jul 2023 16:11:38 -0400
Subject: [PATCH 14/25] fix(*): stylelint:fix [KHCP-7898]

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 7038da2a95..1a07cfdfdc 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -83,8 +83,8 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
   .page-header-title-section {
     align-items: center;
     display: flex;
-    justify-content: space-between;
     gap: $kui-space-40;
+    justify-content: space-between;
 
     .page-header-title-wrapper {
       align-items: baseline;

From b6735eb2bb67648e075bcb95701e3aec53844313 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 17:19:59 -0400
Subject: [PATCH 15/25] fix(*): token usage

---
 .../components/pageHeader/AppPageHeader.vue   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 1a07cfdfdc..3a30d486af 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -77,13 +77,13 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
 <style lang="scss" scoped>
 .kong-ui-app-page-header {
   .page-header-breadcrumb-divider {
-    color: $kui-color-text-neutral-weak;
+    color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
   }
 
   .page-header-title-section {
     align-items: center;
     display: flex;
-    gap: $kui-space-40;
+    gap: var(--kui-space-40, $kui-space-40);
     justify-content: space-between;
 
     .page-header-title-wrapper {
@@ -92,20 +92,20 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
       min-width: 0;
 
       .page-header-title-before {
-        margin-right: $kui-space-40;
+        margin-right: var(--kui-space-40, $kui-space-40);
       }
 
       .page-header-title-after {
         align-self: center;
-        margin-left: $kui-space-40;
+        margin-left: var(--kui-space-60, $kui-space-60);
       }
 
       .page-header-title {
-        color: $kui-color-text;
-        font-size: $kui-font-size-70;
-        font-weight: $kui-font-weight-bold;
-        line-height: $kui-line-height-60;
-        margin: $kui-space-0;
+        color: var(--kui-color-text, $kui-color-text);
+        font-size: var(--kui-font-size-70, $kui-font-size-70);
+        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+        line-height: var(--kui-line-height-60, $kui-line-height-60);
+        margin: var(--kui-space-0, $kui-space-0);
         /** truncation */
         overflow: hidden;
         text-overflow: ellipsis;
@@ -119,7 +119,7 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
   }
 
   :deep(.k-breadcrumbs) {
-    margin-bottom: $kui-space-0;
+    margin-bottom: var(--kui-space-0, $kui-space-0);
   }
 }
 </style>

From fe958097bf8b7d97e52320d05a73af6565994174 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 17:36:35 -0400
Subject: [PATCH 16/25] fix(*): revert token usage

---
 .../components/pageHeader/AppPageHeader.vue   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 3a30d486af..7309b234e7 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -77,13 +77,13 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
 <style lang="scss" scoped>
 .kong-ui-app-page-header {
   .page-header-breadcrumb-divider {
-    color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+    color: $kui-color-text-neutral-weak;
   }
 
   .page-header-title-section {
     align-items: center;
     display: flex;
-    gap: var(--kui-space-40, $kui-space-40);
+    gap: $kui-space-40;
     justify-content: space-between;
 
     .page-header-title-wrapper {
@@ -92,20 +92,20 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
       min-width: 0;
 
       .page-header-title-before {
-        margin-right: var(--kui-space-40, $kui-space-40);
+        margin-right: $kui-space-40;
       }
 
       .page-header-title-after {
         align-self: center;
-        margin-left: var(--kui-space-60, $kui-space-60);
+        margin-left: $kui-space-60;
       }
 
       .page-header-title {
-        color: var(--kui-color-text, $kui-color-text);
-        font-size: var(--kui-font-size-70, $kui-font-size-70);
-        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
-        line-height: var(--kui-line-height-60, $kui-line-height-60);
-        margin: var(--kui-space-0, $kui-space-0);
+        color: $kui-color-text;
+        font-size: $kui-font-size-70;
+        font-weight: $kui-font-weight-bold;
+        line-height: $kui-line-height-60;
+        margin: $kui-space-0;
         /** truncation */
         overflow: hidden;
         text-overflow: ellipsis;
@@ -119,7 +119,7 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
   }
 
   :deep(.k-breadcrumbs) {
-    margin-bottom: var(--kui-space-0, $kui-space-0);
+    margin-bottom: $kui-space-0;
   }
 }
 </style>

From b3b1f19f1ae73b3146c49775e1d40e05b2251772 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Tue, 25 Jul 2023 18:30:37 -0400
Subject: [PATCH 17/25] fix(*): mobile view

---
 .../src/components/pageHeader/AppPageHeader.vue        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 7309b234e7..a57bd54953 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -121,5 +121,15 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
   :deep(.k-breadcrumbs) {
     margin-bottom: $kui-space-0;
   }
+
+  @media (max-width: $kui-breakpoint-mobile) {
+    .page-header-title-section {
+      flex-wrap: wrap;
+    }
+
+    .page-header-section-below {
+      margin-top: $kui-space-40;
+    }
+  }
 }
 </style>

From b67014818e4482c5b0e4b65ffb2e801e8e45e6ad Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 12:07:30 -0400
Subject: [PATCH 18/25] fix(*): pr feedback

---
 .../components/pageHeader/AppPageHeader.vue    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index a57bd54953..d4d0940e0c 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -9,6 +9,12 @@
         <template #divider>
           <span class="page-header-breadcrumb-divider">/</span>
         </template>
+        <template
+          v-for="slotName in breadcrumbIconSlots"
+          #[slotName]
+        >
+          <slot :name="slotName" />
+        </template>
       </KBreadcrumbs>
     </div>
 
@@ -72,6 +78,10 @@ const props = defineProps({
 })
 
 const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
+const getBreadcrumbKey = (item: BreadcrumbItem, idx: number): string => { return item.key || `breadcrumb-${idx}` }
+const breadcrumbIconSlots = computed((): string[] => {
+  return props.breadcrumbs.map((item, idx) => getBreadcrumbKey(item, idx) + '-icon') || []
+})
 </script>
 
 <style lang="scss" scoped>
@@ -83,6 +93,7 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
   .page-header-title-section {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: $kui-space-40;
     justify-content: space-between;
 
@@ -116,19 +127,20 @@ const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
 
   .page-header-section-below {
     width: 100%;
+    margin-top: $kui-space-40;
   }
 
   :deep(.k-breadcrumbs) {
     margin-bottom: $kui-space-0;
   }
 
-  @media (max-width: $kui-breakpoint-mobile) {
+  @media (min-width: $kui-breakpoint-mobile) {
     .page-header-title-section {
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
     }
 
     .page-header-section-below {
-      margin-top: $kui-space-40;
+      margin-top: unset;
     }
   }
 }

From 83d1efd4aee878af2172499d3844668fc552a5c6 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 12:12:18 -0400
Subject: [PATCH 19/25] fix(*): lint

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index d4d0940e0c..1a8b6ca17d 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -126,8 +126,8 @@ const breadcrumbIconSlots = computed((): string[] => {
   }
 
   .page-header-section-below {
-    width: 100%;
     margin-top: $kui-space-40;
+    width: 100%;
   }
 
   :deep(.k-breadcrumbs) {

From ebfb5e36afe0064948ac970b44a9c32329dcbf53 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 12:38:09 -0400
Subject: [PATCH 20/25] fix(*): breadcrumb icon slot

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 1a8b6ca17d..88fb6eb5f9 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -80,7 +80,7 @@ const props = defineProps({
 const hasBreadcrumbs = computed((): boolean => !!props.breadcrumbs?.length)
 const getBreadcrumbKey = (item: BreadcrumbItem, idx: number): string => { return item.key || `breadcrumb-${idx}` }
 const breadcrumbIconSlots = computed((): string[] => {
-  return props.breadcrumbs.map((item, idx) => getBreadcrumbKey(item, idx) + '-icon') || []
+  return props.breadcrumbs.map((item, idx) => `icon-${getBreadcrumbKey(item, idx)}`) || []
 })
 </script>
 

From d786c5ae533dba80a220648a9f80de539afa02f1 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 15:03:28 -0400
Subject: [PATCH 21/25] fix(*): add comment

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 88fb6eb5f9..4eeefe47b2 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -100,7 +100,7 @@ const breadcrumbIconSlots = computed((): string[] => {
     .page-header-title-wrapper {
       align-items: baseline;
       display: flex;
-      min-width: 0;
+      min-width: 0; /** this style is needed for truncation to work correctly with flex */
 
       .page-header-title-before {
         margin-right: $kui-space-40;

From 9a6ffd5af622ef9bf743428602c580a949f06111 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 16:19:51 -0400
Subject: [PATCH 22/25] feat(*): kbreadcrumb icon slot

---
 packages/core/app-layout/docs/page-header.md  |  4 +++
 packages/core/app-layout/package.json         |  4 +--
 .../sandbox/pages/PageHeaderPage.vue          | 25 +++++++++++++++++--
 .../components/pageHeader/AppPageHeader.cy.ts | 13 +++++++++-
 .../components/pageHeader/AppPageHeader.vue   |  3 +++
 pnpm-lock.yaml                                | 10 ++++----
 6 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/core/app-layout/docs/page-header.md b/packages/core/app-layout/docs/page-header.md
index ee49ccf10b..dbab9fe254 100644
--- a/packages/core/app-layout/docs/page-header.md
+++ b/packages/core/app-layout/docs/page-header.md
@@ -46,6 +46,10 @@ Breadcrumb object to be passed into `KBreadcrumb`.
 
 ### Slots
 
+#### `${breadcrumb.key}-icon`
+
+We surface `KBreadcrumb`'s [icon slots](https://kongponents.konghq.com/components/breadcrumbs.html#icon-key).
+
 #### `title-before`
 
 Content displayed before the title text, typically an icon.
diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
index 89d452b20f..a99328157e 100644
--- a/packages/core/app-layout/package.json
+++ b/packages/core/app-layout/package.json
@@ -38,7 +38,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "^8.106.0",
+    "@kong/kongponents": "^8.113.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.7.1",
-    "@kong/kongponents": "^8.106.0",
+    "@kong/kongponents": "^8.113.0",
     "@types/lodash.clonedeep": "^4.5.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 5f6401865e..6dbc2a2157 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -4,15 +4,27 @@
       :breadcrumbs="breadcrumbs"
       title="Cats are Cool"
     >
+      <template #icon-home>
+        <KIcon
+          class="home-breadcrumb-icon"
+          color="#169fcc"
+          icon="immunity"
+          size="16"
+        />
+      </template>
       <template #title-before>
         <KIcon
+          class="title-icon"
           color="#169fcc"
           icon="graduationHat"
           size="20"
         />
       </template>
       <template #title-after>
-        <KBadge appearance="info">
+        <KBadge
+          appearance="neutral"
+          shape="rectangular"
+        >
           TRUTH
         </KBadge>
       </template>
@@ -53,7 +65,6 @@ const breadcrumbs = computed(() => {
       key: 'home',
       to: { name: 'home' },
       text: 'Home',
-      icon: 'kong',
     },
   ]
 })
@@ -65,6 +76,16 @@ const enabled = ref(false)
   padding: 16px;
 }
 
+.home-breadcrumb-icon {
+  margin-right: 8px;
+  align-self: center;
+  display: inline-flex;
+}
+
+.title-icon {
+  display: inline-flex;
+}
+
 .mr-3 {
   margin-right: 8px;
 }
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
index 9a468cc86f..ed304ce0d5 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.cy.ts
@@ -28,14 +28,23 @@ describe('<AppPageHeader />', () => {
 
   it('should correctly render content when use slots', () => {
     const title = 'Cats are Cool'
+    const breadcrumbIcon = 'home-breadcrumb-icon'
     const iconText = 'title-icons-are-cool'
     const badgeText = 'title-badges-are-cool'
     const actionsText = 'actions-are-cool'
     const belowText = 'Cats are the key to a happy life.'
 
     cy.mount(AppPageHeader, {
-      slots: {
+      props: {
         title,
+        breadcrumbs: [{
+          key: 'home',
+          to: { name: 'home' },
+          text: 'Home',
+        }],
+      },
+      slots: {
+        'icon-home': breadcrumbIcon,
         'title-before': iconText,
         'title-after': badgeText,
         actions: actionsText,
@@ -44,6 +53,8 @@ describe('<AppPageHeader />', () => {
     })
 
     cy.get('.kong-ui-app-page-header').should('exist')
+    cy.get('.k-breadcrumb-icon-wrapper').should('be.visible')
+    cy.get('.k-breadcrumb-icon-wrapper').should('contain.text', breadcrumbIcon)
     cy.getTestId('page-header-title-before').should('be.visible')
     cy.getTestId('page-header-title-before').should('contain.text', iconText)
     cy.getTestId('page-header-title-after').should('be.visible')
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 4eeefe47b2..434506d403 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -103,10 +103,13 @@ const breadcrumbIconSlots = computed((): string[] => {
       min-width: 0; /** this style is needed for truncation to work correctly with flex */
 
       .page-header-title-before {
+        display: inline-flex;
+        align-self: center;
         margin-right: $kui-space-40;
       }
 
       .page-header-title-after {
+        display: inline-flex;
         align-self: center;
         margin-left: $kui-space-60;
       }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9163c07dcb..25d169c8fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -273,8 +273,8 @@ importers:
         specifier: ^1.7.1
         version: 1.7.1
       '@kong/kongponents':
-        specifier: ^8.106.0
-        version: 8.106.0(vue-router@4.2.4)(vue@3.3.4)
+        specifier: ^8.113.0
+        version: 8.113.0(vue-router@4.2.4)(vue@3.3.4)
       '@types/lodash.clonedeep':
         specifier: ^4.5.7
         version: 4.5.7
@@ -1534,8 +1534,8 @@ packages:
       - debug
     dev: true
 
-  /@kong/kongponents@8.106.0(vue-router@4.2.4)(vue@3.3.4):
-    resolution: {integrity: sha512-rOIFR6Sc+9ggcIB10rolVV7+WpgVvRtVTi16SQhNjxx/lTE9rwiF9WbCANbPh1gDPFFLY/nIs1+as1r7X3+eCA==}
+  /@kong/kongponents@8.113.0(vue-router@4.2.4)(vue@3.3.4):
+    resolution: {integrity: sha512-6vIk8eANMS8k02DcbBOrveLxmdPVcBa8ZXiRq8reUcOYFWqv/78gaX+7VXj5dFb/pGjvSut4/vTXH5RfwAFdfQ==}
     engines: {node: '>=16.19.0'}
     peerDependencies:
       vue: '>= 3.3.0'
@@ -1564,7 +1564,7 @@ packages:
       react: 17.0.2
     dependencies:
       '@braintree/sanitize-url': 2.1.0
-      '@kong/kongponents': 8.106.0(vue-router@4.2.4)(vue@3.3.4)
+      '@kong/kongponents': 8.113.0(vue-router@4.2.4)(vue@3.3.4)
       '@kyleshockey/xml': 1.0.2
       classnames: 2.3.2
       curl-to-har: 1.0.1

From 6ffa4d67b4249532b920c4aa8ddbf18d9626b56e Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 16:21:14 -0400
Subject: [PATCH 23/25] fix(*): lint

---
 packages/core/app-layout/sandbox/pages/PageHeaderPage.vue     | 2 +-
 .../app-layout/src/components/pageHeader/AppPageHeader.vue    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 6dbc2a2157..e2eb38bb95 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -77,9 +77,9 @@ const enabled = ref(false)
 }
 
 .home-breadcrumb-icon {
-  margin-right: 8px;
   align-self: center;
   display: inline-flex;
+  margin-right: 8px;
 }
 
 .title-icon {
diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index 434506d403..e9f5cdba4d 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -103,14 +103,14 @@ const breadcrumbIconSlots = computed((): string[] => {
       min-width: 0; /** this style is needed for truncation to work correctly with flex */
 
       .page-header-title-before {
-        display: inline-flex;
         align-self: center;
+        display: inline-flex;
         margin-right: $kui-space-40;
       }
 
       .page-header-title-after {
-        display: inline-flex;
         align-self: center;
+        display: inline-flex;
         margin-left: $kui-space-60;
       }
 

From 9cb1e27c8c8534f3ea5ce6d85297169359ffacf9 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 16:26:04 -0400
Subject: [PATCH 24/25] fix(*): gap

---
 .../core/app-layout/src/components/pageHeader/AppPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
index e9f5cdba4d..1118ae9753 100644
--- a/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
+++ b/packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue
@@ -94,7 +94,7 @@ const breadcrumbIconSlots = computed((): string[] => {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: $kui-space-40;
+    gap: $kui-space-80;
     justify-content: space-between;
 
     .page-header-title-wrapper {

From 24180e45d7b08a7e880d9ff6955a50b43cc1e245 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Wed, 26 Jul 2023 16:43:33 -0400
Subject: [PATCH 25/25] fix(*): version bump

---
 package.json   | 2 +-
 pnpm-lock.yaml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index db2ebf0595..b67d038454 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.4.5",
     "@kong/design-tokens": "^1.7.1",
-    "@kong/kongponents": "^8.91.1",
+    "@kong/kongponents": "^8.113.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@types/flat": "^5.0.2",
     "@types/js-yaml": "^4.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25d169c8fe..3a50bfea7f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: ^1.7.1
         version: 1.7.1
       '@kong/kongponents':
-        specifier: ^8.91.1
-        version: 8.101.0(vue-router@4.2.4)(vue@3.3.4)
+        specifier: ^8.113.0
+        version: 8.113.0(vue-router@4.2.4)(vue@3.3.4)
       '@rushstack/eslint-patch':
         specifier: ^1.3.2
         version: 1.3.2