diff --git a/packages/components-dev/tabs/module.ts b/packages/components-dev/tabs/module.ts
index fb2093ed0..5ab06baff 100644
--- a/packages/components-dev/tabs/module.ts
+++ b/packages/components-dev/tabs/module.ts
@@ -3,15 +3,22 @@ import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqPopoverModule } from '@koobiq/components/popover';
 import { KbqTabChangeEvent, KbqTabsModule } from '@koobiq/components/tabs';
-import { TabsVerticalExample } from 'packages/docs-examples/components/tabs';
+import {
+    TabsActionbarExample,
+    TabsUnderlinedExample,
+    TabsVerticalExample
+} from 'packages/docs-examples/components/tabs';
 import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     selector: 'dev-examples',
-    imports: [TabsVerticalExample],
+    imports: [TabsVerticalExample, TabsUnderlinedExample, TabsActionbarExample],
     template: `
         <tabs-vertical-example />
         <hr />
+        <tabs-underlined-example />
+        <hr />
+        <tabs-actionbar-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/packages/components-dev/tabs/template.html b/packages/components-dev/tabs/template.html
index 456665634..3fdf65a74 100644
--- a/packages/components-dev/tabs/template.html
+++ b/packages/components-dev/tabs/template.html
@@ -242,7 +242,7 @@ <h3>selectedTabIndex</h3>
 <h3>Tabs with actionbar</h3>
 <div class="dev-tabs-actionbar">
     <div class="dev-tabs-actionbar_nav">
-        <nav kbqTabNavBar underlined [tabNavPanel]="kbqTabNavPanel77">
+        <nav kbqTabNavBar underlined [tabNavPanel]="kbqTabNavPanel77" [onSurface]="true">
             @for (dashboard of dashboards; track dashboard) {
                 <a kbqTabLink [active]="activeDashboard === dashboard" (click)="activeDashboard = dashboard">
                     {{ dashboard }}
diff --git a/packages/components/tabs/__screenshots__/01-dark.png b/packages/components/tabs/__screenshots__/01-dark.png
index 90de0bf38..f9f4bee04 100644
Binary files a/packages/components/tabs/__screenshots__/01-dark.png and b/packages/components/tabs/__screenshots__/01-dark.png differ
diff --git a/packages/components/tabs/__screenshots__/01-light.png b/packages/components/tabs/__screenshots__/01-light.png
index c95b61a79..759d46bf7 100644
Binary files a/packages/components/tabs/__screenshots__/01-light.png and b/packages/components/tabs/__screenshots__/01-light.png differ
diff --git a/packages/components/tabs/_tabs-common.scss b/packages/components/tabs/_tabs-common.scss
index a5581907a..8397e9e56 100644
--- a/packages/components/tabs/_tabs-common.scss
+++ b/packages/components/tabs/_tabs-common.scss
@@ -33,25 +33,6 @@
 
     outline: none;
 
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
-        padding-left: 14px;
-        padding-right: 14px;
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
-        padding-left: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
-        padding-right: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
     &.kbq-selected {
         cursor: default;
     }
@@ -75,30 +56,63 @@
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
-        top: -10px;
-        bottom: -10px;
+        inset: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)))
+            calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after {
+        content: '';
+        position: absolute;
+        left: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        right: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+        height: 3px;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+        background: transparent;
+        transition: background 0.2s ease-in-out;
+        pointer-events: none;
     }
 
     &.kbq-tab-label_icon-only {
         width: var(--kbq-size-3xl);
         height: var(--kbq-size-3xl);
         padding: 0 !important;
-        margin-inline: var(--kbq-size-xs);
+        margin-inline: var(--kbq-size-xxs);
         box-sizing: content-box;
 
-        // Keep the space between icon-only tabs clickable after adding margins.
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            width: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+            height: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+
+            &:before {
+                left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            }
+
+            &:after {
+                top: auto;
+                bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                height: 3px;
+                left: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                right: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+                transition: background 0.2s ease-in-out;
+                pointer-events: none;
+            }
+        }
+
         &:not(.kbq-tab-label_vertical):after {
             content: '';
             display: block;
             position: absolute;
             top: 0;
             bottom: 0;
-            // Absolute offsets are calculated from the padding box, so we add
-            // focus outline width to fully cover the visual margin gap.
-            left: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
-            right: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
             background: transparent;
         }
     }
@@ -144,7 +158,18 @@
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-        padding: 8px 0;
+        padding: var(--kbq-size-s) 0;
+
+        // Negative margin shifts the first tab left so the focus frame can extend beyond the
+        // container edge (instead of padding-left:0 which would clip it under overflow:hidden).
+        > .kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),
+        > .kbq-tab-link:first-child {
+            margin-inline-start: calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal));
+        }
+
+        > .kbq-tab-label_icon-only:first-child {
+            margin-inline-start: 0;
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
@@ -166,8 +191,12 @@
         position: absolute;
         bottom: 0;
         height: 3px;
-        border-radius: 2px 2px 0 0;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
         background: var(--kbq-line-contrast);
         transition: all 0.2s ease-in-out;
+
+        &.kbq-disabled {
+            background: var(--kbq-states-icon-disabled);
+        }
     }
 }
diff --git a/packages/components/tabs/_tabs-theme.scss b/packages/components/tabs/_tabs-theme.scss
index 9032593ae..4c791f043 100644
--- a/packages/components/tabs/_tabs-theme.scss
+++ b/packages/components/tabs/_tabs-theme.scss
@@ -16,6 +16,14 @@
 
     &:is(:hover, .kbq-hover):not(.kbq-disabled) {
         @include kbq-tab-item-state($type, $sub-type, states-hover);
+
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            background: transparent;
+
+            &:not(.kbq-selected)::after {
+                background: var(--kbq-line-contrast-fade);
+            }
+        }
     }
 
     &.kbq-tab-label_empty {
@@ -27,6 +35,10 @@
 
         &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
             background: none;
+
+            &::after {
+                background: transparent;
+            }
         }
 
         &:is(:hover, .kbq-hover) {
diff --git a/packages/components/tabs/e2e.ts b/packages/components/tabs/e2e.ts
index 32eb40aa0..3cb91f494 100644
--- a/packages/components/tabs/e2e.ts
+++ b/packages/components/tabs/e2e.ts
@@ -26,6 +26,17 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
             }
         </kbq-tab-group>
 
+        <!-- underlined with icons only -->
+        <kbq-tab-group underlined data-testid="e2eTabsUnderlinedIconsOnly">
+            @for (tab of tabs.slice(0, 5); track tab) {
+                <kbq-tab>
+                    <ng-template kbqTabLabel iconOnly>
+                        <i kbq-icon="kbq-bug_16"></i>
+                    </ng-template>
+                </kbq-tab>
+            }
+        </kbq-tab-group>
+
         <!-- underlined -->
         <kbq-tab-group underlined data-testid="e2eTabsUnderlined">
             @for (tab of tabs; track tab) {
@@ -39,17 +50,6 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
             }
         </kbq-tab-group>
 
-        <!-- underlined with icons only -->
-        <kbq-tab-group underlined data-testid="e2eTabsUnderlinedIconsOnly">
-            @for (tab of tabs.slice(0, 5); track tab) {
-                <kbq-tab>
-                    <ng-template kbqTabLabel iconOnly>
-                        <i kbq-icon="kbq-bug_16"></i>
-                    </ng-template>
-                </kbq-tab>
-            }
-        </kbq-tab-group>
-
         <!-- stretched -->
         <kbq-tab-group kbq-stretch-tabs [activeTab]="tabs[2]">
             @for (tab of tabs.slice(0, 2); track tab) {
@@ -57,6 +57,19 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
             }
         </kbq-tab-group>
 
+        <!-- underlined with text and icon states -->
+        <kbq-tab-group underlined data-testid="e2eTabsUnderlinedTextIcon">
+            @for (tab of tabs.slice(0, 4); track tab) {
+                <kbq-tab [tabId]="tab" [disabled]="$index === 3">
+                    <ng-template kbq-tab-label>
+                        <i kbq-icon="kbq-bug_16"></i>
+                        Text {{ $index }}
+                    </ng-template>
+                    Active tab is {{ tab }}
+                </kbq-tab>
+            }
+        </kbq-tab-group>
+
         <!-- stretched with icons -->
         <kbq-tab-group kbq-stretch-tabs>
             @for (tab of tabs.slice(0, 2); track tab) {
@@ -83,6 +96,19 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
             }
         </kbq-tab-group>
 
+        <!-- underlined with text and icon disabled -->
+        <kbq-tab-group underlined data-testid="e2eTabsUnderlinedTextIconDisabled" [onSurface]="true">
+            @for (tab of tabs.slice(0, 1); track tab) {
+                <kbq-tab [tabId]="tab" [disabled]="$first">
+                    <ng-template kbq-tab-label>
+                        <i kbq-icon="kbq-bug_16"></i>
+                        Text {{ $index }}
+                    </ng-template>
+                    Active tab is {{ tab }}
+                </kbq-tab>
+            }
+        </kbq-tab-group>
+
         <!-- vertical -->
         <kbq-tab-group vertical [style.height.px]="100">
             @for (tab of tabs; track tab) {
@@ -185,6 +211,7 @@ export class E2eTabsStates {
     constructor() {
         afterNextRender(() => {
             this.setupTabsUnderlinedIconsOnlyStates();
+            this.setupTabsUnderlinedTextIconStates();
             this.setupTabsVerticalIconsOnlyStates();
         });
     }
@@ -203,6 +230,20 @@ export class E2eTabsStates {
         labels[4].classList.add('cdk-keyboard-focused');
     }
 
+    private setupTabsUnderlinedTextIconStates(): void {
+        const labels = document.querySelectorAll('[data-testid="e2eTabsUnderlinedTextIcon"] .kbq-tab-label');
+
+        labels[0].classList.add('kbq-hover');
+        labels[0].classList.add('cdk-keyboard-focused');
+
+        labels[1].classList.add('kbq-hover');
+
+        labels[2].classList.add('kbq-hover');
+        labels[2].classList.add('cdk-keyboard-focused');
+
+        labels[4].classList.add('cdk-keyboard-focused');
+    }
+
     private setupTabsVerticalIconsOnlyStates(): void {
         const labels = document.querySelectorAll('[data-testid="e2eTabsVerticalIconsOnly"] .kbq-tab-label');
 
diff --git a/packages/components/tabs/tab-header.component.ts b/packages/components/tabs/tab-header.component.ts
index f473a74bc..9022d9bbf 100644
--- a/packages/components/tabs/tab-header.component.ts
+++ b/packages/components/tabs/tab-header.component.ts
@@ -12,6 +12,7 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
+import { isUndefined } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqPaginatedTabHeader } from './paginated-tab-header';
 import { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
@@ -23,8 +24,8 @@ import { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
  */
 export type ScrollDirection = 'after' | 'before';
 
-/** Corresponds to `margin-inline: var(--kbq-size-xs)` on `.kbq-tab-label_icon-only`. */
-const ICON_ONLY_TAB_MARGIN_INLINE = 6;
+/** Corresponds to `--kbq-tabs-size-tab-item-padding-horizontal` on text/icon+text tabs. */
+const TAB_PADDING = 12;
 
 /**
  * The header of the tab group which displays a list of all the tabs in the tab group.
@@ -61,28 +62,30 @@ export class KbqTabHeader extends KbqPaginatedTabHeader {
 
     private readonly isBrowser = inject(Platform).isBrowser;
 
-    /** Width of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetWidth(): number | undefined {
         if (!this.isBrowser) return undefined;
 
         const item = this.items.get(this.selectedIndex);
         const width = item?.elementRef?.nativeElement?.offsetWidth;
 
-        if (!width) return width;
+        if (!width || item?.tab?.iconOnlyLabel) return width;
 
-        return item!.tab?.iconOnlyLabel ? width + ICON_ONLY_TAB_MARGIN_INLINE * 2 : width;
+        return width - TAB_PADDING * 2;
     }
 
-    /** Left offset of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetLeft(): number | undefined {
         if (!this.isBrowser) return undefined;
 
         const item = this.items.get(this.selectedIndex);
         const left = item?.elementRef?.nativeElement?.offsetLeft;
 
-        if (!left) return left;
+        if (isUndefined(left) || item?.tab?.iconOnlyLabel) return left;
 
-        return item!.tab?.iconOnlyLabel ? left - ICON_ONLY_TAB_MARGIN_INLINE : left;
+        return left + TAB_PADDING;
+    }
+
+    protected get activeTabDisabled(): boolean {
+        return !!this.items.get(this.selectedIndex)?.disabled;
     }
 
     protected itemSelected(event: KeyboardEvent): void {
diff --git a/packages/components/tabs/tab-header.html b/packages/components/tabs/tab-header.html
index 3f8903ef6..223b62fe8 100644
--- a/packages/components/tabs/tab-header.html
+++ b/packages/components/tabs/tab-header.html
@@ -15,6 +15,7 @@
             <ng-content />
             <div
                 class="kbq-tab-list__active-tab-underline"
+                [class.kbq-disabled]="activeTabDisabled"
                 [style.left.px]="activeTabOffsetLeft"
                 [style.width.px]="activeTabOffsetWidth"
             ></div>
diff --git a/packages/components/tabs/tab-header.scss b/packages/components/tabs/tab-header.scss
index 786ae0ed5..672606130 100644
--- a/packages/components/tabs/tab-header.scss
+++ b/packages/components/tabs/tab-header.scss
@@ -9,6 +9,16 @@
     position: relative;
     flex-shrink: 0;
     border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
+
+    &.kbq-tab-header_underlined {
+        .kbq-tab-group:not(.kbq-tab-group_on-surface) & {
+            border-radius: 0;
+        }
+
+        &:not(.kbq-tab-header__pagination-controls_enabled) {
+            overflow: visible;
+        }
+    }
 }
 
 .kbq-tab-list__content {
@@ -32,6 +42,10 @@
     flex-grow: 1;
     z-index: 1;
     overflow: hidden;
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) & {
+        overflow: visible;
+    }
 }
 
 .kbq-tab-list {
diff --git a/packages/components/tabs/tab-header.spec.ts b/packages/components/tabs/tab-header.spec.ts
index 5360e0479..8413aaedf 100644
--- a/packages/components/tabs/tab-header.spec.ts
+++ b/packages/components/tabs/tab-header.spec.ts
@@ -307,6 +307,89 @@ describe('KbqTabHeader', () => {
             discardPeriodicTasks();
         }));
     });
+
+    describe('activeTabOffset', () => {
+        let header: KbqTabHeader;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(SimpleTabHeaderApp);
+            fixture.detectChanges();
+
+            appComponent = fixture.componentInstance;
+            header = appComponent.tabHeader();
+        });
+
+        describe('activeTabOffsetWidth', () => {
+            it('subtracts TAB_PADDING * 2 from offsetWidth for text tabs', () => {
+                const item = header.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetWidth', { configurable: true, value: 120 });
+
+                expect((header as any).activeTabOffsetWidth).toBe(96);
+            });
+
+            it('returns raw offsetWidth for icon-only tabs', () => {
+                const item = header.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetWidth', { configurable: true, value: 36 });
+                (item as any).tab = { iconOnlyLabel: true };
+
+                expect((header as any).activeTabOffsetWidth).toBe(36);
+            });
+
+            it('returns undefined when no item at selectedIndex', () => {
+                appComponent.selectedIndex = 99;
+                fixture.detectChanges();
+
+                expect((header as any).activeTabOffsetWidth).toBeUndefined();
+            });
+        });
+
+        describe('activeTabOffsetLeft', () => {
+            it('adds TAB_PADDING to offsetLeft for text tabs', () => {
+                appComponent.selectedIndex = 2;
+                fixture.detectChanges();
+
+                const item = header.items.get(2)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: 100 });
+
+                expect((header as any).activeTabOffsetLeft).toBe(112);
+            });
+
+            it('handles negative offsetLeft for the first tab shifted by negative margin-inline-start', () => {
+                const item = header.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: -12 });
+
+                expect((header as any).activeTabOffsetLeft).toBe(0);
+            });
+
+            it('treats offsetLeft === 0 as a valid position and still adds TAB_PADDING', () => {
+                const item = header.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: 0 });
+
+                expect((header as any).activeTabOffsetLeft).toBe(12);
+            });
+
+            it('returns raw offsetLeft for icon-only tabs', () => {
+                const item = header.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: -4 });
+                (item as any).tab = { iconOnlyLabel: true };
+
+                expect((header as any).activeTabOffsetLeft).toBe(-4);
+            });
+
+            it('returns undefined when no item at selectedIndex', () => {
+                appComponent.selectedIndex = 99;
+                fixture.detectChanges();
+
+                expect((header as any).activeTabOffsetLeft).toBeUndefined();
+            });
+        });
+    });
 });
 
 interface ITab {
diff --git a/packages/components/tabs/tab-nav-bar.html b/packages/components/tabs/tab-nav-bar.html
index 50aa03ff1..2279a004c 100644
--- a/packages/components/tabs/tab-nav-bar.html
+++ b/packages/components/tabs/tab-nav-bar.html
@@ -15,6 +15,7 @@
             <ng-content />
             <div
                 class="kbq-tab-list__active-tab-underline"
+                [class.kbq-disabled]="activeTabDisabled"
                 [style.left.px]="activeTabOffsetLeft"
                 [style.width.px]="activeTabOffsetWidth"
             ></div>
diff --git a/packages/components/tabs/tab-nav-bar.scss b/packages/components/tabs/tab-nav-bar.scss
index 8c62fdfdc..7a935131b 100644
--- a/packages/components/tabs/tab-nav-bar.scss
+++ b/packages/components/tabs/tab-nav-bar.scss
@@ -13,6 +13,10 @@
         overflow: hidden;
     }
 
+    &.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container {
+        overflow: visible;
+    }
+
     .kbq-tab-list {
         position: relative;
         width: 100%;
diff --git a/packages/components/tabs/tab-nav-bar.spec.ts b/packages/components/tabs/tab-nav-bar.spec.ts
index 427e34782..a266858c5 100644
--- a/packages/components/tabs/tab-nav-bar.spec.ts
+++ b/packages/components/tabs/tab-nav-bar.spec.ts
@@ -107,6 +107,65 @@ describe(KbqTabNavBar.name, () => {
 
         expect(tabLink.tabIndex).toBe(3);
     });
+
+    describe('activeTabOffset', () => {
+        let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
+        let navBar: KbqTabNavBar;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+            fixture.detectChanges();
+            navBar = fixture.debugElement.query(By.directive(KbqTabNavBar)).componentInstance;
+        });
+
+        describe('activeTabOffsetWidth', () => {
+            it('subtracts TAB_PADDING * 2 from offsetWidth', () => {
+                const item = navBar.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetWidth', { configurable: true, value: 120 });
+
+                expect((navBar as any).activeTabOffsetWidth).toBe(96);
+            });
+
+            it('returns undefined when no item at selectedIndex', () => {
+                (navBar as any).selectedIndex = 99;
+
+                expect((navBar as any).activeTabOffsetWidth).toBeUndefined();
+            });
+        });
+
+        describe('activeTabOffsetLeft', () => {
+            it('adds TAB_PADDING to offsetLeft', () => {
+                const item = navBar.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: 100 });
+
+                expect((navBar as any).activeTabOffsetLeft).toBe(112);
+            });
+
+            it('handles negative offsetLeft for the first tab shifted by negative margin-inline-start', () => {
+                const item = navBar.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: -12 });
+
+                expect((navBar as any).activeTabOffsetLeft).toBe(0);
+            });
+
+            it('treats offsetLeft === 0 as a valid position and still adds TAB_PADDING', () => {
+                const item = navBar.items.get(0)!;
+
+                Object.defineProperty(item.elementRef.nativeElement, 'offsetLeft', { configurable: true, value: 0 });
+
+                expect((navBar as any).activeTabOffsetLeft).toBe(12);
+            });
+
+            it('returns undefined when no item at selectedIndex', () => {
+                (navBar as any).selectedIndex = 99;
+
+                expect((navBar as any).activeTabOffsetLeft).toBeUndefined();
+            });
+        });
+    });
 });
 
 @Component({
diff --git a/packages/components/tabs/tab-nav-bar.ts b/packages/components/tabs/tab-nav-bar.ts
index 37d7cac61..af6ccc677 100644
--- a/packages/components/tabs/tab-nav-bar.ts
+++ b/packages/components/tabs/tab-nav-bar.ts
@@ -23,6 +23,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isUndefined } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { startWith } from 'rxjs/operators';
 import { KbqPaginatedTabHeader } from './paginated-tab-header';
@@ -30,6 +31,9 @@ import { KbqPaginatedTabHeader } from './paginated-tab-header';
 // Increasing integer for generating unique ids for tab nav components.
 let nextUniqueId = 0;
 
+/** Corresponds to `--kbq-tabs-size-tab-item-padding-horizontal` on text tabs in underlined mode. */
+const TAB_PADDING = 12;
+
 /**
  * Navigation component matching the styles of the tab group header.
  */
@@ -88,13 +92,25 @@ export class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContentI
     protected get activeTabOffsetWidth(): number | undefined {
         if (!this.isBrowser) return undefined;
 
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
+        const width = this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
+
+        if (!width) return width;
+
+        return width - TAB_PADDING * 2;
     }
 
     protected get activeTabOffsetLeft(): number | undefined {
         if (!this.isBrowser) return undefined;
 
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
+        const left = this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
+
+        if (isUndefined(left)) return left;
+
+        return left + TAB_PADDING;
+    }
+
+    protected get activeTabDisabled(): boolean {
+        return !!this.items.get(this.selectedIndex)?.disabled;
     }
 
     override ngAfterContentInit() {
diff --git a/packages/components/tabs/tabs-tokens.scss b/packages/components/tabs/tabs-tokens.scss
index 2869ae5ba..8010bc766 100644
--- a/packages/components/tabs/tabs-tokens.scss
+++ b/packages/components/tabs/tabs-tokens.scss
@@ -7,6 +7,7 @@
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
     --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-border-radius);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
+    --kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));
     /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
     --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);
diff --git a/tools/public_api_guard/components/tabs.api.md b/tools/public_api_guard/components/tabs.api.md
index 7fd005ea9..8d0c66a5c 100644
--- a/tools/public_api_guard/components/tabs.api.md
+++ b/tools/public_api_guard/components/tabs.api.md
@@ -237,7 +237,11 @@ export class KbqTabGroup implements AfterContentInit, AfterViewInit, AfterConten
 //
 // @public
 export class KbqTabHeader extends KbqPaginatedTabHeader {
+    // (undocumented)
+    protected get activeTabDisabled(): boolean;
+    // (undocumented)
     protected get activeTabOffsetLeft(): number | undefined;
+    // (undocumented)
     protected get activeTabOffsetWidth(): number | undefined;
     // (undocumented)
     readonly items: QueryList<KbqTabLabelWrapper>;
@@ -341,6 +345,8 @@ export class KbqTabLink implements OnDestroy, AfterViewInit {
 
 // @public
 export class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContentInit {
+    // (undocumented)
+    protected get activeTabDisabled(): boolean;
     // (undocumented)
     protected get activeTabOffsetLeft(): number | undefined;
     // (undocumented)