@skyux/tabs 5.5.0 → 5.6.2

package/fesm2015/skyux-tabs.js

@@ -1,25 +1,187 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule, ContentChildren, ViewEncapsulation } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { BehaviorSubject, Subject, combineLatest, race, forkJoin } from 'rxjs';
-import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { SkyCheckboxModule } from '@skyux/forms';
+import * as i8 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
 import * as i1 from '@skyux/core';
 import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule } from '@skyux/core';
 import * as i4 from '@skyux/indicators';
 import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i8 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
 import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { BehaviorSubject, Subject, combineLatest, race, forkJoin } from 'rxjs';
+import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
 import { skyAnimationSlide } from '@skyux/animations';
-import { SkyCheckboxModule } from '@skyux/forms';
+import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4$1 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
 
+/**
+ * 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.
+ */
+const 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' },
+    },
+};
+class SkyTabsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyTabsResourcesModule {
+}
+SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
+SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyTabsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTabsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyVerticalTabMediaQueryService {
+    constructor() {
+        this.currentSubject = new BehaviorSubject(this.current);
+        this._current = SkyMediaBreakpoints.xs;
+        this.currentSubject.next(this._current);
+    }
+    get current() {
+        return this._current;
+    }
+    subscribe(listener) {
+        return this.currentSubject.subscribe({
+            next: (breakpoints) => {
+                listener(breakpoints);
+            },
+        });
+    }
+    setBreakpointForWidth(width) {
+        let breakpoint;
+        if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {
+            breakpoint = SkyMediaBreakpoints.xs;
+        }
+        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {
+            breakpoint = SkyMediaBreakpoints.sm;
+        }
+        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {
+            breakpoint = SkyMediaBreakpoints.md;
+        }
+        else {
+            breakpoint = SkyMediaBreakpoints.lg;
+        }
+        this._current = breakpoint;
+        this.currentSubject.next(this._current);
+    }
+    isWidthWithinBreakpiont(width, breakpoint) {
+        const xsBreakpointMaxPixels = 767;
+        const smBreakpointMinPixels = 768;
+        const smBreakpointMaxPixels = 991;
+        const mdBreakpointMinPixels = 992;
+        const mdBreakpointMaxPixels = 1199;
+        const lgBreakpointMinPixels = 1200;
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                return width <= xsBreakpointMaxPixels;
+            }
+            case SkyMediaBreakpoints.sm: {
+                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
+            }
+            case SkyMediaBreakpoints.md: {
+                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
+            }
+            default: {
+                return width >= lgBreakpointMinPixels;
+            }
+        }
+    }
+    destroy() {
+        this.currentSubject.complete();
+    }
+}
+SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class SkyVerticalTabsetAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    scrollToContentTop(element) {
+        element.nativeElement.scrollTop = 0;
+    }
+    setResponsiveClass(element, breakpoint) {
+        const nativeEl = element.nativeElement;
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        let newClass;
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                newClass = 'sky-responsive-container-xs';
+                break;
+            }
+            case SkyMediaBreakpoints.sm: {
+                newClass = 'sky-responsive-container-sm';
+                break;
+            }
+            case SkyMediaBreakpoints.md: {
+                newClass = 'sky-responsive-container-md';
+                break;
+            }
+            default: {
+                newClass = 'sky-responsive-container-lg';
+                break;
+            }
+        }
+        this.renderer.addClass(nativeEl, newClass);
+    }
+}
+SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
 const VISIBLE_STATE = 'shown';
 const HIDDEN_STATE = 'void';
 /**
@@ -73,7 +235,7 @@ class SkyVerticalTabsetService {
     }
     destroyTab(tab) {
         var _a;
-        let tabIndex = this.tabs.indexOf(tab);
+        const tabIndex = this.tabs.indexOf(tab);
         if (tabIndex === -1) {
             return;
         }
@@ -93,7 +255,7 @@ class SkyVerticalTabsetService {
             }
             // Try selecting the next tab first, and if there's no next tab then
             // try selecting the previous one.
-            let newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
+            const newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
             /*istanbul ignore else */
             if (newActiveTab) {
                 newActiveTab.activateTab();
@@ -102,7 +264,7 @@ class SkyVerticalTabsetService {
     }
     activateTab(tab) {
         // unactivate active tab
-        let activeTab = this.tabs.find((t) => t.index === this.activeIndex);
+        const activeTab = this.tabs.find((t) => t.index === this.activeIndex);
         if (activeTab && activeTab.index !== tab.index) {
             activeTab.active = false;
             activeTab.tabDeactivated();
@@ -159,8 +321,8 @@ class SkyVerticalTabsetService {
     moveContent() {
         /* istanbul ignore else */
         if (this._content && !this._contentAdded) {
-            let activeTab = this.activeTab();
-            let activeContent = activeTab ? activeTab.tabContent : undefined;
+            const activeTab = this.activeTab();
+            const activeContent = activeTab ? activeTab.tabContent : undefined;
             if (activeContent && activeContent.nativeElement) {
                 this._content.nativeElement.appendChild(activeContent.nativeElement);
                 activeTab.contentRendered = true;
@@ -185,276 +347,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
 
-/**
- * Creates a container for the sectioned forms.
- */
-class SkySectionedFormComponent {
-    constructor(tabService, changeRef) {
-        this.tabService = tabService;
+let nextId$2 = 0;
+class SkyVerticalTabComponent {
+    constructor(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 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 Subject();
         this._ngUnsubscribe = new Subject();
+        this._showTabRightArrow = false;
     }
+    /**
+     * 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 ariaRole() {
-        return this.isMobile ? undefined : 'tablist';
-    }
-    ngOnInit() {
-        this.tabService.maintainTabContent = this.maintainSectionContent;
-        this.tabService.indexChanged
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe((index) => {
-            this.indexChanged.emit(index);
-            this.changeRef.markForCheck();
-        });
-        this.tabService.switchingMobile
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe((mobile) => {
-            this.isMobile = mobile;
-            this.changeRef.markForCheck();
-        });
-        if (this.tabService.isMobile()) {
-            this.isMobile = true;
-            this.tabService.animationContentVisibleState = VISIBLE_STATE;
-            this.changeRef.markForCheck();
+        if (this.isMobile) {
+            return undefined;
         }
+        return this._ariaRole || 'tab';
     }
-    ngAfterViewChecked() {
-        this.tabService.content = this.content;
-        this.tabService.updateContent();
-    }
-    ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    tabsVisible() {
-        this.changeRef.markForCheck();
-        return this.tabService.tabsVisible();
-    }
-    showTabs() {
-        this.tabService.showTabs();
-        this.changeRef.markForCheck();
-    }
-}
-SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySectionedFormComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-        trigger('tabEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(-100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-        trigger('contentEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-sectioned-form',
-                    templateUrl: './sectioned-form.component.html',
-                    styleUrls: ['./sectioned-form.component.scss'],
-                    providers: [SkyVerticalTabsetService],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    animations: [
-                        trigger('tabEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(-100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                        trigger('contentEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
-                type: Input
-            }], indexChanged: [{
-                type: Output
-            }], content: [{
-                type: ViewChild,
-                args: ['skySectionSideContent']
-            }] } });
-
-/**
- * @internal
- */
-class SkyVerticalTabMediaQueryService {
-    constructor() {
-        this.currentSubject = new BehaviorSubject(this.current);
-        this._current = SkyMediaBreakpoints.xs;
-        this.currentSubject.next(this._current);
-    }
-    get current() {
-        return this._current;
-    }
-    subscribe(listener) {
-        return this.currentSubject.subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
-            },
-        });
-    }
-    setBreakpointForWidth(width) {
-        let breakpoint;
-        if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {
-            breakpoint = SkyMediaBreakpoints.xs;
-        }
-        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {
-            breakpoint = SkyMediaBreakpoints.sm;
-        }
-        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {
-            breakpoint = SkyMediaBreakpoints.md;
-        }
-        else {
-            breakpoint = SkyMediaBreakpoints.lg;
-        }
-        this._current = breakpoint;
-        this.currentSubject.next(this._current);
-    }
-    isWidthWithinBreakpiont(width, breakpoint) {
-        const xsBreakpointMaxPixels = 767;
-        const smBreakpointMinPixels = 768;
-        const smBreakpointMaxPixels = 991;
-        const mdBreakpointMinPixels = 992;
-        const mdBreakpointMaxPixels = 1199;
-        const lgBreakpointMinPixels = 1200;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                return width <= xsBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.sm: {
-                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.md: {
-                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-            }
-            default: {
-                return width >= lgBreakpointMinPixels;
-            }
-        }
-    }
-    destroy() {
-        this.currentSubject.complete();
-    }
-}
-SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-class SkyVerticalTabsetAdapterService {
-    constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-    }
-    getWidth(elementRef) {
-        return elementRef.nativeElement.clientWidth;
-    }
-    scrollToContentTop(element) {
-        element.nativeElement.scrollTop = 0;
-    }
-    setResponsiveClass(element, breakpoint) {
-        const nativeEl = element.nativeElement;
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
-        let newClass;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                newClass = 'sky-responsive-container-xs';
-                break;
-            }
-            case SkyMediaBreakpoints.sm: {
-                newClass = 'sky-responsive-container-sm';
-                break;
-            }
-            case SkyMediaBreakpoints.md: {
-                newClass = 'sky-responsive-container-md';
-                break;
-            }
-            default: {
-                newClass = 'sky-responsive-container-lg';
-                break;
-            }
-        }
-        this.renderer.addClass(nativeEl, newClass);
-    }
-}
-SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-
-let nextId$2 = 0;
-class SkyVerticalTabComponent {
-    constructor(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 Subject();
-        this._ngUnsubscribe = new Subject();
-        this._showTabRightArrow = false;
-    }
-    /**
-     * 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 ariaRole() {
-        if (this.isMobile) {
-            return undefined;
-        }
-        return this._ariaRole || 'tab';
-    }
-    set ariaRole(value) {
-        this._ariaRole = value;
+    set ariaRole(value) {
+        this._ariaRole = value;
     }
     /**
      * Indicates whether to display a chevron-right icon in the righthand side of the tab.
@@ -595,143 +536,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['window:resize']
             }] } });
 
-class SkySectionedFormService {
-    constructor() {
-        /**
-         * @internal
-         */
-        this.invalidChange = new BehaviorSubject(undefined);
-        /**
-         * @internal
-         */
-        this.requiredChange = new BehaviorSubject(undefined);
+class SkyVerticalTabsetGroupComponent {
+    constructor(tabService, changeRef) {
+        this.tabService = tabService;
+        this.changeRef = changeRef;
+        this.ngUnsubscribe = new Subject();
+        this.openBeforeTabsHidden = false;
+        this._open = false;
+        this.tabClicked = () => {
+            this.changeRef.markForCheck();
+        };
+        this.tabsHidden = () => {
+            // 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 = () => {
+            this.open = this.openBeforeTabsHidden;
+            this.changeRef.markForCheck();
+        };
     }
     /**
-     * Sets the current section's invalid state based on the `isInvalid` parameter.
-     * This method is used within a `sky-sectioned-form-section` element.
+     * Indicates whether the collapsible group is expanded.
+     * @default false
      */
-    invalidFieldChanged(isInvalid) {
-        this.invalidChange.next(isInvalid);
+    set open(value) {
+        this._open = value;
     }
-    /**
-     * Sets the current section's required state based on the `isRequired` parameter.
-     * This method is used within a `sky-sectioned-form-section` element.
-     */
-    requiredFieldChanged(isRequired) {
-        this.requiredChange.next(isRequired);
-    }
-}
-SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, decorators: [{
-            type: Injectable
-        }] });
-
-let nextId$1 = 0;
-/**
- * Creates an individual form to display as a section within the sectioned form.
- */
-class SkySectionedFormSectionComponent {
-    constructor(sectionedFormService, tabsetService, changeRef) {
-        this.sectionedFormService = sectionedFormService;
-        this.tabsetService = tabsetService;
-        this.changeRef = changeRef;
-        this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
-        this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
-        /**
-         * Indicates whether the section is active when the form loads.
-         * @default false
-         */
-        this.active = false;
-        this._ngUnsubscribe = new Subject();
+    get open() {
+        return !this.disabled && this._open;
     }
     ngOnInit() {
-        this.changeRef.detectChanges();
-        this.tabsetService.switchingMobile.subscribe((mobile) => {
-            this.changeRef.detectChanges();
-        });
-        this.sectionedFormService.requiredChange
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe((required) => (this.fieldRequired = required));
-        this.sectionedFormService.invalidChange
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe((invalid) => (this.fieldInvalid = invalid));
+        this.tabService.hidingTabs
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabsHidden);
+        this.tabService.showingTabs
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabsShown);
+        this.tabService.tabClicked
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabClicked);
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    toggleMenuOpen() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
+        this.changeRef.markForCheck();
+    }
+    subMenuOpen() {
+        return this.tabs && this.tabs.find((t) => t.active) !== undefined;
     }
 }
-SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵ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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵ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, 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.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sky-sectioned-form-section',
-                    templateUrl: './sectioned-form-section.component.html',
-                    providers: [SkySectionedFormService],
-                    styleUrls: ['./sectioned-form-section.component.scss'],
+                    selector: 'sky-vertical-tabset-group',
+                    templateUrl: './vertical-tabset-group.component.html',
+                    styleUrls: ['./vertical-tabset-group.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [skyAnimationSlide],
                 }]
-        }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input
-            }], itemCount: [{
+            }], groupHeading: [{
                 type: Input
-            }], active: [{
+            }], open: [{
                 type: Input
-            }], tab: [{
-                type: ViewChild,
+            }], tabs: [{
+                type: 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.
- */
-const 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' },
-    },
-};
-class SkyTabsResourcesProvider {
-    getString(localeInfo, name) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
-/**
- * Import into any component library module that needs to use resource strings.
- */
-class SkyTabsResourcesModule {
-}
-SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
-SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyTabsResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyTabsResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
 class SkyVerticalTabsetComponent {
     constructor(adapterService, tabService, resources, changeRef) {
         this.adapterService = adapterService;
@@ -876,84 +758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['contentContainerWrapper']
             }] } });
 
-class SkyVerticalTabsetGroupComponent {
-    constructor(tabService, changeRef) {
-        this.tabService = tabService;
-        this.changeRef = changeRef;
-        this.ngUnsubscribe = new Subject();
-        this.openBeforeTabsHidden = false;
-        this._open = false;
-        this.tabClicked = () => {
-            this.changeRef.markForCheck();
-        };
-        this.tabsHidden = () => {
-            // 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 = () => {
-            this.open = this.openBeforeTabsHidden;
-            this.changeRef.markForCheck();
-        };
-    }
-    /**
-     * Indicates whether the collapsible group is expanded.
-     * @default false
-     */
-    set open(value) {
-        this._open = value;
-    }
-    get open() {
-        return !this.disabled && this._open;
-    }
-    ngOnInit() {
-        this.tabService.hidingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabsHidden);
-        this.tabService.showingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabsShown);
-        this.tabService.tabClicked
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabClicked);
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    toggleMenuOpen() {
-        if (!this.disabled) {
-            this.open = !this.open;
-        }
-        this.changeRef.markForCheck();
-    }
-    subMenuOpen() {
-        return this.tabs && this.tabs.find((t) => t.active) !== undefined;
-    }
-}
-SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵ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, 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.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-vertical-tabset-group',
-                    templateUrl: './vertical-tabset-group.component.html',
-                    styleUrls: ['./vertical-tabset-group.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    animations: [skyAnimationSlide],
-                }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], groupHeading: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], tabs: [{
-                type: ContentChildren,
-                args: [SkyVerticalTabComponent]
-            }] } });
-
 class SkyVerticalTabsetModule {
 }
 SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1003,6 +807,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+class SkySectionedFormService {
+    constructor() {
+        /**
+         * @internal
+         */
+        this.invalidChange = new BehaviorSubject(undefined);
+        /**
+         * @internal
+         */
+        this.requiredChange = new 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.
+     */
+    invalidFieldChanged(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.
+     */
+    requiredFieldChanged(isRequired) {
+        this.requiredChange.next(isRequired);
+    }
+}
+SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, decorators: [{
+            type: Injectable
+        }] });
+
+let nextId$1 = 0;
+/**
+ * Creates an individual form to display as a section within the sectioned form.
+ */
+class SkySectionedFormSectionComponent {
+    constructor(sectionedFormService, tabsetService, changeRef) {
+        this.sectionedFormService = sectionedFormService;
+        this.tabsetService = tabsetService;
+        this.changeRef = changeRef;
+        this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
+        this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
+        /**
+         * Indicates whether the section is active when the form loads.
+         * @default false
+         */
+        this.active = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.changeRef.detectChanges();
+        this.tabsetService.switchingMobile.subscribe((mobile) => {
+            this.changeRef.detectChanges();
+        });
+        this.sectionedFormService.requiredChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((required) => (this.fieldRequired = required));
+        this.sectionedFormService.invalidChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((invalid) => (this.fieldInvalid = invalid));
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+}
+SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵ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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form-section',
+                    templateUrl: './sectioned-form-section.component.html',
+                    providers: [SkySectionedFormService],
+                    styleUrls: ['./sectioned-form-section.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+                type: Input
+            }], itemCount: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], tab: [{
+                type: ViewChild,
+                args: [SkyVerticalTabComponent]
+            }] } });
+
+/**
+ * Creates a container for the sectioned forms.
+ */
+class SkySectionedFormComponent {
+    constructor(tabService, changeRef) {
+        this.tabService = tabService;
+        this.changeRef = changeRef;
+        /**
+         * Indicates whether the sectioned form loads section content during initialization so that it
+         * displays content without moving around elements in the content container.
+         * @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 EventEmitter();
+        this.isMobile = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    get ariaRole() {
+        return this.isMobile ? undefined : 'tablist';
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainSectionContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((index) => {
+            this.indexChanged.emit(index);
+            this.changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.markForCheck();
+        });
+        if (this.tabService.isMobile()) {
+            this.isMobile = true;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.changeRef.markForCheck();
+        }
+    }
+    ngAfterViewChecked() {
+        this.tabService.content = this.content;
+        this.tabService.updateContent();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    tabsVisible() {
+        this.changeRef.markForCheck();
+        return this.tabService.tabsVisible();
+    }
+    showTabs() {
+        this.tabService.showTabs();
+        this.changeRef.markForCheck();
+    }
+}
+SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        trigger('tabEnter', [
+            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                style({ transform: 'translate(-100%)' }),
+                animate('150ms ease-in'),
+            ]),
+        ]),
+        trigger('contentEnter', [
+            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                style({ transform: 'translate(100%)' }),
+                animate('150ms ease-in'),
+            ]),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form',
+                    templateUrl: './sectioned-form.component.html',
+                    styleUrls: ['./sectioned-form.component.scss'],
+                    providers: [SkyVerticalTabsetService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [
+                        trigger('tabEnter', [
+                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                                style({ transform: 'translate(-100%)' }),
+                                animate('150ms ease-in'),
+                            ]),
+                        ]),
+                        trigger('contentEnter', [
+                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                                style({ transform: 'translate(100%)' }),
+                                animate('150ms ease-in'),
+                            ]),
+                        ]),
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
+                type: Input
+            }], indexChanged: [{
+                type: Output
+            }], content: [{
+                type: ViewChild,
+                args: ['skySectionSideContent']
+            }] } });
+
 class SkySectionedFormModule {
 }
 SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1190,7 +1190,7 @@ class SkyTabsetPermalinkService {
         const sanitized = value
             .toLowerCase()
             // Remove special characters.
-            .replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
+            .replace(/[_~`@!#$%^&*()[\]{};:'/\\<>,.?=+|"]/g, '')
             // Replace space characters with a dash.
             .replace(/\s/g, '-')
             // Remove any double-dashes.
@@ -1946,17 +1946,17 @@ class SkyTabsetNavButtonComponent {
         return selectedTab;
     }
     get nextTab() {
-        let selectedTab = this.selectedTab;
+        const selectedTab = this.selectedTab;
         if (selectedTab) {
-            let tabs = this.tabset.tabs.toArray();
+            const tabs = this.tabset.tabs.toArray();
             return tabs[tabs.indexOf(selectedTab) + 1];
         }
         return undefined;
     }
     get previousTab() {
-        let selectedTab = this.selectedTab;
+        const selectedTab = this.selectedTab;
         if (selectedTab) {
-            let tabs = this.tabset.tabs.toArray();
+            const tabs = this.tabset.tabs.toArray();
             return tabs[tabs.indexOf(selectedTab) - 1];
         }
         return undefined;