@skyux/tabs 14.5.0 → 14.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/tabs",
-  "version": "14.5.0",
+  "version": "14.6.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -21,14 +21,14 @@
     "@angular/core": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
-    "@skyux-sdk/testing": "14.5.0",
-    "@skyux/core": "14.5.0",
-    "@skyux/forms": "14.5.0",
-    "@skyux/i18n": "14.5.0",
-    "@skyux/icon": "14.5.0",
-    "@skyux/indicators": "14.5.0",
-    "@skyux/popovers": "14.5.0",
-    "@skyux/theme": "14.5.0"
+    "@skyux-sdk/testing": "14.6.0",
+    "@skyux/core": "14.6.0",
+    "@skyux/forms": "14.6.0",
+    "@skyux/i18n": "14.6.0",
+    "@skyux/icon": "14.6.0",
+    "@skyux/indicators": "14.6.0",
+    "@skyux/popovers": "14.6.0",
+    "@skyux/theme": "14.6.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"

package/types/skyux-tabs-testing.d.ts

@@ -276,6 +276,13 @@ declare class SkySectionedFormHarness extends SkyComponentHarness {
      */
     getActiveSection(): Promise<SkySectionedFormSectionHarness | undefined>;
     getActiveSectionContent(): Promise<SkySectionedFormSectionContentHarness | undefined>;
+    /**
+     * Gets the tab width as a CSS `flex-basis` value (for example, `200px`),
+     * or `null` when no width is set. The width is only applied in the desktop
+     * layout, so this returns `null` in the mobile layout and when the tabs
+     * pane is not rendered at all.
+     */
+    getTabWidth(): Promise<string | null>;
     /**
      * Gets a specific section based on the filter criteria.
      * @param filters The filter criteria.
@@ -624,6 +631,12 @@ declare class SkyVerticalTabsetHarness extends SkyComponentHarness {
      * Gets the text in the show tabs button in mobile view.
      */
     getShowTabsText(): Promise<string | undefined>;
+    /**
+     * Gets the tab width as a CSS `flex-basis` value (for example, `200px`),
+     * or `null` when no width is set. The width is only applied in the desktop
+     * layout, so this returns `null` in the mobile layout.
+     */
+    getTabWidth(): Promise<string | null>;
     /**
      * Gets a specific vertical tab button based on the filter criteria.
      * @param filters The filter criteria.

package/types/skyux-tabs.d.ts

@@ -225,6 +225,13 @@ declare class SkySectionedFormComponent implements OnInit, OnDestroy, AfterViewC
      * @default false
      */
     maintainSectionContent: boolean | undefined;
+    /**
+     * The width of the tabs pane as a CSS width value (such as `200px`, `15rem`,
+     * or `20%`). Set to `"auto"` to size based on tab label content. Maximum
+     * width is 30%.
+     * @default "30%"
+     */
+    readonly tabWidth: i0.InputSignalWithTransform<string, string | undefined>;
     set messageStream(value: Subject<SkySectionedFormMessage> | undefined);
     get messageStream(): Subject<SkySectionedFormMessage>;
     /**
@@ -240,6 +247,7 @@ declare class SkySectionedFormComponent implements OnInit, OnDestroy, AfterViewC
     ariaRole: string | undefined;
     content: ElementRef | undefined;
     protected animationEnabled: i0.WritableSignal<boolean>;
+    protected readonly isMobile: i0.WritableSignal<boolean>;
     constructor(tabService: SkyVerticalTabsetService, changeRef: ChangeDetectorRef, tabIdSvc: SkyTabIdService, logger: SkyLogService);
     ngOnInit(): void;
     ngAfterViewChecked(): void;
@@ -252,8 +260,10 @@ declare class SkySectionedFormComponent implements OnInit, OnDestroy, AfterViewC
      * @deprecated Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.
      */
     showTabs(): void;
+    protected readonly tabsFlexBasis: i0.Signal<string | undefined>;
+    protected readonly tabsMaxWidth: i0.Signal<string | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkySectionedFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkySectionedFormComponent, "sky-sectioned-form", never, { "maintainSectionContent": { "alias": "maintainSectionContent"; "required": false; }; "messageStream": { "alias": "messageStream"; "required": false; }; }, { "indexChanged": "indexChanged"; "tabsVisibleChanged": "tabsVisibleChanged"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkySectionedFormComponent, "sky-sectioned-form", never, { "maintainSectionContent": { "alias": "maintainSectionContent"; "required": false; }; "tabWidth": { "alias": "tabWidth"; "required": false; "isSignal": true; }; "messageStream": { "alias": "messageStream"; "required": false; }; }, { "indexChanged": "indexChanged"; "tabsVisibleChanged": "tabsVisibleChanged"; }, never, ["*"], false, never>;
 }
 
 declare class SkySectionedFormService {
@@ -352,6 +362,13 @@ declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChecked, On
      * @default false
      */
     maintainTabContent: boolean | undefined;
+    /**
+     * The width of the tabs pane as a CSS width value (such as `200px`, `15rem`,
+     * or `20%`). Set to `"auto"` to size based on tab label content. Maximum
+     * width is 25%.
+     * @default "25%"
+     */
+    readonly tabWidth: i0.InputSignalWithTransform<string, string | undefined>;
     /**
      * Fires when the active tab changes. Emits the index of the active tab. The
      * index is based on the tab's position when it loads.
@@ -361,7 +378,7 @@ declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChecked, On
     content: ElementRef | undefined;
     contentWrapper: ElementRef | undefined;
     ariaOwns: string | undefined;
-    isMobile: boolean;
+    readonly isMobile: i0.WritableSignal<boolean>;
     protected tablistHasFocus: boolean;
     constructor(adapterService: SkyVerticalTabsetAdapterService, tabService: SkyVerticalTabsetService, resources: SkyLibResourcesService, changeRef: ChangeDetectorRef, tabIdSvc: SkyTabIdService);
     ngOnInit(): void;
@@ -372,8 +389,10 @@ declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChecked, On
     protected resetTabIndex(): void;
     protected tabGroupsArrowDown(): void;
     protected tabGroupsArrowUp(): void;
+    protected readonly tabGroupContainerFlexBasis: i0.Signal<string | undefined>;
+    protected readonly tabGroupContainerMaxWidth: i0.Signal<string | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetComponent, "sky-vertical-tabset", never, { "showTabsText": { "alias": "showTabsText"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "maintainTabContent": { "alias": "maintainTabContent"; "required": false; }; }, { "activeChange": "activeChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetComponent, "sky-vertical-tabset", never, { "showTabsText": { "alias": "showTabsText"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "maintainTabContent": { "alias": "maintainTabContent"; "required": false; }; "tabWidth": { "alias": "tabWidth"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; }, never, ["*"], false, never>;
 }
 
 /**