diff --git a/docs/components/truncate.md b/docs/components/truncate.md
index 2a2ad581a0..7ca8713d39 100644
--- a/docs/components/truncate.md
+++ b/docs/components/truncate.md
@@ -1,6 +1,6 @@
 # Truncate
 
-**KTruncate** - A Kongponent that limits content to a specific number of lines and provides controls to show or hide the truncated content.
+KTruncate - a container that limits content to a specific number of lines and provides controls to show or hide the hidden items.
 
 <KCard>
   <KTruncate>
@@ -44,22 +44,22 @@ Number of rows to truncate content. Default value is `1`.
 </template>
 ```
 
-### isTextContent
+### truncateText
 
 By default the component treats anything passed through the `default` slot as collection of HTML elements. Use this prop if you want to truncate elements that only contain text, such as one or more paragraph `<p>` tags.
 
 When this prop is set to `true`, the component applies different logic; truncation is achieved via the `-webkit-line-clamp` CSS property, rather than assessing the height of child elements to determine the row height.
 
 <KCard>
-  <KTruncate is-text-content :rows="3">
-    <p>A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#istextcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
-    <p>The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
+  <KTruncate truncate-text :rows="3">
+    <p class="text-paragraph">A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#textcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
+    <p class="text-paragraph">The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="3">
+  <KTruncate truncate-text :rows="3">
     <p>A good design decision to apply text truncation would be
       when displaying a <b>large amount of textual content</b>, such as a list
       of articles or product descriptions, in a limited space, such as
@@ -72,12 +72,12 @@ When this prop is set to `true`, the component applies different logic; truncati
 </template>
 ```
 
-### isExpanded
+### expanded
 
 When `true`, the component will not truncate the content and the collapse trigger will be visible.
 
 <KCard>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -86,7 +86,7 @@ When `true`, the component will not truncate the content and the collapse trigge
 
 ```html
 <template>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -99,14 +99,14 @@ When `true`, the component will not truncate the content and the collapse trigge
 Width of container element that wraps content passed through the `default` slot. Works just like `width` property in CSS. Default value is `100%`.
 
 <KCard>
-  <KTruncate is-text-content :rows="2" width="50%">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <KTruncate truncate-text :rows="2" width="50%">
+    <p class="text-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="2" width="50%">
+  <KTruncate truncate-text :rows="2" width="50%">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </template>
@@ -121,10 +121,10 @@ The content to truncate.
 **Note:** when using KTruncate for truncating collection of HTML elements (not text), to ensure the best experience with the component, please pass elements of equal height in the default slot. The component will base its guess for the height of the element on the height of each individual sibling, so passing elements of equal height will result in a more accurate and consistent output.
 
 :::tip TIP
-The component is reactive to its dimensions changes. To see this in action, try resizing your browser window and notice the behavior of the example below.
+The component is reactive to its dimensions changes. To see this in action, try resizing the container below.
 :::
 
-<KCard>
+<KCard class="resizable-card">
   <KTruncate :rows="3">
     <KBadge v-for="n in 30" :key="n">
       Item {{ n }}
@@ -136,7 +136,7 @@ The component is reactive to its dimensions changes. To see this in action, try
 
 Slot for a custom expand trigger element. Slot props:
 
-- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `isTextContent`
+- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `truncateText`
 - `expand` (type: `Function`) - Function to expand
 
 ### collapse-trigger
@@ -177,15 +177,27 @@ Example of using the `expand-trigger` and `collapse-trigger` slots for creating
 </template>
 ```
 
-<style lang="scss">
+<style lang="scss" scoped>
+.text-paragraph {
+  margin-top: $kui-space-0;
+  margin-bottom: $kui-space-40;
+}
+
+.resizable-card {
+  resize: horizontal;
+  overflow-x: auto;
+  min-width: 100px;
+  max-width: 90%;
+}
+
 .custom-trigger {
-  color: blue;
+  color: $kui-color-text-primary;
   text-decoration: underline;
   white-space: nowrap;
-  margin-left: 4px;
+  margin-left: $kui-space-20;
 
   &:hover {
-    color: darkblue;
+    color: $kui-color-text-primary-strong;
   }
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index d6dcef37c1..b1b4f77e08 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -570,6 +570,18 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTruncate
 
+#### Props
+
+* `isTextContent` prop has been changed to `truncateText`
+* `isExpanded` prop has been changed to `expanded`
+
+#### Structure
+
+* `k-truncate-content` class has been changed to `truncate-content`
+* `k-truncate-text` class has been changed to `truncate-text`
+* `k-truncate-expand-controls` class has been changed to `truncate-expand-controls`
+* `k-truncate-container` class has been changed to `truncate-container`
+* `k-truncate-collapse-controls` class has been changed to `truncate-collapse-controls`
 
 ### KView Switcher
 
diff --git a/src/components/KTruncate/KTruncate.cy.ts b/src/components/KTruncate/KTruncate.cy.ts
index 6449d04b81..680bb74492 100644
--- a/src/components/KTruncate/KTruncate.cy.ts
+++ b/src/components/KTruncate/KTruncate.cy.ts
@@ -55,11 +55,11 @@ describe('KTruncate', () => {
     cy.get('[data-testid="expand-trigger-wrapper"]').should('contain.text', expandTriggerContent).click()
   })
 
-  it('render expanded when isExpanded prop is true and render content passed in through expand trigger slot', () => {
+  it('render expanded when expanded prop is true and render content passed in through expand trigger slot', () => {
     const collapseTriggerContent = 'Collapse'
     mount(KTruncate, {
       props: {
-        isExpanded: true,
+        expanded: true,
       },
       slots: {
         default: [
diff --git a/src/components/KTruncate/KTruncate.vue b/src/components/KTruncate/KTruncate.vue
index 16bec779ca..f11413661e 100644
--- a/src/components/KTruncate/KTruncate.vue
+++ b/src/components/KTruncate/KTruncate.vue
@@ -2,13 +2,13 @@
   <div
     ref="kTruncateWrapper"
     class="k-truncate"
-    :class="[expanded ? 'expanded' : '', `k-truncate-${isTextContent ? 'text' : 'content'}`]"
+    :class="[expanded ? 'expanded' : '', `truncate-${truncateText ? 'text' : 'content'}`]"
     :style="widthStyle"
   >
     <!-- Order switched for ease when using keyboard navigation -->
     <div
-      v-if="!isTextContent && showToggle"
-      class="k-truncate-expand-controls"
+      v-if="!truncateText && showToggle"
+      class="truncate-expand-controls"
     >
       <div
         v-if="!expanded"
@@ -21,6 +21,7 @@
         >
           <button
             class="expand-trigger"
+            type="button"
             @click.stop="handleToggleClick"
           >
             {{ truncatedCount }}
@@ -30,11 +31,11 @@
     </div>
     <div
       ref="kTruncateContainer"
-      class="k-truncate-container"
+      class="truncate-container"
     >
       <slot name="default" />
       <div
-        v-if="!isTextContent && expanded"
+        v-if="!truncateText && expanded"
         data-testid="collapse-trigger-wrapper"
       >
         <slot
@@ -43,18 +44,20 @@
         >
           <ChevronUpIcon
             class="collapse-trigger"
-            :color="KUI_COLOR_TEXT_PRIMARY"
             role="button"
             tabindex="0"
             @click.stop="handleToggleClick"
+            @keydown.space.prevent
+            @keyup.enter="handleToggleClick"
+            @keyup.space="handleToggleClick"
           />
         </slot>
       </div>
     </div>
     <div
-      v-if="isTextContent && (showToggle || expanded)"
+      v-if="truncateText && (showToggle || expanded)"
       ref="textToggleControls"
-      class="k-truncate-collapse-controls"
+      class="truncate-collapse-controls"
     >
       <div
         v-if="!expanded"
@@ -95,7 +98,7 @@
 import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import { ChevronUpIcon } from '@kong/icons'
-import { KUI_SPACE_40, KUI_COLOR_TEXT_PRIMARY } from '@kong/design-tokens'
+import { KUI_SPACE_40 } from '@kong/design-tokens'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 
 const { getSizeFromString } = useUtilities()
@@ -106,11 +109,11 @@ const props = defineProps({
     default: 1,
     validator: (value: number): boolean => value > 0,
   },
-  isTextContent: {
+  truncateText: {
     type: Boolean,
     default: false,
   },
-  isExpanded: {
+  expanded: {
     type: Boolean,
     default: false,
   },
@@ -120,7 +123,7 @@ const props = defineProps({
   },
 })
 
-const expanded = ref<boolean>(props.isExpanded)
+const expanded = ref<boolean>(props.expanded)
 
 const showToggle = ref<boolean>(false)
 
@@ -145,7 +148,7 @@ const truncatedCount = ref<number>(0)
  * For example if rows is 2 and all elements are equal height if 22px, wrapper height will be set to 54px (2 * 22 + gap).
  */
 const setWrapperHeight = async (): Promise<void> => {
-  if (props.isTextContent) {
+  if (props.truncateText) {
     return
   }
 
@@ -173,7 +176,7 @@ const setWrapperHeight = async (): Promise<void> => {
 const updateToggleVisibility = (): void => {
   if (kTruncateContainer.value && kTruncateWrapper.value) {
     // in case with text content, need to compare scrollHeight value
-    const containerHeightProperty = props.isTextContent ? kTruncateContainer.value.scrollHeight : kTruncateContainer.value.offsetHeight
+    const containerHeightProperty = props.truncateText ? kTruncateContainer.value.scrollHeight : kTruncateContainer.value.offsetHeight
     const textToggleControlsHeight = textToggleControls.value ? textToggleControls.value.offsetHeight : 0
     /**
      * In case with text content, toggle controls element is rendered below content, so adds up to wrapper height.
@@ -186,7 +189,7 @@ const updateToggleVisibility = (): void => {
 
 // Counts elements that are wrapped to the hidden rows and therefore are not visible.
 const countExcessElements = (): void => {
-  if (props.isTextContent) {
+  if (props.truncateText) {
     return
   }
 
@@ -196,7 +199,7 @@ const countExcessElements = (): void => {
     for (let i = 0; i < children.length; i++) {
       /**
        * If element's offsetTop
-       * (offset from the nearest relatively positioned parent, which is .k-truncate-container)
+       * (offset from the nearest relatively positioned parent, which is .truncate-container)
        * is greater than the wrapper element height - means it's not visible
        */
       if (children[i].offsetTop > kTruncateWrapper.value.offsetHeight) {
@@ -247,18 +250,20 @@ onUnmounted(() => {
   overflow: hidden;
   padding: var(--kui-space-20, $kui-space-20);
 
-  .k-truncate-expand-controls {
-    align-items: flex-end !important;
-    display: flex !important;
-    height: 100% !important;
+  .truncate-expand-controls {
+    align-items: flex-end;
+    display: flex;
+    height: 100%;
 
     .expand-trigger {
       background: var(--kui-color-background-transparent, $kui-color-background-transparent);
       border: 0;
       border-radius: var(--kui-border-radius-round, $kui-border-radius-round);
       color: var(--kui-color-text-primary, $kui-color-text-primary);
+      font-family: var(--kui-font-family-text, $kui-font-family-text);
       font-size: var(--kui-font-size-10, $kui-font-size-10);
       font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+      line-height: var(--kui-line-height-10, $kui-line-height-10);
       padding: var(--kui-space-10, $kui-space-10);
 
       &:focus, &:active {
@@ -282,7 +287,10 @@ onUnmounted(() => {
   .collapse-trigger {
     background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
     border-radius: var(--kui-border-radius-round, $kui-border-radius-round);
+    color: var(--kui-color-text-primary, $kui-color-text-primary);
     cursor: pointer;
+    outline: none;
+    padding: var(--kui-space-20, $kui-space-20);
 
     &:focus-visible {
       box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
@@ -290,14 +298,17 @@ onUnmounted(() => {
 
     &:hover {
       background-color: var(--kui-color-background-primary-weaker, $kui-color-background-primary-weaker);
+      color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong) !important;
     }
 
-    &:focus {
+    &:focus,
+    &:focus-within {
       background-color: var(--kui-color-background-primary-weak, $kui-color-background-primary-weak);
+      color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger) !important;
     }
   }
 
-  &.k-truncate-content {
+  &.truncate-content {
     display: flex;
     flex-direction: row-reverse;
     height: v-bind('wrapperHeight');
@@ -305,7 +316,7 @@ onUnmounted(() => {
     &.expanded {
       height: auto;
     }
-    .k-truncate-container {
+    .truncate-container {
       display: flex;
       flex-wrap: wrap;
       gap: v-bind('gap');
@@ -318,39 +329,27 @@ onUnmounted(() => {
         content: '+';
       }
     }
-    .collapse-trigger {
-      padding: var(--kui-space-20, $kui-space-20);
-
-      &:focus, &:active {
-        box-shadow: none;
-      }
-
-      &:focus-within {
-        background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-    }
   }
-  &.k-truncate-text {
+  &.truncate-text {
     display: flex;
     flex-direction: column;
 
-    .k-truncate-container {
+    .truncate-container {
       -webkit-box-orient: vertical;
       display: -webkit-box;
       -webkit-line-clamp: v-bind('props.rows');
       overflow: hidden;
     }
     &.expanded {
-      .k-truncate-container {
+      .truncate-container {
         display: block;
       }
     }
   }
 
-  .k-truncate-collapse-controls {
-    margin-top: var(--kui-space-40, $kui-space-40) !important;
-    place-self: flex-end !important;
+  .truncate-collapse-controls {
+    margin-top: var(--kui-space-40, $kui-space-40);
+    place-self: flex-end;
   }
 }
 </style>