@skyux/tabs 14.6.0 → 14.6.2

package/fesm2022/skyux-tabs.mjs

@@ -1,22 +1,22 @@
-import * as i4 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, inject, DOCUMENT, ViewChild, Input, Optional, ChangeDetectionStrategy, Component, ContentChildren, input, EventEmitter, signal, computed, Output, afterNextRender, ViewEncapsulation, HostBinding, Pipe } from '@angular/core';
+import { NgModule, Injectable, inject, DOCUMENT, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, ContentChildren, input, EventEmitter, signal, computed, Output, afterNextRender, ElementRef, ViewEncapsulation, HostBinding, Pipe } from '@angular/core';
 import { SkyCheckboxModule } from '@skyux/forms';
-import * as i6$1 from '@skyux/theme';
+import * as i4$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i3 from '@skyux/core';
-import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLayoutHostService } from '@skyux/core';
-import * as i6 from '@skyux/icon';
+import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLogService, SkyLayoutHostService } from '@skyux/core';
+import * as i2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i7 from '@skyux/indicators';
+import * as i4 from '@skyux/indicators';
 import { SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i3$1 from '@skyux/i18n';
+import * as i5 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import { Subject, BehaviorSubject, ReplaySubject, combineLatest, race } from 'rxjs';
+import { BehaviorSubject, Subject, ReplaySubject, combineLatest, race } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
-import * as i5 from '@skyux/popovers';
+import * as i2$1 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -80,18 +80,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 
 /**
+ * Tracks the element IDs for all tabs within a tablist.
  * @internal
  */
-class SkyVerticalTabsetGroupService {
+class SkyTabIdService {
+    get ids() {
+        return this.#idsObs;
+    }
+    #ids;
+    #ids$;
+    #idsObs;
     constructor() {
-        this.messageStream = new Subject();
+        this.#ids = new Map();
+        this.#ids$ = new BehaviorSubject([]);
+        this.#idsObs = this.#ids$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService }); }
+    /**
+     * Associates a tab's ID with its parent tablist.
+     * @param {string} id A unique ID for the tab's registration.
+     * @param {string} elementId The ID applied to the tab's element.
+     */
+    register(id, elementId) {
+        if (!this.#ids.has(id) || this.#ids.get(id) !== elementId) {
+            this.#ids.set(id, elementId);
+            this.#emitIds();
+        }
+    }
+    /**
+     * Disassociates a tab's ID with its parent tablist.
+     * @param {string} id The ID used to register the tab.
+     */
+    unregister(id) {
+        if (this.#ids.has(id)) {
+            this.#ids.delete(id);
+            this.#emitIds();
+        }
+    }
+    #emitIds() {
+        this.#ids$.next(Array.from(this.#ids.values()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 const VERTICAL_TABSET_BUTTON_SELECTOR = '.sky-vertical-tabset-button';
 const VERTICAL_TABSET_BUTTON_DISABLED_SELECTOR = `${VERTICAL_TABSET_BUTTON_SELECTOR}-disabled`;
@@ -157,6 +190,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }] });
 
+/**
+ * @internal
+ */
+class SkyVerticalTabsetGroupService {
+    constructor() {
+        this.messageStream = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @internal
  */
@@ -345,53 +392,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-/**
- * Tracks the element IDs for all tabs within a tablist.
- * @internal
- */
-class SkyTabIdService {
-    get ids() {
-        return this.#idsObs;
-    }
-    #ids;
-    #ids$;
-    #idsObs;
-    constructor() {
-        this.#ids = new Map();
-        this.#ids$ = new BehaviorSubject([]);
-        this.#idsObs = this.#ids$.asObservable();
-    }
-    /**
-     * Associates a tab's ID with its parent tablist.
-     * @param {string} id A unique ID for the tab's registration.
-     * @param {string} elementId The ID applied to the tab's element.
-     */
-    register(id, elementId) {
-        if (!this.#ids.has(id) || this.#ids.get(id) !== elementId) {
-            this.#ids.set(id, elementId);
-            this.#emitIds();
-        }
-    }
-    /**
-     * Disassociates a tab's ID with its parent tablist.
-     * @param {string} id The ID used to register the tab.
-     */
-    unregister(id) {
-        if (this.#ids.has(id)) {
-            this.#ids.delete(id);
-            this.#emitIds();
-        }
-    }
-    #emitIds() {
-        this.#ids$.next(Array.from(this.#ids.values()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabIdService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 let nextId$2 = 0;
 class SkyVerticalTabComponent {
     /**
@@ -463,7 +463,7 @@ class SkyVerticalTabComponent {
     #changeRef;
     #tabsetService;
     #tabIdSvc;
-    constructor(adapterService, changeRef, tabsetService, tabIdSvc) {
+    constructor() {
         this.#_active = false;
         /**
          * Whether to disable the tab.
@@ -487,10 +487,10 @@ class SkyVerticalTabComponent {
         this.#_contentRendered = false;
         this.#mobileSubscription = new Subject();
         this.#ngUnsubscribe = new Subject();
-        this.#adapterService = adapterService;
-        this.#changeRef = changeRef;
-        this.#tabsetService = tabsetService;
-        this.#tabIdSvc = tabIdSvc;
+        this.#adapterService = inject(SkyVerticalTabsetAdapterService);
+        this.#changeRef = inject(ChangeDetectorRef);
+        this.#tabsetService = inject(SkyVerticalTabsetService);
+        this.#tabIdSvc = inject(SkyTabIdService, { optional: true });
         this.#tabIdOrDefault = this.#defaultTabId = `sky-vertical-tab-${++nextId$2}`;
         this.tabId = this.#defaultTabId;
     }
@@ -535,15 +535,13 @@ class SkyVerticalTabComponent {
     tabDeactivated() {
         this.#changeRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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: "21.2.0", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", 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]=\"\n    isMobile ? undefined : ariaControls || tabContentPane.id\n  \"\n  [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n  [attr.aria-selected]=\"isMobile ? undefined : 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  }\"\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\n      class=\"sky-vertical-tab-heading\"\n      [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n    >\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\" iconName=\"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:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", 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]=\"\n    isMobile ? undefined : ariaControls || tabContentPane.id\n  \"\n  [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n  [attr.aria-selected]=\"isMobile ? undefined : 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  }\"\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\n      class=\"sky-vertical-tab-heading\"\n      [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n    >\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\" iconName=\"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:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n  #tabButton\n  class=\"sky-vertical-tab sky-vertical-tabset-button\"\n  [attr.aria-controls]=\"\n    isMobile ? undefined : ariaControls || tabContentPane.id\n  \"\n  [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n  [attr.aria-selected]=\"isMobile ? undefined : 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  }\"\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\n      class=\"sky-vertical-tab-heading\"\n      [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n    >\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\" iconName=\"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:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { active: [{
+        }], ctorParameters: () => [], propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
                 type: Input
@@ -603,16 +601,16 @@ class SkyVerticalTabsetGroupComponent {
     #groupService;
     #_disabled;
     #_open;
-    constructor(tabService, changeRef) {
+    constructor() {
         this.slideDirection = 'up';
         this.#ngUnsubscribe = new Subject();
+        this.#tabService = inject(SkyVerticalTabsetService);
+        this.#changeRef = inject(ChangeDetectorRef);
         this.#adapterService = inject(SkyVerticalTabsetAdapterService);
         this.#idService = inject(SkyIdService);
         this.#tabIdService = inject(SkyTabIdService);
         this.#groupService = inject(SkyVerticalTabsetGroupService);
         this.#_open = false;
-        this.#tabService = tabService;
-        this.#changeRef = changeRef;
         this.groupId = this.#idService.generateId();
         this.#groupService.messageStream.subscribe((message) => {
             switch (message.messageType) {
@@ -682,13 +680,13 @@ class SkyVerticalTabsetGroupComponent {
     #focusButton() {
         this.#adapterService.focusButton(this.groupHeadingButton);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyVerticalTabsetGroupComponent, isStandalone: false, 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': isActive(),\n      'sky-vertical-tabset-group-header-sub-open': open,\n      'sky-font-deemphasized': disabled\n    }\"\n  >\n    <button\n      #groupHeadingButton\n      class=\"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  <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n    <div\n      #groupContent\n      class=\"sky-vertical-tabset-group-content\"\n      skyId\n      [attr.labelledby]=\"groupId\"\n    >\n      <ng-content />\n    </div>\n  </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\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"] }, { kind: "component", type: i3._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyVerticalTabsetGroupComponent, isStandalone: false, 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': isActive(),\n      'sky-vertical-tabset-group-header-sub-open': open,\n      'sky-font-deemphasized': disabled\n    }\"\n  >\n    <button\n      #groupHeadingButton\n      class=\"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  <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n    <div\n      #groupContent\n      class=\"sky-vertical-tabset-group-content\"\n      skyId\n      [attr.labelledby]=\"groupId\"\n    >\n      <ng-content />\n    </div>\n  </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i4.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }, { kind: "component", type: i3._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyVerticalTabsetGroupService], standalone: false, 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': isActive(),\n      'sky-vertical-tabset-group-header-sub-open': open,\n      'sky-font-deemphasized': disabled\n    }\"\n  >\n    <button\n      #groupHeadingButton\n      class=\"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  <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n    <div\n      #groupContent\n      class=\"sky-vertical-tabset-group-content\"\n      skyId\n      [attr.labelledby]=\"groupId\"\n    >\n      <ng-content />\n    </div>\n  </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], groupHeading: [{
                 type: Input
@@ -708,30 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 const DEFAULT_TAB_WIDTH$1 = '25%';
 class SkyVerticalTabsetComponent {
-    /**
-     * The ARIA role for the vertical tabset
-     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-     * by indicating how the tabset functions and what it controls. For information about how
-     * an ARIA role indicates what an item represents on a web page, see the
-     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
-     * @default "tablist"
-     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
-     * In the next major version, this property will be automatically set to `tablist`.
-     */
-    get ariaRole() {
-        return this.#_ariaRole;
-    }
-    set ariaRole(value) {
-        this.#_ariaRole = value ?? 'tablist';
-    }
-    #ngUnsubscribe;
-    #_ariaRole;
-    #resources;
-    #changeRef;
-    constructor(adapterService, tabService, resources, changeRef, tabIdSvc) {
-        this.adapterService = adapterService;
-        this.tabService = tabService;
-        this.tabIdSvc = tabIdSvc;
+    constructor() {
         /**
          * Whether the vertical tabset loads tab content during initialization so that it
          * displays content without moving around elements in the content container.
@@ -754,11 +729,34 @@ class SkyVerticalTabsetComponent {
         this.tablistHasFocus = false;
         this.#ngUnsubscribe = new Subject();
         this.#_ariaRole = 'tablist';
+        this.#resources = inject(SkyLibResourcesService);
+        this.#changeRef = inject(ChangeDetectorRef);
+        this.adapterService = inject(SkyVerticalTabsetAdapterService);
+        this.tabService = inject(SkyVerticalTabsetService);
+        this.tabIdSvc = inject(SkyTabIdService);
         this.tabGroupContainerFlexBasis = computed(() => (this.isMobile() ? undefined : this.tabWidth()), ...(ngDevMode ? [{ debugName: "tabGroupContainerFlexBasis" }] : []));
         this.tabGroupContainerMaxWidth = computed(() => (this.isMobile() ? undefined : DEFAULT_TAB_WIDTH$1), ...(ngDevMode ? [{ debugName: "tabGroupContainerMaxWidth" }] : []));
-        this.#resources = resources;
-        this.#changeRef = changeRef;
     }
+    /**
+     * The ARIA role for the vertical tabset
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tabset functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
+     * @default "tablist"
+     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
+     * In the next major version, this property will be automatically set to `tablist`.
+     */
+    get ariaRole() {
+        return this.#_ariaRole;
+    }
+    set ariaRole(value) {
+        this.#_ariaRole = value ?? 'tablist';
+    }
+    #ngUnsubscribe;
+    #_ariaRole;
+    #resources;
+    #changeRef;
     ngOnInit() {
         this.tabService.maintainTabContent = this.maintainTabContent;
         this.tabService.indexChanged
@@ -818,13 +816,13 @@ class SkyVerticalTabsetComponent {
     tabGroupsArrowUp() {
         this.adapterService.focusPreviousButton(this.tabGroups);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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: "21.2.0", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: { classPropertyName: "showTabsText", publicName: "showTabsText", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: false, isRequired: false, transformFunction: null }, maintainTabContent: { classPropertyName: "maintainTabContent", publicName: "maintainTabContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null } }, 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    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-orientation]=\"isMobile() ? undefined : 'vertical'\"\n    [attr.aria-owns]=\"\n      isMobile() ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n    \"\n    [attr.role]=\"isMobile() ? undefined : ariaRole\"\n  ></span>\n  <div\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    skyTransitionEndHandler\n    transitionPropertyToTrack=\"transform\"\n    [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n    [style.max-width]=\"tabGroupContainerMaxWidth()\"\n    [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n    [transitionTrigger]=\"tabService.tabsVisible()\"\n    (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n    (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n    (focusin)=\"trapFocusInTablist()\"\n    (focusout)=\"resetTabIndex()\"\n    (transitionEnd)=\"tabsetFocus()\"\n  >\n    <ng-content />\n  </div>\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      (focusin)=\"resetTabIndex()\"\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 iconName=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{background-color:var(--sky-color-background-container-dimmed);overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media(min-width:768px){:host .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: { classPropertyName: "showTabsText", publicName: "showTabsText", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: false, isRequired: false, transformFunction: null }, maintainTabContent: { classPropertyName: "maintainTabContent", publicName: "maintainTabContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null } }, 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    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-orientation]=\"isMobile() ? undefined : 'vertical'\"\n    [attr.aria-owns]=\"\n      isMobile() ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n    \"\n    [attr.role]=\"isMobile() ? undefined : ariaRole\"\n  ></span>\n  <div\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    skyTransitionEndHandler\n    transitionPropertyToTrack=\"transform\"\n    [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n    [style.max-width]=\"tabGroupContainerMaxWidth()\"\n    [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n    [transitionTrigger]=\"tabService.tabsVisible()\"\n    (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n    (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n    (focusin)=\"trapFocusInTablist()\"\n    (focusout)=\"resetTabIndex()\"\n    (transitionEnd)=\"tabsetFocus()\"\n  >\n    <ng-content />\n  </div>\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      (focusin)=\"resetTabIndex()\"\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 iconName=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{background-color:var(--sky-color-background-container-dimmed);overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media(min-width:768px){:host .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-orientation]=\"isMobile() ? undefined : 'vertical'\"\n    [attr.aria-owns]=\"\n      isMobile() ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n    \"\n    [attr.role]=\"isMobile() ? undefined : ariaRole\"\n  ></span>\n  <div\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    skyTransitionEndHandler\n    transitionPropertyToTrack=\"transform\"\n    [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n    [style.max-width]=\"tabGroupContainerMaxWidth()\"\n    [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n    [transitionTrigger]=\"tabService.tabsVisible()\"\n    (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n    (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n    (focusin)=\"trapFocusInTablist()\"\n    (focusout)=\"resetTabIndex()\"\n    (transitionEnd)=\"tabsetFocus()\"\n  >\n    <ng-content />\n  </div>\n  @if (maintainTabContent || tabService.contentVisible()) {\n    <div\n      #contentContainerWrapper\n      class=\"sky-vertical-tabset-content\"\n      [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n      [ngClass]=\"{\n        'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n      }\"\n      (focusin)=\"resetTabIndex()\"\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 iconName=\"chevron-left\" />\n          {{ showTabsText }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));flex-grow:0;flex-shrink:0}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{background-color:var(--sky-color-background-container-dimmed);overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media(min-width:768px){:host .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{flex:1 1 auto;margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
+        }], propDecorators: { showTabsText: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -938,11 +936,7 @@ let nextId$1 = 0;
  * Creates an individual form to display as a section within the sectioned form.
  */
 class SkySectionedFormSectionComponent {
-    #ngUnsubscribe;
-    #sectionedFormService;
-    #tabsetService;
-    #changeRef;
-    constructor(sectionedFormService, tabsetService, changeRef) {
+    constructor() {
         this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
         this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
         /**
@@ -951,10 +945,14 @@ class SkySectionedFormSectionComponent {
          */
         this.active = false;
         this.#ngUnsubscribe = new Subject();
-        this.#sectionedFormService = sectionedFormService;
-        this.#tabsetService = tabsetService;
-        this.#changeRef = changeRef;
+        this.#sectionedFormService = inject(SkySectionedFormService);
+        this.#tabsetService = inject(SkyVerticalTabsetService);
+        this.#changeRef = inject(ChangeDetectorRef);
     }
+    #ngUnsubscribe;
+    #sectionedFormService;
+    #tabsetService;
+    #changeRef;
     ngOnInit() {
         this.#changeRef.detectChanges();
         this.#tabsetService.switchingMobile.subscribe((mobile) => {
@@ -971,13 +969,13 @@ class SkySectionedFormSectionComponent {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySectionedFormSectionComponent, isStandalone: false, 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  [requiredIndicator]=\"fieldRequired\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content />\n</sky-vertical-tab>\n", dependencies: [{ kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], standalone: false, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [requiredIndicator]=\"fieldRequired\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content />\n</sky-vertical-tab>\n" }]
-        }], ctorParameters: () => [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
+        }], propDecorators: { heading: [{
                 type: Input
             }], itemCount: [{
                 type: Input
@@ -1015,8 +1013,7 @@ class SkySectionedFormComponent {
     #tabIdSvc;
     #logger;
     #_messageStream;
-    constructor(tabService, changeRef, tabIdSvc, logger) {
-        this.tabService = tabService;
+    constructor() {
         /**
          * Whether the sectioned form loads section content during initialization so that it
          * displays content without moving around elements in the content container.
@@ -1041,14 +1038,15 @@ class SkySectionedFormComponent {
         this.tabsVisibleChanged = new EventEmitter();
         this.ariaRole = 'tablist';
         this.#ngUnsubscribe = new Subject();
+        this.#changeRef = inject(ChangeDetectorRef);
+        this.#tabIdSvc = inject(SkyTabIdService);
+        this.#logger = inject(SkyLogService);
         this.#_messageStream = new Subject();
         this.animationEnabled = signal(false, ...(ngDevMode ? [{ debugName: "animationEnabled" }] : []));
         this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
+        this.tabService = inject(SkyVerticalTabsetService);
         this.tabsFlexBasis = computed(() => this.isMobile() ? undefined : this.tabWidth(), ...(ngDevMode ? [{ debugName: "tabsFlexBasis" }] : []));
         this.tabsMaxWidth = computed(() => this.isMobile() ? undefined : DEFAULT_TAB_WIDTH, ...(ngDevMode ? [{ debugName: "tabsMaxWidth" }] : []));
-        this.#changeRef = changeRef;
-        this.#tabIdSvc = tabIdSvc;
-        this.#logger = logger;
         // Enable animations after the first render.
         afterNextRender(() => {
             this.animationEnabled.set(true);
@@ -1145,13 +1143,13 @@ class SkySectionedFormComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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: "21.2.0", type: SkySectionedFormComponent, isStandalone: false, selector: "sky-sectioned-form", inputs: { maintainSectionContent: { classPropertyName: "maintainSectionContent", publicName: "maintainSectionContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null }, messageStream: { classPropertyName: "messageStream", publicName: "messageStream", isSignal: false, isRequired: false, transformFunction: null } }, 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    [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n    [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabService.tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [style.flex-basis]=\"tabsFlexBasis()\"\n      [style.max-width]=\"tabsMaxWidth()\"\n      [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n    ></div>\n  }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@media(min-width:768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex:1 1 auto;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-grow:0;flex-shrink:0;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:1 1 auto;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-grow:0;flex-shrink:0;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:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySectionedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySectionedFormComponent, isStandalone: false, selector: "sky-sectioned-form", inputs: { maintainSectionContent: { classPropertyName: "maintainSectionContent", publicName: "maintainSectionContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null }, messageStream: { classPropertyName: "messageStream", publicName: "messageStream", isSignal: false, isRequired: false, transformFunction: null } }, 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    [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n    [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabService.tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [style.flex-basis]=\"tabsFlexBasis()\"\n      [style.max-width]=\"tabsMaxWidth()\"\n      [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n    ></div>\n  }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@media(min-width:768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex:1 1 auto;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-grow:0;flex-shrink:0;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:1 1 auto;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-grow:0;flex-shrink:0;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:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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    [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n    [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n    [attr.role]=\"ariaRole\"\n  ></span>\n  @if (maintainSectionContent || tabService.tabsVisible()) {\n    <div\n      class=\"sky-sectioned-form-tabs\"\n      [style.flex-basis]=\"tabsFlexBasis()\"\n      [style.max-width]=\"tabsMaxWidth()\"\n      [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n        'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n      }\"\n    >\n      <ng-content />\n    </div>\n  }\n  @if (maintainSectionContent || tabService.contentVisible()) {\n    <div\n      #skySectionSideContent\n      class=\"sky-sectioned-form-content\"\n      [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n      [ngClass]=\"{\n        'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n      }\"\n    ></div>\n  }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@media(min-width:768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex:1 1 auto;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-grow:0;flex-shrink:0;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:1 1 auto;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-grow:0;flex-shrink:0;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:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i3.SkyLogService }], propDecorators: { maintainSectionContent: [{
+        }], ctorParameters: () => [], propDecorators: { maintainSectionContent: [{
                 type: Input
             }], tabWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabWidth", required: false }] }], messageStream: [{
                 type: Input
@@ -1398,6 +1396,18 @@ const DEFAULT_DISABLED = false;
  * @internal
  */
 class SkyTabButtonComponent {
+    constructor() {
+        this.buttonClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+        this.closeBtnTabIndex = '-1';
+        this.#_isActive = false;
+        this.#_isDisabled = DEFAULT_DISABLED;
+        this.#adapterService = inject(SkyTabButtonAdapterService);
+        this.#changeDetectorRef = inject(ChangeDetectorRef);
+        this.#elementRef = inject(ElementRef);
+        this.#tabsetService = inject(SkyTabsetService);
+        this.#ngUnsubscribe = new Subject();
+    }
     get active() {
         return this.#_isActive;
     }
@@ -1419,18 +1429,6 @@ class SkyTabButtonComponent {
         this.#_tabStyle = style;
         this.#updateWizardStepState();
     }
-    constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
-        this.buttonClick = new EventEmitter();
-        this.closeClick = new EventEmitter();
-        this.closeBtnTabIndex = '-1';
-        this.#_isActive = false;
-        this.#_isDisabled = DEFAULT_DISABLED;
-        this.#ngUnsubscribe = new Subject();
-        this.#adapterService = adapterService;
-        this.#changeDetectorRef = changeDetectorRef;
-        this.#elementRef = elementRef;
-        this.#tabsetService = tabsetService;
-    }
     #_isActive;
     #_isDisabled;
     #_tabStyle;
@@ -1509,13 +1507,13 @@ class SkyTabButtonComponent {
         }
         this.#changeDetectorRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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: "21.2.0", type: SkyTabButtonComponent, isStandalone: false, 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          [skyThemeClass]=\"{\n            'sky-btn sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon iconName=\"close\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position: absolute;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px;--sky-override-tab-btn-wizard-disabled-background-color: var( --sky-background-color-neutral-light );--sky-override-tab-btn-wizard-disabled-border-color: #e2e3e4}.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:var(--sky-override-tab-close-position, static);top:var(--sky-override-tab-close-position-top, none);right:var(--sky-override-tab-close-position-right, none);padding:var(--sky-override-tab-close-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-btn-tab-wrapper .sky-btn-tab-close.sky-btn-icon-borderless{display:inline;height:auto;width:auto}.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, var(--sky-comp-tab-horizontal-space-inset-right))}.sky-btn-tab-wrapper a.sky-btn-tab-wizard.sky-btn-tab-disabled{background-color:var(--sky-override-tab-btn-wizard-disabled-background-color, var(--sky-color-background-tab-wizard-disabled));border-color:var(--sky-override-tab-btn-wizard-disabled-border-color, var(--sky-color-border-tab-wizard-disabled))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTabButtonComponent, isStandalone: false, 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          [skyThemeClass]=\"{\n            'sky-btn sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon iconName=\"close\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position: absolute;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px;--sky-override-tab-btn-wizard-disabled-background-color: var( --sky-background-color-neutral-light );--sky-override-tab-btn-wizard-disabled-border-color: #e2e3e4}.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:var(--sky-override-tab-close-position, static);top:var(--sky-override-tab-close-position-top, none);right:var(--sky-override-tab-close-position-right, none);padding:var(--sky-override-tab-close-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-btn-tab-wrapper .sky-btn-tab-close.sky-btn-icon-borderless{display:inline;height:auto;width:auto}.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, var(--sky-comp-tab-horizontal-space-inset-right))}.sky-btn-tab-wrapper a.sky-btn-tab-wizard.sky-btn-tab-disabled{background-color:var(--sky-override-tab-btn-wizard-disabled-background-color, var(--sky-color-background-tab-wizard-disabled));border-color:var(--sky-override-tab-btn-wizard-disabled-border-color, var(--sky-color-border-tab-wizard-disabled))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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          [skyThemeClass]=\"{\n            'sky-btn sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon iconName=\"close\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position: absolute;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px;--sky-override-tab-btn-wizard-disabled-background-color: var( --sky-background-color-neutral-light );--sky-override-tab-btn-wizard-disabled-border-color: #e2e3e4}.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:var(--sky-override-tab-close-position, static);top:var(--sky-override-tab-close-position-top, none);right:var(--sky-override-tab-close-position-right, none);padding:var(--sky-override-tab-close-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-btn-tab-wrapper .sky-btn-tab-close.sky-btn-icon-borderless{display:inline;height:auto;width:auto}.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, var(--sky-comp-tab-horizontal-space-inset-right))}.sky-btn-tab-wrapper a.sky-btn-tab-wizard.sky-btn-tab-disabled{background-color:var(--sky-override-tab-btn-wizard-disabled-background-color, var(--sky-color-background-tab-wizard-disabled));border-color:var(--sky-override-tab-btn-wizard-disabled-border-color, var(--sky-color-border-tab-wizard-disabled))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
+        }], propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
                 type: Input
@@ -1773,7 +1771,7 @@ class SkyTabComponent {
     #changeDetector;
     #permalinkService;
     #tabsetService;
-    constructor(changeDetector, permalinkService, tabsetService) {
+    constructor() {
         this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
         /**
          * Fires when users click the button to close the tab.
@@ -1785,9 +1783,9 @@ class SkyTabComponent {
         this.showContent = false;
         this.#_active = false;
         this.#_layout = LAYOUT_DEFAULT;
-        this.#changeDetector = changeDetector;
-        this.#permalinkService = permalinkService;
-        this.#tabsetService = tabsetService;
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#permalinkService = inject(SkyTabsetPermalinkService);
+        this.#tabsetService = inject(SkyTabsetService);
         const id = nextId++;
         this.tabPanelId = `sky-tab-${id}`;
         this.tabButtonId = `${this.tabPanelId}-nav-btn`;
@@ -1833,13 +1831,13 @@ class SkyTabComponent {
             this.#permalinkService.urlify(this.permalinkValue) ||
                 this.#permalinkService.urlify(this.tabHeading);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyTabComponent, isStandalone: false, 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}:host.sky-layout-host-fit,:host.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.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: "21.2.0", ngImport: i0, type: SkyTabComponent, decorators: [{
             type: Component,
             args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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}:host.sky-layout-host-fit,:host.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.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: [{
+        }], ctorParameters: () => [], propDecorators: { active: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1888,6 +1886,12 @@ const buttonTypeFinish = 'finish';
  * Creates a button to navigate between tabs in a tabset when `tabStyle` is `"wizard"`.
  */
 class SkyTabsetNavButtonComponent {
+    constructor() {
+        this.isVisible = false;
+        this.type = 'submit';
+        this.#logger = inject(SkyLogService);
+        this.#ngUnsubscribe = new Subject();
+    }
     /**
      * The tabset wizard component to associate with the nav button.
      * @required
@@ -1957,12 +1961,6 @@ class SkyTabsetNavButtonComponent {
     #logger;
     #tabCount;
     #ngUnsubscribe;
-    constructor(logger) {
-        this.isVisible = false;
-        this.type = 'submit';
-        this.#ngUnsubscribe = new Subject();
-        this.#logger = logger;
-    }
     ngOnDestroy() {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
@@ -2012,13 +2010,13 @@ class SkyTabsetNavButtonComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTabsetNavButtonComponent, isStandalone: false, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, host: { properties: { "attr.data-button-type": "this.buttonTypeData" } }, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTabsetNavButtonComponent, isStandalone: false, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, host: { properties: { "attr.data-button-type": "this.buttonTypeData" } }, 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset-nav-button', standalone: false, 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: i3.SkyLogService }], propDecorators: { tabset: [{
+        }], propDecorators: { tabset: [{
                 type: Input
             }], buttonType: [{
                 type: Input
@@ -2097,6 +2095,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [] });
 
 class SkyTabsetComponent {
+    constructor() {
+        /**
+         * Fires when the active tab changes. This event emits the index of the active tab.
+         */
+        this.activeChange = new EventEmitter();
+        /**
+         * Fires when users click the button to add a new tab.
+         * The new tab button is added to the tab area when you specify a listener for this event.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.newTab = new EventEmitter();
+        /**
+         * Fires when users click the button to open a tab.
+         * The open tab button is added to the tab area when you specify a listener for this event.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.openTab = new EventEmitter();
+        /**
+         * Fires when any tab's `tabIndex` value changes.
+         * This event only applies when `tabStyle` is `"tabs"`.
+         */
+        this.tabIndexesChange = new EventEmitter();
+        this.cssClass = 'sky-tabset-layout-none';
+        this.dropdownTriggerButtonText = '';
+        this.tabButtons = [];
+        this.#ngUnsubscribe = new Subject();
+        this.#tabComponentsChangeUnsubscribe = new Subject();
+        this.#tabComponentsStateChangeUnsubscribe = new Subject();
+        this.#_permalinkId = '';
+        this.#_tabDisplayMode = 'tabs';
+        this.#_tabStyle = 'tabs';
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#elementRef = inject(ElementRef);
+        this.#adapterService = inject(SkyTabsetAdapterService);
+        this.#permalinkService = inject(SkyTabsetPermalinkService);
+        this.#tabsetService = inject(SkyTabsetService);
+        this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
+    }
     /**
      * Activates a tab by its `tabIndex` property.
      */
@@ -2193,44 +2229,6 @@ class SkyTabsetComponent {
     #permalinkService;
     #tabsetService;
     #layoutHostSvc;
-    constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
-        /**
-         * Fires when the active tab changes. This event emits the index of the active tab.
-         */
-        this.activeChange = new EventEmitter();
-        /**
-         * Fires when users click the button to add a new tab.
-         * The new tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.newTab = new EventEmitter();
-        /**
-         * Fires when users click the button to open a tab.
-         * The open tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.openTab = new EventEmitter();
-        /**
-         * Fires when any tab's `tabIndex` value changes.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.tabIndexesChange = new EventEmitter();
-        this.cssClass = 'sky-tabset-layout-none';
-        this.dropdownTriggerButtonText = '';
-        this.tabButtons = [];
-        this.#ngUnsubscribe = new Subject();
-        this.#tabComponentsChangeUnsubscribe = new Subject();
-        this.#tabComponentsStateChangeUnsubscribe = new Subject();
-        this.#_permalinkId = '';
-        this.#_tabDisplayMode = 'tabs';
-        this.#_tabStyle = 'tabs';
-        this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
-        this.#changeDetector = changeDetector;
-        this.#elementRef = elementRef;
-        this.#adapterService = adapterService;
-        this.#permalinkService = permalinkService;
-        this.#tabsetService = tabsetService;
-    }
     ngAfterViewInit() {
         this.#initTabComponents();
         const initialTabIndex = this.#getInitialTabIndex();
@@ -2520,12 +2518,12 @@ class SkyTabsetComponent {
             this.activeChange.emit(activeIndex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTabsetComponent, isStandalone: false, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, host: { properties: { "attr.data-tab-style": "this.dataTabStyle", "class": "this.cssClass" } }, providers: [
             SkyTabsetAdapterService,
             SkyTabsetPermalinkService,
             SkyTabsetService,
-        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-icon-button-padding: 6px 12px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-modal-margin: 0 0 20px}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-layout-fit sky-tab:has(>div.sky-tab[hidden]){display:contents}.sky-tabset{--sky-tabset-margin: 0;align-items:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i6$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 }); }
+        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-icon-button-padding: 6px 12px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-modal-margin: 0 0 20px}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-layout-fit sky-tab:has(>div.sky-tab[hidden]){display:contents}.sky-tabset{--sky-tabset-margin: 0;align-items:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i4$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: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
@@ -2534,7 +2532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-icon-button-padding: 6px 12px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-modal-margin: 0 0 20px}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-layout-fit sky-tab:has(>div.sky-tab[hidden]){display:contents}.sky-tabset{--sky-tabset-margin: 0;align-items:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
+        }], propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input