From d9f6fb8b75c2d19b4c49791b9fd0222e61556a91 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 29 Nov 2024 14:45:00 -0500
Subject: [PATCH 1/5] fix(kcodeblock): ts error [KHCP-11924]

---
 src/components/KCodeBlock/KCodeBlock.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue
index 84b9506730..1e11385951 100644
--- a/src/components/KCodeBlock/KCodeBlock.vue
+++ b/src/components/KCodeBlock/KCodeBlock.vue
@@ -397,7 +397,7 @@ const matchingLineNumbers = ref<number[]>([])
 const currentLineIndex = ref<null | number>(null)
 
 const totalLines = computed((): number[] => Array.from({ length: props.code?.split('\n').length }, (_, index) => index + 1))
-const maxLineNumberWidth = computed((): string => totalLines.value[totalLines.value.length - 1]?.toString().length + 'ch')
+const maxLineNumberWidth = computed((): string => totalLines.value[totalLines.value?.length - 1]?.toString().length + 'ch')
 const linePrefix = computed((): string => props.id.toLowerCase().replace(/\s+/g, '-'))
 const isProcessing = computed((): boolean => props.processing || isProcessingInternally.value)
 const isShowingFilteredCode = computed((): boolean => isFilterMode.value && filteredCode.value !== '')

From 5dcf284dab4890125b791a2e4192650557749788 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 29 Nov 2024 14:45:34 -0500
Subject: [PATCH 2/5] fix(ktabs): allow tab anchores to be links [KHCP-13866]

---
 docs/components/tabs.md          | 96 ++++++++++++++++++++------------
 sandbox/pages/SandboxTabs.vue    | 20 ++-----
 src/components/KTabs/KTabs.cy.ts | 36 +++++++++++-
 src/components/KTabs/KTabs.vue   | 72 ++++++++++++------------
 src/types/tabs.ts                |  3 +
 5 files changed, 135 insertions(+), 92 deletions(-)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index f99fcfdcbc..49001b89cd 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -30,12 +30,18 @@ Required prop, which is an array of tab objects with the following interface:
 
 ```ts
 interface Tab {
-  hash: string // has to be unique, corresponds to the panel slot name
+  hash: string
   title: string
-  disabled?: boolean
+  disabled?: boolean,
+  to?: string | object
 }
 ```
 
+* `hash` - has to be unique, corresponds to the panel slot name
+* `title` - title to be displayed in the tab
+* `disabled` - whether or not tab is disabled
+* `to` - if present, tab will be rendered as either a `router-link` or an `a`
+
 <KTabs :tabs="tabsWithDisabled">
   <template #tab1>
     <p>Tab 1 content</p>
@@ -176,41 +182,6 @@ const tabChange = (hash: string): void => {
 </script>
 ```
 
-### anchorTabindex
-
-This prop allows setting a custom `tabindex` for the tab anchor element. It’s useful when passing a custom interactive element, like a link, through the [`anchor` slot](#anchor-panel), ensuring that only the slotted element is focusable by resetting the default anchor `tabindex`. Default value is `0`.
-
-#### Dynamic RouterView
-
-Here's an example (code only) of utilizing a dynamic `router-view` component within the host app:
-
-```html
-<KTabs
-  hide-panels
-  :tabs="tabs"
->
-  <template
-    v-for="tab in tabs"
-    :key="`${tab.hash}-anchor`"
-    #[`${tab.hash}-anchor`]
-  >
-    <router-link
-      :to="{
-        name: tab.hash.split('?').shift(),
-        hash: `#${tab.hash.split('?').pop()}`,
-      }"
-    >
-      {{ tab.title }}
-    </router-link>
-  </template>
-</KTabs>
-
-<router-view v-slot="{ route }">
-  <h3>Router View content</h3>
-  <p>{{ route.path }}{{ route.hash }}</p>
-</router-view>
-```
-
 ## Slots
 
 ### anchor & panel
@@ -297,6 +268,43 @@ const tabs = ref<Tab[]>([
 </script>
 ```
 
+## Usage
+
+### Tab links
+
+Passing `to` property for each tab object allows to render tabs as links. If a string is passed, it will be used in `href` attribute in the rendered `a` element. If an object is passed, the tab will be rendered as a `router-link`.
+
+<KTabs :tabs="linkTabs" hide-panels v-model="linkTabValue" />
+
+{{ linkTabValue }}
+
+```vue
+<template>
+  <KTabs :tabs="linkTabs" hide-panels />
+
+  <router-view v-slot="{ route }">
+    {{ route.hash }}
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { Tab } from '@kong/kongponents'
+
+const linkTabs = ref<Tab[]>([
+  {
+    hash: '#tab1',
+    title: 'Tab 1',
+    to: '#tab-link-1'
+  },
+  {
+    hash: '#tab2',
+    title: 'Tab 2',
+    to: '#tab-link-2'
+  },
+])
+</script>
+```
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { KongIcon, InboxNotificationIcon, BookIcon } from '@kong/icons'
@@ -322,6 +330,20 @@ const slottedTabs = ref<Tab[]>([
   { hash: '#disabled', title: 'Disabled', disabled: true }
 ])
 
+const linkTabValue = ref<string>('#tab-link-1')
+const linkTabs = ref<Tab[]>([
+  {
+    hash: '#tab-link-1',
+    title: 'Tab 1',
+    to: '#tab-link-1',
+  },
+  {
+    hash: '#tab-link-2',
+    title: 'Tab 2',
+    to: '#tab-link-2',
+  },
+])
+
 const panelsActiveHash = ref('#gateway')
 
 const panelsChange = (hash: string) => {
diff --git a/sandbox/pages/SandboxTabs.vue b/sandbox/pages/SandboxTabs.vue
index 62e9310063..8ac5323a69 100644
--- a/sandbox/pages/SandboxTabs.vue
+++ b/sandbox/pages/SandboxTabs.vue
@@ -111,25 +111,11 @@
       />
       <SandboxSectionComponent title="Dynamic router view without panels">
         <KTabs
-          :anchor-tabindex="-1"
           hide-panels
           :tabs="dynamicRouterViewItems"
           @change="(hash: string) => $router.replace({ hash })"
-        >
-          <template #one-anchor>
-            <router-link :to="{ hash: '#one' }">
-              One
-            </router-link>
-          </template>
-          <template #two-anchor>
-            <router-link :to="{ hash: '#two' }">
-              Two
-            </router-link>
-          </template>
-        </KTabs>
-        <router-view
-          v-slot="{route}"
-        >
+        />
+        <router-view v-slot="{ route }">
           <p>{{ route.path }}{{ route.hash }}</p>
         </router-view>
       </SandboxSectionComponent>
@@ -174,10 +160,12 @@ const dynamicRouterViewItems = [
   {
     title: 'One',
     hash: '#one',
+    to: { hash: '#one' },
   },
   {
     title: 'Two',
     hash: '#two',
+    to: { hash: '#two' },
   },
 ]
 </script>
diff --git a/src/components/KTabs/KTabs.cy.ts b/src/components/KTabs/KTabs.cy.ts
index adb6679cdb..8a814b712e 100644
--- a/src/components/KTabs/KTabs.cy.ts
+++ b/src/components/KTabs/KTabs.cy.ts
@@ -42,7 +42,7 @@ describe('KTabs', () => {
     })
   })
 
-  it('hides the panel content when `hidePanels` is true', () => {
+  it('hides the panel content when hidePanels is true', () => {
     const picturesSlot = 'I love pictures'
     const moviesSlot = 'I love pictures'
     const booksSlot = 'I love pictures'
@@ -75,7 +75,7 @@ describe('KTabs', () => {
 
   // handles disabled item correctly
 
-  it('disables the tab item when `disabled` is true', () => {
+  it('disables the tab item when disabled is true', () => {
     const tabs = [
       { hash: '#pictures', title: 'Pictures' },
       { hash: '#movies', title: 'Movies', disabled: true },
@@ -94,6 +94,38 @@ describe('KTabs', () => {
     })
   })
 
+  it('renders the tab as a link if tab.to is present', () => {
+    const tabs = [
+      { hash: '#pictures', title: 'Pictures' },
+      { hash: '#movies', title: 'Movies', to: '/movies' },
+      { hash: '#books', title: 'Books' },
+    ]
+
+    cy.mount(KTabs, {
+      props: {
+        tabs,
+      },
+    })
+
+    cy.get('.tab-item .tab-link').eq(1).should('have.attr', 'href', '/movies')
+  })
+
+  it('renders the tab as a link with no href attribute if tab.to is present and tab.disabled is true', () => {
+    const tabs = [
+      { hash: '#pictures', title: 'Pictures' },
+      { hash: '#movies', title: 'Movies', to: '/movies', disabled: true },
+      { hash: '#books', title: 'Books' },
+    ]
+
+    cy.mount(KTabs, {
+      props: {
+        tabs,
+      },
+    })
+
+    cy.get('.tab-item .tab-link').eq(1).should('not.have.attr', 'href')
+  })
+
   describe('slots', () => {
     it('provides the #hash slot content', () => {
       const picturesSlot = 'I love pictures'
diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index 2b53c1cc6b..247cd55636 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -11,21 +11,21 @@
         class="tab-item"
         :class="{ active: activeTab === tab.hash }"
       >
-        <div
+        <component
+          :is="tabComponent(tab).tag"
           :aria-controls="hidePanels ? undefined : `panel-${tab.hash}`"
           :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
           class="tab-link"
-          :class="{ 'has-panels': !hidePanels, disabled: tab.disabled }"
+          :class="{ disabled: tab.disabled }"
           role="tab"
-          :tabindex="getAnchorTabindex(tab)"
-          @click.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
-          @keydown.enter.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
-          @keydown.space.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          :tabindex="!tab.disabled ? 0 : -1"
+          v-bind="tabComponent(tab).attributes"
+          @click="!tab.disabled ? handleTabChange(tab.hash) : undefined"
         >
           <slot :name="`${getTabSlotName(tab.hash)}-anchor`">
-            <span>{{ tab.title }}</span>
+            {{ tab.title }}
           </slot>
-        </div>
+        </component>
       </li>
     </ul>
 
@@ -75,11 +75,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  anchorTabindex: {
-    type: Number,
-    default: 0,
-    validator: (val: number): boolean => val >= -1 && val <= 32767,
-  },
 })
 
 const emit = defineEmits<{
@@ -97,12 +92,16 @@ const handleTabChange = (tab: string): void => {
 
 const getTabSlotName = (tabHash: string): string => tabHash.replace('#', '')
 
-const getAnchorTabindex = (tab: Tab): string => {
-  if (tab.disabled) {
-    return '-1'
+const tabComponent = (tab: Tab) => {
+  if (tab.to) {
+    if (typeof tab.to === 'string') {
+      return { tag: 'a', attributes: { href: tab.disabled ? undefined : tab.to } }
+    } else if (typeof tab.to === 'object') {
+      return { tag: 'router-link', attributes: { to: tab.disabled ? undefined : tab.to } }
+    }
   }
 
-  return typeof props.anchorTabindex === 'number' && props.anchorTabindex >= -1 && props.anchorTabindex <= 32767 ? String(props.anchorTabindex) : '0'
+  return { tag: 'button', attributes: { ...(tab.disabled && { disabled: true }) } }
 }
 
 watch(() => props.modelValue, (newTabHash) => {
@@ -125,11 +124,7 @@ watch(() => props.modelValue, (newTabHash) => {
   ul {
     border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     display: flex;
-    font-family: var(--kui-font-family-text, $kui-font-family-text);
-    font-size: var(--kui-font-size-30, $kui-font-size-30);
-    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
     gap: var(--kui-space-40, $kui-space-40);
-    line-height: var(--kui-line-height-40, $kui-line-height-40);
     list-style: none;
     margin-bottom: var(--kui-space-70, $kui-space-70);
     margin-top: var(--kui-space-0, $kui-space-0);
@@ -148,31 +143,24 @@ watch(() => props.modelValue, (newTabHash) => {
       white-space: nowrap;
 
       .tab-link {
+        @include defaultButtonReset;
+        align-items: center;
+
         border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
         color: var(--kui-color-text-neutral, $kui-color-text-neutral);
         cursor: pointer;
         display: inline-flex;
+        font-family: var(--kui-font-family-text, $kui-font-family-text);
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
+        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
         gap: var(--kui-space-40, $kui-space-40);
+        line-height: var(--kui-line-height-40, $kui-line-height-40);
+        padding: var(--kui-space-30, $kui-space-30) var(--kui-space-50, $kui-space-50);
         text-decoration: none;
         transition: color $kongponentsTransitionDurTimingFunc, background-color $kongponentsTransitionDurTimingFunc, box-shadow $kongponentsTransitionDurTimingFunc;
         user-select: none;
 
-        // Applies the padding to the tab’s content when not showing panels which is typically used for placing links inside KTabs for navigational tabs. Otherwise, clicking the tab outside of the link’s box will mark it as active but won’t actually navigate.
-        &.has-panels,
-        &:not(.has-panels) :deep(> *) {
-          padding: var(--kui-space-30, $kui-space-30) var(--kui-space-50, $kui-space-50);
-        }
-
-        a, :deep(a) {
-          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-          text-decoration: none;
-
-          &:focus-visible {
-            @include kTabsFocus;
-          }
-        }
-
-        &:hover:not(.disabled) {
+        &:hover:not(:disabled):not(.disabled) {
           background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
         }
 
@@ -180,10 +168,20 @@ watch(() => props.modelValue, (newTabHash) => {
           @include kTabsFocus;
         }
 
+        &:disabled,
         &.disabled {
           color: var(--kui-color-text-disabled, $kui-color-text-disabled);
           cursor: not-allowed;
         }
+
+        :slotted(a) {
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+          text-decoration: none;
+
+          &:focus-visible {
+            @include kTabsFocus;
+          }
+        }
       }
 
       &.active {
diff --git a/src/types/tabs.ts b/src/types/tabs.ts
index 7ac8520ca3..0e7aa938cc 100644
--- a/src/types/tabs.ts
+++ b/src/types/tabs.ts
@@ -1,5 +1,8 @@
 export interface Tab {
+  /** Has to be unique, corresponds to the panel slot name */
   hash: string
   title: string
   disabled?: boolean
+  /** If present, tab will be rendered as either a router-link or an anchor  */
+  to?: string | object
 }

From 61943c27082eaf39a2a774f75206f78a7814f4cd Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 2 Dec 2024 15:03:35 -0500
Subject: [PATCH 3/5] fix: address pr feedback

---
 src/components/KTabs/KTabs.vue | 36 ++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index 247cd55636..78dd93f273 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -2,7 +2,7 @@
   <div class="k-tabs">
     <ul
       aria-label="Tabs"
-      role="tablist"
+      :role="isNav ? 'navigation' : 'tablist'"
     >
       <li
         v-for="tab in tabs"
@@ -17,13 +17,16 @@
           :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
           class="tab-link"
           :class="{ disabled: tab.disabled }"
-          role="tab"
-          :tabindex="!tab.disabled ? 0 : -1"
+          :role="isNav ? 'link' : 'tab'"
+          :tabindex="getAnchorTabindex(tab)"
           v-bind="tabComponent(tab).attributes"
           @click="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          @click.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          @keydown.enter.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
+          @keydown.space.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
         >
           <slot :name="`${getTabSlotName(tab.hash)}-anchor`">
-            {{ tab.title }}
+            <span>{{ tab.title }}</span>
           </slot>
         </component>
       </li>
@@ -49,7 +52,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Tab } from '@/types'
 
 const props = defineProps({
@@ -75,6 +78,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @deprecated
+   */
+  anchorTabindex: {
+    type: Number,
+    default: 0,
+    validator: (val: number): boolean => val >= -1 && val <= 32767,
+  },
 })
 
 const emit = defineEmits<{
@@ -84,6 +95,8 @@ const emit = defineEmits<{
 
 const activeTab = ref<string>(props.modelValue ? props.modelValue : props.tabs[0]?.hash)
 
+const isNav = computed((): boolean => props.tabs.every(tab => tab.to))
+
 const handleTabChange = (tab: string): void => {
   activeTab.value = tab
   emit('change', tab)
@@ -92,6 +105,14 @@ const handleTabChange = (tab: string): void => {
 
 const getTabSlotName = (tabHash: string): string => tabHash.replace('#', '')
 
+const getAnchorTabindex = (tab: Tab): string => {
+  if (tab.disabled) {
+    return '-1'
+  }
+
+  return typeof props.anchorTabindex === 'number' && props.anchorTabindex >= -1 && props.anchorTabindex <= 32767 ? String(props.anchorTabindex) : '0'
+}
+
 const tabComponent = (tab: Tab) => {
   if (tab.to) {
     if (typeof tab.to === 'string') {
@@ -101,7 +122,7 @@ const tabComponent = (tab: Tab) => {
     }
   }
 
-  return { tag: 'button', attributes: { ...(tab.disabled && { disabled: true }) } }
+  return { tag: 'div', attributes: {} }
 }
 
 watch(() => props.modelValue, (newTabHash) => {
@@ -160,7 +181,7 @@ watch(() => props.modelValue, (newTabHash) => {
         transition: color $kongponentsTransitionDurTimingFunc, background-color $kongponentsTransitionDurTimingFunc, box-shadow $kongponentsTransitionDurTimingFunc;
         user-select: none;
 
-        &:hover:not(:disabled):not(.disabled) {
+        &:hover:not(.disabled) {
           background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
         }
 
@@ -168,7 +189,6 @@ watch(() => props.modelValue, (newTabHash) => {
           @include kTabsFocus;
         }
 
-        &:disabled,
         &.disabled {
           color: var(--kui-color-text-disabled, $kui-color-text-disabled);
           cursor: not-allowed;

From 8452892319cbe1924f5ccf22d2715ea523bdae83 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 2 Dec 2024 16:43:18 -0500
Subject: [PATCH 4/5] fix(ktabs): revert role navigation changes [KHCP-13866]

---
 src/components/KTabs/KTabs.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index 78dd93f273..6773bd0fe7 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -2,7 +2,7 @@
   <div class="k-tabs">
     <ul
       aria-label="Tabs"
-      :role="isNav ? 'navigation' : 'tablist'"
+      role="tablist"
     >
       <li
         v-for="tab in tabs"
@@ -17,7 +17,7 @@
           :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
           class="tab-link"
           :class="{ disabled: tab.disabled }"
-          :role="isNav ? 'link' : 'tab'"
+          role="tab"
           :tabindex="getAnchorTabindex(tab)"
           v-bind="tabComponent(tab).attributes"
           @click="!tab.disabled ? handleTabChange(tab.hash) : undefined"
@@ -95,8 +95,6 @@ const emit = defineEmits<{
 
 const activeTab = ref<string>(props.modelValue ? props.modelValue : props.tabs[0]?.hash)
 
-const isNav = computed((): boolean => props.tabs.every(tab => tab.to))
-
 const handleTabChange = (tab: string): void => {
   activeTab.value = tab
   emit('change', tab)

From 3cde525a241e1cb5ef30a7ecacaec8517df611d0 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 3 Dec 2024 13:46:12 -0500
Subject: [PATCH 5/5] fix: address pr feedback

---
 docs/components/tabs.md        | 76 +++++++++++++++++-----------------
 src/components/KTabs/KTabs.vue |  2 +-
 2 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 49001b89cd..c70dee3c3e 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -81,6 +81,45 @@ interface Tab {
 </KTabs>
 ```
 
+#### Tabs as links
+
+Passing the `to` property for each tab object enables rendering tabs as links. If a string is provided, it will be used as the `href` attribute in the rendered `a` element. If an object is provided, the tab will be rendered as a `router-link`.
+
+:::tip TIP
+When creating tab links, it is recommended to set the [`hidePanels` prop](#hidepanels) to `true`, as page changes typically do not involve the use of [`panel` slots](#slots).
+:::
+
+<KTabs :tabs="linkTabs" hide-panels v-model="linkTabValue" />
+
+{{ linkTabValue }}
+
+```vue
+<template>
+  <KTabs :tabs="linkTabs" hide-panels />
+
+  <router-view v-slot="{ route }">
+    {{ route.hash }}
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { Tab } from '@kong/kongponents'
+
+const linkTabs = ref<Tab[]>([
+  {
+    hash: '#tab1',
+    title: 'Tab 1',
+    to: '#tab-link-1'
+  },
+  {
+    hash: '#tab2',
+    title: 'Tab 2',
+    to: '#tab-link-2'
+  },
+])
+</script>
+```
+
 ### v-model
 
 KTabs will set the first tab in the `tabs` array as active. You can override this by passing in the hash of any other tab to be used with `v-model`.
@@ -268,43 +307,6 @@ const tabs = ref<Tab[]>([
 </script>
 ```
 
-## Usage
-
-### Tab links
-
-Passing `to` property for each tab object allows to render tabs as links. If a string is passed, it will be used in `href` attribute in the rendered `a` element. If an object is passed, the tab will be rendered as a `router-link`.
-
-<KTabs :tabs="linkTabs" hide-panels v-model="linkTabValue" />
-
-{{ linkTabValue }}
-
-```vue
-<template>
-  <KTabs :tabs="linkTabs" hide-panels />
-
-  <router-view v-slot="{ route }">
-    {{ route.hash }}
-  </router-view>
-</template>
-
-<script setup lang="ts">
-import { Tab } from '@kong/kongponents'
-
-const linkTabs = ref<Tab[]>([
-  {
-    hash: '#tab1',
-    title: 'Tab 1',
-    to: '#tab-link-1'
-  },
-  {
-    hash: '#tab2',
-    title: 'Tab 2',
-    to: '#tab-link-2'
-  },
-])
-</script>
-```
-
 <script setup lang="ts">
 import { ref } from 'vue'
 import { KongIcon, InboxNotificationIcon, BookIcon } from '@kong/icons'
diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index 6773bd0fe7..78cfc62d96 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import type { Tab } from '@/types'
 
 const props = defineProps({