@siemens/element-ng 47.9.0 → 48.0.0-next.2

package/fesm2022/siemens-element-ng-tabs-next.mjs

@@ -1,16 +1,35 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { CdkMenu, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, booleanAttribute, output, computed, inject, ElementRef, viewChild, TemplateRef, Directive, signal, effect, ChangeDetectionStrategy, Component, model, contentChildren, INJECTOR } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, InjectionToken, booleanAttribute, output, inject, ElementRef, viewChild, TemplateRef, computed, effect, untracked, Directive, contentChildren, INJECTOR, signal, model } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { isRTL } from '@siemens/element-ng/common';
 import { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';
 import * as i1$1 from '@siemens/element-ng/resize-observer';
 import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { startWith } from 'rxjs/operators';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiTabBadgeComponent {
+    badgeContent = input();
+    badgeColor = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabBadgeComponent, isStandalone: true, selector: "si-tab-badge", inputs: { badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n", styles: [".badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}:host-context(.cdk-menu-item) .badge-dot{inset-block-end:4px;min-inline-size:12px}:host-context(.cdk-menu-item) .badge-text{inset-inline-start:0}:host-context(.cdk-menu-item) .badge{margin-inline:-6px}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tab-badge', imports: [SiTranslatePipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'd-contents'
+                    }, template: "@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n", styles: [".badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}:host-context(.cdk-menu-item) .badge-dot{inset-block-end:4px;min-inline-size:12px}:host-context(.cdk-menu-item) .badge-text{inset-inline-start:0}:host-context(.cdk-menu-item) .badge{margin-inline:-6px}\n"] }]
+        }] });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -58,11 +77,8 @@ class SiTabNextBaseDirective {
     });
     /** Event emitter to notify when a tab is closed. */
     closeTriggered = output();
-    /** @internal */
-    badgeIsNumber = computed(() => {
-        return typeof this.badgeContent() !== 'boolean';
-    });
     tabButton = inject(ElementRef);
+    /** @internal */
     tabContent = viewChild('tabContent', { read: TemplateRef });
     static tabCounter = 0;
     indexBeforeClose = -1;
@@ -70,29 +86,23 @@ class SiTabNextBaseDirective {
     tabId = `${SiTabNextBaseDirective.tabCounter++}`;
     icons = addIcons({ elementCancel });
     tabset = inject(SI_TABSET_NEXT);
-    /** @internal */
-    index = computed(() => this.tabset.tabPanels().findIndex(tab => tab.tabId === this.tabId));
+    index = computed(() => this.tabset.tabPanels().indexOf(this));
+    constructor() {
+        // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.
+        // This effect should not run, if active was already applied to the focusKeyManager.
+        effect(() => {
+            const active = this.active(); // We only want to subscribe to the active signal.
+            untracked(() => {
+                // !!! focusKeyManger.activeItem has signal reads internally. Do not move this outside of untracked.
+                if (active && this.tabset.focusKeyManager.activeItem !== this) {
+                    this.tabset.focusKeyManager.updateActiveItem(this.index());
+                }
+            });
+        });
+    }
     ngOnDestroy() {
-        // adjust the focus index and selected tab index if component is destroyed
-        // as a side effect to close tab event
         if (this.indexBeforeClose >= 0) {
-            const indexToFocus = this.tabset.getNextIndexToFocus(this.indexBeforeClose);
-            if (this.active()) {
-                this.tabset.focusKeyManager?.updateActiveItem(indexToFocus);
-                this.tabset.tabPanels()[indexToFocus].tabButton.nativeElement.focus();
-            }
-            else {
-                const selectedItemIndex = this.tabset.activeTabIndex() ?? 0;
-                this.tabset.focusKeyManager?.updateActiveItem(selectedItemIndex);
-                this.tabset.tabPanels()[selectedItemIndex].focus();
-            }
-            // if this tab was the active one we need to select next tab as active
-            if (this.active()) {
-                const targetActiveTab = this.tabset.tabPanels()[indexToFocus];
-                if (targetActiveTab) {
-                    targetActiveTab.active.set(true);
-                }
-            }
+            this.tabset.removedTabByUser(this.indexBeforeClose, this.active());
         }
     }
     closeTab(event) {
@@ -103,7 +113,8 @@ class SiTabNextBaseDirective {
             this.indexBeforeClose = index;
         }
     }
-    focus(origin) {
+    /** @internal */
+    focus() {
         this.tabButton.nativeElement.focus({ preventScroll: true });
         // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.
         this.tabButton.nativeElement.scrollIntoView({
@@ -112,20 +123,28 @@ class SiTabNextBaseDirective {
             behavior: 'instant'
         });
     }
+    /** @internal */
     get disabled() {
         return this.disabledTab();
     }
+    /**
+     * Programmatically selects the current tab.
+     */
     selectTab(retainFocus) {
-        this.tabset.focusKeyManager?.updateActiveItem(this.index());
+        this.tabset.focusKeyManager.updateActiveItem(this.index());
         if (retainFocus) {
             // We need the timeout to wait for cdkMenu to restore the focus before we move it again.
             setTimeout(() => this.focus());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.6", type: SiTabNextBaseDirective, isStandalone: true, selector: "[siTabNextBase]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, disabledTab: { classPropertyName: "disabledTab", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTriggered: "closeTriggered" }, host: { attributes: { "role": "tab" }, listeners: { "keydown.arrowLeft": "tabset.focusPrevious($event)", "keydown.arrowRight": "tabset.focusNext($event)", "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "attr.id": "'tab-' + tabId", "attr.aria-disabled": "disabledTab()", "attr.tabindex": "tabset.focusKeyManager?.activeItem === this && !disabledTab() ? 0 : -1", "attr.aria-controls": "'content-' + tabId" }, classAttribute: "nav-link focus-inside px-5 si-title-1" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
+    /** @internal */
+    deSelectTab() {
+        // Empty be default, can be overridden in derived classes.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.6", type: SiTabNextBaseDirective, isStandalone: true, selector: "[siTabNextBase]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, disabledTab: { classPropertyName: "disabledTab", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTriggered: "closeTriggered" }, host: { attributes: { "role": "tab" }, listeners: { "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "class.icon-only": "!!icon()", "class.pe-3": "closable()", "class.active": "active()", "attr.id": "'tab-' + tabId", "attr.aria-selected": "active()", "attr.aria-disabled": "disabledTab()", "attr.tabindex": "tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1", "attr.aria-controls": "'content-' + tabId" }, classAttribute: "nav-link focus-inside px-5 si-title-1" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTabNextBase]',
@@ -133,16 +152,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         class: 'nav-link focus-inside px-5 si-title-1',
                         role: 'tab',
                         '[class.disabled]': 'disabledTab()',
+                        '[class.icon-only]': '!!icon()',
+                        '[class.pe-3]': 'closable()',
+                        '[class.active]': 'active()',
                         '[attr.id]': "'tab-' + tabId",
+                        '[attr.aria-selected]': 'active()',
                         '[attr.aria-disabled]': 'disabledTab()',
-                        '[attr.tabindex]': 'tabset.focusKeyManager?.activeItem === this && !disabledTab() ? 0 : -1',
+                        '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',
                         '[attr.aria-controls]': "'content-' + tabId",
-                        '(keydown.arrowLeft)': 'tabset.focusPrevious($event)',
-                        '(keydown.arrowRight)': 'tabset.focusNext($event)',
                         '(keydown.delete)': 'closeTab($event)'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -150,87 +171,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  */
 /** @experimental */
 class SiTabNextLinkComponent extends SiTabNextBaseDirective {
-    router = inject(Router, { optional: true });
-    /** @defaultValue false */
-    active = signal(false);
+    router = inject(Router);
     /** @internal */
-    routerLink = inject(RouterLink, { optional: true, self: true });
+    routerLink = inject(RouterLink, { self: true });
     routerLinkActive = inject(RouterLinkActive, { self: true });
-    constructor() {
-        super();
-        this.routerLinkActive.isActiveChange
-            .pipe(takeUntilDestroyed())
-            .subscribe(isActive => this.active.set(isActive));
-        effect(() => {
-            if (this.active()) {
-                if (this.router && this.routerLink?.urlTree) {
-                    this.router.navigateByUrl(this.routerLink.urlTree);
-                }
-            }
-        });
+    /** @defaultValue false */
+    active = toSignal(this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive)));
+    /** {@inheritDoc} */
+    selectTab(retainFocus) {
+        if (this.routerLink.urlTree) {
+            this.router.navigateByUrl(this.routerLink.urlTree, {
+                skipLocationChange: this.routerLink.skipLocationChange,
+                replaceUrl: this.routerLink.replaceUrl,
+                info: this.routerLink.info,
+                state: this.routerLink.state
+            });
+        }
+        super.selectTab(retainFocus);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", host: { properties: { "class.active": "routerLinkActive.isActive", "attr.aria-selected": "routerLinkActive.isActive" } }, usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[si-tab-next][routerLink]', imports: [NgClass, SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.active]': 'routerLinkActive.isActive',
-                        '[attr.aria-selected]': 'routerLinkActive.isActive'
-                    }, hostDirectives: [
+            args: [{ selector: 'a[si-tab-next][routerLink]', imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: RouterLinkActive
                         }
-                    ], template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-/** @experimental */
-class SiTabNextComponent extends SiTabNextBaseDirective {
-    /**
-     * Whether the tab is active or not.
-     * If set to `true`, the tab will be selected and its content will be displayed.
-     * @defaultValue false
-     * */
-    active = model(false);
-    /** @internal */
-    selectTab(retainFocus) {
-        const tabs = this.tabset.tabPanels();
-        const newTabIndex = this.index();
-        const currentTabIndex = this.tabset.activeTabIndex();
-        let continueWithSelection = newTabIndex !== currentTabIndex;
-        if (continueWithSelection && currentTabIndex !== -1) {
-            const currentTab = tabs[currentTabIndex];
-            const deselectEvent = {
-                target: currentTab,
-                tabIndex: currentTabIndex,
-                cancel: () => {
-                    continueWithSelection = false;
-                    currentTab.active.set(true);
-                }
-            };
-            currentTab.active.set(false);
-            this.tabset.deselect.emit(deselectEvent);
-        }
-        if (continueWithSelection) {
-            this.active.set(true);
-            super.selectTab(retainFocus);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabNextComponent, isStandalone: true, selector: "si-tab-next", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTab()", "keydown.enter": "selectTab()" }, properties: { "class.active": "active()", "attr.aria-selected": "active()" } }, usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'si-tab-next', imports: [NgClass, SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.active]': 'active()',
-                        '[attr.aria-selected]': 'active()',
-                        '(click)': 'selectTab()',
-                        '(keydown.enter)': 'selectTab()'
-                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"] }]
+                    ], template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
         }] });
 
 /**
@@ -239,107 +207,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  */
 /** @experimental */
 class SiTabsetNextComponent {
-    /**
-     * Event emitter to notify when a tab became inactive.
-     */
-    deselect = output();
     /** @internal */
-    activeTab = computed(() => {
-        return this.tabPanels().find(tab => tab.active());
-    });
+    activeTab = computed(() => this.tabPanels().find(tab => tab.active()));
     /** @internal */
-    activeTabIndex = computed(() => this.activeTab()?.index() ?? -1);
+    tabPanels = contentChildren(SiTabNextBaseDirective);
     /** @internal */
-    focusKeyManager;
-    tabPanelsLinks = contentChildren(SiTabNextLinkComponent);
-    tabPanelsComponents = contentChildren(SiTabNextComponent);
+    focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))
+        .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')
+        .withWrap(true);
     /** @internal */
-    tabPanels = computed(() => {
-        const allTabs = [
-            ...this.tabPanelsLinks(),
-            ...this.tabPanelsComponents()
-        ];
-        return allTabs;
-    });
-    menu = viewChild('menu', { read: CdkMenu });
     showMenuButton = signal(false);
-    injector = inject(INJECTOR);
-    ngAfterViewInit() {
-        this.focusKeyManager = new FocusKeyManager(this.tabPanels, this.injector);
-        // To avoid ExpressionChangedAfterItHasBeenCheckedError
-        setTimeout(() => {
-            this.focusKeyManager?.updateActiveItem(this.tabPanels().findIndex(tab => !tab.disabledTab()));
-        });
-    }
-    menuOpened() {
-        // wait for menu items to be rendered
-        setTimeout(() => {
-            const nextMenuItemToFocus = this.getNextIndexToFocus(this.activeTabIndex() + 1);
-            const menuItems = this.menu()?.items.toArray() ?? [];
-            if (nextMenuItemToFocus >= 0 && nextMenuItemToFocus < menuItems.length) {
-                menuItems[nextMenuItemToFocus].focus();
-                // bug in cdk as setting focus on menu item does not update focus manager active item
-                // eslint-disable-next-line @typescript-eslint/dot-notation
-                const focusManager = this.menu()?.['keyManager'];
-                focusManager?.updateActiveItem(nextMenuItemToFocus);
-            }
-            else {
-                menuItems[0].focus();
-            }
-        });
-    }
     tabIsLink(tab) {
         return tab instanceof SiTabNextLinkComponent;
     }
     /** @internal */
-    focusPrevious(e) {
-        e.preventDefault();
-        this.focusKeyManager?.setPreviousItemActive();
-    }
-    /** @internal */
-    focusNext(e) {
-        e.preventDefault();
-        this.focusKeyManager?.setNextItemActive();
-    }
-    /** @internal */
-    getNextIndexToFocus(currentIndex) {
+    removedTabByUser(index, active) {
+        // The tab was already removed from the tabPanels list when this function is called.
+        // We need to:
+        // - focus another tab if the closed one was focused
+        // - activate another tab if the closed one was active
+        // If the closed tab was not focussed, there is no need to restore the focus as it could only be closed by mouse.
         for (let i = 0; i < this.tabPanels().length; i++) {
             // Get the actual index using modulo to wrap around
-            const checkIndex = (currentIndex + i) % this.tabPanels().length;
-            if (!this.tabPanels()[checkIndex].disabledTab()) {
-                return this.tabPanels()[checkIndex].index();
+            const checkIndex = (index + i) % this.tabPanels().length;
+            const checkTab = this.tabPanels()[checkIndex];
+            if (!checkTab.disabledTab()) {
+                if (this.focusKeyManager.activeItemIndex === index) {
+                    this.focusKeyManager.setActiveItem(checkIndex);
+                }
+                if (active) {
+                    checkTab.selectTab(true);
+                }
+                return;
             }
         }
-        return -1;
     }
     resizeContainer(width, scrollWidth) {
         // 48px is the width of the menu button.
         this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabsetNextComponent, isStandalone: true, selector: "si-tabset-next", outputs: { deselect: "deselect" }, providers: [
+    keydown(event) {
+        this.focusKeyManager.onKeydown(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabsetNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabsetNextComponent, isStandalone: true, selector: "si-tabset-next", providers: [
             {
                 provide: SI_TABSET_NEXT,
                 useExisting: SiTabsetNextComponent
             }
-        ], queries: [{ propertyName: "tabPanelsLinks", predicate: SiTabNextLinkComponent, isSignal: true }, { propertyName: "tabPanelsComponents", predicate: SiTabNextComponent, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: CdkMenu, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n        (cdkMenuOpened)=\"menuOpened()\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu #menu>\n    @for (tab of tabPanels(); track tab) {\n      @let badgeColor = tab.badgeColor();\n      @let badgeIsNumber = tab.badgeIsNumber();\n\n      @if (badgeColor && badgeIsNumber) {\n        <!-- eslint-disable @angular-eslint/template/no-any -->\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else if (badgeIsNumber && badgeColor) {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <!-- eslint-enable -->\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    @if (tab.badgeContent() === true) {\n      <span class=\"badge-dot\"></span>\n    } @else if (tab.badgeContent() && !tab.badgeColor()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "tabPanels", predicate: SiTabNextBaseDirective, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n      (keydown)=\"keydown($event)\"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink?.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabsetNextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-tabset-next', imports: [
-                        SiTranslatePipe,
                         SiMenuDirective,
                         SiMenuItemComponent,
                         CdkMenuTrigger,
                         NgTemplateOutlet,
                         SiResizeObserverModule,
-                        RouterLink
+                        RouterLink,
+                        SiTabBadgeComponent
                     ], providers: [
                         {
                             provide: SI_TABSET_NEXT,
                             useExisting: SiTabsetNextComponent
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n        (cdkMenuOpened)=\"menuOpened()\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu #menu>\n    @for (tab of tabPanels(); track tab) {\n      @let badgeColor = tab.badgeColor();\n      @let badgeIsNumber = tab.badgeIsNumber();\n\n      @if (badgeColor && badgeIsNumber) {\n        <!-- eslint-disable @angular-eslint/template/no-any -->\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else if (badgeIsNumber && badgeColor) {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <!-- eslint-enable -->\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    @if (tab.badgeContent() === true) {\n      <span class=\"badge-dot\"></span>\n    } @else if (tab.badgeContent() && !tab.badgeColor()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n      (keydown)=\"keydown($event)\"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink?.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+class SiTabNextComponent extends SiTabNextBaseDirective {
+    /**
+     * Whether the tab is active or not.
+     * If set to `true`, the tab will be selected and its content will be displayed.
+     * @defaultValue false
+     * */
+    active = model(false);
+    selectTabByUser() {
+        if (!this.active()) {
+            this.selectTab();
+        }
+    }
+    /** {@inheritDoc} */
+    selectTab(retainFocus) {
+        this.tabset.activeTab()?.deSelectTab();
+        this.active.set(true);
+        super.selectTab(retainFocus);
+    }
+    /** @internal */
+    deSelectTab() {
+        this.active.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextComponent, isStandalone: true, selector: "si-tab-next", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tab-next', imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': 'selectTabByUser()',
+                        '(keydown.enter)': 'selectTabByUser()'
+                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
         }] });
 
 /**