@skyux/tabs 7.0.0-beta.4 → 7.0.0-beta.6

package/fesm2020/skyux-tabs.mjs

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, Pipe } from '@angular/core';
 import { SkyCheckboxModule } from '@skyux/forms';
 import * as i7 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
@@ -499,7 +499,9 @@ _SkyVerticalTabComponent__ariaRole = new WeakMap(), _SkyVerticalTabComponent__co
         const width = __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").getWidth(this.tabContent);
         __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").setBreakpointForWidth(width);
         const newBreakpoint = __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").current;
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").setResponsiveClass(this.tabContent, newBreakpoint);
+        if (newBreakpoint) {
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").setResponsiveClass(this.tabContent, newBreakpoint);
+        }
         __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
     }
 };
@@ -596,10 +598,10 @@ class SkyVerticalTabsetGroupComponent {
 }
 _SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden = new WeakMap(), _SkyVerticalTabsetGroupComponent_tabService = new WeakMap(), _SkyVerticalTabsetGroupComponent_changeRef = new WeakMap();
 SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"!disabled && open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"!disabled && open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"!disabled && open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
+            args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"!disabled && open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], groupHeading: [{
@@ -1030,27 +1032,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
+var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetService_focusedTabBtnIndex, _SkyTabsetService_activeTabUnregistered, _SkyTabsetService_tabs, _SkyTabsetService_tabCounter, _SkyTabsetService_isTabIndexActive, _SkyTabsetService_getNextTabArrayIndex, _SkyTabsetService_getPrevTabArrayIndex;
 /**
  * @internal
  */
 class SkyTabsetService {
     constructor() {
+        _SkyTabsetService_instances.add(this);
         this.currentActiveTabIndex = 0;
         this.currentFocusedTabBtnIndex = 0;
-        this._activeTabIndex = new BehaviorSubject(0);
-        this._focusedTabBtnIndex = new Subject();
-        this._activeTabUnregistered = new Subject();
-        this.tabs = [];
-        this.tabCounter = 0;
+        _SkyTabsetService_activeTabIndex.set(this, void 0);
+        _SkyTabsetService_focusedTabBtnIndex.set(this, void 0);
+        _SkyTabsetService_activeTabUnregistered.set(this, void 0);
+        _SkyTabsetService_tabs.set(this, []);
+        _SkyTabsetService_tabCounter.set(this, 0);
+        __classPrivateFieldSet(this, _SkyTabsetService_activeTabIndex, new BehaviorSubject(0), "f");
+        __classPrivateFieldSet(this, _SkyTabsetService_activeTabUnregistered, new Subject(), "f");
+        __classPrivateFieldSet(this, _SkyTabsetService_focusedTabBtnIndex, new Subject(), "f");
     }
     get activeTabUnregistered() {
-        return this._activeTabUnregistered.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f");
     }
     get activeTabIndex() {
-        return this._activeTabIndex.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f");
     }
     get focusedTabBtnIndex() {
-        return this._focusedTabBtnIndex.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f");
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").complete();
     }
     /**
      * Sets the active tab by its unique `tabIndex` property.
@@ -1063,26 +1075,26 @@ class SkyTabsetService {
             this.currentActiveTabIndex = value;
             /* istanbul ignore else */
             if (config.emitChange) {
-                this._activeTabIndex.next(value);
+                __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").next(value);
             }
             this.setFocusedTabBtnIndex(value);
         }
     }
     focusNextTabBtn(tabButtons) {
-        const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
-        for (let i = this.getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getNextTabArrayIndex(i)) {
+        const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, i)) {
             const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled) {
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
                 this.setFocusedTabBtnIndex(tabBtn.tabIndex);
                 return;
             }
         }
     }
     focusPrevTabBtn(tabButtons) {
-        const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
-        for (let i = this.getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getPrevTabArrayIndex(i)) {
+        const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, i)) {
             const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled) {
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
                 this.setFocusedTabBtnIndex(tabBtn.tabIndex);
                 return;
             }
@@ -1091,7 +1103,7 @@ class SkyTabsetService {
     focusFirstOrNearestTabBtn(tabButtons) {
         for (let i = 0; i < tabButtons.length; i++) {
             const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled) {
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
                 this.setFocusedTabBtnIndex(tabBtn.tabIndex);
                 return;
             }
@@ -1100,7 +1112,7 @@ class SkyTabsetService {
     focusLastOrNearestTabBtn(tabButtons) {
         for (let i = tabButtons.length - 1; i >= 0; i--) {
             const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled) {
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
                 this.setFocusedTabBtnIndex(tabBtn.tabIndex);
                 return;
             }
@@ -1108,99 +1120,103 @@ class SkyTabsetService {
     }
     setFocusedTabBtnIndex(tabIndex) {
         this.currentFocusedTabBtnIndex = tabIndex;
-        this._focusedTabBtnIndex.next(tabIndex);
+        __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").next(tabIndex);
     }
     /**
      * Registers a tab component.
      */
     registerTab(tabIndex) {
+        var _a;
         if (tabIndex === undefined) {
-            tabIndex = this.tabCounter;
-            this.tabCounter++;
+            tabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f");
+            __classPrivateFieldSet(this, _SkyTabsetService_tabCounter, (_a = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f"), _a++, _a), "f");
         }
-        this.tabs.push({ tabIndex });
+        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").push({ tabIndex });
         return tabIndex;
     }
     updateTabIndex(currentTabIndex, newTabIndex) {
-        const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
-        found.tabIndex = newTabIndex;
+        const found = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
+        if (found) {
+            found.tabIndex = newTabIndex;
+        }
     }
     /**
      * Unregisters a tab component.
      */
     unregisterTab(tabIndex) {
-        const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        const index = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
         // Notify the tabset component when an active tab is unregistered.
-        if (this.isTabIndexActive(this.tabs[index]?.tabIndex)) {
-            this._activeTabUnregistered.next({
+        if (__classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_isTabIndexActive).call(this, __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[index]?.tabIndex)) {
+            __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").next({
                 arrayIndex: index,
             });
         }
-        this.tabs.splice(index, 1);
+        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").splice(index, 1);
     }
     /**
      * Unregisters all tab components at once.
      */
     unregisterAll() {
-        this.tabs = [];
+        __classPrivateFieldSet(this, _SkyTabsetService_tabs, [], "f");
     }
     /**
      * Compares two tab indexes and returns `true` if they are equal.
      */
     tabIndexesEqual(tabIndex1, tabIndex2) {
-        return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
+        return (tabIndex1 === tabIndex2 ||
+            (tabIndex1 !== undefined &&
+                tabIndex2 !== undefined &&
+                +tabIndex1 === +tabIndex2));
     }
     /**
      * Verifies if a provided tab index is registered.
      */
     isValidTabIndex(tabIndex) {
-        return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        return __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
     }
     /**
      * Activates the first registered tab.
      */
     activateFirstTab() {
-        const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
+        const firstTabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0] && __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0].tabIndex;
         if (firstTabIndex !== undefined) {
             this.setActiveTabIndex(firstTabIndex);
             return firstTabIndex;
         }
+        return undefined;
     }
     /**
      * Activates the next registered tab, or the previous one based on a provided array index.
      */
     activateNearestTab(arrayIndex) {
-        const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
+        const newActiveTab = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex] || __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex - 1];
         if (newActiveTab) {
             this.currentActiveTabIndex = newActiveTab.tabIndex;
         }
     }
-    isTabIndexActive(tabIndex) {
-        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
-    }
-    getNextTabArrayIndex(currentIndex) {
-        let nextIndex = currentIndex + 1;
-        if (nextIndex === this.tabs.length) {
-            nextIndex = 0;
-        }
-        return nextIndex;
-    }
-    getPrevTabArrayIndex(currentIndex) {
-        let prevIndex = currentIndex - 1;
-        if (prevIndex < 0) {
-            prevIndex = this.tabs.length - 1;
-        }
-        return prevIndex;
-    }
 }
+_SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBtnIndex = new WeakMap(), _SkyTabsetService_activeTabUnregistered = new WeakMap(), _SkyTabsetService_tabs = new WeakMap(), _SkyTabsetService_tabCounter = new WeakMap(), _SkyTabsetService_instances = new WeakSet(), _SkyTabsetService_isTabIndexActive = function _SkyTabsetService_isTabIndexActive(tabIndex) {
+    return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
+}, _SkyTabsetService_getNextTabArrayIndex = function _SkyTabsetService_getNextTabArrayIndex(currentIndex) {
+    let nextIndex = currentIndex + 1;
+    if (nextIndex === __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length) {
+        nextIndex = 0;
+    }
+    return nextIndex;
+}, _SkyTabsetService_getPrevTabArrayIndex = function _SkyTabsetService_getPrevTabArrayIndex(currentIndex) {
+    let prevIndex = currentIndex - 1;
+    if (prevIndex < 0) {
+        prevIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length - 1;
+    }
+    return prevIndex;
+};
 SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 var _SkyTabButtonComponent_instances, _SkyTabButtonComponent__isActive, _SkyTabButtonComponent__isDisabled, _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe, _SkyTabButtonComponent_updateWizardStepState;
-const DEFAULT_ELEMENT_ROLE$1 = 'tab';
 const DEFAULT_DISABLED = false;
 /**
  * @internal
@@ -1210,7 +1226,6 @@ class SkyTabButtonComponent {
         _SkyTabButtonComponent_instances.add(this);
         this.buttonClick = new EventEmitter();
         this.closeClick = new EventEmitter();
-        this.elementRole = DEFAULT_ELEMENT_ROLE$1;
         this.closeBtnTabIndex = '-1';
         _SkyTabButtonComponent__isActive.set(this, false);
         _SkyTabButtonComponent__isDisabled.set(this, DEFAULT_DISABLED);
@@ -1244,14 +1259,13 @@ class SkyTabButtonComponent {
     }
     set tabStyle(style) {
         __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
-        this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE$1 : undefined;
         __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
     }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
             .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
             .subscribe((focusedIndex) => {
-            if (focusedIndex === this.tabIndex) {
+            if (this.tabIndex !== undefined && focusedIndex === this.tabIndex) {
                 this.closeBtnTabIndex = '0';
                 this.focusBtn();
             }
@@ -1296,7 +1310,9 @@ class SkyTabButtonComponent {
         __classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
     }
     onFocus() {
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
+        if (this.tabIndex !== undefined) {
+            __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
+        }
     }
 }
 _SkyTabButtonComponent__isActive = new WeakMap(), _SkyTabButtonComponent__isDisabled = new WeakMap(), _SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabButtonComponent_instances = new WeakSet(), _SkyTabButtonComponent_updateWizardStepState = function _SkyTabButtonComponent_updateWizardStepState() {
@@ -1317,10 +1333,10 @@ _SkyTabButtonComponent__isActive = new WeakMap(), _SkyTabButtonComponent__isDisa
     __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
 };
 SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    [attr.role]=\"elementRole\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources: tabNumber:totalTabsCount:buttonText\n    \"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources: tabNumber:totalTabsCount:buttonText\n    \"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    [attr.role]=\"elementRole\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources: tabNumber:totalTabsCount:buttonText\n    \"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
+            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources: tabNumber:totalTabsCount:buttonText\n    \"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
@@ -1351,40 +1367,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }] } });
 
+var _SkyTabsetPermalinkService_instances, _SkyTabsetPermalinkService_popStateChange, _SkyTabsetPermalinkService_subscription, _SkyTabsetPermalinkService_activatedRoute, _SkyTabsetPermalinkService_location, _SkyTabsetPermalinkService_router, _SkyTabsetPermalinkService_getParams;
 /**
  * @internal
  */
 class SkyTabsetPermalinkService {
     constructor(activatedRoute, location, router) {
-        this.activatedRoute = activatedRoute;
-        this.location = location;
-        this.router = router;
-        this._popStateChange = new Subject();
+        _SkyTabsetPermalinkService_instances.add(this);
+        _SkyTabsetPermalinkService_popStateChange.set(this, void 0);
+        _SkyTabsetPermalinkService_subscription.set(this, void 0);
+        _SkyTabsetPermalinkService_activatedRoute.set(this, void 0);
+        _SkyTabsetPermalinkService_location.set(this, void 0);
+        _SkyTabsetPermalinkService_router.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_activatedRoute, activatedRoute, "f");
+        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_location, location, "f");
+        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_router, router, "f");
+        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_popStateChange, new Subject(), "f");
     }
     get popStateChange() {
-        return this._popStateChange.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f");
     }
     ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f")) {
+            __classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f").unsubscribe();
         }
+        __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").complete();
     }
     init() {
-        this.subscription = this.location.subscribe(() => {
-            this._popStateChange.next();
-        });
+        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_subscription, __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").subscribe(() => {
+            __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").next();
+        }), "f");
     }
     /**
      * Returns the value of a URL query param.
      */
     getParam(name) {
-        return this.getParams()[name];
+        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this)[name];
     }
     /**
      * Sets the value of a URL query param.
      */
     setParam(name, value) {
-        const params = this.getParams();
+        const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
         if (value === null) {
             delete params[name];
         }
@@ -1393,18 +1417,18 @@ class SkyTabsetPermalinkService {
         }
         // Update the URL without triggering a navigation state change.
         // See: https://stackoverflow.com/a/46486677
-        const url = this.router
+        const url = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_router, "f")
             .createUrlTree([], {
-            relativeTo: this.activatedRoute,
+            relativeTo: __classPrivateFieldGet(this, _SkyTabsetPermalinkService_activatedRoute, "f"),
             queryParams: params,
             queryParamsHandling: 'merge',
         })
             .toString();
         // Abort redirect if the current URL is equal to the new URL.
-        if (this.location.isCurrentPathEqualTo(url)) {
+        if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").isCurrentPathEqualTo(url)) {
             return;
         }
-        this.location.go(url);
+        __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").go(url);
     }
     /**
      * Removes the provided query param from the URL.
@@ -1420,13 +1444,13 @@ class SkyTabsetPermalinkService {
         if (!name) {
             return null;
         }
-        const params = this.getParams();
+        const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
         params[name] = value;
-        const baseUrl = this.location.path().split('?')[0];
+        const baseUrl = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path().split('?')[0];
         const paramString = Object.keys(params)
             .map((k) => `${k}=${params[k]}`)
             .join('&');
-        return this.location.prepareExternalUrl(`${baseUrl}?${paramString}`);
+        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").prepareExternalUrl(`${baseUrl}?${paramString}`);
     }
     /**
      * Converts the provided string into a value that can be safely used in a URL.
@@ -1445,48 +1469,59 @@ class SkyTabsetPermalinkService {
             .replace(/--/g, '-');
         return sanitized;
     }
-    /**
-     * Returns all query params that exist in the current URL.
-     */
-    getParams() {
-        const params = {};
-        const path = this.location.path();
-        if (path.indexOf('?') === -1) {
-            return params;
-        }
-        const existingParamPairs = path.split('?')[1].split('&');
-        existingParamPairs.forEach((pair) => {
-            const fragments = pair.split('=');
-            params[fragments[0]] = decodeURIComponent(fragments[1]);
-        });
+}
+_SkyTabsetPermalinkService_popStateChange = new WeakMap(), _SkyTabsetPermalinkService_subscription = new WeakMap(), _SkyTabsetPermalinkService_activatedRoute = new WeakMap(), _SkyTabsetPermalinkService_location = new WeakMap(), _SkyTabsetPermalinkService_router = new WeakMap(), _SkyTabsetPermalinkService_instances = new WeakSet(), _SkyTabsetPermalinkService_getParams = function _SkyTabsetPermalinkService_getParams() {
+    const params = {};
+    const path = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path();
+    if (path.indexOf('?') === -1) {
         return params;
     }
-}
+    const existingParamPairs = path.split('?')[1].split('&');
+    existingParamPairs.forEach((pair) => {
+        const fragments = pair.split('=');
+        params[fragments[0]] = decodeURIComponent(fragments[1]);
+    });
+    return params;
+};
 SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i4.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
 
+var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
 let nextId = 0;
 class SkyTabComponent {
     constructor(changeDetector, permalinkService, tabsetService) {
-        this.changeDetector = changeDetector;
-        this.permalinkService = permalinkService;
-        this.tabsetService = tabsetService;
+        _SkyTabComponent_instances.add(this);
         /**
          * Fires when users click the button to close the tab.
          * The close button is added to the tab when you specify a listener for this event.
          * This event only applies when the tabset's `tabStyle` is `"tabs"`.
          */
         this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+        this.permalinkValueOrDefault = '';
         this.showContent = false;
-        this._activeChange = new BehaviorSubject(undefined);
-        this._stateChange = new BehaviorSubject(undefined);
-        this._tabIndexChange = new BehaviorSubject(undefined);
+        _SkyTabComponent__active.set(this, false);
+        _SkyTabComponent_activeChange.set(this, void 0);
+        _SkyTabComponent__permalinkValue.set(this, void 0);
+        _SkyTabComponent_stateChange.set(this, void 0);
+        _SkyTabComponent__tabHeading.set(this, void 0);
+        _SkyTabComponent__tabIndex.set(this, void 0);
+        _SkyTabComponent_tabIndexChange.set(this, void 0);
+        _SkyTabComponent_changeDetector.set(this, void 0);
+        _SkyTabComponent_permalinkService.set(this, void 0);
+        _SkyTabComponent_tabsetService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTabComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTabComponent_permalinkService, permalinkService, "f");
+        __classPrivateFieldSet(this, _SkyTabComponent_tabsetService, tabsetService, "f");
         const id = nextId++;
         this.tabPanelId = `sky-tab-${id}`;
         this.tabButtonId = `${this.tabPanelId}-nav-btn`;
+        __classPrivateFieldSet(this, _SkyTabComponent_activeChange, new BehaviorSubject(undefined), "f");
+        __classPrivateFieldSet(this, _SkyTabComponent_stateChange, new BehaviorSubject(undefined), "f");
+        __classPrivateFieldSet(this, _SkyTabComponent_tabIndexChange, new BehaviorSubject(undefined), "f");
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
     }
     /**
      * Indicates whether the tab is active when the tabset loads. After initialization, the `active`
@@ -1494,16 +1529,16 @@ class SkyTabComponent {
      * @default false
      */
     set active(value) {
-        if (value !== undefined && value !== this._active) {
-            this._active = value;
-            this._activeChange.next();
+        if (value !== undefined && !!value !== __classPrivateFieldGet(this, _SkyTabComponent__active, "f")) {
+            __classPrivateFieldSet(this, _SkyTabComponent__active, value, "f");
+            __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").next();
         }
     }
     get active() {
-        return this._active || false;
+        return __classPrivateFieldGet(this, _SkyTabComponent__active, "f");
     }
     get activeChange() {
-        return this._activeChange.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f");
     }
     /**
      * Specifies a custom query parameter value for the tab.
@@ -1514,65 +1549,90 @@ class SkyTabComponent {
      * This input only applies when the tabset's `tabStyle` is `"tabs"`.
      */
     set permalinkValue(value) {
-        this._permalinkValue = this.permalinkService.urlify(value);
+        __classPrivateFieldSet(this, _SkyTabComponent__permalinkValue, value, "f");
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
     }
     get permalinkValue() {
-        return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
+        return __classPrivateFieldGet(this, _SkyTabComponent__permalinkValue, "f");
+    }
+    /**
+     * Specifies the tab header.
+     * When using tabs as the main navigation on a page,
+     * use [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)
+     * and [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)
+     * to reflect the tab header in the page title.
+     * @required
+     */
+    set tabHeading(value) {
+        __classPrivateFieldSet(this, _SkyTabComponent__tabHeading, value, "f");
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
+    }
+    get tabHeading() {
+        return __classPrivateFieldGet(this, _SkyTabComponent__tabHeading, "f");
     }
     /**
      * Specifies a unique identifier for the tab.
      * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
      */
     set tabIndex(value) {
-        if (value !== this._tabIndex &&
+        if (value !== __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") &&
             value !== undefined &&
-            this._tabIndex !== undefined) {
-            this.tabsetService.updateTabIndex(this._tabIndex, value);
-            this._tabIndexChange.next(value);
+            __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") !== undefined) {
+            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateTabIndex(__classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f"), value);
+            __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").next(value);
         }
-        this._tabIndex = value;
+        __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, value, "f");
     }
     get tabIndex() {
-        return this._tabIndex;
-    }
-    get closeable() {
-        return this.close.observers.length > 0;
+        return __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f");
     }
     /**
      * Alerts the tabset component when this component has changes that need to be reflected in the UI.
      */
     get stateChange() {
-        return this._stateChange.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f");
     }
     get tabIndexChange() {
-        return this._tabIndexChange.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f");
     }
     ngOnChanges(changes) {
         if ((changes.disabled && !changes.disabled.firstChange) ||
             (changes.tabHeading && !changes.tabHeading.firstChange) ||
             (changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||
             (changes.permalinkValue && !changes.permalinkValue.firstChange)) {
-            this._stateChange.next();
+            __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").next();
         }
     }
     ngOnDestroy() {
-        this._stateChange.complete();
-        this.tabsetService.unregisterTab(this.tabIndex);
+        __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").complete();
+        if (this.tabIndex !== undefined) {
+            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").unregisterTab(this.tabIndex);
+        }
     }
     init() {
-        this._tabIndex = this.tabsetService.registerTab(this.tabIndex);
+        __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").registerTab(this.tabIndex), "f");
     }
     activate() {
-        this._active = true;
+        __classPrivateFieldSet(this, _SkyTabComponent__active, true, "f");
         this.showContent = true;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
     }
     deactivate() {
-        this._active = false;
+        __classPrivateFieldSet(this, _SkyTabComponent__active, false, "f");
         this.showContent = false;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
+    }
+    isCloseable() {
+        return this.close.observers.length > 0;
     }
 }
+_SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new WeakMap(), _SkyTabComponent__permalinkValue = new WeakMap(), _SkyTabComponent_stateChange = new WeakMap(), _SkyTabComponent__tabHeading = new WeakMap(), _SkyTabComponent__tabIndex = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_instances = new WeakSet(), _SkyTabComponent_setPermalinkValueOrDefault = function _SkyTabComponent_setPermalinkValueOrDefault() {
+    this.permalinkValueOrDefault =
+        __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.permalinkValue) ||
+            __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.tabHeading);
+};
 SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
 SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabComponent, decorators: [{
@@ -1594,25 +1654,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }] } });
 
+class SkyTabsetNavButtonDisabledPipe {
+    transform(disabled, buttonType, tabToSelectExists, tabToSelectIsDisabled) {
+        if (disabled !== undefined) {
+            return disabled;
+        }
+        else if (buttonType === 'finish') {
+            return false;
+        }
+        return !tabToSelectExists || !!tabToSelectIsDisabled;
+    }
+}
+SkyTabsetNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyTabsetNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyTabsetNavButtonDisabled',
+                }]
+        }] });
+
+var _SkyTabsetNavButtonComponent_instances, _SkyTabsetNavButtonComponent__buttonType, _SkyTabsetNavButtonComponent__disabled, _SkyTabsetNavButtonComponent__tabset, _SkyTabsetNavButtonComponent_activeIndexNumber, _SkyTabsetNavButtonComponent_activeSkyTabIndex, _SkyTabsetNavButtonComponent_currentTabsetSub, _SkyTabsetNavButtonComponent_logger, _SkyTabsetNavButtonComponent_tabCount, _SkyTabsetNavButtonComponent_ngUnsubscribe, _SkyTabsetNavButtonComponent_updateButtonVisibility, _SkyTabsetNavButtonComponent_updateButtonProperties, _SkyTabsetNavButtonComponent_updateTabToSelect;
+const buttonTypeNext = 'next';
+const buttonTypePrevious = 'previous';
+const buttonTypeFinish = 'finish';
+class SkyTabsetNavButtonComponent {
+    constructor(logger) {
+        _SkyTabsetNavButtonComponent_instances.add(this);
+        this.isVisible = false;
+        this.type = 'submit';
+        _SkyTabsetNavButtonComponent__buttonType.set(this, void 0);
+        _SkyTabsetNavButtonComponent__disabled.set(this, void 0);
+        _SkyTabsetNavButtonComponent__tabset.set(this, void 0);
+        _SkyTabsetNavButtonComponent_activeIndexNumber.set(this, void 0);
+        _SkyTabsetNavButtonComponent_activeSkyTabIndex.set(this, void 0);
+        _SkyTabsetNavButtonComponent_currentTabsetSub.set(this, void 0);
+        _SkyTabsetNavButtonComponent_logger.set(this, void 0);
+        _SkyTabsetNavButtonComponent_tabCount.set(this, void 0);
+        _SkyTabsetNavButtonComponent_ngUnsubscribe.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_logger, logger, "f");
+    }
+    /**
+     * Specifies the tabset wizard component to associate with the nav button.
+     * @required
+     */
+    get tabset() {
+        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
+    }
+    set tabset(value) {
+        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
+        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
+            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
+        }
+        if (value) {
+            __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, value.activeChange
+                .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
+                .subscribe((index) => {
+                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, index, "f");
+                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabCount, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.tabs?.length, "f");
+                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
+                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
+                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
+            }), "f");
+        }
+        else {
+            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_logger, "f").error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
+        }
+    }
+    /**
+     * Specifies the type of nav button to include.
+     * @required
+     */
+    get buttonType() {
+        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f");
+    }
+    set buttonType(value) {
+        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__buttonType, value, "f");
+        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
+        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
+        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
+        if (value === buttonTypeFinish) {
+            this.type = 'submit';
+        }
+        else {
+            this.type = 'button';
+        }
+    }
+    /**
+     * Indicates whether to disable the nav button.
+     * Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
+     * and false for `finish`.
+     */
+    set disabled(value) {
+        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__disabled, value, "f");
+    }
+    get disabled() {
+        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
+    }
+    buttonClick() {
+        /* istanbul ignore else */
+        if (this.tabToSelect && !this.tabToSelect.disabled && this.tabset) {
+            this.tabset.active = this.tabToSelect.tabIndex;
+        }
+    }
+}
+_SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
+    const isLastStep = !!__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") && __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
+    if (this.buttonType === buttonTypeFinish) {
+        this.isVisible = isLastStep;
+    }
+    else if (this.buttonType === buttonTypeNext) {
+        this.isVisible = !isLastStep;
+    }
+    else {
+        this.isVisible = true;
+    }
+}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
+    if (this.buttonType === buttonTypeNext ||
+        this.buttonType === buttonTypeFinish) {
+        this.buttonClassName = 'sky-btn-primary';
+    }
+    else {
+        this.buttonClassName = 'sky-btn-default';
+    }
+    this.ariaControls = this.tabToSelect?.tabPanelId;
+}, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
+    if (this.tabset?.tabs) {
+        const tabs = this.tabset.tabs.toArray();
+        this.tabToSelect = undefined;
+        // tab index can be a number or a string, but we need the actual number index
+        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
+        /* istanbul ignore else */
+        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
+            if (this.buttonType === buttonTypeNext) {
+                this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1];
+            }
+            else if (this.buttonType === buttonTypePrevious) {
+                this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1];
+            }
+        }
+    }
+};
+SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"\n    disabled\n      | skyTabsetNavButtonDisabled\n        : buttonType\n        : !!tabToSelect\n        : tabToSelect?.disabled\n  \"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tabset-nav-button', template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"\n    disabled\n      | skyTabsetNavButtonDisabled\n        : buttonType\n        : !!tabToSelect\n        : tabToSelect?.disabled\n  \"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { tabset: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+var _SkyTabsetAdapterService_instances, _SkyTabsetAdapterService_currentOverflow, _SkyTabsetAdapterService_tabsetRef, _SkyTabsetAdapterService_tabsOffsetLeft, _SkyTabsetAdapterService_overflowChange, _SkyTabsetAdapterService_getTabsOffsetLeft;
 /**
  * @internal
  */
 class SkyTabsetAdapterService {
     constructor() {
-        this._overflowChange = new BehaviorSubject(false);
+        _SkyTabsetAdapterService_instances.add(this);
+        _SkyTabsetAdapterService_currentOverflow.set(this, false);
+        _SkyTabsetAdapterService_tabsetRef.set(this, void 0);
+        _SkyTabsetAdapterService_tabsOffsetLeft.set(this, void 0);
+        _SkyTabsetAdapterService_overflowChange.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTabsetAdapterService_overflowChange, new BehaviorSubject(false), "f");
     }
     get overflowChange() {
-        return this._overflowChange.asObservable();
+        return __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f");
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").complete();
     }
     registerTabset(tabsetRef) {
-        this.tabsetRef = tabsetRef;
-        this.tabsOffsetLeft = this.getTabsOffsetLeft(tabsetRef.nativeElement);
+        __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsetRef, tabsetRef, "f");
+        __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsOffsetLeft, __classPrivateFieldGet(this, _SkyTabsetAdapterService_instances, "m", _SkyTabsetAdapterService_getTabsOffsetLeft).call(this, tabsetRef.nativeElement), "f");
     }
     /**
      * Detects if the tab buttons are wider than the tabset container.
      */
     detectOverflow() {
-        const nativeElement = this.tabsetRef.nativeElement;
+        const nativeElement = __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsetRef, "f")?.nativeElement;
         const tabsetRect = nativeElement
             .querySelector('.sky-tabset')
             .getBoundingClientRect();
@@ -1622,39 +1851,37 @@ class SkyTabsetAdapterService {
         const tabExtraButtonsRect = nativeElement
             .querySelector('.sky-tabset-btns')
             .getBoundingClientRect();
-        const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
+        const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsOffsetLeft, "f");
         const newOverflow = tabButtonsWidth > tabsetRect.width;
-        if (this.currentOverflow !== newOverflow) {
-            this.currentOverflow = newOverflow;
-            this._overflowChange.next(this.currentOverflow);
+        if (__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f") !== newOverflow) {
+            __classPrivateFieldSet(this, _SkyTabsetAdapterService_currentOverflow, newOverflow, "f");
+            __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").next(__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f"));
         }
     }
-    /**
-     * Returns the number of pixels to the left of the first tab.
-     */
-    getTabsOffsetLeft(tabsetEl) {
-        const tabsetRect = tabsetEl.getBoundingClientRect();
-        // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
-        const firstTabRect = tabsetEl
-            .querySelector('.sky-tabset-dropdown')
-            .getBoundingClientRect();
-        return firstTabRect.left - tabsetRect.left;
-    }
 }
+_SkyTabsetAdapterService_currentOverflow = new WeakMap(), _SkyTabsetAdapterService_tabsetRef = new WeakMap(), _SkyTabsetAdapterService_tabsOffsetLeft = new WeakMap(), _SkyTabsetAdapterService_overflowChange = new WeakMap(), _SkyTabsetAdapterService_instances = new WeakSet(), _SkyTabsetAdapterService_getTabsOffsetLeft = function _SkyTabsetAdapterService_getTabsOffsetLeft(tabsetEl) {
+    const tabsetRect = tabsetEl.getBoundingClientRect();
+    // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
+    const firstTabRect = tabsetEl
+        .querySelector('.sky-tabset-dropdown')
+        ?.getBoundingClientRect();
+    // Safety check
+    /* istanbul ignore next */
+    if (!firstTabRect) {
+        return 0;
+    }
+    return firstTabRect.left - tabsetRect.left;
+};
 SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return []; } });
 
-const DEFAULT_ELEMENT_ROLE = 'tablist';
+var _SkyTabsetComponent_instances, _SkyTabsetComponent_ngUnsubscribe, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, _SkyTabsetComponent__active, _SkyTabsetComponent__permalinkId, _SkyTabsetComponent__tabs, _SkyTabsetComponent__tabDisplayMode, _SkyTabsetComponent__tabStyle, _SkyTabsetComponent_changeDetector, _SkyTabsetComponent_elementRef, _SkyTabsetComponent_adapterService, _SkyTabsetComponent_permalinkService, _SkyTabsetComponent_tabsetService, _SkyTabsetComponent_getInitialTabIndex, _SkyTabsetComponent_listenActiveIndexChange, _SkyTabsetComponent_listenTabComponentsStateChange, _SkyTabsetComponent_initTabComponents, _SkyTabsetComponent_resetTabComponents, _SkyTabsetComponent_emitTabIndexChange, _SkyTabsetComponent_unsubscribeTabComponentsStateChange, _SkyTabsetComponent_listenTabButtonsOverflowChange, _SkyTabsetComponent_listenLocationPopStateChange, _SkyTabsetComponent_setActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabComponent, _SkyTabsetComponent_createTabButtons, _SkyTabsetComponent_updateTabButtons, _SkyTabsetComponent_updateTabsetComponent;
 class SkyTabsetComponent {
     constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.adapterService = adapterService;
-        this.permalinkService = permalinkService;
-        this.tabsetService = tabsetService;
+        _SkyTabsetComponent_instances.add(this);
         /**
          * Fires when the active tab changes. This event emits the index of the active tab.
          */
@@ -1676,41 +1903,57 @@ class SkyTabsetComponent {
          * This event only applies when `tabStyle` is `"tabs"`.
          */
         this.tabIndexesChange = new EventEmitter();
+        this.dropdownTriggerButtonText = '';
         this.tabButtons = [];
-        this.elementRole = DEFAULT_ELEMENT_ROLE;
-        this.ngUnsubscribe = new Subject();
-        this.tabComponentsStateChangeUnsubscribe = new Subject();
+        _SkyTabsetComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTabsetComponent_tabComponentsChangeUnsubscribe.set(this, new Subject());
+        _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe.set(this, new Subject());
+        _SkyTabsetComponent__active.set(this, void 0);
+        _SkyTabsetComponent__permalinkId.set(this, '');
+        _SkyTabsetComponent__tabs.set(this, void 0);
+        _SkyTabsetComponent__tabDisplayMode.set(this, 'tabs');
+        _SkyTabsetComponent__tabStyle.set(this, 'tabs');
+        _SkyTabsetComponent_changeDetector.set(this, void 0);
+        _SkyTabsetComponent_elementRef.set(this, void 0);
+        _SkyTabsetComponent_adapterService.set(this, void 0);
+        _SkyTabsetComponent_permalinkService.set(this, void 0);
+        _SkyTabsetComponent_tabsetService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTabsetComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTabsetComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyTabsetComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyTabsetComponent_permalinkService, permalinkService, "f");
+        __classPrivateFieldSet(this, _SkyTabsetComponent_tabsetService, tabsetService, "f");
     }
     /**
      * Activates a tab by its `tabIndex` property.
      */
     set active(value) {
         if (value === undefined ||
-            this.tabsetService.tabIndexesEqual(value, this._active)) {
+            __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(value, __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f"))) {
             return;
         }
-        this._active = value;
+        __classPrivateFieldSet(this, _SkyTabsetComponent__active, value, "f");
         if (this.tabs) {
-            this.tabsetService.setActiveTabIndex(value);
+            __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
         }
         else {
             // On init, wait for children tabs to render before broadcasting the active tab index.
             setTimeout(() => {
-                if (this.tabsetService.isValidTabIndex(value)) {
+                if (__classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").isValidTabIndex(value)) {
                     // On init, yield to the permalink ID, if it exists.
-                    if (this.getActiveTabIndexByPermalinkId() === undefined) {
-                        this.tabsetService.setActiveTabIndex(value);
+                    if (__classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this) === undefined) {
+                        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
                     }
                 }
                 else {
                     // Activate the first tab if the new tab index is invalid.
-                    this._active = this.tabsetService.activateFirstTab();
+                    __classPrivateFieldSet(this, _SkyTabsetComponent__active, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateFirstTab(), "f");
                 }
             });
         }
     }
     get active() {
-        return this._active;
+        return __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f");
     }
     /**
      * Distinguishes a tabset's unique state in the URL by generating a query parameter
@@ -1721,72 +1964,86 @@ class SkyTabsetComponent {
      */
     set permalinkId(value) {
         if (!value) {
-            return;
+            __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, '', "f");
+        }
+        else {
+            const sanitized = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").urlify(value);
+            __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, `${sanitized}-active-tab`, "f");
         }
-        const sanitized = this.permalinkService.urlify(value);
-        this._permalinkId = `${sanitized}-active-tab`;
     }
     get permalinkId() {
-        return this._permalinkId || '';
+        return __classPrivateFieldGet(this, _SkyTabsetComponent__permalinkId, "f");
     }
     /**
      * Specifies the behavior for a series of tabs.
      * @default "tabs"
      */
     set tabStyle(value) {
-        this._tabStyle = value;
-        this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
+        __classPrivateFieldSet(this, _SkyTabsetComponent__tabStyle, value || 'tabs', "f");
     }
     get tabStyle() {
-        return this._tabStyle || 'tabs';
+        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabStyle, "f");
     }
     set tabDisplayMode(value) {
-        this._tabDisplayMode = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyTabsetComponent__tabDisplayMode, value, "f");
+        __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
     }
     get tabDisplayMode() {
-        return this._tabDisplayMode || 'tabs';
+        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabDisplayMode, "f");
+    }
+    set tabs(value) {
+        __classPrivateFieldSet(this, _SkyTabsetComponent__tabs, value, "f");
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
+        value?.changes
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_resetTabComponents).call(this);
+        });
+    }
+    get tabs() {
+        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabs, "f");
     }
     ngAfterViewInit() {
-        this.initTabComponents();
-        this.listenTabComponentsStructuralChange();
-        const initialTabIndex = this.getInitialTabIndex();
-        this.tabsetService.setActiveTabIndex(initialTabIndex);
-        this.listenTabButtonsOverflowChange();
-        this.listenLocationPopStateChange();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
+        const initialTabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getInitialTabIndex).call(this);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(initialTabIndex);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabButtonsOverflowChange).call(this);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenLocationPopStateChange).call(this);
         // If the currently active tab is getting unregistered, activate the next one.
-        this.tabsetService.activeTabUnregistered
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabUnregistered
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
             .subscribe((tab) => {
             // Wait for the new tabs to render before activating.
             setTimeout(() => {
-                this.tabsetService.activateNearestTab(tab.arrayIndex);
+                __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateNearestTab(tab.arrayIndex);
             });
         });
         // Let the tabset render the initial active index before listening for changes.
         setTimeout(() => {
-            this.listenTabComponentsStateChange();
-            this.listenActiveIndexChange();
-            this.permalinkService.init();
+            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
+            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenActiveIndexChange).call(this);
+            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").init();
         });
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.unsubscribeTabComponentsStateChange();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
         if (this.permalinkId) {
-            this.permalinkService.clearParam(this.permalinkId);
+            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").clearParam(this.permalinkId);
         }
     }
     onWindowResize() {
-        this.adapterService.detectOverflow();
+        __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
     }
     onTabCloseClick(tabButton) {
-        const tabComponent = this.tabs.find((tab) => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
-        tabComponent.close.emit();
+        const tabComponent = this.tabs?.find((tab) => __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
+        tabComponent?.close.emit();
     }
     onTabButtonClick(tabButton) {
-        this.tabsetService.setActiveTabIndex(tabButton.tabIndex);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabButton.tabIndex);
     }
     onNewTabClick() {
         this.newTab.emit();
@@ -1795,226 +2052,200 @@ class SkyTabsetComponent {
         this.openTab.emit();
     }
     onRightKeyDown() {
-        this.tabsetService.focusNextTabBtn(this.tabButtons);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusNextTabBtn(this.tabButtons);
     }
     onLeftKeyDown() {
-        this.tabsetService.focusPrevTabBtn(this.tabButtons);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusPrevTabBtn(this.tabButtons);
     }
     onHomeKeyDown() {
-        this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusFirstOrNearestTabBtn(this.tabButtons);
     }
     onEndKeyDown() {
-        this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusLastOrNearestTabBtn(this.tabButtons);
     }
-    /**
-     * Sets the initial active tab index based on the following criteria.
-     * 1. Does the URL include a query param that reflects this tabset's active tab?
-     * 2. Does one of the tab components have their `active` property set to `true`?
-     * 3. Is the tabset component's `active` property set to a specific tab index?
-     */
-    getInitialTabIndex() {
-        let activeIndex = this.getActiveTabIndexByPermalinkId();
+}
+_SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent__active = new WeakMap(), _SkyTabsetComponent__permalinkId = new WeakMap(), _SkyTabsetComponent__tabs = new WeakMap(), _SkyTabsetComponent__tabDisplayMode = new WeakMap(), _SkyTabsetComponent__tabStyle = new WeakMap(), _SkyTabsetComponent_changeDetector = new WeakMap(), _SkyTabsetComponent_elementRef = new WeakMap(), _SkyTabsetComponent_adapterService = new WeakMap(), _SkyTabsetComponent_permalinkService = new WeakMap(), _SkyTabsetComponent_tabsetService = new WeakMap(), _SkyTabsetComponent_instances = new WeakSet(), _SkyTabsetComponent_getInitialTabIndex = function _SkyTabsetComponent_getInitialTabIndex() {
+    let activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
+    if (activeIndex === undefined) {
+        activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
         if (activeIndex === undefined) {
-            activeIndex = this.getActiveTabComponent()?.tabIndex;
-            if (activeIndex === undefined) {
-                activeIndex = this.active;
-            }
-        }
-        return activeIndex;
-    }
-    listenActiveIndexChange() {
-        this.tabsetService.activeTabIndex
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
-            .subscribe((activeIndex) => {
-            this.updateTabsetComponent(activeIndex);
-        });
-    }
-    listenTabComponentsStructuralChange() {
-        this.tabs.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
-            this.resetTabComponents();
-        });
-    }
-    listenTabComponentsStateChange() {
+            activeIndex = this.active;
+        }
+    }
+    return activeIndex;
+}, _SkyTabsetComponent_listenActiveIndexChange = function _SkyTabsetComponent_listenActiveIndexChange() {
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabIndex
+        .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
+        .subscribe((activeIndex) => {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, activeIndex);
+    });
+}, _SkyTabsetComponent_listenTabComponentsStateChange = function _SkyTabsetComponent_listenTabComponentsStateChange() {
+    if (this.tabs) {
         combineLatest(this.tabs.map((tab) => tab.activeChange))
-            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
             .subscribe(() => {
             // Wait for the tab components to render changes before finding the active one.
             setTimeout(() => {
-                const tabIndex = this.getActiveTabComponent()?.tabIndex;
-                this.tabsetService.setActiveTabIndex(tabIndex);
+                const tabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
+                __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabIndex);
             });
         });
         combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
-            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
             .subscribe(() => {
             // Don't emit the first change.
             if (this.lastActiveTabIndex !== undefined) {
                 // Wait for the tab components to render changes before updating the view.
                 setTimeout(() => {
-                    this.updateTabsetComponent(this.tabsetService.currentActiveTabIndex, true);
-                    this.emitTabIndexChange();
+                    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
+                    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_emitTabIndexChange).call(this);
                 });
             }
         });
         combineLatest(this.tabs.map((tab) => tab.stateChange))
-            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
             .subscribe(() => {
             // Wait for the tab components to render changes before finding the active one.
             setTimeout(() => {
-                this.updateTabsetComponent(this.tabsetService.currentActiveTabIndex, true);
+                __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
             });
         });
     }
-    initTabComponents() {
-        this.tabs.forEach((tab) => tab.init());
-    }
-    resetTabComponents() {
-        this.unsubscribeTabComponentsStateChange();
-        this.tabsetService.unregisterAll();
-        // If there are no tab components, do a hard reset of the view.
-        if (this.tabs.length === 0) {
-            this.updateTabsetComponent(0, true);
-            return;
-        }
-        this.initTabComponents();
-        const activeIndex = this.getActiveTabComponent()?.tabIndex;
-        this.tabsetService.setActiveTabIndex(activeIndex, {
-            emitChange: false,
-        });
-        this.listenTabComponentsStateChange();
-    }
-    emitTabIndexChange() {
-        this.tabIndexesChange.emit({
-            tabs: this.tabs.map((tab) => ({
-                tabHeading: tab.tabHeading,
-                tabIndex: tab.tabIndex,
-            })),
-        });
-    }
-    unsubscribeTabComponentsStateChange() {
-        this.tabComponentsStateChangeUnsubscribe.next();
-        this.tabComponentsStateChangeUnsubscribe.complete();
-        this.tabComponentsStateChangeUnsubscribe = new Subject();
-    }
-    listenTabButtonsOverflowChange() {
-        this.adapterService.registerTabset(this.elementRef);
-        this.adapterService.overflowChange
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((isOverflowing) => {
-            this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
-            this.changeDetector.markForCheck();
-        });
-    }
-    /**
-     * Listen for back/forward history button presses to detect query param changes in the URL.
-     */
-    listenLocationPopStateChange() {
-        this.permalinkService.popStateChange
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.setActiveTabIndexByPermalinkId();
-        });
-    }
-    setActiveTabIndexByPermalinkId() {
-        const activeIndex = this.getActiveTabIndexByPermalinkId();
-        this.tabsetService.setActiveTabIndex(activeIndex);
-    }
-    getActiveTabIndexByPermalinkId() {
-        if (this.permalinkId) {
-            const paramValue = this.permalinkService.getParam(this.permalinkId);
-            if (paramValue) {
-                return this.tabs.find((tab) => tab.permalinkValue === paramValue)
-                    ?.tabIndex;
-            }
-        }
-    }
-    getActiveTabComponent() {
-        return this.tabs
-            .toArray()
-            .reverse()
-            .find((tab) => tab.active === true);
-    }
-    createTabButtons(activeIndex) {
-        return this.tabs.map((tab, index) => ({
-            active: this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
-            closeable: tab.closeable,
-            ariaControls: tab.tabPanelId,
-            disabled: tab.disabled,
-            buttonHref: tab.disabled
-                ? null
-                : this.permalinkService.getParamHref(this.permalinkId, tab.permalinkValue),
-            buttonId: tab.tabButtonId,
-            buttonTextCount: tab.tabHeaderCount,
-            buttonText: tab.tabHeading,
+}, _SkyTabsetComponent_initTabComponents = function _SkyTabsetComponent_initTabComponents() {
+    this.tabs?.forEach((tab) => tab.init());
+}, _SkyTabsetComponent_resetTabComponents = function _SkyTabsetComponent_resetTabComponents() {
+    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").unregisterAll();
+    // If there are no tab components, do a hard reset of the view.
+    if (this.tabs?.length === 0) {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, 0, true);
+        return;
+    }
+    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
+    const activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex, {
+        emitChange: false,
+    });
+    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
+}, _SkyTabsetComponent_emitTabIndexChange = function _SkyTabsetComponent_emitTabIndexChange() {
+    this.tabIndexesChange.emit({
+        tabs: this.tabs?.map((tab) => ({
+            tabHeading: tab.tabHeading,
             tabIndex: tab.tabIndex,
-            tabNumber: index + 1,
-            totalTabsCount: this.tabs.length,
-        }));
+        })),
+    });
+}, _SkyTabsetComponent_unsubscribeTabComponentsStateChange = function _SkyTabsetComponent_unsubscribeTabComponentsStateChange() {
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").next();
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").complete();
+    __classPrivateFieldSet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, new Subject(), "f");
+}, _SkyTabsetComponent_listenTabButtonsOverflowChange = function _SkyTabsetComponent_listenTabButtonsOverflowChange() {
+    __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").registerTabset(__classPrivateFieldGet(this, _SkyTabsetComponent_elementRef, "f"));
+    __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").overflowChange
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
+        .subscribe((isOverflowing) => {
+        this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
+        __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
+    });
+}, _SkyTabsetComponent_listenLocationPopStateChange = function _SkyTabsetComponent_listenLocationPopStateChange() {
+    __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").popStateChange
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_setActiveTabIndexByPermalinkId).call(this);
+    });
+}, _SkyTabsetComponent_setActiveTabIndexByPermalinkId = function _SkyTabsetComponent_setActiveTabIndexByPermalinkId() {
+    const activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
+    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex);
+}, _SkyTabsetComponent_getActiveTabIndexByPermalinkId = function _SkyTabsetComponent_getActiveTabIndexByPermalinkId() {
+    if (this.permalinkId) {
+        const paramValue = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParam(this.permalinkId);
+        if (paramValue) {
+            return this.tabs?.find((tab) => tab.permalinkValueOrDefault === paramValue)?.tabIndex;
+        }
+        return undefined;
+    }
+    return undefined;
+}, _SkyTabsetComponent_getActiveTabComponent = function _SkyTabsetComponent_getActiveTabComponent() {
+    return this.tabs
+        ?.toArray()
+        .reverse()
+        .find((tab) => tab.active === true);
+}, _SkyTabsetComponent_createTabButtons = function _SkyTabsetComponent_createTabButtons(activeIndex) {
+    // Safety check
+    /* istanbul ignore next */
+    if (!this.tabs) {
+        return [];
+    }
+    return this.tabs.map((tab, index) => ({
+        active: __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex),
+        closeable: tab.isCloseable(),
+        ariaControls: tab.tabPanelId,
+        disabled: tab.disabled,
+        buttonHref: tab.disabled
+            ? null
+            : __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParamHref(this.permalinkId, tab.permalinkValueOrDefault),
+        buttonId: tab.tabButtonId,
+        buttonTextCount: tab.tabHeaderCount,
+        buttonText: tab.tabHeading,
+        tabIndex: tab.tabIndex,
+        tabNumber: index + 1,
+        totalTabsCount: this.tabs.length,
+    }));
+}, _SkyTabsetComponent_updateTabButtons = function _SkyTabsetComponent_updateTabButtons(activeIndex) {
+    this.tabButtons.forEach((button) => {
+        button.active = __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(button.tabIndex, activeIndex);
+    });
+}, _SkyTabsetComponent_updateTabsetComponent = function _SkyTabsetComponent_updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
+    // Activate/deactivate tab components.
+    this.tabs?.forEach((tab) => {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex)
+            ? tab.activate()
+            : tab.deactivate();
+    });
+    // Update the tab button models.
+    if (regenerateTabButtons || !this.tabButtons.length) {
+        this.tabButtons = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_createTabButtons).call(this, activeIndex);
     }
-    updateTabButtons(activeIndex) {
-        this.tabButtons.forEach((button) => {
-            button.active = this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
-        });
-    }
-    /**
-     * Updates the UI and state of the tabset component after the tab index or
-     * tab components have changed.
-     * @param activeIndex The currently active tab index.
-     * @param regenerateTabButtons Indicates if tab button view models should be regenerated.
-     * Setting this value to `false` will simply update the existing tab buttons. Setting this value
-     * to `true` is only necessary when the underlying tab components have changed and the tab
-     * buttons must reflect those changes.
-     */
-    updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
-        // Activate/deactivate tab components.
-        this.tabs.forEach((tab) => {
-            this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
-                ? tab.activate()
-                : tab.deactivate();
-        });
-        // Update the tab button models.
-        if (regenerateTabButtons || !this.tabButtons.length) {
-            this.tabButtons = this.createTabButtons(activeIndex);
-        }
-        else {
-            this.updateTabButtons(activeIndex);
-        }
-        // Update the dropdown trigger button text.
-        this.dropdownTriggerButtonText = this.tabButtons.find((b) => {
-            return this.tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
-        })?.buttonText;
-        // Set the query params based on active tab.
-        if (this.permalinkId) {
-            const activeTabComponent = this.tabs.find((tab) => {
-                return this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
-            });
-            this.permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValue);
-        }
-        // Wait for tab button view models to render before gauging dimensions.
-        setTimeout(() => {
-            this.adapterService.detectOverflow();
+    else {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabButtons).call(this, activeIndex);
+    }
+    // Update the dropdown trigger button text.
+    this.dropdownTriggerButtonText =
+        this.tabButtons.find((b) => {
+            return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(b.tabIndex, activeIndex);
+        })?.buttonText ?? '';
+    // Set the query params based on active tab.
+    if (this.permalinkId) {
+        const activeTabComponent = this.tabs?.find((tab) => {
+            return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex);
         });
-        this.changeDetector.markForCheck();
-        // Emit the new active index value to consumers.
-        if (this.lastActiveTabIndex !== activeIndex) {
-            this.lastActiveTabIndex = activeIndex;
-            this.activeChange.emit(activeIndex);
+        if (activeTabComponent) {
+            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault);
         }
     }
-}
+    // Wait for tab button view models to render before gauging dimensions.
+    setTimeout(() => {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
+    });
+    __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
+    // Emit the new active index value to consumers.
+    if (this.lastActiveTabIndex !== activeIndex) {
+        this.lastActiveTabIndex = activeIndex;
+        this.activeChange.emit(activeIndex);
+    }
+};
 SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
 SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
         SkyTabsetAdapterService,
         SkyTabsetPermalinkService,
         SkyTabsetService,
-    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  [attr.role]=\"elementRole\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset', providers: [
                         SkyTabsetAdapterService,
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  [attr.role]=\"elementRole\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{
@@ -2038,159 +2269,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: [SkyTabComponent]
             }] } });
 
-var _SkyTabsetNavButtonComponent_instances, _SkyTabsetNavButtonComponent__buttonType, _SkyTabsetNavButtonComponent__disabled, _SkyTabsetNavButtonComponent__tabset, _SkyTabsetNavButtonComponent_activeIndexNumber, _SkyTabsetNavButtonComponent_activeSkyTabIndex, _SkyTabsetNavButtonComponent_currentTabsetSub, _SkyTabsetNavButtonComponent_logger, _SkyTabsetNavButtonComponent_tabCount, _SkyTabsetNavButtonComponent_tabToSelect, _SkyTabsetNavButtonComponent_ngUnsubscribe, _SkyTabsetNavButtonComponent_updateButtonVisibility, _SkyTabsetNavButtonComponent_updateButtonProperties, _SkyTabsetNavButtonComponent_updateTabToSelect;
-const buttonTypeNext = 'next';
-const buttonTypePrevious = 'previous';
-const buttonTypeFinish = 'finish';
-class SkyTabsetNavButtonComponent {
-    constructor(logger) {
-        _SkyTabsetNavButtonComponent_instances.add(this);
-        this.isVisible = false;
-        _SkyTabsetNavButtonComponent__buttonType.set(this, void 0);
-        _SkyTabsetNavButtonComponent__disabled.set(this, void 0);
-        _SkyTabsetNavButtonComponent__tabset.set(this, void 0);
-        _SkyTabsetNavButtonComponent_activeIndexNumber.set(this, void 0);
-        _SkyTabsetNavButtonComponent_activeSkyTabIndex.set(this, void 0);
-        _SkyTabsetNavButtonComponent_currentTabsetSub.set(this, void 0);
-        _SkyTabsetNavButtonComponent_logger.set(this, void 0);
-        _SkyTabsetNavButtonComponent_tabCount.set(this, void 0);
-        _SkyTabsetNavButtonComponent_tabToSelect.set(this, void 0);
-        _SkyTabsetNavButtonComponent_ngUnsubscribe.set(this, new Subject());
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_logger, logger, "f");
-    }
-    /**
-     * Specifies the tabset wizard component to associate with the nav button.
-     * @required
-     */
-    get tabset() {
-        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
-    }
-    set tabset(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
-        }
-        if (value) {
-            __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").activeChange
-                .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
-                .subscribe((index) => {
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, index, "f");
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabCount, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").tabs.length, "f");
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
-            }), "f");
-        }
-        else {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_logger, "f").error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
-        }
-    }
-    /**
-     * Specifies the type of nav button to include.
-     * @required
-     */
-    get buttonType() {
-        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f");
-    }
-    set buttonType(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__buttonType, value, "f");
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
-        if (value === buttonTypeFinish) {
-            this.type = 'submit';
-        }
-        else {
-            this.type = 'button';
-        }
-    }
-    /**
-     * Indicates whether to disable the nav button.
-     * Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
-     * and false for `finish`.
-     */
-    set disabled(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__disabled, value, "f");
-    }
-    get disabled() {
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f") !== undefined) {
-            return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
-        }
-        else if (this.buttonType === buttonTypeFinish) {
-            return false;
-        }
-        return !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") || __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled;
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
-    }
-    buttonClick() {
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") && !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled) {
-            this.tabset.active = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").tabIndex;
-        }
-    }
-}
-_SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_tabToSelect = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
-    const isLastStep = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
-    if (this.buttonType === buttonTypeFinish) {
-        this.isVisible = isLastStep;
-    }
-    else if (this.buttonType === buttonTypeNext) {
-        this.isVisible = !isLastStep;
-    }
-    else {
-        this.isVisible = true;
-    }
-}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
-    if (this.buttonType === buttonTypeNext ||
-        this.buttonType === buttonTypeFinish) {
-        this.buttonClassName = 'sky-btn-primary';
-    }
-    else {
-        this.buttonClassName = 'sky-btn-default';
-    }
-    this.ariaControls = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f")?.tabPanelId;
-}, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
-    if (this.tabset?.tabs) {
-        const tabs = this.tabset.tabs.toArray();
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, undefined, "f");
-        // tab index can be a number or a string, but we need the actual number index
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
-            if (this.buttonType === buttonTypeNext) {
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1], "f");
-            }
-            else if (this.buttonType === buttonTypePrevious) {
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1], "f");
-            }
-        }
-    }
-};
-SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-tabset-nav-button', template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { tabset: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
 class SkyTabsModule {
 }
 SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
         SkyTabComponent,
         SkyTabsetComponent,
-        SkyTabsetNavButtonComponent], imports: [CommonModule,
+        SkyTabsetNavButtonComponent,
+        SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
         RouterModule,
         SkyDropdownModule,
         SkyI18nModule,
@@ -2212,6 +2298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                         SkyTabComponent,
                         SkyTabsetComponent,
                         SkyTabsetNavButtonComponent,
+                        SkyTabsetNavButtonDisabledPipe,
                     ],
                     imports: [
                         CommonModule,