@skyux/tabs 8.0.0-alpha.6 → 8.0.0-alpha.7

package/fesm2015/skyux-tabs.mjs

@@ -1,4 +1,4 @@
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, Pipe } from '@angular/core';
@@ -9,7 +9,7 @@ import * as i1 from '@skyux/core';
 import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule } from '@skyux/core';
 import * as i6 from '@skyux/indicators';
 import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i3$1 from '@skyux/i18n';
+import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { ReplaySubject, BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
@@ -56,16 +56,16 @@ class SkyTabsResourcesProvider {
  */
 class SkyTabsResourcesModule {
 }
-SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
-SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsResourcesModule, providers: [
+SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
+SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyTabsResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -139,9 +139,9 @@ class SkyVerticalTabMediaQueryService {
     }
 }
 _SkyVerticalTabMediaQueryService_currentSubject = new WeakMap();
-SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
+SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -186,9 +186,9 @@ class SkyVerticalTabsetAdapterService {
     }
 }
 _SkyVerticalTabsetAdapterService_renderer = new WeakMap();
-SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
+SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
@@ -350,9 +350,9 @@ _SkyVerticalTabsetService_contentAdded = new WeakMap(), _SkyVerticalTabsetServic
     }
     this.indexChanged.next(this.activeIndex);
 };
-SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
+SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
 
@@ -362,6 +362,9 @@ var _SkyTabIdService_instances, _SkyTabIdService_ids, _SkyTabIdService_ids$, _Sk
  * @internal
  */
 class SkyTabIdService {
+    get ids() {
+        return __classPrivateFieldGet(this, _SkyTabIdService_idsObs, "f");
+    }
     constructor() {
         _SkyTabIdService_instances.add(this);
         _SkyTabIdService_ids.set(this, void 0);
@@ -371,9 +374,6 @@ class SkyTabIdService {
         __classPrivateFieldSet(this, _SkyTabIdService_ids$, new BehaviorSubject([]), "f");
         __classPrivateFieldSet(this, _SkyTabIdService_idsObs, __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").asObservable(), "f");
     }
-    get ids() {
-        return __classPrivateFieldGet(this, _SkyTabIdService_idsObs, "f");
-    }
     /**
      * Associates a tab's ID with its parent tablist.
      * @param {string} id A unique ID for the tab's registration.
@@ -399,50 +399,15 @@ class SkyTabIdService {
 _SkyTabIdService_ids = new WeakMap(), _SkyTabIdService_ids$ = new WeakMap(), _SkyTabIdService_idsObs = new WeakMap(), _SkyTabIdService_instances = new WeakSet(), _SkyTabIdService_emitIds = function _SkyTabIdService_emitIds() {
     __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").next(Array.from(__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").values()));
 };
-SkyTabIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabIdService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabIdService, decorators: [{
+SkyTabIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabIdService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabIdService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
 var _SkyVerticalTabComponent_instances, _SkyVerticalTabComponent__ariaRole, _SkyVerticalTabComponent__contentRendered, _SkyVerticalTabComponent_tabIdOrDefault, _SkyVerticalTabComponent_defaultTabId, _SkyVerticalTabComponent_mobileSubscription, _SkyVerticalTabComponent_ngUnsubscribe, _SkyVerticalTabComponent_adapterService, _SkyVerticalTabComponent_changeRef, _SkyVerticalTabComponent_tabsetService, _SkyVerticalTabComponent_verticalTabMediaQueryService, _SkyVerticalTabComponent_tabIdSvc, _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass;
 let nextId$2 = 0;
 class SkyVerticalTabComponent {
-    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
-        _SkyVerticalTabComponent_instances.add(this);
-        /**
-         * Whether the tab is active when the tabset loads.
-         */
-        this.active = false;
-        /**
-         * Whether to disable the tab.
-         */
-        this.disabled = false;
-        /**
-         * Whether to indicate that the tab has an error.
-         * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
-         */
-        this.errorIndicator = false;
-        this.isMobile = 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);
-        _SkyVerticalTabComponent_tabIdSvc.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_tabIdSvc, tabIdSvc, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, __classPrivateFieldSet(this, _SkyVerticalTabComponent_defaultTabId, `sky-vertical-tab-${++nextId$2}`, "f"), "f");
-        this.tabId = __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f");
-    }
     /**
      * The ARIA role for the vertical tab
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
@@ -486,6 +451,41 @@ class SkyVerticalTabComponent {
     get contentRendered() {
         return __classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f");
     }
+    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
+        _SkyVerticalTabComponent_instances.add(this);
+        /**
+         * Whether the tab is active when the tabset loads.
+         */
+        this.active = false;
+        /**
+         * Whether to disable the tab.
+         */
+        this.disabled = false;
+        /**
+         * Whether to indicate that the tab has an error.
+         * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
+         */
+        this.errorIndicator = false;
+        this.isMobile = 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);
+        _SkyVerticalTabComponent_tabIdSvc.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_tabIdSvc, tabIdSvc, "f");
+        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, __classPrivateFieldSet(this, _SkyVerticalTabComponent_defaultTabId, `sky-vertical-tab-${++nextId$2}`, "f"), "f");
+        this.tabId = __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f");
+    }
     ngOnInit() {
         this.isMobile = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").isMobile();
         __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
@@ -564,15 +564,15 @@ _SkyVerticalTabComponent__ariaRole = new WeakMap(), _SkyVerticalTabComponent__co
         __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
     }
 };
-SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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: [
+SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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,
         {
             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]=\"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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
+    ], 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: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tab', providers: [
                         SkyVerticalTabMediaQueryService,
@@ -660,9 +660,9 @@ class SkyVerticalTabsetGroupComponent {
     }
 }
 _SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetGroupComponent_openBeforeTabsHidden = new WeakMap(), _SkyVerticalTabsetGroupComponent_tabService = new WeakMap(), _SkyVerticalTabsetGroupComponent_changeRef = new WeakMap();
-SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
+SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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: i6.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    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: [{
@@ -678,6 +678,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 var _SkyVerticalTabsetComponent_ngUnsubscribe, _SkyVerticalTabsetComponent__ariaRole, _SkyVerticalTabsetComponent_resources, _SkyVerticalTabsetComponent_changeRef, _SkyVerticalTabsetComponent_tabIdSvc;
 class SkyVerticalTabsetComponent {
+    /**
+     * The ARIA role for the vertical tabset
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tabset functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
+     * @default "tablist"
+     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
+     * In the next major version, this property will be automatically set to `tablist`.
+     */
+    get ariaRole() {
+        return __classPrivateFieldGet(this, _SkyVerticalTabsetComponent__ariaRole, "f");
+    }
+    set ariaRole(value) {
+        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent__ariaRole, value !== null && value !== void 0 ? value : 'tablist', "f");
+    }
     constructor(adapterService, tabService, resources, changeRef, tabIdSvc) {
         this.adapterService = adapterService;
         this.tabService = tabService;
@@ -706,22 +722,6 @@ class SkyVerticalTabsetComponent {
             __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
         });
     }
-    /**
-     * The ARIA role for the vertical tabset
-     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-     * by indicating how the tabset functions and what it controls. For information about how
-     * an ARIA role indicates what an item represents on a web page, see the
-     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
-     * @default "tablist"
-     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
-     * In the next major version, this property will be automatically set to `tablist`.
-     */
-    get ariaRole() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabsetComponent__ariaRole, "f");
-    }
-    set ariaRole(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent__ariaRole, value !== null && value !== void 0 ? value : 'tablist', "f");
-    }
     ngOnInit() {
         this.tabService.maintainTabContent = this.maintainTabContent;
         this.tabService.indexChanged
@@ -767,8 +767,8 @@ class SkyVerticalTabsetComponent {
     }
 }
 _SkyVerticalTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetComponent__ariaRole = new WeakMap(), _SkyVerticalTabsetComponent_resources = new WeakMap(), _SkyVerticalTabsetComponent_changeRef = new WeakMap(), _SkyVerticalTabsetComponent_tabIdSvc = new WeakMap();
-SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, 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\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    class=\"sky-vertical-tabset-group-container\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
+SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, 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\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    class=\"sky-vertical-tabset-group-container\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\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: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
         trigger('tabGroupEnter', [
             transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                 style({ transform: 'translate(-100%)' }),
@@ -782,7 +782,7 @@ SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             ]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('tabGroupEnter', [
@@ -798,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"sky-vertical-tabset\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    class=\"sky-vertical-tabset-group-container\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\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$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }]; }, propDecorators: { showTabsText: [{
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }]; }, propDecorators: { showTabsText: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -823,8 +823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyVerticalTabsetModule {
 }
-SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
+SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
         SkyVerticalTabsetGroupComponent,
         SkyVerticalTabComponent], imports: [CommonModule,
         SkyIconModule,
@@ -835,14 +835,14 @@ SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SkyThemeModule], exports: [SkyVerticalTabsetComponent,
         SkyVerticalTabsetGroupComponent,
         SkyVerticalTabComponent] });
-SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
+SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
         SkyIconModule,
         SkyIdModule,
         SkyExpansionIndicatorModule,
         SkyStatusIndicatorModule,
         SkyTabsResourcesModule,
         SkyThemeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -894,9 +894,9 @@ class SkySectionedFormService {
         this.requiredChange.next(isRequired);
     }
 }
-SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormService, decorators: [{
+SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormService, decorators: [{
             type: Injectable
         }] });
 
@@ -940,9 +940,9 @@ class SkySectionedFormSectionComponent {
     }
 }
 _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: "15.1.4", 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: "15.1.4", 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:var(--sky-highlight-color-danger);padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i3.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: "15.1.4", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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:var(--sky-highlight-color-danger);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: "15.2.1", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], 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:var(--sky-highlight-color-danger);padding-left:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
@@ -956,13 +956,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 args: [SkyVerticalTabComponent]
             }] } });
 
-var _SkySectionedFormComponent_ngUnsubscribe, _SkySectionedFormComponent_changeRef, _SkySectionedFormComponent_tabIdSvc;
+var SkySectionedFormMessageType;
+(function (SkySectionedFormMessageType) {
+    SkySectionedFormMessageType[SkySectionedFormMessageType["ShowTabs"] = 1] = "ShowTabs";
+})(SkySectionedFormMessageType || (SkySectionedFormMessageType = {}));
+
+var _SkySectionedFormComponent_instances, _SkySectionedFormComponent_ngUnsubscribe, _SkySectionedFormComponent_messageStreamSub, _SkySectionedFormComponent_changeRef, _SkySectionedFormComponent_tabIdSvc, _SkySectionedFormComponent_logger, _SkySectionedFormComponent__messageStream, _SkySectionedFormComponent_showTabs, _SkySectionedFormComponent_initMessageStream;
 /**
  * Creates a container for the sectioned forms.
  */
 class SkySectionedFormComponent {
-    constructor(tabService, changeRef, tabIdSvc) {
+    set messageStream(value) {
+        __classPrivateFieldSet(this, _SkySectionedFormComponent__messageStream, value || new Subject(), "f");
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
+    }
+    get messageStream() {
+        return __classPrivateFieldGet(this, _SkySectionedFormComponent__messageStream, "f");
+    }
+    constructor(tabService, changeRef, tabIdSvc, logger) {
         this.tabService = tabService;
+        _SkySectionedFormComponent_instances.add(this);
         /**
          * Whether the sectioned form loads section content during initialization so that it
          * displays content without moving around elements in the content container.
@@ -974,12 +987,21 @@ class SkySectionedFormComponent {
          * section. The index is based on the section's position when the form loads.
          */
         this.indexChanged = new EventEmitter();
+        /**
+         * Fires when the sectioned form tabs are shown or hidden.
+         */
+        this.tabsVisibleChanged = new EventEmitter();
         this.ariaRole = 'tablist';
         _SkySectionedFormComponent_ngUnsubscribe.set(this, new Subject());
+        _SkySectionedFormComponent_messageStreamSub.set(this, void 0);
         _SkySectionedFormComponent_changeRef.set(this, void 0);
         _SkySectionedFormComponent_tabIdSvc.set(this, void 0);
+        _SkySectionedFormComponent_logger.set(this, void 0);
+        _SkySectionedFormComponent__messageStream.set(this, new Subject());
         __classPrivateFieldSet(this, _SkySectionedFormComponent_changeRef, changeRef, "f");
         __classPrivateFieldSet(this, _SkySectionedFormComponent_tabIdSvc, tabIdSvc, "f");
+        __classPrivateFieldSet(this, _SkySectionedFormComponent_logger, logger, "f");
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
         __classPrivateFieldGet(this, _SkySectionedFormComponent_tabIdSvc, "f").ids.pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f"))).subscribe((ids) => {
             this.ariaOwns = ids.join(' ') || undefined;
             __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
@@ -1004,6 +1026,16 @@ class SkySectionedFormComponent {
             }
             __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         });
+        this.tabService.hidingTabs
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            this.tabsVisibleChanged.emit(false);
+        });
+        this.tabService.showingTabs
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            this.tabsVisibleChanged.emit(true);
+        });
         if (this.tabService.isMobile()) {
             this.ariaRole = undefined;
             this.tabService.animationContentVisibleState = VISIBLE_STATE;
@@ -1018,18 +1050,49 @@ class SkySectionedFormComponent {
         __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").next();
         __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").complete();
     }
+    /**
+     * @deprecated Use the `tabsVisibleChanged` output to listen for tab visibility changes.
+     */
     tabsVisible() {
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.tabsVisible()', {
+            deprecationMajorVersion: 8,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
+            replacementRecommendation: 'Use the `tabsVisibleChanged` output to listen for tab visibility changes.',
+        });
         __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
         return this.tabService.tabsVisible();
     }
+    /**
+     * @deprecated Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.
+     */
     showTabs() {
-        this.tabService.showTabs();
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.showTabs()', {
+            deprecationMajorVersion: 8,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
+            replacementRecommendation: 'Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.',
+        });
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
     }
 }
-_SkySectionedFormComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormComponent_changeRef = new WeakMap(), _SkySectionedFormComponent_tabIdSvc = new WeakMap();
-SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+_SkySectionedFormComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormComponent_messageStreamSub = new WeakMap(), _SkySectionedFormComponent_changeRef = new WeakMap(), _SkySectionedFormComponent_tabIdSvc = new WeakMap(), _SkySectionedFormComponent_logger = new WeakMap(), _SkySectionedFormComponent__messageStream = new WeakMap(), _SkySectionedFormComponent_instances = new WeakSet(), _SkySectionedFormComponent_showTabs = function _SkySectionedFormComponent_showTabs() {
+    this.tabService.showTabs();
+    __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
+}, _SkySectionedFormComponent_initMessageStream = function _SkySectionedFormComponent_initMessageStream() {
+    if (__classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f")) {
+        __classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f").unsubscribe();
+    }
+    __classPrivateFieldSet(this, _SkySectionedFormComponent_messageStreamSub, this.messageStream
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
+        .subscribe((message) => {
+        switch (message.type) {
+            case SkySectionedFormMessageType.ShowTabs:
+                __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
+                break;
+        }
+    }), "f");
+};
+SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\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', [
             transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                 style({ transform: 'translate(-100%)' }),
@@ -1043,7 +1106,7 @@ SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             ]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('tabEnter', [
@@ -1059,10 +1122,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\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"] }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }]; }, propDecorators: { maintainSectionContent: [{
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i1.SkyLogService }]; }, propDecorators: { maintainSectionContent: [{
+                type: Input
+            }], messageStream: [{
                 type: Input
             }], indexChanged: [{
                 type: Output
+            }], tabsVisibleChanged: [{
+                type: Output
             }], content: [{
                 type: ViewChild,
                 args: ['skySectionSideContent']
@@ -1070,16 +1137,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkySectionedFormModule {
 }
-SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
+SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
         SkyCheckboxModule,
         SkyThemeModule,
         SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
-SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
+SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
         SkyCheckboxModule,
         SkyThemeModule,
         SkyVerticalTabsetModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkySectionedFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySectionedFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
@@ -1101,9 +1168,9 @@ class SkyTabButtonAdapterService {
         buttonEl.nativeElement.querySelector('a').focus();
     }
 }
-SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabButtonAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
+SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabButtonAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
             type: Injectable
         }] });
 
@@ -1112,6 +1179,15 @@ var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetSer
  * @internal
  */
 class SkyTabsetService {
+    get activeTabUnregistered() {
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f");
+    }
+    get activeTabIndex() {
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f");
+    }
+    get focusedTabBtnIndex() {
+        return __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f");
+    }
     constructor() {
         _SkyTabsetService_instances.add(this);
         this.currentActiveTabIndex = 0;
@@ -1125,15 +1201,6 @@ class SkyTabsetService {
         __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();
@@ -1286,9 +1353,9 @@ _SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBt
     }
     return prevIndex;
 };
-SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetService, decorators: [{
+SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -1298,24 +1365,6 @@ 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");
     }
@@ -1337,6 +1386,24 @@ class SkyTabButtonComponent {
         __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
         __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
     }
+    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");
+    }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
             .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
@@ -1408,9 +1475,9 @@ _SkyTabButtonComponent__isActive = new WeakMap(), _SkyTabButtonComponent__isDisa
     }
     __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
 };
-SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", 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        *ngIf=\"closeable\"\n        class=\"sky-btn-tab-close\"\n        [tabindex]=\"closeBtnTabIndex\"\n        [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n        [ngClass]=\"{\n          'sky-btn-tab-close-disabled': disabled\n        }\"\n        (click)=\"onCloseClick($event)\"\n        (keydown.enter)=\"onCloseClick($event)\"\n      >\n        <sky-icon icon=\"remove\"></sky-icon>\n      </span>\n    </span>\n  </a>\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;padding:1px 6px}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
+SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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        *ngIf=\"closeable\"\n        class=\"sky-btn-tab-close\"\n        [tabindex]=\"closeBtnTabIndex\"\n        [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n        [ngClass]=\"{\n          'sky-btn-tab-close-disabled': disabled\n        }\"\n        (click)=\"onCloseClick($event)\"\n        (keydown.enter)=\"onCloseClick($event)\"\n      >\n        <sky-icon icon=\"remove\"></sky-icon>\n      </span>\n    </span>\n  </a>\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;padding:1px 6px}.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: i6.λ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: "15.2.1", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    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        *ngIf=\"closeable\"\n        class=\"sky-btn-tab-close\"\n        [tabindex]=\"closeBtnTabIndex\"\n        [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n        [ngClass]=\"{\n          'sky-btn-tab-close-disabled': disabled\n        }\"\n        (click)=\"onCloseClick($event)\"\n        (keydown.enter)=\"onCloseClick($event)\"\n      >\n        <sky-icon icon=\"remove\"></sky-icon>\n      </span>\n    </span>\n  </a>\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;padding:1px 6px}.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: [{
@@ -1448,6 +1515,9 @@ var _SkyTabsetPermalinkService_instances, _SkyTabsetPermalinkService_popStateCha
  * @internal
  */
 class SkyTabsetPermalinkService {
+    get popStateChange() {
+        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f");
+    }
     constructor(activatedRoute, location, router) {
         _SkyTabsetPermalinkService_instances.add(this);
         _SkyTabsetPermalinkService_popStateChange.set(this, void 0);
@@ -1460,9 +1530,6 @@ class SkyTabsetPermalinkService {
         __classPrivateFieldSet(this, _SkyTabsetPermalinkService_router, router, "f");
         __classPrivateFieldSet(this, _SkyTabsetPermalinkService_popStateChange, new Subject(), "f");
     }
-    get popStateChange() {
-        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f");
-    }
     ngOnDestroy() {
         if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f")) {
             __classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f").unsubscribe();
@@ -1559,46 +1626,15 @@ _SkyTabsetPermalinkService_popStateChange = new WeakMap(), _SkyTabsetPermalinkSe
     });
     return params;
 };
-SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i3.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetPermalinkService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
+SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyTabsetPermalinkService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i3.Location }, { type: i1$1.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
 
 var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
 let nextId = 0;
 class SkyTabComponent {
-    constructor(changeDetector, permalinkService, tabsetService) {
-        _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);
-    }
     /**
      * 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.
@@ -1671,6 +1707,37 @@ class SkyTabComponent {
     get tabIndexChange() {
         return __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f");
     }
+    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);
+    }
     ngOnChanges(changes) {
         if ((changes.disabled && !changes.disabled.firstChange) ||
             (changes.tabHeading && !changes.tabHeading.firstChange) ||
@@ -1709,9 +1776,9 @@ _SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new We
         __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: "15.1.4", 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: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyTabComponent, decorators: [{
+SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
@@ -1741,9 +1808,9 @@ class SkyTabsetNavButtonDisabledPipe {
         return !tabToSelectExists || !!tabToSelectIsDisabled;
     }
 }
-SkyTabsetNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SkyTabsetNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
+SkyTabsetNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyTabsetNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyTabsetNavButtonDisabled',
@@ -1755,21 +1822,6 @@ 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");
-    }
     /**
      * The tabset wizard component to associate with the nav button.
      * @required
@@ -1828,6 +1880,21 @@ class SkyTabsetNavButtonComponent {
     get disabled() {
         return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
     }
+    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");
+    }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
         __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
@@ -1878,9 +1945,9 @@ _SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonCom
         }
     }
 };
-SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
+SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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: "15.2.1", 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: [{
@@ -1898,6 +1965,9 @@ var _SkyTabsetAdapterService_instances, _SkyTabsetAdapterService_currentOverflow
  * @internal
  */
 class SkyTabsetAdapterService {
+    get overflowChange() {
+        return __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f");
+    }
     constructor() {
         _SkyTabsetAdapterService_instances.add(this);
         _SkyTabsetAdapterService_currentOverflow.set(this, false);
@@ -1906,9 +1976,6 @@ class SkyTabsetAdapterService {
         _SkyTabsetAdapterService_overflowChange.set(this, void 0);
         __classPrivateFieldSet(this, _SkyTabsetAdapterService_overflowChange, new BehaviorSubject(false), "f");
     }
-    get overflowChange() {
-        return __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f");
-    }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").complete();
     }
@@ -1952,58 +2019,14 @@ _SkyTabsetAdapterService_currentOverflow = new WeakMap(), _SkyTabsetAdapterServi
     }
     return firstTabRect.left - tabsetRect.left;
 };
-SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
+SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
 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) {
-        _SkyTabsetComponent_instances.add(this);
-        /**
-         * Fires when the active tab changes. This event emits the index of the active tab.
-         */
-        this.activeChange = new EventEmitter();
-        /**
-         * Fires when users click the button to add a new tab.
-         * The new tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.newTab = new EventEmitter();
-        /**
-         * Fires when users click the button to open a tab.
-         * The open tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.openTab = new EventEmitter();
-        /**
-         * Fires when any tab's `tabIndex` value changes.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.tabIndexesChange = new EventEmitter();
-        this.dropdownTriggerButtonText = '';
-        this.tabButtons = [];
-        _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.
      */
@@ -2081,6 +2104,50 @@ class SkyTabsetComponent {
     get tabs() {
         return __classPrivateFieldGet(this, _SkyTabsetComponent__tabs, "f");
     }
+    constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
+        _SkyTabsetComponent_instances.add(this);
+        /**
+         * Fires when the active tab changes. This event emits the index of the active tab.
+         */
+        this.activeChange = new EventEmitter();
+        /**
+         * Fires when users click the button to add a new tab.
+         * The new tab button is added to the tab area when you specify a listener for this event.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.newTab = new EventEmitter();
+        /**
+         * Fires when users click the button to open a tab.
+         * The open tab button is added to the tab area when you specify a listener for this event.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.openTab = new EventEmitter();
+        /**
+         * Fires when any tab's `tabIndex` value changes.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.tabIndexesChange = new EventEmitter();
+        this.dropdownTriggerButtonText = '';
+        this.tabButtons = [];
+        _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");
+    }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
         const initialTabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getInitialTabIndex).call(this);
@@ -2317,13 +2384,13 @@ _SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabCompon
         this.activeChange.emit(activeIndex);
     }
 };
-SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", 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: [
+SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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  (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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ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$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsetComponent, decorators: [{
+    ], 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.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ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: "15.2.1", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset', providers: [
                         SkyTabsetAdapterService,
@@ -2355,8 +2422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyTabsModule {
 }
-SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
+SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
         SkyTabComponent,
         SkyTabsetComponent,
         SkyTabsetNavButtonComponent,
@@ -2367,14 +2434,14 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         SkyIconModule,
         SkyTabsResourcesModule,
         SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
-SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
+SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
         RouterModule,
         SkyDropdownModule,
         SkyI18nModule,
         SkyIconModule,
         SkyTabsResourcesModule,
         SkyThemeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2401,5 +2468,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkySectionedFormComponent, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, SkyTabComponent as λ1, SkyTabsetComponent as λ2, SkyTabsetNavButtonComponent as λ3, SkyVerticalTabComponent as λ4, SkySectionedFormSectionComponent as λ5, SkyVerticalTabsetComponent as λ6, SkyVerticalTabsetGroupComponent as λ7 };
+export { SkySectionedFormComponent, SkySectionedFormMessageType, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, SkyTabComponent as λ1, SkyTabsetComponent as λ2, SkyTabsetNavButtonComponent as λ3, SkyVerticalTabComponent as λ4, SkySectionedFormSectionComponent as λ5, SkyVerticalTabsetComponent as λ6, SkyVerticalTabsetGroupComponent as λ7 };
 //# sourceMappingURL=skyux-tabs.mjs.map