@skyux/tabs 11.22.0 → 11.24.0

package/esm2022/lib/modules/tabs/tab-button.component.mjs

@@ -126,11 +126,11 @@ export class SkyTabButtonComponent {
         this.#changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1.SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
+            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyTabsetService }], propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{

package/esm2022/lib/modules/tabs/tabset.component.mjs

@@ -442,7 +442,7 @@ export class SkyTabsetComponent {
             SkyTabsetAdapterService,
             SkyTabsetPermalinkService,
             SkyTabsetService,
-        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i8.SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i9.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-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-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-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i8.SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i9.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
@@ -450,7 +450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SkyTabsetAdapterService,
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-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-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-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyTabsetAdapterService }, { type: i2.SkyTabsetPermalinkService }, { type: i3.SkyTabsetService }], propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{

package/esm2022/testing/legacy/tabs/tab-fixture-tab.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWZpeHR1cmUtdGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3RhYnMvdGVzdGluZy9zcmMvbGVnYWN5L3RhYnMvdGFiLWZpeHR1cmUtdGFiLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFByb3BlcnRpZXMgb2YgYSBTS1kgVVggdGFiLlxuICogQGludGVybmFsXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2t5VGFic2V0Rml4dHVyZVRhYiB7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSB0YWIgaXMgc2VsZWN0ZWQuXG4gICAqL1xuICBhY3RpdmU6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHRhYiBpcyBkaXNhYmxlZC5cbiAgICovXG4gIGRpc2FibGVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUaGUgcGVybWFsaW5rIHZhbHVlIHNwZWNpZmllZCBmb3IgdGhlIHRhYi5cbiAgICovXG4gIHBlcm1hbGlua1ZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBjb3VudCBkaXNwbGF5ZWQgaW4gdGhlIHRhYiBoZWFkZXIuXG4gICAqL1xuICB0YWJIZWFkZXJDb3VudDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgdGV4dCBkaXNwbGF5ZWQgaW4gdGhlIHRhYiBoZWFkZXIuXG4gICAqL1xuICB0YWJIZWFkaW5nOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG59XG4iXX0=

package/esm2022/testing/legacy/tabs/tabset-fixture.mjs

@@ -0,0 +1,129 @@
+import { By } from '@angular/platform-browser';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+/**
+ * Allows interaction with a SKY UX tabset component.
+ * @internal
+ */
+export class SkyTabsetFixture {
+    /**
+     * The tabset component's ARIA label.
+     */
+    get ariaLabel() {
+        const tabsetEl = this.#getTabsetEl();
+        return tabsetEl.getAttribute('aria-label') || undefined;
+    }
+    /**
+     * The tabset component's ARIA labelled by attribute.
+     */
+    get ariaLabelledBy() {
+        const tabsetEl = this.#getTabsetEl();
+        return tabsetEl.getAttribute('aria-labelledby') || undefined;
+    }
+    /**
+     * The index of the currently selected tab.
+     */
+    get activeTabIndex() {
+        const tabLinkEls = this.#getTabLinkEls();
+        for (let i = 0, n = tabLinkEls.length; i < n; i++) {
+            if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {
+                return i;
+            }
+        }
+        /* safety check */
+        /* istanbul ignore next */
+        return -1;
+    }
+    #debugEl;
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');
+    }
+    /**
+     * Retrieves information about the tab at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    getTab(tabIndex) {
+        const tabLinkEl = this.#getTabLinkEl(tabIndex);
+        const active = this.activeTabIndex === tabIndex;
+        const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
+        const tabHeading = this.#getTextContent(tabLinkEl.querySelector('.sky-tab-heading span')?.childNodes[0]);
+        const tabHeaderCount = this.#getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));
+        let permalinkValue;
+        if (tabLinkEl.href) {
+            const permalink = tabLinkEl.href.split('?')[1];
+            if (permalink) {
+                const permalinkParts = permalink.split('=');
+                permalinkValue = decodeURIComponent(permalinkParts[1]);
+            }
+        }
+        return {
+            active,
+            disabled,
+            permalinkValue,
+            tabHeaderCount,
+            tabHeading,
+        };
+    }
+    /**
+     * Clicks the tabset's "new" button.
+     */
+    async clickNewButton() {
+        await this.#clickButton('sky-tabset-btn-new');
+    }
+    /**
+     * Clicks the tabset's "open" button.
+     */
+    async clickOpenButton() {
+        await this.#clickButton('sky-tabset-btn-open');
+    }
+    /**
+     * Clicks the tab button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    async clickTab(tabIndex) {
+        const tabLinkEl = this.#getTabLinkEl(tabIndex);
+        tabLinkEl.click();
+        this.#fixture.detectChanges();
+        await this.#fixture.whenStable();
+    }
+    /**
+     * Click's the tab's close button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    async clickTabClose(tabIndex) {
+        const tabWrapperEl = this.#getTabsetEl().querySelectorAll(`.sky-tabset-tabs .sky-btn-tab-wrapper`)[tabIndex];
+        const closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close');
+        if (!closeBtnEl) {
+            throw new Error('The specified tab does not have a close button.');
+        }
+        closeBtnEl.click();
+        this.#fixture.detectChanges();
+        await this.#fixture.whenStable();
+    }
+    async #clickButton(buttonCls) {
+        const tabsetEl = this.#getTabsetEl();
+        const newButtonEl = tabsetEl.querySelector(`.sky-tabset-btns .${buttonCls}`);
+        newButtonEl.click();
+        this.#fixture.detectChanges();
+        await this.#fixture.whenStable();
+    }
+    #getTabsetEl() {
+        const tabsetEl = this.#debugEl.query(By.css('.sky-tabset')).nativeElement;
+        return tabsetEl;
+    }
+    #getTabLinkEls() {
+        return this.#getTabsetEl().querySelectorAll(`.sky-tabset-tabs .sky-btn-tab`);
+    }
+    #getTabLinkEl(tabIndex) {
+        const tabLinkEl = this.#getTabLinkEls().item(tabIndex);
+        if (!tabLinkEl) {
+            throw new Error(`There is no tab at index ${tabIndex}.`);
+        }
+        return tabLinkEl;
+    }
+    #getTextContent(el) {
+        return (el && el.textContent?.trim()) || undefined;
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LWZpeHR1cmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvdGFicy90ZXN0aW5nL3NyYy9sZWdhY3kvdGFicy90YWJzZXQtZml4dHVyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFJdkQ7OztHQUdHO0FBQ0gsTUFBTSxPQUFPLGdCQUFnQjtJQUMzQjs7T0FFRztJQUNILElBQVcsU0FBUztRQUNsQixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDckMsT0FBTyxRQUFRLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxJQUFJLFNBQVMsQ0FBQztJQUMxRCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFXLGNBQWM7UUFDdkIsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3JDLE9BQU8sUUFBUSxDQUFDLFlBQVksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLFNBQVMsQ0FBQztJQUMvRCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFXLGNBQWM7UUFDdkIsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBRXpDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUNsRCxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxFQUFFLENBQUM7Z0JBQ2xFLE9BQU8sQ0FBQyxDQUFDO1lBQ1gsQ0FBQztRQUNILENBQUM7UUFFRCxrQkFB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eyBEZWJ1Z0VsZW1lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbXBvbmVudEZpeHR1cmUgfSBmcm9tICdAYW5ndWxhci9jb3JlL3Rlc3RpbmcnO1xuaW1wb3J0IHsgQnkgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IFNreUFwcFRlc3RVdGlsaXR5IH0gZnJvbSAnQHNreXV4LXNkay90ZXN0aW5nJztcblxuaW1wb3J0IHsgU2t5VGFic2V0Rml4dHVyZVRhYiB9IGZyb20gJy4vdGFiLWZpeHR1cmUtdGFiJztcblxuLyoqXG4gKiBBbGxvd3MgaW50ZXJhY3Rpb24gd2l0aCBhIFNLWSBVWCB0YWJzZXQgY29tcG9uZW50LlxuICogQGludGVybmFsXG4gKi9cbmV4cG9ydCBjbGFzcyBTa3lUYWJzZXRGaXh0dXJlIHtcbiAgLyoqXG4gICAqIFRoZSB0YWJzZXQgY29tcG9uZW50J3MgQVJJQSBsYWJlbC5cbiAgICovXG4gIHB1YmxpYyBnZXQgYXJpYUxhYmVsKCk6IHN0cmluZyB8IHVuZGVmaW5lZCB7XG4gICAgY29uc3QgdGFic2V0RWwgPSB0aGlzLiNnZXRUYWJzZXRFbCgpO1xuICAgIHJldHVybiB0YWJzZXRFbC5nZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWwnKSB8fCB1bmRlZmluZWQ7XG4gIH1cblxuICAvKipcbiAgICogVGhlIHRhYnNldCBjb21wb25lbnQncyBBUklBIGxhYmVsbGVkIGJ5IGF0dHJpYnV0ZS5cbiAgICovXG4gIHB1YmxpYyBnZXQgYXJpYUxhYmVsbGVkQnkoKTogc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgICBjb25zdCB0YWJzZXRFbCA9IHRoaXMuI2dldFRhYnNldEVsKCk7XG4gICAgcmV0dXJuIHRhYnNldEVsLmdldEF0dHJpYnV0ZSgnYXJpYS1sYWJlbGxlZGJ5JykgfHwgdW5kZWZpbmVkO1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBpbmRleCBvZiB0aGUgY3VycmVudGx5IHNlbGVjdGVkIHRhYi5cbiAgICovXG4gIHB1YmxpYyBnZXQgYWN0aXZlVGFiSW5kZXgoKTogbnVtYmVyIHtcbiAgICBjb25zdCB0YWJMaW5rRWxzID0gdGhpcy4jZ2V0VGFiTGlua0VscygpO1xuXG4gICAgZm9yIChsZXQgaSA9IDAsIG4gPSB0YWJMaW5rRWxzLmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgICAgaWYgKHRhYkxpbmtFbHMuaXRlbShpKS5jbGFzc0xpc3QuY29udGFpbnMoJ3NreS1idG4tdGFiLXNlbGVjdGVkJykpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLyogc2FmZXR5IGNoZWNrICovXG4gICAgLyogaXN0YW5idWwgaWdub3JlIG5leHQgKi9cbiAgICByZXR1cm4gLTE7XG4gIH1cblxuICAjZGVidWdFbDogRGVidWdFbGVtZW50O1xuICAjZml4dHVyZTogQ29tcG9uZW50Rml4dHVyZTx1bmtub3duPjtcblxuICBjb25zdHJ1Y3RvcihmaXh0dXJlOiBDb21wb25lbnRGaXh0dXJlPHVua25vd24+LCBza3lUZXN0SWQ6IHN0cmluZykge1xuICAgIHRoaXMuI2ZpeHR1cmUgPSBmaXh0dXJlO1xuICAgIHRoaXMuI2RlYnVnRWwgPSBTa3lBcHBUZXN0VXRpbGl0eS5nZXREZWJ1Z0VsZW1lbnRCeVRlc3RJZChcbiAgICAgIGZpeHR1cmUsXG4gICAgICBza3lUZXN0SWQsXG4gICAgICAnc2t5LXRhYnNldCcsXG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZXRyaWV2ZXMgaW5mb3JtYXRpb24gYWJvdXQgdGhlIHRhYiBhdCB0aGUgc3BlY2lmaWVkIGluZGV4LlxuICAgKiBAcGFyYW0gdGFiSW5kZXggVGhlIGluZGV4IG9mIHRoZSB0YWIuXG4gICAqL1xuICBwdWJsaWMgZ2V0VGFiKHRhYkluZGV4OiBudW1iZXIpOiBTa3lUYWJzZXRGaXh0dXJlVGFiIHtcbiAgICBjb25zdCB0YWJMaW5rRWwgPSB0aGlzLiNnZXRUYWJMaW5rRWwodGFiSW5kZXgpO1xuXG4gICAgY29uc3QgYWN0aXZlID0gdGhpcy5hY3RpdmVUYWJJbmRleCA9PT0gdGFiSW5kZXg7XG4gICAgY29uc3QgZGlzYWJsZWQgPSB0YWJMaW5rRWwuY2xhc3NMaXN0LmNvbnRhaW5zKCdza3ktYnRuLXRhYi1kaXNhYmxlZCcpO1xuICAgIGNvbnN0IHRhYkhlYWRpbmcgPSB0aGlzLiNnZXRUZXh0Q29udGVudChcbiAgICAgIHRhYkxpbmtFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LXRhYi1oZWFkaW5nIHNwYW4nKT8uY2hpbGROb2Rlc1swXSxcbiAgICApO1xuICAgIGNvbnN0IHRhYkhlYWRlckNvdW50ID0gdGhpcy4jZ2V0VGV4dENvbnRlbnQoXG4gICAgICB0YWJMaW5rRWwucXVlcnlTZWxlY3RvcignLnNreS10YWItaGVhZGVyLWNvdW50JyksXG4gICAgKTtcblxuICAgIGxldCBwZXJtYWxpbmtWYWx1ZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgaWYgKHRhYkxpbmtFbC5ocmVmKSB7XG4gICAgICBjb25zdCBwZXJtYWxpbmsgPSB0YWJMaW5rRWwuaHJlZi5zcGxpdCgnPycpWzFdO1xuICAgICAgaWYgKHBlcm1hbGluaykge1xuICAgICAgICBjb25zdCBwZXJtYWxpbmtQYXJ0cyA9IHBlcm1hbGluay5zcGxpdCgnPScpO1xuXG4gICAgICAgIHBlcm1hbGlua1ZhbHVlID0gZGVjb2RlVVJJQ29tcG9uZW50KHBlcm1hbGlua1BhcnRzWzFdKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICByZXR1cm4ge1xuICAgICAgYWN0aXZlLFxuICAgICAgZGlzYWJsZWQsXG4gICAgICBwZXJtYWxpbmtWYWx1ZSxcbiAgICAgIHRhYkhlYWRlckNvdW50LFxuICAgICAgdGFiSGVhZGluZyxcbiAgICB9O1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrcyB0aGUgdGFic2V0J3MgXCJuZXdcIiBidXR0b24uXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tOZXdCdXR0b24oKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgYXdhaXQgdGhpcy4jY2xpY2tCdXR0b24oJ3NreS10YWJzZXQtYnRuLW5ldycpO1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrcyB0aGUgdGFic2V0J3MgXCJvcGVuXCIgYnV0dG9uLlxuICAgKi9cbiAgcHVibGljIGFzeW5jIGNsaWNrT3BlbkJ1dHRvbigpOiBQcm9taXNlPHZvaWQ+IHtcbiAgICBhd2FpdCB0aGlzLiNjbGlja0J1dHRvbignc2t5LXRhYnNldC1idG4tb3BlbicpO1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrcyB0aGUgdGFiIGJ1dHRvbiBhdCB0aGUgc3BlY2lmaWVkIGluZGV4LlxuICAgKiBAcGFyYW0gdGFiSW5kZXggVGhlIGluZGV4IG9mIHRoZSB0YWIuXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tUYWIodGFiSW5kZXg6IG51bWJlcik6IFByb21pc2U8dm9pZD4ge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuI2dldFRhYkxpbmtFbCh0YWJJbmRleCk7XG5cbiAgICB0YWJMaW5rRWwuY2xpY2soKTtcblxuICAgIHRoaXMuI2ZpeHR1cmUuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIGF3YWl0IHRoaXMuI2ZpeHR1cmUud2hlblN0YWJsZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrJ3MgdGhlIHRhYidzIGNsb3NlIGJ1dHRvbiBhdCB0aGUgc3BlY2lmaWVkIGluZGV4LlxuICAgKiBAcGFyYW0gdGFiSW5kZXggVGhlIGluZGV4IG9mIHRoZSB0YWIuXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tUYWJDbG9zZSh0YWJJbmRleDogbnVtYmVyKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgY29uc3QgdGFiV3JhcHBlckVsID0gdGhpcy4jZ2V0VGFic2V0RWwoKS5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgYC5za3ktdGFic2V0LXRhYnMgLnNreS1idG4tdGFiLXdyYXBwZXJgLFxuICAgIClbdGFiSW5kZXhdO1xuXG4gICAgY29uc3QgY2xvc2VCdG5FbCA9IHRhYldyYXBwZXJFbC5xdWVyeVNlbGVjdG9yKFxuICAgICAgJy5za3ktYnRuLXRhYi1jbG9zZScsXG4gICAgKSBhcyBIVE1MQnV0dG9uRWxlbWVudDtcblxuICAgIGlmICghY2xvc2VCdG5FbCkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKCdUaGUgc3BlY2lmaWVkIHRhYiBkb2VzIG5vdCBoYXZlIGEgY2xvc2UgYnV0dG9uLicpO1xuICAgIH1cblxuICAgIGNsb3NlQnRuRWwuY2xpY2soKTtcblxuICAgIHRoaXMuI2ZpeHR1cmUuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIGF3YWl0IHRoaXMuI2ZpeHR1cmUud2hlblN0YWJsZSgpO1xuICB9XG5cbiAgYXN5bmMgI2NsaWNrQnV0dG9uKGJ1dHRvbkNsczogc3RyaW5nKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgY29uc3QgdGFic2V0RWwgPSB0aGlzLiNnZXRUYWJzZXRFbCgpO1xuXG4gICAgY29uc3QgbmV3QnV0dG9uRWwgPSB0YWJzZXRFbC5xdWVyeVNlbGVjdG9yKFxuICAgICAgYC5za3ktdGFic2V0LWJ0bnMgLiR7YnV0dG9uQ2xzfWAsXG4gICAgKSBhcyBIVE1MQnV0dG9uRWxlbWVudDtcblxuICAgIG5ld0J1dHRvbkVsLmNsaWNrKCk7XG5cbiAgICB0aGlzLiNmaXh0dXJlLmRldGVjdENoYW5nZXMoKTtcbiAgICBhd2FpdCB0aGlzLiNmaXh0dXJlLndoZW5TdGFibGUoKTtcbiAgfVxuXG4gICNnZXRUYWJzZXRFbCgpOiBIVE1MRGl2RWxlbWVudCB7XG4gICAgY29uc3QgdGFic2V0RWwgPSB0aGlzLiNkZWJ1Z0VsLnF1ZXJ5KEJ5LmNzcygnLnNreS10YWJzZXQnKSkubmF0aXZlRWxlbWVudDtcblxuICAgIHJldHVybiB0YWJzZXRFbDtcbiAgfVxuXG4gICNnZXRUYWJMaW5rRWxzKCk6IE5vZGVMaXN0T2Y8SFRNTEFuY2hvckVsZW1lbnQ+IHtcbiAgICByZXR1cm4gdGhpcy4jZ2V0VGFic2V0RWwoKS5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgYC5za3ktdGFic2V0LXRhYnMgLnNreS1idG4tdGFiYCxcbiAgICApO1xuICB9XG5cbiAgI2dldFRhYkxpbmtFbCh0YWJJbmRleDogbnVtYmVyKTogSFRNTEFuY2hvckVsZW1lbnQge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuI2dldFRhYkxpbmtFbHMoKS5pdGVtKHRhYkluZGV4KTtcblxuICAgIGlmICghdGFiTGlua0VsKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoYFRoZXJlIGlzIG5vIHRhYiBhdCBpbmRleCAke3RhYkluZGV4fS5gKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGFiTGlua0VsO1xuICB9XG5cbiAgI2dldFRleHRDb250ZW50KGVsOiBFbGVtZW50IHwgTm9kZSB8IHVuZGVmaW5lZCB8IG51bGwpOiBzdHJpbmcgfCB1bmRlZmluZWQge1xuICAgIHJldHVybiAoZWwgJiYgZWwudGV4dENvbnRlbnQ/LnRyaW0oKSkgfHwgdW5kZWZpbmVkO1xuICB9XG59XG4iXX0=

package/esm2022/testing/public-api.mjs

@@ -1,2 +1,2 @@
-export { SkyTabsetFixture } from './tabs/tabset-fixture';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy90YWJzL3Rlc3Rpbmcvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBTa3lUYWJzZXRGaXh0dXJlVGFiIH0gZnJvbSAnLi90YWJzL3RhYi1maXh0dXJlLXRhYic7XG5leHBvcnQgeyBTa3lUYWJzZXRGaXh0dXJlIH0gZnJvbSAnLi90YWJzL3RhYnNldC1maXh0dXJlJztcbiJdfQ==
+export { SkyTabsetFixture } from './legacy/tabs/tabset-fixture';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy90YWJzL3Rlc3Rpbmcvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sOEJBQThCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBTa3lUYWJzZXRGaXh0dXJlVGFiIH0gZnJvbSAnLi9sZWdhY3kvdGFicy90YWItZml4dHVyZS10YWInO1xuZXhwb3J0IHsgU2t5VGFic2V0Rml4dHVyZSB9IGZyb20gJy4vbGVnYWN5L3RhYnMvdGFic2V0LWZpeHR1cmUnO1xuIl19

package/fesm2022/skyux-tabs-testing.mjs

@@ -70,13 +70,13 @@ class SkyTabsetFixture {
      * Clicks the tabset's "new" button.
      */
     async clickNewButton() {
-        return this.#clickButton('sky-tabset-btn-new');
+        await this.#clickButton('sky-tabset-btn-new');
     }
     /**
      * Clicks the tabset's "open" button.
      */
     async clickOpenButton() {
-        return this.#clickButton('sky-tabset-btn-open');
+        await this.#clickButton('sky-tabset-btn-open');
     }
     /**
      * Clicks the tab button at the specified index.
@@ -86,7 +86,7 @@ class SkyTabsetFixture {
         const tabLinkEl = this.#getTabLinkEl(tabIndex);
         tabLinkEl.click();
         this.#fixture.detectChanges();
-        return this.#fixture.whenStable();
+        await this.#fixture.whenStable();
     }
     /**
      * Click's the tab's close button at the specified index.
@@ -100,14 +100,14 @@ class SkyTabsetFixture {
         }
         closeBtnEl.click();
         this.#fixture.detectChanges();
-        return this.#fixture.whenStable();
+        await this.#fixture.whenStable();
     }
     async #clickButton(buttonCls) {
         const tabsetEl = this.#getTabsetEl();
         const newButtonEl = tabsetEl.querySelector(`.sky-tabset-btns .${buttonCls}`);
         newButtonEl.click();
         this.#fixture.detectChanges();
-        return this.#fixture.whenStable();
+        await this.#fixture.whenStable();
     }
     #getTabsetEl() {
         const tabsetEl = this.#debugEl.query(By.css('.sky-tabset')).nativeElement;

package/fesm2022/skyux-tabs-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skyux-tabs-testing.mjs","sources":["../../../../../libs/components/tabs/testing/src/tabs/tabset-fixture.ts","../../../../../libs/components/tabs/testing/src/skyux-tabs-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux-sdk/testing';\n\nimport { SkyTabsetFixtureTab } from './tab-fixture-tab';\n\n/**\n * Allows interaction with a SKY UX tabset component.\n * @internal\n */\nexport class SkyTabsetFixture {\n  /**\n   * The tabset component's ARIA label.\n   */\n  public get ariaLabel(): string | undefined {\n    const tabsetEl = this.#getTabsetEl();\n    return tabsetEl.getAttribute('aria-label') || undefined;\n  }\n\n  /**\n   * The tabset component's ARIA labelled by attribute.\n   */\n  public get ariaLabelledBy(): string | undefined {\n    const tabsetEl = this.#getTabsetEl();\n    return tabsetEl.getAttribute('aria-labelledby') || undefined;\n  }\n\n  /**\n   * The index of the currently selected tab.\n   */\n  public get activeTabIndex(): number {\n    const tabLinkEls = this.#getTabLinkEls();\n\n    for (let i = 0, n = tabLinkEls.length; i < n; i++) {\n      if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {\n        return i;\n      }\n    }\n\n    /* safety check */\n    /* istanbul ignore next */\n    return -1;\n  }\n\n  #debugEl: DebugElement;\n  #fixture: ComponentFixture<any>;\n\n  constructor(fixture: ComponentFixture<any>, skyTestId: string) {\n    this.#fixture = fixture;\n    this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(\n      fixture,\n      skyTestId,\n      'sky-tabset',\n    );\n  }\n\n  /**\n   * Retrieves information about the tab at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public getTab(tabIndex: number): SkyTabsetFixtureTab {\n    const tabLinkEl = this.#getTabLinkEl(tabIndex);\n\n    const active = this.activeTabIndex === tabIndex;\n    const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');\n    const tabHeading = this.#getTextContent(\n      tabLinkEl.querySelector('.sky-tab-heading span')?.childNodes[0],\n    );\n    const tabHeaderCount = this.#getTextContent(\n      tabLinkEl.querySelector('.sky-tab-header-count'),\n    );\n\n    let permalinkValue: string | undefined;\n\n    if (tabLinkEl.href) {\n      const permalink = tabLinkEl.href.split('?')[1];\n      if (permalink) {\n        const permalinkParts = permalink.split('=');\n\n        permalinkValue = decodeURIComponent(permalinkParts[1]);\n      }\n    }\n\n    return {\n      active,\n      disabled,\n      permalinkValue,\n      tabHeaderCount,\n      tabHeading,\n    };\n  }\n\n  /**\n   * Clicks the tabset's \"new\" button.\n   */\n  public async clickNewButton(): Promise<any> {\n    return this.#clickButton('sky-tabset-btn-new');\n  }\n\n  /**\n   * Clicks the tabset's \"open\" button.\n   */\n  public async clickOpenButton(): Promise<any> {\n    return this.#clickButton('sky-tabset-btn-open');\n  }\n\n  /**\n   * Clicks the tab button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTab(tabIndex: number): Promise<any> {\n    const tabLinkEl = this.#getTabLinkEl(tabIndex);\n\n    tabLinkEl.click();\n\n    this.#fixture.detectChanges();\n    return this.#fixture.whenStable();\n  }\n\n  /**\n   * Click's the tab's close button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTabClose(tabIndex: number): Promise<any> {\n    const tabWrapperEl = this.#getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab-wrapper`,\n    )[tabIndex];\n\n    const closeBtnEl = tabWrapperEl.querySelector(\n      '.sky-btn-tab-close',\n    ) as HTMLButtonElement;\n\n    if (!closeBtnEl) {\n      throw new Error('The specified tab does not have a close button.');\n    }\n\n    closeBtnEl.click();\n\n    this.#fixture.detectChanges();\n    return this.#fixture.whenStable();\n  }\n\n  async #clickButton(buttonCls: string): Promise<any> {\n    const tabsetEl = this.#getTabsetEl();\n\n    const newButtonEl = tabsetEl.querySelector(\n      `.sky-tabset-btns .${buttonCls}`,\n    ) as HTMLButtonElement;\n\n    newButtonEl.click();\n\n    this.#fixture.detectChanges();\n    return this.#fixture.whenStable();\n  }\n\n  #getTabsetEl(): HTMLDivElement {\n    const tabsetEl = this.#debugEl.query(By.css('.sky-tabset')).nativeElement;\n\n    return tabsetEl;\n  }\n\n  #getTabLinkEls(): NodeListOf<HTMLAnchorElement> {\n    return this.#getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab`,\n    );\n  }\n\n  #getTabLinkEl(tabIndex: number): HTMLAnchorElement {\n    const tabLinkEl = this.#getTabLinkEls().item(tabIndex);\n\n    if (!tabLinkEl) {\n      throw new Error(`There is no tab at index ${tabIndex}.`);\n    }\n\n    return tabLinkEl;\n  }\n\n  #getTextContent(el: Element | Node | undefined | null): string | undefined {\n    return (el && el.textContent?.trim()) || undefined;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"skyux-tabs-testing.mjs","sources":["../../../../../libs/components/tabs/testing/src/legacy/tabs/tabset-fixture.ts","../../../../../libs/components/tabs/testing/src/skyux-tabs-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux-sdk/testing';\n\nimport { SkyTabsetFixtureTab } from './tab-fixture-tab';\n\n/**\n * Allows interaction with a SKY UX tabset component.\n * @internal\n */\nexport class SkyTabsetFixture {\n  /**\n   * The tabset component's ARIA label.\n   */\n  public get ariaLabel(): string | undefined {\n    const tabsetEl = this.#getTabsetEl();\n    return tabsetEl.getAttribute('aria-label') || undefined;\n  }\n\n  /**\n   * The tabset component's ARIA labelled by attribute.\n   */\n  public get ariaLabelledBy(): string | undefined {\n    const tabsetEl = this.#getTabsetEl();\n    return tabsetEl.getAttribute('aria-labelledby') || undefined;\n  }\n\n  /**\n   * The index of the currently selected tab.\n   */\n  public get activeTabIndex(): number {\n    const tabLinkEls = this.#getTabLinkEls();\n\n    for (let i = 0, n = tabLinkEls.length; i < n; i++) {\n      if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {\n        return i;\n      }\n    }\n\n    /* safety check */\n    /* istanbul ignore next */\n    return -1;\n  }\n\n  #debugEl: DebugElement;\n  #fixture: ComponentFixture<unknown>;\n\n  constructor(fixture: ComponentFixture<unknown>, skyTestId: string) {\n    this.#fixture = fixture;\n    this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(\n      fixture,\n      skyTestId,\n      'sky-tabset',\n    );\n  }\n\n  /**\n   * Retrieves information about the tab at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public getTab(tabIndex: number): SkyTabsetFixtureTab {\n    const tabLinkEl = this.#getTabLinkEl(tabIndex);\n\n    const active = this.activeTabIndex === tabIndex;\n    const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');\n    const tabHeading = this.#getTextContent(\n      tabLinkEl.querySelector('.sky-tab-heading span')?.childNodes[0],\n    );\n    const tabHeaderCount = this.#getTextContent(\n      tabLinkEl.querySelector('.sky-tab-header-count'),\n    );\n\n    let permalinkValue: string | undefined;\n\n    if (tabLinkEl.href) {\n      const permalink = tabLinkEl.href.split('?')[1];\n      if (permalink) {\n        const permalinkParts = permalink.split('=');\n\n        permalinkValue = decodeURIComponent(permalinkParts[1]);\n      }\n    }\n\n    return {\n      active,\n      disabled,\n      permalinkValue,\n      tabHeaderCount,\n      tabHeading,\n    };\n  }\n\n  /**\n   * Clicks the tabset's \"new\" button.\n   */\n  public async clickNewButton(): Promise<void> {\n    await this.#clickButton('sky-tabset-btn-new');\n  }\n\n  /**\n   * Clicks the tabset's \"open\" button.\n   */\n  public async clickOpenButton(): Promise<void> {\n    await this.#clickButton('sky-tabset-btn-open');\n  }\n\n  /**\n   * Clicks the tab button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTab(tabIndex: number): Promise<void> {\n    const tabLinkEl = this.#getTabLinkEl(tabIndex);\n\n    tabLinkEl.click();\n\n    this.#fixture.detectChanges();\n    await this.#fixture.whenStable();\n  }\n\n  /**\n   * Click's the tab's close button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTabClose(tabIndex: number): Promise<void> {\n    const tabWrapperEl = this.#getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab-wrapper`,\n    )[tabIndex];\n\n    const closeBtnEl = tabWrapperEl.querySelector(\n      '.sky-btn-tab-close',\n    ) as HTMLButtonElement;\n\n    if (!closeBtnEl) {\n      throw new Error('The specified tab does not have a close button.');\n    }\n\n    closeBtnEl.click();\n\n    this.#fixture.detectChanges();\n    await this.#fixture.whenStable();\n  }\n\n  async #clickButton(buttonCls: string): Promise<void> {\n    const tabsetEl = this.#getTabsetEl();\n\n    const newButtonEl = tabsetEl.querySelector(\n      `.sky-tabset-btns .${buttonCls}`,\n    ) as HTMLButtonElement;\n\n    newButtonEl.click();\n\n    this.#fixture.detectChanges();\n    await this.#fixture.whenStable();\n  }\n\n  #getTabsetEl(): HTMLDivElement {\n    const tabsetEl = this.#debugEl.query(By.css('.sky-tabset')).nativeElement;\n\n    return tabsetEl;\n  }\n\n  #getTabLinkEls(): NodeListOf<HTMLAnchorElement> {\n    return this.#getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab`,\n    );\n  }\n\n  #getTabLinkEl(tabIndex: number): HTMLAnchorElement {\n    const tabLinkEl = this.#getTabLinkEls().item(tabIndex);\n\n    if (!tabLinkEl) {\n      throw new Error(`There is no tab at index ${tabIndex}.`);\n    }\n\n    return tabLinkEl;\n  }\n\n  #getTextContent(el: Element | Node | undefined | null): string | undefined {\n    return (el && el.textContent?.trim()) || undefined;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/skyux-tabs.mjs

@@ -1514,11 +1514,11 @@ class SkyTabButtonComponent {
         this.#changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-margin-right: 5px;--sky-override-closeable-tab-padding-right: 43px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-top: var(--modern-size-12);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-closeable-tab-padding-right: 44px}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
+            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    #tabButtonEl\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [attr.aria-label]=\"\n      tabStyle === 'wizard'\n        ? ('skyux_wizard_sr_step_' + wizardStepState\n          | skyLibResources: tabNumber : totalTabsCount : buttonText)\n        : null\n    \"\n    [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      <span #tabHeading=\"skyId\" skyId>\n        {{ buttonText }}\n        @if (buttonTextCount !== undefined) {\n          <span class=\"sky-tab-header-count\">\n            {{ buttonTextCount }}\n          </span>\n        }\n      </span>\n      @if (closeable) {\n        <span\n          class=\"sky-btn-tab-close\"\n          [tabindex]=\"closeBtnTabIndex\"\n          [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n          [ngClass]=\"{\n            'sky-btn-tab-close-disabled': disabled\n          }\"\n          (click)=\"onCloseClick($event)\"\n          (keydown.enter)=\"onCloseClick($event)\"\n        >\n          <sky-icon icon=\"remove\" />\n        </span>\n      }\n    </span>\n  </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
                 type: Input
             }], ariaControls: [{
@@ -2520,7 +2520,7 @@ class SkyTabsetComponent {
             SkyTabsetAdapterService,
             SkyTabsetPermalinkService,
             SkyTabsetService,
-        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-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-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-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
@@ -2528,7 +2528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SkyTabsetAdapterService,
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-wizard-modal-margin: 0 0 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    @if (tabDisplayMode === 'dropdown') {\n      <sky-dropdown buttonType=\"tab\">\n        <sky-dropdown-button>\n          {{ dropdownTriggerButtonText }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          @for (tabButton of tabButtons; track tabButton.buttonId) {\n            <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n              <div\n                class=\"sky-tab-dropdown-item\"\n                [ngClass]=\"{\n                  'sky-tab-dropdown-item-selected': tabButton.active\n                }\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tabButtonTemplate;\n                    context: {\n                      $implicit: tabButton\n                    }\n                  \"\n                />\n              </div>\n            </sky-dropdown-item>\n          }\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    }\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    @for (tabButton of tabButtons; track tabButton.buttonId) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      />\n    }\n  </span>\n  <span class=\"sky-tabset-btns\">\n    @if (newTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onNewTabClick()\"\n      >\n        <sky-icon icon=\"plus-circle\" size=\"lg\" />\n      </button>\n    }\n    @if (openTab.observers.length > 0) {\n      <button\n        class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-margin-inline-compact': 'default'\n        }\"\n        (click)=\"onOpenTabClick()\"\n      >\n        <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n      </button>\n    }\n  </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-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-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-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{