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

package/fesm2020/skyux-tabs.mjs

@@ -19,7 +19,7 @@ import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i5$1 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
-import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -686,7 +686,7 @@ class SkyVerticalTabsetComponent {
     }
 }
 SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
+SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
         trigger('tabGroupEnter', [
             transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                 style({ transform: 'translate(-100%)' }),
@@ -715,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                                 animate('150ms ease-in'),
                             ]),
                         ]),
-                    ], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
+                    ], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
                 type: Input
             }], ariaLabel: [{
@@ -998,10 +998,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
 /**
  * @internal
  */
-class SkyTabButtonComponent {
+class SkyTabButtonAdapterService {
+    focusButtonLink(buttonEl) {
+        buttonEl.nativeElement.querySelector('a').focus();
+    }
+}
+SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTabsetService {
     constructor() {
+        this.currentActiveTabIndex = 0;
+        this.currentFocusedTabBtnIndex = 0;
+        this._activeTabIndex = new BehaviorSubject(0);
+        this._focusedTabBtnIndex = new Subject();
+        this._activeTabUnregistered = new Subject();
+        this.tabs = [];
+        this.tabCounter = 0;
+    }
+    get activeTabUnregistered() {
+        return this._activeTabUnregistered.asObservable();
+    }
+    get activeTabIndex() {
+        return this._activeTabIndex.asObservable();
+    }
+    get focusedTabBtnIndex() {
+        return this._focusedTabBtnIndex.asObservable();
+    }
+    /**
+     * Sets the active tab by its unique `tabIndex` property.
+     */
+    setActiveTabIndex(value, config = {
+        emitChange: true,
+    }) {
+        if (value !== undefined &&
+            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
+            this.currentActiveTabIndex = value;
+            /* istanbul ignore else */
+            if (config.emitChange) {
+                this._activeTabIndex.next(value);
+            }
+            this.setFocusedTabBtnIndex(value);
+        }
+    }
+    focusNextTabBtn(tabButtons) {
+        const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = this.getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getNextTabArrayIndex(i)) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusPrevTabBtn(tabButtons) {
+        const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = this.getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getPrevTabArrayIndex(i)) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusFirstOrNearestTabBtn(tabButtons) {
+        for (let i = 0; i < tabButtons.length; i++) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusLastOrNearestTabBtn(tabButtons) {
+        for (let i = tabButtons.length - 1; i >= 0; i--) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    setFocusedTabBtnIndex(tabIndex) {
+        this.currentFocusedTabBtnIndex = tabIndex;
+        this._focusedTabBtnIndex.next(tabIndex);
+    }
+    /**
+     * Registers a tab component.
+     */
+    registerTab(tabIndex) {
+        if (tabIndex === undefined) {
+            tabIndex = this.tabCounter;
+            this.tabCounter++;
+        }
+        this.tabs.push({ tabIndex });
+        return tabIndex;
+    }
+    updateTabIndex(currentTabIndex, newTabIndex) {
+        const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
+        found.tabIndex = newTabIndex;
+    }
+    /**
+     * Unregisters a tab component.
+     */
+    unregisterTab(tabIndex) {
+        const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        // Notify the tabset component when an active tab is unregistered.
+        if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
+            this._activeTabUnregistered.next({
+                arrayIndex: index,
+            });
+        }
+        this.tabs.splice(index, 1);
+    }
+    /**
+     * Unregisters all tab components at once.
+     */
+    unregisterAll() {
+        this.tabs = [];
+    }
+    /**
+     * Compares two tab indexes and returns `true` if they are equal.
+     */
+    tabIndexesEqual(tabIndex1, tabIndex2) {
+        return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
+    }
+    /**
+     * Verifies if a provided tab index is registered.
+     */
+    isValidTabIndex(tabIndex) {
+        return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+    }
+    /**
+     * Activates the first registered tab.
+     */
+    activateFirstTab() {
+        const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
+        if (firstTabIndex !== undefined) {
+            this.setActiveTabIndex(firstTabIndex);
+            return firstTabIndex;
+        }
+    }
+    /**
+     * Activates the next registered tab, or the previous one based on a provided array index.
+     */
+    activateNearestTab(arrayIndex) {
+        const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
+        if (newActiveTab) {
+            this.currentActiveTabIndex = newActiveTab.tabIndex;
+        }
+    }
+    isTabIndexActive(tabIndex) {
+        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
+    }
+    getNextTabArrayIndex(currentIndex) {
+        let nextIndex = currentIndex + 1;
+        if (nextIndex === this.tabs.length) {
+            nextIndex = 0;
+        }
+        return nextIndex;
+    }
+    getPrevTabArrayIndex(currentIndex) {
+        let prevIndex = currentIndex - 1;
+        if (prevIndex < 0) {
+            prevIndex = this.tabs.length - 1;
+        }
+        return prevIndex;
+    }
+}
+SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
+            type: Injectable
+        }] });
+
+var _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe;
+const DEFAULT_ELEMENT_ROLE$1 = 'tab';
+/**
+ * @internal
+ */
+class SkyTabButtonComponent {
+    constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
         this.buttonClick = new EventEmitter();
         this.closeClick = new EventEmitter();
+        this.elementRole = DEFAULT_ELEMENT_ROLE$1;
+        this.closeBtnTabIndex = '-1';
+        _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 tabStyle() {
+        return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
+    }
+    set tabStyle(style) {
+        __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
+        this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE$1 : undefined;
+    }
+    ngAfterViewInit() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
+            .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
+            .subscribe((focusedIndex) => {
+            if (focusedIndex === this.tabIndex) {
+                this.closeBtnTabIndex = '0';
+                this.focusBtn();
+            }
+            else {
+                this.closeBtnTabIndex = '-1';
+            }
+            __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
     }
     onButtonClick(event) {
         if (!this.disabled) {
@@ -1030,13 +1252,20 @@ class SkyTabButtonComponent {
         event.stopPropagation();
         event.preventDefault();
     }
+    focusBtn() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
+    }
+    onFocus() {
+        __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
+    }
 }
-SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+_SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap();
+SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    [attr.role]=\"elementRole\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [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\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
-        }], propDecorators: { active: [{
+            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    [attr.role]=\"elementRole\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    [tabindex]=\"closeBtnTabIndex\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
                 type: Input
@@ -1052,6 +1281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
             }], tabStyle: [{
                 type: Input
             }], buttonClick: [{
@@ -1177,113 +1408,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
 
-/**
- * @internal
- */
-class SkyTabsetService {
-    constructor() {
-        this.currentActiveTabIndex = 0;
-        this._activeTabIndex = new BehaviorSubject(0);
-        this._activeTabUnregistered = new Subject();
-        this.tabs = [];
-        this.tabCounter = 0;
-    }
-    get activeTabUnregistered() {
-        return this._activeTabUnregistered.asObservable();
-    }
-    get activeTabIndex() {
-        return this._activeTabIndex.asObservable();
-    }
-    /**
-     * Sets the active tab by its unique `tabIndex` property.
-     */
-    setActiveTabIndex(value, config = {
-        emitChange: true,
-    }) {
-        if (value !== undefined &&
-            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
-            this.currentActiveTabIndex = value;
-            /* istanbul ignore else */
-            if (config.emitChange) {
-                this._activeTabIndex.next(value);
-            }
-        }
-    }
-    /**
-     * Registers a tab component.
-     */
-    registerTab(tabIndex) {
-        if (tabIndex === undefined) {
-            tabIndex = this.tabCounter;
-            this.tabCounter++;
-        }
-        this.tabs.push({ tabIndex });
-        return tabIndex;
-    }
-    updateTabIndex(currentTabIndex, newTabIndex) {
-        const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
-        found.tabIndex = newTabIndex;
-    }
-    /**
-     * Unregisters a tab component.
-     */
-    unregisterTab(tabIndex) {
-        const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
-        // Notify the tabset component when an active tab is unregistered.
-        if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
-            this._activeTabUnregistered.next({
-                arrayIndex: index,
-            });
-        }
-        this.tabs.splice(index, 1);
-    }
-    /**
-     * Unregisters all tab components at once.
-     */
-    unregisterAll() {
-        this.tabs = [];
-    }
-    /**
-     * Compares two tab indexes and returns `true` if they are equal.
-     */
-    tabIndexesEqual(tabIndex1, tabIndex2) {
-        return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
-    }
-    /**
-     * Verifies if a provided tab index is registered.
-     */
-    isValidTabIndex(tabIndex) {
-        return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
-    }
-    /**
-     * Activates the first registered tab.
-     */
-    activateFirstTab() {
-        const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
-        if (firstTabIndex !== undefined) {
-            this.setActiveTabIndex(firstTabIndex);
-            return firstTabIndex;
-        }
-    }
-    /**
-     * Activates the next registered tab, or the previous one based on a provided array index.
-     */
-    activateNearestTab(arrayIndex) {
-        const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
-        if (newActiveTab) {
-            this.currentActiveTabIndex = newActiveTab.tabIndex;
-        }
-    }
-    isTabIndexActive(tabIndex) {
-        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
-    }
-}
-SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
-            type: Injectable
-        }] });
-
 let nextId = 0;
 class SkyTabComponent {
     constructor(changeDetector, permalinkService, tabsetService) {
@@ -1463,7 +1587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
-var _SkyTabsetComponent__hasFinishButton;
+const DEFAULT_ELEMENT_ROLE = 'tablist';
 class SkyTabsetComponent {
     constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
         this.changeDetector = changeDetector;
@@ -1493,9 +1617,9 @@ class SkyTabsetComponent {
          */
         this.tabIndexesChange = new EventEmitter();
         this.tabButtons = [];
+        this.elementRole = DEFAULT_ELEMENT_ROLE;
         this.ngUnsubscribe = new Subject();
         this.tabComponentsStateChangeUnsubscribe = new Subject();
-        _SkyTabsetComponent__hasFinishButton.set(this, false);
     }
     /**
      * Activates a tab by its `tabIndex` property.
@@ -1551,6 +1675,7 @@ class SkyTabsetComponent {
      */
     set tabStyle(value) {
         this._tabStyle = value;
+        this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
     }
     get tabStyle() {
         return this._tabStyle || 'tabs';
@@ -1562,12 +1687,6 @@ class SkyTabsetComponent {
     get tabDisplayMode() {
         return this._tabDisplayMode || 'tabs';
     }
-    get hasFinishButton() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__hasFinishButton, "f");
-    }
-    set hasFinishButton(value) {
-        __classPrivateFieldSet(this, _SkyTabsetComponent__hasFinishButton, value, "f");
-    }
     ngAfterViewInit() {
         this.initTabComponents();
         this.listenTabComponentsStructuralChange();
@@ -1615,6 +1734,18 @@ class SkyTabsetComponent {
     onOpenTabClick() {
         this.openTab.emit();
     }
+    onRightKeyDown() {
+        this.tabsetService.focusNextTabBtn(this.tabButtons);
+    }
+    onLeftKeyDown() {
+        this.tabsetService.focusPrevTabBtn(this.tabButtons);
+    }
+    onHomeKeyDown() {
+        this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
+    }
+    onEndKeyDown() {
+        this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
+    }
     /**
      * Sets the initial active tab index based on the following criteria.
      * 1. Does the URL include a query param that reflects this tabset's active tab?
@@ -1809,20 +1940,19 @@ class SkyTabsetComponent {
         }
     }
 }
-_SkyTabsetComponent__hasFinishButton = new WeakMap();
 SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
 SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
         SkyTabsetAdapterService,
         SkyTabsetPermalinkService,
         SkyTabsetService,
-    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  [attr.role]=\"elementRole\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset', providers: [
                         SkyTabsetAdapterService,
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  [attr.role]=\"elementRole\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{
@@ -1870,15 +2000,15 @@ class SkyTabsetNavButtonComponent {
      * Specifies the tabset wizard component to associate with the nav button.
      * @required
      */
+    get tabset() {
+        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
+    }
     set tabset(value) {
         __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
         if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
             __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
         }
         if (value) {
-            if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton = true;
-            }
             __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").activeChange
                 .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
                 .subscribe((index) => {
@@ -1924,7 +2054,7 @@ class SkyTabsetNavButtonComponent {
         if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f") !== undefined) {
             return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
         }
-        else if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
+        else if (this.buttonType === buttonTypeFinish) {
             return false;
         }
         return !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") || __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled;
@@ -1936,28 +2066,24 @@ class SkyTabsetNavButtonComponent {
     buttonClick() {
         /* istanbul ignore else */
         if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") && !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled) {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").active = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").tabIndex;
+            this.tabset.active = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").tabIndex;
         }
     }
 }
 _SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_tabToSelect = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
     const isLastStep = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
-    if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
+    if (this.buttonType === buttonTypeFinish) {
         this.isVisible = isLastStep;
-        return;
     }
-    // Hide the next button on the last step only if a finish button exists.
-    if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext &&
-        isLastStep &&
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton) {
-        this.isVisible = false;
-        return;
+    else if (this.buttonType === buttonTypeNext) {
+        this.isVisible = !isLastStep;
+    }
+    else {
+        this.isVisible = true;
     }
-    this.isVisible = true;
 }, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
-    if ((__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext ||
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) &&
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.hasFinishButton) {
+    if (this.buttonType === buttonTypeNext ||
+        this.buttonType === buttonTypeFinish) {
         this.buttonClassName = 'sky-btn-primary';
     }
     else {
@@ -1965,17 +2091,17 @@ _SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonCom
     }
     this.ariaControls = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f")?.tabPanelId;
 }, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
-    if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.tabs) {
-        const tabs = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").tabs.toArray();
+    if (this.tabset?.tabs) {
+        const tabs = this.tabset.tabs.toArray();
         __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, undefined, "f");
         // tab index can be a number or a string, but we need the actual number index
         __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
         /* istanbul ignore else */
         if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
-            if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext) {
+            if (this.buttonType === buttonTypeNext) {
                 __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1], "f");
             }
-            else if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypePrevious) {
+            else if (this.buttonType === buttonTypePrevious) {
                 __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1], "f");
             }
         }