@skyux/tabs 7.0.0-beta.4 → 7.0.0-beta.6

package/documentation.json

@@ -25,7 +25,7 @@
     "originalName": "",
     "children": [
       {
-        "id": 360,
+        "id": 377,
         "name": "SkySectionedFormComponent",
         "kind": 128,
         "kindString": "Class",
@@ -49,7 +49,7 @@
         ],
         "children": [
           {
-            "id": 361,
+            "id": 378,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -63,14 +63,14 @@
             ],
             "signatures": [
               {
-                "id": 362,
+                "id": 379,
                 "name": "new SkySectionedFormComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 363,
+                    "id": 380,
                     "name": "tabService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -81,7 +81,7 @@
                     }
                   },
                   {
-                    "id": 364,
+                    "id": 381,
                     "name": "changeRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -96,14 +96,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 360,
+                  "id": 377,
                   "name": "SkySectionedFormComponent"
                 }
               }
             ]
           },
           {
-            "id": 367,
+            "id": 384,
             "name": "ariaRole",
             "kind": 1024,
             "kindString": "Property",
@@ -124,7 +124,7 @@
             "defaultValue": "'tablist'"
           },
           {
-            "id": 368,
+            "id": 385,
             "name": "content",
             "kind": 1024,
             "kindString": "Property",
@@ -166,7 +166,7 @@
             }
           },
           {
-            "id": 366,
+            "id": 383,
             "name": "indexChanged",
             "kind": 1024,
             "kindString": "Property",
@@ -210,7 +210,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 365,
+            "id": 382,
             "name": "maintainSectionContent",
             "kind": 1024,
             "kindString": "Property",
@@ -252,7 +252,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 374,
+            "id": 391,
             "name": "ngAfterViewChecked",
             "kind": 2048,
             "kindString": "Method",
@@ -268,7 +268,7 @@
             ],
             "signatures": [
               {
-                "id": 375,
+                "id": 392,
                 "name": "ngAfterViewChecked",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -289,7 +289,7 @@
             }
           },
           {
-            "id": 376,
+            "id": 393,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -305,7 +305,7 @@
             ],
             "signatures": [
               {
-                "id": 377,
+                "id": 394,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -326,7 +326,7 @@
             }
           },
           {
-            "id": 372,
+            "id": 389,
             "name": "ngOnInit",
             "kind": 2048,
             "kindString": "Method",
@@ -342,7 +342,7 @@
             ],
             "signatures": [
               {
-                "id": 373,
+                "id": 390,
                 "name": "ngOnInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -363,7 +363,7 @@
             }
           },
           {
-            "id": 380,
+            "id": 397,
             "name": "showTabs",
             "kind": 2048,
             "kindString": "Method",
@@ -379,7 +379,7 @@
             ],
             "signatures": [
               {
-                "id": 381,
+                "id": 398,
                 "name": "showTabs",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -392,7 +392,7 @@
             ]
           },
           {
-            "id": 378,
+            "id": 395,
             "name": "tabsVisible",
             "kind": 2048,
             "kindString": "Method",
@@ -408,7 +408,7 @@
             ],
             "signatures": [
               {
-                "id": 379,
+                "id": 396,
                 "name": "tabsVisible",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -426,29 +426,29 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              361
+              378
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              367,
-              368,
-              366,
-              365,
-              371
+              384,
+              385,
+              383,
+              382,
+              388
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              374,
-              376,
-              372,
-              380,
-              378
+              391,
+              393,
+              389,
+              397,
+              395
             ]
           }
         ],
@@ -481,7 +481,7 @@
         ]
       },
       {
-        "id": 332,
+        "id": 349,
         "name": "SkySectionedFormModule",
         "kind": 128,
         "kindString": "Class",
@@ -506,7 +506,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              333
+              350
             ]
           }
         ],
@@ -519,7 +519,7 @@
         ]
       },
       {
-        "id": 335,
+        "id": 352,
         "name": "SkySectionedFormService",
         "kind": 128,
         "kindString": "Class",
@@ -538,7 +538,7 @@
         ],
         "children": [
           {
-            "id": 340,
+            "id": 357,
             "name": "invalidFieldChanged",
             "kind": 2048,
             "kindString": "Method",
@@ -554,7 +554,7 @@
             ],
             "signatures": [
               {
-                "id": 341,
+                "id": 358,
                 "name": "invalidFieldChanged",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -564,7 +564,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 342,
+                    "id": 359,
                     "name": "isInvalid",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -583,7 +583,7 @@
             ]
           },
           {
-            "id": 343,
+            "id": 360,
             "name": "requiredFieldChanged",
             "kind": 2048,
             "kindString": "Method",
@@ -599,7 +599,7 @@
             ],
             "signatures": [
               {
-                "id": 344,
+                "id": 361,
                 "name": "requiredFieldChanged",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -609,7 +609,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 345,
+                    "id": 362,
                     "name": "isRequired",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -633,15 +633,15 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              336
+              353
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              340,
-              343
+              357,
+              360
             ]
           }
         ],
@@ -654,7 +654,7 @@
         ]
       },
       {
-        "id": 354,
+        "id": 371,
         "name": "SkyTabsModule",
         "kind": 128,
         "kindString": "Class",
@@ -669,7 +669,7 @@
               "name": "NgModule"
             },
             "arguments": {
-              "obj": "{\n  declarations: [\n    SkyTabButtonComponent,\n    SkyTabComponent,\n    SkyTabsetComponent,\n    SkyTabsetNavButtonComponent,\n  ],\n  imports: [\n    CommonModule,\n    RouterModule,\n    SkyDropdownModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyTabsResourcesModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],\n}"
+              "obj": "{\n  declarations: [\n    SkyTabButtonComponent,\n    SkyTabComponent,\n    SkyTabsetComponent,\n    SkyTabsetNavButtonComponent,\n    SkyTabsetNavButtonDisabledPipe,\n  ],\n  imports: [\n    CommonModule,\n    RouterModule,\n    SkyDropdownModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyTabsResourcesModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],\n}"
             }
           }
         ],
@@ -679,20 +679,20 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              355
+              372
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tabs.module.ts",
-            "line": 34,
+            "line": 36,
             "character": 13
           }
         ]
       },
       {
-        "id": 357,
+        "id": 374,
         "name": "SkyVerticalTabsetModule",
         "kind": 128,
         "kindString": "Class",
@@ -717,7 +717,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              358
+              375
             ]
           }
         ],
@@ -759,7 +759,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 155,
+                "line": 167,
                 "character": 2
               }
             ],
@@ -816,7 +816,7 @@
             ]
           },
           {
-            "id": 26,
+            "id": 29,
             "name": "close",
             "kind": 1024,
             "kindString": "Property",
@@ -841,7 +841,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 120,
+                "line": 128,
                 "character": 9
               }
             ],
@@ -901,8 +901,8 @@
             }
           },
           {
-            "id": 33,
-            "name": "showContent",
+            "id": 34,
+            "name": "permalinkValueOrDefault",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
@@ -911,19 +911,19 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 137,
+                "line": 141,
                 "character": 9
               }
             ],
             "type": {
               "type": "intrinsic",
-              "name": "boolean"
+              "name": "string"
             },
-            "defaultValue": "false"
+            "defaultValue": "''"
           },
           {
-            "id": 34,
-            "name": "tabButtonId",
+            "id": 35,
+            "name": "showContent",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
@@ -932,42 +932,28 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 139,
+                "line": 143,
                 "character": 9
               }
             ],
             "type": {
               "type": "intrinsic",
-              "name": "string"
-            }
+              "name": "boolean"
+            },
+            "defaultValue": "false"
           },
           {
-            "id": 20,
-            "name": "tabHeaderCount",
+            "id": 36,
+            "name": "tabButtonId",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
               "isPublic": true
             },
-            "comment": {
-              "shortText": "Displays a counter beside the tab header.\nThis input only applies when the tabset's `tabStyle` is `\"tabs\"`."
-            },
-            "decorators": [
-              {
-                "name": "Input",
-                "type": {
-                  "type": "reference",
-                  "qualifiedName": "InputDecorator",
-                  "package": "@angular/core",
-                  "name": "Input"
-                },
-                "arguments": {}
-              }
-            ],
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 79,
+                "line": 145,
                 "character": 9
               }
             ],
@@ -977,19 +963,19 @@
             }
           },
           {
-            "id": 21,
-            "name": "tabHeading",
+            "id": 20,
+            "name": "tabHeaderCount",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
               "isPublic": true
             },
             "comment": {
-              "shortText": "Specifies the tab header.\nWhen using tabs as the main navigation on a page,\nuse [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)\nand [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)\nto reflect the tab header in the page title.",
+              "shortText": "Displays a counter beside the tab header.\nThis input only applies when the tabset's `tabStyle` is `\"tabs\"`.",
               "tags": [
                 {
-                  "tag": "required",
-                  "text": "\n"
+                  "tag": "deprecated",
+                  "text": "SKY UX no longer recommends adding counts to tabs.\n"
                 }
               ]
             },
@@ -1008,7 +994,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 90,
+                "line": 79,
                 "character": 9
               }
             ],
@@ -1018,7 +1004,7 @@
             }
           },
           {
-            "id": 35,
+            "id": 37,
             "name": "tabPanelId",
             "kind": 1024,
             "kindString": "Property",
@@ -1028,7 +1014,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 141,
+                "line": 147,
                 "character": 9
               }
             ],
@@ -1159,35 +1145,6 @@
               }
             ]
           },
-          {
-            "id": 27,
-            "name": "closeable",
-            "kind": 262144,
-            "kindString": "Accessor",
-            "flags": {
-              "isPublic": true
-            },
-            "sources": [
-              {
-                "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 122,
-                "character": 13
-              }
-            ],
-            "getSignature": [
-              {
-                "id": 28,
-                "name": "closeable",
-                "kind": 524288,
-                "kindString": "Get signature",
-                "flags": {},
-                "type": {
-                  "type": "intrinsic",
-                  "name": "boolean"
-                }
-              }
-            ]
-          },
           {
             "id": 16,
             "name": "permalinkValue",
@@ -1262,7 +1219,7 @@
             ]
           },
           {
-            "id": 29,
+            "id": 30,
             "name": "stateChange",
             "kind": 262144,
             "kindString": "Accessor",
@@ -1272,13 +1229,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 129,
+                "line": 133,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 30,
+                "id": 31,
                 "name": "stateChange",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -1302,8 +1259,8 @@
             ]
           },
           {
-            "id": 22,
-            "name": "tabIndex",
+            "id": 21,
+            "name": "tabHeading",
             "kind": 262144,
             "kindString": "Accessor",
             "flags": {
@@ -1324,13 +1281,98 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 97,
+                "line": 90,
                 "character": 13
               }
             ],
             "getSignature": [
+              {
+                "id": 22,
+                "name": "tabHeading",
+                "kind": 524288,
+                "kindString": "Get signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Specifies the tab header.\nWhen using tabs as the main navigation on a page,\nuse [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)\nand [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)\nto reflect the tab header in the page title.",
+                  "tags": [
+                    {
+                      "tag": "required",
+                      "text": "\n"
+                    }
+                  ]
+                },
+                "type": {
+                  "type": "intrinsic",
+                  "name": "string"
+                }
+              }
+            ],
+            "setSignature": [
               {
                 "id": 23,
+                "name": "tabHeading",
+                "kind": 1048576,
+                "kindString": "Set signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Specifies the tab header.\nWhen using tabs as the main navigation on a page,\nuse [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)\nand [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)\nto reflect the tab header in the page title.",
+                  "tags": [
+                    {
+                      "tag": "required",
+                      "text": "\n"
+                    }
+                  ]
+                },
+                "parameters": [
+                  {
+                    "id": 24,
+                    "name": "value",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "intrinsic",
+                      "name": "string"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "intrinsic",
+                  "name": "void"
+                }
+              }
+            ]
+          },
+          {
+            "id": 25,
+            "name": "tabIndex",
+            "kind": 262144,
+            "kindString": "Accessor",
+            "flags": {
+              "isPublic": true
+            },
+            "decorators": [
+              {
+                "name": "Input",
+                "type": {
+                  "type": "reference",
+                  "qualifiedName": "InputDecorator",
+                  "package": "@angular/core",
+                  "name": "Input"
+                },
+                "arguments": {}
+              }
+            ],
+            "sources": [
+              {
+                "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
+                "line": 105,
+                "character": 13
+              }
+            ],
+            "getSignature": [
+              {
+                "id": 26,
                 "name": "tabIndex",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -1340,14 +1382,14 @@
                 },
                 "type": {
                   "type": "reference",
-                  "id": 346,
+                  "id": 363,
                   "name": "SkyTabIndex"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 24,
+                "id": 27,
                 "name": "tabIndex",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -1357,14 +1399,14 @@
                 },
                 "parameters": [
                   {
-                    "id": 25,
+                    "id": 28,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 346,
+                      "id": 363,
                       "name": "SkyTabIndex"
                     }
                   }
@@ -1377,7 +1419,7 @@
             ]
           },
           {
-            "id": 31,
+            "id": 32,
             "name": "tabIndexChange",
             "kind": 262144,
             "kindString": "Accessor",
@@ -1387,13 +1429,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 133,
+                "line": 137,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 32,
+                "id": 33,
                 "name": "tabIndexChange",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -1403,7 +1445,7 @@
                   "typeArguments": [
                     {
                       "type": "reference",
-                      "id": 346,
+                      "id": 363,
                       "name": "SkyTabIndex"
                     }
                   ],
@@ -1415,7 +1457,7 @@
             ]
           },
           {
-            "id": 49,
+            "id": 55,
             "name": "activate",
             "kind": 2048,
             "kindString": "Method",
@@ -1425,13 +1467,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 185,
+                "line": 212,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 50,
+                "id": 56,
                 "name": "activate",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -1444,7 +1486,7 @@
             ]
           },
           {
-            "id": 51,
+            "id": 57,
             "name": "deactivate",
             "kind": 2048,
             "kindString": "Method",
@@ -1454,13 +1496,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 191,
+                "line": 218,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 52,
+                "id": 58,
                 "name": "deactivate",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -1473,7 +1515,7 @@
             ]
           },
           {
-            "id": 47,
+            "id": 53,
             "name": "init",
             "kind": 2048,
             "kindString": "Method",
@@ -1483,13 +1525,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 181,
+                "line": 208,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 48,
+                "id": 54,
                 "name": "init",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -1502,7 +1544,36 @@
             ]
           },
           {
-            "id": 42,
+            "id": 59,
+            "name": "isCloseable",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
+                "line": 224,
+                "character": 9
+              }
+            ],
+            "signatures": [
+              {
+                "id": 60,
+                "name": "isCloseable",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "type": {
+                  "type": "intrinsic",
+                  "name": "boolean"
+                }
+              }
+            ]
+          },
+          {
+            "id": 48,
             "name": "ngOnChanges",
             "kind": 2048,
             "kindString": "Method",
@@ -1512,20 +1583,20 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 165,
+                "line": 188,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 43,
+                "id": 49,
                 "name": "ngOnChanges",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 44,
+                    "id": 50,
                     "name": "changes",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1554,7 +1625,7 @@
             }
           },
           {
-            "id": 45,
+            "id": 51,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -1564,13 +1635,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 176,
+                "line": 199,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 46,
+                "id": 52,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -1603,13 +1674,13 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              26,
+              29,
               15,
-              33,
               34,
+              35,
+              36,
               20,
-              21,
-              35
+              37
             ]
           },
           {
@@ -1618,22 +1689,23 @@
             "children": [
               9,
               13,
-              27,
               16,
-              29,
-              22,
-              31
+              30,
+              21,
+              25,
+              32
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              49,
-              51,
-              47,
-              42,
-              45
+              55,
+              57,
+              53,
+              59,
+              48,
+              51
             ]
           }
         ],
@@ -1660,7 +1732,7 @@
         ]
       },
       {
-        "id": 53,
+        "id": 63,
         "name": "SkyTabsetComponent",
         "kind": 128,
         "kindString": "Class",
@@ -1681,7 +1753,7 @@
         ],
         "children": [
           {
-            "id": 54,
+            "id": 64,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -1689,20 +1761,20 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 197,
+                "line": 214,
                 "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 55,
+                "id": 65,
                 "name": "SkyTabsetComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 56,
+                    "id": 66,
                     "name": "changeDetector",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1715,7 +1787,7 @@
                     }
                   },
                   {
-                    "id": 57,
+                    "id": 67,
                     "name": "elementRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1734,7 +1806,7 @@
                     }
                   },
                   {
-                    "id": 58,
+                    "id": 68,
                     "name": "adapterService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1745,7 +1817,7 @@
                     }
                   },
                   {
-                    "id": 59,
+                    "id": 69,
                     "name": "permalinkService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1756,7 +1828,7 @@
                     }
                   },
                   {
-                    "id": 60,
+                    "id": 70,
                     "name": "tabsetService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -1769,14 +1841,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 53,
+                  "id": 63,
                   "name": "SkyTabsetComponent"
                 }
               }
             ]
           },
           {
-            "id": 75,
+            "id": 85,
             "name": "activeChange",
             "kind": 1024,
             "kindString": "Property",
@@ -1801,7 +1873,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 136,
+                "line": 133,
                 "character": 9
               }
             ],
@@ -1810,7 +1882,7 @@
               "typeArguments": [
                 {
                   "type": "reference",
-                  "id": 346,
+                  "id": 363,
                   "name": "SkyTabIndex"
                 }
               ],
@@ -1821,7 +1893,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 65,
+            "id": 75,
             "name": "ariaLabel",
             "kind": 1024,
             "kindString": "Property",
@@ -1846,7 +1918,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 86,
+                "line": 84,
                 "character": 9
               }
             ],
@@ -1856,7 +1928,7 @@
             }
           },
           {
-            "id": 66,
+            "id": 76,
             "name": "ariaLabelledBy",
             "kind": 1024,
             "kindString": "Property",
@@ -1881,7 +1953,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 95,
+                "line": 93,
                 "character": 9
               }
             ],
@@ -1891,33 +1963,13 @@
             }
           },
           {
-            "id": 84,
+            "id": 97,
             "name": "dropdownTriggerButtonText",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
               "isPublic": true
             },
-            "sources": [
-              {
-                "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 173,
-                "character": 9
-              }
-            ],
-            "type": {
-              "type": "intrinsic",
-              "name": "string"
-            }
-          },
-          {
-            "id": 87,
-            "name": "elementRole",
-            "kind": 1024,
-            "kindString": "Property",
-            "flags": {
-              "isPublic": true
-            },
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
@@ -1929,10 +1981,10 @@
               "type": "intrinsic",
               "name": "string"
             },
-            "defaultValue": "DEFAULT_ELEMENT_ROLE"
+            "defaultValue": "''"
           },
           {
-            "id": 76,
+            "id": 86,
             "name": "newTab",
             "kind": 1024,
             "kindString": "Property",
@@ -1957,7 +2009,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 144,
+                "line": 141,
                 "character": 9
               }
             ],
@@ -1976,7 +2028,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 77,
+            "id": 87,
             "name": "openTab",
             "kind": 1024,
             "kindString": "Property",
@@ -2001,7 +2053,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 152,
+                "line": 149,
                 "character": 9
               }
             ],
@@ -2020,7 +2072,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 86,
+            "id": 99,
             "name": "tabButtons",
             "kind": 1024,
             "kindString": "Property",
@@ -2030,7 +2082,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 181,
+                "line": 191,
                 "character": 9
               }
             ],
@@ -2044,7 +2096,7 @@
             "defaultValue": "[]"
           },
           {
-            "id": 78,
+            "id": 88,
             "name": "tabIndexesChange",
             "kind": 1024,
             "kindString": "Property",
@@ -2069,7 +2121,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 159,
+                "line": 156,
                 "character": 9
               }
             ],
@@ -2078,7 +2130,7 @@
               "typeArguments": [
                 {
                   "type": "reference",
-                  "id": 349,
+                  "id": 366,
                   "name": "SkyTabsetTabIndexesChange"
                 }
               ],
@@ -2089,50 +2141,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 83,
-            "name": "tabs",
-            "kind": 1024,
-            "kindString": "Property",
-            "flags": {
-              "isPublic": true
-            },
-            "decorators": [
-              {
-                "name": "ContentChildren",
-                "type": {
-                  "type": "reference",
-                  "qualifiedName": "ContentChildrenDecorator",
-                  "package": "@angular/core",
-                  "name": "ContentChildren"
-                },
-                "arguments": {
-                  "selector": "SkyTabComponent"
-                }
-              }
-            ],
-            "sources": [
-              {
-                "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 171,
-                "character": 9
-              }
-            ],
-            "type": {
-              "type": "reference",
-              "typeArguments": [
-                {
-                  "type": "reference",
-                  "id": 3,
-                  "name": "SkyTabComponent"
-                }
-              ],
-              "qualifiedName": "QueryList",
-              "package": "@angular/core",
-              "name": "QueryList"
-            }
-          },
-          {
-            "id": 61,
+            "id": 71,
             "name": "active",
             "kind": 262144,
             "kindString": "Accessor",
@@ -2154,13 +2163,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 48,
+                "line": 46,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 62,
+                "id": 72,
                 "name": "active",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -2170,14 +2179,14 @@
                 },
                 "type": {
                   "type": "reference",
-                  "id": 346,
+                  "id": 363,
                   "name": "SkyTabIndex"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 63,
+                "id": 73,
                 "name": "active",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -2187,14 +2196,14 @@
                 },
                 "parameters": [
                   {
-                    "id": 64,
+                    "id": 74,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 346,
+                      "id": 363,
                       "name": "SkyTabIndex"
                     }
                   }
@@ -2207,7 +2216,7 @@
             ]
           },
           {
-            "id": 67,
+            "id": 77,
             "name": "permalinkId",
             "kind": 262144,
             "kindString": "Accessor",
@@ -2229,13 +2238,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 105,
+                "line": 103,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 68,
+                "id": 78,
                 "name": "permalinkId",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -2251,7 +2260,7 @@
             ],
             "setSignature": [
               {
-                "id": 69,
+                "id": 79,
                 "name": "permalinkId",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -2261,7 +2270,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 70,
+                    "id": 80,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -2280,7 +2289,7 @@
             ]
           },
           {
-            "id": 79,
+            "id": 89,
             "name": "tabDisplayMode",
             "kind": 262144,
             "kindString": "Accessor",
@@ -2290,41 +2299,41 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 161,
+                "line": 158,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 80,
+                "id": 90,
                 "name": "tabDisplayMode",
                 "kind": 524288,
                 "kindString": "Get signature",
                 "flags": {},
                 "type": {
                   "type": "reference",
-                  "id": 347,
+                  "id": 364,
                   "name": "SkyTabsetButtonsDisplayMode"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 81,
+                "id": 91,
                 "name": "tabDisplayMode",
                 "kind": 1048576,
                 "kindString": "Set signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 82,
+                    "id": 92,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 347,
+                      "id": 364,
                       "name": "SkyTabsetButtonsDisplayMode"
                     }
                   }
@@ -2337,7 +2346,7 @@
             ]
           },
           {
-            "id": 71,
+            "id": 81,
             "name": "tabStyle",
             "kind": 262144,
             "kindString": "Accessor",
@@ -2359,13 +2368,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 123,
+                "line": 121,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 72,
+                "id": 82,
                 "name": "tabStyle",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -2381,14 +2390,14 @@
                 },
                 "type": {
                   "type": "reference",
-                  "id": 348,
+                  "id": 365,
                   "name": "SkyTabsetStyle"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 73,
+                "id": 83,
                 "name": "tabStyle",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -2404,14 +2413,14 @@
                 },
                 "parameters": [
                   {
-                    "id": 74,
+                    "id": 84,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 348,
+                      "id": 365,
                       "name": "SkyTabsetStyle"
                     }
                   }
@@ -2424,7 +2433,94 @@
             ]
           },
           {
-            "id": 94,
+            "id": 93,
+            "name": "tabs",
+            "kind": 262144,
+            "kindString": "Accessor",
+            "flags": {
+              "isPublic": true
+            },
+            "decorators": [
+              {
+                "name": "ContentChildren",
+                "type": {
+                  "type": "reference",
+                  "qualifiedName": "ContentChildrenDecorator",
+                  "package": "@angular/core",
+                  "name": "ContentChildren"
+                },
+                "arguments": {
+                  "selector": "SkyTabComponent"
+                }
+              }
+            ],
+            "sources": [
+              {
+                "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
+                "line": 168,
+                "character": 13
+              }
+            ],
+            "getSignature": [
+              {
+                "id": 94,
+                "name": "tabs",
+                "kind": 524288,
+                "kindString": "Get signature",
+                "flags": {},
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "id": 3,
+                      "name": "SkyTabComponent"
+                    }
+                  ],
+                  "qualifiedName": "QueryList",
+                  "package": "@angular/core",
+                  "name": "QueryList"
+                }
+              }
+            ],
+            "setSignature": [
+              {
+                "id": 95,
+                "name": "tabs",
+                "kind": 1048576,
+                "kindString": "Set signature",
+                "flags": {},
+                "parameters": [
+                  {
+                    "id": 96,
+                    "name": "value",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "reference",
+                      "typeArguments": [
+                        {
+                          "type": "reference",
+                          "id": 3,
+                          "name": "SkyTabComponent"
+                        }
+                      ],
+                      "qualifiedName": "QueryList",
+                      "package": "@angular/core",
+                      "name": "QueryList"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "intrinsic",
+                  "name": "void"
+                }
+              }
+            ]
+          },
+          {
+            "id": 113,
             "name": "ngAfterViewInit",
             "kind": 2048,
             "kindString": "Method",
@@ -2434,13 +2530,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 205,
+                "line": 228,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 95,
+                "id": 114,
                 "name": "ngAfterViewInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2461,7 +2557,7 @@
             }
           },
           {
-            "id": 96,
+            "id": 115,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -2471,13 +2567,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 233,
+                "line": 255,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 97,
+                "id": 116,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2498,7 +2594,7 @@
             }
           },
           {
-            "id": 116,
+            "id": 135,
             "name": "onEndKeyDown",
             "kind": 2048,
             "kindString": "Method",
@@ -2508,13 +2604,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 278,
+                "line": 302,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 117,
+                "id": 136,
                 "name": "onEndKeyDown",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2527,7 +2623,7 @@
             ]
           },
           {
-            "id": 114,
+            "id": 133,
             "name": "onHomeKeyDown",
             "kind": 2048,
             "kindString": "Method",
@@ -2537,13 +2633,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 274,
+                "line": 298,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 115,
+                "id": 134,
                 "name": "onHomeKeyDown",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2556,7 +2652,7 @@
             ]
           },
           {
-            "id": 112,
+            "id": 131,
             "name": "onLeftKeyDown",
             "kind": 2048,
             "kindString": "Method",
@@ -2566,13 +2662,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 270,
+                "line": 294,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 113,
+                "id": 132,
                 "name": "onLeftKeyDown",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2585,7 +2681,7 @@
             ]
           },
           {
-            "id": 106,
+            "id": 125,
             "name": "onNewTabClick",
             "kind": 2048,
             "kindString": "Method",
@@ -2595,13 +2691,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 258,
+                "line": 282,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 107,
+                "id": 126,
                 "name": "onNewTabClick",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2614,7 +2710,7 @@
             ]
           },
           {
-            "id": 108,
+            "id": 127,
             "name": "onOpenTabClick",
             "kind": 2048,
             "kindString": "Method",
@@ -2624,13 +2720,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 262,
+                "line": 286,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 109,
+                "id": 128,
                 "name": "onOpenTabClick",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2643,7 +2739,7 @@
             ]
           },
           {
-            "id": 110,
+            "id": 129,
             "name": "onRightKeyDown",
             "kind": 2048,
             "kindString": "Method",
@@ -2653,13 +2749,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 266,
+                "line": 290,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 111,
+                "id": 130,
                 "name": "onRightKeyDown",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2672,7 +2768,7 @@
             ]
           },
           {
-            "id": 103,
+            "id": 122,
             "name": "onTabButtonClick",
             "kind": 2048,
             "kindString": "Method",
@@ -2682,20 +2778,20 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 254,
+                "line": 278,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 104,
+                "id": 123,
                 "name": "onTabButtonClick",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 105,
+                    "id": 124,
                     "name": "tabButton",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -2714,7 +2810,7 @@
             ]
           },
           {
-            "id": 100,
+            "id": 119,
             "name": "onTabCloseClick",
             "kind": 2048,
             "kindString": "Method",
@@ -2724,20 +2820,20 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 246,
+                "line": 270,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 101,
+                "id": 120,
                 "name": "onTabCloseClick",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 102,
+                    "id": 121,
                     "name": "tabButton",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -2756,7 +2852,7 @@
             ]
           },
           {
-            "id": 98,
+            "id": 117,
             "name": "onWindowResize",
             "kind": 2048,
             "kindString": "Method",
@@ -2766,13 +2862,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 242,
+                "line": 266,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 99,
+                "id": 118,
                 "name": "onWindowResize",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2790,57 +2886,56 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              54
+              64
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
+              85,
               75,
-              65,
-              66,
-              84,
-              87,
               76,
-              77,
+              97,
               86,
-              78,
-              83
+              87,
+              99,
+              88
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              61,
-              67,
-              79,
-              71
+              71,
+              77,
+              89,
+              81,
+              93
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              94,
-              96,
-              116,
-              114,
-              112,
-              106,
-              108,
-              110,
-              103,
-              100,
-              98
+              113,
+              115,
+              135,
+              133,
+              131,
+              125,
+              127,
+              129,
+              122,
+              119,
+              117
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-            "line": 43,
+            "line": 41,
             "character": 13
           }
         ],
@@ -2860,7 +2955,7 @@
         ]
       },
       {
-        "id": 154,
+        "id": 171,
         "name": "SkyTabsetNavButtonComponent",
         "kind": 128,
         "kindString": "Class",
@@ -2881,7 +2976,7 @@
         ],
         "children": [
           {
-            "id": 155,
+            "id": 172,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -2889,20 +2984,20 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 119,
+                "line": 114,
                 "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 156,
+                "id": 173,
                 "name": "SkyTabsetNavButtonComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 157,
+                    "id": 174,
                     "name": "logger",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -2915,14 +3010,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 154,
+                  "id": 171,
                   "name": "SkyTabsetNavButtonComponent"
                 }
               }
             ]
           },
           {
-            "id": 174,
+            "id": 191,
             "name": "ariaControls",
             "kind": 1024,
             "kindString": "Property",
@@ -2932,7 +3027,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 106,
+                "line": 100,
                 "character": 9
               }
             ],
@@ -2942,7 +3037,7 @@
             }
           },
           {
-            "id": 171,
+            "id": 188,
             "name": "buttonClassName",
             "kind": 1024,
             "kindString": "Property",
@@ -2952,7 +3047,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 103,
+                "line": 97,
                 "character": 9
               }
             ],
@@ -2962,7 +3057,7 @@
             }
           },
           {
-            "id": 166,
+            "id": 183,
             "name": "buttonText",
             "kind": 1024,
             "kindString": "Property",
@@ -2998,7 +3093,7 @@
             }
           },
           {
-            "id": 172,
+            "id": 189,
             "name": "isVisible",
             "kind": 1024,
             "kindString": "Property",
@@ -3008,7 +3103,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 104,
+                "line": 98,
                 "character": 9
               }
             ],
@@ -3019,7 +3114,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 173,
+            "id": 190,
             "name": "type",
             "kind": 1024,
             "kindString": "Property",
@@ -3029,7 +3124,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 105,
+                "line": 99,
                 "character": 9
               }
             ],
@@ -3045,10 +3140,11 @@
                   "value": "submit"
                 }
               ]
-            }
+            },
+            "defaultValue": "'submit'"
           },
           {
-            "id": 162,
+            "id": 179,
             "name": "buttonType",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3076,7 +3172,7 @@
             ],
             "getSignature": [
               {
-                "id": 163,
+                "id": 180,
                 "name": "buttonType",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3098,7 +3194,7 @@
             ],
             "setSignature": [
               {
-                "id": 164,
+                "id": 181,
                 "name": "buttonType",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -3114,7 +3210,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 165,
+                    "id": 182,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3133,7 +3229,7 @@
             ]
           },
           {
-            "id": 167,
+            "id": 184,
             "name": "disabled",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3161,7 +3257,7 @@
             ],
             "getSignature": [
               {
-                "id": 168,
+                "id": 185,
                 "name": "disabled",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3177,7 +3273,7 @@
             ],
             "setSignature": [
               {
-                "id": 169,
+                "id": 186,
                 "name": "disabled",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -3187,7 +3283,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 170,
+                    "id": 187,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3206,7 +3302,7 @@
             ]
           },
           {
-            "id": 158,
+            "id": 175,
             "name": "tabset",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3234,7 +3330,7 @@
             ],
             "getSignature": [
               {
-                "id": 159,
+                "id": 176,
                 "name": "tabset",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3250,14 +3346,14 @@
                 },
                 "type": {
                   "type": "reference",
-                  "id": 53,
+                  "id": 63,
                   "name": "SkyTabsetComponent"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 160,
+                "id": 177,
                 "name": "tabset",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -3273,14 +3369,14 @@
                 },
                 "parameters": [
                   {
-                    "id": 161,
+                    "id": 178,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 53,
+                      "id": 63,
                       "name": "SkyTabsetComponent"
                     }
                   }
@@ -3293,7 +3389,7 @@
             ]
           },
           {
-            "id": 187,
+            "id": 204,
             "name": "buttonClick",
             "kind": 2048,
             "kindString": "Method",
@@ -3303,13 +3399,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 128,
+                "line": 123,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 188,
+                "id": 205,
                 "name": "buttonClick",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -3322,7 +3418,7 @@
             ]
           },
           {
-            "id": 185,
+            "id": 202,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -3332,13 +3428,13 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-nav-button.component.ts",
-                "line": 123,
+                "line": 118,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 186,
+                "id": 203,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -3364,35 +3460,35 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              155
+              172
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              174,
-              171,
-              166,
-              172,
-              173
+              191,
+              188,
+              183,
+              189,
+              190
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              162,
-              167,
-              158
+              179,
+              184,
+              175
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              187,
-              185
+              204,
+              202
             ]
           }
         ],
@@ -3413,7 +3509,7 @@
         ]
       },
       {
-        "id": 195,
+        "id": 212,
         "name": "SkyVerticalTabComponent",
         "kind": 128,
         "kindString": "Class",
@@ -3434,7 +3530,7 @@
         ],
         "children": [
           {
-            "id": 196,
+            "id": 213,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -3448,14 +3544,14 @@
             ],
             "signatures": [
               {
-                "id": 197,
+                "id": 214,
                 "name": "SkyVerticalTabComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 198,
+                    "id": 215,
                     "name": "adapterService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3466,7 +3562,7 @@
                     }
                   },
                   {
-                    "id": 199,
+                    "id": 216,
                     "name": "changeRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3479,7 +3575,7 @@
                     }
                   },
                   {
-                    "id": 200,
+                    "id": 217,
                     "name": "tabsetService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3490,7 +3586,7 @@
                     }
                   },
                   {
-                    "id": 201,
+                    "id": 218,
                     "name": "verticalTabMediaQueryService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3503,14 +3599,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 195,
+                  "id": 212,
                   "name": "SkyVerticalTabComponent"
                 }
               }
             ]
           },
           {
-            "id": 202,
+            "id": 219,
             "name": "active",
             "kind": 1024,
             "kindString": "Property",
@@ -3546,7 +3642,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 203,
+            "id": 220,
             "name": "ariaControls",
             "kind": 1024,
             "kindString": "Property",
@@ -3587,7 +3683,7 @@
             }
           },
           {
-            "id": 208,
+            "id": 225,
             "name": "disabled",
             "kind": 1024,
             "kindString": "Property",
@@ -3623,7 +3719,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 221,
+            "id": 238,
             "name": "index",
             "kind": 1024,
             "kindString": "Property",
@@ -3643,7 +3739,7 @@
             }
           },
           {
-            "id": 222,
+            "id": 239,
             "name": "isMobile",
             "kind": 1024,
             "kindString": "Property",
@@ -3664,7 +3760,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 223,
+            "id": 240,
             "name": "tabContent",
             "kind": 1024,
             "kindString": "Property",
@@ -3706,7 +3802,7 @@
             }
           },
           {
-            "id": 210,
+            "id": 227,
             "name": "tabHeaderCount",
             "kind": 1024,
             "kindString": "Property",
@@ -3741,7 +3837,7 @@
             }
           },
           {
-            "id": 211,
+            "id": 228,
             "name": "tabHeading",
             "kind": 1024,
             "kindString": "Property",
@@ -3782,7 +3878,7 @@
             }
           },
           {
-            "id": 204,
+            "id": 221,
             "name": "ariaRole",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3810,7 +3906,7 @@
             ],
             "getSignature": [
               {
-                "id": 205,
+                "id": 222,
                 "name": "ariaRole",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3836,7 +3932,7 @@
             ],
             "setSignature": [
               {
-                "id": 206,
+                "id": 223,
                 "name": "ariaRole",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -3856,7 +3952,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 207,
+                    "id": 224,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3875,7 +3971,7 @@
             ]
           },
           {
-            "id": 217,
+            "id": 234,
             "name": "contentRendered",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3891,7 +3987,7 @@
             ],
             "getSignature": [
               {
-                "id": 218,
+                "id": 235,
                 "name": "contentRendered",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3904,14 +4000,14 @@
             ],
             "setSignature": [
               {
-                "id": 219,
+                "id": 236,
                 "name": "contentRendered",
                 "kind": 1048576,
                 "kindString": "Set signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 220,
+                    "id": 237,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -3930,7 +4026,7 @@
             ]
           },
           {
-            "id": 213,
+            "id": 230,
             "name": "tabId",
             "kind": 262144,
             "kindString": "Accessor",
@@ -3958,7 +4054,7 @@
             ],
             "getSignature": [
               {
-                "id": 214,
+                "id": 231,
                 "name": "tabId",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -3980,7 +4076,7 @@
             ],
             "setSignature": [
               {
-                "id": 215,
+                "id": 232,
                 "name": "tabId",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -3996,7 +4092,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 216,
+                    "id": 233,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4015,7 +4111,7 @@
             ]
           },
           {
-            "id": 240,
+            "id": 257,
             "name": "activateTab",
             "kind": 2048,
             "kindString": "Method",
@@ -4031,7 +4127,7 @@
             ],
             "signatures": [
               {
-                "id": 241,
+                "id": 258,
                 "name": "activateTab",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4044,7 +4140,7 @@
             ]
           },
           {
-            "id": 236,
+            "id": 253,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -4060,7 +4156,7 @@
             ],
             "signatures": [
               {
-                "id": 237,
+                "id": 254,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4081,7 +4177,7 @@
             }
           },
           {
-            "id": 234,
+            "id": 251,
             "name": "ngOnInit",
             "kind": 2048,
             "kindString": "Method",
@@ -4097,7 +4193,7 @@
             ],
             "signatures": [
               {
-                "id": 235,
+                "id": 252,
                 "name": "ngOnInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4118,7 +4214,7 @@
             }
           },
           {
-            "id": 242,
+            "id": 259,
             "name": "onTabButtonKeyUp",
             "kind": 2048,
             "kindString": "Method",
@@ -4134,14 +4230,14 @@
             ],
             "signatures": [
               {
-                "id": 243,
+                "id": 260,
                 "name": "onTabButtonKeyUp",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 244,
+                    "id": 261,
                     "name": "event",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4162,7 +4258,7 @@
             ]
           },
           {
-            "id": 245,
+            "id": 262,
             "name": "onWindowResize",
             "kind": 2048,
             "kindString": "Method",
@@ -4192,7 +4288,7 @@
             ],
             "signatures": [
               {
-                "id": 246,
+                "id": 263,
                 "name": "onWindowResize",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4205,7 +4301,7 @@
             ]
           },
           {
-            "id": 247,
+            "id": 264,
             "name": "tabDeactivated",
             "kind": 2048,
             "kindString": "Method",
@@ -4221,7 +4317,7 @@
             ],
             "signatures": [
               {
-                "id": 248,
+                "id": 265,
                 "name": "tabDeactivated",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4234,7 +4330,7 @@
             ]
           },
           {
-            "id": 238,
+            "id": 255,
             "name": "tabIndex",
             "kind": 2048,
             "kindString": "Method",
@@ -4250,7 +4346,7 @@
             ],
             "signatures": [
               {
-                "id": 239,
+                "id": 256,
                 "name": "tabIndex",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4268,43 +4364,43 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              196
+              213
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              202,
-              203,
-              208,
-              221,
-              222,
-              223,
-              210,
-              211
+              219,
+              220,
+              225,
+              238,
+              239,
+              240,
+              227,
+              228
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              204,
-              217,
-              213
+              221,
+              234,
+              230
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              240,
-              236,
-              234,
-              242,
-              245,
-              247,
-              238
+              257,
+              253,
+              251,
+              259,
+              262,
+              264,
+              255
             ]
           }
         ],
@@ -4331,7 +4427,7 @@
         ]
       },
       {
-        "id": 251,
+        "id": 268,
         "name": "SkySectionedFormSectionComponent",
         "kind": 128,
         "kindString": "Class",
@@ -4355,7 +4451,7 @@
         ],
         "children": [
           {
-            "id": 252,
+            "id": 269,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -4369,26 +4465,26 @@
             ],
             "signatures": [
               {
-                "id": 253,
+                "id": 270,
                 "name": "SkySectionedFormSectionComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 254,
+                    "id": 271,
                     "name": "sectionedFormService",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 335,
+                      "id": 352,
                       "name": "SkySectionedFormService"
                     }
                   },
                   {
-                    "id": 255,
+                    "id": 272,
                     "name": "tabsetService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4399,7 +4495,7 @@
                     }
                   },
                   {
-                    "id": 256,
+                    "id": 273,
                     "name": "changeRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4414,14 +4510,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 251,
+                  "id": 268,
                   "name": "SkySectionedFormSectionComponent"
                 }
               }
             ]
           },
           {
-            "id": 261,
+            "id": 278,
             "name": "active",
             "kind": 1024,
             "kindString": "Property",
@@ -4463,7 +4559,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 263,
+            "id": 280,
             "name": "fieldInvalid",
             "kind": 1024,
             "kindString": "Property",
@@ -4483,7 +4579,7 @@
             }
           },
           {
-            "id": 262,
+            "id": 279,
             "name": "fieldRequired",
             "kind": 1024,
             "kindString": "Property",
@@ -4503,7 +4599,7 @@
             }
           },
           {
-            "id": 259,
+            "id": 276,
             "name": "heading",
             "kind": 1024,
             "kindString": "Property",
@@ -4544,7 +4640,7 @@
             }
           },
           {
-            "id": 260,
+            "id": 277,
             "name": "itemCount",
             "kind": 1024,
             "kindString": "Property",
@@ -4579,7 +4675,7 @@
             }
           },
           {
-            "id": 258,
+            "id": 275,
             "name": "sectionContentId",
             "kind": 1024,
             "kindString": "Property",
@@ -4600,7 +4696,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 257,
+            "id": 274,
             "name": "sectionTabId",
             "kind": 1024,
             "kindString": "Property",
@@ -4621,7 +4717,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 264,
+            "id": 281,
             "name": "tab",
             "kind": 1024,
             "kindString": "Property",
@@ -4651,12 +4747,12 @@
             ],
             "type": {
               "type": "reference",
-              "id": 195,
+              "id": 212,
               "name": "SkyVerticalTabComponent"
             }
           },
           {
-            "id": 271,
+            "id": 288,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -4672,7 +4768,7 @@
             ],
             "signatures": [
               {
-                "id": 272,
+                "id": 289,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4693,7 +4789,7 @@
             }
           },
           {
-            "id": 269,
+            "id": 286,
             "name": "ngOnInit",
             "kind": 2048,
             "kindString": "Method",
@@ -4709,7 +4805,7 @@
             ],
             "signatures": [
               {
-                "id": 270,
+                "id": 287,
                 "name": "ngOnInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -4735,29 +4831,29 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              252
+              269
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              261,
-              263,
-              262,
-              259,
-              260,
-              258,
-              257,
-              264
+              278,
+              280,
+              279,
+              276,
+              277,
+              275,
+              274,
+              281
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              271,
-              269
+              288,
+              286
             ]
           }
         ],
@@ -4784,7 +4880,7 @@
         ]
       },
       {
-        "id": 273,
+        "id": 290,
         "name": "SkyVerticalTabsetComponent",
         "kind": 128,
         "kindString": "Class",
@@ -4805,7 +4901,7 @@
         ],
         "children": [
           {
-            "id": 274,
+            "id": 291,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -4819,14 +4915,14 @@
             ],
             "signatures": [
               {
-                "id": 275,
+                "id": 292,
                 "name": "SkyVerticalTabsetComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 276,
+                    "id": 293,
                     "name": "adapterService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4837,7 +4933,7 @@
                     }
                   },
                   {
-                    "id": 277,
+                    "id": 294,
                     "name": "tabService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4848,7 +4944,7 @@
                     }
                   },
                   {
-                    "id": 278,
+                    "id": 295,
                     "name": "resources",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4859,7 +4955,7 @@
                     }
                   },
                   {
-                    "id": 279,
+                    "id": 296,
                     "name": "changeRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -4874,14 +4970,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 273,
+                  "id": 290,
                   "name": "SkyVerticalTabsetComponent"
                 }
               }
             ]
           },
           {
-            "id": 288,
+            "id": 305,
             "name": "activeChange",
             "kind": 1024,
             "kindString": "Property",
@@ -4925,7 +5021,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 281,
+            "id": 298,
             "name": "ariaLabel",
             "kind": 1024,
             "kindString": "Property",
@@ -4960,7 +5056,7 @@
             }
           },
           {
-            "id": 282,
+            "id": 299,
             "name": "ariaLabelledBy",
             "kind": 1024,
             "kindString": "Property",
@@ -4995,7 +5091,7 @@
             }
           },
           {
-            "id": 290,
+            "id": 307,
             "name": "content",
             "kind": 1024,
             "kindString": "Property",
@@ -5037,7 +5133,7 @@
             }
           },
           {
-            "id": 291,
+            "id": 308,
             "name": "contentWrapper",
             "kind": 1024,
             "kindString": "Property",
@@ -5079,7 +5175,7 @@
             }
           },
           {
-            "id": 292,
+            "id": 309,
             "name": "isMobile",
             "kind": 1024,
             "kindString": "Property",
@@ -5100,7 +5196,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 287,
+            "id": 304,
             "name": "maintainTabContent",
             "kind": 1024,
             "kindString": "Property",
@@ -5142,7 +5238,7 @@
             "defaultValue": "false"
           },
           {
-            "id": 280,
+            "id": 297,
             "name": "showTabsText",
             "kind": 1024,
             "kindString": "Property",
@@ -5177,7 +5273,7 @@
             }
           },
           {
-            "id": 289,
+            "id": 306,
             "name": "tabGroups",
             "kind": 1024,
             "kindString": "Property",
@@ -5219,7 +5315,7 @@
             }
           },
           {
-            "id": 283,
+            "id": 300,
             "name": "ariaRole",
             "kind": 262144,
             "kindString": "Accessor",
@@ -5247,7 +5343,7 @@
             ],
             "getSignature": [
               {
-                "id": 284,
+                "id": 301,
                 "name": "ariaRole",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -5273,7 +5369,7 @@
             ],
             "setSignature": [
               {
-                "id": 285,
+                "id": 302,
                 "name": "ariaRole",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -5293,7 +5389,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 286,
+                    "id": 303,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -5312,7 +5408,7 @@
             ]
           },
           {
-            "id": 301,
+            "id": 318,
             "name": "ngAfterViewChecked",
             "kind": 2048,
             "kindString": "Method",
@@ -5328,7 +5424,7 @@
             ],
             "signatures": [
               {
-                "id": 302,
+                "id": 319,
                 "name": "ngAfterViewChecked",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5349,7 +5445,7 @@
             }
           },
           {
-            "id": 303,
+            "id": 320,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -5365,7 +5461,7 @@
             ],
             "signatures": [
               {
-                "id": 304,
+                "id": 321,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5386,7 +5482,7 @@
             }
           },
           {
-            "id": 299,
+            "id": 316,
             "name": "ngOnInit",
             "kind": 2048,
             "kindString": "Method",
@@ -5402,7 +5498,7 @@
             ],
             "signatures": [
               {
-                "id": 300,
+                "id": 317,
                 "name": "ngOnInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5428,40 +5524,40 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              274
+              291
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              288,
+              305,
+              314,
+              298,
+              299,
+              307,
+              308,
+              309,
+              304,
               297,
-              281,
-              282,
-              290,
-              291,
-              292,
-              287,
-              280,
-              289,
-              298
+              306,
+              315
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              283
+              300
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              301,
-              303,
-              299
+              318,
+              320,
+              316
             ]
           }
         ],
@@ -5494,7 +5590,7 @@
         ]
       },
       {
-        "id": 305,
+        "id": 322,
         "name": "SkyVerticalTabsetGroupComponent",
         "kind": 128,
         "kindString": "Class",
@@ -5515,7 +5611,7 @@
         ],
         "children": [
           {
-            "id": 306,
+            "id": 323,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -5529,14 +5625,14 @@
             ],
             "signatures": [
               {
-                "id": 307,
+                "id": 324,
                 "name": "SkyVerticalTabsetGroupComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 308,
+                    "id": 325,
                     "name": "tabService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -5547,7 +5643,7 @@
                     }
                   },
                   {
-                    "id": 309,
+                    "id": 326,
                     "name": "changeRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -5562,14 +5658,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 305,
+                  "id": 322,
                   "name": "SkyVerticalTabsetGroupComponent"
                 }
               }
             ]
           },
           {
-            "id": 310,
+            "id": 327,
             "name": "disabled",
             "kind": 1024,
             "kindString": "Property",
@@ -5610,7 +5706,7 @@
             }
           },
           {
-            "id": 311,
+            "id": 328,
             "name": "groupHeading",
             "kind": 1024,
             "kindString": "Property",
@@ -5645,7 +5741,7 @@
             }
           },
           {
-            "id": 312,
+            "id": 329,
             "name": "open",
             "kind": 1024,
             "kindString": "Property",
@@ -5686,7 +5782,7 @@
             }
           },
           {
-            "id": 313,
+            "id": 330,
             "name": "tabs",
             "kind": 1024,
             "kindString": "Property",
@@ -5719,7 +5815,7 @@
               "typeArguments": [
                 {
                   "type": "reference",
-                  "id": 195,
+                  "id": 212,
                   "name": "SkyVerticalTabComponent"
                 }
               ],
@@ -5729,7 +5825,7 @@
             }
           },
           {
-            "id": 320,
+            "id": 337,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -5745,7 +5841,7 @@
             ],
             "signatures": [
               {
-                "id": 321,
+                "id": 338,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5766,7 +5862,7 @@
             }
           },
           {
-            "id": 318,
+            "id": 335,
             "name": "ngOnInit",
             "kind": 2048,
             "kindString": "Method",
@@ -5782,7 +5878,7 @@
             ],
             "signatures": [
               {
-                "id": 319,
+                "id": 336,
                 "name": "ngOnInit",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5803,7 +5899,7 @@
             }
           },
           {
-            "id": 324,
+            "id": 341,
             "name": "subMenuOpen",
             "kind": 2048,
             "kindString": "Method",
@@ -5819,7 +5915,7 @@
             ],
             "signatures": [
               {
-                "id": 325,
+                "id": 342,
                 "name": "subMenuOpen",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5832,7 +5928,7 @@
             ]
           },
           {
-            "id": 326,
+            "id": 343,
             "name": "tabClicked",
             "kind": 2048,
             "kindString": "Method",
@@ -5848,7 +5944,7 @@
             ],
             "signatures": [
               {
-                "id": 327,
+                "id": 344,
                 "name": "tabClicked",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5861,7 +5957,7 @@
             ]
           },
           {
-            "id": 328,
+            "id": 345,
             "name": "tabsHidden",
             "kind": 2048,
             "kindString": "Method",
@@ -5877,7 +5973,7 @@
             ],
             "signatures": [
               {
-                "id": 329,
+                "id": 346,
                 "name": "tabsHidden",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5890,7 +5986,7 @@
             ]
           },
           {
-            "id": 330,
+            "id": 347,
             "name": "tabsShown",
             "kind": 2048,
             "kindString": "Method",
@@ -5906,7 +6002,7 @@
             ],
             "signatures": [
               {
-                "id": 331,
+                "id": 348,
                 "name": "tabsShown",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5919,7 +6015,7 @@
             ]
           },
           {
-            "id": 322,
+            "id": 339,
             "name": "toggleMenuOpen",
             "kind": 2048,
             "kindString": "Method",
@@ -5935,7 +6031,7 @@
             ],
             "signatures": [
               {
-                "id": 323,
+                "id": 340,
                 "name": "toggleMenuOpen",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -5953,30 +6049,30 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              306
+              323
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              310,
-              311,
-              312,
-              313
+              327,
+              328,
+              329,
+              330
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              320,
-              318,
-              324,
-              326,
-              328,
-              330,
-              322
+              337,
+              335,
+              341,
+              343,
+              345,
+              347,
+              339
             ]
           }
         ],
@@ -6003,14 +6099,14 @@
         ]
       },
       {
-        "id": 349,
+        "id": 366,
         "name": "SkyTabsetTabIndexesChange",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
         "children": [
           {
-            "id": 350,
+            "id": 367,
             "name": "tabs",
             "kind": 1024,
             "kindString": "Property",
@@ -6029,18 +6125,20 @@
               "elementType": {
                 "type": "reflection",
                 "declaration": {
-                  "id": 351,
+                  "id": 368,
                   "name": "__type",
                   "kind": 65536,
                   "kindString": "Type literal",
                   "flags": {},
                   "children": [
                     {
-                      "id": 352,
+                      "id": 369,
                       "name": "tabHeading",
                       "kind": 1024,
                       "kindString": "Property",
-                      "flags": {},
+                      "flags": {
+                        "isOptional": true
+                      },
                       "sources": [
                         {
                           "fileName": "src/lib/modules/tabs/tabset-tab-indexes-change.ts",
@@ -6054,11 +6152,13 @@
                       }
                     },
                     {
-                      "id": 353,
+                      "id": 370,
                       "name": "tabIndex",
                       "kind": 1024,
                       "kindString": "Property",
-                      "flags": {},
+                      "flags": {
+                        "isOptional": true
+                      },
                       "sources": [
                         {
                           "fileName": "src/lib/modules/tabs/tabset-tab-indexes-change.ts",
@@ -6068,7 +6168,7 @@
                       ],
                       "type": {
                         "type": "reference",
-                        "id": 346,
+                        "id": 363,
                         "name": "SkyTabIndex"
                       }
                     }
@@ -6078,8 +6178,8 @@
                       "title": "Properties",
                       "kind": 1024,
                       "children": [
-                        352,
-                        353
+                        369,
+                        370
                       ]
                     }
                   ]
@@ -6093,7 +6193,7 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              350
+              367
             ]
           }
         ],
@@ -6106,7 +6206,7 @@
         ]
       },
       {
-        "id": 346,
+        "id": 363,
         "name": "SkyTabIndex",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -6133,7 +6233,7 @@
         }
       },
       {
-        "id": 347,
+        "id": 364,
         "name": "SkyTabsetButtonsDisplayMode",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -6160,7 +6260,7 @@
         }
       },
       {
-        "id": 348,
+        "id": 365,
         "name": "SkyTabsetStyle",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -6212,7 +6312,7 @@
     {
       "fileName": "information-form-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div style=\"display: flex\">\n    <div class=\"sky-margin-inline-lg\" style=\"flex: 1\">\n      <sky-input-box>\n        <label\n          class=\"sky-control-label sky-control-label-required\"\n          [for]=\"nameInput.id\"\n        >\n          Name\n        </label>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"name\"\n          skyId\n          type=\"text\"\n          #nameInput\n        />\n      </sky-input-box>\n    </div>\n    <div style=\"flex: 1\">\n      <sky-input-box>\n        <label class=\"sky-control-label\" [for]=\"idInput.id\"> ID </label>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"id\"\n          type=\"text\"\n          #idInput\n        />\n      </sky-input-box>\n      <div *ngIf=\"myForm.get('id')?.invalid\" class=\"alert alert-danger\"></div>\n      <div\n        *ngIf=\"myForm.get('id')?.invalid\"\n        class=\"alert alert-danger sky-error-label\"\n      >\n        Enter a valid value.\n      </div>\n    </div>\n  </div>\n</form>\n"
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div style=\"display: flex\">\n    <div class=\"sky-margin-inline-lg\" style=\"flex: 1\">\n      <sky-input-box>\n        <label\n          class=\"sky-control-label sky-control-label-required\"\n          [for]=\"nameInput.id\"\n        >\n          Name\n        </label>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"name\"\n          skyId\n          type=\"text\"\n          #nameInput\n        />\n      </sky-input-box>\n    </div>\n    <div style=\"flex: 1\">\n      <sky-input-box>\n        <label class=\"sky-control-label\" [for]=\"idInput.id\"> ID </label>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"id\"\n          type=\"text\"\n          [attr.aria-describedby]=\"inputError.id\"\n          #idInput\n        />\n        <span class=\"sky-error-indicator\" skyId #inputError=\"skyId\">\n          <sky-status-indicator\n            *ngIf=\"myForm.get('id')?.invalid\"\n            indicatorType=\"danger\"\n            descriptionType=\"error\"\n          >\n            Enter a valid value.\n          </sky-status-indicator>\n        </span>\n      </sky-input-box>\n    </div>\n  </div>\n</form>\n"
     },
     {
       "fileName": "information-form-demo.component.ts",
@@ -6242,7 +6342,7 @@
     {
       "fileName": "sectioned-form-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\nimport { InformationFormDemoComponent } from './information-form-demo.component';\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    AddressFormDemoComponent,\n    InformationFormDemoComponent,\n    PhoneFormDemoComponent,\n    SectionedFormModalDemoComponent,\n    SectionedFormDemoComponent,\n  ],\n  exports: [SectionedFormDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule,\n  ],\n})\nexport class SectionedFormDemoModule {}\n"
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\nimport { InformationFormDemoComponent } from './information-form-demo.component';\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    AddressFormDemoComponent,\n    InformationFormDemoComponent,\n    PhoneFormDemoComponent,\n    SectionedFormModalDemoComponent,\n    SectionedFormDemoComponent,\n  ],\n  exports: [SectionedFormDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule,\n    SkyStatusIndicatorModule,\n  ],\n})\nexport class SectionedFormDemoModule {}\n"
     },
     {
       "fileName": "sectioned-form-modal-demo.component.html",
@@ -6254,21 +6354,6 @@
       "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.ts",
       "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ViewChild,\n} from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkySectionedFormComponent } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-sectioned-form-modal-demo',\n  templateUrl: './sectioned-form-modal-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormModalDemoComponent {\n  public activeIndexDisplay: number | undefined;\n\n  public activeTab = true;\n\n  @ViewChild(SkySectionedFormComponent)\n  public sectionedFormComponent: SkySectionedFormComponent | undefined;\n\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    public modalInstance: SkyModalInstance,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#changeDetector = changeDetector;\n  }\n\n  public onIndexChanged(newIndex: number): void {\n    this.activeIndexDisplay = newIndex;\n    this.#changeDetector.markForCheck();\n  }\n\n  public tabsHidden(): boolean {\n    return !this.sectionedFormComponent?.tabsVisible();\n  }\n\n  public showTabs(): void {\n    this.sectionedFormComponent!.showTabs();\n  }\n}\n"
     },
-    {
-      "fileName": "tabs-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/counts/tabs-demo.component.html",
-      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab [tabHeaderCount]=\"'25012'\" [tabHeading]=\"'Tab 1'\">\n    A list containing 25012 items\n  </sky-tab>\n  <sky-tab [tabHeaderCount]=\"'280'\" [tabHeading]=\"'Tab 2'\">\n    A list containing 280 items\n  </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 3'\">\n    This tab doesn't have a list of items\n  </sky-tab>\n</sky-tabset>\n"
-    },
-    {
-      "fileName": "tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/counts/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {}\n"
-    },
-    {
-      "fileName": "tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/counts/tabs-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
-    },
     {
       "fileName": "tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.html",
@@ -6277,7 +6362,7 @@
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'Content for Tab 1',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'Content for Tab 2',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: 'Content for Tab 3',\n    },\n  ];\n\n  private tabCounter = 3;\n\n  public onNewTabClick(): void {\n    this.tabCounter++;\n\n    this.tabArray.push({\n      tabHeading: 'Tab ' + this.tabCounter,\n      tabContent: 'Content for Tab' + this.tabCounter,\n    });\n  }\n\n  public onCloseClick(arrayIndex: number): void {\n    this.tabArray.splice(arrayIndex, 1);\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'Content for Tab 1',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'Content for Tab 2',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: 'Content for Tab 3',\n    },\n  ];\n\n  #tabCounter = 3;\n\n  public onNewTabClick(): void {\n    this.#tabCounter++;\n\n    this.tabArray.push({\n      tabHeading: 'Tab ' + this.#tabCounter,\n      tabContent: 'Content for Tab' + this.#tabCounter,\n    });\n  }\n\n  public onCloseClick(arrayIndex: number): void {\n    this.tabArray.splice(arrayIndex, 1);\n  }\n}\n"
     },
     {
       "fileName": "tabs-demo.module.ts",
@@ -6287,12 +6372,12 @@
     {
       "fileName": "tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.html",
-      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab\n    *ngFor=\"let tab of tabArray\"\n    [tabHeaderCount]=\"tab.tabHeaderCount\"\n    [tabHeading]=\"tab.tabHeading\"\n  >\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab *ngFor=\"let tab of tabArray\" [tabHeading]=\"tab.tabHeading\">\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'A list containing 25012 items',\n      tabHeaderCount: '25012',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'A list containing 280 items',\n      tabHeaderCount: '280',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: \"This tab doesn't have a list of items\",\n    },\n  ];\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'A list containing 25012 items',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'A list containing 280 items',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: \"This tab doesn't have a list of items\",\n    },\n  ];\n}\n"
     },
     {
       "fileName": "tabs-demo.module.ts",
@@ -6362,12 +6447,12 @@
     {
       "fileName": "wizard-demo-modal.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.html",
-      "rawContents": "<form [formGroup]=\"newMemberForm\" (ngSubmit)=\"onSave()\">\n  <sky-modal>\n    <sky-modal-header>\n      {{ title }}\n    </sky-modal-header>\n    <sky-modal-content>\n      <sky-tabset\n        ariaLabel=\"Sign-up steps\"\n        [(active)]=\"activeIndex\"\n        tabStyle=\"wizard\"\n        #wizardDemo\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"firstNameInput.id\"\n                    >First Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"firstName\"\n                    skyId\n                    #firstNameInput=\"skyId\"\n                  />\n                  <div\n                    *ngIf=\"\n                      (firstName.touched || firstName.dirty) && !firstName.valid\n                    \"\n                    class=\"sky-error-label\"\n                  >\n                    Enter your first name.\n                  </div>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label class=\"sky-control-label\" [for]=\"middleNameInput.id\"\n                    >Middle Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"middleName\"\n                    skyId\n                    #middleNameInput=\"skyId\"\n                  />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"lastNameInput.id\"\n                    >Last Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"lastName\"\n                    skyId\n                    #lastNameInput=\"skyId\"\n                  />\n                  <div\n                    *ngIf=\"\n                      (lastName.touched || lastName.dirty) && !lastName.valid\n                    \"\n                    class=\"sky-error-label\"\n                  >\n                    Enter your last name.\n                  </div>\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"2. Contact Information\" [disabled]=\"step2Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"phoneNumberInput.id\"\n                    >Phone Number</label\n                  >\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input\n                      formControlName=\"phoneNumber\"\n                      skyId\n                      #phoneNumberInput=\"skyId\"\n                      skyPhoneFieldInput\n                    />\n                  </sky-phone-field>\n                  <div\n                    *ngIf=\"\n                      (phoneNumber.touched || phoneNumber.dirty) &&\n                      !phoneNumber.valid\n                    \"\n                    class=\"sky-error-label\"\n                  >\n                    Enter a valid phone number.\n                  </div>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"emailInput.id\"\n                    >Email</label\n                  >\n                  <input\n                    type=\"email\"\n                    class=\"sky-form-control\"\n                    formControlName=\"email\"\n                    skyId\n                    #emailInput=\"skyId\"\n                  />\n                  <div\n                    *ngIf=\"(email.touched || email.dirty) && !email.valid\"\n                    class=\"sky-error-label\"\n                  >\n                    Enter a valid email address.\n                  </div>\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"step3Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"termsAccepted\" [required]=\"true\">\n                  <sky-checkbox-label>\n                    Accept terms and conditions\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"mailingList\">\n                  <sky-checkbox-label>\n                    Sign up for our email newsletter\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button\n        buttonType=\"previous\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"next\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"saveDisabled\"\n      ></sky-tabset-nav-button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n"
+      "rawContents": "<form [formGroup]=\"newMemberForm\" (ngSubmit)=\"onSave()\">\n  <sky-modal>\n    <sky-modal-header>\n      {{ title }}\n    </sky-modal-header>\n    <sky-modal-content>\n      <sky-tabset\n        ariaLabel=\"Sign-up steps\"\n        [(active)]=\"activeIndex\"\n        tabStyle=\"wizard\"\n        #wizardDemo\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"firstNameInput.id\"\n                    >First Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"firstName\"\n                    [attr.aria-describedby]=\"firstNameError.id\"\n                    skyId\n                    #firstNameInput=\"skyId\"\n                  />\n                  <span\n                    class=\"sky-error-indicator\"\n                    skyId\n                    #firstNameError=\"skyId\"\n                  >\n                    <sky-status-indicator\n                      *ngIf=\"\n                        (firstName.touched || firstName.dirty) &&\n                        !firstName.valid\n                      \"\n                      indicatorType=\"danger\"\n                      descriptionType=\"error\"\n                    >\n                      First name is required.\n                    </sky-status-indicator>\n                  </span>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label class=\"sky-control-label\" [for]=\"middleNameInput.id\"\n                    >Middle Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"middleName\"\n                    skyId\n                    #middleNameInput=\"skyId\"\n                  />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"lastNameInput.id\"\n                    >Last Name</label\n                  >\n                  <input\n                    type=\"text\"\n                    class=\"sky-form-control\"\n                    formControlName=\"lastName\"\n                    [attr.aria-describedby]=\"lastNameError.id\"\n                    skyId\n                    #lastNameInput=\"skyId\"\n                  />\n                  <span\n                    class=\"sky-error-indicator\"\n                    skyId\n                    #lastNameError=\"skyId\"\n                  >\n                    <sky-status-indicator\n                      *ngIf=\"\n                        (lastName.touched || lastName.dirty) && !lastName.valid\n                      \"\n                      indicatorType=\"danger\"\n                      descriptionType=\"error\"\n                    >\n                      Last name is required.\n                    </sky-status-indicator>\n                  </span>\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"2. Contact Information\" [disabled]=\"step2Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"phoneNumberInput.id\"\n                    >Phone Number</label\n                  >\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input\n                      formControlName=\"phoneNumber\"\n                      [attr.aria-describedby]=\"phoneNumberError.id\"\n                      skyId\n                      #phoneNumberInput=\"skyId\"\n                      skyPhoneFieldInput\n                    />\n                  </sky-phone-field>\n                  <span\n                    class=\"sky-error-indicator\"\n                    skyId\n                    #phoneNumberError=\"skyId\"\n                  >\n                    <sky-status-indicator\n                      *ngIf=\"\n                        (phoneNumber.touched || phoneNumber.dirty) &&\n                        !phoneNumber.valid\n                      \"\n                      indicatorType=\"danger\"\n                      descriptionType=\"error\"\n                    >\n                      A valid phone number is required.\n                    </sky-status-indicator>\n                  </span>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box>\n                  <label\n                    class=\"sky-control-label sky-control-label-required\"\n                    [for]=\"emailInput.id\"\n                    >Email</label\n                  >\n                  <input\n                    type=\"email\"\n                    class=\"sky-form-control\"\n                    formControlName=\"email\"\n                    [attr.aria-describedby]=\"emailError.id\"\n                    skyId\n                    #emailInput=\"skyId\"\n                  />\n                  <span class=\"sky-error-indicator\" skyId #emailError=\"skyId\">\n                    <sky-status-indicator\n                      *ngIf=\"(email.touched || email.dirty) && !email.valid\"\n                      indicatorType=\"danger\"\n                      descriptionType=\"error\"\n                    >\n                      A valid email address is required.\n                    </sky-status-indicator>\n                  </span>\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"step3Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"termsAccepted\" [required]=\"true\">\n                  <sky-checkbox-label>\n                    Accept terms and conditions\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"mailingList\">\n                  <sky-checkbox-label>\n                    Sign up for our email newsletter\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button\n        buttonType=\"previous\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"next\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"saveDisabled\"\n      ></sky-tabset-nav-button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n"
     },
     {
       "fileName": "wizard-demo-modal.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-wizard-demo-modal',\n  templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent implements OnInit {\n  constructor(\n    public instance: SkyModalInstance,\n    private formBuilder: UntypedFormBuilder\n  ) {}\n\n  public newMemberForm: UntypedFormGroup;\n  public title = 'New Member Sign-up';\n  public activeIndex: SkyTabIndex = 0;\n  public step2Disabled = true;\n  public step3Disabled = true;\n  public saveDisabled = true;\n\n  public firstName: UntypedFormControl;\n  public middleName: UntypedFormControl;\n  public lastName: UntypedFormControl;\n  public phoneNumber: UntypedFormControl;\n  public email: UntypedFormControl;\n  public termsAccepted: UntypedFormControl;\n  public mailingList: UntypedFormControl;\n\n  public ngOnInit(): void {\n    this.firstName = new UntypedFormControl('', Validators.required);\n    this.middleName = new UntypedFormControl();\n    this.lastName = new UntypedFormControl('', Validators.required);\n    this.phoneNumber = new UntypedFormControl('', Validators.required);\n    this.email = new UntypedFormControl('', Validators.required);\n    this.termsAccepted = new UntypedFormControl(false);\n    this.mailingList = new UntypedFormControl(false);\n\n    this.newMemberForm = this.formBuilder.group({\n      firstName: this.firstName,\n      middleName: this.middleName,\n      lastName: this.lastName,\n      phoneNumber: this.phoneNumber,\n      email: this.email,\n      termsAccepted: this.termsAccepted,\n      mailingList: this.mailingList,\n    });\n\n    this.newMemberForm.valueChanges.subscribe(() => {\n      this.checkRequirementsMet();\n    });\n  }\n\n  public checkRequirementsMet(): void {\n    this.step2Disabled = !(\n      this.newMemberForm.get('firstName').value &&\n      this.newMemberForm.get('lastName').value\n    );\n    this.step3Disabled = !(\n      this.newMemberForm.get('phoneNumber').value &&\n      this.newMemberForm.get('phoneNumber').valid &&\n      this.newMemberForm.get('email').value\n    );\n    this.saveDisabled = !this.newMemberForm.get('termsAccepted').value;\n  }\n\n  public onCancelClick(): void {\n    this.instance.cancel();\n  }\n\n  public onSave(): void {\n    this.instance.save();\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-wizard-demo-modal',\n  templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent implements OnInit {\n  #formBuilder: UntypedFormBuilder;\n\n  constructor(\n    public instance: SkyModalInstance,\n    formBuilder: UntypedFormBuilder\n  ) {\n    this.#formBuilder = formBuilder;\n  }\n\n  public newMemberForm: UntypedFormGroup;\n  public title = 'New Member Sign-up';\n  public activeIndex: SkyTabIndex = 0;\n  public step2Disabled = true;\n  public step3Disabled = true;\n  public saveDisabled = true;\n\n  public firstName: UntypedFormControl;\n  public middleName: UntypedFormControl;\n  public lastName: UntypedFormControl;\n  public phoneNumber: UntypedFormControl;\n  public email: UntypedFormControl;\n  public termsAccepted: UntypedFormControl;\n  public mailingList: UntypedFormControl;\n\n  public ngOnInit(): void {\n    this.firstName = new UntypedFormControl('', Validators.required);\n    this.middleName = new UntypedFormControl();\n    this.lastName = new UntypedFormControl('', Validators.required);\n    this.phoneNumber = new UntypedFormControl('', Validators.required);\n    this.email = new UntypedFormControl('', Validators.required);\n    this.termsAccepted = new UntypedFormControl(false);\n    this.mailingList = new UntypedFormControl(false);\n\n    this.newMemberForm = this.#formBuilder.group({\n      firstName: this.firstName,\n      middleName: this.middleName,\n      lastName: this.lastName,\n      phoneNumber: this.phoneNumber,\n      email: this.email,\n      termsAccepted: this.termsAccepted,\n      mailingList: this.mailingList,\n    });\n\n    this.newMemberForm.valueChanges.subscribe(() => {\n      this.checkRequirementsMet();\n    });\n  }\n\n  public checkRequirementsMet(): void {\n    this.step2Disabled = !(\n      this.newMemberForm.get('firstName').value &&\n      this.newMemberForm.get('lastName').value\n    );\n    this.step3Disabled = !(\n      this.newMemberForm.get('phoneNumber').value &&\n      this.newMemberForm.get('phoneNumber').valid &&\n      this.newMemberForm.get('email').value\n    );\n    this.saveDisabled = !this.newMemberForm.get('termsAccepted').value;\n  }\n\n  public onCancelClick(): void {\n    this.instance.cancel();\n  }\n\n  public onSave(): void {\n    this.instance.save();\n  }\n}\n"
     },
     {
       "fileName": "wizard-demo.component.html",
@@ -6377,12 +6462,12 @@
     {
       "fileName": "wizard-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\n\n@Component({\n  selector: 'app-wizard-demo',\n  templateUrl: './wizard-demo.component.html',\n})\nexport class WizardDemoComponent {\n  constructor(private modalService: SkyModalService) {}\n\n  public modalSize = 'large';\n\n  public openWizard(): void {\n    this.modalService.open(WizardDemoModalComponent, { size: this.modalSize });\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\n\n@Component({\n  selector: 'app-wizard-demo',\n  templateUrl: './wizard-demo.component.html',\n})\nexport class WizardDemoComponent {\n  #modalService: SkyModalService;\n\n  constructor(modalService: SkyModalService) {\n    this.#modalService = modalService;\n  }\n\n  public modalSize = 'large';\n\n  public openWizard(): void {\n    this.#modalService.open(WizardDemoModalComponent, { size: this.modalSize });\n  }\n}\n"
     },
     {
       "fileName": "wizard-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyPhoneFieldModule } from '@skyux/phone-field';\nimport { SkyTabsModule } from '@skyux/tabs';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n  declarations: [WizardDemoComponent, WizardDemoModalComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyFluidGridModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyPhoneFieldModule,\n    SkyTabsModule,\n    SkyThemeModule,\n  ],\n  exports: [WizardDemoComponent],\n})\nexport class WizardDemoModule {}\n"
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyPhoneFieldModule } from '@skyux/phone-field';\nimport { SkyTabsModule } from '@skyux/tabs';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n  declarations: [WizardDemoComponent, WizardDemoModalComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyFluidGridModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyPhoneFieldModule,\n    SkyStatusIndicatorModule,\n    SkyTabsModule,\n    SkyThemeModule,\n  ],\n  exports: [WizardDemoComponent],\n})\nexport class WizardDemoModule {}\n"
     }
   ]
 }