@skyux/tabs 11.15.1 → 11.16.0

package/fesm2022/skyux-tabs.mjs

@@ -1,23 +1,24 @@
-import * as i5 from '@angular/common';
+import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, inject, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, HostBinding, Pipe } from '@angular/core';
+import { NgModule, Injectable, inject, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, ContentChildren, EventEmitter, Output, ViewEncapsulation, HostBinding, Pipe } from '@angular/core';
 import { SkyCheckboxModule } from '@skyux/forms';
-import * as i7 from '@skyux/theme';
+import * as i7$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResizeObserverMediaQueryService, SkyLayoutHostService } from '@skyux/core';
+import * as i3 from '@skyux/core';
+import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, SkyLayoutHostService } from '@skyux/core';
 import * as i6 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i8 from '@skyux/indicators';
+import * as i7 from '@skyux/indicators';
 import { SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i3 from '@skyux/i18n';
+import * as i3$1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { ReplaySubject, Subject, BehaviorSubject, combineLatest, race } from 'rxjs';
-import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
+import { Subject, BehaviorSubject, ReplaySubject, combineLatest, race } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { skyAnimationSlide } from '@skyux/animations';
+import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i5$1 from '@skyux/popovers';
+import * as i5 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -80,70 +81,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/**
- * @internal
- */
-class SkyVerticalTabMediaQueryService {
-    #currentSubject;
-    constructor() {
-        this.#currentSubject = new ReplaySubject(1);
-    }
-    subscribe(listener) {
-        return this.#currentSubject.subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
-            },
-        });
-    }
-    setBreakpointForWidth(width) {
-        let breakpoint;
-        if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.xs)) {
-            breakpoint = SkyMediaBreakpoints.xs;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.sm)) {
-            breakpoint = SkyMediaBreakpoints.sm;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.md)) {
-            breakpoint = SkyMediaBreakpoints.md;
-        }
-        else {
-            breakpoint = SkyMediaBreakpoints.lg;
-        }
-        this.current = breakpoint;
-        this.#currentSubject.next(this.current);
-    }
-    isWidthWithinBreakpoint(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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabMediaQueryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 /**
  * @internal
  */
@@ -161,44 +98,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 const VERTICAL_TABSET_BUTTON_SELECTOR = '.sky-vertical-tabset-button';
 const VERTICAL_TABSET_BUTTON_DISABLED_SELECTOR = `${VERTICAL_TABSET_BUTTON_SELECTOR}-disabled`;
 class SkyVerticalTabsetAdapterService {
-    #renderer;
     #document = inject(DOCUMENT);
-    constructor(rendererFactory) {
-        this.#renderer = rendererFactory.createRenderer(undefined, null);
-    }
-    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);
-    }
     focusButton(elRef) {
         return this.#focusButtonEl(elRef?.nativeElement);
     }
@@ -249,12 +152,12 @@ class SkyVerticalTabsetAdapterService {
     #elHasFocus(el) {
         return !!el && el === this.#document.activeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetAdapterService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+        }] });
 
 const VISIBLE_STATE = 'shown';
 const HIDDEN_STATE = 'void';
@@ -266,9 +169,8 @@ class SkyVerticalTabsetService {
     #contentAdded;
     #tabsVisible;
     #isMobile;
-    #mediaQueryService;
     #adapterSvc;
-    constructor(mediaQueryService) {
+    constructor() {
         this.activeIndex = undefined;
         this.hidingTabs = new BehaviorSubject(false);
         this.indexChanged = new ReplaySubject(1);
@@ -283,9 +185,10 @@ class SkyVerticalTabsetService {
         this.#tabsVisible = false;
         this.#isMobile = false;
         this.#adapterSvc = inject(SkyVerticalTabsetAdapterService);
-        this.#mediaQueryService = mediaQueryService;
-        this.#mediaQueryService.subscribe((breakpoint) => {
-            const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
+        inject(SkyMediaQueryService)
+            .breakpointChange.pipe(takeUntilDestroyed())
+            .subscribe((breakpoint) => {
+            const nowMobile = breakpoint === 'xs';
             if (nowMobile && !this.#isMobile) {
                 // switching to mobile
                 this.switchingMobile.next(true);
@@ -443,12 +346,12 @@ class SkyVerticalTabsetService {
         }
         this.indexChanged.next(this.activeIndex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.SkyMediaQueryService }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Tracks the element IDs for all tabs within a tablist.
@@ -546,10 +449,11 @@ class SkyVerticalTabComponent {
         this.#_contentRendered = value;
         /* istanbul ignore else */
         if (this.#_contentRendered) {
-            // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
+            // NOTE: Trigger another change detection cycle when the service marks
+            // this tab as "rendered".
             setTimeout(() => {
                 if (this.tabContent) {
-                    this.#updateBreakpointAndResponsiveClass();
+                    this.#changeRef.markForCheck();
                 }
             });
         }
@@ -566,9 +470,8 @@ class SkyVerticalTabComponent {
     #adapterService;
     #changeRef;
     #tabsetService;
-    #verticalTabMediaQueryService;
     #tabIdSvc;
-    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
+    constructor(adapterService, changeRef, tabsetService, tabIdSvc) {
         this.#_active = false;
         /**
          * Whether to disable the tab.
@@ -590,7 +493,6 @@ class SkyVerticalTabComponent {
         this.#adapterService = adapterService;
         this.#changeRef = changeRef;
         this.#tabsetService = tabsetService;
-        this.#verticalTabMediaQueryService = verticalTabMediaQueryService;
         this.#tabIdSvc = tabIdSvc;
         this.#tabIdOrDefault = this.#defaultTabId = `sky-vertical-tab-${++nextId$2}`;
         this.tabId = this.#defaultTabId;
@@ -602,17 +504,6 @@ class SkyVerticalTabComponent {
             this.isMobile = mobile;
             this.#changeRef.markForCheck();
         });
-        // Update the breakpoint and responsive class here just as a sanity check since we can not
-        // watch for element resizing.
-        this.#tabsetService.indexChanged
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((index) => {
-            if (this.index === index && this.contentRendered) {
-                if (this.tabContent) {
-                    this.#updateBreakpointAndResponsiveClass();
-                }
-            }
-        });
         this.#tabsetService.addTab(this);
     }
     ngOnDestroy() {
@@ -644,44 +535,16 @@ class SkyVerticalTabComponent {
             event.preventDefault();
         }
     }
-    onWindowResize() {
-        if (this.tabContent) {
-            this.#updateBreakpointAndResponsiveClass();
-        }
-    }
     tabDeactivated() {
         this.#changeRef.markForCheck();
     }
-    #updateBreakpointAndResponsiveClass() {
-        if (this.tabContent) {
-            const width = this.#adapterService.getWidth(this.tabContent);
-            this.#verticalTabMediaQueryService.setBreakpointForWidth(width);
-            const newBreakpoint = this.#verticalTabMediaQueryService.current;
-            if (newBreakpoint) {
-                this.#adapterService.setResponsiveClass(this.tabContent, newBreakpoint);
-            }
-            this.#changeRef.markForCheck();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
-            SkyVerticalTabMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyVerticalTabMediaQueryService,
-            },
-        ], viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  #tabButton\n  class=\"sky-vertical-tab sky-vertical-tabset-button\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-disabled]=\"disabled || undefined\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tabset-button-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"-1\"\n  (click)=\"activateTab()\"\n  (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n  (keyup.enter)=\"tabButtonActivate($event)\"\n  (keyup.space)=\"tabButtonActivate($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      @if (tabHeaderCount || tabHeaderCount === 0) {\n        <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n      }\n    </div>\n    @if (errorIndicator) {\n      <sky-status-indicator\n        class=\"sky-vertical-tab-heading-error\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      />\n    }\n    @if (isMobile && showTabRightArrow) {\n      <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n    }\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    #tabContentPane\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n  >\n    <ng-content />\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i8.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  #tabButton\n  class=\"sky-vertical-tab sky-vertical-tabset-button\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-disabled]=\"disabled || undefined\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tabset-button-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"-1\"\n  (click)=\"activateTab()\"\n  (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n  (keyup.enter)=\"tabButtonActivate($event)\"\n  (keyup.space)=\"tabButtonActivate($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      @if (tabHeaderCount || tabHeaderCount === 0) {\n        <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n      }\n    </div>\n    @if (errorIndicator) {\n      <sky-status-indicator\n        class=\"sky-vertical-tab-heading-error\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      />\n    }\n    @if (isMobile && showTabRightArrow) {\n      <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n    }\n  </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n  <div\n    #tabContentPane\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-vertical-tab', providers: [
-                        SkyVerticalTabMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyVerticalTabMediaQueryService,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  #tabButton\n  class=\"sky-vertical-tab sky-vertical-tabset-button\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-disabled]=\"disabled || undefined\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tabset-button-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"-1\"\n  (click)=\"activateTab()\"\n  (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n  (keyup.enter)=\"tabButtonActivate($event)\"\n  (keyup.space)=\"tabButtonActivate($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      @if (tabHeaderCount || tabHeaderCount === 0) {\n        <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n      }\n    </div>\n    @if (errorIndicator) {\n      <sky-status-indicator\n        class=\"sky-vertical-tab-heading-error\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      />\n    }\n    @if (isMobile && showTabRightArrow) {\n      <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n    }\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\n    #tabContentPane\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n  >\n    <ng-content />\n\n    <div></div>\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }, { type: SkyTabIdService, decorators: [{
+            args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  #tabButton\n  class=\"sky-vertical-tab sky-vertical-tabset-button\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-disabled]=\"disabled || undefined\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tabset-button-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"-1\"\n  (click)=\"activateTab()\"\n  (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n  (keyup.enter)=\"tabButtonActivate($event)\"\n  (keyup.space)=\"tabButtonActivate($event)\"\n>\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      @if (tabHeaderCount || tabHeaderCount === 0) {\n        <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n      }\n    </div>\n    @if (errorIndicator) {\n      <sky-status-indicator\n        class=\"sky-vertical-tab-heading-error\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      />\n    }\n    @if (isMobile && showTabRightArrow) {\n      <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n    }\n  </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n  <div\n    #tabContentPane\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
+        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { active: [{
                 type: Input
@@ -707,9 +570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }], tabContent: [{
                 type: ViewChild,
                 args: ['tabContentWrapper']
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 class SkyVerticalTabsetGroupComponent {
@@ -831,7 +691,7 @@ class SkyVerticalTabsetGroupComponent {
         this.#adapterService.focusButton(this.groupHeadingButton);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], 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-active sky-font-emphasized': isActive(),\n      'sky-vertical-tabset-group-header-sub-open': open,\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled\n    }\"\n  >\n    <button\n      #groupHeadingButton\n      class=\"sky-padding-even-default sky-vertical-tabset-button\"\n      role=\"tab\"\n      type=\"button\"\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-disabled]=\"disabled || undefined\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      [id]=\"groupId\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-button-disabled': disabled\n      }\"\n      [tabIndex]=\"-1\"\n      (click)=\"toggleMenuOpen()\"\n      (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n      (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      />\n    </button>\n  </div>\n  <div\n    #groupContent\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupId\"\n    [@.disabled]=\"animationDisabled\"\n    [@skyAnimationSlide]=\"slideDirection\"\n    (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n  >\n    <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i8.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], 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-active sky-font-emphasized': isActive(),\n      'sky-vertical-tabset-group-header-sub-open': open,\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled\n    }\"\n  >\n    <button\n      #groupHeadingButton\n      class=\"sky-padding-even-default sky-vertical-tabset-button\"\n      role=\"tab\"\n      type=\"button\"\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-disabled]=\"disabled || undefined\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      [id]=\"groupId\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-button-disabled': disabled\n      }\"\n      [tabIndex]=\"-1\"\n      (click)=\"toggleMenuOpen()\"\n      (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n      (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      />\n    </button>\n  </div>\n  <div\n    #groupContent\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupId\"\n    [@.disabled]=\"animationDisabled\"\n    [@skyAnimationSlide]=\"slideDirection\"\n    (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n  >\n    <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i7.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
             type: Component,
@@ -955,8 +815,8 @@ class SkyVerticalTabsetComponent {
     tabGroupsArrowUp() {
         this.adapterService.focusPreviousButton(this.tabGroups);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-vertical-tabset\"\n  [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n  (focus)=\"tabsetFocus()\"\n>\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  @if (maintainTabContent || tabService.tabsVisible()) {\n    <div\n      #groupContainerWrapper\n      class=\"sky-vertical-tabset-group-container\"\n      [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n      [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n      (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n      (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n      (focusin)=\"tabGroupsFocusIn()\"\n      (focusout)=\"tabGroupsFocusOut()\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    >\n      <div #skySideContent></div>\n      @if (!tabService.tabsVisible()) {\n        <button\n          class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n          type=\"button\"\n          (click)=\"tabService.showTabs()\"\n        >\n          <sky-icon icon=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\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)>:host .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-vertical-tabset\"\n  [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n  (focus)=\"tabsetFocus()\"\n>\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  @if (maintainTabContent || tabService.tabsVisible()) {\n    <div\n      #groupContainerWrapper\n      class=\"sky-vertical-tabset-group-container\"\n      [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n      [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n      (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n      (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n      (focusin)=\"tabGroupsFocusIn()\"\n      (focusout)=\"tabGroupsFocusOut()\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    >\n      <div #skySideContent></div>\n      @if (!tabService.tabsVisible()) {\n        <button\n          class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n          type=\"button\"\n          (click)=\"tabService.showTabs()\"\n        >\n          <sky-icon icon=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\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)>:host .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
             trigger('tabGroupEnter', [
                 transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                     style({ transform: 'translate(-100%)' }),
@@ -987,7 +847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             ]),
                         ]),
                     ], template: "<div\n  class=\"sky-vertical-tabset\"\n  [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n  (focus)=\"tabsetFocus()\"\n>\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  @if (maintainTabContent || tabService.tabsVisible()) {\n    <div\n      #groupContainerWrapper\n      class=\"sky-vertical-tabset-group-container\"\n      [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n      [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n      (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n      (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n      (focusin)=\"tabGroupsFocusIn()\"\n      (focusout)=\"tabGroupsFocusOut()\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    >\n      <div #skySideContent></div>\n      @if (!tabService.tabsVisible()) {\n        <button\n          class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n          type=\"button\"\n          (click)=\"tabService.showTabs()\"\n        >\n          <sky-icon icon=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\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)>:host .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
+        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -1018,6 +878,7 @@ class SkyVerticalTabsetModule {
             SkyIconModule,
             SkyIdModule,
             SkyExpansionIndicatorModule,
+            SkyResponsiveHostDirective,
             SkyStatusIndicatorModule,
             SkyTabsResourcesModule,
             SkyThemeModule], exports: [SkyVerticalTabsetComponent,
@@ -1044,6 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SkyIconModule,
                         SkyIdModule,
                         SkyExpansionIndicatorModule,
+                        SkyResponsiveHostDirective,
                         SkyStatusIndicatorModule,
                         SkyTabsResourcesModule,
                         SkyThemeModule,
@@ -1128,7 +990,7 @@ class SkySectionedFormSectionComponent {
         this.#ngUnsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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 />\n</sky-vertical-tab>\n", styles: [".sky-tab-field-required:not(.sky-theme-modern *){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: var(--sky-padding-half)}:host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";content:\"*\"/\"\";color:var(--sky-override-required-color, var(--sky-color-text-danger));padding-left:var(--sky-override-required-space, var(--sky-space-gap-label-s))}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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 />\n</sky-vertical-tab>\n", styles: [".sky-tab-field-required:not(.sky-theme-modern *){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: var(--sky-padding-half)}:host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";content:\"*\"/\"\";color:var(--sky-override-required-color, var(--sky-color-text-danger));padding-left:var(--sky-override-required-space, var(--sky-space-gap-label-s))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
             type: Component,
@@ -1279,8 +1141,8 @@ class SkySectionedFormComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n      [@tabEnter]=\"tabService.animationTabsVisibleState\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    ></div>\n  }\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}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}: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}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}: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{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;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%;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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-15px}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) :host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(.sky-theme-modern) :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}.sky-theme-modern :host-context(sky-modal-content)>:host .sky-sectioned-form,.sky-theme-modern :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n      [@tabEnter]=\"tabService.animationTabsVisibleState\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    ></div>\n  }\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}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}: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}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}: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{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;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%;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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-15px}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) :host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(.sky-theme-modern) :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}.sky-theme-modern :host-context(sky-modal-content)>:host .sky-sectioned-form,.sky-theme-modern :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('tabEnter', [
                 transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
                     style({ transform: 'translate(-100%)' }),
@@ -1311,7 +1173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n      [@tabEnter]=\"tabService.animationTabsVisibleState\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n      [@contentEnter]=\"tabService.animationContentVisibleState\"\n    ></div>\n  }\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}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}: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}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}: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{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;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%;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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-15px}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) :host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(.sky-theme-modern) :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}.sky-theme-modern :host-context(sky-modal-content)>:host .sky-sectioned-form,.sky-theme-modern :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i1.SkyLogService }], propDecorators: { maintainSectionContent: [{
+        }], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i3.SkyLogService }], propDecorators: { maintainSectionContent: [{
                 type: Input
             }], messageStream: [{
                 type: Input
@@ -1670,7 +1532,7 @@ class SkyTabButtonComponent {
         this.#changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
@@ -1926,17 +1788,6 @@ class SkyTabComponent {
     get tabIndexChange() {
         return this.#tabIndexChange;
     }
-    set tabContentWrapper(tabContentWrapper) {
-        /* istanbul ignore else */
-        if (tabContentWrapper) {
-            this.#mediaQueryService.observe(tabContentWrapper, {
-                updateResponsiveClasses: true,
-            });
-        }
-        else {
-            this.#mediaQueryService.unobserve();
-        }
-    }
     #_active;
     #activeChange;
     #_permalinkValue;
@@ -1960,7 +1811,6 @@ class SkyTabComponent {
         this.showContent = false;
         this.#_active = false;
         this.#_layout = LAYOUT_DEFAULT;
-        this.#mediaQueryService = inject(SkyResizeObserverMediaQueryService);
         this.#changeDetector = changeDetector;
         this.#permalinkService = permalinkService;
         this.#tabsetService = tabsetService;
@@ -1972,7 +1822,6 @@ class SkyTabComponent {
         this.#tabIndexChange = new BehaviorSubject(undefined);
         this.#setPermalinkValueOrDefault();
     }
-    #mediaQueryService;
     ngOnChanges(changes) {
         if ((changes['disabled'] && !changes['disabled'].firstChange) ||
             (changes['tabHeading'] && !changes['tabHeading'].firstChange) ||
@@ -1988,7 +1837,6 @@ class SkyTabComponent {
         if (this.tabIndexValue !== undefined) {
             this.#tabsetService.unregisterTab(this.tabIndexValue);
         }
-        this.#mediaQueryService.unobserve();
     }
     init() {
         this.#_tabIndexValue = this.#tabsetService.registerTab(this.tabIndexValue);
@@ -2012,23 +1860,11 @@ class SkyTabComponent {
                 this.#permalinkService.urlify(this.tabHeading);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndexValue: "tabIndexValue", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, providers: [
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
-        ], viewQueries: [{ propertyName: "tabContentWrapper", first: true, predicate: ["tabContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #tabContentWrapper\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content />\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndexValue: "tabIndexValue", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, usesOnChanges: true, hostDirectives: [{ directive: i3.SkyResponsiveHostDirective }], ngImport: i0, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:block}:host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
-                    ], template: "<div\n  #tabContentWrapper\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content />\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:block}:host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
                 type: Input
             }], disabled: [{
@@ -2048,9 +1884,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['class']
             }], close: [{
                 type: Output
-            }], tabContentWrapper: [{
-                type: ViewChild,
-                args: ['tabContentWrapper']
             }] } });
 
 class SkyTabsetNavButtonDisabledPipe {
@@ -2198,13 +2031,13 @@ class SkyTabsetNavButtonComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "@if (isVisible) {\n  <button\n    class=\"sky-btn sky-margin-inline-sm\"\n    [attr.aria-controls]=\"ariaControls\"\n    [disabled]=\"\n      disabled\n        | skyTabsetNavButtonDisabled\n          : buttonType\n          : !!tabToSelect\n          : tabToSelect?.disabled\n    \"\n    [ngClass]=\"buttonClassName\"\n    [type]=\"type\"\n    (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n  >\n    {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n  </button>\n}\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "@if (isVisible) {\n  <button\n    class=\"sky-btn sky-margin-inline-sm\"\n    [attr.aria-controls]=\"ariaControls\"\n    [disabled]=\"\n      disabled\n        | skyTabsetNavButtonDisabled\n          : buttonType\n          : !!tabToSelect\n          : tabToSelect?.disabled\n    \"\n    [ngClass]=\"buttonClassName\"\n    [type]=\"type\"\n    (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n  >\n    {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n  </button>\n}\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset-nav-button', template: "@if (isVisible) {\n  <button\n    class=\"sky-btn sky-margin-inline-sm\"\n    [attr.aria-controls]=\"ariaControls\"\n    [disabled]=\"\n      disabled\n        | skyTabsetNavButtonDisabled\n          : buttonType\n          : !!tabToSelect\n          : tabToSelect?.disabled\n    \"\n    [ngClass]=\"buttonClassName\"\n    [type]=\"type\"\n    (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n  >\n    {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n  </button>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1.SkyLogService }], propDecorators: { tabset: [{
+        }], ctorParameters: () => [{ type: i3.SkyLogService }], propDecorators: { tabset: [{
                 type: Input
             }], buttonType: [{
                 type: Input
@@ -2705,7 +2538,7 @@ class SkyTabsetComponent {
             SkyTabsetAdapterService,
             SkyTabsetPermalinkService,
             SkyTabsetService,
-        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
@@ -2747,6 +2580,7 @@ class SkyTabsModule {
             SkyTabsetComponent,
             SkyTabsetNavButtonComponent,
             SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
+            SkyResponsiveHostDirective,
             SkyDropdownModule,
             SkyIconModule,
             SkyIdModule,
@@ -2771,6 +2605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ],
                     imports: [
                         CommonModule,
+                        SkyResponsiveHostDirective,
                         SkyDropdownModule,
                         SkyIconModule,
                         SkyIdModule,