diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index c0da93f508e..5a16acaa9ca 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -3490,20 +3490,7 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": [
-        {
-          "event": "click",
-          "target": "window",
-          "capture": false,
-          "passive": false
-        },
-        {
-          "event": "keydown",
-          "target": "window",
-          "capture": false,
-          "passive": false
-        }
-      ]
+      "listeners": []
     },
     {
       "dirPath": "./src/components/dropdown-button",
@@ -9055,12 +9042,6 @@
           "event": "ix-select-item:labelChange",
           "capture": false,
           "passive": false
-        },
-        {
-          "event": "keydown",
-          "target": "window",
-          "capture": false,
-          "passive": false
         }
       ]
     },
@@ -9384,14 +9365,7 @@
         }
       ],
       "parts": [],
-      "listeners": [
-        {
-          "event": "pointerup",
-          "target": "window",
-          "capture": false,
-          "passive": true
-        }
-      ]
+      "listeners": []
     },
     {
       "dirPath": "./src/components/spinner",
diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
index 0dda845de84..25450d8256f 100644
--- a/packages/core/src/components/dropdown/dropdown.tsx
+++ b/packages/core/src/components/dropdown/dropdown.tsx
@@ -23,11 +23,11 @@ import {
   EventEmitter,
   h,
   Host,
-  Listen,
   Method,
   Prop,
   Watch,
 } from '@stencil/core';
+import { OnListener } from '../utils/listener';
 import { AlignedPlacement } from './placement';
 
 /**
@@ -285,9 +285,7 @@ export class Dropdown {
     }
   }
 
-  @Listen('click', {
-    target: 'window',
-  })
+  @OnListener<Dropdown>('click', (self) => self.show)
   clickOutside(event: PointerEvent) {
     const target = event.target as HTMLElement;
 
@@ -327,9 +325,7 @@ export class Dropdown {
     }
   }
 
-  @Listen('keydown', {
-    target: 'window',
-  })
+  @OnListener<Dropdown>('keydown', (self) => self.show)
   keydown(event: KeyboardEvent) {
     if (this.show === true && event.code === 'Escape') {
       this.close();
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index df352d281aa..a1b61457077 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -20,6 +20,7 @@ import {
   Watch,
 } from '@stencil/core';
 import { IxSelectItemLabelChangeEvent } from '../select-item/events';
+import { OnListener } from '../utils/listener';
 
 @Component({
   tag: 'ix-select',
@@ -310,9 +311,7 @@ export class Select {
     }
   }
 
-  @Listen('keydown', {
-    target: 'window',
-  })
+  @OnListener<Select>('keydown', (self) => self.dropdownShow)
   async onKeyDown(event: KeyboardEvent) {
     if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
       this.onArrowNavigation(event, event.code);
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index a2934f8d883..c68ea6d7d48 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -14,12 +14,12 @@ import {
   EventEmitter,
   h,
   Host,
-  Listen,
   Prop,
   State,
   Watch,
 } from '@stencil/core';
 import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
+import { OnListener } from '../utils/listener';
 
 export type SliderMarker = Array<number>;
 
@@ -44,7 +44,7 @@ function between(min: number, value: number, max: number) {
   styleUrl: 'slider.scss',
   shadow: true,
 })
-export class IxSlider {
+export class Slider {
   @Element() hostElement!: HTMLIxSliderElement;
 
   /**
@@ -177,9 +177,7 @@ export class IxSlider {
   // Listen globally on window because sometimes the event listener
   // of the DOM element input itself is not called if the release
   // click is not inside the element anymore
-  @Listen('pointerup', {
-    target: 'window',
-  })
+  @OnListener<Slider>('pointerUp', (self) => self.showTooltip)
   onPointerUp() {
     this.showTooltip = false;
   }
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index 3f9e20fcfdc..e94588fe605 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -18,6 +18,7 @@ import {
   Prop,
   State,
 } from '@stencil/core';
+import { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';
 
 @Component({
   tag: 'ix-tabs',
@@ -62,13 +63,23 @@ export class Tabs {
   @State() totalItems = 0;
   @State() currentScrollAmount = 0;
   @State() scrollAmount = 100;
-  @State() styleNextArrow = {};
-  @State() stylePreviousArrow = {};
 
   @State() scrollActionAmount = 0;
 
   private windowStartSize = window.innerWidth;
 
+  private get arrowLeftElement() {
+    return this.hostElement.shadowRoot.querySelector(
+      '[data-arrow-left]'
+    ) as HTMLElement;
+  }
+
+  private get arrowRightElement() {
+    return this.hostElement.shadowRoot.querySelector(
+      '[data-arrow-right]'
+    ) as HTMLElement;
+  }
+
   private clickAction: {
     timeout: NodeJS.Timeout;
     isClick: boolean;
@@ -244,11 +255,17 @@ export class Tabs {
   }
 
   componentWillRender() {
-    requestAnimationFrame(() => {
+    requestAnimationFrameNoNgZone(() => {
       const showNextArrow = this.showNextArrow();
       const previousArrow = this.showPreviousArrow();
-      this.styleNextArrow = this.getArrowStyle(showNextArrow);
-      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
+      Object.assign(
+        this.arrowLeftElement.style,
+        this.getArrowStyle(previousArrow)
+      );
+      Object.assign(
+        this.arrowRightElement.style,
+        this.getArrowStyle(showNextArrow)
+      );
     });
   }
 
@@ -282,7 +299,7 @@ export class Tabs {
       <Host>
         <div
           class="arrow"
-          style={this.stylePreviousArrow}
+          data-arrow-left
           onClick={() => this.move(this.scrollAmount, true)}
         >
           <ix-icon name={'chevron-left-small'}></ix-icon>
@@ -302,7 +319,7 @@ export class Tabs {
         </div>
         <div
           class="arrow right"
-          style={this.styleNextArrow}
+          data-arrow-right
           onClick={() => this.move(-this.scrollAmount, true)}
         >
           <ix-icon name={'chevron-right-small'}></ix-icon>
diff --git a/packages/core/src/components/utils/listener.ts b/packages/core/src/components/utils/listener.ts
new file mode 100644
index 00000000000..1ba2c64ee5e
--- /dev/null
+++ b/packages/core/src/components/utils/listener.ts
@@ -0,0 +1,89 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { getElement } from '@stencil/core';
+
+export type ListenerOptions = {
+  target?: 'window';
+  defaultEnabled?: boolean;
+};
+
+const defaultOptions: ListenerOptions = {
+  target: 'window',
+  defaultEnabled: true,
+};
+
+export function createListener(event: string, options: ListenerOptions = {}) {
+  const opts = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  let callback: any;
+  const onEvent = (event: Event) => {
+    callback(event);
+  };
+
+  const resultObject = {
+    on: (onEventCallback: any) => {
+      callback = onEventCallback;
+    },
+
+    isEnabled: opts.defaultEnabled,
+
+    enable: (state: boolean) => {
+      resultObject.isEnabled = state;
+
+      if (state) {
+        addEventListener(event, onEvent);
+      } else {
+        removeEventListener(event, onEvent);
+      }
+    },
+
+    destroy: () => {
+      resultObject.enable(false);
+    },
+  };
+
+  resultObject.enable(opts.defaultEnabled);
+  return resultObject;
+}
+
+export function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {
+  return (proto: any, methodName: string) => {
+    const { componentWillLoad, componentWillRender, disconnectedCallback } =
+      proto;
+
+    proto.componentWillRender = function () {
+      const host = getElement(this);
+      host[`__ix__${methodName}`].enable(fnExp(this));
+      return componentWillRender && componentWillRender.call(this);
+    };
+
+    proto.componentWillLoad = function () {
+      const listener = createListener(event);
+      const host = getElement(this);
+      const method = this[methodName];
+
+      host[`__ix__${methodName}`] = listener;
+
+      listener.on(method.bind(this));
+      return componentWillLoad && componentWillLoad.call(this);
+    };
+
+    proto.disconnectedCallback = function () {
+      const host = getElement(this);
+
+      host[`__ix__${methodName}`].destroy();
+      host[`__ix__${methodName}`] = null;
+      return disconnectedCallback && disconnectedCallback.call(this);
+    };
+  };
+}
diff --git a/packages/core/src/components/utils/requestAnimationFrame.ts b/packages/core/src/components/utils/requestAnimationFrame.ts
new file mode 100644
index 00000000000..f3fdd69c18f
--- /dev/null
+++ b/packages/core/src/components/utils/requestAnimationFrame.ts
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare const __zone_symbol__requestAnimationFrame: any;
+
+/**
+ * Prevents angular from change detection when requesting an animation frame
+ *
+ * Credits goes to:
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
+ */
+export const requestAnimationFrameNoNgZone = (
+  callback: (...args: any[]) => void
+) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(callback);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(callback);
+  }
+  return setTimeout(callback);
+};