@skyux/tabs 5.0.0 → 5.0.4

package/documentation.json

@@ -41,7 +41,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-sectioned-form',\n  templateUrl: './sectioned-form.component.html',\n  styleUrls: ['./sectioned-form.component.scss'],\n  providers: [SkyVerticalTabsetService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger(\n      'tabEnter', [\n        transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n          style({transform: 'translate(-100%)'}),\n          animate('150ms ease-in')\n        ])\n      ]\n    ),\n    trigger(\n      'contentEnter', [\n        transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n          style({transform: 'translate(100%)'}),\n          animate('150ms ease-in')\n        ])\n      ]\n    )\n  ]\n}"
+              "obj": "{\n  selector: 'sky-sectioned-form',\n  templateUrl: './sectioned-form.component.html',\n  styleUrls: ['./sectioned-form.component.scss'],\n  providers: [SkyVerticalTabsetService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('tabEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(-100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n    trigger('contentEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n  ],\n}"
             }
           }
         ],
@@ -55,7 +55,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 91,
+                "line": 79,
                 "character": 2
               }
             ],
@@ -121,7 +121,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 86,
+                "line": 74,
                 "character": 9
               }
             ],
@@ -160,7 +160,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 79,
+                "line": 67,
                 "character": 9
               }
             ],
@@ -206,7 +206,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 72,
+                "line": 60,
                 "character": 9
               }
             ],
@@ -240,7 +240,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 81,
+                "line": 69,
                 "character": 13
               }
             ],
@@ -269,7 +269,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 119,
+                "line": 108,
                 "character": 9
               }
             ],
@@ -306,7 +306,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 124,
+                "line": 113,
                 "character": 9
               }
             ],
@@ -343,7 +343,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 95,
+                "line": 84,
                 "character": 9
               }
             ],
@@ -380,7 +380,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 134,
+                "line": 123,
                 "character": 9
               }
             ],
@@ -409,7 +409,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-                "line": 129,
+                "line": 118,
                 "character": 9
               }
             ],
@@ -468,7 +468,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.component.ts",
-            "line": 64,
+            "line": 51,
             "character": 13
           }
         ],
@@ -501,7 +501,7 @@
               "name": "NgModule"
             },
             "arguments": {
-              "obj": "{\n  declarations: [\n    SkySectionedFormComponent,\n    SkySectionedFormSectionComponent\n  ],\n  imports: [\n    CommonModule,\n    SkyCheckboxModule,\n    SkyThemeModule,\n    SkyVerticalTabsetModule\n  ],\n  exports: [\n    SkySectionedFormComponent,\n    SkySectionedFormSectionComponent\n  ]\n}"
+              "obj": "{\n  declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n  imports: [\n    CommonModule,\n    SkyCheckboxModule,\n    SkyThemeModule,\n    SkyVerticalTabsetModule,\n  ],\n  exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n}"
             }
           }
         ],
@@ -540,7 +540,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.module.ts",
-            "line": 25,
+            "line": 19,
             "character": 13
           }
         ]
@@ -694,7 +694,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form.service.ts",
-            "line": 10,
+            "line": 6,
             "character": 13
           }
         ]
@@ -713,7 +713,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: [\n    SkyTabComponent,\n    SkyTabsetComponent,\n    SkyTabsetNavButtonComponent\n  ]\n}"
+              "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}"
             }
           }
         ],
@@ -752,7 +752,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tabs.module.ts",
-            "line": 71,
+            "line": 43,
             "character": 13
           }
         ]
@@ -771,7 +771,7 @@
               "name": "NgModule"
             },
             "arguments": {
-              "obj": "{\n  declarations: [\n    SkyVerticalTabsetComponent,\n    SkyVerticalTabsetGroupComponent,\n    SkyVerticalTabComponent\n  ],\n  imports: [\n    CommonModule,\n    SkyChevronModule,\n    SkyIconModule,\n    SkyStatusIndicatorModule,\n    SkyTabsResourcesModule,\n    SkyThemeModule\n  ],\n  providers: [\n    SkyVerticalTabsetAdapterService\n  ],\n  exports: [\n    SkyVerticalTabsetComponent,\n    SkyVerticalTabsetGroupComponent,\n    SkyVerticalTabComponent\n  ]\n}"
+              "obj": "{\n  declarations: [\n    SkyVerticalTabsetComponent,\n    SkyVerticalTabsetGroupComponent,\n    SkyVerticalTabComponent,\n  ],\n  imports: [\n    CommonModule,\n    SkyChevronModule,\n    SkyIconModule,\n    SkyStatusIndicatorModule,\n    SkyTabsResourcesModule,\n    SkyThemeModule,\n  ],\n  providers: [SkyVerticalTabsetAdapterService],\n  exports: [\n    SkyVerticalTabsetComponent,\n    SkyVerticalTabsetGroupComponent,\n    SkyVerticalTabComponent,\n  ],\n}"
             }
           }
         ],
@@ -810,7 +810,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.module.ts",
-            "line": 62,
+            "line": 44,
             "character": 13
           }
         ]
@@ -829,7 +829,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-tab',\n  templateUrl: './tab.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n}"
+              "obj": "{\n  selector: 'sky-tab',\n  templateUrl: './tab.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n}"
             }
           }
         ],
@@ -843,7 +843,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 165,
+                "line": 154,
                 "character": 2
               }
             ],
@@ -921,7 +921,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 130,
+                "line": 119,
                 "character": 9
               }
             ],
@@ -967,7 +967,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 68,
+                "line": 55,
                 "character": 9
               }
             ],
@@ -987,7 +987,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 147,
+                "line": 136,
                 "character": 9
               }
             ],
@@ -1008,7 +1008,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 149,
+                "line": 138,
                 "character": 9
               }
             ],
@@ -1041,7 +1041,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 90,
+                "line": 79,
                 "character": 9
               }
             ],
@@ -1080,7 +1080,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 101,
+                "line": 90,
                 "character": 9
               }
             ],
@@ -1100,7 +1100,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 151,
+                "line": 140,
                 "character": 9
               }
             ],
@@ -1130,7 +1130,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 45,
+                "line": 35,
                 "character": 13
               }
             ],
@@ -1197,7 +1197,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 59,
+                "line": 46,
                 "character": 13
               }
             ],
@@ -1232,7 +1232,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 132,
+                "line": 121,
                 "character": 13
               }
             ],
@@ -1271,7 +1271,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 78,
+                "line": 65,
                 "character": 13
               }
             ],
@@ -1332,7 +1332,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 139,
+                "line": 128,
                 "character": 13
               }
             ],
@@ -1380,7 +1380,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 108,
+                "line": 97,
                 "character": 13
               }
             ],
@@ -1443,7 +1443,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 143,
+                "line": 132,
                 "character": 13
               }
             ],
@@ -1479,7 +1479,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 195,
+                "line": 184,
                 "character": 9
               }
             ],
@@ -1508,7 +1508,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 201,
+                "line": 190,
                 "character": 9
               }
             ],
@@ -1537,7 +1537,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 191,
+                "line": 180,
                 "character": 9
               }
             ],
@@ -1566,7 +1566,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 175,
+                "line": 164,
                 "character": 9
               }
             ],
@@ -1616,7 +1616,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-                "line": 186,
+                "line": 175,
                 "character": 9
               }
             ],
@@ -1692,7 +1692,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tab.component.ts",
-            "line": 37,
+            "line": 28,
             "character": 13
           }
         ],
@@ -1721,7 +1721,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-tabset',\n  styleUrls: ['./tabset.component.scss'],\n  templateUrl: './tabset.component.html',\n  providers: [\n    SkyTabsetAdapterService,\n    SkyTabsetPermalinkService,\n    SkyTabsetService\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n}"
+              "obj": "{\n  selector: 'sky-tabset',\n  styleUrls: ['./tabset.component.scss'],\n  templateUrl: './tabset.component.html',\n  providers: [\n    SkyTabsetAdapterService,\n    SkyTabsetPermalinkService,\n    SkyTabsetService,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n}"
             }
           }
         ],
@@ -1735,7 +1735,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 245,
+                "line": 221,
                 "character": 2
               }
             ],
@@ -1841,7 +1841,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 189,
+                "line": 165,
                 "character": 9
               }
             ],
@@ -1882,7 +1882,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 130,
+                "line": 106,
                 "character": 9
               }
             ],
@@ -1915,7 +1915,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 139,
+                "line": 115,
                 "character": 9
               }
             ],
@@ -1935,7 +1935,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 223,
+                "line": 199,
                 "character": 9
               }
             ],
@@ -1968,7 +1968,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 196,
+                "line": 172,
                 "character": 9
               }
             ],
@@ -2008,7 +2008,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 203,
+                "line": 179,
                 "character": 9
               }
             ],
@@ -2035,7 +2035,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 231,
+                "line": 207,
                 "character": 9
               }
             ],
@@ -2072,7 +2072,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 209,
+                "line": 185,
                 "character": 9
               }
             ],
@@ -2112,7 +2112,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 221,
+                "line": 197,
                 "character": 9
               }
             ],
@@ -2149,7 +2149,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 92,
+                "line": 68,
                 "character": 13
               }
             ],
@@ -2222,7 +2222,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 148,
+                "line": 124,
                 "character": 13
               }
             ],
@@ -2283,7 +2283,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 211,
+                "line": 187,
                 "character": 13
               }
             ],
@@ -2350,7 +2350,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 169,
+                "line": 145,
                 "character": 13
               }
             ],
@@ -2423,7 +2423,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 253,
+                "line": 229,
                 "character": 9
               }
             ],
@@ -2460,7 +2460,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 282,
+                "line": 257,
                 "character": 9
               }
             ],
@@ -2497,7 +2497,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 305,
+                "line": 280,
                 "character": 9
               }
             ],
@@ -2526,7 +2526,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 309,
+                "line": 284,
                 "character": 9
               }
             ],
@@ -2555,7 +2555,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 301,
+                "line": 276,
                 "character": 9
               }
             ],
@@ -2597,7 +2597,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 293,
+                "line": 268,
                 "character": 9
               }
             ],
@@ -2639,7 +2639,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-                "line": 289,
+                "line": 264,
                 "character": 9
               }
             ],
@@ -2708,7 +2708,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tabset.component.ts",
-            "line": 86,
+            "line": 63,
             "character": 13
           }
         ],
@@ -2737,7 +2737,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-vertical-tab',\n  templateUrl: './vertical-tab.component.html',\n  styleUrls: ['./vertical-tab.component.scss'],\n  providers: [\n    SkyVerticalTabMediaQueryService,\n    { provide: SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n}"
+              "obj": "{\n  selector: 'sky-vertical-tab',\n  templateUrl: './vertical-tab.component.html',\n  styleUrls: ['./vertical-tab.component.scss'],\n  providers: [\n    SkyVerticalTabMediaQueryService,\n    {\n      provide: SkyMediaQueryService,\n      useExisting: SkyVerticalTabMediaQueryService,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n}"
             }
           }
         ],
@@ -2751,7 +2751,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 178,
+                "line": 171,
                 "character": 2
               }
             ],
@@ -2840,7 +2840,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 52,
+                "line": 43,
                 "character": 9
               }
             ],
@@ -2874,7 +2874,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 102,
+                "line": 93,
                 "character": 9
               }
             ],
@@ -2895,7 +2895,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 159,
+                "line": 152,
                 "character": 9
               }
             ],
@@ -2927,7 +2927,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 162,
+                "line": 155,
                 "character": 9
               }
             ],
@@ -2966,7 +2966,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 115,
+                "line": 106,
                 "character": 9
               }
             ],
@@ -3005,7 +3005,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 122,
+                "line": 113,
                 "character": 9
               }
             ],
@@ -3038,7 +3038,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 141,
+                "line": 132,
                 "character": 9
               }
             ],
@@ -3068,7 +3068,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 60,
+                "line": 51,
                 "character": 13
               }
             ],
@@ -3139,7 +3139,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 88,
+                "line": 79,
                 "character": 13
               }
             ],
@@ -3206,7 +3206,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 143,
+                "line": 134,
                 "character": 13
               }
             ],
@@ -3261,7 +3261,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 223,
+                "line": 217,
                 "character": 9
               }
             ],
@@ -3290,7 +3290,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 208,
+                "line": 202,
                 "character": 9
               }
             ],
@@ -3327,7 +3327,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 185,
+                "line": 178,
                 "character": 9
               }
             ],
@@ -3376,7 +3376,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 233,
+                "line": 227,
                 "character": 9
               }
             ],
@@ -3405,7 +3405,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 237,
+                "line": 233,
                 "character": 9
               }
             ],
@@ -3434,7 +3434,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-                "line": 215,
+                "line": 209,
                 "character": 9
               }
             ],
@@ -3499,7 +3499,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tab.component.ts",
-            "line": 47,
+            "line": 38,
             "character": 13
           }
         ],
@@ -3531,7 +3531,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-sectioned-form-section',\n  templateUrl: './sectioned-form-section.component.html',\n  providers: [SkySectionedFormService],\n  styleUrls: ['./sectioned-form-section.component.scss']\n}"
+              "obj": "{\n  selector: 'sky-sectioned-form-section',\n  templateUrl: './sectioned-form-section.component.html',\n  providers: [SkySectionedFormService],\n  styleUrls: ['./sectioned-form-section.component.scss'],\n}"
             }
           }
         ],
@@ -3545,7 +3545,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 81,
+                "line": 71,
                 "character": 2
               }
             ],
@@ -3630,7 +3630,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 62,
+                "line": 52,
                 "character": 9
               }
             ],
@@ -3650,7 +3650,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 73,
+                "line": 63,
                 "character": 9
               }
             ],
@@ -3670,7 +3670,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 72,
+                "line": 62,
                 "character": 9
               }
             ],
@@ -3709,7 +3709,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 48,
+                "line": 38,
                 "character": 9
               }
             ],
@@ -3742,7 +3742,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 55,
+                "line": 45,
                 "character": 9
               }
             ],
@@ -3762,7 +3762,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 41,
+                "line": 31,
                 "character": 9
               }
             ],
@@ -3783,7 +3783,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 40,
+                "line": 30,
                 "character": 9
               }
             ],
@@ -3816,7 +3816,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 76,
+                "line": 66,
                 "character": 9
               }
             ],
@@ -3837,7 +3837,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 68,
+                "line": 58,
                 "character": 13
               }
             ],
@@ -3866,7 +3866,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 64,
+                "line": 54,
                 "character": 13
               }
             ],
@@ -3895,7 +3895,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 106,
+                "line": 95,
                 "character": 9
               }
             ],
@@ -3932,7 +3932,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-                "line": 87,
+                "line": 77,
                 "character": 9
               }
             ],
@@ -4001,7 +4001,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/sectioned-form/sectioned-form-section.component.ts",
-            "line": 39,
+            "line": 29,
             "character": 13
           }
         ],
@@ -4030,7 +4030,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-vertical-tabset',\n  templateUrl: './vertical-tabset.component.html',\n  styleUrls: ['./vertical-tabset.component.scss'],\n  providers: [\n    SkyVerticalTabsetService\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger(\n      'tabGroupEnter', [\n        transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n          style({transform: 'translate(-100%)'}),\n          animate('150ms ease-in')\n        ])\n      ]\n    ),\n    trigger(\n      'contentEnter', [\n        transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n          style({transform: 'translate(100%)'}),\n          animate('150ms ease-in')\n        ])\n      ]\n    )\n  ]\n}"
+              "obj": "{\n  selector: 'sky-vertical-tabset',\n  templateUrl: './vertical-tabset.component.html',\n  styleUrls: ['./vertical-tabset.component.scss'],\n  providers: [SkyVerticalTabsetService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('tabGroupEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(-100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n    trigger('contentEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n  ],\n}"
             }
           }
         ],
@@ -4044,7 +4044,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 127,
+                "line": 108,
                 "character": 2
               }
             ],
@@ -4133,7 +4133,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 112,
+                "line": 93,
                 "character": 9
               }
             ],
@@ -4185,7 +4185,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 118,
+                "line": 99,
                 "character": 9
               }
             ],
@@ -4230,7 +4230,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 105,
+                "line": 86,
                 "character": 9
               }
             ],
@@ -4264,7 +4264,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 78,
+                "line": 59,
                 "character": 9
               }
             ],
@@ -4296,7 +4296,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 115,
+                "line": 96,
                 "character": 9
               }
             ],
@@ -4345,7 +4345,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 89,
+                "line": 70,
                 "character": 13
               }
             ],
@@ -4412,7 +4412,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 171,
+                "line": 154,
                 "character": 9
               }
             ],
@@ -4449,7 +4449,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 176,
+                "line": 159,
                 "character": 9
               }
             ],
@@ -4486,7 +4486,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-                "line": 133,
+                "line": 115,
                 "character": 9
               }
             ],
@@ -4554,7 +4554,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset.component.ts",
-            "line": 72,
+            "line": 52,
             "character": 13
           }
         ],
@@ -4587,7 +4587,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\n  selector: 'sky-vertical-tabset-group',\n  templateUrl: './vertical-tabset-group.component.html',\n  styleUrls: ['./vertical-tabset-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger(\n      'tabSlide', [\n        transition(':enter', [\n          style({\n            height: '0',\n            visibility: 'hidden'\n          }),\n          animate('150ms ease-in', style({\n            height: '*',\n            visibility: 'visible'\n          }))\n        ]),\n        transition(':leave', [\n          style({\n            height: '*',\n            visibility: 'visible'\n          }),\n          animate('150ms ease-in', style({\n            height: '0',\n            visibility: 'hidden'\n          }))\n        ])\n      ])\n    ]\n}"
+              "obj": "{\n  selector: 'sky-vertical-tabset-group',\n  templateUrl: './vertical-tabset-group.component.html',\n  styleUrls: ['./vertical-tabset-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('tabSlide', [\n      transition(':enter', [\n        style({\n          height: '0',\n          visibility: 'hidden',\n        }),\n        animate(\n          '150ms ease-in',\n          style({\n            height: '*',\n            visibility: 'visible',\n          })\n        ),\n      ]),\n      transition(':leave', [\n        style({\n          height: '*',\n          visibility: 'visible',\n        }),\n        animate(\n          '150ms ease-in',\n          style({\n            height: '0',\n            visibility: 'hidden',\n          })\n        ),\n      ]),\n    ]),\n  ],\n}"
             }
           }
         ],
@@ -4601,7 +4601,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 103,
+                "line": 94,
                 "character": 2
               }
             ],
@@ -4674,7 +4674,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 73,
+                "line": 64,
                 "character": 9
               }
             ],
@@ -4707,7 +4707,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 79,
+                "line": 70,
                 "character": 9
               }
             ],
@@ -4737,7 +4737,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 86,
+                "line": 77,
                 "character": 13
               }
             ],
@@ -4804,7 +4804,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 122,
+                "line": 113,
                 "character": 9
               }
             ],
@@ -4841,7 +4841,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 108,
+                "line": 99,
                 "character": 9
               }
             ],
@@ -4878,7 +4878,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 135,
+                "line": 126,
                 "character": 9
               }
             ],
@@ -4907,7 +4907,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 139,
+                "line": 130,
                 "character": 9
               }
             ],
@@ -4936,7 +4936,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 143,
+                "line": 134,
                 "character": 9
               }
             ],
@@ -4965,7 +4965,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 150,
+                "line": 141,
                 "character": 9
               }
             ],
@@ -4994,7 +4994,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-                "line": 127,
+                "line": 118,
                 "character": 9
               }
             ],
@@ -5053,7 +5053,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/vertical-tabset/vertical-tabset-group.component.ts",
-            "line": 66,
+            "line": 58,
             "character": 13
           }
         ],
@@ -5086,7 +5086,7 @@
             "sources": [
               {
                 "fileName": "projects/tabs/src/modules/tabs/tabset-tab-indexes-change.ts",
-                "line": 7,
+                "line": 4,
                 "character": 2
               }
             ],
@@ -5110,7 +5110,7 @@
                       "sources": [
                         {
                           "fileName": "projects/tabs/src/modules/tabs/tabset-tab-indexes-change.ts",
-                          "line": 9,
+                          "line": 5,
                           "character": 4
                         }
                       ],
@@ -5128,7 +5128,7 @@
                       "sources": [
                         {
                           "fileName": "projects/tabs/src/modules/tabs/tabset-tab-indexes-change.ts",
-                          "line": 11,
+                          "line": 7,
                           "character": 4
                         }
                       ],
@@ -5166,7 +5166,7 @@
         "sources": [
           {
             "fileName": "projects/tabs/src/modules/tabs/tabset-tab-indexes-change.ts",
-            "line": 5,
+            "line": 3,
             "character": 17
           }
         ]
@@ -5298,209 +5298,169 @@
   },
   "codeExamples": [
     {
-      "fileName": "demo-address-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-address-form.component.html",
-      "rawContents": "<div>Address form</div>\n"
-    },
-    {
-      "fileName": "demo-address-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-address-form.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-demo-address-form',\n  templateUrl: './demo-address-form.component.html'\n})\nexport class DemoAddressFormComponent { }\n"
-    },
-    {
-      "fileName": "demo-information-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-information-form.component.html",
-      "rawContents": "<form\n  novalidate\n  [formGroup]=\"myForm\"\n>\n  <div\n    style=\"display: flex;\"\n  >\n    <div\n      class=\"sky-margin-inline-default\"\n      style=\"flex: 1;\"\n    >\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\n      style=\"flex: 1;\"\n    >\n      <sky-input-box>\n        <label\n          class=\"sky-control-label\"\n          [for]=\"idInput.id\"\n        >\n          ID\n        </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\"\n        class=\"alert alert-danger\"\n      >\n      </div>\n      <div *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"
-    },
-    {
-      "fileName": "demo-information-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-information-form.component.ts",
-      "rawContents": "import {\n  Component,\n  OnInit\n} from '@angular/core';\n\nimport {\n  FormBuilder,\n  FormGroup,\n  Validators\n} from '@angular/forms';\n\nimport {\n  SkySectionedFormService\n} from '@skyux/tabs';\n\n@Component({\n  selector: 'app-demo-information-form',\n  templateUrl: './demo-information-form.component.html'\n})\nexport class DemoInformationFormComponent implements OnInit {\n  public id: string = '5324901';\n  public myForm: FormGroup;\n  public name: string = '';\n  public nameRequired = false;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private sectionedFormService: SkySectionedFormService\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      name: [this.name],\n      nameRequired: [this.nameRequired],\n      id: [this.id, Validators.pattern('^[0-9]+$')]\n    });\n\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log(changes);\n      this.id = changes.id;\n      this.name = changes.name;\n      this.nameRequired = changes.nameRequired;\n      this.checkValidity();\n    });\n  }\n\n  public checkValidity(): void {\n    if (this.nameRequired) {\n      this.myForm.get('name').setValidators([Validators.required]);\n      this.sectionedFormService.requiredFieldChanged(true);\n    } else {\n      this.myForm.get('name').setValidators([]);\n      this.sectionedFormService.requiredFieldChanged(false);\n    }\n\n    if (!this.myForm.get('name').value && this.nameRequired) {\n      this.sectionedFormService.invalidFieldChanged(true);\n    } else {\n      this.sectionedFormService.invalidFieldChanged(false);\n    }\n  }\n}\n"
-    },
-    {
-      "fileName": "demo-phone-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-phone-form.component.html",
-      "rawContents": "<div>Phone form</div>\n"
-    },
-    {
-      "fileName": "demo-phone-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/demo-phone-form.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-demo-phone-form',\n  templateUrl: './demo-phone-form.component.html'\n})\nexport class DemoPhoneFormComponent { }\n"
-    },
-    {
-      "fileName": "sectioned-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.component.html",
-      "rawContents": "<sky-sectioned-form\n  (indexChanged)=\"onIndexChanged($event)\"\n>\n  <sky-sectioned-form-section\n    heading=\"Basic information\"\n  >\n    <app-demo-information-form></app-demo-information-form>\n  </sky-sectioned-form-section>\n  <sky-sectioned-form-section\n    active=\"true\"\n    heading=\"Addresses\"\n    itemCount=\"2\"\n  >\n    <app-demo-address-form></app-demo-address-form>\n  </sky-sectioned-form-section>\n  <sky-sectioned-form-section\n    heading=\"Phone numbers\"\n    itemCount=\"3\"\n  >\n    <app-demo-phone-form></app-demo-phone-form>\n  </sky-sectioned-form-section>\n</sky-sectioned-form>\n\n<p>\n  Active index: {{ activeIndexDisplay }}\n</p>\n"
-    },
-    {
-      "fileName": "sectioned-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-sectioned-form-demo',\n  templateUrl: './sectioned-form-demo.component.html'\n})\nexport class SectionedFormDemoComponent {\n\n  public activeIndexDisplay: number;\n\n  public onIndexChanged(newIndex: number): void {\n    this.activeIndexDisplay = newIndex;\n  }\n\n}\n"
-    },
-    {
-      "fileName": "sectioned-form-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  ReactiveFormsModule\n} from '@angular/forms';\n\nimport {\n  SkyIdModule\n} from '@skyux/core';\n\nimport {\n  SkyInputBoxModule\n} from '@skyux/forms';\n\nimport {\n  SkySectionedFormModule\n} from '@skyux/tabs';\n\nimport {\n  DemoAddressFormComponent\n} from './demo-address-form.component';\n\nimport {\n  DemoInformationFormComponent\n} from './demo-information-form.component';\n\nimport {\n  DemoPhoneFormComponent\n} from './demo-phone-form.component';\n\nimport {\n  SectionedFormDemoComponent\n} from './sectioned-form-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkySectionedFormModule\n  ],\n  declarations: [\n    DemoAddressFormComponent,\n    DemoInformationFormComponent,\n    DemoPhoneFormComponent,\n    SectionedFormDemoComponent\n  ],\n  exports: [\n    SectionedFormDemoComponent\n  ]\n})\n\nexport class SectionedFormDemoModule { }\n"
+      "fileName": ".eslintrc.json",
+      "filePath": "/projects/tabs/documentation/code-examples/.eslintrc.json",
+      "rawContents": "{\n  \"extends\": [\"../../.eslintrc.json\"],\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\"],\n      \"rules\": {\n        \"@angular-eslint/directive-selector\": [\n          \"error\",\n          {\n            \"type\": \"attribute\",\n            \"prefix\": \"app\",\n            \"style\": \"camelCase\"\n          }\n        ],\n        \"@angular-eslint/component-selector\": [\n          \"error\",\n          {\n            \"type\": \"element\",\n            \"prefix\": \"app\",\n            \"style\": \"kebab-case\"\n          }\n        ]\n      }\n    }\n  ]\n}\n"
     },
     {
-      "fileName": "demo-address-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-address-form.component.html",
+      "fileName": "address-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.html",
       "rawContents": "<div>Address form</div>\n"
     },
     {
-      "fileName": "demo-address-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-address-form.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-demo-address-form',\n  templateUrl: './demo-address-form.component.html'\n})\nexport class DemoAddressFormComponent { }\n"
+      "fileName": "address-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-address-form-demo',\n  templateUrl: './address-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AddressFormDemoComponent {}\n"
     },
     {
-      "fileName": "demo-information-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-information-form.component.html",
-      "rawContents": "<form\n  novalidate\n  [formGroup]=\"myForm\"\n>\n  <div\n    style=\"display: flex;\"\n  >\n    <div\n      class=\"sky-margin-inline-default\"\n      style=\"flex: 1;\"\n    >\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\n      style=\"flex: 1;\"\n    >\n      <sky-input-box>\n        <label\n          class=\"sky-control-label\"\n          [for]=\"idInput.id\"\n        >\n          ID\n        </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\"\n        class=\"alert alert-danger\"\n      >\n      </div>\n      <div *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"
+      "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-default\" 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"
     },
     {
-      "fileName": "demo-information-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-information-form.component.ts",
-      "rawContents": "import {\n  Component,\n  OnInit\n} from '@angular/core';\n\nimport {\n  FormBuilder,\n  FormGroup,\n  Validators\n} from '@angular/forms';\n\nimport {\n  SkySectionedFormService\n} from '@skyux/tabs';\n\n@Component({\n  selector: 'app-demo-information-form',\n  templateUrl: './demo-information-form.component.html'\n})\nexport class DemoInformationFormComponent implements OnInit {\n  public id: string = '5324901';\n  public myForm: FormGroup;\n  public name: string = '';\n  public nameRequired = false;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private sectionedFormService: SkySectionedFormService\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      name: [this.name],\n      nameRequired: [this.nameRequired],\n      id: [this.id, Validators.pattern('^[0-9]+$')]\n    });\n\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log(changes);\n      this.id = changes.id;\n      this.name = changes.name;\n      this.nameRequired = changes.nameRequired;\n      this.checkValidity();\n    });\n  }\n\n  public checkValidity(): void {\n    if (this.nameRequired) {\n      this.myForm.get('name').setValidators([Validators.required]);\n      this.sectionedFormService.requiredFieldChanged(true);\n    } else {\n      this.myForm.get('name').setValidators([]);\n      this.sectionedFormService.requiredFieldChanged(false);\n    }\n\n    if (!this.myForm.get('name').value && this.nameRequired) {\n      this.sectionedFormService.invalidFieldChanged(true);\n    } else {\n      this.sectionedFormService.invalidFieldChanged(false);\n    }\n  }\n}\n"
+      "fileName": "information-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkySectionedFormService } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-information-form-demo',\n  templateUrl: './information-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InformationFormDemoComponent implements OnInit {\n  public id: string = '5324901';\n  public myForm: FormGroup;\n  public name: string = '';\n  public nameRequired = false;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private sectionedFormService: SkySectionedFormService,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.myForm = this.formBuilder.group({\n      name: [this.name],\n      nameRequired: [this.nameRequired],\n      id: [this.id, Validators.pattern('^[0-9]+$')],\n    });\n  }\n\n  public ngOnInit(): void {\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log(changes);\n      this.id = changes.id;\n      this.name = changes.name;\n      this.nameRequired = changes.nameRequired;\n      this.checkValidity();\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public checkValidity(): void {\n    if (this.nameRequired) {\n      this.myForm.get('name')?.setValidators([Validators.required]);\n      this.sectionedFormService.requiredFieldChanged(true);\n    } else {\n      this.myForm.get('name')?.setValidators([]);\n      this.sectionedFormService.requiredFieldChanged(false);\n    }\n\n    if (!this.myForm.get('name')?.value && this.nameRequired) {\n      this.sectionedFormService.invalidFieldChanged(true);\n    } else {\n      this.sectionedFormService.invalidFieldChanged(false);\n    }\n  }\n}\n"
     },
     {
-      "fileName": "demo-phone-form.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-phone-form.component.html",
+      "fileName": "phone-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.html",
       "rawContents": "<div>Phone form</div>\n"
     },
     {
-      "fileName": "demo-phone-form.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-phone-form.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-demo-phone-form',\n  templateUrl: './demo-phone-form.component.html'\n})\nexport class DemoPhoneFormComponent { }\n"
+      "fileName": "phone-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-phone-form-demo',\n  templateUrl: './phone-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PhoneFormDemoComponent {}\n"
     },
     {
       "fileName": "sectioned-form-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.html",
-      "rawContents": "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"openModal()\"\n>\n  Open sectioned form\n</button>\n"
+      "rawContents": "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n  Open sectioned form\n</button>\n"
     },
     {
       "fileName": "sectioned-form-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\nimport {\n  SkyModalCloseArgs,\n  SkyModalService\n} from '@skyux/modals';\n\nimport {\n  SectionedModalFormDemoComponent\n} from './sectioned-modal-form-demo.component';\n\n@Component({\n  selector: 'app-sectioned-form-demo',\n  templateUrl: './sectioned-form-demo.component.html'\n})\nexport class SectionedFormDemoComponent {\n\n  constructor(\n    private modal: SkyModalService\n  ) { }\n\n  public openModal(): void {\n    let modalInstance = this.modal.open(SectionedModalFormDemoComponent);\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel') {\n        console.log(`Modal cancelled`);\n      } else if (result.reason === 'save') {\n        console.log(`Modal saved`);\n      }\n    });\n  }\n\n}\n"
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@Component({\n  selector: 'app-sectioned-form-demo',\n  templateUrl: './sectioned-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormDemoComponent {\n  constructor(private modal: SkyModalService) {}\n\n  public openModal(): void {\n    let modalInstance = this.modal.open(SectionedFormModalDemoComponent);\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel') {\n        console.log(`Modal cancelled`);\n      } else if (result.reason === 'save') {\n        console.log(`Modal saved`);\n      }\n    });\n  }\n}\n"
     },
     {
-      "fileName": "sectioned-form-tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  ReactiveFormsModule\n} from '@angular/forms';\n\nimport {\n  SkyIdModule\n} from '@skyux/core';\n\nimport {\n  SkyInputBoxModule\n} from '@skyux/forms';\n\nimport {\n  SkyModalModule\n} from '@skyux/modals';\n\nimport {\n  SkySectionedFormModule\n} from '@skyux/tabs';\n\nimport {\n  DemoAddressFormComponent\n} from './demo-address-form.component';\n\nimport {\n  DemoInformationFormComponent\n} from './demo-information-form.component';\n\nimport {\n  DemoPhoneFormComponent\n} from './demo-phone-form.component';\n\nimport {\n  SectionedFormDemoComponent\n} from './sectioned-form-demo.component';\n\nimport {\n  SectionedModalFormDemoComponent\n} from './sectioned-modal-form-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule\n  ],\n  declarations: [\n    DemoAddressFormComponent,\n    DemoInformationFormComponent,\n    DemoPhoneFormComponent,\n    SectionedFormDemoComponent,\n    SectionedModalFormDemoComponent\n  ],\n  entryComponents: [\n    SectionedModalFormDemoComponent\n  ],\n  exports: [\n    SectionedFormDemoComponent\n  ]\n})\n\nexport class SectionedFormDemoModule { }\n"
+      "fileName": "sectioned-form-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { SkyIdModule } from '@skyux/core';\n\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\n\nimport { InformationFormDemoComponent } from './information-form-demo.component';\n\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\n\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\n\n@NgModule({\n  declarations: [\n    AddressFormDemoComponent,\n    InformationFormDemoComponent,\n    PhoneFormDemoComponent,\n    SectionedFormModalDemoComponent,\n    SectionedFormDemoComponent,\n  ],\n  entryComponents: [SectionedFormModalDemoComponent],\n  exports: [SectionedFormDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule,\n  ],\n})\nexport class SectionedFormDemoModule {}\n"
     },
     {
-      "fileName": "sectioned-modal-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-modal-form-demo.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header>\n      Sectioned form — Index: {{ activeIndexDisplay }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-sectioned-form\n      (indexChanged)=\"onIndexChanged($event)\"\n    >\n      <sky-sectioned-form-section\n        heading=\"Basic information\"\n      >\n        <app-demo-information-form></app-demo-information-form>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        itemCount=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-demo-address-form></app-demo-address-form>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Phone numbers\"\n        itemCount=\"3\"\n      >\n        <app-demo-phone-form></app-demo-phone-form>\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button *ngIf=\"tabsHidden()\"\n      class=\"sky-btn sky-btn-secondary\"\n      type=\"button\"\n      (click)=\"showTabs()\"\n    >\n      Show sections\n    </button>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "sectioned-form-modal-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    Sectioned form — Index: {{ activeIndexDisplay }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-sectioned-form (indexChanged)=\"onIndexChanged($event)\">\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form-demo></app-information-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form-demo></app-address-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form-demo></app-phone-form-demo>\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      *ngIf=\"tabsHidden()\"\n      class=\"sky-btn sky-btn-secondary\"\n      type=\"button\"\n      (click)=\"showTabs()\"\n    >\n      Show sections\n    </button>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "sectioned-modal-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-modal-form-demo.component.ts",
-      "rawContents": "import {\n  Component,\n  ViewChild\n} from '@angular/core';\n\nimport {\n  SkyModalInstance\n} from '@skyux/modals';\n\nimport {\n  SkySectionedFormComponent\n} from '@skyux/tabs';\n\n@Component({\n  selector: 'app-sectioned-modal-form-demo',\n  templateUrl: './sectioned-modal-form-demo.component.html'\n})\nexport class SectionedModalFormDemoComponent {\n\n  public activeIndexDisplay: number = undefined;\n\n  public activeTab = true;\n\n  @ViewChild(SkySectionedFormComponent)\n  public sectionedFormComponent: SkySectionedFormComponent;\n\n  constructor(\n    public modalInstance: SkyModalInstance\n  ) { }\n\n  public onIndexChanged(newIndex: number): void {\n    this.activeIndexDisplay = newIndex;\n  }\n\n  public tabsHidden(): boolean {\n    return !this.sectionedFormComponent?.tabsVisible();\n  }\n\n  public showTabs(): void {\n    this.sectionedFormComponent.showTabs();\n  }\n\n}\n"
+      "fileName": "sectioned-form-modal-demo.component.ts",
+      "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  constructor(\n    public modalInstance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\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\n  ariaLabel=\"Tab demonstration\"\n>\n  <sky-tab\n    [tabHeaderCount]=\"25012\"\n    [tabHeading]=\"'Tab 1'\"\n  >\n    A list containing 25012 items\n  </sky-tab>\n  <sky-tab\n    [tabHeaderCount]=\"280\"\n    [tabHeading]=\"'Tab 2'\"\n  >\n    A list containing 280 items\n  </sky-tab>\n  <sky-tab\n    [tabHeading]=\"'Tab 3'\"\n  >\n    This tab doesn't have a list of items\n  </sky-tab>\n</sky-tabset>\n"
+      "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 {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html'\n})\nexport class TabsDemoComponent { }\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"
     },
     {
       "fileName": "tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/counts/tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyTabsModule\n} from '@skyux/tabs';\n\nimport {\n  TabsDemoComponent\n} from './tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyTabsModule\n  ],\n  declarations: [\n    TabsDemoComponent\n  ],\n  exports: [\n    TabsDemoComponent\n  ]\n})\nexport class TabsDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\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/tabs-demo.component.html",
-      "rawContents": "<sky-tabset\n  ariaLabel=\"Tab demonstration\"\n>\n  <sky-tab *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\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"
     },
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html'\n})\nexport class TabsDemoComponent {\n\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      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"
     },
     {
       "fileName": "tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyTabsModule\n} from '@skyux/tabs';\n\nimport {\n  TabsDemoComponent\n} from './tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyTabsModule\n  ],\n  declarations: [\n    TabsDemoComponent\n  ],\n  exports: [\n    TabsDemoComponent\n  ]\n})\nexport class TabsDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\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",
-      "rawContents": "<sky-tabset\n  ariaLabel=\"Tab demonstration\"\n  (newTab)=\"onNewTabClick()\"\n>\n  <sky-tab *ngFor=\"let tab of tabArray; let i = index\"\n    [tabHeading]=\"tab.tabHeading\"\n    (close)=\"onCloseClick(i)\"\n  >\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n  <sky-tab\n    *ngFor=\"let tab of tabArray; let i = index\"\n    [tabHeading]=\"tab.tabHeading\"\n    (close)=\"onCloseClick(i)\"\n  >\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html'\n})\nexport class TabsDemoComponent {\n\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: number = 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  private tabCounter: number = 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",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyTabsModule\n} from '@skyux/tabs';\n\nimport {\n  TabsDemoComponent\n} from './tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyTabsModule\n  ],\n  declarations: [\n    TabsDemoComponent\n  ],\n  exports: [\n    TabsDemoComponent\n  ]\n})\nexport class TabsDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\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/static/tabs-demo.component.html",
-      "rawContents": "<sky-tabset\n  ariaLabel=\"Tab demonstration\"\n>\n  <sky-tab\n    [tabHeading]=\"'Tab 1'\"\n  >\n    Content for Tab 1\n  </sky-tab>\n  <sky-tab\n    [tabHeading]=\"'Tab 2'\"\n  >\n    Content for Tab 2\n  </sky-tab>\n  <sky-tab\n    [tabHeading]=\"'Tab 3'\"\n  >\n    Content for Tab 3\n  </sky-tab>\n</sky-tabset>\n"
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 3'\"> Content for Tab 3 </sky-tab>\n</sky-tabset>\n"
     },
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html'\n})\nexport class TabsDemoComponent { }\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"
     },
     {
       "fileName": "tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyTabsModule\n} from '@skyux/tabs';\n\nimport {\n  TabsDemoComponent\n} from './tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyTabsModule\n  ],\n  declarations: [\n    TabsDemoComponent\n  ],\n  exports: [\n    TabsDemoComponent\n  ]\n})\nexport class TabsDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\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/static-add-close/tabs-demo.component.html",
-      "rawContents": "<sky-tabset\n  ariaLabel=\"Tab demonstration\"\n  (newTab)=\"onNewTabClick()\"\n>\n  <sky-tab\n    [tabHeading]=\"'Tab 1'\"\n  >\n    Content for Tab 1\n  </sky-tab>\n  <sky-tab\n    [tabHeading]=\"'Tab 2'\"\n  >\n    Content for Tab 2\n  </sky-tab>\n  <sky-tab *ngIf=\"showTab3\"\n    [tabHeading]=\"'Tab 3'\"\n    (close)=\"showTab3 = false\"\n  >\n    Content for Tab 3\n  </sky-tab>\n</sky-tabset>\n"
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n  <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n  <sky-tab *ngIf=\"showTab3\" [tabHeading]=\"'Tab 3'\" (close)=\"showTab3 = false\">\n    Content for Tab 3\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
       "fileName": "tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html'\n})\nexport class TabsDemoComponent {\n\n  public showTab3: boolean = true;\n\n  public onNewTabClick(): void {\n    console.log('Add tab clicked!');\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 showTab3: boolean = true;\n\n  public onNewTabClick(): void {\n    console.log('Add tab clicked!');\n  }\n}\n"
     },
     {
       "fileName": "tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyTabsModule\n} from '@skyux/tabs';\n\nimport {\n  TabsDemoComponent\n} from './tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyTabsModule\n  ],\n  declarations: [\n    TabsDemoComponent\n  ],\n  exports: [\n    TabsDemoComponent\n  ]\n})\nexport class TabsDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\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": "vertical-tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.html",
-      "rawContents": "<sky-vertical-tabset>\n  <sky-vertical-tab tabHeading=\"Tab 1\">\n    Tab 1 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" active=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\">\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n"
+      "rawContents": "<sky-vertical-tabset>\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" active=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\"> Tab 3 content </sky-vertical-tab>\n</sky-vertical-tabset>\n"
     },
     {
       "fileName": "vertical-tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html'\n})\nexport class VerticalTabDemoComponent { }\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class VerticalTabDemoComponent {}\n"
     },
     {
       "fileName": "vertical-tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.module.ts",
-      "rawContents": "\nimport {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyVerticalTabsetModule\n} from '@skyux/tabs';\n\nimport {\n  VerticalTabDemoComponent\n} from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyVerticalTabsetModule\n  ],\n  declarations: [\n    VerticalTabDemoComponent\n  ],\n  exports: [\n    VerticalTabDemoComponent\n  ]\n})\n\nexport class SkyVerticalTabDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { VerticalTabDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [VerticalTabDemoComponent],\n  exports: [VerticalTabDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
     },
     {
       "fileName": "vertical-tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.html",
-      "rawContents": "<sky-vertical-tabset\n    showTabsText=\"Tab list\"\n    >\n\n    <sky-vertical-tabset-group\n      *ngFor=\"let group of groups\"\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\">\n\n      <sky-vertical-tab\n        *ngFor=\"let tab of group.subTabs\"\n        [active]=\"tab.active\"\n        [tabHeading]=\"tab.tabHeading\"\n        [tabHeaderCount]=\"tab.tabHeaderCount\"\n        [disabled]=\"tab.disabled\">\n        {{ tab.content }}\n      </sky-vertical-tab>\n    </sky-vertical-tabset-group>\n  </sky-vertical-tabset>\n\n"
+      "rawContents": "<sky-vertical-tabset showTabsText=\"Tab list\">\n  <sky-vertical-tabset-group\n    *ngFor=\"let group of groups\"\n    [groupHeading]=\"group.heading\"\n    [open]=\"group.isOpen\"\n    [disabled]=\"group.isDisabled\"\n  >\n    <sky-vertical-tab\n      *ngFor=\"let tab of group.subTabs\"\n      [active]=\"tab.active\"\n      [tabHeading]=\"tab.tabHeading\"\n      [tabHeaderCount]=\"tab.tabHeaderCount\"\n      [disabled]=\"tab.disabled\"\n    >\n      {{ tab.content }}\n    </sky-vertical-tab>\n  </sky-vertical-tabset-group>\n</sky-vertical-tabset>\n"
     },
     {
       "fileName": "vertical-tabs-demo.component.ts",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html'\n})\nexport class SkyVerticalTabsDemoComponent {\n  public groups: any[];\n\n  constructor() {\n    this.groups = [\n      {\n        heading: 'Group 1',\n        isOpen: false,\n        isDisabled: false,\n        subTabs: [\n          { tabHeading: 'Group 1 — Tab 1', content: 'Group 1 — Tab 1 Content'},\n          { tabHeading: 'Group 1 — Tab 2', content: 'Group 1 — Tab 2 Content', tabHeaderCount: 7}]\n      },\n      {\n        heading: 'Group 2',\n        isOpen: true,\n        isDisabled: false,\n        subTabs: [\n          { tabHeading: 'Group 2 — Tab 1', content: 'Group 2 — Tab 1 Content', active: true},\n          { tabHeading: 'Group 2 — Tab 2 — Disabled',\n            content: 'Group 2 — Tab 2 Content',\n            disabled: true\n          }]\n      },\n      {\n        heading: 'Disabled',\n        isOpen: false,\n        isDisabled: true,\n        subTabs: []\n      }\n    ];\n  }\n\n  public tabChanged(newIndex: any) {\n    console.log(`new active ${newIndex}`);\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class SkyVerticalTabsDemoComponent {\n  public groups: any[];\n\n  constructor() {\n    this.groups = [\n      {\n        heading: 'Group 1',\n        isOpen: false,\n        isDisabled: false,\n        subTabs: [\n          { tabHeading: 'Group 1 — Tab 1', content: 'Group 1 — Tab 1 Content' },\n          {\n            tabHeading: 'Group 1 — Tab 2',\n            content: 'Group 1 — Tab 2 Content',\n            tabHeaderCount: 7,\n          },\n        ],\n      },\n      {\n        heading: 'Group 2',\n        isOpen: true,\n        isDisabled: false,\n        subTabs: [\n          {\n            tabHeading: 'Group 2 — Tab 1',\n            content: 'Group 2 — Tab 1 Content',\n            active: true,\n          },\n          {\n            tabHeading: 'Group 2 — Tab 2 — Disabled',\n            content: 'Group 2 — Tab 2 Content',\n            disabled: true,\n          },\n        ],\n      },\n      {\n        heading: 'Disabled',\n        isOpen: false,\n        isDisabled: true,\n        subTabs: [],\n      },\n    ];\n  }\n\n  public tabChanged(newIndex: any) {\n    console.log(`new active ${newIndex}`);\n  }\n}\n"
     },
     {
       "fileName": "vertical-tabs-demo.module.ts",
       "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.module.ts",
-      "rawContents": "\nimport {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyVerticalTabsetModule\n} from '@skyux/tabs';\n\nimport {\n  SkyVerticalTabsDemoComponent\n} from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyVerticalTabsetModule\n  ],\n  declarations: [\n    SkyVerticalTabsDemoComponent\n  ],\n  exports: [\n    SkyVerticalTabsDemoComponent\n  ]\n})\n\nexport class SkyVerticalTabDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { SkyVerticalTabsDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [SkyVerticalTabsDemoComponent],\n  exports: [SkyVerticalTabsDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
     }
   ]
 }