@skyux/tabs 7.0.0-beta.0 → 7.0.0-beta.10

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';
@@ -11,7 +11,8 @@ import * as i5 from '@skyux/indicators';
 import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
 import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
+import { ReplaySubject, BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
 import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
 import { skyAnimationSlide } from '@skyux/animations';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -19,7 +20,6 @@ import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i5$1 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
-import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -35,7 +35,15 @@ const RESOURCES = {
         skyux_tabs_navigator_next: { message: 'Next' },
         skyux_tabs_navigator_previous: { message: 'Previous' },
         skyux_tab_open: { message: 'Open tab' },
+        skyux_tabs_sr_tab_order: { message: 'Tab {0} of {1}: {2}' },
         skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
+        skyux_wizard_sr_step_current: { message: 'Step {0} of {1}, current: {2}' },
+        skyux_wizard_sr_step_completed: {
+            message: 'Step {0} of {1}, completed: {2}',
+        },
+        skyux_wizard_sr_step_unavailable: {
+            message: 'Step {0} of {1}, unavailable: {2}',
+        },
     },
 };
 class SkyTabsResourcesProvider {
@@ -71,20 +79,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyVerticalTabMediaQueryService_currentSubject;
 /**
  * @internal
  */
 class SkyVerticalTabMediaQueryService {
     constructor() {
-        this.currentSubject = new BehaviorSubject(this.current);
-        this._current = SkyMediaBreakpoints.xs;
-        this.currentSubject.next(this._current);
-    }
-    get current() {
-        return this._current;
+        _SkyVerticalTabMediaQueryService_currentSubject.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyVerticalTabMediaQueryService_currentSubject, new ReplaySubject(1), "f");
     }
     subscribe(listener) {
-        return this.currentSubject.subscribe({
+        return __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").subscribe({
             next: (breakpoints) => {
                 listener(breakpoints);
             },
@@ -104,8 +109,8 @@ class SkyVerticalTabMediaQueryService {
         else {
             breakpoint = SkyMediaBreakpoints.lg;
         }
-        this._current = breakpoint;
-        this.currentSubject.next(this._current);
+        this.current = breakpoint;
+        __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").next(this.current);
     }
     isWidthWithinBreakpiont(width, breakpoint) {
         const xsBreakpointMaxPixels = 767;
@@ -130,19 +135,21 @@ class SkyVerticalTabMediaQueryService {
         }
     }
     destroy() {
-        this.currentSubject.complete();
+        __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").complete();
     }
 }
+_SkyVerticalTabMediaQueryService_currentSubject = new WeakMap();
 SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+var _SkyVerticalTabsetAdapterService_renderer;
 class SkyVerticalTabsetAdapterService {
     constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyVerticalTabsetAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyVerticalTabsetAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     getWidth(elementRef) {
         return elementRef.nativeElement.clientWidth;
@@ -152,10 +159,10 @@ class SkyVerticalTabsetAdapterService {
     }
     setResponsiveClass(element, breakpoint) {
         const nativeEl = element.nativeElement;
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
+        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
+        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
+        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
         let newClass;
         switch (breakpoint) {
             case SkyMediaBreakpoints.xs: {
@@ -175,15 +182,17 @@ class SkyVerticalTabsetAdapterService {
                 break;
             }
         }
-        this.renderer.addClass(nativeEl, newClass);
+        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").addClass(nativeEl, newClass);
     }
 }
+_SkyVerticalTabsetAdapterService_renderer = new WeakMap();
 SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
+var _SkyVerticalTabsetService_instances, _SkyVerticalTabsetService_contentAdded, _SkyVerticalTabsetService_tabsVisible, _SkyVerticalTabsetService_isMobile, _SkyVerticalTabsetService_mediaQueryService, _SkyVerticalTabsetService_destroyContent, _SkyVerticalTabsetService_moveContent, _SkyVerticalTabsetService_updateTabClicked;
 const VISIBLE_STATE = 'shown';
 const HIDDEN_STATE = 'void';
 /**
@@ -191,41 +200,40 @@ const HIDDEN_STATE = 'void';
  */
 class SkyVerticalTabsetService {
     constructor(mediaQueryService) {
-        this.mediaQueryService = mediaQueryService;
+        _SkyVerticalTabsetService_instances.add(this);
         this.activeIndex = undefined;
         this.hidingTabs = new BehaviorSubject(false);
-        this.indexChanged = new BehaviorSubject(undefined);
+        this.indexChanged = new ReplaySubject(1);
         this.maintainTabContent = false;
         this.showingTabs = new BehaviorSubject(false);
         this.switchingMobile = new Subject();
         this.tabs = [];
         this.tabAdded = new Subject();
-        this.tabClicked = new BehaviorSubject(undefined);
-        this._contentAdded = false;
-        this._tabsVisible = false;
-        this._isMobile = false;
-        this.mediaQueryService.subscribe((breakpoint) => {
+        this.tabClicked = new ReplaySubject(1);
+        _SkyVerticalTabsetService_contentAdded.set(this, false);
+        _SkyVerticalTabsetService_tabsVisible.set(this, false);
+        _SkyVerticalTabsetService_isMobile.set(this, false);
+        _SkyVerticalTabsetService_mediaQueryService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyVerticalTabsetService_mediaQueryService, mediaQueryService, "f");
+        __classPrivateFieldGet(this, _SkyVerticalTabsetService_mediaQueryService, "f").subscribe((breakpoint) => {
             const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
-            if (nowMobile && !this._isMobile) {
+            if (nowMobile && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
                 // switching to mobile
                 this.switchingMobile.next(true);
-                if (!this._tabsVisible) {
+                if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
                     this.hidingTabs.next(true);
                 }
             }
-            else if (!nowMobile && this._isMobile) {
+            else if (!nowMobile && __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
                 // switching to widescreen
                 this.switchingMobile.next(false);
-                if (!this._tabsVisible) {
+                if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
                     this.showingTabs.next(true);
                 }
             }
-            this._isMobile = nowMobile;
+            __classPrivateFieldSet(this, _SkyVerticalTabsetService_isMobile, nowMobile, "f");
         });
     }
-    set content(value) {
-        this._content = value;
-    }
     addTab(tab) {
         const index = this.tabs.length;
         tab.index = index;
@@ -243,15 +251,15 @@ class SkyVerticalTabsetService {
         if (this.maintainTabContent &&
             tab.contentRendered &&
             /* istanbul ignore next */
-            this._content?.nativeElement.contains(tab.tabContent.nativeElement)) {
-            this._content.nativeElement.removeChild(tab.tabContent.nativeElement);
+            this.content?.nativeElement.contains(tab.tabContent?.nativeElement)) {
+            this.content?.nativeElement.removeChild(tab.tabContent?.nativeElement);
         }
         this.tabs.splice(tabIndex, 1);
         // update tab indices
         this.tabs.forEach((tabItem, index) => (tabItem.index = index));
         if (tab.active) {
             if (!this.maintainTabContent) {
-                this.destroyContent();
+                __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_destroyContent).call(this);
             }
             // Try selecting the next tab first, and if there's no next tab then
             // try selecting the previous one.
@@ -271,89 +279,85 @@ class SkyVerticalTabsetService {
         }
         this.activeIndex = tab.index;
         this.tabClicked.next(true);
-        this.updateTabClicked();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_updateTabClicked).call(this);
     }
     activeTab() {
         return this.tabs.find((t) => t.index === this.activeIndex);
     }
     isMobile() {
-        return this._isMobile;
+        return __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f");
     }
     updateContent() {
         if (!this.maintainTabContent) {
-            if (!this._contentAdded && this.contentVisible()) {
+            if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && this.contentVisible()) {
                 // content needs to be moved
-                this.moveContent();
+                __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_moveContent).call(this);
             }
-            else if (this._contentAdded && !this.contentVisible()) {
+            else if (__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && !this.contentVisible()) {
                 // content hidden
-                this._contentAdded = false;
+                __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
             }
         }
         else {
             this.tabs.forEach((tab) => {
                 if (!tab.contentRendered) {
-                    this._content.nativeElement.appendChild(tab.tabContent.nativeElement);
+                    this.content?.nativeElement.appendChild(tab.tabContent?.nativeElement);
                     tab.contentRendered = true;
                 }
             });
         }
     }
     tabsVisible() {
-        return !this.isMobile() || this._tabsVisible;
+        return !this.isMobile() || __classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
     }
     contentVisible() {
-        return !this.isMobile() || !this._tabsVisible;
+        return !this.isMobile() || !__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
     }
     showTabs() {
-        this._tabsVisible = true;
-        this._contentAdded = false;
+        __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, true, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
         this.animationTabsVisibleState = VISIBLE_STATE;
         this.animationContentVisibleState = HIDDEN_STATE;
         this.showingTabs.next(true);
     }
-    destroyContent() {
-        if (this._content) {
-            this._content.nativeElement.innerHTML = '';
-        }
-        this.content = undefined;
-    }
-    moveContent() {
-        /* istanbul ignore else */
-        if (this._content && !this._contentAdded) {
-            const activeTab = this.activeTab();
-            const activeContent = activeTab ? activeTab.tabContent : undefined;
-            if (activeContent && activeContent.nativeElement) {
-                this._content.nativeElement.appendChild(activeContent.nativeElement);
-                activeTab.contentRendered = true;
-                this._contentAdded = true;
-            }
-        }
-    }
-    updateTabClicked() {
-        this._contentAdded = false;
-        if (this.isMobile()) {
-            this._tabsVisible = false;
-            this.animationContentVisibleState = VISIBLE_STATE;
-            this.animationTabsVisibleState = HIDDEN_STATE;
-            this.hidingTabs.next(true);
-        }
-        this.indexChanged.next(this.activeIndex);
-    }
 }
+_SkyVerticalTabsetService_contentAdded = new WeakMap(), _SkyVerticalTabsetService_tabsVisible = new WeakMap(), _SkyVerticalTabsetService_isMobile = new WeakMap(), _SkyVerticalTabsetService_mediaQueryService = new WeakMap(), _SkyVerticalTabsetService_instances = new WeakSet(), _SkyVerticalTabsetService_destroyContent = function _SkyVerticalTabsetService_destroyContent() {
+    if (this.content) {
+        this.content.nativeElement.innerHTML = '';
+    }
+    this.content = undefined;
+}, _SkyVerticalTabsetService_moveContent = function _SkyVerticalTabsetService_moveContent() {
+    /* istanbul ignore else */
+    if (this.content && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f")) {
+        const activeTab = this.activeTab();
+        const activeContent = activeTab ? activeTab.tabContent : undefined;
+        if (activeContent && activeTab && activeContent.nativeElement) {
+            this.content.nativeElement.appendChild(activeContent.nativeElement);
+            activeTab.contentRendered = true;
+            __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, true, "f");
+        }
+    }
+}, _SkyVerticalTabsetService_updateTabClicked = function _SkyVerticalTabsetService_updateTabClicked() {
+    __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
+    if (this.isMobile()) {
+        __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, false, "f");
+        this.animationContentVisibleState = VISIBLE_STATE;
+        this.animationTabsVisibleState = HIDDEN_STATE;
+        this.hidingTabs.next(true);
+    }
+    this.indexChanged.next(this.activeIndex);
+};
 SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
 
+var _SkyVerticalTabComponent_instances, _SkyVerticalTabComponent__ariaRole, _SkyVerticalTabComponent__contentRendered, _SkyVerticalTabComponent_tabIdOrDefault, _SkyVerticalTabComponent_defaultTabId, _SkyVerticalTabComponent_mobileSubscription, _SkyVerticalTabComponent_ngUnsubscribe, _SkyVerticalTabComponent_adapterService, _SkyVerticalTabComponent_changeRef, _SkyVerticalTabComponent_tabsetService, _SkyVerticalTabComponent_verticalTabMediaQueryService, _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass;
 let nextId$2 = 0;
 class SkyVerticalTabComponent {
     constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
-        this.adapterService = adapterService;
-        this.changeRef = changeRef;
-        this.tabsetService = tabsetService;
-        this.verticalTabMediaQueryService = verticalTabMediaQueryService;
+        _SkyVerticalTabComponent_instances.add(this);
         /**
          * Indicates whether the tab is active when the tabset loads.
          */
@@ -367,16 +371,22 @@ class SkyVerticalTabComponent {
          * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
          */
         this.errorIndicator = false;
-        /**
-         * Specifies an ID for the tab.
-         * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
-         */
-        this.tabId = `sky-vertical-tab-${++nextId$2}`;
         this.isMobile = false;
-        this._contentRendered = false;
-        this._mobileSubscription = new Subject();
-        this._ngUnsubscribe = new Subject();
-        this._showTabRightArrow = false;
+        _SkyVerticalTabComponent__ariaRole.set(this, 'tab');
+        _SkyVerticalTabComponent__contentRendered.set(this, false);
+        _SkyVerticalTabComponent_tabIdOrDefault.set(this, void 0);
+        _SkyVerticalTabComponent_defaultTabId.set(this, void 0);
+        _SkyVerticalTabComponent_mobileSubscription.set(this, new Subject());
+        _SkyVerticalTabComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyVerticalTabComponent_adapterService.set(this, void 0);
+        _SkyVerticalTabComponent_changeRef.set(this, void 0);
+        _SkyVerticalTabComponent_tabsetService.set(this, void 0);
+        _SkyVerticalTabComponent_verticalTabMediaQueryService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_changeRef, changeRef, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabsetService, tabsetService, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, verticalTabMediaQueryService, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, __classPrivateFieldSet(this, _SkyVerticalTabComponent_defaultTabId, `sky-vertical-tab-${++nextId$2}`, "f"), "f");
     }
     /**
      * Specifies an ARIA role for the vertical tab
@@ -389,60 +399,61 @@ class SkyVerticalTabComponent {
      * In the next major version, this property will be automatically set to `tab`.
      */
     get ariaRole() {
-        if (this.isMobile) {
-            return undefined;
-        }
-        return this._ariaRole || 'tab';
+        return __classPrivateFieldGet(this, _SkyVerticalTabComponent__ariaRole, "f");
     }
     set ariaRole(value) {
-        this._ariaRole = value;
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent__ariaRole, value ?? 'tab', "f");
     }
     /**
-     * Indicates whether to display a chevron-right icon in the righthand side of the tab.
-     * @internal
+     * Specifies an ID for the tab.
+     * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
      */
-    get showTabRightArrow() {
-        return this._showTabRightArrow && this.tabsetService.isMobile();
+    set tabId(value) {
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, value || __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"), "f");
     }
-    set showTabRightArrow(value) {
-        this._showTabRightArrow = value;
+    get tabId() {
+        return __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdOrDefault, "f");
     }
     set contentRendered(value) {
-        this._contentRendered = value;
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent__contentRendered, value, "f");
         /* istanbul ignore else */
-        if (this._contentRendered) {
+        if (__classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f")) {
             // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
             setTimeout(() => {
-                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+                if (this.tabContent) {
+                    __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
+                }
             });
         }
     }
     get contentRendered() {
-        return this._contentRendered;
+        return __classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f");
     }
     ngOnInit() {
-        this.isMobile = this.tabsetService.isMobile();
-        this.changeRef.markForCheck();
-        this.tabsetService.switchingMobile.subscribe((mobile) => {
+        this.isMobile = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").isMobile();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
             this.isMobile = mobile;
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
         });
         // Update the breakpoint and responsive class here just as a sanity check since we can not
         // watch for element resizing.
-        this.tabsetService.indexChanged
-            .pipe(takeUntil(this._ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").indexChanged
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f")))
             .subscribe((index) => {
             if (this.index === index && this.contentRendered) {
-                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+                if (this.tabContent) {
+                    __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
+                }
             }
         });
-        this.tabsetService.addTab(this);
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").addTab(this);
     }
     ngOnDestroy() {
-        this._mobileSubscription.unsubscribe();
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-        this.tabsetService.destroyTab(this);
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_mobileSubscription, "f").unsubscribe();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").destroyTab(this);
     }
     tabIndex() {
         if (!this.disabled) {
@@ -455,8 +466,8 @@ class SkyVerticalTabComponent {
     activateTab() {
         if (!this.disabled) {
             this.active = true;
-            this.tabsetService.activateTab(this);
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").activateTab(this);
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
         }
     }
     onTabButtonKeyUp(event) {
@@ -475,18 +486,25 @@ class SkyVerticalTabComponent {
         }
     }
     onWindowResize() {
-        this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+        if (this.tabContent) {
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
+        }
     }
     tabDeactivated() {
-        this.changeRef.markForCheck();
-    }
-    updateBreakpointAndResponsiveClass(width) {
-        this.verticalTabMediaQueryService.setBreakpointForWidth(width);
-        const newBreakpiont = this.verticalTabMediaQueryService.current;
-        this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
-        this.changeRef.markForCheck();
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
     }
 }
+_SkyVerticalTabComponent__ariaRole = new WeakMap(), _SkyVerticalTabComponent__contentRendered = new WeakMap(), _SkyVerticalTabComponent_tabIdOrDefault = new WeakMap(), _SkyVerticalTabComponent_defaultTabId = new WeakMap(), _SkyVerticalTabComponent_mobileSubscription = new WeakMap(), _SkyVerticalTabComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabComponent_adapterService = new WeakMap(), _SkyVerticalTabComponent_changeRef = new WeakMap(), _SkyVerticalTabComponent_tabsetService = new WeakMap(), _SkyVerticalTabComponent_verticalTabMediaQueryService = new WeakMap(), _SkyVerticalTabComponent_instances = new WeakSet(), _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass = function _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass() {
+    if (this.tabContent) {
+        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;
+        if (newBreakpoint) {
+            __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").setResponsiveClass(this.tabContent, newBreakpoint);
+        }
+        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
+    }
+};
 SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
 SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
         SkyVerticalTabMediaQueryService,
@@ -494,7 +512,7 @@ SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             provide: SkyMediaQueryService,
             useExisting: SkyVerticalTabMediaQueryService,
         },
-    ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\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: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"isMobile && showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\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: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tab', providers: [
@@ -503,7 +521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                             provide: SkyMediaQueryService,
                             useExisting: SkyVerticalTabMediaQueryService,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"isMobile && showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
@@ -530,67 +548,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['window:resize']
             }] } });
 
+var _SkyVerticalTabsetGroupComponent_ngUnsubscribe, _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden, _SkyVerticalTabsetGroupComponent_tabService, _SkyVerticalTabsetGroupComponent_changeRef;
 class SkyVerticalTabsetGroupComponent {
     constructor(tabService, changeRef) {
-        this.tabService = tabService;
-        this.changeRef = changeRef;
-        this.ngUnsubscribe = new Subject();
-        this.openBeforeTabsHidden = false;
-        this._open = false;
+        _SkyVerticalTabsetGroupComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden.set(this, false);
+        _SkyVerticalTabsetGroupComponent_tabService.set(this, void 0);
+        _SkyVerticalTabsetGroupComponent_changeRef.set(this, void 0);
         this.tabClicked = () => {
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
         };
         this.tabsHidden = () => {
             // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
-            this.openBeforeTabsHidden = this.open;
+            __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden, this.open, "f");
             this.open = false;
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
         };
         this.tabsShown = () => {
-            this.open = this.openBeforeTabsHidden;
-            this.changeRef.markForCheck();
+            this.open = __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden, "f");
+            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
         };
-    }
-    /**
-     * Indicates whether the collapsible group is expanded.
-     * @default false
-     */
-    set open(value) {
-        this._open = value;
-    }
-    get open() {
-        return !this.disabled && this._open;
+        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_tabService, tabService, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_changeRef, changeRef, "f");
     }
     ngOnInit() {
-        this.tabService.hidingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").hidingTabs
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
             .subscribe(this.tabsHidden);
-        this.tabService.showingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").showingTabs
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
             .subscribe(this.tabsShown);
-        this.tabService.tabClicked
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").tabClicked
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
             .subscribe(this.tabClicked);
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").complete();
     }
     toggleMenuOpen() {
         if (!this.disabled) {
             this.open = !this.open;
         }
-        this.changeRef.markForCheck();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
     }
     subMenuOpen() {
-        return this.tabs && this.tabs.find((t) => t.active) !== undefined;
+        return !!this.tabs && this.tabs.find((t) => !!t.active) !== undefined;
     }
 }
+_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]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"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]=\"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]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"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]=\"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: [{
@@ -602,12 +613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: [SkyVerticalTabComponent]
             }] } });
 
+var _SkyVerticalTabsetComponent_ngUnsubscribe, _SkyVerticalTabsetComponent__ariaRole, _SkyVerticalTabsetComponent_resources, _SkyVerticalTabsetComponent_changeRef;
 class SkyVerticalTabsetComponent {
     constructor(adapterService, tabService, resources, changeRef) {
         this.adapterService = adapterService;
         this.tabService = tabService;
-        this.resources = resources;
-        this.changeRef = changeRef;
         /**
          * Indicates whether the vertical tabset loads tab content during initialization so that it
          * displays content without moving around elements in the content container.
@@ -620,7 +630,12 @@ class SkyVerticalTabsetComponent {
          */
         this.activeChange = new EventEmitter();
         this.isMobile = false;
-        this._ngUnsubscribe = new Subject();
+        _SkyVerticalTabsetComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyVerticalTabsetComponent__ariaRole.set(this, 'tablist');
+        _SkyVerticalTabsetComponent_resources.set(this, void 0);
+        _SkyVerticalTabsetComponent_changeRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_resources, resources, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_changeRef, changeRef, "f");
     }
     /**
      * Specifies an ARIA role for the vertical tabset
@@ -633,38 +648,35 @@ class SkyVerticalTabsetComponent {
      * In the next major version, this property will be automatically set to `tablist`.
      */
     get ariaRole() {
-        if (this.isMobile) {
-            return undefined;
-        }
-        return this._ariaRole || 'tablist';
+        return __classPrivateFieldGet(this, _SkyVerticalTabsetComponent__ariaRole, "f");
     }
     set ariaRole(value) {
-        this._ariaRole = value;
+        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent__ariaRole, value ?? 'tablist', "f");
     }
     ngOnInit() {
         this.tabService.maintainTabContent = this.maintainTabContent;
         this.tabService.indexChanged
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
             .subscribe((index) => {
             this.activeChange.emit(index);
             if (this.contentWrapper) {
                 this.adapterService.scrollToContentTop(this.contentWrapper);
             }
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
         });
         this.tabService.switchingMobile
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
             .subscribe((mobile) => {
             this.isMobile = mobile;
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
         });
         if (this.tabService.isMobile()) {
             this.isMobile = true;
             this.tabService.animationContentVisibleState = VISIBLE_STATE;
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
         }
         if (!this.showTabsText) {
-            this.resources
+            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_resources, "f")
                 .getString('skyux_vertical_tabs_show_tabs_text')
                 .pipe(take(1))
                 .subscribe((resource) => {
@@ -681,12 +693,13 @@ class SkyVerticalTabsetComponent {
         this.tabService.updateContent();
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").complete();
     }
 }
+_SkyVerticalTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetComponent__ariaRole = new WeakMap(), _SkyVerticalTabsetComponent_resources = new WeakMap(), _SkyVerticalTabsetComponent_changeRef = new WeakMap();
 SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\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"] }], animations: [
+SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\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"] }], animations: [
         trigger('tabGroupEnter', [
             transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                 style({ transform: 'translate(-100%)' }),
@@ -715,7 +728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                                 animate('150ms ease-in'),
                             ]),
                         ]),
-                    ], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
+                    ], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
                 type: Input
             }], ariaLabel: [{
@@ -818,15 +831,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
+var _SkySectionedFormSectionComponent_ngUnsubscribe, _SkySectionedFormSectionComponent_sectionedFormService, _SkySectionedFormSectionComponent_tabsetService, _SkySectionedFormSectionComponent_changeRef;
 let nextId$1 = 0;
 /**
  * Creates an individual form to display as a section within the sectioned form.
  */
 class SkySectionedFormSectionComponent {
     constructor(sectionedFormService, tabsetService, changeRef) {
-        this.sectionedFormService = sectionedFormService;
-        this.tabsetService = tabsetService;
-        this.changeRef = changeRef;
         this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
         this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
         /**
@@ -834,25 +845,32 @@ class SkySectionedFormSectionComponent {
          * @default false
          */
         this.active = false;
-        this._ngUnsubscribe = new Subject();
+        _SkySectionedFormSectionComponent_ngUnsubscribe.set(this, new Subject());
+        _SkySectionedFormSectionComponent_sectionedFormService.set(this, void 0);
+        _SkySectionedFormSectionComponent_tabsetService.set(this, void 0);
+        _SkySectionedFormSectionComponent_changeRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_sectionedFormService, sectionedFormService, "f");
+        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_tabsetService, tabsetService, "f");
+        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_changeRef, changeRef, "f");
     }
     ngOnInit() {
-        this.changeRef.detectChanges();
-        this.tabsetService.switchingMobile.subscribe((mobile) => {
-            this.changeRef.detectChanges();
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
+            __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
         });
-        this.sectionedFormService.requiredChange
-            .pipe(takeUntil(this._ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").requiredChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
             .subscribe((required) => (this.fieldRequired = required));
-        this.sectionedFormService.invalidChange
-            .pipe(takeUntil(this._ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").invalidChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
             .subscribe((invalid) => (this.fieldInvalid = invalid));
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").complete();
     }
 }
+_SkySectionedFormSectionComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormSectionComponent_sectionedFormService = new WeakMap(), _SkySectionedFormSectionComponent_tabsetService = new WeakMap(), _SkySectionedFormSectionComponent_changeRef = new WeakMap();
 SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
@@ -869,13 +887,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: [SkyVerticalTabComponent]
             }] } });
 
+var _SkySectionedFormComponent_ngUnsubscribe, _SkySectionedFormComponent_changeRef;
 /**
  * Creates a container for the sectioned forms.
  */
 class SkySectionedFormComponent {
     constructor(tabService, changeRef) {
         this.tabService = tabService;
-        this.changeRef = changeRef;
         /**
          * Indicates whether the sectioned form loads section content during initialization so that it
          * displays content without moving around elements in the content container.
@@ -887,30 +905,34 @@ class SkySectionedFormComponent {
          * section. The index is based on the section's position when the form loads.
          */
         this.indexChanged = new EventEmitter();
-        this.isMobile = false;
-        this._ngUnsubscribe = new Subject();
-    }
-    get ariaRole() {
-        return this.isMobile ? undefined : 'tablist';
+        this.ariaRole = 'tablist';
+        _SkySectionedFormComponent_ngUnsubscribe.set(this, new Subject());
+        _SkySectionedFormComponent_changeRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkySectionedFormComponent_changeRef, changeRef, "f");
     }
     ngOnInit() {
         this.tabService.maintainTabContent = this.maintainSectionContent;
         this.tabService.indexChanged
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
             .subscribe((index) => {
             this.indexChanged.emit(index);
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         });
         this.tabService.switchingMobile
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
             .subscribe((mobile) => {
-            this.isMobile = mobile;
-            this.changeRef.markForCheck();
+            if (!mobile) {
+                this.ariaRole = 'tablist';
+            }
+            else {
+                this.ariaRole = undefined;
+            }
+            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         });
         if (this.tabService.isMobile()) {
-            this.isMobile = true;
+            this.ariaRole = undefined;
             this.tabService.animationContentVisibleState = VISIBLE_STATE;
-            this.changeRef.markForCheck();
+            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         }
     }
     ngAfterViewChecked() {
@@ -918,18 +940,19 @@ class SkySectionedFormComponent {
         this.tabService.updateContent();
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").complete();
     }
     tabsVisible() {
-        this.changeRef.markForCheck();
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         return this.tabService.tabsVisible();
     }
     showTabs() {
         this.tabService.showTabs();
-        this.changeRef.markForCheck();
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
     }
 }
+_SkySectionedFormComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormComponent_changeRef = new WeakMap();
 SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('tabEnter', [
@@ -998,10 +1021,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
 /**
  * @internal
  */
-class SkyTabButtonComponent {
+class SkyTabButtonAdapterService {
+    focusButtonLink(buttonEl) {
+        buttonEl.nativeElement.querySelector('a').focus();
+    }
+}
+SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
+            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;
+        _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 __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f");
+    }
+    get activeTabIndex() {
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f");
+    }
+    get focusedTabBtnIndex() {
+        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.
+     */
+    setActiveTabIndex(value, config = {
+        emitChange: true,
+    }) {
+        if (value !== undefined &&
+            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
+            this.currentActiveTabIndex = value;
+            /* istanbul ignore else */
+            if (config.emitChange) {
+                __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").next(value);
+            }
+            this.setFocusedTabBtnIndex(value);
+        }
+    }
+    focusNextTabBtn(tabButtons) {
+        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 && tabBtn.tabIndex !== undefined) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusPrevTabBtn(tabButtons) {
+        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 && tabBtn.tabIndex !== undefined) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusFirstOrNearestTabBtn(tabButtons) {
+        for (let i = 0; i < tabButtons.length; i++) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusLastOrNearestTabBtn(tabButtons) {
+        for (let i = tabButtons.length - 1; i >= 0; i--) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    setFocusedTabBtnIndex(tabIndex) {
+        this.currentFocusedTabBtnIndex = tabIndex;
+        __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").next(tabIndex);
+    }
+    /**
+     * Registers a tab component.
+     */
+    registerTab(tabIndex) {
+        var _a;
+        if (tabIndex === undefined) {
+            tabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f");
+            __classPrivateFieldSet(this, _SkyTabsetService_tabCounter, (_a = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f"), _a++, _a), "f");
+        }
+        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").push({ tabIndex });
+        return tabIndex;
+    }
+    updateTabIndex(currentTabIndex, 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 = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        // Notify the tabset component when an active tab is unregistered.
+        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,
+            });
+        }
+        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").splice(index, 1);
+    }
+    /**
+     * Unregisters all tab components at once.
+     */
+    unregisterAll() {
+        __classPrivateFieldSet(this, _SkyTabsetService_tabs, [], "f");
+    }
+    /**
+     * Compares two tab indexes and returns `true` if they are equal.
+     */
+    tabIndexesEqual(tabIndex1, tabIndex2) {
+        return (tabIndex1 === tabIndex2 ||
+            (tabIndex1 !== undefined &&
+                tabIndex2 !== undefined &&
+                +tabIndex1 === +tabIndex2));
+    }
+    /**
+     * Verifies if a provided tab index is registered.
+     */
+    isValidTabIndex(tabIndex) {
+        return __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+    }
+    /**
+     * Activates the first registered tab.
+     */
+    activateFirstTab() {
+        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 = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex] || __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex - 1];
+        if (newActiveTab) {
+            this.currentActiveTabIndex = newActiveTab.tabIndex;
+        }
+    }
+}
+_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_DISABLED = false;
+/**
+ * @internal
+ */
+class SkyTabButtonComponent {
+    constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
+        _SkyTabButtonComponent_instances.add(this);
         this.buttonClick = new EventEmitter();
         this.closeClick = new EventEmitter();
+        this.closeBtnTabIndex = '-1';
+        _SkyTabButtonComponent__isActive.set(this, false);
+        _SkyTabButtonComponent__isDisabled.set(this, DEFAULT_DISABLED);
+        _SkyTabButtonComponent__tabStyle.set(this, void 0);
+        _SkyTabButtonComponent_adapterService.set(this, void 0);
+        _SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
+        _SkyTabButtonComponent_elementRef.set(this, void 0);
+        _SkyTabButtonComponent_tabsetService.set(this, void 0);
+        _SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
+        __classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
+    }
+    get active() {
+        return __classPrivateFieldGet(this, _SkyTabButtonComponent__isActive, "f");
+    }
+    set active(value) {
+        __classPrivateFieldSet(this, _SkyTabButtonComponent__isActive, value, "f");
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
+    }
+    get disabled() {
+        return __classPrivateFieldGet(this, _SkyTabButtonComponent__isDisabled, "f");
+    }
+    set disabled(value) {
+        __classPrivateFieldSet(this, _SkyTabButtonComponent__isDisabled, value ?? DEFAULT_DISABLED, "f");
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
+    }
+    get tabStyle() {
+        return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
+    }
+    set tabStyle(style) {
+        __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
+        __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 (this.tabIndex !== undefined && focusedIndex === this.tabIndex) {
+                this.closeBtnTabIndex = '0';
+                this.focusBtn();
+            }
+            else {
+                this.closeBtnTabIndex = '-1';
+            }
+            __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
     }
     onButtonClick(event) {
         if (!this.disabled) {
@@ -1030,13 +1306,38 @@ class SkyTabButtonComponent {
         event.stopPropagation();
         event.preventDefault();
     }
+    focusBtn() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
+    }
+    onFocus() {
+        if (this.tabIndex !== undefined) {
+            __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
+        }
+    }
 }
-SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [], 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", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, 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    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    [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]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\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    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__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() {
+    if (this.tabStyle === 'tabs') {
+        this.wizardStepState = undefined;
+    }
+    else {
+        if (this.active) {
+            this.wizardStepState = 'current';
+        }
+        else if (!this.disabled) {
+            this.wizardStepState = 'completed';
+        }
+        else {
+            this.wizardStepState = 'unavailable';
+        }
+    }
+    __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    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', 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    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    [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]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\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    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"] }]
-        }], propDecorators: { active: [{
+            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: [{
                 type: Input
@@ -1052,6 +1353,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
+            }], tabNumber: [{
+                type: Input
+            }], totalTabsCount: [{
+                type: Input
             }], tabStyle: [{
                 type: Input
             }], buttonClick: [{
@@ -1060,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];
         }
@@ -1102,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.
@@ -1129,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.
@@ -1154,241 +1469,170 @@ 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 }]; } });
 
-/**
- * @internal
- */
-class SkyTabsetService {
-    constructor() {
-        this.currentActiveTabIndex = 0;
-        this._activeTabIndex = new BehaviorSubject(0);
-        this._activeTabUnregistered = new Subject();
-        this.tabs = [];
-        this.tabCounter = 0;
-    }
-    get activeTabUnregistered() {
-        return this._activeTabUnregistered.asObservable();
-    }
-    get activeTabIndex() {
-        return this._activeTabIndex.asObservable();
+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) {
+        _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;
+        _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);
     }
     /**
-     * Sets the active tab by its unique `tabIndex` property.
+     * Indicates whether the tab is active when the tabset loads. After initialization, the `active`
+     * property on the tabset component should be used to set the active tab.
+     * @default false
      */
-    setActiveTabIndex(value, config = {
-        emitChange: true,
-    }) {
-        if (value !== undefined &&
-            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
-            this.currentActiveTabIndex = value;
-            /* istanbul ignore else */
-            if (config.emitChange) {
-                this._activeTabIndex.next(value);
-            }
+    set active(value) {
+        if (value !== undefined && !!value !== __classPrivateFieldGet(this, _SkyTabComponent__active, "f")) {
+            __classPrivateFieldSet(this, _SkyTabComponent__active, value, "f");
+            __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").next();
         }
     }
-    /**
-     * Registers a tab component.
-     */
-    registerTab(tabIndex) {
-        if (tabIndex === undefined) {
-            tabIndex = this.tabCounter;
-            this.tabCounter++;
-        }
-        this.tabs.push({ tabIndex });
-        return tabIndex;
+    get active() {
+        return __classPrivateFieldGet(this, _SkyTabComponent__active, "f");
     }
-    updateTabIndex(currentTabIndex, newTabIndex) {
-        const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
-        found.tabIndex = newTabIndex;
+    get activeChange() {
+        return __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f");
     }
     /**
-     * Unregisters a tab component.
+     * Specifies a custom query parameter value for the tab.
+     * This works in conjunction with the tabset's `permalinkId` to distinguish
+     * the tab's unique state in the URL by generating a query parameter that is
+     * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
+     * By default, the query parameter's value is parsed automatically from the tab's heading text.
+     * This input only applies when the tabset's `tabStyle` is `"tabs"`.
      */
-    unregisterTab(tabIndex) {
-        const index = this.tabs.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({
-                arrayIndex: index,
-            });
-        }
-        this.tabs.splice(index, 1);
+    set permalinkValue(value) {
+        __classPrivateFieldSet(this, _SkyTabComponent__permalinkValue, value, "f");
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
+    }
+    get permalinkValue() {
+        return __classPrivateFieldGet(this, _SkyTabComponent__permalinkValue, "f");
     }
     /**
-     * Unregisters all tab components at once.
+     * 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
      */
-    unregisterAll() {
-        this.tabs = [];
-    }
-    /**
-     * Compares two tab indexes and returns `true` if they are equal.
-     */
-    tabIndexesEqual(tabIndex1, tabIndex2) {
-        return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
-    }
-    /**
-     * Verifies if a provided tab index is registered.
-     */
-    isValidTabIndex(tabIndex) {
-        return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
-    }
-    /**
-     * Activates the first registered tab.
-     */
-    activateFirstTab() {
-        const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
-        if (firstTabIndex !== undefined) {
-            this.setActiveTabIndex(firstTabIndex);
-            return firstTabIndex;
-        }
-    }
-    /**
-     * 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];
-        if (newActiveTab) {
-            this.currentActiveTabIndex = newActiveTab.tabIndex;
-        }
-    }
-    isTabIndexActive(tabIndex) {
-        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
-    }
-}
-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
-        }] });
-
-let nextId = 0;
-class SkyTabComponent {
-    constructor(changeDetector, permalinkService, tabsetService) {
-        this.changeDetector = changeDetector;
-        this.permalinkService = permalinkService;
-        this.tabsetService = tabsetService;
-        /**
-         * 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.showContent = false;
-        this._activeChange = new BehaviorSubject(undefined);
-        this._stateChange = new BehaviorSubject(undefined);
-        this._tabIndexChange = new BehaviorSubject(undefined);
-        const id = nextId++;
-        this.tabPanelId = `sky-tab-${id}`;
-        this.tabButtonId = `${this.tabPanelId}-nav-btn`;
-    }
-    /**
-     * Indicates whether the tab is active when the tabset loads. After initialization, the `active`
-     * property on the tabset component should be used to set the active tab.
-     * @default false
-     */
-    set active(value) {
-        if (value !== undefined && value !== this._active) {
-            this._active = value;
-            this._activeChange.next();
-        }
-    }
-    get active() {
-        return this._active || false;
-    }
-    get activeChange() {
-        return this._activeChange.asObservable();
-    }
-    /**
-     * Specifies a custom query parameter value for the tab.
-     * This works in conjunction with the tabset's `permalinkId` to distinguish
-     * the tab's unique state in the URL by generating a query parameter that is
-     * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
-     * By default, the query parameter's value is parsed automatically from the tab's heading text.
-     * This input only applies when the tabset's `tabStyle` is `"tabs"`.
-     */
-    set permalinkValue(value) {
-        this._permalinkValue = this.permalinkService.urlify(value);
-    }
-    get permalinkValue() {
-        return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
+    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: [{
@@ -1410,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();
@@ -1438,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 []; } });
 
-var _SkyTabsetComponent__hasFinishButton;
+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.
          */
@@ -1492,41 +1903,57 @@ class SkyTabsetComponent {
          * This event only applies when `tabStyle` is `"tabs"`.
          */
         this.tabIndexesChange = new EventEmitter();
+        this.dropdownTriggerButtonText = '';
         this.tabButtons = [];
-        this.ngUnsubscribe = new Subject();
-        this.tabComponentsStateChangeUnsubscribe = new Subject();
-        _SkyTabsetComponent__hasFinishButton.set(this, false);
+        _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
@@ -1537,77 +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;
+        __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");
     }
-    get hasFinishButton() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__hasFinishButton, "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);
+        });
     }
-    set hasFinishButton(value) {
-        __classPrivateFieldSet(this, _SkyTabsetComponent__hasFinishButton, value, "f");
+    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();
@@ -1615,214 +2051,201 @@ class SkyTabsetComponent {
     onOpenTabClick() {
         this.openTab.emit();
     }
-    /**
-     * 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();
-        if (activeIndex === undefined) {
-            activeIndex = this.getActiveTabComponent()?.tabIndex;
-            if (activeIndex === undefined) {
-                activeIndex = this.active;
-            }
-        }
-        return activeIndex;
+    onRightKeyDown() {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusNextTabBtn(this.tabButtons);
     }
-    listenActiveIndexChange() {
-        this.tabsetService.activeTabIndex
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
-            .subscribe((activeIndex) => {
-            this.updateTabsetComponent(activeIndex);
-        });
+    onLeftKeyDown() {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusPrevTabBtn(this.tabButtons);
     }
-    listenTabComponentsStructuralChange() {
-        this.tabs.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
-            this.resetTabComponents();
-        });
+    onHomeKeyDown() {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusFirstOrNearestTabBtn(this.tabButtons);
+    }
+    onEndKeyDown() {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusLastOrNearestTabBtn(this.tabButtons);
     }
-    listenTabComponentsStateChange() {
+}
+_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.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;
-            }
-        }
+}, _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;
     }
-    getActiveTabComponent() {
-        return this.tabs
-            .toArray()
-            .reverse()
-            .find((tab) => tab.active === true);
-    }
-    createTabButtons(activeIndex) {
-        return this.tabs.map((tab) => ({
-            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,
+    __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,
-        }));
-    }
-    updateTabButtons(activeIndex) {
-        this.tabButtons.forEach((button) => {
-            button.active = this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
-        });
+        })),
+    });
+}, _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);
     }
-    /**
-     * 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);
         }
     }
-}
-_SkyTabsetComponent__hasFinishButton = new WeakMap();
+    // 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  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>\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    [tabStyle]=\"tabStyle\"\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", "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  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>\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    [tabStyle]=\"tabStyle\"\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: [{
@@ -1846,163 +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
-     */
-    set tabset(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
-        }
-        if (value) {
-            if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton = true;
-            }
-            __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 (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === 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) {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").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 (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
-        this.isVisible = isLastStep;
-        return;
-    }
-    // Hide the next button on the last step only if a finish button exists.
-    if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext &&
-        isLastStep &&
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton) {
-        this.isVisible = false;
-        return;
-    }
-    this.isVisible = true;
-}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
-    if ((__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext ||
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) &&
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.hasFinishButton) {
-        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 (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.tabs) {
-        const tabs = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").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 (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext) {
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1], "f");
-            }
-            else if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === 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,
@@ -2024,6 +2298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                         SkyTabComponent,
                         SkyTabsetComponent,
                         SkyTabsetNavButtonComponent,
+                        SkyTabsetNavButtonDisabledPipe,
                     ],
                     imports: [
                         CommonModule,