From 66d5d28b03aa5de7e51ab03561220f475f6f83fd Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Mon, 8 Jan 2024 15:59:44 -0500
Subject: [PATCH] feat(ktabs): reskin component [KHCP-9003] (#1914)

* feat(ktabs): reskin component [KHCP-9003]

* docs(ktabs): update component docs [KHCP-9003]

* fix(ktabs): text colors [KHCP-9003]

* fix(ktabs): use anchor tag for tab link [KHCP-9003]

* fix(ktabs): minor styling tweak [KHCP-9003]

* fix(ktabs): add transition property [KHCP-9003]

* fix(ktabs): address PR feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(ktabs): address PR feedback [KHCP-9003]

* fix: minor fix [KHCP-9003]

* fix(ktabs): address PR feedback [KHCP-9003]

* fix(sandbox): fix router example [KHCP-9003]

* docs: minor update [KHCP-9003]

* fix(ktabs): address PR feedback [KHCP-9003]

* fix(ktabs): address PR feedback [KHCP-9003]

* fix(ktabs): add overflow x [KHCP-9003]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 cli/template/docs/Template.md        |   2 +-
 docs/components/tabs.md              | 401 ++++++++++++---------------
 docs/guide/migrating-to-version-9.md |   7 +
 sandbox/pages/SandboxTabs.vue        | 207 ++++++++++----
 src/components/KTabs/KTabs.cy.ts     |   8 +-
 src/components/KTabs/KTabs.vue       | 107 ++++---
 src/types/tabs.ts                    |   1 +
 7 files changed, 415 insertions(+), 318 deletions(-)

diff --git a/cli/template/docs/Template.md b/cli/template/docs/Template.md
index 1b11a1edcb..ce02e10236 100644
--- a/cli/template/docs/Template.md
+++ b/cli/template/docs/Template.md
@@ -43,7 +43,7 @@ Actual component using examplePropName
 
 ## Events
 
-- `@changed` - Emitted when...
+- `@change` - Emitted when...
 
 <script lang="ts">
 import { defineComponent } from 'vue'
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 0a4560664d..0b371f1bac 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -1,180 +1,188 @@
 # Tabs
 
-**KTabs** - A mindblowing tabs component
+KTabs are horizontal controls that allow users to switch between multiple views within one page.
 
 <KTabs :tabs="tabs">
-  <template v-slot:tab1>
+  <template #tab1>
     <p>Tab 1 content</p>
   </template>
-  <template v-slot:tab2>
+  <template #tab2>
     <p>Tab 2 content</p>
   </template>
 </KTabs>
 
 ```html
 <KTabs :tabs="tabs">
-  <template v-slot:tab1>
+  <template #tab1>
     <p>Tab 1 content</p>
   </template>
-  <template v-slot:tab2>
+  <template #tab2>
     <p>Tab 2 content</p>
   </template>
 </KTabs>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  setup () {
-    const tabs = [
-      {
-        hash: '#tab1',
-        title: 'Tab 1'
-      },
-      {
-        hash: '#tab2',
-        title: 'Tab 2'
-      }
-    ]
-
-    return {
-      tabs,
-    }
-  }
-})
-</script>
 ```
 
 ## Props
 
 ### tabs
 
-`KTabs` has one **required** prop, `tabs`, which is an array of tab objects with the following interface:
+Required prop, which is an array of tab objects with the following interface:
 
 ```ts
-export interface Tab {
-  hash: string
+interface Tab {
+  hash: string // has to be unique, corresponds to the panel slot name
   title: string
+  disabled?: boolean
 }
 ```
 
-```html
-<template>
-  <KTabs :tabs="tabs" />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  setup () {
-    const tabs = [
-      { hash: '#pictures', title: 'Pictures' },
-      { hash: '#movies', title: 'Movies' },
-      { hash: '#books', title: 'Books' },
-    ]
-
-    return {
-      tabs,
-    }
-  }
-})
-</script>
-```
-
-### v-model
-
-By default the `KTabs` will set the first tab in the array as active. You can override this by passing in the hash of any other tab to be used with `v-model`.
-
-<KTabs v-model="defaultTab" :tabs="tabs">
-  <template v-slot:tab1>
+<KTabs :tabs="tabsWithDisabled">
+  <template #tab1>
     <p>Tab 1 content</p>
   </template>
-  <template v-slot:tab2>
+  <template #tab2>
     <p>Tab 2 content</p>
   </template>
 </KTabs>
 
 ```html
-<KTabs v-model="#tab2" :tabs="tabs">
-  <template v-slot:tab1>Tab 1 content</template>
-  <template v-slot:tab2>Tab 2 content</template>
+<KTabs
+  :tabs="[
+    {
+      hash: '#tab1',
+      title: 'Tab 1'
+    },
+    {
+      hash: '#tab2',
+      title: 'Tab 2'
+    },
+    {
+      hash: '#tab3',
+      title: 'Tab 3',
+      disabled: true
+    }
+  ]"
+>
+  <template #tab1>
+    <p>Tab 1 content</p>
+  </template>
+  <template #tab2>
+    <p>Tab 2 content</p>
+  </template>
+  <template #tab3>
+    <p>Tab 3 content</p>
+  </template>
 </KTabs>
 ```
 
-If you want to keep your `v-model` in sync so that you can programatically change the active tab after initialization, you also must respond to the `@changed` emitted event.
+### 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`.
 
-<KTabs v-model="defaultProgrammaticTab" :tabs="tabs" @changed="hash => defaultProgrammaticTab = hash">
-  <template v-slot:tab1>
+<KTabs v-model="modelTab" :tabs="tabs">
+  <template #tab1>
     <p>Tab 1 content</p>
   </template>
-  <template v-slot:tab2>
+  <template #tab2>
     <p>Tab 2 content</p>
   </template>
 </KTabs>
 
-<hr />
+```vue
+<template>
+  <KTabs v-model="currentTab" :tabs="tabs">
+    <template #tab1>Tab 1 content</template>
+    <template #tab2>Tab 2 content</template>
+  </KTabs>
+</template>
+
+<script setup lang="ts">
+import type { Tab } from '@kong/kongponents'
 
-<KButton @click="defaultProgrammaticTab = '#tab1'" class="horizontal-spacing">Activate Tab 1</KButton>
-<KButton @click="defaultProgrammaticTab = '#tab2'">Activate Tab 2</KButton>
+const currentTab = ref<string>('#tab2')
+
+const tabs: Tab[] = [
+  {
+    hash: '#tab1',
+    title: 'Tab 1'
+  },
+  {
+    hash: '#tab2',
+    title: 'Tab 2'
+  }
+]
+</script>
+```
+
+If you want to keep your `v-model` in sync so that you can programmatically change the active tab after initialization, you also must respond to the `@change` emitted event.
+
+<div>
+  <KTabs v-model="modelTabProgrammatic" :tabs="tabs" @change="hash => modelTabProgrammatic = hash">
+    <template #tab1>Tab 1 content</template>
+    <template #tab2>Tab 2 content</template>
+  </KTabs>
+
+  <div class="horizontal-spacing spacing-top">
+    <KButton @click="modelTabProgrammatic = '#tab1'">Activate Tab 1</KButton>
+    <KButton @click="modelTabProgrammatic = '#tab2'">Activate Tab 2</KButton>
+  </div>
+</div>
 
 ```html
-<KTabs v-model="defaultTab" :tabs="tabs" @changed="hash => defaultTab = hash">
-  <template v-slot:tab1>
-    <p>Tab 1 content</p>
-  </template>
-  <template v-slot:tab2>
-    <p>Tab 2 content</p>
-  </template>
+<KTabs v-model="currentTab" :tabs="tabs" @change="hash => currentTab = hash">
+  <template #tab1>Tab 1 content</template>
+  <template #tab2>Tab 2 content</template>
 </KTabs>
 
-<KButton @click="defaultTab = '#tab1'">Activate Tab 1</KButton>
-<KButton @click="defaultTab = '#tab2'">Activate Tab 2</KButton>
+<KButton @click="currentTab = '#tab1'">Activate Tab 1</KButton>
+<KButton @click="currentTab = '#tab2'">Activate Tab 2</KButton>
 ```
 
-### hasPanels
+### hidePanels
 
-A `boolean` that determines whether all tabs should have corresponding "panel" (the tab content) containers. Defaults to `true`.
+A `boolean` that determines whether all tabs should have corresponding "panel" (the tab content) containers. Defaults to `false`.
 
 In some scenarios, you may want to implement the KTabs UI controls without utilizing the corresponding panel containers.
 
-For example, you could set the `hasPanels` prop to `false` and then your host app could provide custom functionality such as navigating to a different page or `router-view` on click.
+For example, you could set the `hidePanels` prop to `true` and then your host app could provide custom functionality such as navigating to a different page or `router-view` on click.
 
 Here's an example where we display the active tab hash:
 
-<KTabs :tabs="slottedTabs" :has-panels="false" @changed="hasPanelsChanged" />
-<p>Active hash: {{ hasPanelsActiveHash }} </p>
+<div>
+  <KTabs :tabs="slottedTabs" hide-panels @change="panelsChange" />
+  <p>Active hash: {{ panelsActiveHash }}</p>
+</div>
 
-```html
+```vue
 <template>
-  <KTabs :tabs="tabs" :has-panels="false" @changed="tabChanged" />
-  <p>Active hash: {{ activeTabHash }} </p>
+  <KTabs :tabs="tabs" hide-panels @change="tabChange" />
+  <p>Active hash: {{ currentTab }} </p>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import type { Tab } from '@kong/kongponents'
 
-const tabs = [
+const tabs: Tab[] = [
   { hash: '#pictures', title: 'Pictures' },
   { hash: '#movies', title: 'Movies' },
   { hash: '#books', title: 'Books' },
 ]
 
-const activeTabHash = ref<string>(tabs.value[0].hash)
+const currentTab = ref<string>(tabs.value[0].hash)
 
-const tabChanged = (hash: string) => {
-  activeTabHash.value = hash
+const tabChange = (hash: string): void => {
+  currentTab.value = hash
 }
 </script>
 ```
 
 #### Dynamic RouterView
 
-Here's an example (code only) of utlizing a dynamic `router-view` component within the host app:
+Here's an example (code only) of utilizing a dynamic `router-view` component within the host app:
 
 ```html
 <KTabs
-  :has-panels="false"
+  hide-panels
   :tabs="tabs"
 >
   <template
@@ -192,9 +200,8 @@ Here's an example (code only) of utlizing a dynamic `router-view` component with
     </router-link>
   </template>
 </KTabs>
-<router-view
-  v-slot="{ route }"
->
+
+<router-view v-slot="{ route }">
   <h3>Router View content</h3>
   <p>{{ route.path }}{{ route.hash }}</p>
 </router-view>
@@ -202,156 +209,118 @@ Here's an example (code only) of utlizing a dynamic `router-view` component with
 
 ## Slots
 
-### Anchor Content
+### anchor & panel
 
 The tab control defaults to the `tab.title` string. You may use the `#{tab.hash}-anchor` slot to customize the content of the tab control.
 
+In order provide the tab panel content (when the `hidePanels` prop is set to `false`) you must slot the content in the named slot, defined by the `tab.hash` string, without the `#`. For example, if `tab.hash` is `#notifications` - the panel slot name will be `notifications`, like in the example below.
+
 <KTabs :tabs="slottedTabs">
-  <template #pictures-anchor>
-    Custom Pictures Tab
+  <template #gateway-anchor>
+    <KongIcon />
+    Gateway
   </template>
-  <template #pictures><p>Wow look <b>Pictures!</b></p></template>
-  <template #movies-anchor>
-    I love movies
+  <template #gateway><b>Gateway</b> tab content</template>
+  <template #notifications-anchor>
+    <InboxNotificationIcon />
+    Notifications
+    <KBadge appearance="decorative">3</KBadge>
   </template>
-  <template #movies><p>Wow look <b>Movies!</b></p></template>
-  <template #books-anchor>
-    Need a book?
+  <template #notifications><b>Notifications</b> tab content</template>
+  <template #docs-anchor>
+    <BookIcon />
+    Documentation
   </template>
-  <template #books><p>Wow look <b>Books!</b></p></template>
+  <template #docs><b>Documentation</b> tab content</template>
 </KTabs>
 
 ```html
-<template>
-  <KTabs :tabs="tabs">
-    <template #pictures-anchor>
-      Custom Pictures Tab
-    </template>
-    <template #pictures><p>Wow look <b>Pictures!</b></p></template>
-    <template #movies-anchor>
-      I love movies
-    </template>
-    <template #movies><p>Wow look <b>Movies!</b></p></template>
-    <template #books-anchor>
-      Need a book?
-    </template>
-    <template #books><p>Wow look <b>Books!</b></p></template>
-  </KTabs>
-</template>
-
-<script setup lang="ts">
-const tabs = [
-  { hash: '#pictures', title: 'Pictures' },
-  { hash: '#movies', title: 'Movies' },
-  { hash: '#books', title: 'Books' },
-]
-</script>
+<KTabs :tabs="tabs">
+  <template #gateway-anchor>
+    <KongIcon />
+    Gateway
+  </template>
+  <template #gateway><b>Gateway</b> tab content</template>
+  <template #notifications-anchor>
+    <InboxNotificationIcon />
+    Notifications
+    <KBadge appearance="decorative">3</KBadge>
+  </template>
+  <template #notifications><b>Notifications</b> tab content</template>
+  <template #docs-anchor>
+    <BookIcon />
+    Documentation
+  </template>
+  <template #docs><b>Documentation</b> tab content</template>
+</KTabs>
 ```
 
-### Panel Content
+## Events
 
-In order provide the tab panel content (when the `hasPanels` prop is set to `true`) you must slot the content in the named slot, defined by the `tab.hash` string, without the `#`.
+### change
 
-<KTabs :tabs="slottedTabs">
-  <template #pictures><p>Wow look <b>Pictures!</b></p></template>
-  <template #movies><p>Wow look <b>Movies!</b></p></template>
-  <template #books><p>Wow look <b>Books!</b></p></template>
-</KTabs>
+KTabs emits a `@change` event with the new tab `hash` when clicked. You can use this to set the router or window hash and in turn use that with [`v-model`](#v-model).
 
-```html
+```vue
 <template>
-  <KTabs :tabs="tabs">
-    <template #pictures><p>Wow look <b>Pictures!</b></p></template>
-    <template #movies><p>Wow look <b>Movies!</b></p></template>
-    <template #books><p>Wow look <b>Books!</b></p></template>
+  <KTabs
+    :tabs="tabs"
+    v-model="$route.hash"
+    @change="hash => $router.replace({ hash })">
+    <template #tab1>Tab 1 content</template>
+    <template #tab2>Tab 2 content</template>
   </KTabs>
 </template>
 
 <script setup lang="ts">
-const tabs = [
-  { hash: '#pictures', title: 'Pictures' },
-  { hash: '#movies', title: 'Movies' },
-  { hash: '#books', title: 'Books' },
-]
+import type { Tab } from '@kong/kongponents'
+// importing $route and $router in your app may vary and is excluded in this example.
+
+const tabs = ref<Tab[]>([
+  { hash: '#tab1', title: 'Tab 1' },
+  { hash: '#tab2', title: 'Tab 2' },
+])
 </script>
 ```
 
-## Events
-
-- `@changed` - Emitted when the active tab is updated, and includes the new active `hash` value
+<script setup lang="ts">
+import { ref } from 'vue'
+import { KongIcon, InboxNotificationIcon, BookIcon } from '@kong/icons'
 
-## Usage
+const modelTab = ref('#tab2')
+const modelTabProgrammatic = ref('#tab2')
 
-### Router Hash
+const tabs = ref<Tab[]>([
+  { hash: '#tab1', title: 'Tab 1' },
+  { hash: '#tab2', title: 'Tab 2' },
+])
 
-`KTabs` emits a `changed` event with the new tab hash when clicked. You can use this to set the router or window hash and in turn use that with [`v-model`](#v-model).
+const tabsWithDisabled = ref<Tab[]>([
+  { hash: '#tab1', title: 'Tab 1' },
+  { hash: '#tab2', title: 'Tab 2' },
+  { hash: '#tab3', title: 'Tab 3 (disabled)', disabled: true },
+])
 
-```html
-<template>
-  <KTabs
-    :tabs="tabs"
-    v-model="$route.hash"
-    @changed="hash => $router.replace({hash})">
-    <template v-slot:pictures>Wow look Pictures!</template>
-    <template v-slot:movies>Wow look Movies!</template>
-    <template v-slot:books>Wow look Books!</template>
-  </KTabs>
-</template>
+const slottedTabs = ref<Tab[]>([
+  { hash: '#gateway', title: 'Gateway' },
+  { hash: '#notifications', title: 'Notifications' },
+  { hash: '#docs', title: 'Documentation' },
+])
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-// Importing $route and $router in your app may vary and is excluded in this example.
+const panelsActiveHash = ref('#gateway')
 
-export default defineComponent({
-  setup () {
-    const tabs = [
-      { hash: '#pictures', title: 'Pictures' },
-      { hash: '#movies', title: 'Movies' },
-      { hash: '#books', title: 'Books' },
-    ]
-
-    return {
-      tabs,
-    }
-  }
-})
-</script>
-```
-
-<script>
-export default {
-  data() {
-    return {
-      defaultTab: '#tab2',
-      defaultProgrammaticTab: '#tab2',
-      tabs: [
-        {
-          hash: '#tab1',
-          title: 'Tab 1'
-        },
-        {
-          hash: '#tab2',
-          title: 'Tab 2'
-        }
-      ],
-      slottedTabs: [
-        { hash: '#pictures', title: 'Pictures' },
-        { hash: '#movies', title: 'Movies' },
-        { hash: '#books', title: 'Books' },
-      ],
-      hasPanelsActiveHash: '#pictures'
-    }
-  },
-  methods: {
-    hasPanelsChanged(hash) {
-      this.hasPanelsActiveHash = hash
-    }
-  }
+const panelsChange = (hash: string) => {
+  panelsActiveHash.value = hash;
 }
 </script>
 
 <style lang="scss" scoped>
 .horizontal-spacing {
-  margin-right: $kui-space-40;
+  display: flex;
+  gap: $kui-space-40;
+}
+
+.spacing-top {
+  margin-top: $kui-space-50;
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 70891ca5bb..a46aabed78 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -380,6 +380,13 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTabs
 
+#### Props
+
+* `hasPanels` prop has been renamed to `hidePanels`. the default value for this prop has also been changed to `false`
+
+#### Events
+
+* `changed` event has been rename to `change`
 
 ### KTextArea
 
diff --git a/sandbox/pages/SandboxTabs.vue b/sandbox/pages/SandboxTabs.vue
index a643f6537e..3181109154 100644
--- a/sandbox/pages/SandboxTabs.vue
+++ b/sandbox/pages/SandboxTabs.vue
@@ -3,70 +3,175 @@
     :links="inject('app-links', [])"
     title="KTabs"
   >
-    <h2>Default behavior</h2>
-    <KTabs
-      :tabs="items"
-    >
-      <template
-        v-for="item in items"
-        :key="`${item.hash}-anchor`"
-        #[`${item.hash}-anchor`]
-      >
-        {{ item.title }}
-      </template>
-      <template
-        v-for="item in items"
-        :key="`${item.hash}`"
-        #[`${item.hash}`]
-      >
-        {{ item.title }}
-      </template>
-    </KTabs>
+    <div class="ktabs-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=297%3A3525&mode=dev">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
 
-    <br>
-    <hr>
-    <br>
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="tabs">
+        <KTabs
+          :tabs="items"
+        >
+          <template #tab1>
+            Tab 1 content
+          </template>
+          <template #tab2>
+            Tab 2 content
+          </template>
+          <template #tab3>
+            Tab 3 content
+          </template>
+        </KTabs>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="v-model">
+        <KTabs
+          v-model="vModel1"
+          :tabs="items"
+        >
+          <template #tab1>
+            Tab 1 content
+          </template>
+          <template #tab2>
+            Tab 2 content
+          </template>
+          <template #tab3>
+            Tab 3 content
+          </template>
+        </KTabs>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hidePanels">
+        <KTabs
+          v-model="vModel2"
+          hide-panels
+          :tabs="items"
+        >
+          <template #tab1>
+            Tab 1 panel
+          </template>
+        </KTabs>
+        <div v-if="vModel2 === '#tab1'">
+          Tab 1 content
+        </div>
+        <div v-else-if="vModel2 === '#tab2'">
+          Tab 2 content
+        </div>
+        <div v-else>
+          Tab 3 content
+        </div>
+      </SandboxSectionComponent>
 
-    <h2>Dynamic Router View</h2>
-    <KTabs
-      :has-panels="false"
-      :tabs="items"
-    >
-      <template
-        v-for="item in items"
-        :key="`${item.hash}-anchor`"
-        #[`${item.hash}-anchor`]
-      >
-        <router-link
-          :to="{
-            name: item.hash.split('?').shift(),
-            hash: `#${item.hash.split('?').pop()}`,
-          }"
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="anchor & panel">
+        <KTabs
+          :tabs="items"
+        >
+          <template #tab1-anchor>
+            <KongIcon />
+            Kong
+          </template>
+          <template #tab2-anchor>
+            Updates
+            <KBadge appearance="decorative">
+              3
+            </KBadge>
+          </template>
+
+          <template #tab1>
+            Tab 1 content
+          </template>
+          <template #tab2>
+            Tab 2 content
+          </template>
+          <template #tab3>
+            Tab 3 content
+          </template>
+        </KTabs>
+      </SandboxSectionComponent>
+
+      <!-- Usage -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Usage"
+      />
+      <SandboxSectionComponent title="Dynamic router view without panels">
+        <KTabs
+          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}"
         >
-          {{ item.title }}
-        </router-link>
-      </template>
-    </KTabs>
-    <router-view
-      v-slot="{route}"
-    >
-      <h3>Router View content</h3>
-      <p>{{ route.path }}{{ route.hash }}</p>
-    </router-view>
+          <p>{{ route.path }}{{ route.hash }}</p>
+        </router-view>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="Dynamic router view with panels">
+        <KTabs
+          v-model="$route.hash"
+          :tabs="items"
+          @change="(hash: string) => $router.replace({ hash })"
+        >
+          <template #tab1>
+            Tab 1 content
+          </template>
+          <template #tab2>
+            Tab 2 content
+          </template>
+          <template #tab3>
+            Tab 3 content
+          </template>
+        </KTabs>
+      </SandboxSectionComponent>
+    </div>
   </SandboxLayout>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KongIcon } from '@kong/icons'
+
 const items = [
+  { hash: '#tab1', title: 'Tab 1' },
+  { hash: '#tab2', title: 'Tab 2' },
+  { hash: '#tab3', title: 'Tab 3' },
+  { hash: '#disabled', title: 'Disabled', disabled: true },
+]
+
+const vModel1 = ref<string>('#tab2')
+const vModel2 = ref<string>('#tab2')
+
+const dynamicRouterViewItems = [
   {
     title: 'One',
-    hash: 'tabs?one',
+    hash: '#one',
   },
   {
     title: 'Two',
-    hash: 'tabs?two',
+    hash: '#two',
   },
-
 ]
 </script>
diff --git a/src/components/KTabs/KTabs.cy.ts b/src/components/KTabs/KTabs.cy.ts
index c425505db4..e2dcdb7acf 100644
--- a/src/components/KTabs/KTabs.cy.ts
+++ b/src/components/KTabs/KTabs.cy.ts
@@ -38,12 +38,12 @@ describe('KTabs', () => {
     })
 
     cy.get('.tab-item').eq(1).click().then(() => {
-      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'changed')
-      cy.wrap(Cypress.vueWrapper.emitted('changed')[0][0]).should('eq', '#movies')
+      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'change')
+      cy.wrap(Cypress.vueWrapper.emitted('change')[0][0]).should('eq', '#movies')
     })
   })
 
-  it('hides the panel content when `hasPanels` is false', () => {
+  it('hides the panel content when `hidePanels` is true', () => {
     const picturesSlot = 'I love pictures'
     const moviesSlot = 'I love pictures'
     const booksSlot = 'I love pictures'
@@ -51,7 +51,7 @@ describe('KTabs', () => {
     mount(KTabs, {
       props: {
         tabs: TABS,
-        hasPanels: false,
+        hidePanels: true,
       },
       slots: {
         pictures: h('div', {}, picturesSlot),
diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index 6e7626d620..c07b7c2116 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -5,21 +5,21 @@
       role="tablist"
     >
       <li
-        v-for="(tab, i) in tabs"
+        v-for="tab in tabs"
         :id="`${tab.hash.replace('#','')}-tab`"
         :key="tab.hash"
-        :aria-controls="hasPanels ? `panel-${i}` : undefined"
-        :aria-selected="hasPanels ? (activeTab === tab.hash ? 'true' : 'false') : undefined"
         class="tab-item"
-        :class="{ active: activeTab === tab.hash }"
-        :role="hasPanels ? 'tab' : undefined"
-        tabindex="0"
-        @click="handleTabChange(tab.hash)"
-        @keydown.enter.prevent="handleTabChange(tab.hash)"
-        @keydown.space.prevent="handleTabChange(tab.hash)"
+        :class="{ active: activeTab === tab.hash, disabled: tab.disabled }"
       >
         <div
-          :class="['tab-link', { 'has-panels': hasPanels }]"
+          :aria-controls="hidePanels ? undefined : `panel-${tab.hash}`"
+          :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
+          class="tab-link"
+          role="tab"
+          :tabindex="tab.disabled ? '-1' : '0'"
+          @click.prevent="handleTabChange(tab.hash)"
+          @keydown.enter.prevent="handleTabChange(tab.hash)"
+          @keydown.space.prevent="handleTabChange(tab.hash)"
         >
           <slot :name="`${tab.hash.replace('#','')}-anchor`">
             <span>{{ tab.title }}</span>
@@ -28,7 +28,7 @@
       </li>
     </ul>
 
-    <template v-if="hasPanels">
+    <template v-if="!hidePanels">
       <div
         v-for="(tab, i) in tabs"
         :id="`panel-${i}`"
@@ -54,7 +54,7 @@ import type { Tab } from '@/types'
 
 const props = defineProps({
   /**
-   * Array of Tab objects [{hash: '#tab1', title: 'tab1'}, {hash: '#tab2', title: 'tab2'}]
+   * Array of Tab objects [{ hash: '#tab1', title: 'tab1'}, {hash: '#tab2', title: 'tab2' }]
    */
   tabs: {
     type: Array as PropType<Tab[]>,
@@ -71,84 +71,99 @@ const props = defineProps({
   /**
    * Render the tab's corresponding panel container
    */
-  hasPanels: {
+  hidePanels: {
     type: Boolean,
-    default: true,
+    default: false,
   },
 })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string): void
-  (e: 'changed', val: string): void
+  (e: 'change', val: string): void
 }>()
 
 const activeTab = ref<string>(props.modelValue ? props.modelValue : props.tabs[0].hash)
 
 const handleTabChange = (tab: string): void => {
   activeTab.value = tab
-  emit('changed', tab)
+  emit('change', tab)
   emit('update:modelValue', tab)
 }
 
 watch(() => props.modelValue, (newTabHash) => {
   activeTab.value = newTabHash
-  emit('changed', newTabHash)
+  emit('change', newTabHash)
   emit('update:modelValue', newTabHash)
 })
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/tmp-variables';
-
 .k-tabs {
   ul {
-    border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
+    border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     display: flex;
-    font-size: var(--kui-font-size-50, $kui-font-size-50);
-    line-height: var(--kui-line-height-50, $kui-line-height-50);
+    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-80, $kui-space-80);
+    line-height: var(--kui-line-height-40, $kui-line-height-40);
     list-style: none;
-    margin-bottom: var(--kui-space-0, $kui-space-0);
-    padding-left: var(--kui-space-0, $kui-space-0);
+    margin-bottom: var(--kui-space-70, $kui-space-70);
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: var(--kui-space-0, $kui-space-0) var(--kui-space-70, $kui-space-70);
 
     .tab-item {
       cursor: pointer;
+      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+      margin-bottom: calc(-1 * var(--kui-border-width-10, $kui-border-width-10)); // to make the active item border appear on top of the bottom border
+      padding-bottom: var(--kui-space-40, $kui-space-40);
       position: relative;
+      transition: border-bottom $kongponentsKongIconSelector;
+      white-space: nowrap;
 
       .tab-link {
-        font-size: inherit;
+        border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+        display: inline-flex;
+        gap: var(--kui-space-40, $kui-space-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;
 
-        a,
-        :deep(a) {
+        a, :deep(a) {
+          color: var(--kui-color-text, $kui-color-text);
           text-decoration: none;
         }
-      }
 
-      .tab-link,
-      .tab-link:not(.has-panels) :deep(> *) {
-        color: var(--kui-color-text, $kui-color-text);
+        &:focus-visible {
+          background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+          color: var(--kui-color-text, $kui-color-text);
+          outline: none;
+        }
       }
 
-      .tab-link.has-panels,
-      .tab-link:not(.has-panels) :deep(> *) {
-        display: inline-block;
-        padding: var(--kui-space-60, $kui-space-60);
+      &:hover:not(.disabled) {
+        .tab-link {
+          background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+        }
       }
 
-      &:not(:first-of-type) {
-        margin-left: var(--kui-space-40, $kui-space-40);
-      }
+      &.active {
+        border-bottom: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple);
 
-      &:not(:last-of-type) {
-        margin-right: var(--kui-space-40, $kui-space-40);
+        .tab-link {
+          color: var(--kui-color-text, $kui-color-text);
+        }
       }
 
-      &.active,
-      &:hover {
-        .tab-link.has-panels,
-        .tab-link:not(.has-panels) :deep(> *) {
-          border-bottom: var(--kui-border-width-30, $kui-border-width-30) solid $tmp-color-aqua-50; // teal-300 is now aqua-50
-          color: var(--kui-color-text, $kui-color-text);
+      &.disabled {
+        cursor: not-allowed;
+
+        .tab-link {
+          color: var(--kui-color-text-disabled, $kui-color-text-disabled);
+          pointer-events: none;
         }
       }
     }
diff --git a/src/types/tabs.ts b/src/types/tabs.ts
index 36d4cead76..7ac8520ca3 100644
--- a/src/types/tabs.ts
+++ b/src/types/tabs.ts
@@ -1,4 +1,5 @@
 export interface Tab {
   hash: string
   title: string
+  disabled?: boolean
 }