@skyux/tabs 5.5.0-alpha.0 → 5.6.0

package/bundles/skyux-tabs.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('@skyux/animations'), require('@skyux/forms'), require('@angular/router'), require('@skyux/popovers')) :
-    typeof define === 'function' && define.amd ? define('@skyux/tabs', ['exports', '@angular/core', '@angular/common', '@angular/animations', 'rxjs', 'rxjs/operators', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', '@skyux/animations', '@skyux/forms', '@angular/router', '@skyux/popovers'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tabs = {}), global.ng.core, global.ng.common, global.ng.animations, global.rxjs, global.rxjs.operators, global.i1, global.i4, global.i8, global.i3, global.animations$1, global.forms, global.ng.router, global.i4$1));
-})(this, (function (exports, i0, i2, animations, rxjs, operators, i1, i4, i8, i3, animations$1, forms, i1$1, i4$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/forms'), require('@skyux/theme'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@skyux/animations'), require('@angular/animations'), require('@angular/router'), require('@skyux/popovers')) :
+    typeof define === 'function' && define.amd ? define('@skyux/tabs', ['exports', '@angular/common', '@angular/core', '@skyux/forms', '@skyux/theme', '@skyux/core', '@skyux/indicators', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@skyux/animations', '@angular/animations', '@angular/router', '@skyux/popovers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tabs = {}), global.ng.common, global.ng.core, global.forms, global.i8, global.i1, global.i4, global.i3, global.rxjs, global.rxjs.operators, global.animations, global.ng.animations, global.ng.router, global.i4$1));
+})(this, (function (exports, i2, i0, forms, i8, i1, i4, i3, rxjs, operators, animations, animations$1, i1$1, i4$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,15 +22,189 @@
         return Object.freeze(n);
     }
 
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
 
+    /**
+     * NOTICE: DO NOT MODIFY THIS FILE!
+     * The contents of this file were automatically generated by
+     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
+     * To update this file, simply rerun the command.
+     */
+    var RESOURCES = {
+        'EN-US': {
+            skyux_tab_add: { message: 'Add tab' },
+            skyux_tab_close: { message: 'Close {0} tab' },
+            skyux_tabs_navigator_next: { message: 'Next' },
+            skyux_tabs_navigator_previous: { message: 'Previous' },
+            skyux_tab_open: { message: 'Open tab' },
+            skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
+        },
+    };
+    var SkyTabsResourcesProvider = /** @class */ (function () {
+        function SkyTabsResourcesProvider() {
+        }
+        SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
+            return i3.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+        };
+        return SkyTabsResourcesProvider;
+    }());
+    /**
+     * Import into any component library module that needs to use resource strings.
+     */
+    var SkyTabsResourcesModule = /** @class */ (function () {
+        function SkyTabsResourcesModule() {
+        }
+        return SkyTabsResourcesModule;
+    }());
+    SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
+    SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
+            {
+                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyTabsResourcesProvider,
+                multi: true,
+            },
+        ], imports: [i3.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [i3.SkyI18nModule],
+                        providers: [
+                            {
+                                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
+                                useClass: SkyTabsResourcesProvider,
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }] });
+
+    /**
+     * @internal
+     */
+    var SkyVerticalTabMediaQueryService = /** @class */ (function () {
+        function SkyVerticalTabMediaQueryService() {
+            this.currentSubject = new rxjs.BehaviorSubject(this.current);
+            this._current = i1.SkyMediaBreakpoints.xs;
+            this.currentSubject.next(this._current);
+        }
+        Object.defineProperty(SkyVerticalTabMediaQueryService.prototype, "current", {
+            get: function () {
+                return this._current;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyVerticalTabMediaQueryService.prototype.subscribe = function (listener) {
+            return this.currentSubject.subscribe({
+                next: function (breakpoints) {
+                    listener(breakpoints);
+                },
+            });
+        };
+        SkyVerticalTabMediaQueryService.prototype.setBreakpointForWidth = function (width) {
+            var breakpoint;
+            if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.xs)) {
+                breakpoint = i1.SkyMediaBreakpoints.xs;
+            }
+            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.sm)) {
+                breakpoint = i1.SkyMediaBreakpoints.sm;
+            }
+            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.md)) {
+                breakpoint = i1.SkyMediaBreakpoints.md;
+            }
+            else {
+                breakpoint = i1.SkyMediaBreakpoints.lg;
+            }
+            this._current = breakpoint;
+            this.currentSubject.next(this._current);
+        };
+        SkyVerticalTabMediaQueryService.prototype.isWidthWithinBreakpiont = function (width, breakpoint) {
+            var xsBreakpointMaxPixels = 767;
+            var smBreakpointMinPixels = 768;
+            var smBreakpointMaxPixels = 991;
+            var mdBreakpointMinPixels = 992;
+            var mdBreakpointMaxPixels = 1199;
+            var lgBreakpointMinPixels = 1200;
+            switch (breakpoint) {
+                case i1.SkyMediaBreakpoints.xs: {
+                    return width <= xsBreakpointMaxPixels;
+                }
+                case i1.SkyMediaBreakpoints.sm: {
+                    return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
+                }
+                case i1.SkyMediaBreakpoints.md: {
+                    return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
+                }
+                default: {
+                    return width >= lgBreakpointMinPixels;
+                }
+            }
+        };
+        SkyVerticalTabMediaQueryService.prototype.destroy = function () {
+            this.currentSubject.complete();
+        };
+        return SkyVerticalTabMediaQueryService;
+    }());
+    SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var SkyVerticalTabsetAdapterService = /** @class */ (function () {
+        function SkyVerticalTabsetAdapterService(rendererFactory) {
+            this.rendererFactory = rendererFactory;
+            this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        }
+        SkyVerticalTabsetAdapterService.prototype.getWidth = function (elementRef) {
+            return elementRef.nativeElement.clientWidth;
+        };
+        SkyVerticalTabsetAdapterService.prototype.scrollToContentTop = function (element) {
+            element.nativeElement.scrollTop = 0;
+        };
+        SkyVerticalTabsetAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
+            var nativeEl = element.nativeElement;
+            this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+            this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+            this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+            this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+            var newClass;
+            switch (breakpoint) {
+                case i1.SkyMediaBreakpoints.xs: {
+                    newClass = 'sky-responsive-container-xs';
+                    break;
+                }
+                case i1.SkyMediaBreakpoints.sm: {
+                    newClass = 'sky-responsive-container-sm';
+                    break;
+                }
+                case i1.SkyMediaBreakpoints.md: {
+                    newClass = 'sky-responsive-container-md';
+                    break;
+                }
+                default: {
+                    newClass = 'sky-responsive-container-lg';
+                    break;
+                }
+            }
+            this.renderer.addClass(nativeEl, newClass);
+        };
+        return SkyVerticalTabsetAdapterService;
+    }());
+    SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
+
     var VISIBLE_STATE = 'shown';
     var HIDDEN_STATE = 'void';
     /**
@@ -205,289 +379,56 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
 
-    /**
-     * Creates a container for the sectioned forms.
-     */
-    var SkySectionedFormComponent = /** @class */ (function () {
-        function SkySectionedFormComponent(tabService, changeRef) {
-            this.tabService = tabService;
+    var nextId$2 = 0;
+    var SkyVerticalTabComponent = /** @class */ (function () {
+        function SkyVerticalTabComponent(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
+            this.adapterService = adapterService;
             this.changeRef = changeRef;
+            this.tabsetService = tabsetService;
+            this.verticalTabMediaQueryService = verticalTabMediaQueryService;
             /**
-             * Indicates whether the sectioned form loads section content during initialization so that it
-             * displays content without moving around elements in the content container.
-             * @default false
+             * Indicates whether the tab is active when the tabset loads.
              */
-            this.maintainSectionContent = false;
+            this.active = false;
             /**
-             * Fires when the active tab changes and emits the index of the active
-             * section. The index is based on the section's position when the form loads.
+             * Indicates whether to disable the tab.
              */
-            this.indexChanged = new i0.EventEmitter();
+            this.disabled = false;
+            /**
+             * Indicates 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;
+            /**
+             * Specifies an ID for the tab.
+             * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
+             */
+            this.tabId = "sky-vertical-tab-" + ++nextId$2;
             this.isMobile = false;
+            this._contentRendered = false;
+            this._mobileSubscription = new rxjs.Subject();
             this._ngUnsubscribe = new rxjs.Subject();
+            this._showTabRightArrow = false;
         }
-        Object.defineProperty(SkySectionedFormComponent.prototype, "ariaRole", {
+        Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaRole", {
+            /**
+             * Specifies an ARIA role for the vertical tab
+             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+             * by indicating how the tab 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 "tab"
+             * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
+             * In the next major version, this property will be automatically set to `tab`.
+             */
             get: function () {
-                return this.isMobile ? undefined : 'tablist';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkySectionedFormComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.tabService.maintainTabContent = this.maintainSectionContent;
-            this.tabService.indexChanged
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (index) {
-                _this.indexChanged.emit(index);
-                _this.changeRef.markForCheck();
-            });
-            this.tabService.switchingMobile
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (mobile) {
-                _this.isMobile = mobile;
-                _this.changeRef.markForCheck();
-            });
-            if (this.tabService.isMobile()) {
-                this.isMobile = true;
-                this.tabService.animationContentVisibleState = VISIBLE_STATE;
-                this.changeRef.markForCheck();
-            }
-        };
-        SkySectionedFormComponent.prototype.ngAfterViewChecked = function () {
-            this.tabService.content = this.content;
-            this.tabService.updateContent();
-        };
-        SkySectionedFormComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        SkySectionedFormComponent.prototype.tabsVisible = function () {
-            this.changeRef.markForCheck();
-            return this.tabService.tabsVisible();
-        };
-        SkySectionedFormComponent.prototype.showTabs = function () {
-            this.tabService.showTabs();
-            this.changeRef.markForCheck();
-        };
-        return SkySectionedFormComponent;
-    }());
-    SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0__namespace, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            animations.trigger('tabEnter', [
-                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations.style({ transform: 'translate(-100%)' }),
-                    animations.animate('150ms ease-in'),
-                ]),
-            ]),
-            animations.trigger('contentEnter', [
-                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations.style({ transform: 'translate(100%)' }),
-                    animations.animate('150ms ease-in'),
-                ]),
-            ]),
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-sectioned-form',
-                        template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n",
-                        styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"],
-                        providers: [SkyVerticalTabsetService],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [
-                            animations.trigger('tabEnter', [
-                                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations.style({ transform: 'translate(-100%)' }),
-                                    animations.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                            animations.trigger('contentEnter', [
-                                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations.style({ transform: 'translate(100%)' }),
-                                    animations.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                        ],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
-                    type: i0.Input
-                }], indexChanged: [{
-                    type: i0.Output
-                }], content: [{
-                    type: i0.ViewChild,
-                    args: ['skySectionSideContent']
-                }] } });
-
-    /**
-     * @internal
-     */
-    var SkyVerticalTabMediaQueryService = /** @class */ (function () {
-        function SkyVerticalTabMediaQueryService() {
-            this.currentSubject = new rxjs.BehaviorSubject(this.current);
-            this._current = i1.SkyMediaBreakpoints.xs;
-            this.currentSubject.next(this._current);
-        }
-        Object.defineProperty(SkyVerticalTabMediaQueryService.prototype, "current", {
-            get: function () {
-                return this._current;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabMediaQueryService.prototype.subscribe = function (listener) {
-            return this.currentSubject.subscribe({
-                next: function (breakpoints) {
-                    listener(breakpoints);
-                },
-            });
-        };
-        SkyVerticalTabMediaQueryService.prototype.setBreakpointForWidth = function (width) {
-            var breakpoint;
-            if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.xs)) {
-                breakpoint = i1.SkyMediaBreakpoints.xs;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.sm)) {
-                breakpoint = i1.SkyMediaBreakpoints.sm;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.md)) {
-                breakpoint = i1.SkyMediaBreakpoints.md;
-            }
-            else {
-                breakpoint = i1.SkyMediaBreakpoints.lg;
-            }
-            this._current = breakpoint;
-            this.currentSubject.next(this._current);
-        };
-        SkyVerticalTabMediaQueryService.prototype.isWidthWithinBreakpiont = function (width, breakpoint) {
-            var xsBreakpointMaxPixels = 767;
-            var smBreakpointMinPixels = 768;
-            var smBreakpointMaxPixels = 991;
-            var mdBreakpointMinPixels = 992;
-            var mdBreakpointMaxPixels = 1199;
-            var lgBreakpointMinPixels = 1200;
-            switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
-                    return width <= xsBreakpointMaxPixels;
-                }
-                case i1.SkyMediaBreakpoints.sm: {
-                    return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-                }
-                case i1.SkyMediaBreakpoints.md: {
-                    return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-                }
-                default: {
-                    return width >= lgBreakpointMinPixels;
-                }
-            }
-        };
-        SkyVerticalTabMediaQueryService.prototype.destroy = function () {
-            this.currentSubject.complete();
-        };
-        return SkyVerticalTabMediaQueryService;
-    }());
-    SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
-
-    var SkyVerticalTabsetAdapterService = /** @class */ (function () {
-        function SkyVerticalTabsetAdapterService(rendererFactory) {
-            this.rendererFactory = rendererFactory;
-            this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-        }
-        SkyVerticalTabsetAdapterService.prototype.getWidth = function (elementRef) {
-            return elementRef.nativeElement.clientWidth;
-        };
-        SkyVerticalTabsetAdapterService.prototype.scrollToContentTop = function (element) {
-            element.nativeElement.scrollTop = 0;
-        };
-        SkyVerticalTabsetAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
-            var nativeEl = element.nativeElement;
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
-            var newClass;
-            switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
-                    newClass = 'sky-responsive-container-xs';
-                    break;
-                }
-                case i1.SkyMediaBreakpoints.sm: {
-                    newClass = 'sky-responsive-container-sm';
-                    break;
-                }
-                case i1.SkyMediaBreakpoints.md: {
-                    newClass = 'sky-responsive-container-md';
-                    break;
-                }
-                default: {
-                    newClass = 'sky-responsive-container-lg';
-                    break;
-                }
-            }
-            this.renderer.addClass(nativeEl, newClass);
-        };
-        return SkyVerticalTabsetAdapterService;
-    }());
-    SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
-
-    var nextId$2 = 0;
-    var SkyVerticalTabComponent = /** @class */ (function () {
-        function SkyVerticalTabComponent(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
-            this.adapterService = adapterService;
-            this.changeRef = changeRef;
-            this.tabsetService = tabsetService;
-            this.verticalTabMediaQueryService = verticalTabMediaQueryService;
-            /**
-             * Indicates whether the tab is active when the tabset loads.
-             */
-            this.active = false;
-            /**
-             * Indicates whether to disable the tab.
-             */
-            this.disabled = false;
-            /**
-             * Indicates 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;
-            /**
-             * Specifies an ID for the tab.
-             * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
-             */
-            this.tabId = "sky-vertical-tab-" + ++nextId$2;
-            this.isMobile = false;
-            this._contentRendered = false;
-            this._mobileSubscription = new rxjs.Subject();
-            this._ngUnsubscribe = new rxjs.Subject();
-            this._showTabRightArrow = false;
-        }
-        Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaRole", {
-            /**
-             * Specifies an ARIA role for the vertical tab
-             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-             * by indicating how the tab 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 "tab"
-             * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
-             * In the next major version, this property will be automatically set to `tab`.
-             */
-            get: function () {
-                if (this.isMobile) {
-                    return undefined;
-                }
-                return this._ariaRole || 'tab';
-            },
-            set: function (value) {
-                this._ariaRole = value;
+                if (this.isMobile) {
+                    return undefined;
+                }
+                return this._ariaRole || 'tab';
+            },
+            set: function (value) {
+                this._ariaRole = value;
             },
             enumerable: false,
             configurable: true
@@ -642,152 +583,90 @@
                     args: ['window:resize']
                 }] } });
 
-    var SkySectionedFormService = /** @class */ (function () {
-        function SkySectionedFormService() {
-            /**
-             * @internal
-             */
-            this.invalidChange = new rxjs.BehaviorSubject(undefined);
+    var SkyVerticalTabsetGroupComponent = /** @class */ (function () {
+        function SkyVerticalTabsetGroupComponent(tabService, changeRef) {
+            var _this = this;
+            this.tabService = tabService;
+            this.changeRef = changeRef;
+            this.ngUnsubscribe = new rxjs.Subject();
+            this.openBeforeTabsHidden = false;
+            this._open = false;
+            this.tabClicked = function () {
+                _this.changeRef.markForCheck();
+            };
+            this.tabsHidden = function () {
+                // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
+                _this.openBeforeTabsHidden = _this.open;
+                _this.open = false;
+                _this.changeRef.markForCheck();
+            };
+            this.tabsShown = function () {
+                _this.open = _this.openBeforeTabsHidden;
+                _this.changeRef.markForCheck();
+            };
+        }
+        Object.defineProperty(SkyVerticalTabsetGroupComponent.prototype, "open", {
+            get: function () {
+                return !this.disabled && this._open;
+            },
             /**
-             * @internal
+             * Indicates whether the collapsible group is expanded.
+             * @default false
              */
-            this.requiredChange = new rxjs.BehaviorSubject(undefined);
-        }
-        /**
-         * Sets the current section's invalid state based on the `isInvalid` parameter.
-         * This method is used within a `sky-sectioned-form-section` element.
-         */
-        SkySectionedFormService.prototype.invalidFieldChanged = function (isInvalid) {
-            this.invalidChange.next(isInvalid);
+            set: function (value) {
+                this._open = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyVerticalTabsetGroupComponent.prototype.ngOnInit = function () {
+            this.tabService.hidingTabs
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(this.tabsHidden);
+            this.tabService.showingTabs
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(this.tabsShown);
+            this.tabService.tabClicked
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(this.tabClicked);
         };
-        /**
-         * Sets the current section's required state based on the `isRequired` parameter.
-         * This method is used within a `sky-sectioned-form-section` element.
-         */
-        SkySectionedFormService.prototype.requiredFieldChanged = function (isRequired) {
-            this.requiredChange.next(isRequired);
+        SkyVerticalTabsetGroupComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
         };
-        return SkySectionedFormService;
-    }());
-    SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var nextId$1 = 0;
-    /**
-     * Creates an individual form to display as a section within the sectioned form.
-     */
-    var SkySectionedFormSectionComponent = /** @class */ (function () {
-        function SkySectionedFormSectionComponent(sectionedFormService, tabsetService, changeRef) {
-            this.sectionedFormService = sectionedFormService;
-            this.tabsetService = tabsetService;
-            this.changeRef = changeRef;
-            this.sectionTabId = "sky-sectioned-form-tab-" + ++nextId$1;
-            this.sectionContentId = "sky-sectioned-form-section-" + ++nextId$1;
-            /**
-             * Indicates whether the section is active when the form loads.
-             * @default false
-             */
-            this.active = false;
-            this._ngUnsubscribe = new rxjs.Subject();
-        }
-        SkySectionedFormSectionComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.changeRef.detectChanges();
-            this.tabsetService.switchingMobile.subscribe(function (mobile) {
-                _this.changeRef.detectChanges();
-            });
-            this.sectionedFormService.requiredChange
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (required) { return (_this.fieldRequired = required); });
-            this.sectionedFormService.invalidChange
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (invalid) { return (_this.fieldInvalid = invalid); });
+        SkyVerticalTabsetGroupComponent.prototype.toggleMenuOpen = function () {
+            if (!this.disabled) {
+                this.open = !this.open;
+            }
+            this.changeRef.markForCheck();
         };
-        SkySectionedFormSectionComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
+        SkyVerticalTabsetGroupComponent.prototype.subMenuOpen = function () {
+            return this.tabs && this.tabs.find(function (t) { return t.active; }) !== undefined;
         };
-        return SkySectionedFormSectionComponent;
+        return SkyVerticalTabsetGroupComponent;
     }());
-    SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
+    SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4__namespace.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [animations.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'sky-sectioned-form-section',
-                        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",
-                        providers: [SkySectionedFormService],
-                        styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"],
+                        selector: 'sky-vertical-tabset-group',
+                        template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                        styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        animations: [animations.skyAnimationSlide],
                     }]
-            }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                     type: i0.Input
-                }], itemCount: [{
+                }], groupHeading: [{
                     type: i0.Input
-                }], active: [{
+                }], open: [{
                     type: i0.Input
-                }], tab: [{
-                    type: i0.ViewChild,
+                }], tabs: [{
+                    type: i0.ContentChildren,
                     args: [SkyVerticalTabComponent]
                 }] } });
 
-    /**
-     * NOTICE: DO NOT MODIFY THIS FILE!
-     * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
-     * To update this file, simply rerun the command.
-     */
-    var RESOURCES = {
-        'EN-US': {
-            skyux_tab_add: { message: 'Add tab' },
-            skyux_tab_close: { message: 'Close {0} tab' },
-            skyux_tabs_navigator_next: { message: 'Next' },
-            skyux_tabs_navigator_previous: { message: 'Previous' },
-            skyux_tab_open: { message: 'Open tab' },
-            skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
-        },
-    };
-    var SkyTabsResourcesProvider = /** @class */ (function () {
-        function SkyTabsResourcesProvider() {
-        }
-        SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i3.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-        };
-        return SkyTabsResourcesProvider;
-    }());
-    /**
-     * Import into any component library module that needs to use resource strings.
-     */
-    var SkyTabsResourcesModule = /** @class */ (function () {
-        function SkyTabsResourcesModule() {
-        }
-        return SkyTabsResourcesModule;
-    }());
-    SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
-            {
-                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyTabsResourcesProvider,
-                multi: true,
-            },
-        ], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [i3.SkyI18nModule],
-                        providers: [
-                            {
-                                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
-                                useClass: SkyTabsResourcesProvider,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }] });
-
     var SkyVerticalTabsetComponent = /** @class */ (function () {
         function SkyVerticalTabsetComponent(adapterService, tabService, resources, changeRef) {
             this.adapterService = adapterService;
@@ -879,16 +758,16 @@
     }());
     SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            animations.trigger('tabGroupEnter', [
-                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations.style({ transform: 'translate(-100%)' }),
-                    animations.animate('150ms ease-in'),
+            animations$1.trigger('tabGroupEnter', [
+                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                    animations$1.style({ transform: 'translate(-100%)' }),
+                    animations$1.animate('150ms ease-in'),
                 ]),
             ]),
-            animations.trigger('contentEnter', [
-                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations.style({ transform: 'translate(100%)' }),
-                    animations.animate('150ms ease-in'),
+            animations$1.trigger('contentEnter', [
+                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                    animations$1.style({ transform: 'translate(100%)' }),
+                    animations$1.animate('150ms ease-in'),
                 ]),
             ]),
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
@@ -901,16 +780,16 @@
                         providers: [SkyVerticalTabsetService],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         animations: [
-                            animations.trigger('tabGroupEnter', [
-                                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations.style({ transform: 'translate(-100%)' }),
-                                    animations.animate('150ms ease-in'),
+                            animations$1.trigger('tabGroupEnter', [
+                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                                    animations$1.style({ transform: 'translate(-100%)' }),
+                                    animations$1.animate('150ms ease-in'),
                                 ]),
                             ]),
-                            animations.trigger('contentEnter', [
-                                animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations.style({ transform: 'translate(100%)' }),
-                                    animations.animate('150ms ease-in'),
+                            animations$1.trigger('contentEnter', [
+                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                                    animations$1.style({ transform: 'translate(100%)' }),
+                                    animations$1.animate('150ms ease-in'),
                                 ]),
                             ]),
                         ],
@@ -938,90 +817,6 @@
                     args: ['contentContainerWrapper']
                 }] } });
 
-    var SkyVerticalTabsetGroupComponent = /** @class */ (function () {
-        function SkyVerticalTabsetGroupComponent(tabService, changeRef) {
-            var _this = this;
-            this.tabService = tabService;
-            this.changeRef = changeRef;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this.openBeforeTabsHidden = false;
-            this._open = false;
-            this.tabClicked = function () {
-                _this.changeRef.markForCheck();
-            };
-            this.tabsHidden = function () {
-                // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
-                _this.openBeforeTabsHidden = _this.open;
-                _this.open = false;
-                _this.changeRef.markForCheck();
-            };
-            this.tabsShown = function () {
-                _this.open = _this.openBeforeTabsHidden;
-                _this.changeRef.markForCheck();
-            };
-        }
-        Object.defineProperty(SkyVerticalTabsetGroupComponent.prototype, "open", {
-            get: function () {
-                return !this.disabled && this._open;
-            },
-            /**
-             * Indicates whether the collapsible group is expanded.
-             * @default false
-             */
-            set: function (value) {
-                this._open = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabsetGroupComponent.prototype.ngOnInit = function () {
-            this.tabService.hidingTabs
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabsHidden);
-            this.tabService.showingTabs
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabsShown);
-            this.tabService.tabClicked
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabClicked);
-        };
-        SkyVerticalTabsetGroupComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyVerticalTabsetGroupComponent.prototype.toggleMenuOpen = function () {
-            if (!this.disabled) {
-                this.open = !this.open;
-            }
-            this.changeRef.markForCheck();
-        };
-        SkyVerticalTabsetGroupComponent.prototype.subMenuOpen = function () {
-            return this.tabs && this.tabs.find(function (t) { return t.active; }) !== undefined;
-        };
-        return SkyVerticalTabsetGroupComponent;
-    }());
-    SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4__namespace.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [animations$1.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-vertical-tabset-group',
-                        template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n",
-                        styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [animations$1.skyAnimationSlide],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                    type: i0.Input
-                }], groupHeading: [{
-                    type: i0.Input
-                }], open: [{
-                    type: i0.Input
-                }], tabs: [{
-                    type: i0.ContentChildren,
-                    args: [SkyVerticalTabComponent]
-                }] } });
-
     var SkyVerticalTabsetModule = /** @class */ (function () {
         function SkyVerticalTabsetModule() {
         }
@@ -1074,6 +869,211 @@
                     }]
             }] });
 
+    var SkySectionedFormService = /** @class */ (function () {
+        function SkySectionedFormService() {
+            /**
+             * @internal
+             */
+            this.invalidChange = new rxjs.BehaviorSubject(undefined);
+            /**
+             * @internal
+             */
+            this.requiredChange = new rxjs.BehaviorSubject(undefined);
+        }
+        /**
+         * Sets the current section's invalid state based on the `isInvalid` parameter.
+         * This method is used within a `sky-sectioned-form-section` element.
+         */
+        SkySectionedFormService.prototype.invalidFieldChanged = function (isInvalid) {
+            this.invalidChange.next(isInvalid);
+        };
+        /**
+         * Sets the current section's required state based on the `isRequired` parameter.
+         * This method is used within a `sky-sectioned-form-section` element.
+         */
+        SkySectionedFormService.prototype.requiredFieldChanged = function (isRequired) {
+            this.requiredChange.next(isRequired);
+        };
+        return SkySectionedFormService;
+    }());
+    SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var nextId$1 = 0;
+    /**
+     * Creates an individual form to display as a section within the sectioned form.
+     */
+    var SkySectionedFormSectionComponent = /** @class */ (function () {
+        function SkySectionedFormSectionComponent(sectionedFormService, tabsetService, changeRef) {
+            this.sectionedFormService = sectionedFormService;
+            this.tabsetService = tabsetService;
+            this.changeRef = changeRef;
+            this.sectionTabId = "sky-sectioned-form-tab-" + ++nextId$1;
+            this.sectionContentId = "sky-sectioned-form-section-" + ++nextId$1;
+            /**
+             * Indicates whether the section is active when the form loads.
+             * @default false
+             */
+            this.active = false;
+            this._ngUnsubscribe = new rxjs.Subject();
+        }
+        SkySectionedFormSectionComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.changeRef.detectChanges();
+            this.tabsetService.switchingMobile.subscribe(function (mobile) {
+                _this.changeRef.detectChanges();
+            });
+            this.sectionedFormService.requiredChange
+                .pipe(operators.takeUntil(this._ngUnsubscribe))
+                .subscribe(function (required) { return (_this.fieldRequired = required); });
+            this.sectionedFormService.invalidChange
+                .pipe(operators.takeUntil(this._ngUnsubscribe))
+                .subscribe(function (invalid) { return (_this.fieldInvalid = invalid); });
+        };
+        SkySectionedFormSectionComponent.prototype.ngOnDestroy = function () {
+            this._ngUnsubscribe.next();
+            this._ngUnsubscribe.complete();
+        };
+        return SkySectionedFormSectionComponent;
+    }());
+    SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-sectioned-form-section',
+                        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",
+                        providers: [SkySectionedFormService],
+                        styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"],
+                    }]
+            }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+                    type: i0.Input
+                }], itemCount: [{
+                    type: i0.Input
+                }], active: [{
+                    type: i0.Input
+                }], tab: [{
+                    type: i0.ViewChild,
+                    args: [SkyVerticalTabComponent]
+                }] } });
+
+    /**
+     * Creates a container for the sectioned forms.
+     */
+    var SkySectionedFormComponent = /** @class */ (function () {
+        function SkySectionedFormComponent(tabService, changeRef) {
+            this.tabService = tabService;
+            this.changeRef = changeRef;
+            /**
+             * Indicates whether the sectioned form loads section content during initialization so that it
+             * displays content without moving around elements in the content container.
+             * @default false
+             */
+            this.maintainSectionContent = false;
+            /**
+             * Fires when the active tab changes and emits the index of the active
+             * section. The index is based on the section's position when the form loads.
+             */
+            this.indexChanged = new i0.EventEmitter();
+            this.isMobile = false;
+            this._ngUnsubscribe = new rxjs.Subject();
+        }
+        Object.defineProperty(SkySectionedFormComponent.prototype, "ariaRole", {
+            get: function () {
+                return this.isMobile ? undefined : 'tablist';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkySectionedFormComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.tabService.maintainTabContent = this.maintainSectionContent;
+            this.tabService.indexChanged
+                .pipe(operators.takeUntil(this._ngUnsubscribe))
+                .subscribe(function (index) {
+                _this.indexChanged.emit(index);
+                _this.changeRef.markForCheck();
+            });
+            this.tabService.switchingMobile
+                .pipe(operators.takeUntil(this._ngUnsubscribe))
+                .subscribe(function (mobile) {
+                _this.isMobile = mobile;
+                _this.changeRef.markForCheck();
+            });
+            if (this.tabService.isMobile()) {
+                this.isMobile = true;
+                this.tabService.animationContentVisibleState = VISIBLE_STATE;
+                this.changeRef.markForCheck();
+            }
+        };
+        SkySectionedFormComponent.prototype.ngAfterViewChecked = function () {
+            this.tabService.content = this.content;
+            this.tabService.updateContent();
+        };
+        SkySectionedFormComponent.prototype.ngOnDestroy = function () {
+            this._ngUnsubscribe.next();
+            this._ngUnsubscribe.complete();
+        };
+        SkySectionedFormComponent.prototype.tabsVisible = function () {
+            this.changeRef.markForCheck();
+            return this.tabService.tabsVisible();
+        };
+        SkySectionedFormComponent.prototype.showTabs = function () {
+            this.tabService.showTabs();
+            this.changeRef.markForCheck();
+        };
+        return SkySectionedFormComponent;
+    }());
+    SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0__namespace, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+            animations$1.trigger('tabEnter', [
+                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                    animations$1.style({ transform: 'translate(-100%)' }),
+                    animations$1.animate('150ms ease-in'),
+                ]),
+            ]),
+            animations$1.trigger('contentEnter', [
+                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                    animations$1.style({ transform: 'translate(100%)' }),
+                    animations$1.animate('150ms ease-in'),
+                ]),
+            ]),
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-sectioned-form',
+                        template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n",
+                        styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"],
+                        providers: [SkyVerticalTabsetService],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        animations: [
+                            animations$1.trigger('tabEnter', [
+                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                                    animations$1.style({ transform: 'translate(-100%)' }),
+                                    animations$1.animate('150ms ease-in'),
+                                ]),
+                            ]),
+                            animations$1.trigger('contentEnter', [
+                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
+                                    animations$1.style({ transform: 'translate(100%)' }),
+                                    animations$1.animate('150ms ease-in'),
+                                ]),
+                            ]),
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
+                    type: i0.Input
+                }], indexChanged: [{
+                    type: i0.Output
+                }], content: [{
+                    type: i0.ViewChild,
+                    args: ['skySectionSideContent']
+                }] } });
+
     var SkySectionedFormModule = /** @class */ (function () {
         function SkySectionedFormModule() {
         }