diff --git a/docs/components/slideout.md b/docs/components/slideout.md
index b9196ab18c..30c339189e 100644
--- a/docs/components/slideout.md
+++ b/docs/components/slideout.md
@@ -1,299 +1,356 @@
 # Slideout
 
-**KSlideout** - provides a container/wrapper to show content that may not always be important to show all of the time. It is a user-initiated component and should only show with a click.
-
-Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderless/toggle) component. This allows us to easily toggle the open state without needing to set a data prop in the parent component.
-
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+KSlideout is a slide-out overlay container with optional backdrop that displays over the page content.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    :visible="data.slideoutVisible"
+    title="Slideout Content"
+    @close="data.slideoutVisible = false"
+  >
+    <KTabs
+      :tabs="[
+        {
+          hash: '#tab1',
+          title: 'Tab 1'
+        },
+        {
+          hash: '#tab2',
+          title: 'Tab 2'
+        }
+      ]"
+    >
+      <template #tab1>
+        <p>Tab 1 content</p>
+      </template>
+      <template #tab2>
+        <p>Tab 2 content</p>
+      </template>
+      <template #tab3>
+        <p>Tab 3 content</p>
+      </template>
+    </KTabs>
+  </KSlideout>
+</KComponent>
 
 ```html
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+<KSlideout
+  :visible="slideoutVisible"
+  title="Slideout Content"
+  @close="hideSlideout"
+>
+  <KTabs :tabs="tabs">
+    <template #tab1>
+      <p>Tab 1 content</p>
+    </template>
+    <template #tab2>
+      <p>Tab 2 content</p>
+    </template>
+    <template #tab3>
+      <p>Tab 3 content</p>
+    </template>
+  </KTabs>
+</KSlideout>
 ```
 
 ## Props
 
-### isVisible
-
-* **Type**: `boolean`
-* **Required**: no
-* **Default**: `false`
-
-Tells the component whether or not to render the open panel.
+### visible
+
+Boolean to show/hide the slideout. Defaults to `false`.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
+
+```vue
+<template>
+  <KSlideout
+    :visible="slideoutVisible"
+    @close="hideSlideout"
+  />
+</template>
+
+<script setup lang="ts">
+const slideoutVisible = ref<boolean>(false)
+
+const hideSlideout = () => {
+  slideoutVisible.value = false
+}
+</script>
+```
 
-### closeButtonAlignment
+### title
 
-* **Type**: `'start' | 'end'`
-* **Required**: no
-* **Default**: `'start'`
+A string to be displayed as slideout title. Can also be [slotted](#title-1).
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    title="Slideout With A Title"
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
 
-Controls the close button alignment, can be `start` (default) or `end`.
+```html
+<KSlideout
+  title="Slideout With A Title"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
+```
 
 ### offsetTop
 
-* **Type**: `number | string`
-* **Required**: no
-* **Default**: `0`
+Allows a host app to define the offset from the top of the page. If the value is a number, it will be treated as a pixel value (e.g. `60` becomes `'60px'`); otherwise, it will be used as-is. Defaults to `0`.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    offset-top="64px"
+    title="Slideout With Offset"
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
 
-Allows a host app to define the offset from the top of the page. If the value is a number, it will be treated as a pixel value (e.g. `60` becomes `'60px'`); otherwise, it will be used as-is.
+```html
+<KSlideout
+  offset-top="64px"
+  title="Slideout With Offset"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
+```
 
 ### hasOverlay
 
-* **Type**: `boolean`
-* **Required**: no
-* **Default**: `true`
-
-Tells the component whether or not to enable / disable overlay when the slideout content is visible, defaults to `true`.
-
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel With Disabled Overlay</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+A boolean whether or not the slideout should have background overlay. Defaults to `true`.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    :has-overlay="false"
+    title="Slideout Without Overlay"
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
 
 ```html
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel</KButton>
-        <KSlideout :is-visible="isToggled.value" @close="toggle" has-overlay close-button-alignment="end">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+<KSlideout
+  :has-overlay="false"
+  title="Slideout Without Overlay"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
 ```
 
-### preventCloseOnBlur
+### closeOnBlur
+
+A boolean whether on not the slideout should close when user clicks outside the slideout content area. Defaults to `true`.
 
-* **Type**: `boolean`
-* **Required**: no
-* **Default**: `false`
+When set to false, the user can only close the slideout by pressing <kbd>Escape</kbd> or clicking the close button.
 
-Persists the slideout, ignoring clicks outside of the panel. Defaults to `false`.
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
 
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle persistent Panel</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false"
-    prevent-close-on-blur close-button-alignment="end" title="GET/account/kong.docs.dev">
-      <div>
-        <h2>Lorem ipsum turkey bacon</h2>
-        <p>This panel can only be closed via Escape key, or the Close button in the upper right.</p>
-      </div>
-    </KSlideout>
-  </div>
-</KToggle>
+  <KSlideout
+    :close-on-blur="false"
+    title="Click On Close Icon To Dismiss"
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
 
 ```html
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle persistent Panel</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false"
-    prevent-close-on-blur close-button-alignment="end" title="GET/account/kong.docs.dev">
-      <div>
-        <h2>Lorem ipsum turkey bacon</h2>
-        <p>This panel can only be closed via Escape key, or the Close button in the upper right.</p>
-      </div>
-    </KSlideout>
-  </div>
-</KToggle>
+<KSlideout
+  :close-on-blur="false"
+  title="Click On Close Icon To Dismiss"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
 ```
 
-### title
+### maxWidth
 
-* **Type**: `string`
-* **Required**: no
-* **Default**: `''`
-
-This prop takes a string that will be displayed as the title of the slide-out.
-
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel With Title</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="GET/account/kong.admin.servicekjagfabxncbadrtyuwefef">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+Controls width of the slideout content area. Default value is `500px`.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    max-width="80%"
+    title="Very Wide Slideout"
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  />
+</KComponent>
 
 ```html
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel With Title</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="GET/account/kong.admin.servicekjagfabxncbadrtyuwefef">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+<KSlideout
+  max-width="80%"
+  title="Very Wide Slideout"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
 ```
 
-### maxWidth
+## Slots
 
-* **Type**: `string`
-* **Required**: no
-* **Default**: `500px`
-
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel Custom Width</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="Width test" max-width="650px">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+### default
+
+Slot for slideout content. The component container will have a scrollbar, should the content overflow.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    :visible="data.slideoutVisible"
+    title="Slideout Content"
+    @close="data.slideoutVisible = false"
+  >
+    <div class="default-slot-example">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis. Netus et malesuada fames ac turpis. Donec massa sapien faucibus et molestie ac feugiat. Cursus turpis massa tincidunt dui. Eget nullam non nisi est sit amet facilisis magna. Porttitor eget dolor morbi non arcu risus quis. Tempus urna et pharetra pharetra massa massa ultricies mi. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Elit eget gravida cum sociis natoque penatibus et. Lobortis mattis aliquam faucibus purus in massa tempor nec. Aliquet eget sit amet tellus cras adipiscing enim eu. Diam vulputate ut pharetra sit amet aliquam. Ultricies mi quis hendrerit dolor magna eget est lorem. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a scelerisque purus.</p>
+      <p>Tincidunt dui ut ornare lectus sit amet. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Egestas erat imperdiet sed euismod nisi porta lorem. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Sit amet cursus sit amet dictum sit amet justo donec. Augue mauris augue neque gravida in fermentum. Tristique risus nec feugiat in. Purus viverra accumsan in nisl. Massa sapien faucibus et molestie ac feugiat. Pharetra magna ac placerat vestibulum. Consequat mauris nunc congue nisi vitae.</p>
+      <p>Turpis tincidunt id aliquet risus feugiat in ante. Congue nisi vitae suscipit tellus. Tincidunt id aliquet risus feugiat in ante. Tincidunt ornare massa eget egestas purus. Velit dignissim sodales ut eu sem. Suspendisse sed nisi lacus sed. At lectus urna duis convallis convallis tellus id interdum velit. Dignissim diam quis enim lobortis. Ullamcorper sit amet risus nullam eget. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p>
+      <p>Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Dui vivamus arcu felis bibendum ut. Enim neque volutpat ac tincidunt vitae semper. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Nulla aliquet enim tortor at auctor urna nunc id. Faucibus in ornare quam viverra orci sagittis eu volutpat. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Amet tellus cras adipiscing enim eu turpis. Aliquet risus feugiat in ante. Cursus in hac habitasse platea dictumst. Fringilla ut morbi tincidunt augue interdum. Elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut sem nulla. Nisi vitae suscipit tellus mauris a. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Tortor at risus viverra adipiscing at in tellus integer.</p>
+      <p>Porta lorem mollis aliquam ut porttitor leo a. Egestas diam in arcu cursus euismod quis viverra. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Sociis natoque penatibus et magnis dis parturient montes nascetur. Malesuada nunc vel risus commodo viverra maecenas. Viverra nam libero justo laoreet sit amet. Eu augue ut lectus arcu. Sagittis eu volutpat odio facilisis mauris. Etiam non quam lacus suspendisse faucibus interdum posuere. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Ut enim blandit volutpat maecenas.</p>
+      <p>Gravida quis blandit turpis cursus in hac habitasse platea. Ornare quam viverra orci sagittis eu volutpat odio. Habitant morbi tristique senectus et netus. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nec dui nunc mattis enim ut tellus. Nunc eget lorem dolor sed viverra ipsum nunc. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Varius vel pharetra vel turpis nunc eget lorem dolor. Cursus risus at ultrices mi tempus. Velit scelerisque in dictum non. Aliquet bibendum enim facilisis gravida neque convallis a.</p>
+      <p>Enim ut tellus elementum sagittis vitae et leo duis. Luctus venenatis lectus magna fringilla. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Vitae congue eu consequat ac felis donec et odio pellentesque. Purus viverra accumsan in nisl nisi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Vestibulum lectus mauris ultrices eros in cursus. Ipsum suspendisse ultrices gravida dictum fusce ut. Et netus et malesuada fames ac turpis egestas integer eget. Sed lectus vestibulum mattis ullamcorper.</p>
+    </div>
+  </KSlideout>
+</KComponent>
 
 ```html
-<KToggle v-slot="{ isToggled, toggle }">
-  <div>
-    <KButton @click="toggle">Toggle Panel Custom Width</KButton>
-    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="Width test" max-width="650px">
-      <div>
-        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
-        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
-      </div>
-      <KButton appearance="primary">Buttons</KButton>
-      <KCard class="vertical-spacing">
-        <template #body>
-          Something in a KCard
-        </template>
-      </KCard>
-      <KAlert
-        alert-message="Or even an alert!"
-        class="vertical-spacing" />
-    </KSlideout>
-  </div>
-</KToggle>
+<KSlideout
+  :visible="slideoutVisible"
+  title="Slideout Content"
+  @close="hideSlideout"
+>
+  <p>Lorem ipsum dolor sit amet...</p>
+</KSlideout>
 ```
 
-## Slots
+### title
 
-- `default` - used to place content into the slideout panel
+Slot for custom title.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ slideoutVisible: false }"
+>
+  <KButton
+    @click="data.slideoutVisible = true"
+  >
+    Slideout
+  </KButton>
+
+  <KSlideout
+    :visible="data.slideoutVisible"
+    @close="data.slideoutVisible = false"
+  >
+    <template #title>
+      <KongIcon />
+      Custom Title
+    </template>
+  </KSlideout>
+</KComponent>
 
 ```html
-<KSlideout :is-visible="isToggled" @close="toggle">
-  <div>
-    <h1>Default Slot</h1>
-    <p>Anything here will render in the panel</p>
-  </div>
+<KSlideout
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+>
+  <template #title>
+    <KongIcon />
+    Custom Title
+  </template>
 </KSlideout>
 ```
 
-- `before-title` - used to customize the header to add content before title
-- `after-title` - used to customize the header to add content after title
-
 ## Events
 
-- `close` - Emitted when the close button is clicked, anything outside the panel is clicked, or the `esc` key is pressed.
+### close
+
+Emitted when the close icon is clicked, anything outside the slideout content area is clicked (when [`closeOnBlur` prop](#closeonblur) is set to `false`), or the `esc` key is pressed.
+
+<script setup lang="ts">
+import { KongIcon } from '@kong/icons'
+</script>
 
 <style lang="scss" scoped>
-.vertical-spacing {
-  margin-top: $kui-space-40;
+.default-slot-example {
+  p {
+    margin-top: $kui-space-0;
+    margin-bottom: $kui-space-40;
+  }
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 35bd8501ef..fe3baa2541 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -533,6 +533,26 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KSlideout
 
+#### Props
+
+* `isVisible` prop has been changed to `visible`
+* `preventCloseOnBlur` prop has been removed in favor of new `closeOnBlur` prop
+* `closeButtonAlignment` prop has been removed
+
+#### Slots
+
+* `before-title` slot has been removed (you can use the newly added `title` slot instead)
+* `after-title` slot has been removed (you can use the newly added `title` slot instead)
+
+#### Structure
+
+* `panel` class has been replaced with `slideout-container` class
+* `slideout-panel` `data-testid` attribute has been replaced with `slideout-container`
+* `k-slideout-header-content` class has been replaced with `slideout-header` class
+* `close-button-start` and `close-button-end` `data-testid` attributes have been removed. Use the `slideout-close-icon` `data-testid` attribute instead.
+* `k-slideout-main-title` class and `k-slideout-title` class and `data-testid` attribute were been replaced with `slideout-title`
+* `content` class has been replaced with `slideout-content` class
+* `content-card` class has been removed
 
 ### KStepper
 
diff --git a/sandbox/index.ts b/sandbox/index.ts
index 5a914d3699..3fdf192b38 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -34,6 +34,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KRadio', to: { name: 'radio' } },
   { name: 'KSegmentedControl', to: { name: 'segmentedcontrol' } },
   { name: 'KSelect', to: { name: 'select' } },
+  { name: 'KSlideout', to: { name: 'slideout' } },
   { name: 'KTable', to: { name: 'table' } },
   { name: 'KTabs', to: { name: 'tabs' } },
   { name: 'KTextarea', to: { name: 'textarea' } },
diff --git a/sandbox/pages/SandboxSlideout.vue b/sandbox/pages/SandboxSlideout.vue
new file mode 100644
index 0000000000..2478caeaa5
--- /dev/null
+++ b/sandbox/pages/SandboxSlideout.vue
@@ -0,0 +1,197 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KSlideout"
+  >
+    <div class="kslideout-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A9543&mode=dev&t=USFhEkebi5cmYxaK-1">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="visible">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            title="Long Slideout Title Wraps To Next Line Instead Of Overflowing"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="offsetTop">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            :offset-top="100"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hasOverlay">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            :has-overlay="false"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="closeOnBlur">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            :close-on-blur="false"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="maxWidth">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            max-width="90%"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          />
+        </KComponent>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="default">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            title="Slotted Title"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          >
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis. Netus et malesuada fames ac turpis. Donec massa sapien faucibus et molestie ac feugiat. Cursus turpis massa tincidunt dui. Eget nullam non nisi est sit amet facilisis magna. Porttitor eget dolor morbi non arcu risus quis. Tempus urna et pharetra pharetra massa massa ultricies mi. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Elit eget gravida cum sociis natoque penatibus et. Lobortis mattis aliquam faucibus purus in massa tempor nec. Aliquet eget sit amet tellus cras adipiscing enim eu. Diam vulputate ut pharetra sit amet aliquam. Ultricies mi quis hendrerit dolor magna eget est lorem. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a scelerisque purus.</p>
+            <p>Tincidunt dui ut ornare lectus sit amet. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Egestas erat imperdiet sed euismod nisi porta lorem. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Sit amet cursus sit amet dictum sit amet justo donec. Augue mauris augue neque gravida in fermentum. Tristique risus nec feugiat in. Purus viverra accumsan in nisl. Massa sapien faucibus et molestie ac feugiat. Pharetra magna ac placerat vestibulum. Consequat mauris nunc congue nisi vitae.</p>
+            <p>Turpis tincidunt id aliquet risus feugiat in ante. Congue nisi vitae suscipit tellus. Tincidunt id aliquet risus feugiat in ante. Tincidunt ornare massa eget egestas purus. Velit dignissim sodales ut eu sem. Suspendisse sed nisi lacus sed. At lectus urna duis convallis convallis tellus id interdum velit. Dignissim diam quis enim lobortis. Ullamcorper sit amet risus nullam eget. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p>
+            <p>Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Dui vivamus arcu felis bibendum ut. Enim neque volutpat ac tincidunt vitae semper. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Nulla aliquet enim tortor at auctor urna nunc id. Faucibus in ornare quam viverra orci sagittis eu volutpat. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Amet tellus cras adipiscing enim eu turpis. Aliquet risus feugiat in ante. Cursus in hac habitasse platea dictumst. Fringilla ut morbi tincidunt augue interdum. Elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut sem nulla. Nisi vitae suscipit tellus mauris a. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Tortor at risus viverra adipiscing at in tellus integer.</p>
+            <p>Porta lorem mollis aliquam ut porttitor leo a. Egestas diam in arcu cursus euismod quis viverra. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Sociis natoque penatibus et magnis dis parturient montes nascetur. Malesuada nunc vel risus commodo viverra maecenas. Viverra nam libero justo laoreet sit amet. Eu augue ut lectus arcu. Sagittis eu volutpat odio facilisis mauris. Etiam non quam lacus suspendisse faucibus interdum posuere. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Ut enim blandit volutpat maecenas.</p>
+            <p>Gravida quis blandit turpis cursus in hac habitasse platea. Ornare quam viverra orci sagittis eu volutpat odio. Habitant morbi tristique senectus et netus. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nec dui nunc mattis enim ut tellus. Nunc eget lorem dolor sed viverra ipsum nunc. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Varius vel pharetra vel turpis nunc eget lorem dolor. Cursus risus at ultrices mi tempus. Velit scelerisque in dictum non. Aliquet bibendum enim facilisis gravida neque convallis a.</p>
+            <p>Enim ut tellus elementum sagittis vitae et leo duis. Luctus venenatis lectus magna fringilla. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Vitae congue eu consequat ac felis donec et odio pellentesque. Purus viverra accumsan in nisl nisi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Vestibulum lectus mauris ultrices eros in cursus. Ipsum suspendisse ultrices gravida dictum fusce ut. Et netus et malesuada fames ac turpis egestas integer eget. Sed lectus vestibulum mattis ullamcorper.</p>
+          </KSlideout>
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ slideoutVisible: false }"
+        >
+          <KButton
+            @click="data.slideoutVisible = true"
+          >
+            KSlideout
+          </KButton>
+
+          <KSlideout
+            title="Slotted Title"
+            :visible="data.slideoutVisible"
+            @close="data.slideoutVisible = false"
+          >
+            <template #title>
+              <KongIcon />
+              Custom Long Title That Wraps To Next Line
+            </template>
+          </KSlideout>
+        </KComponent>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { inject } from 'vue'
+import { KongIcon } from '@kong/icons'
+</script>
+
+<style lang="scss" scoped>
+.kslideout-sandbox {
+  p {
+    margin: 0;
+  }
+}
+</style>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 891ffd53f2..7f5180b048 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -122,6 +122,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Select Sandbox' },
     component: () => import('../pages/SandboxSelect.vue'),
   },
+  {
+    path: '/slideout',
+    name: 'slideout',
+    meta: { title: 'Slideout Sandbox' },
+    component: () => import('../pages/SandboxSlideout.vue'),
+  },
   {
     path: '/table',
     name: 'table',
diff --git a/src/components/KModal/KModal.vue b/src/components/KModal/KModal.vue
index dcde4a397a..98ea7abeac 100644
--- a/src/components/KModal/KModal.vue
+++ b/src/components/KModal/KModal.vue
@@ -46,6 +46,9 @@
                 tabindex="0"
                 title="Close"
                 @click="$emit('cancel')"
+                @keydown.space.prevent
+                @keyup.enter="$emit('cancel')"
+                @keyup.space="$emit('cancel')"
               />
             </div>
             <div
@@ -252,7 +255,6 @@ watch(() => props.visible, async (visible: boolean): Promise<void> => {
 }, { immediate: true })
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
   toggleEventListeners(false)
 })
 </script>
diff --git a/src/components/KSlideout/KSlideout.cy.ts b/src/components/KSlideout/KSlideout.cy.ts
index 13307b96ab..eb1e17221d 100644
--- a/src/components/KSlideout/KSlideout.cy.ts
+++ b/src/components/KSlideout/KSlideout.cy.ts
@@ -4,56 +4,52 @@ import { h } from 'vue'
 
 describe('KSlideout', () => {
   it('renders default slot', () => {
+    const contentHeading = 'What\'s up default slot'
+    const contentSentence = 'Default slots are the easiest'
+
     mount(KSlideout, {
       props: {
-        isVisible: true,
+        visible: true,
       },
       slots: {
         default: () => h('div', {}, [
-          h('h1', {}, 'What\'s up default slot'),
-          h('p', {}, 'Default slots are the easiest'),
+          h('h1', {}, contentHeading),
+          h('p', {}, contentSentence),
         ]),
       },
     })
 
-    cy.get('h1').should('be.visible')
-    cy.get('p').should('be.visible')
+    cy.get('h1').should('be.visible').should('have.text', contentHeading)
+    cy.get('p').should('be.visible').should('have.text', contentSentence)
   })
 
   it('renders props when passed', () => {
     const titleProp = 'Hello!'
-    const closeButtonAlignmentProp = 'end'
 
     mount(KSlideout, {
       props: {
-        isVisible: true,
+        visible: true,
         title: titleProp,
-        closeButtonAlignment: closeButtonAlignmentProp,
       },
     })
 
-    cy.getTestId('k-slideout-title').should('exist')
-    cy.getTestId('k-slideout-title').should('be.visible')
+    cy.getTestId('slideout-title').should('be.visible').should('have.text', titleProp)
   })
 
-  it('renders cancel button on right when prop is used', () => {
-    const closeButtonAlignmentProp = 'end'
-
+  it('renders close icon on right', () => {
     mount(KSlideout, {
       props: {
-        isVisible: true,
-        closeButtonAlignment: closeButtonAlignmentProp,
+        visible: true,
       },
     })
 
-    cy.getTestId('close-button-end').should('exist')
-    cy.getTestId('close-button-end').should('be.visible')
+    cy.getTestId('slideout-close-icon').should('be.visible')
   })
 
-  it('emits close when panel-background is clicked', () => {
+  it('emits close event when backdrop is clicked', () => {
     mount(KSlideout, {
       props: {
-        isVisible: true,
+        visible: true,
         onClose: cy.spy().as('onCloseSpy'),
       },
     }).then(({ wrapper }) => wrapper)
@@ -64,16 +60,16 @@ describe('KSlideout', () => {
 
     cy.get('@onCloseSpy').should('have.been.called')
 
-    cy.get('.panel-background').click({ force: true })
+    cy.get('.slideout-backdrop').click()
       .then(() => {
         cy.get('@onCloseSpy').should('have.been.called')
       })
   })
 
-  it('emits close when esc key pressed', () => {
+  it('emits close event when esc key pressed', () => {
     mount(KSlideout, {
       props: {
-        isVisible: true,
+        visible: true,
       },
     })
 
@@ -82,10 +78,10 @@ describe('KSlideout', () => {
     })
   })
 
-  it('does not emit close event when persist prop is true', () => {
+  it('does not emit close event when closeOnBlur prop is false', () => {
     mount(KSlideout, {
       props: {
-        isVisible: true,
+        visible: true,
         preventCloseOnBlur: true,
       },
     }).then(({ wrapper }) => wrapper)
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index ac8f8fdc3c..e6b698c57c 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -1,79 +1,59 @@
 <template>
   <div class="k-slideout">
-    <transition name="fade">
+    <Transition name="kongponents-fade-transition">
       <div
-        v-if="isVisible"
-        :class="hasOverlay ? 'panel-background' : 'panel-background-transparent'"
+        v-if="visible"
+        class="slideout-backdrop"
+        :class="{ 'backdrop-transparent': !hasOverlay }"
       />
-    </transition>
-    <transition name="slide">
+    </Transition>
+    <Transition name="kongponents-slide-in-transition">
       <div
-        v-if="isVisible"
-        ref="slideOutRef"
-        class="panel"
-        :class="{ 'is-visible': isVisible, 'border-styles': !hasOverlay }"
-        data-testid="slideout-panel"
+        v-if="visible"
+        ref="slideoutContainerElement"
+        class="slideout-container"
+        data-testid="slideout-container"
       >
-        <div class="k-slideout-header-content">
+        <div class="slideout-header">
           <div
-            v-if="hasBeforeTitle"
-            class="k-slideout-before-title"
+            v-if="title || $slots.title"
+            class="slideout-title"
+            data-testid="slideout-title"
           >
-            <slot name="before-title" />
-          </div>
-
-          <!-- title -->
-          <div class="k-slideout-main-title">
-            <p
-              class="k-slideout-title"
-              data-testid="k-slideout-title"
-              :title="title"
-            >
+            <slot name="title">
               {{ title }}
-            </p>
+            </slot>
           </div>
-
-          <div
-            v-if="hasAfterTitle"
-            class="k-slideout-after-title"
-          >
-            <slot name="after-title" />
-          </div>
-        </div>
-
-        <!-- cancelButton -->
-        <button
-          :class="closeButtonAlignment === 'start' ? 'close-button-start' : 'close-button-end'"
-          :data-testid="closeButtonAlignment === 'start' ? 'close-button-start' : 'close-button-end'"
-          @click="(event: any) => emit('close')"
-        >
-          <KIcon
-            :color="KUI_COLOR_TEXT_NEUTRAL_STRONGER"
-            icon="close"
-            :size="KUI_ICON_SIZE_50"
+          <CloseIcon
+            class="slideout-close-icon"
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            data-testid="slideout-close-icon"
+            role="button"
+            tabindex="0"
+            title="Close"
+            @click="$emit('close')"
+            @keydown.space.prevent
+            @keyup.enter="$emit('close')"
+            @keyup.space="$emit('close')"
           />
-        </button>
-
-        <div class="content">
-          <KCard class="content-card">
-            <slot />
-          </KCard>
+        </div>
+        <div class="slideout-content">
+          <slot />
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots, ref, onMounted, onUnmounted } from 'vue'
-import KCard from '@/components/KCard/KCard.vue'
-import KIcon from '@/components/KIcon/KIcon.vue'
+import { computed, ref, onUnmounted, watch } from 'vue'
 import useUtilities from '@/composables/useUtilities'
-import { KUI_ICON_SIZE_50, KUI_COLOR_TEXT_NEUTRAL_STRONGER } from '@kong/design-tokens'
 import { onClickOutside } from '@vueuse/core'
+import { CloseIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_NEUTRAL } from '@kong/design-tokens'
 
 const props = defineProps({
-  isVisible: {
+  visible: {
     type: Boolean,
     default: false,
   },
@@ -95,9 +75,9 @@ const props = defineProps({
     type: [Number, String],
     default: 0,
   },
-  preventCloseOnBlur: {
+  closeOnBlur: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   title: {
     type: String,
@@ -117,178 +97,159 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const slots = useSlots()
-const hasBeforeTitle = computed((): boolean => !!slots['before-title'])
-const hasAfterTitle = computed((): boolean => !!slots['after-title'])
 const { getSizeFromString } = useUtilities()
-const slideOutRef = ref(null)
+const slideoutContainerElement = ref<HTMLElement | null>(null)
+
+const offsetTopValue = computed((): string => {
+  if (typeof props.offsetTop === 'number') {
+    return getSizeFromString(String(props.offsetTop))
+  }
+
+  return props.offsetTop
+})
 
 onClickOutside(
-  slideOutRef,
+  slideoutContainerElement,
   (event) => {
-    if (event.isTrusted && !props.preventCloseOnBlur) {
+    if (event.isTrusted && props.closeOnBlur) {
       emit('close')
     }
   },
 )
 
 const handleClose = (e: any, forceClose = false): void => {
-  if ((props.isVisible && e.keyCode === 27) || forceClose) {
+  // close on escape key
+  if ((props.visible && e.keyCode === 27) || forceClose) {
     emit('close')
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleClose)
-})
+const toggleBodyScroll = (isScrollable: boolean): void => {
+  if (typeof document !== 'undefined') {
+    if (isScrollable) {
+      document.body.classList.remove('k-slideout-overflow-hidden')
+    } else {
+      document.body.classList.add('k-slideout-overflow-hidden')
+    }
+  }
+}
 
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleClose)
-})
+const toggleEventListeners = (isActive: boolean): void => {
+  if (typeof document !== 'undefined') {
+    if (isActive) {
+      document.addEventListener('keydown', handleClose)
+    } else {
+      document.removeEventListener('keydown', handleClose)
+    }
+  }
+}
 
-const offsetTopValue = computed((): string => {
-  if (typeof props.offsetTop === 'number') {
-    return getSizeFromString(String(props.offsetTop))
+watch(() => props.visible, async (visible: boolean): Promise<void> => {
+  if (visible) {
+    toggleBodyScroll(false)
+    toggleEventListeners(true)
+  } else {
+    toggleBodyScroll(true)
+    toggleEventListeners(false)
   }
+}, { immediate: true })
 
-  return props.offsetTop
+onUnmounted(() => {
+  toggleEventListeners(false)
 })
-
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/tmp-variables';
-
 .k-slideout {
-  .k-slideout-header-content {
-    display: flex;
-    .k-slideout-before-title,
-    .k-slideout-after-title {
-      margin-top: var(--kui-space-60, $kui-space-60);
-    }
-    .k-slideout-main-title {
-      // Prevents long, non-wrapping titles from triggering a horizontal scrollbar in the content area. This also allows `.k-slideout-title` to actually truncate its text content.
-      min-width: 0;
-
-      .k-slideout-title {
-        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-        flex:1;
-        font-size: var(--kui-font-size-40, $kui-font-size-40);
-        font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
-        line-height: var(--kui-line-height-40, $kui-line-height-40);
-        margin-left: var(--kui-space-50, $kui-space-50);
-        margin-right: var(--kui-space-100, $kui-space-100);
-        margin-top: var(--kui-space-60, $kui-space-60);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-  .panel {
+  .slideout-container {
     background-color: var(--kui-color-background, $kui-color-background);
+    border-left: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    box-shadow: var(--kui-shadow, $kui-shadow);
     display: flex;
     flex-direction: column;
+    gap: var(--kui-space-50, $kui-space-50);
     height: calc(100vh - v-bind('offsetTopValue'));
     max-width: v-bind('props.maxWidth');
     overflow-y: auto;
+    padding: var(--kui-space-70, $kui-space-70) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-70, $kui-space-70);
     position: fixed;
     right: 0;
     top: v-bind('offsetTopValue');
     width: 100%;
     z-index: 9999;
 
-    .close-button-start {
-      align-self: flex-start;
-      background: none;
-      border: none;
-      cursor: pointer;
+    .slideout-header {
       display: flex;
-      height: auto;
-      margin-left: var(--kui-space-50, $kui-space-50);
-      margin-top: var(--kui-space-50, $kui-space-50);
-      outline: inherit;
-      position: absolute;
-      transition: $tmp-animation-timing-2 ease;
-
-      &:focus{
-        box-shadow: 0 0 0 2px var(--kui-color-border-primary, $kui-color-border-primary);
+      justify-content: space-between;
+      padding-right: var(--kui-space-70, $kui-space-70);
+
+      .slideout-title {
+        display: flex;
+        flex: 1;
+        font-family: var(--kui-font-family-text, $kui-font-family-text);
+        font-size: var(--kui-font-size-60, $kui-font-size-60);
+        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+        gap: var(--kui-space-40, $kui-space-40);
+        letter-spacing: var(--kui-letter-spacing-minus-40, $kui-letter-spacing-minus-40);
+        line-height: var(--kui-line-height-50, $kui-line-height-50);
+        user-select: none;
+
+        :deep(#{$kongponentsKongIconSelector}) {
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral) !important;
+        }
       }
-    }
 
-    .close-button-end {
-      align-self: flex-end;
-      background: none;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      height: auto;
-      margin-right: var(--kui-space-50, $kui-space-50);
-      margin-top: var(--kui-space-50, $kui-space-50);
-      outline: inherit;
-      position: absolute;
-      transition: $tmp-animation-timing-2 ease;
+      .slideout-close-icon {
+        border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+        cursor: pointer;
+        margin-left: auto;
+        // margin-top: var(--kui-space-10, $kui-space-10);
+        outline: none;
 
-      &:focus{
-        box-shadow: 0 0 0 2px var(--kui-color-border-primary, $kui-color-border-primary);
-      }
-    }
+        &:hover, &:focus {
+          color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+        }
 
-    .content {
-      height: 100%;
-      -ms-overflow-style: none;  // IE 10+
-      scrollbar-width: none;  // Firefox
-      &::-webkit-scrollbar {
-        display: none;
+        &:focus-visible {
+          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+        }
       }
+    }
 
-      .content-card {
-        border: none;
-      }
+    .slideout-content {
+      box-sizing: border-box;
+      color: var(--kui-color-text, $kui-color-text);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--kui-font-family-text, $kui-font-family-text);
+      font-size: var(--kui-font-size-30, $kui-font-size-30);
+      font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+      line-height: var(--kui-line-height-30, $kui-line-height-30);
+      overflow-y: auto;
+      padding-right: var(--kui-space-70, $kui-space-70);
     }
   }
-}
 
-  .panel-background {
-    background: $tmp-color-black-45;
+  .slideout-backdrop {
+    background: var(--kui-color-background-overlay, $kui-color-background-overlay);
     bottom: 0;
     left: 0;
     position: fixed;
     right: 0;
     top: v-bind('offsetTopValue');
     z-index: 9999;
-  }
-
-  .panel-background-transparent {
-    background: transparent;
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: v-bind('offsetTopValue');
-    z-index: -1;
-  }
 
-  .border-styles {
-    border-left: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-    box-shadow: -2px 0px 5px $tmp-color-black-5;
+    &.backdrop-transparent {
+      background: var(--kui-color-background-transparent, $kui-color-background-transparent);
+      z-index: -1;
+    }
   }
+}
 </style>
 
 <style lang="scss">
-// @keyframes animations need to be un-scoped
-.k-slideout {
-  @keyframes slide {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(0%); }
-  }
-
-  .slide-enter-active { animation: slide .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); }
-
-  .slide-leave-active { animation: slide .3s ease reverse; }
-
-  .fade-enter-active, .fade-leave-active { transition: opacity 500ms;}
-
-  .fade-enter, .fade-leave-to { opacity: 0; }
+// keep unscoped to target body element
+body.k-slideout-overflow-hidden {
+  overflow: hidden;
 }
 </style>
diff --git a/src/styles/_transitions.scss b/src/styles/_transitions.scss
index 58f4f12064..92bbca5010 100644
--- a/src/styles/_transitions.scss
+++ b/src/styles/_transitions.scss
@@ -1,6 +1,6 @@
 @import "vars";
 
-/* 
+/*
 Kongponents Transitions 
 
 Styles for transitions using Vue native <Transition> component.
@@ -9,6 +9,8 @@ You don't need to import this file directly, it is imported by styles.scss, ther
 All transitions names must follow `kongponents-<name>-transition` pattern to avoid any conflicts with styles defined by the consuming apps.
 */
 
+// fade transition
+
 .kongponents-fade-transition-enter-active,
 .kongponents-fade-transition-leave-active {
   transition: opacity $kongponentsTransitionDurTimingFunc;
@@ -19,6 +21,25 @@ All transitions names must follow `kongponents-<name>-transition` pattern to avo
   opacity: 0;
 }
 
+// slide in transition/animation
+
+@keyframes kongponents-slide-in-animation {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.kongponents-slide-in-transition-enter-active {
+  animation: kongponents-slide-in-animation $kongponentsTransitionDurTimingFunc;
+}
+
+.kongponents-slide-in-transition-leave-active {
+  animation: kongponents-slide-in-animation $kongponentsTransitionDurTimingFunc reverse;
+}
+
 // slide up transition/animation
 
 @keyframes kongponents-slide-up-animation {