From eb6472d47617efc43865dde7d55490d2a33ef8c3 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Mon, 8 Jan 2024 16:49:51 -0500
Subject: [PATCH] fix(kselect): kselect reskin [KHCP-8998] (#1832)

* fix(kpagination): replace kselect with kdropdown [KHCP-8998]

* feat(kselect): reskin component - wip [KHCP-8998]

* fix(kselect): minor fix [KHCP-8998]

* fix(kselect): reskin component - wip [KHCP-8998]

* fix(kselect): reskin component [KHCP-8998]

* fix(kselect): minor fix [KHCP-8998]

* test(kselect): fix component tests [KHCP-8998]

* fix(kselect): add back filter function prop [KHCP-8998]

* fix(kselect): misc fixes [KHCP-8998]

* docs(select): update component docs [KHCP-8998]

* test(kselect): fix component test [KHCP-8998]

* docs(kselect): small tweak [KHCP-8998]

* fix(kselect): move clear icon to after slot [KHCP-8998]

* fix(kselect): misc fixes [KHCP-8998]

* docs(select): minor tweaks [KHCP-8998]

* docs(select): add disabled example [KHCP-8998]

* fix(kselect): minor fix [KHCP-8998]

* fix(kselect): address PR feedback [KHCP-8998]

* fix(kselect): allow disable default filter function [KHCP-8998]

* fix(kselect): address PR feedback

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

* fix(kselect): address PR feedback [KHCP-8998]

* fix(kselect): senitize user input [KHCP-8998]

* fix(kselect): address PR feedback [KHCP-8998]

* fix(kselect): remove console log

* fix(kselect): address PR feedback [KHCP-8998]

* fix(kselect): minor tweak [KHCP-8998]

* docs(kselect): minor tweak [KHCP-8998]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 docs/components/input.md                      |    4 +-
 docs/components/select.md                     | 1286 +++++++----------
 docs/guide/migrating-to-version-9.md          |   32 +
 sandbox/index.ts                              |    2 +
 sandbox/pages/SandboxPagination.vue           |   54 +
 sandbox/pages/SandboxSelect.vue               |  434 ++++++
 sandbox/router/sandbox-routes.ts              |   12 +
 src/components/KInput/KInput.vue              |   43 +-
 src/components/KPagination/KPagination.cy.ts  |   10 +-
 src/components/KPagination/KPagination.vue    |   51 +-
 src/components/KSelect/KSelect.cy.ts          |  211 +--
 src/components/KSelect/KSelect.vue            | 1064 +++++---------
 src/components/KSelect/KSelectItem.vue        |  121 +-
 src/components/KSelect/KSelectItems.vue       |   25 +-
 src/components/KTable/KTable.cy.ts            |   12 +-
 src/styles/_mixins.scss                       |    2 +-
 src/styles/mixins/_input-text.scss            |    3 +-
 src/styles/mixins/_inputs.scss                |    2 +-
 .../mixins/{_labels.scss => _label.scss}      |    0
 src/types/select.ts                           |   10 +-
 src/utilities/index.ts                        |    1 +
 src/utilities/sanitizeInput.ts                |   14 +
 22 files changed, 1632 insertions(+), 1761 deletions(-)
 create mode 100644 sandbox/pages/SandboxPagination.vue
 create mode 100644 sandbox/pages/SandboxSelect.vue
 rename src/styles/mixins/{_labels.scss => _label.scss} (100%)
 create mode 100644 src/utilities/sanitizeInput.ts

diff --git a/docs/components/input.md b/docs/components/input.md
index 5abfbdca8c..40531d3b33 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -256,12 +256,12 @@ We also recommend setting the icon style `color` property to a value of `current
 If you want to utilize HTML in the input label's tooltip, use the slot.
 
 <KInput label="My tooltip">
-  <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
+  <template #label-tooltip>Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code></template>
 </KInput>
 
 ```html
 <KInput label="My tooltip">
-  <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
+  <template #label-tooltip>Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code></template>
 </KInput>
 ```
 
diff --git a/docs/components/select.md b/docs/components/select.md
index c945f108a4..bd71ae94af 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -1,1013 +1,781 @@
 # Select
 
-**Select** - Select input component
+KSelect is custom component alternative for native `<select>` element.
 
 <ClientOnly>
-  <KSelect label="Pick Something:" :items="deepClone(defaultItemsUnselect)" />
+  <KSelect :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect label="Pick Something:" :items="items" />
+<KSelect :items="selectItems" />
 ```
 
 ## Props
 
-### items
+### v-model
 
-An array of items containing a `label` and `value`. You may also specify:
-- a certain item is `selected` by default
-- a certain item is `disabled`
-- certain items are grouped under a `group`
+Use `v-model` for two-way value binding.
 
-<ClientOnly>
-  <KSelect :items="deepClone(defaultItemsWithDisabledAndGroups)" />
-</ClientOnly>
+<div class="spacing-container">
+  <span>Selected service: {{ vModel || 'none' }}</span>
+
+  <ClientOnly>
+    <KSelect
+      v-model="vModel"
+      :items="selectItemsUnselected"
+    />
+  </ClientOnly>
+</div>
 
 ```html
-<KSelect :items="[{
-    label: 'Cats',
-    value: 'cats',
-    selected: true
+Selected service: {{ selectValue || 'none' }}
+
+<KSelect
+  v-model="selectValue"
+  :items="selectItems"
+/>
+```
+
+### items
+
+Prop for providing select item options. Supports grouping items under one group name through providing optional `group` property.
+
+```ts
+interface SelectItem {
+  label: string
+  value: string | number
+  key?: string
+  selected?: boolean
+  disabled?: boolean
+  group?: string
+}
+```
+
+<ClientOnly>
+  <KSelect :items="[{
+    label: 'Service A',
+    value: 'a',
+    selected: true,
   }, {
-    label: 'Dogs',
-    value: 'dogs',
-    disabled: true,
+    label: 'Service B',
+    value: 'b',
   }, {
-    label: 'Bunnies',
-    value: 'bunnies'
+    label: 'Service F',
+    value: 'f',
+    disabled: true,
   }, {
-    label: 'Duck',
-    value: 'duck',
-    group: 'Birds'
+    label: 'Service A1',
+    value: 'a1',
+    group: 'Series 1',
   }, {
-    label: 'Oriole',
-    value: 'oriole',
-    group: 'Birds'
+    label: 'Service B1',
+    value: 'b1',
+    group: 'Series 1',
   }, {
-    label: 'Trout',
-    value: 'trout',
-    group: 'Fish'
+    label: 'Service A2',
+    value: 'a2',
+    group: 'Series 2',
   }, {
-    label: 'Salmon',
-    value: 'salmon',
-    group: 'Fish'
-  }]"
-/>
+    label: 'Service B2',
+    value: 'b2',
+    group: 'Series 2',
+  }]" />
+</ClientOnly>
+
+```html
+<KSelect :items="[{
+  label: 'Service A',
+  value: 'a',
+  selected: true,
+}, {
+  label: 'Service B',
+  value: 'b',
+}, {
+  label: 'Service F',
+  value: 'f',
+  disabled: true,
+}, {
+  label: 'Service A1',
+  value: 'a1',
+  group: 'Series 1',
+}, {
+  label: 'Service B1',
+  value: 'b1',
+  group: 'Series 1',
+}, {
+  label: 'Service A2',
+  value: 'a2',
+  group: 'Series 2',
+}, {
+  label: 'Service B2',
+  value: 'b2',
+  group: 'Series 2',
+}]" />
 ```
 
 ### label
 
-The label for the select.
+Label associated with the input element.
 
 <ClientOnly>
-  <KSelect label="Cool label" :items="deepClone(defaultItemsUnselect)" />
+  <KSelect label="Label" :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect label="Cool label" :items="items" />
+<KSelect label="Label" :items="selectItems" />
 ```
 
 ### labelAttributes
 
-Use the `labelAttributes` prop to configure the **KLabel's** [props](/components/label) if using the `label` prop. This example shows using the `label-attributes` to set up a tooltip, see the [slot](#slots) section if you want to slot HTML into the tooltip rather than use plain text.
+Label attributes to be passed to underlying [KLabel component](/components/label#props).
 
 <ClientOnly>
-  <KSelect label="Name" :label-attributes="{
-      help: 'I use the KLabel `help` prop',
-      'data-testid': 'test'
-    }"
-    :items="defaultItemsUnselect"
-  />
+  <KSelect :label-attributes="{ info: 'I use the KLabel `info` prop' }" label="Label" :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect
-  label="Name"
-  :label-attributes="{
-    help: 'I use the KLabel `help` prop',
-    'data-testid': 'test'
-  }"
-  :items="items"
-/>
+<KSelect :label-attributes="{ info: 'I use the KLabel `info` prop' }" label="Label" :items="selectItems" />
 ```
 
-### appearance
-
-There are three styles of selects, `select` and `dropdown` (default) which are filterable, and lastly `button` which is not.
+### placeholder
 
-The `dropdown` appearance style has a selected item object. You can deselect the item by clicking the Clear icon.
+Placeholder to be displayed when no item is selected.
 
 <ClientOnly>
-  <KSelect :items="deepClone(defaultItems)" />
+  <KSelect placeholder="Select service" :items="selectItemsUnselected" />
 </ClientOnly>
 
 ```html
-<KSelect :items="items" />
+<KSelect placeholder="Select service" :items="selectItems" />
 ```
 
-The `select` style displays the selected item in the text box and also displays a chevron. To allow deselecting the item, you need to
-set the `clearable` prop to `true`. See [clearable](#clearable) for an example.
-
-<ClientOnly>
-  <KSelect appearance="select" :items="deepClone(defaultItems)" />
-</ClientOnly>
-
-```html
-<KSelect appearance="select" :items="items" />
-```
+### clearable
 
-The `button` style triggers the dropdown on click and you cannot filter the entries.
+When set to `true`, the clear icon will be displayed in front of selected item.
 
 <ClientOnly>
-  <KSelect appearance="button" :items="deepClone(defaultItems)" />
+  <KSelect clearable :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect appearance="button" :items="items" />
+<KSelect clearable :items="selectItems" />
 ```
 
-### clearable
+### help
 
-The `clearable` prop is used to enable deselecting the selected item when `appearance` is `'select'`. Defaults to `false`.
+Help text to be displayed below the select element.
 
 <ClientOnly>
-  <KSelect appearance="select" :items="deepClone(defaultItems)" clearable />
+  <KSelect help="Helpful text." :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect appearance="select" :items="items" clearable />
+<KSelect help="Helpful text." :items="selectItems" />
 ```
 
-### buttonText
+### error
 
-You can configure the button text when an item is selected, if `appearance` is type `button`.
+When set to `true`, error styling will apply.
 
 <ClientOnly>
-  <KSelect appearance="button" width="225" @selected="item => handleItemSelect(item)" :buttonText="`Show ${mySelect} per page`" :items="items" />
+  <KSelect error help="You can use `help` prop for displaying error messages." :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect
-  appearance="button"
-  width="225"
-  @selected="item => handleItemSelect(item)"
-  :buttonText="`Show ${mySelect} per page`"
-  :items="items"
-/>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data() {
-    return {
-      mySelect: '',
-      items: [{
-        label: '25',
-        value: '25'
-      }, {
-        label: '50',
-        value: '50'
-      }]
-    }
-  },
-  methods: {
-    handleItemSelect (item) {
-      this.mySelect = item.label
-    }
-  }
-})
-</script>
+<KSelect error help="You can use `help` prop for displaying error messages." :items="selectItems" />
 ```
 
 ### width
 
-You can pass a `width` string for the dropdown. By default the `width` is `200px`. This is the width of the input, dropdown, and selected item.
-Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
-
-::: tip NOTE
-Because we are controlling the widths of multiple elements, we recommend using this prop to control the width instead of explicitly adding classes or styles to the `KSelect` component.
-:::
+Use this prop to limit element's width.
 
 <ClientOnly>
-  <KSelect width="350" :items="deepClone(defaultItemsUnselect)"
-  />
+  <KSelect width="200" :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect width="350" :items="items" />
+<KSelect width="200" :items="selectItems" />
 ```
 
 ### dropdownMaxHeight
 
-You can pass a `dropdownMaxHeight` string for the dropdown. By default, the `dropdownMaxHeight` is `300px`. This is the maximum height of the `KSelect` dropdown when open. You can pass a number (will be converted to `px`), `auto`, percentages, or `vh` units.
+Maximum height for dropdown container. Defaults to `300px`.
 
 <ClientOnly>
-  <KSelect width="250" :items="deepClone(defaultItemsLongList)" dropdown-max-height="150" />
+  <KSelect dropdown-max-height="300" :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect width="250" :items="items" dropdown-max-height="150" />
+<KSelect dropdown-max-height="300" :items="selectItems" />
 ```
 
 ### dropdownFooterText
 
-Adds informational text to the bottom of the dropdown options which remains visible even if the content is scrolled. Can also be [slotted](#slots).
+Text to be displayed at the bottom of the dropdown container. Can also be [slotted](#dropdown-footer-text).
 
 <ClientOnly>
-  <KSelect dropdown-footer-text="Sticky dropdown footer text" :items="deepClone(defaultItemsLongList)" width="250" />
+  <KSelect dropdown-footer-text="Helpful text in the dropdown." :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect dropdown-footer-text="Sticky dropdown footer text" :items="items" width="250" />
+<KSelect dropdown-footer-text="Helpful text in the dropdown." :items="selectItems" />
 ```
 
 ### dropdownFooterTextPosition
 
-By default, the dropdown footer text will be stuck to the bottom of the dropdown and will always be visible even if the dropdown content is scrolled.
-
-If you want to override the behaviour and have the footer text at the end of the dropdown list, use the value `static`. This ensures the footer text is visible only when the user scrolls to view the bottom of the list.
-
-Accepted values: `sticky` (default) and `static`.
+Defaults to `sticky`, but also accepts `static` value should you want text passed through `dropdownFooterText` prop to be displayed at the bottom of dropdown container after all items.
 
 <ClientOnly>
-  <KSelect dropdown-footer-text-position="static" dropdown-footer-text="Static dropdown footer text" :items="deepClone(defaultItemsLongList)" width="250" />
+  <KSelect dropdown-footer-text-position="static" dropdown-footer-text="Helpful text in the dropdown." :items="selectItems" />
 </ClientOnly>
 
 ```html
-<KSelect dropdown-footer-text-position="static" dropdown-footer-text="Static dropdown footer text" :items="items" width="250" />
+<KSelect dropdown-footer-text-position="static" dropdown-footer-text="Helpful text in the dropdown." :items="selectItems" />
 ```
 
-### positionFixed
-
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [`KPop` docs](popover.html#positionfixed) for more information.
-
 ### enableFiltering
 
-Use this prop to control whether or not the `KSelect` component with an `appearance` prop set to a value of `select` or `dropdown` allows filtering. By default, filtering is enabled for `dropdown` appearance and is disabled for `select` appearance.
-
-`button` style `appearance` does not have filter support because it is a button.
+By default, items passed to KSelect are not searchable. When `enableFiltering` prop is true, clicking on the select element will turn it into input field. You may filter items by typing in the input which will hide non-matching items.
 
 <ClientOnly>
-  <KSelect :items="deepClone(defaultItemsUnselect)" :enable-filtering="false" class="vertical-spacing" />
-  <KSelect :items="deepClone(defaultItemsUnselect)" appearance="select" :enable-filtering="true" />
+  <KSelect enable-filtering placeholder="Try searching for 'service a'" :items="selectItemsUnselected" />
 </ClientOnly>
 
 ```html
-<KSelect :items="items" :enable-filtering="false" />
-
-<KSelect :items="items" appearance="select" :enable-filtering="true" />
+<KSelect enable-filtering placeholder="Try searching for 'service a'" :items="selectItems" />
 ```
 
-### filterFunc
+### filterFunction
 
-Use this prop to override the default filter function if you want to do something like filter on an attribute other than `label`. Your filter function
-should take as parameter a JSON object containing the items to filter on (`items`) and the query string (`query`) and return the filtered items. See [Slots](#slots) for an example.
+A custom function to perform item filtering. Expects an object with query string and items to filter through. To keep track of user input you can listen to [`@query-change` event](#query-change).
 
-```js
-myCustomFilter ({ items, query }) {
-  return items.filter(anItem => anItem.label.includes(query))
+```ts
+interface SelectFilterFunctionParams {
+  query: string
+  items: SelectItem[]
 }
 ```
 
-::: tip NOTE
-`filterFunc` does not work with `autosuggest` enabled.
-For `autosuggest`, you are in charge of filtering the options, so `KSelect` won't filter them internally.
-See [autosuggest](#autosuggest) for more details.
+:::tip TIP
+When using `filterFunction` prop in conjunction with `enableItemCreation` set to `true` you must keep track of added and removed custom items to be able to provide the most up to date items to `filterFunction`. To achieve that you want to utilize [`@item-added`](#item-added) and [`@item-removed`](#item-added) events.
 :::
 
-### v-model
-
-`KSelect` works as regular inputs do using v-model for data binding:
-
 <ClientOnly>
-  <KLabel>Value:</KLabel> {{ myVal }}
-  <KSelect v-model="myVal" :items="deepClone(defaultItems)" />
-  <br>
-  <KButton @click="clearIt">Clear</KButton>
+  <KSelect enable-filtering :filter-function="envFilter" placeholder="Try searching for 'dev' or 'prod'" :items="selectItemsUnselectedEnv">
+    <template #item-template="{ item }">
+      {{ item?.label }}
+      <KBadge v-if="item.env">{{ item.env }}</KBadge>
+    </template>
+  </KSelect>
 </ClientOnly>
 
-```html
-<div>
-  <KLabel>Value:</KLabel> {{ myVal }}
-  <KSelect v-model="myVal" :items="items" />
-  <KButton @click="clearIt">Clear</KButton>
-</div>
+```vue
+<template>
+  <KSelect enable-filtering :filter-function="envFilter" placeholder="Try searching for 'dev' or 'prod'" :items="selectItems">
+    <template #item-template="{ item }">
+      {{ item?.label }}
+      <KBadge v-if="item.env">{{ item.env }}</KBadge>
+    </template>
+  </KSelect>
+</template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data() {
-    return {
-      myVal: 'cats',
-    }
-  },
-  methods: {
-    clearIt() {
-      this.myVal = ''
-    }
-  }
-})
+<script setup lang="ts">
+import type { SelectItem, SelectFilterFunctionParams } from '@kong/kongponents'
+
+const selectItems: SelectItem[] = [{
+  label: 'Service A',
+  value: 'a',
+}, {
+  label: 'Service B',
+  value: 'b',
+  env: 'dev',
+}, {
+  label: 'Service F',
+  value: 'f',
+  disabled: true,
+}, {
+  label: 'Service A1',
+  value: 'a1',
+  group: 'Series 1',
+}, {
+  label: 'Service B1',
+  value: 'b1',
+  group: 'Series 1',
+}, {
+  label: 'Service A2',
+  value: 'a2',
+  group: 'Series 2',
+  env: 'prod',
+}, {
+  label: 'Service B2',
+  value: 'b2',
+  group: 'Series 2',
+  env: 'prod',
+}]
+
+const envFilter = (params: SelectFilterFunctionParams) => 
+  params?.items?.filter((item: SelectItem) => 
+  item.label?.toLowerCase().includes(params.query?.toLowerCase())
+    || item.env?.includes(params.query?.toLowerCase()))
 </script>
 ```
 
-### autosuggest
-
-Add the `autosuggest` prop to trigger a query to an API with the filter keyword, and then update `items` asynchronously as suggestions as the user types.
-Loading and empty state content can be configured using the `loading` and `empty` slots.
-
-<ClientOnly>
-  <KSelect autosuggest
-    :items="itemsForAutosuggest"
-    :loading="loading"
-    width="300px"
-    appearance="select"
-    @query-change="onQueryChange"
-  >
-    <template v-slot:item-template="{ item }">
-      <div class="select-item-label">{{ item.label }}</div>
-      <div class="select-item-desc">{{ item.description }}</div>
-    </template>
-    <template v-slot:loading>
-      <div>Loading...</div>
-    </template>
-    <template v-slot:empty>
-      <div>No results found</div>
-    </template>
-  </KSelect>
-</ClientOnly>
+:::tip TIP
+Should you need to disable the default filter function while still allowing filtering (for example when you want to handle filtering asynchronously by querying an API), you can provide a function that always returns boolean `true` to this prop, like so: 
 
 ```html
 <KSelect
-  autosuggest
-  :items="items"
-  :loading="loading"
-  width="300px"
-  appearance="select"
-  @query-change="onQueryChange"
->
-  <template v-slot:item-template="{ item }">
-    <div class="select-item-label">{{ item.label }}</div>
-    <div class="select-item-desc">{{ item.label }}</div>
-  </template>
-  <template v-slot:loading>
-    <div>Loading...</div>
-  </template>
-  <template v-slot:empty>
-    <div>No results found</div>
-  </template>
-</KSelect>
-
-<script>
-const allItems = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
-  description: `This is the description for item ${i}.`,
-  value: `autosuggest-item-${i}`,
-  ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
-}));
-export default {
-  data() {
-    return {
-      defaultItems: [],
-      items: [],
-      loading: false,
-    }
-  },
-  methods: {
-    onQueryChange (val) {
-      if (val === '' && !this.defaultItems.length) {
-        this.loading = true;
-        // If query is empty and default items are not fetched, fetch them
-        setTimeout(() => {
-          this.defaultItems = allItems;
-          this.items = this.defaultItems.map(item => Object.assign({}, item));
-          this.loading = false;
-        }, 200);
-        return;
-      }
-      if (val === '') {
-        // If query is empty and default items are fetched, use the default items
-        this.items = this.defaultItems.map(item => Object.assign({}, item));
-        return;
-      }
-      this.loading = true;
-      // Otherwise fetch items that contain the keyword
-      setTimeout(() => {
-        this.items =
-          allItems
-            .filter(item => item.label.toLowerCase().includes(val.toLowerCase()) || item.description.toLowerCase().includes(val.toLowerCase()))
-            .map(item => Object.assign({}, item));
-        this.loading = false;
-      }, 200);
-    }
-  }
-}
-</script>
+  enable-filtering
+  :filter-function="() => true"
+  :items="selectItems"
+/>
 ```
-
-::: tip NOTE
-The `query-change` event triggers immediately when the user types in the input.
-If you need to send API requests in the `query-change` event handler, you may want to implement a debounce function.
-The following is an example:
 :::
 
+### reuseItemTemplate
+
+Reuse the same display format provided via the [`item-template` slot](#itemtemplate) for the selected item.
+
 <ClientOnly>
-  <KSelect autosuggest
-    :items="itemsForDebouncedAutosuggest"
-    :loading="loadingForDebounced"
-    width="300px"
-    appearance="select"
-    @query-change="onQueryChangeForDebounced"
+  <KSelect
+    :items="selectItems"
+    reuse-item-template
   >
-    <template v-slot:item-template="{ item }">
-      <div class="select-item-label">{{ item.label }}</div>
-      <div class="select-item-desc">{{ item.label }}</div>
+    <template #item-template="{ item }">
+      <KongIcon />
+      {{ item?.label }}
     </template>
   </KSelect>
 </ClientOnly>
 
 ```html
 <KSelect
-  autosuggest
-  :items="items"
-  :loading="loading"
-  width="300px"
-  appearance="select"
-  @query-change="onQueryChange"
+  :items="selectItems"
+  reuse-item-template
 >
-  <template v-slot:item-template="{ item }">
-    <div class="select-item-label">{{ item.label }}</div>
-    <div class="select-item-desc">{{ item.label }}</div>
+  <template #item-template="{ item }">
+    <KongIcon />
+    {{ item?.label }}
   </template>
 </KSelect>
-
-<script>
-function debounce(func, timeout) {
-  let timer;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
-}
-const allItems = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
-  description: `This is the description for item ${i}.`,
-  value: `autosuggest-item-${i}`,
-  ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
-}));
-export default {
-  data() {
-    return {
-      defaultItems: [],
-      items: [],
-      loading: true,
-    }
-  },
-  methods: {
-    onQueryChange (val) {
-      if (val === '' && !this.defaultItems.length) {
-        // If query is empty and default items are not fetched, fetch them
-        this.loading = true;
-        setTimeout(() => {
-          this.defaultItems = allItems;
-          this.items = this.defaultItems.map(item => Object.assign({}, item));
-          this.loading = false;
-        }, 200);
-        return;
-      }
-      if (val === '') {
-        // If query is empty and default items are fetched, use the default items
-        this.items = this.defaultItems.map(item => Object.assign({}, item));
-        return;
-      }
-      this.debouncedHandler(val);
-    },
-    debouncedHandler: debounce(function (val) {
-      this.loading = true;
-      // Fetch items that contain the keyword
-      setTimeout(() => {
-        this.items =
-          allItems
-            .filter(item => item.label.toLowerCase().includes(val.toLowerCase()) || item.description.toLowerCase().includes(val.toLowerCase()))
-            .map(item => Object.assign({}, item));
-        this.loading = false;
-      }, 200);
-    }, 400)
-  }
-}
-</script>
 ```
 
-### loading
+### positionFixed
 
-When `autosuggest` is enabled, you can use the `loading` prop to show a loading indicator while fetching data from API.
-By default, the loading indicator is a spinner icon, and you can implement your own indicator using the `loading` slot.
-See [autosuggest](#autosuggest) for an example.
+Use fixed positioning for the select dropdown to avoid content being clipped by the boundaries of its parent container. See [KPopover](/components/popover#positionfixed) docs for more information.
 
-### reuseItemTemplate
+### enableItemCreation
 
-Use this prop to customize selected item element appearance by reusing content passed through [item-template](#item-template) slot. **Note:** this prop only applies when `appearance` prop is `select` (use [selected-item-template](#selected-item-template) slot in other cases).
+When used in conjunction with `enableFiltering` set to `true`, KSelect will suggest adding a new value when filtering produces no results.
 
 <ClientOnly>
-  <KSelect reuse-item-template appearance="select" :items="deepClone(defaultItems)">
-    <template #item-template="{ item }">
-      <div class="item-template-container">
-        <span v-if="item.value === 'cats'">🐈</span>
-        <span v-if="item.value === 'dogs'">🐕</span>
-        <span v-if="item.value === 'bunnies'">🐇</span>
-        <div class="select-item-label">{{ item.label }}</div>
-      </div>
-    </template>
-  </KSelect>
+  <KSelect enable-item-creation enable-filtering placeholder="Try searching for 'service d'" :items="selectItemsUnselected" />
 </ClientOnly>
 
 ```html
-<KSelect reuse-item-template appearance="select" :items="items">
-  <template #item-template="{ item }">
-    <div>
-      <span v-if="item.value === 'cats'">🐈</span>
-      <span v-if="item.value === 'dogs'">🐕</span>
-      <span v-if="item.value === 'bunnies'">🐇</span>
-      <div class="select-item-label">{{ item.label }}</div>
-    </div>
-  </template>
-</KSelect>
+<KSelect enable-item-creation enable-filtering placeholder="Try searching for 'service d'" :items="selectItems" />
 ```
 
-### enableItemCreation
+### loading
 
-`KSelect` offers users the ability to add custom item to the list by typing the item they want to and then clicking the `... (Add new value)` item at the bottom of the list, which will also automatically select it.
+Pass `true` to display loader instead of items in the dropdown. KSelect's `item` prop is reactive to changes by design, so that should you need to perform async item fetching/filtering you can execute that logic within the host app and pass items back to KSelect. 
 
-Newly created item will have a `label` consisting of the user input and a randomly generated id for the `value` to ensure uniqueness. It will also have an attribute `custom` set to `true`. This action triggers an `item:added` event containing the added item data.
+The example below utilizes the [`@query-change` event](#query-change) to simulate async item fetching behind the scenes.
 
-Deselecting the item will completely remove it from the list and underlying data, and trigger a `item:removed` event containing the removed item's data.
+<div class="spacing-container">
+  <span>Selected service: {{ asyncItemsModel || 'none' }}</span>
 
-:::tip NOTE
-You cannot add an item if the `label` matches the `label` of a pre-existing item. In that scenario the `... (Add new value)` item will not be displayed.
-:::
-
-<ClientOnly>
-  <KLabel>Added Item:</KLabel> <pre class="json">{{ JSON.stringify(addedItems) }}</pre>
-  <KSelect
-    v-model="myVal"
-    :items="deepClone(defaultItems)"
-    enable-item-creation
-    @item:added="(item) => trackNewItems(item, true)"
-    @item:removed="(item) => trackNewItems(item, false)"
-  />
-</ClientOnly>
+  <ClientOnly>
+    <KSelect
+      v-model="asyncItemsModel"
+      enable-filtering
+      :items="asyncItems"
+      :loading="asyncItemsLoading"
+      @query-change="onAsyncQueryChange"
+    />
+  </ClientOnly>
+</div>
 
-```html
+```vue
 <template>
-  <KLabel>Added Item:</KLabel> {{ addedItems }}
   <KSelect
-    v-model="myVal"
-    :items="items"
-    enable-item-creation
-    @item:added="(item) => trackNewItems(item, true)"
-    @item:removed="(item) => trackNewItems(item, false)"
+    v-model="asyncItemsModel"
+    enable-filtering
+    :items="asyncItems"
+    :loading="asyncItemsLoading"
+    @query-change="onAsyncQueryChange"
   />
 </template>
 
 <script setup lang="ts">
-  const myVal = 'cats'
-  const addedItems = ref([])
-
-  const trackNewItems = (item, added) => {
-    if (added) {
-      addedItems.value.push(item)
-    } else {
-      addedItems.value = addedItems.value.filter(anItem => anItem.value !== item.value)
-    }
+import { ref } from 'vue'
+import type { SelectItem } from '@kong/kongponents'
+
+const asyncItems: SelectItem[] = [{
+  label: 'Service A',
+  value: 'a',
+}, {
+  label: 'Service B',
+  value: 'b',
+}, {
+  label: 'Service F',
+  value: 'f',
+  disabled: true,
+}, ...]
+const asyncItemsInitial: SelectItem[] = JSON.parse(JSON.stringify(asyncItems.value))
+
+const asyncItemsModel = ref<string>('')
+const asyncItemsQuery = ref<string>('')
+const asyncItemsLoading = ref<boolean>(false)
+
+const onAsyncQueryChange = (query: string): void => {
+  if (asyncItemsQuery.value !== query) {
+    asyncItemsQuery.value = query
+
+    fetchAsyncItems()
   }
+}
+
+const fetchAsyncItems = (): void => {
+  asyncItemsLoading.value = true
+
+  setTimeout(() => {
+    // normally we would perform api fetching here
+    // but for the sake of this example let's just filter items locally with some timeout
+    const items = JSON.parse(JSON.stringify(asyncItemsInitial))
+    asyncItems.value = items.filter((item: SelectItem) => item.label?.toLowerCase().includes(asyncItemsQuery.value?.toLowerCase()))
+
+    asyncItemsLoading.value = false
+  }, 2000)
+}
 </script>
 ```
 
-## Attribute Binding
+### kpopAttributes
+
+Attributes to be passed to underlying KPopover component. See [KPopover's props](/components/popover#props) for more info.
+
+### HTML Attributes
+
+#### required
 
-You can pass any input attribute and it will get properly bound to the element.
+KSelect will display a red dot next to label when `required` attribute is passed.
 
 <ClientOnly>
-  <KSelect disabled placeholder="type something" :items="[{ label: 'test', value: 'test' }]" />
+  <KSelect
+    label="Label"
+    required
+    :items="selectItems"
+  />
 </ClientOnly>
 
 ```html
-<KSelect disabled placeholder="type something" :items="[{ label: 'test', value: 'test' }]" />
+<KSelect
+  label="Label"
+  required
+  :items="selectItems"
+/>
 ```
 
-### required
-
-KSelect will display an `*` to indicate a field is required if you set the `required` attribute and provide a `label`. See **KLabel's** [`required`](/components/label#required) prop for more information.
+#### disabled
 
-:::tip NOTE
-Text passed in for the `label` will automatically strip any trailing `*` when used with the `required` attribute to try to prevent duplicate asterisks.
-:::
+Use this attribute to disable interaction with the element.
 
 <ClientOnly>
-  <KSelect label="Name" required :items="deepClone(defaultItems)" />
-  <br>
-  <KSelect label="Name" required :items="deepClone(defaultItems)" />
+  <KSelect
+    label="Disabled"
+    disabled
+    :items="selectItems"
+  />
 </ClientOnly>
 
 ```html
-<KSelect label="Name" required :items="items" />
-<KSelect label="Name" required :items="items" />
+<KSelect
+  label="Disabled"
+  disabled
+  :items="selectItems"
+/>
 ```
 
 ## Slots
 
-- `label-tooltip` - slot for tooltip content if select has a label and label has tooltip (note: this slot overrides `help`/`info` content specified in `label-attributes`)
-- `item-template` - The template for each item in the dropdown list
-- `selected-item-template` - Slot for customizing selected item appearance
-- `loading` - Slot for the loading indicator
-- `empty` - Slot for the empty state in the dropdown list
-- `dropdown-footer-text` - Slot for footer text in the bottom of the dropdown
-
-### `label-tooltip`
+### item-template
 
-If you want to utilize HTML in the select label's tooltip, use the slot.
+Use this slot to pass custom content to the items. The slot exposes `item` slot prop.
 
 <ClientOnly>
-  <KSelect label="My Tooltip" :items="deepClone(defaultItems)">
-    <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
+  <KSelect :items="selectItems">
+    <template #item-template="{ item }">
+      <div class="custom-item">
+        <KongIcon />
+        <div class="custom-item-title-container">
+          <span class="custom-item-title">{{ item?.label }}</span>
+          <span class="custom-item-description">{{ item?.label }} description.</span>
+        </div>
+      </div>
+    </template>
   </KSelect>
 </ClientOnly>
 
-```html
-<KSelect label="My Tooltip" :items="items">
-  <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
-</KSelect>
+```vue
+<template>
+  <KSelect :items="selectItems">
+    <template #item-template="{ item }">
+      <div class="custom-item">
+        <KongIcon />
+        <div class="custom-item-title-container">
+          <span class="custom-item-title">{{ item?.label }}</span>
+          <span class="custom-item-description">{{ item?.label }} description.</span>
+        </div>
+      </div>
+    </template>
+  </KSelect>
+</template>
+
+<style lang="scss" scoped>
+.custom-item {
+  display: flex;
+  flex-direction: row;
+  gap: $kui-space-30;
+
+  &-title-container {
+    flex: 1;
+  }
+
+  &-title {
+    display: block;
+  }
+
+  &-description {
+    color: $kui-color-text-neutral;
+    display: block;
+    font-size: $kui-font-size-20;
+  }
+}
+</style>
 ```
 
-:::tip Note:
-When utilizing the `label-tooltip` slot, the `info` `KIcon` will be shown by default. To utilize the the `help` icon instead, set the `label-attributes` `help` property to any non-empty string value.
-:::
+### selected-item-template
+
+Use this slot to provide custom content to the selected item. The slot exposes `item` slot prop.
 
 <ClientOnly>
-  <KSelect label="My Tooltip" :label-attributes="{ help: 'true' }" :items="deepClone(defaultItems)">
-    <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
+  <KSelect :items="selectItems">
+    <template #selected-item-template="{ item }">
+      <KongIcon />
+      {{ item?.label }}
+    </template>
   </KSelect>
-</ClientOnly>
+</CLientOnly>
 
 ```html
-<KSelect
-  label="My Tooltip"
-  :label-attributes="{ help: 'true' }"
-  :items="items"
->
-  <template #label-tooltip>Brings all the <code>devs</code> to the yard</template>
+<KSelect :items="selectItems">
+  <template #selected-item-template="{ item }">
+    <KongIcon />
+    {{ item?.label }}
+  </template>
 </KSelect>
 ```
 
-### `item-template`
-You can use the `item-template` slot to customize the look and feel of your items. Use slots to gain access to the `item` data.
+### dropdown-footer-text
 
-::: tip TIP
-If you use the `.select-item-label` and `.select-item-desc` classes within the slot as shown in the example below, the dropdown items will inherit preconfigured styles for two-level select items which you're then free to customize.
-:::
+A slot alternative for [`dropdownFooterText` prop](#dropdownfootertext).
 
 <ClientOnly>
-  <KSelect :items="myItems" width="100%" :filterFunc="customFilter">
-    <template v-slot:item-template="{ item }">
-      <div class="select-item-label">{{ item.label }}</div>
-      <div class="select-item-desc">{{ item.description }}</div>
+  <KSelect :items="selectItems">
+    <template #dropdown-footer-text>
+      <KongIcon />
+      Dropdown footer content.
     </template>
   </KSelect>
-</ClientOnly>
+</CLientOnly>
 
 ```html
-<template>
-  <KSelect :items="myItems" width="100%" :filterFunc="customFilter">
-    <template v-slot:item-template="{ item }">
-      <div class="select-item-label">{{ item.label }}</div>
-      <div class="select-item-desc">{{ item.description }}</div>
-    </template>
-  </KSelect>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data() {
-    return {
-      myItems: this.getItems(5),
-    }
-  },
-  methods: {
-    getItems(count) {
-      let myItems = []
-        for (let i = 0; i < count; i++) {
-          myItems.push({
-            label: `Item ${i}`,
-            value: `item_${i}`,
-            description: `${i} - The item's description for number ${i}`
-          })
-        }
-      return myItems
-    },
-    customFilter (items, queryStr) {
-      return items.filter(item => {
-        return item.label.toLowerCase().includes(queryStr.toLowerCase()) ||
-          item.description.toLowerCase().includes(queryStr.toLowerCase())
-      })
-    }
-  }
-})
-</script>
+<KSelect :items="selectItems">
+  <template #dropdown-footer-text>
+    <KongIcon />
+    Dropdown footer content.
+  </template>
+</KSelect>
 ```
 
-### `selected-item-template`
+### loading
 
-Use this slot to customize appearance of the selected item that appears when the `KSelect` dropdown is not activated. If present, the slot content takes precedence over the [reuseItemTemplate](#reuseitemtemplate) prop.
-
-::: tip TIP
-You can use the `.k-select-selected-item-label` class within the slot to leverage preconfigured styles for selected item title which you're then free to customize.
-:::
+Content to be displayed when [`loading` prop](#loading-1) is `true`. Note that this prop only applies when `enableFiltering` is `true`.
 
 <ClientOnly>
-  <KSelect appearance="select" autosuggest :items="deepClone(defaultItems)">
-    <template #selected-item-template="{ item }">
-      <span class="horizontal-spacing" v-if="item.value === 'cats'">🐈</span>
-      <span class="horizontal-spacing" v-if="item.value === 'dogs'">🐕</span>
-      <span class="horizontal-spacing" v-if="item.value === 'bunnies'">🐇</span>
-      {{ item.label }}
-    </template>
-    <template #item-template="{ item }">
-      <div class="item-template-container">
-        <span v-if="item.value === 'cats'">🐈</span>
-        <span v-if="item.value === 'dogs'">🐕</span>
-        <span v-if="item.value === 'bunnies'">🐇</span>
-        <div class="select-item-label">{{ item.label }}</div>
-      </div>
-    </template>
-  </KSelect>
-</ClientOnly>
+  <KToggle toggled v-slot="{ isToggled, toggle }">
+    <div class="spacing-container">
+      <KInputSwitch v-model="isToggled.value" label="Loading" />
+      <KSelect :loading="isToggled.value" enable-filtering :items="selectItems">
+        <template #loading>
+          Services loading...
+        </template>
+      </KSelect>
+    </div>
+  </KToggle>
+</CLientOnly>
 
 ```html
-<KSelect appearance="select" autosuggest :items="items">
-  <template #selected-item-template="{ item }">
-    <span v-if="item.value === 'cats'">🐈</span>
-    <span v-if="item.value === 'dogs'">🐕</span>
-    <span v-if="item.value === 'bunnies'">🐇</span>
-    {{ item.label }}
-  </template>
-  <template #item-template="{ item }">
-    <div>
-      <span v-if="item.value === 'cats'">🐈</span>
-      <span v-if="item.value === 'dogs'">🐕</span>
-      <span v-if="item.value === 'bunnies'">🐇</span>
-      <div class="select-item-label">{{ item.label }}</div>
-    </div>
+<KSelect :loading="loading" enable-filtering :items="selectItems">
+  <template #loading>
+    Services loading...
   </template>
 </KSelect>
 ```
 
-### `loading`
+### empty
 
-You can use the `loading` slot to customize the loading indicator. Note that this only applies when `autoggest` is `true`. See [autosuggest](#autosuggest) for an example of this slot.
+Slot to display custom content when items is empty or no items match filter query.
 
-### `empty`
+<ClientOnly>
+  <KSelect :items="[]">
+    <template #empty>
+      No services found.
+    </template>
+  </KSelect>
+</CLientOnly>
 
-You can use the `empty` slot to customize the look of the dropdown list when there is no options. See [autosuggest](#autosuggest) for an example of this slot.
+```html
+<KSelect :items="[]">
+  <template #empty>
+    No services found.
+  </template>
+</KSelect>
+```
 
-### `dropdown-footer-text`
+### label-tooltip
 
-Slot the content of the dropdown footer text. This slot will override the `dropdownFooterText` prop if provided.
+Use this prop to pass any custom content to label tooltip.
 
 <ClientOnly>
-  <KSelect dropdown-footer-text="I am irreplaceable" :items="deepClone(defaultItemsLongList)">
-    <template #dropdown-footer-text>
-      Come as you are
-    </template>
+  <KSelect label="Label" :items="selectItems">
+    <template #label-tooltip>Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code></template>
   </KSelect>
 </ClientOnly>
 
 ```html
-<KSelect dropdown-footer-text="I am replaceable" :items="items">
-  <template #dropdown-footer-text>
-    Come as you are
-  </template>
+<KSelect label="Label" :items="selectItems">
+  <template #label-tooltip>Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code></template>
 </KSelect>
 ```
 
 ## Events
 
-| Event          | returns                       |
-| :------------- | :---------------------------- |
-| `selected`     | `selectedItem` Object         |
-| `input`        | `selectedItem` Object or null |
-| `change`       | `selectedItem` Object or null |
-| `query-change` | `query` String                |
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-function getItems(count) {
-  let myItems = []
-    for (let i = 0; i < count; i++) {
-      myItems.push({
-        label: `Item ${i}`,
-        value: `item_${i}`,
-        description: `${i} - The item's description for number ${i}`
-      })
-    }
-  return myItems
-}
+### selected
 
-function debounce(func, timeout) {
-  let timer;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
-}
+Event payload is select item.
+
+### input and update:modelValue
+
+Event payload is selected item `value`.
+
+### change
+
+Event payload is select [item](#items).
+
+### query-change
+
+Event payload is query string.
+
+### item-added
+
+Event payload is added [item](#items).
+
+### item-removed
+
+Event payload is removed [item](#items).
 
-const allItems = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
-  description: `This is the description for item ${i}.`,
-  value: `autosuggest-item-${i}`,
-  ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
-}));
-
-export default defineComponent({
-  data() {
-    return {
-      myItems: getItems(5),
-      mySelect: '',
-      myVal: 'cats',
-      addedItems: [],
-      defaultItems: [{
-        label: 'Cats',
-        value: 'cats',
-        selected: true
-      }, {
-        label: 'Dogs',
-        value: 'dogs'
-      }, {
-        label: 'Bunnies',
-        value: 'bunnies'
-      }],
-      defaultItemsWithDisabledAndGroups: [{
-        label: 'Cats',
-        value: 'cats',
-        selected: true
-      }, {
-        label: 'Dogs',
-        value: 'dogs',
-        disabled: true
-      }, {
-        label: 'Bunnies',
-        value: 'bunnies'
-      }, {
-        label: 'Duck',
-        value: 'duck',
-        group: 'Birds'
-      },{
-        label: 'Salmon',
-        value: 'salmon',
-        group: 'Fish'
-      }, {
-        label: 'Oriole',
-        value: 'oriole',
-        group: 'Birds'
-      }, {
-        label: 'Trout',
-        value: 'trout',
-        group: 'Fish'
-      }],
-      defaultItemsUnselect: [{
-        label: 'Cats',
-        value: 'cats'
-      }, {
-        label: 'Dogs',
-        value: 'dogs'
-      }, {
-        label: 'Bunnies',
-        value: 'bunnies'
-      }],
-      items: [{
-        label: '25',
-        value: '25'
-      }, {
-        label: '50',
-        value: '50'
-      }],
-      defaultItemsForAutosuggest: [],
-      itemsForAutosuggest: [],
-      loading: false,
-      defaultItemsForDebouncedAutosuggest: [],
-      itemsForDebouncedAutosuggest: [],
-      loadingForDebounced: true,
-    }
-  },
-  methods: {
-    trackNewItems (item, added) {
-      if (added) {
-        this.addedItems.push(item)
-      } else {
-        this.addedItems = this.addedItems.filter(anItem => anItem.value !== item.value)
-      }
-    },
-    handleItemSelect (item) {
-      this.mySelect = item.label
-    },
-    clearIt () {
-      this.myVal = ''
-    },
-    customFilter ({items, query}) {
-      return items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()) || item.description.toLowerCase().includes(query.toLowerCase()))
-    },
-    deepClone(obj) {
-      return JSON.parse(JSON.stringify(obj))
-    },
-    onQueryChange (val) {
-      if (val === '' && !this.defaultItemsForAutosuggest.length) {
-        this.loading = true;
-        setTimeout(() => {
-          this.defaultItemsForAutosuggest = allItems;
-          this.itemsForAutosuggest = this.defaultItemsForAutosuggest.map(item => Object.assign({}, item));
-          this.loading = false;
-        }, 200);
-        return;
-      }
-      if (val === '') {
-        this.itemsForAutosuggest = this.defaultItemsForAutosuggest.map(item => Object.assign({}, item));
-        return;
-      }
-      this.loading = true;
-      setTimeout(() => {
-        this.itemsForAutosuggest =
-          allItems
-            .filter(item => item.label.toLowerCase().includes(val.toLowerCase()) || item.description.toLowerCase().includes(val.toLowerCase()))
-            .map(item => Object.assign({}, item));
-        this.loading = false;
-      }, 200);
-    },
-    onQueryChangeForDebounced (val) {
-      if (val === '' && !this.defaultItemsForDebouncedAutosuggest.length) {
-        this.loadingForDebounced = true;
-        setTimeout(() => {
-          this.defaultItemsForDebouncedAutosuggest = allItems;
-          this.itemsForDebouncedAutosuggest = this.defaultItemsForDebouncedAutosuggest.map(item => Object.assign({}, item));
-          this.loadingForDebounced = false;
-        }, 200);
-        return;
-      }
-      if (val === '') {
-        this.itemsForDebouncedAutosuggest = this.defaultItemsForDebouncedAutosuggest.map(item => Object.assign({}, item));
-        return;
-      }
-      this.debouncedHandler(val);
-    },
-    debouncedHandler: debounce(function (val) {
-      this.loadingForDebounced = true;
-      // mock API call for items that contain the keyword
-      setTimeout(() => {
-        this.itemsForDebouncedAutosuggest =
-          allItems
-            .filter(item => item.label.toLowerCase().includes(val.toLowerCase()) || item.description.toLowerCase().includes(val.toLowerCase()))
-            .map(item => Object.assign({}, item));
-        this.loadingForDebounced = false;
-      }, 200);
-    }, 400)
-  },
-  computed: {
-    defaultItemsLongList () {
-      let items = []
-      for (let i = 0; i < 30; i++) {
-        items.push({
-          label: `Item ${i}`,
-          value: i
-        })
-      }
-
-      return items
-    }
+<script setup lang="ts">
+import { ref } from 'vue'
+import { KongIcon } from '@kong/icons'
+
+const selectItems: SelectItem[] = [{
+  label: 'Service A',
+  value: 'a',
+  selected: true,
+}, {
+  label: 'Service B',
+  value: 'b',
+}, {
+  label: 'Service F',
+  value: 'f',
+  disabled: true,
+}, {
+  label: 'Service A1',
+  value: 'a1',
+  group: 'Series 1',
+}, {
+  label: 'Service B1',
+  value: 'b1',
+  group: 'Series 1',
+}, {
+  label: 'Service A2',
+  value: 'a2',
+  group: 'Series 2',
+}, {
+  label: 'Service B2',
+  value: 'b2',
+  group: 'Series 2',
+}]
+
+const selectItemsUnselected: SelectItem[] = JSON.parse(JSON.stringify(selectItems)).map((item: SelectItem) => ({ ...item, selected: false }))
+const selectItemsUnselectedEnv: SelectItem[] =  JSON.parse(JSON.stringify(selectItemsUnselected)).map((item: SelectItem) => ({ ...item, selected: false, ...(item.value === 'b' && { env: 'dev' }), ...(item.value === 'a2' && { env: 'prod' }), ...(item.value === 'b2' && { env: 'prod' }) }))
+
+const envFilter = (params: SelectFilterFunctionParams) => params?.items?.filter((item: SelectItem) => item.label?.toLowerCase().includes(params.query?.toLowerCase()) || item.env?.includes(params.query?.toLowerCase()))
+
+const asyncItemsModel = ref<string>('')
+const asyncItemsQuery = ref<string>('')
+const asyncItemsLoading = ref<boolean>(false)
+const asyncItems = ref<SelectItem[]>(JSON.parse(JSON.stringify(selectItemsUnselected)))
+const asyncItemsInitial: SelectItem[] = JSON.parse(JSON.stringify(selectItemsUnselected))
+
+const onAsyncQueryChange = (query: string): void => {
+  if (asyncItemsQuery.value !== query) {
+    asyncItemsQuery.value = query
+
+    fetchAsyncItems()
   }
-})
-</script>
+}
+
+const fetchAsyncItems = (): void => {
+  asyncItemsLoading.value = true
 
-<style lang="scss">
-.json {
-  inset: 0 !important;
+  setTimeout(() => {
+    const items = JSON.parse(JSON.stringify(asyncItemsInitial))
+    asyncItems.value = items.filter((item: SelectItem) => item.label?.toLowerCase().includes(asyncItemsQuery.value?.toLowerCase()))
+
+    asyncItemsLoading.value = false
+  }, 2000)
 }
 
-.item-template-container {
-  width: 100%;
-  display: inline-flex;
+const vModel = ref<string>('f')
+</script>
+
+<style lang="scss" scoped>
+.spacing-container {
+  display: flex;
+  flex-direction: column;
   gap: $kui-space-40;
 }
 
-.select-item-label {
-  line-height: initial;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.custom-item {
+  display: flex;
+  flex-direction: row;
+  gap: $kui-space-30;
+
+  &-title-container {
+    flex: 1;
+  }
+
+  &-title {
+    display: block;
+  }
+
+  &-description {
+    color: $kui-color-text-neutral;
+    display: block;
+    font-size: $kui-font-size-20;
+  }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index a46aabed78..dc80dba895 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -316,6 +316,7 @@ This component has been removed. Please refer to KBadge component which has been
 
 ### KPagination
 
+KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/components/select) as the underlying component for page size selection.
 
 ### KPopover
 
@@ -365,6 +366,37 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KSelect
 
+#### Props
+
+* `appearance` prop has been removed. KSelect comes in one appearance (what previously was `select` appearance). If you need an element that behaves like a select but looks like a button, check out KDropdown's [selectionMenu prop](/components/dropdown#selectionmenu)
+* `buttonText` prop has been removed
+* `testMode` prop has been removed
+* `overlayLabel` prop has been removed
+* `filterFunc` prop has been renamed to `filterFunction`
+* `autosuggest` prop has been removed and replaced with `enableFiltering` prop. Should you want to simply enable default component-handled filtering or perform async fetching behind the scenes, you can use this prop in combination with`@query-change` event to achieve that
+
+#### Events
+
+* `item:added` event has been changed to `item-added`
+* `item:removed` event has been changed to `item-removed`
+  
+#### Structure
+
+* `k-select-input` `data-testid` attribute has been changed to `select-input`
+* dynamic `k-select-item-*` `data-testid` attribute has been changed to `select-item-*`
+* `k-select-dropdown-footer-text` class has been changed to `dropdown-footer`
+* `k-select-item-label` class has been changed to `select-item-label`
+* `k-select-item` class has been changed to `select-item`
+* `k-select-loading` class has been changed to `select-loading`
+* `k-select-loading` `data-testid` attribute has been changed to `select-loading`
+* `k-select-group-title` class has been changed to `select-group-title`
+* `k-select-selected-item` `data-testid` attribute has been changed to `selected-item`
+
+#### Constants, Types & Interfaces
+
+* `SelectAppearanceArray` const has been removed
+* `SelectAppearance` type has been removed
+* `SelectFilterFnParams` interface has been renamed to `SelectFilterFunctionParams`
 
 ### KSkeleton
 
diff --git a/sandbox/index.ts b/sandbox/index.ts
index 3f59b7a134..80fee899f8 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -27,7 +27,9 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KInputSwitch', to: { name: 'inputswitch' } },
   { name: 'KLabel', to: { name: 'label' } },
   { name: 'KMultiselect', to: { name: 'multiselect' } },
+  { name: 'KPagination', to: { name: 'pagination' } },
   { name: 'KRadio', to: { name: 'radio' } },
+  { name: 'KSelect', to: { name: 'select' } },
   { name: 'KTable', to: { name: 'table' } },
   { name: 'KTabs', to: { name: 'tabs' } },
   { name: 'KTextarea', to: { name: 'textarea' } },
diff --git a/sandbox/pages/SandboxPagination.vue b/sandbox/pages/SandboxPagination.vue
new file mode 100644
index 0000000000..97aa542238
--- /dev/null
+++ b/sandbox/pages/SandboxPagination.vue
@@ -0,0 +1,54 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KPagination"
+  >
+    <div class="kpagination-sandbox">
+      <!-- Figma -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Figma"
+      />
+      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12478&mode=dev">
+        Figma
+      </KExternalLink>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="totalCount">
+        <KPagination
+          :total-count="50"
+          @page-size-changed="handlePageSizeChange"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="pageSizes">
+        <KPagination
+          :page-sizes="[10, 20, 30, 40]"
+          :total-count="100"
+          @page-size-changed="handlePageSizeChange"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="initialPageSize">
+        <KPagination
+          :initial-page-size="20"
+          :page-sizes="[10, 20, 30, 40]"
+          :total-count="100"
+          @page-size-changed="handlePageSizeChange"
+        />
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+
+const handlePageSizeChange = (obj: any) => {
+  console.log(obj)
+}
+</script>
diff --git a/sandbox/pages/SandboxSelect.vue b/sandbox/pages/SandboxSelect.vue
new file mode 100644
index 0000000000..6df8e57da8
--- /dev/null
+++ b/sandbox/pages/SandboxSelect.vue
@@ -0,0 +1,434 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KSelect"
+  >
+    <div class="kselect-sandbox">
+      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=283%3A2898&mode=dev">
+        Figma
+      </KExternalLink>
+
+      <!-- Examples -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Examples"
+      />
+      <SandboxSectionComponent title="async items">
+        <KSelect
+          v-model="asyncItemsModel"
+          clearable
+          enable-filtering
+          enable-item-creation
+          :items="asyncItems"
+          :loading="asyncItemsLoading"
+          @item-added="handeAsyncItemAdded"
+          @item-removed="handeAsyncItemRemoved"
+          @query-change="asyncQueryChange"
+        >
+          <template #loading>
+            Loading...
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent
+        title="items"
+      >
+        <KSelect :items="selectItems" />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="label"
+      >
+        <KSelect
+          :items="selectItems"
+          label="Label"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="labelAttributes"
+      >
+        <KSelect
+          :items="selectItems"
+          label="Label"
+          :label-attributes="{ info: 'I use KLabels `info` prop.' }"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="clearable"
+      >
+        <KSelect
+          clearable
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="help"
+      >
+        <KSelect
+          help="Help text."
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="error"
+      >
+        <KSelect
+          error
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="width"
+      >
+        <KSelect
+          :items="selectItems"
+          width="700"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="dropdownMaxHeight"
+      >
+        <KSelect
+          dropdown-max-height="100"
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="dropdownFooterText"
+      >
+        <KSelect
+          dropdown-footer-text="Keep scrolling to reach the bottom."
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="dropdownFooterTextPosition"
+      >
+        <KSelect
+          dropdown-footer-text="You've reached the bottom."
+          dropdown-footer-text-position="static"
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="enableFiltering"
+      >
+        <KSelect
+          enable-filtering
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="reuseItemTemplate"
+      >
+        <KSelect
+          :items="selectItems"
+          reuse-item-template
+        >
+          <template #item-template="{ item }">
+            <KongIcon />
+            {{ item?.label }}!
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="enableItemCreation"
+      >
+        <KSelect
+          enable-filtering
+          enable-item-creation
+          :items="selectItems"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="required"
+      >
+        <KSelect
+          :items="selectItems"
+          label="Label"
+          required
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="disabled"
+      >
+        <KSelect
+          disabled
+          :items="selectItems"
+          label="Disabled"
+        />
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent
+        title="labelTooltip"
+      >
+        <KSelect
+          :items="selectItems"
+          label="Label"
+        >
+          <template #label-tooltip>
+            Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="itemTemplate"
+      >
+        <KSelect
+          :items="selectItems"
+        >
+          <template #item-template="{ item }">
+            <div class="custom-item">
+              <KongIcon />
+              <div class="custom-item-title-container">
+                <span class="custom-item-title">{{ item?.label }} {{ item.value === 'dogs' ? '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.' : '' }}</span>
+                <span class="custom-item-description">Some random description.</span>
+              </div>
+            </div>
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="selectedItemTemplate"
+      >
+        <KSelect
+          :items="selectItems"
+        >
+          <template #selected-item-template="{ item }">
+            <KongIcon />
+            {{ item?.label }}
+          </template>
+        </KSelect>
+        <p>Truncation of long content is NOT handled by the component.</p>
+        <KSelect
+          clearable
+          :items="selectItems"
+          width="300"
+        >
+          <template #selected-item-template="{ item }">
+            <KongIcon />
+            <span class="long-item-title">{{ item?.label }} with very long names tend to be more than one line. In this case the text should hopefully get truncated.</span>
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="dropdownFooterText"
+      >
+        <KSelect
+          dropdown-footer-text="Keep scrolling to reach the bottom."
+          :items="selectItems"
+        >
+          <template #dropdown-footer-text>
+            I am slotted.
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
+
+      <!-- Events -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Events"
+      />
+      <SandboxSectionComponent>
+        <div class="horizontal-spacing">
+          <KSelect
+            v-model="vModel"
+            :items="selectItems"
+            label="v-model"
+          />
+          <KButton
+            size="large"
+            @click="vModel = 'dogs'"
+          >
+            Select dogs
+          </KButton>
+        </div>
+        <KSelect
+          :items="selectItems"
+          label="@selected"
+          @selected="onSelected"
+        />
+        <KSelect
+          :items="selectItems"
+          label="@input"
+          @input="onInput"
+        />
+        <KSelect
+          :items="selectItems"
+          label="@change"
+          @change="onChange"
+        />
+        <KSelect
+          enable-filtering
+          :items="selectItems"
+          label="@query-change"
+          @query-change="onQueryChange"
+        />
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, ref } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KongIcon } from '@kong/icons'
+import type { SelectItem } from '@/types'
+
+const selectItems: SelectItem[] = [{
+  label: 'Cats',
+  value: 'cats',
+  selected: true,
+}, {
+  label: 'Dogs',
+  value: 'dogs',
+}, {
+  label: 'Bunnies',
+  value: 'bunnies',
+  disabled: true,
+}, {
+  label: 'Duck',
+  value: 'duck',
+  group: 'Birds',
+}, {
+  label: 'Oriole',
+  value: 'oriole',
+  group: 'Birds',
+}, {
+  label: 'Trout',
+  value: 'trout',
+  group: 'Fish',
+}, {
+  label: 'Salmon',
+  value: 'salmon',
+  group: 'Fish',
+}]
+
+const vModel = ref<string>('cats')
+
+const onSelected = (item: SelectItem): void => {
+  console.log('@selected', '\n', item)
+}
+
+const onInput = (value: string | number | null): void => {
+  console.log('@input', '\n', value)
+}
+
+const onChange = (item: SelectItem | null): void => {
+  console.log('@change', '\n', item)
+}
+
+const onQueryChange = (query: string): void => {
+  console.log('@query-change', '\n', query)
+}
+
+const selectItemsInitial = ref<SelectItem[]>([{
+  label: 'Cats',
+  value: 'cats',
+}, {
+  label: 'Dogs',
+  value: 'dogs',
+}, {
+  label: 'Bunnies',
+  value: 'bunnies',
+  disabled: true,
+}, {
+  label: 'Duck',
+  value: 'duck',
+  group: 'Birds',
+}, {
+  label: 'Oriole',
+  value: 'oriole',
+  group: 'Birds',
+}, {
+  label: 'Trout',
+  value: 'trout',
+  group: 'Fish',
+}, {
+  label: 'Salmon',
+  value: 'salmon',
+  group: 'Fish',
+}])
+const asyncItemsQuery = ref<string>('')
+const asyncItemsLoading = ref<boolean>(false)
+const asyncItemsModel = ref<string>('')
+const asyncItems = ref<SelectItem[]>([])
+
+const setAsyncItems = (): void => {
+  asyncItemsLoading.value = true
+
+  setTimeout(() => {
+    const aItems = JSON.parse(JSON.stringify(selectItemsInitial.value))
+    asyncItems.value = asyncItemsQuery.value ? aItems.filter((item: SelectItem) => item.label?.toLowerCase().includes(asyncItemsQuery.value?.toLowerCase())) : aItems
+
+    asyncItemsLoading.value = false
+  }, 2000)
+}
+
+const asyncQueryChange = (query: string): void => {
+  if (asyncItemsQuery.value !== query) {
+    asyncItemsQuery.value = query
+    setAsyncItems()
+  }
+}
+
+const handeAsyncItemAdded = (item: SelectItem): void => {
+  selectItemsInitial.value.push(item)
+}
+
+const handeAsyncItemRemoved = (item: SelectItem): void => {
+  selectItemsInitial.value = selectItemsInitial.value.filter(i => i.value !== item.value)
+}
+
+onMounted(() => {
+  setAsyncItems()
+})
+</script>
+
+<style lang="scss" scoped>
+.kselect-sandbox {
+  .horizontal-spacing {
+    align-items: flex-end;
+    display: flex;
+    gap: $kui-space-50;
+  }
+
+  .long-item-title {
+    max-width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .custom-item {
+    display: flex;
+    flex-direction: row;
+    gap: $kui-space-30;
+
+    &-title-container {
+      flex: 1;
+    }
+
+    &-title {
+      display: block;
+    }
+
+    &-description {
+      color: $kui-color-text-neutral;
+      display: block;
+      font-size: $kui-font-size-20;
+    }
+  }
+}
+</style>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 26646126b8..2cbb5e7740 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -74,12 +74,24 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Multiselect Sandbox' },
     component: () => import('../pages/SandboxMultiselect.vue'),
   },
+  {
+    path: '/pagination',
+    name: 'pagination',
+    meta: { title: 'Pagination Sandbox' },
+    component: () => import('../pages/SandboxPagination.vue'),
+  },
   {
     path: '/radio',
     name: 'radio',
     meta: { title: 'Radio Sandbox' },
     component: () => import('../pages/SandboxRadio.vue'),
   },
+  {
+    path: '/select',
+    name: 'select',
+    meta: { title: 'Select Sandbox' },
+    component: () => import('../pages/SandboxSelect.vue'),
+  },
   {
     path: '/table',
     name: 'table',
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index 1d91c7f62f..311fe161e5 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -26,6 +26,7 @@
     >
       <div
         v-if="$slots.before"
+        ref="beforeSlotElement"
         class="before-content-wrapper"
       >
         <slot name="before" />
@@ -42,6 +43,7 @@
 
       <div
         v-if="$slots.after"
+        ref="afterSlotElement"
         class="after-content-wrapper"
       >
         <slot name="after" />
@@ -64,12 +66,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, useSlots, useAttrs } from 'vue'
+import { computed, ref, watch, useSlots, useAttrs, onMounted } from 'vue'
 import type { PropType } from 'vue'
 import type { LabelAttributes, LimitExceededData } from '@/types'
 import { v4 as uuidv4 } from 'uuid'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
+import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 
 const props = defineProps({
   modelValue: {
@@ -260,6 +263,21 @@ watch(() => props.error, (newVal, oldVal) => {
     helpTextKey.value += 1
   }
 })
+
+const beforeSlotElement = ref<HTMLElement | null>(null)
+const afterSlotElement = ref<HTMLElement | null>(null)
+const beforeSlotElementWidth = ref<string>(KUI_ICON_SIZE_40) // default to slot icon size
+const afterSlotElementWidth = ref<string>(KUI_ICON_SIZE_40) // default to slot icon size
+
+onMounted(() => {
+  if (beforeSlotElement.value) {
+    beforeSlotElementWidth.value = beforeSlotElement.value.offsetWidth + 'px'
+  }
+
+  if (afterSlotElement.value) {
+    afterSlotElementWidth.value = afterSlotElement.value.offsetWidth + 'px'
+  }
+})
 </script>
 
 <script lang="ts">
@@ -273,7 +291,8 @@ export default {
 // Only add variables here sparingly for ease of use when the same value needs to be referenced for display logic.
 
 $kInputPaddingX: var(--kui-space-50, $kui-space-50); // corresponds to mixin, search for variable name in mixins
-$kInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40);
+$kInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40); // $kSelectInputIconSize
+$kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpacing
 
 /* Component styles */
 
@@ -315,6 +334,8 @@ $kInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40);
 
     .before-content-wrapper, .after-content-wrapper {
       color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+      display: inline-flex;
+      gap: var(--kui-space-10, $kui-space-10);
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -327,14 +348,16 @@ $kInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40);
 
       :deep([role="button"]) {
         &:not([disabled]) {
+          border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
           cursor: pointer;
+          outline: none;
 
-          &:focus, &:active {
-            outline: none;
+          &:hover, &:focus, &:focus-visible {
+            color: var(--kui-color-text, $kui-color-text) !important;
           }
 
-          &:hover, &:focus {
-            color: var(--kui-color-text, $kui-color-text) !important;
+          &:focus-visible {
+            box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
           }
         }
 
@@ -358,16 +381,16 @@ $kInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40);
     &.has-before-content {
       .k-input {
         // if there is a before slot, add padding to the left of the input
-        // standard padding + icon size + space between icon and input
-        padding-left: calc($kInputPaddingX + $kInputIconSize + var(--kui-space-40, $kui-space-40));
+        // standard padding + slot with + space between icon and input
+        padding-left: calc($kInputPaddingX + v-bind('beforeSlotElementWidth') + $kInputSlotSpacing);
       }
     }
 
     &.has-after-content {
       .k-input {
         // if there is a after slot, add padding to the right of the input
-        // standard padding + icon size + space between icon and input
-        padding-right: calc($kInputPaddingX + $kInputIconSize + var(--kui-space-40, $kui-space-40));
+        // standard padding + slot with + space between icon and input
+        padding-right: calc($kInputPaddingX + v-bind('afterSlotElementWidth') + $kInputSlotSpacing);
       }
     }
   }
diff --git a/src/components/KPagination/KPagination.cy.ts b/src/components/KPagination/KPagination.cy.ts
index 774bf8153a..f1a276d78d 100644
--- a/src/components/KPagination/KPagination.cy.ts
+++ b/src/components/KPagination/KPagination.cy.ts
@@ -22,7 +22,7 @@ describe('KPagination', () => {
     cy.get('.pagination-button.active a').should('contain.text', currPage + '')
 
     for (let i = 0; i < pageSizes.length; i++) {
-      cy.getTestId(`k-select-item-${pageSizes[i]}`).should('exist')
+      cy.get(`[data-testid="dropdown-item-trigger"][value="${pageSizes[i]}"]`).should('exist')
     }
   })
 
@@ -71,9 +71,9 @@ describe('KPagination', () => {
       },
     })
 
-    cy.getTestId('k-select-input').find('.k-button').should('contain.text', '2 items per page')
-    cy.getTestId('k-select-input').find('button').click({ multiple: true, force: true })
-    cy.getTestId('k-select-item-4').find('button').click({ multiple: true, force: true })
-    cy.getTestId('k-select-input').find('.k-button').should('contain.text', '4 items per page')
+    cy.getTestId('page-size-dropdown-trigger').should('contain.text', '2 items per page')
+    cy.getTestId('page-size-dropdown-trigger').click({ multiple: true, force: true })
+    cy.get('[data-testid="dropdown-item-trigger"][value="4"]').click({ multiple: true, force: true })
+    cy.getTestId('page-size-dropdown-trigger').should('contain.text', '4 items per page')
   })
 })
diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
index 0ffb5e2ec9..5d8b00b94e 100644
--- a/src/components/KPagination/KPagination.vue
+++ b/src/components/KPagination/KPagination.vue
@@ -112,19 +112,24 @@
       />
       <div
         class="page-size-select"
-        data-testid="page-size-dropdown"
       >
-        <KSelect
-          appearance="button"
-          :button-text="pageSizeText"
+        <KDropdown
+          class="page-size-dropdown"
+          data-testid="page-size-dropdown"
           :items="pageSizeOptions"
           :kpop-attributes="kpopAttrs"
-          :placeholder="`${ currentPageSize } items per page`"
-          position-fixed
-          :test-mode="!!testMode || undefined"
-          width="190"
-          @selected="updatePageSize"
-        />
+          selection-menu
+          show-caret
+          @change="updatePageSize"
+        >
+          <KButton
+            appearance="tertiary"
+            data-testid="page-size-dropdown-trigger"
+          >
+            {{ pageSizeText }}
+            <ChevronDownIcon />
+          </KButton>
+        </KDropdown>
       </div>
     </div>
   </nav>
@@ -134,10 +139,12 @@
 import type { Ref, PropType } from 'vue'
 import { ref, computed, watch } from 'vue'
 import KIcon from '@/components/KIcon/KIcon.vue'
-import KSelect from '@/components/KSelect/KSelect.vue'
+import KDropdown from '@/components/KDropdown/KDropdown.vue'
+import KButton from '@/components/KButton/KButton.vue'
 import PaginationOffset from './PaginationOffset.vue'
-import type { PaginationType, PageSizeChangedData, PageChangedData } from '@/types'
+import type { PaginationType, PageSizeChangedData, PageChangedData, DropdownItem } from '@/types'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { ChevronDownIcon } from '@kong/icons'
 
 const kpopAttrs = {
   placement: 'top',
@@ -214,7 +221,7 @@ const pageSizeOptions = props.pageSizes.map((size, i) => ({
   key: `size-${i}`,
   value: size,
 }))
-const pageSizeText = ref('')
+const pageSizeText = computed((): string => currentPageSize.value + ' items per page')
 
 const getVisiblePages = (currPage: number, pageCount: number, firstDetached: boolean, lastDetached: boolean): number[] => {
   if (props.disablePageJump) {
@@ -309,13 +316,14 @@ const updatePage = (): void => {
   })
 }
 
-const updatePageSize = (event: any): void => {
-  currentPageSize.value = event.value
-  pageSizeText.value = currentPageSize.value + ' items per page'
+const updatePageSize = (item: DropdownItem): void => {
+  currentPageSize.value = item.value as number
+
   emit('pageSizeChanged', {
     pageSize: currentPageSize.value,
     pageCount: pageCount.value,
   })
+
   if (props.currentPage !== 1) {
     changePage(1)
   }
@@ -372,12 +380,11 @@ watch(pageCount, (newVal, oldVal) => {
 }
 
 .page-size-select {
-  color: var(--kui-color-text-primary, #{$kui-color-text-primary});
-  font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-  line-height: var(--kui-line-height-30, $kui-line-height-30);
-
-  :deep(.k-button) {
-    font-size: var(--kui-font-size-30, $kui-font-size-30);
+  .page-size-dropdown {
+    :deep(.k-popover-content) {
+      max-height: 200px;
+      overflow-y: auto;
+    }
   }
 }
 
diff --git a/src/components/KSelect/KSelect.cy.ts b/src/components/KSelect/KSelect.cy.ts
index bc3a232ec9..199e7918ba 100644
--- a/src/components/KSelect/KSelect.cy.ts
+++ b/src/components/KSelect/KSelect.cy.ts
@@ -2,15 +2,6 @@ import { mount } from 'cypress/vue'
 import { h } from 'vue'
 import KSelect from '@/components/KSelect/KSelect.vue'
 
-/**
- * ALL TESTS MUST USE testMode: true
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: true
- * }
- */
-
 describe('KSelect', () => {
   it('renders props when passed', () => {
     const labels = ['Label 1', 'Label 2', 'Label 3']
@@ -18,7 +9,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -32,13 +22,13 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId('k-select-input').trigger('click')
+    cy.getTestId('select-input').trigger('click')
 
-    cy.getTestId(`k-select-item-${vals[0]}`).should('contain.text', labels[0])
-    cy.getTestId(`k-select-item-${vals[1]}`).should('contain.text', labels[1])
-    cy.getTestId(`k-select-item-${vals[2]}`).should('contain.text', labels[2])
-    cy.get('.k-select-pop-dropdown').should('be.visible')
-    cy.get('.k-select-dropdown-footer-text').should('not.exist')
+    cy.get('.select-popover').should('be.visible')
+    cy.getTestId(`select-item-${vals[0]}`).should('contain.text', labels[0])
+    cy.getTestId(`select-item-${vals[1]}`).should('contain.text', labels[1])
+    cy.getTestId(`select-item-${vals[2]}`).should('contain.text', labels[2])
+    cy.get('.dropdown-footer').should('not.exist')
   })
 
   it('renders with selected item', () => {
@@ -46,23 +36,21 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{ label: selectedLabel, value: 'label1', selected: true }],
       },
     })
 
-    cy.get('.k-select-selected-item-label').should('contain.text', selectedLabel)
+    cy.getTestId('select-input').should('have.value', selectedLabel)
   })
 
   it('renders with disabled item', () => {
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{ label: 'Label 1', value: 'label1', disabled: true }],
       },
     })
 
-    cy.get('.k-select-item button').should('have.attr', 'disabled')
+    cy.get('.select-item button').should('have.attr', 'disabled')
   })
 
   it('renders with correct px width', () => {
@@ -70,7 +58,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         width: width + '',
         items: [{
           label: 'Label 1',
@@ -88,7 +75,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         label: labelText,
         items: [{
           label: 'Label 1',
@@ -104,7 +90,6 @@ describe('KSelect', () => {
     const labelText = 'A Label'
     mount(KSelect, {
       props: {
-        testMode: true,
         label: labelText,
         labelAttributes: {
           info: 'some info text',
@@ -120,38 +105,15 @@ describe('KSelect', () => {
     cy.get('.k-label .tooltip-trigger-icon').should('be.visible')
   })
 
-  it.skip('renders label with required symbol when `required` attribute is set', () => {
-    // TODO: implement when KLabel component is reskinned
-  })
-
-  it('renders with correct appearance - select', () => {
-    mount(KSelect, {
-      props: {
-        testMode: true,
-        appearance: 'select',
-        items: [{
-          label: 'Label 1',
-          value: 'label1',
-        }],
-      },
-    })
-
-    cy.get('.k-select-pop-select').should('exist')
-  })
-
-  it('renders with correct appearance - button', () => {
+  it('handles the `required` state correctly', () => {
     mount(KSelect, {
       props: {
-        testMode: true,
-        appearance: 'button',
-        items: [{
-          label: 'Label 1',
-          value: 'label1',
-        }],
+        label: 'A Label',
+        required: true,
       },
     })
 
-    cy.get('.k-select-button').should('exist')
+    cy.get('.k-label').should('have.class', 'required')
   })
 
   it('reacts to text change and select', () => {
@@ -160,7 +122,7 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
+        enableFiltering: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -171,18 +133,18 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId('k-select-input').click()
+    cy.getTestId('select-input').click()
 
-    cy.getTestId(`k-select-item-${vals[0]}`).should('contain.text', labels[0])
-    cy.getTestId(`k-select-item-${vals[1]}`).should('contain.text', labels[1])
+    cy.getTestId(`select-item-${vals[0]}`).should('contain.text', labels[0])
+    cy.getTestId(`select-item-${vals[1]}`).should('contain.text', labels[1])
 
     cy.get('input').type(labels[0])
 
-    cy.getTestId(`k-select-item-${vals[0]}`).should('contain.text', labels[0])
-    cy.getTestId(`k-select-item-${vals[1]}`).should('not.exist')
+    cy.getTestId(`select-item-${vals[0]}`).should('contain.text', labels[0])
+    cy.getTestId(`select-item-${vals[1]}`).should('not.exist')
 
-    cy.getTestId(`k-select-item-${vals[0]}`).eq(0).click({ force: true })
-    cy.get('.k-select-selected-item-label').should('contain.text', labels[0])
+    cy.getTestId(`select-item-${vals[0]}`).eq(0).click({ force: true })
+    cy.getTestId('select-input').should('have.value', labels[0])
   })
 
   it('ignores clicks on disabled item', () => {
@@ -191,7 +153,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -203,21 +164,19 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId('k-select-input').click()
+    cy.getTestId('select-input').click()
 
-    cy.getTestId(`k-select-item-${vals[0]}`).click({ force: true })
-    cy.get('.k-select-selected-item-label').should('not.exist')
+    cy.getTestId(`select-item-${vals[0]}`).click({ force: true })
+    cy.getTestId('select-input').should('not.have.value')
   })
 
   it('allows slotting content into the items', async () => {
-    const itemSlotContent = 'I am slotted baby!'
+    const itemSlotContent = 'I am slotted!'
     const itemLabel = 'Label 1'
     const itemValue = 'label1'
 
     mount(KSelect, {
       props: {
-        testMode: true,
-        appearance: 'button',
         items: [{
           label: itemLabel,
           value: itemValue,
@@ -228,18 +187,16 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId(`k-select-item-${itemValue}`).should('contain.text', itemSlotContent)
+    cy.getTestId(`select-item-${itemValue}`).should('contain.text', itemSlotContent)
   })
 
   it('reuses item template slot for selected item element when prop is true', async () => {
-    const itemSlotContent = 'I am slotted baby!'
+    const itemSlotContent = 'I am slotted!'
     const itemLabel = 'Label 1'
     const itemValue = 'label1'
 
     mount(KSelect, {
       props: {
-        testMode: true,
-        appearance: 'select',
         items: [{
           label: itemLabel,
           value: itemValue,
@@ -248,22 +205,20 @@ describe('KSelect', () => {
         reuseItemTemplate: true,
       },
       slots: {
-        'item-template': h('span', {}, itemSlotContent),
+        'item-template': `<span data-testid="item-slot-content">${itemSlotContent}</span>`,
       },
     })
 
-    cy.get('.k-select-input').should('contain.text', itemSlotContent)
+    cy.getTestId('item-slot-content').should('be.visible').should('contain.text', itemSlotContent)
   })
 
-  it('works in autosuggest mode', () => {
+  it('handles all states correctly when `enableFiltering` is `true`', () => {
     const onQueryChange = cy.spy().as('onQueryChange')
     mount(KSelect, {
       props: {
-        testMode: true,
-        autosuggest: true,
+        enableFiltering: true,
         loading: false,
         items: [],
-        appearance: 'select',
         onQueryChange,
       },
     })
@@ -272,17 +227,17 @@ describe('KSelect', () => {
       cy.get('@onQueryChange').should('have.been.calledWith', '')
       cy.get('@onQueryChange').should('have.been.calledWith', 'a')
     }).then(() => {
-      cy.wrap(Cypress.vueWrapper.setProps({ loading: true })).getTestId('k-select-loading').should('exist')
+      cy.wrap(Cypress.vueWrapper.setProps({ loading: true })).getTestId('select-loading').should('exist')
     }).then(() => {
-      cy.wrap(Cypress.vueWrapper.setProps({ loading: false })).getTestId('k-select-loading').should('not.exist')
+      cy.wrap(Cypress.vueWrapper.setProps({ loading: false })).getTestId('select-loading').should('not.exist')
     }).then(() => {
-      cy.wrap(Cypress.vueWrapper.setProps({ items: [{ label: 'Label 1', value: 'label1' }] })).getTestId('k-select-item-label1').should('contain.text', 'Label 1')
+      cy.wrap(Cypress.vueWrapper.setProps({ items: [{ label: 'Label 1', value: 'label1' }] })).getTestId('select-item-label1').should('contain.text', 'Label 1')
     }).then(() => {
-      cy.getTestId('k-select-item-label1').trigger('click')
+      cy.getTestId('select-item-label1').trigger('click')
       cy.get('input').should('have.value', 'Label 1')
-      cy.getTestId('k-select-input').trigger('click')
-      cy.get('[data-testid="k-select-item-label1"] button').should('have.class', 'selected')
-      cy.get('@onQueryChange').should('have.been.calledTwice')
+      cy.getTestId('select-input').trigger('click')
+      cy.get('[data-testid="select-item-label1"] button').should('have.class', 'selected')
+      cy.get('@onQueryChange').should('have.been.calledWith', '')
     })
   })
 
@@ -292,7 +247,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -301,13 +255,12 @@ describe('KSelect', () => {
           label: labels[1],
           value: vals[1],
         }],
-        appearance: 'select',
         clearable: true,
       },
     })
 
     cy.get('input').should('have.value', labels[0])
-    cy.get('.k-select-input .clear-selection-icon').trigger('click')
+    cy.getTestId('clear-selection-icon').trigger('click')
     cy.get('input').should('have.value', '')
   })
 
@@ -318,7 +271,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -333,9 +285,9 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId('k-select-input').trigger('click')
+    cy.getTestId('select-input').trigger('click')
 
-    cy.get('.k-select-dropdown-footer-text').should('be.visible').should('contain.text', dropdownFooterText)
+    cy.get('.dropdown-footer').should('be.visible').should('contain.text', dropdownFooterText)
   })
 
   it('should allow slotting dropdown footer text', () => {
@@ -345,7 +297,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -363,9 +314,9 @@ describe('KSelect', () => {
       },
     })
 
-    cy.getTestId('k-select-input').trigger('click')
+    cy.getTestId('select-input').trigger('click')
 
-    cy.get('.k-select-dropdown-footer-text').should('be.visible').should('contain.text', dropdownFooterText)
+    cy.get('.dropdown-footer').should('be.visible').should('contain.text', dropdownFooterText)
   })
 
   it('renders group titles and groups items in correct order', () => {
@@ -381,29 +332,27 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items,
       },
     })
 
-    cy.getTestId('k-select-input').trigger('click')
-    cy.get('.k-select-item').eq(0).should('contain.text', items[0].label)
-    cy.get('.k-select-group-title').eq(0).should('contain.text', group1Title)
-    cy.get('.k-select-group-title').eq(1).should('contain.text', group2Title)
-    cy.get('.k-select-item').eq(1).should('contain.text', items[1].label)
-    cy.get('.k-select-item').eq(2).should('contain.text', items[3].label)
-    cy.get('.k-select-item').eq(3).should('contain.text', items[2].label)
-    cy.get('.k-select-item').eq(4).should('contain.text', items[4].label)
+    cy.getTestId('select-input').trigger('click')
+    cy.get('.select-item').eq(0).should('contain.text', items[0].label)
+    cy.get('.select-group-title').eq(0).should('contain.text', group1Title)
+    cy.get('.select-group-title').eq(1).should('contain.text', group2Title)
+    cy.get('.select-item').eq(1).should('contain.text', items[1].label)
+    cy.get('.select-item').eq(2).should('contain.text', items[3].label)
+    cy.get('.select-item').eq(3).should('contain.text', items[2].label)
+    cy.get('.select-item').eq(4).should('contain.text', items[4].label)
   })
 
   it('allows slotting selected item content', async () => {
-    const selectedItemContent = 'I am slotted baby!'
+    const selectedItemContent = 'I am slotted!'
     const itemLabel = 'Label 1'
     const itemValue = 'label1'
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: itemLabel,
           value: itemValue,
@@ -411,42 +360,37 @@ describe('KSelect', () => {
         }],
       },
       slots: {
-        'selected-item-template': selectedItemContent,
+        'selected-item-template': `<span data-testid="selected-item-slot-content">${selectedItemContent}</span>`,
       },
     })
 
-    cy.get('.k-select-item-selection').should('contain.text', selectedItemContent)
+    cy.getTestId('selected-item-slot-content').should('be.visible').should('contain.text', selectedItemContent)
   })
 
   it('displays placeholder correctly when selected item slot is present', async () => {
-    const selectedItemContent = 'I am slotted baby!'
+    const selectedItemContent = 'I am slotted!'
     const placeholderText = 'Placeholder text'
     const itemLabel = 'Label 1'
     const itemValue = 'label1'
-    const itemSlotContent = 'I am overwritten by selected-item slot'
 
     mount(KSelect, {
       props: {
-        testMode: true,
         placeholder: placeholderText,
-        appearance: 'select',
-        autosuggest: true,
+        enableFiltering: true,
         items: [{
           label: itemLabel,
           value: itemValue,
           selected: true,
         }],
-        reuseItemTemplate: true,
       },
       slots: {
-        'selected-item-template': selectedItemContent,
-        'item-template': itemSlotContent,
+        'selected-item-template': `<span data-testid="selected-item-slot-content">${selectedItemContent}</span>`,
       },
     })
 
-    cy.get('.k-select-input').should('contain.text', selectedItemContent)
-    cy.getTestId('k-select-input').trigger('click')
-    cy.get('.custom-selected-item').should('not.exist')
+    cy.getTestId('selected-item-slot-content').should('be.visible').should('contain.text', selectedItemContent)
+    cy.getTestId('select-input').trigger('click')
+    cy.getTestId('selected-item-slot-content').should('not.exist')
     cy.get('input').invoke('attr', 'placeholder').should('contain', placeholderText)
   })
 
@@ -457,7 +401,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
         items: [{
           label: labels[0],
           value: vals[0],
@@ -466,35 +409,37 @@ describe('KSelect', () => {
           value: vals[1],
         }],
         enableItemCreation: true,
+        enableFiltering: true,
+        clearable: true,
       },
     })
 
-    cy.get('.k-select-input').click()
-    cy.getTestId(`k-select-item-${vals[0]}`).should('contain.text', labels[0])
-    cy.getTestId(`k-select-item-${vals[1]}`).should('contain.text', labels[1])
+    cy.get('.select-input').click()
+    cy.getTestId(`select-item-${vals[0]}`).should('contain.text', labels[0])
+    cy.getTestId(`select-item-${vals[1]}`).should('contain.text', labels[1])
     // no adding a label that already exists
     cy.get('input').type(labels[0])
-    cy.getTestId('k-select-add-item').should('not.exist')
+    cy.getTestId('select-add-item').should('not.exist')
     cy.get('input').clear()
     // add new item
     cy.get('input').type(newItem)
-    cy.getTestId('k-select-add-item').should('contain.text', newItem).click()
+    cy.getTestId('select-add-item').should('contain.text', newItem).click()
     // search is cleared
     cy.get('input').should('not.contain.text', newItem)
     // displays selected item correctly
-    cy.get('.k-select-item-selection').should('contain.text', newItem)
+    cy.getTestId('select-input').should('have.value', newItem)
     // item displays when searching
     cy.get('input').type(newItem)
-    cy.get('.k-select-item .k-select-item-label').should('contain.text', newItem)
+    cy.get('.select-item .select-item-label').should('contain.text', newItem)
     // no adding a label that already exists
-    cy.getTestId('k-select-add-item').should('not.exist')
+    cy.getTestId('select-add-item').should('not.exist')
     // item gone when deselected
-    cy.get('.k-select-item-selection').get('.clear-selection-icon').click()
-    cy.get('.k-select-item-selection').should('not.to.exist')
+    cy.getTestId('clear-selection-icon').trigger('click')
+    cy.getTestId('select-input').should('not.have.value')
     // gone when searching
     cy.get('input').clear()
     cy.get('input').type(newItem)
-    cy.getTestId('k-select-add-item').should('be.visible').should('contain.text', newItem)
+    cy.getTestId('select-add-item').should('be.visible').should('contain.text', newItem)
   })
 
   it('updates selected status after items are mutated', () => {
@@ -503,8 +448,6 @@ describe('KSelect', () => {
 
     mount(KSelect, {
       props: {
-        testMode: true,
-        appearance: 'select',
         items: [{
           label: labels[0],
           value: vals[0],
@@ -517,9 +460,9 @@ describe('KSelect', () => {
       },
     })
 
-    cy.get('.k-select-input input').click()
-    cy.get(`[data-testid="k-select-item-${vals[0]}"] button`).should('have.class', 'selected')
-    cy.get(`[data-testid="k-select-item-${vals[1]}"] button`).should('not.have.class', 'selected')
+    cy.get('.select-input input').click()
+    cy.get(`[data-testid="select-item-${vals[0]}"] button`).should('have.class', 'selected')
+    cy.get(`[data-testid="select-item-${vals[1]}"] button`).should('not.have.class', 'selected')
       .then(() => {
         // mutate items
         cy.wrap(Cypress.vueWrapper.setProps({
@@ -535,8 +478,8 @@ describe('KSelect', () => {
         }))
       })
       .then(() => {
-        cy.get(`[data-testid="k-select-item-${vals[0]}"] button`).should('not.have.class', 'selected')
-        cy.get(`[data-testid="k-select-item-${vals[1]}"] button`).should('have.class', 'selected')
+        cy.get(`[data-testid="select-item-${vals[0]}"] button`).should('not.have.class', 'selected')
+        cy.get(`[data-testid="select-item-${vals[1]}"] button`).should('have.class', 'selected')
       })
   })
 })
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 831d14ee15..20cffbadd4 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -2,262 +2,172 @@
   <div
     class="k-select"
     :class="[$attrs.class]"
-    :style="widthStyle"
   >
-    <KLabel
-      v-if="label && !overlayLabel"
-      v-bind="labelAttributes"
-      data-testid="k-select-label"
-      :for="selectId"
-      :required="isRequired"
-    >
-      {{ strippedLabel }}
-
-      <template
-        v-if="hasLabelTooltip"
-        #tooltip
+    <KToggle v-slot="{ toggle, isToggled }">
+      <KPop
+        ref="popperElement"
+        v-bind="boundKPopAttributes"
+        :on-popover-click="() => onPopoverClick(toggle, isToggled.value)"
+        :position-fixed="positionFixed"
+        target=".select-wrapper"
+        @closed="() => onClose(toggle, isToggled.value)"
+        @opened="() => onOpen(toggle)"
       >
-        <slot name="label-tooltip" />
-      </template>
-    </KLabel>
-    <div
-      :id="selectId"
-      data-testid="k-select-selected-item"
-    >
-      <div
-        v-if="selectedItem && appearance === 'dropdown'"
-        class="k-select-item-selection"
-        :class="{ 'overlay-label-item-selection': overlayLabel }"
-      >
-        <slot
-          :item="selectedItem"
-          name="selected-item-template"
-        >
-          <div
-            class="k-select-selected-item-label"
-          >
-            {{ selectedItem.label }}
-          </div>
-        </slot>
-        <button
-          class="clear-selection-icon"
-          @click="clearSelection"
-          @keyup.enter="clearSelection"
-        >
-          <KIcon
-            color="currentColor"
-            icon="clear"
-          />
-        </button>
-      </div>
-      <KToggle v-slot="{ toggle, isToggled }">
-        <KPop
-          ref="popper"
-          v-bind="boundKPopAttributes"
-          :on-popover-click="() => {
-            toggle()
-            return isToggled.value
-          }"
-          :position-fixed="positionFixed"
-          :target="`[id='${selectInputId}']`"
-          :test-mode="!!testMode || undefined"
-          @closed="() => {
-            if (selectedItem && appearance === 'select') {
-              filterStr = selectedItem.label
-            }
-            if (isToggled.value) {
-              toggle()
-            }
-          }"
-          @opened="() => {
-            filterStr = ''
-            toggle()
-            onPopoverOpen()
-          }"
+        <div
+          ref="selectWrapperElement"
+          class="select-wrapper"
+          data-testid="select-wrapper"
+          role="listbox"
+          @click="onSelectWrapperClick"
         >
-          <div
-            v-if="appearance === 'button'"
-            :id="selectInputId"
-            class="k-select-button"
-            data-testid="k-select-input"
-            role="listbox"
-            style="position: relative;"
+          <KInput
+            :id="selectId"
+            v-bind="modifiedAttrs"
+            autocapitalize="off"
+            autocomplete="off"
+            class="select-input"
+            :class="{ 'filtering-disabled': !enableFiltering,
+                      'hide-model-value': hasCustomSelectedItem
+            }"
+            data-testid="select-input"
+            :disabled="isDisabled"
+            :error="error"
+            :help="help"
+            :label="label ? strippedLabel : undefined"
+            :label-attributes="labelAttributes"
+            :model-value="filterQuery"
+            :placeholder="selectedItem && !enableFiltering ? selectedItem.label : placeholderText"
+            :readonly="isReadonly"
+            @blur="onInputBlur"
+            @focus="onInputFocus"
+            @keypress="onInputKeypress"
+            @keyup="(evt: any) => triggerFocus(evt, isToggled)"
+            @keyup.enter.stop
+            @update:model-value="onQueryChange"
           >
-            <KButton
-              :id="selectTextId"
-              v-bind="modifiedAttrs"
-              appearance="tertiary"
-              :style="widthStyle"
-              @keyup="(evt: any) => triggerFocus(evt, isToggled)"
+            <template #after>
+              <CloseIcon
+                v-if="isClearVisible"
+                data-testid="clear-selection-icon"
+                role="button"
+                tabindex="0"
+                @click="clearSelection"
+                @keydown.space.prevent
+                @keyup.space="clearSelection"
+              />
+              <ChevronDownIcon
+                class="chevron-down-icon"
+                :class="{ 'disabled': isDisabled }"
+              />
+            </template>
+            <template
+              v-if="$slots['label-tooltip']"
+              #label-tooltip
+            >
+              <slot name="label-tooltip" />
+            </template>
+          </KInput>
+          <Transition name="kongponents-fade-transition">
+            <div
+              v-if="hasCustomSelectedItem && (!enableFiltering || !isToggled.value)"
+              class="custom-selected-item-wrapper"
+              :class="{ 'clearable': clearable }"
             >
               <slot
                 :item="selectedItem"
                 name="selected-item-template"
               >
-                {{ selectButtonText }}
-                <ChevronDownIcon />
+                <slot
+                  :item="selectedItem"
+                  name="item-template"
+                />
               </slot>
-            </KButton>
+            </div>
+          </Transition>
+        </div>
+        <template #content>
+          <div
+            v-if="enableFiltering && loading"
+            class="select-loading"
+            data-propagate-clicks="false"
+            data-testid="select-loading"
+          >
+            <slot name="loading">
+              <ProgressIcon class="loading-icon" />
+            </slot>
           </div>
           <div
             v-else
-            :id="selectInputId"
-            class="select-input-container"
-            :class="{
-              'k-select-input': appearance === 'select',
-              'no-filter': !filterIsEnabled,
-              'is-readonly': ($attrs.readonly !== undefined && String($attrs.readonly) !== 'false'),
-              'disabled': ($attrs.disabled !== undefined && String($attrs.disabled) !== 'false'),
-              'is-open': isToggled.value
-            }"
-            data-testid="k-select-input"
-            role="listbox"
-            style="position: relative;"
-            @click="(evt: any) => {
-              if ($attrs.disabled !== undefined && String($attrs.disabled) !== 'false') {
-                evt.stopPropagation()
-              }
-            }"
+            class="select-items-container"
+            data-propagate-clicks="false"
           >
-            <KButton
-              v-if="isClearVisible"
-              class="clear-selection-icon"
-              @click="clearSelection"
-              @keyup.enter="clearSelection"
+            <KSelectItems
+              :items="filteredItems"
+              @selected="handleItemSelect"
             >
-              <KIcon
-                :color="KUI_COLOR_TEXT_NEUTRAL"
-                icon="clear"
-                :size="KUI_ICON_SIZE_30"
-              />
-            </KButton>
-            <KIcon
-              v-if="appearance === 'select'"
-              :class="{ 'overlay-label-chevron': overlayLabel }"
-              :color="KUI_COLOR_TEXT_NEUTRAL"
-              icon="chevronDown"
-              :size="KUI_ICON_SIZE_30"
-              @click.prevent="onInputFocus"
-            />
-            <KInput
-              :id="selectTextId"
-              v-bind="modifiedAttrs"
-              autocapitalize="off"
-              autocomplete="off"
-              class="k-select-input"
-              :class="{
-                'no-filter': !filterIsEnabled,
-                'input-placeholder-dark has-chevron': appearance === 'select',
-                'no-typing': appearance === 'select' && !autosuggest,
-                'input-placeholder-transparent': hasCustomSelectedItem && (!filterIsEnabled || !isToggled.value),
-                'has-clear': isClearVisible,
-                'is-readonly': ($attrs.readonly !== undefined && String($attrs.readonly) !== 'false'),
-                'disabled': ($attrs.disabled !== undefined && String($attrs.disabled) !== 'false')
-              }"
-              :label="label && overlayLabel ? strippedLabel : undefined"
-              :model-value="filterStr"
-              :placeholder="selectedItem && appearance === 'select' && !filterIsEnabled ? selectedItem.label : placeholderText"
-              @blur="onInputBlur"
-              @focus="onInputFocus"
-              @keypress="onInputKeypress"
-              @keyup="(evt: any) => triggerFocus(evt, isToggled)"
-              @update:model-value="onQueryChange"
-            />
-            <transition name="fade">
-              <div
-                v-if="hasCustomSelectedItem && (!filterIsEnabled || !isToggled.value)"
-                class="custom-selected-item"
-              >
+              <template #content="{ item }">
                 <slot
-                  :item="selectedItem"
-                  name="selected-item-template"
-                >
-                  <slot
-                    :item="selectedItem"
-                    name="item-template"
-                  />
-                </slot>
-              </div>
-            </transition>
-          </div>
-          <template #content>
-            <slot
-              v-if="autosuggest && loading"
-              name="loading"
-            >
-              <KIcon
-                class="k-select-loading"
-                data-testid="k-select-loading"
-                icon="spinner"
-              />
-            </slot>
-            <div
-              v-else
-              class="k-select-list"
-            >
-              <KSelectItems
-                :items="filteredItems"
-                @selected="handleItemSelect"
-              >
-                <template #content="{ item }">
-                  <slot
-                    class="select-item-label select-item-desc"
-                    :item="item"
-                    name="item-template"
-                  />
-                </template>
-              </KSelectItems>
-              <KSelectItem
-                v-if="!filteredItems.length && !$slots.empty && !enableItemCreation"
-                key="k-select-empty-state"
-                class="k-select-empty-item"
-                :item="{ label: 'No results', value: 'no_results' }"
-              />
-              <KSelectItem
-                v-if="!filteredItems.length && uniqueFilterStr && !$slots.empty && enableItemCreation"
-                key="k-select-new-item"
-                class="k-select-new-item"
-                data-testid="k-select-add-item"
-                :item="{ label: `${filterStr} (Add new value)`, value: 'add_item' }"
-                @selected="handleAddItem"
-              >
-                <template #content>
-                  <div class="select-item-description">
-                    {{ filterStr }}
-                    <span class="select-item-new-indicator">(Add new value)</span>
-                  </div>
-                </template>
-              </KSelectItem>
-            </div>
-            <slot
-              v-if="!loading && !filteredItems.length"
-              name="empty"
+                  class="select-item-label select-item-desc"
+                  :item="item"
+                  name="item-template"
+                />
+              </template>
+            </KSelectItems>
+            <KSelectItem
+              v-if="!filteredItems.length && !$slots.empty && !enableItemCreation"
+              :item="{ label: 'No results', value: 'no_results', disabled: true }"
             />
+            <KSelectItem
+              v-if="!filteredItems.length && uniqueFilterQuery && !$slots.empty && enableItemCreation"
+              key="select-add-item"
+              class="select-add-item"
+              data-testid="select-add-item"
+              :item="{ label: `${filterQuery} (Add new value)`, value: 'add_item' }"
+              @selected="handleAddItem"
+            >
+              <template #content>
+                <div class="select-item-description">
+                  {{ filterQuery }}
+                  <span class="select-item-new-indicator">(Add new value)</span>
+                </div>
+              </template>
+            </KSelectItem>
             <div
-              v-if="$slots['dropdown-footer-text'] || dropdownFooterText"
-              class="k-select-dropdown-footer-text"
-              :class="`k-select-dropdown-footer-${dropdownFooterTextPosition}`"
+              v-if="hasDropdownFooter && dropdownFooterTextPosition === 'static'"
+              class="dropdown-footer dropdown-footer-static"
             >
               <slot name="dropdown-footer-text">
                 {{ dropdownFooterText }}
               </slot>
             </div>
-          </template>
-        </KPop>
-      </KToggle>
-    </div>
+          </div>
+          <div
+            v-if="!loading && !filteredItems.length && $slots.empty"
+            class="select-empty"
+            data-propagate-clicks="false"
+          >
+            <slot name="empty" />
+          </div>
+          <div
+            v-if="hasDropdownFooter && dropdownFooterTextPosition === 'sticky'"
+            class="dropdown-footer dropdown-footer-sticky"
+          >
+            <slot name="dropdown-footer-text">
+              {{ dropdownFooterText }}
+            </slot>
+          </div>
+        </template>
+      </KPop>
+    </KToggle>
   </div>
 </template>
 
 <script lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, watch, nextTick, useAttrs, useSlots } from 'vue'
+import { ref, computed, watch, nextTick, useAttrs, useSlots, onUnmounted, onMounted } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import useUtilities from '@/composables/useUtilities'
-import KButton from '@/components/KButton/KButton.vue'
-import KIcon from '@/components/KIcon/KIcon.vue'
 import KInput from '@/components/KInput/KInput.vue'
-import KLabel from '@/components/KLabel/KLabel.vue'
 import KPop from '@/components/KPop/KPop.vue'
 import KToggle from '@/components/KToggle'
 import KSelectItems from '@/components/KSelect/KSelectItems.vue'
@@ -265,15 +175,12 @@ import KSelectItem from '@/components/KSelect/KSelectItem.vue'
 import type {
   PopPlacements,
   SelectItem,
-  SelectFilterFnParams,
+  SelectFilterFunctionParams,
   SelectDropdownFooterTextPosition,
-  SelectAppearance,
 } from '@/types'
-import {
-  SelectAppearanceArray,
-} from '@/types'
-import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import { ChevronDownIcon } from '@kong/icons'
+import { ChevronDownIcon, CloseIcon, ProgressIcon } from '@kong/icons'
+import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
+import { sanitizeInput } from '@/utilities/sanitizeInput'
 
 export default {
   inheritAttrs: false,
@@ -283,13 +190,6 @@ export default {
 <script setup lang="ts">
 const { getSizeFromString, stripRequiredLabel } = useUtilities()
 
-const defaultKPopAttributes = {
-  popoverClasses: 'k-select-popover',
-  popoverTimeout: 0,
-  placement: 'bottomStart' as PopPlacements,
-  hideCaret: true,
-}
-
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -309,10 +209,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  overlayLabel: {
-    type: Boolean,
-    default: false,
-  },
   labelAttributes: {
     type: Object,
     default: () => ({}),
@@ -322,28 +218,12 @@ const props = defineProps({
    */
   width: {
     type: String,
-    default: '',
+    default: '100%',
   },
   placeholder: {
     type: String,
     default: '',
   },
-  /**
-   * The display style, can be either dropdown, select, or button
-   */
-  appearance: {
-    type: String as PropType<SelectAppearance>,
-    default: 'dropdown',
-    validator: (value: SelectAppearance) => SelectAppearanceArray.includes(value),
-  },
-  /**
-   * Override the text displayed on the button if `appearance` is `button` after an item
-   * has been selected. By default display the selected item's label
-   */
-  buttonText: {
-    type: String,
-    default: '',
-  },
   /**
    * Items are JSON objects with required 'label' and 'value'
    * {
@@ -366,25 +246,18 @@ const props = defineProps({
     default: true,
   },
   /**
-   * Override default filter functionality of case-insensitive search on label
-   */
-  filterFunc: {
-    type: Function,
-    default: (params: SelectFilterFnParams) => params.items.filter((item: SelectItem) => item.label?.toLowerCase().includes(params.query?.toLowerCase())),
-  },
-  /**
-   * Control whether the input for `select` and `dropdown` appearances supports filtering.
+   * Control whether the input supports filtering.
    */
   enableFiltering: {
     type: Boolean,
-    default: null,
+    default: false,
   },
   /**
-   * A flag for autosuggest mode
+   * Override default filter functionality of case-insensitive search on label
    */
-  autosuggest: {
-    type: Boolean,
-    default: false,
+  filterFunction: {
+    type: Function as PropType<(params: SelectFilterFunctionParams) => SelectItem[] | boolean>,
+    default: (params: SelectFilterFunctionParams) => params?.items?.filter((item: SelectItem) => item.label?.toLowerCase().includes(params.query?.toLowerCase())),
   },
   /**
    * Loading state in autosuggest
@@ -394,19 +267,12 @@ const props = defineProps({
     default: false,
   },
   /**
-   * A flag for clearing selection when appearance is `select`
+   * A flag for clearing selection
    */
   clearable: {
     type: Boolean,
     default: false,
   },
-  /**
-   * Test mode - for testing only, strips out generated ids
-   */
-  testMode: {
-    type: Boolean,
-    default: false,
-  },
   /**
    * Dropdown footer text
    */
@@ -424,7 +290,6 @@ const props = defineProps({
   },
   /**
    * If true and item-template is passed, will display item-template content inside selected-slot-template
-   * Only applies when appearance prop is `select`.
    */
   reuseItemTemplate: {
     type: Boolean,
@@ -437,6 +302,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  help: {
+    type: String,
+    default: '',
+  },
 })
 
 const emit = defineEmits<{
@@ -444,38 +317,52 @@ const emit = defineEmits<{
   (e: 'input', value: string | number | null): void
   (e: 'change', item: SelectItem | null): void
   (e: 'update:modelValue', value: string | number | null): void
-  (e: 'query-change', value: string): void
-  (e: 'item:added', value: SelectItem): void
-  (e: 'item:removed', value: SelectItem): void
+  (e: 'query-change', query: string): void
+  (e: 'item-added', value: SelectItem): void
+  (e: 'item-removed', value: SelectItem): void
 }>()
 
 const attrs = useAttrs()
 const slots = useSlots()
 
+const resizeObserver = ref<ResizeObserverHelper>()
+
 const isRequired = computed((): boolean => attrs.required !== undefined && String(attrs.required) !== 'false')
+const isDisabled = computed((): boolean => attrs.disabled !== undefined && String(attrs.disabled) !== 'false')
+const isReadonly = computed((): boolean => attrs.readonly !== undefined && String(attrs.readonly) !== 'false')
+const hasDropdownFooter = computed((): boolean => !!(slots['dropdown-footer-text'] || props.dropdownFooterText))
+
+const defaultKPopAttributes = {
+  popoverClasses: `select-popover ${hasDropdownFooter.value ? `has-${props.dropdownFooterTextPosition}-dropdown-footer` : ''} ${props.help ? 'has-help-text' : ''}`,
+  popoverTimeout: 0,
+  placement: 'bottomStart' as PopPlacements,
+  hideCaret: true,
+}
+
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
-const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.help || props.labelAttributes?.info || slots['label-tooltip']))
-const filterStr = ref('')
+
+const filterQuery = ref<string>('')
+
 // whether or not filter string matches an existing item's label
-const uniqueFilterStr = computed((): boolean => {
-  if (!filterStr.value) {
+const uniqueFilterQuery = computed((): boolean => {
+  if (!filterQuery.value) {
     return false
   }
 
-  if (selectItems.value?.filter((item: SelectItem) => item.label === filterStr.value)?.length) {
+  if (selectItems.value?.filter((item: SelectItem) => item.label === filterQuery.value)?.length) {
     return false
   }
 
   return true
 })
-const selectedItem = ref<SelectItem|null>(null)
-const selectId = computed((): string => props.testMode ? 'test-select-id-1234' : uuidv4())
-const selectInputId = computed((): string => props.testMode ? 'test-select-input-id-1234' : uuidv4())
-const selectTextId = computed((): string => props.testMode ? 'test-select-text-id-1234' : uuidv4())
-const selectItems: Ref<SelectItem[]> = ref([])
-const initialFocusTriggered: Ref<boolean> = ref(false)
-const inputFocused: Ref<boolean> = ref(false)
-const popper = ref(null)
+
+const selectedItem = ref<SelectItem | null>(null)
+const selectId = computed((): string => attrs.id ? String(attrs.id) : uuidv4())
+const selectItems = ref<SelectItem[]>([])
+const inputFocused = ref<boolean>(false)
+
+const popperElement = ref<HTMLElement>()
+const selectWrapperElement = ref<HTMLDivElement>() // div element that wraps the input
 
 // we need this so we can create a watcher for programmatic changes to the modelValue
 const value = computed({
@@ -492,42 +379,8 @@ const value = computed({
   },
 })
 
-const filterIsEnabled = computed((): boolean => {
-  if (props.autosuggest) {
-    return true
-  }
-
-  if (props.enableFiltering !== null) {
-    // filtering not allowed for `button` appearance
-    return props.appearance === 'button' ? false : props.enableFiltering
-  }
-
-  if (props.appearance === 'dropdown') {
-    return true
-  }
-
-  return false
-})
-
-const widthValue = computed(() => {
-  let w = ''
-  if (!props.width) {
-    w = '205'
-    if (props.appearance === 'button') {
-      w = '230'
-    }
-  } else {
-    w = props.width
-  }
-
-  return getSizeFromString(w)
-})
-
-const widthStyle = computed(() => {
-  return {
-    width: widthValue.value,
-  }
-})
+const elementWidth = computed((): string => getSizeFromString(props.width || '100%'))
+const actualElementWidth = ref<string>('') // the pixel value of the element width for KPop container
 
 const modifiedAttrs = computed(() => {
   const $attrs = { ...attrs }
@@ -542,10 +395,10 @@ const createKPopAttributes = computed(() => {
   return {
     ...defaultKPopAttributes,
     ...props.kpopAttributes,
-    popoverClasses: `${defaultKPopAttributes.popoverClasses} ${props.kpopAttributes.popoverClasses} k-select-pop-${props.appearance}`,
-    width: String(inputWidth.value),
-    maxWidth: String(inputWidth.value),
-    disabled: (attrs.disabled !== undefined && String(attrs.disabled) !== 'false') || (attrs.readonly !== undefined && String(attrs.readonly) !== 'false'),
+    popoverClasses: `${defaultKPopAttributes.popoverClasses} ${props.kpopAttributes.popoverClasses}`,
+    width: String(actualElementWidth.value),
+    maxWidth: String(actualElementWidth.value),
+    disabled: isDisabled.value || isReadonly.value,
   }
 })
 
@@ -555,63 +408,48 @@ const popoverContentMaxHeight = computed((): string => getSizeFromString(props.d
 // TypeScript complains if I bind the original object
 const boundKPopAttributes = computed(() => ({ ...createKPopAttributes.value }))
 
-const filteredItems = computed(() => {
-  // For autosuggest, items don't need to be filtered internally
-  return props.autosuggest ? selectItems.value : props.filterFunc({ items: selectItems.value, query: filterStr.value })
-})
+const placeholderText = computed((): string => props.placeholder || attrs.placeholder as string || 'Select...')
 
-const placeholderText = computed((): string => {
-  if (props.placeholder) {
-    return props.placeholder
-  } else if (attrs.placeholder) {
-    return attrs.placeholder as string
-  }
-  if (props.appearance === 'button' || !filterIsEnabled.value) {
-    return 'Select an item'
-  }
-  return 'Filter...'
-})
+const isClearVisible = computed((): boolean => !isDisabled.value && (props.clearable && !!selectedItem.value))
 
-const selectButtonText = computed((): string => {
-  if (props.buttonText && selectedItem.value) {
-    return props.buttonText
-  } else if (selectedItem.value) {
-    return selectedItem.value.label
-  }
-  return placeholderText.value
-})
+const hasCustomSelectedItem = computed((): boolean => !!(selectedItem.value &&
+  (slots['selected-item-template'] || (props.reuseItemTemplate && slots['item-template']))))
 
-const isClearVisible = computed((): boolean => props.appearance === 'select' && props.clearable && !!selectedItem.value)
+const filteredItems = computed((): SelectItem[] => {
+  // if filtering is not enabled or filter function returns true
+  if (!props.enableFiltering || props.filterFunction({ query: filterQuery.value, items: selectItems.value }) === true) {
+    return selectItems.value
+  }
 
-const hasCustomSelectedItem = computed((): boolean => !!(selectedItem.value && props.appearance === 'select' &&
-  (slots['selected-item-template'] || (props.reuseItemTemplate && slots['item-template']))))
+  return props.filterFunction({ query: filterQuery.value, items: selectItems.value }) as SelectItem[]
+})
 
 const onInputKeypress = (event: Event) => {
   // If filters are not enabled, ignore any keypresses
-  if (!filterIsEnabled.value) {
+  if (!props.enableFiltering) {
     event.preventDefault()
     return false
   }
 }
 
 const handleAddItem = (): void => {
-  if (!props.enableItemCreation || !filterStr.value || !uniqueFilterStr.value) {
+  if (!props.enableItemCreation || !filterQuery.value || !uniqueFilterQuery.value) {
     // do nothing if not enabled or no label or label already exists
     return
   }
 
   const pos = (selectItems.value?.length || 0) + 1
   const item: SelectItem = {
-    label: filterStr.value + '',
-    value: props.testMode ? `test-multiselect-added-item-${pos}` : uuidv4(),
-    key: `${filterStr.value.replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
+    label: sanitizeInput(filterQuery.value),
+    value: uuidv4(),
+    key: `${sanitizeInput(filterQuery.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
     custom: true,
   }
 
-  emit('item:added', item)
+  emit('item-added', item)
 
   handleItemSelect(item, true)
-  filterStr.value = ''
+  filterQuery.value = ''
 }
 
 const handleItemSelect = (item: SelectItem, isNew?: boolean) => {
@@ -622,21 +460,24 @@ const handleItemSelect = (item: SelectItem, isNew?: boolean) => {
 
   selectItems.value?.forEach((anItem, i) => {
     if (anItem.key === item.key) {
+      // select the item
       anItem.selected = true
       anItem.key = anItem?.key?.includes('-selected') ? anItem.key : `${anItem.key}-selected`
       selectedItem.value = anItem
     } else if (anItem.selected) {
+      // deselect previously selected item
       anItem.selected = false
       anItem.key = anItem?.key?.replace(/-selected/gi, '')
       if (anItem.custom) {
         selectItems.value?.splice(i, 1)
-        emit('item:removed', anItem)
+        emit('item-removed', anItem)
       }
     } else {
       anItem.selected = false
     }
   })
-  filterStr.value = props.appearance === 'dropdown' ? '' : item.label
+
+  filterQuery.value = item.label
   emit('selected', item)
   // this 'input' event must be emitted for v-model binding to work properly
   emit('input', item.value)
@@ -650,14 +491,11 @@ const clearSelection = (): void => {
     anItem.key = anItem?.key?.replace(/-selected/gi, '')
     if (anItem.custom) {
       selectItems.value?.splice(i, 1)
-      emit('item:removed', anItem)
+      emit('item-removed', anItem)
     }
   })
   selectedItem.value = null
-  if (props.appearance === 'select') {
-    filterStr.value = ''
-    emit('query-change', '')
-  }
+  filterQuery.value = ''
   // this 'input' event must be emitted for v-model binding to work properly
   emit('input', null)
   emit('change', null)
@@ -671,34 +509,67 @@ const triggerFocus = (evt: any, isToggled: Ref<boolean>):void => {
     return
   }
 
-  const inputElem = document.getElementById(selectTextId.value)
+  const inputElem = selectWrapperElement.value?.children[0] as HTMLInputElement
   if (!isToggled.value && inputElem) { // simulate click to trigger dropdown open
     inputElem.click()
   }
 }
 
 const onQueryChange = (query: string) => {
-  if (filterStr.value !== query) {
-    filterStr.value = query
-    emit('query-change', query)
+  if (filterQuery.value !== query) {
+    filterQuery.value = query
   }
 }
 
 const onInputFocus = (): void => {
   inputFocused.value = true
-  if (!initialFocusTriggered.value) {
-    initialFocusTriggered.value = true
-    emit('query-change', '')
-  }
+
+  emit('query-change', filterQuery.value)
 }
 
 const onInputBlur = (): void => {
   inputFocused.value = false
 }
 
+const onSelectWrapperClick = (event: Event): void => {
+  /**
+   * The component is designed so that most of the time it propagates click events
+   * so that popover component handles them properly (for example closing the dropdown when clicking outside of it or selecting an item).
+   * However some container or wrapper clicks should not propagate to the popover component.
+   * In cases like that we can't use always pointer-events: none; because it will disabled pointer event on children elements.
+   * Instead we can give that element data-propagate-clicks="false" data property and it will be handled here.
+   */
+  if (isDisabled.value || (event?.target as HTMLElement)?.dataset.propagateClicks === 'false') {
+    event.stopPropagation()
+  }
+}
+
+const onPopoverClick = (toggle: Function, isToggled: boolean) => {
+  toggle()
+
+  return isToggled
+}
+
+const onClose = (toggle: Function, isToggled: boolean) => {
+  if (selectedItem.value) {
+    filterQuery.value = selectedItem.value.label
+  }
+  if (isToggled) {
+    toggle()
+  }
+}
+
+const onOpen = (toggle: Function) => {
+  if (props.enableFiltering) {
+    filterQuery.value = ''
+  }
+  toggle()
+}
+
 watch(value, (newVal, oldVal) => {
   if (newVal !== oldVal) {
     const item = selectItems.value?.filter((item: SelectItem) => item.value === newVal)
+
     if (item?.length) {
       handleItemSelect(item[0])
     } else if (!newVal) {
@@ -721,14 +592,14 @@ watch(() => props.items, (newValue, oldValue) => {
       selectItems.value[i].selected = false
     }
 
-    selectItems.value[i].key = `${selectItems.value[i].label?.replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${i}` || `k-select-item-label-${i}`
+    selectItems.value[i].key = `${selectItems.value[i].label?.replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${i}` || `select-item-label-${i}`
     if (selectItems.value[i].value === props.modelValue || selectItems.value[i].selected) {
       selectItems.value[i].selected = true
       selectedItem.value = selectItems.value[i]
       selectItems.value[i].key += '-selected'
 
-      if (props.appearance === 'select' && !inputFocused.value) {
-        filterStr.value = selectedItem.value.label
+      if (!inputFocused.value) {
+        filterQuery.value = selectedItem.value.label
       }
     }
 
@@ -741,385 +612,152 @@ watch(() => props.items, (newValue, oldValue) => {
   // This prevents the popover from displaying "detached" from the KSelect
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  if (popper.value && typeof popper.value.updatePopper === 'function') {
+  if (popperElement.value && typeof popperElement.value.updatePopper === 'function') {
     nextTick(() => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      popper.value.updatePopper()
+      popperElement.value.updatePopper()
     })
   }
 }, { deep: true, immediate: true })
 
-const inputWidth = ref(0)
-
-const onPopoverOpen = () => {
-  const inputElem = document.getElementById(selectInputId.value)
-
-  if (inputElem) {
-    inputWidth.value = inputElem.offsetWidth
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/tmp-variables';
-@import '@/styles/mixins';
-
-.k-select {
-  width: fit-content; // necessary for correct placement of popup
-
-  .k-select-item-selection {
-    background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
-    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-    color: var(--kui-color-text-primary, $kui-color-text-primary);
-    display: flex;
-    font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    margin-bottom: var(--kui-space-30, $kui-space-30);
-    padding: var(--kui-space-20, $kui-space-20) var(--kui-space-50, $kui-space-50) !important;
+watch(filterQuery, (q: string) => {
+  emit('query-change', q)
+})
 
-    &.overlay-label-item-selection {
-      position: relative;
-      top: -8px;
-    }
+onMounted(() => {
+  if (selectWrapperElement.value) {
+    resizeObserver.value = ResizeObserverHelper.create(() => { actualElementWidth.value = `${selectWrapperElement.value?.offsetWidth}px` })
 
-    .clear-selection-icon {
-      @include non-visual-button;
-      color: $tmp-color-blue-200;
-      cursor: pointer !important;
-      height: 24px;
-      margin-bottom: var(--kui-space-auto, $kui-space-auto);
-      margin-left: var(--kui-space-auto, $kui-space-auto);
-      margin-top: var(--kui-space-auto, $kui-space-auto);
-      padding: var(--kui-space-0, $kui-space-0);
-    }
+    resizeObserver.value.observe(selectWrapperElement.value as HTMLDivElement)
   }
+})
 
-  .k-select-trigger:after {
-    border-left: var(--kui-border-width-30, $kui-border-width-30) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-    border-right: var(--kui-border-width-30, $kui-border-width-30) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-    border-top: var(--kui-border-width-30, $kui-border-width-30) solid;
-    content: "";
-    display: inline-block;
-    height: 0;
-    margin-left: var(--kui-space-40, $kui-space-40);
-    vertical-align: middle;
-    width: 0;
+onUnmounted(() => {
+  if (selectWrapperElement.value) {
+    resizeObserver.value?.unobserve(selectWrapperElement.value)
   }
-}
-</style>
+})
+</script>
 
-<style lang="scss">
-@import '@/styles/tmp-variables';
-@import '@/styles/mixins';
+<style lang="scss" scoped>
+/* Component variables */
 
-$chevronDownIconMargin: var(--kui-space-40, $kui-space-40);
-$iconSize: var(--kui-icon-size-30, $kui-icon-size-30);
+$kSelectInputPaddingX: var(--kui-space-50, $kui-space-50); // corresponds to mixin, search for variable name in mixins
+$kSelectInputPaddingY: var(--kui-space-40, $kui-space-40); // corresponds to mixin
+$kSelectInputIconSize: var(--kui-icon-size-40, $kui-icon-size-40); // corresponds to value in KInput.vue
+$kSelectInputSlotSpacing: var(--kui-space-40, $kui-space-40); // corresponds to value in KInput.vue
+$kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)); // corresponds to mixin
 
-@mixin boxShadow($color, $whiteShadowSpred: 2px, $colorShadowSpread: 4px) {
-  /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-  box-shadow: 0 0 0 $whiteShadowSpred var(--kui-color-background, $kui-color-background), 0 0 0 $colorShadowSpread $color;
-}
+/* Component mixins */
 
-// allows setting a maxHeight on the popover dropdown
 @mixin kSelectPopoverMaxHeight {
   max-height: v-bind('popoverContentMaxHeight');
   overflow-y: auto;
 }
 
-.k-select {
-  .k-select-selected-item-label {
-    align-self: center;
-    font-size: var(--kui-font-size-30, $kui-font-size-30);
-    line-height: var(--kui-line-height-20, $kui-line-height-20);
-  }
-
-  .k-select-item-selection {
-    .clear-selection-icon {
-      .kong-icon {
-        margin-left: var(--kui-space-auto, $kui-space-auto);
-      }
-    }
-  }
-
-  .k-button.tertiary {
-    padding: var(--kui-space-50, $kui-space-50) var(--kui-space-80, $kui-space-80);
-    text-decoration: none;
-
-    &:focus {
-      @include boxShadow(var(--kui-color-background-primary, $kui-color-background-primary), 0, 2px);
-    }
+/* Component styles */
 
-    .caret {
-      margin-left: var(--kui-space-auto, $kui-space-auto);
-    }
-  }
+.k-select {
+  width: v-bind('elementWidth');
 
-  .k-select-input {
-    @include input-default;
-    box-shadow: none !important;
-    display: inline-block;
+  .select-wrapper {
     position: relative;
-    width: 100%;
+  }
 
-    &.has-chevron.no-typing {
-      .k-input {
+  .select-input {
+    &.filtering-disabled {
+      :deep(input:not([disabled])) {
         caret-color: transparent;
         cursor: pointer;
       }
     }
 
-    &.is-readonly {
-      @include input-readonly;
-      box-shadow: none !important;
-
-      &.select-input-container {
-        input.k-input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):read-only {
-          box-shadow: none !important;
-        }
-      }
-    }
-
-      &.select-input-container.disabled {
-      @include input-disabled;
-      box-shadow: none !important;
-      cursor: not-allowed !important;
-
-      &.select-input-container {
-        input.k-input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled {
-          box-shadow: none !important;
-        }
-      }
-    }
-
-    .kong-icon-chevronDown {
-      margin-right: $chevronDownIconMargin;
-    }
-
-    &.cursor-default {
-      cursor: default;
-    }
-
-    &.prevent-pointer-events {
-      pointer-events: none;
-    }
-
-    &.input-placeholder-dark {
-      input {
-        &::placeholder {
-          color: var(--kui-color-text, $kui-color-text) !important;
-        }
-      }
-    }
-
-    &.input-placeholder-transparent {
-      input {
-        color: transparent !important;
-
-        &::placeholder {
-          color: transparent !important;
-        }
-      }
-    }
-
-    .k-input.no-filter {
-      cursor: default !important;
-      pointer-events: none !important;
-    }
-
-    .k-input.has-chevron {
-      padding-right: var(--kui-space-100, $kui-space-100);
-    }
-
-    .k-input.has-clear {
-      padding-right: var(--kui-space-120, $kui-space-120);
-    }
-
-    &input.k-input {
-      height: 100%;
-      padding: var(--kui-space-40, $kui-space-40);
-    }
-
-    .kong-icon {
-      display: inline-flex;
-    }
-
-    .clear-selection-icon {
-      @include non-visual-button;
-      padding: var(--kui-space-0, $kui-space-0);
-      position: absolute;
-      right: 24px;
-      z-index: 9;
-
-      .kong-icon-clear {
-        display: block;
-        position: static;
-        transform: none;
-      }
-    }
-
-    .custom-selected-item {
-      display: inline-flex;
-      padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50);
-      pointer-events: none;
-      position: absolute;
-      // offset chevron icon width and margin
-      right: 24px;
-      width: calc(100% - $iconSize - $chevronDownIconMargin);
-    }
-  }
-
-  div.k-select-input.select-input-container {
-    align-items: center;
-    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-    border-radius: var(--kui-border-radius-10, $kui-border-radius-10);
-    cursor: pointer !important;
-    display: flex;
-    flex: 0 0 40%;
-    flex-direction: row-reverse;
-    transition: all $tmp-animation-timing-2 ease;
-
-    .k-input-wrapper  {
-      border-radius: var(--kui-border-radius-10, $kui-border-radius-10);
-    }
-
-    input.k-input {
-      box-shadow: none !important;
-    }
-
-    &:hover {
-      border-color: var(--kui-color-border-primary-weaker, $kui-color-border-primary-weaker);
-
-      .text-on-input label {
-        color: var(--kui-color-text-primary, $kui-color-text-primary);
-      }
-    }
-
-    &.is-open {
-      border-color: var(--kui-color-border-primary-weak, $kui-color-border-primary-weak);
-
-      .text-on-input label {
-        color:var(--kui-color-text-primary, $kui-color-text-primary);
+    &.hide-model-value {
+      :deep(input) {
+        color: transparent;
       }
     }
   }
 
-  .k-select-button .has-caret .kong-icon {
-    margin-left: var(--kui-space-auto, $kui-space-auto);
-  }
-
-  .k-select-button {
-    .k-button {
-      justify-content: space-between;
-
-      &.tertiary {
-        &:hover {
-          text-decoration: none;
-        }
-      }
+  .chevron-down-icon {
+    &.disabled {
+      color: var(--kui-color-text-disabled, $kui-color-text-disabled) !important;
     }
   }
 
-  &.k-input {
-    width: 100%;  // need this so input takes the k-input-wrapper's width which uses this.width prop
-  }
+  .custom-selected-item-wrapper {
+    @include selectItemDefaults;
 
-  .k-select-popover {
     box-sizing: border-box;
-    margin-top: var(--kui-space-10, $kui-space-10) !important;
-    width: 100%;
-
-    &[x-placement^="top"] {
-      margin-bottom: var(--kui-space-10, $kui-space-10) !important;
-      margin-top: var(--kui-space-0, $kui-space-0) !important;
-    }
-
-    &.k-select-pop-button {
-      border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-      padding: var(--kui-space-40, $kui-space-40) var(--kui-space-40, $kui-space-40);
-    }
+    inset: 0;
+    margin-left: $kSelectInputPaddingX;
+    overflow: hidden;
+    padding: var(--kui-space-0, $kui-space-0); // override mixin
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
 
-    &.k-select-pop-dropdown {
-      border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-      padding: var(--kui-space-40, $kui-space-40) var(--kui-space-40, $kui-space-40);
+    :deep(#{$kongponentsKongIconSelector}) {
+      // make sure the icon doesn't shrink when text is too long
+      flex-shrink: 0;
+      height: $kSelectInputIconSize !important;
+      width: $kSelectInputIconSize !important;
     }
 
-    &.k-select-pop-select {
-      border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-      padding: var(--kui-space-40, #{$kui-space-40}) var(--kui-space-40, $kui-space-40);
+    &.clearable {
+      // accommodate for the clear icon
+      max-width: calc(v-bind('actualElementWidth') - ($kSelectInputPaddingX * 2) - ($kSelectInputIconSize * 2) - ($kSelectInputSlotSpacing * 2));
     }
+  }
 
-    .k-select-empty-item button,
-    .k-select-empty-item button:focus,
-    .k-select-empty-item button:hover {
-      color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-      font-style: italic;
+  .select-popover {
+    .select-items-container {
+      @include kSelectPopoverMaxHeight;
     }
+  }
 
-    .k-select-new-item {
-      word-break: break-word;
+  :deep(.select-popover.k-popover) {
+    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    padding: var(--kui-space-20, $kui-space-20) var(--kui-space-0, $kui-space-0);
 
-      .select-item-new-indicator {
-        font-style: italic;
-        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-      }
+    &.has-sticky-dropdown-footer, &.has-static-dropdown-footer {
+      padding-bottom: var(--kui-space-0, $kui-space-0);
     }
 
-    ul {
-      margin: var(--kui-space-0, $kui-space-0);
-      padding: var(--kui-space-0, $kui-space-0);
+    &.has-help-text {
+      margin-top: calc(-1 * $kSelectInputHelpTextHeight);
     }
+  }
 
-    a {
-      color: var(--kui-color-text, $kui-color-text);
-      flex: 1;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: none;
-      }
-    }
+  .select-loading,
+  .select-empty {
+    @include selectItemDefaults;
 
-    .k-select-loading {
-      display: block;
-      height: 24px;
-      position: relative;
-      right: 0;
-      text-align: center;
-      top: 0;
+    .loading-icon {
+      margin: var(--kui-space-0, $kui-space-0) var(--kui-space-auto, $kui-space-auto);
     }
+  }
 
-    .k-popover-content {
-      @include kSelectPopoverMaxHeight;
-
-      .k-select-list {
-        margin: var(--kui-space-0, $kui-space-0) !important;
-        padding: var(--kui-space-0, $kui-space-0) !important;
-      }
-
-      // when dropdown footer text position is sticky
-      &:has(.k-select-dropdown-footer-text.k-select-dropdown-footer-sticky) {
-        max-height: none;
-
-        .k-select-list {
-          @include kSelectPopoverMaxHeight;
-        }
-      }
-
-      // Firefox workaround
-      // since :has() selector isn't supported in Firefox be default
-      .k-select-list ~ .k-select-dropdown-footer-sticky {
-        bottom: 0;
-        position: sticky;
-      }
-    }
+  .dropdown-footer {
+    align-items: center;
+    background-color: var(--kui-color-background, $kui-color-background);
+    border-bottom-left-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    border-bottom-right-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    border-top: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    bottom: 0;
+    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+    display: flex;
+    font-size: var(--kui-font-size-20, $kui-font-size-20);
+    gap: var(--kui-space-30, $kui-space-30);
+    line-height: var(--kui-line-height-20, $kui-line-height-20);
+    padding: var(--kui-space-50, $kui-space-50);
+    pointer-events: none;
+    position: sticky;
 
-    .k-select-dropdown-footer-text {
-      background-color: var(--kui-color-background, $kui-color-background);
-      border-top: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-      color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-      padding: var(--kui-space-40, $kui-space-40);
-      padding-bottom: var(--kui-space-0, $kui-space-0);
+    &-static {
+      position: static;
     }
   }
 }
diff --git a/src/components/KSelect/KSelectItem.vue b/src/components/KSelect/KSelectItem.vue
index 9f5fe15e4e..15d97c8454 100644
--- a/src/components/KSelect/KSelectItem.vue
+++ b/src/components/KSelect/KSelectItem.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     :key="item.key"
-    class="k-select-item"
-    :data-testid="`k-select-item-${item.value}`"
+    class="select-item"
+    :data-testid="`select-item-${item.value}`"
     @click="handleClick"
   >
     <div
-      class="k-select-item-container"
+      class="select-item-container"
       role="option"
     >
       <button
@@ -15,24 +15,15 @@
         type="button"
         :value="item.value"
       >
-        <span class="k-select-item-label">
+        <span class="select-item-label">
           <slot name="content">{{ item.label }}</slot>
         </span>
-        <span class="k-select-selected-icon-container">
-          <KIcon
-            v-if="item.selected"
-            class="selected-item-icon"
-            color="currentColor"
-            icon="check"
-          />
-        </span>
       </button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import KIcon from '@/components/KIcon/KIcon.vue'
 import type { SelectItem } from '@/types'
 import type { PropType } from 'vue'
 
@@ -50,11 +41,12 @@ const emit = defineEmits<{
 }>()
 
 const handleClick = (e: MouseEvent): void => {
-  if (props.item.disabled) {
-    // Clicking on a disabled item should not close the dropdown
+  if (props.item.disabled || props.item.selected) {
+    // Clicking on a disabled or selected item should not close the dropdown
     e.stopPropagation()
     return
   }
+
   emit('selected', props.item)
 }
 </script>
@@ -62,102 +54,55 @@ const handleClick = (e: MouseEvent): void => {
 <style lang="scss" scoped>
 @import '@/styles/tmp-variables';
 
-.k-select-item {
-  list-style: none !important;
-  margin-bottom: var(--kui-space-20, $kui-space-20);
-
-  .k-select-item-container {
-    display: block !important;
-  }
+.select-item {
+  list-style: none;
 
-  &:last-of-type {
-    margin-bottom: var(--kui-space-0, $kui-space-0) !important;
+  .select-item-container {
+    display: block;
   }
 
   button {
     align-items: center;
     background-color: var(--kui-color-background, $kui-color-background);
     border: none;
-    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
     display: flex;
-    font-family: var(--kui-font-family-text, $kui-font-family-text);
-    font-size: var(--kui-font-size-20, $kui-font-size-20);
-    font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    line-height: var(--kui-line-height-40, $kui-line-height-40);
-    padding-left: var(--kui-space-20, $kui-space-20);
+    padding: var(--kui-space-0, $kui-space-0);
     text-align: left;
     width: 100%;
 
-    &:not(:disabled) {
-      cursor: pointer;
+    .select-item-label {
+      @include selectItemDefaults;
     }
 
-    &:disabled {
-      cursor: not-allowed;
+    &:not(:disabled) {
+      cursor: pointer;
 
-      .k-select-item-label {
-        opacity: 0.6;
+      &:hover {
+        .select-item-label {
+          background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
+        }
       }
     }
 
-    .k-select-item-label {
-      color: var(--kui-color-text, $kui-color-text);
-      font-size: var(--kui-font-size-30, $kui-font-size-30);
-      font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
-      line-height: var(--kui-line-height-30, $kui-line-height-30);
-      margin-right: var(--kui-space-40, $kui-space-40) !important;
-      padding: var(--kui-space-40, $kui-space-40);
-      width: auto;
-
-      :deep(.select-item-label) {
-        color: var(--kui-color-text, $kui-color-text);
-        font-size: var(--kui-font-size-30, $kui-font-size-30);
-        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-        margin-bottom: var(--kui-space-20, $kui-space-20);
-      }
-
-      :deep(.select-item-desc) {
-        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-        font-size: var(--kui-font-size-30, $kui-font-size-30);
-        font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+    &.selected {
+      .select-item-label {
+        background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
+        color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger);
       }
     }
 
-    .kong-icon:not(.selected-item-icon) {
-      margin-right: var(--kui-space-50, $kui-space-50);
-    }
+    &:disabled {
+      cursor: not-allowed;
 
-    .k-select-selected-icon-container {
-      color: $tmp-color-blue-200;
-      height: 24px;
-      margin-bottom: var(--kui-space-auto, $kui-space-auto);
-      margin-left: var(--kui-space-auto, $kui-space-auto);
-      margin-top: var(--kui-space-auto, $kui-space-auto);
-      width: 24px;
-
-      .kong-icon {
-        display: flex;
-        position: relative;
-        right: 0;
-        top: 0;
-        transform: none;
+      .select-item-label {
+        color: var(--kui-color-text-disabled, $kui-color-text-disabled);
       }
-    }
 
-    &:not(:disabled):hover {
-      background-color: var(--kui-color-background-disabled, $kui-color-background-disabled);
-      color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
-    }
-
-    &.selected {
-      background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
-      color: var(--kui-color-text-primary, $kui-color-text-primary);
-      font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    }
-
-    &.danger {
-      color: var(--kui-color-text-danger, $kui-color-text-danger);
+      &.selected {
+        .select-item-label {
+          background-color: var(--kui-color-background-disabled, $kui-color-background-disabled);
+        }
+      }
     }
   }
 }
diff --git a/src/components/KSelect/KSelectItems.vue b/src/components/KSelect/KSelectItems.vue
index 69f073412f..c4a7b1834b 100644
--- a/src/components/KSelect/KSelectItems.vue
+++ b/src/components/KSelect/KSelectItems.vue
@@ -15,9 +15,12 @@
   <div
     v-for="group in groups"
     :key="`${group}-group`"
-    class="k-select-group"
+    class="select-group"
+    data-propagate-clicks="false"
   >
-    <span class="k-select-group-title">
+    <span
+      class="select-group-title"
+    >
       {{ group }}
     </span>
     <KSelectItem
@@ -67,18 +70,18 @@ const getGroupItems = (group: string) => props.items?.filter(item => item.group
 </script>
 
 <style lang="scss" scoped>
-.k-select-group {
-  margin-bottom: var(--kui-space-20, $kui-space-20) !important;
+.select-group {
+  margin-bottom: var(--kui-space-20, $kui-space-20);
 
-  .k-select-group-title {
+  .select-group-title {
     color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-    display: block !important;
+    display: block;
+    font-family: var(--kui-font-family-text, $kui-font-family-text);
     font-size: var(--kui-font-size-20, $kui-font-size-20);
-    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-    margin-bottom: var(--kui-space-20, $kui-space-20);
-    padding: var(--kui-space-40, $kui-space-40);
-    text-transform: uppercase;
-    user-select: none;
+    font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
+    line-height: var(--kui-line-height-20, $kui-line-height-20);
+    padding: var(--kui-space-50, $kui-space-50);
+    pointer-events: none;
   }
 }
 </style>
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 6dc3013d8b..a9f27c1a90 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -263,8 +263,8 @@ describe('KTable', () => {
       })
 
       cy.getTestId('k-table-pagination').should('be.visible')
-      cy.getTestId('k-select-input').click()
-      cy.getTestId('k-select-item-1').click({ multiple: true, force: true })
+      cy.getTestId('page-size-dropdown-trigger').click()
+      cy.get('[data-testid="dropdown-item-trigger"][value="1"]').click()
       cy.getTestId('next-btn').find('a').click()
       cy.get('.pagination-button').should('contain.text', 2 + '')
       cy.get('.k-table').find('tr').should('have.length', 4)
@@ -282,8 +282,8 @@ describe('KTable', () => {
       })
 
       cy.getTestId('k-table-pagination').should('be.visible')
-      cy.getTestId('k-select-input').click()
-      cy.getTestId('k-select-item-15').click({ multiple: true, force: true })
+      cy.getTestId('page-size-dropdown-trigger').click()
+      cy.get('[data-testid="dropdown-item-trigger"][value="15"]').click({ multiple: true, force: true })
       cy.getTestId('next-btn').should('exist')
       cy.get('.k-table').find('tr').should('have.length', 16)
     })
@@ -305,8 +305,8 @@ describe('KTable', () => {
       })
 
       cy.getTestId('k-table-pagination').should('be.visible')
-      cy.getTestId('k-select-input').click()
-      cy.getTestId('k-select-item-3').click({ multiple: true, force: true })
+      cy.getTestId('page-size-dropdown-trigger').click()
+      cy.get('[data-testid="dropdown-item-trigger"][value="3"]').click({ multiple: true, force: true })
       cy.getTestId('next-btn').find('a').click()
       cy.get('.pagination-button.active').should('contain.text', 2 + '')
       cy.get('.k-table').find('tr').should('have.length', 13)
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index f2843986cc..f2b3edbe50 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,5 +1,5 @@
 @import "@/styles/mixins/inputs";
-@import "@/styles/mixins/labels";
+@import "@/styles/mixins/label";
 @import "@/styles/mixins/input-select";
 @import "@/styles/mixins/cards";
 @import "@/styles/mixins/badges";
diff --git a/src/styles/mixins/_input-text.scss b/src/styles/mixins/_input-text.scss
index 47ed92008d..b447246978 100644
--- a/src/styles/mixins/_input-text.scss
+++ b/src/styles/mixins/_input-text.scss
@@ -21,7 +21,8 @@
   box-shadow: var(--kui-shadow-border, $kui-shadow-border);
   box-sizing: border-box; // Ensure the padding is calculated in the element's width
   outline: none;
-  padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50); // $kInputPaddingX, $kTextAreaPaddingY
+  padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50); // $kInputPaddingX, $kTextAreaPaddingY, $kSelectInputPaddingX, $kSelectInputPaddingY
+  text-overflow: ellipsis;
   transition: box-shadow $kongponentsTransitionDurTimingFunc;
   width: 100%;
 
diff --git a/src/styles/mixins/_inputs.scss b/src/styles/mixins/_inputs.scss
index 706701a8d4..8c6f5e33eb 100644
--- a/src/styles/mixins/_inputs.scss
+++ b/src/styles/mixins/_inputs.scss
@@ -10,5 +10,5 @@
   font-family: var(--kui-font-family-text, $kui-font-family-text);
   font-size: var(--kui-font-size-20, $kui-font-size-20);
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-  line-height: var(--kui-line-height-20, $kui-line-height-20);
+  line-height: var(--kui-line-height-20, $kui-line-height-20); // $kSelectInputHelpTextHeight
 }
diff --git a/src/styles/mixins/_labels.scss b/src/styles/mixins/_label.scss
similarity index 100%
rename from src/styles/mixins/_labels.scss
rename to src/styles/mixins/_label.scss
diff --git a/src/types/select.ts b/src/types/select.ts
index b03f336df7..8a99066551 100644
--- a/src/types/select.ts
+++ b/src/types/select.ts
@@ -1,5 +1,3 @@
-import type { AnyElementOf } from '@/types/utils'
-
 export interface SelectItem extends Record<string, any> {
   label: string
   value: string | number
@@ -9,9 +7,9 @@ export interface SelectItem extends Record<string, any> {
   group?: string
 }
 
-export interface SelectFilterFnParams {
-  items: SelectItem[]
+export interface SelectFilterFunctionParams {
   query: string
+  items: SelectItem[]
 }
 
 export interface SelectItemWithGroup extends SelectItem {
@@ -19,7 +17,3 @@ export interface SelectItemWithGroup extends SelectItem {
 }
 
 export type SelectDropdownFooterTextPosition = 'sticky' | 'static'
-
-export const SelectAppearanceArray = ['dropdown', 'select', 'button'] as const
-
-export type SelectAppearance = AnyElementOf<typeof SelectAppearanceArray>
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
index 0dfd8accea..bfdfb37820 100644
--- a/src/utilities/index.ts
+++ b/src/utilities/index.ts
@@ -1,3 +1,4 @@
 export { copyTextToClipboard } from './copyTextToClipboard'
 export { debounce } from './debounce'
 export { isValidUrl } from './urls'
+export { sanitizeInput } from './sanitizeInput'
diff --git a/src/utilities/sanitizeInput.ts b/src/utilities/sanitizeInput.ts
new file mode 100644
index 0000000000..79da2f4ed4
--- /dev/null
+++ b/src/utilities/sanitizeInput.ts
@@ -0,0 +1,14 @@
+/**
+ * Sanitizes input to prevent XSS attacks.
+ * @param input The input to sanitize.
+ * @returns The sanitized input.
+ */
+
+export function sanitizeInput(input: string): string {
+  return input
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}