diff --git a/packages/components/src/components/tab-header/readme.md b/packages/components/src/components/tab-header/readme.md
index aeddef3efe..706e9cbe2d 100644
--- a/packages/components/src/components/tab-header/readme.md
+++ b/packages/components/src/components/tab-header/readme.md
@@ -11,12 +11,19 @@
 | ----------- | ------------ | ------------------------------------------------------------------------------------- | -------------------- | ----------- |
 | `autoFocus` | `auto-focus` | (optional) autoFocus                                                                  | `boolean`            | `undefined` |
 | `disabled`  | `disabled`   | True for a disabled Tabnavigation                                                     | `boolean`            | `false`     |
-| `selected`  | `selected`   |                                                                                       | `boolean`            | `undefined` |
+| `selected`  | `selected`   | (optional) Whether the tab is selected                                                | `boolean`            | `undefined` |
 | `size`      | `size`       | (optional) size                                                                       | `"large" \| "small"` | `'small'`   |
 | `small`     | `small`      | <span style="color:red">**[DEPRECATED]**</span> - size should replace small<br/><br/> | `boolean`            | `false`     |
 | `styles`    | `styles`     | (optional) Injected CSS styles                                                        | `string`             | `undefined` |
 
 
+## Events
+
+| Event          | Description | Type               |
+| -------------- | ----------- | ------------------ |
+| `scale-select` |             | `CustomEvent<any>` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx
index 084c06fe6f..e063bfe875 100644
--- a/packages/components/src/components/tab-header/tab-header.tsx
+++ b/packages/components/src/components/tab-header/tab-header.tsx
@@ -9,7 +9,18 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Prop, Host, Watch, State, Element } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import classNames from 'classnames';
 import { ScaleIcon, isScaleIcon } from '../../utils/utils';
 import statusNote from '../../utils/status-note';
@@ -34,15 +45,27 @@ export class TabHeader {
   /** @deprecated - size should replace small */
   @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'small';
+  @Prop() size?: 'small' | 'large' = 'small';
   /** (optional) autoFocus  */
   @Prop() autoFocus?: boolean;
+  /** (optional) Whether the tab is selected */
+  @Prop() selected?: boolean;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
-  @Prop() selected: boolean;
 
   @State() hasFocus: boolean = false;
 
+  @Event({ eventName: 'scale-select' }) scaleSelect: EventEmitter;
+
+  @Listen('click')
+  handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (this.disabled) {
+      return;
+    }
+    this.scaleSelect.emit();
+  }
+
   @Watch('selected')
   selectedChanged(newValue: boolean) {
     if (!this.hostElement.isConnected) {
diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx
index 99f7a0c093..4eb4a77cdd 100644
--- a/packages/components/src/components/tab-nav/tab-nav.tsx
+++ b/packages/components/src/components/tab-nav/tab-nav.tsx
@@ -40,33 +40,12 @@ export class TabNav {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
-  @Listen('click')
-  handleClick(event: MouseEvent) {
-    // To provent event bubbling.
-    event.stopPropagation();
-
-    // workaround for slotted icons
-    const targetHTMLElement = event.target as HTMLElement;
-    const targetTag = targetHTMLElement.tagName.toLowerCase();
-    const svgTags = ['svg', 'g', 'path'];
-    let nextTab: HTMLScaleTabHeaderElement;
-
-    if (svgTags.includes(targetTag)) {
-      const closestNextTab = targetHTMLElement.closest(
-        `scale-tab-header[role="tab"]`
-      ) as HTMLScaleTabHeaderElement;
-      if (closestNextTab) {
-        nextTab = closestNextTab;
-        this.selectTab(nextTab);
-      }
-    } else {
-      if (
-        (event.target as HTMLScaleTabHeaderElement).getAttribute('role') ===
-        'tab'
-      ) {
-        nextTab = event.target as HTMLScaleTabHeaderElement;
-        this.selectTab(nextTab);
-      }
+  @Listen('scale-select')
+  handleSelect(event) {
+    const nextTab = event.target as HTMLScaleTabHeaderElement;
+    // Act only if it's a direct child
+    if (this.getAllEnabledTabs().includes(nextTab)) {
+      this.selectTab(nextTab);
     }
   }